Add claude opus/sonnet support

1 files changed, 23 insertions, 4 deletions

diff --git a/makima/frontend/src/components/files/CliInput.tsx b/makima/frontend/src/components/files/CliInput.tsx
index b20eb27..1dcc884 100644
--- a/makima/frontend/src/components/files/CliInput.tsx
+++ b/makima/frontend/src/components/files/CliInput.tsx
@@ -1,5 +1,5 @@
 import { useState, useCallback, useRef, useEffect } from "react";
-import { chatWithFile, type BodyElement } from "../../lib/api";
+import { chatWithFile, type BodyElement, type LlmModel } from "../../lib/api";
 
 interface CliInputProps {
   fileId: string;
@@ -13,11 +13,18 @@ interface Message {
   toolCalls?: { name: string; success: boolean; message: string }[];
 }
 
+const MODEL_OPTIONS: { value: LlmModel; label: string }[] = [
+  { value: "claude-opus", label: "Claude Opus" },
+  { value: "claude-sonnet", label: "Claude Sonnet" },
+  { value: "groq", label: "Groq Kimi" },
+];
+
 export function CliInput({ fileId, onUpdate }: CliInputProps) {
   const [input, setInput] = useState("");
   const [loading, setLoading] = useState(false);
   const [messages, setMessages] = useState<Message[]>([]);
   const [expanded, setExpanded] = useState(false);
+  const [model, setModel] = useState<LlmModel>("claude-opus");
   const inputRef = useRef<HTMLInputElement>(null);
   const messagesRef = useRef<HTMLDivElement>(null);
 
@@ -47,7 +54,7 @@ export function CliInput({ fileId, onUpdate }: CliInputProps) {
       setLoading(true);
 
       try {
-        const response = await chatWithFile(fileId, userMessage);
+        const response = await chatWithFile(fileId, userMessage, model);
 
         // Add assistant response
         const assistantMsgId = (Date.now() + 1).toString();
@@ -82,7 +89,7 @@ export function CliInput({ fileId, onUpdate }: CliInputProps) {
         inputRef.current?.focus();
       }
     },
-    [input, loading, fileId, onUpdate]
+    [input, loading, fileId, model, onUpdate]
   );
 
   const clearMessages = useCallback(() => {
@@ -136,7 +143,19 @@ export function CliInput({ fileId, onUpdate }: CliInputProps) {
 
       {/* Input Bar */}
       <form onSubmit={handleSubmit} className="flex items-center gap-2 p-3">
-        <span className="text-[#9bc3ff] font-mono text-sm">$</span>
+        <select
+          value={model}
+          onChange={(e) => setModel(e.target.value as LlmModel)}
+          disabled={loading}
+          className="bg-[#0d1b2d] border border-[rgba(117,170,252,0.25)] text-[#9bc3ff] font-mono text-xs px-2 py-1 rounded-none outline-none focus:border-[#3f6fb3] disabled:opacity-50"
+        >
+          {MODEL_OPTIONS.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+        <span className="text-[#9bc3ff] font-mono text-sm">&gt;</span>
         <input
           ref={inputRef}
           type="text"