fraude-code 0.1.0

package/src/components/App.tsx

@@ -0,0 +1,55 @@
+import log from "../utils/logger";
+import { useState } from "react";
+import { Box, useInput, Text } from "ink";
+import InputBox from "./input/InputBox";
+import OutputRenderer from "./OutputRenderer";
+import useFraudeStore from "../store/useFraudeStore";
+import IntroComponent from "./IntroComponent";
+import LoaderComponent from "./LoaderComponent";
+import { THEME } from "../theme";
+
+export default function App() {
+  const { status, started, updateOutput } = useFraudeStore();
+  const [exitPending, setExitPending] = useState(false);
+
+  useInput((input, key) => {
+    if (key.return && !started) {
+      useFraudeStore.setState({ started: true });
+      log("App Started...");
+    }
+
+    if (input === "c" && key.ctrl) {
+      if (exitPending) {
+        process.exit(0);
+      } else {
+        setExitPending(true);
+        setTimeout(() => setExitPending(false), 2000);
+      }
+      return;
+    }
+
+    // Handle escape key to interrupt the agent
+    if (key.escape && status === 1) {
+      useFraudeStore.getState().interruptAgent();
+      log("User pressed escape - interrupting agent");
+      updateOutput(
+        "interrupted",
+        (useFraudeStore.getState().elapsedTime / 10).toFixed(1),
+      );
+    }
+  });
+  return !started ? (
+    <IntroComponent />
+  ) : (
+    <Box flexDirection="column" paddingX={2} paddingY={1}>
+      <OutputRenderer />
+      {status === 0 && <InputBox />}
+      {status === 1 && <LoaderComponent />}
+      {exitPending && (
+        <Box marginTop={1}>
+          <Text color={THEME.error}>Press Ctrl+C again to exit</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}

package/src/components/IntroComponent.tsx

@@ -0,0 +1,70 @@
+import { Box, Text } from "ink";
+import Gradient from "ink-gradient";
+
+const INTRO_THEME = {
+  primary: "#FFB6C1",
+  primaryLight: "#FFDDE2",
+  primaryDim: "#B07D85",
+  dim: "#666666",
+  gradient: [
+    { r: 255, g: 105, b: 180 }, // pink
+    { r: 255, g: 120, b: 160 },
+    { r: 255, g: 135, b: 145 },
+    { r: 255, g: 150, b: 130 },
+    { r: 255, g: 165, b: 115 },
+    { r: 255, g: 180, b: 100 },
+    { r: 255, g: 195, b: 85 },
+    { r: 255, g: 210, b: 70 },
+    { r: 255, g: 225, b: 55 },
+    { r: 240, g: 140, b: 0 }, // orange
+  ],
+};
+
+const LOGO_FRAUDE = `
+  ███████╗██████╗  █████╗ ██╗   ██╗██████╗ ███████╗
+  ██╔════╝██╔══██╗██╔══██╗██║   ██║██╔══██╗██╔════╝
+  █████╗  ██████╔╝███████║██║   ██║██║  ██║█████╗  
+  ██╔══╝  ██╔══██╗██╔══██║██║   ██║██║  ██║██╔══╝  
+  ██║     ██║  ██║██║  ██║╚██████╔╝██████╔╝███████╗
+  ╚═╝     ╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝ ╚═════╝ ╚══════╝
+`;
+
+const LOGO_CODE = `
+   ██████╗ ██████╗ ██████╗ ███████╗
+  ██╔════╝██╔═══██╗██╔══██╗██╔════╝
+  ██║     ██║   ██║██║  ██║█████╗  
+  ██║     ██║   ██║██║  ██║██╔══╝  
+  ╚██████╗╚██████╔╝██████╔╝███████╗
+   ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝
+`;
+
+export default function IntroComponent() {
+  return (
+    <Box flexDirection="column">
+      <Box paddingX={1} marginBottom={1}>
+        <Text color={INTRO_THEME.primaryDim}>
+          FRAUDE CODE <Text color={INTRO_THEME.dim}>·</Text>{" "}
+          <Text italic>Agentic AI Assistant</Text>
+        </Text>
+      </Box>
+
+      <Gradient colors={INTRO_THEME.gradient}>
+        <Text bold>{LOGO_FRAUDE}</Text>
+        <Text bold>{LOGO_CODE}</Text>
+      </Gradient>
+
+      <Box flexDirection="column" marginTop={1}>
+        <Text color={INTRO_THEME.dim}>Ready to build something amazing?</Text>
+        <Box marginTop={1}>
+          <Text color={INTRO_THEME.dim}>
+            Press{" "}
+            <Text bold color={INTRO_THEME.primaryLight}>
+              Enter
+            </Text>{" "}
+            to start your journey...
+          </Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+}

package/src/components/LoaderComponent.tsx

@@ -0,0 +1,68 @@
+import { Box, Text } from "ink";
+import { useEffect, useState } from "react";
+import useFraudeStore from "../store/useFraudeStore";
+import type { TokenUsage } from "@/types/TokenUsage";
+import { THEME } from "../theme";
+
+const LoaderComponent = () => {
+  const [i, setFrame] = useState(0);
+  const getFrames = (text: string) => [
+    `·  ${text}.  `,
+    `•  ${text}.. `,
+    `●  ${text}...`,
+  ];
+
+  const { status, elapsedTime, statusText } = useFraudeStore();
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout | null = null;
+
+    if (status === 1) {
+      const frameCount = getFrames("").length;
+      timer = setInterval(() => {
+        setFrame((prevIndex) => (prevIndex + 1) % frameCount);
+
+        const currentElapsed = useFraudeStore.getState().elapsedTime;
+        useFraudeStore.setState({
+          elapsedTime: currentElapsed + 1,
+        });
+      }, 80);
+    }
+
+    return () => {
+      if (timer) {
+        clearInterval(timer);
+      }
+    };
+  }, [status]);
+
+  const currentStatusText = statusText || "Pondering";
+  const currentFrames = getFrames(currentStatusText);
+
+  return (
+    <Box marginY={0}>
+      <Text color={THEME.primary}>{currentFrames[i]} </Text>
+      <Box paddingLeft={1}>
+        <Text color={THEME.dim}>
+          ({(elapsedTime / 10).toFixed(1)}s · ESC to interrupt)
+        </Text>
+      </Box>
+    </Box>
+  );
+};
+
+//  {status === 2 && (
+//     <Text dimColor>
+//       Finished ({(elapsed / 10).toFixed(1)}s ※ {tokenUsage.total} tokens)
+//     </Text>
+//   )}
+//   {status === 3 && (
+//     <Text color="yellow">
+//       ▶ Awaiting user confirmation... ({(elapsed / 10).toFixed(1)}s)
+//     </Text>
+//   )}
+//   {status === -1 && (
+//     <Text dimColor>Interrupted ({(elapsed / 10).toFixed(1)}s)</Text>
+//   )}
+
+export default LoaderComponent;

package/src/components/OutputRenderer.tsx

@@ -0,0 +1,88 @@
+import { Box, Text } from "ink";
+import { memo } from "react";
+import { type OutputItem } from "@/types/OutputItem";
+import useFraudeStore from "../store/useFraudeStore";
+import CommandView from "./output/CommandView";
+import CommentView from "./output/CommentView";
+import MarkdownView from "./output/MarkdownView";
+import SettingsRenderer from "./SettingsRenderer";
+import ErrorView from "./output/ErrorView";
+import ReasoningView from "./output/ReasoningView";
+import ToolCallView from "./output/ToolCallView";
+import DiffView from "./output/DiffView";
+import ConfirmationView from "./output/ConfirmationView";
+import ModelSelectView from "./output/ModelSelectView";
+import KnowledgeView, { type KnowledgeViewData } from "./output/KnowledgeView";
+import { THEME } from "../theme";
+
+import InteractiveServerView from "./output/InteractiveServerView";
+
+function renderItem(item: OutputItem) {
+  switch (item.type) {
+    case "log":
+      return <Text>{item.content}</Text>;
+    case "interrupted":
+      return <Text dimColor>Interrupted ({item.content}s)</Text>;
+    case "done":
+      return <Text color={THEME.primaryDim}>{item.content}</Text>;
+    case "error":
+      return <ErrorView error={item.content} />;
+    case "command":
+      return <CommandView command={item.content} />;
+    case "comment":
+      return <CommentView comment={item.content} />;
+    case "agentText":
+    case "markdown":
+      return <MarkdownView markdown={item.content} />;
+    case "settings":
+      return <SettingsRenderer item={item} />;
+    case "reasoning":
+      return <ReasoningView content={item.content} duration={item.duration} />;
+    case "toolCall": {
+      try {
+        const data = JSON.parse(item.content);
+        return (
+          <ToolCallView
+            action={data.action}
+            details={data.details}
+            result={data.result}
+            duration={data.duration}
+          />
+        );
+      } catch {
+        return <Text dimColor>{item.content}</Text>;
+      }
+    }
+    case "diff":
+      return <DiffView diff={item.content} />;
+    case "confirmation":
+      return <ConfirmationView />;
+    case "modelSelect":
+      return <ModelSelectView />;
+    case "interactive-server":
+      return <InteractiveServerView routerId={item.content} />;
+    case "knowledge": {
+      try {
+        const data = JSON.parse(item.content) as KnowledgeViewData;
+        return <KnowledgeView data={data} />;
+      } catch {
+        return <Text dimColor>{item.content}</Text>;
+      }
+    }
+    default:
+      return null;
+  }
+}
+
+export default memo(function OutputRenderer() {
+  const outputItems = useFraudeStore((state) => state.outputItems);
+  return (
+    <Box flexDirection="column">
+      {outputItems.map((item: OutputItem) => (
+        <Box key={item.id} marginBottom={1}>
+          {renderItem(item)}
+        </Box>
+      ))}
+    </Box>
+  );
+});

package/src/components/SettingsRenderer.tsx

@@ -0,0 +1,23 @@
+import { memo } from "react";
+import { type OutputItem } from "@/types/OutputItem";
+import ModelList from "./settings/ModelList";
+import ContextUsage from "./output/ContextUsage";
+import TokenUsage from "./settings/TokenUsage";
+
+export default memo(function SettingsRenderer({ item }: { item: OutputItem }) {
+  const content = item.content;
+
+  if (content.startsWith("/models")) {
+    const provider = content.split(":")[1];
+    return <ModelList providerFilter={provider} showAll={!!provider} />;
+  }
+
+  switch (content) {
+    case "/context":
+      return <ContextUsage />;
+    case "/usage":
+      return <TokenUsage />;
+    default:
+      return null;
+  }
+});

package/src/components/input/CommandSuggestions.tsx

@@ -0,0 +1,41 @@
+import { Box, Text } from "ink";
+import type { Command } from "@/types/CommandDefinition";
+import { THEME } from "@/theme";
+
+export default function CommandSuggestions({
+  selectedIndex,
+  filteredTemplates,
+}: {
+  selectedIndex: number;
+  filteredTemplates: Command[];
+}) {
+  return (
+    <Box
+      flexDirection="column"
+      paddingX={2}
+      borderStyle="round"
+      borderColor={THEME.border}
+      width={70}
+    >
+      <Text dimColor>Commands (Tab accepts ghost text):</Text>
+      {filteredTemplates.map((cmd, i) => (
+        <Box key={cmd.usage}>
+          <Text
+            color={i === selectedIndex ? THEME.primaryLight : THEME.dim}
+            bold={i === selectedIndex}
+          >
+            {i === selectedIndex ? "› " : "  "}
+            {cmd.usage}
+          </Text>
+          <Text color={THEME.dim}> - {cmd.description}</Text>
+        </Box>
+      ))}
+      {/* Show role hint if selected command has [role] */}
+      {filteredTemplates[selectedIndex]?.usage.includes("[role]") && (
+        <Text dimColor italic>
+          {"  "}[role]: reasoning | general | light | all (or r|g|l|a)
+        </Text>
+      )}
+    </Box>
+  );
+}

package/src/components/input/FileSuggestions.tsx

@@ -0,0 +1,61 @@
+import { Box, Text } from "ink";
+import path from "node:path";
+import { THEME } from "@/theme";
+import type { FileSuggestion } from "@/utils/fileSuggestions";
+
+export default function FileSuggestions({
+  selectedIndex,
+  suggestions,
+}: {
+  selectedIndex: number;
+  suggestions: FileSuggestion[];
+}) {
+  return (
+    <Box
+      flexDirection="column"
+      paddingX={2}
+      borderStyle="round"
+      borderColor={THEME.border} // Distinct color for files
+      width={70}
+    >
+      <Text dimColor>Files (Tab to select):</Text>
+      {suggestions.map((file, i) => {
+        const fileName = path.basename(file.path);
+        const dirName = path.dirname(file.path);
+
+        let displayDir = "";
+        if (dirName !== ".") {
+          const fullDir = dirName + "/";
+          const available = 58 - fileName.length;
+
+          if (fullDir.length > available && available > 3) {
+            displayDir = "..." + fullDir.slice(-(available - 3));
+          } else if (fullDir.length <= available) {
+            displayDir = fullDir;
+          }
+        }
+
+        return (
+          <Box key={file.path}>
+            <Text wrap="truncate-end">
+              <Text
+                color={i === selectedIndex ? THEME.primaryLight : THEME.text}
+                bold={i === selectedIndex}
+              >
+                {i === selectedIndex ? "› " : "  "}
+                {fileName}
+              </Text>
+              {displayDir && <Text color={THEME.dim}> {displayDir}</Text>}
+              {file.type === "dir" && file.childCount !== undefined ? (
+                <Text color="gray">
+                  {" "}
+                  ({file.childCount} {file.childCount === 1 ? "file" : "files"})
+                </Text>
+              ) : null}
+            </Text>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}