Language playground UX enhancements: unified action buttons + results in right pane (no-scroll layout) #265

New Issue

2026-06-27T12:40:39Z

spikerj commented

2026-06-27 12:40:39 +00:00

Goal

Improve the shared language-playground harness (C#, Python, C, C++, SQL, JS — the harness behind e.g. learn.spikersoft.com/tools/(tools:csharp-playground)?lessonId=N) so a lesson fits without vertical scrolling and the action buttons are consolidated.

This is the same harness for all languages, so changes land in the shared platform/shared libraries, not per-language.

Current behavior

Buttons are split: New Attempt + Submit live in the lesson pane footer (lesson-pane.html), while the post-pass Next: <lesson> CTA lives down in the output pane (language-runner.html next-lesson-cta). They are never visible together.
Results/output render below the Monaco editor (language-runner.html output-pane: error, test-results, program output/SQL table). On a tall lesson this pushes content off-screen and forces scrolling, while the right app-language-concept-pane has empty space (see attached screenshot).

Requested behavior

Keep all three buttons together — New Attempt, Submit, and Next: <lesson> in one action row (lesson pane footer). Next appears once the latest submission passes all tests and a prerequisite-satisfied next lesson exists.
Move test results + program output into the right pane — add a new tab in the shell's right-pane tab strip (language-playground-shell.component.html, currently Concepts | Submissions). The new Results tab:
- auto-activates when a run produces results (tests/output/error),
- returns to the Concepts tab automatically when the lesson advances/changes,
- lets the user manually toggle back to Concepts/Submissions any time.
  This uses the existing empty right-pane real estate so the editor + lesson prose no longer need to scroll.

Implementation plan

Extract the results/output markup from language-runner.html into a shared presentational component app-language-output-pane (platform-language-runner) with inputs (error, testResults, passedCount, totalCount, allPassed, outputText, outputTable, isSuccess).
LanguageRunner: expose the result signals via public *ForChrome accessors (mirroring existing chrome accessors) + a hasAnyOutputForChrome signal; add public advanceToNextLessonForChrome(). When embedded in the shell (externalHeaderChrome), suppress the in-runner output pane (the shell renders it in the right pane).
LessonPane: add nextLesson + canAdvance inputs and advanceRequested output; render the Next button in the footer beside New Attempt/Submit. Remove the duplicate next-lesson-cta from the output pane.
LanguagePlaygroundShellComponent: extend RightPaneView with results; add the Results tab; render app-language-output-pane; effect to auto-show on rising-edge of results and reset to concepts on selectedLessonNumber change; don't persist results as a restored view.
i18n: add en/es keys for the Results tab + Next button; run pnpm run lint:fix and pnpm run lint:styles:fix before pushing (CI gate).

Acceptance

Lesson view: editor + instructions + all three buttons visible without scrolling at a typical viewport.
Submitting shows tests/output in the right Results tab automatically; advancing returns to Concepts.
Behavior is identical across all playground languages (shared harness).
Standalone runner (not embedded in the shell, e.g. raw sandbox) still renders output below the editor.

## Goal Improve the shared language-playground harness (C#, Python, C, C++, SQL, JS — the harness behind e.g. `learn.spikersoft.com/tools/(tools:csharp-playground)?lessonId=N`) so a lesson fits without vertical scrolling and the action buttons are consolidated. This is the **same harness for all languages**, so changes land in the shared platform/shared libraries, not per-language. ## Current behavior - **Buttons are split:** `New Attempt` + `Submit` live in the lesson pane footer (`lesson-pane.html`), while the post-pass **`Next: <lesson>`** CTA lives down in the output pane (`language-runner.html` `next-lesson-cta`). They are never visible together. - **Results/output render below the Monaco editor** (`language-runner.html` `output-pane`: error, test-results, program output/SQL table). On a tall lesson this pushes content off-screen and forces scrolling, while the right `app-language-concept-pane` has empty space (see attached screenshot). ## Requested behavior 1. **Keep all three buttons together** — `New Attempt`, `Submit`, and `Next: <lesson>` in one action row (lesson pane footer). `Next` appears once the latest submission passes all tests and a prerequisite-satisfied next lesson exists. 2. **Move test results + program output into the right pane** — add a new tab in the shell's right-pane tab strip (`language-playground-shell.component.html`, currently `Concepts | Submissions`). The new **Results** tab: - auto-activates when a run produces results (tests/output/error), - returns to the **Concepts** tab automatically when the lesson advances/changes, - lets the user manually toggle back to Concepts/Submissions any time. This uses the existing empty right-pane real estate so the editor + lesson prose no longer need to scroll. ## Implementation plan - Extract the results/output markup from `language-runner.html` into a shared presentational component `app-language-output-pane` (platform-language-runner) with inputs (`error`, `testResults`, `passedCount`, `totalCount`, `allPassed`, `outputText`, `outputTable`, `isSuccess`). - `LanguageRunner`: expose the result signals via public `*ForChrome` accessors (mirroring existing chrome accessors) + a `hasAnyOutputForChrome` signal; add public `advanceToNextLessonForChrome()`. When embedded in the shell (`externalHeaderChrome`), suppress the in-runner output pane (the shell renders it in the right pane). - `LessonPane`: add `nextLesson` + `canAdvance` inputs and `advanceRequested` output; render the `Next` button in the footer beside `New Attempt`/`Submit`. Remove the duplicate `next-lesson-cta` from the output pane. - `LanguagePlaygroundShellComponent`: extend `RightPaneView` with `results`; add the Results tab; render `app-language-output-pane`; effect to auto-show on rising-edge of results and reset to `concepts` on `selectedLessonNumber` change; don't persist `results` as a restored view. - i18n: add en/es keys for the Results tab + `Next` button; run `pnpm run lint:fix` and `pnpm run lint:styles:fix` before pushing (CI gate). ## Acceptance - Lesson view: editor + instructions + all three buttons visible without scrolling at a typical viewport. - Submitting shows tests/output in the right **Results** tab automatically; advancing returns to **Concepts**. - Behavior is identical across all playground languages (shared harness). - Standalone runner (not embedded in the shell, e.g. raw sandbox) still renders output below the editor.

spikerj added the enhancement label 2026-06-27 12:40:39 +00:00

spikerj commented

2026-06-27 19:05:08 +00:00

Resolved. Landed in spikersoft-angular via PR #79 (feat(playground): unify action buttons & move results to right pane) merged to master, with follow-up PR #80 (test(playground): fix next-lesson CTA tests after button relocation) also merged.

Delivered: extracted shared app-language-output-pane; unified New Attempt / Submit / Next: <lesson> in the lesson-pane footer; added the right-pane Results tab that auto-shows on a run and resets to Concepts when the lesson advances; standalone runner still renders output below the editor; en/es i18n added. Closing.

Resolved. Landed in spikersoft-angular via PR #79 (`feat(playground): unify action buttons & move results to right pane`) merged to `master`, with follow-up PR #80 (`test(playground): fix next-lesson CTA tests after button relocation`) also merged. Delivered: extracted shared `app-language-output-pane`; unified `New Attempt` / `Submit` / `Next: <lesson>` in the lesson-pane footer; added the right-pane **Results** tab that auto-shows on a run and resets to **Concepts** when the lesson advances; standalone runner still renders output below the editor; en/es i18n added. Closing.

spikerj closed this issue

2026-06-27 19:05:23 +00:00

spikerj referenced this issue

2026-07-13 20:36:32 +00:00

[Bug][Backend][DockerMonitor] All swarm node events published as 'docker.node.unknown' with empty hostname — ~21 junk RabbitMQ msgs/min for healthy nodes #541

spikerj referenced this issue

2026-07-14 22:48:35 +00:00

[Bug][Backend][DockerMonitor] All swarm node events published as 'docker.node.unknown' with empty hostname — ~21 junk RabbitMQ msgs/min for healthy nodes #541

Sign in to join this conversation.