refactor: split App.tsx into modular components

- Create src/components directory with separate components
- Extract Message type to types.ts
- Split MessageItem, ChatHistory, Spinner, and InputField into separate files
- Simplify App.tsx to focus only on state management
- Improve code maintainability and reusability

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: koki-develop

src/App.tsx

@@ -1,14 +1,10 @@
-import { Box, Static, Text } from "ink";
-import Spinner from "ink-spinner";
-import TextInput from "ink-text-input";
+import { Box } from "ink";
 import type React from "react";
 import { useState } from "react";
-
-interface Message {
-  id: number;
-  text: string;
-  sender: "user" | "cat";
-}
+import { ChatHistory } from "./components/ChatHistory";
+import { InputField } from "./components/InputField";
+import { Spinner } from "./components/Spinner";
+import type { Message } from "./components/types";
 
 export const App: React.FC = () => {
   const [messages, setMessages] = useState<Message[]>([]);
@@ -41,30 +37,14 @@ export const App: React.FC = () => {
 
   return (
     <Box flexDirection="column">
-      <Static items={messages}>
-        {(message) => (
-          <Box key={message.id} marginBottom={1}>
-            <Text color={message.sender === "user" ? "cyan" : "green"}>
-              {message.text}
-            </Text>
-          </Box>
-        )}
-      </Static>
-      {isLoading && (
-        <Box>
-          <Spinner type="dots" />
-          <Text> Thinking...</Text>
-        </Box>
-      )}
-      <Box>
-        <Text color="yellow">&gt; </Text>
-        <TextInput
-          value={input}
-          onChange={setInput}
-          onSubmit={handleSubmit}
-          showCursor={!isLoading}
-        />
-      </Box>
+      <ChatHistory messages={messages} />
+      {isLoading && <Spinner />}
+      <InputField
+        value={input}
+        onChange={setInput}
+        onSubmit={handleSubmit}
+        showCursor={!isLoading}
+      />
     </Box>
   );
 };

src/components/ChatHistory.tsx

@@ -0,0 +1,16 @@
+import { Static } from "ink";
+import type React from "react";
+import { MessageItem } from "./MessageItem";
+import type { Message } from "./types";
+
+interface ChatHistoryProps {
+  messages: Message[];
+}
+
+export const ChatHistory: React.FC<ChatHistoryProps> = ({ messages }) => {
+  return (
+    <Static items={messages}>
+      {(message) => <MessageItem key={message.id} message={message} />}
+    </Static>
+  );
+};

src/components/InputField.tsx

@@ -0,0 +1,29 @@
+import { Box, Text } from "ink";
+import TextInput from "ink-text-input";
+import type React from "react";
+
+interface InputFieldProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: () => void;
+  showCursor: boolean;
+}
+
+export const InputField: React.FC<InputFieldProps> = ({
+  value,
+  onChange,
+  onSubmit,
+  showCursor,
+}) => {
+  return (
+    <Box>
+      <Text color="yellow">&gt; </Text>
+      <TextInput
+        value={value}
+        onChange={onChange}
+        onSubmit={onSubmit}
+        showCursor={showCursor}
+      />
+    </Box>
+  );
+};

src/components/MessageItem.tsx

@@ -0,0 +1,17 @@
+import { Box, Text } from "ink";
+import type React from "react";
+import type { Message } from "./types";
+
+interface MessageItemProps {
+  message: Message;
+}
+
+export const MessageItem: React.FC<MessageItemProps> = ({ message }) => {
+  return (
+    <Box marginBottom={1}>
+      <Text color={message.sender === "user" ? "cyan" : "green"}>
+        {message.text}
+      </Text>
+    </Box>
+  );
+};

src/components/Spinner.tsx

@@ -0,0 +1,12 @@
+import { Box, Text } from "ink";
+import InkSpinner from "ink-spinner";
+import type React from "react";
+
+export const Spinner: React.FC = () => {
+  return (
+    <Box>
+      <InkSpinner type="dots" />
+      <Text> Thinking...</Text>
+    </Box>
+  );
+};

src/components/types.ts

@@ -0,0 +1,5 @@
+export interface Message {
+  id: number;
+  text: string;
+  sender: "user" | "cat";
+}