Refactor API calls to use csrfFetch for enhanced security across multiple views, including loop-monitor, mcp-manager, memory, prompt-history, rules-manager, session-detail, and skills-manager. Additionally, add Phase 1 and Phase 2 documentation for session initialization and orchestration loop in the ccw-loop-b skill.

ccw/frontend/src/components/charts/ActivityLineChart.tsx

@@ -84,6 +84,7 @@ export function ActivityLineChart({
       className={`w-full ${className}`}
       role="img"
       aria-label="Activity timeline line chart showing sessions and tasks over time"
+      data-testid="activity-line-chart"
     >
       {title && <h3 className="text-lg font-semibold text-foreground mb-4">{title}</h3>}
       <ResponsiveContainer width="100%" height={height}>

ccw/frontend/src/components/charts/TaskTypeBarChart.tsx

@@ -84,6 +84,7 @@ export function TaskTypeBarChart({
       className={`w-full ${className}`}
       role="img"
       aria-label="Task type bar chart showing distribution of task types"
+      data-testid="task-type-bar-chart"
     >
       {title && <h3 className="text-lg font-semibold text-foreground mb-4">{title}</h3>}
       <ResponsiveContainer width="100%" height={height}>

ccw/frontend/src/components/charts/WorkflowStatusPieChart.tsx

@@ -74,6 +74,7 @@ export function WorkflowStatusPieChart({
       className={`w-full ${className}`}
       role="img"
       aria-label="Workflow status pie chart showing distribution of workflow statuses"
+      data-testid="workflow-status-pie-chart"
     >
       {title && <h3 className="text-lg font-semibold text-foreground mb-4">{title}</h3>}
       <ResponsiveContainer width="100%" height={height}>

ccw/frontend/src/components/dashboard/DashboardGridContainer.tsx

@@ -63,6 +63,7 @@ export function DashboardGridContainer({
       draggableHandle=".drag-handle"
       containerPadding={[0, 0]}
       margin={[16, 16]}
+      data-testid="dashboard-grid-container"
     >
       {children}
     </ResponsiveGridLayout>