feat(nexus): add Skills and Routines settings cards (phase 13)

SkillsSection surfaces installed skill and skill-group counts and
links out to the existing Skill Aggregator (CompanySkills page) at
/<prefix>/skills. The full browse/install/assign UI stays put; the
section is a compact summary + entry point per plan recommendation.

RoutinesSection renders the top five routines as a compact read-only
list (title, cron label, status) and links out to /<prefix>/routines
for the full interactive editor. Single responsibility per page,
matches the plan's recommendation (a) for Routines fold-in.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/src/components/settings/RoutinesSection.test.tsx

@@ -0,0 +1,148 @@
+// @vitest-environment jsdom
+
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { MemoryRouter } from "@/lib/router";
+
+vi.mock("@/api/routines", () => ({
+  routinesApi: {
+    list: vi.fn(async () => [
+      {
+        id: "r1",
+        companyId: "c1",
+        projectId: "p1",
+        goalId: null,
+        parentIssueId: null,
+        title: "Daily summary",
+        description: null,
+        assigneeAgentId: "a1",
+        priority: "normal",
+        status: "active",
+        concurrencyPolicy: "skip_if_active",
+        catchUpPolicy: "skip_missed",
+        variables: [],
+        createdByAgentId: null,
+        createdByUserId: null,
+        updatedByAgentId: null,
+        updatedByUserId: null,
+        lastTriggeredAt: null,
+        lastEnqueuedAt: null,
+        createdAt: new Date(),
+        updatedAt: new Date(),
+        triggers: [
+          { id: "t1", kind: "cron", label: "every 09:00", enabled: true, nextRunAt: null, lastFiredAt: null, lastResult: null },
+        ],
+        lastRun: null,
+        activeIssue: null,
+      },
+      {
+        id: "r2",
+        companyId: "c1",
+        projectId: "p1",
+        goalId: null,
+        parentIssueId: null,
+        title: "Cost report",
+        description: null,
+        assigneeAgentId: "a1",
+        priority: "normal",
+        status: "paused",
+        concurrencyPolicy: "skip_if_active",
+        catchUpPolicy: "skip_missed",
+        variables: [],
+        createdByAgentId: null,
+        createdByUserId: null,
+        updatedByAgentId: null,
+        updatedByUserId: null,
+        lastTriggeredAt: null,
+        lastEnqueuedAt: null,
+        createdAt: new Date(),
+        updatedAt: new Date(),
+        triggers: [],
+        lastRun: null,
+        activeIssue: null,
+      },
+    ]),
+  },
+}));
+
+vi.mock("@/context/CompanyContext", () => ({
+  useCompany: () => ({
+    companies: [],
+    selectedCompanyId: "c1",
+    selectedCompany: { id: "c1", name: "Test", issuePrefix: "NEX" },
+    selectionSource: "manual" as const,
+    loading: false,
+    error: null,
+    setSelectedCompanyId: () => {},
+    reloadCompanies: async () => {},
+    createCompany: async () => {
+      throw new Error("not implemented");
+    },
+  }),
+}));
+
+import { RoutinesSection } from "./RoutinesSection";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("RoutinesSection", () => {
+  let container: HTMLDivElement;
+  let root: ReturnType<typeof createRoot> | null = null;
+  let queryClient: QueryClient;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = null;
+    queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  });
+
+  afterEach(() => {
+    if (root) {
+      act(() => {
+        root!.unmount();
+      });
+      root = null;
+    }
+    if (container.parentNode) container.remove();
+    queryClient.clear();
+  });
+
+  async function renderAndFlush() {
+    root = createRoot(container);
+    act(() => {
+      root!.render(
+        <QueryClientProvider client={queryClient}>
+          <MemoryRouter initialEntries={["/instance/settings/general"]}>
+            <RoutinesSection />
+          </MemoryRouter>
+        </QueryClientProvider>,
+      );
+    });
+    for (let i = 0; i < 20; i++) {
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      });
+    }
+  }
+
+  it("renders a compact list of routines with title, schedule, and status", async () => {
+    await renderAndFlush();
+    expect(container.querySelector("h2")?.textContent).toBe("Routines");
+    expect(container.textContent).toContain("Daily summary");
+    expect(container.textContent).toContain("every 09:00");
+    expect(container.textContent).toContain("Active");
+    expect(container.textContent).toContain("Cost report");
+    expect(container.textContent).toContain("Paused");
+  });
+
+  it("links to the company-prefixed Routines page", async () => {
+    await renderAndFlush();
+    const link = container.querySelector("a[aria-label='Open Routines page']");
+    expect(link).not.toBeNull();
+    expect(link?.getAttribute("href")).toBe("/NEX/routines");
+  });
+});

ui/src/components/settings/RoutinesSection.tsx

@@ -0,0 +1,106 @@
+import { useQuery } from "@tanstack/react-query";
+import { ArrowRight, Repeat } from "lucide-react";
+import { Link } from "@/lib/router";
+import { routinesApi } from "@/api/routines";
+import { useCompany } from "@/context/CompanyContext";
+import { Button } from "@/components/ui/button";
+import { SettingsSection } from "./SettingsSection";
+
+function statusLabel(status: string) {
+  switch (status) {
+    case "active":
+      return "Active";
+    case "paused":
+      return "Paused";
+    case "archived":
+      return "Archived";
+    default:
+      return status;
+  }
+}
+
+export function RoutinesSection() {
+  const { selectedCompany } = useCompany();
+  const companyId = selectedCompany?.id ?? null;
+  const issuePrefix = selectedCompany?.issuePrefix ?? null;
+
+  const routinesQuery = useQuery({
+    queryKey: ["settings", "routines", companyId ?? "none"],
+    queryFn: () =>
+      companyId ? routinesApi.list(companyId) : Promise.resolve([]),
+    enabled: Boolean(companyId),
+  });
+
+  const routines = routinesQuery.data ?? [];
+  const topRoutines = routines.slice(0, 5);
+
+  return (
+    <SettingsSection
+      title="Routines"
+      description="Scheduled workspace jobs that run on cron triggers. Edit or pause from the full Routines page."
+    >
+      {!companyId ? (
+        <p className="text-xs text-muted-foreground">Select a workspace to see routines.</p>
+      ) : routinesQuery.isLoading ? (
+        <p className="text-xs text-muted-foreground">Loading routines...</p>
+      ) : routinesQuery.error ? (
+        <div className="rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2 text-xs text-destructive">
+          {routinesQuery.error instanceof Error
+            ? routinesQuery.error.message
+            : "Failed to load routines."}
+        </div>
+      ) : routines.length === 0 ? (
+        <p className="text-xs text-muted-foreground">
+          No routines yet. Create one from the Routines page.
+        </p>
+      ) : (
+        <ul className="divide-y divide-border/60">
+          {topRoutines.map((routine) => {
+            const primaryTrigger =
+              routine.triggers.find((t) => t.enabled) ?? routine.triggers[0] ?? null;
+            const scheduleLabel =
+              primaryTrigger?.label ??
+              (primaryTrigger?.cronExpression
+                ? `cron: ${primaryTrigger.cronExpression}`
+                : null);
+            return (
+              <li
+                key={routine.id}
+                className="flex items-center justify-between gap-3 py-2 text-sm"
+              >
+                <div className="min-w-0 flex-1">
+                  <div className="truncate text-primary">{routine.title}</div>
+                  {scheduleLabel ? (
+                    <div className="truncate text-xs text-muted-foreground">
+                      {scheduleLabel}
+                    </div>
+                  ) : null}
+                </div>
+                <span className="shrink-0 text-xs text-muted-foreground">
+                  {statusLabel(routine.status)}
+                </span>
+              </li>
+            );
+          })}
+          {routines.length > topRoutines.length ? (
+            <li className="py-2 text-xs text-muted-foreground">
+              + {routines.length - topRoutines.length} more
+            </li>
+          ) : null}
+        </ul>
+      )}
+
+      <Button asChild variant="outline" size="sm" disabled={!issuePrefix}>
+        <Link
+          to={issuePrefix ? `/${issuePrefix}/routines` : "/instance/settings/general"}
+          className="flex items-center gap-1.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+          aria-label="Open Routines page"
+        >
+          <Repeat className="h-3.5 w-3.5" aria-hidden="true" />
+          Open full Routines page
+          <ArrowRight className="h-3.5 w-3.5" aria-hidden="true" />
+        </Link>
+      </Button>
+    </SettingsSection>
+  );
+}

ui/src/components/settings/SkillsSection.test.tsx

@@ -0,0 +1,104 @@
+// @vitest-environment jsdom
+
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { MemoryRouter } from "@/lib/router";
+
+vi.mock("@/api/skillRegistry", () => ({
+  skillRegistryApi: {
+    list: vi.fn(async () => [
+      { id: "a/one", name: "One", description: null, sourceId: "a", category: null, activeVersionId: "v1", removedAt: null, averageRating: null, ratingCount: null, taskCount: null, avgCostUsd: null, lastUsedAt: null },
+      { id: "a/two", name: "Two", description: null, sourceId: "a", category: null, activeVersionId: "v1", removedAt: null, averageRating: null, ratingCount: null, taskCount: null, avgCostUsd: null, lastUsedAt: null },
+      { id: "a/removed", name: "R", description: null, sourceId: "a", category: null, activeVersionId: null, removedAt: 123, averageRating: null, ratingCount: null, taskCount: null, avgCostUsd: null, lastUsedAt: null },
+    ]),
+  },
+}));
+
+vi.mock("@/api/skillGroups", () => ({
+  skillGroupsApi: {
+    listGroups: vi.fn(async () => [{ id: "g1" }, { id: "g2" }]),
+  },
+}));
+
+vi.mock("@/context/CompanyContext", () => ({
+  useCompany: () => ({
+    companies: [],
+    selectedCompanyId: "c1",
+    selectedCompany: { id: "c1", name: "Test", issuePrefix: "NEX" },
+    selectionSource: "manual" as const,
+    loading: false,
+    error: null,
+    setSelectedCompanyId: () => {},
+    reloadCompanies: async () => {},
+    createCompany: async () => {
+      throw new Error("not implemented");
+    },
+  }),
+}));
+
+import { SkillsSection } from "./SkillsSection";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("SkillsSection", () => {
+  let container: HTMLDivElement;
+  let root: ReturnType<typeof createRoot> | null = null;
+  let queryClient: QueryClient;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = null;
+    queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  });
+
+  afterEach(() => {
+    if (root) {
+      act(() => {
+        root!.unmount();
+      });
+      root = null;
+    }
+    if (container.parentNode) container.remove();
+    queryClient.clear();
+  });
+
+  async function renderAndFlush() {
+    root = createRoot(container);
+    act(() => {
+      root!.render(
+        <QueryClientProvider client={queryClient}>
+          <MemoryRouter initialEntries={["/instance/settings/general"]}>
+            <SkillsSection />
+          </MemoryRouter>
+        </QueryClientProvider>,
+      );
+    });
+    for (let i = 0; i < 10; i++) {
+      await act(async () => {
+        await Promise.resolve();
+      });
+    }
+  }
+
+  it("renders the Skills section and counts only non-removed skills", async () => {
+    await renderAndFlush();
+    expect(container.querySelector("h2")?.textContent).toBe("Skills");
+    expect(container.textContent).toContain("Installed skills");
+    // Exactly 2 non-removed skills from the mock
+    const counts = Array.from(container.querySelectorAll("span")).filter(
+      (s) => s.textContent === "2",
+    );
+    expect(counts.length).toBeGreaterThan(0);
+  });
+
+  it("links Open Skill Aggregator to the company-prefixed skills route", async () => {
+    await renderAndFlush();
+    const openLink = container.querySelector("a[aria-label='Open Skill Aggregator']");
+    expect(openLink).not.toBeNull();
+    expect(openLink?.getAttribute("href")).toBe("/NEX/skills");
+  });
+});

ui/src/components/settings/SkillsSection.tsx

@@ -0,0 +1,72 @@
+import { useQuery } from "@tanstack/react-query";
+import { ArrowRight, Boxes } from "lucide-react";
+import { Link } from "@/lib/router";
+import { skillRegistryApi } from "@/api/skillRegistry";
+import { skillGroupsApi } from "@/api/skillGroups";
+import { useCompany } from "@/context/CompanyContext";
+import { Button } from "@/components/ui/button";
+import { SettingsSection, SettingsRow } from "./SettingsSection";
+
+export function SkillsSection() {
+  const { selectedCompany } = useCompany();
+
+  const registryQuery = useQuery({
+    queryKey: ["settings", "skills", "registry"],
+    queryFn: () => skillRegistryApi.list(),
+  });
+
+  const groupsQuery = useQuery({
+    queryKey: ["settings", "skills", "groups"],
+    queryFn: () => skillGroupsApi.listGroups(),
+  });
+
+  const installedCount =
+    (registryQuery.data ?? []).filter((s) => s.removedAt === null).length;
+  const groupCount = (groupsQuery.data ?? []).length;
+
+  const skillsHref = selectedCompany
+    ? `/${selectedCompany.issuePrefix}/skills`
+    : "/instance/settings/general";
+
+  return (
+    <SettingsSection
+      title="Skills"
+      description="Browse, install, and assign skills to agents. Managed by the Skill Aggregator."
+    >
+      <SettingsRow
+        label="Installed skills"
+        description="Skills visible to agents in this workspace."
+      >
+        <span className="font-mono text-sm text-primary tabular-nums">
+          {registryQuery.isLoading ? "..." : installedCount}
+        </span>
+      </SettingsRow>
+
+      <SettingsRow
+        label="Skill groups"
+        description="Reusable skill bundles that can be assigned to agents in a single click."
+      >
+        <span className="font-mono text-sm text-primary tabular-nums">
+          {groupsQuery.isLoading ? "..." : groupCount}
+        </span>
+      </SettingsRow>
+
+      <SettingsRow
+        label="Skill Aggregator"
+        description="Open the full browse / install / assign UI in the workspace Skills page."
+      >
+        <Button asChild variant="outline" size="sm" disabled={!selectedCompany}>
+          <Link
+            to={skillsHref}
+            className="flex items-center gap-1.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+            aria-label="Open Skill Aggregator"
+          >
+            <Boxes className="h-3.5 w-3.5" aria-hidden="true" />
+            Open
+            <ArrowRight className="h-3.5 w-3.5" aria-hidden="true" />
+          </Link>
+        </Button>
+      </SettingsRow>
+    </SettingsSection>
+  );
+}