[cedricvogel-leo]

IDE part of P18 phase 2 (spec: teaching-agent journal.md → Visual Identity → «glpython-IDE (Hülle um den Editor)»). Guiding principle: the IDE looks like the embed, only larger.

Ready. It pins glpython-editor v0.1.11 (glpython-edu/glpython-editor#30) and supersedes the closed v0.1.10 bump (#15).

One bar on top

• The logo, then the workspace's buttons in the embed's order and labels: ▶ Ausführen · Tests · Visualisieren. The workspace puts them into the bar (actionsContainer). ▶ becomes ■ Stoppen in the same place and width.
• No Zurücksetzen in the bar (decided after the first version): ▶ already starts with a fresh namespace and an empty console, ■ stops a hung program, and learners read «Zurücksetzen» as "reset my code". It is now «Python neu starten», the first item in ⋮. It mounts the workspace anew (a new Python, an empty console, as the embed's Reset), and the code stays.
• On the right, Teilen (with «Link kopiert ✓»), and ⋮:
  • Python neu starten
  • Ordner öffnen
  • Projekt öffnen
  • Projekt herunterladen
  • Sprache (Deutsch/English, the active one ticked)
  • Entwicklerwerkzeuge → Lokales Projekt löschen (asks first)
• No breadcrumb, no footer, no dev bar. The runtime status shows only while it loads or failed, in the console's heading.

Left edge

• Dateien (📁) opens a drawer over the editor, so nothing moves. It has the project name (rename), the files (open, rename, delete) and «Datei hinzufügen». It's closed at the start, also with one file.
• Python-Referenz (?) links to docs.python.org.
• Both are labelled through tooltip and aria-label.
• Every file is also a tab above the editor, without ✕ (closeFileTabs: false).

Below: the workspace in its stacked layout (#30). The editor is on top and the console below, with a draggable divider that is remembered. Graphics show beside the editor only while a program draws, and the visualizer takes the editor's place without moving anything. It's the same on laptop and iPad; below 900px only the logo's name is left out.

Keyboard

• ⋮ opens with Enter; focus moves to the first item. ↑/↓/Home/End move through the menu, Escape closes it and returns focus to ⋮, and Tab leaves it.
• 📁 opens the drawer with focus inside; Escape closes it and returns focus to 📁.
• The divider is focusable and moves with ↑/↓ (Page Up/Down, Home/End).

Checked with this build at 1440×900 and 820×1180:

Check	Result
Drawer closed at start; Enter on 📁 opens it, focus on «Dateien schliessen»; Escape → focus on 📁	✓
New file → tab helfer.py, no ✕ on tabs, «Code hier eingeben» in the empty editor	✓
⋮ by keyboard: focus Ordner öffnen → Projekt öffnen → (End) Lokales Projekt löschen; Escape → ⋮	✓
Lokales Projekt löschen asks «Das gespeicherte lokale Projekt löschen und den Startercode neu laden?»	✓
Teilen → «Link kopiert ✓», …/?project=…	✓
Divider: drag 33 → 59 %, ↓ → 54 %, still 54 % after a reload	✓
Visualisieren: console y 452 → 452, divider y 438 → 438	✓
■ Stoppen: x 137 → 137, width 118 → 118, Tests stays at x 263	✓
⋮ → «Python neu starten» (first item, keyboard): console cleared, Python restarting, code kept; quadrat(5) afterwards → NameError with the hint «Wurde die Datei schon ausgeführt?» (laptop and iPad)	✓
Turtle: panel only while drawing (also when visualizing), ✕ hides it until the next Run; no «Grafik» strip	✓
English via ⋮: «Run · Tests · Visualize · Reset · Share»	✓

Build and lint pass (the same 7 warnings as main, in the vendored coi-serviceworker.js). README «Layout» and CLAUDE.md are updated. Shell strings that became unused are dropped. The old shell CSS in glpython-editor's style.css is now unused (follow-up).

🤖 Generated with Claude Code