50 Commits

Author SHA1 Message Date
Ruben Fiszel b1d26bd268 chore: pin ui_builder to 2471791 (#10402)
Picks up the language-server fix in the in-editor builder
(windmill-labs/windmill-code-ui-builder#26), so .svelte files get
IntelliSense, diagnostics and go-to-definition again. The bundled
extension's language server was dying on startup with

  Cannot read properties of undefined (reading 'useCaseSensitiveFileNames')

Builds and runtime were unaffected — this is editor language support
only, and it predates the rune-module and delegated-event fixes already
pinned here.

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-07-29 12:11:41 +02:00
Ruben Fiszel 9c37b0217c fix(cli): compile runes in .svelte.ts / .svelte.js modules (#10400)
* fix(cli): compile runes in .svelte.ts / .svelte.js modules

The svelte plugin only ran on `/\.svelte$/`, so a rune module like
`lib.svelte.ts` was bundled as plain TypeScript: the types were stripped
and `$state(0)` survived as a call to an undefined global, blowing up at
runtime with "ReferenceError: $state is not defined".

Route those files through `compileModule`. It parses with plain acorn and
chokes on TypeScript, so types come off first via esbuild's transform —
which is what vite-plugin-svelte gets for free by running after Vite's own
esbuild transform.

`wmill app dev` picks this up too; watch mode builds its plugin list with
the same `createFrameworkPlugins`.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* chore: pin ui_builder to 1ffb28e

Picks up the matching rune-module fix in the in-editor builder
(windmill-labs/windmill-code-ui-builder#24), so `.svelte.ts` modules
compile in the editor as well as through the CLI.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* fix(cli): compile raw apps with the app's own svelte compiler

Svelte 5.52.0 moved delegated event handlers off `element.__click` onto a
Symbol-keyed map. A raw app supplies its own Svelte *runtime* via
package.json, but `import("svelte/compiler")` resolves against the CLI,
whose own svelte floats independently — so the two can land on opposite
sides of that change and the app builds, renders, and has every
onclick/oninput silently dead.

Resolve the compiler from the app's node_modules instead, so compiler and
runtime are the same install by construction, and raise the CLI's own
floor past the break for the fallback path.

Also pin ui_builder to 013bf67, which carries the matching fix for the
in-editor builder (windmill-labs/windmill-code-ui-builder#25), and move
the Svelte raw-app template onto the same range. Those two go together:
the new builder rejects a runtime that sits on the far side of the ABI
break from its compiler.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-07-29 11:13:16 +02:00
Guilhem bd246644c9 feat: add github dark mode variant switchable in user settings (#10002)
* feat: add github dark mode variant switchable in user settings

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat: boot the UI Builder iframe into the current theme

Seed the UI Builder iframe URL with the live dark/variant state
(`?dark=&variant=`) so the VS Code workbench boots straight into GitHub
Dark / Nord / Light instead of flashing the dark default until the host's
`setDarkMode` message lands. Read from the <html> classes rather than the
reactive state so the src is computed once at mount — a later theme toggle
still updates the workbench via postMessage and does not reload the iframe.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* feat: align github-dark surfaces to GitHub Primer's elevation scale

Snap the invented mid-greys to Primer's real dark canvas scale
(inset=neutral.0, default=neutral.1, muted=neutral.2). Recessed surfaces
now use true inset (#010409) instead of washed-out half-steps that sat in
no-man's-land between inset and the page; raised surfaces align to muted.

- surface-secondary  #0b0e13 → #010409  (true inset)
- surface-input      #0c0f14 → #010409  (true inset)
- surface-disabled   #0b0e13 → #151b23  (muted)
- surface-tertiary   #161b22 → #151b23  (Primer neutral.2)
- component-virtual-node #161b22 → #151b23
- surface-selected   #21262d → #212830  (Primer neutral.3)

surface-sunken (#010409) and surface-primary (#0d1117) already matched
Primer inset/default exactly.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* fix: keep github-dark inputs subtle instead of full inset

surface-input at true inset (#010409) made form fields read as recessed as
the sidebar rail — too much contrast against the canvas. Inputs aren't
sunken, so keep the subtle #0c0f14 (a hair below the page) while the
recessed panel surfaces stay at inset.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* chore: bump UI Builder pin to the github-dark build (76ee616)

windmill-code-ui-builder PR #16 is merged and published to R2, so pin the
artifact to that build. The embedded raw-app editor now renders GitHub Dark
(and honors the `variant` message) natively from the pinned build — no local
swap needed. Reword the variant comment now that the dependency is resolved.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* fix: address codex review nits on the github-dark theme

- UserSettings: re-read the dark variant when the settings drawer opens, so a
  change made through one mounted instance (page-local drawer) isn't shown
  stale by another (the always-mounted layout instance).
- PublicApp / OAuth login callback: restore the `github-dark` variant class,
  not just the base `dark` class. These routes bypass the (root) layout, so
  they previously fell back to the default dark palette despite the saved
  preference.
- RawAppEditor: condense the two new theme comments to the durable constraints
  per AGENTS.md (drop narration and the ephemeral artifact-pin history).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* fix: address CI review findings on the github-dark theme

- Move the hand-authored `github-dark` token set out of the Figma-generated
  tokens.json into githubDark.json, merged back in at the two consumers
  (tailwind.config.cjs before the rgb pass, utils.ts) so a Figma re-export of
  tokens.json can no longer drop the set and crash the build.
- Restore the default-dark sidebar divider to #374151 — the PR must leave the
  Default variant unchanged; only the github variant adapts it to border-light.
- Extract the `github-dark` DOM-class read into getAppliedDarkModeVariant() and
  reuse it across RawAppEditor and vscode.ts; drop the redundant `void darkVariant`.
- Override the Monaco popup vars (suggest/hover widgets) in the github variant so
  they match the GitHub palette instead of VS Code's greys.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-authored-by: Ruben Fiszel <ruben@windmill.dev>
2026-07-28 18:34:41 +02:00
Ruben Fiszel 05157861aa chore(frontend): bump ui_builder to 1f1fe4f (raw-app deploy minify + no source map) (#10280)
Picks up windmill-code-ui-builder #22 + #23: the raw-app deploy bundler
(RawAppBundlerHost) now emits a minified bundle with no source map instead of
the editor-preview defaults (unminified + inline base64 map). Deployed raw apps
were being served multi-megabyte bundles by apps_u/get_data, which also
amplified S3 fetch latency into slow app loads. The in-editor preview is
unchanged.

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-23 10:45:42 +02:00
hugocasa c55ac5326f fix(raw-apps): full code ui builder improvements
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
2026-07-17 00:14:37 +02:00
hugocasa 24750e6ef1 fix(raw-apps): prevent and surface the silent blank screen from an unmounted #root (#10150)
* fix(raw-apps): prevent and surface the silent blank screen from an unmounted #root

An `index.tsx` written as a bare `export default function App() {...}` with
no mount call builds and runs without throwing: the preview executes the
bundle against an empty `<div id="root">` and auto-renders nothing, so the
JSX never runs, nothing reaches the console or the runtime-error overlay,
and the app is blank with no diagnostic.

Prevent it: the raw-app system prompt and the in-chat app prompt now state
that `index.tsx` is the mount entrypoint, show the mount shim for React,
Svelte and Vue, and call out that a bare component fails silently.

Surface it: when a build still mounts nothing, the preview harness posts
`emptyRender` and the editor shows an error overlay naming the missing
call. The harness reports only when nothing is on screen AND the app never
looked `#root` up, so an app that mounted but paints nothing yet (a fetch
in flight, an unresolved Suspense) is never flagged; `renderAppeared`
withdraws the overlay if a deferred mount lands late.

The handlers stay dormant until the builder tarball that emits these
messages is pinned via `ui_builder_artifact.json`.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* chore(raw-apps): pin the UI builder artifact that emits emptyRender

Activates the "Nothing was mounted" overlay: the pinned tarball predates
the harness change, so the host handlers were dormant until now.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* chore: drop a screenshot accidentally committed at the repo root

Not referenced anywhere; the PR's screenshots are hosted externally.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(raw-apps): make the unmounted-app guidance framework-aware

The detector fires for every raw-app framework, but the overlay and the
prompts named React's `index.tsx` and `createRoot` unconditionally. Svelte
and Vue apps mount from `index.ts` via `mount` / `createApp`, so the
guidance pointed at a nonexistent entrypoint and an unavailable API.

Derive the entrypoint and mount call from the app's files, keyed off file
extensions rather than the template filenames, which users rename.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-16 15:48:50 +02:00
Guilhem 8df613b4d2 feat(raw-apps): runtime-error overlay + AI import-React instruction (#9966)
* feat(raw-apps): render runtime-error overlay + instruct AI to import React

Render the `runtimeError` message the raw-app preview frame now posts as a
prominent overlay, so an uncaught exception that blanks the app is visible
instead of silent. Cleared on the next successful build (via a shared
`feedPreviewIframe` helper so every preview-feed path resets it).

Add an AI app-generation instruction to begin React files with
`import React from 'react'`: raw apps bundle with the classic JSX transform,
so a missing import compiles fine but throws "React is not defined" at runtime.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* feat(raw-apps): add the import-React rule to the shared raw-app prompt

The global AI chat and the raw-app CLI skill draw their raw-app authoring
reference from system_prompts/base/raw-app.md — a separate surface from the
app chat's inline prompt (core.ts). Add the same "always begin JSX files with
`import React`" rule there (esbuild's classic transform needs React in scope,
or JSX throws "React is not defined" at runtime) and regenerate the derived
prompt files.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* chore(raw-apps): bump ui_builder tarball to f8cecf9 (runtime-error overlay)

Pins the ui_builder artifact to windmill-code-ui-builder#15, which pushes
uncaught runtime errors from the preview iframe to the parent so the raw-app
editor can render them in the error overlay.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-07 09:32:43 +02:00
Guilhem a116715c41 feat(frontend): restore raw app 'open preview in separate window' (#9765)
* feat(frontend): restore raw app 'open preview in separate window'

Re-adds the detached preview window dropped when preview hosting moved to
the host (ui-builder f52d8e5b). Live-synced preview + dark mode, and wires
the runnable bridge to the detached window so backend calls resolve there.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(frontend): repaint detached raw app preview after refresh

The detached preview tab is a blank app-preview.html shell fed by the
editor over postMessage. A one-shot opener load listener can't survive the
tab refreshing itself, so a manual reload left it blank. It now posts
'appPreviewReady' on every (re)load and the editor re-sends the build; the
orphaned window is also closed when the editor unmounts.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(frontend): keep load-based feed for detached preview initial open

Relying solely on the appPreviewReady handshake left the detached window
blank on first open against app-preview.html artifacts that predate the
handshake (the pinned UI Builder tarball). Restore the one-shot load feed so
initial open works regardless of the served shell; the handshake still
covers manual refresh.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(frontend): re-sync dark mode when refocusing detached preview

The focus-reuse path replayed the build but not the theme, so re-opening an
existing detached window after a dark-mode toggle kept the stale theme until
the next build. Extract a feedExternalPreview() helper (theme + build) used by
the open, focus-reuse, load and handshake paths.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* chore(frontend): bump ui_builder artifact to 062d11c (preview handshake)

Pins the UI Builder artifact built from windmill-code-ui-builder#14, which
adds the appPreviewReady handshake, detached-preview favicon and title.
Activates refresh-repaint + favicon for the detached raw app preview.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* chore(frontend): serve ui_builder static bundle in dev, proxy :4000 only as fallback

The postinstall downloads the pinned UI Builder artifact into static/ui_builder,
which SvelteKit already serves at /ui_builder. Skip the :4000 proxy when that
bundle is present so dev uses it directly (matching prod / the backend's
static-vs-:4000 fallback); no separate UI Builder dev server needed. Delete
static/ui_builder to develop the builder against :4000.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(frontend): harden detached preview origin + scope window name

Addresses cubic review on #9765:
- P1: only honor appPreviewReady from a same-origin sender and post the build
  with targetOrigin=location.origin, so user app code that navigates the
  detached window cross-origin can't trigger/receive a build (app source).
- P2: scope the detached window name per app path so two open editors don't
  collide over one OS-level preview window.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-24 15:39:16 +00:00
centdix f86d0d79fc feat: add get_app_runtime_logs tool to global chat (#9502)
* feat: add get_app_runtime_logs tool to global chat

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix: only handle raw app backend messages from the runner's own iframe

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat: add list_app_runs tool to global chat for raw app backend runs

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* refactor: simplify raw app chat tool results

* nits

* nits

* chore: bump ui builder artifact

* fix: resolve pending runtime log requests on cleanup

* fix: harden raw app runtime log requests

* nits

* fix: show raw app tool results in status

* fix: cap raw app runtime log results

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-12 00:19:13 +02:00
Ruben Fiszel d3d61d4acd bundle oauth_connect.json into packaged components (#9535)
* fix(frontend): abort publish.sh when package build fails

* fix(frontend): bundle oauth_connect.json into packaged components
2026-06-11 14:19:24 +00:00
Ruben Fiszel 39ff9389a0 make packaged runes-module imports resolvable by consumers (#9533) 2026-06-11 13:21:32 +00:00
centdix dec58e6c4f feat: deploy raw apps from global chat (#9349)
* feat: deploy raw apps from global chat

* fix: require raw app bundle protocol

* chore: bump ui builder artifact

* docs: explain app custom path deploy handling
2026-05-27 18:55:15 +02:00
Guilhem 90a196d8d8 feat(raw_apps): surface UI Builder build errors over the preview pane (#9316)
* feat(raw_apps): surface UI Builder build errors over the preview pane

Companion to the matching change in the UI Builder repo (see linked PR),
which stops rendering the build-error overlay over the VS Code editor
iframe and instead emits a `buildError` postMessage on every build
(message: undefined on success to clear).

Listen for that message on the existing window message handler (already
source-gated by the UI Builder iframe), store it in a `buildError`
$state, and surface it in two places:

* A red banner over the preview iframe, sibling to the existing logs
  overlay (`top-12 left-2 right-2 z-20` so it clears the tab bar) —
  failures appear right where the user looks for the rendered output.
* The Preview tab's icon and label tint red
  (`text-red-600 dark:text-red-400`, matching the existing error
  convention in raw_apps) — important in single-tab mode where the
  preview pane is collapsed to 0px and the banner would be hidden.
  Done by mapping `leftPaneTabs` / `rightPaneTabs` through a small
  `tintPreviewOnError` helper so the source-of-truth `tabs` array is
  untouched (DnD, ordering, fallback selection keep using the original
  previewTab object).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* refactor(raw_apps): use Alert component for the build-error banner

Replace the hand-rolled red div with the shared `Alert` component
(`type="error"`, `title="Build failed"`). The error text stays in a
`<pre>` child so multi-line bundler output keeps its formatting, with
`max-h-60` so a long error never takes over the whole preview pane.

The absolute-positioned wrapper (`top-12 left-2 right-2 z-20`) and the
`role="alert"` move to that wrapper so the Alert component itself stays
unstyled at the call site.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(raw_apps): solid bg-surface backing behind build-error Alert

The Alert's error background is semi-transparent in dark mode
(`bg-red-900/40` in `common/alert/model.ts`), so the preview iframe
shows through when the banner is laid over it. Add a `::before`
pseudo on the Alert root with `bg-surface` (matched `rounded-md`,
`-z-10` so it sits behind the red bg) to give it a solid plate.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* refactor(raw_apps): isolate banner stacking context, DRY tab tint chain

Two small follow-ups from review:

* Add `isolate` to the build-error banner wrapper so the `before:-z-10`
  pseudo's stacking context is pinned locally — it works today because
  `position: absolute` + `z-20` creates one, but `isolate` makes the
  dependency self-documenting and survives a future refactor that
  removes the explicit `z-20`.
* Extract `tintTabs = (ts) => ts.map(tintPreviewOnError)` so the two
  `$derived` blocks for leftPaneTabs / rightPaneTabs read identically.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* chore(raw_apps): trim build-error overlay comments

Per review feedback. Keep only the load-bearing facts (bg-surface backs
the Alert's translucent red, isolate pins the pseudo stacking, the
`message: undefined` clear convention) and drop the prose context that
duplicated what the code already shows.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* chore(raw_apps): bump bundled ui_builder to 00c9834

Brings in the postMessage emission from
windmill-labs/windmill-code-ui-builder#9 (merged) so this PR's host
listener actually receives `buildError` events. SHA verified against
the R2 artifact.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-25 18:15:14 +00:00
Guilhem 80f2831a84 chore(raw_apps): bump bundled ui_builder to b4f6219 (#9314) 2026-05-25 16:12:49 +00:00
Guilhem 368e677419 feat(raw_apps): tab-based editor surface with split-with-preview (#9273)
* feat(raw_apps): custom tab system for source / runnable / preview

Replaces the fixed split-pane layout with a tab bar inside the editor
area. Each frontend file is a tab, each selected runnable is a tab,
and the Preview is pinned to the right (non-closable). Tabs are an
alternative discoverability surface to the sidebar — both stay
functional, but tabs make navigation viable on small screens with
the sidebar collapsed.

A "Split with Preview" toggle in the tab bar's trailing slot pairs
the active tab with the preview side-by-side for wide-screen
multitasking. The toggle hides when Preview is already the active
tab.

The UI Builder, runnable editor, and preview iframe all stay mounted
across tab switches (toggled via `display`) — no bundler restarts, no
preview state loss, no editor remounts.

- New common/tabs/DraggableTabs.svelte: reusable tab strip with
  drag-reorder (@windmill-labs/svelte-dnd-action), pinned-left/right
  slots excluded from the drag zone, hover-revealed X close, middle-
  click close, keyboard navigation (arrows / Enter / Backspace),
  and a `trailing` snippet for inline toolbar add-ons.
- raw_apps/RawAppEditor.svelte:
  - Tab state (`tabs`, `activeTabId`, `splitWithPreview`) lives in
    Windmill. Persisted in localStorage keyed by workspace + app path.
  - Sidebar file clicks (`handleSelectFile`) and runnable selection
    (`selectedRunnable` via `bind:`) are mirrored into tabs via an
    effect — the sidebar interaction is otherwise untouched.
  - Listener augmented: `setActiveDocument` backfills tabs for files
    VS Code opens by itself; `setFiles` / `runnables` updates drop
    stale tabs.
  - Bundler / inspector / rebuild toolbar moves into the tab bar's
    trailing slot — always visible regardless of active tab.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* feat(raw_apps): modern tab styling + resizable split-with-preview

Two polish passes on the new tab system:

DraggableTabs styling:
- Remove the bottom border on the tab strip + the accent-coloured
  border-b-2 on the active tab. The active tab now shares the
  surface background with the content area below it, so the
  boundary visually "disappears" — modern IDE-style tabs.
- Inactive tabs sit on the darker surface-secondary tab strip and
  get a subtle right separator so they don't blur into each other.

Split-with-Preview is now a real resizable Splitpanes:
- The content area is rendered as a Splitpanes (always), with the
  source/runnable slot on the left and the preview iframe on the
  right. The user can drag the divider to adjust the ratio when
  the "Split with Preview" toggle is on.
- Iframes never remount across single↔split toggles — pane sizes
  are driven reactively from (activeTabKind, splitWithPreview),
  not by adding/removing the Splitpanes itself.
- The user's preferred split ratio is remembered while they're
  dragging and reapplied next time split is enabled.
- The inner splitter is CSS-hidden in single mode so the toggle
  button stays the single canonical way to flip layouts.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* refactor(raw_apps): split mode moves preview tab into the right pane

Cleaner mental model for split-with-preview. Instead of "split the
active tab + always keep the Preview tab around", the Split toggle
now physically moves the Preview tab out of the bar and into a
permanent right pane. When the user toggles split off, the Preview
tab reappears in the bar like any other tab.

- New `displayedTabs` derived: filters out the Preview tab when
  splitWithPreview is on, so the user sees only file/runnable tabs
  in the bar and a dedicated preview pane on the right.
- `toggleSplit` redirects the active tab to the most recent
  file/runnable when the user toggles split on with Preview active,
  so they don't end up staring at an empty left pane.
- Split toggle is now always visible — the user can flip both ways.
  The button label flips between "Pin preview to the right" and
  "Move preview back into a tab" to reflect what's about to happen.
- reorderTabs preserves the Preview tab in the underlying `tabs`
  array even though it's filtered out of the drag set in split mode.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* feat(raw_apps): VS Code-style "Preview" header on the right pane

In split mode, the right pane now shows a small "Preview" tab-styled
header anchored at its top-left — making the layout read like a real
VS Code editor split, where each group has its own tab bar.

- Header appears only when `splitWithPreview && activeTabKind !== 'preview'`
  (i.e. when the right pane is meaningfully separate from the left's
  content). In single mode with preview active, the right pane is the
  only thing visible and the main tab bar already labels it.
- The header uses the same styling as an active tab: `bg-surface`
  on a `bg-surface-secondary` strip, h-8, text-xs, no border.
- An X button next to the label toggles split off — equivalent to
  closing the editor in VS Code's split view (preview goes back to
  living as a tab in the main bar).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* refactor(raw_apps): VS Code-style symmetric tab bars per pane

Restructure the editor area so each pane is a self-contained "editor
group" with its own tab bar at the top. The Splitpanes is now the
topmost element — the divider runs floor-to-ceiling, splitting both
the tab bars and the content.

Layout (left pane = source / runnable, right pane = preview):
- Left pane top: DraggableTabs (file/runnable tabs, Preview tab when
  split is off) + Split-toggle in the trailing slot.
- Right pane top: a custom preview header — "Preview" label styled
  like an active tab on the left + the preview-affecting toolbar
  (bundler, inspector, rebuild) on the right.
- Each pane independently sized via Splitpanes; iframes + the
  runnable panel stay mounted and toggled via `display` so state
  survives every transition.

Trade-off: in single-mode with Preview active (paneA=0), the left
tab bar is hidden along with the left pane. To switch back to a
file tab the user uses the sidebar — which is exactly the
discoverability surface tabs were meant to complement, not replace.

Button placement by semantic ownership:
- Layout control (Split toggle) — left side, with the editor.
- Preview-affecting controls (bundler, inspector, rebuild) — right
  side, with the preview. No close-X on the right; the Split toggle
  on the left is the canonical way to flip layouts.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(raw_apps): keep tab bar visible when Preview is active in single mode

The "VS Code-style" restructure put the tab bar inside the left
Pane. When activeTabKind became 'preview' in single mode, the left
pane collapsed to width 0 and the entire tab bar disappeared with
it — leaving the user with no way to switch back to a file tab
except via the sidebar.

Move the main tab bar back above the inner Splitpanes (full width,
always visible). The preview pseudo-header stays inside the right
pane, carrying the bundler / inspector / rebuild toolbar. The
splitter only goes through the content area below the tab bar,
which is acceptable given how much friction the disappearing-tabs
edge case caused.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* refactor(raw_apps): per-pane tab bars with mirrored single-mode lists

Replace the single tab bar above the inner Splitpanes with one
DraggableTabs per pane. Splitter now goes floor-to-ceiling through
tabs AND content in split mode.

In single mode both bars mirror the full tab list, so the visible
pane always carries every tab — fixes the bug where activating
Preview hid the tab strip. Clicking Preview while in split mode is
a no-op (Preview is permanently visible in the right pane).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* refactor(raw_apps): polish tab strip and sync editor font to text-xs

* feat(raw_apps): move logs overlay onto the preview pane

* refactor(splitpanes): extract pixel-aware minSize helper

* fix(raw_apps): tab hydration loads correct file; closeTab in split mode

* fix(raw_apps): lazy-mount UI Builder iframe + add dev:ui-builder script

* feat(raw_apps): default split view, blue preview tab, fix dnd ghosting

* fix(raw_apps): remove 1px splitter sliver beside preview in single view

* fix(raw_apps): tab scrollbar on hover, fix thumb height + resize staleness

* refactor(raw_apps): don't persist tab/split layout in localStorage

* refactor(raw_apps): derive pane sizes + binding setter instead of effects

* style(raw_apps): trim verbose comments

* feat(raw_apps): accept appendLogs delta from the UI Builder iframe

* fix(raw_apps): exit inspect mode on Escape

* fix(raw_apps): Escape clears lingering inspector selection after pick

* style(raw_apps): accent-selected styling for active tab, bg-surface strip

* fix(raw_apps): address PR review nits (drop debug log, timer/reorder/pane-setter, dev script restore)

* fix(raw_apps): clear inspector overlay on the preview iframe, not the source

* style(raw_apps): neutral tab look (surface-tertiary/text-emphasis selected, text-hint idle)

* chore(raw_apps): bump bundled ui_builder to 61b6fdd

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-25 15:27:25 +00:00
Ruben Fiszel 302ce58e98 harden UI builder artifact bootstrap with verified pinned metadata (#9189)
* feat: harden UI builder artifact bootstrap with verified pinned metadata

* fix: emit tab-indented artifact json to match prettier config

* refactor: rewrite artifact json with node instead of python

* refactor: simplify bootstrap to flat script, drop test scaffolding
2026-05-16 07:40:29 +00:00
Ruben Fiszel e7deaf9882 fix: improve raw app builder queue behavior for bigger apps 2026-04-30 13:10:01 +00:00
Ruben Fiszel de0b6b1528 feat: workspace-shared ui/ folder reusable across raw apps (#8974)
* feat: add workspace-shared ui/ folder reusable across raw apps

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* feat: add shared ui/ drawer in raw app editor sidebar

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* feat: forward workspace shared ui/ to raw app editor iframe

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* all

* all

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-29 18:54:55 +00:00
hugocasa 754b48cb89 fix: waitJob getJob and streamJob in raw apps (#7901)
* fix: waitJob getJob and streamJob in raw apps

* nits

* use latest ui builder

* fix

---------

Co-authored-by: Ruben Fiszel <ruben@windmill.dev>
2026-02-11 11:41:37 +00:00
Ruben Fiszel 73d8c5a4a8 use latest ui builder 2026-01-26 19:16:31 +00:00
Guilhem 687175c6a8 fix(frontend): improve raw app history (#7625)
* fix raw app header overflow

* update ui-builder hash

* Make monaco default size match brand guidelines

* nit

* Move run button to test panel

* wip improve history

* add current checkout point

* fix logic to switch wetween history state

* improve history visualisation

* improve animations

* nit

* remove test page

* fix timing issue when selecty history entries

* update ui_builder hash

* remove dev file

* nit

* revert setting editor font to 13.5 px

* update ui builder

---------

Co-authored-by: Ruben Fiszel <ruben@windmill.dev>
2026-01-20 18:30:52 +00:00
Ruben Fiszel bb22fcb3a4 raw app improvements 2026-01-20 08:37:15 +00:00
Ruben Fiszel 1819713450 feat: add streamJob to raw apps 2026-01-16 10:47:52 +00:00
Ruben Fiszel 483b7d699f fix: improve raw app builder malformed files 2026-01-15 17:51:33 +00:00
Ruben Fiszel 62eeec63ac update ui builder 2026-01-14 20:41:51 +00:00
Guilhem 15842ad638 fix overflows in the app builder [Merge ui-builder first] (#7576)
* fix raw app header overflow

* update ui-builder hash
2026-01-14 15:45:49 +00:00
Ruben Fiszel 8ffef2e3ba use latest windmill raw app ui builder 2026-01-13 16:34:39 +00:00
Ruben Fiszel 1f5a9f4b99 fix: fix svelte for full-code apps 2025-12-27 15:34:49 +00:00
Ruben Fiszel 66c8e2f6da feat: allow code selection to be added as context to the AI Chat 2025-12-26 14:44:09 +00:00
Ruben Fiszel c90d878bc1 feat: implement item selection for raw app builder 2025-12-26 13:14:14 +00:00
Ruben Fiszel 8029ec150a use rolldown optionally as bundler 2025-12-26 10:50:02 +00:00
Ruben Fiszel 50952b8e44 fix ts initialization going wrong 2025-12-25 10:16:13 +00:00
Ruben Fiszel 1ec0dc77ea remove vue support from ui builder 2025-12-25 10:11:24 +00:00
Ruben Fiszel 3ed45d57df fix: fix raw app ui builder setFiles errors 2025-12-25 10:04:12 +00:00
Ruben Fiszel 3dd4579d0a feat: raw apps can be built by agents fully locally (#7448) 2025-12-24 21:00:04 +00:00
hugocasa 4071e3c004 improve windmill-components compat with hub (#7437) 2025-12-23 15:26:23 +00:00
Ruben Fiszel 2f5fdd6b3f fix(rawapp): make popup work with runnables 2025-12-14 22:32:22 +00:00
Ruben Fiszel 431074d249 fix: add history to raw app builder (#7362)
* appHistory

* appHistory

* all

* all

* all

* all

* all

* all

* all

* all

* improvements
2025-12-13 13:32:52 +00:00
Ruben Fiszel 2d563c6c17 vite + svelte support on local dev 2025-11-29 18:12:14 +00:00
Ruben Fiszel d1c33c195f runBg -> backend II 2025-11-29 16:13:43 +00:00
Ruben Fiszel 5576df0f03 runBg -> backend 2025-11-29 15:55:41 +00:00
Ruben Fiszel 6f5489c7dd raw apps v2 (#7251) 2025-11-29 01:23:47 +00:00
Ruben Fiszel 1df18a912c use smaller ui builder 2025-10-04 00:04:32 +00:00
Ruben Fiszel 3c7a12da57 raw app storage on db + s3 (#6749) 2025-10-03 16:30:06 +00:00
Ruben Fiszel 08bc836ed5 update monaco (#6372)
* update monaco

* nits

* update

* force rebuild

* all

* fix

* fix

* fix
2025-08-14 11:30:10 +00:00
Ruben Fiszel 3fbd3ec4f9 fix: tag select in script builder top bar (#6136)
* all

* update

* react 18

* update

* update

* update
2025-07-07 10:27:09 +00:00
Ruben Fiszel e0f4f83ebf fix: improve monaco editor memory leak 2025-05-28 15:46:55 +02:00
Ruben Fiszel 3c68fef2ab ui code builder v0 (at secret path) (#4964) 2025-04-20 01:19:02 +02:00
Faton Ramadani e9e6182791 feat(frontend): Added tailwind classes auto-complete (#2712)
* feat(frontend): Added tailwind classes auto-complete

* feat(frontend): handle tailwindcss as a language
2023-11-28 11:13:49 +01:00
Faton Ramadani cdc76994f8 feat(frontend): Buttons refactor (#2545)
* feat(frontend): wip

* feat(frontend): button refactor wip

* feat(frontend): button refactor wip

* feat(frontend): fix build

* feat(frontend): fix build

* fix(frontend): fix build

* fix(frontend): fix buttons styles

* fix(frontend): remove dev file

* feat(frontend): clean up

* feat(frontend): done

* feat(frontend): done

* feat(frontend): remove duplicated componnet

* feat(frontend): wip

* feat(frontend): wip

* feat(frontend): forked Flow icons

* feat(frontend): remove legacy dropdown

* feat(frontend): migrated all + remove dependencies

* feat(frontend): clean up
2023-11-10 09:43:10 +01:00