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

package/src/lib/markdown/markdown.tsx

@@ -0,0 +1,372 @@
+import { View, Text } from "@codellm/jar";
+import { marked, type Token, type Tokens } from "marked";
+import { Fragment, useDeferredValue, useMemo } from "react";
+import remend from "remend";
+
+import type { MarkdownProps } from "./types.js";
+
+import { useTheme } from "../../theme/index.js";
+import { CodeBlock } from "./code-block.js";
+import { Link } from "./link.js";
+
+/**
+ * Helper to extract plain text from tokens for alignment or other purposes.
+ */
+function extractText(token: Token | Tokens.TableCell): string {
+  if ("text" in token && typeof token.text === "string") {
+    return token.text;
+  }
+  if ("tokens" in token && Array.isArray(token.tokens)) {
+    return token.tokens.map((t) => extractText(t)).join("");
+  }
+  return "";
+}
+
+/**
+ * Type guard to check if a token has a checked property (for checkbox list items)
+ */
+function hasCheckedProperty(token: Token): token is Token & { checked: boolean } {
+  return "checked" in token && typeof (token as { checked?: unknown }).checked === "boolean";
+}
+
+/**
+ * Renders tokens that are guaranteed to be inline-safe (no View components).
+ */
+function renderInlineTokens(
+  tokens: Token[] | undefined,
+  colors: ReturnType<typeof useTheme>["colors"],
+  isDimItalic = false,
+): React.ReactNode {
+  if (!tokens) return null;
+
+  return tokens.map((token, i) => (
+    <Fragment key={i}>{renderInlineToken(token, colors, isDimItalic)}</Fragment>
+  ));
+}
+
+/**
+ * Renders a single inline-safe token.
+ */
+function renderInlineToken(
+  token: Token,
+  colors: ReturnType<typeof useTheme>["colors"],
+  isDimItalic = false,
+): React.ReactNode {
+  const wrapWithStyle = (node: React.ReactNode) => {
+    if (isDimItalic) {
+      return (
+        <Text dimColor italic>
+          {node}
+        </Text>
+      );
+    }
+    return node;
+  };
+
+  switch (token.type) {
+    case "strong": {
+      return <Text bold>{renderInlineTokens(token.tokens, colors, isDimItalic)}</Text>;
+    }
+
+    case "em": {
+      return <Text italic>{renderInlineTokens(token.tokens, colors, isDimItalic)}</Text>;
+    }
+
+    case "del": {
+      return <Text strikethrough>{renderInlineTokens(token.tokens, colors, isDimItalic)}</Text>;
+    }
+
+    case "codespan": {
+      return wrapWithStyle(
+        <Text color={colors.primary} dimColor>
+          {token.text}
+        </Text>,
+      );
+    }
+
+    case "link": {
+      return wrapWithStyle(<Link href={token.href}>{extractText(token)}</Link>);
+    }
+
+    case "image": {
+      const imageToken = token as Tokens.Image;
+      // Show alt text with image indicator, or URL if no alt
+      const displayText = imageToken.text || imageToken.href;
+      return wrapWithStyle(
+        <Text dimColor>
+          {displayText} {imageToken.href !== displayText && `(${imageToken.href})`}
+        </Text>,
+      );
+    }
+
+    case "checkbox": {
+      const isChecked = hasCheckedProperty(token) && token.checked === true;
+      return wrapWithStyle(<Text color={colors.secondary}>{isChecked ? "[✓]" : "[ ]"}</Text>);
+    }
+
+    case "text": {
+      if (token.tokens) {
+        return renderInlineTokens(token.tokens, colors, isDimItalic);
+      }
+      return wrapWithStyle(token.text);
+    }
+
+    case "br":
+      return "\n";
+
+    default:
+      return wrapWithStyle(extractText(token));
+  }
+}
+
+/**
+ * Renders tokens that may contain block-level components (View).
+ * Headings get double newline, paragraphs/code/lists get single.
+ */
+function renderBlockToken(
+  token: Token,
+  colors: ReturnType<typeof useTheme>["colors"],
+  listDepth = 0,
+  isDimItalic = false,
+): React.ReactNode {
+  switch (token.type) {
+    case "heading": {
+      // Headings get blank line after (double newline in Claude CLI)
+      return (
+        <View key={`heading-${token.depth}`} flexDirection="column">
+          <Text
+            bold
+            color={token.depth <= 2 ? colors.primary : colors.secondary}
+            dimColor={token.depth > 2}
+          >
+            {renderInlineTokens(token.tokens, colors, isDimItalic)}
+          </Text>
+        </View>
+      );
+    }
+
+    case "paragraph": {
+      // Paragraphs get single newline after (handled by Ink's natural line flow)
+      return (
+        <View key="paragraph" flexDirection="column">
+          <Text>{renderInlineTokens(token.tokens, colors, isDimItalic)}</Text>
+        </View>
+      );
+    }
+
+    case "code": {
+      // Code blocks get single newline after
+      return (
+        <CodeBlock key="code" language={token.lang}>
+          {token.text}
+        </CodeBlock>
+      );
+    }
+
+    case "blockquote": {
+      // Blockquotes: no extra spacing, just dim/italic content (like Claude CLI)
+      return (
+        <View
+          key="blockquote"
+          borderRight={false}
+          borderTop={false}
+          borderBottom={false}
+          borderStyle="double"
+          borderColor={colors.border}
+          paddingLeft={1}
+          flexDirection="column"
+        >
+          {token.tokens?.map((t, i) => (
+            <View key={i}>{renderBlockToken(t, colors, listDepth, true)}</View>
+          ))}
+        </View>
+      );
+    }
+
+    case "list": {
+      const listToken = token as Tokens.List;
+      // Lists: each item gets single newline
+      return (
+        <View key="list" flexDirection="column">
+          {listToken.items.map((item, index) => {
+            const number = token.ordered ? (Number(token.start) || 1) + index : null;
+            const isTask = item.task === true;
+            const isChecked = item.checked === true;
+
+            // Filter out checkbox tokens since we render them manually
+            const contentTokens = item.tokens?.filter((t) => t.type !== "checkbox") || [];
+
+            return (
+              <View key={index} flexDirection="row">
+                <Text color={colors.secondary} dimColor>
+                  {isTask ? (isChecked ? "[✓] " : "[ ] ") : number !== null ? `${number}. ` : "• "}
+                </Text>
+                <View flexGrow={1} flexDirection="column">
+                  {contentTokens.map((t, i) => (
+                    <View key={i}>{renderBlockToken(t, colors, listDepth + 1, isDimItalic)}</View>
+                  ))}
+                </View>
+              </View>
+            );
+          })}
+        </View>
+      );
+    }
+
+    case "table": {
+      const tableToken = token as Tokens.Table;
+
+      // Calculate column widths (like Claude CLI)
+      const columnWidths = tableToken.header.map((headerCell, i) => {
+        let maxWidth = extractText(headerCell).length;
+        for (const row of tableToken.rows) {
+          maxWidth = Math.max(maxWidth, extractText(row[i]).length);
+        }
+        return Math.max(maxWidth, 3);
+      });
+
+      // Tables get extra newline at end (like Claude CLI)
+      return (
+        <View key="table" flexDirection="column">
+          <View
+            flexDirection="row"
+            borderTop={false}
+            borderLeft={false}
+            borderRight={false}
+            borderStyle="single"
+            borderColor={colors.border}
+            alignSelf="flex-start"
+          >
+            {tableToken.header.map((cell, i) => {
+              const align = tableToken.align?.[i] || null;
+              return (
+                <View
+                  key={i}
+                  width={columnWidths[i] + 2}
+                  paddingX={1}
+                  justifyContent={
+                    align === "center" ? "center" : align === "right" ? "flex-end" : "flex-start"
+                  }
+                >
+                  <Text bold color={colors.primary}>
+                    {renderInlineTokens(cell.tokens, colors, isDimItalic)}
+                  </Text>
+                </View>
+              );
+            })}
+          </View>
+          {tableToken.rows.map((row, rowIndex) => (
+            <View key={rowIndex} flexDirection="row">
+              {row.map((cell, cellIndex) => {
+                const align = tableToken.align?.[cellIndex] || null;
+                return (
+                  <View
+                    key={cellIndex}
+                    width={columnWidths[cellIndex] + 2}
+                    paddingX={1}
+                    justifyContent={
+                      align === "center" ? "center" : align === "right" ? "flex-end" : "flex-start"
+                    }
+                  >
+                    <Text>{renderInlineTokens(cell.tokens, colors, isDimItalic)}</Text>
+                  </View>
+                );
+              })}
+            </View>
+          ))}
+        </View>
+      );
+    }
+
+    case "hr":
+      // HR: just the line, no extra spacing (like Claude CLI returns just "---")
+      return (
+        <View key="hr">
+          <Text dimColor>{"─".repeat(50)}</Text>
+        </View>
+      );
+
+    case "space":
+      // Space tokens become single newline (like Claude CLI)
+      return null;
+
+    default:
+      return (
+        <View flexDirection="column">
+          <Text>{renderInlineToken(token, colors, isDimItalic)}</Text>
+        </View>
+      );
+  }
+}
+
+/**
+ * A type-safe terminal markdown renderer using marked and Jar components.
+ * Spacing rules:
+ * - Headings: content + EOL + EOL (blank line after)
+ * - Paragraphs: content + EOL (single newline)
+ * - Code: content + EOL
+ * - Space: EOL
+ * - Lists: each item ends with EOL
+ * - Tables: content + EOL
+ */
+export function Markdown({ children }: MarkdownProps) {
+  const { colors } = useTheme();
+
+  // Defer markdown content to prevent blocking input during parsing
+  const deferredChildren = useDeferredValue(children);
+  const isRendering = children !== deferredChildren;
+
+  const tokens = useMemo(() => {
+    try {
+      // Use remend to complete incomplete markdown during streaming
+      const completedMarkdown = remend(deferredChildren);
+      // Enable GFM and breaks for proper line break handling
+      return marked.lexer(completedMarkdown, { gfm: true, breaks: true });
+    } catch {
+      return [];
+    }
+  }, [deferredChildren]);
+
+  // Process tokens with Claude CLI-style spacing
+  const renderedTokens = useMemo(() => {
+    const result: React.ReactNode[] = [];
+    const totalTokens = tokens.length;
+
+    tokens.forEach((token, index) => {
+      const isLast = index === totalTokens - 1;
+
+      // Space tokens add a blank line (like Claude CLI returns EOL for space)
+      if (token.type === "space") {
+        result.push(<View key={`space-${index}`} height={1} />);
+        return;
+      }
+
+      // Render the token
+      result.push(
+        <View key={index} flexDirection="column">
+          {renderBlockToken(token, colors)}
+        </View>,
+      );
+
+      // Add trailing blank line after headings (like Claude CLI's EOL + EOL)
+      if (token.type === "heading" && !isLast) {
+        result.push(<View key={`heading-space-${index}`} height={1} />);
+      }
+    });
+
+    return result;
+  }, [tokens, colors]);
+
+  return (
+    <View flexDirection="column">
+      {isRendering && (
+        <View>
+          <Text dimColor>Rendering markdown...</Text>
+        </View>
+      )}
+      {renderedTokens}
+    </View>
+  );
+}
+
+Markdown.displayName = "Markdown";

package/src/lib/markdown/types.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+
+export interface MarkdownProps {
+  children: string;
+}
+
+export interface CodeBlockProps {
+  children?: string;
+  language?: string;
+}
+
+export interface LinkProps {
+  href: string;
+  children: ReactNode;
+}

package/src/lib/mcpCommandHandler.ts

@@ -0,0 +1,121 @@
+import type { McpManager } from "@codellm/agent";
+
+import fs from "node:fs";
+import os from "node:os";
+import path from "node:path";
+
+import { McpManagementService } from "./mcpManagement.js";
+
+function logMcpError(context: string, error: unknown): void {
+  try {
+    const logDir = path.join(os.tmpdir(), "abacus-tui-logs");
+    if (!fs.existsSync(logDir)) {
+      fs.mkdirSync(logDir, { recursive: true });
+    }
+    const logFile = path.join(logDir, "mcp-errors.log");
+    const timestamp = new Date().toISOString();
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    const errorStack = error instanceof Error ? error.stack : "";
+    const logEntry = `[${timestamp}] ${context}: ${errorMessage}\n${errorStack ? `Stack: ${errorStack}\n` : ""}\n`;
+    fs.appendFileSync(logFile, logEntry, "utf8");
+  } catch {
+    // If logging fails, just log to console as fallback
+    console.error(`[MCP] ${context}:`, error);
+  }
+}
+
+export class McpCommandHandler {
+  private mcpService: McpManagementService;
+  private mcp?: McpManager;
+
+  constructor(mcp?: McpManager) {
+    this.mcpService = new McpManagementService();
+    this.mcp = mcp;
+  }
+
+  async listServers(): Promise<string> {
+    const servers = await this.mcpService.listServers();
+    // Update server status with real-time connection status from McpManager
+    if (this.mcp) {
+      const liveServers = this.mcp.listServers();
+      for (const server of servers) {
+        const live = liveServers.find(
+          (s) => s.config.id === server.id || s.config.id === server.name,
+        );
+        server.status = live ? "running" : "stopped";
+      }
+    }
+    return this.mcpService.formatServerList(servers);
+  }
+
+  async addServer(name: string, commandOrUrl: string, extraArgs: string[]): Promise<void> {
+    await this.mcpService.addServerFromUrl(name, commandOrUrl, extraArgs);
+    // Refresh live connections in background
+    if (this.mcp) {
+      this.mcp.refresh().catch((error: unknown) => {
+        logMcpError(`Failed to refresh MCP connections after adding server '${name}'`, error);
+      });
+    }
+  }
+
+  async removeServer(name: string): Promise<void> {
+    await this.mcpService.removeServer(name);
+    // Disconnect live server in background
+    if (this.mcp) {
+      this.mcp.removeServer(name).catch((error: unknown) => {
+        logMcpError(`Failed to disconnect MCP server '${name}'`, error);
+      });
+    }
+  }
+
+  async getServer(name: string): Promise<string | null> {
+    const server = await this.mcpService.getServer(name);
+    if (server) {
+      // Update server status with real-time connection status from McpManager
+      if (this.mcp) {
+        const liveServers = this.mcp.listServers();
+        const live = liveServers.find(
+          (s) => s.config.id === server.id || s.config.id === server.name,
+        );
+        server.status = live ? "running" : "stopped";
+      }
+      return this.mcpService.formatServerInfo(server);
+    }
+    return null;
+  }
+
+  async addServerFromJson(name: string, jsonConfig: string): Promise<void> {
+    await this.mcpService.addServerFromJson(name, jsonConfig);
+    // Refresh live connections in background
+    if (this.mcp) {
+      this.mcp.refresh().catch((error: unknown) => {
+        logMcpError(
+          `Failed to refresh MCP connections after adding server '${name}' from JSON`,
+          error,
+        );
+      });
+    }
+  }
+
+  formatHelp(): string {
+    return helpText;
+  }
+}
+
+export const helpText = `
+MCP (Model Context Protocol) Commands:
+
+  /mcp list              List configured MCP servers
+  /mcp add               Add a server
+  /mcp remove            Remove an MCP server
+  /mcp get               Get details about an MCP server
+  /mcp add-json          Add an MCP server with JSON configuration
+
+Example - Add GitHub MCP Server:
+  /mcp add-json github '{"command":"npx","args":["-y","@modelcontextprotocol/server-github"],"env":{"GITHUB_PERSONAL_ACCESS_TOKEN":"your_github_token_here"}}'
+
+TUI Features:
+  - Full MCP server management from command line
+  - All commands work independently in TUI
+  - Direct file-based configuration access
+`;

package/src/lib/mcpManagement.ts

@@ -0,0 +1,44 @@
+import type { IMcpServerInfo, IMcpManagementService, IMcpServerConfig } from "./types.js";
+
+import { StandaloneMcpService } from "./standaloneMcpService.js";
+
+export class McpManagementService implements IMcpManagementService {
+  private standaloneService: StandaloneMcpService;
+
+  constructor() {
+    // Always use standalone service - no workbench dependencies
+    this.standaloneService = new StandaloneMcpService();
+  }
+
+  async listServers(): Promise<IMcpServerInfo[]> {
+    return this.standaloneService.listServers();
+  }
+
+  async addServer(name: string, config: IMcpServerConfig): Promise<void> {
+    return this.standaloneService.addServer(name, config);
+  }
+
+  async removeServer(name: string): Promise<void> {
+    return this.standaloneService.removeServer(name);
+  }
+
+  async getServer(name: string): Promise<IMcpServerInfo | undefined> {
+    return this.standaloneService.getServer(name);
+  }
+
+  async addServerFromJson(name: string, jsonConfig: string): Promise<void> {
+    return this.standaloneService.addServerFromJson(name, jsonConfig);
+  }
+
+  async addServerFromUrl(name: string, url: string, args?: string[]): Promise<void> {
+    return this.standaloneService.addServerFromUrl(name, url, args);
+  }
+
+  formatServerInfo(server: IMcpServerInfo): string {
+    return this.standaloneService.formatServerInfo(server);
+  }
+
+  formatServerList(servers: IMcpServerInfo[]): string {
+    return this.standaloneService.formatServerList(servers);
+  }
+}