Beam: down to non-removable 1

src/common/beam/BeamRay.tsx

@@ -71,13 +71,14 @@ function rayCardStatusSx(isError: boolean, isSelectable: boolean, isSelected: bo
 const ControlsRowMemo = React.memo(ControlsRow);
 
 function ControlsRow(props: {
-  isEmpty: boolean;
-  isLlmLinked: boolean;
-  isScattering: boolean;
-  llmComponent: React.ReactNode;
-  onLink: () => void;
-  onRemove: () => void;
-  onToggleGenerate: () => void;
+  isEmpty: boolean,
+  isLlmLinked: boolean,
+  isRemovable: boolean
+  isScattering: boolean,
+  llmComponent: React.ReactNode,
+  onLink: () => void,
+  onRemove: () => void,
+  onToggleGenerate: () => void,
 }) {
   return <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
     {SHOW_DRAG_HANDLE && (
@@ -113,7 +114,7 @@ function ControlsRow(props: {
     )}
 
     <GoodTooltip title='Remove'>
-      <IconButton size='sm' variant='plain' color='neutral' onClick={props.onRemove}>
+      <IconButton disabled={!props.isRemovable} size='sm' variant='plain' color='neutral' onClick={props.onRemove}>
         <RemoveCircleOutlineRoundedIcon />
       </IconButton>
     </GoodTooltip>
@@ -134,8 +135,9 @@ const chatMessageEmbeddedSx: SxProps = {
 
 export function BeamRay(props: {
   beamStore: BeamStoreApi,
-  rayId: string
+  rayId: string,
   isMobile: boolean,
+  isRemovable: boolean
   gatherLlmId: DLLMId | null,
 }) {
 
@@ -187,6 +189,7 @@ export function BeamRay(props: {
       <ControlsRowMemo
         isEmpty={!isSelectable}
         isLlmLinked={isLlmLinked}
+        isRemovable={props.isRemovable}
         isScattering={isScattering}
         llmComponent={llmComponent}
         onLink={handleLlmLink}

src/common/beam/BeamScatterControls.tsx

@@ -8,6 +8,8 @@ import StopRoundedIcon from '@mui/icons-material/StopRounded';
 import { FormLabelStart } from '~/common/components/forms/FormLabelStart';
 import { animationEnterBelow } from '~/common/util/animUtils';
 
+import { CONTROLS_RAY_PRESETS } from './BeamView';
+
 
 export const beamControlsSx: SxProps = {
   // style
@@ -29,7 +31,7 @@ const beamScatterControlsSx: SxProps = {
   gap: 'var(--Pad_2)',
 
   // '& > *': { border: '1px solid red' },
-}
+};
 
 
 export function BeamScatterControls(props: {
@@ -75,7 +77,7 @@ export function BeamScatterControls(props: {
 
           {/* xN buttons */}
           <ButtonGroup variant='outlined' sx={{ flex: 1, display: 'flex', '& > *': { flex: 1 } }}>
-            {[2, 4, 8].map((n) => {
+            {CONTROLS_RAY_PRESETS.map((n) => {
               const isActive = n === props.rayCount;
               return (
                 <Button

src/common/beam/BeamView.tsx

@@ -17,8 +17,10 @@ import { BeamStoreApi, useBeamStore } from './store-beam.hooks';
 
 
 // component configuration
-const MIN_RAY_COUNT = 2;
+const MIN_RAY_COUNT = 1;
+const DEF_RAY_COUNT = 2;
 const MAX_RAY_COUNT = 8;
+export const CONTROLS_RAY_PRESETS = [2, 4, 8];
 
 
 const userMessageSx: SxProps = {
@@ -95,7 +97,7 @@ export function BeamView(props: {
   // [effect] start with 2 rays
   const bootup = raysCount < MIN_RAY_COUNT;
   React.useEffect(() => {
-    bootup && handleRaySetCount(MIN_RAY_COUNT);
+    bootup && handleRaySetCount(DEF_RAY_COUNT);
   }, [bootup, handleRaySetCount]);
 
 
@@ -187,6 +189,7 @@ export function BeamView(props: {
               beamStore={props.beamStore}
               rayId={rayId}
               isMobile={props.isMobile}
+              isRemovable={raysCount > MIN_RAY_COUNT}
               gatherLlmId={gatherLlmId}
             />
           ))}