sncommit 1.0.0 → 1.0.1

package/README.md

@@ -1,4 +1,4 @@
-# Better Commit
+# Better-Commit
 
 AI-powered git commit message generator with a beautiful TUI (Terminal User Interface).
 

package/dist/index.js

@@ -58323,7 +58323,15 @@ class GroqService {
       }
       return this.parseSuggestions(content);
     } catch (e2) {
-      console.error("Error generating suggestions:", e2);
+      const error = e2;
+      if (error?.status === 401) {
+        console.warn(`
+\x1B[33m⚠️  Groq API Key is invalid.\x1B[0m`);
+        console.warn(`   Using static backup suggestions. Run \x1B[36mbetter-commit config\x1B[0m to set your key.
+`);
+      } else {
+        console.error("Error generation suggestions:", error?.message || String(e2));
+      }
       const fallbackSuggestions = this.getFallbackSuggestions(stagedFiles);
       return fallbackSuggestions.map((s2) => ({ ...s2, isFallback: true }));
     }
@@ -58363,7 +58371,15 @@ class GroqService {
       }
       return this.parseSuggestions(content);
     } catch (e2) {
-      console.error("Error generating suggestions:", e2);
+      const error = e2;
+      if (error?.status === 401) {
+        console.warn(`
+\x1B[33m⚠️  Groq API Key is invalid.\x1B[0m`);
+        console.warn(`   Using static backup suggestions. Run \x1B[36mbetter-commit config\x1B[0m to set your key.
+`);
+      } else {
+        console.error("Error generation suggestions:", error?.message || String(e2));
+      }
       const fallbackSuggestions = this.getFallbackSuggestions(stagedFiles);
       return fallbackSuggestions.map((s2) => ({ ...s2, isFallback: true }));
     }
@@ -58510,11 +58526,13 @@ Output ONLY valid JSON.`;
       if (jsonMatch) {
         const parsed = JSON.parse(jsonMatch[0]);
         if (parsed.suggestions && Array.isArray(parsed.suggestions)) {
-          return parsed.suggestions.map((s2) => ({
-            message: s2.message || "",
-            type: s2.type || this.extractType(s2.message || ""),
-            description: s2.description || s2.message || ""
-          })).slice(0, 4);
+          if (parsed.suggestions && Array.isArray(parsed.suggestions)) {
+            return parsed.suggestions.map((s2) => ({
+              message: s2.message || "",
+              type: s2.type || this.extractType(s2.message || ""),
+              description: s2.description || s2.message || ""
+            })).slice(0, 4);
+          }
         }
       }
       throw new Error("Invalid JSON structure");
@@ -58689,7 +58707,7 @@ var CommitSuggestions = ({
       }, 80);
       return () => clearInterval(timer);
     }
-  }, [isLoading]);
+  }, [isLoading, spinnerFrames.length]);
   use_input_default((input, key) => {
     if (key.upArrow) {
       const newIndex = selectedIndex > 0 ? selectedIndex - 1 : totalOptions - 1;
@@ -58933,12 +58951,16 @@ var BetterCommitApp = ({
     if (successMessage) {
       write("\x1B[2J\x1B[0f");
       const timer = setTimeout(() => {
-        onExit(successMessage);
         exit();
       }, 1500);
       return () => clearTimeout(timer);
     }
-  }, [successMessage, onExit, exit, write]);
+  }, [successMessage, exit, write]);
+  import_react24.useEffect(() => {
+    if (state.error) {
+      exit();
+    }
+  }, [state.error, exit]);
   use_input_default((input, key) => {
     if (key.escape || key.ctrl && input === "c") {
       onExit("Operation cancelled");
@@ -58952,7 +58974,7 @@ var BetterCommitApp = ({
       try {
         const stagedFiles = await gitService.getStagedFiles();
         await gitService.getDiff();
-        await generateSuggestions(stagedFiles);
+        await fetchSuggestions(stagedFiles);
         setState((prev) => ({
           ...prev,
           stagedFiles
@@ -58966,11 +58988,11 @@ var BetterCommitApp = ({
     };
     initializeApp();
   }, []);
-  const generateSuggestions = async (stagedFiles) => {
+  const fetchSuggestions = async (stagedFiles, customPrompt) => {
     if (!config.groqApiKey || config.groqApiKey.trim() === "") {
       setState((prev) => ({
         ...prev,
-        error: 'Groq API key not configured. Run "better-commit --config" to set it up.',
+        error: 'Groq API key not configured. Run "better-commit config" to set it up.',
         isLoading: false
       }));
       return;
@@ -58980,7 +59002,12 @@ var BetterCommitApp = ({
       const diff2 = await gitService.getDiff();
       const diffStats = await gitService.getDiffStats();
       const recentCommits = await gitService.getRecentCommits(config.maxHistoryCommits || 50);
-      const suggestions = await groqService.generateCommitSuggestions(stagedFiles, diff2, recentCommits, diffStats);
+      let suggestions;
+      if (customPrompt) {
+        suggestions = await groqService.generateCommitSuggestionsFromCustomInput(stagedFiles, diff2, customPrompt, recentCommits, diffStats);
+      } else {
+        suggestions = await groqService.generateCommitSuggestions(stagedFiles, diff2, recentCommits, diffStats);
+      }
       const hasFallback = suggestions.some((s2) => s2.isFallback);
       setState((prev) => ({
         ...prev,
@@ -59016,7 +59043,7 @@ var BetterCommitApp = ({
   };
   const handleTryAgain = () => {
     setState((prev) => ({ ...prev, isLoading: true, suggestions: [] }));
-    generateSuggestions(state.stagedFiles);
+    fetchSuggestions(state.stagedFiles);
   };
   const handleCustomInput = () => {
     setIsCustomInputMode(true);
@@ -59034,82 +59061,26 @@ var BetterCommitApp = ({
     }
     setIsCustomInputMode(false);
     setState((prev) => ({ ...prev, isLoading: true, suggestions: [] }));
-    await generateSuggestionsFromCustomInput(customInput.trim());
-  };
-  const generateSuggestionsFromCustomInput = async (userInput) => {
-    if (!config.groqApiKey || config.groqApiKey.trim() === "") {
-      setState((prev) => ({
-        ...prev,
-        error: 'Groq API key not configured. Run "better-commit --config" to set it up.',
-        isLoading: false
-      }));
-      return;
-    }
-    try {
-      const groqService = new GroqService(config.groqApiKey, config);
-      const diff2 = await gitService.getDiff();
-      const diffStats = await gitService.getDiffStats();
-      const recentCommits = await gitService.getRecentCommits(config.maxHistoryCommits || 50);
-      const suggestions = await groqService.generateCommitSuggestionsFromCustomInput(state.stagedFiles, diff2, userInput, recentCommits, diffStats);
-      const hasFallback = suggestions.some((s2) => s2.isFallback);
-      setState((prev) => ({
-        ...prev,
-        suggestions,
-        isLoading: false,
-        error: undefined
-      }));
-      setIsUsingFallback(hasFallback);
-    } catch (error) {
-      setState((prev) => ({
-        ...prev,
-        error: `Failed to generate suggestions: ${error instanceof Error ? error.message : String(error)}`,
-        isLoading: false
-      }));
-    }
+    await fetchSuggestions(state.stagedFiles, customInput.trim());
   };
   if (state.error) {
     return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Box_default, {
-      flexDirection: "column",
+      borderStyle: "single",
+      borderColor: "#ef4444",
       padding: 2,
+      marginBottom: 1,
       children: [
+        /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Text, {
+          color: "#ef4444",
+          bold: true,
+          children: "Error"
+        }, undefined, false, undefined, this),
         /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Box_default, {
-          borderStyle: "single",
-          borderColor: "#ef4444",
-          padding: 2,
-          marginBottom: 1,
-          children: [
-            /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Text, {
-              color: "#ef4444",
-              bold: true,
-              children: "Error"
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Box_default, {
-              marginTop: 1,
-              children: /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Text, {
-                color: "#e5e7eb",
-                children: state.error
-              }, undefined, false, undefined, this)
-            }, undefined, false, undefined, this)
-          ]
-        }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Box_default, {
+          marginTop: 1,
           children: /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Text, {
-            color: "#6b7280",
-            children: [
-              "Press ",
-              /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Text, {
-                color: "#ef4444",
-                children: "Esc"
-              }, undefined, false, undefined, this),
-              " or",
-              " ",
-              /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Text, {
-                color: "#ef4444",
-                children: "Ctrl+C"
-              }, undefined, false, undefined, this),
-              " to exit"
-            ]
-          }, undefined, true, undefined, this)
+            color: "#e5e7eb",
+            children: state.error
+          }, undefined, false, undefined, this)
         }, undefined, false, undefined, this)
       ]
     }, undefined, true, undefined, this);
@@ -59171,7 +59142,7 @@ var BetterCommitApp = ({
         /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Text, {
           bold: true,
           color: "#8b5cf6",
-          children: "Better Commit"
+          children: "Better-Commit"
         }, undefined, false, undefined, this),
         /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Box_default, {
           marginTop: 1,
@@ -59193,7 +59164,7 @@ var BetterCommitApp = ({
           /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Text, {
             bold: true,
             color: "#8b5cf6",
-            children: "Better Commit"
+            children: "Better-Commit"
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Text, {
             color: "#6b7280",
@@ -59477,7 +59448,18 @@ var ConfigApp = ({ onExit }) => {
   const [config, setConfig] = import_react26.useState(configManager.getConfig());
   const [activeDialog, setActiveDialog] = import_react26.useState(null);
   const [menuIndex, setMenuIndex] = import_react26.useState(0);
-  const menuItems = [
+  const modelOptions = import_react26.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 = import_react26.useMemo(() => [
     {
       key: "groqApiKey",
       label: "Groq API Key",
@@ -59487,11 +59469,7 @@ var ConfigApp = ({ onExit }) => {
       key: "model",
       label: "AI Model",
       type: "select",
-      options: [
-        "llama-3.1-8b-instant",
-        "llama-3.3-70b-versatile",
-        "openai/gpt-oss-20b"
-      ]
+      options: modelOptions.map((m2) => m2.display)
     },
     {
       key: "commitStyle",
@@ -59504,8 +59482,8 @@ var ConfigApp = ({ onExit }) => {
       label: "Custom Prompt",
       type: "textarea"
     }
-  ];
-  const saveAndExit = () => {
+  ], [modelOptions]);
+  const saveAndExit = import_react26.useCallback(() => {
     const finalConfig = {
       ...config,
       maxHistoryCommits: 40,
@@ -59514,11 +59492,11 @@ var ConfigApp = ({ onExit }) => {
     configManager.updateConfig(finalConfig);
     onExit("Configuration saved");
     exit();
-  };
-  const cancelAndExit = () => {
+  }, [config, onExit, exit]);
+  const cancelAndExit = import_react26.useCallback(() => {
     onExit("Configuration cancelled");
     exit();
-  };
+  }, [onExit, exit]);
   const handleInput = import_react26.useCallback((input, key) => {
     if (activeDialog)
       return;
@@ -59543,11 +59521,18 @@ var ConfigApp = ({ onExit }) => {
     } else if (key.escape || key.ctrl && input === "c") {
       cancelAndExit();
     }
-  }, [activeDialog, menuIndex, menuItems]);
+  }, [activeDialog, menuIndex, menuItems, saveAndExit, cancelAndExit]);
   use_input_default(handleInput, { isActive: !activeDialog });
   const handleDialogSubmit = (value) => {
     if (activeDialog) {
-      setConfig((prev) => ({ ...prev, [activeDialog.key]: value }));
+      let finalValue = value;
+      if (activeDialog.key === "model") {
+        const modelOption = modelOptions.find((m2) => m2.display === value);
+        if (modelOption) {
+          finalValue = modelOption.value;
+        }
+      }
+      setConfig((prev) => ({ ...prev, [activeDialog.key]: finalValue }));
       setActiveDialog(null);
     }
   };
@@ -59573,6 +59558,15 @@ var ConfigApp = ({ onExit }) => {
         backgroundColor: bgColor,
         children: "••••••••"
       }, undefined, false, undefined, this);
+    if (key === "model") {
+      const modelOption = modelOptions.find((m2) => m2.value === val);
+      const displayValue = modelOption ? modelOption.display : val;
+      return /* @__PURE__ */ jsx_dev_runtime6.jsxDEV(Text, {
+        color: textColor,
+        backgroundColor: bgColor,
+        children: displayValue
+      }, undefined, false, undefined, this);
+    }
     if (key === "customPrompt")
       return /* @__PURE__ */ jsx_dev_runtime6.jsxDEV(Text, {
         color: textColor,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sncommit",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "AI-powered git commit message generator with beautiful TUI",
   "type": "module",
   "main": "dist/index.js",
@@ -53,4 +53,4 @@
     "node": ">=18.0.0",
     "bun": ">=1.0.0"
   }
-}
+}

package/src/components/App.tsx

@@ -40,12 +40,18 @@ export const BetterCommitApp: React.FC<AppProps> = ({
     if (successMessage) {
       write("\x1B[2J\x1B[0f");
       const timer = setTimeout(() => {
-        onExit(successMessage);
         exit();
       }, 1500);
       return () => clearTimeout(timer);
     }
-  }, [successMessage, onExit, exit, write]);
+  }, [successMessage, exit, write]);
+
+  // Auto-exit when error occurs
+  useEffect(() => {
+    if (state.error) {
+      exit();
+    }
+  }, [state.error, exit]);
 
   // Handle global exit keys (disabled when custom input is active)
   useInput(
@@ -69,7 +75,7 @@ export const BetterCommitApp: React.FC<AppProps> = ({
 
         await gitService.getDiff();
 
-        await generateSuggestions(stagedFiles);
+        await fetchSuggestions(stagedFiles);
 
         setState((prev) => ({
           ...prev,
@@ -87,12 +93,15 @@ export const BetterCommitApp: React.FC<AppProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const generateSuggestions = async (stagedFiles: GitFile[]) => {
+  const fetchSuggestions = async (
+    stagedFiles: GitFile[],
+    customPrompt?: string,
+  ) => {
     if (!config.groqApiKey || config.groqApiKey.trim() === "") {
       setState((prev) => ({
         ...prev,
         error:
-          'Groq API key not configured. Run "better-commit --config" to set it up.',
+          'Groq API key not configured. Run "better-commit config" to set it up.',
         isLoading: false,
       }));
       return;
@@ -106,12 +115,24 @@ export const BetterCommitApp: React.FC<AppProps> = ({
         config.maxHistoryCommits || 50,
       );
 
-      const suggestions = await groqService.generateCommitSuggestions(
-        stagedFiles,
-        diff,
-        recentCommits,
-        diffStats,
-      );
+      let suggestions;
+      if (customPrompt) {
+        suggestions =
+          await groqService.generateCommitSuggestionsFromCustomInput(
+            stagedFiles,
+            diff,
+            customPrompt,
+            recentCommits,
+            diffStats,
+          );
+      } else {
+        suggestions = await groqService.generateCommitSuggestions(
+          stagedFiles,
+          diff,
+          recentCommits,
+          diffStats,
+        );
+      }
 
       const hasFallback = suggestions.some((s) => s.isFallback);
       setState((prev) => ({
@@ -151,7 +172,7 @@ export const BetterCommitApp: React.FC<AppProps> = ({
 
   const handleTryAgain = () => {
     setState((prev) => ({ ...prev, isLoading: true, suggestions: [] }));
-    generateSuggestions(state.stagedFiles);
+    fetchSuggestions(state.stagedFiles);
   };
 
   const handleCustomInput = () => {
@@ -173,76 +194,23 @@ export const BetterCommitApp: React.FC<AppProps> = ({
 
     setIsCustomInputMode(false);
     setState((prev) => ({ ...prev, isLoading: true, suggestions: [] }));
-    await generateSuggestionsFromCustomInput(customInput.trim());
-  };
-
-  const generateSuggestionsFromCustomInput = async (userInput: string) => {
-    if (!config.groqApiKey || config.groqApiKey.trim() === "") {
-      setState((prev) => ({
-        ...prev,
-        error:
-          'Groq API key not configured. Run "better-commit --config" to set it up.',
-        isLoading: false,
-      }));
-      return;
-    }
-
-    try {
-      const groqService = new GroqService(config.groqApiKey, config);
-      const diff = await gitService.getDiff();
-      const diffStats = await gitService.getDiffStats();
-      const recentCommits = await gitService.getRecentCommits(
-        config.maxHistoryCommits || 50,
-      );
-
-      const suggestions =
-        await groqService.generateCommitSuggestionsFromCustomInput(
-          state.stagedFiles,
-          diff,
-          userInput,
-          recentCommits,
-          diffStats,
-        );
-
-      const hasFallback = suggestions.some((s) => s.isFallback);
-      setState((prev) => ({
-        ...prev,
-        suggestions,
-        isLoading: false,
-        error: undefined,
-      }));
-      setIsUsingFallback(hasFallback);
-    } catch (error) {
-      setState((prev) => ({
-        ...prev,
-        error: `Failed to generate suggestions: ${error instanceof Error ? error.message : String(error)}`,
-        isLoading: false,
-      }));
-    }
+    await fetchSuggestions(state.stagedFiles, customInput.trim());
   };
 
   // Error State
   if (state.error) {
     return (
-      <Box flexDirection="column" padding={2}>
-        <Box
-          borderStyle="single"
-          borderColor="#ef4444"
-          padding={2}
-          marginBottom={1}
-        >
-          <Text color="#ef4444" bold>
-            Error
-          </Text>
-          <Box marginTop={1}>
-            <Text color="#e5e7eb">{state.error}</Text>
-          </Box>
-        </Box>
-        <Box>
-          <Text color="#6b7280">
-            Press <Text color="#ef4444">Esc</Text> or{" "}
-            <Text color="#ef4444">Ctrl+C</Text> to exit
-          </Text>
+      <Box
+        borderStyle="single"
+        borderColor="#ef4444"
+        padding={2}
+        marginBottom={1}
+      >
+        <Text color="#ef4444" bold>
+          Error
+        </Text>
+        <Box marginTop={1}>
+          <Text color="#e5e7eb">{state.error}</Text>
         </Box>
       </Box>
     );
@@ -290,7 +258,7 @@ export const BetterCommitApp: React.FC<AppProps> = ({
     return (
       <Box flexDirection="column" padding={2} justifyContent="center">
         <Text bold color="#8b5cf6">
-          Better Commit
+          Better-Commit
         </Text>
         <Box marginTop={1}>
           <Text color="#6b7280">Loading staged files...</Text>
@@ -304,7 +272,7 @@ export const BetterCommitApp: React.FC<AppProps> = ({
       {/* Header */}
       <Box marginBottom={1}>
         <Text bold color="#8b5cf6">
-          Better Commit
+          Better-Commit
         </Text>
         <Text color="#6b7280"> • AI-Powered Commit Suggestions</Text>
       </Box>

package/src/components/CommitSuggestions.tsx

@@ -39,7 +39,7 @@ export const CommitSuggestions: React.FC<CommitSuggestionsProps> = ({
       }, 80);
       return () => clearInterval(timer);
     }
-  }, [isLoading]);
+  }, [isLoading, spinnerFrames.length]);
 
   useInput((input, key) => {
     if (key.upArrow) {

package/src/components/ConfigApp.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from "react";
+import React, { useState, useCallback, useMemo } from "react";
 import { Box, Text, useInput, useApp, Key } from "ink";
 import { configManager } from "../utils/config";
 import { Config } from "../types";
@@ -21,36 +21,50 @@ export const ConfigApp: React.FC<ConfigAppProps> = ({ onExit }) => {
 
   const [menuIndex, setMenuIndex] = useState(0);
 
-  const menuItems = [
-    {
-      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: [
-        "llama-3.1-8b-instant",
-        "llama-3.3-70b-versatile",
-        "openai/gpt-oss-20b",
-      ],
-    },
-    {
-      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,
-    },
-  ];
+  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 saveAndExit = () => {
+  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
@@ -61,12 +75,12 @@ export const ConfigApp: React.FC<ConfigAppProps> = ({ onExit }) => {
     configManager.updateConfig(finalConfig);
     onExit("Configuration saved");
     exit();
-  };
+  }, [config, onExit, exit]);
 
-  const cancelAndExit = () => {
+  const cancelAndExit = useCallback(() => {
     onExit("Configuration cancelled");
     exit();
-  };
+  }, [onExit, exit]);
 
   const handleInput = useCallback(
     (input: string, key: Key) => {
@@ -93,16 +107,25 @@ export const ConfigApp: React.FC<ConfigAppProps> = ({ onExit }) => {
       } else if (key.escape || (key.ctrl && input === "c")) {
         cancelAndExit();
       }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
     },
-    [activeDialog, menuIndex, menuItems],
+    [activeDialog, menuIndex, menuItems, saveAndExit, cancelAndExit],
   );
 
   useInput(handleInput, { isActive: !activeDialog });
 
   const handleDialogSubmit = (value: string) => {
     if (activeDialog) {
-      setConfig((prev) => ({ ...prev, [activeDialog.key]: value }));
+      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);
     }
   };
@@ -129,6 +152,16 @@ export const ConfigApp: React.FC<ConfigAppProps> = ({ onExit }) => {
           ••••••••
         </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}>

package/src/services/groq.ts

@@ -53,9 +53,21 @@ export class GroqService {
       }
 
       return this.parseSuggestions(content);
-    } catch (e) {
-      console.error("Error generating suggestions:", e);
-      // Fallback to mock suggestions when API fails (silently handle)
+    } catch (e: unknown) {
+      const error = e as { status?: number; message?: string };
+      if (error?.status === 401) {
+        console.warn("\n\x1b[33m⚠️  Groq API Key is invalid.\x1b[0m");
+        console.warn(
+          "   Using static backup suggestions. Run \x1b[36mbetter-commit config\x1b[0m to set your key.\n",
+        );
+      } else {
+        console.error(
+          "Error generation suggestions:",
+          error?.message || String(e),
+        );
+      }
+
+      // Fallback to mock suggestions when API fails
       const fallbackSuggestions = this.getFallbackSuggestions(stagedFiles);
       return fallbackSuggestions.map((s) => ({ ...s, isFallback: true }));
     }
@@ -110,8 +122,19 @@ export class GroqService {
       }
 
       return this.parseSuggestions(content);
-    } catch (e) {
-      console.error("Error generating suggestions:", e);
+    } catch (e: unknown) {
+      const error = e as { status?: number; message?: string };
+      if (error?.status === 401) {
+        console.warn("\n\x1b[33m⚠️  Groq API Key is invalid.\x1b[0m");
+        console.warn(
+          "   Using static backup suggestions. Run \x1b[36mbetter-commit config\x1b[0m to set your key.\n",
+        );
+      } else {
+        console.error(
+          "Error generation suggestions:",
+          error?.message || String(e),
+        );
+      }
       // Fallback to mock suggestions when API fails (silently handle)
       const fallbackSuggestions = this.getFallbackSuggestions(stagedFiles);
       return fallbackSuggestions.map((s) => ({ ...s, isFallback: true }));
@@ -178,18 +201,20 @@ IMPORTANT: Carefully analyze the git diff below to understand WHAT changes were
 Files staged for commit:
 ${filesText}${statsText}
 
-${diff
-        ? `Complete git diff (analyze this carefully to understand the actual changes):\n${diff.slice(
-          0,
-          2000,
-        )}\n${diff.length > 2000 ? "...(truncated)" : ""}`
-        : "No diff available"
-      }
+${
+  diff
+    ? `Complete git diff (analyze this carefully to understand the actual changes):\n${diff.slice(
+        0,
+        2000,
+      )}\n${diff.length > 2000 ? "...(truncated)" : ""}`
+    : "No diff available"
+}
 
-${recentCommitsText
-        ? `Recent commit history for reference:\n${recentCommitsText}`
-        : ""
-      }
+${
+  recentCommitsText
+    ? `Recent commit history for reference:\n${recentCommitsText}`
+    : ""
+}
 
 Requirements:
 - Generate exactly 4 different commit messages
@@ -206,9 +231,9 @@ Output ONLY valid JSON.`;
     const fileNames =
       stagedFiles.length > 0
         ? stagedFiles
-          .map((f) => f.path)
-          .slice(0, 3)
-          .join(", ") + (stagedFiles.length > 3 ? "..." : "")
+            .map((f) => f.path)
+            .slice(0, 3)
+            .join(", ") + (stagedFiles.length > 3 ? "..." : "")
         : "files";
 
     const suggestions = [
@@ -294,18 +319,20 @@ IMPORTANT: Carefully analyze the git diff below to understand WHAT changes were
 Files staged for commit:
 ${filesText}${statsText}
 
-${diff
-        ? `Complete git diff (analyze this carefully to understand the actual changes):\n${diff.slice(
-          0,
-          2000,
-        )}\n${diff.length > 2000 ? "...(truncated)" : ""}`
-        : "No diff available"
-      }
+${
+  diff
+    ? `Complete git diff (analyze this carefully to understand the actual changes):\n${diff.slice(
+        0,
+        2000,
+      )}\n${diff.length > 2000 ? "...(truncated)" : ""}`
+    : "No diff available"
+}
 
-${recentCommitsText
-        ? `Recent commit history for reference:\n${recentCommitsText}`
-        : ""
-      }
+${
+  recentCommitsText
+    ? `Recent commit history for reference:\n${recentCommitsText}`
+    : ""
+}
 
 Requirements:
 - Generate exactly 4 different commit messages
@@ -325,16 +352,29 @@ Output ONLY valid JSON.`;
       if (jsonMatch) {
         const parsed = JSON.parse(jsonMatch[0]);
         if (parsed.suggestions && Array.isArray(parsed.suggestions)) {
-          return parsed.suggestions.map((s: any) => ({
-            message: s.message || "",
-            type: s.type || this.extractType(s.message || ""),
-            description: s.description || s.message || "",
-          })).slice(0, 4);
+          if (parsed.suggestions && Array.isArray(parsed.suggestions)) {
+            return parsed.suggestions
+              .map(
+                (s: {
+                  message?: string;
+                  type?: string;
+                  description?: string;
+                }) => ({
+                  message: s.message || "",
+                  type: s.type || this.extractType(s.message || ""),
+                  description: s.description || s.message || "",
+                }),
+              )
+              .slice(0, 4);
+          }
         }
       }
       throw new Error("Invalid JSON structure");
     } catch (e) {
-      console.warn("Failed to parse JSON suggestions, falling back to basic parsing:", e);
+      console.warn(
+        "Failed to parse JSON suggestions, falling back to basic parsing:",
+        e,
+      );
       // Fallback to basic line parsing if JSON fails
       const lines = content.split("\n").filter((line) => line.trim());
       const suggestions: CommitSuggestion[] = [];