+ {/* Progress Stepper */}
+
+
+ {STEPS.map((step, index) => (
+
+
+
+ {step.id < currentStep ? '✓' : step.id}
+
+
{step.name}
+
{step.description}
+
+
+ ))}
+
+
+
+ {/* AI Suggestions */}
+
+
+
+
+
+ AI Suggestion for Step {currentStep}:
+
+ {currentStep === 1 && (
+
+ )}
+ {currentStep === 2 && (
+
+ )}
+ {currentStep === 3 && (
+
+ )}
+
+
+
+
+ {/* Step Content */}
+
+ {currentStep === 1 && }
+ {currentStep === 2 && }
+ {currentStep === 3 && }
+ {currentStep === 4 && }
+ {currentStep === 5 && }
+
+
+ {/* Navigation */}
+
+
+
+
+
+ );
+};
+```
+
+---
+
+## Phase 5: Testing & Optimization (Week 5)
+
+### 5.1 Unit Tests
+
+```typescript
+// src/lib/mcp/__tests__/client.test.ts
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { StackerMcpClient } from '../client';
+
+describe('StackerMcpClient', () => {
+ let client: StackerMcpClient;
+
+ beforeEach(() => {
+ client = new StackerMcpClient({
+ url: 'ws://localhost:8000/mcp',
+ authToken: 'test-token',
+ });
+ });
+
+ afterEach(async () => {
+ if (client.isConnected()) {
+ await client.disconnect();
+ }
+ });
+
+ it('should connect successfully', async () => {
+ await client.connect();
+ expect(client.isConnected()).toBe(true);
+ });
+
+ it('should list available tools', async () => {
+ await client.connect();
+ const tools = await client.listTools();
+
+ expect(tools).toBeInstanceOf(Array);
+ expect(tools.length).toBeGreaterThan(0);
+ expect(tools[0]).toHaveProperty('name');
+ expect(tools[0]).toHaveProperty('description');
+ });
+
+ it('should call create_project tool', async () => {
+ await client.connect();
+
+ const result = await client.callTool('create_project', {
+ name: 'Test Project',
+ apps: [
+ {
+ name: 'web',
+ dockerImage: { repository: 'nginx' },
+ },
+ ],
+ });
+
+ expect(result.content).toBeInstanceOf(Array);
+ expect(result.isError).toBeFalsy();
+ });
+});
+```
+
+### 5.2 Integration Tests
+
+```typescript
+// src/components/chat/__tests__/ChatSidebar.integration.test.tsx
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ChatSidebar } from '../ChatSidebar';
+import { McpProvider } from '@/contexts/McpContext';
+
+describe('ChatSidebar Integration', () => {
+ it('should send message and receive response', async () => {
+ render(
+