Add outcome visualization and fix interaction bugs (#5)

* Add outcome distribution visualization with interactive detail modal

Adds a compact stacked bar graph above zoom controls showing the probability distribution across outcome categories (good, ambivalent, existential). Users can click the graph to open a detailed modal displaying individual outcome probabilities and a larger visual breakdown.

Key features:
- Real-time probability calculations by outcome category
- Compact bar chart with saturated colors (70% saturation)
- Clickable modal with dual-pane layout: visual distribution and detailed list
- Custom tooltips and proper formatting (categories: 0 decimals, outcomes: 1 decimal)
- Port management documentation updates for multi-worktree development

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

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

* Fix pre-commit hooks and apply code formatting

- Install eslint-config-prettier to fix ESLint configuration
- Make pre-commit hook executable (chmod +x)
- Apply Prettier formatting to all modified files (quote style, line breaks)
- Verify TypeScript type-check passes with no errors
- Verify ESLint runs successfully (only pre-existing warnings remain)

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

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

* Fix font family and weight in outcome visualization components

- Explicitly set font-family to Plus Jakarta Sans to ensure consistent rendering
- Change percentage text from font-bold to font-normal (weight 400) for lighter appearance
- Fix "3" character rendering with proper rounded top instead of flat top
- Keep modal header at font-extrabold for proper emphasis

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

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

* Fix node dragging bug when scrolling during drag

When dragging a node and scrolling with the mouse wheel (normal or
shift+scroll), the node would stay at its original position instead
of following the cursor. This was caused by using delta-based
positioning from a fixed reference point that didn't account for
scroll offset changes.

Solution: Use absolute canvas coordinate conversion (screenToCanvasCoords)
on every mouse move, similar to how arrow connector dragging works. This
function always reads the current scroll position, so nodes correctly
track the cursor even when the viewport moves.

Changes:
- Added screenToCanvasCoords function to Flowchart component
- Pass screenToCanvasCoords to Node components as prop
- Updated Node drag logic to store offset from mouse to node center
- Use screenToCanvasCoords in handleMouseDown, handleGlobalMouseMove,
  and handleGlobalMouseUp to calculate positions using current scroll state

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

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

* Fix pin button hover flickering when node layout shifts

When hovering the pin button to preview probability root, the node
shows 100% probability (3 digits instead of 2), which can widen the
probability badge, cause text wrapping, and make the node taller.
This pushes the pin button upward, and if the cursor is at the
button's bottom edge, it moves away causing hover to end, which
reverts the layout, creating an infinite flashing loop.

Solution: Add a conditional extended hover zone that activates only
during hover. When isPinHovered is true, a 10px transparent padding
zone extends below the button, keeping the cursor within the hover
area even when the button shifts upward.

Changes:
- Add isPinHovered state to track pin button hover
- Wrap both pin button instances in divs with conditional padding
- Move hover handlers to wrapper divs to control extended zone
- Update button background to stay orange during hover

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

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

---------

Co-authored-by: Claude <[email protected]>

Author: lucbrinkman

.husky/pre-commit

@@ -22,9 +22,21 @@ Next.js application called "Map of AI Futures" - an interactive probability flow
 - `npm run build` - Build for production
 - `npm run lint` - Run ESLint
 
+**Port Management:**
+
+- **IMPORTANT:** Each worktree MUST use its designated port:
+  - **WorkTree1** (`ai-world-model-worktree-1`): Port **3000**
+  - **WorkTree2** (`ai-world-model-worktree-2`): Port **3001**
+- **NEVER** start a dev server on a different port without explicit user permission
+- **Before starting a dev server:**
+  1. Check which worktree you're in (from working directory)
+  2. Determine the correct port (3000 for WorkTree1, 3001 for WorkTree2)
+  3. Kill any process on that port: `fuser -k <port>/tcp`
+  4. Start dev server with: `npm run dev -- -p <port>` (e.g., `npm run dev -- -p 3001`)
+
 **Process Management:**
 
-- **To stop a dev server cleanly:** `fuser -k <port>/tcp` (e.g., `fuser -k 3000/tcp`)
+- **To stop a dev server cleanly:** `fuser -k <port>/tcp` (e.g., `fuser -k 3000/tcp` or `fuser -k 3001/tcp`)
   - This kills all processes using that port, including orphaned child processes
   - More reliable than KillShell which can leave next-server processes running
   - Prevents accumulation of zombie processes that consume CPU/memory