fix: immediate exit and notification ids

README.md

@@ -7,6 +7,7 @@ https://github.com/3rd/promptpack/assets/59587503/0c243caf-fbd2-4f2e-a343-fac2b0
 ## Installation
 
 PromptPack is hosted on NPM, so you can either:
+
 - install `promptpack` globally with your preferred package manager (ex. `npm install -g promptpack`)
 - or run it directly with `npx/pnpx/bunx promptpack`
 
@@ -17,3 +18,5 @@ PromptPack is hosted on NPM, so you can either:
 This is the default (any only right now) mode, which lets you interactively navigate, select, and package files into a prompt, and copy it to the system clipboard.
 
 Navigate up and down with arrows or `k`/`j`, expand/collapse directories with `Tab` or `Enter`, mark the files you want to include with `Space`, and press `y` to copy the prompt.
+
+Tokens are estimated for GPT-4/GPT-3.5 using [https://github.com/dqbd/tiktoken](https://github.com/dqbd/tiktoken).

package.json

@@ -81,6 +81,7 @@
     "execa": "^8.0.1",
     "ink": "^4.4.1",
     "js-tiktoken": "^1.0.8",
+    "nanoid": "^5.0.4",
     "react": "^18.2.0"
   }
 }

src/App.tsx

@@ -1,14 +1,15 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Box, Text, useApp, useInput } from "ink";
 import clipboard from "copy-paste";
+import { nanoid } from "nanoid";
 import { Screen } from "./components/Screen.js";
 import { Stats } from "./components/Stats.js";
-import { getTree, isTreeDirectory, watch } from "./utils/fs.js";
+import { tokenize } from "./utils/tokenizer.js";
+import { Header } from "./components/Header.js";
 import { Tree } from "./components/Tree.js";
+import { getTree, isTreeDirectory, watch } from "./utils/fs.js";
 import { useAppReducer } from "./state.js";
 import { buildPrompt } from "./prompt.js";
-import { tokenize } from "./utils/tokenizer.js";
-import { Header } from "./components/Header.js";
 
 const cwd = process.cwd();
 const initialRoot = getTree(cwd);
@@ -18,15 +19,25 @@ const MAX_LOG_LENGTH = 6;
 export const App = () => {
   const app = useApp();
   const [state, dispatch] = useAppReducer(initialRoot);
-  const [notifications, setNotifications] = useState<string[]>([]);
+  const [notifications, setNotifications] = useState<{ id: string; message: string }[]>([]);
 
   const addNotification = (notification: string) => {
     const prefix = `${new Date().toLocaleTimeString("ja-JP")} `;
-    setNotifications((prevNotifications) => [...prevNotifications, prefix + notification]);
+    setNotifications((prevNotifications) => [
+      ...prevNotifications,
+      {
+        id: nanoid(),
+        message: prefix + notification,
+      },
+    ]);
   };
 
   useInput((input, key) => {
-    if (input === "q") app.exit();
+    if (input === "q") {
+      app.exit();
+      // eslint-disable-next-line node/no-process-exit
+      process.exit(0);
+    }
     if (input === "j" || key.downArrow) dispatch({ type: "nav:down" });
     if (input === "k" || key.upArrow) dispatch({ type: "nav:up" });
     if (key.return || key.tab) dispatch({ type: "nav:tab" });
@@ -66,7 +77,7 @@ export const App = () => {
     return () => {
       watcher.close();
     };
-  }, []);
+  }, [dispatch]);
 
   const stats = useMemo(() => {
     const prompt = buildPrompt(state.selectedFiles);
@@ -82,16 +93,16 @@ export const App = () => {
     <Screen>
       <Header>
         <Box flexDirection="column" flexGrow={0}>
-          {notifications.slice(-MAX_LOG_LENGTH).map((notification, index) => (
-            <Text color="gray" key={index}>
-              <Text>{notification}</Text>
+          {notifications.slice(-MAX_LOG_LENGTH).map((notification) => (
+            <Text key={notification.id} color="gray">
+              <Text>{notification.message}</Text>
             </Text>
           ))}
         </Box>
       </Header>
       <Stats fileCount={stats.files.length} tokenCount={stats.tokens} />
       <Box flexGrow={1}>
-        <Tree items={state.visibleItems} cursorItemPath={state.cursorItemPath} />
+        <Tree cursorItemPath={state.cursorItemPath} items={state.visibleItems} />
       </Box>
     </Screen>
   );

src/state.tsx

@@ -100,7 +100,7 @@ const toggleItemSelected = (node: TreeDirectory | TreeFile, path: string): TreeD
   return newNode;
 };
 
-const AppStateReducer = (state: DerivedAppState, action: AppAction): DerivedAppState => {
+const appStateReducer = (state: DerivedAppState, action: AppAction): DerivedAppState => {
   const nextState = { ...state };
   const { cursorItemPath, root, visibleItems } = state;
 
@@ -154,4 +154,4 @@ const bootstrapState = (root: TreeDirectory) => {
   };
 };
 
-export const useAppReducer = (root: TreeDirectory) => useReducer(AppStateReducer, bootstrapState(root));
+export const useAppReducer = (root: TreeDirectory) => useReducer(appStateReducer, bootstrapState(root));