bingocode 1.1.112 → 1.1.113

package/src/manager/CliMenuUi.tsx

@@ -266,16 +266,29 @@ export const TopBar: React.FC<{
   compactLogo: React.ReactNode;
   toolbar?: React.ReactNode;
   ip?: string;
-}> = memo(({ ready, page, width = 80, height = 5, homeLogo, compactLogo, toolbar, ip }) => (
-  <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} />}
+}> = memo(({ ready, page, width = 80, height = 5, homeLogo, compactLogo, toolbar, ip }) => {
+  const isHome = page === null;
+  return (
+    <Panel width={width} height={height} borderStyle="round" paddingX={1} paddingY={0}>
+      <Box width={width - 4} flexDirection="row" alignItems="flex-start">
+        {/* Left Section: Welcome Text & IP */}
+        <Box flexDirection="column" width={20} marginRight={2}>
+              <Text bold color="cyan">{isHome ? 'Welcome Bingo\nCode' : 'Bingo Code'}</Text>
+          {ip ? (
+            <Box marginTop={1}>
+              <Text color="green">IP: {ip.replace(' ','\n    ')}</Text>
+            </Box>
+          ) : null}
+        </Box>
+
+        {/* Center/Right Section: Logo + Toolbar (Dynamic) */}
+        <Box flexGrow={1} flexDirection="column">
+           {toolbar}
+        </Box>
       </Box>
-      {toolbar ? <Box>{toolbar}</Box> : <Box><Hint dim>{ready ? '' : '…'}</Hint></Box>}
-    </Box>
-  </Panel>
-));
+    </Panel>
+  );
+});
 
 // InfoPair (Label fixed width for column alignment)
 export const InfoPair: React.FC<{ label: string; value: string; labelColor?: string; valueColor?: string; labelWidth?: number }> = memo(({

package/src/manager/TopToolbar.tsx

@@ -1,111 +1,137 @@
-//@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 } 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;
-};
-
-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.2;P=toolbar;D=CLI;M=cli;S=ui;In=Props;Out=JSX.Element
-export const TopToolbar: React.FC<Props> = memo(({ ready, page, animEnabled, tipsEnabled }) => {
-  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');
-
-  return (
-    <Box flexDirection="column" minHeight={3}>
-      <ChipRow>
-        {/* Left: Clawd + Core Status */}
-        <Box>
-          <Box marginRight={2}>
-            {animEnabled ? <AnimatedClawd /> : <Clawd pose={clawdPose} />}
-          </Box>
-
-          <Chip label="Theme" value={themeLabel} tone="accent" />
-          <Chip label="Project" value={projectName || '—'} tone="info" />
-          <Chip label="CWD" value={cwdShort || '—'} tone="subtle" />
-          {trustedPath === undefined || trustAccepted === undefined ? (
-            <Chip label="Trust" value="…" tone="subtle" />
-          ) : trustedPath && trustAccepted ? (
-            <Chip label="Trust" value="✅ Trusted" tone="success" />
-          ) : (
-            <Chip label="Trust" value="🔒 Untrusted" tone="warning" />
-          )}
-        </Box>
-
-        {/* Right: UI Status merged display */}
-        <Box>
-          <Chip
-            label="UI"
-            value={`Anim ${animEnabled ? 'On' : 'Off'} · Tips ${tipsEnabled ? 'On' : 'Off'}`}
-            tone={uiTone as any}
-          />
-        </Box>
-      </ChipRow>
-
-      {!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.tsx';
+import { getGlobalConfig, getCurrentProjectConfig } from '../utils/config.ts';
+import { getCwd } from '../utils/cwd.js';
+import type { ClawdPose } from '../components/LogoV2/Clawd.tsx';
+import { Clawd } from '../components/LogoV2/Clawd.tsx';
+import { AnimatedClawd } from '../components/LogoV2/AnimatedClawd.tsx';
+
+import fs from 'fs';
+import path from 'path';
+import os from 'os';
+
+type Props = {
+  ready: boolean;
+  page: string | null;
+  animEnabled: boolean;
+  tipsEnabled: boolean;
+};
+
+function countLeases(): number {
+  try {
+    const LEASES_DIR = path.join(os.homedir(), '.claude-cli', 'runtime', 'leases');
+    if (!fs.existsSync(LEASES_DIR)) return 0;
+    const files = fs.readdirSync(LEASES_DIR);
+    let alive = 0;
+    for (const f of files) {
+      try {
+        const p = path.join(LEASES_DIR, f);
+        const raw = fs.readFileSync(p, 'utf-8');
+        const data = JSON.parse(raw);
+        if (data?.pid) {
+          try {
+            process.kill(data.pid, 0);
+            alive++;
+          } catch {
+            // PID not alive
+          }
+        }
+      } catch {}
+    }
+    return alive;
+  } catch {
+    return 0;
+  }
+}
+
+function basename(p: string) {
+  if (!p) return '';
+  const parts = p.split(/[/\\]/).filter(Boolean);
+  return parts[parts.length - 1] || p;
+}
+
+/**
+ * Compact 1/6 size Mini-Clawd mascot string.
+ * Approx 3x2 characters.
+ */
+const MiniClawd = () => (
+  <Box flexDirection="column" marginRight={1}>
+    <Text color="cyan">▟█▙</Text>
+    <Text color="cyan">▜██</Text>
+  </Box>
+);
+
+export const TopToolbar: React.FC<Props> = memo(({ ready, page, animEnabled, tipsEnabled }) => {
+  const [theme] = useTheme();
+
+  // Polling for window count
+  const [windowCount, setWindowCount] = React.useState(0);
+  React.useEffect(() => {
+    const update = () => setWindowCount(countLeases());
+    update();
+    const id = setInterval(update, 10000); // 10s poll
+    return () => clearInterval(id);
+  }, []);
+
+  // Only read config when ready
+  const { projectName } = useMemo(() => {
+    if (!ready) {
+      return { projectName: '' };
+    }
+    const _cwd = getCwd();
+    let _projectName = '';
+    try {
+      const prj = getCurrentProjectConfig();
+      _projectName = (prj && (prj.name || prj.projectName || prj.id)) || (typeof _cwd === 'string' ? basename(_cwd) : '');
+    } catch {
+      _projectName = typeof _cwd === 'string' ? basename(_cwd) : '';
+    }
+    return { projectName: _projectName };
+  }, [ready]);
+
+  // 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');
+
+  return (
+    <Box flexDirection="row" width="100%" alignItems="flex-start" justifyContent="space-between">
+      {/* Left: Main Mascot + Compact Grid */}
+      <Box alignItems="flex-start">
+        <Box marginRight={2}>
+          {animEnabled ? <AnimatedClawd /> : <Clawd pose={clawdPose} />}
+        </Box>
+
+        {/* Visual Window Grid (Mini-mascots 1/6 size) */}
+        <Box flexDirection="row" flexWrap="wrap" maxWidth={40}>
+          {Array.from({ length: windowCount }).map((_, i) => (
+            <MiniClawd key={i} />
+          ))}
+        </Box>
+      </Box>
+
+      {/* Right: Status Info Chips (Vertical Stack) */}
+      <Box flexDirection="column" alignItems="flex-end">
+        <Chip label="Theme" value={themeLabel} tone="accent" />
+        <Chip label="Project" value={projectName || '—'} tone="info" />
+        <Chip
+          label="UI"
+          value={tipsEnabled ? 'Tips On' : 'Tips Off'}
+          tone={uiTone as any}
+        />
+      </Box>
+    </Box>
+  );
+});
+
+export default TopToolbar;