feat(mcp): Priority 1 improvements auto-approve, unit tests, result display

- Auto-approve toggle: per-server setting in MCP config to skip manual
  tool approval for trusted servers, with green 'Auto' toggle in settings
  and 'Auto-approving...' spinner in chat UI
- MCP service unit tests: 32 comprehensive tests covering getInstance,
  isValidToolName, toolsWithoutExecute, processToolCall,
  processToolInvocations (8 cases), _validateServerConfig (8 cases),
  _registerTools (3 cases)
- Tool result display: collapsible long JSON with 200px max-height,
  'Show more/less' toggle, line count indicator, copy-to-clipboard
  button, and theme-aware fade gradient overlay

All 484 tests pass (24 files).

Author: zebbern

app/components/@settings/tabs/mcp/McpServerList.tsx

@@ -1,13 +1,16 @@
 import type { MCPServer } from '~/lib/services/mcpService';
 import McpStatusBadge from '~/components/@settings/tabs/mcp/McpStatusBadge';
 import McpServerListItem from '~/components/@settings/tabs/mcp/McpServerListItem';
+import { classNames } from '~/utils/classNames';
 
 type McpServerListProps = {
   serverEntries: [string, MCPServer][];
   expandedServer: string | null;
   checkingServers: boolean;
   onlyShowAvailableServers?: boolean;
   toggleServerExpanded: (serverName: string) => void;
+  autoApproveServers?: string[];
+  onToggleAutoApprove?: (serverName: string) => void;
 };
 
 export default function McpServerList({
@@ -16,6 +19,8 @@ export default function McpServerList({
   checkingServers,
   onlyShowAvailableServers = false,
   toggleServerExpanded,
+  autoApproveServers = [],
+  onToggleAutoApprove,
 }: McpServerListProps) {
   if (serverEntries.length === 0) {
     return <p className="text-sm text-bolt-elements-textSecondary">No MCP servers configured</p>;
@@ -31,6 +36,7 @@ export default function McpServerList({
         const isAvailable = mcpServer.status === 'available';
         const isExpanded = expandedServer === serverName;
         const serverTools = isAvailable ? Object.entries(mcpServer.tools) : [];
+        const isAutoApproved = autoApproveServers.includes(serverName);
 
         return (
           <div key={serverName} className="flex flex-col p-2 rounded-md bg-bolt-elements-background-depth-1">
@@ -58,7 +64,26 @@ export default function McpServerList({
                 </div>
               </div>
 
-              <div className="ml-2 flex-shrink-0">
+              <div className="ml-2 flex-shrink-0 flex items-center gap-2">
+                {isAvailable && onToggleAutoApprove && (
+                  <button
+                    onClick={() => onToggleAutoApprove(serverName)}
+                    className={classNames(
+                      'flex items-center gap-1 px-2 py-0.5 rounded text-xs transition-colors',
+                      isAutoApproved
+                        ? 'bg-green-500/15 text-green-400 hover:bg-green-500/25'
+                        : 'bg-bolt-elements-background-depth-2 text-bolt-elements-textTertiary hover:text-bolt-elements-textSecondary',
+                    )}
+                    title={
+                      isAutoApproved
+                        ? 'Auto-approve enabled — tools run without confirmation'
+                        : 'Click to enable auto-approve for this server'
+                    }
+                  >
+                    <div className={`${isAutoApproved ? 'i-ph:check-circle-fill' : 'i-ph:circle'} w-3 h-3`} />
+                    Auto
+                  </button>
+                )}
                 {checkingServers ? (
                   <McpStatusBadge status="checking" />
                 ) : (

app/components/@settings/tabs/mcp/McpTab.tsx

@@ -33,6 +33,7 @@ export default function McpTab() {
   const [isSaving, setIsSaving] = useState(false);
   const [mcpConfigText, setMCPConfigText] = useState('');
   const [maxLLMSteps, setMaxLLMSteps] = useState(1);
+  const [autoApproveServers, setAutoApproveServers] = useState<string[]>([]);
   const [error, setError] = useState<string | null>(null);
   const [isCheckingServers, setIsCheckingServers] = useState(false);
   const [expandedServer, setExpandedServer] = useState<string | null>(null);
@@ -49,6 +50,7 @@ export default function McpTab() {
   useEffect(() => {
     setMCPConfigText(JSON.stringify(settings.mcpConfig, null, 2));
     setMaxLLMSteps(settings.maxLLMSteps);
+    setAutoApproveServers(settings.autoApproveServers || []);
     setError(null);
   }, [settings]);
 
@@ -77,6 +79,7 @@ export default function McpTab() {
       await updateMCPSettings({
         mcpConfig: parsedConfig,
         maxLLMSteps,
+        autoApproveServers,
       });
       toast.success('MCP configuration saved');
 
@@ -115,6 +118,12 @@ export default function McpTab() {
     setExpandedServer(expandedServer === serverName ? null : serverName);
   };
 
+  const toggleAutoApprove = (serverName: string) => {
+    setAutoApproveServers((prev) =>
+      prev.includes(serverName) ? prev.filter((s) => s !== serverName) : [...prev, serverName],
+    );
+  };
+
   const serverEntries = useMemo(() => Object.entries(serverTools), [serverTools]);
 
   return (
@@ -147,6 +156,8 @@ export default function McpTab() {
           expandedServer={expandedServer}
           serverEntries={serverEntries}
           toggleServerExpanded={toggleServerExpanded}
+          autoApproveServers={autoApproveServers}
+          onToggleAutoApprove={toggleAutoApprove}
         />
       </section>