feat(api-client): Postman-style multi-line variable values (RQ-4145)

[Kanishkrawatt]

RQ-4145

Problem

String-typed variable values in the environment/runtime variables table were edited with an antd <Input>. An <input> element's value sanitization strips line breaks, so any value containing newlines was displayed mangled and silently lost its newlines the moment the user typed into the cell.

The underlying SingleLineEditor had the same latent problem from the other direction: its transactionFilter dropped any transaction whose document had more than one line, so a value that already contained newlines made the editor completely inert — no cursor, no arrow movement, no selection, no copy (RQ-4135).

What changed

SingleLineEditor gains two opt-in props: multiline and readOnly.

In multiline mode it:

• wraps long lines and renders a ↵ glyph at every line end
• binds Shift+Enter to insert a newline and Enter to commit (by blurring, which the existing blur handler turns into a save)
• leaves pasted newlines intact instead of flattening them to spaces

Collapse-on-blur / expand-on-focus is pure CSS, driven off CodeMirror's own .cm-focused class — one line tall when blurred, growing in place to a scrollable 180px cap when focused. No focus-swap state machine. Read-only content can't take focus, so those cells expand on hover instead.

The single-line constraint is fixed at the root, for every consumer. It now drops only transactions that grow the line count, so a pre-existing multi-line value stays navigable, editable and copyable in the URL bar, headers, params, path variables and auth fields too — not just in the cell this ticket names.

Variables table: String-typed value cells (syncValue / localValue) render the new editor. The key column stays single-line, Secret keeps its masked input, and Number/Boolean are untouched.

The CodeMirror extensions moved to singleLineEditorExtensions.ts so the logic is unit-testable without a DOM.

Scope decisions

• Variables value cell only, not all KeyValueTable value columns. Headers and params genuinely cannot contain newlines, so they only needed the inert-cell fix, which they get for free from the shared constraint change.
• Secret values keep the masked antd input. Masking a CodeMirror document is not free, and multi-line secrets aren't a real use case.
• Collapsed cells show the ↵ glyph rather than a … ellipsis. A text-overflow: ellipsis isn't reachable inside CodeMirror's line divs, and the glyph carries the same "there is more here" signal at zero cost.

Testing

app/src/.../SingleLineEditor/singleLineEditorExtensions.test.ts — 6 tests, passing, exercising real EditorState transactions:

• a newline typed into a single-line value is blocked
• a pre-existing multi-line value stays editable instead of going inert (the RQ-4135 regression guard)
• a multi-line value still can't grow
• edits that shrink the line count are allowed
• ↵ glyph positions: every line end except the last

Not verified: the repo-wide npm run type-check and a real browser pass. This machine's disk is full (126 MB free of 228 GB), so npm install could not complete — it rolled back twice. The two touched .tsx files were parse- and type-checked in isolation, and every CodeMirror API used (EditorState.readOnly, EditorView.editable, EditorView.lineWrapping, state.replaceSelection) was confirmed against the installed .d.ts. The visual behaviour — collapsed height, expanded cap, glyph placement, focus border — still needs a look in the app.

🤖 Generated with Claude Code