refactor: mcp tooling ui

Author: pyadav

src/commands/mcp.ts

@@ -2,8 +2,8 @@ import React from "react";
 import { Command } from "commander";
 import { render } from "ink";
 import chalk from "chalk";
-import { MCPList } from "../components/mcp/mcp-list.js";
-import { MCPTest } from "../components/mcp/mcp-test.js";
+import { MCPList } from "../ui/mcp-list.js";
+import { MCPTest } from "../ui/mcp-test.js";
 import { getDefaultConfigPath } from "../config/manager.js";
 import { TRANSPORT_TYPES } from "../mcp/constants.js";
 import { parseKeyValue } from "../mcp/utils.js";

src/components/mcp/error-state.tsx

@@ -0,0 +1,11 @@
+import { Box, Text } from "ink";
+
+export function ErrorState({ error }: { error: string | null }) {
+  return (
+    <Box flexDirection="column">
+      <Text color="red">Failed: {error}</Text>
+    </Box>
+  );
+}
+
+export default ErrorState;

src/components/mcp/mcp-base.tsx

@@ -0,0 +1,13 @@
+import { Box, Text } from "ink";
+import { getDefaultConfigPath } from "../../config/manager.js";
+
+export function MCPEmpty() {
+  return (
+    <Box flexDirection="column">
+      <Text color="yellow">No MCP servers configured.</Text>
+      <Text color="gray">Add servers in: {getDefaultConfigPath()}</Text>
+    </Box>
+  );
+}
+
+export default MCPEmpty;

src/components/mcp/mcp-empty.tsx

@@ -0,0 +1,13 @@
+import { Box, Text } from "ink";
+import { getDefaultConfigPath } from "../../config/manager.js";
+
+export function MCPError({ message }: { message: string }) {
+  return (
+    <Box flexDirection="column">
+      <Text color="red">✖ Error: {message}</Text>
+      <Text color="gray">Check your MCP config: {getDefaultConfigPath()}</Text>
+    </Box>
+  );
+}
+
+export default MCPError;

src/components/mcp/mcp-error.tsx

@@ -0,0 +1,28 @@
+import { Box, Text } from "ink";
+import type { Row } from "./types.js";
+import { getStatusColor, getStatusIcon } from "./utils.js";
+
+export function MCPRow({
+  row,
+  widths,
+}: {
+  row: Row;
+  widths: { nameW: number; typeW: number };
+}) {
+  return (
+    <Box flexDirection="column">
+      <Box>
+        <Text>
+          {row.name.padEnd(widths.nameW)} {row.type.padEnd(widths.typeW)}{" "}
+        </Text>
+        <Text color={getStatusColor(row.status)}>
+          {getStatusIcon(row.status)} {row.status.padEnd(12)}
+        </Text>
+        <Text> {row.tools}</Text>
+      </Box>
+      {row.error ? <Text color="red"> ↳ {row.error}</Text> : null}
+    </Box>
+  );
+}
+
+export default MCPRow;

src/components/mcp/mcp-list.tsx

@@ -0,0 +1,39 @@
+import { Box, Text } from "ink";
+import { StatusMessage } from "@inkjs/ui";
+import type { Summary } from "./types.js";
+
+export function MCPSummary({
+  summary,
+  verbose,
+}: {
+  summary: Summary;
+  verbose: boolean;
+}) {
+  const items = [
+    {
+      label: "connected",
+      value: summary.connected,
+      variant: "success" as const,
+    },
+    { label: "failed", value: summary.failed, variant: "error" as const },
+    { label: "disabled", value: summary.disabled, variant: "warning" as const },
+  ];
+
+  return (
+    <Box marginTop={1}>
+      <Text bold>Summary: &nbsp;</Text>
+      <Box display="flex" gap={2} flexWrap="wrap">
+        {items.map((item) => (
+          <StatusMessage key={item.label} variant={item.variant}>
+            {`${item.value} ${item.label}`}
+          </StatusMessage>
+        ))}
+        {verbose && (
+          <StatusMessage variant="info">{`${summary.total} total`}</StatusMessage>
+        )}
+      </Box>
+    </Box>
+  );
+}
+
+export default MCPSummary;

src/components/mcp/mcp-row.tsx

@@ -0,0 +1,33 @@
+import { Box, Text } from "ink";
+import type { Row } from "./types.js";
+import { MCPRow } from "./mcp-row.js";
+
+export function MCPTable({
+  rows,
+  widths,
+}: {
+  rows: Row[];
+  widths: { nameW: number; typeW: number };
+}) {
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      <Box>
+        <Text color="gray">
+          {"Name".padEnd(widths.nameW)} {"Type".padEnd(widths.typeW)} Status
+          {"  "}Tools
+        </Text>
+      </Box>
+      <Box>
+        <Text color="gray">
+          {"─".repeat(widths.nameW)} {"─".repeat(widths.typeW)} {"─".repeat(12)}{" "}
+          {"─".repeat(5)}
+        </Text>
+      </Box>
+      {rows.map((r) => (
+        <MCPRow key={r.name} row={r} widths={widths} />
+      ))}
+    </Box>
+  );
+}
+
+export default MCPTable;