feat(issues): S4a UI — Systems management section in project view

Frontend foundation for Issues + Systems (spec #825, S4a).

- frontend/src/api/systems.ts: typed client (System + list/create/update/delete)
  over /api/projects/<id>/systems, matching the rulebooks api style.
- frontend/src/stores/systems.ts: Pinia store keyed by project (fetch/create/
  update/archive/unarchive/delete), toast-on-error.
- frontend/src/components/SystemsSection.vue: a Systems management section —
  cards (color swatch, name, description, 'N open' issue-count badge) with
  inline create/edit, archive (hidden behind a 'show archived' toggle), and a
  delete-confirm modal. v1 quality: loading skeleton, empty state, error toasts,
  keyboard a11y, focus rings; reuses existing CSS tokens (no new colors).
- ProjectView.vue: new 'Systems' tab (between Notes and Rules), rendering
  <SystemsSection :project-id>, wired like the existing rules tab.

S4b (next) adds issue-editor controls (kind=issue/system multi-select/arose-from),
open-issues lists, and the dashboard surface. NEEDS operator browser verification
(CI typechecks but can't render).

Refs plan 825 (S4a).

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

frontend/src/api/systems.ts

@@ -0,0 +1,44 @@
+import { apiGet, apiPost, apiPatch, apiDelete } from "@/api/client";
+
+export interface System {
+  id: number;
+  project_id: number;
+  name: string;
+  description: string;
+  color: string | null;
+  status: "active" | "archived";
+  order_index: number;
+  open_issue_count: number;
+  created_at: string | null;
+  updated_at: string | null;
+}
+
+export async function listSystems(projectId: number): Promise<System[]> {
+  const data = await apiGet<{ systems: System[] }>(`/api/projects/${projectId}/systems`);
+  return data.systems;
+}
+
+export async function createSystem(
+  projectId: number,
+  data: { name: string; description?: string; color?: string },
+): Promise<System> {
+  return apiPost(`/api/projects/${projectId}/systems`, data);
+}
+
+export async function updateSystem(
+  projectId: number,
+  systemId: number,
+  data: Partial<{
+    name: string;
+    description: string;
+    color: string;
+    status: "active" | "archived";
+    order_index: number;
+  }>,
+): Promise<System> {
+  return apiPatch(`/api/projects/${projectId}/systems/${systemId}`, data);
+}
+
+export async function deleteSystem(projectId: number, systemId: number): Promise<void> {
+  return apiDelete(`/api/projects/${projectId}/systems/${systemId}`);
+}