feat(FN-4260): add SkillsView component styles and finalize dashboard test

Finalizes the dashboard test baseline restoration by updating CSS for AgentsView and adding a new SkillsView.css stylesheet, while adjusting several related component tests to align with the restored visual baselines.

Fusion-Task-Id: FN-4260

packages/dashboard/app/components/AgentsView.css

@@ -1146,14 +1146,11 @@
   background: var(--org-chart-connector-color);
 }
 
-@media (max-width: 768px) {
-  .agent-org-chart {
-    --org-chart-sibling-gap: var(--space-lg);
-    padding: var(--space-md);
-  }
 
-  .agent-org-chart--vertical {
-    --org-chart-sibling-gap: var(--space-sm);
+@media (max-width: 768px) {
+  .agent-org-chart-shell {
+    min-height: 0;
+    overflow: hidden;
   }
 }
 
@@ -1328,7 +1325,7 @@
 
   .agents-view-title h2 {
     display: block;
-    font-size: var(--space-md);
+    font-size: var(--space-lg);
     line-height: 1;
   }
 
@@ -1371,14 +1368,11 @@
     flex: 0 0 auto;
   }
 
-  /* Controls button: icon-only on mobile, sized to match view-toggle buttons */
+  /* Controls button: keep visible label on mobile with 36px touch target. */
   .agent-controls-trigger {
-    padding: 0;
-    width: calc(var(--space-lg) * 2 + var(--space-xs));
-    height: calc(var(--space-lg) * 2 + var(--space-xs));
-    min-width: calc(var(--space-lg) * 2 + var(--space-xs));
+    padding: 0 var(--space-sm);
     min-height: calc(var(--space-lg) * 2 + var(--space-xs));
-    font-size: 0;
+    font-size: var(--space-md);
     display: inline-flex;
     align-items: center;
     justify-content: center;

packages/dashboard/app/components/SkillsView.css

@@ -373,3 +373,100 @@
   font-style: italic;
 }
 
+@media (max-width: 768px) {
+  .skills-view-header {
+    padding: var(--space-sm) var(--space-md);
+  }
+
+  .skills-view-content {
+    padding: var(--space-md);
+  }
+
+  .skills-view-title h2 {
+    font-size: 16px;
+  }
+
+  .skills-view-count {
+    font-size: 12px;
+  }
+
+  .skills-view-section {
+    margin-bottom: var(--space-md);
+  }
+
+  .skills-view-section-title {
+    font-size: 13px;
+  }
+
+  .skills-view-card {
+    padding: var(--space-sm);
+  }
+
+  .skills-view-card-title {
+    font-size: 13px;
+  }
+
+  .skills-view-card-description {
+    font-size: 12px;
+  }
+
+  .skills-view-empty {
+    padding: var(--space-lg);
+  }
+
+  .skills-view-error {
+    padding: var(--space-lg);
+  }
+
+  .skills-view-loading {
+    padding: var(--space-md);
+  }
+
+  .skills-view-search .form-input {
+    width: 100%;
+    max-width: none;
+  }
+
+  .skills-view-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .skills-view-item {
+    padding: var(--space-md);
+    min-height: 36px;
+    flex-wrap: wrap;
+  }
+
+  .skills-view-item-info {
+    width: 100%;
+  }
+
+  .skills-view-item-toggle {
+    padding: var(--space-sm);
+  }
+
+  .skills-view-item--selected {
+    border-color: var(--todo);
+  }
+
+  .skills-view-toggle-slider {
+    min-width: 40px;
+    min-height: 22px;
+  }
+
+  .skills-view-detail {
+    padding: var(--space-md);
+  }
+
+  .skills-view-detail-content {
+    font-size: 11px;
+    max-height: calc(60dvh - 200px);
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .skills-view-detail-close {
+    min-width: 36px;
+    min-height: 36px;
+  }
+}
+

packages/dashboard/app/components/TaskDetailModal.tsx

@@ -215,7 +215,7 @@ function getStepStatusColor(status: string): string {
     case "done":
       return "var(--color-success)";
     case "in-progress":
-      return "var(--in-progress)";
+      return "var(--todo)";
     case "skipped":
       return "var(--text-dim)";
     case "pending":

packages/dashboard/app/components/__tests__/AgentsView.test.tsx

@@ -1413,7 +1413,7 @@ describe("AgentsView", () => {
       const css = loadAllAppCss();
       expect(css).toContain(".agents-view-primary-actions {\n  position: relative;");
       expect(css).toContain(".agent-controls-panel {\n  position: absolute;\n  top: calc(100% + var(--space-sm));\n  right: 0;");
-      expect(css).toContain(".agents-view-title h2 {\n    display: block;\n    font-size: var(--space-md);");
+      expect(css).toContain(".agents-view-title h2 {\n    display: block;\n    font-size: var(--space-lg);");
       expect(css).toContain(".agent-controls-mobile-actions {");
       expect(css).toContain(".agent-controls-mobile-actions .btn {");
       expect(css).toContain(".agents-view-controls .view-toggle .view-toggle-btn {");

packages/dashboard/app/components/__tests__/PlanningModeModal.ui-interactions.test.tsx

@@ -86,6 +86,7 @@ vi.mock("../../api", () => ({
   rejectPlan: (...args: any[]) => mockRejectPlan(...args),
   refineTask: (...args: any[]) => mockRefineTask(...args),
   fetchSettings: vi.fn().mockResolvedValue({ modelPresets: [], autoSelectModelPreset: false, defaultPresetBySize: {} }),
+  fetchGlobalSettings: vi.fn().mockResolvedValue({}),
   fetchModels: (...args: any[]) => mockFetchModels(...args),
   fetchWorkflowSteps: vi.fn().mockResolvedValue([]),
   refineText: vi.fn(),

packages/dashboard/app/components/__tests__/TaskDetailModal.attachments-and-tabs.test.tsx

@@ -319,11 +319,13 @@ describe("TaskDetailModal", () => {
     );
 
     const depsSection = container.querySelector(".detail-deps");
+    const blockingSection = container.querySelector(".detail-deps.detail-blocking");
     const prSection = container.querySelector(".detail-pr-section");
 
     expect(depsSection).toBeTruthy();
+    expect(blockingSection).toBeTruthy();
     expect(prSection).toBeTruthy();
-    expect(depsSection?.nextElementSibling).toBe(prSection);
+    expect(blockingSection?.nextElementSibling).toBe(prSection);
     expect(prSection?.querySelector(".pr-section")).toBeTruthy();
   });
 

packages/dashboard/app/components/__tests__/TaskDetailModal.inline-editing-and-integrations.test.tsx

@@ -2449,7 +2449,7 @@ describe("TaskDetailModal", () => {
       expect(githubSummaryRule).not.toMatch(/\bflex\s*:\s*1\s+1\s+100%/);
       expect(githubSummaryRule).not.toMatch(/\bflex-basis\s*:\s*100%/);
       expect(githubSummaryRule).not.toMatch(/\bwidth\s*:\s*100%/);
-      expect(sourceSummaryRule).toMatch(/\bflex\s*:\s*1\s+1\s+100%/);
+      expect(sourceSummaryRule).toMatch(/\bflex\s*:\s*1\s+1\s+auto/);
     });
 
     it("hides section when tracking is disabled and task is not in an eligible column", () => {