@kirosnn/mosaic 0.0.9 → 0.71.0

package/src/components/Main.tsx

@@ -1,4 +1,5 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef } from "react";
+import type { ImagePart, TextPart, UserContent } from "ai";
 import { useKeyboard } from "@opentui/react";
 import { Agent } from "../agent";
 import { saveConversation, addInputToHistory, type ConversationHistory, type ConversationStep } from "../utils/history";
@@ -13,11 +14,14 @@ import { subscribeUndoRedo } from "../utils/undoRedoBridge";
 import { setExploreAbortController, setExploreToolCallback, abortExplore } from "../utils/exploreBridge";
 import { initializeSession, saveState } from "../utils/undoRedo";
 import { resetFileChanges } from "../utils/fileChangeTracker";
-import { getCurrentQuestion, cancelQuestion } from "../utils/questionBridge";
-import { getCurrentApproval, cancelApproval } from "../utils/approvalBridge";
-import { BLEND_WORDS, type MainProps, type Message } from "./main/types";
-import { HomePage } from './main/HomePage';
-import { ChatPage } from './main/ChatPage';
+import { getCurrentQuestion, cancelQuestion } from "../utils/questionBridge";
+import { getCurrentApproval, cancelApproval } from "../utils/approvalBridge";
+import { BLEND_WORDS, type MainProps, type Message } from "./main/types";
+import { HomePage } from './main/HomePage';
+import { ChatPage } from './main/ChatPage';
+import type { ImageAttachment } from "../utils/images";
+import { subscribeImageCommand, setImageSupport } from "../utils/imageBridge";
+import { findModelsDevModelById, modelAcceptsImages } from "../utils/models";
 
 function extractTitle(content: string, alreadyResolved: boolean): { title: string | null; cleanContent: string; isPending: boolean; noTitle: boolean } {
   const trimmed = content.trimStart();
@@ -54,8 +58,10 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
   const [scrollOffset, setScrollOffset] = useState(0);
   const [terminalHeight, setTerminalHeight] = useState(process.stdout.rows || 24);
   const [terminalWidth, setTerminalWidth] = useState(process.stdout.columns || 80);
-  const [questionRequest, setQuestionRequest] = useState<QuestionRequest | null>(null);
-  const [currentTitle, setCurrentTitle] = useState<string | null>(null);
+  const [questionRequest, setQuestionRequest] = useState<QuestionRequest | null>(null);
+  const [currentTitle, setCurrentTitle] = useState<string | null>(null);
+  const [pendingImages, setPendingImages] = useState<ImageAttachment[]>([]);
+  const [imagesSupported, setImagesSupported] = useState(false);
   const currentTitleRef = useRef<string | null>(null);
   const titleExtractedRef = useRef(false);
   const shouldAutoScroll = useRef(true);
@@ -71,10 +77,31 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
 
   const createId = () => `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
 
-  useEffect(() => {
-    initializeCommands();
-    initializeSession();
-  }, []);
+  useEffect(() => {
+    initializeCommands();
+    initializeSession();
+  }, []);
+
+  useEffect(() => {
+    const loadSupport = async () => {
+      const config = readConfig();
+      if (!config.model) {
+        setImagesSupported(false);
+        setImageSupport(false);
+        return;
+      }
+      try {
+        const result = await findModelsDevModelById(config.model);
+        const supported = Boolean(result && result.model && modelAcceptsImages(result.model));
+        setImagesSupported(supported);
+        setImageSupport(supported);
+      } catch {
+        setImagesSupported(false);
+        setImageSupport(false);
+      }
+    };
+    loadSupport();
+  }, []);
 
   useEffect(() => {
     let lastExploreTokens = 0;
@@ -95,7 +122,7 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
           const idx = newMessages.findIndex(m => m.id === exploreMessageIdRef.current);
           if (idx !== -1) {
             const toolLines = exploreToolsRef.current.map(t => {
-              const icon = t.success ? '+' : '-';
+              const icon = t.success ? '→' : '-';
               return `  ${icon} ${t.tool}(${t.info})`;
             });
             const purpose = explorePurposeRef.current;
@@ -112,14 +139,35 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
     };
   }, []);
 
-  useEffect(() => {
-    return subscribeUndoRedo((state, action) => {
-      if (state) {
-        setMessages(state.messages);
-        resetFileChanges();
-      }
-    });
-  }, []);
+  useEffect(() => {
+    return subscribeUndoRedo((state, action) => {
+      if (state) {
+        setMessages(state.messages);
+        resetFileChanges();
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    return subscribeImageCommand((event) => {
+      if (event.type === "clear") {
+        setPendingImages([]);
+        return;
+      }
+      if (event.type === "remove") {
+        setPendingImages((prev) => prev.filter((img) => img.id !== event.id));
+        return;
+      }
+      if (!imagesSupported) return;
+      setPendingImages((prev) => [...prev, event.image]);
+    });
+  }, [imagesSupported]);
+
+  useEffect(() => {
+    if (!imagesSupported) {
+      setPendingImages([]);
+    }
+  }, [imagesSupported]);
 
   useEffect(() => {
     const handleResize = () => {
@@ -260,24 +308,58 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
     }
   }, [copyRequestId, onCopy, messages]);
 
-  useKeyboard((key) => {
-    if (key.name === 'escape') {
-      if (getCurrentQuestion()) {
-        cancelQuestion();
-      }
+  useKeyboard((key) => {
+    if ((key.name === 'c' && key.ctrl) || key.sequence === '\x03') {
+      if (getCurrentQuestion()) {
+        cancelQuestion();
+      }
+      if (getCurrentApproval()) {
+        cancelApproval();
+      }
+      abortControllerRef.current?.abort();
+      return;
+    }
+
+    if (key.name === 'escape') {
+      if (getCurrentQuestion()) {
+        cancelQuestion();
+      }
       if (getCurrentApproval()) {
         cancelApproval();
       }
       abortControllerRef.current?.abort();
       return;
-    }
-  });
-
-  const handleSubmit = async (value: string, meta?: InputSubmitMeta) => {
-    if (isProcessing) return;
-
-    const hasPastedContent = Boolean(meta?.isPaste && meta.pastedContent);
-    if (!value.trim() && !hasPastedContent) return;
+    }
+  });
+
+  const buildUserContent = (text: string, images?: ImageAttachment[]): UserContent => {
+    if (!images || images.length === 0) return text;
+    const parts: Array<TextPart | ImagePart> = [];
+    parts.push({ type: "text", text });
+    for (const img of images) {
+      parts.push({ type: "image", image: img.data, mimeType: img.mimeType });
+    }
+    return parts;
+  };
+
+  const buildConversationHistory = (base: Message[], includeImages: boolean) => {
+    return base
+      .filter((m): m is Message & { role: "user" | "assistant" } => m.role === "user" || m.role === "assistant")
+      .map((m) => {
+        if (m.role === "user") {
+          const content = includeImages ? buildUserContent(m.content, m.images) : m.content;
+          return { role: "user" as const, content };
+        }
+        return { role: "assistant" as const, content: m.content };
+      });
+  };
+
+  const handleSubmit = async (value: string, meta?: InputSubmitMeta) => {
+    if (isProcessing) return;
+
+    const hasPastedContent = Boolean(meta?.isPaste && meta.pastedContent);
+    const hasImages = imagesSupported && pendingImages.length > 0;
+    if (!value.trim() && !hasPastedContent && !hasImages) return;
 
     if (isCommand(value)) {
       const result = await executeCommand(value);
@@ -342,9 +424,12 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
             timestamp: Date.now()
           });
 
-          try {
-            const providerStatus = await Agent.ensureProviderReady();
-            if (!providerStatus.ready) {
+          let responseDuration: number | null = null;
+          let responseBlendWord: string | null = null;
+
+          try {
+            const providerStatus = await Agent.ensureProviderReady();
+            if (!providerStatus.ready) {
               setMessages((prev: Message[]) => {
                 const newMessages = [...prev];
                 newMessages.push({
@@ -360,9 +445,7 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
             }
 
             const agent = new Agent();
-            const conversationHistory = [...messages, userMessage]
-              .filter((m): m is Message & { role: 'user' | 'assistant' } => m.role === 'user' || m.role === 'assistant')
-              .map((m) => ({ role: m.role, content: m.content }));
+            const conversationHistory = buildConversationHistory([...messages, userMessage], imagesSupported);
             let assistantChunk = '';
             let thinkingChunk = '';
             const pendingToolCalls = new Map<string, { toolName: string; args: Record<string, unknown>; messageId?: string }>();
@@ -614,27 +697,44 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
               return;
             }
 
-            if (!streamHadError && assistantChunk.trim()) {
-              conversationSteps.push({
-                type: 'assistant',
-                content: assistantChunk,
-                timestamp: Date.now()
-              });
-            }
-
-            const conversationData: ConversationHistory = {
-              id: conversationId,
-              timestamp: Date.now(),
-              steps: conversationSteps,
-              totalSteps: stepCount,
-              totalTokens: totalTokens.total > 0 ? totalTokens : undefined,
-              model: config.model,
-              provider: config.provider
-            };
-
-            saveConversation(conversationData);
-
-          } catch (error) {
+            if (!streamHadError && assistantChunk.trim()) {
+              conversationSteps.push({
+                type: 'assistant',
+                content: assistantChunk,
+                timestamp: Date.now()
+              });
+            }
+
+            responseDuration = Date.now() - localStartTime;
+            if (responseDuration >= 60000) {
+              responseBlendWord = BLEND_WORDS[Math.floor(Math.random() * BLEND_WORDS.length)];
+              for (let i = conversationSteps.length - 1; i >= 0; i--) {
+                if (conversationSteps[i]?.type === 'assistant') {
+                  conversationSteps[i] = {
+                    ...conversationSteps[i]!,
+                    responseDuration,
+                    blendWord: responseBlendWord
+                  };
+                  break;
+                }
+              }
+            }
+
+            const conversationData: ConversationHistory = {
+              id: conversationId,
+              timestamp: Date.now(),
+              steps: conversationSteps,
+              totalSteps: stepCount,
+              title: currentTitleRef.current ?? currentTitle ?? null,
+              workspace: process.cwd(),
+              totalTokens: totalTokens.total > 0 ? totalTokens : undefined,
+              model: config.model,
+              provider: config.provider
+            };
+
+            saveConversation(conversationData);
+
+          } catch (error) {
             if (abortController.signal.aborted) {
               notifyAbort();
               return;
@@ -664,14 +764,14 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
             if (abortControllerRef.current === abortController) {
               abortControllerRef.current = null;
             }
-            const duration = Date.now() - localStartTime;
-            if (duration >= 60000) {
-              const blendWord = BLEND_WORDS[Math.floor(Math.random() * BLEND_WORDS.length)];
-              setMessages((prev: Message[]) => {
-                const newMessages = [...prev];
-                for (let i = newMessages.length - 1; i >= 0; i--) {
-                  if (newMessages[i]?.role === 'assistant') {
-                    newMessages[i] = { ...newMessages[i]!, responseDuration: duration, blendWord };
+            const duration = responseDuration ?? (Date.now() - localStartTime);
+            if (duration >= 60000) {
+              const blendWord = responseBlendWord ?? BLEND_WORDS[Math.floor(Math.random() * BLEND_WORDS.length)];
+              setMessages((prev: Message[]) => {
+                const newMessages = [...prev];
+                for (let i = newMessages.length - 1; i >= 0; i--) {
+                  if (newMessages[i]?.role === 'assistant') {
+                    newMessages[i] = { ...newMessages[i]!, responseDuration: duration, blendWord };
                     break;
                   }
                 }
@@ -706,17 +806,24 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
       ? `${meta!.pastedContent!}${value.trim() ? `\n\n${value}` : ''}`
       : value;
 
-    addInputToHistory(value.trim() || (hasPastedContent ? '[Pasted text]' : value));
+    addInputToHistory(value.trim() || (hasPastedContent ? '[Pasted text]' : (hasImages ? '[Image]' : value)));
 
     saveState(messages);
 
-    const userMessage: Message = {
-      id: createId(),
-      role: "user",
-      content: composedContent,
-      displayContent: meta?.isPaste ? '[Pasted text]' : undefined,
-    };
-
+    const imagesForMessage = imagesSupported ? pendingImages : [];
+
+    const userMessage: Message = {
+      id: createId(),
+      role: "user",
+      content: composedContent,
+      displayContent: meta?.isPaste ? '[Pasted text]' : undefined,
+      images: imagesForMessage.length > 0 ? imagesForMessage : undefined,
+    };
+
+    if (imagesForMessage.length > 0) {
+      setPendingImages([]);
+    }
+
     setMessages((prev: Message[]) => [...prev, userMessage]);
     setIsProcessing(true);
     const localStartTime = Date.now();
@@ -759,15 +866,19 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
       });
     };
 
-    conversationSteps.push({
-      type: 'user',
-      content: composedContent,
-      timestamp: Date.now()
-    });
-
-    try {
-      const providerStatus = await Agent.ensureProviderReady();
-      if (!providerStatus.ready) {
+    conversationSteps.push({
+      type: 'user',
+      content: composedContent,
+      timestamp: Date.now(),
+      images: imagesForMessage.length > 0 ? imagesForMessage : undefined
+    });
+
+          let responseDuration: number | null = null;
+          let responseBlendWord: string | null = null;
+
+          try {
+            const providerStatus = await Agent.ensureProviderReady();
+            if (!providerStatus.ready) {
         setMessages((prev: Message[]) => {
           const newMessages = [...prev];
           newMessages.push({
@@ -783,20 +894,43 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
       }
 
       const agent = new Agent();
-      const conversationHistory = [...messages, userMessage]
-        .filter((m): m is Message & { role: 'user' | 'assistant' } => m.role === 'user' || m.role === 'assistant')
-        .map((m) => ({ role: m.role, content: m.content }));
-      let assistantChunk = '';
-      const pendingToolCalls = new Map<string, { toolName: string; args: Record<string, unknown>; messageId?: string }>();
-      let assistantMessageId: string | null = null;
-      let streamHadError = false;
-      titleExtractedRef.current = false;
-
-      for await (const event of agent.streamMessages(conversationHistory, { abortSignal: abortController.signal })) {
-        if (event.type === 'text-delta') {
-          assistantChunk += event.content;
-          totalChars += event.content.length;
-          setCurrentTokens(estimateTokens());
+      const conversationHistory = buildConversationHistory([...messages, userMessage], imagesSupported);
+      let assistantChunk = '';
+      let thinkingChunk = '';
+      const pendingToolCalls = new Map<string, { toolName: string; args: Record<string, unknown>; messageId?: string }>();
+      let assistantMessageId: string | null = null;
+      let streamHadError = false;
+      titleExtractedRef.current = false;
+
+      for await (const event of agent.streamMessages(conversationHistory, { abortSignal: abortController.signal })) {
+        if (event.type === 'reasoning-delta') {
+          thinkingChunk += event.content;
+          totalChars += event.content.length;
+          setCurrentTokens(estimateTokens());
+
+          if (assistantMessageId === null) {
+            assistantMessageId = createId();
+          }
+
+          const currentMessageId = assistantMessageId;
+          setMessages((prev: Message[]) => {
+            const newMessages = [...prev];
+            const messageIndex = newMessages.findIndex(m => m.id === currentMessageId);
+
+            if (messageIndex === -1) {
+              newMessages.push({ id: currentMessageId, role: "assistant", content: '', thinkingContent: thinkingChunk });
+            } else {
+              newMessages[messageIndex] = {
+                ...newMessages[messageIndex]!,
+                thinkingContent: thinkingChunk
+              };
+            }
+            return newMessages;
+          });
+        } else if (event.type === 'text-delta') {
+          assistantChunk += event.content;
+          totalChars += event.content.length;
+          setCurrentTokens(estimateTokens());
 
           const { title, cleanContent, isPending, noTitle } = extractTitle(assistantChunk, titleExtractedRef.current);
 
@@ -816,21 +950,22 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
           }
 
           const displayContent = cleanContent;
-          const currentMessageId = assistantMessageId;
-          setMessages((prev: Message[]) => {
-            const newMessages = [...prev];
-            const messageIndex = newMessages.findIndex(m => m.id === currentMessageId);
-
-            if (messageIndex === -1) {
-              newMessages.push({ id: currentMessageId, role: "assistant", content: displayContent });
-            } else {
-              newMessages[messageIndex] = {
-                ...newMessages[messageIndex]!,
-                content: displayContent
-              };
-            }
-            return newMessages;
-          });
+          const currentMessageId = assistantMessageId;
+          setMessages((prev: Message[]) => {
+            const newMessages = [...prev];
+            const messageIndex = newMessages.findIndex(m => m.id === currentMessageId);
+
+            if (messageIndex === -1) {
+              newMessages.push({ id: currentMessageId, role: "assistant", content: displayContent, thinkingContent: thinkingChunk });
+            } else {
+              newMessages[messageIndex] = {
+                ...newMessages[messageIndex]!,
+                content: displayContent,
+                thinkingContent: thinkingChunk
+              };
+            }
+            return newMessages;
+          });
         } else if (event.type === 'step-start') {
           stepCount++;
         } else if (event.type === 'tool-call-end') {
@@ -947,14 +1082,15 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
             return newMessages;
           });
 
-          assistantChunk = '';
-          assistantMessageId = null;
-        } else if (event.type === 'error') {
-          if (abortController.signal.aborted) {
-            notifyAbort();
-            streamHadError = true;
-            break;
-          }
+          assistantChunk = '';
+          thinkingChunk = '';
+          assistantMessageId = null;
+        } else if (event.type === 'error') {
+          if (abortController.signal.aborted) {
+            notifyAbort();
+            streamHadError = true;
+            break;
+          }
           if (assistantChunk.trim()) {
             conversationSteps.push({
               type: 'assistant',
@@ -981,10 +1117,11 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
             return newMessages;
           });
 
-          assistantChunk = '';
-          assistantMessageId = null;
-          streamHadError = true;
-          break;
+          assistantChunk = '';
+          thinkingChunk = '';
+          assistantMessageId = null;
+          streamHadError = true;
+          break;
         } else if (event.type === 'finish') {
           if (event.usage && event.usage.totalTokens > 0) {
             totalTokens = {
@@ -1002,25 +1139,42 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
         return;
       }
 
-      if (!streamHadError && assistantChunk.trim()) {
-        conversationSteps.push({
-          type: 'assistant',
-          content: assistantChunk,
-          timestamp: Date.now()
-        });
-      }
-
-      const conversationData: ConversationHistory = {
-        id: conversationId,
-        timestamp: Date.now(),
-        steps: conversationSteps,
-        totalSteps: stepCount,
-        totalTokens: totalTokens.total > 0 ? totalTokens : undefined,
-        model: config.model,
-        provider: config.provider
-      };
-
-      saveConversation(conversationData);
+          if (!streamHadError && assistantChunk.trim()) {
+            conversationSteps.push({
+              type: 'assistant',
+              content: assistantChunk,
+              timestamp: Date.now()
+            });
+          }
+
+          responseDuration = Date.now() - localStartTime;
+          if (responseDuration >= 60000) {
+            responseBlendWord = BLEND_WORDS[Math.floor(Math.random() * BLEND_WORDS.length)];
+            for (let i = conversationSteps.length - 1; i >= 0; i--) {
+              if (conversationSteps[i]?.type === 'assistant') {
+                conversationSteps[i] = {
+                  ...conversationSteps[i]!,
+                  responseDuration,
+                  blendWord: responseBlendWord
+                };
+                break;
+              }
+            }
+          }
+
+          const conversationData: ConversationHistory = {
+            id: conversationId,
+            timestamp: Date.now(),
+            steps: conversationSteps,
+            totalSteps: stepCount,
+            title: currentTitleRef.current ?? currentTitle ?? null,
+            workspace: process.cwd(),
+            totalTokens: totalTokens.total > 0 ? totalTokens : undefined,
+            model: config.model,
+            provider: config.provider
+          };
+
+          saveConversation(conversationData);
 
     } catch (error) {
       if (abortController.signal.aborted) {
@@ -1052,14 +1206,14 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
       if (abortControllerRef.current === abortController) {
         abortControllerRef.current = null;
       }
-      const duration = Date.now() - localStartTime;
-      if (duration >= 60000) {
-        const blendWord = BLEND_WORDS[Math.floor(Math.random() * BLEND_WORDS.length)];
-        setMessages((prev: Message[]) => {
-          const newMessages = [...prev];
-          for (let i = newMessages.length - 1; i >= 0; i--) {
-            if (newMessages[i]?.role === 'assistant') {
-              newMessages[i] = { ...newMessages[i]!, responseDuration: duration, blendWord };
+      const duration = responseDuration ?? (Date.now() - localStartTime);
+      if (duration >= 60000) {
+        const blendWord = responseBlendWord ?? BLEND_WORDS[Math.floor(Math.random() * BLEND_WORDS.length)];
+        setMessages((prev: Message[]) => {
+          const newMessages = [...prev];
+          for (let i = newMessages.length - 1; i >= 0; i--) {
+            if (newMessages[i]?.role === 'assistant') {
+              newMessages[i] = { ...newMessages[i]!, responseDuration: duration, blendWord };
               break;
             }
           }
@@ -1096,17 +1250,18 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
   }
 
   return (
-    <ChatPage
-      messages={messages}
-      isProcessing={isProcessing}
-      processingStartTime={processingStartTime}
-      currentTokens={currentTokens}
-      scrollOffset={scrollOffset}
-      terminalHeight={terminalHeight}
-      terminalWidth={terminalWidth}
-      pasteRequestId={pasteRequestId}
-      shortcutsOpen={shortcutsOpen}
-      onSubmit={handleSubmit}
-    />
-  );
-}
+    <ChatPage
+      messages={messages}
+      isProcessing={isProcessing}
+      processingStartTime={processingStartTime}
+      currentTokens={currentTokens}
+      scrollOffset={scrollOffset}
+      terminalHeight={terminalHeight}
+      terminalWidth={terminalWidth}
+      pasteRequestId={pasteRequestId}
+      shortcutsOpen={shortcutsOpen}
+      onSubmit={handleSubmit}
+      pendingImages={pendingImages}
+    />
+  );
+}

package/src/components/ShortcutsModal.tsx

@@ -10,13 +10,16 @@ interface ShortcutsModalProps {
 }
 
 export function ShortcutsModal({ activeTab }: ShortcutsModalProps) {
-  const shortcutsGeneral: ShortcutItem[] = [
-    { keys: "Ctrl+P / Alt+P", description: "Open/close this shortcuts panel" },
-    { keys: "Alt+V (or Ctrl+V)", description: "Paste from clipboard into the focused input" },
-    { keys: "Enter", description: "Confirm / submit" },
-    { keys: "↑/↓ (or j/k)", description: "Navigate lists" },
-    { keys: "PageUp/PageDown", description: "Scroll chat faster" },
-  ];
+  const shortcutsGeneral: ShortcutItem[] = [
+    { keys: "Ctrl+P / Alt+P", description: "Open/close this shortcuts panel" },
+    { keys: "Alt+V (or Ctrl+V)", description: "Paste from clipboard into the focused input" },
+    { keys: "Ctrl+C", description: "Cancel the current request" },
+    { keys: "Alt+C (or Cmd+C)", description: "Copy the last assistant message" },
+    { keys: "Shift+Tab", description: "Toggle auto-approve for agent changes" },
+    { keys: "Enter", description: "Confirm / submit" },
+    { keys: "↑/↓ (or j/k)", description: "Navigate lists" },
+    { keys: "PageUp/PageDown", description: "Scroll chat faster" },
+  ];
 
   const shortcutsSetup: ShortcutItem[] = [
     { keys: "Esc", description: "Go back to the previous step" },
@@ -64,4 +67,4 @@ export function ShortcutsModal({ activeTab }: ShortcutsModalProps) {
       </box>
     </box>
   );
-}
+}