Skip to content

feat(studio-ui): propose output fields from what the steps read - #258

Closed
russoedu wants to merge 1 commit into
mainfrom
feat/studio-record-visual
Closed

russoedu wants to merge 1 commit into
mainfrom
feat/studio-record-visual

Conversation

@russoedu

Copy link
Copy Markdown
Collaborator

Why

Designing the output in the Record tab was unclear: picks made pills, but nothing said they needed to become output fields, and a row was a wall of inputs.

What

  • Suggestions strip: every extract/set value the steps read that no field uses (and no forEach loops over) is proposed as a chip: pill → field name, guessed type. + adds the field and its mapping in one state update; Add all adds every proposal.
  • Type guess (suggest-fields.algorithm.ts): from how the value is taken (attr:href/src → url with an absoluteUrl transform; many → array of text) and from the words in the id (price → number, date → date, availability → boolean, quantity → integer...), else string. Never currency (it fails without a code); number reads a price with a symbol.
  • Row summary: a coloured type badge, the source pill (or not mapped / generated) and the selected sample record's value.
  • Empty state that says what to do.
  • Manual §5 updated.

Test plan

  • nx run-many -t lint,typecheck,test,build -p studio-ui (454 tests, 0 lint errors)

🤖 Generated with Claude Code

…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
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