unsloth/studio/frontend/src
Daniel Han beddfc963e
Studio: viewport-gated highlight for the executed Python script (follow-up to #7240) (#7363)
* Studio: keep the executed Python script visible in chat, with download + viewport-gated highlight

Always show the executed Python script under the tool card (not only inside the
collapsible run/output section, which is unmounted from history), with Copy and a
client-side .py Download button, so the script stays visible on reopen (#7165).

The script is rendered eagerly, but shiki syntax-highlighting only runs once the
block scrolls near the viewport (IntersectionObserver, 200px margin); until then a
plain monospace placeholder shows the same source with matching padding, so there
is no layout jump. This bounds highlighting to the cards actually on screen instead
of tokenizing every script up front. Measured shiki cost is ~8 ms per typical 2 KB
script, so eager highlighting of a long agentic transcript (20-50+ Python calls)
would add ~170-420 ms of main-thread work on load; viewport-gating keeps it to the
few visible cards (~15-35 ms) regardless of transcript length. Falls back to
immediate highlight when IntersectionObserver is unavailable (SSR / tests).

* Use a div for the pre-highlight placeholder so container [&_pre]:!p-0 doesn't strip its p-3

The placeholder shares the highlighted block's p-3 padding to avoid a layout
jump, but as a <pre> it was caught by the container's [&_pre]:!p-0 !important
rule and rendered with no padding, so the script shifted by p-3 when shiki
swapped in. A plain div keeps the padding.

* Match placeholder wrapping to the highlighted pre (whitespace-pre, not pre-wrap)

The placeholder wrapped long lines while the highlighted Streamdown <pre> keeps
them on one line and scrolls in the container's overflow-auto, so a script with a
long line changed height when shiki swapped in. Use whitespace-pre so the
placeholder scrolls the same way and the height stays stable.

---------

Co-authored-by: danielhanchen <unslothai@gmail.com>
2026-07-23 02:55:57 -07:00
..
app Studio: drive UI font size through a typography scale instead of the root font size (#7359) 2026-07-23 01:26:56 -07:00
assets Studio: mascot images degrade gracefully instead of showing alt text (#6146) 2026-06-10 08:22:17 -07:00
components Studio: viewport-gated highlight for the executed Python script (follow-up to #7240) (#7363) 2026-07-23 02:55:57 -07:00
config feat(studio): Mac-aware training controls for MLX (optimizers, LoftQ, packing) (#7358) 2026-07-23 02:14:20 -07:00
features feat(studio): Mac-aware training controls for MLX (optimizers, LoftQ, packing) (#7358) 2026-07-23 02:14:20 -07:00
hooks Studio: add local speech-to-text dictation engine (#7095) 2026-07-23 01:39:03 -07:00
i18n feat(studio): Mac-aware training controls for MLX (optimizers, LoftQ, packing) (#7358) 2026-07-23 02:14:20 -07:00
lib Fix Studio desktop reliability (#7255) 2026-07-21 09:51:18 +02:00
shared studio/frontend: make toast and inline error text selectable and copyable (#5506) 2026-05-18 03:47:21 -07:00
stores Update license headers 2026-03-12 17:23:10 +00:00
types feat(studio): implement S3 dataset loading (completes #5951) (#6222) 2026-06-12 14:52:04 +02:00
utils Studio frontend: reduce and tighten code comments (#6099) 2026-06-08 23:10:35 -07:00
asset-queries.d.ts Studio: mascot images degrade gracefully instead of showing alt text (#6146) 2026-06-10 08:22:17 -07:00
index.css Studio: add local speech-to-text dictation engine (#7095) 2026-07-23 01:39:03 -07:00
main.tsx Studio: lighten chat text weight on Linux to match macOS rendering (#7308) 2026-07-22 06:14:40 -07:00
speech-recognition.d.ts studio: redesign chat composer (#5891) 2026-06-03 06:07:30 -07:00