catlog22/Claude-Code-Workflow
1
0
Fork 0
mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-02-15 02:42:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: remove old vanilla JS/CSS frontend, make React SPA the sole entry for ccw view

Browse Source 
Remove the entire old template-based frontend (~106K lines) and make the React
SPA the only way to access the ccw dashboard via `ccw view`.

Key changes:
- Delete all old frontend files: dashboard-css/ (37 CSS), dashboard-js/ (59 JS),
  assets/, dashboard.html, and legacy HTML templates
- Delete dashboard-generator.ts and dashboard-generator-patch.ts
- Simplify server.ts: remove ~234 lines of old frontend code (template constants,
  MODULE_CSS_FILES/MODULE_FILES arrays, generateServerDashboard(), /assets/* serving)
- Rebase React frontend from /react/ to root / (vite.config.ts, react-frontend.ts)
- Add /react/* -> /* 301 redirect for backward compatibility
- Remove --frontend and --new CLI flags from view and serve commands
- Remove generateDashboard export from public API (index.ts)
- Simplify serve.ts and view.ts to always use React without conditional branching
- Update all affected tests (unit, e2e) for React-only architecture

BREAKING CHANGE: --frontend and --new CLI flags removed; generateDashboard export
removed from ccw package; /react/ base path changed to /
This commit is contained in:
catlog22
2026-02-13 17:26:03 +08:00
parent 31f37751fc
commit bcb736709f
136 changed files with 204 additions and 115952 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ccw/frontend/tests/e2e/api-settings.spec.ts
View File

@@ -26,7 +26,7 @@ test.describe('[API Settings] - CLI Provider Configuration Tests', () => {
});
});
await page.goto('/react/api-settings', { waitUntil: 'domcontentloaded' as const });
await page.goto('/api-settings', { waitUntil: 'domcontentloaded' as const });
});
test('L3.21 - Page loads and displays current configuration', async ({ page }) => {

2
ccw/frontend/tests/e2e/cli-config.spec.ts
View File

@@ -15,7 +15,7 @@ test.describe.skip('[CLI Config] - CLI Configuration Tests', () => {
const monitoring = setupEnhancedMonitoring(page);
// Navigate to CLI config page
await page.goto('/react/settings/cli/config', { waitUntil: 'domcontentloaded' as const });
await page.goto('/settings/cli/config', { waitUntil: 'domcontentloaded' as const });
// Look for endpoints list container
const endpointsList = page.getByTestId('cli-endpoints-list').or(

2
ccw/frontend/tests/e2e/cli-history.spec.ts
View File

@@ -15,7 +15,7 @@ test.describe.skip('[CLI History] - CLI Execution History Tests', () => {
const monitoring = setupEnhancedMonitoring(page);
// Navigate to CLI history page
await page.goto('/react/settings/cli/history', { waitUntil: 'domcontentloaded' as const });
await page.goto('/settings/cli/history', { waitUntil: 'domcontentloaded' as const });
// Look for history list container
const historyList = page.getByTestId('cli-history-list').or(

2
ccw/frontend/tests/e2e/cli-installations.spec.ts
View File

@@ -15,7 +15,7 @@ test.describe.skip('[CLI Installations] - CLI Tools Installation Tests', () => {
const monitoring = setupEnhancedMonitoring(page);
// Navigate to CLI installations page
await page.goto('/react/settings/cli/installations', { waitUntil: 'domcontentloaded' as const });
await page.goto('/settings/cli/installations', { waitUntil: 'domcontentloaded' as const });
// Look for installations list container
const installationsList = page.getByTestId('cli-installations-list').or(

2
ccw/frontend/tests/e2e/codexlens-manager.spec.ts
View File

@@ -15,7 +15,7 @@ test.describe.skip('[CodexLens Manager] - CodexLens Management Tests', () => {
const monitoring = setupEnhancedMonitoring(page);
// Navigate to CodexLens page
await page.goto('/react/settings/codexlens', { waitUntil: 'domcontentloaded' as const });
await page.goto('/settings/codexlens', { waitUntil: 'domcontentloaded' as const });
// Check page title
const title = page.getByText(/CodexLens/i).or(page.getByRole('heading', { name: /CodexLens/i }));

28
ccw/frontend/tests/e2e/commands.spec.ts
View File

@@ -9,7 +9,7 @@ import { setupEnhancedMonitoring } from './helpers/i18n-helpers';
test.describe('[Commands] - Commands Management Tests', () => {
test.beforeEach(async ({ page }) => {
// Navigate to commands page directly and wait for full load
await page.goto('/react/commands', { waitUntil: 'networkidle' as const });
await page.goto('/commands', { waitUntil: 'networkidle' as const });
});
test('L3.1 - should display commands list', async ({ page }) => {
@@ -108,7 +108,7 @@ test.describe('[Commands] - Commands Management Tests', () => {
const monitoring = setupEnhancedMonitoring(page);
// Navigate to commands page
await page.goto('/react/commands', { waitUntil: 'networkidle' as const });
await page.goto('/commands', { waitUntil: 'networkidle' as const });
// Look for command items
const commandItems = page.getByTestId(/command-item|command-card/).or(
@@ -141,7 +141,7 @@ test.describe('[Commands] - Commands Management Tests', () => {
const monitoring = setupEnhancedMonitoring(page);
// Navigate to commands page
await page.goto('/react/commands', { waitUntil: 'networkidle' as const });
await page.goto('/commands', { waitUntil: 'networkidle' as const });
// Look for command items
const commandItems = page.getByTestId(/command-item|command-card/).or(
@@ -174,7 +174,7 @@ test.describe('[Commands] - Commands Management Tests', () => {
const monitoring = setupEnhancedMonitoring(page);
// Navigate to commands page
await page.goto('/react/commands', { waitUntil: 'networkidle' as const });
await page.goto('/commands', { waitUntil: 'networkidle' as const });
// Look for command items
const commandItems = page.getByTestId(/command-item|command-card/).or(
@@ -207,7 +207,7 @@ test.describe('[Commands] - Commands Management Tests', () => {
const monitoring = setupEnhancedMonitoring(page);
// Navigate to commands page
await page.goto('/react/commands', { waitUntil: 'networkidle' as const });
await page.goto('/commands', { waitUntil: 'networkidle' as const });
// Look for category filter
const categoryFilter = page.getByRole('combobox', { name: /category|filter/i }).or(
@@ -242,7 +242,7 @@ test.describe('[Commands] - Commands Management Tests', () => {
const monitoring = setupEnhancedMonitoring(page);
// Navigate to commands page
await page.goto('/react/commands', { waitUntil: 'networkidle' as const });
await page.goto('/commands', { waitUntil: 'networkidle' as const });
// Look for search input
const searchInput = page.getByRole('textbox', { name: /search|find/i }).or(
@@ -278,7 +278,7 @@ test.describe('[Commands] - Commands Management Tests', () => {
const monitoring = setupEnhancedMonitoring(page);
// Navigate to commands page
await page.goto('/react/commands', { waitUntil: 'networkidle' as const });
await page.goto('/commands', { waitUntil: 'networkidle' as const });
// Look for command items
const commandItems = page.getByTestId(/command-item|command-card/).or(
@@ -311,7 +311,7 @@ test.describe('[Commands] - Commands Management Tests', () => {
const monitoring = setupEnhancedMonitoring(page);
// Navigate to commands page
await page.goto('/react/commands', { waitUntil: 'networkidle' as const });
await page.goto('/commands', { waitUntil: 'networkidle' as const });
// Look for command items
const commandItems = page.getByTestId(/command-item|command-card/).or(
@@ -362,7 +362,7 @@ test.describe('[Commands] - Commands Management Tests', () => {
});
// Navigate AFTER mock is set up
await page.goto('/react/commands', { waitUntil: 'networkidle' as const });
await page.goto('/commands', { waitUntil: 'networkidle' as const });
// Debug: Check if page loaded
const url = page.url();
@@ -405,7 +405,7 @@ test.describe('[Commands] - Commands Management Tests', () => {
// Navigate AFTER mock is set up
// Use domcontentloaded instead of networkidle to avoid hanging on failed requests
await page.goto('/react/commands', { waitUntil: 'networkidle' as const });
await page.goto('/commands', { waitUntil: 'networkidle' as const });
// Wait for React Query to complete retries and set error state
await page.waitForTimeout(3000);
@@ -449,7 +449,7 @@ test.describe('[Commands] - Commands Management Tests', () => {
// Navigate AFTER mock is set up
// Use domcontentloaded instead of networkidle to avoid hanging on failed requests
await page.goto('/react/commands', { waitUntil: 'networkidle' as const });
await page.goto('/commands', { waitUntil: 'networkidle' as const });
// Wait for React Query to complete retries and set error state
await page.waitForTimeout(3000);
@@ -478,7 +478,7 @@ test.describe('[Commands] - Commands Management Tests', () => {
// Navigate AFTER mock is set up
// Use domcontentloaded instead of networkidle to avoid hanging on failed requests
await page.goto('/react/commands', { waitUntil: 'networkidle' as const });
await page.goto('/commands', { waitUntil: 'networkidle' as const });
// Wait for React Query to complete retries and set error state
await page.waitForTimeout(3000);
@@ -507,7 +507,7 @@ test.describe('[Commands] - Commands Management Tests', () => {
// Navigate AFTER mock is set up
// Use domcontentloaded instead of networkidle to avoid hanging on failed requests
await page.goto('/react/commands', { waitUntil: 'networkidle' as const });
await page.goto('/commands', { waitUntil: 'networkidle' as const });
// Wait for React Query to complete retries and set error state
await page.waitForTimeout(3000);
@@ -532,7 +532,7 @@ test.describe('[Commands] - Commands Management Tests', () => {
// Navigate AFTER mock is set up
// Use domcontentloaded instead of networkidle to avoid hanging on failed requests
await page.goto('/react/commands', { waitUntil: 'networkidle' as const });
await page.goto('/commands', { waitUntil: 'networkidle' as const });
// Wait for timeout handling
await page.waitForTimeout(5000);

2
ccw/frontend/tests/e2e/mcp.spec.ts
View File

@@ -15,7 +15,7 @@ test.describe('[MCP] - MCP Management Tests', () => {
const monitoring = setupEnhancedMonitoring(page);
// Navigate to MCP settings page
await page.goto('/react/settings/mcp', { waitUntil: 'domcontentloaded' as const });
await page.goto('/settings/mcp', { waitUntil: 'domcontentloaded' as const });
// Look for MCP servers list container
const serversList = page.getByTestId('mcp-servers-list').or(

2
ccw/frontend/tests/e2e/memory.spec.ts
View File

@@ -15,7 +15,7 @@ test.describe('[Memory] - Memory Management Tests', () => {
const monitoring = setupEnhancedMonitoring(page);
// Navigate to memory page
await page.goto('/react/memory', { waitUntil: 'domcontentloaded' as const });
await page.goto('/memory', { waitUntil: 'domcontentloaded' as const });
// Look for memories list container
const memoriesList = page.getByTestId('memories-list').or(

2
ccw/frontend/tests/e2e/orchestrator.spec.ts
View File

@@ -42,7 +42,7 @@ test.describe('[Orchestrator] - Workflow Canvas Tests', () => {
}
});
await page.goto('/react/orchestrator', { waitUntil: 'domcontentloaded' as const });
await page.goto('/orchestrator', { waitUntil: 'domcontentloaded' as const });
});
test('L3.01 - Canvas loads and displays nodes', async ({ page }) => {

22
ccw/frontend/tests/e2e/sessions-crud.spec.ts
View File

@@ -15,7 +15,7 @@ test.describe('[Sessions CRUD] - Session Management Tests', () => {
const monitoring = setupEnhancedMonitoring(page);
// Navigate to sessions page
await page.goto('/react/sessions', { waitUntil: 'domcontentloaded' as const });
await page.goto('/sessions', { waitUntil: 'domcontentloaded' as const });
// Look for sessions list container
const sessionsList = page.getByTestId('sessions-list').or(
@@ -49,7 +49,7 @@ test.describe('[Sessions CRUD] - Session Management Tests', () => {
const monitoring = setupEnhancedMonitoring(page);
// Navigate to sessions page
await page.goto('/react/sessions', { waitUntil: 'domcontentloaded' as const });
await page.goto('/sessions', { waitUntil: 'domcontentloaded' as const });
// Look for create session button
const createButton = page.getByRole('button', { name: /create|new|add session/i }).or(
@@ -103,7 +103,7 @@ test.describe('[Sessions CRUD] - Session Management Tests', () => {
const monitoring = setupEnhancedMonitoring(page);
// Navigate to sessions page
await page.goto('/react/sessions', { waitUntil: 'domcontentloaded' as const });
await page.goto('/sessions', { waitUntil: 'domcontentloaded' as const });
// Look for existing session
const sessionItems = page.getByTestId(/session-item|session-card/).or(
@@ -145,7 +145,7 @@ test.describe('[Sessions CRUD] - Session Management Tests', () => {
const monitoring = setupEnhancedMonitoring(page);
// Navigate to sessions page
await page.goto('/react/sessions', { waitUntil: 'domcontentloaded' as const });
await page.goto('/sessions', { waitUntil: 'domcontentloaded' as const });
// Look for existing session
const sessionItems = page.getByTestId(/session-item|session-card/).or(
@@ -208,7 +208,7 @@ test.describe('[Sessions CRUD] - Session Management Tests', () => {
const monitoring = setupEnhancedMonitoring(page);
// Navigate to sessions page
await page.goto('/react/sessions', { waitUntil: 'domcontentloaded' as const });
await page.goto('/sessions', { waitUntil: 'domcontentloaded' as const });
// Look for existing session
const sessionItems = page.getByTestId(/session-item|session-card/).or(
@@ -255,7 +255,7 @@ test.describe('[Sessions CRUD] - Session Management Tests', () => {
const monitoring = setupEnhancedMonitoring(page);
// Navigate to sessions page
await page.goto('/react/sessions', { waitUntil: 'domcontentloaded' as const });
await page.goto('/sessions', { waitUntil: 'domcontentloaded' as const });
// Look for existing session
const sessionItems = page.getByTestId(/session-item|session-card/).or(
@@ -302,7 +302,7 @@ test.describe('[Sessions CRUD] - Session Management Tests', () => {
const monitoring = setupEnhancedMonitoring(page);
// Navigate to sessions page
await page.goto('/react/sessions', { waitUntil: 'domcontentloaded' as const });
await page.goto('/sessions', { waitUntil: 'domcontentloaded' as const });
// Get initial session count
const sessionItems = page.getByTestId(/session-item|session-card/).or(
@@ -353,7 +353,7 @@ test.describe('[Sessions CRUD] - Session Management Tests', () => {
});
// Navigate to sessions page to trigger API call
await page.goto('/react/sessions', { waitUntil: 'domcontentloaded' as const });
await page.goto('/sessions', { waitUntil: 'domcontentloaded' as const });
// Look for error indicator - SessionsPage shows "Failed to load data"
const errorIndicator = page.getByText(/Failed to load data|failed|加载失败/i).or(
@@ -379,7 +379,7 @@ test.describe('[Sessions CRUD] - Session Management Tests', () => {
const monitoring = setupEnhancedMonitoring(page);
// Navigate to sessions page
await page.goto('/react/sessions', { waitUntil: 'domcontentloaded' as const });
await page.goto('/sessions', { waitUntil: 'domcontentloaded' as const });
// Get language switcher
const languageSwitcher = page.getByRole('combobox', { name: /select language|language/i }).first();
@@ -411,7 +411,7 @@ test.describe('[Sessions CRUD] - Session Management Tests', () => {
const monitoring = setupEnhancedMonitoring(page);
// Navigate to sessions page
await page.goto('/react/sessions', { waitUntil: 'domcontentloaded' as const });
await page.goto('/sessions', { waitUntil: 'domcontentloaded' as const });
// Look for existing session
const sessionItems = page.getByTestId(/session-item|session-card/).or(
@@ -566,7 +566,7 @@ test.describe('[Sessions CRUD] - Session Management Tests', () => {
});
// Navigate to a non-existent session
await page.goto('/react/sessions/nonexistent-session-id', { waitUntil: 'domcontentloaded' as const });
await page.goto('/sessions/nonexistent-session-id', { waitUntil: 'domcontentloaded' as const });
// Wait for error to appear
await page.waitForTimeout(1000);

34
ccw/frontend/tests/e2e/skills.spec.ts
View File

@@ -9,14 +9,14 @@ import { setupEnhancedMonitoring, switchLanguageAndVerify } from './helpers/i18n
test.describe('[Skills] - Skills Management Tests', () => {
test.beforeEach(async ({ page }) => {
// Navigate to skills page directly and wait for full load
await page.goto('/react/skills', { waitUntil: 'networkidle' as const });
await page.goto('/skills', { waitUntil: 'networkidle' as const });
});
test('L3.1 - should display skills list', async ({ page }) => {
const monitoring = setupEnhancedMonitoring(page);
// Navigate to skills page
await page.goto('/react/skills', { waitUntil: 'networkidle' as const });
await page.goto('/skills', { waitUntil: 'networkidle' as const });
// Look for skills list container
const skillsList = page.getByTestId('skills-list').or(
@@ -43,7 +43,7 @@ test.describe('[Skills] - Skills Management Tests', () => {
const monitoring = setupEnhancedMonitoring(page);
// Navigate to skills page
await page.goto('/react/skills', { waitUntil: 'networkidle' as const });
await page.goto('/skills', { waitUntil: 'networkidle' as const });
// Look for skill items
const skillItems = page.getByTestId(/skill-item|skill-card/).or(
@@ -90,7 +90,7 @@ test.describe('[Skills] - Skills Management Tests', () => {
const monitoring = setupEnhancedMonitoring(page);
// Navigate to skills page
await page.goto('/react/skills', { waitUntil: 'networkidle' as const });
await page.goto('/skills', { waitUntil: 'networkidle' as const });
// Look for skill items
const skillItems = page.getByTestId(/skill-item|skill-card/).or(
@@ -124,7 +124,7 @@ test.describe('[Skills] - Skills Management Tests', () => {
const monitoring = setupEnhancedMonitoring(page);
// Navigate to skills page
await page.goto('/react/skills', { waitUntil: 'networkidle' as const });
await page.goto('/skills', { waitUntil: 'networkidle' as const });
// Look for skill items
const skillItems = page.getByTestId(/skill-item|skill-card/).or(
@@ -157,7 +157,7 @@ test.describe('[Skills] - Skills Management Tests', () => {
const monitoring = setupEnhancedMonitoring(page);
// Navigate to skills page
await page.goto('/react/skills', { waitUntil: 'networkidle' as const });
await page.goto('/skills', { waitUntil: 'networkidle' as const });
// Look for category filter
const categoryFilter = page.getByRole('combobox', { name: /category|filter/i }).or(
@@ -192,7 +192,7 @@ test.describe('[Skills] - Skills Management Tests', () => {
const monitoring = setupEnhancedMonitoring(page);
// Navigate to skills page
await page.goto('/react/skills', { waitUntil: 'networkidle' as const });
await page.goto('/skills', { waitUntil: 'networkidle' as const });
// Look for search input
const searchInput = page.getByRole('textbox', { name: /search|find/i }).or(
@@ -228,7 +228,7 @@ test.describe('[Skills] - Skills Management Tests', () => {
const monitoring = setupEnhancedMonitoring(page);
// Navigate to skills page
await page.goto('/react/skills', { waitUntil: 'networkidle' as const });
await page.goto('/skills', { waitUntil: 'networkidle' as const });
// Look for skill items
const skillItems = page.getByTestId(/skill-item|skill-card/).or(
@@ -261,7 +261,7 @@ test.describe('[Skills] - Skills Management Tests', () => {
const monitoring = setupEnhancedMonitoring(page);
// Navigate to skills page
await page.goto('/react/skills', { waitUntil: 'networkidle' as const });
await page.goto('/skills', { waitUntil: 'networkidle' as const });
// Get language switcher
const languageSwitcher = page.getByRole('combobox', { name: /select language|language/i }).first();
@@ -286,7 +286,7 @@ test.describe('[Skills] - Skills Management Tests', () => {
const monitoring = setupEnhancedMonitoring(page);
// Navigate to skills page
await page.goto('/react/skills', { waitUntil: 'networkidle' as const });
await page.goto('/skills', { waitUntil: 'networkidle' as const });
// Look for skill items
const skillItems = page.getByTestId(/skill-item|skill-card/).or(
@@ -328,7 +328,7 @@ test.describe('[Skills] - Skills Management Tests', () => {
});
// Navigate to skills page
await page.goto('/react/skills', { waitUntil: 'networkidle' as const });
await page.goto('/skills', { waitUntil: 'networkidle' as const });
// Try to toggle a skill
const skillItems = page.getByTestId(/skill-item|skill-card/).or(
@@ -380,7 +380,7 @@ test.describe('[Skills] - Skills Management Tests', () => {
});
});
await page.goto('/react/skills', { waitUntil: 'networkidle' as const });
await page.goto('/skills', { waitUntil: 'networkidle' as const });
// Try to toggle a skill (should fail with 400)
const skillItems = page.getByTestId(/skill-item|skill-card/).or(
@@ -424,7 +424,7 @@ test.describe('[Skills] - Skills Management Tests', () => {
});
});
await page.goto('/react/skills', { waitUntil: 'networkidle' as const });
await page.goto('/skills', { waitUntil: 'networkidle' as const });
// Wait for React Query to complete retries and set error state
await page.waitForTimeout(3000);
@@ -453,7 +453,7 @@ test.describe('[Skills] - Skills Management Tests', () => {
});
});
await page.goto('/react/skills', { waitUntil: 'networkidle' as const });
await page.goto('/skills', { waitUntil: 'networkidle' as const });
// Wait for React Query to complete retries and set error state
await page.waitForTimeout(3000);
@@ -483,7 +483,7 @@ test.describe('[Skills] - Skills Management Tests', () => {
});
// Try to access a non-existent skill
await page.goto('/react/skills/nonexistent-skill-id', { waitUntil: 'domcontentloaded' as const });
await page.goto('/skills/nonexistent-skill-id', { waitUntil: 'domcontentloaded' as const });
// Wait for React Query to complete retries and set error state
await page.waitForTimeout(3000);
@@ -512,7 +512,7 @@ test.describe('[Skills] - Skills Management Tests', () => {
});
});
await page.goto('/react/skills', { waitUntil: 'networkidle' as const });
await page.goto('/skills', { waitUntil: 'networkidle' as const });
// Wait for React Query to complete retries and set error state
await page.waitForTimeout(3000);
@@ -537,7 +537,7 @@ test.describe('[Skills] - Skills Management Tests', () => {
// Never fulfill - simulate timeout
});
await page.goto('/react/skills', { waitUntil: 'networkidle' as const });
await page.goto('/skills', { waitUntil: 'networkidle' as const });
// Wait for timeout handling
await page.waitForTimeout(5000);

4
ccw/frontend/vite.config.ts
View File

@@ -8,9 +8,9 @@ const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)
// Get base path from environment variable
// Default to /react/ for development (CCW server proxies /react/* to Vite)
// Default to / for development (CCW server proxies /* to Vite)
// Can be overridden by VITE_BASE_URL environment variable
const basePath = process.env.VITE_BASE_URL || '/react/'
const basePath = process.env.VITE_BASE_URL || '/'
// Backend target for Vite proxy (used when directly opening the Vite dev server port).
// In `ccw view`, this is set to the dashboard server port so /api and /ws route correctly.