diff --git a/CHANGELOG.md b/CHANGELOG.md
index 80654d07..91b509d1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -25,6 +25,7 @@ Lines marked **Upgrade step** need you to act after updating.
 -   A form's pages have one top bar instead of two: the form's name with its menu, a Draft or Live label, the pages, Preview, Publish and your account. Publish first checks for questions without text, rules that point to a deleted question and a missing privacy link. Once the form is live, Share has its link, Open form and Unpublish. On a phone the pages sit in a tab bar at the bottom. (#265)
 -   The form editor shows your whole form as one column. Each question shows its number, answer type, text, and if it is required, has rules or is hidden. The question you work on opens right there, also on a phone, where you couldn't edit questions before. Hiding a question, random order and custom answers are now under the question's Settings. An outline next to the form jumps to any question, and on a phone a question's Settings open from the bottom of the screen. Move a question with Alt+Up/Down, with Move up and Move down in its menu, or by dragging. (#268, #272, #275)
 -   Deleting a question, a group, an answer choice, a consent policy or a logic rule in the form editor now asks first in the app's own dialog. It names the question, how many answers will be deleted with it, and the questions whose rules will stop working. A choice nobody picked, or a policy nobody agreed to, is still deleted at once. (#269)
+-   Each rule now shows as a sentence under its question, and a group says when it's hidden. Edit changes a rule right there, and for choices, ratings and scales you pick the answer instead of typing it. A rule whose question was deleted shows in red and can't be saved until you fix it. (#274)
 
 ### Fixed
 
diff --git a/resources/js/Pages/Forms/Edit.test.ts b/resources/js/Pages/Forms/Edit.test.ts
index fba82d18..2424201c 100644
--- a/resources/js/Pages/Forms/Edit.test.ts
+++ b/resources/js/Pages/Forms/Edit.test.ts
@@ -12,7 +12,6 @@ const blocks = [
 const stubs = {
     AppLayout: { props: ["title"], template: "<main><slot /></main>" },
     DocumentList: { template: "<ol><li>questions</li></ol>" },
-    BlockLogicEditor: true,
 };
 
 let wrapper: VueWrapper | undefined;
diff --git a/resources/js/app.ts b/resources/js/app.ts
index 29da4271..bb2c4055 100644
--- a/resources/js/app.ts
+++ b/resources/js/app.ts
@@ -65,6 +65,7 @@ import {
     faTextSlash,
     faTrash,
     faTree,
+    faTriangleExclamation,
     faTrophy,
     faUnderline,
     faUser,
@@ -129,6 +130,7 @@ library.add(
     faTextSlash,
     faTrash,
     faTree,
+    faTriangleExclamation,
     faTrophy,
     faUnderline,
     faUser,
diff --git a/resources/js/components/Factory/Document/DocumentGroup.vue b/resources/js/components/Factory/Document/DocumentGroup.vue
index 36a11dd4..bb5ff4be 100644
--- a/resources/js/components/Factory/Document/DocumentGroup.vue
+++ b/resources/js/components/Factory/Document/DocumentGroup.vue
@@ -28,15 +28,15 @@
         title="Use a group to show or hide several questions with one rule."
         class="h-11 min-w-0 flex-1 rounded-md border-0 bg-transparent px-2 text-base font-semibold lg:h-9 lg:text-sm text-grey-700 placeholder:text-grey-600 hover:bg-grey-100 focus:bg-white focus:ring-2 focus:ring-blue-500"
       />
-      <span v-if="group.is_disabled" class="text-xs text-grey-600">Hidden</span>
+      <span v-if="group.is_disabled" class="text-xs text-grey-600"
+        >Always hidden</span
+      >
       <button
         type="button"
         class="flex h-11 items-center rounded-md px-2 text-sm font-semibold text-blue-700 lg:h-9 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
-        @click="logic.showLogicEditor(group)"
+        @click="addRule(group)"
       >
-        Rules<span v-if="group.logics?.length" class="tabular-nums"
-          >&nbsp;({{ group.logics.length }})</span
-        >
+        Add rule
       </button>
       <BlockMenu
         :block="group"
@@ -44,6 +44,7 @@
         @add-to-group="addQuestion"
       />
     </div>
+    <BlockRules :block="group" :numbers="numbers" class="pb-2 pl-8" />
 
     <div class="relative">
       <DocumentList
@@ -73,9 +74,11 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
 import { D9Icon } from "@deck9/ui";
-import { useForm, useLogic, useWorkbench } from "@/stores";
+import { useForm, useWorkbench } from "@/stores";
 import BlockMenu from "./BlockMenu.vue";
 import DocumentList from "./DocumentList.vue";
+import BlockRules from "./Rules/BlockRules.vue";
+import { addRule } from "./Rules/ruleEditing";
 import { useAddBlock } from "./blockFocus";
 import { useMoveBlock } from "./blockMove";
 
@@ -86,7 +89,6 @@ const props = defineProps<{
 
 const store = useForm();
 const workbench = useWorkbench();
-const logic = useLogic();
 const { addBlock } = useAddBlock();
 const { onMoveKey } = useMoveBlock();
 
diff --git a/resources/js/components/Factory/Document/DocumentList.vue b/resources/js/components/Factory/Document/DocumentList.vue
index 5c7f9ba9..5a08e47a 100644
--- a/resources/js/components/Factory/Document/DocumentList.vue
+++ b/resources/js/components/Factory/Document/DocumentList.vue
@@ -22,6 +22,12 @@
           :numbers="numbers"
         />
         <DocumentQuestion v-else :block="block" :number="numbers[block.uuid]" />
+        <BlockRules
+          v-if="block.type !== 'group'"
+          :block="block"
+          :numbers="numbers"
+          class="pl-8 sm:pl-12"
+        />
       </div>
     </Draggable>
   </Container>
@@ -33,6 +39,7 @@ import { Container, Draggable } from "vue3-smooth-dnd";
 import { useForm } from "@/stores";
 import DocumentGroup from "./DocumentGroup.vue";
 import DocumentQuestion from "./DocumentQuestion.vue";
+import BlockRules from "./Rules/BlockRules.vue";
 
 const props = defineProps<{
   groupId?: string;
diff --git a/resources/js/components/Factory/Document/DocumentQuestion.test.ts b/resources/js/components/Factory/Document/DocumentQuestion.test.ts
index f1a53f17..19414d91 100644
--- a/resources/js/components/Factory/Document/DocumentQuestion.test.ts
+++ b/resources/js/components/Factory/Document/DocumentQuestion.test.ts
@@ -51,8 +51,9 @@ describe("a closed question in the document", () => {
         expect(text).toContain("Which days can you help?");
         expect(text).toContain("Checkboxes · 2 choices");
         expect(text).toContain("Required");
-        expect(text).toContain("1 rule");
-        expect(text).toContain("Hidden");
+        // its rules show as sentences under it
+        expect(text).not.toContain("rule");
+        expect(text).toContain("Always hidden");
         expect(text).toContain("days");
         expect(text).not.toContain(question.uuid);
     });
@@ -66,6 +67,24 @@ describe("a closed question in the document", () => {
         expect(text).not.toContain(question.uuid);
     });
 
+    it("marks its number while the open question jumps here", async () => {
+        const workbench = useWorkbench();
+        const wrapper = mountQuestion();
+        const number = () => wrapper.find("span[aria-hidden] > span");
+
+        expect(number().text()).toBe("3");
+        expect(number().classes()).not.toContain("bg-blue-50");
+
+        workbench.block = {
+            id: 1,
+            uuid: "q-1",
+            logics: [{ action: "goto", action_payload: question.uuid }],
+        } as unknown as FormBlockModel;
+        await wrapper.vm.$nextTick();
+
+        expect(number().classes()).toContain("bg-blue-50");
+    });
+
     it("opens as a card when clicked", async () => {
         const workbench = useWorkbench();
         const wrapper = mountQuestion();
diff --git a/resources/js/components/Factory/Document/DocumentQuestion.vue b/resources/js/components/Factory/Document/DocumentQuestion.vue
index df54b1a7..fa047b6f 100644
--- a/resources/js/components/Factory/Document/DocumentQuestion.vue
+++ b/resources/js/components/Factory/Document/DocumentQuestion.vue
@@ -8,7 +8,13 @@
       <span
         aria-hidden="true"
         class="flex h-6 items-center text-[13px] tabular-nums text-grey-600"
-        >{{ number }}</span
+        ><span
+          :class="
+            isJumpTarget &&
+            'relative z-10 flex h-5 items-center rounded-full border border-blue-200 bg-blue-50 px-1.5 text-xs font-semibold text-blue-700'
+          "
+          >{{ number }}</span
+        ></span
       >
       <span
         aria-hidden="true"
@@ -53,10 +59,7 @@
           </template></span
         >
         <span v-if="block.is_required" class="text-red-700">Required</span>
-        <span v-if="ruleCount" class="tabular-nums"
-          >{{ ruleCount }} {{ ruleCount === 1 ? "rule" : "rules" }}</span
-        >
-        <span v-if="block.is_disabled">Hidden</span>
+        <span v-if="block.is_disabled">Always hidden</span>
         <span v-if="block.title" class="break-all font-mono">{{
           block.title
         }}</span>
@@ -74,6 +77,7 @@ import { plainText } from "./questionSummary";
 import QuestionCard from "./QuestionCard.vue";
 import { cursorFor } from "./blockFocus";
 import { useMoveBlock } from "./blockMove";
+import { jumpTargets } from "./Rules/ruleText";
 
 const props = defineProps<{
   block: FormBlockModel;
@@ -84,6 +88,10 @@ const workbench = useWorkbench();
 const { types } = useBlockTypes();
 
 const isOpen = computed(() => workbench.block?.id === props.block.id);
+// the open question's rules jump here
+const isJumpTarget = computed(() =>
+  jumpTargets(workbench.block).includes(props.block.uuid),
+);
 
 const text = computed(() => plainText(props.block.message));
 const blockType = computed(() =>
@@ -96,7 +104,6 @@ const choiceCount = computed(() =>
       ).length
     : null,
 );
-const ruleCount = computed(() => props.block.logics?.length ?? 0);
 
 const { onMoveKey } = useMoveBlock();
 const row = ref<HTMLButtonElement | null>(null);
diff --git a/resources/js/components/Factory/Document/FormDocument.test.ts b/resources/js/components/Factory/Document/FormDocument.test.ts
index 847160e0..6c84d953 100644
--- a/resources/js/components/Factory/Document/FormDocument.test.ts
+++ b/resources/js/components/Factory/Document/FormDocument.test.ts
@@ -13,7 +13,7 @@ const stubs = {
     DocumentList: {
         template: `<div><div id="row-b1" /><div id="row-b2" /></div>`,
     },
-    BlockLogicEditor: true,
+    RuleGutter: true,
 };
 
 let wrapper: VueWrapper | undefined;
diff --git a/resources/js/components/Factory/Document/FormDocument.vue b/resources/js/components/Factory/Document/FormDocument.vue
index fe991a6d..ab97a5b7 100644
--- a/resources/js/components/Factory/Document/FormDocument.vue
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -40,6 +40,7 @@
             </button>
           </div>
 
+          <RuleGutter />
           <DocumentList v-if="store.hasBlocks" :numbers="numbers" />
           <EmptyState
             v-else
@@ -94,7 +95,6 @@
       </DocumentOutline>
     </DialogPanel>
   </Dialog>
-  <BlockLogicEditor />
   <p class="sr-only" aria-live="polite">{{ moveNote }}</p>
 </template>
 
@@ -105,9 +105,9 @@ import { D9Button, D9Icon } from "@deck9/ui";
 import { useForm, useWorkbench } from "@/stores";
 import EmptyState from "@/components/EmptyState.vue";
 import QuestionsLoadState from "@/components/Factory/Shared/QuestionsLoadState.vue";
-import BlockLogicEditor from "@/components/Factory/Sidebar/BlockLogicEditor.vue";
 import DocumentList from "./DocumentList.vue";
 import DocumentOutline from "./DocumentOutline.vue";
+import RuleGutter from "./Rules/RuleGutter.vue";
 import { questionNumbers } from "./questionSummary";
 import { moveNote } from "./blockMove";
 import {
diff --git a/resources/js/components/Factory/Document/QuestionCard.vue b/resources/js/components/Factory/Document/QuestionCard.vue
index a81c38ef..f31444da 100644
--- a/resources/js/components/Factory/Document/QuestionCard.vue
+++ b/resources/js/components/Factory/Document/QuestionCard.vue
@@ -62,11 +62,9 @@
         <button
           type="button"
           class="flex h-11 items-center gap-1 rounded-md px-2 text-sm font-semibold text-blue-700 lg:h-9 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
-          @click="logic.showLogicEditor(block)"
+          @click="addRule(block)"
         >
-          Rules<span v-if="block.logics?.length" class="tabular-nums"
-            >&nbsp;({{ block.logics.length }})</span
-          >
+          Add rule
         </button>
         <BlockMenu :block="block" :label="`Options for question ${number}`" />
       </div>
@@ -123,7 +121,7 @@ import { computed, nextTick, onMounted, provide, ref, watch } from "vue";
 import { Dialog, DialogPanel, DialogTitle } from "@headlessui/vue";
 import { useMediaQuery } from "@vueuse/core";
 import { D9Icon, D9Select, D9Switch } from "@deck9/ui";
-import { useLogic, useWorkbench } from "@/stores";
+import { useWorkbench } from "@/stores";
 import Editor from "@/components/Factory/Shared/Editor.vue";
 import ConfigureClicks from "@/components/Factory/Main/ConfigureClicks.vue";
 import ConfigureConsents from "@/components/Factory/Main/ConfigureConsents.vue";
@@ -131,6 +129,7 @@ import { useBlockTypes } from "@/components/Factory/utils/useBlockTypes";
 import BlockMenu from "./BlockMenu.vue";
 import QuestionSettings from "./QuestionSettings.vue";
 import { cursorFor } from "./blockFocus";
+import { addRule } from "./Rules/ruleEditing";
 
 const props = defineProps<{
   block: FormBlockModel;
@@ -141,7 +140,6 @@ const props = defineProps<{
 provide("block", props.block);
 
 const workbench = useWorkbench();
-const logic = useLogic();
 const { types } = useBlockTypes();
 
 const id = computed(() => `question-${props.block.uuid}`);
diff --git a/resources/js/components/Factory/Document/Rules/BlockRules.test.ts b/resources/js/components/Factory/Document/Rules/BlockRules.test.ts
new file mode 100644
index 00000000..8eaacab0
--- /dev/null
+++ b/resources/js/components/Factory/Document/Rules/BlockRules.test.ts
@@ -0,0 +1,391 @@
+import { mount, VueWrapper } from "@vue/test-utils";
+import { D9Select } from "@deck9/ui";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { useForm, useLogic } from "@/stores";
+import { questionNumbers } from "../questionSummary";
+import BlockRules from "./BlockRules.vue";
+import { addRule, editing } from "./ruleEditing";
+
+const choices = (...labels: string[]) =>
+    labels.map((label, sequence) => ({
+        type: "button",
+        is_editable: true,
+        label,
+        sequence,
+    }));
+
+const question = (
+    uuid: string,
+    type: string,
+    text: string,
+    extra: Partial<FormBlockModel> = {},
+) =>
+    ({
+        id: uuid.length,
+        uuid,
+        type,
+        message: `<p>${text}</p>`,
+        parent_block: null,
+        interactions: [],
+        logics: [],
+        ...extra,
+    }) as unknown as FormBlockModel;
+
+const rule = (
+    action: FormBlockLogic["action"],
+    conditions: Partial<FormBlockLogicCondition>[],
+    target: string | null = null,
+): FormBlockLogic => ({
+    id: 1,
+    uuid: "rule-1",
+    form_block_id: 1,
+    name: "Rule #1",
+    action,
+    action_payload: target,
+    evaluate: action === "goto" ? "after" : "before",
+    conditions: conditions.map((condition) => ({
+        operator: "equals",
+        value: "",
+        chainOperator: "and",
+        ...condition,
+    })) as FormBlockLogicCondition[],
+});
+
+let blocks: FormBlockModel[];
+const find = (uuid: string) =>
+    useForm().blocks!.find((block) => block.uuid === uuid)!;
+
+beforeEach(() => {
+    blocks = [
+        question("q-come", "radio", "Will you come?", {
+            interactions: choices("Yes", "No, not this time") as never,
+        }),
+        question("q-days", "checkbox", "Which days?", {
+            interactions: choices("Mon", "Tue") as never,
+        }),
+        question("q-rate", "rating", "How was it?"),
+        question("q-date", "date", "When?"),
+        question("q-num", "input-number", "How many?"),
+        question("q-name", "input-short", "Your name?"),
+        question("g-1", "group", "", { title: "Feedback" }),
+        question("q-diff", "input-long", "What should we do differently?", {
+            parent_block: "g-1",
+        }),
+    ];
+    useForm().blocks = blocks;
+    useLogic().$reset();
+    editing.value = null;
+});
+
+const mountRules = (uuid: string) =>
+    mount(BlockRules, {
+        props: { block: find(uuid), numbers: questionNumbers(blocks) },
+        global: { stubs: { teleport: true } },
+        attachTo: document.body,
+    });
+
+const text = (wrapper: VueWrapper) => wrapper.text().replace(/\s+/g, " ");
+
+const select = (wrapper: VueWrapper, name: string) =>
+    wrapper
+        .findAllComponents(D9Select)
+        .find((field) => String(field.props("id")).endsWith(name))!;
+
+const optionLabels = (wrapper: VueWrapper, name: string) =>
+    (select(wrapper, name).props("options") as { label: string }[]).map(
+        (option) => option.label,
+    );
+
+const pick = async (wrapper: VueWrapper, name: string, label: string) => {
+    const field = select(wrapper, name);
+    const option = (field.props("options") as { label: string }[]).find(
+        (item) => item.label === label,
+    );
+    field.vm.$emit("update:modelValue", option);
+    await wrapper.vm.$nextTick();
+};
+
+const button = (wrapper: VueWrapper, label: string) =>
+    wrapper.findAll("button").find((item) => item.text() === label)!;
+
+describe("a rule under its question", () => {
+    it("reads a jump on the question's own answer as a short sentence", () => {
+        find("q-come").logics = [
+            rule(
+                "goto",
+                [{ source: "q-come", value: "No, not this time" }],
+                "q-diff",
+            ),
+        ];
+
+        expect(text(mountRules("q-come"))).toContain(
+            "If “No, not this time”, go to 7 · What should we do differently?",
+        );
+    });
+
+    it("names another question by its number, never its id", () => {
+        find("q-name").logics = [
+            rule(
+                "goto",
+                [
+                    { source: "q-come", operator: "equalsNot", value: "Yes" },
+                    { source: "q-days", operator: "contains", value: "Mon" },
+                ],
+                "q-diff",
+            ),
+        ];
+
+        const sentence = text(mountRules("q-name"));
+
+        expect(sentence).toContain(
+            "If question 1 is not “Yes” and question 2 includes “Mon”, go to 7 · What should",
+        );
+        expect(sentence).not.toContain("q-come");
+    });
+
+    it("says when a group is hidden", () => {
+        find("g-1").logics = [
+            rule("hide", [{ source: "q-come", value: "No, not this time" }]),
+        ];
+
+        expect(text(mountRules("g-1"))).toContain(
+            "Hidden if question 1 is “No, not this time”",
+        );
+    });
+
+    it("ignores an old target on a hide rule", () => {
+        find("g-1").logics = [
+            rule("show", [{ source: "q-come", value: "Yes" }], "q-name"),
+        ];
+
+        const sentence = text(mountRules("g-1"));
+
+        expect(sentence).toContain("Shown only if question 1 is “Yes”");
+        expect(sentence).not.toContain("go to");
+    });
+
+    it("shows a rule whose question was deleted in red", () => {
+        find("q-name").logics = [
+            rule("goto", [{ source: "gone", value: "Yes" }], "gone-too"),
+        ];
+
+        const wrapper = mountRules("q-name");
+        const broken = wrapper.findAll(".text-red-700");
+
+        expect(broken).toHaveLength(2);
+        expect(broken[0].text()).toContain("Deleted question");
+    });
+});
+
+describe("editing a rule in place", () => {
+    beforeEach(() => {
+        find("q-name").logics = [
+            rule("goto", [{ source: "q-come", value: "Yes" }], "q-diff"),
+        ];
+    });
+
+    const edit = async () => {
+        const wrapper = mountRules("q-name");
+        await button(wrapper, "Edit").trigger("click");
+        return wrapper;
+    };
+
+    it("turns the sentence into pickers", async () => {
+        const wrapper = await edit();
+
+        expect(text(wrapper)).not.toContain("If question 1 is “Yes”");
+        expect(optionLabels(wrapper, "-0-source")).toEqual([
+            "1 · Will you come?",
+            "2 · Which days?",
+            "3 · How was it?",
+            "4 · When?",
+            "5 · How many?",
+            "6 · Your name?",
+        ]);
+        expect(optionLabels(wrapper, "-target")).toEqual([
+            "7 · What should we do differently?",
+        ]);
+    });
+
+    it("offers the choices of a single choice question", async () => {
+        const wrapper = await edit();
+
+        expect(optionLabels(wrapper, "-0-operator")).toEqual(["is", "is not"]);
+        expect(optionLabels(wrapper, "-0-answer")).toEqual([
+            "Yes",
+            "No, not this time",
+        ]);
+    });
+
+    it("offers the range of a rating", async () => {
+        const wrapper = await edit();
+        await pick(wrapper, "-0-source", "3 · How was it?");
+
+        expect(optionLabels(wrapper, "-0-operator")).toContain("is more than");
+        expect(optionLabels(wrapper, "-0-answer")).toEqual([
+            "1",
+            "2",
+            "3",
+            "4",
+            "5",
+        ]);
+    });
+
+    it.each([
+        ["4 · When?", "date"],
+        ["5 · How many?", "number"],
+    ])("gives %s a %s field", async (source, type) => {
+        const wrapper = await edit();
+        await pick(wrapper, "-0-source", source);
+
+        expect(wrapper.find(`input[type=${type}]`).exists()).toBe(true);
+    });
+
+    it("keeps a text field for text, with a case hint", async () => {
+        const wrapper = await edit();
+        await pick(wrapper, "-0-source", "6 · Your name?");
+
+        expect(optionLabels(wrapper, "-0-operator")).toHaveLength(6);
+        expect(wrapper.find("input[type=text]").exists()).toBe(true);
+        expect(text(wrapper)).toContain("Upper and lower case must match.");
+    });
+
+    it("can't save a rule whose question was deleted until it's fixed", async () => {
+        find("q-name").logics = [
+            rule("goto", [{ source: "gone", value: "Yes" }], "q-diff"),
+        ];
+        const wrapper = await edit();
+        const save = () => button(wrapper, "Save rule");
+
+        expect(text(wrapper)).toContain("Deleted question");
+        expect(text(wrapper)).toContain(
+            "The question this rule used was deleted. Pick another one.",
+        );
+        expect(save().attributes("disabled")).toBeDefined();
+
+        await save().trigger("click");
+        expect(useLogic().saveSingleRule).not.toHaveBeenCalled();
+
+        await pick(wrapper, "-0-source", "1 · Will you come?");
+        expect(save().attributes("disabled")).toBeUndefined();
+    });
+
+    it("saves the picked answer and shows the sentence again", async () => {
+        const logic = useLogic();
+        // an update answers only true
+        vi.mocked(logic.saveSingleRule).mockResolvedValue(true as never);
+        const wrapper = await edit();
+
+        await pick(wrapper, "-0-answer", "No, not this time");
+        await button(wrapper, "Save rule").trigger("click");
+        await vi.waitFor(() => expect(editing.value).toBeNull());
+
+        expect(logic.saveSingleRule).toHaveBeenCalledWith(
+            expect.objectContaining({
+                action: "goto",
+                action_payload: "q-diff",
+                evaluate: "after",
+                conditions: [
+                    expect.objectContaining({
+                        source: "q-come",
+                        operator: "equals",
+                        value: "No, not this time",
+                    }),
+                ],
+            }),
+        );
+        expect(text(wrapper)).toContain("If question 1 is “No, not this time”");
+    });
+
+    it("closes on Escape, but not when an open list takes it", async () => {
+        const wrapper = await edit();
+        const editor = wrapper.find("[role=group]");
+        const listEscape = new KeyboardEvent("keydown", {
+            key: "Escape",
+            bubbles: true,
+            cancelable: true,
+        });
+        listEscape.preventDefault();
+
+        editor.element.dispatchEvent(listEscape);
+        expect(editing.value).not.toBeNull();
+
+        await editor.trigger("keydown", { key: "Escape" });
+        expect(editing.value).toBeNull();
+    });
+
+    it("shows why the server refused a rule", async () => {
+        vi.mocked(useLogic().saveSingleRule).mockRejectedValue({
+            response: {
+                status: 422,
+                data: { errors: { action_payload: ["Pick a question."] } },
+            },
+        });
+        const wrapper = await edit();
+
+        await button(wrapper, "Save rule").trigger("click");
+
+        await vi.waitFor(() =>
+            expect(wrapper.find("[role=alert]").text()).toContain(
+                "Pick a question.",
+            ),
+        );
+        expect(editing.value).not.toBeNull();
+    });
+
+    it("asks in the app's dialog before it removes a rule", async () => {
+        const logic = useLogic();
+        const wrapper = await edit();
+
+        await button(wrapper, "Remove rule").trigger("click");
+
+        expect(text(wrapper)).toContain("Remove this rule?");
+        expect(logic.removeRule).not.toHaveBeenCalled();
+
+        const confirm = wrapper
+            .findAll("button")
+            .filter((item) => item.text() === "Remove rule")
+            .at(-1)!;
+        await confirm.trigger("click");
+
+        expect(logic.removeRule).toHaveBeenCalledWith(0);
+    });
+});
+
+describe("adding a rule", () => {
+    it("starts a jump on the question's own answer, and Cancel drops it", async () => {
+        const owner = find("q-come");
+        addRule(owner);
+        const wrapper = mountRules("q-come");
+        await wrapper.vm.$nextTick();
+
+        expect(optionLabels(wrapper, "-0-source")).toEqual([
+            "1 · Will you come?",
+        ]);
+        expect(select(wrapper, "-0-source").props("modelValue")).toMatchObject({
+            id: "q-come",
+        });
+
+        await button(wrapper, "Cancel").trigger("click");
+        expect(owner.logics).toHaveLength(0);
+    });
+
+    it("ends when the editor is left, and an unsaved rule goes with it", async () => {
+        const owner = find("q-come");
+        addRule(owner);
+        const wrapper = mountRules("q-come");
+        await wrapper.vm.$nextTick();
+
+        wrapper.unmount();
+
+        expect(editing.value).toBeNull();
+        expect(owner.logics).toHaveLength(0);
+    });
+
+    it("hides a group by default", () => {
+        const group = find("g-1");
+        addRule(group);
+
+        expect(group.logics?.[0].action).toBe("hide");
+    });
+});
diff --git a/resources/js/components/Factory/Document/Rules/BlockRules.vue b/resources/js/components/Factory/Document/Rules/BlockRules.vue
new file mode 100644
index 00000000..9e9dc503
--- /dev/null
+++ b/resources/js/components/Factory/Document/Rules/BlockRules.vue
@@ -0,0 +1,54 @@
+<template>
+  <ul v-if="block.logics?.length" :aria-label="`Rules of ${owner}`">
+    <li
+      v-for="(rule, index) in block.logics"
+      :key="rule.uuid ?? `new-${index}`"
+    >
+      <RuleEditor
+        v-if="isEditing(index)"
+        v-bind="{ rule, index, owner, numbers, block }"
+        :id="`${id}-${index}`"
+        @close="returnTo(index)"
+      />
+      <RuleLine
+        v-else
+        v-bind="{ rule, index, owner, numbers, block }"
+        :id="`${id}-${index}`"
+        @edit="editRule(block, index)"
+      />
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount } from "vue";
+import RuleEditor from "./RuleEditor.vue";
+import RuleLine from "./RuleLine.vue";
+import { editing, editRule, returnFocus, stopEditing } from "./ruleEditing";
+
+const props = defineProps<{
+  block: FormBlockModel;
+  numbers: Record<string, number>;
+}>();
+
+const id = computed(() => `rules-${props.block.uuid}`);
+const owner = computed(() =>
+  props.block.type === "group"
+    ? `group ${props.block.title || "Group"}`
+    : `question ${props.numbers[props.block.uuid]}`,
+);
+
+const isEditing = (index: number) =>
+  editing.value?.block === props.block.uuid && editing.value.index === index;
+
+// leaving the page ends editing: coming back shows the sentence again
+onBeforeUnmount(() => {
+  if (editing.value?.block === props.block.uuid) stopEditing();
+});
+
+// the cursor goes back to the rule's Edit, or where it was for a dropped rule
+const returnTo = async (index: number) => {
+  await nextTick();
+  returnFocus(document.getElementById(`${id.value}-${index}-edit`));
+};
+</script>
diff --git a/resources/js/components/Factory/Document/Rules/DeletedQuestion.vue b/resources/js/components/Factory/Document/Rules/DeletedQuestion.vue
new file mode 100644
index 00000000..40da58ec
--- /dev/null
+++ b/resources/js/components/Factory/Document/Rules/DeletedQuestion.vue
@@ -0,0 +1,11 @@
+<template>
+  <span
+    class="inline-flex items-center gap-1 rounded bg-red-50 px-1.5 font-medium text-red-700 ring-1 ring-inset ring-red-200"
+  >
+    <D9Icon name="triangle-exclamation" aria-hidden="true" />Deleted question
+  </span>
+</template>
+
+<script setup lang="ts">
+import { D9Icon } from "@deck9/ui";
+</script>
diff --git a/resources/js/components/Factory/Document/Rules/RuleEditor.vue b/resources/js/components/Factory/Document/Rules/RuleEditor.vue
new file mode 100644
index 00000000..d7340144
--- /dev/null
+++ b/resources/js/components/Factory/Document/Rules/RuleEditor.vue
@@ -0,0 +1,418 @@
+<template>
+  <div
+    role="group"
+    :aria-label="`Rule ${index + 1} of ${owner}`"
+    class="my-1 space-y-3 rounded-lg border border-grey-200 bg-white p-3 text-[13px] text-grey-700 shadow-sm max-lg:[&_[aria-haspopup=listbox]]:py-[13px] max-lg:[&_input]:py-[13px]"
+    @keydown.esc="onEscape"
+  >
+    <div v-for="(condition, i) in draft.conditions" :key="i" class="space-y-1">
+      <div class="flex flex-wrap items-center gap-2">
+        <span v-if="i === 0" class="shrink-0 font-medium sm:w-20">If</span>
+        <div v-else class="w-20 shrink-0">
+          <span :id="`${id}-${i}-chain-label`" class="sr-only"
+            >And or or, condition {{ i + 1 }}</span
+          >
+          <D9Select
+            :id="`${id}-${i}-chain`"
+            size="small"
+            :options="chains"
+            :model-value="optionOf(chains, condition.chainOperator)"
+            @update:model-value="
+              (option) => (condition.chainOperator = option.id as 'and' | 'or')
+            "
+          />
+        </div>
+
+        <div
+          class="min-w-0 flex-1 basis-48 rounded-md sm:flex-none"
+          :class="isDeleted(condition.source) && 'ring-2 ring-red-500'"
+        >
+          <span :id="`${id}-${i}-source-label`" class="sr-only"
+            >Question for condition {{ i + 1 }}</span
+          >
+          <D9Select
+            :id="`${id}-${i}-source`"
+            size="small"
+            :options="sourceOptions"
+            :model-value="optionOf(sourceOptions, condition.source)"
+            :placeholder="
+              isDeleted(condition.source)
+                ? 'Deleted question'
+                : 'Pick a question'
+            "
+            @update:model-value="
+              (option) => setSource(condition, option.id as string)
+            "
+          />
+        </div>
+
+        <div class="w-32 shrink-0">
+          <span :id="`${id}-${i}-operator-label`" class="sr-only"
+            >Comparison for condition {{ i + 1 }}</span
+          >
+          <D9Select
+            :id="`${id}-${i}-operator`"
+            size="small"
+            :options="operatorsFor(question(condition.source))"
+            :model-value="
+              optionOf(
+                operatorsFor(question(condition.source)),
+                condition.operator,
+              )
+            "
+            @update:model-value="
+              (option) => (condition.operator = option.id as Operator)
+            "
+          />
+        </div>
+
+        <div class="min-w-0 flex-1 basis-28">
+          <template v-if="answerOptions(question(condition.source)).length">
+            <span :id="`${id}-${i}-answer-label`" class="sr-only"
+              >Answer for condition {{ i + 1 }}</span
+            >
+            <D9Select
+              :id="`${id}-${i}-answer`"
+              size="small"
+              placeholder="Pick an answer"
+              :options="answersOf(condition)"
+              :model-value="optionOf(answersOf(condition), condition.value)"
+              @update:model-value="
+                (option) => (condition.value = String(option.id))
+              "
+            />
+          </template>
+          <template v-else>
+            <label :for="`${id}-${i}-answer`" class="sr-only"
+              >Answer for condition {{ i + 1 }}</label
+            >
+            <D9Input
+              :id="`${id}-${i}-answer`"
+              :type="fieldType(condition)"
+              size="small"
+              block
+              placeholder="Answer"
+              :aria-describedby="
+                isText(condition) ? `${id}-${i}-hint` : undefined
+              "
+              :model-value="condition.value"
+              @update:model-value="
+                (value) => (condition.value = String(value ?? ''))
+              "
+            />
+          </template>
+        </div>
+
+        <button
+          v-if="draft.conditions.length > 1"
+          type="button"
+          :aria-label="`Remove condition ${i + 1}`"
+          class="grid h-11 w-11 shrink-0 place-items-center rounded-md lg:h-8 lg:w-8 text-grey-600 hover:bg-grey-100 hover:text-red-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+          @click="draft.conditions.splice(i, 1)"
+        >
+          <D9Icon name="trash" aria-hidden="true" />
+        </button>
+      </div>
+
+      <p v-if="isDeleted(condition.source)" class="text-xs text-red-700">
+        The question this rule used was deleted. Pick another one.
+      </p>
+      <p
+        v-if="isText(condition)"
+        :id="`${id}-${i}-hint`"
+        class="text-xs text-grey-600"
+      >
+        Upper and lower case must match.
+      </p>
+    </div>
+
+    <button
+      type="button"
+      class="flex h-11 items-center rounded-md px-2 font-semibold lg:h-8 text-blue-700 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+      @click="addCondition"
+    >
+      Add condition
+    </button>
+
+    <div class="flex flex-wrap items-center gap-2">
+      <span class="shrink-0 font-medium sm:w-20">then</span>
+      <div class="w-48 shrink-0">
+        <span :id="`${id}-action-label`" class="sr-only">Action</span>
+        <D9Select
+          :id="`${id}-action`"
+          size="small"
+          :options="actions"
+          :model-value="optionOf(actions, draft.action)"
+          @update:model-value="
+            (option) => (draft.action = option.id as FormBlockLogic['action'])
+          "
+        />
+      </div>
+      <div
+        v-if="draft.action === 'goto'"
+        class="min-w-0 flex-1 basis-60 rounded-md"
+        :class="targetDeleted && 'ring-2 ring-red-500'"
+      >
+        <span :id="`${id}-target-label`" class="sr-only">Go to question</span>
+        <D9Select
+          :id="`${id}-target`"
+          size="small"
+          :options="targetOptions"
+          :model-value="optionOf(targetOptions, draft.action_payload)"
+          :placeholder="targetDeleted ? 'Deleted question' : 'Pick a question'"
+          @update:model-value="
+            (option) => (draft.action_payload = option.id as string)
+          "
+        />
+      </div>
+    </div>
+    <p v-if="targetDeleted" class="text-xs text-red-700">
+      The question this rule went to was deleted. Pick another one.
+    </p>
+
+    <ul
+      v-if="errors.length"
+      role="alert"
+      class="space-y-1 text-xs text-red-700"
+    >
+      <li v-for="error in errors" :key="error">{{ error }}</li>
+    </ul>
+
+    <div
+      class="flex flex-wrap items-center gap-2 border-t border-grey-200 pt-3"
+    >
+      <button
+        v-if="rule.id !== undefined"
+        type="button"
+        class="flex h-11 items-center rounded-md px-2 font-semibold lg:h-8 text-red-700 hover:bg-red-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+        @click="isAsking = true"
+      >
+        Remove rule
+      </button>
+      <div class="ml-auto flex gap-2">
+        <D9Button
+          label="Cancel"
+          color="light"
+          size="small"
+          class="min-h-11 lg:min-h-0"
+          @click="cancel"
+        />
+        <D9Button
+          label="Save rule"
+          size="small"
+          class="min-h-11 lg:min-h-0"
+          :is-loading="saving"
+          :is-disabled="broken"
+          :disabled="broken"
+          @click="save"
+        />
+      </div>
+    </div>
+
+    <DeleteDialog
+      :show="isAsking"
+      title="Remove this rule?"
+      text="This can't be undone."
+      confirm-label="Remove rule"
+      @close="isAsking = false"
+      @confirm="remove"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from "vue";
+import truncate from "lodash/truncate";
+import { D9Button, D9Icon, D9Input, D9Select } from "@deck9/ui";
+import { useForm, useLogic } from "@/stores";
+import { findAllBlocksBeforeTarget } from "@/stores/helpers/queue";
+import DeleteDialog from "@/components/Factory/Shared/DeleteDialog.vue";
+import { plainText } from "../questionSummary";
+import { answerKind, answerOptions, operatorsFor } from "./ruleText";
+import { editing, keepSaved, stopEditing } from "./ruleEditing";
+
+const props = defineProps<{
+  id: string;
+  block: FormBlockModel;
+  rule: FormBlockLogic;
+  index: number;
+  owner: string;
+  numbers: Record<string, number>;
+}>();
+const emit = defineEmits<{ close: [] }>();
+
+const store = useForm();
+const logic = useLogic();
+
+type Option = { id: string; label: string };
+
+// edits a copy: Cancel leaves the rule as it was
+const draft = reactive({
+  ...props.rule,
+  conditions: ((props.rule.conditions ?? []) as FormBlockLogicCondition[]).map(
+    (condition) => ({ ...condition }),
+  ),
+});
+const saving = ref(false);
+const errors = ref<string[]>([]);
+
+const isGroup = props.block.type === "group";
+const chains: Option[] = [
+  { id: "and", label: "And" },
+  { id: "or", label: "Or" },
+];
+const actions: Option[] = [
+  ...(isGroup ? [] : [{ id: "goto", label: "go to" }]),
+  { id: "hide", label: `hide this ${isGroup ? "group" : "question"}` },
+  { id: "show", label: `show this ${isGroup ? "group" : "question"}` },
+];
+
+const question = (uuid?: string | null) =>
+  (store.blocks ?? []).find(
+    (block) => block.uuid === uuid && block.type !== "group",
+  );
+const isDeleted = (uuid?: string | null) => !!uuid && !question(uuid);
+const optionOf = <T extends { id: string }>(options: T[], id?: string | null) =>
+  options.find((option) => option.id === id) ?? null;
+const toOption = (block: FormBlockModel): Option => {
+  const text = truncate(plainText(block.message), {
+    length: 80,
+    separator: " ",
+  });
+
+  return {
+    id: block.uuid,
+    label: `${props.numbers[block.uuid]} · ${text || "No question text yet"}`,
+  };
+};
+
+// a jump can use the question's own answer; hide and show only earlier ones
+const sourceOptions = computed(() =>
+  findAllBlocksBeforeTarget(store.blocksTree, props.block.uuid, {
+    includeTarget: draft.action === "goto",
+  })
+    .filter((block) => answerKind(block))
+    .map(toOption),
+);
+
+// jumps go forward; an earlier target a rule already has stays
+const targetOptions = computed(() =>
+  (store.blocks ?? [])
+    .filter(
+      (block) =>
+        block.type !== "group" &&
+        (props.numbers[block.uuid] > props.numbers[props.block.uuid] ||
+          block.uuid === draft.action_payload),
+    )
+    .sort((a, b) => props.numbers[a.uuid] - props.numbers[b.uuid])
+    .map(toOption),
+);
+
+const targetDeleted = computed(
+  () => draft.action === "goto" && isDeleted(draft.action_payload),
+);
+const broken = computed(
+  () =>
+    targetDeleted.value ||
+    draft.conditions.some((condition) => isDeleted(condition.source)),
+);
+
+const answersOf = (condition: FormBlockLogicCondition): Option[] =>
+  answerOptions(question(condition.source)).map((answer) => ({
+    id: answer,
+    label: answer,
+  }));
+const isText = (condition: FormBlockLogicCondition) =>
+  answerKind(question(condition.source)) === "text";
+const fieldType = (condition: FormBlockLogicCondition) =>
+  ({ number: "number", date: "date" })[
+    answerKind(question(condition.source)) as string
+  ] ?? "text";
+
+const setSource = (condition: FormBlockLogicCondition, uuid: string) => {
+  condition.source = uuid;
+  condition.operator = operatorsFor(question(uuid))[0].id;
+  condition.value = "";
+};
+
+const addCondition = () => {
+  draft.conditions.push({
+    source: undefined,
+    operator: "equals",
+    value: "",
+    chainOperator: "and",
+  });
+};
+
+if (!draft.conditions.length) {
+  addCondition();
+}
+
+const close = () => {
+  emit("close");
+};
+
+const cancel = () => {
+  stopEditing();
+  close();
+};
+
+// Escape in an open list only closes the list
+const onEscape = (event: KeyboardEvent) => {
+  const target = event.target as HTMLElement;
+
+  if (!event.defaultPrevented && !target.closest("[aria-expanded=true]")) {
+    cancel();
+  }
+};
+
+const save = async () => {
+  if (broken.value || saving.value) {
+    return;
+  }
+
+  saving.value = true;
+  errors.value = [];
+  // the store saves the rules of its block
+  logic.block = props.block;
+
+  try {
+    const isGoto = draft.action === "goto";
+    const rule: FormBlockLogic = {
+      ...draft,
+      evaluate: isGoto ? "after" : "before",
+      action_payload: isGoto ? draft.action_payload : null,
+    };
+    const saved = await logic.saveSingleRule(rule);
+
+    // a new rule comes back with its id; an update answers only true
+    keepSaved(typeof saved === "object" ? saved : rule);
+    close();
+  } catch (error: any) {
+    const data = error?.response?.status === 422 ? error.response.data : null;
+    errors.value = data?.errors
+      ? (Object.values(data.errors).flat() as string[])
+      : ["The rule wasn't saved. Check your connection and try again."];
+  } finally {
+    saving.value = false;
+  }
+};
+
+const isAsking = ref(false);
+
+const remove = async () => {
+  isAsking.value = false;
+  logic.block = props.block;
+  const count = props.block.logics?.length ?? 0;
+
+  await logic.removeRule(props.index);
+
+  // a failed delete keeps the rule and shows the save error
+  if ((props.block.logics?.length ?? 0) < count) {
+    editing.value = null;
+    close();
+  }
+};
+
+onMounted(() => document.getElementById(`${props.id}-0-source`)?.focus());
+</script>
diff --git a/resources/js/components/Factory/Document/Rules/RuleGutter.test.ts b/resources/js/components/Factory/Document/Rules/RuleGutter.test.ts
new file mode 100644
index 00000000..4aa8b31d
--- /dev/null
+++ b/resources/js/components/Factory/Document/Rules/RuleGutter.test.ts
@@ -0,0 +1,58 @@
+import { mount } from "@vue/test-utils";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useForm, useWorkbench } from "@/stores";
+import RuleGutter from "./RuleGutter.vue";
+
+const block = (uuid: string, logics: Partial<FormBlockLogic>[] = []) =>
+    ({ uuid, type: "radio", logics }) as unknown as FormBlockModel;
+
+const row = (uuid: string, top: number) => {
+    const element = document.createElement("div");
+    element.id = `row-${uuid}`;
+    element.getBoundingClientRect = () => ({ top }) as DOMRect;
+    document.body.append(element);
+};
+
+const lines = () => document.querySelectorAll("[data-rule-line]");
+
+describe("the gutter line of the open question", () => {
+    beforeEach(() => {
+        row("q-1", 100);
+        row("q-2", 200);
+        row("q-3", 300);
+    });
+
+    afterEach(() => {
+        document.body.innerHTML = "";
+    });
+
+    const open = (source: FormBlockModel) => {
+        useForm().blocks = [source, block("q-2"), block("q-3")];
+        useWorkbench().block = source;
+        return mount(RuleGutter, { attachTo: document.body });
+    };
+
+    it("runs from the question down to where its rule jumps", async () => {
+        open(block("q-1", [{ action: "goto", action_payload: "q-3" }]));
+
+        await vi.waitFor(() => expect(lines()).toHaveLength(1));
+        const line = lines()[0] as HTMLElement;
+
+        expect(line.style.top).toBe("124px");
+        expect(line.style.height).toBe("200px");
+    });
+
+    it("draws nothing for hide rules, deleted targets or jumps back up", async () => {
+        const wrapper = open(
+            block("q-2", [
+                { action: "hide", action_payload: "q-3" },
+                { action: "goto", action_payload: "gone" },
+                { action: "goto", action_payload: "q-1" },
+            ]),
+        );
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
+
+        expect(lines()).toHaveLength(0);
+    });
+});
diff --git a/resources/js/components/Factory/Document/Rules/RuleGutter.vue b/resources/js/components/Factory/Document/Rules/RuleGutter.vue
new file mode 100644
index 00000000..d62df7f9
--- /dev/null
+++ b/resources/js/components/Factory/Document/Rules/RuleGutter.vue
@@ -0,0 +1,81 @@
+<template>
+  <div
+    ref="anchor"
+    aria-hidden="true"
+    class="pointer-events-none relative z-10 h-0"
+  >
+    <template v-for="line in lines" :key="line.target">
+      <span
+        data-rule-line
+        class="absolute left-[3px] w-0.5 bg-blue-200"
+        :style="{ top: `${line.top}px`, height: `${line.height}px` }"
+      />
+      <span
+        class="absolute left-0 h-2 w-2 rounded-full bg-blue-500"
+        :style="{ top: `${line.top - 4}px` }"
+      />
+      <span
+        class="absolute left-[3px] h-0.5 w-4 bg-blue-200"
+        :style="{ top: `${line.top + line.height - 1}px` }"
+      />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from "vue";
+import { useResizeObserver } from "@vueuse/core";
+import { useForm, useWorkbench } from "@/stores";
+import { jumpTargets } from "./ruleText";
+
+const store = useForm();
+const workbench = useWorkbench();
+const anchor = ref<HTMLElement | null>(null);
+const lines = ref<{ target: string; top: number; height: number }[]>([]);
+
+// a row's number sits 24 px below the row's top
+const NUMBER_MIDDLE = 24;
+
+// where the open question's rules jump to
+const targets = computed(() => jumpTargets(workbench.block));
+
+const measure = () => {
+  const origin = anchor.value?.getBoundingClientRect().top;
+  const from = document
+    .getElementById(`row-${workbench.block?.uuid}`)
+    ?.getBoundingClientRect().top;
+
+  lines.value = [];
+
+  if (origin === undefined || from === undefined) {
+    return;
+  }
+
+  const top = from - origin + NUMBER_MIDDLE;
+
+  for (const target of new Set(targets.value)) {
+    const to = document
+      .getElementById(`row-${target}`)
+      ?.getBoundingClientRect().top;
+    const height = to === undefined ? 0 : to - origin + NUMBER_MIDDLE - top;
+
+    if (height > 0) {
+      lines.value.push({ target, top, height });
+    }
+  }
+};
+
+// the order of the rows: a move changes no height
+const order = computed(() =>
+  (store.blocks ?? [])
+    .map((block) => `${block.uuid}:${block.parent_block}`)
+    .join(),
+);
+
+watch([targets, order, () => workbench.block?.uuid], () => nextTick(measure), {
+  immediate: true,
+});
+
+// rows grow and shrink while typing, opening and moving
+useResizeObserver(() => anchor.value?.parentElement, measure);
+</script>
diff --git a/resources/js/components/Factory/Document/Rules/RuleLine.vue b/resources/js/components/Factory/Document/Rules/RuleLine.vue
new file mode 100644
index 00000000..c574f04b
--- /dev/null
+++ b/resources/js/components/Factory/Document/Rules/RuleLine.vue
@@ -0,0 +1,138 @@
+<template>
+  <div class="flex flex-wrap items-center gap-x-1 py-0.5 pl-9">
+    <p class="min-w-0 py-1 text-[13px] leading-6 text-grey-700">
+      <template v-for="(part, i) in parts" :key="i">
+        <DeletedQuestion v-if="part.deleted" />
+        <template v-else-if="part.number"
+          ><span class="sr-only">{{ "question " }}</span
+          ><span class="tabular-nums">{{ part.number }}</span></template
+        >
+        <span
+          v-else-if="part.value !== undefined"
+          class="font-medium text-grey-900"
+          >“{{ part.value }}”</span
+        >
+        <template v-else>{{ part.text }}</template>
+      </template>
+      <button
+        v-if="target"
+        type="button"
+        :title="targetLabel"
+        class="relative inline-flex h-6 max-w-full items-center rounded-md bg-blue-50 px-2 align-middle font-medium text-blue-700 hover:bg-blue-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 sm:max-w-[22rem] max-lg:before:absolute max-lg:before:inset-x-0 max-lg:before:-inset-y-2.5"
+        @click="goToTarget"
+      >
+        <span class="truncate">{{ targetLabel }}</span>
+      </button>
+    </p>
+    <button
+      :id="`${id}-edit`"
+      type="button"
+      :aria-label="`Edit rule ${index + 1} of ${owner}`"
+      class="flex h-11 shrink-0 items-center rounded-md px-2 text-[13px] lg:h-8 font-semibold text-blue-700 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+      @click="emit('edit')"
+    >
+      Edit
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useForm, useWorkbench } from "@/stores";
+import { plainText } from "../questionSummary";
+import { focusBlock } from "../blockFocus";
+import { operatorLabel } from "./ruleText";
+import DeletedQuestion from "./DeletedQuestion.vue";
+
+const props = defineProps<{
+  id: string;
+  block: FormBlockModel;
+  rule: FormBlockLogic;
+  index: number;
+  // "question 4" or "group Feedback"
+  owner: string;
+  numbers: Record<string, number>;
+}>();
+const emit = defineEmits<{ edit: [] }>();
+
+const store = useForm();
+const workbench = useWorkbench();
+
+type Part = {
+  text?: string;
+  value?: string;
+  number?: number;
+  deleted?: boolean;
+};
+
+const question = (uuid?: string | null) =>
+  (store.blocks ?? []).find(
+    (block) => block.uuid === uuid && block.type !== "group",
+  );
+
+const isGoto = computed(() => props.rule.action === "goto");
+const target = computed(() =>
+  isGoto.value ? question(props.rule.action_payload) : undefined,
+);
+const targetLabel = computed(() => {
+  const block = target.value;
+  return block
+    ? `${props.numbers[block.uuid]} · ${plainText(block.message) || "No question text yet"}`
+    : "";
+});
+
+const lead = { goto: "If ", hide: "Hidden if ", show: "Shown only if " };
+
+const parts = computed(() => {
+  const conditions = (props.rule.conditions ?? []) as FormBlockLogicCondition[];
+  const [first] = conditions;
+  // "If “No”, go to …" when a question jumps on its own answer
+  const short =
+    isGoto.value &&
+    conditions.length === 1 &&
+    first.source === props.block.uuid &&
+    (first.operator === "equals" || first.operator === "contains");
+  const parts: Part[] = [{ text: lead[props.rule.action] }];
+
+  conditions.forEach((condition, i) => {
+    if (i > 0) {
+      parts.push({ text: condition.chainOperator === "or" ? " or " : " and " });
+    }
+
+    if (!short) {
+      const source = question(condition.source);
+
+      if (source) {
+        parts.push({ number: props.numbers[source.uuid] });
+      } else {
+        parts.push(condition.source ? { deleted: true } : { text: "…" });
+      }
+
+      parts.push({ text: ` ${operatorLabel(condition.operator, source)} ` });
+    }
+
+    parts.push({ value: condition.value ?? "" });
+  });
+
+  if (!conditions.length) {
+    parts.push({ text: "…" });
+  }
+
+  if (isGoto.value) {
+    parts.push({ text: ", go to " });
+
+    if (!target.value) {
+      parts.push(props.rule.action_payload ? { deleted: true } : { text: "…" });
+    }
+  }
+
+  return parts;
+});
+
+const goToTarget = () => {
+  if (target.value) {
+    workbench.putOnWorkbench(target.value);
+    focusBlock(target.value);
+  }
+};
+</script>
diff --git a/resources/js/components/Factory/Document/Rules/ruleEditing.ts b/resources/js/components/Factory/Document/Rules/ruleEditing.ts
new file mode 100644
index 00000000..df019ead
--- /dev/null
+++ b/resources/js/components/Factory/Document/Rules/ruleEditing.ts
@@ -0,0 +1,88 @@
+import { ref } from "vue";
+import { useForm, useWorkbench } from "@/stores";
+import { answerKind, operatorsFor } from "./ruleText";
+
+// the one rule that shows as pickers: its block and its place in the block's rules
+export const editing = ref<{ block: string; index: number } | null>(null);
+
+// where the cursor goes back to when a new rule is dropped
+let opener: HTMLElement | null = null;
+
+// ends editing; a new rule that was never saved goes with it
+export function stopEditing() {
+    const current = editing.value;
+    editing.value = null;
+
+    const block = useForm().blocks?.find(
+        (item) => item.uuid === current?.block,
+    );
+    const rule = current && block?.logics?.[current.index];
+
+    if (rule && rule.id === undefined) {
+        block.logics?.splice(current.index, 1);
+    }
+}
+
+function start(block: FormBlockModel, index: number) {
+    const workbench = useWorkbench();
+
+    opener = document.activeElement as HTMLElement | null;
+    editing.value = { block: block.uuid, index };
+
+    if (workbench.block?.id !== block.id) {
+        workbench.putOnWorkbench(block);
+    }
+}
+
+export function editRule(block: FormBlockModel, index: number) {
+    stopEditing();
+    start(block, index);
+}
+
+// a question jumps on its own answer; a group hides
+export function addRule(block: FormBlockModel) {
+    stopEditing();
+
+    const isGroup = block.type === "group";
+    const source = !isGroup && answerKind(block) ? block : null;
+    const logics = block.logics ?? [];
+
+    block.logics = [
+        ...logics,
+        {
+            form_block_id: block.id,
+            name: `Rule #${logics.length + 1}`,
+            action: isGroup ? "hide" : "goto",
+            action_payload: null,
+            evaluate: isGroup ? "before" : "after",
+            conditions: [
+                {
+                    source: source?.uuid,
+                    operator: operatorsFor(source)[0].id,
+                    value: "",
+                    chainOperator: "and",
+                },
+            ],
+        },
+    ];
+
+    start(block, logics.length);
+}
+
+// the saved rule takes the place of the one being edited
+export function keepSaved(rule: FormBlockLogic) {
+    const current = editing.value;
+    const block = useForm().blocks?.find(
+        (item) => item.uuid === current?.block,
+    );
+
+    if (current && block?.logics) {
+        block.logics[current.index] = rule;
+    }
+
+    editing.value = null;
+}
+
+export function returnFocus(fallback: HTMLElement | null) {
+    (fallback ?? (opener?.isConnected ? opener : null))?.focus();
+}
diff --git a/resources/js/components/Factory/Document/Rules/ruleText.test.ts b/resources/js/components/Factory/Document/Rules/ruleText.test.ts
new file mode 100644
index 00000000..23bcbc5b
--- /dev/null
+++ b/resources/js/components/Factory/Document/Rules/ruleText.test.ts
@@ -0,0 +1,79 @@
+import { describe, expect, it } from "vitest";
+import { answerOptions, operatorLabel, operatorsFor } from "./ruleText";
+
+const block = (type: string, interactions: unknown[] = []) =>
+    ({ uuid: type, type, interactions }) as unknown as FormBlockModel;
+
+const labels = (type: string) => operatorsFor(block(type)).map((o) => o.label);
+
+describe("rule operators", () => {
+    it("offer is and is not for a single choice", () => {
+        expect(labels("radio")).toEqual(["is", "is not"]);
+    });
+
+    it("offer includes and doesn't include for checkboxes", () => {
+        expect(labels("checkbox")).toEqual(["includes", "doesn't include"]);
+    });
+
+    it.each(["input-number", "rating", "scale", "date"])(
+        "offer comparisons for %s",
+        (type) => {
+            expect(labels(type)).toEqual([
+                "is",
+                "is not",
+                "is less than",
+                "is more than",
+            ]);
+        },
+    );
+
+    it("offer all six for text", () => {
+        expect(labels("input-short")).toEqual([
+            "is",
+            "is not",
+            "contains",
+            "doesn't contain",
+            "is less than",
+            "is more than",
+        ]);
+    });
+
+    it("name a stored operator in words", () => {
+        expect(operatorLabel("equals", block("radio"))).toBe("is");
+        expect(operatorLabel("contains", block("checkbox"))).toBe("includes");
+        expect(operatorLabel("isGreaterThan", undefined)).toBe("is more than");
+    });
+});
+
+describe("rule answers", () => {
+    it("are the choices of a choice question, in order", () => {
+        const question = block("radio", [
+            { type: "button", is_editable: true, label: "No", sequence: 2 },
+            { type: "button", is_editable: true, label: "Yes", sequence: 1 },
+            { type: "button", is_editable: false, label: "Other", sequence: 3 },
+            { type: "button", is_editable: true, label: "", sequence: 4 },
+        ]);
+
+        expect(answerOptions(question)).toEqual(["Yes", "No"]);
+    });
+
+    it("are the range of a rating or scale", () => {
+        const scale = block("scale", [
+            { type: "range", options: { start: 0, end: 3 } },
+        ]);
+
+        expect(answerOptions(scale)).toEqual(["0", "1", "2", "3"]);
+        expect(answerOptions(block("rating"))).toEqual([
+            "1",
+            "2",
+            "3",
+            "4",
+            "5",
+        ]);
+    });
+
+    it("are free for text, number and date", () => {
+        expect(answerOptions(block("input-short"))).toEqual([]);
+        expect(answerOptions(block("date"))).toEqual([]);
+    });
+});
diff --git a/resources/js/components/Factory/Document/Rules/ruleText.ts b/resources/js/components/Factory/Document/Rules/ruleText.ts
new file mode 100644
index 00000000..95bc4065
--- /dev/null
+++ b/resources/js/components/Factory/Document/Rules/ruleText.ts
@@ -0,0 +1,126 @@
+import sortBy from "lodash/sortBy";
+
+// what a rule can compare a question's answer with
+export type AnswerKind =
+    | "choice"
+    | "multi"
+    | "range"
+    | "number"
+    | "date"
+    | "text";
+
+const kinds: Partial<Record<FormBlockType, AnswerKind>> = {
+    radio: "choice",
+    checkbox: "multi",
+    rating: "range",
+    scale: "range",
+    "input-number": "number",
+    date: "date",
+    "input-short": "text",
+    "input-long": "text",
+    "input-email": "text",
+    "input-link": "text",
+    "input-phone": "text",
+    "input-secret": "text",
+};
+
+const comparisons: Operator[] = [
+    "equals",
+    "equalsNot",
+    "isLowerThan",
+    "isGreaterThan",
+];
+
+const operatorsByKind: Record<AnswerKind, Operator[]> = {
+    choice: ["equals", "equalsNot"],
+    // checkbox answers are joined into one text, so "includes" is a contains
+    multi: ["contains", "containsNot"],
+    range: comparisons,
+    number: comparisons,
+    date: comparisons,
+    text: [
+        "equals",
+        "equalsNot",
+        "contains",
+        "containsNot",
+        "isLowerThan",
+        "isGreaterThan",
+    ],
+};
+
+const words: Record<Operator, string> = {
+    equals: "is",
+    equalsNot: "is not",
+    contains: "contains",
+    containsNot: "doesn't contain",
+    isLowerThan: "is less than",
+    isGreaterThan: "is more than",
+};
+
+const checkboxWords: Partial<Record<Operator, string>> = {
+    contains: "includes",
+    containsNot: "doesn't include",
+};
+
+export function answerKind(block?: FormBlockModel | null): AnswerKind | null {
+    return (block && kinds[block.type]) ?? null;
+}
+
+export function operatorLabel(
+    operator: Operator | undefined,
+    block?: FormBlockModel | null,
+): string {
+    if (!operator) {
+        return "is";
+    }
+
+    return (
+        (answerKind(block) === "multi" && checkboxWords[operator]) ||
+        words[operator]
+    );
+}
+
+export function operatorsFor(block?: FormBlockModel | null) {
+    const kind = answerKind(block);
+
+    return (kind ? operatorsByKind[kind] : operatorsByKind.text).map((id) => ({
+        id,
+        label: operatorLabel(id, block),
+    }));
+}
+
+// the answers a choice, rating or scale question can give; free fields give none
+export function answerOptions(block?: FormBlockModel | null): string[] {
+    const interactions = block?.interactions ?? [];
+    const kind = answerKind(block);
+
+    if (kind === "choice" || kind === "multi") {
+        const labels = sortBy(interactions, "sequence")
+            .filter(
+                (item) =>
+                    item.type === "button" && item.is_editable && item.label,
+            )
+            .map((item) => item.label as string);
+
+        return [...new Set(labels)];
+    }
+
+    if (kind === "range") {
+        const range = interactions.find((item) => item.type === "range");
+        const start = Number(range?.options?.start ?? 1);
+        const end = Number(range?.options?.end ?? 5);
+
+        return Array.from({ length: Math.max(end - start + 1, 0) }, (_, i) =>
+            String(start + i),
+        );
+    }
+
+    return [];
+}
+
+// the questions a block's rules jump to
+export function jumpTargets(block?: FormBlockModel | null): string[] {
+    return (block?.logics ?? [])
+        .filter((rule) => rule.action === "goto" && rule.action_payload)
+        .map((rule) => rule.action_payload as string);
+}
diff --git a/resources/js/components/Factory/Shared/DeleteDialogs.test.ts b/resources/js/components/Factory/Shared/DeleteDialogs.test.ts
index ff604c5f..12ad76ff 100644
--- a/resources/js/components/Factory/Shared/DeleteDialogs.test.ts
+++ b/resources/js/components/Factory/Shared/DeleteDialogs.test.ts
@@ -9,9 +9,8 @@ import DeleteChoiceDialog from "./DeleteChoiceDialog.vue";
 import { checkDelete, useDeleteBlock } from "./useDeleteBlock";
 import ClickInteraction from "@/components/Factory/Main/Interactions/ClickInteraction.vue";
 import ConsentInteraction from "@/components/Factory/Main/Interactions/ConsentInteraction.vue";
-import BlockLogicRule from "@/components/Factory/Sidebar/BlockLogicRule.vue";
 import { callGetFormBlocks } from "@/api/blocks";
-import { useForm, useLogic, useWorkbench } from "@/stores";
+import { useForm, useWorkbench } from "@/stores";
 
 vi.mock("@/api/blocks", async (importOriginal) => ({
     ...(await importOriginal()),
@@ -428,38 +427,4 @@ describe("asking before a delete", () => {
             wrapper.unmount();
         });
     });
-
-    describe("deleting a rule", () => {
-        it("asks in the app's dialog, not the browser's", async () => {
-            const confirm = vi.spyOn(window, "confirm");
-            const remove = vi
-                .spyOn(useLogic(), "removeRule")
-                .mockResolvedValue();
-            const wrapper = mount(BlockLogicRule, {
-                props: {
-                    index: 2,
-                    rule: {
-                        name: "Skip",
-                        evaluate: "after",
-                        action: "goto",
-                        action_payload: "q1",
-                        conditions: [],
-                    } as unknown as FormBlockLogic,
-                },
-                global: { plugins: [pinia], stubs },
-            });
-
-            await wrapper
-                .find("button[aria-label='Delete rule']")
-                .trigger("click");
-
-            expect(confirm).not.toHaveBeenCalled();
-            expect(wrapper.text()).toContain("Delete rule “Skip”?");
-            expect(remove).not.toHaveBeenCalled();
-
-            await wrapper.find("button.bg-red-600").trigger("click");
-
-            expect(remove).toHaveBeenCalledWith(2);
-        });
-    });
 });
diff --git a/resources/js/components/Factory/Sidebar/BlockLogicEditor.vue b/resources/js/components/Factory/Sidebar/BlockLogicEditor.vue
deleted file mode 100644
index 39ba8949..00000000
--- a/resources/js/components/Factory/Sidebar/BlockLogicEditor.vue
+++ /dev/null
@@ -1,140 +0,0 @@
-<template>
-  <TransitionRoot as="template" :show="isShowingLogicEditor">
-    <Dialog as="div" class="relative z-10" @close="close">
-      <div class="fixed inset-0 bg-grey-900/25" />
-
-      <div class="fixed inset-0 overflow-hidden">
-        <div
-          class="pointer-events-none fixed inset-y-0 left-0 flex max-w-full pr-10"
-        >
-          <TransitionChild
-            as="template"
-            enter="transform transition ease-out duration-200 sm:duration-400 will-change-transform"
-            enter-from="-translate-x-full"
-            enter-to="translate-x-0"
-            leave="transform transition ease-in duration-200 sm:duration-300 will-change-transform"
-            leave-from="translate-x-0"
-            leave-to="-translate-x-full"
-          >
-            <DialogPanel class="pointer-events-auto w-screen max-w-xl">
-              <div
-                class="flex h-full flex-col divide-y divide-grey-200 bg-white shadow-xl"
-              >
-                <div
-                  class="flex min-h-0 flex-1 flex-col overflow-y-scroll py-6"
-                >
-                  <div class="px-4 sm:px-6">
-                    <div class="flex items-start justify-between">
-                      <DialogTitle
-                        class="text-base font-semibold leading-6 text-grey-900"
-                      >
-                        Block Logic
-                      </DialogTitle>
-
-                      <div class="ml-3 flex h-7 items-center">
-                        <button
-                          type="button"
-                          class="rounded-md bg-white px-2 text-grey-400 hover:text-grey-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                          @click="close"
-                        >
-                          <span class="sr-only">Close panel</span>
-                          <D9Icon name="close" aria-hidden="true" />
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="relative mt-6 flex-1 px-4 sm:px-6" v-if="block">
-                    <BlockLogicRule
-                      class="mb-2"
-                      v-for="(rule, index) in block.logics"
-                      v-bind="{ rule, index }"
-                      :key="index"
-                    />
-
-                    <EmptyState
-                      v-if="!block.logics?.length"
-                      class="mb-4"
-                      title="No rules setup"
-                      description="Add a rule to get started"
-                    />
-
-                    <D9Button
-                      type="button"
-                      label="Rule"
-                      @click="store.addRule()"
-                      icon="plus"
-                      color="dark"
-                      icon-position="left"
-                    />
-                  </div>
-                </div>
-                <div
-                  class="flex flex-shrink-0 justify-end px-4 py-4"
-                  :class="{ 'pointer-events-none opacity-50': isSaving }"
-                >
-                  <D9Button
-                    label="Cancel"
-                    type="button"
-                    @click="close"
-                    color="light"
-                  />
-                  <D9Button
-                    label="Save"
-                    type="button"
-                    @click="save"
-                    class="ml-4"
-                    :is-loading="isSaving"
-                  />
-                </div>
-              </div>
-            </DialogPanel>
-          </TransitionChild>
-        </div>
-      </div>
-    </Dialog>
-  </TransitionRoot>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-import {
-  Dialog,
-  DialogPanel,
-  DialogTitle,
-  TransitionChild,
-  TransitionRoot,
-} from "@headlessui/vue";
-import BlockLogicRule from "./BlockLogicRule.vue";
-import EmptyState from "@/components/EmptyState.vue";
-import { D9Button, D9Icon } from "@deck9/ui";
-
-import { useLogic } from "@/stores";
-import { storeToRefs } from "pinia";
-
-const store = useLogic();
-const isSaving = ref(false);
-
-const { isShowingLogicEditor, block } = storeToRefs(store);
-
-const save = async () => {
-  isSaving.value = true;
-
-  const result = await store.saveBlockLogic();
-
-  if (result && result.failed > 0) {
-    isSaving.value = false;
-    return;
-  }
-
-  setTimeout(() => {
-    isSaving.value = false;
-    store.backupLogic();
-    store.hideLogicEditor();
-  }, 250);
-};
-
-const close = () => {
-  store.restoreLogic();
-  store.hideLogicEditor();
-};
-</script>
diff --git a/resources/js/components/Factory/Sidebar/BlockLogicRule.test.ts b/resources/js/components/Factory/Sidebar/BlockLogicRule.test.ts
deleted file mode 100644
index b52636e8..00000000
--- a/resources/js/components/Factory/Sidebar/BlockLogicRule.test.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { createPinia, setActivePinia } from "pinia";
-import { describe, expect, it } from "vitest";
-import BlockLogicRule from "./BlockLogicRule.vue";
-import { useForm } from "@/stores";
-
-describe("BlockLogicRule", () => {
-    it("shows the Identifier and question text as plain text", () => {
-        const pinia = createPinia();
-        setActivePinia(pinia);
-
-        useForm().blocks = [
-            {
-                uuid: "block1",
-                type: "input-short",
-                title: "<b>age</b>",
-                message: "<p>&lt;i&gt;How old are you?&lt;/i&gt;</p>",
-            } as FormBlockModel,
-        ];
-
-        const wrapper = mount(BlockLogicRule, {
-            props: {
-                index: 0,
-                rule: {
-                    name: "Rule",
-                    evaluate: "after",
-                    action: "goto",
-                    action_payload: "block1",
-                    conditions: [],
-                } as unknown as FormBlockLogic,
-            },
-            global: { plugins: [pinia] },
-        });
-
-        expect(wrapper.find("b").exists()).toBe(false);
-        expect(wrapper.find("i").exists()).toBe(false);
-        expect(wrapper.find("span.bg-grey-700").text()).toBe("<b>age</b>");
-        expect(wrapper.text()).toContain("<i>How old are you?</i>");
-    });
-});
diff --git a/resources/js/components/Factory/Sidebar/BlockLogicRule.vue b/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
deleted file mode 100644
index 9d3f0061..00000000
--- a/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
+++ /dev/null
@@ -1,314 +0,0 @@
-<template>
-  <div class="bg-grey-50 rounded">
-    <div
-      class="flex justify-between mb-1 bg-grey-100 border-b border-grey-200 px-4 py-2 rounded-t"
-    >
-      <span class="font-medium">
-        {{ rule.name }}
-      </span>
-      <button type="button" aria-label="Delete rule" @click="isAsking = true">
-        <D9Icon name="trash" class="text-grey-500 hover:text-red-700 text-sm" />
-      </button>
-    </div>
-
-    <DeleteDialog
-      :show="isAsking"
-      :title="rule.name ? `Delete rule “${rule.name}”?` : 'Delete this rule?'"
-      text="This can't be undone."
-      confirm-label="Delete rule"
-      @close="isAsking = false"
-      @confirm="removeRule"
-    />
-
-    <div class="px-4 py-2">
-      <div class="mb-3 hidden">
-        <D9Label label="Rule Execution" />
-        <LabelToggle
-          v-bind="{
-            options: [
-              { label: 'Before', value: 'before' },
-              { label: 'After', value: 'after' },
-            ],
-          }"
-          v-model="evaluate"
-        />
-      </div>
-
-      <div class="mb-1">
-        <D9Label label="Conditions" />
-        <div
-          v-for="(condition, index) in conditions"
-          :key="index"
-          class="mt-2 relative"
-        >
-          <LabelToggle
-            v-if="index !== 0"
-            class="mb-2 w-0"
-            v-bind="{
-              options: [
-                { label: 'And', value: 'and' },
-                { label: 'Or', value: 'or' },
-              ],
-            }"
-            v-model="condition.chainOperator"
-          />
-          <div class="relative">
-            <label :for="`${uid}-${index}-source`" class="sr-only"
-              >Source block</label
-            >
-            <D9Select
-              :id="`${uid}-${index}-source`"
-              placeholder="Select a block"
-              v-model="condition.source"
-              size="small"
-              :options="availableSourceBlocks"
-              by="key"
-            >
-              <template #option="{ option }">
-                <span class="inline-flex items-center text-xs">
-                  <span
-                    class="bg-grey-700 text-white rounded mr-2 px-1 py-px w-16 truncate inline-block text-center"
-                    >{{ option.title }}</span
-                  >
-                  <span class="inline-block truncate">{{ option.text }}</span>
-                </span>
-              </template>
-            </D9Select>
-            <label :for="`${uid}-${index}-operator`" class="sr-only"
-              >Operator</label
-            >
-            <div class="flex items-center space-x-2 mt-1">
-              <D9Select
-                :id="`${uid}-${index}-operator`"
-                class="w-64"
-                placeholder="Select an operator"
-                v-model="condition.operator"
-                size="small"
-                :options="operators"
-              />
-              <D9Input
-                class="w-full"
-                v-model="condition.value"
-                placeholder="Enter a value"
-                size="small"
-                block
-              />
-            </div>
-
-            <button
-              type="button"
-              class="text-xs tracking-normal text-red-500 absolute bottom-full right-0 mb-1"
-              @click="removeCondition(index)"
-            >
-              Remove
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <div
-        class="bg-grey-200 border border-grey-300 rounded-md px-4 py-4 text-sm"
-        v-if="!hasConditions"
-      >
-        <p class="font-semibold">You have no conditions set for this rule.</p>
-        <p class="text-grey-500">Click the button below to add a condition.</p>
-      </div>
-
-      <D9Button
-        class="mt-3"
-        label="Condition"
-        icon="plus"
-        size="small"
-        color="dark"
-        icon-position="left"
-        @click="addCondition"
-      />
-
-      <div class="mt-3">
-        <D9Label label="Action" />
-        <LabelToggle
-          class="w-0"
-          v-bind="{
-            options: [
-              { label: 'Hide', value: 'hide' },
-              { label: 'Show', value: 'show' },
-              { label: 'Go to', value: 'goto' },
-            ],
-          }"
-          v-model="action"
-        />
-      </div>
-
-      <div v-if="action === 'goto'" class="mt-3">
-        <D9Label :id="`${uid}-target`" label="Go to Block" />
-        <D9Select
-          :id="`${uid}-target`"
-          placeholder="Select a block"
-          v-model="target"
-          size="small"
-          :options="availableTargetBlocks"
-          by="key"
-        >
-          <template #option="{ option }">
-            <span class="inline-flex items-center text-xs">
-              <span
-                class="bg-grey-700 text-white rounded mr-2 px-1 py-px w-16 truncate inline-block text-center"
-                >{{ option.title }}</span
-              >
-              <span class="inline-block truncate">{{ option.text }}</span>
-            </span>
-          </template>
-        </D9Select>
-      </div>
-    </div>
-
-    <ValidationErrors
-      v-if="validation.length > 0"
-      v-bind="{ errors: validation, title: 'Your rule is invalid' }"
-      class="my-2 px-4 pb-4 placeholder:text-grey-400"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { D9Input, D9Select, D9Icon, D9Label, D9Button } from "@deck9/ui";
-import { computed, Ref, ref, useId, watch } from "vue";
-import { useLogic } from "@/stores";
-import { operators } from "@/stores/helpers/logic";
-import { getTextFromHtml } from "@/utils";
-import LabelToggle from "@/components/Factory/Shared/LabelToggle.vue";
-import DeleteDialog from "@/components/Factory/Shared/DeleteDialog.vue";
-import ValidationErrors from "@/components/ValidationErrors.vue";
-
-const logicStore = useLogic();
-const uid = useId();
-
-const props = defineProps<{
-  rule: FormBlockLogic;
-  index: number;
-}>();
-
-const validation = computed(() => {
-  if (!logicStore.validation[props.index]) {
-    return [];
-  }
-
-  return Object.keys(logicStore.validation[props.index].errors).flatMap(
-    (key) => {
-      return [...logicStore.validation[props.index].errors[key]];
-    },
-  );
-});
-
-const evaluate = ref<FormBlockLogic["evaluate"]>(props.rule.evaluate);
-const action = ref<FormBlockLogic["action"]>(props.rule.action);
-const conditions: Ref<Array<EditableFormBlockBlockLogicCondition>> = ref([]);
-const target = ref<EditableFormBlockBlockLogicCondition["source"] | null>(null);
-
-const getBlockOption = (block: FormBlockModel) => {
-  const text = getTextFromHtml(block.message ?? "");
-
-  return {
-    key: block.uuid,
-    label: text,
-    title: block.title?.length ? block.title : block.uuid,
-    text,
-  };
-};
-
-if (props.rule.action_payload) {
-  const found = logicStore.allBlocks?.find(
-    (block) => block.uuid === props.rule.action_payload,
-  );
-
-  if (found) {
-    target.value = getBlockOption(found);
-  }
-}
-
-// if the loaded rule has already conditions, we should use those
-if (props.rule.conditions) {
-  const editableConditions = props.rule.conditions.map((condition) => {
-    const operator = operators.find((op) => op.key === condition.operator);
-    const source = logicStore.allBlocks?.find(
-      (block) => block.uuid === condition.source,
-    );
-
-    return {
-      ...condition,
-      operator,
-      source: source ? getBlockOption(source) : null,
-    };
-  });
-
-  conditions.value = editableConditions;
-}
-
-const addCondition = () => {
-  conditions.value.push({
-    source: undefined,
-    operator: operators[0],
-    value: "",
-    chainOperator: "and",
-  });
-};
-
-const isAsking = ref(false);
-
-const removeRule = () => {
-  isAsking.value = false;
-  logicStore.removeRule(props.index);
-};
-
-const removeCondition = (index: number) => {
-  conditions.value.splice(index, 1);
-};
-
-const hasConditions = computed(() => {
-  return conditions.value.length > 0;
-});
-
-const availableSourceBlocks = computed(() => {
-  const blocks =
-    props.rule.action === "goto"
-      ? logicStore.availableSourceBlocksWithTarget
-      : logicStore.availableSourceBlocks;
-
-  return blocks.map((block) => {
-    return getBlockOption(block);
-  });
-});
-
-const availableTargetBlocks = computed(() => {
-  return (
-    logicStore.allBlocks
-      ?.filter((block) => block.type !== "group")
-      .map((block) => {
-        return getBlockOption(block);
-      }) ?? []
-  );
-});
-
-watch(
-  [conditions, evaluate, action, target],
-  () => {
-    if (action.value === "hide" || action.value === "show") {
-      evaluate.value = "before";
-    } else if (action.value === "goto") {
-      evaluate.value = "after";
-    }
-
-    logicStore.updateBlockLogic(
-      {
-        ...props.rule,
-        conditions: conditions.value,
-        evaluate: evaluate.value,
-        action: action.value,
-        action_payload: target.value?.key ?? null,
-      },
-      props.index,
-    );
-  },
-  { deep: true },
-);
-</script>
diff --git a/resources/js/components/FieldLabels.test.ts b/resources/js/components/FieldLabels.test.ts
index 8d541b71..ca3e2991 100644
--- a/resources/js/components/FieldLabels.test.ts
+++ b/resources/js/components/FieldLabels.test.ts
@@ -18,9 +18,6 @@ const groupLabels = [
     "Factory/Main/ConfigureFile.vue: Allowed File Types",
     "Factory/Settings/TemplateExport.vue: Template Files",
     "Factory/Settings/partials/ImageUpload.vue: (bound)",
-    "Factory/Sidebar/BlockLogicRule.vue: Action",
-    "Factory/Sidebar/BlockLogicRule.vue: Conditions",
-    "Factory/Sidebar/BlockLogicRule.vue: Rule Execution",
     "Pages/Teams/Create.vue: Team Owner",
 ];
 
diff --git a/resources/js/stores/helpers/logic.ts b/resources/js/stores/helpers/logic.ts
index bfeeb738..07ae4866 100644
--- a/resources/js/stores/helpers/logic.ts
+++ b/resources/js/stores/helpers/logic.ts
@@ -1,14 +1,3 @@
-export const operators: Array<
-    EditableFormBlockBlockLogicCondition["operator"]
-> = [
-    { id: "equals", key: "equals", label: "is equal to" },
-    { id: "equalsNot", key: "equalsNot", label: "is not equal to" },
-    { id: "contains", key: "contains", label: "contains" },
-    { id: "containsNot", key: "containsNot", label: "does not contain" },
-    { id: "isLowerThan", key: "isLowerThan", label: "is lower than" },
-    { id: "isGreaterThan", key: "isGreaterThan", label: "is greater than" },
-];
-
 // rule values are text, while rating, scale and number answers are numbers
 const asText = (value: unknown): string => String(value ?? "");
 
@@ -160,13 +149,3 @@ export function evaluateGotoLogic(
 
     return null;
 }
-
-export function transformConditionForBackend(
-    condition: EditableFormBlockBlockLogicCondition,
-): FormBlockLogicCondition {
-    return {
-        ...condition,
-        source: condition.source?.key,
-        operator: condition.operator.key,
-    };
-}
diff --git a/resources/js/stores/logic.ts b/resources/js/stores/logic.ts
index 572257be..d5c49c0f 100644
--- a/resources/js/stores/logic.ts
+++ b/resources/js/stores/logic.ts
@@ -1,6 +1,4 @@
-import { useForm } from "@/stores";
 import { defineStore } from "pinia";
-import { findAllBlocksBeforeTarget } from "./helpers/queue";
 import { useNotice } from "./notice";
 
 import {
@@ -9,70 +7,19 @@ import {
     callDeleteFormBlockLogic,
 } from "@/api/logics";
 
-import { transformConditionForBackend } from "./helpers/logic";
-
+// the block whose rules are saved or removed
 interface LogicStore {
     block: FormBlockModel | null;
-    validation: ValidationError[];
-    isShowingLogicEditor: boolean;
-    hideRule: FormBlockLogic | null;
-    backup: FormBlockLogic[] | null;
 }
 
 export const useLogic = defineStore("logic", {
     state: (): LogicStore => {
         return {
             block: null,
-            isShowingLogicEditor: false,
-            hideRule: null,
-            validation: [],
-            backup: null,
         };
     },
 
     actions: {
-        showLogicEditor(block: FormBlockModel) {
-            this.block = block;
-            this.backupLogic();
-            this.isShowingLogicEditor = true;
-        },
-
-        hideLogicEditor() {
-            this.block = null;
-            this.isShowingLogicEditor = false;
-        },
-
-        backupLogic() {
-            this.backup = this.block?.logics ?? null;
-        },
-
-        restoreLogic() {
-            if (!this.block) {
-                return;
-            }
-
-            this.block.logics = this.backup ?? undefined;
-        },
-
-        addRule() {
-            if (!this.block) {
-                return;
-            }
-
-            if (!this.block.logics) {
-                this.block.logics = [];
-            }
-
-            this.block.logics.push({
-                form_block_id: this.block.id,
-                name: "Rule #" + (this.block.logics.length + 1),
-                action: "hide",
-                action_payload: null,
-                evaluate: "before",
-                conditions: [],
-            });
-        },
-
         async removeRule(index: number) {
             if (!this.block || !this.block.logics) {
                 return;
@@ -99,46 +46,6 @@ export const useLogic = defineStore("logic", {
             await useNotice().send(`removeRule:${logic.id}`, request, block);
         },
 
-        async saveBlockLogic() {
-            if (!this.block || !this.block.logics) {
-                return;
-            }
-
-            // reset validation before each request
-            this.validation = [];
-
-            const results = await Promise.allSettled(
-                this.block.logics.map((logic, index) =>
-                    this.saveSingleRule(logic).then((result) => ({
-                        result,
-                        index,
-                    })),
-                ),
-            );
-
-            const failedSaves = results
-                .map((result, index) => ({ ...result, originalIndex: index }))
-                .filter(
-                    (
-                        result,
-                    ): result is PromiseRejectedResult & {
-                        originalIndex: number;
-                    } => result.status === "rejected",
-                );
-
-            if (failedSaves.length > 0) {
-                failedSaves.forEach((failure) => {
-                    this.validation[failure.originalIndex] =
-                        failure.reason.response.data;
-                });
-            }
-
-            return {
-                failed: failedSaves.length,
-                totalRules: this.block.logics.length,
-            };
-        },
-
         async saveSingleRule(logic: FormBlockLogic) {
             if (!this.block) {
                 throw new Error("Block is not defined");
@@ -173,59 +80,5 @@ export const useLogic = defineStore("logic", {
                 throw error;
             }
         },
-
-        updateBlockLogic(logic: FormBlockLogic, index: number) {
-            if (!this.block) {
-                return;
-            }
-
-            if (!this.block.logics) {
-                this.block.logics = [];
-            }
-
-            const transformedConditions = logic.conditions.map((c) =>
-                transformConditionForBackend(c),
-            );
-
-            logic.conditions = transformedConditions;
-
-            this.block.logics[index] = logic;
-        },
-    },
-
-    getters: {
-        allBlocks(): Array<FormBlockModel> | null {
-            const formStore = useForm();
-
-            return formStore.blocks;
-        },
-
-        availableSourceBlocksWithTarget(state): Array<FormBlockModel> {
-            const formStore = useForm();
-
-            if (!state.block?.uuid) {
-                return [];
-            }
-
-            return findAllBlocksBeforeTarget(
-                formStore.blocksTree,
-                state.block.uuid,
-                { filterGroups: true, includeTarget: true },
-            );
-        },
-
-        availableSourceBlocks(state): Array<FormBlockModel> {
-            const formStore = useForm();
-
-            if (!state.block?.uuid) {
-                return [];
-            }
-
-            return findAllBlocksBeforeTarget(
-                formStore.blocksTree,
-                state.block.uuid,
-                { filterGroups: true, includeTarget: false },
-            );
-        },
     },
 });