fraude-code 0.1.0

package/src/components/input/InputBox.tsx

@@ -0,0 +1,371 @@
+import { useState, useMemo, useCallback, useEffect } from "react";
+import { useApp, Box, Text, useInput } from "ink";
+import { TextInput } from "@inkjs/ui";
+import QueryHandler from "@/utils/queryHandler";
+import useSettingsStore from "@/store/useSettingsStore";
+import useFraudeStore from "@/store/useFraudeStore";
+import CommandCenter from "@/commands";
+import { addHistory } from "@/config/settings";
+import CommandSuggestions from "./CommandSuggestions";
+import FileSuggestions from "./FileSuggestions";
+import {
+  getFileSuggestions,
+  type FileSuggestion,
+} from "@/utils/fileSuggestions";
+import { shortenPath } from "@/utils";
+
+import { getModelDisplayId } from "@/types/Model";
+import { THEME } from "@/theme";
+
+const InputBoxComponent = () => {
+  const { exit } = useApp();
+  const [inputKey, setInputKey] = useState(0);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [currentInput, setCurrentInput] = useState("");
+  const [historyIndex, setHistoryIndex] = useState(-1);
+  const [allFiles, setAllFiles] = useState<FileSuggestion[]>([]);
+  const [scrollOffset, setScrollOffset] = useState(0);
+  const [ghostIndex, setGhostIndex] = useState(0);
+
+  useEffect(() => {
+    getFileSuggestions(process.cwd()).then(setAllFiles);
+  }, []);
+
+  const history = useSettingsStore((state) => state.history);
+  const models = useSettingsStore((state) => state.models);
+  // Create display identifiers that include provider to differentiate same-name models
+  const modelNames = useMemo(
+    () => models.map((m) => getModelDisplayId(m)).sort(),
+    [models],
+  );
+  const MAX_VISIBLE_SUGGESTIONS = 5;
+
+  const suggestions = useMemo(() => {
+    const allCommands = CommandCenter.getAllCommands();
+    const suggestions = allCommands.map((s) => {
+      if (s.usage?.includes("<model-name>")) {
+        const options = [];
+        for (const modelName of modelNames) {
+          const renderedUsage = s.usage.replace("<model-name>", modelName);
+          options.push(renderedUsage);
+        }
+        return { ...s, renderedOptions: options };
+      }
+      return s;
+    });
+    return suggestions;
+  }, [modelNames]);
+
+  const fileTokenMatch = useMemo(
+    () => currentInput.match(/@([^ ]*)$/),
+    [currentInput],
+  );
+  const isFileMode = !!fileTokenMatch;
+  const fileQuery = fileTokenMatch ? fileTokenMatch[1] : "";
+  const filePrefix = fileTokenMatch
+    ? currentInput.slice(0, fileTokenMatch.index! + 1)
+    : "";
+
+  const fileDropdownSuggestions = useMemo(() => {
+    if (!isFileMode || !allFiles.length) return [];
+    return allFiles.filter((f) =>
+      f.path.toLowerCase().includes(fileQuery!.toLowerCase()),
+    );
+  }, [isFileMode, allFiles, fileQuery]);
+  const dropdownSuggestions = useMemo(() => {
+    if (!currentInput.startsWith("/")) return [];
+    const filteredTemplates = suggestions
+      .filter((s) => {
+        if (s.renderedOptions && s.renderedOptions.length > 0) {
+          const check = s.renderedOptions.find((option) => {
+            return option.startsWith(currentInput);
+          });
+          return check != undefined;
+        }
+        return s.usage?.startsWith(currentInput) ?? false;
+      })
+      .slice(0, MAX_VISIBLE_SUGGESTIONS);
+    return filteredTemplates;
+  }, [suggestions, currentInput]);
+
+  const dynamicSuggestions = useMemo(() => {
+    const allSuggestions = suggestions.flatMap((s) => {
+      if (s.renderedOptions && s.renderedOptions.length > 0) {
+        return s.renderedOptions;
+      }
+      return s.usage || "";
+    });
+
+    const dropdownSuggestion = dropdownSuggestions[selectedIndex];
+    if (dropdownSuggestion) {
+      // Put the dropdown suggestion first so it shows as ghost text
+      const renderedSuggestion =
+        dropdownSuggestion.renderedOptions &&
+        dropdownSuggestion.renderedOptions.length > 0
+          ? dropdownSuggestion.renderedOptions.find((option) =>
+              option.startsWith(currentInput),
+            )
+          : dropdownSuggestion.usage || "";
+      if (renderedSuggestion) {
+        return [
+          renderedSuggestion,
+          ...allSuggestions.filter((s) => s !== renderedSuggestion),
+        ];
+      }
+    }
+
+    // File suggestions
+    if (isFileMode && fileDropdownSuggestions.length > 0) {
+      const selectedFile = fileDropdownSuggestions[selectedIndex];
+      if (selectedFile) {
+        return [filePrefix + selectedFile.path + " "];
+      }
+    }
+
+    return allSuggestions;
+  }, [
+    suggestions,
+    dropdownSuggestions,
+    selectedIndex,
+    currentInput,
+    isFileMode,
+    fileDropdownSuggestions,
+    filePrefix,
+  ]);
+
+  const hiddenSuggestions = useMemo(() => {
+    if (currentInput.startsWith("/")) {
+      return new Set(
+        dynamicSuggestions
+          .filter((s) => s.startsWith(currentInput))
+          .slice(0, ghostIndex),
+      );
+    }
+    return new Set();
+  }, [dynamicSuggestions, currentInput, ghostIndex]);
+
+  // Calculate what ghost text the TextInput is ACTUALLY showing
+  // This mirrors TextInput's internal logic: first suggestion that starts with input
+  const actualGhostTextSuggestion = useMemo(() => {
+    if (currentInput.length === 0) return null;
+    const match = dynamicSuggestions.find((s) => s.startsWith(currentInput));
+    if (!match) return null;
+    const currentArg = currentInput.split(" ").length;
+    const dropdownSuggestion = dropdownSuggestions[selectedIndex];
+    if (
+      dropdownSuggestion?.usage &&
+      dropdownSuggestion.usage.split(" ")[currentArg] !== "<model-name>"
+    ) {
+      return dropdownSuggestion.usage.replace(/<[^>]+>.*$/, "");
+    }
+    return match.replace(/<[^>]+>.*$/, "");
+  }, [currentInput, dynamicSuggestions, selectedIndex, dropdownSuggestions]);
+
+  useInput((input, key) => {
+    if (key.tab) {
+      if (isFileMode && fileDropdownSuggestions.length > 0) {
+        const selectedFile = fileDropdownSuggestions[selectedIndex];
+        if (selectedFile) {
+          const suggestion = filePrefix + selectedFile.path + " ";
+          if (suggestion !== currentInput) {
+            setCurrentInput(suggestion);
+            setInputKey((k) => k + 1);
+            setHistoryIndex(-1);
+            return;
+          }
+        }
+      }
+
+      if (
+        actualGhostTextSuggestion &&
+        actualGhostTextSuggestion.toLowerCase() != currentInput.toLowerCase()
+      ) {
+        setCurrentInput(actualGhostTextSuggestion);
+        setInputKey((k) => k + 1);
+        setHistoryIndex(-1);
+      } else {
+        useFraudeStore.setState({
+          executionMode: ((useFraudeStore.getState().executionMode + 1) % 3) as
+            | 0
+            | 1
+            | 2,
+        });
+      }
+      return;
+    }
+
+    // If input starts with "/" and there are multiple suggestions, use arrow keys for command dropdown
+    if (currentInput.startsWith("/") && dropdownSuggestions.length > 1) {
+      if (key.upArrow && selectedIndex > 0) {
+        setSelectedIndex(selectedIndex - 1);
+        return;
+      }
+      if (key.downArrow && selectedIndex < dropdownSuggestions.length - 1) {
+        const newIndex = selectedIndex + 1;
+        setSelectedIndex(newIndex);
+        return;
+      }
+    }
+
+    if (currentInput.startsWith("/") && dropdownSuggestions.length === 1) {
+      const filtered = dynamicSuggestions.filter((s) =>
+        s.startsWith(currentInput),
+      );
+      const isModelArg =
+        dropdownSuggestions[0]?.usage.includes("<model-name>") ?? false;
+      if (isModelArg && filtered.length > 0) {
+        setGhostIndex((ghostIndex) => (ghostIndex + 1) % filtered.length);
+        return;
+      }
+    }
+
+    // Input starts with @ (or contains @ at end)
+    if (isFileMode && fileDropdownSuggestions.length > 1) {
+      const listLen = fileDropdownSuggestions.length;
+      if (key.upArrow) {
+        const newIndex = selectedIndex - 1;
+        if (newIndex >= 0) {
+          setSelectedIndex(newIndex);
+          if (newIndex < scrollOffset) {
+            setScrollOffset(newIndex);
+          } else if (newIndex >= scrollOffset + MAX_VISIBLE_SUGGESTIONS) {
+            setScrollOffset(newIndex - MAX_VISIBLE_SUGGESTIONS + 1);
+          }
+          return;
+        }
+      }
+      if (key.downArrow) {
+        const newIndex = selectedIndex + 1;
+        if (newIndex < listLen) {
+          setSelectedIndex(newIndex);
+          if (newIndex >= scrollOffset + MAX_VISIBLE_SUGGESTIONS) {
+            setScrollOffset(newIndex - MAX_VISIBLE_SUGGESTIONS + 1);
+          } else if (newIndex < scrollOffset) {
+            setScrollOffset(newIndex);
+          }
+          return;
+        }
+      }
+    }
+
+    // // Otherwise, use arrow keys for history navigation
+    // // Note: history[0] is the most recent item in useFraudeStore
+    if (key.upArrow && history.length > 0) {
+      const newIndex =
+        historyIndex < history.length - 1 ? historyIndex + 1 : historyIndex;
+      setHistoryIndex(newIndex);
+      const historyItem = history[newIndex];
+      if (historyItem) {
+        setCurrentInput(historyItem);
+        setInputKey((k) => k + 1);
+      }
+      return;
+    }
+    // Down arrow: go to newer history or clear input
+    if (key.downArrow) {
+      if (historyIndex > 0) {
+        const newIndex = historyIndex - 1;
+        setHistoryIndex(newIndex);
+        const historyItem = history[newIndex];
+        if (historyItem) {
+          setCurrentInput(historyItem);
+          setInputKey((k) => k + 1);
+        }
+      } else {
+        // Clear input when at the end of history or not in history
+        setHistoryIndex(-1);
+        setCurrentInput("");
+        setInputKey((k) => k + 1);
+      }
+      return;
+    }
+  });
+
+  const handleChange = useCallback((value: string) => {
+    setCurrentInput(value);
+    setSelectedIndex(0);
+    setScrollOffset(0);
+    setGhostIndex(0);
+  }, []);
+
+  const processSubmit = () => {
+    const v = currentInput;
+    if (v.trim().toLowerCase() === "exit") {
+      exit();
+      return;
+    }
+    if (v.trim() === "") return;
+    addHistory(v);
+    setCurrentInput("");
+    setInputKey((k) => k + 1); // Clear input by remounting TextInput
+    QueryHandler(v);
+  };
+
+  const getExecutionMode = (mode: 0 | 1 | 2) => {
+    switch (mode) {
+      case 0:
+        return "Fast";
+      case 1:
+        return "Planning";
+      case 2:
+        return "Ask";
+    }
+  };
+
+  const status = useFraudeStore((state) => state.status);
+  if (status === 3) return null;
+
+  return (
+    <Box flexDirection="column">
+      <Box paddingX={0}>
+        <Text bold color={THEME.primary}>
+          &gt;{" "}
+        </Text>
+        <Box flexGrow={1}>
+          <TextInput
+            key={inputKey}
+            placeholder="Type a command or ask a question..."
+            onChange={handleChange}
+            suggestions={dynamicSuggestions.filter(
+              (s) => !hiddenSuggestions.has(s),
+            )}
+            defaultValue={currentInput}
+            onSubmit={processSubmit}
+          />
+        </Box>
+      </Box>
+      <Box marginTop={1}>
+        {dropdownSuggestions.length > 0 ? (
+          <CommandSuggestions
+            selectedIndex={selectedIndex}
+            filteredTemplates={dropdownSuggestions}
+          />
+        ) : (
+          <Box width={70} justifyContent="space-between" paddingX={1}>
+            {fileDropdownSuggestions.length > 0 ? (
+              <FileSuggestions
+                selectedIndex={selectedIndex - scrollOffset}
+                suggestions={fileDropdownSuggestions.slice(
+                  scrollOffset,
+                  scrollOffset + MAX_VISIBLE_SUGGESTIONS,
+                )}
+              />
+            ) : (
+              <>
+                <Text color={THEME.dim}>{shortenPath(process.cwd())}</Text>
+                <Text color={THEME.primaryLight}>
+                  <Text bold>
+                    {getExecutionMode(useFraudeStore.getState().executionMode)}{" "}
+                    [Tab]
+                  </Text>
+                </Text>
+              </>
+            )}
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+export default InputBoxComponent;

package/src/components/output/CheckpointView.tsx

@@ -0,0 +1,13 @@
+import { Box, Text } from "ink";
+import type { OutputItem } from "@/types/OutputItem";
+import { THEME } from "@/theme";
+
+const CheckpointView = ({ item }: { item: OutputItem }) => {
+  return (
+    <Box flexDirection="column">
+      {item.content && <Text color={THEME.primaryDim}>{item.content}</Text>}
+    </Box>
+  );
+};
+
+export default CheckpointView;

package/src/components/output/CommandView.tsx

@@ -0,0 +1,13 @@
+import { Box, Text } from "ink";
+import { THEME } from "@/theme";
+
+const CommandView = ({ command }: { command: string }) => {
+  return (
+    <Box marginY={0}>
+      <Text color={THEME.dim}>&gt; </Text>
+      <Text color={THEME.text}>{command}</Text>
+    </Box>
+  );
+};
+
+export default CommandView;

package/src/components/output/CommentView.tsx

@@ -0,0 +1,12 @@
+import { Box, Text } from "ink";
+import { THEME } from "@/theme";
+
+const CommentView = ({ comment }: { comment: string }) => {
+  return (
+    <Box marginY={0}>
+      <Text color={THEME.dim}># {comment}</Text>
+    </Box>
+  );
+};
+
+export default CommentView;

package/src/components/output/ConfirmationView.tsx

@@ -0,0 +1,179 @@
+import { Box, Text } from "ink";
+import { Select, TextInput } from "@inkjs/ui";
+import React, { useState, useMemo } from "react";
+import pendingChanges from "@/agent/pendingChanges";
+import DiffView from "./DiffView";
+import QueryHandler from "@/utils/queryHandler";
+import { projectPath } from "@/utils";
+import { type PendingChange } from "@/agent/pendingChanges";
+
+import useFraudeStore from "@/store/useFraudeStore";
+import { THEME } from "@/theme";
+
+export default function ConfirmationView() {
+  const [status, setStatus] = useState<
+    "pending" | "applied" | "rejected" | "viewing_file" | "revising"
+  >("pending");
+  const [selectedFile, setSelectedFile] = useState<string | null>(null);
+
+  // Get grouped changes directly from manager
+  const groupedChanges = useMemo(
+    () => pendingChanges.getAllChangesGrouped(),
+    [],
+  );
+  const filePaths = Object.keys(groupedChanges);
+
+  const handleMainSelect = (value: string) => {
+    if (value === "apply_all") {
+      pendingChanges.applyAll().then(() => {
+        setStatus("applied");
+        useFraudeStore.setState({ status: 0, statusText: "" });
+      });
+    } else if (value === "reject_all") {
+      pendingChanges.rejectAll();
+      setStatus("rejected");
+      useFraudeStore.setState({ status: 0, statusText: "" });
+    } else if (value.startsWith("view_")) {
+      const path = value.replace("view_", "");
+      setSelectedFile(path);
+      setStatus("viewing_file");
+    }
+  };
+
+  const handleFileAction = (value: string) => {
+    if (value === "back") {
+      setSelectedFile(null);
+      setStatus("pending");
+    }
+  };
+
+  if (status === "applied") {
+    return (
+      <Box borderStyle="single" borderColor={THEME.success} paddingX={1}>
+        <Text color={THEME.success}>✓ Changes applied</Text>
+      </Box>
+    );
+  }
+
+  if (status === "rejected") {
+    return (
+      <Box borderStyle="single" borderColor={THEME.error} paddingX={1}>
+        <Text color={THEME.error}>✗ Changes rejected</Text>
+      </Box>
+    );
+  }
+
+  // View specific file details
+  if (status === "viewing_file" && selectedFile) {
+    const changes = groupedChanges[selectedFile];
+
+    return (
+      <Box
+        flexDirection="column"
+        borderStyle="single"
+        borderColor={THEME.border}
+        paddingX={1}
+      >
+        <Text bold color={THEME.primary}>
+          {projectPath(selectedFile)}
+        </Text>
+        <Box flexDirection="column" marginY={0}>
+          {changes?.map((change) => (
+            <Box key={change.id} flexDirection="column">
+              <Text color={THEME.dim}>Type: {change.type}</Text>
+              <DiffView patches={[change.diff]} />
+            </Box>
+          ))}
+        </Box>
+        <Box marginTop={1}>
+          <Select
+            options={[{ label: "← Back", value: "back" }]}
+            onChange={handleFileAction}
+          />
+        </Box>
+      </Box>
+    );
+  }
+
+  // Handle revision feedback
+  if (status === "revising") {
+    return (
+      <Box
+        flexDirection="column"
+        borderStyle="single"
+        borderColor={THEME.primary}
+        paddingX={1}
+      >
+        <Text bold color={THEME.primary}>
+          Request Revision
+        </Text>
+        <Text dimColor>Enter feedback to guide the agent:</Text>
+        <Box marginTop={1}>
+          <TextInput
+            onSubmit={(value) => {
+              if (!value.trim()) return;
+              useFraudeStore.setState({
+                status: 1,
+                statusText: "Revising...",
+              });
+              pendingChanges.clear();
+              QueryHandler(`Revising changes: ${value}`);
+            }}
+            placeholder="What should be changed?"
+          />
+        </Box>
+      </Box>
+    );
+  }
+
+  // Main Summary View
+  const options = [
+    { label: "✓ Apply All Changes", value: "apply_all" },
+    { label: "✗ Reject All Changes", value: "reject_all" },
+    { label: "Request Revision", value: "revise_all" },
+    // Add options to inspect specific files
+    ...filePaths.map((path) => ({
+      label: `Review ${projectPath(path)}`,
+      value: `view_${path}`,
+    })),
+  ];
+
+  return (
+    <Box flexDirection="column">
+      <Text bold color={THEME.primary}>
+        Pending Changes
+      </Text>
+      <Box flexDirection="column" marginY={0}>
+        {filePaths.map((path) => {
+          const changes = groupedChanges[path];
+          const type = changes?.[0]?.type || "unknown";
+          const patches = changes?.map((c) => c.diff) || [];
+
+          return (
+            <Box key={path} flexDirection="column" marginTop={1}>
+              <Text>
+                {projectPath(path)} <Text color={THEME.dim}>({type})</Text>
+              </Text>
+              <Box paddingLeft={2}>
+                <DiffView patches={patches} />
+              </Box>
+            </Box>
+          );
+        })}
+      </Box>
+      <Box marginTop={1} flexDirection="column">
+        <Text color={THEME.dim}>Select action:</Text>
+        <Select
+          options={options}
+          onChange={(value) => {
+            if (value === "revise_all") {
+              setStatus("revising");
+            } else {
+              handleMainSelect(value);
+            }
+          }}
+        />
+      </Box>
+    </Box>
+  );
+}

package/src/components/output/ContextUsage.tsx

@@ -0,0 +1,62 @@
+import { Box, Text } from "ink";
+import { useMemo } from "react";
+import useFraudeStore from "@/store/useFraudeStore";
+import useSettingsStore from "@/store/useSettingsStore";
+import { THEME } from "@/theme";
+
+const ContextUsage = () => {
+  const { contextManager } = useFraudeStore();
+  const { primaryModel, models } = useSettingsStore();
+
+  const { usedTokens, maxTokens, percentage, progressBar } = useMemo(() => {
+    // Find the current model from the models list
+    const currentModel = models.find((m) => m.name === primaryModel);
+    const contextLength = currentModel?.details?.context_length || 128000; // Default fallback
+
+    const used = contextManager.estimateContextTokens();
+    const pct = Math.min((used / contextLength) * 100, 100);
+
+    // Create a simple visual progress bar
+    const barWidth = 20;
+    const filledWidth = Math.round((pct / 100) * barWidth);
+    const emptyWidth = barWidth - filledWidth;
+    const bar = "█".repeat(filledWidth) + "░".repeat(emptyWidth);
+
+    return {
+      usedTokens: used,
+      maxTokens: contextLength,
+      percentage: pct,
+      progressBar: bar,
+    };
+  }, [contextManager, primaryModel, models]);
+
+  // Color based on usage percentage
+  const getColor = () => {
+    if (percentage >= 90) return THEME.error;
+    if (percentage >= 70) return THEME.primaryDim;
+    if (percentage >= 50) return THEME.warning;
+    return THEME.info;
+  };
+
+  const formatTokens = (tokens: number) => {
+    if (tokens >= 1000) {
+      return `${(tokens / 1000).toFixed(1)}k`;
+    }
+    return tokens.toString();
+  };
+
+  return (
+    <Box flexDirection="row" gap={1}>
+      <Text color={THEME.dim}>[</Text>
+      <Text color={getColor()}>{progressBar}</Text>
+      <Text color={THEME.dim}>]</Text>
+      <Box paddingLeft={1}>
+        <Text color={THEME.text}>{formatTokens(usedTokens)}</Text>
+        <Text color={THEME.dim}>/{formatTokens(maxTokens)}</Text>
+        <Text color={getColor()}> {percentage.toFixed(0)}%</Text>
+      </Box>
+    </Box>
+  );
+};
+
+export default ContextUsage;