sncommit 1.0.1 → 1.0.3

package/src/components/ConfigApp.tsx

@@ -1,291 +0,0 @@
-import React, { useState, useCallback, useMemo } from "react";
-import { Box, Text, useInput, useApp, Key } from "ink";
-import { configManager } from "../utils/config";
-import { Config } from "../types";
-import { TuiDialog, DialogType } from "./TuiDialog";
-
-interface ConfigAppProps {
-  onExit: (message?: string) => void;
-}
-
-export const ConfigApp: React.FC<ConfigAppProps> = ({ onExit }) => {
-  const { exit } = useApp();
-  const [config, setConfig] = useState<Config>(configManager.getConfig());
-
-  const [activeDialog, setActiveDialog] = useState<{
-    key: keyof Config;
-    type: DialogType;
-    title: string;
-    options?: string[];
-  } | null>(null);
-
-  const [menuIndex, setMenuIndex] = useState(0);
-
-  const modelOptions = useMemo(
-    () => [
-      {
-        display: "llama-3.1-8b-instant (fastest)",
-        value: "llama-3.1-8b-instant",
-      },
-      {
-        display: "llama-3.3-70b-versatile (most capable)",
-        value: "llama-3.3-70b-versatile",
-      },
-      { display: "openai/gpt-oss-20b (balanced)", value: "openai/gpt-oss-20b" },
-    ],
-    [],
-  );
-
-  const menuItems = useMemo(
-    () => [
-      {
-        key: "groqApiKey" as keyof Config,
-        label: "Groq API Key",
-        type: "password" as const,
-      },
-      {
-        key: "model" as keyof Config,
-        label: "AI Model",
-        type: "select" as const,
-        options: modelOptions.map((m) => m.display),
-      },
-      {
-        key: "commitStyle" as keyof Config,
-        label: "Commit Style",
-        type: "select" as const,
-        options: ["conventional", "simple", "detailed"],
-      },
-      {
-        key: "customPrompt" as keyof Config,
-        label: "Custom Prompt",
-        type: "textarea" as const,
-      },
-    ],
-    [modelOptions],
-  );
-
-  const saveAndExit = useCallback(() => {
-    const finalConfig = {
-      ...config,
-      // model was hardcoded here previously, now we let user select it
-      // model: "llama-3.1-8b-instant",
-      maxHistoryCommits: 40,
-      language: "en",
-    };
-    configManager.updateConfig(finalConfig);
-    onExit("Configuration saved");
-    exit();
-  }, [config, onExit, exit]);
-
-  const cancelAndExit = useCallback(() => {
-    onExit("Configuration cancelled");
-    exit();
-  }, [onExit, exit]);
-
-  const handleInput = useCallback(
-    (input: string, key: Key) => {
-      if (activeDialog) return;
-
-      if (key.upArrow) {
-        setMenuIndex((prev) => (prev > 0 ? prev - 1 : menuItems.length + 1));
-      } else if (key.downArrow) {
-        setMenuIndex((prev) => (prev < menuItems.length + 1 ? prev + 1 : 0));
-      } else if (key.return) {
-        if (menuIndex < menuItems.length) {
-          const item = menuItems[menuIndex];
-          setActiveDialog({
-            key: item.key,
-            type: item.type,
-            title: `Edit ${item.label}`,
-            options: item.options,
-          });
-        } else if (menuIndex === menuItems.length) {
-          saveAndExit();
-        } else {
-          cancelAndExit();
-        }
-      } else if (key.escape || (key.ctrl && input === "c")) {
-        cancelAndExit();
-      }
-    },
-    [activeDialog, menuIndex, menuItems, saveAndExit, cancelAndExit],
-  );
-
-  useInput(handleInput, { isActive: !activeDialog });
-
-  const handleDialogSubmit = (value: string) => {
-    if (activeDialog) {
-      let finalValue = value;
-
-      // Convert display label back to actual model ID
-      if (activeDialog.key === "model") {
-        const modelOption = modelOptions.find((m) => m.display === value);
-        if (modelOption) {
-          finalValue = modelOption.value;
-        }
-      }
-
-      setConfig((prev) => ({ ...prev, [activeDialog.key]: finalValue }));
-      setActiveDialog(null);
-    }
-  };
-
-  const handleDialogCancel = () => {
-    setActiveDialog(null);
-  };
-
-  const renderValue = (isSelected: boolean, key: keyof Config) => {
-    const val = config[key];
-    const textColor = isSelected ? "#111827" : "#e5e7eb";
-    const bgColor = isSelected ? "#60a5fa" : undefined;
-
-    if (!val)
-      return (
-        <Text color={textColor} backgroundColor={bgColor}>
-          {" "}
-          (not set)
-        </Text>
-      );
-    if (key === "groqApiKey")
-      return (
-        <Text color={textColor} backgroundColor={bgColor}>
-          ••••••••
-        </Text>
-      );
-    if (key === "model") {
-      // Display the friendly label instead of the raw model ID
-      const modelOption = modelOptions.find((m) => m.value === val);
-      const displayValue = modelOption ? modelOption.display : val;
-      return (
-        <Text color={textColor} backgroundColor={bgColor}>
-          {displayValue}
-        </Text>
-      );
-    }
-    if (key === "customPrompt")
-      return (
-        <Text color={textColor} backgroundColor={bgColor}>
-          {(val as string).substring(0, 20) +
-            ((val as string).length > 20 ? "..." : "")}
-        </Text>
-      );
-    return (
-      <Text color={textColor} backgroundColor={bgColor}>
-        {val}
-      </Text>
-    );
-  };
-
-  return (
-    <Box flexDirection="column" padding={1} flexGrow={1} width="100%">
-      {/* Dialog or Main Content */}
-      {activeDialog ? (
-        <Box
-          flexGrow={1}
-          justifyContent="center"
-          alignItems="center"
-          paddingX={2}
-        >
-          <TuiDialog
-            title={activeDialog.title}
-            type={activeDialog.type}
-            initialValue={String(config[activeDialog.key] || "")}
-            options={activeDialog.options}
-            onSubmit={handleDialogSubmit}
-            onCancel={handleDialogCancel}
-          />
-        </Box>
-      ) : (
-        <Box
-          flexDirection="column"
-          flexGrow={1}
-          borderStyle="round"
-          borderColor="#374151"
-          paddingX={1}
-          marginBottom={1}
-        >
-          {/* Menu Items */}
-          <Box flexDirection="column" marginBottom={2}>
-            {menuItems.map((item, index) => (
-              <Box
-                key={item.key}
-                flexDirection="row"
-                justifyContent="space-between"
-                paddingY={0.5}
-                paddingX={1}
-              >
-                <Box flexGrow={0.6}>
-                  <Text
-                    bold={index === menuIndex}
-                    color={index === menuIndex ? "#111827" : "#e5e7eb"}
-                    backgroundColor={
-                      index === menuIndex ? "#60a5fa" : undefined
-                    }
-                  >
-                    {index === menuIndex ? "› " : "  "}
-                    {item.label}
-                  </Text>
-                </Box>
-                <Box flexGrow={0.4}>
-                  <Text
-                    color={index === menuIndex ? "#111827" : "#e5e7eb"}
-                    backgroundColor={
-                      index === menuIndex ? "#60a5fa" : undefined
-                    }
-                  >
-                    {renderValue(index === menuIndex, item.key)}
-                  </Text>
-                </Box>
-              </Box>
-            ))}
-          </Box>
-
-          {/* Actions */}
-          <Box flexDirection="row" marginBottom={2}>
-            <Box marginRight={2}>
-              <Text
-                bold={menuIndex === menuItems.length}
-                color={menuIndex === menuItems.length ? "#111827" : "#e5e7eb"}
-                backgroundColor={
-                  menuIndex === menuItems.length ? "#10b981" : undefined
-                }
-              >
-                {menuIndex === menuItems.length ? "› " : "  "}Save & Exit
-              </Text>
-            </Box>
-            <Box>
-              <Text
-                bold={menuIndex === menuItems.length + 1}
-                color={
-                  menuIndex === menuItems.length + 1 ? "#111827" : "#e5e7eb"
-                }
-                backgroundColor={
-                  menuIndex === menuItems.length + 1 ? "#ef4444" : undefined
-                }
-              >
-                {menuIndex === menuItems.length + 1 ? "› " : "  "}Cancel
-              </Text>
-            </Box>
-          </Box>
-        </Box>
-      )}
-
-      {/* Footer - only show when no dialog is open */}
-      {!activeDialog && (
-        <Box
-          borderTop={true}
-          borderStyle="single"
-          borderColor="#374151"
-          paddingTop={1}
-          paddingLeft={1}
-          paddingRight={1}
-        >
-          <Text color="#6b7280">
-            Use <Text color="#60a5fa">↑↓</Text> to navigate,{" "}
-            <Text color="#10b981">Enter</Text> to edit/select
-          </Text>
-        </Box>
-      )}
-    </Box>
-  );
-};

package/src/components/CustomInputPrompt.tsx

@@ -1,82 +0,0 @@
-import React, { useState } from "react";
-import { Box, Text, useInput } from "ink";
-
-interface CustomInputPromptProps {
-  value: string;
-  onChange: (value: string) => void;
-  onSubmit: () => void;
-  onCancel: () => void;
-}
-
-export const CustomInputPrompt: React.FC<CustomInputPromptProps> = ({
-  value,
-  onChange,
-  onSubmit,
-  onCancel,
-}) => {
-  const [cursorPosition, setCursorPosition] = useState(value.length);
-
-  useInput((input, key) => {
-    if (key.return) {
-      onSubmit();
-    } else if (key.escape) {
-      onCancel();
-    } else if (key.backspace || key.delete) {
-      if (cursorPosition > 0) {
-        const before = value.slice(0, cursorPosition - 1);
-        const after = value.slice(cursorPosition);
-        onChange(before + after);
-        setCursorPosition(cursorPosition - 1);
-      }
-    } else if (key.leftArrow) {
-      setCursorPosition((prev: number) => Math.max(0, prev - 1));
-    } else if (key.rightArrow) {
-      setCursorPosition((prev: number) => Math.min(value.length, prev + 1));
-    } else if (input && !key.ctrl && !key.meta) {
-      const before = value.slice(0, cursorPosition);
-      const after = value.slice(cursorPosition);
-      onChange(before + input + after);
-      setCursorPosition(cursorPosition + input.length);
-    }
-  });
-
-  const displayValue = value || "";
-  const beforeCursor = displayValue.slice(0, cursorPosition);
-  const cursorChar = displayValue[cursorPosition] || " ";
-  const afterCursor = displayValue.slice(cursorPosition + 1);
-
-  return (
-    <Box
-      flexDirection="column"
-      borderStyle="round"
-      borderColor="#8b5cf6"
-      paddingX={1}
-    >
-      <Box>
-        <Text bold color="#8b5cf6">
-          Custom Message
-        </Text>
-      </Box>
-
-      <Box marginLeft={1}>
-        <Text>
-          <Text color="#e5e7eb">{beforeCursor}</Text>
-          <Text backgroundColor="#8b5cf6" color="#ffffff" bold>
-            {cursorChar}
-          </Text>
-          <Text color="#e5e7eb">{afterCursor}</Text>
-          {displayValue.length === 0 && (
-            <Text color="#6b7280"> type your commit message...</Text>
-          )}
-        </Text>
-      </Box>
-
-      <Box marginTop={1}>
-        <Text color="#6b7280">
-          <Text color="#10b981">Enter</Text> submit{" "}
-          <Text color="#ef4444">Esc</Text> cancel
-        </Text>
-      </Box>
-    </Box>
-  );
-};

package/src/components/StagedFiles.tsx

@@ -1,52 +0,0 @@
-import React from "react";
-import { Box, Text } from "ink";
-import { GitFile } from "../types";
-
-interface StagedFilesProps {
-  files: GitFile[];
-}
-
-export const StagedFiles: React.FC<StagedFilesProps> = ({ files }) => {
-  if (files.length === 0) {
-    return (
-      <Box
-        borderStyle="round"
-        borderColor="#ef4444"
-        paddingX={1}
-        marginBottom={1}
-      >
-        <Text color="#ef4444">No staged files found</Text>
-      </Box>
-    );
-  }
-
-  return (
-    <Box
-      flexDirection="column"
-      borderStyle="round"
-      borderColor="#374151"
-      paddingX={1}
-      marginBottom={1}
-    >
-      <Box>
-        <Text bold color="#8b5cf6">
-          Staged Files
-        </Text>
-        <Text color="#6b7280"> ({files.length})</Text>
-      </Box>
-
-      {files.slice(0, 6).map((file, index) => (
-        <Box key={index} marginLeft={1}>
-          <Text color="#10b981">•</Text>
-          <Text color="#e5e7eb"> {file.path}</Text>
-        </Box>
-      ))}
-
-      {files.length > 6 && (
-        <Box marginLeft={1}>
-          <Text color="#6b7280">+{files.length - 6} more files</Text>
-        </Box>
-      )}
-    </Box>
-  );
-};

package/src/components/TuiDialog.tsx

@@ -1,177 +0,0 @@
-import React, { useState } from "react";
-import { Box, Text, useInput } from "ink";
-
-export type DialogType = "input" | "password" | "textarea" | "select";
-
-export interface DialogProps {
-  title: string;
-  type: DialogType;
-  initialValue?: string;
-  options?: string[];
-  onSubmit: (value: string) => void;
-  onCancel: () => void;
-}
-
-export const TuiDialog: React.FC<DialogProps> = ({
-  title,
-  type,
-  initialValue = "",
-  options = [],
-  onSubmit,
-  onCancel,
-}) => {
-  const [value, setValue] = useState(initialValue);
-  const [selectedIndex, setSelectedIndex] = useState(() => {
-    if (type === "select" && initialValue) {
-      const index = options.indexOf(initialValue);
-      return index !== -1 ? index : 0;
-    }
-    return 0;
-  });
-  const [cursorPosition, setCursorPosition] = useState(initialValue.length);
-
-  useInput((input, key) => {
-    // Handle escape to cancel
-    if (key.escape) {
-      onCancel();
-      return;
-    }
-
-    if (type === "select") {
-      if (key.upArrow) {
-        setSelectedIndex((prev) => (prev > 0 ? prev - 1 : options.length - 1));
-      } else if (key.downArrow) {
-        setSelectedIndex((prev) => (prev < options.length - 1 ? prev + 1 : 0));
-      } else if (key.return) {
-        onSubmit(options[selectedIndex]);
-      }
-    } else {
-      // Input / Password / Textarea
-      if (key.tab && type === "textarea") {
-        // Tab: Submit for textarea
-        onSubmit(value.trim());
-      } else if (key.return) {
-        if (type === "textarea") {
-          // Enter: Insert newline for textarea
-          const before = value.slice(0, cursorPosition);
-          const after = value.slice(cursorPosition);
-          setValue(before + "\n" + after);
-          setCursorPosition(cursorPosition + 1);
-        } else {
-          // Enter: Submit for input/password
-          onSubmit(value.trim());
-        }
-      } else if (key.leftArrow) {
-        setCursorPosition((prev) => Math.max(0, prev - 1));
-      } else if (key.rightArrow) {
-        setCursorPosition((prev) => Math.min(value.length, prev + 1));
-      } else if (key.backspace || key.delete) {
-        if (cursorPosition > 0) {
-          const before = value.slice(0, cursorPosition - 1);
-          const after = value.slice(cursorPosition);
-          setValue(before + after);
-          setCursorPosition(cursorPosition - 1);
-        }
-      } else if (input && !key.ctrl && !key.meta) {
-        const before = value.slice(0, cursorPosition);
-        const after = value.slice(cursorPosition);
-        setValue(before + input + after);
-        setCursorPosition(cursorPosition + input.length);
-      }
-    }
-  });
-
-  const renderInputField = () => {
-    const displayValue = type === "password" ? "•".repeat(value.length) : value;
-    const beforeCursor = displayValue.slice(0, cursorPosition);
-    const cursorChar = displayValue[cursorPosition] || " ";
-    const afterCursor = displayValue.slice(cursorPosition + 1);
-
-    return (
-      <Box borderStyle="round" borderColor="#6366f1" paddingX={1} flexGrow={1}>
-        <Text>
-          <Text color="#e5e7eb">{beforeCursor}</Text>
-          <Text backgroundColor="#8b5cf6" color="#ffffff" bold>
-            {cursorChar}
-          </Text>
-          <Text color="#e5e7eb">{afterCursor}</Text>
-        </Text>
-      </Box>
-    );
-  };
-
-  return (
-    <Box
-      flexDirection="column"
-      flexGrow={1}
-      padding={2}
-      borderStyle="round"
-      borderColor="#6366f1"
-    >
-      {/* Header */}
-      <Box marginBottom={1}>
-        <Text bold color="#8b5cf6">
-          {title}
-        </Text>
-      </Box>
-
-      {/* Content */}
-      {type === "select" ? (
-        <Box flexDirection="column" marginBottom={1}>
-          {options.map((option, index) => (
-            <Box key={option} paddingX={1}>
-              <Text
-                bold={index === selectedIndex}
-                inverse={index === selectedIndex}
-              >
-                {index === selectedIndex ? "› " : "  "}
-                {option}
-              </Text>
-            </Box>
-          ))}
-        </Box>
-      ) : (
-        <Box flexDirection="column" marginBottom={1}>
-          {renderInputField()}
-          {type === "textarea" && (
-            <Box marginTop={1}>
-              <Text color="#6b7280" dimColor>
-                Enter for new line • Tab to submit
-              </Text>
-            </Box>
-          )}
-        </Box>
-      )}
-
-      {/* Footer */}
-      <Box
-        borderTop={true}
-        borderStyle="single"
-        borderColor="#374151"
-        paddingTop={1}
-      >
-        <Text color="#6b7280">
-          {type === "select" ? (
-            <Text>
-              <Text color="#60a5fa">↑↓</Text> Navigate •{" "}
-              <Text color="#10b981">Enter</Text> Confirm •{" "}
-              <Text color="#ef4444">Esc</Text> Cancel
-            </Text>
-          ) : type === "textarea" ? (
-            <Text>
-              <Text color="#60a5fa">←→</Text> Move •{" "}
-              <Text color="#10b981">Tab</Text> Submit •{" "}
-              <Text color="#ef4444">Esc</Text> Cancel
-            </Text>
-          ) : (
-            <Text>
-              <Text color="#60a5fa">←→</Text> Move •{" "}
-              <Text color="#10b981">Enter</Text> Confirm •{" "}
-              <Text color="#ef4444">Esc</Text> Cancel
-            </Text>
-          )}
-        </Text>
-      </Box>
-    </Box>
-  );
-};