Merge remote-tracking branch 'origin/main' into feat/framey-ui-controls

# Conflicts:
#	docs/frame-plugin-author.md
#	tests/page/framey_actions.mjs
#	ui/framey-host.js

app/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "frame-control",
-  "version": "0.4.32",
+  "version": "0.4.33",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "frame-control",
-      "version": "0.4.32",
+      "version": "0.4.33",
       "license": "MIT",
       "devDependencies": {
         "electron": "^44.4.5",

app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "frame-control",
   "productName": "Frame Control",
-  "version": "0.4.32",
+  "version": "0.4.33",
   "description": "Desktop app for managing a Valve Steam Frame over SSH",
   "private": true,
   "main": "main.js",

docs/current-support-matrix.md

@@ -1,6 +1,6 @@
 # What we have tested
 
-Current for Frame Control **v0.4.32**, 25 October 2026. “Real Frame + physical PC” means an actual headset and a non-virtual computer. “VM only” means a Windows virtual machine, sometimes connected to the real Frame. A CI test or a simulated device is **not** a physical hardware test. The date/version column is the last relevant check, not a promise that every new release was retested on that platform. See each link for the exact procedure and limits.
+Current for Frame Control **v0.4.33**, 25 October 2026. “Real Frame + physical PC” means an actual headset and a non-virtual computer. “VM only” means a Windows virtual machine, sometimes connected to the real Frame. A CI test or a simulated device is **not** a physical hardware test. The date/version column is the last relevant check, not a promise that every new release was retested on that platform. See each link for the exact procedure and limits.
 
 | Feature | Real Frame + physical PC tested | VM only | Untested or limited | Last check and proof |
 |---|---|---|---|---|
@@ -23,7 +23,7 @@ Current for Frame Control **v0.4.32**, 25 October 2026. “Real Frame + physical
 | Open at login | No Frame needed; Linux autostart file toggled on a physical Linux host with an isolated config directory | No | A full login session and physical Windows/macOS host login have not been checked; OS API calls were unit tested | 25 Oct, v0.4.26: [PR #189](https://github.com/saphid/frame-control/pull/189) |
 | Local Frame Control extensions | Example panel displayed live Frame status in a browser preview; the real Frame served a read-only example in the experimental headset panel | No | No wearer-visible extension view; third-party extensions and physical Windows/macOS extension folders untested | 25 Oct, v0.4.29: [PR #194](https://github.com/saphid/frame-control/pull/194), [PR #201](https://github.com/saphid/frame-control/pull/201), [extension guide](extensions.md) |
 | Experimental Frame Control SteamVR panel | Real Frame OS 0.5.6 installed its user service, registered an overlay, served authenticated live status and a read-only extension, saved a screenshot and short MP4, and removed owned resources | No | Headset was unworn in standby: overlay reported `not_visible`, stereo capture was dark; wearer-visible pixels and controller input are unverified. The new large read-only status screen has browser layout and packaging checks only | 25 Oct, v0.4.29 device check and v0.4.31 status screen: [PR #198](https://github.com/saphid/frame-control/pull/198), [PR #201](https://github.com/saphid/frame-control/pull/201), [PR #220](https://github.com/saphid/frame-control/pull/220), [panel guide](headset-app.md) |
-| Experimental Decky Loader manager | Real Frame OS 0.5.6 ARM64 user-service install, status, update and remove completed; seven official-store plugin backends loaded, and ProtonDB Badges completed managed store install/update/remove | No | Plugin pages, settings, routes, toasts and controller input in VR remain unverified; some plugins need root, x86_64 binaries or Deck-specific hardware | 25 Oct, v0.4.31: [PR #208](https://github.com/saphid/frame-control/pull/208), [compatibility table](decky-frame.md) |
-| Experimental Framey VR plugin panels and store | No live real-Frame panel test | No | ProtonDB Badges settings rendered and sent a setting call in local Chromium. The fake Frame and CI exercised the store search, install progress, quick actions, settings, local routes and toasts. Wearer-visible pixels, controller input and live settings persistence remain unverified | 25 Oct, v0.4.32: [#223](https://github.com/saphid/frame-control/pull/223), [#224](https://github.com/saphid/frame-control/pull/224), [#225](https://github.com/saphid/frame-control/pull/225), [#226](https://github.com/saphid/frame-control/pull/226), [#227](https://github.com/saphid/frame-control/pull/227), [browser/fake Frame evidence](evidence/framey-browser-2026-10-25.md), [guide](framey-loader.md) |
+| Experimental Decky Loader manager | Real Frame OS 0.5.6 ARM64 user-service install, status, update and remove completed; seven official-store plugin backends loaded, and ProtonDB Badges completed managed store install/update/remove | No | v0.4.33 shared transaction lock and stopped-loader plugin removal have Linux and CI tests, but no live recovery test on the Frame. Plugin pages, settings, routes, toasts and controller input in VR remain unverified; some plugins need root, x86_64 binaries or Deck-specific hardware | 25 Oct, v0.4.31 hardware and v0.4.33 tests: [PR #208](https://github.com/saphid/frame-control/pull/208), [PR #230](https://github.com/saphid/frame-control/pull/230), [PR #234](https://github.com/saphid/frame-control/pull/234), [compatibility table](decky-frame.md) |
+| Experimental Framey VR plugin panels and store | No live real-Frame panel test | No | ProtonDB Badges settings rendered and sent a setting call in local Chromium. Fake Frame tests cover setting read/write through update and reinstall; page tests cover the official JSX runtime, stale job recovery and an author sample bundle. The sample is not published in the store. Wearer-visible pixels, controller input and live settings persistence remain unverified | 25 Oct, v0.4.32–0.4.33: [#223](https://github.com/saphid/frame-control/pull/223), [#224](https://github.com/saphid/frame-control/pull/224), [#225](https://github.com/saphid/frame-control/pull/225), [#226](https://github.com/saphid/frame-control/pull/226), [#227](https://github.com/saphid/frame-control/pull/227), [#229](https://github.com/saphid/frame-control/pull/229), [#231](https://github.com/saphid/frame-control/pull/231), [#232](https://github.com/saphid/frame-control/pull/232), [#233](https://github.com/saphid/frame-control/pull/233), [browser/fake Frame evidence](evidence/framey-browser-2026-10-25.md), [guide](framey-loader.md) |
 
 Release notes must preserve these limits until a newer recorded check changes them. When a feature is retested, add its date, exact app/Frame version, host type and proof here. The older [v0.3.1 matrix](support-matrix.html) is a historical snapshot and does not describe current coverage.

docs/frame-plugin-author.md

@@ -51,7 +51,8 @@ none of these frontend controls has passed a worn-headset check yet.
 | --- | --- | --- |
 | `definePlugin` with `content`, `titleView` | Renders a React panel and optional title | Local browser with ProtonDB Badges; host unit test |
 | Official `@decky/rollup` JSX (`SP_JSX.jsx`, `jsxs`, `Fragment`) | Creates React elements in the isolated panel | Sample bundle smoke test; host unit test |
-| `PanelSection`, rows, buttons, toggles, dropdowns | Local touch-sized controls | Local browser and host unit test |
+| `PanelSection`, rows, buttons, toggles, dropdowns | Local touch-sized controls; disabled controls stay inert during a backend call | Local browser and host unit test |
+| `TextField`, `SliderField`, grouped `Dropdown` options | Native text, range and select controls in the panel; disabled state, numeric slider callback and basic input types | Host unit test; worn VR use unverified |
 | Optional `settings`, `frameyQuickActions` | Separate settings tab; up to eight actions with result text | Host unit test; these fields are Framey additions |
 | `serverAPI.call` / `callable` | Calls only that plugin's Decky Python backend via the headset service | Fake Frame e2e for setting read/write across CEF calls, update, and reinstall; host unit test. Real Decky persistence remains unverified. |
 | `toaster.toast` | Visible toast inside the plugin panel; `dismiss` and optional `onClick` | Host unit test; no Steam system notification |

docs/framey-loader.md

@@ -37,7 +37,8 @@ Decky websocket, because Decky allows only one frontend connection. The iframe
 does not receive Frame Control's UI key. React and ReactDOM are bundled for
 offline use under their MIT licenses in `ui/vendor`.
 
-The host currently supplies sections, rows, buttons, toggles, dropdowns,
+The host currently supplies sections, rows, buttons, toggles, text fields,
+sliders, grouped dropdowns,
 scroll containers, a modal, locale information, local panel routes and toasts,
 and backend calls for the plugin that owns the panel. Steam library/store page
 patches, global Steam UI components, file pickers, and privileged root methods

tests/page/framey_actions.mjs

@@ -28,7 +28,45 @@ assert.deepEqual(jsx.children,['Saved']);
 const fragments=window.SP_JSX.jsxs(window.SP_JSX.Fragment,{children:['one','two']});
 assert.equal(fragments.type,React.Fragment);
 assert.deepEqual(fragments.children,[['one','two']]);
-const nodes=(tree,type)=>[...(tree?.type===type?[tree]:[]),...(tree?.children||[]).flatMap(child=>nodes(child,type))];
+const nodes=(tree,type)=>Array.isArray(tree)?tree.flatMap(child=>nodes(child,type)):
+  [...(tree?.type===type?[tree]:[]),...(tree?.children||[]).flatMap(child=>nodes(child,type))];
+// Disabled controls stay inert even if a caller invokes their handlers directly.
+let changed=0;
+const toggle=nodes(window.DFL.ToggleField({label:'Enabled',checked:true,disabled:true,
+  onChange:()=>changed++}),'input')[0];
+const options=[{label:'Modes',options:[{label:'Slow',data:'slow'},{label:'Fast',data:'fast'}]}];
+const dropdown=nodes(window.DFL.Dropdown({rgOptions:options,selectedOption:'fast',disabled:true,
+  onChange:()=>changed++}),'select')[0];
+const button=nodes(window.DFL.ButtonItem({label:'Reload',description:'Read setting',disabled:true,
+  onClick:()=>changed++}),'button')[0];
+const input=nodes(window.DFL.TextField({label:'Alias',value:'Old',placeholder:'New',disabled:true,
+  onChange:()=>changed++}),'input')[0];
+const slider=nodes(window.DFL.SliderField({label:'Speed',value:2,min:0,max:10,step:2,disabled:true,
+  onChange:()=>changed++}),'input')[0];
+for(const control of [toggle,dropdown,button,input,slider])assert.equal(control.props.disabled,true);
+assert.equal(input.props.value,'Old');
+assert.equal(slider.props.type,'range');
+assert.equal(dropdown.props.value,'1');
+assert.equal(nodes(dropdown,'optgroup').length,1);
+toggle.props.onChange({target:{checked:false}});
+dropdown.props.onChange({target:{value:'0'}});
+button.props.onClick({});
+input.props.onChange({target:{value:'New'}});
+slider.props.onChange({target:{value:'4'}});
+assert.equal(changed,0);
+let entered='';
+const readyInput=nodes(window.DFL.TextField({label:'Alias',value:'Old',onChange:e=>{entered=e.target.value;}}),'input')[0];
+readyInput.props.onChange({target:{value:'New'}});assert.equal(entered,'New');
+let speed=0;
+const readySlider=nodes(window.DFL.SliderField({label:'Speed',value:2,onChange:v=>{speed=v;}}),'input')[0];
+readySlider.props.onChange({target:{value:'4'}});assert.equal(speed,4);
+let selected;
+const readyDropdown=nodes(window.DFL.Dropdown({rgOptions:options,selectedOption:'fast',
+  onChange:option=>{selected=option;}}),'select')[0];
+readyDropdown.props.onChange({target:{value:'0'}});assert.equal(selected.data,'slow');
+const readyButton=nodes(window.DFL.ButtonItem({label:'Reload',onClick:()=>changed++}),'button')[0];
+assert.equal(readyButton.props.disabled,false);
+readyButton.props.onClick({});assert.equal(changed,1);
 let called=0;
 const plugin={content:{type:'content'},settings:{type:'settings'},titleView:{type:'title'},
   frameyQuickActions:[{label:'Refresh data',onClick:async()=>{called++;return 'Fresh';}},

ui/framey-host.js

@@ -46,13 +46,38 @@
   const passthrough = tag => ({children, ...props}) => R.createElement(tag, props, children);
   const Field = ({label, description, children}) => R.createElement('label', null,
     R.createElement('strong', null, label), description && R.createElement('small', null, description), children);
-  const ToggleField = ({label, description, checked, onChange}) => R.createElement(Field, {label, description},
-    R.createElement('input', {type:'checkbox', checked:!!checked, onChange:e=>onChange?.(e.target.checked)}));
-  const DropdownItem = ({label, description, rgOptions=[], selectedOption, onChange}) => R.createElement(Field, {label, description},
-    R.createElement('select', {value:String(selectedOption ?? ''), onChange:e=>onChange?.(rgOptions.find(x=>String(x.data)===e.target.value))},
-      rgOptions.map(x=>R.createElement('option', {key:String(x.data), value:String(x.data)}, x.label))));
-  const ButtonItem = ({label, children, onClick}) => R.createElement(Field, {label},
-    R.createElement('button', {type:'button', onClick}, children || label));
+  const ToggleField = ({label, description, checked, disabled, onChange}) => R.createElement(Field, {label, description},
+    R.createElement('input', {type:'checkbox', checked:!!checked, disabled:!!disabled,
+      onChange:e=>{if(!disabled)onChange?.(e.target.checked);}}));
+  const DropdownItem = ({label, description, rgOptions=[], selectedOption, disabled, strDefaultLabel, onChange}) => {
+    const choices=[];
+    const option = entry => {
+      const index=choices.push(entry)-1;
+      return R.createElement('option', {key:index, value:String(index)}, entry.label);
+    };
+    const entries=(Array.isArray(rgOptions) ? rgOptions : []).map(entry =>
+      Array.isArray(entry.options) ? R.createElement('optgroup', {key:String(entry.label), label:String(entry.label)},
+        entry.options.map(option)) : option(entry));
+    const selected=choices.findIndex(entry=>Object.is(entry.data, selectedOption));
+    return R.createElement(Field, {label, description}, R.createElement('select', {
+      value:selected < 0 ? '' : String(selected), disabled:!!disabled,
+      onChange:e=>{const entry=choices[Number(e.target.value)];if(!disabled && entry)onChange?.(entry);}},
+      selected < 0 && R.createElement('option', {value:'', disabled:true}, strDefaultLabel || 'Choose an option'),
+      entries));
+  };
+  const ButtonItem = ({label, description, children, disabled, onClick}) => R.createElement(Field, {label, description},
+    R.createElement('button', {type:'button', disabled:!!disabled,
+      onClick:e=>{if(!disabled)onClick?.(e);}}, children || label));
+  const TextField = ({label, description, value, placeholder, disabled, bIsPassword,
+    mustBeNumeric, mustBeURL, mustBeEmail, onChange}) => R.createElement(Field, {label, description},
+    R.createElement('input', {type:bIsPassword?'password':mustBeNumeric?'number':mustBeURL?'url':mustBeEmail?'email':'text',
+      value, placeholder, disabled:!!disabled, onChange:e=>{if(!disabled)onChange?.(e);}}));
+  const SliderField = ({label, description, value, min=0, max=100, step=1, disabled, showValue,
+    valueSuffix='', onChange}) => R.createElement(Field, {label, description},
+    R.createElement('input', {type:'range', value, min, max, step, disabled:!!disabled,
+      'aria-label':typeof label==='string'?label:undefined,
+      onChange:e=>{if(!disabled)onChange?.(Number(e.target.value));}}),
+    showValue && R.createElement('span', null, String(value) + valueSuffix));
   const PanelSection = ({title, children}) => R.createElement('section', null,
     title && R.createElement('h2', null, title), children);
   const ConfirmModal = ({strTitle, strOKButtonText, onOK, children}) => R.createElement('section', null,
@@ -80,7 +105,8 @@
   };
   const DFL = window.DFL = {
     definePlugin: init => init,
-    PanelSection, PanelSectionRow: passthrough('div'), Field, ToggleField, DropdownItem, ButtonItem,
+    PanelSection, PanelSectionRow: passthrough('div'), Field, ToggleField, DropdownItem,
+    Dropdown: DropdownItem, ButtonItem, TextField, SliderField,
     Focusable: passthrough('div'), ScrollPanel: passthrough('div'), ScrollPanelGroup: passthrough('div'),
     DialogButton: passthrough('button'), ConfirmModal,
     staticClasses: {Title:'framey-title'},