@three333/termbuddy 0.1.3 → 0.1.4

package/.claude/settings.local.json

@@ -2,7 +2,9 @@
   "permissions": {
     "allow": [
       "Bash(npm run typecheck:*)",
-      "Bash(npm run:*)"
+      "Bash(npm run:*)",
+      "Bash(cat:*)",
+      "Bash(npx tsc:*)"
     ]
   }
 }

package/dist/cli.js

@@ -300,15 +300,34 @@ function createBubbleTool(options) {
     async (input) => {
       const text = String(input.text ?? "").trim();
       if (!text) return "\u6C14\u6CE1\u5185\u5BB9\u4E3A\u7A7A\u3002";
-      const target = input.target === "buddy" || input.target === "local" ? input.target : "local";
+      let target = 1;
+      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 {
+          const parsed = parseInt(t, 10);
+          if (!isNaN(parsed) && parsed >= 1 && parsed <= 4) {
+            target = parsed;
+          }
+        }
+      }
       const durationRaw = Number(input.durationMs ?? 2500);
       const durationMs = Number.isFinite(durationRaw) && durationRaw > 0 ? Math.min(15e3, Math.max(300, Math.floor(durationRaw))) : 2500;
       options.onShowBubble?.({ text, target, durationMs });
-      return `\u5DF2\u663E\u793A\u6C14\u6CE1\uFF1A${text}`;
+      return `\u5DF2\u663E\u793A\u6C14\u6CE1\u7ED9 No.${target}\uFF1A${text}`;
     },
     {
       name: "show_bubble",
-      description: "\u5728\u5C0F\u732B\u5934\u50CF\u4E0A\u663E\u793A\u4E00\u4E2A\u6C14\u6CE1\uFF08\u77ED\u6D88\u606F\u63D0\u793A\uFF09\u3002",
+      description: "\u5728\u6307\u5B9A\u7528\u6237\u7684\u5C0F\u732B\u5934\u50CF\u4E0A\u663E\u793A\u4E00\u4E2A\u6C14\u6CE1\uFF08\u77ED\u6D88\u606F\u63D0\u793A\uFF09\u3002",
       schema: {
         type: "object",
         properties: {
@@ -319,9 +338,10 @@ function createBubbleTool(options) {
             description: "\u6C14\u6CE1\u91CC\u7684\u6587\u5B57"
           },
           target: {
-            type: "string",
-            enum: ["local", "buddy"],
-            description: "\u663E\u793A\u5728\u54EA\u4E00\u4FA7\u7684\u5C0F\u732B\u4E0A\uFF08local=\u6211\uFF0Cbuddy=\u540C\u684C\uFF09"
+            type: "integer",
+            minimum: 1,
+            maximum: 4,
+            description: "\u663E\u793A\u5728\u54EA\u4E2A\u7528\u6237\u7684\u5C0F\u732B\u4E0A\uFF081=No.1/\u672C\u5730\u7528\u6237\uFF0C2=No.2\uFF0C3=No.3\uFF0C4=No.4\uFF09"
           },
           durationMs: {
             type: "integer",
@@ -477,15 +497,23 @@ function lastAiText(messages) {
   return null;
 }
 function createSystemPrompt(context) {
+  const peerList = context.peers ?? [];
+  const userList = [
+    `No.1: ${context.localName} (\u6211/\u672C\u5730\u7528\u6237)`,
+    peerList[0] ? `No.2: ${peerList[0].name}` : "No.2: (\u7A7A\u4F4D)",
+    peerList[1] ? `No.3: ${peerList[1].name}` : "No.3: (\u7A7A\u4F4D)",
+    peerList[2] ? `No.4: ${peerList[2].name}` : "No.4: (\u7A7A\u4F4D)"
+  ].join("\u3001");
   return [
-    "\u4F60\u662F TermBuddy \u91CC\u7684\u201C\u58F3\u4E2D\u5E7D\u7075 (Ghost in the Shell)\u201D\u3002",
-    "\u9ED8\u8BA4\u9690\u5F62\uFF1B\u88AB / \u5524\u9192\u65F6\u51FA\u73B0\u3002\u98CE\u683C\uFF1A\u6781\u7B80\u3001\u5E72\u7EC3\u3001\u5C11\u5E9F\u8BDD\u3002",
-    "\u4F60\u53EF\u4EE5\u4F7F\u7528\u5DE5\u5177\u6765\u64CD\u63A7\u5E94\u7528\u529F\u80FD\uFF08\u4F8B\u5982\u5012\u8BA1\u65F6\uFF09\u3002",
-    "\u5982\u679C\u7528\u6237\u63D0\u5230\u201C\u5012\u8BA1\u65F6/\u4E13\u6CE8/\u8BA1\u65F6/countdown\u201D\uFF0C\u4F18\u5148\u8C03\u7528 start_countdown\u3002",
-    "\u5982\u679C\u7528\u6237\u63D0\u5230\u201C\u6C14\u6CE1/\u6CE1\u6CE1/\u63D0\u793A/\u8BF4\u4E00\u53E5\u201D\uFF0C\u4F18\u5148\u8C03\u7528 show_bubble\u3002",
-    "\u5982\u679C\u7528\u6237\u63D0\u5230\u201C\u4E92\u52A8/\u6254/\u6295\u63B7/throw\u201D\uFF0C\u4F18\u5148\u8C03\u7528 throw_projectile\u3002",
-    "\u5F53\u7528\u6237\u660E\u786E\u8981\u6C42\u6295\u63B7 N \u6B21\u4E14 1<=N<=100 \u65F6\uFF0C\u5FC5\u987B\u6309 N \u6267\u884C\uFF1A\u91CD\u590D\u8C03\u7528 throw_projectile \u5171 N \u6B21\uFF0C\u4E0D\u8981\u6539\u6210\u201C\u793A\u610F/\u5C11\u91CF\u51E0\u6B21\u201D\u3002\u8D85\u8FC7 100 \u5219\u5206\u6279\u591A\u6B21\u8C03\u7528\u3002",
-    `\u5F53\u524D\u4E0A\u4E0B\u6587\uFF1A\u6211\u53EB ${context.localName}\uFF1B\u540C\u684C\u53EB ${context.peerName}\u3002`
+    `\u4F60\u662F TermBuddy \u91CC\u7684\u300C\u58F3\u4E2D\u5E7D\u7075 (Ghost in the Shell)\u300D\u3002`,
+    `\u9ED8\u8BA4\u9690\u5F62\uFF1B\u88AB / \u5524\u9192\u65F6\u51FA\u73B0\u3002\u98CE\u683C\uFF1A\u6781\u7B80\u3001\u5E72\u7EC3\u3001\u5C11\u5E9F\u8BDD\u3002`,
+    `\u4F60\u53EF\u4EE5\u4F7F\u7528\u5DE5\u5177\u6765\u64CD\u63A7\u5E94\u7528\u529F\u80FD\uFF08\u4F8B\u5982\u5012\u8BA1\u65F6\uFF09\u3002`,
+    `\u5982\u679C\u7528\u6237\u63D0\u5230\u300C\u5012\u8BA1\u65F6/\u4E13\u6CE8/\u8BA1\u65F6/countdown\u300D\uFF0C\u4F18\u5148\u8C03\u7528 start_countdown\u3002`,
+    `\u5982\u679C\u7528\u6237\u63D0\u5230\u300C\u6C14\u6CE1/\u6CE1\u6CE1/\u63D0\u793A/\u8BF4\u4E00\u53E5/\u548C\u67D0\u4EBA\u8BF4\u300D\uFF0C\u4F18\u5148\u8C03\u7528 show_bubble\uFF0C\u5E76\u6839\u636E\u76EE\u6807\u7528\u6237\u8BBE\u7F6E target \u53C2\u6570\uFF081-4\uFF09\u3002`,
+    `\u5982\u679C\u7528\u6237\u63D0\u5230\u300C\u4E92\u52A8/\u6254/\u6295\u63B7/throw\u300D\uFF0C\u4F18\u5148\u8C03\u7528 throw_projectile\u3002`,
+    `\u5F53\u7528\u6237\u660E\u786E\u8981\u6C42\u6295\u63B7 N \u6B21\u4E14 1<=N<=100 \u65F6\uFF0C\u5FC5\u987B\u6309 N \u6267\u884C\uFF1A\u91CD\u590D\u8C03\u7528 throw_projectile \u5171 N \u6B21\uFF0C\u4E0D\u8981\u6539\u6210\u300C\u793A\u610F/\u5C11\u91CF\u51E0\u6B21\u300D\u3002\u8D85\u8FC7 100 \u5219\u5206\u6279\u591A\u6B21\u8C03\u7528\u3002`,
+    `\u5F53\u524D\u623F\u95F4\u67094\u4E2A\u4F4D\u7F6E\uFF0C\u7528\u6237\u5217\u8868\uFF1A${userList}\u3002`,
+    `\u6211\u662F ${context.localName}\uFF08No.1\uFF09\u3002`
   ].join("\n");
 }
 function useAiAgent(options) {
@@ -547,7 +575,8 @@ function useAiAgent(options) {
         tools: [startCountdown, showBubble, interaction, sessionInfo],
         systemPrompt: createSystemPrompt({
           localName: options.localName,
-          peerName: options.peerName
+          peerName: options.peerName,
+          peers: options.peers
         }),
         name: "ghost"
       });
@@ -560,7 +589,8 @@ function useAiAgent(options) {
     options.onStartCountdown,
     options.onShowBubble,
     options.onThrowProjectile,
-    options.peerName
+    options.peerName,
+    options.peers
   ]);
   const ask = useCallback2(
     async (text) => {
@@ -829,7 +859,13 @@ function useTcpSync(options) {
       syncPeersState();
     }
   }, [broadcastPacket, syncPeersState]);
+  const MAX_PEERS = 4;
   const attachPeerSocket = useCallback3((socket) => {
+    if (peerConnectionsRef.current.size >= MAX_PEERS - 1) {
+      socket.end();
+      socket.destroy();
+      return;
+    }
     const peerId = generatePeerId();
     let buf = "";
     socket.setNoDelay(true);
@@ -1287,6 +1323,7 @@ function AiConsole(props) {
   const agent = useAiAgent({
     localName: props.localName,
     peerName: props.peerName,
+    peers: props.peers,
     onStartCountdown: props.onStartCountdown,
     onShowBubble: props.onShowBubble,
     onThrowProjectile: props.onThrowProjectile,
@@ -1712,6 +1749,75 @@ var init_StatusHeader = __esm({
   }
 });
 
+// src/components/InfoPanel.tsx
+import { Box as Box11, Text as Text11 } from "ink";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+function InfoPanel(props) {
+  const maxRecords = props.maxRecords ?? 8;
+  const displayRecords = props.records.slice(-maxRecords);
+  const formatTime = (ts) => {
+    const d = new Date(ts);
+    return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+  };
+  const getTypeIcon = (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) => {
+    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 /* @__PURE__ */ jsxs10(Box11, { flexDirection: "column", borderStyle: "round", paddingX: 1, paddingY: 0, children: [
+    /* @__PURE__ */ jsxs10(Box11, { justifyContent: "space-between", marginBottom: 0, children: [
+      /* @__PURE__ */ jsx11(Text11, { color: "yellow", children: "Info Log" }),
+      /* @__PURE__ */ jsxs10(Text11, { color: "gray", children: [
+        displayRecords.length,
+        " records"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx11(Box11, { flexDirection: "column", minHeight: 6, children: displayRecords.length === 0 ? /* @__PURE__ */ jsx11(Text11, { color: "gray", children: "No records yet..." }) : displayRecords.map((record) => /* @__PURE__ */ jsxs10(Text11, { wrap: "truncate-end", children: [
+      /* @__PURE__ */ jsxs10(Text11, { color: "gray", children: [
+        formatTime(record.timestamp),
+        " "
+      ] }),
+      /* @__PURE__ */ jsxs10(Text11, { color: getTypeColor(record.type), children: [
+        getTypeIcon(record.type),
+        " "
+      ] }),
+      /* @__PURE__ */ jsx11(Text11, { children: record.content })
+    ] }, record.id)) })
+  ] });
+}
+var init_InfoPanel = __esm({
+  "src/components/InfoPanel.tsx"() {
+    "use strict";
+  }
+});
+
 // src/components/index.ts
 var init_components = __esm({
   "src/components/index.ts"() {
@@ -1721,13 +1827,14 @@ var init_components = __esm({
     init_CountdownClockSprite();
     init_ProjectileThrowSprite();
     init_StatusHeader();
+    init_InfoPanel();
   }
 });
 
 // src/page/Session.tsx
 import { useCallback as useCallback4, useEffect as useEffect8, useMemo as useMemo8, useRef as useRef4, useState as useState8 } from "react";
-import { Box as Box11, Text as Text11, useInput as useInput7 } from "ink";
-import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Box as Box12, Text as Text12, useInput as useInput7 } from "ink";
+import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function formatMMSS(totalSeconds) {
   const m = Math.floor(totalSeconds / 60);
   const s = totalSeconds % 60;
@@ -1741,9 +1848,19 @@ function Session(props) {
   const [showAi, setShowAi] = useState8(false);
   const [countdown, setCountdown] = useState8(null);
   const [shots, setShots] = useState8([]);
-  const [localBubble, setLocalBubble] = useState8(null);
-  const [buddyBubble, setBuddyBubble] = useState8(null);
-  const bubbleTimersRef = useRef4({ local: null, buddy: null });
+  const [peerBubbles, setPeerBubbles] = useState8([null, null, null, null]);
+  const bubbleTimersRef = useRef4([null, null, null, null]);
+  const [infoRecords, setInfoRecords] = useState8([]);
+  const nextRecordIdRef = useRef4(1);
+  const addInfoRecord = useCallback4((type, content) => {
+    const record = {
+      id: nextRecordIdRef.current++,
+      timestamp: Date.now(),
+      type,
+      content
+    };
+    setInfoRecords((prev) => [...prev, record]);
+  }, []);
   const tcpOptions = useMemo8(() => {
     return props.role === "host" ? { role: "host", localName: props.localName } : {
       role: "client",
@@ -1772,6 +1889,23 @@ function Session(props) {
   const localActivity = useActivityMonitor();
   const peers = tcp.peers;
   const firstPeerName = peers.length > 0 ? peers[0].name : void 0;
+  const prevPeersRef = useRef4([]);
+  useEffect8(() => {
+    const prevPeers = prevPeersRef.current;
+    const prevNames = new Set(prevPeers.map((p) => p.name));
+    const currentNames = new Set(peers.map((p) => p.name));
+    peers.forEach((p) => {
+      if (!prevNames.has(p.name)) {
+        addInfoRecord("join", `${p.name} joined`);
+      }
+    });
+    prevPeers.forEach((p) => {
+      if (!currentNames.has(p.name)) {
+        addInfoRecord("leave", `${p.name} left`);
+      }
+    });
+    prevPeersRef.current = [...peers];
+  }, [peers, addInfoRecord]);
   const onToggleAi = useCallback4(() => setShowAi((v) => !v), []);
   const onCloseAi = useCallback4(() => setShowAi(false), []);
   const sessionStartAtRef = useRef4(Date.now());
@@ -1846,7 +1980,8 @@ function Session(props) {
       remainingSeconds: totalSeconds,
       type
     });
-  }, []);
+    addInfoRecord("countdown", `Started ${minutes}min countdown`);
+  }, [addInfoRecord]);
   const nextShotIdRef = useRef4(1);
   const shotQueueRef = useRef4([]);
   const pumpShotQueue = useCallback4(() => {
@@ -1866,27 +2001,35 @@ function Session(props) {
       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 = useCallback4(
     (args) => {
       const text = args.text.trim();
       if (!text) return;
       const durationMs = Math.max(300, Math.min(15e3, Math.floor(args.durationMs)));
-      const setBubble = args.target === "buddy" ? setBuddyBubble : setLocalBubble;
-      setBubble(text);
-      const prevTimer = args.target === "buddy" ? bubbleTimersRef.current.buddy : bubbleTimersRef.current.local;
+      const targetIndex = Math.max(0, Math.min(3, args.target - 1));
+      setPeerBubbles((prev) => {
+        const next = [...prev];
+        next[targetIndex] = text;
+        return next;
+      });
+      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]
   );
   useInput7(
     (input, key) => {
@@ -1932,12 +2075,13 @@ function Session(props) {
   }, [countdown?.endsAt]);
   useEffect8(() => {
     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);
+      });
     };
   }, []);
-  return /* @__PURE__ */ jsxs10(Box11, { flexDirection: "column", padding: 1, children: [
-    /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs11(Box12, { flexDirection: "column", padding: 1, children: [
+    /* @__PURE__ */ jsx12(
       StatusHeader,
       {
         role: props.role,
@@ -1947,108 +2091,118 @@ function Session(props) {
         peerCount: peers.length
       }
     ),
-    /* @__PURE__ */ jsxs10(
-      Box11,
-      {
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "space-between",
-        marginTop: 1,
-        gap: 2,
-        children: [
-          /* @__PURE__ */ jsxs10(Box11, { flexDirection: "column", alignItems: "center", minWidth: 20, children: [
-            countdown ? /* @__PURE__ */ jsxs10(Box11, { flexDirection: "column", alignItems: "center", marginBottom: 0, children: [
-              /* @__PURE__ */ jsx11(Text11, { color: "gray", children: formatMMSS(countdown.remainingSeconds) }),
-              /* @__PURE__ */ jsx11(
-                CountdownClockSprite,
-                {
-                  variant: "COMPACT",
-                  type: countdown.type,
-                  minutes: countdown.minutes,
-                  totalSeconds: countdown.totalSeconds,
-                  remainingSeconds: countdown.remainingSeconds,
-                  showLabel: false
-                }
-              )
-            ] }) : /* @__PURE__ */ jsx11(Box11, { height: 4 }),
-            /* @__PURE__ */ jsx11(BuddyAvatar, { state: localState, marginTop: 0, bubbleText: localBubble }),
-            /* @__PURE__ */ jsx11(Text11, { color: "cyan", children: localLabel })
+    /* @__PURE__ */ jsxs11(Box12, { flexDirection: "column", marginTop: 1, children: [
+      /* @__PURE__ */ jsxs11(Box12, { flexDirection: "column", width: "100%", alignItems: "center", marginBottom: 1, children: [
+        shots.map((s) => /* @__PURE__ */ jsx12(
+          ProjectileThrowSprite,
+          {
+            kind: s.kind,
+            direction: s.direction,
+            shotId: s.id,
+            width: 50,
+            onDone: () => setShots((prev) => prev.filter((x) => x.id !== s.id))
+          },
+          String(s.id)
+        )),
+        shots.length === 0 ? /* @__PURE__ */ jsx12(Box12, { height: 1 }) : null
+      ] }),
+      countdown ? /* @__PURE__ */ jsx12(Box12, { justifyContent: "center", marginBottom: 1, children: /* @__PURE__ */ jsxs11(Box12, { flexDirection: "column", alignItems: "center", children: [
+        /* @__PURE__ */ jsx12(Text12, { color: "gray", children: formatMMSS(countdown.remainingSeconds) }),
+        /* @__PURE__ */ jsx12(
+          CountdownClockSprite,
+          {
+            variant: "COMPACT",
+            type: countdown.type,
+            minutes: countdown.minutes,
+            totalSeconds: countdown.totalSeconds,
+            remainingSeconds: countdown.remainingSeconds,
+            showLabel: false
+          }
+        )
+      ] }) }) : null,
+      /* @__PURE__ */ jsxs11(Box12, { flexDirection: "column", alignItems: "center", children: [
+        /* @__PURE__ */ jsxs11(Box12, { flexDirection: "row", justifyContent: "center", gap: 4, children: [
+          /* @__PURE__ */ jsxs11(Box12, { flexDirection: "column", alignItems: "center", minWidth: 18, children: [
+            /* @__PURE__ */ jsxs11(Text12, { color: "cyan", bold: true, children: [
+              "No.1 ",
+              props.localName
+            ] }),
+            /* @__PURE__ */ jsx12(BuddyAvatar, { state: localState, marginTop: 0, bubbleText: peerBubbles[0] ?? null })
           ] }),
-          /* @__PURE__ */ jsx11(
-            Box11,
-            {
-              flexDirection: "column",
-              alignItems: "center",
-              flexGrow: 1,
-              minWidth: 40,
-              children: /* @__PURE__ */ jsxs10(Box11, { flexDirection: "column", width: "100%", alignItems: "center", children: [
-                shots.map((s) => /* @__PURE__ */ jsx11(
-                  ProjectileThrowSprite,
-                  {
-                    kind: s.kind,
-                    direction: s.direction,
-                    shotId: s.id,
-                    width: 36,
-                    onDone: () => setShots((prev) => prev.filter((x) => x.id !== s.id))
-                  },
-                  String(s.id)
-                )),
-                shots.length === 0 ? /* @__PURE__ */ jsx11(Box11, { height: 1 }) : null
-              ] })
-            }
-          ),
-          /* @__PURE__ */ jsx11(Box11, { flexDirection: "column", alignItems: "center", minWidth: 20, children: peers.length === 0 ? /* @__PURE__ */ jsxs10(Fragment2, { children: [
-            /* @__PURE__ */ jsx11(Box11, { height: 4 }),
-            /* @__PURE__ */ jsx11(BuddyAvatar, { state: "OFFLINE", marginTop: 0, bubbleText: buddyBubble }),
-            /* @__PURE__ */ jsx11(Text11, { color: "gray", children: "Waiting..." })
-          ] }) : /* @__PURE__ */ jsxs10(Box11, { flexDirection: "row", gap: 2, flexWrap: "wrap", justifyContent: "center", children: [
-            peers.slice(0, 4).map((peer) => /* @__PURE__ */ jsxs10(Box11, { flexDirection: "column", alignItems: "center", children: [
-              /* @__PURE__ */ jsx11(BuddyAvatar, { state: peer.state, marginTop: 0, bubbleText: buddyBubble }),
-              /* @__PURE__ */ jsx11(Text11, { color: "magenta", children: peer.name })
-            ] }, peer.id)),
-            peers.length > 4 && /* @__PURE__ */ jsxs10(Text11, { color: "gray", children: [
-              "+",
-              peers.length - 4,
-              " more"
-            ] })
+          /* @__PURE__ */ jsx12(Box12, { flexDirection: "column", alignItems: "center", minWidth: 18, children: peers.length >= 1 ? /* @__PURE__ */ jsxs11(Fragment2, { children: [
+            /* @__PURE__ */ jsxs11(Text12, { color: "magenta", bold: true, children: [
+              "No.2 ",
+              peers[0].name
+            ] }),
+            /* @__PURE__ */ jsx12(BuddyAvatar, { state: peers[0].state, marginTop: 0, bubbleText: peerBubbles[1] ?? null })
+          ] }) : /* @__PURE__ */ jsxs11(Fragment2, { children: [
+            /* @__PURE__ */ jsx12(Text12, { color: "gray", children: "No.2 (Empty)" }),
+            /* @__PURE__ */ jsx12(BuddyAvatar, { state: "OFFLINE", marginTop: 0 })
           ] }) })
-        ]
-      }
-    ),
-    !showAi ? /* @__PURE__ */ jsx11(Box11, { marginTop: 1, justifyContent: "center", children: /* @__PURE__ */ jsxs10(Text11, { color: "gray", children: [
+        ] }),
+        /* @__PURE__ */ jsxs11(Box12, { flexDirection: "row", justifyContent: "center", gap: 4, marginTop: 1, children: [
+          /* @__PURE__ */ jsx12(Box12, { flexDirection: "column", alignItems: "center", minWidth: 18, children: peers.length >= 2 ? /* @__PURE__ */ jsxs11(Fragment2, { children: [
+            /* @__PURE__ */ jsxs11(Text12, { color: "magenta", bold: true, children: [
+              "No.3 ",
+              peers[1].name
+            ] }),
+            /* @__PURE__ */ jsx12(BuddyAvatar, { state: peers[1].state, marginTop: 0, bubbleText: peerBubbles[2] ?? null })
+          ] }) : /* @__PURE__ */ jsxs11(Fragment2, { children: [
+            /* @__PURE__ */ jsx12(Text12, { color: "gray", children: "No.3 (Empty)" }),
+            /* @__PURE__ */ jsx12(BuddyAvatar, { state: "OFFLINE", marginTop: 0 })
+          ] }) }),
+          /* @__PURE__ */ jsx12(Box12, { flexDirection: "column", alignItems: "center", minWidth: 18, children: peers.length >= 3 ? /* @__PURE__ */ jsxs11(Fragment2, { children: [
+            /* @__PURE__ */ jsxs11(Text12, { color: "magenta", bold: true, children: [
+              "No.4 ",
+              peers[2].name
+            ] }),
+            /* @__PURE__ */ jsx12(BuddyAvatar, { state: peers[2].state, marginTop: 0, bubbleText: peerBubbles[3] ?? null })
+          ] }) : /* @__PURE__ */ jsxs11(Fragment2, { children: [
+            /* @__PURE__ */ jsx12(Text12, { color: "gray", children: "No.4 (Empty)" }),
+            /* @__PURE__ */ jsx12(BuddyAvatar, { state: "OFFLINE", marginTop: 0 })
+          ] }) })
+        ] })
+      ] })
+    ] }),
+    !showAi ? /* @__PURE__ */ jsx12(Box12, { marginTop: 1, justifyContent: "center", children: /* @__PURE__ */ jsxs11(Text12, { color: "gray", children: [
       "\u6309 ",
-      /* @__PURE__ */ jsx11(Text11, { color: "cyan", children: "/" }),
+      /* @__PURE__ */ jsx12(Text12, { color: "cyan", children: "/" }),
       " \u53EC\u5524 AI Console\uFF0C\u6309",
       " ",
-      /* @__PURE__ */ jsx11(Text11, { color: "cyan", children: "q" }),
+      /* @__PURE__ */ jsx12(Text12, { color: "cyan", children: "q" }),
       " \u7ED3\u675F\u672C\u6B21\u966A\u4F34\u3002",
-      countdown ? /* @__PURE__ */ jsxs10(Fragment2, { children: [
+      countdown ? /* @__PURE__ */ jsxs11(Fragment2, { children: [
         " ",
-        /* @__PURE__ */ jsxs10(Text11, { color: "gray", children: [
+        /* @__PURE__ */ jsxs11(Text12, { color: "gray", children: [
           "(\u5012\u8BA1\u65F6\u4E2D\uFF1A\u6309 ",
-          /* @__PURE__ */ jsx11(Text11, { color: "cyan", children: "x" }),
+          /* @__PURE__ */ jsx12(Text12, { color: "cyan", children: "x" }),
           " \u53D6\u6D88)"
         ] })
       ] }) : null
     ] }) }) : null,
-    showAi ? /* @__PURE__ */ jsx11(
-      Box11,
+    showAi ? /* @__PURE__ */ jsxs11(
+      Box12,
       {
         marginTop: 1,
         width: "100%",
         flexDirection: "row",
         justifyContent: "center",
-        children: /* @__PURE__ */ jsx11(Box11, { width: 64, children: /* @__PURE__ */ jsx11(
-          AiConsole,
-          {
-            onClose: onCloseAi,
-            onStartCountdown: startCountdown,
-            onShowBubble: showBubble,
-            onThrowProjectile: throwProjectile,
-            localName: props.localName,
-            peerName: firstPeerName ?? (props.role === "client" ? props.hostName : void 0) ?? "Buddy"
-          }
-        ) })
+        gap: 2,
+        children: [
+          /* @__PURE__ */ jsx12(Box12, { width: 48, children: /* @__PURE__ */ jsx12(
+            AiConsole,
+            {
+              onClose: onCloseAi,
+              onStartCountdown: startCountdown,
+              onShowBubble: showBubble,
+              onThrowProjectile: throwProjectile,
+              localName: props.localName,
+              peerName: firstPeerName ?? (props.role === "client" ? props.hostName : void 0) ?? "Buddy",
+              peers
+            }
+          ) }),
+          /* @__PURE__ */ jsx12(Box12, { width: 32, children: /* @__PURE__ */ jsx12(InfoPanel, { records: infoRecords, maxRecords: 6 }) })
+        ]
       }
     ) : null
   ] });
@@ -2078,7 +2232,7 @@ var init_page = __esm({
 import { useCallback as useCallback5, useMemo as useMemo9, useState as useState9 } from "react";
 import os3 from "os";
 import { useApp } from "ink";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function App() {
   const { exit } = useApp();
   const [view, setView] = useState9({ name: "NICKNAME" });
@@ -2086,7 +2240,7 @@ function App() {
   const localName = useMemo9(() => nickname ?? os3.hostname(), [nickname]);
   const goMenu = useCallback5(() => setView({ name: "MENU" }), []);
   if (view.name === "NICKNAME") {
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       NicknamePrompt,
       {
         onExit: () => exit(),
@@ -2098,7 +2252,7 @@ function App() {
     );
   }
   if (view.name === "MENU") {
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       MainMenu,
       {
         onHost: () => setView({ name: "SESSION", role: "host" }),
@@ -2108,10 +2262,10 @@ function App() {
     );
   }
   if (view.name === "LEAVE") {
-    return /* @__PURE__ */ jsx12(LeavePage, { stats: view.stats, onBack: goMenu, onExit: () => exit() });
+    return /* @__PURE__ */ jsx13(LeavePage, { stats: view.stats, onBack: goMenu, onExit: () => exit() });
   }
   if (view.name === "SCANNING") {
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       RoomScanner,
       {
         onBack: goMenu,
@@ -2128,7 +2282,7 @@ function App() {
     );
   }
   if (view.name === "SESSION" && view.role === "host") {
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       Session,
       {
         localName,
@@ -2137,7 +2291,7 @@ function App() {
       }
     );
   }
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     Session,
     {
       localName,