@abacus-ai/cli 1.106.25007 → 2.0.0-canary.0

package/src/components/composer/index.tsx

@@ -0,0 +1,1006 @@
+import type { IAbacusConvoListResponse } from "@codellm/api";
+
+import { PromptHistory } from "@codellm/agent";
+import { getDeviceId } from "@codellm/auth";
+import { View, Text } from "@codellm/jar";
+import { product } from "@codellm/product";
+import {
+  type Ref,
+  memo,
+  Suspense,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+import type { InterruptHints } from "../../hooks/use-interrupt-manager.js";
+
+import { useAgentMode } from "../../context/agent-mode.js";
+import { useExtensionFile } from "../../context/extension-file.js";
+import { useShellSize } from "../../context/shell-size.js";
+import { useAgent } from "../../hooks/use-agent.js";
+import { useApiClient } from "../../hooks/use-api-client.js";
+import { useAvailableHeight } from "../../hooks/use-available-height.js";
+import { useModels } from "../../hooks/use-models.js";
+import {
+  clipboardHasImage,
+  saveClipboardImage,
+  readClipboardText,
+  isMacOSTempScreenshot,
+  copyTempScreenshotToProject,
+} from "../../lib/clipboard.js";
+import { MAX_RECENT_CONVERSATIONS } from "../../lib/constants.js";
+import {
+  parsePastedPaths,
+  prettifyMentionPath,
+  escapePathForMention,
+} from "../../lib/path-paste.js";
+import { abbreviateHome } from "../../lib/path.js";
+import { isWindows, sleep } from "../../lib/utils.js";
+import { AgentStatus } from "../../providers/agent.js";
+import { gracefulExit } from "../../terminal/exit.js";
+import { useTheme } from "../../theme/index.js";
+import { Input, InputKeyDownEvent } from "../ui/input.js";
+import { registerDefaultCommands } from "./commands/default-commands.js";
+import { commandRegistry } from "./commands/registry.js";
+import { ComposerProvider, useComposerContext } from "./context.js";
+import { buildMentionGrammar, getMentionAtCursor } from "./mentions.js";
+import { MessageQueue } from "./message-queue.js";
+import { ModePanel } from "./mode-panel.js";
+import { useModeHandlers } from "./modes/index.js";
+import { ComposerMode, ModeMeta } from "./types.js";
+
+const MODE_META: Record<ComposerMode, ModeMeta> = {
+  [ComposerMode.Prompt]: {
+    color: undefined,
+    placeholder: 'Try "Build a ecommerce website..."',
+    prefix: "❯",
+  },
+  [ComposerMode.Help]: {
+    color: undefined,
+    placeholder: 'Try "Build a ecommerce website..."',
+    prefix: "❯",
+  },
+  [ComposerMode.Bash]: {
+    color: "greenBright",
+    placeholder: isWindows() ? 'Try "dir"' : 'Try "ls -la"',
+    prefix: "!",
+  },
+  [ComposerMode.Command]: {
+    color: "magentaBright",
+    placeholder: 'Try "/resume <chat title>"',
+    prefix: "❯",
+  },
+  [ComposerMode.Files]: { color: "cyanBright", placeholder: 'Try "@help.md"', prefix: "@" },
+};
+
+const MODE_TRIGGERS: Record<
+  string,
+  { mode: ComposerMode; preventDefault: boolean; atStartOnly: boolean }
+> = {
+  "!": { mode: ComposerMode.Bash, preventDefault: true, atStartOnly: true },
+  "?": { mode: ComposerMode.Help, preventDefault: true, atStartOnly: true },
+  "/": { mode: ComposerMode.Command, preventDefault: true, atStartOnly: true },
+  "@": { mode: ComposerMode.Files, preventDefault: false, atStartOnly: false },
+};
+
+export interface ComposerHandle {
+  hasText: () => boolean;
+  hasQueue: () => boolean;
+  saveAndClear: () => void;
+  clear: () => void;
+  clearQueue: () => void;
+}
+
+const ComposerInner = memo(
+  ({ hints, composerRef }: { hints?: InterruptHints; composerRef?: Ref<ComposerHandle> }) => {
+    const {
+      prompt,
+      setPrompt,
+      mode,
+      setMode,
+      bufferRef,
+      activity,
+      setActivity,
+      queuedMessages,
+      addToQueue,
+      clearQueue,
+      attachments,
+      addAttachment,
+      clearAttachments,
+    } = useComposerContext();
+
+    // Inline paste helpers — delegate to TextBuffer's built-in placeholder system
+    const expandPlaceholders = useCallback(
+      (text: string) => bufferRef.current?.getExpandedText(text) ?? text,
+      [bufferRef],
+    );
+    const clearPlaceholders = useCallback(() => {
+      // no-op: TextBuffer clears its own pastedContent map on setText("")
+    }, []);
+
+    // Non-bracketed paste debounce accumulator (for terminals without BP support)
+    const nonBpAccumRef = useRef<{ text: string; timer: ReturnType<typeof setTimeout> | null }>({
+      text: "",
+      timer: null,
+    });
+
+    // ── Prompt history (persisted across sessions) ──
+    const promptHistoryRef = useRef<PromptHistory | null>(null);
+    if (!promptHistoryRef.current) {
+      promptHistoryRef.current = new PromptHistory("cli-repl");
+      void promptHistoryRef.current.load();
+    }
+    const promptHistory = promptHistoryRef.current;
+    const draftRef = useRef<string>("");
+    const prevTextLenRef = useRef(0);
+
+    // Expose imperative handle for interrupt manager
+    useImperativeHandle(composerRef, () => ({
+      hasText: () => prompt.length > 0,
+      hasQueue: () => queuedMessages.length > 0,
+      saveAndClear: () => {
+        const text = prompt.trim();
+        if (text) {
+          promptHistory.append(text);
+          promptHistory.resetNavigation();
+        }
+        bufferRef.current?.setText("");
+        clearPlaceholders();
+        clearAttachments();
+      },
+      clear: () => {
+        bufferRef.current?.setText("");
+        clearPlaceholders();
+        clearAttachments();
+      },
+      clearQueue: () => clearQueue(),
+    }));
+    const { currentFile, selectionStartLine, selectionEndLine } = useExtensionFile();
+    const {
+      sendMessage,
+      clearSegments,
+      clearSegmentsOnly,
+      clearTempSegments,
+      stop,
+      addNotification,
+      mcp,
+      addAllowedDirectory,
+      refreshMcpTools,
+      loadConversation,
+      agentStatus,
+      segmentsLength,
+      dequeuedOnStop,
+      clearDequeuedOnStop,
+      networkOnline,
+    } = useAgent();
+    const { apiClient, authManager } = useApiClient();
+    const { data: models = [], refetch: refetchModels } = useModels(apiClient);
+    const { width: terminalWidth } = useShellSize();
+    const { cycleAgentMode, resetToNormal, isWaitingForYoloConfirm } = useAgentMode();
+    const { setTheme } = useTheme();
+    const availableHeight = useAvailableHeight();
+    const clearBuffer = useCallback(() => {
+      bufferRef.current?.setText("");
+    }, [bufferRef]);
+    const { handlers, getActivity, bashNavigateHistory } = useModeHandlers(
+      () => setMode(ComposerMode.Prompt),
+      clearBuffer,
+    );
+    const currentHandler = handlers.get(mode) || null;
+    const [conversations, setConversations] = useState<
+      NonNullable<IAbacusConvoListResponse["result"]>
+    >([]);
+    const [selectedModel, setSelectedModel] = useState<string>("");
+    const [isLoggedIn, setIsLoggedIn] = useState<boolean | null>(null);
+
+    const loadConversations = useCallback(async () => {
+      try {
+        const response = await apiClient.getConversationsList(product.agentType, process.cwd());
+        if (response?.result) {
+          setConversations(response.result.slice(0, MAX_RECENT_CONVERSATIONS));
+        }
+      } catch {
+        // Silently fail - conversations list is optional
+      }
+    }, [apiClient]);
+
+    useEffect(() => {
+      void loadConversations();
+    }, [loadConversations]);
+
+    useEffect(() => {
+      apiClient
+        .getUserInfo()
+        .then((res) => setIsLoggedIn(!!res?.result?.email))
+        .catch(() => {
+          // Network error or other failure — fall back to local auth check.
+          // Don't assume "not logged in" just because the server is unreachable.
+          setIsLoggedIn(authManager.isAuthenticated());
+        });
+    }, [apiClient, authManager]);
+
+    useEffect(() => {
+      if (dequeuedOnStop) {
+        bufferRef.current?.setText(dequeuedOnStop);
+        clearDequeuedOnStop();
+      }
+    }, [dequeuedOnStop, clearDequeuedOnStop, bufferRef]);
+
+    useEffect(() => {
+      registerDefaultCommands({
+        onExit: () => {
+          gracefulExit(0);
+        },
+        onNewChat: () => {
+          clearSegments();
+          clearQueue();
+          bufferRef.current?.setText("");
+        },
+        onClearChat: () => {
+          clearSegmentsOnly();
+          bufferRef.current?.setText("");
+        },
+        onStop: () => {
+          stop();
+        },
+        onModelChange: (llmName: string) => {
+          const matchedModel = models.find((m) => m.llmName === llmName);
+          if (matchedModel) {
+            setSelectedModel(matchedModel.llmName);
+            bufferRef.current?.setText("");
+            addNotification(
+              `Switched to model: ${matchedModel.name || matchedModel.llmName}`,
+              "info",
+            );
+          } else {
+            addNotification(`Model not found`, "error");
+          }
+        },
+        onResumeChat: async (title: string) => {
+          const matchedConversation = conversations.find((conv) => {
+            const convTitle = conv.name || conv.deploymentConversationId || "Untitled";
+            return convTitle.toLowerCase().includes(title.toLowerCase());
+          });
+
+          if (matchedConversation?.deploymentConversationId) {
+            try {
+              // Clear queue and buffer before loading conversation
+              // This ensures state is properly reset when resuming multiple times
+              clearQueue();
+              bufferRef.current?.setText("");
+              await loadConversation(matchedConversation.deploymentConversationId);
+              addNotification(
+                `Resumed conversation: ${matchedConversation.name || matchedConversation.deploymentConversationId}`,
+                "info",
+              );
+            } catch (error) {
+              addNotification(
+                `Failed to load conversation: ${error instanceof Error ? error.message : "Unknown error"}`,
+                "error",
+              );
+            }
+          } else {
+            addNotification(`Conversation "${title}" not found`, "error");
+          }
+        },
+        onLogin: async (emailOrApiKey?: string) => {
+          try {
+            if (authManager.isEnvAuth()) {
+              addNotification(
+                "You are authenticated via an environment variable. Unset it to use /login or /logout.",
+                "error",
+              );
+              return;
+            }
+
+            if (!emailOrApiKey) {
+              addNotification("Usage: /login <email> or /login <api_key>", "error");
+              return;
+            }
+
+            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+            const isEmail = emailRegex.test(emailOrApiKey);
+
+            if (isEmail) {
+              const email = emailOrApiKey;
+              const deviceId = await getDeviceId();
+              const response = await apiClient.authenticateDeviceForCodeLlm(email, deviceId);
+              if (!response?.success || !response?.result) {
+                addNotification(response?.error ?? "Failed to start device code login", "error");
+                return;
+              }
+
+              const { verificationUri, userCode, pollingInterval } = response.result;
+              addNotification(
+                `Open the URL and enter the code to authenticate.\n\nURL:  ${verificationUri}\nCode: ${userCode}\n\nPolling for completion...`,
+                "info",
+              );
+
+              void (async () => {
+                const intervalMs = (pollingInterval || 5) * 1000;
+                const deadline = Date.now() + 10 * 60 * 1000;
+                while (Date.now() < deadline) {
+                  await sleep(intervalMs);
+                  try {
+                    const res = await apiClient.pollDeviceCode(userCode);
+                    if (res?.success && res.result?.deviceCode) {
+                      const token = res.result.deviceCode;
+                      const chatWebUrl = res.result.chatWebUrl;
+                      await authManager.loginWithDeviceCode(token);
+                      if (chatWebUrl) {
+                        const normalized = chatWebUrl.replace(/^https?:\/\//, "");
+                        apiClient.setChatWebDomain(normalized);
+                      }
+                      addNotification("Authentication successful!", "info");
+                      setIsLoggedIn(true);
+                      await loadConversations();
+                      await refetchModels();
+                      return;
+                    }
+                  } catch {
+                    // keep polling
+                  }
+                }
+                addNotification("Authentication timed out. Please try again.", "error");
+              })();
+            } else {
+              // API key login
+              await authManager.loginWithApiKey(emailOrApiKey);
+              try {
+                const userInfo = await apiClient.getUserInfo();
+                if (userInfo?.result?.email) {
+                  addNotification("API key login successful!", "info");
+                  setIsLoggedIn(true);
+                  await loadConversations();
+                  await refetchModels();
+                } else {
+                  await authManager.logout();
+                  addNotification("Invalid API key — authentication failed", "error");
+                }
+              } catch (error) {
+                await authManager.logout();
+                addNotification(
+                  `API key authentication failed: ${error instanceof Error ? error.message : "Unknown error"}`,
+                  "error",
+                );
+              }
+            }
+            bufferRef.current?.setText("");
+          } catch (error) {
+            addNotification(
+              `Login failed: ${error instanceof Error ? error.message : "Unknown error"}`,
+              "error",
+            );
+          }
+        },
+        onLogout: async () => {
+          if (authManager.isEnvAuth()) {
+            addNotification(
+              "You are authenticated via an environment variable. Unset it to use /login or /logout.",
+              "error",
+            );
+            return;
+          }
+          await authManager.logout();
+          setIsLoggedIn(false);
+        },
+        getUserInfo: async () => {
+          try {
+            const response = await apiClient.getUserInfo();
+            if (response?.success && response.result) {
+              const { name, email, organization } = response.result;
+              const team = organization?.name || "No team";
+              const authKind = authManager.getAuthKind();
+              const authMethod =
+                authKind.type === "env_api_key"
+                  ? "API key (env)"
+                  : authKind.type === "env_device_code"
+                    ? "Device code (env)"
+                    : authKind.type === "api_key"
+                      ? "API key"
+                      : authKind.type === "device_code"
+                        ? "Device code"
+                        : authKind.type === "oauth_token"
+                          ? "OAuth token"
+                          : "Unknown";
+              addNotification(
+                `User Status:\n\nName: ${name || "N/A"}\nEmail: ${email || "N/A"}\nTeam: ${team}\nAuth Method: ${authMethod}`,
+                "info",
+              );
+            } else {
+              addNotification("Failed to get user info", "error");
+            }
+          } catch {
+            addNotification("Failed to get user info", "error");
+          }
+        },
+        getModels: async () => {
+          return models
+            .filter((m) => m.codeAgentSupported)
+            .map((m) => ({
+              label: m.name || m.llmName,
+              value: m.llmName,
+              model: m,
+            }));
+        },
+        getChatTitles: async () => {
+          return conversations.map((conv) => {
+            const title = conv.name || conv.deploymentConversationId || "Untitled";
+            return title.length > 50 ? title.substring(0, 47) + "..." : title;
+          });
+        },
+        addNotification,
+        mcp,
+        addAllowedDirectory,
+        refreshMcpTools,
+        getAgentStatus: () => agentStatus,
+        setTheme,
+        checkEnvAuth: () => ({
+          isEnvAuth: authManager.isEnvAuth(),
+          shouldHide: authManager.isEnvAuth(),
+        }),
+      });
+    }, [
+      models,
+      clearSegments,
+      clearSegmentsOnly,
+      clearQueue,
+      bufferRef,
+      apiClient,
+      refetchModels,
+      stop,
+      addNotification,
+      mcp,
+      addAllowedDirectory,
+      refreshMcpTools,
+      loadConversation,
+      conversations,
+      loadConversations,
+      agentStatus,
+      setTheme,
+    ]);
+
+    // ── Clipboard attachment helper ─────────────────────────────────────────
+    const attachImageFromPath = useCallback(
+      async (imagePath: string) => {
+        try {
+          const { default: fsPromises } = await import("node:fs/promises");
+          const { default: pathMod } = await import("node:path");
+          const stats = await fsPromises.stat(imagePath);
+          const buffer = await fsPromises.readFile(imagePath);
+          const ext = pathMod.extname(imagePath).toLowerCase();
+          const mimeType = ext === ".jpg" || ext === ".jpeg" ? "image/jpeg" : "image/png";
+          const docId =
+            "tui-" + Math.random().toString(36).slice(2, 11) + "-" + Date.now().toString(36);
+          addAttachment({
+            doc_id: docId,
+            filename: imagePath,
+            filePath: pathMod.resolve(imagePath),
+            fileName: pathMod.basename(imagePath),
+            content: buffer.toString("base64"),
+            mimeType,
+            mime_type: mimeType,
+            size: stats.size,
+            metadata: {
+              uploadedAt: new Date().toISOString(),
+              source: "tui-clipboard",
+              isImage: true,
+              encoding: "base64",
+            },
+          });
+        } catch {
+          // silently ignore attachment errors
+        }
+      },
+      [addAttachment],
+    );
+
+    // ── Native clipboard paste handler (Ctrl+V / Cmd+V) ─────────────────────
+    // Triggered when the OS clipboard is read directly (not via bracketed paste).
+    const handleClipboardPaste = useCallback(async () => {
+      // 1. Check for clipboard image first
+      if (await clipboardHasImage()) {
+        const saved = await saveClipboardImage(process.cwd());
+        if (saved) {
+          const pretty = prettifyMentionPath(saved);
+          const escaped = escapePathForMention(pretty);
+          bufferRef.current?.insert(`@${escaped} `);
+          await attachImageFromPath(saved);
+          return;
+        }
+      }
+
+      // 2. Read clipboard text
+      const text = await readClipboardText();
+      if (!text) return;
+
+      // 3. Check if it looks like file paths
+      const paths = parsePastedPaths(text.trim());
+      if (paths) {
+        bufferRef.current?.insert(paths);
+        return;
+      }
+
+      // 4. Fall back to text insert with large-paste detection
+      bufferRef.current?.insert(text, { isPaste: true });
+    }, [bufferRef, attachImageFromPath]);
+
+    const handleKeyDown = useCallback(
+      (event: InputKeyDownEvent) => {
+        const atStart = event.target.cursor[0] === 0 && event.target.cursor[1] === 0;
+
+        // ── Ctrl+V / Cmd+V: native clipboard paste ───────────────────────────
+        // Only handle when bracketed paste is NOT also firing (guard: key.paste not set)
+        if (!event.key.paste) {
+          const isCmdV = process.platform === "darwin" && event.key.super && event.input === "v";
+          const isCtrlV =
+            (process.platform !== "darwin" && event.key.ctrl && event.input === "v") ||
+            (process.platform === "linux" &&
+              event.key.ctrl &&
+              event.key.shift &&
+              event.input === "V");
+          if (isCmdV || isCtrlV) {
+            void handleClipboardPaste();
+            event.preventDefault();
+            return;
+          }
+        }
+
+        // ── Bracketed paste (key.paste = true) ───────────────────────────────
+        if (event.key.paste) {
+          const rawText = event.input;
+          // Normalize: strip trailing \r\n from drag-and-drop
+          const text = rawText.replace(/[\r\n]+$/, "");
+
+          // 1. macOS temp screenshot path?
+          const trimmedSeg = text.trim();
+          if (isMacOSTempScreenshot(trimmedSeg)) {
+            const copied = copyTempScreenshotToProject(trimmedSeg);
+            if (copied) {
+              const pretty = prettifyMentionPath(copied);
+              const escaped = escapePathForMention(pretty);
+              bufferRef.current?.insert(`@${escaped} `);
+              void attachImageFromPath(copied);
+              event.preventDefault();
+              return;
+            }
+          }
+
+          // 2. Try file path detection
+          const paths = parsePastedPaths(text.trim());
+          if (paths) {
+            bufferRef.current?.insert(paths);
+            event.preventDefault();
+            return;
+          }
+
+          // 3. Check OS clipboard for image (e.g. GNOME sends 0x16 / SYN)
+          void (async () => {
+            if (await clipboardHasImage()) {
+              const saved = await saveClipboardImage(process.cwd());
+              if (saved) {
+                const pretty = prettifyMentionPath(saved);
+                const escaped = escapePathForMention(pretty);
+                bufferRef.current?.insert(`@${escaped} `);
+                await attachImageFromPath(saved);
+                return;
+              }
+            }
+            // 4. Regular text paste — large-paste detection handled by TextBuffer
+            bufferRef.current?.insert(text, { isPaste: true });
+          })();
+          event.preventDefault();
+          return;
+        }
+
+        // ── Non-bracketed paste debounce (terminals without BP support) ───────
+        // Multi-char input arriving rapidly without key.paste is likely a paste
+        if (event.input.length > 3 && !event.key.ctrl && !event.key.meta && !event.key.paste) {
+          nonBpAccumRef.current.text += event.input;
+          if (nonBpAccumRef.current.timer) clearTimeout(nonBpAccumRef.current.timer);
+          nonBpAccumRef.current.timer = setTimeout(() => {
+            const accumulated = nonBpAccumRef.current.text;
+            nonBpAccumRef.current = { text: "", timer: null };
+            const paths = parsePastedPaths(accumulated.trim());
+            if (paths) {
+              bufferRef.current?.insert(paths);
+              return;
+            }
+            bufferRef.current?.insert(accumulated, { isPaste: true });
+          }, 50);
+          event.preventDefault();
+          return;
+        }
+
+        // Handle editing queued message with up arrow in Prompt mode
+        // Only triggers when buffer is empty (cursor already at top edge)
+        if (
+          mode === ComposerMode.Prompt &&
+          event.key.upArrow &&
+          event.target.visualCursor[0] === 0 &&
+          queuedMessages.length > 0 &&
+          prompt.trim() === ""
+        ) {
+          const queuedMessage = queuedMessages[0];
+          bufferRef.current?.setText(queuedMessage);
+          clearQueue();
+          event.preventDefault();
+          return;
+        }
+
+        // Handle prompt history navigation for Prompt/Help/Files modes.
+        // Only trigger when the cursor is at the extreme edge of the buffer:
+        //   Up arrow → only when cursor is on the first visual line (top of buffer)
+        //   Down arrow → only when cursor is on the last visual line (bottom of buffer)
+        const usesPromptHistory =
+          mode === ComposerMode.Prompt || mode === ComposerMode.Help || mode === ComposerMode.Files;
+
+        if (usesPromptHistory && (event.key.upArrow || event.key.downArrow)) {
+          const buf = event.target;
+          const atTopEdge = buf.visualCursor[0] === 0;
+          const atBottomEdge = buf.visualCursor[0] >= buf.allVisualLines.length - 1;
+
+          if (event.key.upArrow && atTopEdge) {
+            // Save current text as draft before first navigation
+            if (promptHistory.getEntries().length > 0) {
+              const currentText = prompt;
+              const testEntry = promptHistory.navigateUp();
+              if (testEntry) {
+                if (draftRef.current === "" && currentText.trim() !== "") {
+                  draftRef.current = currentText;
+                }
+                bufferRef.current?.setText(testEntry.message);
+                event.preventDefault();
+                return;
+              }
+            }
+          } else if (event.key.downArrow && atBottomEdge) {
+            const entry = promptHistory.navigateDown();
+            if (entry) {
+              bufferRef.current?.setText(entry.message);
+            } else {
+              // Past newest — restore draft
+              bufferRef.current?.setText(draftRef.current);
+              draftRef.current = "";
+            }
+            event.preventDefault();
+            return;
+          }
+        }
+
+        // Handle history navigation in bash mode — only at buffer edges
+        if (mode === ComposerMode.Bash && bashNavigateHistory) {
+          const buf = event.target;
+          const bashAtTop = event.key.upArrow && buf.visualCursor[0] === 0;
+          const bashAtBottom =
+            event.key.downArrow && buf.visualCursor[0] >= buf.allVisualLines.length - 1;
+          if (bashAtTop || bashAtBottom) {
+            const historyCommand = bashNavigateHistory(event.key.upArrow ? "up" : "down");
+            if (historyCommand !== null) {
+              bufferRef.current?.setText(historyCommand);
+              event.preventDefault();
+              return;
+            }
+          }
+        }
+
+        if (currentHandler?.shouldPreventDefault) {
+          if (currentHandler.shouldPreventDefault(event.input || "", event.key)) {
+            event.preventDefault();
+            return;
+          }
+        }
+
+        if (atStart && event.key.backspace) {
+          if (isWaitingForYoloConfirm) {
+            resetToNormal();
+            event.preventDefault();
+            return;
+          }
+          if (mode !== ComposerMode.Prompt) {
+            setMode(ComposerMode.Prompt);
+            promptHistory.resetNavigation();
+            draftRef.current = "";
+            event.preventDefault();
+          }
+          return;
+        }
+
+        if (mode === ComposerMode.Prompt && event.key.shift && event.key.tab) {
+          cycleAgentMode();
+          event.preventDefault();
+          return;
+        }
+
+        const trigger = MODE_TRIGGERS[event.input];
+        if (trigger && (!trigger.atStartOnly || atStart)) {
+          if (mode !== trigger.mode) {
+            setMode(trigger.mode);
+          }
+          if (trigger.preventDefault && trigger.mode !== ComposerMode.Command) {
+            event.preventDefault();
+          }
+          return;
+        }
+      },
+      [
+        mode,
+        setMode,
+        currentHandler,
+        bashNavigateHistory,
+        bufferRef,
+        handleClipboardPaste,
+        attachImageFromPath,
+        queuedMessages,
+        prompt,
+        clearQueue,
+        isWaitingForYoloConfirm,
+        resetToNormal,
+        cycleAgentMode,
+        promptHistory,
+      ],
+    );
+
+    const handleChange = useCallback(
+      (text: string, buffer: any) => {
+        const prevLen = prevTextLenRef.current;
+        prevTextLenRef.current = text.length;
+        setPrompt(text);
+
+        // Clear temporary messages (like help) when user starts typing a regular message
+        const trimmed = text.trim();
+        const startsWithSlash = trimmed.startsWith("/");
+        const isAgentBusy =
+          agentStatus === AgentStatus.Submitted ||
+          agentStatus === AgentStatus.Streaming ||
+          agentStatus === AgentStatus.ExecutingTool ||
+          agentStatus === AgentStatus.WaitingForToolPermission;
+
+        if (text.length > 0 && !startsWithSlash && !isAgentBusy) {
+          clearTempSegments();
+        }
+
+        const mention = getMentionAtCursor(text, buffer.cursor);
+
+        // Auto-reset to Prompt mode when user deletes all text in trigger-based modes.
+        // Only triggers when the buffer previously had content (prevLen > 0), i.e. user
+        // backspaced to empty. Does NOT trigger when entering a mode on an already-empty
+        // buffer (e.g. typing "!" switches to Bash with empty buffer — stays in Bash).
+        if (
+          trimmed.length === 0 &&
+          prevLen > 0 &&
+          (mode === ComposerMode.Command ||
+            mode === ComposerMode.Bash ||
+            mode === ComposerMode.Help)
+        ) {
+          setMode(ComposerMode.Prompt);
+          return;
+        }
+
+        if (mention) {
+          if (mode !== ComposerMode.Files) setMode(ComposerMode.Files);
+          return;
+        }
+
+        if (mode === ComposerMode.Files) {
+          if (!mention) {
+            setMode(ComposerMode.Prompt);
+          }
+          return;
+        }
+
+        if (mode === ComposerMode.Help && trimmed.length > 0) {
+          setMode(ComposerMode.Prompt);
+        }
+
+        if (startsWithSlash && mode !== ComposerMode.Command) {
+          setMode(ComposerMode.Command);
+        } else if (!startsWithSlash && mode === ComposerMode.Command && trimmed.length > 0) {
+          setMode(ComposerMode.Prompt);
+        }
+      },
+      [mode, setPrompt, setMode, clearTempSegments, agentStatus],
+    );
+
+    const handleSubmit = useCallback(
+      async (value: string) => {
+        const trimmed = value.trim();
+        if (!trimmed.startsWith("/")) {
+          const aliasMatch = commandRegistry.match(trimmed, mode);
+          if (aliasMatch && (await commandRegistry.execute(aliasMatch))) {
+            bufferRef.current?.setText("");
+            clearAttachments();
+            return;
+          }
+        }
+
+        if (currentHandler?.onSubmit) {
+          currentHandler.onSubmit(value);
+          if (mode === ComposerMode.Bash) {
+            // Clear the input after submitting bash command
+            bufferRef.current?.setText("");
+            setActivity(getActivity());
+          } else if (mode === ComposerMode.Command) {
+            setMode(ComposerMode.Prompt);
+          }
+          clearAttachments();
+          return;
+        }
+
+        switch (mode) {
+          case ComposerMode.Prompt:
+            if (isLoggedIn === false) {
+              addNotification("Not logged in. Use /login email@example.com to login.", "warning");
+              return;
+            }
+
+            if (!networkOnline) {
+              addNotification("You are offline — check your connection and try again.", "error");
+              return;
+            }
+
+            const isAgentBusy =
+              agentStatus === AgentStatus.Submitted ||
+              agentStatus === AgentStatus.Streaming ||
+              agentStatus === AgentStatus.ExecutingTool ||
+              agentStatus === AgentStatus.WaitingForToolPermission;
+
+            if (isAgentBusy) {
+              const expanded = expandPlaceholders(value.trim());
+              addToQueue(expanded);
+              promptHistory.append(expanded);
+              promptHistory.resetNavigation();
+              draftRef.current = "";
+              clearPlaceholders();
+              bufferRef.current?.setText("");
+              return;
+            }
+
+            // Fall back to the first available model when none is explicitly selected,
+            // so the session never operates with an empty model string.
+            const modelToUse = selectedModel || models[0]?.llmName || undefined;
+
+            // Expand placeholder text with actual pasted content
+            const finalMessage = expandPlaceholders(value);
+
+            promptHistory.append(finalMessage);
+            promptHistory.resetNavigation();
+            draftRef.current = "";
+
+            void sendMessage({ message: finalMessage, selectedModel: modelToUse });
+            clearPlaceholders();
+            clearAttachments();
+            break;
+          default:
+        }
+      },
+      [
+        mode,
+        currentHandler,
+        sendMessage,
+        getActivity,
+        setActivity,
+        selectedModel,
+        setMode,
+        bufferRef,
+        agentStatus,
+        addToQueue,
+        addNotification,
+        attachments,
+        clearAttachments,
+        isLoggedIn,
+        expandPlaceholders,
+        clearPlaceholders,
+        promptHistory,
+      ],
+    );
+
+    const { color: modeColor, placeholder: modePlaceholder, prefix: modePrefix } = MODE_META[mode];
+
+    // Clear placeholder text after first message has been sent
+    const effectivePlaceholder = segmentsLength > 0 ? "" : modePlaceholder;
+
+    const inputWidth = useMemo(() => {
+      if (terminalWidth === undefined) return undefined;
+      return Math.max(1, terminalWidth - 3);
+    }, [terminalWidth]);
+
+    const grammar = useMemo(() => buildMentionGrammar(), []);
+    const effectiveActivity = mode === ComposerMode.Bash ? getActivity() : activity;
+    const isInputDisabled = effectiveActivity === "pending";
+
+    const pathText = (
+      <Text wrap="truncate-middle" color="yellowBright">
+        {abbreviateHome(process.cwd())}
+      </Text>
+    );
+
+    const statusAndPath = (
+      <View flexDirection="row" gap={1} justifyContent="flex-end">
+        {isLoggedIn === false && <Text dimColor>Not logged in</Text>}
+        {pathText}
+      </View>
+    );
+
+    return (
+      <View flexDirection="column">
+        {queuedMessages.length > 0 ? (
+          <MessageQueue pathElement={statusAndPath} />
+        ) : (
+          <View justifyContent="flex-end">{statusAndPath}</View>
+        )}
+        <View
+          borderStyle="single"
+          borderLeft={false}
+          borderRight={false}
+          borderColor={modeColor}
+          borderDimColor
+          flexDirection="row"
+          gap={1}
+        >
+          <Text color={modeColor}>{modePrefix}</Text>
+          <Input
+            ref={bufferRef}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            onSubmit={handleSubmit}
+            placeholder={effectivePlaceholder}
+            grammar={grammar}
+            disabled={isInputDisabled}
+            width={inputWidth}
+          />
+        </View>
+        <View justifyContent="space-between">
+          <ModePanel
+            mode={mode}
+            prompt={prompt}
+            handler={currentHandler}
+            onExitFilesMode={() => setMode(ComposerMode.Prompt)}
+            hints={hints}
+            availableHeight={availableHeight}
+          />
+          <View flexDirection="row" gap={1}>
+            {currentFile && selectionStartLine !== undefined && selectionEndLine !== undefined ? (
+              <Text dimColor>
+                <Text color="cyan">{selectionEndLine - selectionStartLine + 1} lines selected</Text>{" "}
+                in <Text color="cyan">{currentFile}</Text>
+              </Text>
+            ) : (
+              currentFile && (
+                <Text dimColor>
+                  in <Text color="cyan">{currentFile}</Text>
+                </Text>
+              )
+            )}
+            {hints?.escClear && (
+              <Text wrap="truncate-middle" dimColor>
+                Press ESC again to clear input
+              </Text>
+            )}
+          </View>
+        </View>
+      </View>
+    );
+  },
+);
+ComposerInner.displayName = "ComposerInner";
+
+interface ComposerProps {
+  hints?: InterruptHints;
+  composerRef?: Ref<ComposerHandle>;
+}
+
+export const Composer = memo(({ hints, composerRef }: ComposerProps) => {
+  return (
+    <ComposerProvider>
+      <Suspense fallback={<Text dimColor>Loading models...</Text>}>
+        <ComposerInner hints={hints} composerRef={composerRef} />
+      </Suspense>
+    </ComposerProvider>
+  );
+});
+Composer.displayName = "Composer";