@vellumai/cli 0.4.46 → 0.4.49

package/src/components/DefaultMainScreen.tsx

@@ -17,7 +17,12 @@ import { removeAssistantEntry } from "../lib/assistant-config";
 import { SPECIES_CONFIG, type Species } from "../lib/constants";
 import { callDoctorDaemon, type ChatLogEntry } from "../lib/doctor-client";
 import { checkHealth } from "../lib/health-check";
+import { appendHistory, loadHistory } from "../lib/input-history";
 import { statusEmoji, withStatusEmoji } from "../lib/status-emoji";
+import {
+  getTerminalCapabilities,
+  unicodeOrFallback,
+} from "../lib/terminal-capabilities";
 import TextInput from "./TextInput";
 import { Tooltip } from "./Tooltip";
 
@@ -55,7 +60,9 @@ const DEFAULT_TERMINAL_COLUMNS = 80;
 const DEFAULT_TERMINAL_ROWS = 24;
 const LEFT_PANEL_WIDTH = 36;
 
-const HEADER_PREFIX = "── Vellum ";
+const COMPACT_THRESHOLD = 60;
+const HEADER_PREFIX_UNICODE = "── Vellum ";
+const HEADER_PREFIX_ASCII = "-- Vellum ";
 
 // Left panel structure: HEADER lines + art + FOOTER lines
 const LEFT_HEADER_LINES = 3; // spacer + heading + spacer
@@ -694,6 +701,37 @@ interface StyledLine {
   style: "heading" | "dim" | "normal";
 }
 
+function CompactHeader({
+  species,
+  healthStatus,
+  totalWidth,
+}: {
+  species: Species;
+  healthStatus?: string;
+  totalWidth: number;
+}): ReactElement {
+  const config = SPECIES_CONFIG[species];
+  const accentColor = species === "openclaw" ? "red" : "magenta";
+  const status = healthStatus ?? "checking...";
+  const label = ` ${config.hatchedEmoji} ${species} ${statusEmoji(status)} `;
+  const prefix = "── Vellum";
+  const suffix = "──";
+  const fillLen = Math.max(
+    0,
+    totalWidth - prefix.length - label.length - suffix.length,
+  );
+  return (
+    <Box flexDirection="column" width={totalWidth}>
+      <Text dimColor>
+        {prefix}
+        <Text color={accentColor}>{label}</Text>
+        {"─".repeat(fillLen)}
+        {suffix}
+      </Text>
+    </Box>
+  );
+}
+
 function DefaultMainScreen({
   runtimeUrl,
   assistantId,
@@ -705,10 +743,27 @@ function DefaultMainScreen({
   const config = SPECIES_CONFIG[species];
   const art = config.art;
   const accentColor = species === "openclaw" ? "red" : "magenta";
+  const caps = getTerminalCapabilities();
+  const headerPrefix = caps.unicodeSupported
+    ? HEADER_PREFIX_UNICODE
+    : HEADER_PREFIX_ASCII;
+  const headerSep = caps.unicodeSupported ? "─" : "-";
 
   const { stdout } = useStdout();
   const terminalColumns = stdout.columns || DEFAULT_TERMINAL_COLUMNS;
   const totalWidth = Math.min(MAX_TOTAL_WIDTH, terminalColumns);
+  const isCompact = terminalColumns < COMPACT_THRESHOLD;
+
+  if (isCompact) {
+    return (
+      <CompactHeader
+        species={species}
+        healthStatus={healthStatus}
+        totalWidth={totalWidth}
+      />
+    );
+  }
+
   const rightPanelWidth = Math.max(1, totalWidth - LEFT_PANEL_WIDTH);
 
   const leftLines = [
@@ -729,7 +784,10 @@ function DefaultMainScreen({
     { text: "Assistant", style: "heading" },
     { text: assistantId, style: "dim" },
     { text: "Species", style: "heading" },
-    { text: `${config.hatchedEmoji} ${species}`, style: "dim" },
+    {
+      text: `${unicodeOrFallback(config.hatchedEmoji, `[${species}]`)} ${species}`,
+      style: "dim",
+    },
     { text: "Status", style: "heading" },
     { text: withStatusEmoji(healthStatus ?? "checking..."), style: "dim" },
   ];
@@ -739,8 +797,8 @@ function DefaultMainScreen({
   return (
     <Box flexDirection="column" width={totalWidth}>
       <Text dimColor>
-        {HEADER_PREFIX +
-          "─".repeat(Math.max(0, totalWidth - HEADER_PREFIX.length))}
+        {headerPrefix +
+          headerSep.repeat(Math.max(0, totalWidth - headerPrefix.length))}
       </Text>
       <Box flexDirection="row">
         <Box flexDirection="column" width={LEFT_PANEL_WIDTH}>
@@ -755,7 +813,7 @@ function DefaultMainScreen({
             }
             if (i > 2 && i <= 2 + art.length) {
               return (
-                <Text key={i} color={accentColor}>
+                <Text key={i} color={caps.isDumb ? undefined : accentColor}>
                   {line}
                 </Text>
               );
@@ -792,7 +850,7 @@ function DefaultMainScreen({
           })}
         </Box>
       </Box>
-      <Text dimColor>{"─".repeat(totalWidth)}</Text>
+      <Text dimColor>{headerSep.repeat(totalWidth)}</Text>
       <Text> </Text>
     </Box>
   );
@@ -838,9 +896,18 @@ function isRuntimeMessage(item: FeedItem): item is RuntimeMessage {
 function estimateItemHeight(item: FeedItem, terminalColumns: number): number {
   if (isRuntimeMessage(item)) {
     const cols = Math.max(1, terminalColumns);
+    // Account for "HH:MM AM Label: " prefix on the first line
+    const defaultLabel = item.role === "user" ? "You:" : "Assistant:";
+    const label = item.label ?? defaultLabel;
+    const prefixLen = 10 + label.length + 1; // timestamp + space + label + space
     let lines = 0;
-    for (const line of item.content.split("\n")) {
-      lines += Math.max(1, Math.ceil(line.length / cols));
+    const contentLines = item.content.split("\n");
+    for (let idx = 0; idx < contentLines.length; idx++) {
+      const lineLen =
+        idx === 0
+          ? contentLines[idx].length + prefixLen
+          : contentLines[idx].length;
+      lines += Math.max(1, Math.ceil(lineLen / cols));
     }
     if (item.role === "assistant" && item.toolCalls) {
       for (const tc of item.toolCalls) {
@@ -870,7 +937,15 @@ function estimateItemHeight(item: FeedItem, terminalColumns: number): number {
   return 1;
 }
 
-function calculateHeaderHeight(species: Species): number {
+const COMPACT_HEADER_HEIGHT = 1;
+
+function calculateHeaderHeight(
+  species: Species,
+  terminalColumns?: number,
+): number {
+  if ((terminalColumns ?? DEFAULT_TERMINAL_COLUMNS) < COMPACT_THRESHOLD) {
+    return COMPACT_HEADER_HEIGHT;
+  }
   const config = SPECIES_CONFIG[species];
   const artLength = config.art.length;
   const leftLineCount = LEFT_HEADER_LINES + artLength + LEFT_FOOTER_LINES;
@@ -885,6 +960,9 @@ export function render(
   assistantId: string,
   species: Species,
 ): number {
+  const terminalColumns = process.stdout.columns || DEFAULT_TERMINAL_COLUMNS;
+  const isCompact = terminalColumns < COMPACT_THRESHOLD;
+
   const config = SPECIES_CONFIG[species];
   const art = config.art;
 
@@ -901,6 +979,10 @@ export function render(
   );
   unmount();
 
+  if (isCompact) {
+    return COMPACT_HEADER_HEIGHT;
+  }
+
   const statusCanvasLine = RIGHT_PANEL_LINE_COUNT + HEADER_TOP_BORDER_LINES;
   const statusCol = LEFT_PANEL_WIDTH + 1;
   checkHealth(runtimeUrl)
@@ -1128,6 +1210,9 @@ function ChatApp({
   handleRef,
 }: ChatAppProps): ReactElement {
   const [inputValue, setInputValue] = useState("");
+  const historyRef = useRef<string[]>(loadHistory());
+  const historyIndexRef = useRef(-1);
+  const savedInputRef = useRef("");
   const [feed, setFeed] = useState<FeedItem[]>([]);
   const [spinnerText, setSpinnerText] = useState<string | null>(null);
   const [selection, setSelection] = useState<SelectionRequest | null>(null);
@@ -1152,15 +1237,20 @@ function ChatApp({
   const { stdout } = useStdout();
   const terminalRows = stdout.rows || DEFAULT_TERMINAL_ROWS;
   const terminalColumns = stdout.columns || DEFAULT_TERMINAL_COLUMNS;
-  const headerHeight = calculateHeaderHeight(species);
+  const headerHeight = calculateHeaderHeight(species, terminalColumns);
 
+  const isCompact = terminalColumns < COMPACT_THRESHOLD;
+  const compactInputAreaHeight = 2; // separator + input row only
+  const inputAreaHeight = isCompact
+    ? compactInputAreaHeight
+    : INPUT_AREA_HEIGHT;
   const bottomHeight = selection
     ? selection.options.length + SELECTION_CHROME_LINES + TOOLTIP_HEIGHT
     : secretInput
       ? SECRET_INPUT_HEIGHT + TOOLTIP_HEIGHT
       : spinnerText
-        ? SPINNER_HEIGHT + INPUT_AREA_HEIGHT
-        : INPUT_AREA_HEIGHT;
+        ? SPINNER_HEIGHT + inputAreaHeight
+        : inputAreaHeight;
   const availableRows = Math.max(
     MIN_FEED_ROWS,
     terminalRows - headerHeight - bottomHeight,
@@ -1197,11 +1287,14 @@ function ChatApp({
     }
 
     if (scrollIndex === null) {
+      // Reserve 1 line for "N more above" indicator when there are hidden messages
       let totalHeight = 0;
       let start = feed.length;
       for (let i = feed.length - 1; i >= 0; i--) {
         const h = estimateItemHeight(feed[i], terminalColumns);
-        if (totalHeight + h > availableRows) {
+        // Reserve space for the "more above" indicator if we'd hide messages
+        const indicatorLine = i > 0 ? 1 : 0;
+        if (totalHeight + h + indicatorLine > availableRows) {
           break;
         }
         totalHeight += h;
@@ -1220,11 +1313,16 @@ function ChatApp({
     }
 
     const start = Math.max(0, Math.min(scrollIndex, feed.length - 1));
+    // Reserve lines for "more above/below" indicators
+    const aboveIndicator = start > 0 ? 1 : 0;
+    const budget = availableRows - aboveIndicator;
     let totalHeight = 0;
     let end = start;
     for (let i = start; i < feed.length; i++) {
       const h = estimateItemHeight(feed[i], terminalColumns);
-      if (totalHeight + h > availableRows) {
+      // Reserve space for "more below" indicator if we'd hide messages
+      const belowIndicator = i + 1 < feed.length ? 1 : 0;
+      if (totalHeight + h + belowIndicator > budget) {
         break;
       }
       totalHeight += h;
@@ -2005,12 +2103,44 @@ function ChatApp({
 
   const handleSubmit = useCallback(
     (value: string) => {
+      const trimmed = value.trim();
+      if (trimmed) {
+        appendHistory(trimmed);
+        historyRef.current = loadHistory();
+      }
+      historyIndexRef.current = -1;
+      savedInputRef.current = "";
       setInputValue("");
       handleInput(value);
     },
     [handleInput],
   );
 
+  const handleHistoryUp = useCallback(() => {
+    const history = historyRef.current;
+    if (history.length === 0) return;
+    if (historyIndexRef.current === -1) {
+      savedInputRef.current = inputValue;
+    }
+    const nextIndex = Math.min(historyIndexRef.current + 1, history.length - 1);
+    historyIndexRef.current = nextIndex;
+    const entry = history[history.length - 1 - nextIndex];
+    setInputValue(entry);
+  }, [inputValue]);
+
+  const handleHistoryDown = useCallback(() => {
+    if (historyIndexRef.current === -1) return;
+    if (historyIndexRef.current <= 0) {
+      historyIndexRef.current = -1;
+      setInputValue(savedInputRef.current);
+      return;
+    }
+    historyIndexRef.current -= 1;
+    const history = historyRef.current;
+    const entry = history[history.length - 1 - historyIndexRef.current];
+    setInputValue(entry);
+  }, []);
+
   useEffect(() => {
     const handle: ChatAppHandle = {
       addMessage,
@@ -2210,9 +2340,11 @@ function ChatApp({
       ) : null}
 
       {!selection && !secretInput ? (
-        <Box flexDirection="column">
-          <Text dimColor>{"\u2500".repeat(terminalColumns)}</Text>
-          <Box paddingLeft={1}>
+        <Box flexDirection="column" flexShrink={0}>
+          <Text dimColor>
+            {unicodeOrFallback("\u2500", "-").repeat(terminalColumns)}
+          </Text>
+          <Box paddingLeft={1} height={1} flexShrink={0}>
             <Text color="green" bold>
               you{">"}
               {" "}
@@ -2221,11 +2353,20 @@ function ChatApp({
               value={inputValue}
               onChange={setInputValue}
               onSubmit={handleSubmit}
+              onHistoryUp={handleHistoryUp}
+              onHistoryDown={handleHistoryDown}
+              completionCommands={SLASH_COMMANDS}
               focus={inputFocused}
             />
           </Box>
-          <Text dimColor>{"\u2500".repeat(terminalColumns)}</Text>
-          <Text dimColor> ? for shortcuts</Text>
+          {terminalColumns >= COMPACT_THRESHOLD ? (
+            <>
+              <Text dimColor>
+                {unicodeOrFallback("\u2500", "-").repeat(terminalColumns)}
+              </Text>
+              <Text dimColor> ? for shortcuts</Text>
+            </>
+          ) : null}
         </Box>
       ) : null}
     </Box>

package/src/components/TextInput.tsx

@@ -6,6 +6,9 @@ interface TextInputProps {
   value: string;
   onChange: (value: string) => void;
   onSubmit?: (value: string) => void;
+  onHistoryUp?: () => void;
+  onHistoryDown?: () => void;
+  completionCommands?: string[];
   focus?: boolean;
   placeholder?: string;
 }
@@ -14,12 +17,19 @@ function TextInput({
   value,
   onChange,
   onSubmit,
+  onHistoryUp,
+  onHistoryDown,
+  completionCommands,
   focus = true,
   placeholder = "",
 }: TextInputProps): ReactElement {
   const cursorOffsetRef = useRef(value.length);
   const valueRef = useRef(value);
 
+  // Tab completion state
+  const [completionIndex, setCompletionIndex] = useState(-1);
+  const [completionMatches, setCompletionMatches] = useState<string[]>([]);
+
   valueRef.current = value;
 
   if (cursorOffsetRef.current > value.length) {
@@ -28,40 +38,162 @@ function TextInput({
 
   const [, setRenderTick] = useState(0);
 
+  const clearCompletion = () => {
+    setCompletionIndex(-1);
+    setCompletionMatches([]);
+  };
+
+  const getMatches = (text: string): string[] => {
+    if (!completionCommands || !text.startsWith("/") || text.includes(" ")) {
+      return [];
+    }
+    const prefix = text.toLowerCase();
+    return completionCommands.filter((cmd) =>
+      cmd.toLowerCase().startsWith(prefix),
+    );
+  };
+
   useInput(
     (input, key) => {
-      if (
-        key.upArrow ||
-        key.downArrow ||
-        (key.ctrl && input === "c") ||
-        key.tab ||
-        (key.shift && key.tab)
-      ) {
+      if (key.upArrow && !key.shift && !key.meta) {
+        clearCompletion();
+        onHistoryUp?.();
+        cursorOffsetRef.current = Infinity;
+        setRenderTick((t) => t + 1);
+        return;
+      }
+      if (key.downArrow && !key.shift && !key.meta) {
+        clearCompletion();
+        onHistoryDown?.();
+        cursorOffsetRef.current = Infinity;
+        setRenderTick((t) => t + 1);
+        return;
+      }
+      if (key.ctrl && input === "c") {
+        return;
+      }
+
+      // Tab completion handling
+      if (key.tab) {
+        const currentValue = valueRef.current;
+
+        if (completionMatches.length > 0) {
+          // Already in completion mode — cycle through matches
+          const direction = key.shift ? -1 : 1;
+          const nextIndex =
+            (completionIndex + direction + completionMatches.length) %
+            completionMatches.length;
+          setCompletionIndex(nextIndex);
+
+          const completed = completionMatches[nextIndex]!;
+          valueRef.current = completed;
+          cursorOffsetRef.current = completed.length;
+          onChange(completed);
+          setRenderTick((t) => t + 1);
+          return;
+        }
+
+        // Start completion mode
+        const matches = getMatches(currentValue);
+        if (matches.length === 1) {
+          // Single match — accept immediately with trailing space
+          const completed = matches[0]! + " ";
+          valueRef.current = completed;
+          cursorOffsetRef.current = completed.length;
+          onChange(completed);
+          setRenderTick((t) => t + 1);
+        } else if (matches.length > 1) {
+          setCompletionMatches(matches);
+          const idx = key.shift ? matches.length - 1 : 0;
+          setCompletionIndex(idx);
+
+          const completed = matches[idx]!;
+          valueRef.current = completed;
+          cursorOffsetRef.current = completed.length;
+          onChange(completed);
+          setRenderTick((t) => t + 1);
+        }
         return;
       }
 
+      // Escape cancels completion mode
+      if (key.escape) {
+        if (completionMatches.length > 0) {
+          clearCompletion();
+          setRenderTick((t) => t + 1);
+          return;
+        }
+      }
+
+      // Enter accepts completion and submits
       if (key.return) {
-        onSubmit?.(valueRef.current);
+        if (completionMatches.length > 0) {
+          // Append trailing space so the command is recognized by handleInput
+          const completed = valueRef.current + " ";
+          valueRef.current = completed;
+          cursorOffsetRef.current = completed.length;
+          onChange(completed);
+          clearCompletion();
+          onSubmit?.(completed);
+        } else {
+          clearCompletion();
+          onSubmit?.(valueRef.current);
+        }
         return;
       }
 
+      // Space accepts completion, then continues editing
+      if (input === " " && completionMatches.length > 0) {
+        clearCompletion();
+        // Let the space be inserted normally below
+      } else if (completionMatches.length > 0) {
+        // Any other key exits completion mode
+        clearCompletion();
+      }
+
       const currentValue = valueRef.current;
       const currentOffset = cursorOffsetRef.current;
       let nextValue = currentValue;
       let nextOffset = currentOffset;
 
-      if (key.leftArrow) {
+      if (key.ctrl && input === "a") {
+        // Ctrl+A — move cursor to start
+        nextOffset = 0;
+      } else if (key.ctrl && input === "e") {
+        // Ctrl+E — move cursor to end
+        nextOffset = currentValue.length;
+      } else if (key.ctrl && input === "u") {
+        // Ctrl+U — clear line before cursor
+        nextValue = currentValue.slice(currentOffset);
+        nextOffset = 0;
+      } else if (key.ctrl && input === "k") {
+        // Ctrl+K — kill from cursor to end
+        nextValue = currentValue.slice(0, currentOffset);
+      } else if (key.ctrl && input === "w") {
+        // Ctrl+W — delete word backwards (handles tabs and other whitespace)
+        const before = currentValue.slice(0, currentOffset);
+        // Skip trailing whitespace, then find previous whitespace boundary
+        const match = before.match(/^(.*\s)?\S+\s*$/);
+        const wordStart = match?.[1]?.length ?? 0;
+        nextValue =
+          currentValue.slice(0, wordStart) + currentValue.slice(currentOffset);
+        nextOffset = wordStart;
+      } else if (key.leftArrow) {
         nextOffset = Math.max(0, currentOffset - 1);
       } else if (key.rightArrow) {
         nextOffset = Math.min(currentValue.length, currentOffset + 1);
       } else if (key.backspace || key.delete) {
         if (currentOffset > 0) {
-          nextValue = currentValue.slice(0, currentOffset - 1) + currentValue.slice(currentOffset);
+          nextValue =
+            currentValue.slice(0, currentOffset - 1) +
+            currentValue.slice(currentOffset);
           nextOffset = currentOffset - 1;
         }
       } else {
         nextValue =
-          currentValue.slice(0, currentOffset) + input + currentValue.slice(currentOffset);
+          currentValue.slice(0, currentOffset) +
+          input +
+          currentValue.slice(currentOffset);
         nextOffset = currentOffset + input.length;
       }
 
@@ -78,6 +210,14 @@ function TextInput({
   );
 
   const cursorOffset = cursorOffsetRef.current;
+  const isCompleting = completionMatches.length > 0;
+
+  // Build completion hint text
+  let completionHint = "";
+  if (isCompleting && completionMatches.length > 1) {
+    completionHint = ` [${completionIndex + 1}/${completionMatches.length}]`;
+  }
+
   let renderedValue: string;
   let renderedPlaceholder: string | undefined;
 
@@ -97,6 +237,9 @@ function TextInput({
       if (cursorOffset === value.length) {
         renderedValue += chalk.inverse(" ");
       }
+      if (completionHint) {
+        renderedValue += chalk.grey(completionHint);
+      }
     } else {
       renderedValue = chalk.inverse(" ");
     }
@@ -107,7 +250,11 @@ function TextInput({
 
   return (
     <Text>
-      {placeholder ? (value.length > 0 ? renderedValue : renderedPlaceholder) : renderedValue}
+      {placeholder
+        ? value.length > 0
+          ? renderedValue
+          : renderedPlaceholder
+        : renderedValue}
     </Text>
   );
 }

package/src/index.ts

@@ -9,6 +9,7 @@ import { pair } from "./commands/pair";
 import { ps } from "./commands/ps";
 import { recover } from "./commands/recover";
 import { retire } from "./commands/retire";
+import { setup } from "./commands/setup";
 import { sleep } from "./commands/sleep";
 import { ssh } from "./commands/ssh";
 import { tunnel } from "./commands/tunnel";
@@ -25,6 +26,7 @@ const commands = {
   ps,
   recover,
   retire,
+  setup,
   sleep,
   ssh,
   tunnel,
@@ -59,6 +61,7 @@ async function main() {
     );
     console.log("  recover  Restore a previously retired local assistant");
     console.log("  retire   Delete an assistant instance");
+    console.log("  setup    Configure API keys interactively");
     console.log("  sleep    Stop the assistant process");
     console.log("  ssh      SSH into a remote assistant instance");
     console.log("  tunnel   Create a tunnel for a locally hosted assistant");

package/src/lib/assistant-config.ts

@@ -190,11 +190,7 @@ export function migrateLegacyEntry(raw: Record<string, unknown>): boolean {
       mutated = true;
     }
     if (typeof res.pidFile !== "string") {
-      res.pidFile = join(
-        res.instanceDir as string,
-        ".vellum",
-        "vellum.pid",
-      );
+      res.pidFile = join(res.instanceDir as string, ".vellum", "vellum.pid");
       mutated = true;
     }
   }
@@ -363,7 +359,6 @@ export async function allocateLocalResources(
   if (existingLocals.length === 0) {
     const home = homedir();
     const vellumDir = join(home, ".vellum");
-    mkdirSync(vellumDir, { recursive: true });
     return {
       instanceDir: home,
       daemonPort: DEFAULT_DAEMON_PORT,

package/src/lib/constants.ts

@@ -8,7 +8,13 @@ export const DEFAULT_DAEMON_PORT = 7821;
 export const DEFAULT_GATEWAY_PORT = 7830;
 export const DEFAULT_QDRANT_PORT = 6333;
 
-export const VALID_REMOTE_HOSTS = ["local", "gcp", "aws", "docker", "custom"] as const;
+export const VALID_REMOTE_HOSTS = [
+  "local",
+  "gcp",
+  "aws",
+  "docker",
+  "custom",
+] as const;
 export type RemoteHost = (typeof VALID_REMOTE_HOSTS)[number];
 export const VALID_SPECIES = ["openclaw", "vellum"] as const;
 export type Species = (typeof VALID_SPECIES)[number];