From 75d8e7ab4908165afebaaea6d004ef6c2879e7ba Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 27 May 2026 22:00:32 -0400
Subject: [PATCH] feat(rulebook): RulesView three-pane shell + child panes +
 rule editor

---
 .../components/rules/RuleEditorSlideOver.vue  | 123 ++++++++++++++++++
 .../src/components/rules/RuleListPane.vue     |  40 ++++++
 .../components/rules/RulebookDetailPane.vue   |  80 ++++++++++++
 .../src/components/rules/RulebookListPane.vue |  65 +++++++++
 frontend/src/views/RulesView.vue              | 118 +++++++++++++++++
 5 files changed, 426 insertions(+)
 create mode 100644 frontend/src/components/rules/RuleEditorSlideOver.vue
 create mode 100644 frontend/src/components/rules/RuleListPane.vue
 create mode 100644 frontend/src/components/rules/RulebookDetailPane.vue
 create mode 100644 frontend/src/components/rules/RulebookListPane.vue
 create mode 100644 frontend/src/views/RulesView.vue

diff --git a/frontend/src/components/rules/RuleEditorSlideOver.vue b/frontend/src/components/rules/RuleEditorSlideOver.vue
new file mode 100644
index 0000000..72e1c6c
--- /dev/null
+++ b/frontend/src/components/rules/RuleEditorSlideOver.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { ref, watch, onMounted } from "vue";
+import { useRulebooksStore } from "@/stores/rulebooks";
+
+const props = defineProps<{ ruleId: number | null; topicId: number | null }>();
+const emit = defineEmits<{ close: [] }>();
+
+const store = useRulebooksStore();
+const title = ref("");
+const statement = ref("");
+const why = ref("");
+const howToApply = ref("");
+
+const isCreating = ref(props.ruleId === null);
+
+async function load() {
+  if (props.ruleId !== null) {
+    await store.fetchRule(props.ruleId);
+    const r = store.currentRule;
+    if (r) {
+      title.value = r.title;
+      statement.value = r.statement;
+      why.value = r.why || "";
+      howToApply.value = r.how_to_apply || "";
+    }
+  } else {
+    title.value = "";
+    statement.value = "";
+    why.value = "";
+    howToApply.value = "";
+  }
+}
+
+async function save() {
+  if (!title.value.trim() || !statement.value.trim()) {
+    emit("close");
+    return;
+  }
+  if (isCreating.value && props.topicId !== null) {
+    await store.createRule(props.topicId, {
+      title: title.value, statement: statement.value,
+      why: why.value, how_to_apply: howToApply.value,
+    });
+  } else if (props.ruleId !== null) {
+    await store.updateRule(props.ruleId, {
+      title: title.value, statement: statement.value,
+      why: why.value, how_to_apply: howToApply.value,
+    });
+  }
+  emit("close");
+}
+
+async function remove() {
+  if (props.ruleId === null) return;
+  if (!confirm("Delete this rule? This cannot be undone.")) return;
+  await store.deleteRule(props.ruleId);
+  emit("close");
+}
+
+onMounted(load);
+watch(() => props.ruleId, load);
+</script>
+
+<template>
+  <div class="backdrop" @click="save">
+    <aside class="slide-over" @click.stop>
+      <header>
+        <h2>{{ isCreating ? "New rule" : "Edit rule" }}</h2>
+        <button v-if="!isCreating" class="trash" @click="remove" aria-label="Delete">🗑</button>
+        <button class="close" @click="save" aria-label="Close">×</button>
+      </header>
+      <label>
+        Title
+        <input v-model="title" placeholder="e.g. dev is home" />
+      </label>
+      <label>
+        Statement <span class="required">*</span>
+        <textarea v-model="statement" rows="3" placeholder="The actionable instruction (1-2 sentences)." />
+      </label>
+      <label>
+        Why
+        <textarea v-model="why" rows="4" placeholder="Rationale — the reason this rule exists." />
+      </label>
+      <label>
+        How to apply
+        <textarea v-model="howToApply" rows="4" placeholder="When / where this kicks in." />
+      </label>
+    </aside>
+  </div>
+</template>
+
+<style scoped>
+.backdrop {
+  position: fixed; inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 100;
+}
+.slide-over {
+  position: fixed; top: 0; right: 0; bottom: 0;
+  width: min(520px, 90vw);
+  background: var(--color-surface, #18181b);
+  border-left: 2px solid var(--color-primary, #6366f1);
+  padding: 1.5rem;
+  overflow-y: auto;
+  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
+}
+header { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
+header h2 {
+  flex: 1; margin: 0;
+  font-family: Fraunces, serif; font-style: italic;
+}
+label { display: block; margin-bottom: 1rem; }
+.required { color: var(--color-primary, #6366f1); }
+input, textarea {
+  width: 100%; margin-top: 0.25rem;
+  background: var(--color-bg, #111113); color: inherit;
+  border: 1px solid var(--color-border, #2a2a2e); border-radius: 6px;
+  padding: 0.5rem; font: inherit;
+  font-family: inherit;
+}
+.trash, .close { background: none; border: none; cursor: pointer; opacity: 0.6; font-size: 1.25em; }
+.trash:hover, .close:hover { opacity: 1; }
+</style>
diff --git a/frontend/src/components/rules/RuleListPane.vue b/frontend/src/components/rules/RuleListPane.vue
new file mode 100644
index 0000000..65ecac4
--- /dev/null
+++ b/frontend/src/components/rules/RuleListPane.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { RuleHeader } from "@/api/rulebooks";
+
+defineProps<{ topicId: number; rules: RuleHeader[] }>();
+const emit = defineEmits<{
+  "open-rule": [id: number];
+  "create-rule": [topicId: number];
+}>();
+</script>
+
+<template>
+  <section class="pane">
+    <header><h2>Rules</h2></header>
+    <ul>
+      <li v-for="r in rules" :key="r.id" @click="emit('open-rule', r.id)">
+        <div class="title">{{ r.title }}</div>
+        <div class="statement">{{ r.statement }}</div>
+      </li>
+    </ul>
+    <button class="new-rule" @click="emit('create-rule', topicId)">+ New rule</button>
+  </section>
+</template>
+
+<style scoped>
+.pane { background: var(--color-surface, #18181b); padding: 1rem; overflow-y: auto; }
+header h2 { font-family: Fraunces, serif; font-style: italic; margin: 0 0 0.5rem 0; }
+ul { list-style: none; padding: 0; margin: 1rem 0; }
+li {
+  padding: 0.75rem;
+  cursor: pointer;
+  border-radius: 6px;
+  border-left: 2px solid var(--color-primary, #6366f1);
+  margin-bottom: 0.5rem;
+  background: rgba(255, 255, 255, 0.02);
+}
+li:hover { background: var(--color-hover, rgba(255,255,255,0.05)); }
+.title { font-family: Fraunces, serif; font-style: italic; font-size: 1.05em; }
+.statement { font-size: 0.9em; opacity: 0.8; margin-top: 0.25rem; }
+.new-rule { cursor: pointer; }
+</style>
diff --git a/frontend/src/components/rules/RulebookDetailPane.vue b/frontend/src/components/rules/RulebookDetailPane.vue
new file mode 100644
index 0000000..6bb4636
--- /dev/null
+++ b/frontend/src/components/rules/RulebookDetailPane.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRulebooksStore } from "@/stores/rulebooks";
+import type { RulebookTopic } from "@/api/rulebooks";
+
+const props = defineProps<{
+  rulebookId: number;
+  topics: RulebookTopic[];
+  selectedTopicId: number | null;
+}>();
+const emit = defineEmits<{ "select-topic": [id: number] }>();
+
+const store = useRulebooksStore();
+const isCreating = ref(false);
+const newTitle = ref("");
+
+async function submitNew() {
+  const title = newTitle.value.trim();
+  if (!title) return;
+  const topic = await store.createTopic(props.rulebookId, { title });
+  newTitle.value = "";
+  isCreating.value = false;
+  emit("select-topic", topic.id);
+}
+</script>
+
+<template>
+  <section class="pane">
+    <header><h2>Topics</h2></header>
+    <ul>
+      <li
+        v-for="t in topics"
+        :key="t.id"
+        :class="{ active: t.id === selectedTopicId }"
+        @click="emit('select-topic', t.id)"
+      >
+        {{ t.title }}
+      </li>
+    </ul>
+    <div class="new-topic">
+      <button v-if="!isCreating" @click="isCreating = true">+ New topic</button>
+      <form v-else @submit.prevent="submitNew">
+        <input v-model="newTitle" autofocus placeholder="Topic title (e.g. git-workflow)" />
+        <div class="form-buttons">
+          <button type="submit">Create</button>
+          <button type="button" @click="isCreating = false">Cancel</button>
+        </div>
+      </form>
+    </div>
+    <!-- Subscription panel — populated in T14. -->
+    <div class="subscriptions">
+      <h3>Subscribers</h3>
+      <p class="hint">(subscription management — populated in next task)</p>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.pane { background: var(--color-surface, #18181b); padding: 1rem; overflow-y: auto; }
+header h2 { font-family: Fraunces, serif; font-style: italic; margin: 0 0 0.5rem 0; }
+ul { list-style: none; padding: 0; margin: 1rem 0; }
+li { padding: 0.5rem; cursor: pointer; border-radius: 6px; }
+li.active { background: var(--color-primary-bg, rgba(99,102,241,0.15)); }
+li:hover { background: var(--color-hover, rgba(255,255,255,0.05)); }
+.new-topic input {
+  width: 100%; margin-bottom: 0.5rem;
+  background: var(--color-bg, #111113); color: inherit;
+  border: 1px solid var(--color-border, #2a2a2e); border-radius: 6px;
+  padding: 0.5rem;
+}
+.form-buttons { display: flex; gap: 0.5rem; }
+.subscriptions {
+  margin-top: 2rem;
+  border-top: 1px solid var(--color-border, #2a2a2e);
+  padding-top: 1rem;
+}
+.subscriptions h3 { font-size: 0.9em; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.05em; }
+.hint { font-size: 0.85em; opacity: 0.6; }
+button { cursor: pointer; }
+</style>
diff --git a/frontend/src/components/rules/RulebookListPane.vue b/frontend/src/components/rules/RulebookListPane.vue
new file mode 100644
index 0000000..33f8657
--- /dev/null
+++ b/frontend/src/components/rules/RulebookListPane.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRulebooksStore } from "@/stores/rulebooks";
+import type { Rulebook } from "@/api/rulebooks";
+
+defineProps<{ rulebooks: Rulebook[]; selectedId: number | null }>();
+const emit = defineEmits<{ select: [id: number] }>();
+
+const store = useRulebooksStore();
+const isCreating = ref(false);
+const newTitle = ref("");
+
+async function submitNew() {
+  const title = newTitle.value.trim();
+  if (!title) return;
+  const rb = await store.createRulebook({ title });
+  newTitle.value = "";
+  isCreating.value = false;
+  emit("select", rb.id);
+}
+</script>
+
+<template>
+  <aside class="pane">
+    <header><h2>Rulebooks</h2></header>
+    <ul>
+      <li
+        v-for="rb in rulebooks"
+        :key="rb.id"
+        :class="{ active: rb.id === selectedId }"
+        @click="emit('select', rb.id)"
+      >
+        <span class="title">{{ rb.title }}</span>
+      </li>
+    </ul>
+    <div class="new-rulebook">
+      <button v-if="!isCreating" @click="isCreating = true">+ New rulebook</button>
+      <form v-else @submit.prevent="submitNew">
+        <input v-model="newTitle" autofocus placeholder="Rulebook title" />
+        <div class="form-buttons">
+          <button type="submit">Create</button>
+          <button type="button" @click="isCreating = false">Cancel</button>
+        </div>
+      </form>
+    </div>
+  </aside>
+</template>
+
+<style scoped>
+.pane { background: var(--color-surface, #18181b); padding: 1rem; overflow-y: auto; }
+header h2 { font-family: Fraunces, serif; font-style: italic; margin: 0 0 0.5rem 0; }
+ul { list-style: none; padding: 0; margin: 1rem 0; }
+li { padding: 0.5rem; cursor: pointer; border-radius: 6px; }
+li.active { background: var(--color-primary-bg, rgba(99,102,241,0.15)); }
+li:hover { background: var(--color-hover, rgba(255,255,255,0.05)); }
+.new-rulebook { margin-top: 1rem; }
+.new-rulebook input {
+  width: 100%; margin-bottom: 0.5rem;
+  background: var(--color-bg, #111113); color: inherit;
+  border: 1px solid var(--color-border, #2a2a2e); border-radius: 6px;
+  padding: 0.5rem;
+}
+.form-buttons { display: flex; gap: 0.5rem; }
+button { cursor: pointer; }
+</style>
diff --git a/frontend/src/views/RulesView.vue b/frontend/src/views/RulesView.vue
new file mode 100644
index 0000000..f491c33
--- /dev/null
+++ b/frontend/src/views/RulesView.vue
@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useRulebooksStore } from "@/stores/rulebooks";
+import RulebookListPane from "@/components/rules/RulebookListPane.vue";
+import RulebookDetailPane from "@/components/rules/RulebookDetailPane.vue";
+import RuleListPane from "@/components/rules/RuleListPane.vue";
+import RuleEditorSlideOver from "@/components/rules/RuleEditorSlideOver.vue";
+
+const store = useRulebooksStore();
+const route = useRoute();
+const router = useRouter();
+
+const selectedRulebookId = ref<number | null>(null);
+const selectedTopicId = ref<number | null>(null);
+const editingRuleId = ref<number | null>(null);
+const creatingRuleForTopic = ref<number | null>(null);
+
+function syncFromRoute() {
+  const rb = route.query.rb ? Number(route.query.rb) : null;
+  const topic = route.query.topic ? Number(route.query.topic) : null;
+  const rule = route.query.rule ? Number(route.query.rule) : null;
+  selectedRulebookId.value = rb;
+  selectedTopicId.value = topic;
+  editingRuleId.value = rule;
+}
+
+function selectRulebook(id: number) {
+  selectedRulebookId.value = id;
+  selectedTopicId.value = null;
+  router.replace({ query: { rb: String(id) } });
+  store.fetchTopics(id);
+}
+
+function selectTopic(id: number) {
+  selectedTopicId.value = id;
+  router.replace({ query: { ...route.query, topic: String(id) } });
+  store.fetchRules(id);
+}
+
+function openRule(id: number) {
+  editingRuleId.value = id;
+  router.replace({ query: { ...route.query, rule: String(id) } });
+}
+
+function closeRuleEditor() {
+  editingRuleId.value = null;
+  creatingRuleForTopic.value = null;
+  const { rule, ...rest } = route.query;
+  void rule;
+  router.replace({ query: rest });
+}
+
+function startCreatingRule(topicId: number) {
+  creatingRuleForTopic.value = topicId;
+}
+
+onMounted(async () => {
+  await store.fetchRulebooks();
+  syncFromRoute();
+  if (selectedRulebookId.value) await store.fetchTopics(selectedRulebookId.value);
+  if (selectedTopicId.value) await store.fetchRules(selectedTopicId.value);
+});
+
+watch(() => route.query, syncFromRoute);
+</script>
+
+<template>
+  <div class="rules-view">
+    <RulebookListPane
+      :rulebooks="store.rulebooks"
+      :selected-id="selectedRulebookId"
+      @select="selectRulebook"
+    />
+    <RulebookDetailPane
+      v-if="selectedRulebookId !== null"
+      :rulebook-id="selectedRulebookId"
+      :topics="store.topicsByRulebook[selectedRulebookId] || []"
+      :selected-topic-id="selectedTopicId"
+      @select-topic="selectTopic"
+    />
+    <div v-else class="pane empty">
+      <p>Select a rulebook to view its topics.</p>
+    </div>
+    <RuleListPane
+      v-if="selectedTopicId !== null"
+      :topic-id="selectedTopicId"
+      :rules="store.rulesByTopic[selectedTopicId] || []"
+      @open-rule="openRule"
+      @create-rule="startCreatingRule"
+    />
+    <div v-else class="pane empty">
+      <p>Select a topic to view its rules.</p>
+    </div>
+    <RuleEditorSlideOver
+      v-if="editingRuleId !== null || creatingRuleForTopic !== null"
+      :rule-id="editingRuleId"
+      :topic-id="creatingRuleForTopic"
+      @close="closeRuleEditor"
+    />
+  </div>
+</template>
+
+<style scoped>
+.rules-view {
+  display: grid;
+  grid-template-columns: 280px 1fr 1fr;
+  height: 100vh;
+  gap: 1px;
+  background: var(--color-border, #2a2a2e);
+}
+.pane.empty {
+  background: var(--color-surface, #18181b);
+  padding: 1rem;
+  opacity: 0.6;
+  font-style: italic;
+}
+</style>