fraude-code 0.1.0

package/src/components/output/DiffView.tsx

@@ -0,0 +1,202 @@
+import { Box, Text } from "ink";
+import React from "react";
+import { type DiffPatch } from "@/agent/pendingChanges";
+import { THEME } from "@/theme";
+
+interface DiffViewProps {
+  diff?: string;
+  patches?: DiffPatch[];
+}
+
+export default function DiffView({ diff, patches }: DiffViewProps) {
+  if (patches && patches.length > 0) {
+    return (
+      <Box flexDirection="column" paddingY={1}>
+        {patches.map((patch, pIndex) => (
+          <Box key={pIndex} flexDirection="column" marginBottom={1}>
+            {patch.hunks.map((hunk, hIndex) => {
+              let oldLn = hunk.oldStart;
+              let newLn = hunk.newStart;
+
+              return (
+                <Box key={hIndex} flexDirection="column">
+                  {/* Visual separator for hunks/chunks */}
+                  {(pIndex > 0 || hIndex > 0) && (
+                    <Box
+                      borderStyle="single"
+                      borderTop={false}
+                      borderLeft={false}
+                      borderRight={false}
+                      borderColor={THEME.border}
+                      marginY={0}
+                    />
+                  )}
+                  {/* Hunk Header */}
+                  <Box>
+                    <Text color={THEME.primary}>
+                      ┌─ {hunk.oldStart},{hunk.oldLines} → {hunk.newStart},
+                      {hunk.newLines}
+                    </Text>
+                  </Box>
+
+                  {hunk.lines.map((line, lIndex) => {
+                    let type: "add" | "remove" | "context" = "context";
+                    if (line.startsWith("-")) type = "remove";
+                    else if (line.startsWith("+")) type = "add";
+
+                    const content = line.substring(1);
+                    let displayNum = "";
+                    let color = THEME.text;
+
+                    if (type === "remove") {
+                      displayNum = oldLn.toString();
+                      oldLn++;
+                      color = THEME.error;
+                    } else if (type === "add") {
+                      displayNum = newLn.toString();
+                      newLn++;
+                      color = THEME.success;
+                    } else {
+                      displayNum = newLn.toString();
+                      oldLn++;
+                      newLn++;
+                    }
+
+                    return (
+                      <Box key={lIndex}>
+                        <Box
+                          width={4}
+                          marginRight={1}
+                          justifyContent="flex-end"
+                        >
+                          <Text color={THEME.dim}>{displayNum}</Text>
+                        </Box>
+                        <Box>
+                          <Text bold={type !== "context"} color={color}>
+                            {content}
+                          </Text>
+                        </Box>
+                      </Box>
+                    );
+                  })}
+                </Box>
+              );
+            })}
+          </Box>
+        ))}
+      </Box>
+    );
+  }
+
+  if (diff) {
+    /*
+     * Filter out the header lines:
+     * --- @/sample/utils.py	Original
+     * +++ @/sample/utils.py	Modified
+     */
+    const rawLines = diff
+      .split("\n")
+      .filter((line) => !line.startsWith("--- ") && !line.startsWith("+++ "));
+
+    let oldLn = 0;
+    let newLn = 0;
+
+    const parsedLines = rawLines.reduce<
+      {
+        type: "add" | "remove" | "context" | "chunk" | "other";
+        content: string;
+        lineNumber?: number; // focusing on new line number for simplicity or context
+        oldLineNumber?: number;
+      }[]
+    >((acc, line) => {
+      if (line.startsWith("@@")) {
+        const match = line.match(/^@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/);
+        if (match) {
+          oldLn = parseInt(match[1] || "0", 10);
+          newLn = parseInt(match[2] || "0", 10);
+        }
+        if (acc.length > 0) {
+          acc.push({ type: "chunk", content: "..." });
+        }
+        return acc;
+      }
+
+      if (line.startsWith("-")) {
+        acc.push({
+          type: "remove",
+          content: line.substring(1),
+          oldLineNumber: oldLn,
+        });
+        oldLn++;
+      } else if (line.startsWith("+")) {
+        acc.push({
+          type: "add",
+          content: line.substring(1),
+          lineNumber: newLn,
+        });
+        newLn++;
+      } else if (line.startsWith(" ")) {
+        acc.push({
+          type: "context",
+          content: line.substring(1),
+          oldLineNumber: oldLn,
+          lineNumber: newLn,
+        });
+        oldLn++;
+        newLn++;
+      } else {
+        acc.push({ type: "other", content: line });
+      }
+      return acc;
+    }, []);
+
+    return (
+      <Box flexDirection="column" paddingY={1}>
+        {parsedLines.map((item, index) => {
+          if (item.type === "chunk") {
+            return (
+              <Box
+                key={index}
+                borderStyle="single"
+                borderTop={false}
+                borderLeft={false}
+                borderRight={false}
+                borderColor={THEME.border}
+                marginY={0}
+              >
+                {/* Visual separator for chunks */}
+              </Box>
+            );
+          }
+
+          const lineNum = item.lineNumber ? item.lineNumber.toString() : "";
+          const oldLineNum = item.oldLineNumber
+            ? item.oldLineNumber.toString()
+            : "";
+
+          // Determine color
+          let color = THEME.text;
+          if (item.type === "add") color = THEME.success;
+          if (item.type === "remove") color = THEME.error;
+
+          const displayNum = item.type === "remove" ? oldLineNum : lineNum;
+
+          return (
+            <Box key={index}>
+              <Box width={4} marginRight={1} justifyContent="flex-end">
+                <Text color={THEME.dim}>{displayNum}</Text>
+              </Box>
+              <Box>
+                <Text bold={item.type !== "context"} color={color}>
+                  {item.content}
+                </Text>
+              </Box>
+            </Box>
+          );
+        })}
+      </Box>
+    );
+  }
+
+  return null;
+}

package/src/components/output/ErrorView.tsx

@@ -0,0 +1,14 @@
+import { Box, Text } from "ink";
+import { THEME } from "@/theme";
+
+const ErrorView = ({ error }: { error: string }) => {
+  return (
+    <Box marginY={0}>
+      <Text color={THEME.error} bold>
+        ✘ {error}
+      </Text>
+    </Box>
+  );
+};
+
+export default ErrorView;

package/src/components/output/InteractiveServerView.tsx

@@ -0,0 +1,69 @@
+import { Box, Text, useInput } from "ink";
+import { THEME } from "../../theme";
+import { BunApiRouter } from "../../utils/router";
+import { useState, useEffect } from "react";
+
+interface InteractiveServerViewProps {
+  routerId: string;
+}
+
+export default function InteractiveServerView({
+  routerId,
+}: InteractiveServerViewProps) {
+  const [stopped, setStopped] = useState(false);
+
+  // Retrieve the router instance to get details (like port)
+  const router = BunApiRouter.getRouter(routerId);
+  const port = router?.port || 3000;
+
+  useEffect(() => {
+    if (router) {
+      router.onStop = () => {
+        setStopped(true);
+      };
+    }
+  }, [router]);
+
+  useInput((input, key) => {
+    if (stopped) return;
+
+    if (input === "q") {
+      BunApiRouter.stopRouter(routerId);
+      setStopped(true);
+    }
+  });
+
+  if (stopped) {
+    return (
+      <Box borderStyle="round" borderColor={THEME.dim} paddingX={1}>
+        <Text color={THEME.dim}>● </Text>
+        <Text color={THEME.dim}>Server stopped</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor="white"
+      paddingX={1}
+    >
+      <Box>
+        <Text color={THEME.success}>● </Text>
+        <Text bold color={THEME.text}>
+          API Server Running{" "}
+        </Text>
+        <Text color={THEME.dim}>on </Text>
+        <Text color={THEME.primary} underline>
+          http://localhost:{port}
+        </Text>
+      </Box>
+      <Box marginTop={1}>
+        <Text color={THEME.dim} italic>
+          Press 'q' to stop server
+        </Text>
+      </Box>
+    </Box>
+  );
+}

package/src/components/output/KnowledgeView.tsx

@@ -0,0 +1,220 @@
+import { Box, Text } from "ink";
+import { Badge, UnorderedList } from "@inkjs/ui";
+import { THEME } from "@/theme";
+
+// Knowledge type configuration - using simple ASCII symbols
+const TYPE_CONFIG: Record<
+  string,
+  { icon: string; label: string; color: string }
+> = {
+  decision: { icon: "*", label: "DEC", color: THEME.success },
+  fact: { icon: "-", label: "FCT", color: THEME.info },
+  concept: { icon: "+", label: "CON", color: "#cba6f7" }, // Mauve
+  reference: { icon: ">", label: "REF", color: "#fab387" }, // Peach
+};
+
+interface KnowledgeItem {
+  content: string;
+  type: string;
+}
+
+interface KnowledgeSummaryData {
+  decisions: KnowledgeItem[];
+  facts: KnowledgeItem[];
+  concepts: KnowledgeItem[];
+  references: KnowledgeItem[];
+  // summaries: KnowledgeItem[];
+}
+
+interface KnowledgeSearchData {
+  query: string;
+  results: KnowledgeItem[];
+}
+
+export type KnowledgeViewData =
+  | { mode: "summary"; data: KnowledgeSummaryData }
+  | { mode: "search"; data: KnowledgeSearchData }
+  | { mode: "empty"; message?: string };
+
+interface KnowledgeViewProps {
+  data: KnowledgeViewData;
+}
+
+// Helper to truncate text
+const truncate = (str: string, len: number): string => {
+  const cleaned = str.replace(/\n/g, " ").trim();
+  return cleaned.length > len ? `${cleaned.slice(0, len)}...` : cleaned;
+};
+
+// Section renderer for summary view
+function KnowledgeSection({
+  title,
+  type,
+  items,
+  limit,
+}: {
+  title: string;
+  type: string;
+  items: KnowledgeItem[];
+  limit: number;
+}) {
+  if (items.length === 0) return null;
+
+  const config = TYPE_CONFIG[type] || {
+    icon: "-",
+    label: type.slice(0, 3).toUpperCase(),
+    color: THEME.dim,
+  };
+
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Box gap={1}>
+        <Text color={config.color}>{config.icon}</Text>
+        <Text bold color={THEME.text}>
+          {title}
+        </Text>
+        <Text color={THEME.dim}>-</Text>
+        <Text color={THEME.dim}>{items.length}</Text>
+      </Box>
+      <Box flexDirection="column" paddingLeft={2}>
+        <UnorderedList>
+          {items.slice(0, limit).map((item, i) => (
+            <UnorderedList.Item key={i}>
+              <Text color={THEME.text}>{truncate(item.content, 58)}</Text>
+            </UnorderedList.Item>
+          ))}
+        </UnorderedList>
+        {items.length > limit && (
+          <Text color={THEME.dim} italic>
+            {"    "}... {items.length - limit} more
+          </Text>
+        )}
+      </Box>
+    </Box>
+  );
+}
+
+// Search result item
+function SearchResultItem({ item }: { item: KnowledgeItem }) {
+  const config = TYPE_CONFIG[item.type] || {
+    icon: "-",
+    label: item.type.slice(0, 3).toUpperCase(),
+    color: THEME.dim,
+  };
+
+  return (
+    <Box gap={1}>
+      <Badge color={config.color}>{config.label}</Badge>
+      <Text color={THEME.text}>{truncate(item.content, 52)}</Text>
+    </Box>
+  );
+}
+
+export default function KnowledgeView({ data }: KnowledgeViewProps) {
+  if (data.mode === "empty") {
+    return (
+      <Box flexDirection="column">
+        <Text bold color={THEME.primary}>
+          Project Knowledge
+        </Text>
+        <Box paddingY={1}>
+          <Text color={THEME.dim}>
+            {data.message ||
+              "No knowledge stored yet. Start a conversation to build context."}
+          </Text>
+        </Box>
+        <Box>
+          <Text color={THEME.dim}>Tip: Use </Text>
+          <Text color={THEME.primary}>/knowledge {"<query>"}</Text>
+          <Text color={THEME.dim}> to search</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  if (data.mode === "search") {
+    const { query, results } = data.data;
+
+    if (results.length === 0) {
+      return (
+        <Box flexDirection="column">
+          <Box gap={1}>
+            <Text bold color={THEME.primary}>
+              Search:
+            </Text>
+            <Text color={THEME.dim}>"{truncate(query, 40)}"</Text>
+          </Box>
+          <Box paddingY={1}>
+            <Text color={THEME.dim}>No results found</Text>
+          </Box>
+          <Box>
+            <Text color={THEME.dim}>Try a different query or use </Text>
+            <Text color={THEME.primary}>/knowledge</Text>
+            <Text color={THEME.dim}> to see all items</Text>
+          </Box>
+        </Box>
+      );
+    }
+
+    return (
+      <Box flexDirection="column">
+        <Box gap={1} marginBottom={1}>
+          <Text bold color={THEME.primary}>
+            Search:
+          </Text>
+          <Text color={THEME.dim}>
+            "{truncate(query, 30)}" - {results.length} found
+          </Text>
+        </Box>
+        <Box flexDirection="column" gap={1}>
+          {results.map((item, i) => (
+            <SearchResultItem key={i} item={item} />
+          ))}
+        </Box>
+      </Box>
+    );
+  }
+
+  // Summary view
+  const { decisions, facts, concepts, references } = data.data;
+  const total =
+    decisions.length + facts.length + concepts.length + references.length;
+  // + summaries.length;
+
+  return (
+    <Box flexDirection="column">
+      <Box gap={1} marginBottom={1}>
+        <Text bold color={THEME.primary}>
+          Project Knowledge
+        </Text>
+        <Text color={THEME.dim}>- {total} items</Text>
+      </Box>
+      <Box flexDirection="column">
+        <KnowledgeSection
+          title="Decisions"
+          type="decision"
+          items={decisions}
+          limit={4}
+        />
+        <KnowledgeSection title="Facts" type="fact" items={facts} limit={4} />
+        <KnowledgeSection
+          title="Concepts"
+          type="concept"
+          items={concepts}
+          limit={3}
+        />
+        <KnowledgeSection
+          title="References"
+          type="reference"
+          items={references}
+          limit={3}
+        />
+      </Box>
+      <Box marginTop={1}>
+        <Text color={THEME.dim}>Tip: Use </Text>
+        <Text color={THEME.primary}>/knowledge {"<query>"}</Text>
+        <Text color={THEME.dim}> to search</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/components/output/MarkdownView.tsx

@@ -0,0 +1,15 @@
+import Markdown from "@inkkit/ink-markdown";
+import Chalk from "chalk";
+import { THEME } from "@/theme";
+
+export default function MarkdownView({ markdown }: { markdown: string }) {
+  return (
+    <Markdown
+      code={Chalk.white}
+      codespan={Chalk.white}
+      heading={Chalk.hex(THEME.primary)}
+    >
+      {markdown}
+    </Markdown>
+  );
+}

package/src/components/output/ModelSelectView.tsx

@@ -0,0 +1,71 @@
+import { Box, Text } from "ink";
+import { Select } from "@inkjs/ui";
+import React from "react";
+import useSettingsStore from "@/store/useSettingsStore";
+import useFraudeStore from "@/store/useFraudeStore";
+import { THEME } from "@/theme";
+
+export default function ModelSelectView() {
+  const { models } = useSettingsStore();
+  const pendingSelection = useFraudeStore(
+    (state) => state.pendingModelSelection,
+  );
+  const resolveModelSelection = useFraudeStore(
+    (state) => state.resolveModelSelection,
+  );
+
+  if (!pendingSelection) {
+    return null;
+  }
+
+  const { originalModel, errorMessage } = pendingSelection;
+
+  // Filter out the model that failed and get available alternatives
+  const availableModels = models.filter((m) => m.name !== originalModel);
+
+  const options = [
+    { label: "✗ Cancel (abort the request)", value: "__cancel__" },
+    ...availableModels.map((model) => ({
+      label: `→ ${model.name} (${model.type})`,
+      value: model.name,
+    })),
+  ];
+
+  const handleSelect = (value: string) => {
+    if (value === "__cancel__") {
+      resolveModelSelection(null);
+    } else {
+      resolveModelSelection(value);
+    }
+  };
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="single"
+      borderColor={THEME.warning}
+      paddingX={1}
+    >
+      <Text color={THEME.warning}>⚠ Rate Limit Exceeded</Text>
+      <Box marginY={1} flexDirection="column">
+        <Text>
+          Model{" "}
+          <Text bold color={THEME.error}>
+            {originalModel}
+          </Text>{" "}
+          hit its rate limit.
+        </Text>
+      </Box>
+      <Box marginBottom={1}>
+        <Text dimColor wrap="wrap">
+          {errorMessage.slice(0, 150)}
+          {errorMessage.length > 150 ? "..." : ""}
+        </Text>
+      </Box>
+      <Text>Select an alternative model:</Text>
+      <Box marginTop={0}>
+        <Select options={options} onChange={handleSelect} />
+      </Box>
+    </Box>
+  );
+}

package/src/components/output/ReasoningView.tsx

@@ -0,0 +1,21 @@
+import { Box, Text } from "ink";
+import { THEME } from "@/theme";
+
+interface ReasoningViewProps {
+  content: string;
+  duration?: number;
+}
+
+export default function ReasoningView({
+  content,
+  duration,
+}: ReasoningViewProps) {
+  return (
+    <Box flexDirection="column" marginY={0}>
+      <Text color={THEME.dim}>
+        [thinking] {content}
+        {duration ? ` (${duration.toFixed(1)}s)` : ""}
+      </Text>
+    </Box>
+  );
+}

package/src/components/output/ToolCallView.tsx

@@ -0,0 +1,45 @@
+import { Box, Text } from "ink";
+import { THEME } from "@/theme";
+
+interface ToolCallViewProps {
+  action: string;
+  details?: string;
+  result?: string;
+  duration?: string;
+}
+
+export default function ToolCallView({
+  action,
+  details,
+  result,
+  duration,
+}: ToolCallViewProps) {
+  // Truncate result preview to 80 chars
+  const resultPreview = result
+    ? result.length > 80
+      ? result.slice(0, 77) + "..."
+      : result
+    : null;
+
+  return (
+    <Box flexDirection="column" marginY={0}>
+      <Box>
+        <Text color={THEME.primary}>◇</Text>
+        <Text> </Text>
+        <Text color={THEME.text}>{action}</Text>
+        {details && (
+          <Text color={THEME.dim}>
+            {" "}
+            {details.length > 50 ? details.slice(0, 47) + "..." : details}
+          </Text>
+        )}
+        {duration && <Text color={THEME.dim}> {duration}</Text>}
+      </Box>
+      {resultPreview && (
+        <Box paddingLeft={2}>
+          <Text color={THEME.dim}>↳ {resultPreview}</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}