[TomNaessens]

Review map: dodona-edu/dodona#9402 (step 4 of 7: what each pull request does, the review order and live status)

This pull request lets a code playground declare data files, shown as read-only tabs next to the code, as reviewers asked on dodona-edu/dodona#9211. It is step 4 of 5; see #1168 for the overview.

Stacked on #1170. Dodona side: dodona-edu/dodona#9305 passes the files attribute on.

• <p-code-playground files="media/grades.txt media/other.csv">: space-separated paths, resolved against the page's base URL and stored in the workspace under their base name. Every Run starts from a workspace holding exactly these files (runner.start(RunMode.Run, files) from Let a run start from a workspace with only the given files #1159), so a run gives the same result every time and two playgrounds can use different files with the same name.
  • A file's preview loads when its tab is first opened. On Run, the playground claims the runtime right away and runner.start() waits for the files (its files option also takes a promise): Stop works while they load and other playgrounds wait. A file that fails to load shows an alert and the run ends without running the code; the next Run or reopening the tab retries.
  • Duplicate base names show the configuration error card.
• loadFile(url) (state/Files.ts): fetches once per URL (a failure is retried), rejects on an HTTP error, and returns text for valid UTF-8, otherwise base64.
• readonly on p-editor-tabs, p-editor-tab and p-file-viewer: no add, rename or close, and a read-only editor. With a url, p-file-viewer shows an "Open file" link to it for binary files and text over 100 kB. The sandbox keeps the editable defaults.

Deliberately left out:

• The sandbox's own URL loading (fetchAndAddUrl, and provideFiles, which still writes HTTP error pages into files): a separate change.
• Showing files the program writes, and editable file tabs.

Manual testing instructions

1. yarn vitest run --exclude '**/.claude/**'
2. Through dodona-edu/dodona#9305: a playground with files="media/grades.txt" shows a grades.txt tab with the file's contents and prints it on Run. A PNG shows the open link; a missing file shows the alert without running.

Screenshots (Dodona test page)

File tab (light)	File tab (dark)	Binary file

Checklist

• Tests: FileLoader.test.ts, EditorTabs.test.ts and FileViewer.test.ts (read-only modes), the playground files cases (including a real Pyodide run reading grades.txt); full suite green locally (511)
• Accessibility: reuses the existing tab markup; the file panel is a tabpanel
• Docs: README "Code playgrounds"
• AI: Claude Code wrote the change

🤖 Generated with Claude Code

[bmesuere]

🤖 [P2] Ignore editor change events in read-only previews

readonly prevents typing, but changing .value on a reused p-file-editor still dispatches change. Switching between two loaded text previews therefore reaches onEditorChange, which checks only debugger.active, and writes the preview to the backend after 300 ms. If another playground is paused in input(), this can overwrite its files on the shared runtime. I reproduced the running playground printing from B instead of its original from A after switching B's read-only preview. Return early from onEditorChange when this.readonly is true, and cover preview switching without backend writes.

[TomNaessens]

🤖 Fixed in 85ccb80: onEditorChange returns early when the viewer is read-only, so setting .value on the reused editor while switching previews no longer writes anything to the workspace. Tests: switching between two read-only previews makes no updateFile or updateFileContent call (fails without the guard), and an editable viewer still writes after a switch.

[bmesuere]

🤖 Reviewed this PR against its stack base. One reproducible issue is described inline. The additional regression check reproduces it with a real Python run. Validation of the complete stack at 530ba26: 334 existing tests passed; TypeScript checking, ESLint, and the app build passed.

[TomNaessens]

🤖 Rebase notes for #1194 (reviewed at 910fb15). The notes on #1169 and #1168 cover the files below this PR; these are the parts specific to the read-only data-file tabs.

• EditorTabs.ts height. Move the run buttons into the tab bar, add a host tab and compact the input #1194 sets min-height: 2.75rem on p-editor-tabs' :host, so it would also grow the playground's read-only tabs from 36px to 44px. Move the 44px to p-code-runner (its .toolbar, or a custom property the code runner sets) and leave p-editor-tabs at the shared bar height. Tom offered on Move the run buttons into the tab bar, add a host tab and compact the input #1194 to fix this in the stack.
• readonly and the host tab. readonly hides the add-file button. Move the run buttons into the tab bar, add a host tab and compact the input #1194 renders a divider and the host tab after that button only while hostTab is true, which the playground never sets, so nothing extra shows. Keep the add-file condition as debugActive || this.readonly.
• playground/files.ts. shownTab: string | undefined becomes EditorTabId | undefined, since activeEditorTab is now EditorTabId (CODE_TAB is a symbol). A data file named code now opens as a file, not as the code tab.
• Runner.ts. This PR widens files to readonly FileEntry[] | Promise<readonly FileEntry[]>. In the combined start(mode, { editorTab, files }) (the note on Let several Papyros instances share one runtime #1168), RunOptions.files takes that type and CodePlayground passes { files: this.dataFiles.loadForRun() }.

[TomNaessens]

🤖 todo (non-blocking): once #1196 is merged, it adds test/__tests__/components/FileTabs.test.ts, which tests that Escape in the rename input (p-editor-tab) and in the add-file input (p-add-file-button) is cancelled. These are the same components that EditorTabs.test.ts here covers. When rebasing, fold those two tests into EditorTabs.test.ts and drop FileTabs.test.ts.

No other change is needed. Read-only tabs render neither the rename input nor the add-file button, so they add no Escape that needs cancelling, and the preventDefault() that #1196 adds to onRenameKeydown merges cleanly next to the editable change here.

[TomNaessens]

🤖 Rebased onto main as 61e88a6:

• Move the run buttons into the tab bar, add a host tab and compact the input #1194: the height was handled in Share rendering and helpers between the sandbox components #1169; readonly hides the add-file button (debugActive || this.readonly), shownTab is EditorTabId | undefined, and RunOptions.files takes a promise of files.
• Cancel the Escape keydowns that Papyros acts on #1196: FileTabs.test.ts's two tests are folded into EditorTabs.test.ts.

[TomNaessens]

🤖 Simplify pass after the rebase (now 1663574):

• p-file-viewer: url alone decides between the "Open file" link and the download button; the strings are now generic (Papyros.file_not_previewable, Papyros.open_file); downloadBinary is main's again.
• p-editor-tabs computes locked = readonly || debugger.active once and passes it to each tab; p-editor-tab no longer reads the debugger.
• The playground's tab bar had a double line under it (its own hairline plus a border); one left.
• Main's Runner.filenameFromUrl uses the shared fileNameFromUrl for the decode.

[TomNaessens]

🤖 Automated review on Tom's behalf; summary below.

---

Generated by Claude Code

[TomNaessens]

🤖 Minor findings. Plain review (no code-review skill) with a checkout of the PR head. Covers the full PR against its base #1170 (step 4 of the stack in dodona-edu/dodona#9402).

Two inline comments: Stop during a slow file load ends in a worker restart after 5 s, and the "Open file" link text. Checked and fine:

• loadFile drops failed fetches from its cache, so a retry really fetches again;
• strict UTF-8 detection, and chunked base64 for large files;
• file names and contents render as text (no XSS path);
• the sandbox keeps its editable tabs;
• the 100 kB cutoff only applies with a url.

---

Generated by Claude Code

[TomNaessens]

🤖 note: Changed since the approval (29353fe): fixes for two review-routine findings.

• Stop while the data files still load ends the run at once instead of restarting the shared worker after 5 s.
• The "Open file" link names the file and says it opens in a new tab (en + nl).