fix: add missing parseAgentFrontmatter import causing black screen

src/main/main.ts

@@ -160,13 +160,11 @@ async function writeMcpConfig(config: MCPConfigFile): Promise<void> {
 import { getAllSkills } from './skills';
 
 // Agent discovery - imported from agents module
-import { getAllAgents } from './agents';
+import { getAllAgents, parseAgentFrontmatter } from './agents';
 
 // Copilot Instructions - imported from instructions module
 import { getAllInstructions, getGitRoot } from './instructions';
 
-import { getAllAgents } from './agents';
-
 // Set up file logging only - no IPC to renderer (causes errors)
 log.transports.file.level = 'info';
 log.transports.console.level = 'info';

src/renderer/App.tsx

@@ -3357,7 +3357,7 @@ Only when ALL the above are verified complete, output exactly: ${RALPH_COMPLETIO
       command: isLocal ? (server as MCPLocalServerConfig).command : '',
       args: isLocal ? (server as MCPLocalServerConfig).args.join(' ') : '',
       url: !isLocal ? (server as MCPRemoteServerConfig).url : '',
-      tools: server.tools[0] === '*' ? '*' : server.tools.join(', '),
+      tools: server.tools?.[0] === '*' ? '*' : (server.tools || []).join(', '),
     });
     setShowMcpModal(true);
   };
@@ -4567,7 +4567,7 @@ Only when ALL the above are verified complete, output exactly: ${RALPH_COMPLETIO
                           const isLocal =
                             !server.type || server.type === 'local' || server.type === 'stdio';
                           const toolCount =
-                            server.tools[0] === '*' ? 'all' : `${server.tools.length}`;
+                            server.tools?.[0] === '*' ? 'all' : `${server.tools?.length ?? 0}`;
                           return (
                             <div key={name} className="flex items-center gap-2 text-xs">
                               {isLocal ? (

src/renderer/components/ErrorBoundary.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+
+interface ErrorBoundaryProps {
+  children: React.ReactNode;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+    console.error('[ErrorBoundary] Uncaught render error:', error, errorInfo.componentStack);
+  }
+
+  handleReload = (): void => {
+    window.location.reload();
+  };
+
+  handleDismiss = (): void => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render(): React.ReactNode {
+    if (this.state.hasError) {
+      return (
+        <div className="flex items-center justify-center h-screen bg-copilot-bg text-copilot-text">
+          <div className="text-center max-w-md px-6">
+            <h2 className="text-lg font-semibold mb-2">Something went wrong</h2>
+            <p className="text-sm text-copilot-text-muted mb-4">
+              An unexpected error occurred. You can try dismissing this or reloading the app.
+            </p>
+            {this.state.error && (
+              <pre className="text-xs text-copilot-error bg-copilot-surface rounded p-3 mb-4 text-left overflow-auto max-h-32">
+                {this.state.error.message}
+              </pre>
+            )}
+            <div className="flex gap-3 justify-center">
+              <button
+                onClick={this.handleDismiss}
+                className="px-4 py-2 text-sm rounded bg-copilot-surface hover:bg-copilot-surface-hover transition-colors"
+              >
+                Dismiss
+              </button>
+              <button
+                onClick={this.handleReload}
+                className="px-4 py-2 text-sm rounded bg-copilot-accent text-white hover:opacity-90 transition-opacity"
+              >
+                Reload
+              </button>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

src/renderer/main.tsx

@@ -2,12 +2,15 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import { ThemeProvider } from './context/ThemeContext';
+import { ErrorBoundary } from './components/ErrorBoundary';
 import './styles/global.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <ThemeProvider>
-      <App />
-    </ThemeProvider>
+    <ErrorBoundary>
+      <ThemeProvider>
+        <App />
+      </ThemeProvider>
+    </ErrorBoundary>
   </React.StrictMode>
 );