feat(skills): UI fuer AI-Skill-Definitionen — Modul 7/16 des UI-Backlogs

Zweites Modul via Phase-Q-Manifest-Architektur: Registrierung komplett
ueber das automation-Plugin-Manifest (page_route /skills + menu_item,
Sparkles-Icon) — routes/index.tsx und Sidebar.tsx unangetastet. Der
Komponenten-Map-Generator wired den lazy import (39 Komponenten).

Backend existierte vollstaendig im automation-Plugin (skill_routes.py:
list mit is_active/category-Filtern, create, get, patch, delete;
automation:read/write/delete), Frontend hatte 0% Abdeckung.

- api/skills.ts: TanStack-Hooks (useSkills mit Filtern, useSkill,
  create/update/delete mit Cache-Invalidierung)
- pages/Skills.tsx: Filter-Tabs (alle/aktiv/inaktiv), Skill-Karten (Name,
  Aktiv/Inaktiv-Badge, Kategorie, Beschreibung, Tool-Count),
  Create/Edit-Dialog (Name, Beschreibung, Instructions-Textarea, Kategorie,
  Tool-IDs als Komma-Liste, Aktiv-Toggle), Delete mit Confirm —
  Create/Edit hinter automation:write, Delete hinter automation:delete
- i18n skills.* + nav.skills de/en

Hinweis: Skills sind Orchestrierungs-Metadaten, KEINE
Berechtigungsquelle — erlaubte Tools verweisen auf Tool-IDs, fuer die
Agent und User bereits berechtigt sein muessen (Backend-Docstring).

Verifikation: Vitest 10/10 (Filter-Tabs, Badges inkl. Inaktiv, Tool-Count,
Create-Flow, Edit prefilled, Delete mit+ohne Confirm, separates
Write/Delete-Gating) · tsc exit 0 · production build exit 0 ·
Backend-Regressionen (route-order, m5-miniapps, n4-scope) 28/28 ·
compileall sauber · Cross-Plugin-Checker 0 · Manifest-Check: page_route
+ menu_item korrekt.

frontend/src/__tests__/pages/Skills.test.tsx

@@ -0,0 +1,200 @@
+/**
+ * Skills page tests — AI skill definitions (module 7/16).
+ *
+ * Covers: rendering, filter tabs, skill cards with active badge + tool
+ * count, create flow, edit flow prefilled, delete with confirmation,
+ * permission gating (automation:write / automation:delete), empty and
+ * error states.
+ */
+import React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { SkillsPage } from '@/pages/Skills';
+import type { SkillDefinition } from '@/api/skills';
+
+const createMut = vi.fn().mockImplementation((_payload, opts) => {
+  opts?.onSuccess?.({});
+  return Promise.resolve({});
+});
+const updateMut = vi.fn().mockImplementation((_payload, opts) => {
+  opts?.onSuccess?.({});
+  return Promise.resolve({});
+});
+const deleteMut = vi.fn().mockResolvedValue({});
+
+const makeSkill = (overrides: Partial<SkillDefinition> = {}): SkillDefinition => ({
+  id: 'sk-1',
+  name: 'Rechnungspruefung',
+  description: 'Prueft eingehende Rechnungen',
+  instructions: '1. Lade die Rechnung\n2. Pruefe Betraege',
+  allowed_tool_ids: ['11111111-1111-1111-1111-111111111111', '22222222-2222-2222-2222-222222222222'],
+  context_policy: null,
+  category: 'finance',
+  is_active: true,
+  created_at: '2026-09-01T10:00:00Z',
+  updated_at: null,
+  ...overrides,
+});
+
+let mockItems: SkillDefinition[] = [];
+let mockPerms: Record<string, boolean> = { 'automation:read': true, 'automation:write': true, 'automation:delete': true };
+let mockError = false;
+
+vi.mock('@/api/skills', () => ({
+  useSkills: () => ({
+    data: { items: mockItems, total: mockItems.length },
+    isLoading: false,
+    isError: mockError,
+    isFetching: false,
+    refetch: vi.fn(),
+  }),
+  useCreateSkill: () => ({
+    mutate: createMut,
+    isPending: false,
+  }),
+  useUpdateSkill: () => ({
+    mutate: updateMut,
+    isPending: false,
+  }),
+  useDeleteSkill: () => ({
+    mutate: deleteMut,
+    isPending: false,
+  }),
+}));
+
+vi.mock('@/hooks/usePermission', () => ({
+  usePermission: () => ({
+    hasPermission: (perm: string) => mockPerms[perm] ?? false,
+  }),
+}));
+
+function renderPage() {
+  return render(
+    <MemoryRouter>
+      <SkillsPage />
+    </MemoryRouter>,
+  );
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mockItems = [];
+  mockPerms = { 'automation:read': true, 'automation:write': true, 'automation:delete': true };
+  mockError = false;
+});
+
+describe('SkillsPage', () => {
+  it('renders the page with title and filter tabs', () => {
+    renderPage();
+    expect(screen.getByTestId('skills-page')).toBeInTheDocument();
+    expect(screen.getByTestId('skill-filter-all')).toBeInTheDocument();
+    expect(screen.getByTestId('skill-filter-active')).toBeInTheDocument();
+    expect(screen.getByTestId('skill-filter-inactive')).toBeInTheDocument();
+  });
+
+  it('shows empty state when no skills exist', () => {
+    renderPage();
+    expect(screen.getByTestId('skills-empty')).toBeInTheDocument();
+  });
+
+  it('shows error state on load failure', () => {
+    mockError = true;
+    renderPage();
+    expect(screen.getByTestId('skills-error')).toBeInTheDocument();
+  });
+
+  it('renders skill cards with active badge, category and tool count', () => {
+    mockItems = [makeSkill()];
+    renderPage();
+    expect(screen.getByTestId('skill-card-sk-1')).toBeInTheDocument();
+    expect(screen.getByText('Rechnungspruefung')).toBeInTheDocument();
+    expect(screen.getByTestId('skill-active-sk-1')).toBeInTheDocument();
+    expect(screen.getByText('finance')).toBeInTheDocument();
+    expect(screen.getByTestId('skill-tools-sk-1')).toHaveTextContent('2');
+  });
+
+  it('shows inactive badge for inactive skills', () => {
+    mockItems = [makeSkill({ is_active: false })];
+    renderPage();
+    expect(screen.getByTestId('skill-active-sk-1')).toHaveTextContent(/inaktiv|inactive/i);
+  });
+
+  it('hides create/edit without automation:write and delete without automation:delete', () => {
+    mockItems = [makeSkill()];
+    mockPerms = { 'automation:read': true, 'automation:write': false, 'automation:delete': false };
+    renderPage();
+    expect(screen.queryByTestId('skill-create-open')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('skill-edit-sk-1')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('skill-delete-sk-1')).not.toBeInTheDocument();
+  });
+
+  it('creates a skill via the dialog', async () => {
+    renderPage();
+    fireEvent.click(screen.getByTestId('skill-create-open'));
+    expect(screen.getByTestId('skill-form-submit')).toBeInTheDocument();
+
+    const nameInput = screen.getByLabelText(/name/i, { selector: 'input' }) as HTMLInputElement;
+    fireEvent.change(nameInput, { target: { value: 'Neuer Skill' } });
+    const descInput = screen.getByLabelText(/beschreibung|description/i, { selector: 'input' }) as HTMLInputElement;
+    fireEvent.change(descInput, { target: { value: 'Beschreibung' } });
+    const instrArea = screen.getByTestId('skill-instructions') as HTMLTextAreaElement;
+    fireEvent.change(instrArea, { target: { value: 'Mach dies, mach das.' } });
+
+    fireEvent.click(screen.getByTestId('skill-form-submit'));
+
+    await waitFor(() => {
+      expect(createMut).toHaveBeenCalledWith(
+        expect.objectContaining({
+          name: 'Neuer Skill',
+          description: 'Beschreibung',
+          instructions: 'Mach dies, mach das.',
+        }),
+        expect.anything(),
+      );
+    });
+  });
+
+  it('opens the edit dialog prefilled and submits the update', async () => {
+    mockItems = [makeSkill()];
+    renderPage();
+    fireEvent.click(screen.getByTestId('skill-edit-sk-1'));
+
+    const nameInput = screen.getByLabelText(/name/i, { selector: 'input' }) as HTMLInputElement;
+    expect(nameInput).toHaveValue('Rechnungspruefung');
+    fireEvent.change(nameInput, { target: { value: 'Geaenderter Skill' } });
+
+    fireEvent.click(screen.getByTestId('skill-form-submit'));
+
+    await waitFor(() => {
+      expect(updateMut).toHaveBeenCalledWith(
+        {
+          skillId: 'sk-1',
+          payload: expect.objectContaining({
+            name: 'Geaenderter Skill',
+            instructions: '1. Lade die Rechnung\n2. Pruefe Betraege',
+          }),
+        },
+        expect.anything(),
+      );
+    });
+  });
+
+  it('deletes a skill after confirmation', async () => {
+    mockItems = [makeSkill()];
+    window.confirm = vi.fn(() => true);
+    renderPage();
+    fireEvent.click(screen.getByTestId('skill-delete-sk-1'));
+    await waitFor(() => {
+      expect(deleteMut).toHaveBeenCalledWith('sk-1');
+    });
+  });
+
+  it('does not delete when the confirmation is rejected', () => {
+    mockItems = [makeSkill()];
+    window.confirm = vi.fn(() => false);
+    renderPage();
+    fireEvent.click(screen.getByTestId('skill-delete-sk-1'));
+    expect(deleteMut).not.toHaveBeenCalled();
+  });
+});