@ridit/lens 0.3.7 → 0.3.9

package/src/components/ChatView.tsx

@@ -0,0 +1,238 @@
+import React, { useState } from "react";
+import { Box, Text, useInput, Static } from "ink";
+import { InputBox, ShortcutBar, ACCENT, GREEN } from "@ridit/ink-ui";
+import { existsSync, readFileSync } from "fs";
+import { join } from "path";
+import {
+  addMessage,
+  chat,
+  createSession,
+  getMessages,
+  getSystemPrompt,
+  saveSession,
+} from "@ridit/lens-core";
+import { Message, extractText } from "./Message";
+import { ToolCall } from "./ToolCall";
+
+const cwd = process.cwd();
+const hasLensMd = existsSync(join(cwd, "LENS.md"));
+
+interface ToolCallItem {
+  id: string;
+  tool: string;
+  args: unknown;
+  status: "running" | "done";
+}
+
+interface Turn {
+  id: string;
+  userText: string;
+  toolCalls: ToolCallItem[];
+  assistantText: string;
+}
+
+function buildTurnsFromSession(
+  messages: Array<{ role: string; content: unknown }>,
+): Turn[] {
+  const turns: Turn[] = [];
+  for (let i = 0; i < messages.length; i++) {
+    const msg = messages[i]!;
+    if (msg.role !== "user") continue;
+    const next = messages[i + 1];
+    if (next?.role === "assistant") {
+      turns.push({
+        id: crypto.randomUUID(),
+        userText: extractText(msg.content),
+        toolCalls: [],
+        assistantText: extractText(next.content),
+      });
+      i++;
+    }
+  }
+  return turns;
+}
+
+export function ChatView() {
+  const [session, setSession] = useState(() => createSession(cwd));
+  const [turns, setTurns] = useState<Turn[]>(() =>
+    buildTurnsFromSession(
+      createSession(cwd).messages.filter(
+        (m) => m.role === "user" || m.role === "assistant",
+      ),
+    ),
+  );
+  const [currentChunk, setCurrentChunk] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [liveToolCalls, setLiveToolCalls] = useState<ToolCallItem[]>([]);
+  const [currentUserText, setCurrentUserText] = useState("");
+  const [inputValue, setInputValue] = useState("");
+  const [inputKey, setInputKey] = useState(0);
+
+  useInput((_, key) => {
+    if (key.escape && isLoading) {
+      setIsLoading(false);
+      setCurrentChunk("");
+      setLiveToolCalls([]);
+      setCurrentUserText("");
+    }
+  });
+
+  const handleSubmit = async (val: string) => {
+    if (!val.trim() || isLoading) return;
+
+    setInputValue("");
+    setInputKey((k) => k + 1);
+    setLiveToolCalls([]);
+    setCurrentUserText(val);
+
+    const updated = addMessage(session, "user", val);
+    setSession(updated);
+    setIsLoading(true);
+    setCurrentChunk("");
+
+    const turnId = crypto.randomUUID();
+    const turnToolCalls: ToolCallItem[] = [];
+
+    try {
+      await chat({
+        messages: getMessages(updated),
+        system: getSystemPrompt(cwd),
+        onChunk: (chunk) => setCurrentChunk((prev) => prev + chunk),
+        onToolCall: (tool, args) => {
+          // For full-content writes, capture the existing file so we can show removals
+          let enrichedArgs = args;
+          const WRITE_TOOLS = new Set(["write_file", "write", "create_file", "create", "overwrite_file"]);
+          if (WRITE_TOOLS.has(tool) && typeof args === "object" && args) {
+            const a = args as Record<string, unknown>;
+            const filePath = String(a.path ?? a.file_path ?? a.filename ?? "");
+            if (filePath) {
+              const abs = join(cwd, filePath);
+              try {
+                enrichedArgs = { ...a, _prevContent: readFileSync(abs, "utf-8") };
+              } catch { /* file doesn't exist yet */ }
+            }
+          }
+
+          const id = crypto.randomUUID();
+          const item: ToolCallItem = { id, tool, args: enrichedArgs, status: "running" };
+          turnToolCalls.push(item);
+          setLiveToolCalls((prev) => [...prev, item]);
+          setTimeout(() => {
+            const idx = turnToolCalls.findIndex((tc) => tc.id === id);
+            if (idx !== -1)
+              turnToolCalls[idx] = { ...turnToolCalls[idx]!, status: "done" };
+            setLiveToolCalls((prev) =>
+              prev.map((tc) => (tc.id === id ? { ...tc, status: "done" } : tc)),
+            );
+          }, 500);
+        },
+        onFinish: (text) => {
+          setSession((prev) => {
+            const final = addMessage(prev, "assistant", text);
+            saveSession(final);
+            return final;
+          });
+          setTurns((prev) => [
+            ...prev,
+            {
+              id: turnId,
+              userText: val,
+              toolCalls: turnToolCalls.map((tc) => ({ ...tc, status: "done" })),
+              assistantText: text,
+            },
+          ]);
+          setCurrentUserText("");
+          setCurrentChunk("");
+          setIsLoading(false);
+          setLiveToolCalls([]);
+        },
+      });
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      setTurns((prev) => [
+        ...prev,
+        {
+          id: turnId,
+          userText: val,
+          toolCalls: turnToolCalls.map((tc) => ({ ...tc, status: "done" })),
+          assistantText: `Error: ${message}`,
+        },
+      ]);
+      setCurrentUserText("");
+      setCurrentChunk("");
+      setIsLoading(false);
+      setLiveToolCalls([]);
+    }
+  };
+
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      {/* Status hints */}
+      {hasLensMd && (
+        <Box gap={1} marginBottom={1} paddingLeft={1}>
+          <Text color={GREEN} dimColor>✓</Text>
+          <Text color="gray" dimColor>LENS.md loaded</Text>
+        </Box>
+      )}
+
+      {/* Completed turns — frozen by Static */}
+      <Static items={turns}>
+        {(turn) => (
+          <Box key={turn.id} flexDirection="column" marginBottom={1}>
+            <Message role="user">{turn.userText}</Message>
+            {turn.toolCalls.length > 0 && (
+              <Box flexDirection="column">
+                {turn.toolCalls.map((tc) => (
+                  <ToolCall
+                    key={tc.id}
+                    tool={tc.tool}
+                    args={tc.args}
+                    status="done"
+                  />
+                ))}
+              </Box>
+            )}
+            <Message role="assistant">{turn.assistantText}</Message>
+          </Box>
+        )}
+      </Static>
+
+      {/* In-progress turn */}
+      {isLoading && (
+        <Box flexDirection="column">
+          <Message role="user">{currentUserText}</Message>
+          {liveToolCalls.length > 0 && (
+            <Box flexDirection="column">
+              {liveToolCalls.map((tc) => (
+                <ToolCall
+                  key={tc.id}
+                  tool={tc.tool}
+                  args={tc.args}
+                  status={tc.status}
+                />
+              ))}
+            </Box>
+          )}
+          {currentChunk ? (
+            <Message role="assistant">{currentChunk}</Message>
+          ) : (
+            <Box gap={1} paddingLeft={1}>
+              <Text color={ACCENT} dimColor>◆</Text>
+              <Text color="gray" dimColor>thinking...</Text>
+            </Box>
+          )}
+        </Box>
+      )}
+
+      <InputBox
+        value={inputValue}
+        onChange={setInputValue}
+        onSubmit={handleSubmit}
+        inputKey={inputKey}
+        placeholder="Ask anything about your codebase..."
+        disabled={isLoading}
+      />
+      <ShortcutBar />
+    </Box>
+  );
+}

package/src/components/Message.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { MessageBody, ACCENT } from "@ridit/ink-ui";
+
+interface MessageProps {
+  role: "user" | "assistant" | "tool" | "system";
+  children: unknown;
+}
+
+export function extractText(content: unknown): string {
+  if (typeof content === "string") return content;
+  if (Array.isArray(content)) {
+    return content
+      .filter((c) => c?.type === "text")
+      .map((c) => c.text ?? "")
+      .join("");
+  }
+  return "";
+}
+
+export function Message({ children, role }: MessageProps) {
+  const text = extractText(children);
+  if (!text) return null;
+
+  if (role === "user") {
+    return (
+      <Box gap={1} paddingLeft={1}>
+        <Text color={ACCENT} dimColor>
+          ▸
+        </Text>
+        <Text color="white">{text}</Text>
+      </Box>
+    );
+  }
+
+  if (role === "assistant") {
+    return (
+      <Box gap={1}>
+        <Text color={ACCENT}>◆</Text>
+        <MessageBody content={text} />
+      </Box>
+    );
+  }
+
+  return null;
+}

package/src/components/ToolCall.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { GREEN, YELLOW, RED } from "@ridit/ink-ui";
+import {
+  FILE_WRITE_TOOLS,
+  FILE_READ_TOOLS,
+  extractFileDiff,
+  getArgDetail,
+  getLabel,
+} from "./toolcall-utils";
+
+interface ToolCallProps {
+  tool: string;
+  args: unknown;
+  status: "running" | "done";
+  tokenCount?: number;
+  duration?: number;
+}
+
+export function ToolCall({ tool, args, status, tokenCount }: ToolCallProps) {
+  const isFileTool = FILE_WRITE_TOOLS.has(tool) || FILE_READ_TOOLS.has(tool);
+  const diff = isFileTool ? extractFileDiff(tool, args) : null;
+  const detail = getArgDetail(tool, args);
+  const isRunning = status === "running";
+  const label = getLabel(tool, isRunning);
+
+  const hasDiffContent = diff && (diff.additions.length > 0 || diff.removals.length > 0);
+
+  return (
+    <Box flexDirection="column" marginLeft={2}>
+      <Box gap={1}>
+        <Text color={isRunning ? YELLOW : GREEN} dimColor={!isRunning}>
+          {isRunning ? "◆" : "✓"}
+        </Text>
+        <Text color={isRunning ? "white" : "gray"} dimColor={!isRunning}>
+          {label}
+        </Text>
+        {detail && (
+          <Text color="gray" dimColor>
+            {detail}
+            {isRunning ? "..." : ""}
+          </Text>
+        )}
+        {!isRunning && tokenCount && (
+          <Text color="gray" dimColor>· {tokenCount} tokens</Text>
+        )}
+      </Box>
+
+      {hasDiffContent && (
+        <Box flexDirection="column" marginLeft={4}>
+          {diff!.removals.map((line, i) => (
+            <Text key={`r${i}`} color={RED} dimColor>
+              {"- "}
+              {line}
+            </Text>
+          ))}
+          {diff!.additions.map((line, i) => (
+            <Text key={`a${i}`} color={GREEN} dimColor>
+              {"+ "}
+              {line}
+            </Text>
+          ))}
+        </Box>
+      )}
+    </Box>
+  );
+}