Skip to content

feat(studio-ui): organise the toolbar into Recipe, Load and Run; open folders with the editor's dialog - #259

Closed
russoedu wants to merge 5 commits into
mainfrom
feat/studio-recipe-load-menus
Closed

russoedu wants to merge 5 commits into
mainfrom
feat/studio-recipe-load-menus

Conversation

@russoedu

Copy link
Copy Markdown
Collaborator

Why

The Studio toolbar mixed three jobs under confusing labels: three buttons for picking a folder, a recipe dropdown, + New recipe, and Open document…, which opened nothing but created a new recipe. It was unclear what was being opened, what was being saved, and how a recipe's input and output connect.

What

  • Recipe ▾: the recipes of the open folder (opening one opens the output it names), New recipe…, Open folder….
  • Load ▾: Document… and Web page (URL)…. Dropping a file anywhere is the same Load.
  • Load semantics: a source of the kind the open recipe reads replaces its start address (steps and mapping stay). A source of the other kind, or no open recipe, starts a new recipe and leaves the open one untouched; a bar says which happened.
  • Saved status next to the menus: "All changes saved" / "Saving…".
  • Open folder… goes straight to the server's folder dialog and falls back to a typed box only when there is none. In the VS Code extension that dialog is vscode.window.showOpenDialog: the Studio process asks the extension host over its IPC channel (works in remote windows, where the folder is).
  • Structure: the recipe-creating files moved into a recipe-start/ slice in their own commit (no behaviour change).
  • Docs: manual §2, studio, studio-desktop and vscode-extension READMEs; desktop e2e updated.

Stacked on #258 (its commit shows here until that merges).

Test plan

  • studio-ui jest (all suites) and lint on the changed folders
  • vscode-extension jest and lint
  • vscode e2e and studio-desktop e2e (updated, not run locally)
  • Try Recipe ▾ → Open folder… in a real VS Code window, local and remote

🤖 Generated with Claude Code

https://claude.ai/code/session_01TjR6eM2tUwU3NGnKXsmEap

russoedu and others added 4 commits October 14, 2026 13:09
…ummarise each field row

The Record tab lists values the steps read that no field uses, with a guessed
type, and adds a field and its mapping in one click. Each row opens with a type
badge, its source pill and the sample value.

Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_014yC6LN4a8qnR7gu3QmRnbg
… slice

Pure move, no behaviour change: the new-recipe dialog, the drop zone and the
open-by-path and document-import flows leave the shell's folder for a slice
with its own barrel, so the toolbar rework can build on it without the app
folder growing past the size review line.

Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01TjR6eM2tUwU3NGnKXsmEap
Recipe ▾ is which recipe is being edited (the recipes of the open folder,
New recipe…, Open folder…), Load ▾ is what it reads (Document…, Web page
(URL)…), and a status says edits are saved as they are made. The folder box,
Open, Browse… and Open document… buttons give way to those.

Load puts the source into the open recipe: a page replaces a web recipe's
start address, a document a document recipe's, steps and mapping kept. A
source of the other kind starts a new recipe and leaves the open one alone,
and a bar says which happened. Dropping a file anywhere is the same Load.

Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01TjR6eM2tUwU3NGnKXsmEap
Open folder… in the browser now goes straight to the server's folder dialog
and only offers the typed box when there is none. In the VS Code extension
that dialog is vscode.window.showOpenDialog: the Studio process asks the
extension host over its IPC channel and the answer opens the workspace, in a
remote window on the remote machine where the recipe folder is.

Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01TjR6eM2tUwU3NGnKXsmEap
…ect, in the e2e tests

The recipe list moved from a native select into Recipe ▾; the two e2e tests
that waited for its option now wait for the menu button naming the
auto-selected recipe.

Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01TjR6eM2tUwU3NGnKXsmEap
russoedu added a commit that referenced this pull request Oct 14, 2026
…tput (includes #258, #259) (#260)

* feat(studio-ui): propose output fields from what the steps read and summarise each field row

The Record tab lists values the steps read that no field uses, with a guessed
type, and adds a field and its mapping in one click. Each row opens with a type
badge, its source pill and the sample value.

Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_014yC6LN4a8qnR7gu3QmRnbg

* refactor(studio-ui): move starting a recipe into its own recipe-start slice

Pure move, no behaviour change: the new-recipe dialog, the drop zone and the
open-by-path and document-import flows leave the shell's folder for a slice
with its own barrel, so the toolbar rework can build on it without the app
folder growing past the size review line.

Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01TjR6eM2tUwU3NGnKXsmEap

* feat(studio-ui): organise the toolbar into Recipe, Load and Run

Recipe ▾ is which recipe is being edited (the recipes of the open folder,
New recipe…, Open folder…), Load ▾ is what it reads (Document…, Web page
(URL)…), and a status says edits are saved as they are made. The folder box,
Open, Browse… and Open document… buttons give way to those.

Load puts the source into the open recipe: a page replaces a web recipe's
start address, a document a document recipe's, steps and mapping kept. A
source of the other kind starts a new recipe and leaves the open one alone,
and a bar says which happened. Dropping a file anywhere is the same Load.

Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01TjR6eM2tUwU3NGnKXsmEap

* feat(vscode): open Studio's folder with the editor's own dialog

Open folder… in the browser now goes straight to the server's folder dialog
and only offers the typed box when there is none. In the VS Code extension
that dialog is vscode.window.showOpenDialog: the Studio process asks the
extension host over its IPC channel and the answer opens the workspace, in a
remote window on the remote machine where the recipe folder is.

Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01TjR6eM2tUwU3NGnKXsmEap

* feat(studio-ui): drag pills and selections onto the output to make fields

The Record tab's field list is a drop target. A pill dragged from a Steps card
adds a field and its mapping, typed as its proposal would be (or a text field
named after it for a loop alias or a value already mapped). A selection staged
in the content pane, dragged by its chip, is appended to the steps as dropping
it on the Steps tab does and, once the recipe reloads, the values it reads
become fields. A pill dropped on a row's own source box still only maps that
row.

Holding a pill or a selection over the Record tab opens it, so the drag does
not need both tabs on screen at once.

The manual no longer says edits outside the JSON tab save themselves: the
Record tab keeps its own Save.

Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01TjR6eM2tUwU3NGnKXsmEap

* fix(studio-desktop): wait for the Recipe menu, not the old recipe select, in the e2e tests

The recipe list moved from a native select into Recipe ▾; the two e2e tests
that waited for its option now wait for the menu button naming the
auto-selected recipe.

Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01TjR6eM2tUwU3NGnKXsmEap

* fix(studio-ui): type the dropped card in the output drop zone test

Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01TjR6eM2tUwU3NGnKXsmEap

---------

Co-authored-by: Claude Sonnet 5.5 <[email protected]>
@russoedu

Copy link
Copy Markdown
Collaborator Author

Superseded by #260, which squash-merged these commits into main (c9ae464). Closing as redundant.

@russoedu russoedu closed this Oct 14, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant