feat: shared tab system, universal markdown code blocks, subtle scrollbars

[Guilhem-lm]

Summary

A batch of frontend polish across the AI chat, markdown rendering, and tab strips, unified around two new shared primitives (MarkdownCodeBlock, a .scrollbar-subtle utility) and the existing DraggableTabs:

1. Universal styled markdown code blocks — the nice chat code-block styling (highlighting, copy button, subtle scrollbar) now applies to every GfmMarkdown/AppMarkdown surface, not just the two AI-chat renderers.
2. Shared session ↔ raw-app tab system — the session preview tab strip now uses the same DraggableTabs component the raw-app editor uses (drag-reorder, keyboard nav, close), keeping its active-tab breadcrumb/router picker.
3. Subtle scrollbars everywhere — one .scrollbar-subtle utility (thin, hover-revealed thumb) shared by the tab strips, code blocks, Tabs/TabsV2 headers, and the AI chat message list — replacing a broken melt scrollbar and the chunky native ones.

Markdown code blocks

• New MarkdownCodeBlock.svelte — chat-agnostic svelte-exmarkdown pre renderer: highlighted panel (bg-surface-secondary, rounded, text-xs), hover-revealed copy button on a bg-surface chip, subtle horizontal scrollbar. Apply button + mermaid are opt-in props (default off) so untrusted markdown never executes mermaid. Recognized fence languages (incl. common aliases like ts/js/py) are highlighted; unlabeled/unknown fences render as plaintext rather than being mis-colored as TypeScript.
• markdownPlugins.ts — added { renderer: { pre: MarkdownCodeBlock } } to the shared chain. Language read from the language-* class rehypeSanitize preserves; code highlighted as escaped text (no new XSS surface).
• CodeDisplay.svelte (chat) — slimmed to a thin wrapper delegating to MarkdownCodeBlock, adding the Apply button + mermaid.
• HighlightCode.svelte — the subtle CopyButton-on-a-surface-chip is opt-in via buttonsOnHover (set by the markdown/chat renderer only); the ~20 other callers keep the original light copy Button. Also gains optional customScrollbarX.

Scope note: markdown sinks that bypass the shared chain (DisplayResult, AiSkillsSettings, the chat "Thinking" block) intentionally keep plain code blocks.

Tabs

• DraggableTabs.svelte — new tabAccessory snippet (per-tab, e.g. the session's active-tab picker; a click on it stops propagation so it doesn't re-select the tab) and afterTabs snippet (rendered inside the scroll row after the last tab, e.g. a "+" button — vs trailing, which stays pinned outside). Now consumes ScrollableX.
• sessions/+page.svelte — bespoke tab markup replaced with DraggableTabs; active-tab router picker → tabAccessory chevron, "+" new-tab → afterTabs (right after the last tab). Tab strip bg-surface-secondary/50; preview-bar buttons (collapse / open-in-workspace / fullscreen) are hover-only background. (Adopting DraggableTabs restyles the active tab to its bg-surface-tertiary — an intended consequence of sharing the component.)
• sessionPreviewTabs.svelte.ts — new reorder(orderedIds) method (with persistence) for drag-reorder.
• Tabs.svelte / TabsV2.svelte — header rows use ScrollableX for the subtle scrollbar.

Scrollbars

• New .scrollbar-subtle utility (app.css) — thin, hover-revealed rounded thumb on both axes, thickness via --wm-scrollbar-size, out-specifying the app-wide *::-webkit-scrollbar.
• New ScrollableX.svelte — native horizontal scroll (Tailwind overflow-x-auto) consuming .scrollbar-subtle, replacing melt's createScrollArea (whose thumb never tracked scroll position).
• AIChatDisplay.svelte — the chat message list uses .scrollbar-subtle so it matches the tabs.

Screenshots

Universal markdown (GfmMarkdown) — highlighted with hover copy button:

AI chat code blocks:

Sessions — preview tabs on the shared DraggableTabs (active "Runs ⌄" with picker, "+" after last tab, subtle chat scrollbar):

Test plan

• Script/flow/resource markdown description with fenced code blocks (labeled and unlabeled), and an App Markdown component with a code block → labeled highlight, unlabeled render plain, hover copy, subtle scrollbar, copy works
• A non-markdown HighlightCode caller (editor bar, log panel, script/run page) → copy button unchanged (light Button)
• AI chat: code blocks highlight, Apply button (Script mode) + mermaid still render; message-list scrollbar is thin/hover-revealed
• Sessions preview tabs: open/select/close/drag-reorder (persists across reload), active-tab chevron opens the router picker, "+" (after last tab) opens it
• Tabs/TabsV2 header overflow shows the subtle scrollbar
• Verify in light and dark themes

🤖 Generated with Claude Code

[cloudflare-workers-and-pages]

Deploying windmill with    Cloudflare Pages

Latest commit:	f0e8b20
Status:	✅  Deploy successful!
Preview URL:	https://6e299aea.windmill.pages.dev
Branch Preview URL:	https://glm-improve-session.windmill.pages.dev

View logs

[claude]

Claude finished @Guilhem-lm's task in 2m 11s —— View job

---

cc @Guilhem-lm

Mergeable, but should ideally address nits: powershell fence mis-highlighted as SQL in MarkdownCodeBlock.getSmartLang.

Reviewed the full diff against origin/main. This is a clean, well-scoped frontend refactor: the new shared primitives (MarkdownCodeBlock, .scrollbar-subtle, ScrollableX) are cohesive, the security-sensitive ordering in markdownPlugins.ts is preserved with mermaid correctly opt-in, and SessionPreviewTabs.reorder is defensively written (stale/partial orders can't drop a tab). Nice work.

Findings

P2 — powershell fence highlighted as SQL · frontend/src/lib/components/MarkdownCodeBlock.svelte:80

In getSmartLang, case 'powershell': falls through into the sql group, so a ```powershell block renders with SQL colors. The old HighlightCode.getLang (line 91-92) maps powershell to the dedicated powershell highlighter, so this is a regression for that fence on markdown surfaces. Since SMART_LANG_TO_HIGHLIGHT_LANG has no powershell entry, the cleanest fix is to drop powershell from the sql group so it falls through to plaintext (consistent with java/ruby/json, which this renderer also leaves as plaintext), or add a real powershell mapping if you want it highlighted. Fix this →

Notes (non-blocking)

• getSmartLang recognizes fewer languages than HighlightCode.getLang (java, ruby, rlang, json, nu, duckdb fall to plaintext). That's a reasonable "only highlight recognized langs, else plaintext" choice for untrusted markdown — flagging only so it's an intentional decision.
• .scrollbar-subtle relies on WebKit pseudo-elements + Firefox scrollbar-width/color; both are covered here. Good.

AGENTS.md compliance

• No $bindable(default_value) on optional props — the new $props() blocks use plain defaults or $bindable() with ?? at the usage site. ✅
• No crypto.randomUUID() introduced. ✅
• Design-system components used where applicable (Button, CopyButton, Popover). The new tab strip uses raw div/button with role="tab" — consistent with the existing DraggableTabs it extends, so no new deviation. ✅

Test coverage

Frontend-only change with no new pure-logic utility of the kind that carries a sibling *.test.ts (SessionPreviewTabs.reorder is small and lives on a stateful class), so per repo convention no automated tests are expected. The kitchen_sink additions give a good manual harness.

Manual verification worth doing before merge: on a script/flow/resource markdown description and an App Markdown component, confirm labeled fences highlight, unlabeled/unknown fences render plain, and hover-copy + subtle scrollbar work — and check a ```powershell fence specifically given the finding above. In sessions preview tabs, exercise open/select/close/drag-reorder and confirm the order persists across reload, plus the active-tab chevron and "+" popovers. Verify Tabs/TabsV2 header overflow shows the subtle scrollbar, in both light and dark themes.

[github-actions]

Pi Review

Good to merge

Summary

This is a well-structured frontend polish PR that introduces shared primitives (MarkdownCodeBlock, ScrollableX, .scrollbar-subtle) and refactors the sessions tab strip onto the existing DraggableTabs component. The design is thoughtful — the markdown code block renderer is opt-in for mermaid (safe default for untrusted input), the scrollbar utility properly overrides the app-wide *::-webkit-scrollbar with higher specificity, and the reorder method gracefully handles partial/stale input from the drag-drop callback. No auth, security, or AGENTS.md violations found.

Test coverage

• Frontend pure-logic — sessionPreviewTabs.svelte.ts already has a sibling test file with extensive coverage for open, navigate, close, select, reset, persist, flushNow, observeLocation, and the utility functions. The new reorder method lacks test coverage despite the file having established test patterns (P2). The remaining changed files are Svelte components, which the codebase does not test in isolation — no tests expected for those.
• No in-app surface that needs manual verification beyond the screenshots already in the PR body — the kitchen-sink page exercises the new markdown rendering and DraggableTabs scrollbar, and the PR author's test plan in the description covers all the user-facing touchpoints.

Findings

P2 — sessionPreviewTabs.svelte.ts: missing test for new reorder method

The file has a sibling test (sessionPreviewTabs.test.ts) covering every other method on SessionPreviewTabs. The new reorder(orderedIds: string[]) public method — which implements reorder-on-drag with cleanup-safe semantics (ignores unknown IDs, keeps omitted tabs at end, no-op when unchanged) — has no test case. Given the existing pattern of testing each method on this class (including the debounce/persistence behavior), a test covering the "reorders, defers unknowns, short-circuits unchanged" contract would be appropriate.

[github-actions]

Codex Review

cc @Guilhem-lm
Mergeable, but should ideally address nits: broken troubleshoot tutorial selector

Found 1 issue:

1. [P2] Tabs no longer renders scrollbar-hidden on the inner tab row, but TroubleshootFlowTutorial still targets .border-b.flex.flex-row.whitespace-nowrap.scrollbar-hidden.mx-auto for the “Explore the tabs” step. The FlowStatusViewerInner tab instance still supplies mx-auto, but after this change there is no matching element, so that tutorial step can fail to attach/highlight. Please keep a stable class/data attribute on the tab row or update the tutorial selector.
   frontend/src/lib/components/common/tabs/Tabs.svelte:80
   Selector reference: frontend/src/lib/components/tutorials/TroubleshootFlowTutorial.svelte:333

Test coverage

Frontend component changes generally do not require component tests here. The main automated gap is the new pure SessionPreviewTabs.reorder method in a file that already has sessionPreviewTabs.test.ts; no test was added for preserving omitted ids and persisting reordered tabs.

Manual verification should include the Troubleshoot Flow tutorial through the “Explore the tabs” step and confirm the driver highlight attaches to the tab row. I could not run frontend checks locally: check:fast requires bun, and this checkout has no frontend/node_modules.

[github-actions]

I've now completed a thorough review of all 16 changed files. All three findings from prior reviews (Claude's powershell→SQL mapping in getSmartLang, Codex's scrollbar-hidden tutorial selector, and Pi's missing reorder test) have been fully addressed in the current code. I find no remaining issues.

Pi Review

Good to merge

Prior findings resolved

All three findings from earlier reviews are addressed in the current diff:

• powershell fence → SQL (Claude): getSmartLang no longer includes powershell in the sql group — it falls through to default: return undefined, rendering as plaintext. ✅
• scrollbar-hidden tutorial selector (Codex): Tabs.svelte retains scrollbar-hidden on the inner div with an explicit comment acknowledging TroubleshootFlowTutorial depends on it. The TabsV2 removal of scrollbar-hidden does not affect the tutorial (it targets Tabs with mx-auto). ✅
• Missing reorder test (Pi): sessionPreviewTabs.test.ts now has three test cases covering reorder+persist, unknown-id/omitted-tab handling, and no-op short-circuit. ✅

Diff review

The 16-file change is clean and self-contained:

• MarkdownCodeBlock.svelte — properly opt-in for mermaid (defaults to false), reads language from rehypeSanitize's language-* class, falls back to plaintext for unknown languages. No XSS surface (code is rendered as escaped text).
• ScrollableX.svelte — thin wrapper consuming the shared .scrollbar-subtle CSS class; callers can tune bar thickness via --wm-scrollbar-size.
• DraggableTabs.svelte — new tabAccessory and afterTabs snippets; tabs (including pinned ones) now all live inside ScrollableX, matching the old behavior where they were inside the melt scroll viewport.
• HighlightCode.svelte — buttonsOnHover and customScrollbarX are both opt-in flags defaulting to false, so existing ~20 callers keep their original behavior untouched.
• CodeDisplay.svelte — slimmed to a delegation wrapper around MarkdownCodeBlock, preserving the Apply button and mermaid behavior.
• sessionPreviewTabs.svelte.ts — reorder method defensively handles stale/partial orders (ignores unknown IDs, keeps omitted tabs at end).
• TabsV2.svelte — loses scrollbar-hidden on the inner div, but no TabsV2 caller uses mx-auto, so TroubleshootFlowTutorial's combined selector is unaffected.
• app.css — .scrollbar-subtle properly overrides the app-wide *::-webkit-scrollbar with higher specificity, covers both WebKit and Firefox.
• Kitchen sink additions — exercises the real chat render path (AssistantMessage → CodeDisplay → HighlightCode) and the DraggableTabs scrollbar with overflow tabs.

AGENTS.md compliance

• No $bindable(default_value) on optional props — all new $props() blocks use plain defaults or $bindable() with ?? at usage site. ✅
• No crypto.randomUUID() introduced. ✅
• Design-system components used (CopyButton, Button, Popover); DraggableTabs uses raw div/button with role="tab" — consistent with its existing pattern. ✅
• Comments record constraints (why scrollbar-hidden is kept, why tabAccessory calls stopPropagation) rather than narrating code. ✅

Test coverage

Frontend pure-logic — sessionPreviewTabs.test.ts already had a comprehensive test suite; the new reorder method now has three test cases covering reorder+persist, defensive handling of unknown/omitted IDs, and no-op short-circuit. No other changed files carry sibling *.test.ts patterns. The remaining changes are Svelte components, which the codebase does not test in isolation — no tests expected for those.

Manual verification — the kitchen_sink additions already give a manual harness for the markdown code blocks (real AssistantMessage → CodeDisplay → HighlightCode path) and DraggableTabs scrollbar. The PR author's test plan in the description covers all user-facing touchpoints.

[github-actions]

Codex Review

cc @Guilhem-lm
Mergeable, but should ideally address nits: raw HTML <pre> content dropped.

Found 1 issue:

1. [P2] MarkdownCodeBlock only extracts pre > code > text, but the shared markdown pipeline also supports sanitized raw HTML through rehypeRaw/rehypeSanitize. After this renderer is registered for every pre, markdown like <pre>plain text</pre> now renders an empty code block because children[0] is a text node with no nested children. Fenced code blocks still work, but this silently drops existing sanitized raw <pre> content on GfmMarkdown/AppMarkdown surfaces. Please fall back to the direct text child when there is no nested <code>.
   frontend/src/lib/components/MarkdownCodeBlock.svelte:115

Test coverage

Frontend-only change. The new SessionPreviewTabs.reorder method now has focused tests, and no component tests are expected by repo convention. Manual verification should include a GfmMarkdown or App Markdown surface with both fenced code and sanitized raw <pre>plain text</pre> to confirm the raw pre content is preserved.

[github-actions]

I've completed a thorough review of all 16 changed files. All four prior findings are resolved in the current diff, and I find no new issues.

Pi Review

Good to merge

Prior findings resolved

All four findings from earlier reviews are addressed in the current code:

• powershell fence → SQL (Claude): getSmartLang no longer includes powershell in the sql group — it falls through to default: return undefined, rendering as plaintext. ✅
• scrollbar-hidden tutorial selector (Codex): Tabs.svelte retains scrollbar-hidden on the inner div with an explicit comment acknowledging TroubleshootFlowTutorial depends on it. TabsV2 drops it, but no TabsV2 caller uses mx-auto, so the tutorial's combined selector is unaffected. ✅
• Missing reorder test (Pi): sessionPreviewTabs.test.ts now has three test cases covering reorder+persist, defensive handling of unknown/omitted IDs, and no-op short-circuit. ✅
• Raw HTML <pre> content dropped (Codex Typo on site homepage #2): The code derivation explicitly falls back to astNode.current.children?.[0]?.value (direct text child of <pre>) via ??, with a comment documenting the raw-HTML case. The kitchen sink exercises <pre>raw pre content stays visible</pre>. ✅

Diff review

The 16-file change is clean and self-contained:

• MarkdownCodeBlock.svelte — properly opt-in for mermaid (defaults to false), reads language from rehypeSanitize's language-* class, falls back to plaintext for unknown languages. No XSS surface (code is rendered as escaped text). Handles both fenced blocks (<pre><code>) and sanitized raw HTML (<pre>text).
• ScrollableX.svelte — thin wrapper consuming the shared .scrollbar-subtle CSS class; callers can tune bar thickness via --wm-scrollbar-size.
• DraggableTabs.svelte — new tabAccessory and afterTabs snippets; melt scrollbar replaced with native scroll + .scrollbar-subtle. Tabs (including pinned ones) now all live inside ScrollableX.
• HighlightCode.svelte — buttonsOnHover and customScrollbarX are both opt-in flags defaulting to false, so existing ~20 callers keep their original behavior untouched. The buttonsOnHover path uses the existing CopyButton component.
• CodeDisplay.svelte — slimmed to a delegation wrapper around MarkdownCodeBlock, preserving the Apply button and mermaid behavior.
• markdownPlugins.ts — { renderer: { pre: MarkdownCodeBlock } } added as the last plugin, which is the safe position (after sanitize, so language-* classes are already allowlisted).
• sessionPreviewTabs.svelte.ts — reorder method defensively handles stale/partial orders (ignores unknown IDs, keeps omitted tabs at end, no-op when unchanged), persists through the same debounced #flush as all other mutations.
• app.css — .scrollbar-subtle properly overrides the app-wide *::-webkit-scrollbar with higher specificity, covers both WebKit and Firefox.
• Kitchen sink additions — exercises the real chat render path (AssistantMessage → CodeDisplay → HighlightCode) and DraggableTabs with overflow, plus the raw <pre> regression case.

AGENTS.md compliance

• No $bindable(default_value) on optional props — all new $props() blocks use plain defaults or $bindable() with ?? at usage site. ✅
• No crypto.randomUUID() introduced. ✅
• Design-system components used (CopyButton, Button, Popover); DraggableTabs uses raw div/button with role="tab" — consistent with its existing pattern. ✅
• Comments record constraints (why scrollbar-hidden is kept, why tabAccessory calls stopPropagation, why the raw-HTML fallback exists) rather than narrating code. ✅

Test coverage

Frontend pure-logic — sessionPreviewTabs.test.ts covers the new reorder method with three test cases (reorder+persist, defensive handling of unknown/omitted IDs, no-op short-circuit). No other changed files carry sibling *.test.ts patterns. The remaining changes are Svelte components, which the codebase does not test in isolation — no tests expected for those.

Manual verification — the kitchen_sink additions exercise the real chat render path and DraggableTabs scrollbar with overflow tabs. The PR author's test plan in the description covers all user-facing touchpoints. No additional manual scenarios are needed beyond what's already covered.

[github-actions]

Codex Review

Good to merge

No issues found. Checked for bugs, security, performance regressions, and AGENTS.md compliance.

Test coverage

Frontend: the PR adds focused tests for the new pure SessionPreviewTabs.reorder logic. The other changes are Svelte UI/rendering changes, where this repo’s policy does not require component tests.

Manual verification still needed before merge: exercise markdown/code blocks in chat and shared markdown surfaces, plus session preview tab dragging/closing/opening in the browser, and confirm the subtle scrollbars render correctly. I did not run tests or Playwright because this was a read-only review request.