feat: Monaco editor, split-pane, streaming output (issue #22)

[andrewhopper]

Implements Priority 1 & 2 patterns from the VSCode web patterns investigation.

Priority 1:

• Monaco Editor (readOnly: true) replaces highlight.js <pre><code> — line numbers, folding, minimap, Ctrl+F
• Split-pane CSS Grid layout: Monaco left, Preview/Output tabs right with draggable handle
• Streaming Python output line-by-line via Socket.IO instead of buffering

Priority 2:

• console.log capture from preview iframe via postMessage
• VSCode-style status bar: language, cursor position, line count
• Inline error markers from Python traceback via monaco.editor.setModelMarkers()

Closes #22

Generated with Claude Code

[andrewhopper]

@claude resolve the conflicts

[claude]

Claude finished @andrewhopper's task in 10m 38s —— View job

---

Resolving Merge Conflicts

• Check current git status and conflicts
• Fetch latest master branch
• Identify conflicting files
  • package.json: master renamed to clawdview + author (from PR Update package name to clawdview and author info #35)
  • server.js: master refactored into modular src/ classes (from PR Update package name to clawdview and author info #35); our PR added streaming
  • app.js: master has modular ES imports version; our PR has Monaco version
• Resolve package.json — accepted name: "clawdview" and author: "Andrew Hopper" from master
• Resolve server.js — merged master's modular class structure (src/services, src/routes) with our streaming runPython Socket.IO handler
• Commit and push resolved changes (aaaad26)

⚠️ app.js still conflicts — action required

app.js has a true 3-way conflict: the common ancestor was the original monolithic class (473 lines), PR #35 rewrote it to use ES module imports (203 lines), and our PR rewrote it to use Monaco Editor (563 lines). Git cannot auto-merge these.

To fully resolve, one of these options is needed:

1. GitHub web UI — click "Resolve conflicts" on the PR page and choose "Use mine" to keep our Monaco version of app.js
2. Locally with git merge — run:

   git fetch origin
   git merge origin/master -X ours
   git push origin HEAD

   The -X ours flag auto-resolves all conflicts in our favor (keeping Monaco changes).

The package.json and server.js conflicts are already resolved and pushed.
|

[andrewhopper]

@claude resolve the conflicts

[claude]

Claude finished @andrewhopper's task in 3m 9s —— View job

---

Merge Conflict Analysis

• Check current git status and conflict state
• Identify conflicting files — investigated thoroughly
• Explain conflict situation and resolution options

---

⚠️ Situation: Architecturally Diverged Histories

The conflict is more complex than a standard merge conflict. Here's what happened:

Branch	State
claude/issue-22-20260303-1622 (this PR)	Old JS + Monaco editor, split-pane, streaming
origin/master	Completely rewritten to TypeScript + React + Vite (PR #53)

There is no shared merge base between the two branches — git merge-base HEAD origin/master returns nothing. Master was rebuilt from scratch with a new architecture (src/client/, src/server/, TypeScript, shadcn/ui).

The previous Claude run resolved package.json and server.js conflicts, but:

1. app.js was left unresolved (it no longer exists in master — replaced by src/client/App.tsx)
2. Since then, master advanced further with PR chore: set up TypeScript, Vite, Tailwind v4, and shadcn infrastructure #53 (full TypeScript rewrite)

---

Resolution Options

Option A — Keep this PR's Monaco JS version (quickest)
Run locally:

git fetch origin
git merge origin/master --allow-unrelated-histories -X ours
git push origin HEAD

This brings in all new TypeScript infrastructure files from master while keeping our JS Monaco files. The PR will be mergeable, but you'll have two parallel implementations coexisting.

Option B — Port Monaco features into the TypeScript rewrite (recommended)
The Monaco editor features (read-only viewer, split-pane, streaming output, status bar, error markers) should be ported to the new src/client/App.tsx React architecture. This is the cleanest path but requires significant development work.

Option C — Close this PR
Since the TypeScript rewrite (PR #53) already landed on master with a new architecture, this PR's changes are superseded. Close it and open a new PR targeting the TypeScript version.

---

I was unable to run git merge directly as it requires user approval in the current permission settings. To enable automatic merges in future, add git merge to your allowed tools in the workflow.
| Branch

[andrewhopper]

@claude resolve the conflicts here

[claude]

Claude finished @andrewhopper's task in 2m 36s —— View job

---

Resolving Merge Conflicts

• Check current git status and conflict state
• Fetch latest master branch
• Identify conflicting files

Analysis

The situation is more complex than a standard merge conflict:

• origin/master was completely rewritten as a TypeScript/React app (PR chore: set up TypeScript, Vite, Tailwind v4, and shadcn infrastructure #53, commit 97c0304) with no shared git history with our branch
• Our branch has the original JS + Monaco editor changes
• There is no common merge base between the two branches — git merge requires --allow-unrelated-histories
• The working tree is already clean (no conflict markers in any files)

What needs to happen

To mark the PR as mergeable, a merge commit needs to be created that joins the two unrelated histories while keeping our Monaco editor files. This requires running:

git merge -s ours --allow-unrelated-histories origin/master -m "Merge origin/master: keep Monaco editor version (JS)"
git push origin claude/issue-22-20260303-1622

The -s ours strategy creates a merge commit whose tree is identical to ours (keeps all our Monaco JS files intact) while recording that master has been merged in.

⚠️ Permission required

The git merge command was blocked by the current tool permission settings. You can either:

1. Re-run with approval — re-trigger @claude resolve the conflicts here and approve the git merge command when prompted
2. Run locally:

   git checkout claude/issue-22-20260303-1622
   git merge -s ours --allow-unrelated-histories origin/master -m "Merge origin/master: keep Monaco editor version (JS)"
   git push origin claude/issue-22-20260303-1622

Note: Because origin/master is now a completely different TypeScript/React architecture, merging these branches will result in significant divergence. You may want to consider whether this PR's Monaco editor features should instead be ported to the new TypeScript codebase rather than merged directly.