@three333/termbuddy 0.1.0 → 0.1.1

package/src/hooks/useTcpSync.ts

@@ -1,153 +1,174 @@
-import {useCallback, useEffect, useRef, useState} from 'react';
-import net from 'node:net';
-import type {ActivityState, ConnectionStatus, TcpPacket} from '../protocol.js';
-import {TCP_DEFAULT_PORT} from '../constants.js';
-
-type HostOptions = {role: 'host'; localName: string; port?: number};
-type ClientOptions = {role: 'client'; localName: string; hostIp: string; tcpPort: number; hostName?: string};
+import { useCallback, useEffect, useRef, useState } from "react";
+import net from "node:net";
+import type {
+  ActivityState,
+  ConnectionStatus,
+  TcpPacket,
+} from "../protocol.js";
+import { TCP_DEFAULT_PORT } from "../constants.js";
+
+type HostOptions = { role: "host"; localName: string; port?: number };
+type ClientOptions = {
+  role: "client";
+  localName: string;
+  hostIp: string;
+  tcpPort: number;
+  hostName?: string;
+};
 type Options = HostOptions | ClientOptions;
 
 function writePacket(socket: net.Socket, packet: TcpPacket) {
-	socket.write(`${JSON.stringify(packet)}\n`, 'utf8');
+  socket.write(`${JSON.stringify(packet)}\n`, "utf8");
 }
 
 export function useTcpSync(options: Options): {
-	status: ConnectionStatus;
-	listenPort?: number;
-	peerName?: string;
-	remoteState?: ActivityState;
-	sendStatus: (state: ActivityState) => void;
+  status: ConnectionStatus;
+  listenPort?: number;
+  peerName?: string;
+  remoteState?: ActivityState;
+  sendStatus: (state: ActivityState) => void;
 } {
-	const [status, setStatus] = useState<ConnectionStatus>(options.role === 'host' ? 'waiting' : 'connecting');
-	const [listenPort, setListenPort] = useState<number | undefined>(undefined);
-	const [peerName, setPeerName] = useState<string | undefined>(undefined);
-	const [remoteState, setRemoteState] = useState<ActivityState | undefined>(undefined);
-
-	const socketRef = useRef<net.Socket | null>(null);
-	const lastSeenRef = useRef<number>(Date.now());
-	const heartbeatRef = useRef<NodeJS.Timeout | null>(null);
-
-	const cleanupSocket = useCallback(() => {
-		if (heartbeatRef.current) clearInterval(heartbeatRef.current);
-		heartbeatRef.current = null;
-
-		const s = socketRef.current;
-		socketRef.current = null;
-		if (s && !s.destroyed) s.destroy();
-	}, []);
-
-	const attachSocket = useCallback(
-		(s: net.Socket) => {
-			cleanupSocket();
-			socketRef.current = s;
-			lastSeenRef.current = Date.now();
-
-			setStatus('connected');
-			setRemoteState('IDLE');
-
-			let buf = '';
-			s.setNoDelay(true);
-			s.setEncoding('utf8');
-
-			const onData = (chunk: string) => {
-				buf += chunk;
-				while (true) {
-					const idx = buf.indexOf('\n');
-					if (idx === -1) break;
-					const line = buf.slice(0, idx).trim();
-					buf = buf.slice(idx + 1);
-					if (!line) continue;
-					try {
-						const packet = JSON.parse(line) as TcpPacket;
-						lastSeenRef.current = Date.now();
-						if (packet.type === 'hello') {
-							if (options.role === 'host') setPeerName(packet.clientName);
-							else setPeerName(packet.hostName);
-						}
-						if (packet.type === 'status') setRemoteState(packet.state);
-						if (packet.type === 'ping') writePacket(s, {type: 'pong', sentAt: Date.now()});
-						if (packet.type === 'pong') {
-							// no-op
-						}
-					} catch {
-						// ignore
-					}
-				}
-			};
-
-			s.on('data', onData);
-			s.on('close', () => {
-				setStatus(options.role === 'host' ? 'waiting' : 'disconnected');
-				setRemoteState('OFFLINE');
-				cleanupSocket();
-			});
-			s.on('error', () => {
-				setStatus(options.role === 'host' ? 'waiting' : 'disconnected');
-				setRemoteState('OFFLINE');
-			});
-
-			// Hello handshake.
-			writePacket(s, {
-				type: 'hello',
-				hostName: options.role === 'host' ? options.localName : options.hostName ?? 'Host',
-				clientName: options.role === 'client' ? options.localName : 'Client',
-				sentAt: Date.now()
-			});
-
-			heartbeatRef.current = setInterval(() => {
-				const sock = socketRef.current;
-				if (!sock || sock.destroyed) return;
-				writePacket(sock, {type: 'ping', sentAt: Date.now()});
-				const age = Date.now() - lastSeenRef.current;
-				if (age > 6000) {
-					setStatus('disconnected');
-					setRemoteState('OFFLINE');
-					cleanupSocket();
-				}
-			}, 2000);
-		},
-		[cleanupSocket, options]
-	);
-
-	useEffect(() => {
-		if (options.role === 'host') {
-			const server = net.createServer((socket) => {
-				attachSocket(socket);
-			});
-
-			server.on('error', () => {});
-
-			server.listen(options.port ?? TCP_DEFAULT_PORT, () => {
-				const address = server.address();
-				if (address && typeof address === 'object') setListenPort(address.port);
-			});
-
-			return () => {
-				cleanupSocket();
-				server.close();
-			};
-		}
-
-		setStatus('connecting');
-		const socket = net.createConnection({host: options.hostIp, port: options.tcpPort}, () => {
-			attachSocket(socket);
-		});
-		socket.on('error', () => {
-			setStatus('disconnected');
-			setRemoteState('OFFLINE');
-		});
-
-		return () => {
-			socket.destroy();
-			cleanupSocket();
-		};
-	}, [attachSocket, cleanupSocket, options]);
-
-	const sendStatus = useCallback((state: ActivityState) => {
-		const socket = socketRef.current;
-		if (!socket || socket.destroyed) return;
-		writePacket(socket, {type: 'status', state, sentAt: Date.now()});
-	}, []);
-
-	return {status, listenPort, peerName, remoteState, sendStatus};
+  const [status, setStatus] = useState<ConnectionStatus>(
+    options.role === "host" ? "waiting" : "connecting"
+  );
+  const [listenPort, setListenPort] = useState<number | undefined>(undefined);
+  const [peerName, setPeerName] = useState<string | undefined>(undefined);
+  const [remoteState, setRemoteState] = useState<ActivityState | undefined>(
+    undefined
+  );
+
+  const socketRef = useRef<net.Socket | null>(null);
+  const lastSeenRef = useRef<number>(Date.now());
+  const heartbeatRef = useRef<NodeJS.Timeout | null>(null);
+
+  const cleanupSocket = useCallback(() => {
+    if (heartbeatRef.current) clearInterval(heartbeatRef.current);
+    heartbeatRef.current = null;
+
+    const s = socketRef.current;
+    socketRef.current = null;
+    if (s && !s.destroyed) s.destroy();
+  }, []);
+
+  const attachSocket = useCallback(
+    (s: net.Socket) => {
+      cleanupSocket();
+      socketRef.current = s;
+      lastSeenRef.current = Date.now();
+
+      setStatus("connected");
+      setRemoteState("IDLE");
+
+      let buf = "";
+      s.setNoDelay(true);
+      s.setEncoding("utf8");
+
+      const onData = (chunk: string) => {
+        buf += chunk;
+        while (true) {
+          const idx = buf.indexOf("\n");
+          if (idx === -1) break;
+          const line = buf.slice(0, idx).trim();
+          buf = buf.slice(idx + 1);
+          if (!line) continue;
+          try {
+            const packet = JSON.parse(line) as TcpPacket;
+            lastSeenRef.current = Date.now();
+            if (packet.type === "hello") {
+              if (options.role === "host") setPeerName(packet.clientName);
+              else setPeerName(packet.hostName);
+            }
+            if (packet.type === "status") setRemoteState(packet.state);
+            if (packet.type === "ping")
+              writePacket(s, { type: "pong", sentAt: Date.now() });
+            if (packet.type === "pong") {
+              // no-op
+            }
+          } catch {
+            // ignore
+          }
+        }
+      };
+
+      s.on("data", onData);
+      s.on("close", () => {
+        setStatus(options.role === "host" ? "waiting" : "disconnected");
+        setRemoteState("OFFLINE");
+        cleanupSocket();
+      });
+      s.on("error", () => {
+        setStatus(options.role === "host" ? "waiting" : "disconnected");
+        setRemoteState("OFFLINE");
+      });
+
+      // Hello handshake.
+      writePacket(s, {
+        type: "hello",
+        hostName:
+          options.role === "host"
+            ? options.localName
+            : options.hostName ?? "Host",
+        clientName: options.role === "client" ? options.localName : "Client",
+        sentAt: Date.now(),
+      });
+
+      heartbeatRef.current = setInterval(() => {
+        const sock = socketRef.current;
+        if (!sock || sock.destroyed) return;
+        writePacket(sock, { type: "ping", sentAt: Date.now() });
+        const age = Date.now() - lastSeenRef.current;
+        if (age > 6000) {
+          setStatus("disconnected");
+          setRemoteState("OFFLINE");
+          cleanupSocket();
+        }
+      }, 2000);
+    },
+    [cleanupSocket, options]
+  );
+
+  useEffect(() => {
+    if (options.role === "host") {
+      const server = net.createServer((socket) => {
+        attachSocket(socket);
+      });
+
+      server.on("error", () => {});
+
+      server.listen(options.port ?? TCP_DEFAULT_PORT, () => {
+        const address = server.address();
+        if (address && typeof address === "object") setListenPort(address.port);
+      });
+
+      return () => {
+        cleanupSocket();
+        server.close();
+      };
+    }
+
+    setStatus("connecting");
+    const socket = net.createConnection(
+      { host: options.hostIp, port: options.tcpPort },
+      () => {
+        attachSocket(socket);
+      }
+    );
+    socket.on("error", () => {
+      setStatus("disconnected");
+      setRemoteState("OFFLINE");
+    });
+
+    return () => {
+      socket.destroy();
+      cleanupSocket();
+    };
+  }, [attachSocket, cleanupSocket, options]);
+
+  const sendStatus = useCallback((state: ActivityState) => {
+    const socket = socketRef.current;
+    if (!socket || socket.destroyed) return;
+    writePacket(socket, { type: "status", state, sentAt: Date.now() });
+  }, []);
+
+  return { status, listenPort, peerName, remoteState, sendStatus };
 }

package/src/net/broadcast.ts

@@ -1,32 +1,32 @@
-import os from 'node:os';
+import os from "node:os";
 
 function ipv4ToInt(ip: string) {
-	return ip
-		.split('.')
-		.map((n) => Number.parseInt(n, 10))
-		.reduce((acc, n) => ((acc << 8) | (n & 255)) >>> 0, 0);
+  return ip
+    .split(".")
+    .map((n) => Number.parseInt(n, 10))
+    .reduce((acc, n) => ((acc << 8) | (n & 255)) >>> 0, 0);
 }
 
 function intToIpv4(n: number) {
-	return [24, 16, 8, 0].map((shift) => String((n >>> shift) & 255)).join('.');
+  return [24, 16, 8, 0].map((shift) => String((n >>> shift) & 255)).join(".");
 }
 
 export function getBroadcastTargets(): string[] {
-	const out = new Set<string>(['255.255.255.255']);
+  const out = new Set<string>(["255.255.255.255"]);
 
-	const ifaces = os.networkInterfaces();
-	for (const entries of Object.values(ifaces)) {
-		if (!entries) continue;
-		for (const e of entries) {
-			if (e.family !== 'IPv4') continue;
-			if (e.internal) continue;
-			if (!e.address || !e.netmask) continue;
-			const ip = ipv4ToInt(e.address);
-			const mask = ipv4ToInt(e.netmask);
-			const broadcast = (ip | (~mask >>> 0)) >>> 0;
-			out.add(intToIpv4(broadcast));
-		}
-	}
+  const ifaces = os.networkInterfaces();
+  for (const entries of Object.values(ifaces)) {
+    if (!entries) continue;
+    for (const e of entries) {
+      if (e.family !== "IPv4") continue;
+      if (e.internal) continue;
+      if (!e.address || !e.netmask) continue;
+      const ip = ipv4ToInt(e.address);
+      const mask = ipv4ToInt(e.netmask);
+      const broadcast = (ip | (~mask >>> 0)) >>> 0;
+      out.add(intToIpv4(broadcast));
+    }
+  }
 
-	return [...out];
+  return [...out];
 }

package/src/net/index.ts

@@ -1,2 +1 @@
-export {getBroadcastTargets} from './broadcast.js';
-
+export { getBroadcastTargets } from "./broadcast.js";

package/src/page/LeavePage.tsx

@@ -0,0 +1,85 @@
+import React, { useMemo } from "react";
+import { Box, Text, useInput } from "ink";
+import type { LeaveStats } from "../types.js";
+
+function formatDuration(ms: number) {
+  const totalSeconds = Math.max(0, Math.floor(ms / 1000));
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  if (hours > 0) return `${hours}小时${minutes}分${seconds}秒`;
+  if (minutes > 0) return `${minutes}分${seconds}秒`;
+  return `${seconds}秒`;
+}
+
+export function LeavePage(props: {
+  stats: LeaveStats;
+  onBack: () => void;
+  onExit: () => void;
+}) {
+  useInput((input, key) => {
+    if (key.escape || input === "q") props.onExit();
+    if (key.return || input === " ") props.onBack();
+  });
+
+  const sessionLabel = useMemo(
+    () => formatDuration(props.stats.sessionDurationMs),
+    [props.stats.sessionDurationMs]
+  );
+  const connectedLabel = useMemo(
+    () => formatDuration(props.stats.connectedDurationMs),
+    [props.stats.connectedDurationMs]
+  );
+
+  return (
+    <Box flexDirection="column" padding={1} alignItems="center">
+      {/* <Text color="cyan">
+        {String.raw`
+  ____                _                _ 
+ / ___|  ___ ___     | |    __ _| |_| |
+ \___ \ / _ \ _ \    | |   / _' | __| |
+  ___) |  __/  __/   | |__| (_| | |_|_|
+ |____/ \___|\___|___|_____\__,_|\__(_)
+                |_____|                
+`}
+      </Text> */}
+
+      <Box
+        flexDirection="column"
+        marginTop={1}
+        borderStyle="round"
+        paddingX={2}
+        borderColor="gray"
+      >
+        <Text color="white" bold>
+          {props.stats.peerName
+            ? `与 ${props.stats.peerName} 的同频记录`
+            : "本次专注记录"}
+        </Text>
+
+        <Box marginTop={1} flexDirection="column" gap={1}>
+          <Box justifyContent="space-between" width={30}>
+            <Text>⌨️ 键盘敲击</Text>
+            <Text color="yellow">{props.stats.keyPresses}</Text>
+          </Box>
+          <Box justifyContent="space-between" width={30}>
+            <Text>⏱️ 总共时长</Text>
+            <Text color="green">{sessionLabel}</Text>
+          </Box>
+          <Box justifyContent="space-between" width={30}>
+            <Text>🔗 连线时长</Text>
+            <Text color="blue">{connectedLabel}</Text>
+          </Box>
+        </Box>
+      </Box>
+
+      <Box marginTop={1}>
+        <Text color="gray">
+          按 <Text color="white">Enter</Text> 返回菜单，或{" "}
+          <Text color="red">q</Text> 退出程序
+        </Text>
+      </Box>
+    </Box>
+  );
+}

package/src/{views → page}/MainMenu.tsx

@@ -1,17 +1,21 @@
-import React from 'react';
-import {Box, Text, useInput} from 'ink';
+import React from "react";
+import { Box, Text, useInput } from "ink";
 
-export function MainMenu(props: {onHost: () => void; onJoin: () => void; onExit: () => void}) {
-	useInput((input, key) => {
-		if (key.escape || input === 'q') props.onExit();
-		if (input === '1') props.onHost();
-		if (input === '2') props.onJoin();
-	});
+export function MainMenu(props: {
+  onHost: () => void;
+  onJoin: () => void;
+  onExit: () => void;
+}) {
+  useInput((input, key) => {
+    if (key.escape || input === "q") props.onExit();
+    if (input === "1") props.onHost();
+    if (input === "2") props.onJoin();
+  });
 
-	return (
-		<Box flexDirection="column" padding={1}>
-			<Text>
-				{String.raw`
+  return (
+    <Box flexDirection="column" padding={1}>
+      <Text>
+        {String.raw`
 ████████╗███████╗██████╗ ███╗   ███╗██████╗ ██╗   ██╗██████╗ ██████╗ ██╗   ██╗
 ╚══██╔══╝██╔════╝██╔══██╗████╗ ████║██╔══██╗██║   ██║██╔══██╗██╔══██╗╚██╗ ██╔╝
    ██║   █████╗  ██████╔╝██╔████╔██║██████╔╝██║   ██║██║  ██║██║  ██║ ╚████╔╝ 
@@ -19,20 +23,20 @@ export function MainMenu(props: {onHost: () => void; onJoin: () => void; onExit:
    ██║   ███████╗██║  ██║██║ ╚═╝ ██║██████╔╝╚██████╔╝██████╔╝██████╔╝   ██║   
    ╚═╝   ╚══════╝╚═╝  ╚═╝╚═╝     ╚═╝╚═════╝  ╚═════╝ ╚═════╝ ╚═════╝    ╚═╝   
 `}
-			</Text>
-			<Box flexDirection="column" marginTop={1}>
-				<Text>Terminal Body Doubling — 极简 / 极客 / 私密</Text>
-				<Text> </Text>
-				<Text>
-					<Text color="cyan">[1]</Text> 建房 (Host)
-				</Text>
-				<Text>
-					<Text color="cyan">[2]</Text> 加入 (Join)
-				</Text>
-				<Text>
-					<Text color="cyan">[q]</Text> 退出
-				</Text>
-			</Box>
-		</Box>
-	);
+      </Text>
+      <Box flexDirection="column" marginTop={1}>
+        <Text>Terminal Body Doubling — 极简 / 极客 / 私密</Text>
+        <Text> </Text>
+        <Text>
+          <Text color="cyan">[1]</Text> 建房 (Host)
+        </Text>
+        <Text>
+          <Text color="cyan">[2]</Text> 加入 (Join)
+        </Text>
+        <Text>
+          <Text color="cyan">[q]</Text> 退出
+        </Text>
+      </Box>
+    </Box>
+  );
 }

package/src/page/NicknamePrompt.tsx

@@ -0,0 +1,62 @@
+import React, { useMemo, useState } from "react";
+import os from "node:os";
+import { Box, Text, useInput } from "ink";
+
+function defaultNick(): string {
+  try {
+    return os.userInfo().username || os.hostname();
+  } catch {
+    return os.hostname();
+  }
+}
+
+export function NicknamePrompt(props: {
+  onSubmit: (nickname: string) => void;
+  onExit: () => void;
+}) {
+  const initial = useMemo(() => defaultNick(), []);
+  const [nickname, setNickname] = useState(initial);
+  const [touched, setTouched] = useState(false);
+
+  useInput((input, key) => {
+    if (key.escape) props.onExit();
+
+    if (key.return) {
+      const name = nickname.trim();
+      if (!name) return;
+      props.onSubmit(name);
+      return;
+    }
+
+    if (key.backspace || key.delete) {
+      setTouched(true);
+      setNickname((v) => v.slice(0, -1));
+      return;
+    }
+
+    if (key.ctrl || key.meta) return;
+    if (!input) return;
+    if (input === "\t") return;
+
+    setTouched(true);
+    setNickname((v) => v + input);
+  });
+
+  const hint = touched ? "" : " (回车确认，可直接用默认值)";
+
+  return (
+    <Box flexDirection="column" padding={1}>
+      <Text color="gray">欢迎来到 TermBuddy</Text>
+      <Box marginTop={1}>
+        <Text>
+          请输入你的昵称：<Text color="cyan">{nickname || ""}</Text>
+          <Text color="gray">{hint}</Text>
+        </Text>
+      </Box>
+      <Box marginTop={1}>
+        <Text color="gray">按 Esc 退出。</Text>
+      </Box>
+    </Box>
+  );
+}
+

package/src/{views → page}/RoomScanner.tsx

@@ -37,7 +37,10 @@ export function RoomScanner(props: {
 				) : (
 					sortedRooms.map((room, i) => (
 						<Text key={`${room.ip}:${room.tcpPort}`}>
-							<Text color="cyan">[{i + 1}]</Text> {room.roomName} — {room.hostName} @ {room.ip}:{room.tcpPort}
+							<Text color="cyan">[{i + 1}]</Text> {room.hostName} <Text color="gray">@</Text>{' '}
+							<Text color="gray">
+								{room.ip}:{room.tcpPort}
+							</Text>
 						</Text>
 					))
 				)}