bingocode 1.1.69 → 1.1.71

package/package.json

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

package/src/cli/ProviderPanel.tsx

@@ -141,13 +141,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);
@@ -679,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',
@@ -593,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') {
@@ -951,48 +965,45 @@ 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);
+        const PREVIEW_H = Math.max(3, LIST_H - 2);
 
-        // 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;
@@ -1000,62 +1011,60 @@ 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} borderStyle="single" borderColor="gray" flexDirection="column" paddingX={1}>
+              <Box justifyContent="space-between">
+                <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>}
+                {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>
+                  );
+                })}
+              </Box>
+              {totalPages > 1 && <Hint alignSelf="center">Page {safePage + 1}/{totalPages} (j/k to scroll)</Hint>}
             </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>
-                );
-              })}
+            {/* Lower Pane: Actions */}
+            <Box height={ACTIONS_H} marginTop={1} paddingX={1} flexDirection="column">
+               <Text color="cyan" bold>Session Actions</Text>
+               <Box marginTop={1}>
+                 <SelectInput
+                   items={secondaryMenu?.items || []}
+                   onSelect={secondaryMenu?.onSelect}
+                 />
+               </Box>
+               <Hint>ESC Back · ↑↓ Select Action</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);
@@ -1068,12 +1077,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>
@@ -1125,10 +1136,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>
       );
     }