feat(cli): add /agents slash command to list available agents (#16182)

packages/cli/src/ui/components/views/AgentsStatus.tsx

@@ -0,0 +1,72 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Box, Text } from 'ink';
+import type React from 'react';
+import { theme } from '../../semantic-colors.js';
+import type { AgentDefinitionJson } from '../../types.js';
+import { MarkdownDisplay } from '../../utils/MarkdownDisplay.js';
+
+interface AgentsStatusProps {
+  agents: AgentDefinitionJson[];
+  terminalWidth: number;
+}
+
+export const AgentsStatus: React.FC<AgentsStatusProps> = ({
+  agents,
+  terminalWidth,
+}) => {
+  const localAgents = agents.filter((a) => a.kind === 'local');
+  const remoteAgents = agents.filter((a) => a.kind === 'remote');
+
+  if (agents.length === 0) {
+    return (
+      <Box flexDirection="column">
+        <Text>No agents available.</Text>
+      </Box>
+    );
+  }
+
+  const renderAgentList = (title: string, agentList: AgentDefinitionJson[]) => {
+    if (agentList.length === 0) return null;
+
+    return (
+      <Box flexDirection="column" marginBottom={1}>
+        <Text bold color={theme.text.primary}>
+          {title}
+        </Text>
+        <Box height={1} />
+        {agentList.map((agent) => (
+          <Box key={agent.name} flexDirection="row">
+            <Text color={theme.text.primary}>{'  '}- </Text>
+            <Box flexDirection="column">
+              <Text bold color={theme.text.accent}>
+                {agent.displayName || agent.name}
+                {agent.displayName && agent.displayName !== agent.name && (
+                  <Text bold={false}> ({agent.name})</Text>
+                )}
+              </Text>
+              {agent.description && (
+                <MarkdownDisplay
+                  terminalWidth={terminalWidth}
+                  text={agent.description}
+                  isPending={false}
+                />
+              )}
+            </Box>
+          </Box>
+        ))}
+      </Box>
+    );
+  };
+
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      {renderAgentList('Local Agents', localAgents)}
+      {renderAgentList('Remote Agents', remoteAgents)}
+    </Box>
+  );
+};