@three333/termbuddy 0.1.0 → 0.1.1

package/src/components/AiConsole.tsx

@@ -1,77 +1,175 @@
-import React, {useMemo, useState} from 'react';
-import {Box, Text, useInput} from 'ink';
-import {useAiAgent} from '../hooks/index.js';
+import React, { useEffect, useMemo, useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { useAiAgent } from "../hooks/index.js";
+import { loadStoredApiKey, saveStoredApiKey } from "../storage/apiKey.js";
+import type {
+  ProjectileDirection,
+  ProjectileKind,
+} from "./sprite/ProjectileThrowSprite.js";
 
 export function AiConsole(props: {
-	onClose: () => void;
-	onStartCountdown: (minutes: number) => void;
-	localName: string;
-	peerName: string;
+  onClose: () => void;
+  onStartCountdown: (minutes: number) => void;
+  onThrowProjectile: (
+    kind: ProjectileKind,
+    direction: ProjectileDirection
+  ) => void;
+  localName: string;
+  peerName: string;
 }) {
-	const [input, setInput] = useState('');
-	const agent = useAiAgent({
-		localName: props.localName,
-		peerName: props.peerName,
-		onStartCountdown: props.onStartCountdown
-	});
-
-	const helpLine = useMemo(
-		() => '示例：倒计时20分钟 / countdown 20 / 问个技术问题',
-		[]
-	);
-
-	useInput(
-		(ch, key) => {
-			if (key.escape) {
-				props.onClose();
-				return;
-			}
-
-			if (key.return) {
-				const line = input.trim();
-				setInput('');
-				if (!line) return;
-				void agent.ask(line);
-				return;
-			}
-
-			if (key.backspace || key.delete) {
-				setInput((s) => s.slice(0, -1));
-				return;
-			}
-
-			if (key.ctrl || key.meta) return;
-			if (ch) setInput((s) => s + ch);
-		},
-		{isActive: true}
-	);
-
-	const lines = agent.lines.slice(-12);
-
-	return (
-		<Box flexDirection="column" borderStyle="round" paddingX={1} paddingY={0}>
-			<Box justifyContent="space-between">
-				<Text color="cyan">AI Console</Text>
-				<Text color="gray">{agent.busy ? 'Thinking…' : 'Esc 关闭'}</Text>
-			</Box>
-
-			<Box flexDirection="column" marginTop={1}>
-				<Text color="gray">{helpLine}</Text>
-			</Box>
-
-			<Box flexDirection="column" marginTop={1}>
-				{lines.length === 0 ? <Text color="gray">（幽灵还在壳里…）</Text> : null}
-				{lines.map((l, i) => (
-					<Text key={`${l.kind}:${l.at}:${i}`} color={l.kind === 'user' ? 'yellow' : 'white'}>
-						{l.text}
-					</Text>
-				))}
-			</Box>
-
-			<Box marginTop={1}>
-				<Text color="green">{'>'} </Text>
-				<Text>{input}</Text>
-			</Box>
-		</Box>
-	);
+  const [input, setInput] = useState("");
+  const [apiKey, setApiKey] = useState<string | null>(null);
+  const [keyDraft, setKeyDraft] = useState("");
+  const [keyStatus, setKeyStatus] = useState<
+    "loading" | "missing" | "ready" | "saving"
+  >("loading");
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      const stored = await loadStoredApiKey();
+      if (cancelled) return;
+      if (stored) {
+        setApiKey(stored);
+        setKeyStatus("ready");
+      } else {
+        setKeyStatus("missing");
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const agent = useAiAgent({
+    localName: props.localName,
+    peerName: props.peerName,
+    onStartCountdown: props.onStartCountdown,
+    onThrowProjectile: props.onThrowProjectile,
+    apiKey: apiKey ?? undefined,
+  });
+
+  const helpLine = useMemo(
+    () => "示例：倒计时20分钟 / 聊会天 / 和别人互动一下",
+    []
+  );
+
+  useInput(
+    (ch, key) => {
+      if (key.escape) {
+        props.onClose();
+        return;
+      }
+
+      if (keyStatus !== "ready") {
+        if (key.return) {
+          const draft = keyDraft.trim();
+          if (!draft) return;
+          setKeyStatus("saving");
+          void (async () => {
+            await saveStoredApiKey(draft);
+            setApiKey(draft);
+            setKeyDraft("");
+            setKeyStatus("ready");
+          })();
+          return;
+        }
+
+        if (key.backspace || key.delete) {
+          setKeyDraft((s) => s.slice(0, -1));
+          return;
+        }
+
+        if (key.ctrl || key.meta) return;
+        if (ch) setKeyDraft((s) => s + ch);
+        return;
+      }
+
+      if (key.return) {
+        const line = input.trim();
+        setInput("");
+        if (!line) return;
+        void agent.ask(line);
+        return;
+      }
+
+      if (key.backspace || key.delete) {
+        setInput((s) => s.slice(0, -1));
+        return;
+      }
+
+      if (key.ctrl || key.meta) return;
+      if (ch) setInput((s) => s + ch);
+    },
+    { isActive: true }
+  );
+
+  const lines = agent.lines.filter((l) => l.text.trim().length > 0).slice(-6);
+
+  return (
+    <Box flexDirection="column" borderStyle="round" paddingX={1} paddingY={0}>
+      <Box justifyContent="space-between" marginBottom={0}>
+        <Text color="cyan">AI Console</Text>
+        <Text color="gray">
+          {keyStatus === "saving"
+            ? "Saving…"
+            : agent.busy
+            ? "Thinking…"
+            : "Esc Close"}
+        </Text>
+      </Box>
+
+      <Box flexDirection="column">
+        {keyStatus === "loading" ? (
+          <Text color="gray">Checking API Key...</Text>
+        ) : keyStatus === "missing" || keyStatus === "saving" ? (
+          <Text color="yellow">
+            Setup: Enter DeepSeek API Key (saves to{" "}
+            <Text color="cyan">src/assets/key.json</Text>)
+          </Text>
+        ) : lines.length === 0 ? (
+          <Text color="gray">{helpLine}</Text>
+        ) : null}
+      </Box>
+
+      <Box flexDirection="column" marginTop={0} minHeight={6}>
+        {keyStatus === "ready" ? (
+          <>
+            {lines.map((l, i) => (
+              <Text
+                key={`${l.kind}:${l.at}:${i}`}
+                color={l.kind === "user" ? "yellow" : "white"}
+                wrap="truncate-end"
+              >
+                {l.kind === "user" ? "> " : ""}
+                {l.text}
+              </Text>
+            ))}
+          </>
+        ) : (
+          <Text color="gray">Please enter API Key to proceed.</Text>
+        )}
+      </Box>
+
+      <Box
+        marginTop={0}
+        borderStyle="single"
+        borderTop={true}
+        borderBottom={false}
+        borderLeft={false}
+        borderRight={false}
+      >
+        <Text color="green">{">"} </Text>
+        {keyStatus === "ready" ? (
+          <Text>{input}</Text>
+        ) : (
+          <Text>
+            {keyDraft.length === 0
+              ? ""
+              : "*".repeat(Math.min(64, keyDraft.length))}
+          </Text>
+        )}
+      </Box>
+    </Box>
+  );
 }

package/src/components/StatusHeader.tsx

@@ -1,43 +1,43 @@
-import React from 'react';
-import {Box, Text} from 'ink';
-import type {ConnectionStatus} from '../protocol.js';
+import React from "react";
+import { Box, Text } from "ink";
+import type { ConnectionStatus } from "../protocol.js";
 
 function statusText(status: ConnectionStatus) {
-	switch (status) {
-		case 'waiting':
-			return {label: 'Waiting', color: 'yellow'};
-		case 'connecting':
-			return {label: 'Connecting', color: 'yellow'};
-		case 'connected':
-			return {label: 'Connected via TCP', color: 'green'};
-		case 'disconnected':
-			return {label: 'Disconnected', color: 'red'};
-	}
+  switch (status) {
+    case "waiting":
+      return { label: "Waiting", color: "yellow" };
+    case "connecting":
+      return { label: "Connecting", color: "yellow" };
+    case "connected":
+      return { label: "Connected via TCP", color: "green" };
+    case "disconnected":
+      return { label: "Disconnected", color: "red" };
+  }
 }
 
 export function StatusHeader(props: {
-	role: 'host' | 'client';
-	status: ConnectionStatus;
-	hostIp?: string;
-	tcpPort?: number;
-	countdownLabel?: string | null;
+  role: "host" | "client";
+  status: ConnectionStatus;
+  hostIp?: string;
+  tcpPort?: number;
 }) {
-	const st = statusText(props.status);
-	return (
-		<Box justifyContent="space-between">
-			<Box>
-				<Text color={st.color}>{st.label}</Text>
-				{props.role === 'host' ? (
-					<Text color="gray">{props.tcpPort ? ` — TCP :${props.tcpPort}` : ''}</Text>
-				) : (
-					<Text color="gray">
-						{props.hostIp && props.tcpPort ? ` — ${props.hostIp}:${props.tcpPort}` : ''}
-					</Text>
-				)}
-			</Box>
-			<Box>
-				{props.countdownLabel ? <Text color="cyan">Focus {props.countdownLabel}</Text> : <Text> </Text>}
-			</Box>
-		</Box>
-	);
+  const st = statusText(props.status);
+  return (
+    <Box>
+      <Box>
+        <Text color={st.color}>{st.label}</Text>
+        {props.role === "host" ? (
+          <Text color="gray">
+            {props.tcpPort ? ` — TCP :${props.tcpPort}` : ""}
+          </Text>
+        ) : (
+          <Text color="gray">
+            {props.hostIp && props.tcpPort
+              ? ` — ${props.hostIp}:${props.tcpPort}`
+              : ""}
+          </Text>
+        )}
+      </Box>
+    </Box>
+  );
 }

package/src/components/index.ts

@@ -1,4 +1,8 @@
-export {AiConsole} from './AiConsole.js';
-export {AvatarDisplay} from './AvatarDisplay.js';
-export {BuddyAvatar} from './BuddyAvatar.js';
-export {StatusHeader} from './StatusHeader.js';
+export { AiConsole } from "./AiConsole.js";
+export { BuddyAvatar } from "./sprite/BuddyAvatar.js";
+export {
+  CountdownClockSprite,
+  countdownClockTypeFromMinutes,
+} from "./sprite/CountdownClockSprite.js";
+export { ProjectileThrowSprite } from "./sprite/ProjectileThrowSprite.js";
+export { StatusHeader } from "./StatusHeader.js";

package/src/components/sprite/BuddyAvatar.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { ActivityState } from "../../protocol.js";
+
+const SPRITES: Record<
+  ActivityState,
+  { color?: string; compact: string; frames: string[] }
+> = {
+  TYPING: {
+    color: "green",
+    compact: "( >_<)===3",
+    frames: [" /\\_/\\ ", "( >_<) ", " /|_|\\\\ ", "  / \\\\  "],
+  },
+  IDLE: {
+    color: "yellow",
+    compact: "( -.-)Zzz",
+    frames: [" /\\_/\\ ", "( -.-) ", " /|_|\\\\ ", "  / \\\\  "],
+  },
+  OFFLINE: {
+    color: "gray",
+    compact: "( x_x)",
+    frames: [" /\\_/\\ ", "( x_x) ", " /|_|\\\\ ", "  / \\\\  "],
+  },
+};
+
+export function BuddyAvatar(props: {
+  state: ActivityState;
+  variant?: "frames" | "compact";
+  marginTop?: number;
+}) {
+  const sprite = SPRITES[props.state];
+  if (props.variant === "compact") {
+    return (
+      <Box marginTop={props.marginTop ?? 1}>
+        <Text color={sprite.color}>{sprite.compact}</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" marginTop={props.marginTop ?? 1}>
+      {sprite.frames.map((line, i) => (
+        <Text key={`${props.state}:${i}`} color={sprite.color}>
+          {line}
+        </Text>
+      ))}
+    </Box>
+  );
+}

package/src/components/sprite/CountdownClockSprite.tsx

@@ -0,0 +1,146 @@
+import React, { useMemo } from "react";
+import { Box, Text } from "ink";
+
+export type CountdownClockType = "SHORT" | "MEDIUM" | "LONG";
+export type CountdownClockVariant = "FULL" | "COMPACT";
+
+export function countdownClockTypeFromMinutes(
+  minutes: number
+): CountdownClockType {
+  if (minutes <= 10) return "SHORT";
+  if (minutes <= 30) return "MEDIUM";
+  return "LONG";
+}
+
+function clamp01(n: number) {
+  if (n <= 0) return 0;
+  if (n >= 1) return 1;
+  return n;
+}
+
+const TYPE_STYLE: Record<CountdownClockType, { color: string; label: string }> =
+  {
+    SHORT: { color: "green", label: "Sprint" },
+    MEDIUM: { color: "cyan", label: "Focus" },
+    LONG: { color: "magenta", label: "Deep" },
+  };
+
+type HandDir = "N" | "NE" | "E" | "SE" | "S" | "SW" | "W" | "NW";
+
+function handFromProgress(progress01: number): HandDir {
+  const idx = Math.round(clamp01(progress01) * 7);
+  const dirs: HandDir[] = ["N", "NE", "E", "SE", "S", "SW", "W", "NW"];
+  return dirs[idx]!;
+}
+
+function renderClockFace(hand: HandDir) {
+  const lines = [
+    "  .---.  ",
+    " /     \\ ",
+    "|   •   |",
+    " \\     / ",
+    "  '---'  ",
+  ].map((s) => s.split(""));
+
+  const center = { r: 2, c: 4 };
+  const handMap: Record<HandDir, { r: number; c: number; ch: string }> = {
+    N: { r: 1, c: 4, ch: "|" },
+    NE: { r: 1, c: 5, ch: "/" },
+    E: { r: 2, c: 5, ch: "-" },
+    SE: { r: 3, c: 5, ch: "\\" },
+    S: { r: 3, c: 4, ch: "|" },
+    SW: { r: 3, c: 3, ch: "/" },
+    W: { r: 2, c: 3, ch: "-" },
+    NW: { r: 1, c: 3, ch: "\\" },
+  };
+
+  const tip = handMap[hand];
+  lines[center.r][center.c] = "•";
+  lines[tip.r][tip.c] = tip.ch;
+
+  return lines.map((row) => row.join(""));
+}
+
+function renderCompactClockFace(hand: HandDir) {
+  const lines = [" .---. ", "|  •  |", " '---' "].map((s) => s.split(""));
+  const center = { r: 1, c: 3 };
+  const handMap: Record<HandDir, { r: number; c: number; ch: string }> = {
+    N: { r: 0, c: 3, ch: "|" },
+    NE: { r: 0, c: 4, ch: "/" },
+    E: { r: 1, c: 5, ch: "-" },
+    SE: { r: 2, c: 4, ch: "\\" },
+    S: { r: 2, c: 3, ch: "|" },
+    SW: { r: 2, c: 2, ch: "/" },
+    W: { r: 1, c: 1, ch: "-" },
+    NW: { r: 0, c: 2, ch: "\\" },
+  };
+
+  const tip = handMap[hand];
+  lines[center.r][center.c] = "•";
+  lines[tip.r][tip.c] = tip.ch;
+
+  return lines.map((row) => row.join(""));
+}
+
+export function CountdownClockSprite(props: {
+  type?: CountdownClockType;
+  variant?: CountdownClockVariant;
+  minutes?: number;
+  label?: string | null;
+  showLabel?: boolean;
+  totalSeconds?: number;
+  remainingSeconds?: number | null;
+}) {
+  const type =
+    props.type ??
+    (typeof props.minutes === "number"
+      ? countdownClockTypeFromMinutes(props.minutes)
+      : "MEDIUM");
+
+  const progress01 = useMemo(() => {
+    if (
+      typeof props.totalSeconds !== "number" ||
+      props.totalSeconds <= 0 ||
+      props.remainingSeconds === null ||
+      typeof props.remainingSeconds !== "number"
+    ) {
+      return null;
+    }
+    return clamp01(props.remainingSeconds / props.totalSeconds);
+  }, [props.remainingSeconds, props.totalSeconds]);
+
+  const style = TYPE_STYLE[type];
+  const hand = handFromProgress(progress01 ?? 1);
+  const caption = props.label ?? style.label;
+
+  if (props.variant === "COMPACT") {
+    const face = renderCompactClockFace(hand);
+    return (
+      <Box flexDirection="column">
+        {face.map((line, i) => (
+          <Text key={`clock:compact:${type}:${hand}:${i}`} color={style.color}>
+            {line}
+          </Text>
+        ))}
+        {props.showLabel === false ? null : (
+          <Text color="gray">{caption ?? " "}</Text>
+        )}
+      </Box>
+    );
+  }
+
+  const face = renderClockFace(hand);
+
+  return (
+    <Box flexDirection="column">
+      {face.map((line, i) => (
+        <Text key={`clock:${type}:${hand}:${i}`} color={style.color}>
+          {line}
+        </Text>
+      ))}
+      {props.showLabel === false ? null : (
+        <Text color="gray">{caption ?? " "}</Text>
+      )}
+    </Box>
+  );
+}

package/src/components/sprite/ProjectileThrowSprite.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { Box, Text } from "ink";
+
+export type ProjectileKind = "ROSE" | "POOP" | "HAMMER";
+export type ProjectileDirection = "LEFT_TO_RIGHT" | "RIGHT_TO_LEFT";
+
+const PROJECTILES: Record<ProjectileKind, { glyph: string; color: string }> = {
+  ROSE: { glyph: "🌹", color: "magenta" },
+  POOP: { glyph: "💩", color: "yellow" },
+  HAMMER: { glyph: "🔨", color: "cyan" },
+};
+
+function clamp01(n: number) {
+  if (n <= 0) return 0;
+  if (n >= 1) return 1;
+  return n;
+}
+
+function renderTrack(width: number, pos: number, glyph: string) {
+  const w = Math.max(8, Math.floor(width));
+  const innerWidth = w - 2;
+  if (pos < 0) return `|${new Array(innerWidth).fill("·").join("")}|`;
+  const clampedPos = Math.max(0, Math.min(innerWidth - 1, Math.floor(pos)));
+
+  const track = new Array(innerWidth).fill("·");
+  track[clampedPos] = glyph;
+  return `|${track.join("")}|`;
+}
+
+export function ProjectileThrowSprite(props: {
+  kind: ProjectileKind;
+  direction?: ProjectileDirection;
+  width?: number;
+  progress?: number;
+  shotId?: string | number;
+  durationMs?: number;
+  leftLabel?: string;
+  rightLabel?: string;
+  onDone?: () => void;
+}) {
+  const direction = props.direction ?? "LEFT_TO_RIGHT";
+  const width = props.width ?? 28;
+  const durationMs = props.durationMs ?? 700;
+
+  const [autoProgress, setAutoProgress] = useState<number | null>(null);
+  const progress = typeof props.progress === "number" ? props.progress : autoProgress;
+
+  useEffect(() => {
+    if (props.shotId === undefined) return;
+    const startedAt = Date.now();
+    setAutoProgress(0);
+
+    const handle = setInterval(() => {
+      const elapsed = Date.now() - startedAt;
+      const next = clamp01(elapsed / Math.max(1, durationMs));
+      setAutoProgress(next);
+      if (next >= 1) {
+        clearInterval(handle);
+        props.onDone?.();
+      }
+    }, 33);
+
+    return () => clearInterval(handle);
+  }, [durationMs, props.onDone, props.shotId]);
+
+  const projectile = PROJECTILES[props.kind];
+
+  const track = useMemo(() => {
+    if (progress === null || !Number.isFinite(progress)) {
+      return renderTrack(width, -1, " ");
+    }
+    const innerWidth = Math.max(8, Math.floor(width)) - 2;
+    const rawPos = clamp01(progress) * (innerWidth - 1);
+    const pos =
+      direction === "LEFT_TO_RIGHT" ? rawPos : (innerWidth - 1 - rawPos);
+    return renderTrack(width, pos, projectile.glyph);
+  }, [direction, progress, projectile.glyph, width]);
+
+  return (
+    <Box>
+      {props.leftLabel ? <Text color="gray">{props.leftLabel} </Text> : null}
+      <Text color={projectile.color}>{track}</Text>
+      {props.rightLabel ? <Text color="gray"> {props.rightLabel}</Text> : null}
+    </Box>
+  );
+}

package/src/components/tool/createCountdownTool.ts

@@ -0,0 +1,32 @@
+import { tool } from "langchain";
+
+export function createCountdownTool(options: {
+  onStartCountdown?: (minutes: number) => void;
+}) {
+  return tool(
+    async (input: { minutes: number }) => {
+      const minutes = Number(input.minutes);
+      if (!Number.isFinite(minutes) || minutes <= 0) return "倒计时分钟数无效。";
+      options.onStartCountdown?.(minutes);
+      return `已开始倒计时 ${minutes} 分钟。`;
+    },
+    {
+      name: "start_countdown",
+      description: "开始一个专注倒计时（分钟）。",
+      schema: {
+        type: "object",
+        properties: {
+          minutes: {
+            type: "integer",
+            minimum: 1,
+            maximum: 180,
+            description: "倒计时分钟数",
+          },
+        },
+        required: ["minutes"],
+        additionalProperties: false,
+      },
+    }
+  );
+}
+