Refactors Sidebar into modules and execution hook

Breaks the sidebar into focused sections (file, bay, edit, validation) to improve readability and maintainability
Extracts script execution into a reusable hook that encapsulates mutation, loading state, and messaging for easier reuse and testing
Centralizes sidebar-related types in a shared types module
Moves the webhook inspector into its own directory and updates import paths
Aims for no functional changes, only structural improvements

Author: mbertelsen

src/components/Sidebar.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { CollapsibleSection } from '../CollapsibleSection';
+import { LocationSelector } from '../LocationSelector';
+import { BaySelector } from '../BaySelector';
+import { Bay, Location } from '../../types/sidebarTypes';
+
+interface SidebarBayOperationsProps {
+  selectedFacilityId: string | null;
+  selectedLocationId: string | null;
+  persistedLocationId: string | null;
+  selectedBayId: string | null;
+  persistedBayId: string | null;
+  onLocationSelect: (location: Location | null) => void;
+  onBaySelect: (bay: Bay | null) => void;
+  canExecute: boolean;
+  executing: boolean;
+  execMessage: string | null;
+  onExecuteScript: () => void;
+  isValid: boolean;
+  selectedBayObj: Bay | null;
+}
+
+export const SidebarBayOperations: React.FC<SidebarBayOperationsProps> = ({
+  selectedFacilityId,
+  selectedLocationId,
+  persistedLocationId,
+  selectedBayId,
+  persistedBayId,
+  onLocationSelect,
+  onBaySelect,
+  canExecute,
+  executing,
+  execMessage,
+  onExecuteScript,
+  isValid,
+  selectedBayObj,
+}) => {
+  return (
+    <CollapsibleSection
+      title="Bay Operations"
+      className="bay-operations-section"
+      bodyClassName="bay-buttons"
+      defaultOpen
+      persistKey="bay-operations"
+    >
+      <LocationSelector
+        selectedFacilityId={selectedFacilityId}
+        selectedLocationId={selectedLocationId}
+        persistedLocationId={persistedLocationId}
+        onLocationSelect={onLocationSelect}
+      />
+      <BaySelector
+        selectedFacilityId={selectedFacilityId}
+        selectedLocationId={selectedLocationId}
+        selectedBayId={selectedBayId}
+        persistedBayId={persistedBayId}
+        onBaySelect={onBaySelect}
+      />
+      <button
+        className="tree-btn execute-btn"
+        disabled={!canExecute || executing}
+        onClick={onExecuteScript}
+        title={!isValid ? 'Script must be valid' : !selectedBayObj ? 'Select a bay first' : 'Execute script on bay'}
+      >
+        {executing ? 'Executing...' : 'Execute Script'}
+      </button>
+      {execMessage && (
+        <div className="exec-status small-note">{execMessage}</div>
+      )}
+    </CollapsibleSection>
+  );
+};

src/components/Sidebar/SidebarBayOperations.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { CollapsibleSection } from '../CollapsibleSection';
+import { TreeView } from '../TreeView';
+import { CloneSelectedButton, AddActivityButton, AddStepButton } from '../buttons';
+import { ScriptData, Activity, Step } from '../../types';
+
+interface SidebarEditOperationsProps {
+  script: ScriptData;
+  selectedRef: { kind: 'script' } | { kind: 'activity'; activityId: string } | { kind: 'step'; activityId: string; stepId: string } | null;
+  selectedNode: Activity | Step | null;
+  isValid: boolean;
+  parentActivityForAdd: Activity | undefined;
+  onCloneSelected: () => void;
+  onShowActivityDialog: () => void;
+  onShowStepDialog: () => void;
+  onSelectScript: () => void;
+  onSelectActivity: (activityId: string) => void;
+  onSelectStep: (activityId: string, stepId: string) => void;
+  onDeleteActivity: (activityId: string) => void;
+  onDeleteStep: (activityId: string, stepId: string) => void;
+}
+
+export const SidebarEditOperations: React.FC<SidebarEditOperationsProps> = ({
+  script,
+  selectedRef,
+  selectedNode,
+  isValid,
+  parentActivityForAdd,
+  onCloneSelected,
+  onShowActivityDialog,
+  onShowStepDialog,
+  onSelectScript,
+  onSelectActivity,
+  onSelectStep,
+  onDeleteActivity,
+  onDeleteStep,
+}) => {
+  return (
+    <CollapsibleSection
+      title="Edit Operations"
+      className="edit-operations-section"
+      bodyClassName="edit-buttons"
+      defaultOpen
+      persistKey="edit-operations"
+    >
+      <CloneSelectedButton 
+        selectedNode={selectedNode} 
+        isValid={isValid} 
+        onClick={onCloneSelected} 
+      />
+      <AddActivityButton onClick={onShowActivityDialog} />
+      <AddStepButton 
+        parentActivityForAdd={parentActivityForAdd} 
+        onShowStepDialog={onShowStepDialog} 
+      />
+      {/* Script Structure Tree */}
+      <TreeView
+        script={script}
+        selectedRef={selectedRef}
+        onSelectScript={onSelectScript}
+        onSelectActivity={onSelectActivity}
+        onSelectStep={onSelectStep}
+        onDeleteActivity={onDeleteActivity}
+        onDeleteStep={onDeleteStep}
+      />
+    </CollapsibleSection>
+  );
+};

src/components/Sidebar/SidebarEditOperations.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { CollapsibleSection } from '../CollapsibleSection';
+import { LoadScriptButton, DownloadButton } from '../buttons';
+
+interface SidebarFileOperationsProps {
+  isValid: boolean;
+  onLoadScript: () => void;
+  onDownloadScript: () => void;
+}
+
+export const SidebarFileOperations: React.FC<SidebarFileOperationsProps> = ({
+  isValid,
+  onLoadScript,
+  onDownloadScript,
+}) => {
+  return (
+    <CollapsibleSection
+      title="File Operations"
+      className="file-operations-section"
+      bodyClassName="file-buttons"
+      defaultOpen
+      persistKey="file-operations"
+    >
+      <LoadScriptButton onClick={onLoadScript} />
+      <DownloadButton isValid={isValid} onClick={onDownloadScript} />
+    </CollapsibleSection>
+  );
+};