bingocode 1.1.71 → 1.1.72

package/package.json

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

package/src/cli/ProviderPanel.tsx

@@ -57,7 +57,8 @@ type Stage =
 export const ProviderPanel: React.FC<{
   apiUrl: string;
   onBack?: () => void;
-}> = ({ apiUrl, onBack }) => {
+  height?: number;
+}> = ({ apiUrl, onBack, height = 10 }) => {
   const { exit } = useApp();
   const [loading, setLoading] = useState(false);
   const [err, setErr] = useState<string | null>(null);
@@ -65,6 +66,10 @@ export const ProviderPanel: React.FC<{
   // Scrolling
   const [listOffset, setListOffset] = useState(0);
 
+  // Calculated visible counts based on height
+  const MAX_VISIBLE = Math.max(3, height - 7);
+  const MAX_VISIBLE_MODELS = Math.max(3, height - 6);
+
   const [providers, setProviders] = useState<Provider[]>([]);
   const [currentId, setCurrentId] = useState<string | null>(null);
 
@@ -375,9 +380,9 @@ export const ProviderPanel: React.FC<{
       value: pr.id
     }));
 
-    // Add Custom option at the beginning
+    // Add Custom option only if not already in presets
     const finalItems = [
-      { label: 'Custom (OpenAI Compatible)', value: 'custom' },
+      ...(presets.some(p => p.id === 'custom') ? [] : [{ label: 'Custom (OpenAI Compatible)', value: 'custom' }]),
       ...items
     ];
 
@@ -410,7 +415,7 @@ export const ProviderPanel: React.FC<{
       );
     }
 
-    const MAX_VISIBLE = 8;
+    // const MAX_VISIBLE = 8;
     const start = Math.min(listOffset, Math.max(0, finalItems.length - MAX_VISIBLE));
     const sliced = finalItems.slice(start, start + MAX_VISIBLE);
 
@@ -756,7 +761,7 @@ export const ProviderPanel: React.FC<{
       );
     }
 
-    const MAX_VISIBLE_MODELS = 8;
+    // const MAX_VISIBLE_MODELS = 8;
     const start = Math.min(listOffset, Math.max(0, items.length - MAX_VISIBLE_MODELS));
     const sliced = items.slice(start, start + MAX_VISIBLE_MODELS);
 

package/src/manager/CliMenuManager.tsx

@@ -681,18 +681,17 @@ export const CliMenuManager: React.FC = () => {
     }
   }, [menuItems, page, historyMenuStage, historyList, historyHasMore, navIndex, sessionMessages, settingData, MID_H, MSGS_PAGE_SIZE, showHelp, theme]);
 
+  function cleanText(text: string): string {
+    return String(text ?? '').replace(/[\n\r]+/g, ' ').replace(/\u001b\[[0-9;]*m/g, '').trim();
+  }
+
   function clampTextLines(text: string, maxWidth: number, maxLines: number) {
-    const lines = String(text ?? '').split(/\r?\n/);
+    const cleaned = cleanText(text);
     const out: string[] = [];
-    let used = 0;
-    for (let i = 0; i < lines.length; i++) {
-      if (out.length >= maxLines) break;
-      const raw = lines[i];
-      if (raw.length <= maxWidth) {
-        out.push(raw);
-      } else {
-        out.push(ellipsis(raw, maxWidth));
-      }
+    if (cleaned.length <= maxWidth) {
+      out.push(cleaned);
+    } else {
+      out.push(cleaned.slice(0, maxWidth - 1) + '…');
     }
     return out.join('\n');
   }
@@ -999,8 +998,6 @@ export const CliMenuManager: React.FC = () => {
       if (historyMenuStage === 'window' && selectedHistory) {
         // Detailed View with Split
         const isMarked = markedSessionIds.has(selectedHistory.id);
-        const PREVIEW_H = Math.max(3, LIST_H - 2);
-
         const displayMsgs = sessionMessages.filter(
           m => m.type === 'user' || m.type === 'assistant' || m.type === 'system'
         );
@@ -1012,41 +1009,51 @@ export const CliMenuManager: React.FC = () => {
         return (
           <Box width={VIEW_W} height={MID_H} flexDirection="column">
             {/* Upper Pane: Preview */}
-            <Box height={LIST_H} borderStyle="single" borderColor="gray" flexDirection="column" paddingX={1}>
-              <Box justifyContent="space-between">
+            <Box height={LIST_H} flexDirection="column" paddingX={1}>
+              <Box justifyContent="space-between" marginBottom={1}>
                 <Text color={isMarked ? 'yellow' : 'cyan'} bold>
                   {isMarked ? '★ ' : ''}{selectedHistory.title || 'Untitled'}
                 </Text>
                 <Text dimColor>{selectedHistory.createdAt?.slice(0,16).replace('T',' ')}</Text>
               </Box>
 
-              <Box flexDirection="column" flexGrow={1} marginTop={1}>
-                {loadingMsgs && <Text dimColor>Loading messages...</Text>}
+              <Box flexDirection="column" flexGrow={1}>
+                {loadingMsgs && <StateDisplay type="loading" message="Loading messages..." />}
+                {msgsErr && <StateDisplay type="error" message={msgsErr} />}
+                {!loadingMsgs && pageMsgs.length === 0 && <StateDisplay type="empty" message="No messages" />}
                 {pageMsgs.map((msg) => {
                   const text = extractTextFromContent(msg.content);
                   const roleLabel = msg.type === 'user' ? 'You' : 'Bot';
                   const roleColor = msg.type === 'user' ? 'green' : 'cyan';
                   return (
-                    <Box key={msg.id} marginBottom={1}>
-                      <Text color={roleColor} bold>{roleLabel}: </Text>
-                      <Text>{clampTextLines(text, VIEW_W - 10, 2)}</Text>
+                    <Box key={msg.id} marginBottom={1} flexDirection="column">
+                      <Text color={roleColor} bold>{roleLabel}:</Text>
+                      <Box paddingLeft={2}>
+                        <Text>{clampTextLines(text, VIEW_W - 6, 3)}</Text>
+                      </Box>
                     </Box>
                   );
                 })}
               </Box>
-              {totalPages > 1 && <Hint alignSelf="center">Page {safePage + 1}/{totalPages} (j/k to scroll)</Hint>}
+              {totalPages > 1 && (
+                <Box justifyContent="center" marginTop={1}>
+                  <Hint>Page {safePage + 1}/{totalPages} (↑↓ to scroll)</Hint>
+                </Box>
+              )}
             </Box>
 
+            <Box height={1}><Text dimColor>{'─'.repeat(VIEW_W - 2)}</Text></Box>
+
             {/* Lower Pane: Actions */}
-            <Box height={ACTIONS_H} marginTop={1} paddingX={1} flexDirection="column">
-               <Text color="cyan" bold>Session Actions</Text>
-               <Box marginTop={1}>
+            <Box height={ACTIONS_H} paddingX={1} flexDirection="column">
+               <Text color="magenta" bold>Actions</Text>
+               <Box marginTop={0}>
                  <SelectInput
                    items={secondaryMenu?.items || []}
                    onSelect={secondaryMenu?.onSelect}
                  />
                </Box>
-               <Hint>ESC Back · ↑↓ Select Action</Hint>
+               <Hint>ESC Back · ↑↓ Select Action · Q/M/C Shortcut</Hint>
             </Box>
           </Box>
         );
@@ -1107,7 +1114,7 @@ export const CliMenuManager: React.FC = () => {
       }
       return (
         <Box width={VIEW_W} height={MID_H} flexDirection="column">
-          <ProviderPanel apiUrl={apiUrl} onBack={() => setPage(null)} />
+          <ProviderPanel apiUrl={apiUrl} height={MID_H} onBack={() => setPage(null)} />
         </Box>
       );
     }