Beam: fix #552

src/modules/beam/BeamView.tsx

@@ -30,7 +30,10 @@ export function BeamView(props: {
 
   // external state
   const { novel: explainerUnseen, touch: explainerCompleted, forget: explainerShow } = useUICounter('beam-wizard');
-  const gatherAutoStartAfterScatter = useModuleBeamStore(state => state.gatherAutoStartAfterScatter);
+  const { cardAdd, gatherAutoStartAfterScatter } = useModuleBeamStore(useShallow(state => ({
+    cardAdd: state.cardAdd,
+    gatherAutoStartAfterScatter: state.gatherAutoStartAfterScatter,
+  })));
   const {
     /* root */ editInputHistoryMessageFragment,
     /* scatter */ setRayCount, startScatteringAll, stopScatteringAll,
@@ -158,6 +161,7 @@ export function BeamView(props: {
         isMobile={props.isMobile}
         rayCount={raysCount}
         setRayCount={handleRaySetCount}
+        showRayAdd={!cardAdd}
         startEnabled={inputReady}
         startBusy={isScattering}
         onStart={handleScatterStart}
@@ -171,6 +175,7 @@ export function BeamView(props: {
         beamStore={props.beamStore}
         isMobile={props.isMobile}
         rayIds={rayIds}
+        showRayAdd={cardAdd}
         hadImportedRays={hadImportedRays}
         onIncreaseRayCount={handleRayIncreaseCount}
         // linkedLlmId={currentGatherLlmId}

src/modules/beam/scatter/BeamRayGrid.tsx

@@ -27,11 +27,11 @@ const rayGridMobileSx: SxProps = {
 
 export function BeamRayGrid(props: {
   beamStore: BeamStoreApi,
-  hadImportedRays: boolean
+  hadImportedRays: boolean,
   isMobile: boolean,
   onIncreaseRayCount: () => void,
   rayIds: string[],
-  // linkedLlmId: DLLMId | null,
+  showRayAdd: boolean,
 }) {
 
   const raysCount = props.rayIds.length;
@@ -53,7 +53,7 @@ export function BeamRayGrid(props: {
       ))}
 
       {/* Add Ray */}
-      {raysCount < SCATTER_RAY_MAX && (
+      {(props.showRayAdd && raysCount < SCATTER_RAY_MAX) && (
         <BeamCard sx={{ mb: 'auto' }}>
           <Button variant='plain' color='neutral' onClick={props.onIncreaseRayCount} sx={{
             minHeight: 'calc(2 * var(--Card-padding) + 2rem - 0.5rem)',

src/modules/beam/scatter/BeamScatterPane.tsx

@@ -5,6 +5,7 @@ import { Box, Button, ButtonGroup, FormControl, Typography } from '@mui/joy';
 import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
 import AutoAwesomeOutlinedIcon from '@mui/icons-material/AutoAwesomeOutlined';
 import PlayArrowRoundedIcon from '@mui/icons-material/PlayArrowRounded';
+import PlusOneRoundedIcon from '@mui/icons-material/PlusOneRounded';
 import StopRoundedIcon from '@mui/icons-material/StopRounded';
 
 import { FormLabelStart } from '~/common/components/forms/FormLabelStart';
@@ -20,6 +21,9 @@ const scatterPaneSx: SxProps = {
   ...beamPaneSx,
   backgroundColor: 'background.popup',
 
+  // col gap is pad/2 (8px), row is double (1rem)
+  rowGap: 'var(--Pad)',
+
   // [desktop] scatter: primary-chan shadow
   // boxShadow: '0px 6px 12px -8px rgb(var(--joy-palette-primary-darkChannel) / 35%)',
   // boxShadow: '0px 16px 16px -24px rgb(var(--joy-palette-primary-darkChannel) / 35%)',
@@ -39,10 +43,11 @@ const desktopScatterPaneSx: SxProps = {
 
 
 export function BeamScatterPane(props: {
-  beamStore: BeamStoreApi
+  beamStore: BeamStoreApi,
   isMobile: boolean,
   rayCount: number,
   setRayCount: (n: number) => void,
+  showRayAdd: boolean
   startEnabled: boolean,
   startBusy: boolean,
   onStart: () => void,
@@ -95,13 +100,26 @@ export function BeamScatterPane(props: {
                   // backgroundColor: isActive ? 'background.popup' : undefined,
                   backgroundColor: isActive ? `${SCATTER_COLOR}.softBg` : 'background.popup',
                   fontWeight: isActive ? 'xl' : 400, /* reset, from 600 */
-                  width: '3.125rem',
+                  width: '3rem',
                 }}
               >
                 {`x${n}`}
               </Button>
             );
           })}
+          {props.showRayAdd && (
+            <Button
+              color='neutral'
+              size='sm'
+              onClick={() => props.setRayCount(props.rayCount + 1)}
+              sx={{
+                backgroundColor: 'background.popup',
+                width: '3rem',
+              }}
+            >
+              <PlusOneRoundedIcon />
+            </Button>
+          )}
         </ButtonGroup>
       </FormControl>
 

src/modules/beam/scatter/BeamScatterPaneDropdown.tsx

@@ -68,6 +68,7 @@ export function BeamScatterDropdown(props: {
   // external state
   const {
     presets, addPreset, deletePreset,
+    cardAdd, toggleCardAdd,
     cardScrolling, toggleCardScrolling,
     scatterShowPrevMessages, toggleScatterShowPrevMessages,
     scatterShowLettering, toggleScatterShowLettering,
@@ -156,6 +157,11 @@ export function BeamScatterDropdown(props: {
           History
         </MenuItem>
 
+        <MenuItem onClick={toggleCardAdd}>
+          <ListItemDecorator>{cardAdd && <CheckRoundedIcon />}</ListItemDecorator>
+          Large Add
+        </MenuItem>
+
         <MenuItem onClick={toggleCardScrolling}>
           <ListItemDecorator>{cardScrolling && <CheckRoundedIcon />}</ListItemDecorator>
           Resize Beams

src/modules/beam/store-module-beam.tsx

@@ -20,6 +20,7 @@ export interface BeamConfigSnapshot {
 interface ModuleBeamState {
   presets: BeamConfigSnapshot[];
   lastConfig: BeamConfigSnapshot | null;
+  cardAdd: boolean;
   cardScrolling: boolean;
   scatterShowLettering: boolean;
   scatterShowPrevMessages: boolean;
@@ -35,6 +36,7 @@ interface ModuleBeamStore extends ModuleBeamState {
   updateLastConfig: (update: Partial<BeamConfigSnapshot>) => void;
   deleteLastConfig: () => void;
 
+  toggleCardAdd: () => void;
   toggleCardScrolling: () => void;
   toggleScatterShowLettering: () => void;
   toggleScatterShowPrevMessages: () => void;
@@ -48,6 +50,7 @@ export const useModuleBeamStore = create<ModuleBeamStore>()(persist(
 
     presets: [],
     lastConfig: null,
+    cardAdd: true,
     cardScrolling: false,
     scatterShowLettering: false,
     scatterShowPrevMessages: false,
@@ -83,6 +86,8 @@ export const useModuleBeamStore = create<ModuleBeamStore>()(persist(
     deleteLastConfig: () => _set({ lastConfig: null }),
 
 
+    toggleCardAdd: () => _set(state => ({ cardAdd: !state.cardAdd })),
+
     toggleCardScrolling: () => _set(state => ({ cardScrolling: !state.cardScrolling })),
 
     toggleScatterShowLettering: () => _set(state => ({ scatterShowLettering: !state.scatterShowLettering })),