Refactor workflow-lite-planex documentation to standardize phase naming and improve clarity

- Updated phase references in SKILL.md and 01-lite-plan.md to use "LP-Phase" prefix for consistency.
- Added critical context isolation note in 01-lite-plan.md to clarify phase invocation rules.
- Enhanced execution process descriptions to reflect updated phase naming conventions.

Improve error handling in frontend routing

- Introduced ChunkErrorBoundary component to handle lazy-loaded chunk load failures.
- Wrapped lazy-loaded routes with error boundary and suspense for better user experience.
- Created PageSkeleton component for loading states in lazy-loaded routes.

Sanitize header values in notification routes

- Added regex validation for header values to prevent XSS attacks by allowing only printable ASCII characters.

Enhance mobile responsiveness in documentation styles

- Updated CSS breakpoints to use custom properties for better maintainability.
- Improved layout styles across various components to ensure consistent behavior on mobile devices.

ccw/frontend/src/components/ChunkErrorBoundary.tsx

@@ -0,0 +1,157 @@
+// ========================================
+// Chunk Error Boundary
+// ========================================
+// Error boundary for handling lazy-loaded chunk load failures
+// Catches network failures, missing chunks, and other module loading errors
+
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+import { Button } from '@/components/ui/Button';
+
+interface ChunkErrorBoundaryProps {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface ChunkErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: ErrorInfo | null;
+}
+
+/**
+ * Error displayed when a chunk fails to load
+ */
+function ChunkLoadError({ error, onRetry }: { error: Error | null; onRetry: () => void }) {
+  return (
+    <div className="flex items-center justify-center h-full p-8">
+      <div className="text-center max-w-md">
+        <div className="mb-4">
+          <svg
+            className="w-16 h-16 mx-auto text-destructive"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+            />
+          </svg>
+        </div>
+        <h2 className="text-xl font-semibold mb-2">Failed to Load Page</h2>
+        <p className="text-muted-foreground mb-6">
+          {error?.message.includes('ChunkLoadError')
+            ? 'A network error occurred while loading this page. Please check your connection and try again.'
+            : 'An error occurred while loading this page. Please try refreshing.'}
+        </p>
+        <div className="flex gap-3 justify-center">
+          <Button onClick={onRetry} variant="default">
+            Try Again
+          </Button>
+          <Button onClick={() => window.location.href = '/'} variant="outline">
+            Go Home
+          </Button>
+        </div>
+        {error && (
+          <details className="mt-4 text-left">
+            <summary className="cursor-pointer text-sm text-muted-foreground hover:text-foreground">
+              Technical details
+            </summary>
+            <pre className="mt-2 text-xs bg-muted p-2 rounded overflow-auto max-h-32">
+              {error.toString()}
+            </pre>
+          </details>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Error boundary class component for catching chunk load errors
+ *
+ * Wraps lazy-loaded route components to gracefully handle:
+ * - Network failures during chunk fetch
+ * - Missing or outdated chunk files
+ * - Browser caching issues
+ */
+export class ChunkErrorBoundary extends Component<ChunkErrorBoundaryProps, ChunkErrorBoundaryState> {
+  constructor(props: ChunkErrorBoundaryProps) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error): Partial<ChunkErrorBoundaryState> {
+    return {
+      hasError: true,
+      error,
+    };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    // Log error for debugging
+    console.error('[ChunkErrorBoundary] Chunk load error:', error, errorInfo);
+
+    this.setState({
+      errorInfo,
+    });
+
+    // Optionally send error to monitoring service
+    if (typeof window !== 'undefined' && (window as any).reportError) {
+      (window as any).reportError(error);
+    }
+  }
+
+  handleRetry = (): void => {
+    // Reset error state and retry
+    this.setState({
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    });
+
+    // Force reload the current route to retry chunk loading
+    window.location.reload();
+  };
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      // Use custom fallback if provided
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      // Default error UI
+      return <ChunkLoadError error={this.state.error} onRetry={this.handleRetry} />;
+    }
+
+    return this.props.children;
+  }
+}
+
+/**
+ * HOC to wrap a component with ChunkErrorBoundary
+ *
+ * Usage:
+ * ```tsx
+ * const SafePage = withChunkErrorBoundary(MyPage);
+ * ```
+ */
+export function withChunkErrorBoundary<P extends object>(
+  Component: React.ComponentType<P>,
+  fallback?: ReactNode
+): React.ComponentType<P> {
+  return function WrappedComponent(props: P) {
+    return (
+      <ChunkErrorBoundary fallback={fallback}>
+        <Component {...props} />
+      </ChunkErrorBoundary>
+    );
+  };
+}

ccw/frontend/src/components/PageSkeleton.tsx

@@ -0,0 +1,12 @@
+// ========================================
+// Page Skeleton
+// ========================================
+// Loading fallback component for lazy-loaded routes
+
+export function PageSkeleton() {
+  return (
+    <div className="flex items-center justify-center h-full">
+      <div className="animate-pulse text-muted-foreground">Loading...</div>
+    </div>
+  );
+}

ccw/frontend/src/router.tsx

@@ -6,6 +6,8 @@
 import { createBrowserRouter, RouteObject, Navigate } from 'react-router-dom';
 import { lazy, Suspense } from 'react';
 import { AppShell } from '@/components/layout';
+import { ChunkErrorBoundary } from '@/components/ChunkErrorBoundary';
+import { PageSkeleton } from '@/components/PageSkeleton';
 
 // Import HomePage directly (no lazy - needed immediately)
 import { HomePage } from '@/pages/HomePage';
@@ -42,12 +44,17 @@ const TerminalDashboardPage = lazy(() => import('@/pages/TerminalDashboardPage')
 const AnalysisPage = lazy(() => import('@/pages/AnalysisPage').then(m => ({ default: m.AnalysisPage })));
 const SpecsSettingsPage = lazy(() => import('@/pages/SpecsSettingsPage').then(m => ({ default: m.SpecsSettingsPage })));
 
-// Loading fallback component for lazy-loaded routes
-function PageSkeleton() {
+/**
+ * Helper to wrap lazy-loaded components with error boundary and suspense
+ * Catches chunk load failures and provides retry mechanism
+ */
+function withErrorHandling(element: React.ReactElement) {
   return (
-    <div className="flex items-center justify-center h-full">
-      <div className="animate-pulse text-muted-foreground">Loading...</div>
-    </div>
+    <ChunkErrorBoundary>
+      <Suspense fallback={<PageSkeleton />}>
+        {element}
+      </Suspense>
+    </ChunkErrorBoundary>
   );
 }
 
@@ -58,11 +65,7 @@ function PageSkeleton() {
 const routes: RouteObject[] = [
   {
     path: 'cli-sessions/share',
-    element: (
-      <Suspense fallback={<PageSkeleton />}>
-        <CliSessionSharePage />
-      </Suspense>
-    ),
+    element: withErrorHandling(<CliSessionSharePage />),
   },
   {
     path: '/',
@@ -74,68 +77,36 @@ const routes: RouteObject[] = [
       },
       {
         path: 'sessions',
-        element: (
-          <Suspense fallback={<PageSkeleton />}>
-            <SessionsPage />
-          </Suspense>
-        ),
+        element: withErrorHandling(<SessionsPage />),
       },
       {
         path: 'sessions/:sessionId',
-        element: (
-          <Suspense fallback={<PageSkeleton />}>
-            <SessionDetailPage />
-          </Suspense>
-        ),
+        element: withErrorHandling(<SessionDetailPage />),
       },
       {
         path: 'sessions/:sessionId/fix',
-        element: (
-          <Suspense fallback={<PageSkeleton />}>
-            <FixSessionPage />
-          </Suspense>
-        ),
+        element: withErrorHandling(<FixSessionPage />),
       },
       {
         path: 'sessions/:sessionId/review',
-        element: (
-          <Suspense fallback={<PageSkeleton />}>
-            <ReviewSessionPage />
-          </Suspense>
-        ),
+        element: withErrorHandling(<ReviewSessionPage />),
       },
       {
         path: 'lite-tasks',
-        element: (
-          <Suspense fallback={<PageSkeleton />}>
-            <LiteTasksPage />
-          </Suspense>
-        ),
+        element: withErrorHandling(<LiteTasksPage />),
       },
       // /lite-tasks/:sessionId route removed - now using TaskDrawer
       {
         path: 'project',
-        element: (
-          <Suspense fallback={<PageSkeleton />}>
-            <ProjectOverviewPage />
-          </Suspense>
-        ),
+        element: withErrorHandling(<ProjectOverviewPage />),
       },
       {
         path: 'history',
-        element: (
-          <Suspense fallback={<PageSkeleton />}>
-            <HistoryPage />
-          </Suspense>
-        ),
+        element: withErrorHandling(<HistoryPage />),
       },
       {
         path: 'orchestrator',
-        element: (
-          <Suspense fallback={<PageSkeleton />}>
-            <OrchestratorPage />
-          </Suspense>
-        ),
+        element: withErrorHandling(<OrchestratorPage />),
       },
       {
         path: 'loops',
@@ -143,19 +114,11 @@ const routes: RouteObject[] = [
       },
       {
         path: 'cli-viewer',
-        element: (
-          <Suspense fallback={<PageSkeleton />}>
-            <CliViewerPage />
-          </Suspense>
-        ),
+        element: withErrorHandling(<CliViewerPage />),
       },
       {
         path: 'issues',
-        element: (
-          <Suspense fallback={<PageSkeleton />}>
-            <IssueHubPage />
-          </Suspense>
-        ),
+        element: withErrorHandling(<IssueHubPage />),
       },
       // Legacy routes - redirect to hub with tab parameter
       {
@@ -168,147 +131,75 @@ const routes: RouteObject[] = [
       },
       {
         path: 'skills',
-        element: (
-          <Suspense fallback={<PageSkeleton />}>
-            <SkillsManagerPage />
-          </Suspense>
-        ),
+        element: withErrorHandling(<SkillsManagerPage />),
       },
       {
         path: 'commands',
-        element: (
-          <Suspense fallback={<PageSkeleton />}>
-            <CommandsManagerPage />
-          </Suspense>
-        ),
+        element: withErrorHandling(<CommandsManagerPage />),
       },
       {
         path: 'memory',
-        element: (
-          <Suspense fallback={<PageSkeleton />}>
-            <MemoryPage />
-          </Suspense>
-        ),
+        element: withErrorHandling(<MemoryPage />),
       },
       {
         path: 'prompts',
-        element: (
-          <Suspense fallback={<PageSkeleton />}>
-            <PromptHistoryPage />
-          </Suspense>
-        ),
+        element: withErrorHandling(<PromptHistoryPage />),
       },
       {
         path: 'settings',
-        element: (
-          <Suspense fallback={<PageSkeleton />}>
-            <SettingsPage />
-          </Suspense>
-        ),
+        element: withErrorHandling(<SettingsPage />),
       },
       {
         path: 'settings/mcp',
-        element: (
-          <Suspense fallback={<PageSkeleton />}>
-            <McpManagerPage />
-          </Suspense>
-        ),
+        element: withErrorHandling(<McpManagerPage />),
       },
       {
         path: 'settings/endpoints',
-        element: (
-          <Suspense fallback={<PageSkeleton />}>
-            <EndpointsPage />
-          </Suspense>
-        ),
+        element: withErrorHandling(<EndpointsPage />),
       },
       {
         path: 'settings/installations',
-        element: (
-          <Suspense fallback={<PageSkeleton />}>
-            <InstallationsPage />
-          </Suspense>
-        ),
+        element: withErrorHandling(<InstallationsPage />),
       },
       {
         path: 'settings/rules',
-        element: (
-          <Suspense fallback={<PageSkeleton />}>
-            <RulesManagerPage />
-          </Suspense>
-        ),
+        element: withErrorHandling(<RulesManagerPage />),
       },
       {
         path: 'settings/specs',
-        element: (
-          <Suspense fallback={<PageSkeleton />}>
-            <SpecsSettingsPage />
-          </Suspense>
-        ),
+        element: withErrorHandling(<SpecsSettingsPage />),
       },
       {
         path: 'settings/codexlens',
-        element: (
-          <Suspense fallback={<PageSkeleton />}>
-            <CodexLensManagerPage />
-          </Suspense>
-        ),
+        element: withErrorHandling(<CodexLensManagerPage />),
       },
       {
         path: 'api-settings',
-        element: (
-          <Suspense fallback={<PageSkeleton />}>
-            <ApiSettingsPage />
-          </Suspense>
-        ),
+        element: withErrorHandling(<ApiSettingsPage />),
       },
       {
         path: 'hooks',
-        element: (
-          <Suspense fallback={<PageSkeleton />}>
-            <HookManagerPage />
-          </Suspense>
-        ),
+        element: withErrorHandling(<HookManagerPage />),
       },
       {
         path: 'explorer',
-        element: (
-          <Suspense fallback={<PageSkeleton />}>
-            <ExplorerPage />
-          </Suspense>
-        ),
+        element: withErrorHandling(<ExplorerPage />),
       },
       {
         path: 'graph',
-        element: (
-          <Suspense fallback={<PageSkeleton />}>
-            <GraphExplorerPage />
-          </Suspense>
-        ),
+        element: withErrorHandling(<GraphExplorerPage />),
       },
       {
         path: 'teams',
-        element: (
-          <Suspense fallback={<PageSkeleton />}>
-            <TeamPage />
-          </Suspense>
-        ),
+        element: withErrorHandling(<TeamPage />),
       },
       {
         path: 'analysis',
-        element: (
-          <Suspense fallback={<PageSkeleton />}>
-            <AnalysisPage />
-          </Suspense>
-        ),
+        element: withErrorHandling(<AnalysisPage />),
       },
       {
         path: 'terminal-dashboard',
-        element: (
-          <Suspense fallback={<PageSkeleton />}>
-            <TerminalDashboardPage />
-          </Suspense>
-        ),
+        element: withErrorHandling(<TerminalDashboardPage />),
       },
       {
         path: 'skill-hub',
@@ -317,11 +208,7 @@ const routes: RouteObject[] = [
       // Catch-all route for 404
       {
         path: '*',
-        element: (
-          <Suspense fallback={<PageSkeleton />}>
-            <NotFoundPage />
-          </Suspense>
-        ),
+        element: withErrorHandling(<NotFoundPage />),
       },
     ],
   },