bingocode 1.1.70 → 1.1.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bingocode",
-  "version": "1.1.70",
+  "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);
 
@@ -141,13 +146,13 @@ export const ProviderPanel: React.FC<{
     loadPresets();
   }, [loadProviders, loadPresets]);
 
-  // Key processing for Page Up/Down in scrolling lists
+  // Key processing for Page Up/Down and Arrow keys in scrolling lists
   useEffect(() => {
     const handler = (buf: Buffer) => {
       const s = buf.toString();
       if (stage === 'add_select_preset' || stage === 'slot_select_model') {
-        if (s === 'j') setListOffset(prev => prev + 1);
-        if (s === 'k') setListOffset(prev => Math.max(0, prev - 1));
+        if (s === 'j' || s === '\u001b[B') setListOffset(prev => prev + 1); // j or Down
+        if (s === 'k' || s === '\u001b[A') setListOffset(prev => Math.max(0, prev - 1)); // k or Up
       }
     };
     process.stdin.on('data', handler);
@@ -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

@@ -607,12 +607,12 @@ 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') {
+        const HIST_VISIBLE = MID_H - 2;
+        if (key.downArrow || input === 'j' || input === '\u001b[B') {
           // Internal SelectInput handles cursor, we just need to track offset for ScrollBar
           setListOffset(o => Math.min(o + 1, Math.max(0, groupedHistoryItems.length - HIST_VISIBLE)));
         }
-        if (key.upArrow || input === 'k') {
+        if (key.upArrow || input === 'k' || input === '\u001b[A') {
           setListOffset(o => Math.max(0, o - 1));
         }
         if (input === 'q') {
@@ -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');
   }
@@ -965,48 +964,43 @@ export const CliMenuManager: React.FC = () => {
       if (historyMenuStage === 'deleteConfirm' && selectedHistory) {
         const halfH = Math.floor(MID_H / 2);
         const items = [
-          { label: 'Yes, delete', value: '__confirm_delete' },
-          { label: 'No, back', value: '__cancel_delete' },
+          { label: 'Yes, Delete', value: '__confirm_delete' },
+          { label: 'No, Back', value: '__cancel_delete' },
         ];
         return (
           <Box width={VIEW_W} height={MID_H} flexDirection="column">
-            <Box height={halfH} flexDirection="column">
-              <Text color="red">{i18nMap[lang].deleting}</Text>
-              <Text>id: {selectedHistory.id}</Text>
-              <Text>Title: {selectedHistory.title}</Text>
-              <Text>Created At: {selectedHistory.createdAt}</Text>
+            <Box height={halfH} flexDirection="column" paddingX={1} paddingTop={1}>
+              <Text color="red" bold>Confirm Delete?</Text>
+              <Text>Title: {selectedHistory.title || 'Untitled'}</Text>
+              <Text dimColor>Time: {selectedHistory.createdAt?.replace('T',' ')}</Text>
+              <Text dimColor>ID: {selectedHistory.id}</Text>
             </Box>
             <Panel height={MID_H - halfH} borderStyle="round" borderColor="red" paddingX={1}>
-              <Text>Confirm Delete</Text>
               <SelectInput
                 items={items}
                 onSelect={(item) => handleHistoryMenuAction(String(item.value))}
               />
-              <Hint>↩ Enter · q Back</Hint>
+              <Hint>Enter Confirm · q Cancel</Hint>
             </Panel>
           </Box>
         );
       }
       if (!historyList.length && loadingHist) {
-        return <StateDisplay type="loading" message="Fetching history..." />;
+        return <StateDisplay type="loading" message="Loading..." />;
       }
       if (!historyList.length) {
         return <StateDisplay type="empty" message={i18nMap[lang].emptyHistory} />;
       }
 
+      const LIST_H = Math.floor(MID_H * 0.7);
+      const ACTIONS_H = MID_H - LIST_H - 1; // -1 for separator/buffer
+
       if (historyMenuStage === 'window' && selectedHistory) {
+        // Detailed View with Split
         const isMarked = markedSessionIds.has(selectedHistory.id);
-
-        // INFO_H: Title + Metadata + Hint (3 lines)
-        const INFO_H = 3;
-        const MSGS_H = Math.max(3, MID_H - INFO_H);
-
-        // Filter messages
         const displayMsgs = sessionMessages.filter(
           m => m.type === 'user' || m.type === 'assistant' || m.type === 'system'
         );
-
-        // Pagination
         const totalPages = Math.max(1, Math.ceil(displayMsgs.length / MSGS_PAGE_SIZE));
         const safePage = Math.min(msgsPage, totalPages - 1);
         const pageStart = safePage * MSGS_PAGE_SIZE;
@@ -1014,62 +1008,70 @@ export const CliMenuManager: React.FC = () => {
 
         return (
           <Box width={VIEW_W} height={MID_H} flexDirection="column">
-            {/* Top Info Bar */}
-            <Box height={INFO_H} flexDirection="column">
-              <Text color={isMarked ? 'yellow' : 'cyan'}>
-                {isMarked ? '★ ' : ''}{selectedHistory.title || 'Untitled'}
-                <Text dimColor>  {selectedHistory.createdAt?.slice(0, 16).replace('T', ' ') || ''} · {displayMsgs.length} msgs</Text>
-              </Text>
-              <Hint>
-                j/↓ Down · k/↑ Up · m Mark · c Continue · d Delete · q Back
-                {displayMsgs.length > MSGS_PAGE_SIZE ? `  [${safePage + 1}/${totalPages}]` : ''}
-              </Hint>
+            {/* Upper Pane: Preview */}
+            <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}>
+                {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} flexDirection="column">
+                      <Text color={roleColor} bold>{roleLabel}:</Text>
+                      <Box paddingLeft={2}>
+                        <Text>{clampTextLines(text, VIEW_W - 6, 3)}</Text>
+                      </Box>
+                    </Box>
+                  );
+                })}
+              </Box>
+              {totalPages > 1 && (
+                <Box justifyContent="center" marginTop={1}>
+                  <Hint>Page {safePage + 1}/{totalPages} (↑↓ to scroll)</Hint>
+                </Box>
+              )}
             </Box>
 
-            {/* Message Area */}
-            <Box height={MSGS_H} flexDirection="column">
-              {loadingMsgs && <StateDisplay type="loading" message="Loading messages..." />}
-              {msgsErr && <StateDisplay type="error" message={`Error: ${msgsErr}`} />}
-              {!loadingMsgs && !msgsErr && displayMsgs.length === 0 && (
-                <StateDisplay type="empty" message="No message history" />
-              )}
-              {pageMsgs.map((msg) => {
-                const text = extractTextFromContent(msg.content);
-                if (!text.trim()) return null;
-                const isUser = msg.type === 'user';
-                const isSystem = msg.type === 'system';
-                const roleLabel = isUser ? '👤 You' : isSystem ? '⚙ System' : '🤖 Assistant';
-                const roleColor = isUser ? 'green' : isSystem ? 'gray' : 'cyan';
-                return (
-                  <Box key={msg.id} flexDirection="column" marginBottom={1}>
-                    <Text color={roleColor} bold>{roleLabel}</Text>
-                    {isUser ? (
-                      <Text>{text}</Text>
-                    ) : (
-                      <Ansi>{applyMarkdown(text, theme)}</Ansi>
-                    )}
-                  </Box>
-                );
-              })}
+            <Box height={1}><Text dimColor>{'─'.repeat(VIEW_W - 2)}</Text></Box>
+
+            {/* Lower Pane: Actions */}
+            <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 · Q/M/C Shortcut</Hint>
             </Box>
           </Box>
         );
       }
 
-
-      // History List
-      const HIST_VISIBLE = Math.max(1, MID_H - 1);
+      // History List View (Default)
+      const HIST_VISIBLE = MID_H - 2;
       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}>
+          <Box flexDirection="column" flexGrow={1} paddingX={1}>
             <SelectInput
               key={`${historyCursor ?? 'first'}:${slicedItems.length}:${start}`}
               items={slicedItems}
               onSelect={item => {
-                if (String(item.value).startsWith('__group_')) return; // Ignore group headers
+                if (String(item.value).startsWith('__group_')) return;
                 const session = historyList.find(h => h.id === item.value);
                 if (session) {
                   setSelectedHistory(session);
@@ -1082,12 +1084,14 @@ export const CliMenuManager: React.FC = () => {
                 const color = it?.color;
                 return (
                   <Text color={isGroup ? 'gray' : (color ? color : (isSelected ? 'cyan' : undefined))}>
-                    {label}
+                    {isSelected ? '> ' : '  '}{label}
                   </Text>
                 )
               }}
             />
-            <Hint>{i18nMap[lang].historyHint}</Hint>
+            <Box marginTop="auto">
+              <Hint>{i18nMap[lang].historyHint}</Hint>
+            </Box>
           </Box>
           <ScrollBar total={groupedHistoryItems.length} offset={start} height={MID_H} />
         </Box>
@@ -1110,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>
       );
     }