feat(t-paliad-265): caret + popover + chip on Verfahrensablauf cards

m/paliad#96 — frontend wiring of the per-event-card choice flow on
both consumer surfaces.

Shared rendering core (verfahrensablauf-core.ts):
- CalculatedDeadline gains choicesOffered + appellantContext (mirror
  the new server fields).
- deadlineCardHtml emits a ▾ caret next to the date when a rule
  carries a non-empty choicesOffered, plus an inert chip span next to
  the title that the popover module rehydrates after every render.
- bucketDeadlinesIntoColumns prefers appellantContext over the
  page-level appellant for "both" rows when the per-card context is
  set to claimant or defendant. "both" / "none" / "" all fall back to
  the existing collapse logic. New test cases cover all three paths.
- CalcParams + calculateDeadlines pass projectId / perCardChoices
  through to the backend.

New module (client/views/event-card-choices.ts):
- attachEventCardChoices wires a delegated click handler on the
  result container; the caret opens a body-anchored popover with one
  block per choice-kind the rule offers (appellant: 4 radio-style
  buttons; include_ccr + skip: 2-way toggle).
- Active picks render as small chips on the card title; reseedChips()
  repaints them after every renderResults() innerHTML rewrite.
- Skipped rows fade to 55% opacity via the timeline-item--skipped
  class.

Page wiring:
- /tools/verfahrensablauf (unbound): commits mutate an in-memory list
  + the ?event_choices= URL param, then schedule a recalc. Shareable
  via link, no persistence — same idiom as ?side= / ?appellant=.
- /tools/fristenrechner (project-bound): commits POST/DELETE to
  /api/projects/{id}/event-choices. The next calculate() call sends
  projectId so the server folds the persisted choices in.

i18n: 17 new keys under choices.* (DE primary + EN secondary). Caret
title, appellant/include_ccr/skip block titles + value labels, chip
labels, reset action, commit error toast.

CSS: caret, popover, options, chip parts, skipped-row fade.

Tests: 3 new bucketer cases covering AppellantContext propagation
(157 frontend tests pass).

frontend/src/client/fristenrechner.ts

@@ -24,6 +24,12 @@ import {
   renderTimelineBody,
   wireDateEditClicks,
 } from "./views/verfahrensablauf-core";
+import {
+  attachEventCardChoices,
+  reseedChips,
+  type EventChoice,
+  type ChoiceKind,
+} from "./views/event-card-choices";
 
 let lastResponse: DeadlineResponse | null = null;
 
@@ -162,6 +168,13 @@ async function calculate() {
     ? courtPicker.value
     : "";
 
+  // t-paliad-265 — when project-bound, the server pulls per-card
+  // choices from paliad.project_event_choices. The frontend has
+  // already pre-fetched them into perCardChoicesCache so chip
+  // indicators repaint in step with the calc; sending projectId here
+  // is the persistence path.
+  const projectIdForCalc = currentStep1Context.kind === "project" ? currentStep1Context.projectId : "";
+
   const data = await calculateDeadlines({
     proceedingType: selectedType,
     triggerDate,
@@ -169,6 +182,7 @@ async function calculate() {
     flags,
     anchorOverrides: overrides,
     courtId,
+    projectId: projectIdForCalc || undefined,
   });
   if (seq !== procCalcSeq) return;
   if (!data) return;
@@ -439,6 +453,10 @@ function renderProcedureResults(data: DeadlineResponse) {
     : renderTimelineBody(data, { showParty: true, editable: true, showNotes });
 
   container.innerHTML = headerHtml + bodyHtml;
+  // t-paliad-265: rehydrate per-event-card chip indicators after the
+  // innerHTML rewrite. Safe to call before attachEventCardChoices() —
+  // it no-ops when no state was attached yet.
+  reseedChips(container);
   printBtn.style.display = "block";
   if (saveBtn) {
     // Ad-hoc explore-mode has no project to save against — show the
@@ -461,6 +479,49 @@ function renderProcedureResults(data: DeadlineResponse) {
   applyPendingFocus();
 }
 
+// initEventCardChoicesForFristenrechner attaches the per-event-card
+// popover to the timeline container. The fristenrechner page is the
+// project-bound surface: commits POST/DELETE to the persistence
+// endpoint; the next calculate() pulls the fresh state from the
+// server. (t-paliad-265)
+async function initEventCardChoicesForFristenrechner(container: HTMLElement): Promise<void> {
+  // Load the current persisted state for the project context, if any.
+  const initial: EventChoice[] = [];
+  if (currentStep1Context.kind === "project" && currentStep1Context.projectId) {
+    try {
+      const resp = await fetch(`/api/projects/${encodeURIComponent(currentStep1Context.projectId)}/event-choices`);
+      if (resp.ok) {
+        const rows = (await resp.json()) as EventChoice[];
+        for (const r of rows) initial.push(r);
+      }
+    } catch (e) {
+      console.error("event-choices: initial load failed", e);
+    }
+  }
+
+  attachEventCardChoices({
+    container,
+    initial,
+    commit: async (choice) => {
+      if (currentStep1Context.kind !== "project" || !currentStep1Context.projectId) return;
+      const resp = await fetch(`/api/projects/${encodeURIComponent(currentStep1Context.projectId)}/event-choices`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(choice),
+      });
+      if (!resp.ok) throw new Error(`event-choices PUT ${resp.status}`);
+      scheduleProcCalc(0);
+    },
+    remove: async (submissionCode, kind) => {
+      if (currentStep1Context.kind !== "project" || !currentStep1Context.projectId) return;
+      const url = `/api/projects/${encodeURIComponent(currentStep1Context.projectId)}/event-choices/${encodeURIComponent(submissionCode)}/${encodeURIComponent(kind)}`;
+      const resp = await fetch(url, { method: "DELETE" });
+      if (!resp.ok && resp.status !== 404) throw new Error(`event-choices DELETE ${resp.status}`);
+      scheduleProcCalc(0);
+    },
+  });
+}
+
 // onDateEditCommit is the click-to-edit callback handed to the shared
 // wireDateEditClicks() helper: persist the per-rule override (empty value
 // clears it) then recompute so downstream rules re-anchor.
@@ -648,6 +709,15 @@ document.addEventListener("DOMContentLoaded", () => {
   const timelineContainer = document.getElementById("timeline-container");
   if (timelineContainer) wireDateEditClicks(timelineContainer, onDateEditCommit);
 
+  // t-paliad-265 — per-event-card choices. Project-bound surface, so
+  // commits POST to /api/projects/{id}/event-choices. The popover
+  // module owns the popover; this page owns the recalc trigger. When
+  // there's no project context yet (Step 1 not picked), the popover
+  // still works but commits silently no-op (project_id missing).
+  if (timelineContainer) {
+    void initEventCardChoicesForFristenrechner(timelineContainer);
+  }
+
   // Reset button
   document.getElementById("reset-btn")!.addEventListener("click", reset);
 

frontend/src/client/i18n.ts

@@ -306,6 +306,24 @@ const translations: Record<Lang, Record<string, string>> = {
     "deadlines.col.court": "Gericht",
     "deadlines.col.opponent": "Gegnerseite",
     "deadlines.col.both": "Beide Parteien",
+    // t-paliad-265 — per-event-card choice popover (Verfahrensablauf timeline)
+    "choices.caret.title": "Optionen für dieses Ereignis",
+    "choices.appellant.title": "Berufung durch …",
+    "choices.appellant.claimant": "Klägerseite",
+    "choices.appellant.defendant": "Beklagtenseite",
+    "choices.appellant.both": "beide Parteien",
+    "choices.appellant.none": "keine Berufung",
+    "choices.include_ccr.title": "Nichtigkeitswiderklage einbeziehen",
+    "choices.include_ccr.true": "Ja",
+    "choices.include_ccr.false": "Nein",
+    "choices.skip.title": "Für diese Akte überspringen",
+    "choices.skip.true": "Überspringen",
+    "choices.skip.false": "Einbeziehen",
+    "choices.skipped.chip": "übersprungen",
+    "choices.appellant.chip": "Berufung:",
+    "choices.include_ccr.chip": "mit Nichtigkeitswiderklage",
+    "choices.reset": "Auswahl zurücksetzen",
+    "choices.commit.error": "Konnte Auswahl nicht speichern",
     // Trigger-event mode (PR-2 \u2014 youpc-parity)
     "deadlines.mode.procedure": "Verfahrensablauf",
     "deadlines.mode.event": "Was kommt nach\u2026",
@@ -3373,6 +3391,24 @@ const translations: Record<Lang, Record<string, string>> = {
     "deadlines.col.court": "Court",
     "deadlines.col.opponent": "Opponent Side",
     "deadlines.col.both": "Both parties",
+    // t-paliad-265 — per-event-card choice popover (Verfahrensablauf timeline)
+    "choices.caret.title": "Options for this event",
+    "choices.appellant.title": "Appeal by …",
+    "choices.appellant.claimant": "Claimant side",
+    "choices.appellant.defendant": "Defendant side",
+    "choices.appellant.both": "both parties",
+    "choices.appellant.none": "no appeal",
+    "choices.include_ccr.title": "Include nullity counterclaim",
+    "choices.include_ccr.true": "Yes",
+    "choices.include_ccr.false": "No",
+    "choices.skip.title": "Skip for this case",
+    "choices.skip.true": "Skip",
+    "choices.skip.false": "Include",
+    "choices.skipped.chip": "skipped",
+    "choices.appellant.chip": "Appeal:",
+    "choices.include_ccr.chip": "with nullity counterclaim",
+    "choices.reset": "Reset choice",
+    "choices.commit.error": "Could not save selection",
     "deadlines.adjusted": "Adjusted",
     "deadlines.adjusted.reason": "weekend/holiday",
     "deadlines.adjusted.weekend": "weekend",

frontend/src/client/verfahrensablauf.ts

@@ -21,6 +21,13 @@ import {
   renderTimelineBody,
   wireDateEditClicks,
 } from "./views/verfahrensablauf-core";
+import {
+  attachEventCardChoices,
+  reseedChips,
+  currentChoices,
+  type EventChoice,
+  type ChoiceKind,
+} from "./views/event-card-choices";
 
 let selectedType = "";
 let lastResponse: DeadlineResponse | null = null;
@@ -98,6 +105,37 @@ function writeAppellantToURL(a: Side) {
 const anchorOverrides = new Map<string, string>();
 function clearAnchorOverrides() { anchorOverrides.clear(); }
 
+// Per-event-card choices (t-paliad-265). Unbound on this page (no
+// project context), so persistence is URL-only via `?event_choices=`.
+// Format: comma-separated `submission_code:kind=value` tuples. Same
+// idiom as `?side=` + `?appellant=`.
+let perCardChoices: EventChoice[] = [];
+
+function readChoicesFromURL(): EventChoice[] {
+  const raw = new URLSearchParams(window.location.search).get("event_choices");
+  if (!raw) return [];
+  const out: EventChoice[] = [];
+  for (const tuple of raw.split(",")) {
+    const m = tuple.match(/^([^:]+):([^=]+)=(.+)$/);
+    if (!m) continue;
+    const kind = m[2] as ChoiceKind;
+    if (kind !== "appellant" && kind !== "include_ccr" && kind !== "skip") continue;
+    out.push({ submission_code: m[1], choice_kind: kind, choice_value: m[3] });
+  }
+  return out;
+}
+
+function writeChoicesToURL(choices: EventChoice[]) {
+  const url = new URL(window.location.href);
+  if (choices.length === 0) {
+    url.searchParams.delete("event_choices");
+  } else {
+    const enc = choices.map((c) => `${c.submission_code}:${c.choice_kind}=${c.choice_value}`).join(",");
+    url.searchParams.set("event_choices", enc);
+  }
+  window.history.replaceState(null, "", url.pathname + (url.search ? url.search : "") + url.hash);
+}
+
 type ProcedureView = "timeline" | "columns";
 let procedureView: ProcedureView = "columns";
 
@@ -210,6 +248,7 @@ async function doCalc() {
     flags: readFlags(),
     anchorOverrides: overrides,
     courtId,
+    perCardChoices,
   });
   if (seq !== calcSeq) return;
   if (!data) return;
@@ -302,6 +341,11 @@ function renderResults(data: DeadlineResponse) {
   if (toggle) toggle.style.display = "";
 
   syncTriggerEventLabel();
+
+  // t-paliad-265: rehydrate per-event-card chip indicators after every
+  // re-render so the popover-driven active state survives the
+  // innerHTML rewrite the timeline body just did.
+  reseedChips(container);
 }
 
 function setProceedingPickerCollapsed(collapsed: boolean, displayName?: string) {
@@ -529,6 +573,34 @@ document.addEventListener("DOMContentLoaded", () => {
   initViewToggle();
   initPerspectiveControls();
 
+  // t-paliad-265 — per-event-card choices. Unbound surface, so commits
+  // mutate the in-memory list + URL, then trigger a recalc. The
+  // popover module owns the popover lifecycle; this page owns the
+  // recalc + URL plumbing.
+  perCardChoices = readChoicesFromURL();
+  const timelineEl = document.getElementById("timeline-container");
+  if (timelineEl) {
+    attachEventCardChoices({
+      container: timelineEl,
+      initial: perCardChoices,
+      commit: (choice) => {
+        perCardChoices = perCardChoices.filter(
+          (c) => !(c.submission_code === choice.submission_code && c.choice_kind === choice.choice_kind),
+        );
+        perCardChoices.push(choice);
+        writeChoicesToURL(perCardChoices);
+        scheduleCalc(0);
+      },
+      remove: (submissionCode, kind) => {
+        perCardChoices = perCardChoices.filter(
+          (c) => !(c.submission_code === submissionCode && c.choice_kind === kind),
+        );
+        writeChoicesToURL(perCardChoices);
+        scheduleCalc(0);
+      },
+    });
+  }
+
   onLangChange(() => {
     // Active-button name updates with language change (the data-i18n
     // pass swaps the inner <strong>'s text). Re-collapse the summary

frontend/src/client/views/event-card-choices.ts

@@ -0,0 +1,292 @@
+// Per-event-card choice popover + chip indicator (t-paliad-265 /
+// m/paliad#96).
+//
+// The shared rendering core (verfahrensablauf-core.ts) emits a caret
+// button on cards that carry a non-empty `choices_offered` declaration
+// and an inert chip span next to the title. This module:
+//
+//   1. Wires a delegated click handler on the result container so the
+//      caret opens a popover with the offered choice-kinds.
+//   2. Commits the user's pick — either by POSTing to the project-
+//      bound endpoint or by mutating the in-memory state for the
+//      unbound (no-project) case.
+//   3. Rehydrates the chip on every render + after every commit so the
+//      glanceable indicator matches the active state.
+//
+// Two consumer pages — /tools/verfahrensablauf (unbound) and
+// /tools/fristenrechner (project-bound) — both wire this module
+// once at boot via attachEventCardChoices().
+
+import { escAttr, escHtml } from "./verfahrensablauf-core";
+import { t } from "../i18n";
+
+export type ChoiceKind = "appellant" | "include_ccr" | "skip";
+
+export interface EventChoice {
+  submission_code: string;
+  choice_kind: ChoiceKind;
+  choice_value: string;
+}
+
+// State surface — the page passes in callbacks that own persistence.
+// commit / remove must trigger a recalc on the page side (the popover
+// only owns its own visual state).
+export interface EventCardChoicesOpts {
+  container: HTMLElement;
+  // Initial state: a list of choices. The page seeds this from the
+  // server response (project-bound) or from URL params (unbound).
+  initial: EventChoice[];
+  // commit gets called for an UPSERT. The page POSTs to the API (or
+  // mutates URL state) AND triggers a recalc.
+  commit: (choice: EventChoice) => Promise<void> | void;
+  // remove gets called when the user resets a choice.
+  remove: (submissionCode: string, kind: ChoiceKind) => Promise<void> | void;
+}
+
+// One mutable bag per attach() call. The current implementation is a
+// single-page singleton — paginated views (admin tables) are not in
+// scope. Last-write-wins on the in-memory state.
+interface AttachedState {
+  opts: EventCardChoicesOpts;
+  // active: submission_code → kind → value. Rebuilt from `initial`
+  // on every reseed() call.
+  active: Map<string, Map<ChoiceKind, string>>;
+  popover: HTMLDivElement | null;
+}
+
+const states = new WeakMap<HTMLElement, AttachedState>();
+
+// attachEventCardChoices wires the delegated click + popover lifecycle
+// to the given container. Call once per page after mount; safe to call
+// again with a fresh container.
+export function attachEventCardChoices(opts: EventCardChoicesOpts): void {
+  const state: AttachedState = {
+    opts,
+    active: new Map(),
+    popover: null,
+  };
+  for (const c of opts.initial) {
+    if (!state.active.has(c.submission_code)) {
+      state.active.set(c.submission_code, new Map());
+    }
+    state.active.get(c.submission_code)!.set(c.choice_kind, c.choice_value);
+  }
+  states.set(opts.container, state);
+
+  opts.container.addEventListener("click", (e) => {
+    const target = (e.target as HTMLElement | null)?.closest<HTMLElement>(".event-card-choices-caret");
+    if (target) {
+      e.stopPropagation();
+      openPopover(state, target);
+      return;
+    }
+    // Outside-click closes the popover.
+    if (state.popover && !state.popover.contains(e.target as Node)) {
+      closePopover(state);
+    }
+  });
+
+  // ESC also closes.
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape" && state.popover) {
+      closePopover(state);
+    }
+  });
+
+  // Repaint chips on every renderResults() call. The page is
+  // responsible for calling reseedChips() after re-render so the chip
+  // dom node (re-created by the renderer) picks the active state up.
+  reseedChips(opts.container);
+}
+
+// reseedChips walks every chip span in the container and re-renders
+// its content from the active state map. Idempotent.
+export function reseedChips(container: HTMLElement): void {
+  const state = states.get(container);
+  if (!state) return;
+  container.querySelectorAll<HTMLElement>(".event-card-choices-chip").forEach((chip) => {
+    const code = chip.dataset.submissionCode || "";
+    const kinds = state.active.get(code);
+    if (!kinds || kinds.size === 0) {
+      chip.innerHTML = "";
+      chip.dataset.empty = "true";
+      return;
+    }
+    chip.dataset.empty = "false";
+    chip.innerHTML = renderChip(kinds);
+  });
+  // Skipped rows fade out via a class on the card-item ancestor.
+  container.querySelectorAll<HTMLElement>(".event-card-choices-chip").forEach((chip) => {
+    const code = chip.dataset.submissionCode || "";
+    const skipped = state.active.get(code)?.get("skip") === "true";
+    const itemEl = chip.closest<HTMLElement>(".timeline-item, .fr-col-item");
+    if (itemEl) itemEl.classList.toggle("timeline-item--skipped", skipped);
+  });
+}
+
+function renderChip(kinds: Map<ChoiceKind, string>): string {
+  const parts: string[] = [];
+  if (kinds.get("skip") === "true") {
+    parts.push(`<span class="event-card-choices-chip-part event-card-choices-chip-part--skipped">${escHtml(t("choices.skipped.chip"))}</span>`);
+  }
+  const ap = kinds.get("appellant");
+  if (ap && ap !== "" ) {
+    let label = "";
+    switch (ap) {
+      case "claimant":  label = t("choices.appellant.claimant"); break;
+      case "defendant": label = t("choices.appellant.defendant"); break;
+      case "both":      label = t("choices.appellant.both"); break;
+      case "none":      label = t("choices.appellant.none"); break;
+    }
+    if (label) {
+      parts.push(`<span class="event-card-choices-chip-part">${escHtml(t("choices.appellant.chip"))} ${escHtml(label)}</span>`);
+    }
+  }
+  if (kinds.get("include_ccr") === "true") {
+    parts.push(`<span class="event-card-choices-chip-part">${escHtml(t("choices.include_ccr.chip"))}</span>`);
+  }
+  return parts.join(" ");
+}
+
+function openPopover(state: AttachedState, caret: HTMLElement): void {
+  closePopover(state);
+  const code = caret.dataset.submissionCode || "";
+  if (!code) return;
+  let offered: Record<string, unknown> = {};
+  try {
+    offered = JSON.parse(caret.dataset.choicesOffered || "{}");
+  } catch {
+    return;
+  }
+
+  const pop = document.createElement("div");
+  pop.className = "event-card-choices-popover";
+  pop.setAttribute("role", "dialog");
+  pop.setAttribute("aria-label", t("choices.caret.title"));
+
+  const blocks: string[] = [];
+  if (Array.isArray(offered.appellant)) {
+    blocks.push(renderAppellantBlock(state, code, offered.appellant as unknown[]));
+  }
+  if (Array.isArray(offered.include_ccr)) {
+    blocks.push(renderToggleBlock(state, code, "include_ccr"));
+  }
+  if (Array.isArray(offered.skip)) {
+    blocks.push(renderToggleBlock(state, code, "skip"));
+  }
+  pop.innerHTML = blocks.join("");
+
+  document.body.appendChild(pop);
+  state.popover = pop;
+  positionPopover(pop, caret);
+
+  pop.addEventListener("click", async (e) => {
+    const btn = (e.target as HTMLElement | null)?.closest<HTMLButtonElement>("button[data-choice-action]");
+    if (!btn) return;
+    e.stopPropagation();
+    const kind = btn.dataset.choiceKind as ChoiceKind | undefined;
+    const value = btn.dataset.choiceValue || "";
+    const action = btn.dataset.choiceAction;
+    if (!kind) return;
+    try {
+      if (action === "set") {
+        await state.opts.commit({ submission_code: code, choice_kind: kind, choice_value: value });
+        if (!state.active.has(code)) state.active.set(code, new Map());
+        state.active.get(code)!.set(kind, value);
+      } else if (action === "clear") {
+        await state.opts.remove(code, kind);
+        state.active.get(code)?.delete(kind);
+      }
+      reseedChips(state.opts.container);
+      closePopover(state);
+    } catch (err) {
+      console.error("event card choice commit failed", err);
+      // Surface a soft inline error inside the popover; do NOT close.
+      const errEl = document.createElement("div");
+      errEl.className = "event-card-choices-error";
+      errEl.textContent = t("choices.commit.error");
+      pop.appendChild(errEl);
+    }
+  });
+}
+
+function renderAppellantBlock(state: AttachedState, code: string, values: unknown[]): string {
+  const current = state.active.get(code)?.get("appellant") || "";
+  const buttons = values
+    .filter((v): v is string => typeof v === "string")
+    .map((v) => {
+      const labelKey = `choices.appellant.${v}` as const;
+      const isActive = v === current;
+      return `<button type="button"
+        data-choice-action="set"
+        data-choice-kind="appellant"
+        data-choice-value="${escAttr(v)}"
+        class="event-card-choices-option${isActive ? " event-card-choices-option--active" : ""}">${escHtml(t(labelKey as any))}</button>`;
+    })
+    .join("");
+  const reset = current
+    ? `<button type="button" data-choice-action="clear" data-choice-kind="appellant"
+        class="event-card-choices-reset">${escHtml(t("choices.reset"))}</button>`
+    : "";
+  return `<div class="event-card-choices-block">
+    <div class="event-card-choices-title">${escHtml(t("choices.appellant.title"))}</div>
+    <div class="event-card-choices-options">${buttons}</div>
+    ${reset}
+  </div>`;
+}
+
+function renderToggleBlock(state: AttachedState, code: string, kind: "include_ccr" | "skip"): string {
+  const current = state.active.get(code)?.get(kind) || "false";
+  const titleKey = kind === "include_ccr" ? "choices.include_ccr.title" : "choices.skip.title";
+  const trueKey = kind === "include_ccr" ? "choices.include_ccr.true" : "choices.skip.true";
+  const falseKey = kind === "include_ccr" ? "choices.include_ccr.false" : "choices.skip.false";
+  const opt = (v: "true" | "false", labelKey: string) => `<button type="button"
+    data-choice-action="set"
+    data-choice-kind="${kind}"
+    data-choice-value="${v}"
+    class="event-card-choices-option${v === current ? " event-card-choices-option--active" : ""}">${escHtml(t(labelKey as any))}</button>`;
+  const reset = state.active.get(code)?.has(kind)
+    ? `<button type="button" data-choice-action="clear" data-choice-kind="${kind}"
+        class="event-card-choices-reset">${escHtml(t("choices.reset"))}</button>`
+    : "";
+  return `<div class="event-card-choices-block">
+    <div class="event-card-choices-title">${escHtml(t(titleKey as any))}</div>
+    <div class="event-card-choices-options">
+      ${opt("true", trueKey)}
+      ${opt("false", falseKey)}
+    </div>
+    ${reset}
+  </div>`;
+}
+
+function closePopover(state: AttachedState): void {
+  if (state.popover) {
+    state.popover.remove();
+    state.popover = null;
+  }
+}
+
+function positionPopover(pop: HTMLDivElement, caret: HTMLElement): void {
+  const rect = caret.getBoundingClientRect();
+  const scrollY = window.scrollY || document.documentElement.scrollTop;
+  const scrollX = window.scrollX || document.documentElement.scrollLeft;
+  pop.style.position = "absolute";
+  pop.style.top = `${rect.bottom + scrollY + 4}px`;
+  pop.style.left = `${Math.max(8, rect.right + scrollX - 240)}px`;
+  pop.style.zIndex = "1000";
+}
+
+// Returns the current in-memory choice list for the given container —
+// used by the unbound /tools/verfahrensablauf page to keep the URL
+// param in sync.
+export function currentChoices(container: HTMLElement): EventChoice[] {
+  const state = states.get(container);
+  if (!state) return [];
+  const out: EventChoice[] = [];
+  state.active.forEach((kinds, code) => {
+    kinds.forEach((value, kind) => {
+      out.push({ submission_code: code, choice_kind: kind, choice_value: value });
+    });
+  });
+  return out;
+}

frontend/src/client/views/verfahrensablauf-core.test.ts

@@ -191,6 +191,48 @@ describe("bucketDeadlinesIntoColumns — side+appellant column routing (m/paliad
     expect(rows[0].court.map((d) => d.name)).toEqual(["C"]);
   });
 
+  test("appellantContext overrides the page-level appellant for descendants (t-paliad-265)", () => {
+    // A per-decision pick stamps AppellantContext on descendants of
+    // that decision. The bucketer prefers it over the page-level
+    // appellant: if a "both" row carries appellantContext='defendant',
+    // it collapses to defendant's column regardless of the global
+    // appellant opt.
+    const dl: CalculatedDeadline = {
+      ...both("Notice of Appeal", "2026-07-23"),
+      appellantContext: "defendant",
+    };
+    const rows = bucketDeadlinesIntoColumns([dl], { appellant: "claimant" });
+    expect(rows[0].ours).toHaveLength(0);
+    expect(rows[0].opponent.map((d) => d.name)).toEqual(["Notice of Appeal"]);
+  });
+
+  test("appellantContext='claimant' + side='defendant' lands the row in opponent (claimant ≠ us)", () => {
+    // The user is on the defendant side; per-card pick says the
+    // claimant appealed. The "both" row collapses to the claimant's
+    // column, which after the side-swap is opponent (right).
+    const dl: CalculatedDeadline = {
+      ...both("Notice of Appeal", "2026-07-23"),
+      appellantContext: "claimant",
+    };
+    const rows = bucketDeadlinesIntoColumns([dl], { side: "defendant", appellant: "defendant" });
+    expect(rows[0].ours).toHaveLength(0);
+    expect(rows[0].opponent.map((d) => d.name)).toEqual(["Notice of Appeal"]);
+  });
+
+  test("appellantContext='both' or 'none' falls back to page-level mirror (t-paliad-265)", () => {
+    // 'both' and 'none' aren't side-collapse values — they're
+    // statements about who appealed but don't pick a column. The
+    // bucketer treats them as no override, so the page-level
+    // appellant (or default mirror) applies.
+    const both1: CalculatedDeadline = {
+      ...both("Notice of Appeal", "2026-07-23"),
+      appellantContext: "both",
+    };
+    const rowsBoth = bucketDeadlinesIntoColumns([both1]);
+    expect(rowsBoth[0].ours.map((d) => d.name)).toEqual(["Notice of Appeal"]);
+    expect(rowsBoth[0].opponent.map((d) => d.name)).toEqual(["Notice of Appeal"]);
+  });
+
   test("unscheduled rows (no dueDate) trail dated rows, preserving declaration order", () => {
     const rows = bucketDeadlinesIntoColumns([
       partySpecific("court", "Oral Hearing", ""),

frontend/src/client/views/verfahrensablauf-core.ts

@@ -61,6 +61,17 @@ export interface CalculatedDeadline {
   // Frontend save-modal logic doesn't read this; the rule editor
   // (Slice 11) is the consumer. Unknown shape on this side — pass-through.
   conditionExpr?: unknown;
+  // choicesOffered (t-paliad-265): declares which per-card choice-kinds
+  // this rule offers on the Verfahrensablauf timeline. Object shape:
+  // { appellant?: string[], include_ccr?: [true,false], skip?: [true,false] }.
+  // null/undefined = no caret affordance.
+  choicesOffered?: Record<string, unknown>;
+  // appellantContext (t-paliad-265): the per-decision appellant pick
+  // that applies to descendants of the closest ancestor decision card
+  // with a per-card appellant set. Empty = no per-card override (the
+  // page-level appellant axis still applies in that case). The bucketer
+  // reads this in preference to the page-level appellant.
+  appellantContext?: string;
 }
 
 // priorityRendering returns the per-priority UX hints the save-modal
@@ -139,6 +150,16 @@ export interface CalcParams {
   flags?: string[];
   anchorOverrides?: Record<string, string>;
   courtId?: string;
+  // t-paliad-265: per-event-card choices. Either pass `projectId` for
+  // server-side lookup against paliad.project_event_choices, OR pass
+  // an inline list (for the unbound /tools/verfahrensablauf surface).
+  // When both are supplied the inline list wins server-side.
+  projectId?: string;
+  perCardChoices?: Array<{
+    submission_code: string;
+    choice_kind: string;
+    choice_value: string;
+  }>;
 }
 
 const PARTY_CLASS: Record<string, string> = {
@@ -272,6 +293,18 @@ export function deadlineCardHtml(dl: CalculatedDeadline, opts: CardOpts): string
     ? '<span class="optional-badge">optional</span>'
     : "";
 
+  // t-paliad-265 — caret affordance + chip indicator when this rule
+  // offers per-card choices and the user has made a pick. The popover
+  // open/commit lifecycle lives in client/views/event-card-choices.ts;
+  // the data-* attributes here are the wire contract between the two.
+  const choicesHtml = dl.code !== "" && dl.choicesOffered && Object.keys(dl.choicesOffered).length > 0
+    ? `<button type="button" class="event-card-choices-caret"
+         data-submission-code="${escAttr(dl.code)}"
+         data-choices-offered="${escAttr(JSON.stringify(dl.choicesOffered))}"
+         aria-label="${escAttr(t("choices.caret.title"))}"
+         title="${escAttr(t("choices.caret.title"))}">▾</button>`
+    : "";
+
   const dlName = getLang() === "en" ? dl.nameEN : dl.name;
 
   const adjustedNote = dl.wasAdjusted
@@ -310,12 +343,22 @@ export function deadlineCardHtml(dl: CalculatedDeadline, opts: CardOpts): string
       </div>`
     : "";
 
+  // Chip indicator surfaces the active per-card pick (t-paliad-265).
+  // The popover module rehydrates this on commit so it stays in sync.
+  const chipHtml = dl.code !== ""
+    ? `<span class="event-card-choices-chip"
+         data-submission-code="${escAttr(dl.code)}"
+         data-empty="true"></span>`
+    : "";
+
   return `<div class="timeline-item-header">
       <span class="timeline-name">
         ${dlName}
         ${mandatoryBadge}
+        ${chipHtml}
       </span>
       ${dateStr}
+      ${choicesHtml}
     </div>
     ${meta}
     ${adjustedNote}
@@ -532,7 +575,15 @@ export function bucketDeadlinesIntoColumns(
         row.court.push(dl);
         break;
       case "both":
-        if (appellantColumn !== null) {
+        // t-paliad-265: a per-card appellant set on a decision
+        // ancestor propagates as appellantContext on this rule. When
+        // present, it overrides the page-level appellant for the
+        // collapse decision on THIS row. Falls through to page-level
+        // when empty.
+        if (dl.appellantContext === "claimant" || dl.appellantContext === "defendant") {
+          const perCardCol = dl.appellantContext === "claimant" ? claimantColumn : defendantColumn;
+          row[perCardCol].push(dl);
+        } else if (appellantColumn !== null) {
           // Role-swap collapse: appellant initiated → both → one row
           // in appellant's column. Mirror suppressed.
           row[appellantColumn].push(dl);
@@ -625,6 +676,10 @@ export async function calculateDeadlines(params: CalcParams): Promise<DeadlineRe
           ? params.anchorOverrides
           : undefined,
         courtId: params.courtId || undefined,
+        projectId: params.projectId || undefined,
+        perCardChoices: params.perCardChoices && params.perCardChoices.length > 0
+          ? params.perCardChoices
+          : undefined,
       }),
     });
     if (!resp.ok) {

frontend/src/i18n-keys.ts

@@ -1008,6 +1008,23 @@ export type I18nKey =
   | "checklisten.tab.mine"
   | "checklisten.tab.templates"
   | "checklisten.title"
+  | "choices.appellant.both"
+  | "choices.appellant.chip"
+  | "choices.appellant.claimant"
+  | "choices.appellant.defendant"
+  | "choices.appellant.none"
+  | "choices.appellant.title"
+  | "choices.caret.title"
+  | "choices.commit.error"
+  | "choices.include_ccr.chip"
+  | "choices.include_ccr.false"
+  | "choices.include_ccr.title"
+  | "choices.include_ccr.true"
+  | "choices.reset"
+  | "choices.skip.false"
+  | "choices.skip.title"
+  | "choices.skip.true"
+  | "choices.skipped.chip"
   | "common.cancel"
   | "common.close"
   | "common.forbidden"

frontend/src/styles/global.css

@@ -3476,6 +3476,133 @@ input[type="range"]::-moz-range-thumb {
     color: var(--status-amber-fg);
 }
 
+/* t-paliad-265 — per-event-card optional choices. The caret sits in
+ * the card header next to the date; the chip surfaces the active pick
+ * inline with the title; the popover is body-attached and positioned
+ * by the JS module. Skipped rows fade to 50% opacity. */
+.event-card-choices-caret {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    margin-left: 0.4rem;
+    border: 1px solid var(--color-border, #d4d4d4);
+    border-radius: 4px;
+    background: transparent;
+    color: var(--color-text-muted);
+    font-size: 0.85rem;
+    cursor: pointer;
+    line-height: 1;
+}
+
+.event-card-choices-caret:hover,
+.event-card-choices-caret:focus-visible {
+    background: var(--color-accent-bg, rgba(198, 244, 28, 0.18));
+    color: var(--color-text);
+}
+
+.event-card-choices-chip {
+    display: inline-flex;
+    gap: 0.3rem;
+    margin-left: 0.4rem;
+}
+
+.event-card-choices-chip[data-empty="true"] {
+    display: none;
+}
+
+.event-card-choices-chip-part {
+    font-size: 0.7rem;
+    font-weight: 500;
+    padding: 0.05rem 0.4rem;
+    border-radius: 99px;
+    background: var(--color-accent-bg, rgba(198, 244, 28, 0.22));
+    color: var(--color-text);
+}
+
+.event-card-choices-chip-part--skipped {
+    background: var(--color-bg-soft, #f1f1f1);
+    color: var(--color-text-muted);
+    text-decoration: line-through;
+}
+
+.timeline-item--skipped {
+    opacity: 0.55;
+}
+
+.event-card-choices-popover {
+    background: var(--color-bg, #fff);
+    border: 1px solid var(--color-border, #d4d4d4);
+    border-radius: 6px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+    padding: 0.6rem 0.7rem;
+    min-width: 240px;
+    max-width: 320px;
+}
+
+.event-card-choices-block + .event-card-choices-block {
+    margin-top: 0.7rem;
+    padding-top: 0.6rem;
+    border-top: 1px solid var(--color-border-soft, #ececec);
+}
+
+.event-card-choices-title {
+    font-size: 0.78rem;
+    font-weight: 600;
+    color: var(--color-text);
+    margin-bottom: 0.4rem;
+}
+
+.event-card-choices-options {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.3rem;
+}
+
+.event-card-choices-option {
+    font-size: 0.78rem;
+    padding: 0.25rem 0.55rem;
+    border-radius: 4px;
+    border: 1px solid var(--color-border, #d4d4d4);
+    background: var(--color-bg, #fff);
+    color: var(--color-text);
+    cursor: pointer;
+}
+
+.event-card-choices-option:hover,
+.event-card-choices-option:focus-visible {
+    background: var(--color-bg-soft, #f1f1f1);
+}
+
+.event-card-choices-option--active {
+    background: var(--color-accent, #c6f41c);
+    border-color: var(--color-accent, #c6f41c);
+    color: var(--color-text);
+    font-weight: 600;
+}
+
+.event-card-choices-reset {
+    margin-top: 0.5rem;
+    font-size: 0.72rem;
+    background: transparent;
+    border: none;
+    color: var(--color-text-muted);
+    text-decoration: underline;
+    cursor: pointer;
+    padding: 0;
+}
+
+.event-card-choices-reset:hover {
+    color: var(--color-text);
+}
+
+.event-card-choices-error {
+    margin-top: 0.5rem;
+    font-size: 0.74rem;
+    color: var(--status-red-fg, #b00020);
+}
+
 .timeline-rule {
     font-family: var(--font-mono);
     font-size: 0.72rem;