slopfixing / issue 002

webui/src/components/HelpPanel/index.jsx

@@ -1,12 +1,12 @@
 // Help Panel
 // Purpose: Defines the Help Panel module and the local helpers/components used in this file.
 // Scope: Keeps behavior unchanged while isolating this concern into a clear, single-responsibility unit.
-import { useControlSystem } from '../../controls/index.js';
+import { useControlSelector } from '../../controls/index.js';
 import CardFrame from '../CardFrame/index.jsx';
 import HelpContentView from '../HelpContentView/index.jsx';
 
 export default function HelpPanel({ layout, onOpenOverlay }) {
-  const { state } = useControlSystem();
+  const keymap = useControlSelector((control) => control.state.keymap);
 
   const actions = (
     <button
@@ -20,7 +20,7 @@ export default function HelpPanel({ layout, onOpenOverlay }) {
 
   return (
     <CardFrame title="Help" actions={actions} bodyClassName="space-y-0.5 text-sm">
-      <HelpContentView layout={layout} keymap={state?.keymap || {}} />
+      <HelpContentView layout={layout} keymap={keymap || {}} />
     </CardFrame>
   );
 }