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}`);
+}

frontend/src/components/SystemsSection.vue

@@ -0,0 +1,525 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from "vue";
+import { useSystemsStore } from "@/stores/systems";
+import { useToastStore } from "@/stores/toast";
+import type { System } from "@/api/systems";
+import { Pencil, Trash2, Archive, ArchiveRestore } from "lucide-vue-next";
+
+const props = defineProps<{ projectId: number }>();
+
+const store = useSystemsStore();
+const toast = useToastStore();
+
+const error = ref<string | null>(null);
+const showArchived = ref(false);
+
+// Create state
+const showCreate = ref(false);
+const newName = ref("");
+const newDescription = ref("");
+const creating = ref(false);
+
+// Edit state
+const editingId = ref<number | null>(null);
+const editName = ref("");
+const editDescription = ref("");
+const savingEdit = ref(false);
+
+// Delete confirmation
+const deletingSystem = ref<System | null>(null);
+
+const systems = computed<System[]>(() => store.systemsByProject[props.projectId] ?? []);
+const activeSystems = computed(() => systems.value.filter((s) => s.status === "active"));
+const archivedSystems = computed(() => systems.value.filter((s) => s.status === "archived"));
+const visibleSystems = computed(() =>
+  showArchived.value ? systems.value : activeSystems.value,
+);
+
+async function load() {
+  error.value = null;
+  try {
+    await store.fetchSystems(props.projectId);
+  } catch {
+    error.value = "Failed to load systems.";
+  }
+}
+
+onMounted(load);
+watch(() => props.projectId, load);
+
+function openCreate() {
+  showCreate.value = true;
+  newName.value = "";
+  newDescription.value = "";
+}
+
+function cancelCreate() {
+  showCreate.value = false;
+  newName.value = "";
+  newDescription.value = "";
+}
+
+async function submitCreate() {
+  const name = newName.value.trim();
+  if (!name || creating.value) return;
+  creating.value = true;
+  try {
+    await store.createSystem(props.projectId, {
+      name,
+      description: newDescription.value.trim() || undefined,
+    });
+    cancelCreate();
+    toast.show("System created");
+  } catch {
+    toast.show("Failed to create system", "error");
+  } finally {
+    creating.value = false;
+  }
+}
+
+function startEdit(system: System) {
+  editingId.value = system.id;
+  editName.value = system.name;
+  editDescription.value = system.description;
+}
+
+function cancelEdit() {
+  editingId.value = null;
+}
+
+async function submitEdit(system: System) {
+  const name = editName.value.trim();
+  if (!name || savingEdit.value) return;
+  savingEdit.value = true;
+  try {
+    await store.updateSystem(props.projectId, system.id, {
+      name,
+      description: editDescription.value.trim(),
+    });
+    editingId.value = null;
+    toast.show("System updated");
+  } catch {
+    toast.show("Failed to update system", "error");
+  } finally {
+    savingEdit.value = false;
+  }
+}
+
+async function archive(system: System) {
+  try {
+    await store.archiveSystem(props.projectId, system.id);
+    toast.show("System archived");
+  } catch {
+    toast.show("Failed to archive system", "error");
+  }
+}
+
+async function unarchive(system: System) {
+  try {
+    await store.unarchiveSystem(props.projectId, system.id);
+    toast.show("System restored");
+  } catch {
+    toast.show("Failed to restore system", "error");
+  }
+}
+
+async function confirmDelete() {
+  const system = deletingSystem.value;
+  if (!system) return;
+  deletingSystem.value = null;
+  try {
+    await store.deleteSystem(props.projectId, system.id);
+    toast.show("System deleted");
+  } catch {
+    toast.show("Failed to delete system", "error");
+  }
+}
+</script>
+
+<template>
+  <div class="systems-section">
+    <!-- Toolbar -->
+    <div class="systems-toolbar">
+      <button v-if="!showCreate" class="btn-add-system" @click="openCreate">
+        + System
+      </button>
+      <label v-if="archivedSystems.length" class="archived-toggle">
+        <input v-model="showArchived" type="checkbox" class="archived-checkbox" />
+        Show archived ({{ archivedSystems.length }})
+      </label>
+    </div>
+
+    <!-- Create form -->
+    <form v-if="showCreate" class="system-form" @submit.prevent="submitCreate">
+      <input
+        v-model="newName"
+        class="system-input"
+        placeholder="System name"
+        aria-label="System name"
+        autofocus
+        @keydown.escape="cancelCreate"
+      />
+      <textarea
+        v-model="newDescription"
+        class="system-textarea"
+        rows="2"
+        placeholder="What is this subsystem responsible for? (optional)"
+        aria-label="System description"
+      ></textarea>
+      <div class="system-form-actions">
+        <button type="submit" class="btn-confirm" :disabled="!newName.trim() || creating">
+          {{ creating ? "Creating…" : "Create" }}
+        </button>
+        <button type="button" class="btn-cancel" @click="cancelCreate">Cancel</button>
+      </div>
+    </form>
+
+    <!-- Loading -->
+    <div v-if="store.loading && !systems.length" class="systems-skeleton" aria-label="Loading systems">
+      <div class="skel-row"></div>
+      <div class="skel-row skel-row--short"></div>
+      <div class="skel-row"></div>
+    </div>
+
+    <!-- Error -->
+    <p v-else-if="error" class="error-msg">{{ error }}</p>
+
+    <!-- Empty -->
+    <div v-else-if="!visibleSystems.length" class="systems-empty">
+      <p class="empty-title">No systems yet</p>
+      <p class="empty-sub">Define a reusable subsystem or area to organize issues against.</p>
+      <button v-if="!showCreate" class="btn-confirm" @click="openCreate">+ Create a system</button>
+    </div>
+
+    <!-- List -->
+    <ul v-else class="systems-list">
+      <li
+        v-for="system in visibleSystems"
+        :key="system.id"
+        class="system-card"
+        :class="{ 'system-card--archived': system.status === 'archived' }"
+      >
+        <!-- Inline edit -->
+        <template v-if="editingId === system.id">
+          <form class="system-form system-form--inline" @submit.prevent="submitEdit(system)">
+            <input
+              v-model="editName"
+              class="system-input"
+              placeholder="System name"
+              aria-label="System name"
+              autofocus
+              @keydown.escape="cancelEdit"
+            />
+            <textarea
+              v-model="editDescription"
+              class="system-textarea"
+              rows="2"
+              placeholder="Description (optional)"
+              aria-label="System description"
+            ></textarea>
+            <div class="system-form-actions">
+              <button type="submit" class="btn-confirm" :disabled="!editName.trim() || savingEdit">
+                {{ savingEdit ? "Saving…" : "Save" }}
+              </button>
+              <button type="button" class="btn-cancel" @click="cancelEdit">Cancel</button>
+            </div>
+          </form>
+        </template>
+
+        <!-- Display -->
+        <template v-else>
+          <span
+            class="system-swatch"
+            :style="{ background: system.color || 'var(--color-text-muted)' }"
+            aria-hidden="true"
+          ></span>
+          <div class="system-body">
+            <div class="system-name-row">
+              <span class="system-name">{{ system.name }}</span>
+              <span
+                class="issue-badge"
+                :title="`${system.open_issue_count} open issue(s)`"
+              >{{ system.open_issue_count }} open</span>
+              <span v-if="system.status === 'archived'" class="archived-badge">Archived</span>
+            </div>
+            <p v-if="system.description" class="system-description">{{ system.description }}</p>
+          </div>
+          <div class="system-actions">
+            <button class="action-btn" title="Edit" aria-label="Edit system" @click="startEdit(system)">
+              <Pencil :size="16" />
+            </button>
+            <button
+              v-if="system.status === 'active'"
+              class="action-btn"
+              title="Archive"
+              aria-label="Archive system"
+              @click="archive(system)"
+            >
+              <Archive :size="16" />
+            </button>
+            <button
+              v-else
+              class="action-btn"
+              title="Restore"
+              aria-label="Restore system"
+              @click="unarchive(system)"
+            >
+              <ArchiveRestore :size="16" />
+            </button>
+            <button
+              class="action-btn action-delete"
+              title="Delete"
+              aria-label="Delete system"
+              @click="deletingSystem = system"
+            >
+              <Trash2 :size="16" />
+            </button>
+          </div>
+        </template>
+      </li>
+    </ul>
+
+    <!-- Delete confirmation -->
+    <teleport to="body">
+      <div v-if="deletingSystem" class="modal-overlay" @click.self="deletingSystem = null">
+        <div class="modal-card">
+          <h3 class="modal-title">Delete System</h3>
+          <p class="modal-message">
+            Delete <strong>{{ deletingSystem.name }}</strong>? This cannot be undone.
+          </p>
+          <div class="modal-actions">
+            <button class="modal-btn" @click="deletingSystem = null">Cancel</button>
+            <button class="modal-btn modal-btn-danger" @click="confirmDelete">Delete</button>
+          </div>
+        </div>
+      </div>
+    </teleport>
+  </div>
+</template>
+
+<style scoped>
+.systems-section { display: flex; flex-direction: column; gap: 0.75rem; }
+
+/* ── Toolbar ──────────────────────────────────────────────────── */
+.systems-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
+.btn-add-system {
+  background: none;
+  border: 1px dashed var(--color-border);
+  color: var(--color-text-secondary);
+  padding: 0.28rem 0.65rem;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 0.78rem;
+  font-family: inherit;
+}
+.btn-add-system:hover { border-color: var(--color-primary); color: var(--color-primary); }
+.btn-add-system:focus-visible { outline: none; border-color: var(--color-primary); color: var(--color-primary); }
+
+.archived-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.78rem;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  user-select: none;
+}
+.archived-checkbox { accent-color: var(--color-primary); cursor: pointer; }
+
+/* ── Create / edit form ───────────────────────────────────────── */
+.system-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+}
+.system-form--inline { padding: 0; background: none; border: none; flex: 1; }
+.system-input, .system-textarea {
+  padding: 0.4rem 0.6rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg);
+  color: var(--color-text);
+  font-size: 0.875rem;
+  font-family: inherit;
+  box-sizing: border-box;
+  width: 100%;
+}
+.system-input:focus, .system-textarea:focus { outline: none; border-color: var(--color-primary); }
+.system-textarea { resize: vertical; }
+
+.system-form-actions { display: flex; gap: 0.4rem; }
+.btn-confirm {
+  padding: 0.35rem 0.8rem;
+  background: var(--color-action-primary);
+  color: #fff;
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 0.82rem;
+  font-family: inherit;
+  transition: background 0.15s;
+}
+.btn-confirm:hover:not(:disabled) { background: var(--color-action-primary-hover); }
+.btn-confirm:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
+.btn-confirm:disabled { opacity: 0.5; cursor: default; }
+.btn-cancel {
+  padding: 0.35rem 0.8rem;
+  background: var(--color-action-secondary);
+  border: none;
+  color: #fff;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 0.82rem;
+  font-family: inherit;
+  transition: background 0.15s;
+}
+.btn-cancel:hover { background: var(--color-action-secondary-hover); }
+.btn-cancel:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
+
+/* ── List ─────────────────────────────────────────────────────── */
+.systems-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
+.system-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.65rem;
+  padding: 0.65rem 0.85rem;
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
+  transition: border-color 0.12s, box-shadow 0.15s;
+}
+.system-card:hover {
+  border-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-border));
+  box-shadow: 0 3px 10px rgba(0,0,0,0.07);
+}
+.system-card--archived { opacity: 0.6; }
+
+.system-swatch {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  margin-top: 0.3rem;
+}
+.system-body { flex: 1; min-width: 0; }
+.system-name-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
+.system-name { font-weight: 500; color: var(--color-text); word-break: break-word; }
+.issue-badge {
+  font-size: 0.7rem;
+  font-weight: 500;
+  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
+  color: var(--color-primary);
+  border-radius: 999px;
+  padding: 0.05rem 0.45rem;
+  flex-shrink: 0;
+}
+.archived-badge {
+  font-size: 0.65rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--color-text-muted);
+  background: color-mix(in srgb, var(--color-text-muted) 12%, transparent);
+  border-radius: 999px;
+  padding: 0.05rem 0.45rem;
+}
+.system-description {
+  margin: 0.25rem 0 0;
+  font-size: 0.82rem;
+  color: var(--color-text-secondary);
+  line-height: 1.4;
+  word-break: break-word;
+}
+
+.system-actions { display: flex; gap: 0.15rem; flex-shrink: 0; opacity: 0; transition: opacity 0.15s; }
+.system-card:hover .system-actions,
+.system-card:focus-within .system-actions { opacity: 1; }
+.action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--color-text-muted);
+  width: 26px;
+  height: 26px;
+  border-radius: var(--radius-sm);
+  transition: background 0.12s, color 0.12s;
+}
+.action-btn:hover { background: var(--color-bg-secondary); color: var(--color-text); }
+.action-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; opacity: 1; }
+.action-delete:hover { color: var(--color-danger, #e74c3c); }
+
+/* ── Empty ────────────────────────────────────────────────────── */
+.systems-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 2rem 1rem;
+  text-align: center;
+  border: 1px dashed var(--color-border);
+  border-radius: var(--radius-md);
+}
+.empty-title { margin: 0; font-weight: 500; color: var(--color-text); }
+.empty-sub { margin: 0 0 0.5rem; font-size: 0.82rem; color: var(--color-text-muted); max-width: 32ch; }
+
+.error-msg { color: var(--color-danger); font-size: 0.9rem; }
+
+/* ── Skeleton ─────────────────────────────────────────────────── */
+@keyframes skel-shine { to { background-position: 200% center; } }
+.systems-skeleton { display: flex; flex-direction: column; gap: 0.4rem; }
+.skel-row {
+  height: 3rem;
+  border-radius: var(--radius-md);
+  background: linear-gradient(
+    90deg,
+    var(--color-bg-secondary) 25%,
+    color-mix(in srgb, var(--color-text-muted) 16%, var(--color-bg-secondary)) 50%,
+    var(--color-bg-secondary) 75%
+  );
+  background-size: 200% 100%;
+  animation: skel-shine 1.5s ease infinite;
+}
+.skel-row--short { width: 65%; }
+
+/* ── Modal ────────────────────────────────────────────────────── */
+.modal-overlay {
+  position: fixed; inset: 0;
+  background: var(--color-overlay, rgba(0,0,0,0.45));
+  display: flex; align-items: center; justify-content: center;
+  z-index: 200;
+}
+.modal-card {
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 1.5rem;
+  width: 100%;
+  max-width: 400px;
+  box-shadow: 0 8px 32px var(--color-shadow);
+}
+.modal-title { margin: 0 0 0.75rem; font-size: 1.05rem; }
+.modal-message { font-size: 0.9rem; color: var(--color-text-secondary); margin: 0 0 1.25rem; line-height: 1.5; }
+.modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
+.modal-btn {
+  padding: 0.4rem 0.9rem;
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-secondary);
+  color: var(--color-text);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-family: inherit;
+}
+.modal-btn:hover { background: var(--color-bg); }
+.modal-btn-danger { background: var(--color-action-destructive); border-color: var(--color-action-destructive); color: #fff; }
+.modal-btn-danger:hover { background: var(--color-action-destructive-hover); border-color: var(--color-action-destructive-hover); }
+</style>

frontend/src/stores/systems.ts

@@ -0,0 +1,73 @@
+import { ref } from "vue";
+import { defineStore } from "pinia";
+import * as api from "@/api/systems";
+import type { System } from "@/api/systems";
+import { useToastStore } from "@/stores/toast";
+
+export const useSystemsStore = defineStore("systems", () => {
+  const systemsByProject = ref<Record<number, System[]>>({});
+  const loading = ref(false);
+
+  async function fetchSystems(projectId: number) {
+    loading.value = true;
+    try {
+      systemsByProject.value[projectId] = await api.listSystems(projectId);
+    } catch (e) {
+      useToastStore().show("Failed to load systems", "error");
+      throw e;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function createSystem(
+    projectId: number,
+    data: { name: string; description?: string; color?: string },
+  ) {
+    const system = await api.createSystem(projectId, data);
+    if (!systemsByProject.value[projectId]) systemsByProject.value[projectId] = [];
+    systemsByProject.value[projectId].push(system);
+    return system;
+  }
+
+  async function updateSystem(
+    projectId: number,
+    systemId: number,
+    data: Partial<Pick<System, "name" | "description" | "color" | "status" | "order_index">>,
+  ) {
+    const system = await api.updateSystem(projectId, systemId, data);
+    const list = systemsByProject.value[projectId];
+    if (list) {
+      const idx = list.findIndex((s) => s.id === systemId);
+      if (idx >= 0) list[idx] = system;
+    }
+    return system;
+  }
+
+  async function archiveSystem(projectId: number, systemId: number) {
+    return updateSystem(projectId, systemId, { status: "archived" });
+  }
+
+  async function unarchiveSystem(projectId: number, systemId: number) {
+    return updateSystem(projectId, systemId, { status: "active" });
+  }
+
+  async function deleteSystem(projectId: number, systemId: number) {
+    await api.deleteSystem(projectId, systemId);
+    const list = systemsByProject.value[projectId];
+    if (list) {
+      systemsByProject.value[projectId] = list.filter((s) => s.id !== systemId);
+    }
+  }
+
+  return {
+    systemsByProject,
+    loading,
+    fetchSystems,
+    createSystem,
+    updateSystem,
+    archiveSystem,
+    unarchiveSystem,
+    deleteSystem,
+  };
+});

frontend/src/views/ProjectView.vue

@@ -7,6 +7,7 @@ import { useTasksStore } from "@/stores/tasks";
 import { relativeTime } from "@/composables/useRelativeTime";
 import ShareDialog from "@/components/ShareDialog.vue";
 import ProjectRulesTab from "@/components/rules/ProjectRulesTab.vue";
+import SystemsSection from "@/components/SystemsSection.vue";
 import {
   LayoutGrid,
   Clock,
@@ -87,7 +88,7 @@ async function confirmStartPlanning() {
 const saving = ref(false);
 const error = ref<string | null>(null);
 
-const activeTab = ref<"tasks" | "notes" | "rules">("tasks");
+const activeTab = ref<"tasks" | "notes" | "systems" | "rules">("tasks");
 
 const tasks = ref<NoteItem[]>([]);
 const notes = ref<NoteItem[]>([]);
@@ -479,6 +480,9 @@ async function confirmDelete() {
               Notes
               <span v-if="project.summary" class="tab-count">{{ project.summary.note_count }}</span>
             </button>
+            <button :class="['tab-btn', { active: activeTab === 'systems' }]" @click="activeTab = 'systems'">
+              Systems
+            </button>
             <button :class="['tab-btn', { active: activeTab === 'rules' }]" @click="activeTab = 'rules'">
               Rules
             </button>
@@ -663,6 +667,9 @@ async function confirmDelete() {
             </template>
           </div>
 
+          <!-- Systems tab -->
+          <SystemsSection v-if="activeTab === 'systems'" :project-id="projectId" />
+
           <!-- Rules tab -->
           <ProjectRulesTab v-if="activeTab === 'rules'" :project-id="projectId" />
         </div>