test: add integration and E2E tests for command creation feature

- Add backend integration tests for POST /api/commands/create endpoint
  - Validation tests (mode, location, required fields)
  - Security tests (path traversal prevention)
  - Upload mode tests (file creation, path handling)
  - Edge cases (special characters, unicode, nested paths)

- Add frontend E2E tests for CommandCreateDialog component
  - Dialog open/close tests
  - Mode switching (import/generate)
  - Location selection (project/user)
  - API success/error handling
  - Loading states and validation

Tests verify dual-mode command creation functionality with proper
error handling and security validation.

ccw/frontend/tests/e2e/command-create.spec.ts

@@ -0,0 +1,634 @@
+// ========================================
+// E2E Tests: Command Creation
+// ========================================
+// End-to-end tests for command creation dialog and API
+
+import { test, expect } from '@playwright/test';
+import { setupEnhancedMonitoring } from './helpers/i18n-helpers';
+
+test.describe('[Command Creation] - CommandCreateDialog Tests', () => {
+  test.beforeEach(async ({ page }) => {
+    // Navigate to commands page
+    await page.goto('/commands', { waitUntil: 'networkidle' as const });
+  });
+
+  // ========================================
+  // Dialog Open Tests
+  // ========================================
+  test('L4.1 - should open create command dialog', async ({ page }) => {
+    const monitoring = setupEnhancedMonitoring(page);
+
+    // Look for create button
+    const createButton = page.getByRole('button', { name: /create|new|add/i }).or(
+      page.getByTestId('create-command-button')
+    );
+
+    const hasCreateButton = await createButton.isVisible().catch(() => false);
+
+    if (hasCreateButton) {
+      await createButton.click();
+
+      // Wait for dialog
+      const dialog = page.getByRole('dialog').or(page.getByTestId('command-create-dialog'));
+      await expect(dialog).toBeVisible({ timeout: 5000 });
+
+      // Verify dialog title
+      const title = dialog.getByText(/create command|创建命令/i);
+      const hasTitle = await title.isVisible().catch(() => false);
+      expect(hasTitle).toBe(true);
+    }
+
+    monitoring.assertClean({ ignoreAPIPatterns: ['/api/'], allowWarnings: true });
+    monitoring.stop();
+  });
+
+  // ========================================
+  // Mode Selection Tests
+  // ========================================
+  test('L4.2 - should switch between import and generate modes', async ({ page }) => {
+    const monitoring = setupEnhancedMonitoring(page);
+
+    // Open dialog
+    const createButton = page.getByRole('button', { name: /create|new|add/i }).or(
+      page.getByTestId('create-command-button')
+    );
+
+    const hasCreateButton = await createButton.isVisible().catch(() => false);
+    if (!hasCreateButton) {
+      monitoring.stop();
+      test.skip();
+      return;
+    }
+
+    await createButton.click();
+    const dialog = page.getByRole('dialog').or(page.getByTestId('command-create-dialog'));
+    await expect(dialog).toBeVisible({ timeout: 5000 });
+
+    // Look for mode buttons
+    const importButton = dialog.getByRole('button', { name: /import|导入/i }).or(
+      dialog.getByTestId('mode-import')
+    );
+    const generateButton = dialog.getByRole('button', { name: /generate|ai|生成/i }).or(
+      dialog.getByTestId('mode-generate')
+    );
+
+    // Click generate mode
+    const hasGenerate = await generateButton.isVisible().catch(() => false);
+    if (hasGenerate) {
+      await generateButton.click();
+
+      // Verify description textarea appears
+      const descriptionTextarea = dialog.getByRole('textbox', { name: /description|描述/i }).or(
+        dialog.getByPlaceholder(/describe|描述/)
+      );
+      await expect(descriptionTextarea).toBeVisible({ timeout: 3000 });
+    }
+
+    // Click import mode
+    const hasImport = await importButton.isVisible().catch(() => false);
+    if (hasImport) {
+      await importButton.click();
+
+      // Verify source path input appears
+      const sourcePathInput = dialog.getByRole('textbox', { name: /source|path|路径/i }).or(
+        dialog.getByPlaceholder(/path|路径/)
+      );
+      await expect(sourcePathInput).toBeVisible({ timeout: 3000 });
+    }
+
+    monitoring.assertClean({ ignoreAPIPatterns: ['/api/'], allowWarnings: true });
+    monitoring.stop();
+  });
+
+  // ========================================
+  // Location Selection Tests
+  // ========================================
+  test('L4.3 - should switch between project and user locations', async ({ page }) => {
+    const monitoring = setupEnhancedMonitoring(page);
+
+    const createButton = page.getByRole('button', { name: /create|new|add/i }).or(
+      page.getByTestId('create-command-button')
+    );
+
+    const hasCreateButton = await createButton.isVisible().catch(() => false);
+    if (!hasCreateButton) {
+      monitoring.stop();
+      test.skip();
+      return;
+    }
+
+    await createButton.click();
+    const dialog = page.getByRole('dialog').or(page.getByTestId('command-create-dialog'));
+    await expect(dialog).toBeVisible({ timeout: 5000 });
+
+    // Look for location buttons
+    const projectButton = dialog.getByRole('button', { name: /project|项目/i }).or(
+      dialog.getByTestId('location-project')
+    );
+    const userButton = dialog.getByRole('button', { name: /user|global|用户|全局/i }).or(
+      dialog.getByTestId('location-user')
+    );
+
+    // Both should be visible
+    const hasProject = await projectButton.isVisible().catch(() => false);
+    const hasUser = await userButton.isVisible().catch(() => false);
+
+    expect(hasProject || hasUser).toBe(true);
+
+    monitoring.assertClean({ ignoreAPIPatterns: ['/api/'], allowWarnings: true });
+    monitoring.stop();
+  });
+
+  // ========================================
+  // Validation Tests
+  // ========================================
+  test('L4.4 - should validate required fields in generate mode', async ({ page }) => {
+    const monitoring = setupEnhancedMonitoring(page);
+
+    const createButton = page.getByRole('button', { name: /create|new|add/i }).or(
+      page.getByTestId('create-command-button')
+    );
+
+    const hasCreateButton = await createButton.isVisible().catch(() => false);
+    if (!hasCreateButton) {
+      monitoring.stop();
+      test.skip();
+      return;
+    }
+
+    await createButton.click();
+    const dialog = page.getByRole('dialog').or(page.getByTestId('command-create-dialog'));
+    await expect(dialog).toBeVisible({ timeout: 5000 });
+
+    // Switch to generate mode
+    const generateButton = dialog.getByRole('button', { name: /generate|ai|生成/i }).or(
+      dialog.getByTestId('mode-generate')
+    );
+
+    const hasGenerate = await generateButton.isVisible().catch(() => false);
+    if (hasGenerate) {
+      await generateButton.click();
+
+      // Try to create without filling fields
+      const createActionButton = dialog.getByRole('button', { name: /^create$|^generate$/i }).or(
+        dialog.getByTestId('create-action-button')
+      );
+
+      const hasCreateAction = await createActionButton.isVisible().catch(() => false);
+      if (hasCreateAction) {
+        // Button should be disabled without required fields
+        const isDisabled = await createActionButton.isDisabled().catch(() => false);
+
+        // Either button is disabled, or clicking it shows validation
+        expect(isDisabled).toBe(true);
+      }
+    }
+
+    monitoring.assertClean({ ignoreAPIPatterns: ['/api/'], allowWarnings: true });
+    monitoring.stop();
+  });
+
+  // ========================================
+  // API Success Tests
+  // ========================================
+  test.describe('API Success Tests', () => {
+    test('L4.5 - should create command via import mode', async ({ page }) => {
+      const monitoring = setupEnhancedMonitoring(page);
+
+      // Mock successful API response
+      await page.route('**/api/commands/create', (route) => {
+        route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({
+            success: true,
+            commandInfo: {
+              name: 'test-command',
+              description: 'Test command',
+              path: '/.claude/commands/test/test-command.md',
+            },
+          }),
+        });
+      });
+
+      const createButton = page.getByRole('button', { name: /create|new|add/i }).or(
+        page.getByTestId('create-command-button')
+      );
+
+      const hasCreateButton = await createButton.isVisible().catch(() => false);
+      if (!hasCreateButton) {
+        monitoring.stop();
+        test.skip();
+        return;
+      }
+
+      await createButton.click();
+      const dialog = page.getByRole('dialog').or(page.getByTestId('command-create-dialog'));
+      await expect(dialog).toBeVisible({ timeout: 5000 });
+
+      // Fill in import mode
+      const sourcePathInput = dialog.getByRole('textbox', { name: /source|path|路径/i }).or(
+        dialog.getByPlaceholder(/path|路径/)
+      );
+
+      const hasSourcePath = await sourcePathInput.isVisible().catch(() => false);
+      if (hasSourcePath) {
+        await sourcePathInput.fill('/test/path/command.md');
+
+        // Click create
+        const createActionButton = dialog.getByRole('button', { name: /^create$|^import$/i }).or(
+          dialog.getByTestId('create-action-button')
+        );
+
+        const hasCreateAction = await createActionButton.isVisible().catch(() => false);
+        if (hasCreateAction && !(await createActionButton.isDisabled().catch(() => false))) {
+          await createActionButton.click();
+
+          // Wait for success (dialog closes or success message)
+          await page.waitForTimeout(2000);
+        }
+      }
+
+      await page.unroute('**/api/commands/create');
+      monitoring.stop();
+    });
+
+    test('L4.6 - should create command via generate mode', async ({ page }) => {
+      const monitoring = setupEnhancedMonitoring(page);
+
+      // Mock successful API response
+      await page.route('**/api/commands/create', (route) => {
+        route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({
+            success: true,
+            commandInfo: {
+              name: 'ai-generated-command',
+              description: 'AI generated command',
+              path: '/.claude/commands/generated/ai-generated-command.md',
+            },
+          }),
+        });
+      });
+
+      const createButton = page.getByRole('button', { name: /create|new|add/i }).or(
+        page.getByTestId('create-command-button')
+      );
+
+      const hasCreateButton = await createButton.isVisible().catch(() => false);
+      if (!hasCreateButton) {
+        monitoring.stop();
+        test.skip();
+        return;
+      }
+
+      await createButton.click();
+      const dialog = page.getByRole('dialog').or(page.getByTestId('command-create-dialog'));
+      await expect(dialog).toBeVisible({ timeout: 5000 });
+
+      // Switch to generate mode
+      const generateButton = dialog.getByRole('button', { name: /generate|ai|生成/i }).or(
+        dialog.getByTestId('mode-generate')
+      );
+
+      const hasGenerate = await generateButton.isVisible().catch(() => false);
+      if (hasGenerate) {
+        await generateButton.click();
+
+        // Fill in required fields
+        const nameInput = dialog.getByRole('textbox', { name: /name|command.*name|命令.*名/i }).or(
+          dialog.getByPlaceholder(/name|名称/)
+        );
+        const descriptionTextarea = dialog.getByRole('textbox', { name: /description|描述/i }).or(
+          dialog.getByPlaceholder(/describe|描述/)
+        );
+
+        if (await nameInput.isVisible().catch(() => false)) {
+          await nameInput.fill('ai-generated-command');
+        }
+        if (await descriptionTextarea.isVisible().catch(() => false)) {
+          await descriptionTextarea.fill('A command generated by AI');
+        }
+
+        // Click generate
+        const generateActionButton = dialog.getByRole('button', { name: /^generate$/i }).or(
+          dialog.getByTestId('create-action-button')
+        );
+
+        const hasGenerateAction = await generateActionButton.isVisible().catch(() => false);
+        if (hasGenerateAction && !(await generateActionButton.isDisabled().catch(() => false))) {
+          await generateActionButton.click();
+
+          // Wait for success
+          await page.waitForTimeout(2000);
+        }
+      }
+
+      await page.unroute('**/api/commands/create');
+      monitoring.stop();
+    });
+  });
+
+  // ========================================
+  // API Error Tests
+  // ========================================
+  test.describe('API Error Tests', () => {
+    test('L4.7 - should show error on 400 Bad Request', async ({ page }) => {
+      const monitoring = setupEnhancedMonitoring(page);
+
+      // Mock error response
+      await page.route('**/api/commands/create', (route) => {
+        route.fulfill({
+          status: 400,
+          contentType: 'application/json',
+          body: JSON.stringify({
+            success: false,
+            error: 'Invalid request: sourcePath is required',
+          }),
+        });
+      });
+
+      const createButton = page.getByRole('button', { name: /create|new|add/i }).or(
+        page.getByTestId('create-command-button')
+      );
+
+      const hasCreateButton = await createButton.isVisible().catch(() => false);
+      if (!hasCreateButton) {
+        monitoring.stop();
+        test.skip();
+        return;
+      }
+
+      await createButton.click();
+      const dialog = page.getByRole('dialog').or(page.getByTestId('command-create-dialog'));
+      await expect(dialog).toBeVisible({ timeout: 5000 });
+
+      // Try to create (if possible)
+      const createActionButton = dialog.getByRole('button', { name: /^create$|^import$/i }).or(
+        dialog.getByTestId('create-action-button')
+      );
+
+      const hasCreateAction = await createActionButton.isVisible().catch(() => false);
+      if (hasCreateAction && !(await createActionButton.isDisabled().catch(() => false))) {
+        await createActionButton.click();
+
+        // Wait for error message
+        await page.waitForTimeout(2000);
+
+        // Check for error message
+        const errorMessage = page.locator('text=/error|失败|invalid/i');
+        const hasError = await errorMessage.isVisible().catch(() => false);
+
+        // Error should be displayed
+        expect(hasError || (await dialog.isVisible().catch(() => false))).toBe(true);
+      }
+
+      await page.unroute('**/api/commands/create');
+      monitoring.stop();
+    });
+
+    test('L4.8 - should show error on 409 Conflict', async ({ page }) => {
+      const monitoring = setupEnhancedMonitoring(page);
+
+      // Mock conflict response
+      await page.route('**/api/commands/create', (route) => {
+        route.fulfill({
+          status: 409,
+          contentType: 'application/json',
+          body: JSON.stringify({
+            success: false,
+            error: 'Command already exists',
+          }),
+        });
+      });
+
+      const createButton = page.getByRole('button', { name: /create|new|add/i }).or(
+        page.getByTestId('create-command-button')
+      );
+
+      const hasCreateButton = await createButton.isVisible().catch(() => false);
+      if (!hasCreateButton) {
+        monitoring.stop();
+        test.skip();
+        return;
+      }
+
+      await createButton.click();
+      const dialog = page.getByRole('dialog').or(page.getByTestId('command-create-dialog'));
+      await expect(dialog).toBeVisible({ timeout: 5000 });
+
+      // Try to create
+      const createActionButton = dialog.getByRole('button', { name: /^create$|^import$/i }).or(
+        dialog.getByTestId('create-action-button')
+      );
+
+      const hasCreateAction = await createActionButton.isVisible().catch(() => false);
+      if (hasCreateAction && !(await createActionButton.isDisabled().catch(() => false))) {
+        await createActionButton.click();
+
+        // Wait for error
+        await page.waitForTimeout(2000);
+
+        // Check for conflict error
+        const errorMessage = page.locator('text=/already exists|已存在|conflict/i');
+        const hasError = await errorMessage.isVisible().catch(() => false);
+
+        expect(hasError || (await dialog.isVisible().catch(() => false))).toBe(true);
+      }
+
+      await page.unroute('**/api/commands/create');
+      monitoring.stop();
+    });
+
+    test('L4.9 - should show error on path traversal attempt', async ({ page }) => {
+      const monitoring = setupEnhancedMonitoring(page);
+
+      // Mock forbidden response
+      await page.route('**/api/commands/create', (route) => {
+        route.fulfill({
+          status: 403,
+          contentType: 'application/json',
+          body: JSON.stringify({
+            success: false,
+            error: 'Path traversal detected',
+          }),
+        });
+      });
+
+      const createButton = page.getByRole('button', { name: /create|new|add/i }).or(
+        page.getByTestId('create-command-button')
+      );
+
+      const hasCreateButton = await createButton.isVisible().catch(() => false);
+      if (!hasCreateButton) {
+        monitoring.stop();
+        test.skip();
+        return;
+      }
+
+      await createButton.click();
+      const dialog = page.getByRole('dialog').or(page.getByTestId('command-create-dialog'));
+      await expect(dialog).toBeVisible({ timeout: 5000 });
+
+      // Fill in malicious path
+      const sourcePathInput = dialog.getByRole('textbox', { name: /source|path|路径/i }).or(
+        dialog.getByPlaceholder(/path|路径/)
+      );
+
+      const hasSourcePath = await sourcePathInput.isVisible().catch(() => false);
+      if (hasSourcePath) {
+        await sourcePathInput.fill('../../../etc/passwd');
+
+        const createActionButton = dialog.getByRole('button', { name: /^create$|^import$/i }).or(
+          dialog.getByTestId('create-action-button')
+        );
+
+        const hasCreateAction = await createActionButton.isVisible().catch(() => false);
+        if (hasCreateAction && !(await createActionButton.isDisabled().catch(() => false))) {
+          await createActionButton.click();
+
+          // Wait for error
+          await page.waitForTimeout(2000);
+        }
+      }
+
+      await page.unroute('**/api/commands/create');
+      monitoring.stop();
+    });
+  });
+
+  // ========================================
+  // Loading State Tests
+  // ========================================
+  test('L4.10 - should show loading state during creation', async ({ page }) => {
+    const monitoring = setupEnhancedMonitoring(page);
+
+    // Mock delayed response
+    await page.route('**/api/commands/create', async (route) => {
+      await new Promise((resolve) => setTimeout(resolve, 3000));
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          success: true,
+          commandInfo: { name: 'test', description: 'Test' },
+        }),
+      });
+    });
+
+    const createButton = page.getByRole('button', { name: /create|new|add/i }).or(
+      page.getByTestId('create-command-button')
+    );
+
+    const hasCreateButton = await createButton.isVisible().catch(() => false);
+    if (!hasCreateButton) {
+      monitoring.stop();
+      test.skip();
+      return;
+    }
+
+    await createButton.click();
+    const dialog = page.getByRole('dialog').or(page.getByTestId('command-create-dialog'));
+    await expect(dialog).toBeVisible({ timeout: 5000 });
+
+    // Fill in and click create
+    const sourcePathInput = dialog.getByRole('textbox', { name: /source|path|路径/i }).or(
+      dialog.getByPlaceholder(/path|路径/)
+    );
+
+    const hasSourcePath = await sourcePathInput.isVisible().catch(() => false);
+    if (hasSourcePath) {
+      await sourcePathInput.fill('/test/path/command.md');
+
+      const createActionButton = dialog.getByRole('button', { name: /^create$|^import$/i }).or(
+        dialog.getByTestId('create-action-button')
+      );
+
+      const hasCreateAction = await createActionButton.isVisible().catch(() => false);
+      if (hasCreateAction && !(await createActionButton.isDisabled().catch(() => false))) {
+        await createActionButton.click();
+
+        // Check for loading indicator
+        const loadingSpinner = dialog.locator('[class*="animate-spin"]').or(
+          dialog.locator('svg').filter({ hasText: /loading/i })
+        );
+        const hasLoading = await loadingSpinner.isVisible().catch(() => false);
+
+        // Or check for disabled button
+        const isDisabled = await createActionButton.isDisabled().catch(() => false);
+
+        expect(hasLoading || isDisabled).toBe(true);
+      }
+    }
+
+    await page.unroute('**/api/commands/create');
+    monitoring.stop();
+  });
+
+  // ========================================
+  // Dialog Close Tests
+  // ========================================
+  test('L4.11 - should close dialog on cancel', async ({ page }) => {
+    const monitoring = setupEnhancedMonitoring(page);
+
+    const createButton = page.getByRole('button', { name: /create|new|add/i }).or(
+      page.getByTestId('create-command-button')
+    );
+
+    const hasCreateButton = await createButton.isVisible().catch(() => false);
+    if (!hasCreateButton) {
+      monitoring.stop();
+      test.skip();
+      return;
+    }
+
+    await createButton.click();
+    const dialog = page.getByRole('dialog').or(page.getByTestId('command-create-dialog'));
+    await expect(dialog).toBeVisible({ timeout: 5000 });
+
+    // Click cancel
+    const cancelButton = dialog.getByRole('button', { name: /cancel|取消/i }).or(
+      dialog.getByTestId('cancel-button')
+    );
+
+    const hasCancel = await cancelButton.isVisible().catch(() => false);
+    if (hasCancel) {
+      await cancelButton.click();
+
+      // Dialog should close
+      await expect(dialog).not.toBeVisible({ timeout: 3000 });
+    }
+
+    monitoring.assertClean({ ignoreAPIPatterns: ['/api/'], allowWarnings: true });
+    monitoring.stop();
+  });
+
+  test('L4.12 - should close dialog on escape key', async ({ page }) => {
+    const monitoring = setupEnhancedMonitoring(page);
+
+    const createButton = page.getByRole('button', { name: /create|new|add/i }).or(
+      page.getByTestId('create-command-button')
+    );
+
+    const hasCreateButton = await createButton.isVisible().catch(() => false);
+    if (!hasCreateButton) {
+      monitoring.stop();
+      test.skip();
+      return;
+    }
+
+    await createButton.click();
+    const dialog = page.getByRole('dialog').or(page.getByTestId('command-create-dialog'));
+    await expect(dialog).toBeVisible({ timeout: 5000 });
+
+    // Press escape
+    await page.keyboard.press('Escape');
+
+    // Dialog should close
+    await expect(dialog).not.toBeVisible({ timeout: 3000 });
+
+    monitoring.assertClean({ ignoreAPIPatterns: ['/api/'], allowWarnings: true });
+    monitoring.stop();
+  });
+});

ccw/tests/integration/commands-routes.test.ts

@@ -0,0 +1,563 @@
+/**
+ * Integration tests for commands routes (command creation).
+ *
+ * Notes:
+ * - Targets runtime implementation shipped in `ccw/dist`.
+ * - Calls route handler directly (no HTTP server required).
+ * - Uses temporary HOME/USERPROFILE to isolate user commands directory.
+ */
+
+import { after, before, beforeEach, describe, it, mock } from 'node:test';
+import assert from 'node:assert/strict';
+import { mkdirSync, mkdtempSync, rmSync, writeFileSync, existsSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+
+const commandsRoutesUrl = new URL('../../dist/core/routes/commands-routes.js', import.meta.url);
+commandsRoutesUrl.searchParams.set('t', String(Date.now()));
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let mod: any;
+
+const originalEnv = {
+  HOME: process.env.HOME,
+  USERPROFILE: process.env.USERPROFILE,
+  HOMEDRIVE: process.env.HOMEDRIVE,
+  HOMEPATH: process.env.HOMEPATH,
+};
+
+// Helper to call routes with any method and optional body
+async function callCommands(
+  initialPath: string,
+  method: string,
+  pathname: string,
+  body?: any,
+): Promise<{ handled: boolean; status: number; json: any }> {
+  const url = new URL(pathname, 'http://localhost');
+  let status = 0;
+  let text = '';
+  let resolvePromise: () => void;
+  const completionPromise = new Promise<void>((resolve) => { resolvePromise = resolve; });
+
+  const res = {
+    writeHead(code: number) {
+      status = code;
+    },
+    end(chunk?: any) {
+      text = chunk === undefined ? '' : String(chunk);
+      resolvePromise();
+    },
+  };
+
+  // handlePostRequest implementation matching the actual route handler signature
+  // IMPORTANT: The route handler calls this without awaiting, so we need to track completion
+  const handlePostRequest = async (_req: any, _res: any, handler: (parsed: any) => Promise<any>) => {
+    try {
+      // Call the handler and wait for result
+      const result = await handler(body ?? {});
+
+      // Handle the result
+      if (result && typeof result === 'object') {
+        // Check for explicit error/success indicators
+        const isError = result.success === false;
+        const hasStatus = typeof result.status === 'number';
+        const isClientError = hasStatus && result.status >= 400;
+
+        if (isError || isClientError) {
+          res.writeHead(hasStatus ? result.status : 400);
+          res.end(JSON.stringify(result));
+        } else {
+          res.writeHead(hasStatus ? result.status : 200);
+          res.end(JSON.stringify(result));
+        }
+      } else {
+        res.writeHead(200);
+        res.end(JSON.stringify(result));
+      }
+    } catch (error: any) {
+      res.writeHead(500);
+      res.end(JSON.stringify({ success: false, error: error.message }));
+    }
+  };
+
+  const handled = await mod.handleCommandsRoutes({
+    pathname: url.pathname,
+    url,
+    req: { method },
+    res,
+    initialPath,
+    handlePostRequest,
+    broadcastToClients() {},
+  });
+
+  // If the route was handled and method is POST, wait for handlePostRequest to complete
+  // The route handler doesn't await handlePostRequest, so we need to wait for res.end()
+  if (handled && method === 'POST') {
+    // Wait for the async handlePostRequest to complete with a timeout
+    await Promise.race([
+      completionPromise,
+      new Promise<void>((resolve) => setTimeout(resolve, 1000)),
+    ]);
+  }
+
+  return { handled, status, json: text ? JSON.parse(text) : null };
+}
+
+// Helper to create a valid command file
+function createCommandFile(dir: string, name: string, content?: string): string {
+  const filePath = join(dir, `${name}.md`);
+  const defaultContent = content || `---
+name: "${name}"
+description: "Test command for ${name}"
+---
+
+# ${name}
+
+This is a test command.
+`;
+  writeFileSync(filePath, defaultContent, 'utf8');
+  return filePath;
+}
+
+describe('commands routes integration - creation', async () => {
+  let homeDir = '';
+  let projectRoot = '';
+  let projectCommandsDir = '';
+  let userCommandsDir = '';
+
+  before(async () => {
+    homeDir = mkdtempSync(join(tmpdir(), 'ccw-commands-home-'));
+    projectRoot = mkdtempSync(join(tmpdir(), 'ccw-commands-project-'));
+    projectCommandsDir = join(projectRoot, '.claude', 'commands');
+    userCommandsDir = join(homeDir, '.claude', 'commands');
+
+    process.env.HOME = homeDir;
+    process.env.USERPROFILE = homeDir;
+    process.env.HOMEDRIVE = undefined;
+    process.env.HOMEPATH = undefined;
+
+    mock.method(console, 'error', () => {});
+    mock.method(console, 'warn', () => {});
+    mod = await import(commandsRoutesUrl.href);
+  });
+
+  beforeEach(() => {
+    // Retry cleanup on Windows due to file locking issues
+    const cleanup = (path: string) => {
+      try {
+        rmSync(path, { recursive: true, force: true });
+      } catch {
+        // Ignore cleanup errors on Windows
+      }
+    };
+    cleanup(join(homeDir, '.claude'));
+    cleanup(join(projectRoot, '.claude'));
+
+    mkdirSync(projectCommandsDir, { recursive: true });
+    mkdirSync(userCommandsDir, { recursive: true });
+  });
+
+  after(() => {
+    mock.restoreAll();
+    process.env.HOME = originalEnv.HOME;
+    process.env.USERPROFILE = originalEnv.USERPROFILE;
+    process.env.HOMEDRIVE = originalEnv.HOMEDRIVE;
+    process.env.HOMEPATH = originalEnv.HOMEPATH;
+
+    // Retry cleanup on Windows due to EBUSY errors from async operations
+    const cleanup = (path: string, retries = 3) => {
+      for (let i = 0; i < retries; i++) {
+        try {
+          rmSync(path, { recursive: true, force: true });
+          break;
+        } catch (err) {
+          if (i === retries - 1) {
+            console.error(`Failed to cleanup ${path}:`, err);
+          }
+        }
+      }
+    };
+    cleanup(projectRoot);
+    cleanup(homeDir);
+  });
+
+  // ========================================
+  // POST /api/commands/create - Validation Tests
+  // ========================================
+  describe('POST /api/commands/create - validation', () => {
+    it('should reject invalid mode', async () => {
+      const res = await callCommands(projectRoot, 'POST', '/api/commands/create', {
+        mode: 'invalid-mode',
+        location: 'project',
+      });
+
+      assert.equal(res.handled, true);
+      assert.equal(res.status, 400);
+      assert.equal(res.json.success, false);
+    });
+
+    it('should reject invalid location', async () => {
+      const res = await callCommands(projectRoot, 'POST', '/api/commands/create', {
+        mode: 'upload',
+        location: 'invalid-location',
+        sourcePath: '/some/path.md',
+      });
+
+      assert.equal(res.handled, true);
+      assert.equal(res.status, 400);
+    });
+
+    it('should reject upload mode without sourcePath', async () => {
+      const res = await callCommands(projectRoot, 'POST', '/api/commands/create', {
+        mode: 'upload',
+        location: 'project',
+      });
+
+      assert.equal(res.handled, true);
+      assert.equal(res.status, 400);
+      assert.ok(res.json.message || res.json.error);
+    });
+
+    it('should reject generate mode without commandName', async () => {
+      const res = await callCommands(projectRoot, 'POST', '/api/commands/create', {
+        mode: 'generate',
+        location: 'project',
+        description: 'Test description',
+      });
+
+      assert.equal(res.handled, true);
+      assert.equal(res.status, 400);
+    });
+
+    it('should reject generate mode without description', async () => {
+      const res = await callCommands(projectRoot, 'POST', '/api/commands/create', {
+        mode: 'generate',
+        location: 'project',
+        commandName: 'test-command',
+      });
+
+      assert.equal(res.handled, true);
+      assert.equal(res.status, 400);
+    });
+
+    it('should handle null body gracefully', async () => {
+      const res = await callCommands(projectRoot, 'POST', '/api/commands/create', null);
+
+      assert.equal(res.handled, true);
+      assert.equal(res.status, 400);
+    });
+  });
+
+  // ========================================
+  // POST /api/commands/create - Security Tests
+  // ========================================
+  describe('POST /api/commands/create - security', () => {
+    it('should reject path traversal in sourcePath', async () => {
+      const res = await callCommands(projectRoot, 'POST', '/api/commands/create', {
+        mode: 'upload',
+        location: 'project',
+        sourcePath: '../../../etc/passwd',
+      });
+
+      assert.equal(res.handled, true);
+      // Should reject with 400 or 403
+      assert.ok([400, 403].includes(res.status));
+    });
+
+    it('should reject path traversal in commandName for generate mode', async () => {
+      const res = await callCommands(projectRoot, 'POST', '/api/commands/create', {
+        mode: 'generate',
+        location: 'project',
+        commandName: '../../../malicious',
+        description: 'Test description',
+      });
+
+      assert.equal(res.handled, true);
+      assert.ok([400, 403].includes(res.status));
+    });
+
+    it('should reject or sanitize path traversal in group parameter', async () => {
+      // Create a valid source file first
+      const tempDir = join(tmpdir(), 'ccw-source-security');
+      mkdirSync(tempDir, { recursive: true });
+      const sourcePath = createCommandFile(tempDir, 'security-test');
+
+      const res = await callCommands(projectRoot, 'POST', '/api/commands/create', {
+        mode: 'upload',
+        location: 'project',
+        sourcePath,
+        group: '../../../etc',
+      });
+
+      assert.equal(res.handled, true);
+      // Should either sanitize the path or reject
+      if (res.status === 200) {
+        // Verify the file was NOT created in a dangerous location
+        assert.ok(!existsSync(join(projectRoot, 'etc', 'security-test.md')));
+      } else {
+        // If rejected, should be 400 or 403
+        assert.ok([400, 403].includes(res.status));
+      }
+
+      rmSync(tempDir, { recursive: true, force: true });
+    });
+  });
+
+  // ========================================
+  // POST /api/commands/create - Upload Mode Tests
+  // ========================================
+  describe('POST /api/commands/create - upload mode', () => {
+    it('should create command via upload mode to project location', async () => {
+      const tempDir = join(tmpdir(), 'ccw-source-upload1');
+      mkdirSync(tempDir, { recursive: true });
+      const sourcePath = createCommandFile(tempDir, 'upload-test');
+
+      const res = await callCommands(projectRoot, 'POST', '/api/commands/create', {
+        mode: 'upload',
+        location: 'project',
+        sourcePath,
+        group: 'uploaded',
+      });
+
+      assert.equal(res.handled, true);
+      assert.equal(res.status, 200);
+      assert.equal(res.json.success, true);
+      assert.ok(res.json.commandInfo);
+      assert.equal(res.json.commandInfo.name, 'upload-test');
+
+      // Verify file exists at target location
+      const targetPath = join(projectCommandsDir, 'uploaded', 'upload-test.md');
+      assert.equal(existsSync(targetPath), true);
+
+      rmSync(tempDir, { recursive: true, force: true });
+    });
+
+    it('should create command via upload mode to user location', async () => {
+      const tempDir = join(tmpdir(), 'ccw-source-upload2');
+      mkdirSync(tempDir, { recursive: true });
+      const sourcePath = createCommandFile(tempDir, 'user-command');
+
+      const res = await callCommands(projectRoot, 'POST', '/api/commands/create', {
+        mode: 'upload',
+        location: 'user',
+        sourcePath,
+        group: 'personal',
+      });
+
+      assert.equal(res.handled, true);
+      assert.equal(res.status, 200);
+      assert.equal(res.json.success, true);
+
+      // Verify file exists at user location
+      const targetPath = join(userCommandsDir, 'personal', 'user-command.md');
+      assert.equal(existsSync(targetPath), true);
+
+      rmSync(tempDir, { recursive: true, force: true });
+    });
+
+    it('should reject non-existent source file', async () => {
+      const res = await callCommands(projectRoot, 'POST', '/api/commands/create', {
+        mode: 'upload',
+        location: 'project',
+        sourcePath: '/nonexistent/command.md',
+        group: 'test',
+      });
+
+      assert.equal(res.handled, true);
+      assert.ok([400, 404].includes(res.status));
+    });
+
+    it('should handle deeply nested group paths', async () => {
+      const tempDir = join(tmpdir(), 'ccw-source-nested');
+      mkdirSync(tempDir, { recursive: true });
+      const sourcePath = createCommandFile(tempDir, 'nested-test');
+
+      const res = await callCommands(projectRoot, 'POST', '/api/commands/create', {
+        mode: 'upload',
+        location: 'project',
+        sourcePath,
+        group: 'category/subcategory/type',
+      });
+
+      assert.equal(res.handled, true);
+      assert.equal(res.status, 200);
+      assert.equal(res.json.success, true);
+
+      // Verify nested directories were created
+      const targetPath = join(projectCommandsDir, 'category', 'subcategory', 'type', 'nested-test.md');
+      assert.equal(existsSync(targetPath), true);
+
+      rmSync(tempDir, { recursive: true, force: true });
+    });
+
+    it('should reject non-.md source file', async () => {
+      const tempDir = join(tmpdir(), 'ccw-source-txt');
+      mkdirSync(tempDir, { recursive: true });
+      const txtPath = join(tempDir, 'test.txt');
+      writeFileSync(txtPath, 'test content', 'utf8');
+
+      const res = await callCommands(projectRoot, 'POST', '/api/commands/create', {
+        mode: 'upload',
+        location: 'project',
+        sourcePath: txtPath,
+        group: 'test',
+      });
+
+      assert.equal(res.handled, true);
+      assert.ok([400, 404].includes(res.status));
+
+      rmSync(tempDir, { recursive: true, force: true });
+    });
+
+    it('should reject source file with invalid frontmatter', async () => {
+      const tempDir = join(tmpdir(), 'ccw-source-invalid');
+      mkdirSync(tempDir, { recursive: true });
+      const invalidPath = join(tempDir, 'invalid.md');
+      writeFileSync(invalidPath, '# Just markdown\nNo frontmatter here.', 'utf8');
+
+      const res = await callCommands(projectRoot, 'POST', '/api/commands/create', {
+        mode: 'upload',
+        location: 'project',
+        sourcePath: invalidPath,
+        group: 'test',
+      });
+
+      assert.equal(res.handled, true);
+      assert.ok([400, 404].includes(res.status));
+
+      rmSync(tempDir, { recursive: true, force: true });
+    });
+  });
+
+  // ========================================
+  // POST /api/commands/create - Generate Mode Tests
+  // ========================================
+  describe('POST /api/commands/create - generate mode', () => {
+    // Note: Generate mode tests require CLI execution which may not be available in test environment
+    // These tests focus on input validation for generate mode
+
+    it.skip('should accept valid generate mode parameters (requires CLI)', async () => {
+      // This test validates that the parameters are accepted
+      // NOTE: Skipped because it requires actual CLI execution which may not be available
+      // in all test environments. Enable this test when CLI tools are properly configured.
+
+      const res = await callCommands(projectRoot, 'POST', '/api/commands/create', {
+        mode: 'generate',
+        location: 'project',
+        skillName: 'ai-generated-command',
+        description: 'A command generated by AI',
+        group: 'generated',
+      });
+
+      assert.equal(res.handled, true);
+      // The route should accept the parameters
+      // CLI execution can fail in many ways (200 success, 500 error, 400 bad request, etc.)
+      assert.ok(
+        res.status === 200 ||
+        res.status === 201 ||
+        res.status === 400 ||
+        res.status === 500 ||
+        res.status === 503,
+        `Expected success or error status, got ${res.status}: ${JSON.stringify(res.json)}`
+      );
+    });
+  });
+
+  // ========================================
+  // Edge Cases
+  // ========================================
+  describe('edge cases', () => {
+    it('should handle command file with special characters in name', async () => {
+      const tempDir = join(tmpdir(), 'ccw-source-special');
+      mkdirSync(tempDir, { recursive: true });
+
+      // Valid special characters (alphanumeric, dash, underscore)
+      const sourcePath = join(tempDir, 'my-special_command-123.md');
+      writeFileSync(sourcePath, `---
+name: "my-special-command"
+description: "Test command"
+---
+
+# Test
+`, 'utf8');
+
+      const res = await callCommands(projectRoot, 'POST', '/api/commands/create', {
+        mode: 'upload',
+        location: 'project',
+        sourcePath,
+        group: 'special',
+      });
+
+      assert.equal(res.handled, true);
+      assert.equal(res.status, 200);
+      assert.equal(res.json.success, true);
+
+      rmSync(tempDir, { recursive: true, force: true });
+    });
+
+    it('should handle command file with unicode in description', async () => {
+      const tempDir = join(tmpdir(), 'ccw-source-unicode');
+      mkdirSync(tempDir, { recursive: true });
+
+      const sourcePath = join(tempDir, 'unicode-test.md');
+      writeFileSync(sourcePath, `---
+name: "unicode-test"
+description: "测试命令 with emoji 🚀 and unicode: éàü"
+---
+
+# Unicode Test
+`, 'utf8');
+
+      const res = await callCommands(projectRoot, 'POST', '/api/commands/create', {
+        mode: 'upload',
+        location: 'project',
+        sourcePath,
+        group: 'unicode',
+      });
+
+      assert.equal(res.handled, true);
+      assert.equal(res.status, 200);
+      assert.equal(res.json.success, true);
+      assert.ok(res.json.commandInfo.description.includes('测试'));
+
+      rmSync(tempDir, { recursive: true, force: true });
+    });
+
+    it('should handle command file without group (default group)', async () => {
+      const tempDir = join(tmpdir(), 'ccw-source-nogroup');
+      mkdirSync(tempDir, { recursive: true });
+      const sourcePath = createCommandFile(tempDir, 'no-group-test');
+
+      const res = await callCommands(projectRoot, 'POST', '/api/commands/create', {
+        mode: 'upload',
+        location: 'project',
+        sourcePath,
+        // No group specified
+      });
+
+      assert.equal(res.handled, true);
+      // Should succeed with default group
+      assert.ok([200, 400].includes(res.status));
+
+      rmSync(tempDir, { recursive: true, force: true });
+    });
+  });
+
+  // ========================================
+  // Route Handler Tests
+  // ========================================
+  describe('route handler', () => {
+    it('should not handle GET request to /api/commands/create', async () => {
+      const res = await callCommands(projectRoot, 'GET', '/api/commands/create');
+
+      // GET should not be handled by create route
+      assert.equal(res.handled, false);
+    });
+
+    it('should not handle unknown routes', async () => {
+      const res = await callCommands(projectRoot, 'POST', '/api/commands/unknown', {});
+
+      assert.equal(res.handled, false);
+    });
+  });
+});