@three333/termbuddy 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@three333/termbuddy",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "private": false,
   "type": "module",
   "bin": {

package/src/components/AiConsole.tsx

@@ -12,7 +12,7 @@ export function AiConsole(props: {
   onStartCountdown: (minutes: number) => void;
   onShowBubble?: (args: {
     text: string;
-    target: "local" | "buddy";
+    target: number; // 1-4 for No.1 to No.4
     durationMs: number;
   }) => void;
   onThrowProjectile: (
@@ -21,6 +21,7 @@ export function AiConsole(props: {
   ) => void;
   localName: string;
   peerName: string;
+  peers?: Array<{ id: string; name: string }>; // For session info
 }) {
   const [input, setInput] = useState("");
   const [apiKey, setApiKey] = useState<string | null>(null);
@@ -55,6 +56,7 @@ export function AiConsole(props: {
   const agent = useAiAgent({
     localName: props.localName,
     peerName: props.peerName,
+    peers: props.peers,
     onStartCountdown: props.onStartCountdown,
     onShowBubble: props.onShowBubble,
     onThrowProjectile: props.onThrowProjectile,

package/src/components/InfoPanel.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { Box, Text } from "ink";
+
+export type InfoRecord = {
+  id: number;
+  timestamp: number;
+  type: "bubble" | "countdown" | "projectile" | "join" | "leave" | "other";
+  content: string;
+};
+
+export function InfoPanel(props: {
+  records: InfoRecord[];
+  maxRecords?: number;
+}) {
+  const maxRecords = props.maxRecords ?? 8;
+  const displayRecords = props.records.slice(-maxRecords);
+
+  const formatTime = (ts: number) => {
+    const d = new Date(ts);
+    return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+  };
+
+  const getTypeIcon = (type: InfoRecord["type"]) => {
+    switch (type) {
+      case "bubble": return "[Msg]";
+      case "countdown": return "[Tmr]";
+      case "projectile": return "[Thr]";
+      case "join": return "[+]";
+      case "leave": return "[-]";
+      default: return "[*]";
+    }
+  };
+
+  const getTypeColor = (type: InfoRecord["type"]) => {
+    switch (type) {
+      case "bubble": return "cyan";
+      case "countdown": return "green";
+      case "projectile": return "magenta";
+      case "join": return "green";
+      case "leave": return "red";
+      default: return "gray";
+    }
+  };
+
+  return (
+    <Box flexDirection="column" borderStyle="round" paddingX={1} paddingY={0}>
+      <Box justifyContent="space-between" marginBottom={0}>
+        <Text color="yellow">Info Log</Text>
+        <Text color="gray">{displayRecords.length} records</Text>
+      </Box>
+
+      <Box flexDirection="column" minHeight={6}>
+        {displayRecords.length === 0 ? (
+          <Text color="gray">No records yet...</Text>
+        ) : (
+          displayRecords.map((record) => (
+            <Text key={record.id} wrap="truncate-end">
+              <Text color="gray">{formatTime(record.timestamp)} </Text>
+              <Text color={getTypeColor(record.type)}>{getTypeIcon(record.type)} </Text>
+              <Text>{record.content}</Text>
+            </Text>
+          ))
+        )}
+      </Box>
+    </Box>
+  );
+}

package/src/components/index.ts

@@ -6,3 +6,5 @@ export {
 } from "./sprite/CountdownClockSprite.js";
 export { ProjectileThrowSprite } from "./sprite/ProjectileThrowSprite.js";
 export { StatusHeader } from "./StatusHeader.js";
+export { InfoPanel } from "./InfoPanel.js";
+export type { InfoRecord } from "./InfoPanel.js";

package/src/components/tool/createBubbleTool.ts

@@ -1,6 +1,7 @@
 import { tool } from "langchain";
 
-export type BubbleTarget = "local" | "buddy";
+// Target can be 1-4 (No.1 to No.4)
+export type BubbleTarget = number;
 
 export function createBubbleTool(options: {
   onShowBubble?: (args: {
@@ -10,14 +11,32 @@ export function createBubbleTool(options: {
   }) => void;
 }) {
   return tool(
-    async (input: { text?: string; target?: BubbleTarget; durationMs?: number }) => {
+    async (input: { text?: string; target?: number | string; durationMs?: number }) => {
       const text = String(input.text ?? "").trim();
       if (!text) return "气泡内容为空。";
 
-      const target: BubbleTarget =
-        input.target === "buddy" || input.target === "local"
-          ? input.target
-          : "local";
+      // Parse target: can be number 1-4, or "local"/"buddy" for backward compatibility
+      let target: number = 1; // default to No.1 (local)
+      if (typeof input.target === "number") {
+        target = Math.max(1, Math.min(4, Math.floor(input.target)));
+      } else if (typeof input.target === "string") {
+        const t = input.target.toLowerCase();
+        if (t === "local" || t === "1") {
+          target = 1;
+        } else if (t === "buddy" || t === "2") {
+          target = 2;
+        } else if (t === "3") {
+          target = 3;
+        } else if (t === "4") {
+          target = 4;
+        } else {
+          // Try to parse as number
+          const parsed = parseInt(t, 10);
+          if (!isNaN(parsed) && parsed >= 1 && parsed <= 4) {
+            target = parsed;
+          }
+        }
+      }
 
       const durationRaw = Number(input.durationMs ?? 2500);
       const durationMs =
@@ -26,11 +45,11 @@ export function createBubbleTool(options: {
           : 2500;
 
       options.onShowBubble?.({ text, target, durationMs });
-      return `已显示气泡：${text}`;
+      return `已显示气泡给 No.${target}：${text}`;
     },
     {
       name: "show_bubble",
-      description: "在小猫头像上显示一个气泡（短消息提示）。",
+      description: "在指定用户的小猫头像上显示一个气泡（短消息提示）。",
       schema: {
         type: "object",
         properties: {
@@ -41,9 +60,10 @@ export function createBubbleTool(options: {
             description: "气泡里的文字",
           },
           target: {
-            type: "string",
-            enum: ["local", "buddy"],
-            description: "显示在哪一侧的小猫上（local=我，buddy=同桌）",
+            type: "integer",
+            minimum: 1,
+            maximum: 4,
+            description: "显示在哪个用户的小猫上（1=No.1/本地用户，2=No.2，3=No.3，4=No.4）",
           },
           durationMs: {
             type: "integer",

package/src/hooks/useAiAgent.ts

@@ -49,26 +49,36 @@ function lastAiText(messages: unknown[]): string | null {
   return null;
 }
 
-function createSystemPrompt(context: { localName: string; peerName: string }) {
+function createSystemPrompt(context: { localName: string; peerName: string; peers?: Array<{ id: string; name: string }> }) {
+  const peerList = context.peers ?? [];
+  const userList = [
+    `No.1: ${context.localName} (我/本地用户)`,
+    peerList[0] ? `No.2: ${peerList[0].name}` : "No.2: (空位)",
+    peerList[1] ? `No.3: ${peerList[1].name}` : "No.3: (空位)",
+    peerList[2] ? `No.4: ${peerList[2].name}` : "No.4: (空位)",
+  ].join("、");
+
   return [
-    "你是 TermBuddy 里的“壳中幽灵 (Ghost in the Shell)”。",
-    "默认隐形；被 / 唤醒时出现。风格：极简、干练、少废话。",
-    "你可以使用工具来操控应用功能（例如倒计时）。",
-    "如果用户提到“倒计时/专注/计时/countdown”，优先调用 start_countdown。",
-    "如果用户提到“气泡/泡泡/提示/说一句”，优先调用 show_bubble。",
-    "如果用户提到“互动/扔/投掷/throw”，优先调用 throw_projectile。",
-    "当用户明确要求投掷 N 次且 1<=N<=100 时，必须按 N 执行：重复调用 throw_projectile 共 N 次，不要改成“示意/少量几次”。超过 100 则分批多次调用。",
-    `当前上下文：我叫 ${context.localName}；同桌叫 ${context.peerName}。`,
+    `你是 TermBuddy 里的「壳中幽灵 (Ghost in the Shell)」。`,
+    `默认隐形；被 / 唤醒时出现。风格：极简、干练、少废话。`,
+    `你可以使用工具来操控应用功能（例如倒计时）。`,
+    `如果用户提到「倒计时/专注/计时/countdown」，优先调用 start_countdown。`,
+    `如果用户提到「气泡/泡泡/提示/说一句/和某人说」，优先调用 show_bubble，并根据目标用户设置 target 参数（1-4）。`,
+    `如果用户提到「互动/扔/投掷/throw」，优先调用 throw_projectile。`,
+    `当用户明确要求投掷 N 次且 1<=N<=100 时，必须按 N 执行：重复调用 throw_projectile 共 N 次，不要改成「示意/少量几次」。超过 100 则分批多次调用。`,
+    `当前房间有4个位置，用户列表：${userList}。`,
+    `我是 ${context.localName}（No.1）。`,
   ].join("\n");
 }
 
 export function useAiAgent(options: {
   localName: string;
   peerName: string;
+  peers?: Array<{ id: string; name: string }>;
   onStartCountdown?: (minutes: number) => void;
   onShowBubble?: (args: {
     text: string;
-    target: "local" | "buddy";
+    target: number; // 1-4 for No.1 to No.4
     durationMs: number;
   }) => void;
   onThrowProjectile?: (kind: ProjectileKind, direction: ProjectileDirection) => void;
@@ -146,6 +156,7 @@ export function useAiAgent(options: {
         systemPrompt: createSystemPrompt({
           localName: options.localName,
           peerName: options.peerName,
+          peers: options.peers,
         }),
         name: "ghost",
       });
@@ -160,6 +171,7 @@ export function useAiAgent(options: {
     options.onShowBubble,
     options.onThrowProjectile,
     options.peerName,
+    options.peers,
   ]);
 
   const ask = useCallback(

package/src/hooks/useTcpSync.ts

@@ -99,8 +99,17 @@ export function useTcpSync(options: Options): {
     }
   }, [broadcastPacket, syncPeersState]);
 
+  const MAX_PEERS = 4;
+
   // Attach a new peer socket (host only)
   const attachPeerSocket = useCallback((socket: net.Socket) => {
+    // Reject if already at max capacity (host + 3 clients = 4 total, so max 3 peer connections)
+    if (peerConnectionsRef.current.size >= MAX_PEERS - 1) {
+      socket.end();
+      socket.destroy();
+      return;
+    }
+
     const peerId = generatePeerId();
     let buf = "";
 

package/src/page/Session.tsx

@@ -7,7 +7,9 @@ import {
   CountdownClockSprite,
   ProjectileThrowSprite,
   StatusHeader,
+  InfoPanel,
 } from "../components/index.js";
+import type { InfoRecord } from "../components/index.js";
 import type { CountdownClockType } from "../components/sprite/CountdownClockSprite.js";
 import type {
   ProjectileDirection,
@@ -60,12 +62,23 @@ export function Session(
       direction: ProjectileDirection;
     }>
   >([]);
-  const [localBubble, setLocalBubble] = useState<string | null>(null);
-  const [buddyBubble, setBuddyBubble] = useState<string | null>(null);
-  const bubbleTimersRef = useRef<{
-    local: NodeJS.Timeout | null;
-    buddy: NodeJS.Timeout | null;
-  }>({ local: null, buddy: null });
+  // Bubbles for all 4 users: index 0 = local (No.1), 1-3 = peers (No.2-4)
+  const [peerBubbles, setPeerBubbles] = useState<(string | null)[]>([null, null, null, null]);
+  const bubbleTimersRef = useRef<(NodeJS.Timeout | null)[]>([null, null, null, null]);
+
+  // Info records for logging events
+  const [infoRecords, setInfoRecords] = useState<InfoRecord[]>([]);
+  const nextRecordIdRef = useRef<number>(1);
+
+  const addInfoRecord = useCallback((type: InfoRecord["type"], content: string) => {
+    const record: InfoRecord = {
+      id: nextRecordIdRef.current++,
+      timestamp: Date.now(),
+      type,
+      content,
+    };
+    setInfoRecords(prev => [...prev, record]);
+  }, []);
 
   const tcpOptions = useMemo(() => {
     return props.role === "host"
@@ -102,20 +115,33 @@ export function Session(
 
   const localActivity = useActivityMonitor();
 
-  // Fix: Derive peers from single peerName until multi-peer is supported
-  const peers = useMemo(() => {
-    return tcp.peerName
-      ? [
-          {
-            id: "remote",
-            name: tcp.peerName,
-            state: tcp.remoteState ?? ("OFFLINE" as const),
-          },
-        ]
-      : [];
-  }, [tcp.peerName, tcp.remoteState]);
-
-  const firstPeerName = tcp.peerName;
+  // Use peers array from TCP sync for multi-peer support
+  const peers = tcp.peers;
+  const firstPeerName = peers.length > 0 ? peers[0].name : undefined;
+  const prevPeersRef = useRef<typeof peers>([]);
+
+  // Track peer joins and leaves
+  useEffect(() => {
+    const prevPeers = prevPeersRef.current;
+    const prevNames = new Set(prevPeers.map(p => p.name));
+    const currentNames = new Set(peers.map(p => p.name));
+
+    // Check for new peers
+    peers.forEach(p => {
+      if (!prevNames.has(p.name)) {
+        addInfoRecord("join", `${p.name} joined`);
+      }
+    });
+
+    // Check for left peers
+    prevPeers.forEach(p => {
+      if (!currentNames.has(p.name)) {
+        addInfoRecord("leave", `${p.name} left`);
+      }
+    });
+
+    prevPeersRef.current = [...peers];
+  }, [peers, addInfoRecord]);
 
   const onToggleAi = useCallback(() => setShowAi((v) => !v), []);
   const onCloseAi = useCallback(() => setShowAi(false), []);
@@ -206,7 +232,8 @@ export function Session(
       remainingSeconds: totalSeconds,
       type,
     });
-  }, []);
+    addInfoRecord("countdown", `Started ${minutes}min countdown`);
+  }, [addInfoRecord]);
 
   const nextShotIdRef = useRef<number>(1);
   const shotQueueRef = useRef<
@@ -232,35 +259,43 @@ export function Session(
       shotQueueRef.current.push({ kind, direction });
       pumpShotQueue();
       if (tcp.status === "connected") tcp.sendProjectile(kind, direction);
+      addInfoRecord("projectile", `Threw ${kind}`);
     },
-    [pumpShotQueue, tcp]
+    [pumpShotQueue, tcp, addInfoRecord]
   );
 
   const showBubble = useCallback(
-    (args: { text: string; target: "local" | "buddy"; durationMs: number }) => {
+    (args: { text: string; target: number; durationMs: number }) => {
       const text = args.text.trim();
       if (!text) return;
       const durationMs = Math.max(300, Math.min(15_000, Math.floor(args.durationMs)));
 
-      const setBubble = args.target === "buddy" ? setBuddyBubble : setLocalBubble;
-      setBubble(text);
+      // target is 1-4 (No.1 to No.4), convert to 0-3 index
+      const targetIndex = Math.max(0, Math.min(3, args.target - 1));
+
+      setPeerBubbles(prev => {
+        const next = [...prev];
+        next[targetIndex] = text;
+        return next;
+      });
 
-      const prevTimer =
-        args.target === "buddy"
-          ? bubbleTimersRef.current.buddy
-          : bubbleTimersRef.current.local;
+      const prevTimer = bubbleTimersRef.current[targetIndex];
       if (prevTimer) clearTimeout(prevTimer);
 
       const handle = setTimeout(() => {
-        setBubble(null);
-        if (args.target === "buddy") bubbleTimersRef.current.buddy = null;
-        else bubbleTimersRef.current.local = null;
+        setPeerBubbles(prev => {
+          const next = [...prev];
+          next[targetIndex] = null;
+          return next;
+        });
+        bubbleTimersRef.current[targetIndex] = null;
       }, durationMs);
 
-      if (args.target === "buddy") bubbleTimersRef.current.buddy = handle;
-      else bubbleTimersRef.current.local = handle;
+      bubbleTimersRef.current[targetIndex] = handle;
+
+      addInfoRecord("bubble", `No.${args.target}: "${text}"`);
     },
-    []
+    [addInfoRecord]
   );
 
   useInput(
@@ -320,8 +355,9 @@ export function Session(
 
   useEffect(() => {
     return () => {
-      if (bubbleTimersRef.current.local) clearTimeout(bubbleTimersRef.current.local);
-      if (bubbleTimersRef.current.buddy) clearTimeout(bubbleTimersRef.current.buddy);
+      bubbleTimersRef.current.forEach(timer => {
+        if (timer) clearTimeout(timer);
+      });
     };
   }, []);
 
@@ -335,18 +371,29 @@ export function Session(
         peerCount={peers.length}
       />
 
-      {/* Main Stage: 3 Columns */}
-      <Box
-        flexDirection="row"
-        alignItems="center"
-        justifyContent="space-between"
-        marginTop={1}
-        gap={2}
-      >
-        {/* Left: Local User */}
-        <Box flexDirection="column" alignItems="center" minWidth={20}>
-          {countdown ? (
-            <Box flexDirection="column" alignItems="center" marginBottom={0}>
+      {/* Main Stage: 2x2 Grid Layout for 4 Users */}
+      <Box flexDirection="column" marginTop={1}>
+        {/* Projectile Area at Top */}
+        <Box flexDirection="column" width="100%" alignItems="center" marginBottom={1}>
+          {shots.map((s) => (
+            <ProjectileThrowSprite
+              key={String(s.id)}
+              kind={s.kind}
+              direction={s.direction}
+              shotId={s.id}
+              width={50}
+              onDone={() =>
+                setShots((prev) => prev.filter((x) => x.id !== s.id))
+              }
+            />
+          ))}
+          {shots.length === 0 ? <Box height={1} /> : null}
+        </Box>
+
+        {/* Countdown Timer (shared) */}
+        {countdown ? (
+          <Box justifyContent="center" marginBottom={1}>
+            <Box flexDirection="column" alignItems="center">
               <Text color="gray">{formatMMSS(countdown.remainingSeconds)}</Text>
               <CountdownClockSprite
                 variant="COMPACT"
@@ -357,60 +404,67 @@ export function Session(
                 showLabel={false}
               />
             </Box>
-          ) : (
-            <Box height={4} />
-          )}
-          <BuddyAvatar state={localState} marginTop={0} bubbleText={localBubble} />
-          <Text color="cyan">{localLabel}</Text>
-        </Box>
+          </Box>
+        ) : null}
+
+        {/* 2x2 Grid of Users */}
+        <Box flexDirection="column" alignItems="center">
+          {/* Row 1: User 1 (Local) and User 2 */}
+          <Box flexDirection="row" justifyContent="center" gap={4}>
+            {/* No.1 - Local User */}
+            <Box flexDirection="column" alignItems="center" minWidth={18}>
+              <Text color="cyan" bold>No.1 {props.localName}</Text>
+              <BuddyAvatar state={localState} marginTop={0} bubbleText={peerBubbles[0] ?? null} />
+            </Box>
 
-        {/* Center: Stage (Projectiles only) */}
-        <Box
-          flexDirection="column"
-          alignItems="center"
-          flexGrow={1}
-          minWidth={40}
-        >
-          {/* Projectile Area */}
-          <Box flexDirection="column" width="100%" alignItems="center">
-            {shots.map((s) => (
-              <ProjectileThrowSprite
-                key={String(s.id)}
-                kind={s.kind}
-                direction={s.direction}
-                shotId={s.id}
-                width={36}
-                onDone={() =>
-                  setShots((prev) => prev.filter((x) => x.id !== s.id))
-                }
-              />
-            ))}
-            {/* Spacer to maintain layout stability when shots appear/disappear */}
-            {shots.length === 0 ? <Box height={1} /> : null}
+            {/* No.2 - First Peer */}
+            <Box flexDirection="column" alignItems="center" minWidth={18}>
+              {peers.length >= 1 ? (
+                <>
+                  <Text color="magenta" bold>No.2 {peers[0].name}</Text>
+                  <BuddyAvatar state={peers[0].state} marginTop={0} bubbleText={peerBubbles[1] ?? null} />
+                </>
+              ) : (
+                <>
+                  <Text color="gray">No.2 (Empty)</Text>
+                  <BuddyAvatar state="OFFLINE" marginTop={0} />
+                </>
+              )}
+            </Box>
           </Box>
-        </Box>
 
-        {/* Right: Remote Users */}
-        <Box flexDirection="column" alignItems="center" minWidth={20}>
-          {peers.length === 0 ? (
-            <>
-              <Box height={4} />
-              <BuddyAvatar state="OFFLINE" marginTop={0} bubbleText={buddyBubble} />
-              <Text color="gray">Waiting...</Text>
-            </>
-          ) : (
-            <Box flexDirection="row" gap={2} flexWrap="wrap" justifyContent="center">
-              {peers.slice(0, 4).map((peer) => (
-                <Box key={peer.id} flexDirection="column" alignItems="center">
-                  <BuddyAvatar state={peer.state} marginTop={0} bubbleText={buddyBubble} />
-                  <Text color="magenta">{peer.name}</Text>
-                </Box>
-              ))}
-              {peers.length > 4 && (
-                <Text color="gray">+{peers.length - 4} more</Text>
+          {/* Row 2: User 3 and User 4 */}
+          <Box flexDirection="row" justifyContent="center" gap={4} marginTop={1}>
+            {/* No.3 - Second Peer */}
+            <Box flexDirection="column" alignItems="center" minWidth={18}>
+              {peers.length >= 2 ? (
+                <>
+                  <Text color="magenta" bold>No.3 {peers[1].name}</Text>
+                  <BuddyAvatar state={peers[1].state} marginTop={0} bubbleText={peerBubbles[2] ?? null} />
+                </>
+              ) : (
+                <>
+                  <Text color="gray">No.3 (Empty)</Text>
+                  <BuddyAvatar state="OFFLINE" marginTop={0} />
+                </>
+              )}
+            </Box>
+
+            {/* No.4 - Third Peer */}
+            <Box flexDirection="column" alignItems="center" minWidth={18}>
+              {peers.length >= 3 ? (
+                <>
+                  <Text color="magenta" bold>No.4 {peers[2].name}</Text>
+                  <BuddyAvatar state={peers[2].state} marginTop={0} bubbleText={peerBubbles[3] ?? null} />
+                </>
+              ) : (
+                <>
+                  <Text color="gray">No.4 (Empty)</Text>
+                  <BuddyAvatar state="OFFLINE" marginTop={0} />
+                </>
               )}
             </Box>
-          )}
+          </Box>
         </Box>
       </Box>
 
@@ -432,15 +486,16 @@ export function Session(
         </Box>
       ) : null}
 
-      {/* AI Console Overlay */}
+      {/* AI Console and Info Panel (side by side) */}
       {showAi ? (
         <Box
           marginTop={1}
           width="100%"
           flexDirection="row"
           justifyContent="center"
+          gap={2}
         >
-          <Box width={64}>
+          <Box width={48}>
             <AiConsole
               onClose={onCloseAi}
               onStartCountdown={startCountdown}
@@ -452,8 +507,12 @@ export function Session(
                 (props.role === "client" ? props.hostName : undefined) ??
                 "Buddy"
               }
+              peers={peers}
             />
           </Box>
+          <Box width={32}>
+            <InfoPanel records={infoRecords} maxRecords={6} />
+          </Box>
         </Box>
       ) : null}
     </Box>