bingocode 1.1.115 → 1.1.117

package/package.json

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

package/src/manager/CliMenuManager.tsx

@@ -72,9 +72,9 @@ async function buildSpawnEnv(): Promise<NodeJS.ProcessEnv> {
   return base;
 }
 
-// Top height: Home fits LogoV2 + Toolbar, other pages more compact
-const TOP_H_HOME = Number(process.env.CLI_TOP_H_HOME || 9);
-const TOP_H_COMPACT = Number(process.env.CLI_TOP_H_COMPACT || 6);
+// Top height: Home = Clawd(3 rows) + border(2) = 5; Compact = 1 row + border(2) = 3
+const TOP_H_HOME = Number(process.env.CLI_TOP_H_HOME || 5);
+const TOP_H_COMPACT = Number(process.env.CLI_TOP_H_COMPACT || 3);
 // Bottom bar height
 const BOTTOM_H = Number(process.env.CLI_BOTTOM_H || 3);
 
@@ -995,7 +995,7 @@ export const CliMenuManager: React.FC = () => {
         return <StateDisplay type="empty" message={i18nMap[lang].emptyHistory} />;
       }
 
-      const ACTIONS_H = 6;
+      const ACTIONS_H = 7; // Actions title(1) + 4 items + hint(1) + padding(1)
       const LIST_H = Math.max(2, MID_H - ACTIONS_H - 1);
 
       if (historyMenuStage === 'window' && selectedHistory) {
@@ -1042,7 +1042,7 @@ export const CliMenuManager: React.FC = () => {
               )}
             </Box>
 
-            <Box height={1} marginBottom={0}><Text dimColor>{'─'.repeat(VIEW_W - 2)}</Text></Box>
+            <Box height={1} marginBottom={0}><Text dimColor>{'─'.repeat(VIEW_W - 4)}</Text></Box>
 
             {/* Lower Pane: Actions */}
             <Box height={ACTIONS_H} paddingX={1} flexDirection="column" overflow="hidden">
@@ -1060,42 +1060,47 @@ export const CliMenuManager: React.FC = () => {
       }
 
 	    // History List View (Default)
+	    // MID_H - 1 (hint bar at top) - 1 (scrollbar safety) = MID_H - 2 visible items
 	    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" position="relative">
-	        <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;
-	              const session = historyList.find(h => h.id === item.value);
-	              if (session) {
-	                setSelectedHistory(session);
-	                setHistoryMenuStage('window');
-	              }
-	            }}
-	            itemComponent={({ isSelected, label }) => {
-	              const it = groupedHistoryItems.find(i => i.label === label);
-	              const isGroup = it?.isGroup;
-	              const color = it?.color;
-	              return (
-	                <Box height={1} overflow="hidden">
-	                  <Text wrap="truncate" color={isGroup ? 'gray' : (color ? color : (isSelected ? 'cyan' : undefined))}>
-	                    {isSelected ? '> ' : '  '}{label}
-	                  </Text>
-	                </Box>
-	              )
-	            }}
-	          />
-	        </Box>
-	        <ScrollBar total={groupedHistoryItems.length} offset={start} height={MID_H - 2} />
-	        <Box position="absolute" bottom={0} left={1} width={VIEW_W - 4}>
+	      <Box width={VIEW_W} height={MID_H} flexDirection="column">
+	        {/* Hint bar — fixed 1 row at top, never overlaps list */}
+	        <Box height={1} paddingX={1}>
 	          <Hint>{i18nMap[lang].historyHint}</Hint>
 	        </Box>
+	        {/* List area — takes the rest of the height */}
+	        <Box flexDirection="row" flexGrow={1} position="relative">
+	          <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;
+	                const session = historyList.find(h => h.id === item.value);
+	                if (session) {
+	                  setSelectedHistory(session);
+	                  setHistoryMenuStage('window');
+	                }
+	              }}
+	              itemComponent={({ isSelected, label }) => {
+	                const it = groupedHistoryItems.find(i => i.label === label);
+	                const isGroup = it?.isGroup;
+	                const color = it?.color;
+	                return (
+	                  <Box height={1} overflow="hidden">
+	                    <Text wrap="truncate" color={isGroup ? 'gray' : (color ? color : (isSelected ? 'cyan' : undefined))}>
+	                      {isSelected ? '> ' : '  '}{label}
+	                    </Text>
+	                  </Box>
+	                )
+	              }}
+	            />
+	          </Box>
+	          <ScrollBar total={groupedHistoryItems.length} offset={start} height={MID_H - 3} />
+	        </Box>
 	      </Box>
 	    );
 	  }
@@ -1190,9 +1195,6 @@ export const CliMenuManager: React.FC = () => {
         page={page}
         width={VIEW_W}
         height={TOP_H}
-        homeLogo={<LogoV2 />}
-        compactLogo={<CondensedLogo />}
-        ip={apiUrl ? apiUrl.replace(/^https?:\/\//, '') : undefined}
         toolbar={
           <TopToolbar
             ready={configReady}

package/src/manager/CliMenuUi.tsx

@@ -256,23 +256,20 @@ export const ChipRow: React.FC<{ children: React.ReactNode }> = memo(({ children
   </Box>
 ));
 
-// TopBar (logo + toolbar horizontal arrangement, with ready state and placeholder)
+// TopBar (full-width toolbar, no separate logo slot)
 export const TopBar: React.FC<{
   ready: boolean;
   page: string | null;
   width?: number;
   height?: number;
-  homeLogo: React.ReactNode;
-  compactLogo: React.ReactNode;
+  homeLogo?: React.ReactNode;
+  compactLogo?: React.ReactNode;
   toolbar?: React.ReactNode;
   ip?: string;
-}> = memo(({ ready, page, width = 80, height = 5, homeLogo, compactLogo, toolbar, ip }) => (
+}> = memo(({ width = 80, height = 5, toolbar }) => (
   <Panel width={width} height={height} borderStyle="round" paddingX={1} paddingY={0}>
-    <Box width={width - 2} flexDirection="row" justifyContent="space-between" alignItems="center">
-      <Box>
-        {ready ? (page === null ? homeLogo : compactLogo) : <FallbackTop ip={ip} />}
-      </Box>
-      {toolbar ? <Box>{toolbar}</Box> : <Box><Hint dim>{ready ? '' : '…'}</Hint></Box>}
+    <Box width={width - 4} flexDirection="row" alignItems="flex-start">
+      {toolbar ?? null}
     </Box>
   </Panel>
 ));

package/src/manager/TopToolbar.tsx

@@ -1,121 +1,98 @@
-//@C:M ID=M.UI.TopToolbar;K=M;V=1.2;P=top toolbar;D=CLI;M=cli;S=ui
-import React, { memo, useMemo } from 'react';
-import { Box, Text } from 'ink';
-import { Chip, ChipRow } from './CliMenuUi.tsx';
-import { useTheme } from '../components/design-system/ThemeProvider.js';
-import { getGlobalConfig, getCurrentProjectConfig, isPathTrusted, checkHasTrustDialogAccepted } from '../utils/config.ts';
-import { getCwd } from '../utils/cwd.js';
-// Update: Import respectively according to the new interface
-import type { ClawdPose } from '../components/LogoV2/Clawd.tsx';
-import { Clawd } from '../components/LogoV2/Clawd.tsx';
-import { AnimatedClawd } from '../components/LogoV2/AnimatedClawd.tsx';
-
-type Props = {
-  ready: boolean;
-  page: string | null;
-  animEnabled: boolean;
-  tipsEnabled: boolean;
-  ip?: string;
-};
-
-function basename(p: string) {
-  if (!p) return '';
-  const parts = p.split(/[/\\]/).filter(Boolean);
-  return parts[parts.length - 1] || p;
-}
-function ellipsisPath(p: string, keep = 2) {
-  if (!p) return '';
-  const parts = p.split(/[/\\]/).filter(Boolean);
-  if (parts.length <= keep) return p;
-  return '…/' + parts.slice(-keep).join('/');
-}
-
-//@C:F ID=F.UI.TopToolbar;K=F;V=1.3;P=toolbar;D=CLI;M=cli;S=ui;In=Props;Out=JSX.Element
-export const TopToolbar: React.FC<Props> = memo(({ ready, page, animEnabled, tipsEnabled, ip }) => {
-  const [theme] = useTheme();
-
-  // Only read config and trust status when ready
-  const { cwd, trustAccepted, trustedPath, projectName } = useMemo(() => {
-    if (!ready) {
-      return { cwd: '', trustAccepted: undefined as undefined|boolean, trustedPath: undefined as undefined|boolean, projectName: '' };
-    }
-    const _cwd = getCwd();
-    const _trustAccepted = checkHasTrustDialogAccepted();
-    const _trustedPath = isPathTrusted(_cwd);
-    let _projectName = '';
-    try {
-      const prj = getCurrentProjectConfig();
-      _projectName = (prj && (prj.name || prj.projectName || prj.id)) || basename(_cwd);
-    } catch {
-      _projectName = basename(_cwd);
-    }
-    return { cwd: _cwd, trustAccepted: _trustAccepted, trustedPath: _trustedPath, projectName: _projectName };
-  }, [ready]);
-
-  const compact = page !== null;
-  const cwdShort = useMemo(() => ellipsisPath(cwd, compact ? 2 : 3), [cwd, compact]);
-
-  // Theme name
-  const themeLabel = String(theme || (ready ? (getGlobalConfig()?.theme ?? 'system') : '…'));
-
-  // Static Clawd pose
-  const clawdPose: ClawdPose = useMemo(() => {
-    if (!ready) return 'default';
-    if (page === null) return animEnabled ? 'arms-up' : 'default';
-    return tipsEnabled ? 'look-left' : 'look-right';
-  }, [ready, page, animEnabled, tipsEnabled]);
-
-  const uiTone = (String(theme) === 'dark') ? 'accent' : (String(theme) === 'highContrast' ? 'warning' : 'info');
-
-  // Trust chip: only show when there's meaningful content
-  const trustChip = useMemo(() => {
-    if (trustedPath === undefined || trustAccepted === undefined) return null;
-    if (trustedPath && trustAccepted) return <Chip label="Trust" value="✓ Trusted" tone="success" />;
-    return <Chip label="Trust" value="Untrusted" tone="warning" />;
-  }, [trustedPath, trustAccepted]);
-
-  return (
-    <Box flexDirection="column">
-      {/* Row 1: Clawd + Theme + Project(if set) + CWD(if set) + Trust(if meaningful) */}
-      <ChipRow>
-        <Box>
-          <Box marginRight={1}>
-            {animEnabled ? <AnimatedClawd /> : <Clawd pose={clawdPose} />}
-          </Box>
-          <Chip label="Theme" value={themeLabel} tone="accent" />
-          {projectName ? <Chip label="Project" value={projectName} tone="info" /> : null}
-          {cwdShort ? <Chip label="CWD" value={cwdShort} tone="subtle" /> : null}
-          {trustChip}
-        </Box>
-      </ChipRow>
-
-      {/* Row 2: IP/server info (left) + UI chips (right) */}
-      <Box flexDirection="row" justifyContent="space-between" alignItems="center">
-        <Box>
-          {ip ? (
-            <Text color="green" dimColor>IP: {ip}</Text>
-          ) : (
-            <Text color="yellow" dimColor>{ready ? 'Server ready' : 'Starting server…'}</Text>
-          )}
-        </Box>
-        <Box>
-          <Chip
-            label="UI"
-            value={`Anim ${animEnabled ? 'On' : 'Off'} · Tips ${tipsEnabled ? 'On' : 'Off'}`}
-            tone={uiTone as any}
-          />
-        </Box>
-      </Box>
-
-      {!compact && (
-        <ChipRow>
-          <Box>
-            <Chip label="Shortcuts" value="N New · R Resume · P Provider · G Theme · ? Help" tone="subtle" />
-          </Box>
-        </ChipRow>
-      )}
-    </Box>
-  );
-});
-
-export default TopToolbar;
+//@C:M ID=M.UI.TopToolbar;K=M;V=1.3;P=top toolbar;D=CLI;M=cli;S=ui
+import React, { memo, useMemo } from 'react';
+import { Box, Text } from 'ink';
+import { Chip } from './CliMenuUi.tsx';
+import { useTheme } from '../components/design-system/ThemeProvider.js';
+import { getGlobalConfig } from '../utils/config.ts';
+import type { ClawdPose } from '../components/LogoV2/Clawd.tsx';
+import { Clawd } from '../components/LogoV2/Clawd.tsx';
+import { AnimatedClawd } from '../components/LogoV2/AnimatedClawd.tsx';
+
+type Props = {
+  ready: boolean;
+  page: string | null;
+  animEnabled: boolean;
+  tipsEnabled: boolean;
+  ip?: string;
+};
+
+//@C:F ID=F.UI.TopToolbar;K=F;V=1.4;P=toolbar;D=CLI;M=cli;S=ui;In=Props;Out=JSX.Element
+export const TopToolbar: React.FC<Props> = memo(({ ready, page, animEnabled, tipsEnabled, ip }) => {
+  const [theme] = useTheme();
+
+  const { version } = useMemo(() => {
+    try {
+      const cfg = getGlobalConfig();
+      return { version: (cfg as any)?.version ?? '' };
+    } catch {
+      return { version: '' };
+    }
+  }, []);
+
+  const themeLabel = String(theme || (ready ? (getGlobalConfig()?.theme ?? 'system') : '…'));
+  const uiChipValue = `Anim ${animEnabled ? 'On' : 'Off'} · Tips ${tipsEnabled ? 'On' : 'Off'}`;
+  const uiTone = (String(theme) === 'dark') ? 'accent' : (String(theme) === 'highContrast' ? 'warning' : 'info');
+
+  const clawdPose: ClawdPose = useMemo(() => {
+    if (!ready) return 'default';
+    if (page === null) return animEnabled ? 'arms-up' : 'default';
+    return tipsEnabled ? 'look-left' : 'look-right';
+  }, [ready, page, animEnabled, tipsEnabled]);
+
+  // ── Compact mode (page !== null): single line, no logo ──────────────
+  if (page !== null) {
+    return (
+      <Box flexDirection="row" alignItems="center">
+        <Text bold>Bingo Code</Text>
+        <Box marginLeft={1}>
+          <Chip label="Theme" value={themeLabel} tone="accent" />
+        </Box>
+        <Chip label="UI" value={uiChipValue} tone={uiTone as any} />
+        {ip ? (
+          <Text color="green" dimColor> · IP: {ip}</Text>
+        ) : (
+          <Text color="yellow" dimColor> · {ready ? 'Server ready' : 'Starting…'}</Text>
+        )}
+      </Box>
+    );
+  }
+
+  // ── Home mode (page === null): Clawd left + 3-row right column ───────
+  return (
+    <Box flexDirection="row" alignItems="flex-start">
+      {/* Left: Clawd sprite */}
+      <Box marginRight={2}>
+        {animEnabled ? <AnimatedClawd /> : <Clawd pose={clawdPose} />}
+      </Box>
+
+      {/* Right: 3 rows */}
+      <Box flexDirection="column">
+        {/* Row 1: brand + version + chips */}
+        <Box flexDirection="row" alignItems="center">
+          <Text bold>Welcome to Bingo Code</Text>
+          {version ? <Text dimColor> v{version}</Text> : null}
+          <Box marginLeft={1}>
+            <Chip label="Theme" value={themeLabel} tone="accent" />
+          </Box>
+          <Chip label="UI" value={uiChipValue} tone={uiTone as any} />
+        </Box>
+
+        {/* Row 2: IP / server status */}
+        <Box>
+          {ip ? (
+            <Text color="green" dimColor>IP: {ip}</Text>
+          ) : (
+            <Text color="yellow" dimColor>{ready ? 'Server ready' : 'Starting server…'}</Text>
+          )}
+        </Box>
+
+        {/* Row 3: keyboard shortcuts */}
+        <Box>
+          <Text dimColor>N New · R Resume · P Provider · G Theme · ? Help</Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+});
+
+export default TopToolbar;