bingocode 1.1.68 → 1.1.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bingocode",
-  "version": "1.1.68",
+  "version": "1.1.69",
   "type": "module",
   "bin": {
     "claude": "bin/claude-win.cjs",

package/src/cli/ProviderPanel.tsx

@@ -374,21 +374,45 @@ export const ProviderPanel: React.FC<{
         : `${pr.label || pr.name || pr.id}`,
       value: pr.id
     }));
+
+    // Add Custom option at the beginning
+    const finalItems = [
+      { label: 'Custom (OpenAI Compatible)', value: 'custom' },
+      ...items
+    ];
+
     if (!items.length) {
       return (
         <Box flexDirection="column" flexGrow={1}>
-          <StateDisplay type="error" message="No presets available. Please ensure the backend is running." />
+          <Title color="cyan">Select Preset</Title>
           <SelectInput
-            items={[{ label: '← Back', value: 'back' }]}
-            onSelect={() => setStage('list')}
+            items={finalItems}
+            onSelect={it => {
+              if (it.value === 'custom') {
+                const fields: ProviderField[] = [
+                  { key: 'name', label: 'Provider Nickname', required: true, placeholder: 'My Custom API' },
+                  { key: 'baseUrl', label: 'Base URL', required: true, placeholder: 'https://api.example.com/v1' },
+                  { key: 'apiKey', label: 'API Key', required: true, secret: true },
+                ];
+                setSelectedPresetId('custom');
+                setAddFields(fields);
+                setAddFieldValues({});
+                setAddFieldIndex(0);
+                setListOffset(0);
+                setStage('add_input_fields');
+              } else {
+                setStage('list');
+              }
+            }}
           />
+          {!items.length && <Hint dimColor>No presets found from server, only Custom available.</Hint>}
         </Box>
       );
     }
 
     const MAX_VISIBLE = 8;
-    const start = Math.min(listOffset, Math.max(0, items.length - MAX_VISIBLE));
-    const sliced = items.slice(start, start + MAX_VISIBLE);
+    const start = Math.min(listOffset, Math.max(0, finalItems.length - MAX_VISIBLE));
+    const sliced = finalItems.slice(start, start + MAX_VISIBLE);
 
     return (
       <Box flexDirection="column" flexGrow={1}>
@@ -398,24 +422,38 @@ export const ProviderPanel: React.FC<{
             <SelectInput
               items={sliced}
               onSelect={it => {
-                const preset = presets.find(p => p.id === (it.value as string));
-                const fields: ProviderField[] =
-                  preset?.fields && preset.fields.length > 0
-                    ? preset.fields
-                    : [
-                        { key: 'name', label: 'Provider Nickname', required: true },
-                        { key: 'apiKey', label: 'API Key', required: true, secret: true },
-                      ];
-                setSelectedPresetId(it.value as string);
-                setAddFields(fields);
-                setAddFieldValues({});
-                setAddFieldIndex(0);
-                setListOffset(0);
-                setStage('add_input_fields');
+                if (it.value === 'custom') {
+                  const fields: ProviderField[] = [
+                    { key: 'name', label: 'Provider Nickname', required: true, placeholder: 'My Custom API' },
+                    { key: 'baseUrl', label: 'Base URL', required: true, placeholder: 'https://api.example.com/v1' },
+                    { key: 'apiKey', label: 'API Key', required: true, secret: true },
+                  ];
+                  setSelectedPresetId('custom');
+                  setAddFields(fields);
+                  setAddFieldValues({});
+                  setAddFieldIndex(0);
+                  setListOffset(0);
+                  setStage('add_input_fields');
+                } else {
+                  const preset = presets.find(p => p.id === (it.value as string));
+                  const fields: ProviderField[] =
+                    preset?.fields && preset.fields.length > 0
+                      ? preset.fields
+                      : [
+                          { key: 'name', label: 'Provider Nickname', required: true },
+                          { key: 'apiKey', label: 'API Key', required: true, secret: true },
+                        ];
+                  setSelectedPresetId(it.value as string);
+                  setAddFields(fields);
+                  setAddFieldValues({});
+                  setAddFieldIndex(0);
+                  setListOffset(0);
+                  setStage('add_input_fields');
+                }
               }}
             />
           </Box>
-          <ScrollBar total={items.length} offset={start} height={MAX_VISIBLE} />
+          <ScrollBar total={finalItems.length} offset={start} height={MAX_VISIBLE} />
         </Box>
         <Hint>↑↓: Select · j Next Page · k Prev Page · ESC: Back</Hint>
       </Box>

package/src/manager/CliMenuManager.tsx

@@ -294,7 +294,7 @@ export const CliMenuManager: React.FC = () => {
 
   // Compute viewport
   const TOP_H = page === null ? TOP_H_HOME : TOP_H_COMPACT;
-  const MID_H = Math.max(5, VIEW_H - TOP_H - BOTTOM_H);
+  const MID_H = Math.max(5, VIEW_H - TOP_H - BOTTOM_H - (page === null ? 0 : 2));
   const MSGS_PAGE_SIZE = Math.max(1, MID_H - 2);
   const [expandMsgs, setExpandMsgs] = useState(false);
 
@@ -593,9 +593,10 @@ export const CliMenuManager: React.FC = () => {
     // History shortcuts
     if (!showHelp && page === 'history') {
       if (historyMenuStage === 'list') {
+        const HIST_VISIBLE = Math.max(1, MID_H - 1);
         if (key.downArrow || input === 'j') {
           // Internal SelectInput handles cursor, we just need to track offset for ScrollBar
-          setListOffset(o => o + 1);
+          setListOffset(o => Math.min(o + 1, Math.max(0, groupedHistoryItems.length - HIST_VISIBLE)));
         }
         if (key.upArrow || input === 'k') {
           setListOffset(o => Math.max(0, o - 1));
@@ -1043,12 +1044,16 @@ export const CliMenuManager: React.FC = () => {
 
 
       // History List
+      const HIST_VISIBLE = Math.max(1, MID_H - 1);
+      const start = Math.min(listOffset, Math.max(0, groupedHistoryItems.length - HIST_VISIBLE));
+      const slicedItems = groupedHistoryItems.slice(start, start + HIST_VISIBLE);
+
       return (
         <Box width={VIEW_W} height={MID_H} flexDirection="row">
           <Box flexDirection="column" flexGrow={1}>
             <SelectInput
-              key={`${historyCursor ?? 'first'}:${groupedHistoryItems.length}`}
-              items={groupedHistoryItems}
+              key={`${historyCursor ?? 'first'}:${slicedItems.length}:${start}`}
+              items={slicedItems}
               onSelect={item => {
                 if (String(item.value).startsWith('__group_')) return; // Ignore group headers
                 const session = historyList.find(h => h.id === item.value);
@@ -1070,7 +1075,7 @@ export const CliMenuManager: React.FC = () => {
             />
             <Hint>{i18nMap[lang].historyHint}</Hint>
           </Box>
-          <ScrollBar total={groupedHistoryItems.length} offset={listOffset} height={MID_H} />
+          <ScrollBar total={groupedHistoryItems.length} offset={start} height={MID_H} />
         </Box>
       );
     }