bingocode 1.1.68 → 1.1.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bingocode",
-  "version": "1.1.68",
+  "version": "1.1.70",
   "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>
@@ -641,7 +679,7 @@ export const ProviderPanel: React.FC<{
         : null;
       const modelDisplayName = entry?.label || entry?.modelId || 'Unconfigured';
       const status = entry ? `${providerName} / ${modelDisplayName}` : 'Unconfigured';
-      const label = `[${s}] ${safePadEnd(status, 28)} — ${SLOT_DESCS[s]}`;
+      const label = `[${s}] ${safePadEnd(status, 30)} — ${SLOT_DESCS[s]}`;
       return { label, value: s };
     });
     return (

package/src/manager/CliMenuManager.tsx

@@ -82,13 +82,20 @@ const i18nMap = {
     zh: {
       menu: {
         newSession: 'New Session',
-        history: 'Session History',
+        history: 'History',
         provider: 'API Config',
         settings: 'Settings',
         about: 'About',
         exit: 'Exit',
       },
-      about: 'Bingo CLI Terminal - Version Info & About',
+      about: 'Bingo CLI - Version Info & About',
+      aboutContent: [
+        'Bingo is an AI assistant terminal client.',
+        '1. API Config: Press "P" or select "API Config" to set up your keys.',
+        '2. Model Slots: Configure specific models in the Provider panel.',
+        '3. Background Service: Bingo runs a local server to manage sessions.',
+        '4. Start Chat: Run `bingocode` or `claude` in any terminal to start.',
+      ].join('\n'),
       mark: '→ Mark Session',
       unmark: '→ Unmark Session',
       tipsSimple: 'L Lang | ESC Back | ←→ Menu | ↩ Enter | ? Help',
@@ -108,6 +115,13 @@ const i18nMap = {
       exit: 'Exit',
     },
     about: 'Bingo CLI Terminal - Version Info & About',
+    aboutContent: [
+      'Bingo is an AI assistant terminal client.',
+      '1. API Config: Press "P" or select "API Config" to set up your keys.',
+      '2. Model Slots: Configure specific models in the Provider panel.',
+      '3. Background Service: Bingo runs a local server to manage sessions.',
+      '4. Start Chat: Run `bingocode` or `claude` in any terminal to start.',
+    ].join('\n'),
     mark: '→ Mark Session',
     unmark: '→ Unmark Session',
     tipsSimple: 'L Lang | ESC Back | ←→ Menu | ↩ Enter | ? Help',
@@ -294,7 +308,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 +607,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 +1058,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 +1089,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>
       );
     }
@@ -1120,10 +1139,15 @@ export const CliMenuManager: React.FC = () => {
     if (page === 'about') {
       return (
         <Box width={VIEW_W} height={MID_H} flexDirection="column">
-          <Text>{i18nMap[lang].about}</Text>
-          <Hint>
-            API Base: {apiUrl}
-          </Hint>
+          <Text color="cyan" bold>{i18nMap[lang].about}</Text>
+          <Box marginTop={1} flexDirection="column">
+            <Text>{(i18nMap[lang] as any).aboutContent}</Text>
+          </Box>
+          <Box marginTop={1}>
+            <Hint>
+              API Base: {apiUrl}
+            </Hint>
+          </Box>
         </Box>
       );
     }