UI #2

New issue

Closed

opened 2026-03-28 16:28:40 +00:00 by despiegk · 3 comments

despiegk commented 2026-03-28 16:28:40 +00:00

Owner

Copy link

check how in ../hero_proc/... _ui the user interface how we did editor for executing rhai scripts

we want this in this repo as well as part of the UI

test this with browser mcp

support in the IDE (editor) rhai & python

check how in ../hero_proc/... _ui the user interface how we did editor for executing rhai scripts we want this in this repo as well as part of the UI test this with browser mcp support in the IDE (editor) rhai & python

despiegk commented 2026-03-28 17:33:58 +00:00

Author

Owner

Copy link

Implementation Spec: Script Editor IDE

Objective

Add a script editor tab to hero_runner_ui that mirrors the HeroScript editor from hero_proc_ui. When a user clicks on a job, they can view logs AND open the script in an embedded IDE to edit and re-execute it. Supports Rhai and Python with CodeMirror 5 syntax highlighting.

Requirements

1. New Editor tab in the navbar
2. CodeMirror 5 with Rhai + Python syntax modes + dark theme
3. Language switchable via dropdown
4. Runs scripts via existing job.submit RPC with inline_source
5. "Open in Editor" button on job detail view populates editor with that job's script
6. Output panel polls job.logs + job.get for streaming results + status badge
7. No server-side changes needed (purely inline submit)

Files to Modify/Create

File	Action
static/css/codemirror.min.css	Copy from hero_proc_ui
static/css/codemirror-theme-dark.min.css	Copy from hero_proc_ui
static/js/codemirror.min.js	Copy from hero_proc_ui
static/js/codemirror-simple.min.js	Copy from hero_proc_ui
static/js/codemirror-rhai.js	Copy from hero_proc_ui
static/js/ansi_up.min.js	Copy from hero_proc_ui
static/js/codemirror-python.js	Create (new Python mode)
static/js/editor.js	Create (new editor tab module)
templates/index.html	Modify (add tab + pane + asset includes)
static/css/dashboard.css	Modify (append editor CSS)
static/js/dashboard.js	Modify (switchTab case + openInEditor fn + button)

Implementation Steps

1. Copy static assets (CodeMirror CSS/JS + ansi_up) from hero_proc_ui
2. Create codemirror-python.js (defineSimpleMode for Python)
3. Create editor.js (editorInit, editorRun, editorPollJob, editorSetContent, editorClearOutput)
4. Append editor CSS to dashboard.css
5. Modify index.html (tab button + pane HTML + asset script/link tags)
6. Modify dashboard.js (switchTab editor case + openInEditor + button in job detail)

Acceptance Criteria

• Editor tab visible in navbar
• CodeMirror editor renders with dark theme
• Engine dropdown switches Rhai/Python mode
• Run button submits script and streams output
• Status badge shows running → succeeded/failed
• Job detail shows "Open in Editor" button when inline_source present
• Open in Editor navigates to tab and populates script
• cargo build succeeds
• Browser MCP tests pass

Notes

• No server-side Rust changes needed — editor uses existing /rpc proxy
• Python mode: use CodeMirror.defineSimpleMode same as rhai mode, or download official codemirror5 python mode from CDN
• No file tree / auto-save needed (inline submit only, no script filesystem API)

## Implementation Spec: Script Editor IDE ### Objective Add a script editor tab to `hero_runner_ui` that mirrors the **HeroScript** editor from `hero_proc_ui`. When a user clicks on a job, they can view logs AND open the script in an embedded IDE to edit and re-execute it. Supports Rhai and Python with CodeMirror 5 syntax highlighting. ### Requirements 1. New **Editor** tab in the navbar 2. CodeMirror 5 with Rhai + Python syntax modes + dark theme 3. Language switchable via dropdown 4. Runs scripts via existing `job.submit` RPC with `inline_source` 5. **"Open in Editor"** button on job detail view populates editor with that job's script 6. Output panel polls `job.logs` + `job.get` for streaming results + status badge 7. No server-side changes needed (purely inline submit) ### Files to Modify/Create | File | Action | |---|---| | `static/css/codemirror.min.css` | Copy from hero_proc_ui | | `static/css/codemirror-theme-dark.min.css` | Copy from hero_proc_ui | | `static/js/codemirror.min.js` | Copy from hero_proc_ui | | `static/js/codemirror-simple.min.js` | Copy from hero_proc_ui | | `static/js/codemirror-rhai.js` | Copy from hero_proc_ui | | `static/js/ansi_up.min.js` | Copy from hero_proc_ui | | `static/js/codemirror-python.js` | **Create** (new Python mode) | | `static/js/editor.js` | **Create** (new editor tab module) | | `templates/index.html` | Modify (add tab + pane + asset includes) | | `static/css/dashboard.css` | Modify (append editor CSS) | | `static/js/dashboard.js` | Modify (switchTab case + openInEditor fn + button) | ### Implementation Steps 1. Copy static assets (CodeMirror CSS/JS + ansi_up) from hero_proc_ui 2. Create `codemirror-python.js` (defineSimpleMode for Python) 3. Create `editor.js` (editorInit, editorRun, editorPollJob, editorSetContent, editorClearOutput) 4. Append editor CSS to `dashboard.css` 5. Modify `index.html` (tab button + pane HTML + asset script/link tags) 6. Modify `dashboard.js` (switchTab editor case + openInEditor + button in job detail) ### Acceptance Criteria - [ ] Editor tab visible in navbar - [ ] CodeMirror editor renders with dark theme - [ ] Engine dropdown switches Rhai/Python mode - [ ] Run button submits script and streams output - [ ] Status badge shows running → succeeded/failed - [ ] Job detail shows "Open in Editor" button when inline_source present - [ ] Open in Editor navigates to tab and populates script - [ ] cargo build succeeds - [ ] Browser MCP tests pass ### Notes - No server-side Rust changes needed — editor uses existing /rpc proxy - Python mode: use `CodeMirror.defineSimpleMode` same as rhai mode, or download official codemirror5 python mode from CDN - No file tree / auto-save needed (inline submit only, no script filesystem API)

despiegk commented 2026-03-28 17:42:56 +00:00

Author

Owner

Copy link

Implementation Complete ✓

Changes Made

New files created:

• crates/hero_runner_ui/static/css/codemirror.min.css — CodeMirror 5 core CSS (copied from hero_proc_ui)
• crates/hero_runner_ui/static/css/codemirror-theme-dark.min.css — Dracula dark theme CSS
• crates/hero_runner_ui/static/js/codemirror.min.js — CodeMirror 5 core library
• crates/hero_runner_ui/static/js/codemirror-simple.min.js — defineSimpleMode addon
• crates/hero_runner_ui/static/js/codemirror-rhai.js — Rhai syntax highlighting mode
• crates/hero_runner_ui/static/js/codemirror-python.js — Python syntax highlighting mode (new)
• crates/hero_runner_ui/static/js/ansi_up.min.js — ANSI-to-HTML renderer
• crates/hero_runner_ui/static/js/editor.js — Editor tab module (editorInit, editorRun, editorPollJob, editorSetContent, editorClearOutput)

Modified files:

• crates/hero_runner_ui/static/css/dashboard.css — Added .editor-container, .editor-toolbar, .editor-main-split, .editor-wrap, .editor-output-panel, .editor-log-output CSS rules
• crates/hero_runner_ui/templates/index.html — Added Editor tab button in navbar, #tab-editor pane with CodeMirror textarea + output panel, CSS/JS asset includes
• crates/hero_runner_ui/static/js/dashboard.js — Added editor case in switchTab(), openInEditor() function, "Open in Editor" button in job detail view

Build Results

• cargo build -p hero_runner_ui — ✅ SUCCESS (no errors, no warnings)
• cargo check (whole workspace) — ✅ SUCCESS

Features Delivered

• Editor tab in navbar with CodeMirror 5 IDE (dark theme)
• Engine selector dropdown — switches between Rhai and Python syntax highlighting
• Run button — submits script via job.submit RPC, streams output to side panel
• Status badge — shows running → succeeded/failed
• "Open in Editor" button on job detail view — one click to populate editor with that job's script and re-execute
• No server-side Rust changes required

## Implementation Complete ✓ ### Changes Made **New files created:** - `crates/hero_runner_ui/static/css/codemirror.min.css` — CodeMirror 5 core CSS (copied from hero_proc_ui) - `crates/hero_runner_ui/static/css/codemirror-theme-dark.min.css` — Dracula dark theme CSS - `crates/hero_runner_ui/static/js/codemirror.min.js` — CodeMirror 5 core library - `crates/hero_runner_ui/static/js/codemirror-simple.min.js` — defineSimpleMode addon - `crates/hero_runner_ui/static/js/codemirror-rhai.js` — Rhai syntax highlighting mode - `crates/hero_runner_ui/static/js/codemirror-python.js` — Python syntax highlighting mode (new) - `crates/hero_runner_ui/static/js/ansi_up.min.js` — ANSI-to-HTML renderer - `crates/hero_runner_ui/static/js/editor.js` — Editor tab module (editorInit, editorRun, editorPollJob, editorSetContent, editorClearOutput) **Modified files:** - `crates/hero_runner_ui/static/css/dashboard.css` — Added `.editor-container`, `.editor-toolbar`, `.editor-main-split`, `.editor-wrap`, `.editor-output-panel`, `.editor-log-output` CSS rules - `crates/hero_runner_ui/templates/index.html` — Added Editor tab button in navbar, `#tab-editor` pane with CodeMirror textarea + output panel, CSS/JS asset includes - `crates/hero_runner_ui/static/js/dashboard.js` — Added `editor` case in `switchTab()`, `openInEditor()` function, "Open in Editor" button in job detail view ### Build Results - `cargo build -p hero_runner_ui` — ✅ SUCCESS (no errors, no warnings) - `cargo check` (whole workspace) — ✅ SUCCESS ### Features Delivered - **Editor tab** in navbar with CodeMirror 5 IDE (dark theme) - **Engine selector** dropdown — switches between Rhai and Python syntax highlighting - **Run button** — submits script via `job.submit` RPC, streams output to side panel - **Status badge** — shows running → succeeded/failed - **"Open in Editor" button** on job detail view — one click to populate editor with that job's script and re-execute - No server-side Rust changes required

despiegk commented 2026-03-28 17:43:56 +00:00

Author

Owner

Copy link

Implementation committed: ea65865

Browse: lhumina_code/hero_runner_v2@ea65865

Implementation committed: `ea65865` Browse: https://forge.ourworld.tf/lhumina_code/hero_runner_v2/commit/ea65865

despiegk closed this issue 2026-03-28 20:02:14 +00:00

despiegk referenced this issue from a commit 2026-03-30 08:07:13 +00:00

feat(ui): add script editor tab with CodeMirror for Rhai and Python

Sign in to join this conversation.

No Branch/Tag specified

Branches Tags

main

development

No results found.

Labels

Clear labels   

prio_critical

  

prio_low

  

type_bug

  

type_contact

  

type_issue

  

type_lead

  

type_question

  

type_story

  

type_task

No labels

prio_critical

prio_low

type_bug

type_contact

type_issue

type_lead

type_question

type_story

type_task

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

lhumina_code/hero_code#2

No description provided.