Skip to content

feat(ui): add SelectField renderer to InspectorPane for enum-constrained strings#375

Merged
streamer45 merged 5 commits intomainfrom
devin/1777128698-inspector-select-field
Apr 25, 2026
Merged

feat(ui): add SelectField renderer to InspectorPane for enum-constrained strings#375
streamer45 merged 5 commits intomainfrom
devin/1777128698-inspector-select-field

Conversation

@staging-devin-ai-integration
Copy link
Copy Markdown
Contributor

@staging-devin-ai-integration staging-devin-ai-integration Bot commented Apr 25, 2026

Summary

The Stream View (overlay controls) renders enum-constrained string properties as <select> dropdowns (added in PR #327), but the Inspector/Monitor View renders the same properties as free-text <input> fields. This PR fixes the inconsistency.

Changes in ui/src/panes/InspectorPane.tsx:

  • FormSelect styled component — matches the existing FormInput pattern (same padding, border, color tokens, focus ring) with cursor: pointer and a disabled state.
  • SelectField renderer — follows the StringField/NumberField/BooleanField pattern. Renders a <select> populated from schema.enum values and fires onChange with the selected string value. Resolves the initial value to a valid enum option (falls back to schema.default then first enum entry) to prevent UI/state desync when currentValue doesn't match any option.
  • renderField routing — in the case 'string': branch, checks schema.enum length before falling through to StringField. This mirrors the logic in schemaToControlConfigs (ui/src/utils/jsonSchema.ts).

The field uses WebSocket-driven state (Jotai nodeParamsAtom) as the source of truth and sends UpdateParams through the existing handleInputChange path, respecting schema.path overrides and the isMonitorView disabled logic for non-tunable params.

New test file ui/src/panes/InspectorPane.test.tsx (5 tests):

  • Select dropdown rendering for enum-constrained strings
  • Fallback to first enum value when currentValue doesn't match
  • UpdateParams dispatch on selection change
  • Text input rendering for non-enum strings
  • Disabled state for non-tunable params in monitor view

Review & Testing Checklist for Human

  • Add a node with an enum-constrained tunable string param (e.g. servo plugin's viewport_resolution) and verify the Inspector pane renders a dropdown, not a text input
  • Change the dropdown selection and confirm the UpdateParams message is sent (check WS traffic or observe the node reacting)
  • Verify non-tunable enum params are disabled (greyed out) in Monitor view

Notes

  • extractTextConfigs in jsonSchema.ts already excludes enum strings (line 324), so no changes needed there.
  • The pre-existing max-lines lint warning on InspectorPane.tsx was already present before this PR (file was 528 lines, limit is 500).

Closes #328

Link to Devin session: https://staging.itsdev.in/sessions/8c7942c445034b79b686fdb141e923e4
Requested by: @streamer45

…ned strings

Detect when a tunable string property has an enum constraint in its
JSON Schema and render a <select> dropdown instead of a free-text
<input> in the Inspector/Monitor View.

- Add FormSelect styled component matching existing FormInput pattern
- Add SelectField renderer following existing StringField/NumberField/BooleanField pattern
- Route enum-constrained strings to SelectField in renderField switch
- Send UpdateParams on selection change via existing handleInputChange

Closes #328

Signed-off-by: StreamKit Devin <devin@streamkit.dev>
Co-Authored-By: Claudio Costa <cstcld91@gmail.com>
@staging-devin-ai-integration
Copy link
Copy Markdown
Contributor Author

staging-devin-ai-integration Bot commented Apr 25, 2026

✅ Reviewed on 0a95778

View review

@staging-devin-ai-integration
Copy link
Copy Markdown
Contributor Author

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

staging-devin-ai-integration[bot]

This comment was marked as resolved.

streamkit-devin and others added 4 commits April 25, 2026 14:58
Move enum-value resolution into SelectField so the dropdown always
shows a valid option. When the resolved param value does not match any
enum entry (e.g. empty string fallback), falls back to schema.default
or the first enum value.

Add InspectorPane unit tests covering:
- select dropdown rendering for enum-constrained strings
- fallback to first enum value on unmatched currentValue
- UpdateParams dispatch on selection change
- text input rendering for non-enum strings
- disabled state for non-tunable params in monitor view

Signed-off-by: StreamKit Devin <devin@streamkit.dev>
Co-Authored-By: Claudio Costa <cstcld91@gmail.com>
Signed-off-by: StreamKit Devin <devin@streamkit.dev>
Co-Authored-By: Claudio Costa <cstcld91@gmail.com>
…e tests

Signed-off-by: StreamKit Devin <devin@streamkit.dev>
Co-Authored-By: Claudio Costa <cstcld91@gmail.com>
Ensure the fallback value is always a valid enum member. If
schema.default is not in the enum array, fall back to the first
option instead of using the invalid default.

Add test for schema.default not in enum edge case.

Signed-off-by: StreamKit Devin <devin@streamkit.dev>
Co-Authored-By: Claudio Costa <cstcld91@gmail.com>
@staging-devin-ai-integration
Copy link
Copy Markdown
Contributor Author

Review

Overall: Good implementation. Matches existing field renderer patterns, proper fallback chain, and addressed Devin Review findings iteratively.

Must fix before merge

  1. Unrelated CI commits in branch. Same as the other PRs — includes d3acb21 (PR ci: enable sccache GHA backend and optimize rust-cache keys #372) and 30d0b28 (PR ci: remove SCCACHE_GHA_ENABLED to stop cache entry explosion #373). Please rebase onto main.

Looks good

  • FormSelect styled component correctly mirrors FormInput (same padding, border, color tokens, focus ring) with appropriate cursor: pointer and disabled state.
  • SelectField value resolution is correct: currentValueschema.default (only if it's a valid enum member) → first option. This prevents UI/state desync.
  • The renderField routing in the case 'string': branch checks schema.enum before falling through to StringField — clean and matches the schemaToControlConfigs logic.
  • Tests cover the key scenarios: enum rendering, fallback on mismatch, fallback when schema.default is invalid, change dispatch, non-enum passthrough, and disabled state.

Nits (non-blocking)

  1. 5 commits for a small feature (initial + 3 fix-ups from Devin Review + 1 style format). Consider squashing before merge for a cleaner history.

  2. The aria-label={schema.description} on the select is fine for accessibility, but if description is long, consider using aria-labelledby pointing to the existing <label> element instead.

@streamer45 streamer45 merged commit 41ca77e into main Apr 25, 2026
13 checks passed
@streamer45 streamer45 deleted the devin/1777128698-inspector-select-field branch April 25, 2026 17:01
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.

feat(ui): add SelectField renderer to InspectorPane for enum-constrained strings

2 participants