bingocode 1.1.71 → 1.1.73

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bingocode",
-  "version": "1.1.71",
+  "version": "1.1.73",
   "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

@@ -11,7 +11,7 @@ import path from 'path';
 import os from 'os';
 import { ensureSingletonLocalServer } from '../server/ensureSingletonLocalServer.ts';
 // New: Common UI elements and top toolbar
-import { TopBar, BottomBar, Panel, Hint, Kbd, SecondaryMenu, StateDisplay, ScrollBar } from '../manager/CliMenuUi.tsx';
+import { TopBar, BottomBar, Panel, Hint, Kbd, SecondaryMenu, StateDisplay, ScrollBar, truncate, safePadEnd } from '../manager/CliMenuUi.tsx';
 import { WelcomeV2 } from '../components/LogoV2/WelcomeV2.tsx';
 import { TopToolbar } from '../manager/TopToolbar.tsx';
 
@@ -681,37 +681,30 @@ 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');
   }
 
-  // 新增：历史列表格式化（单行定宽 + 省略）
-  function ellipsis(str: string, max: number) {
-    const s = String(str ?? '');
-    if (max <= 0) return '';
-    if (s.length <= max) return s;
-    return s.slice(0, Math.max(0, max - 1)) + '…';
-  }
   function makeHistoryLabel(item: any, width: number, isMarked: boolean) {
     const star = isMarked ? '★ ' : '';
-    const ts = String(item.createdAt || '').slice(0, 16).replace('T',' ');
+    const ts = String(item.createdAt || '').slice(0, 16).replace('T', ' ');
     const cnt = String(item.messageCount ?? 0).padStart(3, ' ');
-    // 预留：前缀(星标+时间) + 双空格 + 末尾计数 + 单空格
-    const reserved = star.length + ts.length + 2 + 1 + cnt.length;
+    // Reserved width for: prefix(star+time) + spacer(2) + suffix(1+cnt)
+    // Star is width 2, ts is width 16, spacer is 2, cnt is 3, padding is 1. Total = 24
+    const reserved = 24;
     const titleMax = Math.max(8, width - reserved);
-    const title = ellipsis(String(item.title || ''), titleMax).padEnd(titleMax, ' ');
+    const title = safePadEnd(truncate(String(item.title || ''), titleMax), titleMax);
     return `${star}${ts}  ${title} ${cnt}`;
   }
 
@@ -999,8 +992,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 +1003,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>
         );
@@ -1058,7 +1059,7 @@ export const CliMenuManager: React.FC = () => {
       const slicedItems = groupedHistoryItems.slice(start, start + HIST_VISIBLE);
 
       return (
-        <Box width={VIEW_W} height={MID_H} flexDirection="row">
+        <Box width={VIEW_W} height={MID_H} flexDirection="row" position="relative">
           <Box flexDirection="column" flexGrow={1} paddingX={1}>
             <SelectInput
               key={`${historyCursor ?? 'first'}:${slicedItems.length}:${start}`}
@@ -1086,7 +1087,7 @@ export const CliMenuManager: React.FC = () => {
               <Hint>{i18nMap[lang].historyHint}</Hint>
             </Box>
           </Box>
-          <ScrollBar total={groupedHistoryItems.length} offset={start} height={MID_H} />
+          <ScrollBar total={groupedHistoryItems.length} offset={start} height={MID_H - 2} />
         </Box>
       );
     }
@@ -1107,7 +1108,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>
       );
     }