ephem-cli 0.1.0

package/integration-test.mjs

@@ -0,0 +1,226 @@
+// 集成测试：建房 → 双端 WS 连接 → 加密收发 → peer 事件 → 错误房间码。
+// 运行：NODE_PATH 指向 cli 的 node_modules（需要 ws）
+
+import { WebSocket } from "ws";
+import {
+  createCipheriv,
+  createDecipheriv,
+  randomBytes,
+  hkdfSync,
+} from "node:crypto";
+
+const HTTP = "http://127.0.0.1:8787";
+const WS_BASE = "ws://127.0.0.1:8787";
+const ADMIN_KEY = "change-me-in-production";
+
+const SALT = "ephem-v1-room-salt";
+const INFO = "ephem-room-encryption-key";
+const TAG_LEN = 16;
+
+let pass = 0;
+let fail = 0;
+function assert(cond, msg) {
+  if (cond) {
+    pass++;
+    console.log(`  ✓ ${msg}`);
+  } else {
+    fail++;
+    console.log(`  ✗ ${msg}`);
+  }
+}
+
+function deriveKey(code) {
+  return Buffer.from(
+    hkdfSync("sha256", Buffer.from(code), Buffer.from(SALT), Buffer.from(INFO), 32),
+  );
+}
+function encrypt(key, pt) {
+  const nonce = randomBytes(12);
+  const c = createCipheriv("aes-256-gcm", key, nonce);
+  const enc = Buffer.concat([c.update(pt, "utf8"), c.final()]);
+  return {
+    ciphertext: Buffer.concat([enc, c.getAuthTag()]).toString("base64"),
+    nonce: nonce.toString("base64"),
+  };
+}
+function decrypt(key, p) {
+  const combined = Buffer.from(p.ciphertext, "base64");
+  const nonce = Buffer.from(p.nonce, "base64");
+  const tag = combined.subarray(combined.length - TAG_LEN);
+  const enc = combined.subarray(0, combined.length - TAG_LEN);
+  const d = createDecipheriv("aes-256-gcm", key, nonce);
+  d.setAuthTag(tag);
+  return Buffer.concat([d.update(enc), d.final()]).toString("utf8");
+}
+
+function once(ws, type) {
+  return new Promise((resolve) => {
+    const handler = (raw) => {
+      const msg = JSON.parse(raw.toString());
+      if (msg.type === type) {
+        ws.off("message", handler);
+        resolve(msg);
+      }
+    };
+    ws.on("message", handler);
+  });
+}
+
+function connect(username, code) {
+  const ws = new WebSocket(
+    `${WS_BASE}/room/${code}?username=${encodeURIComponent(username)}`,
+  );
+  ws.on("open", () => console.log(`    [${username} open]`));
+  ws.on("message", (raw) =>
+    console.log(`    [${username} msg]`, raw.toString().slice(0, 60)),
+  );
+  ws.on("error", (e) => console.log(`    [${username} error]`, e.message));
+  ws.on("close", (code, reason) =>
+    console.log(`    [${username} close]`, code, reason.toString()),
+  );
+  ws.on("unexpected-response", (_req, res) =>
+    console.log(`    [${username} unexpected-response]`, res.statusCode),
+  );
+  return ws;
+}
+
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+// 全局兜底：防止未捕获的 rejection 让进程悄悄退出
+process.on("unhandledRejection", (e) => {
+  console.log("    [unhandledRejection]", e?.message ?? e);
+});
+process.on("uncaughtException", (e) => {
+  console.log("    [uncaughtException]", e?.message ?? e);
+});
+
+async function main() {
+  // ── 建房 ──────────────────────────────
+  console.log("\n[1] 创建房间");
+  const r = await fetch(`${HTTP}/api/rooms`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json", "X-Admin-Key": ADMIN_KEY },
+    body: JSON.stringify({ maxMembers: 3, ttlSeconds: 600 }),
+  });
+  const room = await r.json();
+  assert(r.status === 200 && !!room.roomCode, `房间已创建：${room.roomCode}`);
+  const key = deriveKey(room.roomCode);
+
+  // ── 状态查询（需鉴权）────────────────
+  console.log("\n[2] 状态查询");
+  const s1 = await fetch(
+    `${HTTP}/api/rooms/${encodeURIComponent(room.roomCode)}/status`,
+    { headers: { "X-Admin-Key": ADMIN_KEY } },
+  );
+  const sj = await s1.json();
+  assert(s1.status === 200 && sj.alive === true, `状态正常：${sj.currentMembers}/${sj.maxMembers}`);
+
+  const sNoAuth = await fetch(
+    `${HTTP}/api/rooms/${encodeURIComponent(room.roomCode)}/status`,
+  );
+  assert(sNoAuth.status === 401, "无鉴权查询状态 → 401");
+
+  // ── 双端连接 ──────────────────────────
+  console.log("\n[3] 双端连接");
+  const a = connect("alice", room.roomCode);
+  const aJoined = await once(a, "joined");
+  assert(aJoined.payload.username === "alice", "alice 收到 joined");
+  assert(aJoined.payload.maxMembers === 3, "joined 携带 maxMembers=3");
+
+  const b = connect("bob", room.roomCode);
+  const bJoined = await once(b, "joined");
+  const aPeer = await once(a, "peer_joined");
+  assert(bJoined.payload.username === "bob", "bob 收到 joined");
+  assert(aPeer.payload.username === "bob", "alice 收到 bob 的 peer_joined");
+
+  // ── 加密收发 ──────────────────────────
+  console.log("\n[4] 端到端加密收发");
+  const msgA = "你好 bob，我是 alice 🐰";
+  a.send(JSON.stringify({ type: "message", payload: encrypt(key, msgA) }));
+  const bRecv = await once(b, "message");
+  assert(bRecv.payload.from === "alice", "bob 收到 alice 的消息");
+  assert(decrypt(key, bRecv.payload) === msgA, `bob 解密成功：${decrypt(key, bRecv.payload)}`);
+
+  const msgB = "收到！加密真好用 🔐";
+  b.send(JSON.stringify({ type: "message", payload: encrypt(key, msgB) }));
+  const aRecv = await once(a, "message");
+  assert(aRecv.payload.from === "bob", "alice 收到 bob 的消息");
+  assert(decrypt(key, aRecv.payload) === msgB, `alice 解密成功：${decrypt(key, aRecv.payload)}`);
+
+  // ── 后端只看到密文（密文 base64 解码后不含明文）──
+  console.log("\n[5] 后端零知识验证");
+  const cipherText = bRecv.payload.ciphertext;
+  assert(!cipherText.includes("你好"), "密文中不含明文（base64 也搜不到）");
+
+  // ── peer_left ─────────────────────────
+  console.log("\n[6] 成员离开");
+  const aPeerLeft = once(a, "peer_left");
+  b.close();
+  const left = await aPeerLeft;
+  assert(left.payload.username === "bob", "alice 收到 bob 的 peer_left");
+
+  // ── 错误房间码 ────────────────────────
+  console.log("\n[7] 错误房间码");
+  const bad = connect("eve", "wrong-word-here");
+  const badResult = await new Promise((resolve) => {
+    bad.on("unexpected-response", (_req, res) => {
+      let body = "";
+      res.on("data", (c) => (body += c));
+      res.on("end", () => resolve({ status: res.statusCode, body }));
+    });
+    bad.on("error", (e) => resolve({ error: e.message }));
+  });
+  assert(badResult.status === 404, `错误房间码 → 404（${badResult.body}）`);
+
+  // ── 人数上限 ──────────────────────────
+  console.log("\n[8] 人数上限");
+  const r2 = await fetch(`${HTTP}/api/rooms`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json", "X-Admin-Key": ADMIN_KEY },
+    body: JSON.stringify({ maxMembers: 2, ttlSeconds: 600 }),
+  });
+  const room2 = await r2.json();
+  const c1 = connect("u1", room2.roomCode);
+  await once(c1, "joined");
+  const c2 = connect("u2", room2.roomCode);
+  await once(c2, "joined");
+  const c3 = connect("u3", room2.roomCode);
+  const fullResult = await new Promise((resolve) => {
+    c3.on("unexpected-response", (_req, res) => {
+      let body = "";
+      res.on("data", (ck) => (body += ck));
+      res.on("end", () => resolve({ status: res.statusCode, body }));
+    });
+  });
+  assert(fullResult.status === 403, `第三个人被拒 → 403（${fullResult.body}）`);
+  c1.close();
+  c2.close();
+  c3.close();
+
+  // ── 手动销毁 ──────────────────────────
+  console.log("\n[9] 手动销毁房间");
+  const d = await fetch(`${HTTP}/api/rooms/${encodeURIComponent(room2.roomCode)}`, {
+    method: "DELETE",
+    headers: { "X-Admin-Key": ADMIN_KEY },
+  });
+  const dj = await d.json();
+  assert(d.status === 200 && dj.success === true, "销毁成功");
+  const afterDel = connect("late", room2.roomCode);
+  const afterResult = await new Promise((resolve) => {
+    afterDel.on("unexpected-response", (_req, res) => {
+      let body = "";
+      res.on("data", (ck) => (body += ck));
+      res.on("end", () => resolve({ status: res.statusCode, body }));
+    });
+  });
+  assert(afterResult.status === 404, `销毁后连接 → 404`);
+
+  a.close();
+  console.log(`\n──────────────\n结果：${pass} 通过 / ${fail} 失败`);
+  process.exit(fail > 0 ? 1 : 0);
+}
+
+main().catch((e) => {
+  console.error("测试异常：", e);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "ephem-cli",
+  "version": "0.1.0",
+  "description": "临时、端到端加密的命令行聊天室 CLI",
+  "type": "module",
+  "bin": {
+    "ephem": "./dist/index.js"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "start": "node dist/index.js"
+  },
+  "dependencies": {
+    "commander": "^12.0.0",
+    "ink": "^5.0.0",
+    "ink-text-input": "^6.0.0",
+    "react": "^18.0.0",
+    "ws": "^8.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.0.0",
+    "@types/ws": "^8.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/crypto/cipher.ts

@@ -0,0 +1,43 @@
+// AES-256-GCM 加解密封装。
+// 约定：每条消息用独立随机 12 字节 nonce；认证标签 (authTag, 16 字节) 拼在密文末尾。
+// 密文与 nonce 都用 base64 编码传输（JSON 友好）。
+// 后端只原样转发 { ciphertext, nonce }，不解密、不校验。
+
+import { createCipheriv, createDecipheriv, randomBytes } from "node:crypto";
+
+const ALGO = "aes-256-gcm";
+const NONCE_LEN = 12;
+const TAG_LEN = 16;
+
+export interface EncryptedPayload {
+  ciphertext: string; // base64(密文 + authTag)
+  nonce: string; // base64(12 字节 nonce)
+}
+
+/** 加密一条文本消息。 */
+export function encrypt(key: Buffer, plaintext: string): EncryptedPayload {
+  const nonce = randomBytes(NONCE_LEN);
+  const cipher = createCipheriv(ALGO, key, nonce);
+  const enc = Buffer.concat([cipher.update(plaintext, "utf8"), cipher.final()]);
+  const tag = cipher.getAuthTag();
+  const combined = Buffer.concat([enc, tag]); // authTag 拼在末尾
+  return {
+    ciphertext: combined.toString("base64"),
+    nonce: nonce.toString("base64"),
+  };
+}
+
+/** 解密一条消息。认证失败会抛错（说明密钥不对或密文被篡改）。 */
+export function decrypt(key: Buffer, payload: EncryptedPayload): string {
+  const combined = Buffer.from(payload.ciphertext, "base64");
+  const nonce = Buffer.from(payload.nonce, "base64");
+  if (combined.length < TAG_LEN + 1) {
+    throw new Error("密文长度异常");
+  }
+  const tag = combined.subarray(combined.length - TAG_LEN);
+  const enc = combined.subarray(0, combined.length - TAG_LEN);
+  const decipher = createDecipheriv(ALGO, key, nonce);
+  decipher.setAuthTag(tag);
+  const dec = Buffer.concat([decipher.update(enc), decipher.final()]);
+  return dec.toString("utf8");
+}

package/src/crypto/deriveKey.ts

@@ -0,0 +1,21 @@
+// 从房间码派生对称密钥：HKDF(SHA-256) → 32 字节 AES-256-GCM 密钥。
+// 全程在客户端本地完成，房间码本身不因此通过网络发给后端。
+//
+// 设计说明：这是"共享密码派生密钥"模式（PAKE 的简化版）。房间码同时承担
+// 路由标识和密钥种子双重职责。攻击者要验证猜测必须先连上对应房间码的 WS
+// 端点，而后端对单房间码连接尝试做了限流。
+
+import { hkdfSync } from "node:crypto";
+
+const SALT = "ephem-v1-room-salt";
+const INFO = "ephem-room-encryption-key";
+const KEY_LEN = 32; // AES-256
+
+/** 从房间码派生房间加密密钥（32 字节）。 */
+export function deriveRoomKey(roomCode: string): Buffer {
+  const ikm = Buffer.from(roomCode, "utf8");
+  const salt = Buffer.from(SALT, "utf8");
+  const info = Buffer.from(INFO, "utf8");
+  // hkdfSync 在 Node 18+ 返回 Buffer
+  return Buffer.from(hkdfSync("sha256", ikm, salt, info, KEY_LEN));
+}

package/src/index.ts

@@ -0,0 +1,37 @@
+// ephem-cli 入口：解析命令行参数，未提供的走交互式问答。
+
+import React from "react";
+import { render } from "ink";
+import { Command } from "commander";
+import { App } from "./ui/App.js";
+
+const program = new Command();
+
+program
+  .name("ephem")
+  .description("临时、端到端加密的命令行聊天室")
+  .option("-s, --server <url>", "后端地址（也可用 EPHEM_SERVER 环境变量）")
+  .option("-r, --room <code>", "房间码，例如 correct-horse-battery")
+  .option("-u, --username <name>", "用户名")
+  .helpOption("-h, --help", "查看帮助")
+  .action((opts) => {
+    const defaults = {
+      server: opts.server ?? process.env.EPHEM_SERVER,
+      room: opts.room,
+      username: opts.username,
+    };
+
+    // 安全提醒：命令行参数传房间码会被记录到 shell history，优先用交互式输入。
+    if (opts.room) {
+      process.stderr.write(
+        "⚠ 提示：通过 --room 传入的房间码可能被记录到 shell 历史，建议优先交互式输入。\n",
+      );
+    }
+
+    const instance = render(React.createElement(App, { defaults }));
+    instance.waitUntilExit()
+      .then(() => process.exit(0))
+      .catch(() => process.exit(1));
+  });
+
+program.parse(process.argv);

package/src/ui/App.tsx

@@ -0,0 +1,129 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Box, Text, useApp, useInput } from "ink";
+import { SetupWizard, type ConnectConfig } from "./SetupWizard.js";
+import { ChatRoom } from "./ChatRoom.js";
+import { RoomClient, type JoinedInfo } from "../ws/client.js";
+
+interface Props {
+  defaults: { server?: string; room?: string; username?: string };
+}
+
+type Phase = "setup" | "connecting" | "chat" | "error";
+
+export function App({ defaults }: Props) {
+  const { exit } = useApp();
+  const skipSetup = Boolean(defaults.server && defaults.room && defaults.username);
+  const [phase, setPhase] = useState<Phase>(skipSetup ? "connecting" : "setup");
+  const [client, setClient] = useState<RoomClient | null>(null);
+  const [joined, setJoined] = useState<JoinedInfo | null>(null);
+  const [error, setError] = useState<{ code: string; message: string } | null>(null);
+  const cfgRef = useRef<ConnectConfig | null>(
+    skipSetup
+      ? { server: defaults.server!, room: defaults.room!, username: defaults.username! }
+      : null,
+  );
+
+  const connect = useCallback((config: ConnectConfig) => {
+    cfgRef.current = config;
+    const c = new RoomClient(config.server, config.room, config.username);
+    setClient(c);
+    setPhase("connecting");
+    setError(null);
+    setJoined(null);
+
+    c.on("joined", (info: JoinedInfo) => {
+      setJoined(info);
+      setPhase("chat");
+    });
+    c.on("server_error", (info: { code: string; message: string }) => {
+      setError(info);
+      setPhase("error");
+    });
+    // 连接彻底关闭时，若仍处于 connecting 则视为失败
+    c.on("closed", () => {
+      setPhase((p) => (p === "connecting" ? "error" : p));
+    });
+    c.connect();
+  }, []);
+
+  // 命令行参数齐全时直接连接
+  useEffect(() => {
+    if (skipSetup && cfgRef.current) connect(cfgRef.current);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // 退出清理
+  useEffect(() => () => client?.close(), [client]);
+
+  const handleRetry = useCallback(() => {
+    client?.close();
+    setClient(null);
+    setJoined(null);
+    setError(null);
+    setPhase("setup");
+  }, [client]);
+
+  if (phase === "setup") {
+    return <SetupWizard defaults={defaults} onComplete={connect} />;
+  }
+
+  if (phase === "connecting") {
+    return (
+      <Box flexDirection="column" gap={1}>
+        <Text color="cyan">正在连接…</Text>
+        <Text color="gray">服务器：{cfgRef.current?.server}</Text>
+        <Text color="gray">房间：{cfgRef.current?.room}</Text>
+      </Box>
+    );
+  }
+
+  if (phase === "error") {
+    return (
+      <ErrorScreen
+        message={error?.message ?? "未知错误"}
+        code={error?.code ?? "unknown"}
+        onRetry={handleRetry}
+        onExit={() => exit()}
+      />
+    );
+  }
+
+  // chat
+  if (!client || !joined || !cfgRef.current) return null;
+  return (
+    <ChatRoom
+      client={client}
+      roomCode={cfgRef.current.room}
+      username={cfgRef.current.username}
+      joined={joined}
+      onExit={() => exit()}
+    />
+  );
+}
+
+function ErrorScreen({
+  message,
+  code,
+  onRetry,
+  onExit,
+}: {
+  message: string;
+  code: string;
+  onRetry: () => void;
+  onExit: () => void;
+}) {
+  useInput((input, key) => {
+    if (key.return) onRetry();
+  });
+  return (
+    <Box flexDirection="column" gap={1}>
+      <Text color="red" bold>
+        连接失败
+      </Text>
+      <Text color="gray">
+        {message}（{code}）
+      </Text>
+      <Text color="gray">按回车返回设置重试，Ctrl+C 退出</Text>
+    </Box>
+  );
+}

package/src/ui/ChatRoom.tsx

@@ -0,0 +1,194 @@
+import React, { useEffect, useReducer, useRef, useState } from "react";
+import { Box, Text, useApp, useStdout } from "ink";
+import TextInput from "ink-text-input";
+import type { RoomClient, JoinedInfo, ChatMessage } from "../ws/client.js";
+import { deriveRoomKey } from "../crypto/deriveKey.js";
+import { encrypt, decrypt } from "../crypto/cipher.js";
+
+interface Props {
+  client: RoomClient;
+  roomCode: string;
+  username: string;
+  joined: JoinedInfo;
+  onExit: () => void;
+}
+
+type Line =
+  | { id: number; kind: "system"; text: string }
+  | { id: number; kind: "msg"; from: string; text: string; self: boolean; time: string };
+
+let lineId = 0;
+
+export function ChatRoom({ client, roomCode, username, joined, onExit }: Props) {
+  const { exit } = useApp();
+  const { stdout } = useStdout();
+  const roomKey = useRef(deriveRoomKey(roomCode));
+
+  const [lines, dispatch] = useReducer(
+    (state: Line[], action: { type: "add"; line: Line } | { type: "clear" }) => {
+      if (action.type === "clear") return [];
+      return [...state, action.line].slice(-500);
+    },
+    [],
+  );
+  const [input, setInput] = useState("");
+  const [members, setMembers] = useState(joined.currentMembers);
+  const [maxMembers] = useState(joined.maxMembers);
+  const [expiresAt] = useState(joined.expiresAt);
+  const [remaining, setRemaining] = useState(() => Math.max(0, Math.floor((joined.expiresAt - Date.now()) / 1000)));
+  const [closing, setClosing] = useState<string | null>(null);
+
+  const addSystem = (text: string) =>
+    dispatch({ type: "add", line: { id: ++lineId, kind: "system", text } });
+  const addMsg = (from: string, text: string, self: boolean) =>
+    dispatch({
+      type: "add",
+      line: { id: ++lineId, kind: "msg", from, text, self, time: nowStr() },
+    });
+
+  // 订阅客户端事件
+  useEffect(() => {
+    addSystem(`已加入房间 ${roomCode}（${joined.currentMembers}/${joined.maxMembers} 人）`);
+
+    const onPeerJoined = ({ username: u }: { username: string }) => {
+      setMembers((m) => m + 1);
+      addSystem(`${u} 加入了房间`);
+    };
+    const onPeerLeft = ({ username: u }: { username: string }) => {
+      setMembers((m) => Math.max(0, m - 1));
+      addSystem(`${u} 离开了房间`);
+    };
+    const onMessage = (msg: ChatMessage) => {
+      try {
+        const text = decrypt(roomKey.current, { ciphertext: msg.ciphertext, nonce: msg.nonce });
+        addMsg(msg.from, text, false);
+      } catch {
+        addSystem(`收到来自 ${msg.from} 的无法解密的消息`);
+      }
+    };
+    const onRoomClosing = ({ reason }: { reason: string }) => {
+      const reasonText =
+        reason === "ttl_expired" ? "房间已到期" : reason === "empty" ? "房间已空" : "房间被手动销毁";
+      setClosing(reasonText);
+      addSystem(`房间即将关闭：${reasonText}`);
+      setTimeout(() => {
+        client.close();
+        onExit();
+        exit();
+      }, 1500);
+    };
+    const onServerError = (info: { code: string; message: string }) => {
+      addSystem(`错误：${info.message} (${info.code})`);
+    };
+
+    client.on("peer_joined", onPeerJoined);
+    client.on("peer_left", onPeerLeft);
+    client.on("message", onMessage);
+    client.on("room_closing", onRoomClosing);
+    client.on("server_error", onServerError);
+
+    return () => {
+      client.off("peer_joined", onPeerJoined);
+      client.off("peer_left", onPeerLeft);
+      client.off("message", onMessage);
+      client.off("room_closing", onRoomClosing);
+      client.off("server_error", onServerError);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [client]);
+
+  // 倒计时
+  useEffect(() => {
+    const t = setInterval(() => {
+      const r = Math.max(0, Math.floor((expiresAt - Date.now()) / 1000));
+      setRemaining(r);
+    }, 1000);
+    return () => clearInterval(t);
+  }, [expiresAt]);
+
+  // 退出时关闭连接
+  useEffect(() => () => client.close(), [client]);
+
+  function handleSend(text: string) {
+    const t = text.trim();
+    if (!t) return;
+    try {
+      const { ciphertext, nonce } = encrypt(roomKey.current, t);
+      client.send(ciphertext, nonce);
+      addMsg(username, t, true);
+    } catch {
+      addSystem("发送失败：加密出错");
+    }
+    setInput("");
+  }
+
+  // 可视区域：留出 header(2) + 输入区(3) 的空间
+  const rows = stdout?.rows ?? 24;
+  const visible = Math.max(4, rows - 6);
+
+  const cdColor = remaining < 60 ? "red" : remaining < 300 ? "yellow" : "gray";
+
+  return (
+    <Box flexDirection="column" height={rows}>
+      {/* Header */}
+      <Box flexDirection="column">
+        <Box>
+          <Text color="cyan" bold>
+            ephem
+          </Text>
+          <Text color="gray"> · </Text>
+          <Text bold>{roomCode}</Text>
+          <Text color="gray">
+            {"  "}
+            {members}/{maxMembers} 人
+          </Text>
+          <Box flexGrow={1} />
+          <Text color={cdColor}>⏳ {fmtCd(remaining)}</Text>
+        </Box>
+        <Text color="gray">输入消息回车发送 · Ctrl+C 退出{closing ? ` · ${closing}` : ""}</Text>
+      </Box>
+
+      {/* 消息列表 */}
+      <Box flexDirection="column" flexGrow={1} marginTop={1}>
+        {lines.slice(-visible).map((l) =>
+          l.kind === "system" ? (
+            <Text key={l.id} color="yellow">
+              {" "}
+              {l.text}
+            </Text>
+          ) : (
+            <Box key={l.id}>
+              <Text color="gray">{l.time} </Text>
+              <Text color={l.self ? "cyan" : "white"} bold>
+                {l.from}
+              </Text>
+              <Text color={l.self ? "cyan" : "white"}>: {l.text}</Text>
+            </Box>
+          ),
+        )}
+      </Box>
+
+      {/* 输入栏 */}
+      <Box marginTop={1}>
+        <Text color="cyan">{"> "}</Text>
+        <TextInput
+          value={input}
+          onChange={setInput}
+          onSubmit={handleSend}
+          placeholder={closing ? "房间即将关闭…" : "输入消息…"}
+        />
+      </Box>
+    </Box>
+  );
+}
+
+function nowStr(): string {
+  return new Date().toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" });
+}
+
+function fmtCd(sec: number): string {
+  const h = Math.floor(sec / 3600);
+  const m = Math.floor((sec % 3600) / 60);
+  const s = sec % 60;
+  return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+}