ui improvements

Author: involvex

src/agent/super-agent.ts

@@ -20,7 +20,9 @@ import { PerplexityProvider } from "../core/providers/perplexity";
 import { AnthropicProvider } from "../core/providers/anthropic";
 import { getSettingsManager } from "../utils/settings-manager";
 import { TogetherProvider } from "../core/providers/together";
+import { DeepSeekProvider } from "../core/providers/deepseek";
 import { OpenAIProvider } from "../core/providers/openai";
+import { OllamaProvider } from "../core/providers/ollama";
 import { GeminiProvider } from "../core/providers/gemini";
 import { CohereProvider } from "../core/providers/cohere";
 import { GrokProvider } from "../core/providers/grok";
@@ -141,6 +143,18 @@ export class SuperAgent extends EventEmitter {
         effectiveBaseURL,
         effectiveModel,
       );
+    } else if (providerType === "deepseek") {
+      this.superAgentClient = new DeepSeekProvider(
+        effectiveApiKey,
+        effectiveBaseURL,
+        effectiveModel,
+      );
+    } else if (providerType === "ollama") {
+      this.superAgentClient = new OllamaProvider(
+        effectiveApiKey,
+        effectiveBaseURL,
+        effectiveModel,
+      );
     } else {
       // Default to OpenAI Compatible for all other providers (mistral, openrouter, etc.)
       this.superAgentClient = new OpenAICompatibleProvider(
@@ -335,6 +349,18 @@ Current working directory: ${process.cwd()}`,
           effectiveBaseURL,
           effectiveModel,
         );
+      } else if (providerType === "deepseek") {
+        this.superAgentClient = new DeepSeekProvider(
+          effectiveApiKey,
+          effectiveBaseURL,
+          effectiveModel,
+        );
+      } else if (providerType === "ollama") {
+        this.superAgentClient = new OllamaProvider(
+          effectiveApiKey,
+          effectiveBaseURL,
+          effectiveModel,
+        );
       } else {
         this.superAgentClient = new OpenAICompatibleProvider(
           effectiveApiKey,

src/core/providers/deepseek.ts

@@ -0,0 +1,12 @@
+import { OpenAICompatibleProvider } from "./openai-compatible";
+
+export class DeepSeekProvider extends OpenAICompatibleProvider {
+  constructor(apiKey: string, baseURL?: string, model?: string) {
+    super(
+      apiKey,
+      baseURL || "https://api.deepseek.com/v1",
+      model || "deepseek-coder",
+      "deepseek",
+    );
+  }
+}

src/core/providers/ollama.ts

@@ -0,0 +1,12 @@
+import { OpenAICompatibleProvider } from "./openai-compatible";
+
+export class OllamaProvider extends OpenAICompatibleProvider {
+  constructor(apiKey: string, baseURL?: string, model?: string) {
+    super(
+      apiKey || "ollama",
+      baseURL || "http://localhost:11434/v1",
+      model || "llama3",
+      "ollama",
+    );
+  }
+}

src/hooks/use-input-handler.ts

@@ -439,18 +439,33 @@ export function useInputHandler({
             filteredSuggestions.length - 1,
           );
           const selectedCommand = filteredSuggestions[safeIndex];
-          // If the command has arguments placeholders (e.g. <name>), strip them for the actual input
-          // Or keep them? Usually we just want the command base.
-          // But if the user defined command as "/mcp <action>", we probably want "/mcp ".
-          // Let's check how other commands are defined.
-          // "/chat save <name>" -> we probably want "/chat save "?
-          // The current logic uses the full string.
-
-          // Actually, let's keep it simple first: just ensure cursor goes to end.
-          const newInput = selectedCommand.command + " ";
-          // By passing the cursor position to setInput, we avoid the stale closure issue
-          // where setCursorPosition would clamp based on the old input length.
-          setInput(newInput, newInput.length);
+
+          // Strip placeholders like <name>, [action], etc.
+          // Examples: "/chat save <name>" -> "/chat save ", "/mcp <action>" -> "/mcp "
+          let completedCommand = selectedCommand.command;
+
+          // Remove everything starting from the first space followed by a placeholder
+          // or just placeholders themselves
+          completedCommand = completedCommand
+            .replace(/\s*<[^>]+>/g, "")
+            .replace(/\s*\[[^\]]+\]/g, "");
+
+          // If it doesn't end with a space and it was a placeholder-heavy command, add a space
+          if (
+            !completedCommand.endsWith(" ") &&
+            selectedCommand.command.includes("<")
+          ) {
+            completedCommand += " ";
+          } else if (!completedCommand.endsWith(" ")) {
+            completedCommand += " ";
+          }
+
+          // Preserve any text that might be after the cursor if we're in the middle of input
+          const afterCursor = input.slice(cursorPosition);
+          const newInput = completedCommand + afterCursor;
+
+          // Set input and position cursor at the end of the completed command part
+          setInput(newInput, completedCommand.length);
 
           setShowCommandSuggestions(false);
           setSelectedCommandIndex(0);

src/ui/components/chat-history.tsx

@@ -225,7 +225,7 @@ export function ChatHistory({
 
   return (
     <Box flexDirection="column">
-      {filteredEntries.slice(-20).map((entry, index) => (
+      {filteredEntries.slice(-50).map((entry, index) => (
         <MemoizedChatEntry
           key={`${entry.timestamp.getTime()}-${index}`}
           entry={entry}

src/ui/components/chat-input.tsx

@@ -1,5 +1,5 @@
+import React, { useEffect, useState } from "react";
 import { Box, Text } from "ink";
-import React from "react";
 
 interface ChatInputProps {
   input: string;
@@ -14,6 +14,22 @@ export function ChatInput({
   isProcessing,
   isStreaming,
 }: ChatInputProps) {
+  const [blink, setBlink] = useState(true);
+
+  // Blinking cursor effect
+  useEffect(() => {
+    if (isProcessing || isStreaming) {
+      setBlink(false);
+      return;
+    }
+
+    const interval = setInterval(() => {
+      setBlink(prev => !prev);
+    }, 530);
+
+    return () => clearInterval(interval);
+  }, [isProcessing, isStreaming]);
+
   const beforeCursor = input.slice(0, cursorPosition);
   const afterCursor = input.slice(cursorPosition);
 
@@ -67,7 +83,10 @@ export function ChatInput({
                 <Text>
                   {beforeCursorInLine}
                   {showCursor && (
-                    <Text backgroundColor="white" color="black">
+                    <Text
+                      backgroundColor={blink ? "white" : undefined}
+                      color={blink ? "black" : "white"}
+                    >
                       {cursorChar}
                     </Text>
                   )}
@@ -109,7 +128,10 @@ export function ChatInput({
               {placeholderText}
             </Text>
             {showCursor && (
-              <Text backgroundColor="white" color="black">
+              <Text
+                backgroundColor={blink ? "white" : undefined}
+                color={blink ? "black" : "white"}
+              >
                 {" "}
               </Text>
             )}
@@ -118,7 +140,10 @@ export function ChatInput({
           <Text>
             {beforeCursor}
             {showCursor && (
-              <Text backgroundColor="white" color="black">
+              <Text
+                backgroundColor={blink ? "white" : undefined}
+                color={blink ? "black" : "white"}
+              >
                 {cursorChar}
               </Text>
             )}

src/ui/components/chat-interface.tsx

@@ -408,15 +408,7 @@ function ChatInterfaceWithAgent({
         </Box>
       )}
 
-      <Box
-        flexDirection="column"
-        ref={scrollRef}
-        key={
-          chatHistory.length > 0
-            ? `chat-history-${chatHistory[chatHistory.length - 1]?.timestamp.getTime()}`
-            : "chat-history-empty"
-        }
-      >
+      <Box flexDirection="column" ref={scrollRef}>
         <ChatHistory
           entries={chatHistory}
           isConfirmationActive={!!confirmationOptions}

src/ui/components/command-suggestions.tsx

@@ -13,7 +13,7 @@ interface CommandSuggestionsProps {
   isVisible: boolean;
 }
 
-export const MAX_SUGGESTIONS = 8;
+export const MAX_SUGGESTIONS = 30;
 
 export function filterCommandSuggestions<T extends { command: string }>(
   suggestions: T[],