Add claude opus/sonnet support

2 files changed, 34 insertions, 6 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"
diff --git a/makima/frontend/src/lib/api.ts b/makima/frontend/src/lib/api.ts
index 5ef9c22..6f7071d 100644
--- a/makima/frontend/src/lib/api.ts
+++ b/makima/frontend/src/lib/api.ts
@@ -108,9 +108,13 @@ export interface UpdateFileRequest {
   body?: BodyElement[];
 }
 
+// Available LLM models
+export type LlmModel = "claude-sonnet" | "claude-opus" | "groq";
+
 // Chat API types
 export interface ChatRequest {
   message: string;
+  model?: LlmModel;
 }
 
 export interface ToolCallInfo {
@@ -184,12 +188,17 @@ export async function deleteFile(id: string): Promise<void> {
 // Chat API function
 export async function chatWithFile(
   id: string,
-  message: string
+  message: string,
+  model?: LlmModel
 ): Promise<ChatResponse> {
+  const body: ChatRequest = { message };
+  if (model) {
+    body.model = model;
+  }
   const res = await fetch(`${API_BASE}/api/v1/files/${id}/chat`, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ message }),
+    body: JSON.stringify(body),
   });
   if (!res.ok) {
     const errorText = await res.text();