feat(FN-1793): merge fusion/fn-1793

.changeset/add-skills-page-styling.md

@@ -0,0 +1,9 @@
+---
+"@gsxdsm/fusion": minor
+---
+
+Add dedicated styling and responsive layout for the Skills page.
+
+- New `.skills-view*` CSS following dashboard view conventions
+- Mobile-responsive skill list and catalog grid
+- Expanded test coverage for CSS classes, search debounce, and error retry

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

@@ -430,4 +430,194 @@ describe("SkillsView", () => {
       expect(onClose).toHaveBeenCalled();
     });
   });
+
+  describe("CSS class assertions", () => {
+    it("renders with .skills-view root class", async () => {
+      render(<SkillsView addToast={mockAddToast} onClose={onClose} />);
+
+      await waitFor(() => {
+        expect(document.querySelector(".skills-view")).toBeTruthy();
+      });
+    });
+
+    it("renders .skills-view-header and .skills-view-content sections", async () => {
+      render(<SkillsView addToast={mockAddToast} onClose={onClose} />);
+
+      await waitFor(() => {
+        expect(document.querySelector(".skills-view-header")).toBeTruthy();
+        expect(document.querySelector(".skills-view-section")).toBeTruthy();
+      });
+    });
+
+    it("renders discovered skills list with .skills-view-item rows", async () => {
+      render(<SkillsView addToast={mockAddToast} onClose={onClose} />);
+
+      await waitFor(() => {
+        const items = document.querySelectorAll(".skills-view-item");
+        expect(items.length).toBeGreaterThanOrEqual(2);
+      });
+    });
+
+    it("renders catalog cards with .skills-view-card class", async () => {
+      render(<SkillsView addToast={mockAddToast} onClose={onClose} />);
+
+      await waitFor(() => {
+        expect(document.querySelectorAll(".skills-view-card").length).toBeGreaterThanOrEqual(2);
+      });
+    });
+
+    it("renders search input with .skills-view-search class", async () => {
+      render(<SkillsView addToast={mockAddToast} onClose={onClose} />);
+
+      await waitFor(() => {
+        expect(document.querySelector(".skills-view-search")).toBeTruthy();
+      });
+    });
+
+    it("renders toggle sliders with .skills-view-toggle-slider class", async () => {
+      render(<SkillsView addToast={mockAddToast} onClose={onClose} />);
+
+      await waitFor(() => {
+        const sliders = document.querySelectorAll(".skills-view-toggle-slider");
+        expect(sliders.length).toBeGreaterThanOrEqual(2);
+      });
+    });
+
+    it("renders catalog grid with .skills-view-grid class", async () => {
+      render(<SkillsView addToast={mockAddToast} onClose={onClose} />);
+
+      await waitFor(() => {
+        expect(document.querySelector(".skills-view-grid")).toBeTruthy();
+      });
+    });
+  });
+
+  describe("catalog search debounce", () => {
+    it("debounces catalog search input", async () => {
+      vi.useFakeTimers();
+      vi.advanceTimersByTime(0); // Initialize fake timers
+
+      render(<SkillsView addToast={mockAddToast} onClose={onClose} />);
+
+      // Wait for initial render and API calls
+      await act(async () => {
+        vi.runAllTimers();
+      });
+      await act(async () => {
+        vi.advanceTimersByTime(100);
+      });
+
+      mockFetchSkillsCatalog.mockClear();
+
+      const searchInput = screen.getByPlaceholderText("Search skills...");
+
+      // Type in the search input
+      fireEvent.change(searchInput, { target: { value: "test" } });
+
+      // Should NOT have called fetchSkillsCatalog yet (debounce not triggered)
+      expect(mockFetchSkillsCatalog).not.toHaveBeenCalled();
+
+      // Advance timers by 300ms (component debounce is ~300ms)
+      await act(async () => {
+        vi.advanceTimersByTime(300);
+      });
+
+      // Now fetchSkillsCatalog should have been called with the search query
+      expect(mockFetchSkillsCatalog).toHaveBeenCalledWith("test", 20, undefined);
+
+      vi.useRealTimers();
+    });
+
+    it("debounces with original query when clearing search", async () => {
+      vi.useFakeTimers();
+      vi.advanceTimersByTime(0); // Initialize fake timers
+
+      render(<SkillsView addToast={mockAddToast} onClose={onClose} />);
+
+      // Wait for initial render and API calls
+      await act(async () => {
+        vi.runAllTimers();
+      });
+      await act(async () => {
+        vi.advanceTimersByTime(100);
+      });
+
+      const searchInput = screen.getByPlaceholderText("Search skills...");
+
+      // Type something and wait for debounce
+      fireEvent.change(searchInput, { target: { value: "test" } });
+      await act(async () => {
+        vi.advanceTimersByTime(300);
+      });
+
+      mockFetchSkillsCatalog.mockClear();
+
+      // Clear the search
+      fireEvent.change(searchInput, { target: { value: "" } });
+      await act(async () => {
+        vi.advanceTimersByTime(300);
+      });
+
+      // Should call with empty query
+      expect(mockFetchSkillsCatalog).toHaveBeenCalledWith("", 20, undefined);
+
+      vi.useRealTimers();
+    });
+  });
+
+  describe("error-state retry", () => {
+    it("retry button is displayed when catalog fetch fails", async () => {
+      mockFetchSkillsCatalog.mockRejectedValue({
+        error: "Service unavailable",
+        code: "upstream_http_error",
+      });
+
+      render(<SkillsView addToast={mockAddToast} onClose={onClose} />);
+
+      await waitFor(() => {
+        expect(screen.getByText("Try Again")).toBeTruthy();
+      });
+    });
+
+    it("error message is displayed when catalog fetch fails", async () => {
+      mockFetchSkillsCatalog.mockRejectedValue(new Error("Network error"));
+
+      render(<SkillsView addToast={mockAddToast} onClose={onClose} />);
+
+      await waitFor(() => {
+        expect(screen.getByText(/unavailable|error|failed/i)).toBeTruthy();
+      });
+    });
+
+    it("success state after retry clears error", async () => {
+      // Use a custom mock function that rejects on first call and resolves on second
+      let callCount = 0;
+      mockFetchSkillsCatalog.mockImplementation(() => {
+        callCount++;
+        if (callCount === 1) {
+          return Promise.reject(new Error("Service unavailable"));
+        }
+        return Promise.resolve({
+          entries: mockCatalogEntries,
+          auth: { mode: "unauthenticated", tokenPresent: false, fallbackUsed: false },
+        });
+      });
+
+      render(<SkillsView addToast={mockAddToast} onClose={onClose} />);
+
+      await waitFor(() => {
+        expect(screen.getByText("Try Again")).toBeTruthy();
+      });
+
+      // Click retry
+      await act(async () => {
+        fireEvent.click(screen.getByText("Try Again"));
+      });
+
+      await waitFor(() => {
+        // Catalog should now show entries
+        expect(screen.getByText("Test Skill")).toBeTruthy();
+      });
+    });
+  });
 });

packages/dashboard/app/components/__tests__/skills-view-mobile.test.tsx

@@ -0,0 +1,97 @@
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "fs";
+import { resolve } from "path";
+
+function extractRuleBlock(css: string, selector: string): string {
+  const escapedSelector = selector.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const match = css.match(new RegExp(`${escapedSelector}\\s*\\{([^}]*)\\}`));
+  return match?.[1] ?? "";
+}
+
+function extractMobileMediaBlocks(content: string): string {
+  const blocks: string[] = [];
+  const regex = /@media\s*\(\s*max-width:\s*768px\s*\)\s*\{/g;
+  let match;
+
+  while ((match = regex.exec(content)) !== null) {
+    const startIdx = match.index + match[0].length;
+    let braceCount = 1;
+    let endIdx = startIdx;
+
+    while (braceCount > 0 && endIdx < content.length) {
+      if (content[endIdx] === "{") braceCount += 1;
+      if (content[endIdx] === "}") braceCount -= 1;
+      endIdx += 1;
+    }
+
+    if (braceCount === 0) {
+      blocks.push(content.slice(startIdx, endIdx - 1));
+    }
+  }
+
+  return blocks.join("\n");
+}
+
+describe("skills-view mobile css", () => {
+  const cssPath = resolve(__dirname, "../../styles.css");
+  const cssContent = readFileSync(cssPath, "utf-8");
+  const mobileMediaBlock = extractMobileMediaBlocks(cssContent);
+
+  it("defines .skills-view-header in mobile block with reduced padding", () => {
+    expect(mobileMediaBlock).toContain(".skills-view-header");
+    const block = extractRuleBlock(cssContent, ".skills-view-header");
+    // Base has padding: var(--space-lg) 20px; mobile should override
+    expect(block).toMatch(/padding:\s*var\(--space-sm\)\s+var\(--space-md\)/);
+  });
+
+  it("defines .skills-view-title h2 with smaller font on mobile", () => {
+    expect(mobileMediaBlock).toContain(".skills-view-title h2");
+    const block = extractRuleBlock(cssContent, ".skills-view-title h2");
+    expect(block).toContain("font-size: 16px");
+  });
+
+  it("defines .skills-view-content with reduced padding on mobile", () => {
+    expect(mobileMediaBlock).toContain(".skills-view-content");
+    const block = extractRuleBlock(cssContent, ".skills-view-content");
+    expect(block).toContain("padding: var(--space-md)");
+  });
+
+  it("defines .skills-view-search .form-input as full width on mobile", () => {
+    expect(mobileMediaBlock).toContain(".skills-view-search .form-input");
+    const block = extractRuleBlock(cssContent, ".skills-view-search .form-input");
+    expect(block).toContain("max-width: none");
+    expect(block).toContain("width: 100%");
+  });
+
+  it("collapses catalog grid to single column on mobile", () => {
+    expect(mobileMediaBlock).toContain(".skills-view-grid");
+    expect(mobileMediaBlock).toMatch(/\.skills-view-grid\s*\{[^}]*grid-template-columns:\s*1fr/);
+  });
+
+  it("defines .skills-view-item wrapping on mobile", () => {
+    expect(mobileMediaBlock).toContain(".skills-view-item");
+    const block = extractRuleBlock(cssContent, ".skills-view-item");
+    expect(block).toContain("flex-wrap: wrap");
+  });
+
+  it("defines .skills-view-toggle-slider with minimum dimensions on mobile", () => {
+    expect(mobileMediaBlock).toContain(".skills-view-toggle-slider");
+    const block = extractRuleBlock(cssContent, ".skills-view-toggle-slider");
+    expect(block).toContain("min-width: 32px");
+    expect(block).toContain("min-height: 18px");
+  });
+
+  it("skills-view base styles are defined in styles.css", () => {
+    expect(cssContent).toContain(".skills-view {");
+    expect(cssContent).toContain(".skills-view-header {");
+    expect(cssContent).toContain(".skills-view-title {");
+    expect(cssContent).toContain(".skills-view-content {");
+    expect(cssContent).toContain(".skills-view-section {");
+    expect(cssContent).toContain(".skills-view-list {");
+    expect(cssContent).toContain(".skills-view-item {");
+    expect(cssContent).toContain(".skills-view-card {");
+    expect(cssContent).toContain(".skills-view-grid {");
+    expect(cssContent).toContain(".skills-view-search {");
+    expect(cssContent).toContain(".skills-view-toggle-slider {");
+  });
+});

packages/dashboard/app/styles.css

@@ -25311,6 +25311,38 @@ html .column.drag-over * {
     font-size: 16px;
   }
 
+  /* Skills View mobile */
+  .skills-view-header {
+    padding: var(--space-sm) var(--space-md);
+  }
+
+  .skills-view-title h2 {
+    font-size: 16px;
+  }
+
+  .skills-view-content {
+    padding: var(--space-md);
+  }
+
+  .skills-view-search .form-input {
+    max-width: none;
+    width: 100%;
+  }
+
+  .skills-view-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .skills-view-item {
+    flex-wrap: wrap;
+    gap: var(--space-sm);
+  }
+
+  .skills-view-toggle-slider {
+    min-width: 32px;
+    min-height: 18px;
+  }
+
   .agent-tree__indent--1 { padding-left: 16px; }
   .agent-tree__indent--2 { padding-left: 32px; }
   .agent-tree__indent--3 { padding-left: 48px; }
@@ -26988,6 +27020,272 @@ html .column.drag-over * {
   gap: var(--space-sm);
 }
 
+/* === Skills View === */
+.skills-view {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.skills-view-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-lg) 20px;
+  border-bottom: 1px solid var(--border);
+  background: var(--surface);
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+}
+
+.skills-view-title {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.skills-view-title h2 {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.skills-view-count {
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+.skills-view-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.skills-view-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+}
+
+.skills-view-section {
+  margin-bottom: var(--space-xl);
+}
+
+.skills-view-section-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: var(--space-md);
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+/* Discovered skills list */
+.skills-view-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.skills-view-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-md);
+  padding: var(--space-sm) var(--space-md);
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  transition: background var(--transition-fast), border-color var(--transition-fast);
+}
+
+.skills-view-item:hover {
+  background: var(--card-hover);
+  border-color: var(--text-muted);
+}
+
+.skills-view-item-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+}
+
+.skills-view-item-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.skills-view-item-path {
+  font-size: 12px;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.skills-view-item-source {
+  font-size: 11px;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* Toggle switch */
+.skills-view-item-toggle {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.skills-view-item-toggle input {
+  display: none;
+}
+
+.skills-view-toggle-slider {
+  position: relative;
+  width: 32px;
+  height: 18px;
+  background: var(--border);
+  border-radius: var(--radius-md);
+  transition: background var(--transition-normal);
+  flex-shrink: 0;
+}
+
+.skills-view-toggle-slider::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 14px;
+  height: 14px;
+  background: var(--card);
+  border-radius: 50%;
+  transition: transform var(--transition-normal);
+}
+
+.skills-view-item-toggle input:checked + .skills-view-toggle-slider {
+  background: var(--color-success);
+}
+
+.skills-view-item-toggle input:checked + .skills-view-toggle-slider::after {
+  transform: translateX(14px);
+}
+
+/* Catalog search */
+.skills-view-search {
+  margin-bottom: var(--space-md);
+}
+
+.skills-view-search .form-input {
+  width: 100%;
+  max-width: 400px;
+}
+
+/* Catalog grid */
+.skills-view-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: var(--space-md);
+}
+
+.skills-view-card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: var(--space-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+  transition: background var(--transition-fast), border-color var(--transition-fast);
+}
+
+.skills-view-card:hover {
+  background: var(--card-hover);
+  border-color: var(--text-muted);
+}
+
+.skills-view-card-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+  margin: 0;
+}
+
+.skills-view-card-description {
+  font-size: 13px;
+  color: var(--text-muted);
+  line-height: 1.45;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  margin: 0;
+}
+
+.skills-view-card-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.skills-view-card-installs {
+  font-size: 12px;
+  color: var(--text-dim);
+  margin-top: auto;
+}
+
+/* Empty / error / loading states */
+.skills-view-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-md);
+  padding: var(--space-2xl);
+  border: 1px dashed var(--border);
+  border-radius: var(--radius-md);
+  text-align: center;
+  color: var(--text-muted);
+}
+
+.skills-view-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-lg);
+  color: var(--color-error);
+  background: color-mix(in srgb, var(--color-error) 8%, transparent);
+  border: 1px solid color-mix(in srgb, var(--color-error) 25%, transparent);
+  border-radius: var(--radius-md);
+  text-align: center;
+}
+
+.skills-view-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-sm);
+  padding: var(--space-xl);
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+/* Close button */
+.skills-view-close {
+  flex-shrink: 0;
+}
+
 /* === Node Management === */
 .nodes-management-overlay {
   display: flex;