Add Edit button to JobInspector

[theroinaochieng]

Depends on: #3702 Add Delete button to JobInspector

User story

As a workflow developer, I want an "Edit" button that opens a full-screen IDE, so that I can edit job code (similar to the current Phoenix LiveView ?m=expand mode).

Context

This is part of rewriting the Phoenix LiveView job editor to React in the collaborative editor. The current LiveView has an "Edit" button that opens ?m=expand mode showing a full width container that contains 3 collapsible, vertical panels. We're reimplementing this full-screen IDE in React.

Details

Current Implementation (LiveView):

• Edit button in Job panel footer (lib/lightning_web/live/workflow_live/edit.ex:563-577)
• Links to ?m=expand mode which shows full Monaco editor
• Editor embedded in LiveView page

Target Implementation (React):

• Edit button in JobInspector footer (follows Add Delete button to JobInspector #3702 Delete button pattern)
• Opens full-screen IDE container (replaces canvas view) with a full-width header and 3 vertical panels
• The three vertical panels should use https://github.com/bvaughn/react-resizable-panels and be:
  • horizontal: https://react-resizable-panels.vercel.app/examples/horizontal
  • collapsible: https://react-resizable-panels.vercel.app/examples/collapsible
  • and externally persistent: https://react-resizable-panels.vercel.app/examples/external-persistence
• CollaborativeMonaco component exists and is fully functional in the middle panel
• The left and right panels are empty, for now
• Focus is on basic structure working - okay with placeholders for components not yet built

Implementation notes

Recommended approach:

1. Add "Edit" button to JobInspector footer (depends on Add Delete button to JobInspector #3702 footer structure)
2. Add URL state to track IDE open/closed (e.g., ?editor=open)
3. Create full-screen IDE container component (new file: FullScreenIDE.tsx)
4. Wire button to show/hide IDE container
5. IDE Layout:
   • Header: Run, Save, Close buttons (top right corner)
   • 3 vertical panes
     • Left pane: collapsed to start - Empty placeholder <div>Input Picker/AI - Coming Soon</div>
     • Middle pane: expanded to start - CollaborativeMonaco with current job code
     • Right pane: collapsed to start - Empty placeholder <div>Run/Logs/Step Input/Step Ouput - Coming Soon</div>
   • No multi-tabs for MVP

Implementation steps:

1. Create FullScreenIDE.tsx component with header + 3-pane layout
2. Mount CollaborativeMonaco in middle pane with Y.Text binding
3. Add "Edit" button to JobInspector footer
4. Wire button to update URL param and show/hide IDE
5. Add Run, Save, Close buttons to header (Run/Save can be placeholders for now)

Note: This creates the skeleton structure. Runviewer and Manual Run components will be built in separate issues. The goal is to unblock those issues by having the container ready.

Release notes

Add full-screen code editor access from job inspector.

User acceptance criteria

• "Edit" button visible in JobInspector footer
• Clicking button shows full-screen IDE (canvas hidden)
• IDE shows header with Run, Save, Close buttons (top right)
• IDE shows 3 vertical panes (left placeholder, middle editor, right placeholder)
• Middle pane displays current job code with syntax highlighting
• Panels are collapsible
• Panels are resizable
• Panel states are persisted in localStorage
• Editor supports collaborative editing (Y.js sync works)
• Close button returns to canvas + inspector view
• Code changes persist to Y.js store
• URL reflects IDE state (deep linking works)

[theroinaochieng]

Part of epic #3720