unsloth/studio/frontend
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
..
public Unsloth: appearance palettes, customization options, and control restyle (#7077) 2026-07-14 05:12:08 -07:00
src Studio: viewport-gated highlight for the executed Python script (follow-up to #7240) (#7363) 2026-07-23 02:55:57 -07:00
.gitignore perf(studio): upgrade to Vite 8 + auto-install bun for faster frontend builds (#4522) 2026-03-25 04:27:41 -07:00
.gitkeep add studio root folder 2026-02-02 09:14:35 +00:00
.npmrc Replace standalone Studio wording with Unsloth (#7221) 2026-07-19 00:47:04 -07:00
biome.json feat: add seed dataset support with configuration, preview, and builder utilities 2026-02-14 18:44:38 +01:00
components.json add studio root folder 2026-02-02 09:14:35 +00:00
data-designer.openapi (1).yaml save and import, and fixes 2026-02-04 14:32:49 +01:00
eslint.config.js Final cleanup 2026-03-12 18:28:04 +00:00
index.html Unsloth: appearance palettes, customization options, and control restyle (#7077) 2026-07-14 05:12:08 -07:00
package-lock.json Unsloth: appearance palettes, customization options, and control restyle (#7077) 2026-07-14 05:12:08 -07:00
package.json Unsloth: appearance palettes, customization options, and control restyle (#7077) 2026-07-14 05:12:08 -07:00
tsconfig.app.json chore(studio/frontend): normalize line endings to LF (#6012) 2026-06-12 03:51:59 -07:00
tsconfig.json chore(studio/frontend): normalize line endings to LF (#6012) 2026-06-12 03:51:59 -07:00
tsconfig.node.json chore(studio/frontend): normalize line endings to LF (#6012) 2026-06-12 03:51:59 -07:00
vite.config.ts Fix Install commands for Windows + 1 line installs (#4447) 2026-03-19 02:09:09 -07:00