@ridit/lens 0.1.0

package/src/components/timeline/CommitList.tsx

@@ -0,0 +1,174 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { Commit } from "../../utils/git";
+
+const ACCENT = "#FF8C00";
+
+type Props = {
+  commits: Commit[];
+  selectedIndex: number;
+  scrollOffset: number;
+  visibleCount: number;
+  searchQuery: string;
+  width: number;
+};
+
+function formatRefs(refs: string): string {
+  if (!refs) return "";
+  return refs
+    .split(",")
+    .map((r) => r.trim())
+    .filter(Boolean)
+    .map((r) => {
+      if (r.startsWith("HEAD -> ")) return `[${r.slice(8)}]`;
+      if (r.startsWith("origin/")) return `[${r}]`;
+      if (r.startsWith("tag: ")) return `<${r.slice(5)}>`;
+      return `[${r}]`;
+    })
+    .join(" ");
+}
+
+function shortDate(dateStr: string): string {
+  // "2026-03-12 14:22:01 +0530" → "Mar 12"
+  try {
+    const d = new Date(dateStr);
+    return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+  } catch {
+    return dateStr.slice(0, 10);
+  }
+}
+
+function graphSymbol(
+  commit: Commit,
+  index: number,
+): { symbol: string; color: string } {
+  if (commit.parents.length > 1) return { symbol: "⎇", color: "magenta" };
+  if (index === 0) return { symbol: "◉", color: ACCENT };
+  return { symbol: "●", color: "gray" };
+}
+
+export function CommitList({
+  commits,
+  selectedIndex,
+  scrollOffset,
+  visibleCount,
+  searchQuery,
+  width,
+}: Props) {
+  const visible = commits.slice(scrollOffset, scrollOffset + visibleCount);
+
+  return (
+    <Box flexDirection="column" width={width}>
+      {/* header */}
+      <Box paddingX={1} marginBottom={1}>
+        <Text color="gray" dimColor>
+          {"─".repeat(Math.max(0, width - 2))}
+        </Text>
+      </Box>
+      <Box paddingX={1} marginBottom={1}>
+        <Text color={ACCENT} bold>
+          {" COMMITS "}
+        </Text>
+        <Text color="gray" dimColor>
+          {commits.length} total
+          {searchQuery ? `  / ${searchQuery}` : ""}
+        </Text>
+      </Box>
+
+      {visible.map((commit, i) => {
+        const absoluteIndex = scrollOffset + i;
+        const isSelected = absoluteIndex === selectedIndex;
+        const { symbol, color } = graphSymbol(commit, absoluteIndex);
+        const refs = formatRefs(commit.refs);
+        const date = shortDate(commit.date);
+
+        // truncate message to fit width
+        const prefixLen = 14; // symbol + hash + date
+        const maxMsg = Math.max(10, width - prefixLen - 3);
+        const msg =
+          commit.message.length > maxMsg
+            ? commit.message.slice(0, maxMsg - 1) + "…"
+            : commit.message;
+
+        return (
+          <Box key={commit.hash} paddingX={1} flexDirection="column">
+            {/* graph line above (not first) */}
+            {i > 0 && (
+              <Text color="gray" dimColor>
+                {"│"}
+              </Text>
+            )}
+            <Box gap={1}>
+              {/* selection indicator */}
+              <Text color={isSelected ? ACCENT : "gray"}>
+                {isSelected ? "▶" : " "}
+              </Text>
+
+              {/* graph node */}
+              <Text color={isSelected ? ACCENT : color}>{symbol}</Text>
+
+              {/* short hash */}
+              <Text
+                color={isSelected ? "white" : "gray"}
+                dimColor={!isSelected}
+              >
+                {commit.shortHash}
+              </Text>
+
+              {/* date */}
+              <Text color="cyan" dimColor={!isSelected}>
+                {date}
+              </Text>
+
+              {/* message */}
+              <Text
+                color={isSelected ? "white" : "gray"}
+                bold={isSelected}
+                wrap="truncate"
+              >
+                {msg}
+              </Text>
+            </Box>
+
+            {/* refs on selected */}
+            {isSelected && refs && (
+              <Box paddingLeft={4}>
+                <Text color="yellow">{refs}</Text>
+              </Box>
+            )}
+
+            {/* stat summary on selected */}
+            {isSelected && (
+              <Box paddingLeft={4} gap={2}>
+                <Text color="gray" dimColor>
+                  {commit.author}
+                </Text>
+                {commit.filesChanged > 0 && (
+                  <>
+                    <Text color="green">+{commit.insertions}</Text>
+                    <Text color="red">-{commit.deletions}</Text>
+                    <Text color="gray" dimColor>
+                      {commit.filesChanged} file
+                      {commit.filesChanged !== 1 ? "s" : ""}
+                    </Text>
+                  </>
+                )}
+              </Box>
+            )}
+          </Box>
+        );
+      })}
+
+      {/* scroll hint */}
+      <Box paddingX={1} marginTop={1}>
+        <Text color="gray" dimColor>
+          {scrollOffset > 0 ? "↑ more above" : ""}
+          {scrollOffset > 0 && scrollOffset + visibleCount < commits.length
+            ? "  "
+            : ""}
+          {scrollOffset + visibleCount < commits.length ? "↓ more below" : ""}
+        </Text>
+      </Box>
+    </Box>
+  );
+}

package/src/components/timeline/TimelineChat.tsx

@@ -0,0 +1,167 @@
+import React, { useState } from "react";
+import { Box, Text, Static } from "ink";
+import TextInput from "ink-text-input";
+import type { Commit } from "../../utils/git";
+import { summarizeTimeline } from "../../utils/git";
+import type { Provider } from "../../types/config";
+import { callChat } from "../../utils/chat";
+
+const ACCENT = "#FF8C00";
+
+type TLMessage = { role: "user" | "assistant"; content: string; type: "text" };
+
+type StaticMsg =
+  | { kind: "user"; content: string; id: number }
+  | { kind: "assistant"; content: string; id: number };
+
+type Props = {
+  commits: Commit[];
+  repoPath: string;
+  provider: Provider | null;
+  onExit: () => void;
+  width: number;
+  height: number;
+};
+
+const SUGGESTIONS = [
+  "which commit changed the most files?",
+  "who made the most commits?",
+  "what happened last week?",
+  "show me all merge commits",
+  "which day had the most activity?",
+];
+
+let msgId = 0;
+
+export function TimelineChat({
+  commits,
+  provider,
+  onExit,
+  width,
+  height,
+}: Props) {
+  const [committed, setCommitted] = useState<StaticMsg[]>([]);
+  const [live, setLive] = useState<TLMessage[]>([]);
+  const [input, setInput] = useState("");
+  const [thinking, setThinking] = useState(false);
+
+  const divider = "─".repeat(Math.max(0, width - 2));
+
+  const systemPrompt = `You are a git history analyst. You have access to the full commit timeline of a repository.
+Answer questions about the git history concisely and accurately.
+Use only the data provided — never make up commits or dates.
+Keep answers short. Plain text only, no markdown headers.
+
+${summarizeTimeline(commits)}`;
+
+  const sendMessage = async (text: string) => {
+    if (!text.trim() || thinking || !provider) return;
+
+    const userTL: TLMessage = { role: "user", content: text, type: "text" };
+    const nextLive = [...live, userTL];
+
+    setCommitted((prev) => [
+      ...prev,
+      { kind: "user", content: text, id: ++msgId },
+    ]);
+    setLive(nextLive);
+    setThinking(true);
+    setInput("");
+
+    try {
+      const raw = await callChat(provider, systemPrompt, nextLive as any);
+      const answer = typeof raw === "string" ? raw : "(no response)";
+      const assistantTL: TLMessage = {
+        role: "assistant",
+        content: answer,
+        type: "text",
+      };
+      setLive((prev) => [...prev, assistantTL]);
+      setCommitted((prev) => [
+        ...prev,
+        { kind: "assistant", content: answer, id: ++msgId },
+      ]);
+    } catch (e) {
+      const errText = `Error: ${e instanceof Error ? e.message : String(e)}`;
+      setCommitted((prev) => [
+        ...prev,
+        { kind: "assistant", content: errText, id: ++msgId },
+      ]);
+    } finally {
+      setThinking(false);
+    }
+  };
+
+  return (
+    <Box width={width} flexDirection="column">
+      <Box paddingX={1}>
+        <Text color="gray" dimColor>
+          {divider}
+        </Text>
+      </Box>
+      <Box paddingX={1} marginBottom={1} gap={2}>
+        <Text color={ACCENT} bold>
+          ASK TIMELINE
+        </Text>
+        <Text color="gray" dimColor>
+          tab · esc to go back
+        </Text>
+      </Box>
+
+      <Static items={committed}>
+        {(msg) => (
+          <Box key={msg.id} paddingX={1} marginBottom={1} gap={1}>
+            <Text color={msg.kind === "user" ? "gray" : ACCENT}>
+              {msg.kind === "user" ? ">" : "*"}
+            </Text>
+            <Text color="white" wrap="wrap">
+              {msg.content}
+            </Text>
+          </Box>
+        )}
+      </Static>
+
+      {thinking && (
+        <Box paddingX={1} marginBottom={1} gap={1}>
+          <Text color={ACCENT}>*</Text>
+          <Text color="gray" dimColor>
+            thinking…
+          </Text>
+        </Box>
+      )}
+
+      {committed.length === 0 && !thinking && (
+        <Box paddingX={1} flexDirection="column" marginBottom={1}>
+          <Text color="gray" dimColor>
+            try asking:
+          </Text>
+          {SUGGESTIONS.map((s, i) => (
+            <Text key={i} color="gray" dimColor>
+              {" "}
+              {s}
+            </Text>
+          ))}
+        </Box>
+      )}
+
+      <Box paddingX={1}>
+        <Text color="gray" dimColor>
+          {divider}
+        </Text>
+      </Box>
+      <Box paddingX={1} paddingY={1} gap={1}>
+        <Text color={ACCENT}>{">"}</Text>
+        <TextInput
+          value={input}
+          onChange={setInput}
+          onSubmit={sendMessage}
+          placeholder={
+            provider
+              ? "ask about the timeline…"
+              : "no provider — run lens provider first"
+          }
+        />
+      </Box>
+    </Box>
+  );
+}