From 887e064ae988f6c2ae9bc241627184b068a7f53a Mon Sep 17 00:00:00 2001
From: Albrecht Degering <albrecht@degering.name>
Date: Mon, 20 Jul 2026 17:34:36 +0200
Subject: [PATCH] feat(scheduling): add a task-focused poll workspace

---
 webui/package.json                            |    4 +
 .../test-scheduling-page-structure.mjs        |   34 +
 webui/src/api/scheduling.ts                   |   21 +
 .../features/scheduling/SchedulingPage.tsx    | 1345 ++++++++++++-----
 webui/src/i18n/generatedTranslations.ts       |  210 ++-
 webui/src/styles/scheduling.css               |  538 +++++--
 6 files changed, 1658 insertions(+), 494 deletions(-)
 create mode 100644 webui/scripts/test-scheduling-page-structure.mjs

diff --git a/webui/package.json b/webui/package.json
index 7a64c66..694ed89 100644
--- a/webui/package.json
+++ b/webui/package.json
@@ -13,6 +13,10 @@
     },
     "./styles/scheduling.css": "./src/styles/scheduling.css"
   },
+  "scripts": {
+    "test:view-model": "node --experimental-strip-types --test tests/scheduling-view-model.test.ts",
+    "test:ui-structure": "node scripts/test-scheduling-page-structure.mjs"
+  },
   "peerDependencies": {
     "@govoplan/core-webui": "^0.1.8",
     "lucide-react": "^1.23.0",
diff --git a/webui/scripts/test-scheduling-page-structure.mjs b/webui/scripts/test-scheduling-page-structure.mjs
new file mode 100644
index 0000000..1135ad0
--- /dev/null
+++ b/webui/scripts/test-scheduling-page-structure.mjs
@@ -0,0 +1,34 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+
+const pagePath = fileURLToPath(new URL("../src/features/scheduling/SchedulingPage.tsx", import.meta.url));
+const apiPath = fileURLToPath(new URL("../src/api/scheduling.ts", import.meta.url));
+const page = readFileSync(pagePath, "utf8");
+const api = readFileSync(apiPath, "utf8");
+
+assert.match(page, /usePlatformUiCapability<CalendarPickerUiCapability>\("calendar\.picker"\)/);
+assert.match(page, /hasScope\(auth, "calendar:calendar:read"\)/);
+assert.match(page, /Boolean\(calendarPickerCapability\) && canReadCalendars && canReadAvailability && canWriteCalendarEvent/);
+assert.doesNotMatch(page, /@govoplan\/calendar-webui|govoplan-calendar\/webui/);
+assert.match(page, /className="scheduling-full-editor"/);
+assert.match(page, /className="scheduling-page-actions"/);
+
+const editorActions = page.slice(
+  page.indexOf('<div className="scheduling-page-actions">'),
+  page.indexOf('</div>', page.indexOf('<div className="scheduling-page-actions">'))
+);
+assert.ok(editorActions.indexOf("I18N.discard") < editorActions.indexOf("I18N.save"));
+assert.match(page, /<Plus aria-hidden="true" size=\{16\} \/> \{I18N\.addRequest\}/);
+assert.match(page, /title=\{I18N\.myRequests\}/);
+assert.match(page, /title=\{I18N\.invitedRequests\}/);
+assert.match(page, /className="scheduling-table-actions"/);
+assert.match(page, /aria-label=\{i18nMessage\("i18n:govoplan-scheduling\.decide_on_value/);
+assert.match(page, /submitSchedulingAvailability\(settings, selected\.id/);
+assert.doesNotMatch(page, /<p>\{selected\.calendar_id\}<\/p>/);
+assert.match(page, /className="scheduling-selected-calendar"/);
+assert.match(page, /showPlanningCalendarActions/);
+assert.match(page, /title=\{!canReadAvailability \? I18N\.requiresAvailabilityRead/);
+assert.match(api, /\/api\/v1\/scheduling\/requests\/\$\{requestId\}\/responses/);
+
+console.log("Scheduling page structure satisfies the focused list/create/respond contract.");
diff --git a/webui/src/api/scheduling.ts b/webui/src/api/scheduling.ts
index 421eff4..2939731 100644
--- a/webui/src/api/scheduling.ts
+++ b/webui/src/api/scheduling.ts
@@ -115,6 +115,15 @@ export type SchedulingDecisionPayload = {
   handoff_to_calendar?: boolean | null;
 };
 
+export type SchedulingAvailabilityValue = "available" | "maybe" | "unavailable";
+
+export type SchedulingAvailabilityPayload = {
+  answers: Array<{
+    slot_id: string;
+    value: SchedulingAvailabilityValue;
+  }>;
+};
+
 export type SchedulingCalendarActionResponse = {
   request: SchedulingRequest;
   created_event_ids: string[];
@@ -197,6 +206,18 @@ export function createSchedulingRequest(settings: ApiSettings, payload: Scheduli
   return apiFetch<SchedulingRequest>(settings, "/api/v1/scheduling/requests", json(payload));
 }
 
+export function submitSchedulingAvailability(
+  settings: ApiSettings,
+  requestId: string,
+  payload: SchedulingAvailabilityPayload
+): Promise<SchedulingStatusResponse> {
+  return apiFetch<SchedulingStatusResponse>(
+    settings,
+    `/api/v1/scheduling/requests/${requestId}/responses`,
+    json(payload)
+  );
+}
+
 export function openSchedulingRequest(settings: ApiSettings, requestId: string): Promise<SchedulingStatusResponse> {
   return apiFetch<SchedulingStatusResponse>(settings, `/api/v1/scheduling/requests/${requestId}/open`, json({}));
 }
diff --git a/webui/src/features/scheduling/SchedulingPage.tsx b/webui/src/features/scheduling/SchedulingPage.tsx
index ab71fc0..0b9d399 100644
--- a/webui/src/features/scheduling/SchedulingPage.tsx
+++ b/webui/src/features/scheduling/SchedulingPage.tsx
@@ -1,6 +1,28 @@
 import { useEffect, useMemo, useState, type FormEvent } from "react";
-import { Bell, CalendarCheck, Check, Clock, Plus, RefreshCw, Send, XCircle } from "lucide-react";
-import { Button, EmailAddressInput, hasScope, type ApiSettings, type AuthInfo, type MailboxAddress } from "@govoplan/core-webui";
+import {
+  Bell,
+  CalendarCheck,
+  Check,
+  Clock,
+  Plus,
+  RefreshCw,
+  Save,
+  Send,
+  Trash2,
+  XCircle
+} from "lucide-react";
+import {
+  Button,
+  EmailAddressInput,
+  hasScope,
+  i18nMessage,
+  usePlatformLanguage,
+  usePlatformUiCapability,
+  type ApiSettings,
+  type AuthInfo,
+  type CalendarPickerUiCapability,
+  type MailboxAddress
+} from "@govoplan/core-webui";
 import {
   closeSchedulingRequest,
   createSchedulingCalendarEvent,
@@ -14,18 +36,961 @@ import {
   lookupSchedulingAddresses,
   openSchedulingRequest,
   schedulingSummary,
+  submitSchedulingAvailability,
+  type SchedulingAvailabilityValue,
   type SchedulingNotification,
   type SchedulingRequest,
   type SchedulingSummaryResponse
 } from "../../api/scheduling";
+import {
+  groupSchedulingRequests,
+  schedulingParticipantForActor,
+  schedulingRelevantTimestamp,
+  schedulingRequestIsOwned,
+  schedulingSortPhase,
+  type SchedulingActor,
+  type SchedulingRequestGroups
+} from "./schedulingViewModel";
 
 type SlotDraft = { label: string; start_at: string; end_at: string };
 type ParticipantDraft = { display_name: string; email: string; required: boolean };
 
-const now = new Date();
-const defaultStart = new Date(now.getTime() + 24 * 60 * 60 * 1000);
-defaultStart.setMinutes(0, 0, 0);
-const defaultEnd = new Date(defaultStart.getTime() + 60 * 60 * 1000);
+const I18N = {
+  addParticipant: "i18n:govoplan-scheduling.add_participant.6cff957d",
+  addRequest: "i18n:govoplan-scheduling.add_scheduling_request.3c71be15",
+  addSlot: "i18n:govoplan-scheduling.add_slot.9fcff3ed",
+  answered: "i18n:govoplan-scheduling.answered.e0aafffa",
+  available: "i18n:govoplan-scheduling.available.7c62a142",
+  awaitingResponse: "i18n:govoplan-scheduling.awaiting_response.ee646ea9",
+  basicInformation: "i18n:govoplan-scheduling.basic_information.d8bc7383",
+  busy: "i18n:govoplan-scheduling.busy.592a9d16",
+  calendar: "i18n:govoplan-scheduling.calendar.adab5090",
+  calendarCoordination: "i18n:govoplan-scheduling.calendar_coordination.291ab00a",
+  configuredCalendar: "i18n:govoplan-scheduling.configured_calendar.e2e8ebd5",
+  calendarDescription: "i18n:govoplan-scheduling.use_a_calendar_for_availability_checks_tentative_holds_a.20ccc1fa",
+  finalEventLabel: "i18n:govoplan-scheduling.create_calendar_event.0b87cfcf",
+  calendarIntegration: "i18n:govoplan-scheduling.calendar_integration.181ad18b",
+  calendarUnavailable: "i18n:govoplan-scheduling.calendar_integration_requires_the_calendar_module_plus_c.f892cb1e",
+  candidateAvailability: "i18n:govoplan-scheduling.candidate_availability.9541c4b5",
+  candidateSlots: "i18n:govoplan-scheduling.candidate_slots.c414946b",
+  checkFreeBusy: "i18n:govoplan-scheduling.check_free_busy.e9700e00",
+  chooseAvailability: "i18n:govoplan-scheduling.choose_availability.ac95b8f6",
+  closePoll: "i18n:govoplan-scheduling.close_poll.a6a18916",
+  closed: "i18n:govoplan-scheduling.closed.88d86b77",
+  createAndOpen: "i18n:govoplan-scheduling.create_and_open_scheduling_request.1dbc9345",
+  description: "i18n:govoplan-scheduling.description.55f8ebc8",
+  determined: "i18n:govoplan-scheduling.determined.9f23293d",
+  discard: "i18n:govoplan-scheduling.discard.36fff63c",
+  discardConfirm: "i18n:govoplan-scheduling.discard_this_unsaved_scheduling_request.4a956be2",
+  end: "i18n:govoplan-scheduling.end.a2bb9d34",
+  free: "i18n:govoplan-scheduling.free.75f52718",
+  holds: "i18n:govoplan-scheduling.create_tentative_holds.51c4744e",
+  invitedRequests: "i18n:govoplan-scheduling.scheduling_requests_for_me.1d521aba",
+  loading: "i18n:govoplan-scheduling.loading_scheduling_requests.f42be95d",
+  location: "i18n:govoplan-scheduling.location.d219c681",
+  managedRequests: "i18n:govoplan-scheduling.managed_scheduling_requests.7a45972f",
+  maybe: "i18n:govoplan-scheduling.maybe.56dd8d0b",
+  myRequests: "i18n:govoplan-scheduling.my_scheduling_requests.d28ef235",
+  name: "i18n:govoplan-scheduling.name.709a2322",
+  newRequest: "i18n:govoplan-scheduling.new_scheduling_request.2080f675",
+  noNotifications: "i18n:govoplan-scheduling.no_notifications_have_been_created.c8d43ca3",
+  noParticipants: "i18n:govoplan-scheduling.no_participants.73a89101",
+  noRequest: "i18n:govoplan-scheduling.no_scheduling_request_selected.ac940664",
+  noRequestsInGroup: "i18n:govoplan-scheduling.no_requests_in_this_group.a63c1b40",
+  notifications: "i18n:govoplan-scheduling.notifications.753a22b2",
+  open: "i18n:govoplan-scheduling.open.cf9b7706",
+  openPoll: "i18n:govoplan-scheduling.open_poll.2beac9a7",
+  participantEmail: "i18n:govoplan-scheduling.participant_email.2cadfd9e",
+  participants: "i18n:govoplan-scheduling.participants.cd56e083",
+  past: "i18n:govoplan-scheduling.past.405c12fb",
+  refresh: "i18n:govoplan-scheduling.refresh_requests.0a3ed7a1",
+  reminder: "i18n:govoplan-scheduling.send_reminder.cf5eb3bf",
+  requestFailed: "i18n:govoplan-scheduling.request_failed.9fcda32c",
+  requests: "i18n:govoplan-scheduling.scheduling_requests.b3c12f4d",
+  required: "i18n:govoplan-scheduling.required.eed6bfb4",
+  requiresAvailabilityRead: "i18n:govoplan-scheduling.requires_calendar_availability_read_access.b48ed91b",
+  requiresEventWrite: "i18n:govoplan-scheduling.requires_calendar_event_write_access.887b0763",
+  responseRecorded: "i18n:govoplan-scheduling.your_response_has_been_recorded.b855088d",
+  responseReplace: "i18n:govoplan-scheduling.the_response_replaces_your_previous_availability_choices.74c16d53",
+  invitationHelp: "i18n:govoplan-scheduling.you_can_respond_here_or_use_the_invitation_link_you_rece.1a25fd53",
+  save: "i18n:govoplan-scheduling.save.efc007a3",
+  saving: "i18n:govoplan-scheduling.saving.56a2285c",
+  selectCalendar: "i18n:govoplan-scheduling.select_a_calendar.f6af95bb",
+  selectResponse: "i18n:govoplan-scheduling.choose_availability_for_at_least_one_candidate_slot.28d2111f",
+  sendResponse: "i18n:govoplan-scheduling.submit_response.a5f0c053",
+  start: "i18n:govoplan-scheduling.start.952f3754",
+  title: "i18n:govoplan-scheduling.title.768e0c1c",
+  titleRequired: "i18n:govoplan-scheduling.scheduling_request_title_is_required.a27338be",
+  unchecked: "i18n:govoplan-scheduling.unchecked.1b927dec",
+  unavailable: "i18n:govoplan-scheduling.unavailable.2c9c1f79",
+  updateResponse: "i18n:govoplan-scheduling.update_response.346233cf",
+  updateResponseHelp: "i18n:govoplan-scheduling.responses_may_be_updated_while_this_request_remains_open.4faecbbe",
+  whatActionsDo: "i18n:govoplan-scheduling.what_do_these_actions_do.9a9aee0e"
+} as const;
+
+export default function SchedulingPage({ settings, auth }: { settings: ApiSettings; auth: AuthInfo }) {
+  const { translateText } = usePlatformLanguage();
+  const calendarPickerCapability = usePlatformUiCapability<CalendarPickerUiCapability>("calendar.picker");
+  const CalendarPicker = calendarPickerCapability?.CalendarPicker;
+  const [requests, setRequests] = useState<SchedulingRequest[]>([]);
+  const [selectedId, setSelectedId] = useState("");
+  const [creating, setCreating] = useState(false);
+  const [summary, setSummary] = useState<SchedulingSummaryResponse | null>(null);
+  const [notifications, setNotifications] = useState<SchedulingNotification[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState("");
+  const [draftDirty, setDraftDirty] = useState(false);
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [location, setLocation] = useState("");
+  const [calendarId, setCalendarId] = useState("");
+  const [calendarEnabled, setCalendarEnabled] = useState(false);
+  const [slots, setSlots] = useState<SlotDraft[]>(() => initialSlots(translateText));
+  const [participants, setParticipants] = useState<ParticipantDraft[]>(() => [emptyParticipant()]);
+  const [availability, setAvailability] = useState<Record<string, SchedulingAvailabilityValue | "">>({});
+  const [addressLookupQuery, setAddressLookupQuery] = useState("");
+  const [addressSuggestions, setAddressSuggestions] = useState<MailboxAddress[]>([]);
+
+  const canWrite = hasScope(auth, "scheduling:schedule:write");
+  const canRespond = hasScope(auth, "scheduling:availability:write");
+  const canReadCalendars = hasScope(auth, "calendar:calendar:read");
+  const canReadAvailability = hasScope(auth, "calendar:availability:read");
+  const canWriteCalendarEvent = hasScope(auth, "calendar:event:write");
+  const calendarIntegrationAvailable = Boolean(calendarPickerCapability) && canReadCalendars && canReadAvailability && canWriteCalendarEvent;
+  const actor = useMemo<SchedulingActor>(() => ({
+    accountId: auth.principal?.account_id || auth.user.account_id,
+    userId: auth.user.id,
+    membershipId: auth.principal?.membership_id,
+    identityId: auth.principal?.identity_id,
+    email: auth.principal?.email || auth.user.email
+  }), [auth.principal, auth.user.account_id, auth.user.email, auth.user.id]);
+  const groups = useMemo(() => groupSchedulingRequests(requests, actor), [actor, requests]);
+  const selected = useMemo(
+    () => requests.find((item) => item.id === selectedId) ?? firstRequest(groups),
+    [groups, requests, selectedId]
+  );
+  const selectedParticipant = useMemo(
+    () => selected ? schedulingParticipantForActor(selected, actor) : null,
+    [actor, selected]
+  );
+  const canManageSelected = Boolean(selected && canWrite);
+  const selectedPhase = selected ? schedulingSortPhase(selected, actor) : null;
+  const showPlanningCalendarActions = Boolean(
+    selected &&
+    selected.calendar_integration_enabled &&
+    canManageSelected &&
+    selectedPhase !== "past" &&
+    ["draft", "collecting", "closed"].includes(selected.status) &&
+    !selected.selected_slot_id
+  );
+  const showFinalCalendarAction = Boolean(
+    selected &&
+    selected.calendar_integration_enabled &&
+    canManageSelected &&
+    selectedPhase !== "past" &&
+    selected.status === "decided" &&
+    selected.selected_slot_id &&
+    !selected.calendar_event_id &&
+    selected.create_calendar_event_on_decision
+  );
+  const optionResultById = useMemo(() => {
+    const map = new Map<string, SchedulingSummaryResponse["poll_summary"]["option_results"][number]>();
+    for (const result of summary?.poll_summary.option_results ?? []) map.set(result.option_id, result);
+    return map;
+  }, [summary]);
+
+  useEffect(() => {
+    void loadRequests();
+  }, [settings.apiBaseUrl, settings.apiKey, settings.accessToken]);
+
+  useEffect(() => {
+    if (!selected?.id || creating) {
+      setSummary(null);
+      setNotifications([]);
+      return;
+    }
+    setAvailability({});
+    setSuccess("");
+    void loadDetails(selected.id);
+  }, [creating, selected?.id]);
+
+  useEffect(() => {
+    if (!creating || !draftDirty) return undefined;
+    const preventUnsavedExit = (event: BeforeUnloadEvent) => event.preventDefault();
+    window.addEventListener("beforeunload", preventUnsavedExit);
+    return () => window.removeEventListener("beforeunload", preventUnsavedExit);
+  }, [creating, draftDirty]);
+
+  useEffect(() => {
+    const query = addressLookupQuery.trim();
+    if (!creating || !canWrite || query.length < 2) {
+      setAddressSuggestions([]);
+      return undefined;
+    }
+    let cancelled = false;
+    const timer = window.setTimeout(() => {
+      void lookupSchedulingAddresses(settings, query)
+        .then((response) => {
+          if (cancelled || !response.available) {
+            setAddressSuggestions([]);
+            return;
+          }
+          setAddressSuggestions(response.candidates.flatMap((candidate): MailboxAddress[] => candidate.email
+            ? [{ ...(candidate.display_name ? { name: candidate.display_name } : {}), email: candidate.email }]
+            : []));
+        })
+        .catch(() => {
+          if (!cancelled) setAddressSuggestions([]);
+        });
+    }, 200);
+    return () => {
+      cancelled = true;
+      window.clearTimeout(timer);
+    };
+  }, [addressLookupQuery, canWrite, creating, settings.accessToken, settings.apiBaseUrl, settings.apiKey]);
+
+  async function loadRequests() {
+    setLoading(true);
+    setError("");
+    try {
+      const response = await listSchedulingRequests(settings);
+      setRequests(response.requests);
+      setSelectedId((current) => response.requests.some((item) => item.id === current)
+        ? current
+        : "");
+    } catch (err) {
+      setError(errorMessage(err, translateText(I18N.requestFailed)));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function loadDetails(requestId: string) {
+    const [summaryResponse, notificationResponse] = await Promise.all([
+      schedulingSummary(settings, requestId).catch(() => null),
+      listSchedulingNotifications(settings, requestId).catch(() => ({ notifications: [] }))
+    ]);
+    setSummary(summaryResponse);
+    setNotifications(notificationResponse.notifications);
+  }
+
+  function beginCreate() {
+    resetDraft();
+    setError("");
+    setSuccess("");
+    setCreating(true);
+  }
+
+  function discardCreate() {
+    if (saving) return;
+    if (draftDirty && !window.confirm(translateText(I18N.discardConfirm))) return;
+    resetDraft();
+    setCreating(false);
+  }
+
+  async function createRequest(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!canWrite) return;
+    setError("");
+    if (!title.trim()) {
+      setError(I18N.titleRequired);
+      return;
+    }
+    if (calendarEnabled && !calendarId) {
+      setError("i18n:govoplan-scheduling.select_a_calendar_or_turn_off_calendar_integration.cc3652a9");
+      return;
+    }
+    if (slots.some((slot) => !slot.start_at || !slot.end_at || new Date(slot.end_at) <= new Date(slot.start_at))) {
+      setError("i18n:govoplan-scheduling.every_candidate_slot_must_end_after_it_starts.47836010");
+      return;
+    }
+    setSaving(true);
+    try {
+      const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+      const request = await createSchedulingRequest(settings, {
+        title: title.trim(),
+        description: description.trim() || null,
+        location: location.trim() || null,
+        timezone,
+        status: "collecting",
+        calendar: {
+          enabled: calendarEnabled,
+          calendar_id: calendarEnabled ? calendarId : null,
+          freebusy_enabled: calendarEnabled,
+          tentative_holds_enabled: calendarEnabled,
+          create_event_on_decision: calendarEnabled
+        },
+        slots: slots.map((slot) => ({
+          label: slot.label.trim() || null,
+          start_at: isoFromLocal(slot.start_at),
+          end_at: isoFromLocal(slot.end_at),
+          timezone,
+          location: location.trim() || null
+        })),
+        participants: participants
+          .filter((participant) => participant.email.trim() || participant.display_name.trim())
+          .map((participant) => ({
+            display_name: participant.display_name.trim() || null,
+            email: participant.email.trim() || null,
+            required: participant.required,
+            participant_type: "external"
+          }))
+      });
+      setRequests((items) => [request, ...items]);
+      setSelectedId(request.id);
+      setDraftDirty(false);
+      setCreating(false);
+    } catch (err) {
+      setError(errorMessage(err, translateText(I18N.requestFailed)));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function runAction(action: () => Promise<{ request?: SchedulingRequest } | unknown>) {
+    if (!selected || !canManageSelected) return;
+    setSaving(true);
+    setError("");
+    setSuccess("");
+    try {
+      const response = await action();
+      const updated = isRequestEnvelope(response) ? response.request : null;
+      if (updated) replaceRequest(updated);
+      await loadRequests();
+      await loadDetails(selected.id);
+    } catch (err) {
+      setError(errorMessage(err, translateText(I18N.requestFailed)));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function sendAvailability(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!selected || !selectedParticipant || !canRespond) return;
+    const answers = selected.slots
+      .map((slot) => ({ slot_id: slot.id, value: availability[slot.id] }))
+      .filter((answer): answer is { slot_id: string; value: SchedulingAvailabilityValue } => Boolean(answer.value));
+    if (!answers.length) {
+      setError(I18N.selectResponse);
+      return;
+    }
+    setSaving(true);
+    setError("");
+    setSuccess("");
+    try {
+      const response = await submitSchedulingAvailability(settings, selected.id, { answers });
+      replaceRequest(response.request);
+      setSuccess(I18N.responseRecorded);
+      await loadRequests();
+    } catch (err) {
+      setError(errorMessage(err, translateText(I18N.requestFailed)));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  if (creating) {
+    return (
+      <main className="scheduling-page scheduling-editor-page">
+        <form className="scheduling-full-editor" onSubmit={(event) => void createRequest(event)}>
+          <header className="scheduling-page-header">
+            <div className="scheduling-page-title">
+              <CalendarCheck aria-hidden="true" size={20} />
+              <div>
+                <h1>{I18N.newRequest}</h1>
+                <p>{I18N.createAndOpen}</p>
+              </div>
+            </div>
+            <div className="scheduling-page-actions">
+              <Button type="button" onClick={discardCreate} disabled={saving}>{I18N.discard}</Button>
+              <Button type="submit" variant="primary" disabled={saving || !canWrite}>
+                <Save aria-hidden="true" size={16} /> {saving ? I18N.saving : I18N.save}
+              </Button>
+            </div>
+          </header>
+          {error ? <div className="scheduling-alert" role="alert">{error}</div> : null}
+          <div className="scheduling-editor-scroll">
+            <section className="scheduling-card scheduling-form-grid" aria-labelledby="scheduling-basic-heading">
+              <h2 id="scheduling-basic-heading">{I18N.basicInformation}</h2>
+              <label className="scheduling-field scheduling-field-wide">
+                <span>{I18N.title}</span>
+                <input required maxLength={500} value={title} onChange={(event) => changeDraft(setTitle, event.target.value)} />
+              </label>
+              <label className="scheduling-field scheduling-field-wide">
+                <span>{I18N.description}</span>
+                <textarea rows={4} value={description} onChange={(event) => changeDraft(setDescription, event.target.value)} />
+              </label>
+              <label className="scheduling-field scheduling-field-wide">
+                <span>{I18N.location}</span>
+                <input maxLength={500} value={location} onChange={(event) => changeDraft(setLocation, event.target.value)} />
+              </label>
+            </section>
+
+            <section className="scheduling-card" aria-labelledby="scheduling-calendar-heading">
+              <div className="scheduling-section-heading">
+                <div>
+                  <h2 id="scheduling-calendar-heading">{I18N.calendarIntegration}</h2>
+                  <p>{I18N.calendarDescription}</p>
+                </div>
+                <label className="scheduling-toggle">
+                  <input
+                    type="checkbox"
+                    checked={calendarEnabled}
+                    disabled={!calendarIntegrationAvailable}
+                    onChange={(event) => {
+                      setCalendarEnabled(event.target.checked);
+                      if (!event.target.checked) setCalendarId("");
+                      setDraftDirty(true);
+                    }} />
+                  <span>{I18N.calendar}</span>
+                </label>
+              </div>
+              {!calendarIntegrationAvailable ? <p className="scheduling-capability-note">{I18N.calendarUnavailable}</p> : null}
+              {calendarEnabled && CalendarPicker ? (
+                <CalendarPicker
+                  settings={settings}
+                  auth={auth}
+                  value={calendarId}
+                  onChange={(value) => {
+                    setCalendarId(value);
+                    setDraftDirty(true);
+                  }}
+                  label={I18N.calendar}
+                  emptyLabel={I18N.selectCalendar}
+                  required />
+              ) : null}
+            </section>
+
+            <EditableSlots
+              slots={slots}
+              onAdd={() => {
+                setSlots((items) => [...items, newSlot(items.length + 1, translateText)]);
+                setDraftDirty(true);
+              }}
+              onChange={(index, field, value) => {
+                setSlots((items) => items.map((item, itemIndex) => itemIndex === index ? { ...item, [field]: value } : item));
+                setDraftDirty(true);
+              }}
+              onRemove={(index) => {
+                setSlots((items) => items.filter((_item, itemIndex) => itemIndex !== index));
+                setDraftDirty(true);
+              }} />
+
+            <EditableParticipants
+              participants={participants}
+              suggestions={addressSuggestions}
+              canWrite={canWrite}
+              onSuggestionQueryChange={setAddressLookupQuery}
+              onAdd={() => {
+                setParticipants((items) => [...items, emptyParticipant()]);
+                setDraftDirty(true);
+              }}
+              onChange={(index, patch) => {
+                setParticipants((items) => items.map((item, itemIndex) => itemIndex === index ? { ...item, ...patch } : item));
+                setDraftDirty(true);
+              }}
+              onRemove={(index) => {
+                setParticipants((items) => items.filter((_item, itemIndex) => itemIndex !== index));
+                setDraftDirty(true);
+              }} />
+          </div>
+        </form>
+      </main>
+    );
+  }
+
+  return (
+    <main className="scheduling-page">
+      <div className="scheduling-shell">
+        <aside className="scheduling-sidebar" aria-label={I18N.requests}>
+          <div className="scheduling-sidebar-bar">
+            <strong>{I18N.requests}</strong>
+            <div className="scheduling-sidebar-actions">
+              <Button className="scheduling-icon-button" onClick={() => void loadRequests()} title={I18N.refresh} aria-label={I18N.refresh}>
+                <RefreshCw aria-hidden="true" size={16} />
+              </Button>
+              {canWrite ? (
+                <Button variant="primary" onClick={beginCreate}>
+                  <Plus aria-hidden="true" size={16} /> {I18N.addRequest}
+                </Button>
+              ) : null}
+            </div>
+          </div>
+          <div className="scheduling-list">
+            {loading ? <div className="scheduling-note" role="status">{I18N.loading}</div> : null}
+            <RequestGroup title={I18N.myRequests} requests={groups.owned} selectedId={selected?.id} actor={actor} onSelect={setSelectedId} />
+            <RequestGroup title={I18N.invitedRequests} requests={groups.invited} selectedId={selected?.id} actor={actor} onSelect={setSelectedId} />
+            {groups.other.length ? (
+              <RequestGroup title={I18N.managedRequests} requests={groups.other} selectedId={selected?.id} actor={actor} onSelect={setSelectedId} />
+            ) : null}
+          </div>
+        </aside>
+
+        <section className="scheduling-workspace">
+          <header className="scheduling-topbar">
+            <div className="scheduling-title-line">
+              <CalendarCheck aria-hidden="true" size={18} />
+              <div>
+                <strong>{selected?.title ?? I18N.requests}</strong>
+                {selected ? <small>{requestStatusLabel(selected, actor)}</small> : null}
+              </div>
+            </div>
+            {selected && canManageSelected ? (
+              <LifecycleActions
+                request={selected}
+                saving={saving}
+                onOpen={() => void runAction(() => openSchedulingRequest(settings, selected.id))}
+                onClose={() => void runAction(() => closeSchedulingRequest(settings, selected.id))}
+                onReminder={() => void runAction(() => createSchedulingNotifications(settings, selected.id, "reminder"))} />
+            ) : null}
+          </header>
+
+          {error ? <div className="scheduling-alert" role="alert">{error}</div> : null}
+          {success ? <div className="scheduling-success" role="status">{success}</div> : null}
+
+          <div className="scheduling-detail">
+            {selected ? (
+              <>
+                <section className="scheduling-card scheduling-summary-card">
+                  <div className="scheduling-status-row">
+                    <span className={`scheduling-status scheduling-status-${selected.status}`}>{requestStatusLabel(selected, actor)}</span>
+                    <span>{i18nMessage("i18n:govoplan-scheduling.value_participants.e776b092", { value0: selected.participants.length })}</span>
+                    {summary ? <span>{i18nMessage("i18n:govoplan-scheduling.value_responses.ba17af9a", { value0: summary.poll_summary.response_count })}</span> : null}
+                  </div>
+                  {selected.description ? <p>{selected.description}</p> : null}
+                  {selected.location ? <p><strong>{I18N.location}:</strong> {selected.location}</p> : null}
+                </section>
+
+                {selectedParticipant && selected.status === "collecting" ? (
+                  <form className="scheduling-card scheduling-response-card" onSubmit={(event) => void sendAvailability(event)}>
+                    <div className="scheduling-section-heading">
+                      <div>
+                        <h2>{I18N.candidateAvailability}</h2>
+                        <p>{selectedParticipant.status === "responded"
+                          ? (selected.allow_participant_updates ? I18N.responseReplace : I18N.responseRecorded)
+                          : I18N.invitationHelp}</p>
+                      </div>
+                      <Button
+                        variant="primary"
+                        type="submit"
+                        disabled={saving || !canRespond || (selectedParticipant.status === "responded" && !selected.allow_participant_updates)}>
+                        <Send aria-hidden="true" size={16} />
+                        {selectedParticipant.status === "responded" ? I18N.updateResponse : I18N.sendResponse}
+                      </Button>
+                    </div>
+                    {selectedParticipant.status === "responded" && selected.allow_participant_updates ? (
+                      <p className="scheduling-capability-note">{I18N.updateResponseHelp}</p>
+                    ) : null}
+                    <div className="scheduling-response-grid">
+                      {selected.slots.map((slot) => (
+                        <label key={slot.id}>
+                          <span><strong>{slot.label}</strong><small>{formatRange(slot.start_at, slot.end_at)}</small></span>
+                          <select
+                            value={availability[slot.id] ?? ""}
+                            disabled={selectedParticipant.status === "responded" && !selected.allow_participant_updates}
+                            onChange={(event) => setAvailability((current) => ({
+                              ...current,
+                              [slot.id]: event.target.value as SchedulingAvailabilityValue | ""
+                            }))}>
+                            <option value="">{I18N.chooseAvailability}</option>
+                            <option value="available">{I18N.available}</option>
+                            <option value="maybe">{I18N.maybe}</option>
+                            <option value="unavailable">{I18N.unavailable}</option>
+                          </select>
+                        </label>
+                      ))}
+                    </div>
+                  </form>
+                ) : null}
+
+                <section className="scheduling-card scheduling-table-card" aria-labelledby="scheduling-slots-heading">
+                  <div className="scheduling-section-heading">
+                    <h2 id="scheduling-slots-heading">{I18N.candidateSlots}</h2>
+                  </div>
+                  <div className="scheduling-table-scroll">
+                    <table className="scheduling-table">
+                      <thead><tr><th>{I18N.title}</th><th>{I18N.start}</th><th>{I18N.end}</th><th>{I18N.available}</th><th>{I18N.maybe}</th><th>{I18N.unavailable}</th><th aria-label={I18N.determined} /></tr></thead>
+                      <tbody>
+                        {selected.slots.map((slot) => {
+                          const result = slot.poll_option_id ? optionResultById.get(slot.poll_option_id) : null;
+                          const canDecide = canManageSelected && selected.status === "closed";
+                          return (
+                            <tr key={slot.id}>
+                              <td><strong>{slot.label}</strong>{slot.freebusy_status ? <small className={`scheduling-freebusy ${slot.freebusy_status}`}>{freeBusyLabel(slot.freebusy_status)}</small> : null}</td>
+                              <td>{formatDateTime(slot.start_at)}</td>
+                              <td>{formatDateTime(slot.end_at)}</td>
+                              <td>{result?.values.available ?? 0}</td>
+                              <td>{result?.values.maybe ?? 0}</td>
+                              <td>{result?.values.unavailable ?? 0}</td>
+                              <td className="scheduling-table-actions">
+                                {canDecide ? (
+                                  <Button
+                                    className="scheduling-icon-button"
+                                    title={i18nMessage("i18n:govoplan-scheduling.decide_on_value.196409cd", { value0: slot.label })}
+                                    aria-label={i18nMessage("i18n:govoplan-scheduling.decide_on_value.196409cd", { value0: slot.label })}
+                                    disabled={saving}
+                                    onClick={() => void runAction(() => decideSchedulingRequest(settings, selected.id, {
+                                      slot_id: slot.id,
+                                      handoff_to_calendar: selected.create_calendar_event_on_decision
+                                    }))}>
+                                    <Check aria-hidden="true" size={16} />
+                                  </Button>
+                                ) : null}
+                              </td>
+                            </tr>
+                          );
+                        })}
+                      </tbody>
+                    </table>
+                  </div>
+                </section>
+
+                {selected.calendar_integration_enabled && canManageSelected && (showPlanningCalendarActions || showFinalCalendarAction || selected.calendar_event_id) ? (
+                  <section className="scheduling-card" aria-labelledby="scheduling-calendar-actions-heading">
+                    <div className="scheduling-section-heading">
+                      <div>
+                        <h2 id="scheduling-calendar-actions-heading">{I18N.calendarCoordination}</h2>
+                        {CalendarPicker && selected.calendar_id ? (
+                          <CalendarPicker
+                            className="scheduling-selected-calendar"
+                            settings={settings}
+                            auth={auth}
+                            value={selected.calendar_id}
+                            onChange={() => undefined}
+                            label={I18N.configuredCalendar}
+                            disabled />
+                        ) : <p>{I18N.configuredCalendar}</p>}
+                      </div>
+                      <div className="scheduling-card-actions">
+                        {showPlanningCalendarActions ? (
+                          <Button
+                            disabled={saving || !canReadAvailability}
+                            title={!canReadAvailability ? I18N.requiresAvailabilityRead : undefined}
+                            onClick={() => void runAction(() => evaluateSchedulingFreeBusy(settings, selected.id))}>
+                            <RefreshCw aria-hidden="true" size={16} /> {I18N.checkFreeBusy}
+                          </Button>
+                        ) : null}
+                        {showPlanningCalendarActions && selected.calendar_hold_enabled ? (
+                          <Button
+                            disabled={saving || !canWriteCalendarEvent}
+                            title={!canWriteCalendarEvent ? I18N.requiresEventWrite : undefined}
+                            onClick={() => void runAction(() => createSchedulingHolds(settings, selected.id))}>
+                            <Clock aria-hidden="true" size={16} /> {I18N.holds}
+                          </Button>
+                        ) : null}
+                        {showFinalCalendarAction ? (
+                          <Button
+                            disabled={saving || !canWriteCalendarEvent}
+                            title={!canWriteCalendarEvent ? I18N.requiresEventWrite : undefined}
+                            onClick={() => void runAction(() => createSchedulingCalendarEvent(settings, selected.id))}>
+                            <CalendarCheck aria-hidden="true" size={16} /> {I18N.finalEventLabel}
+                          </Button>
+                        ) : null}
+                      </div>
+                    </div>
+                  </section>
+                ) : null}
+
+                <div className="scheduling-columns">
+                  <section className="scheduling-card">
+                    <h2>{I18N.participants}</h2>
+                    {selected.participants.length ? selected.participants.map((participant) => (
+                      <div className="scheduling-compact-row" key={participant.id}>
+                        <span>{participant.display_name || participant.email || participant.id}</span>
+                        <small>{participantStatusLabel(participant.status)}</small>
+                      </div>
+                    )) : <p className="scheduling-note">{I18N.noParticipants}</p>}
+                  </section>
+                  <section className="scheduling-card">
+                    <h2>{I18N.notifications}</h2>
+                    {notifications.length ? notifications.map((notification) => (
+                      <div className="scheduling-compact-row" key={notification.id}>
+                        <span>{notificationKindLabel(notification.event_kind)}</span>
+                        <small>{notificationStatusLabel(notification.status)}</small>
+                      </div>
+                    )) : <p className="scheduling-note">{I18N.noNotifications}</p>}
+                  </section>
+                </div>
+
+                <details className="scheduling-card scheduling-action-help">
+                  <summary>{I18N.whatActionsDo}</summary>
+                  <ul>
+                    <li>i18n:govoplan-scheduling.open_starts_collecting_availability_responses.c8ec34e5</li>
+                    <li>i18n:govoplan-scheduling.close_stops_accepting_new_availability_responses.a1d57519</li>
+                    <li>i18n:govoplan-scheduling.free_busy_checks_each_candidate_slot_against_the_selecte.50f0371a</li>
+                    <li>i18n:govoplan-scheduling.tentative_holds_create_one_provisional_calendar_event_pe.ff3f1884</li>
+                    <li>i18n:govoplan-scheduling.the_final_event_is_created_only_for_the_selected_slot.e3621252</li>
+                    <li>i18n:govoplan-scheduling.reminder_creates_a_notification_job_for_every_active_par.7ec68797</li>
+                  </ul>
+                </details>
+              </>
+            ) : <div className="scheduling-empty">{I18N.noRequest}</div>}
+          </div>
+        </section>
+      </div>
+    </main>
+  );
+
+  function changeDraft(setter: (value: string) => void, value: string) {
+    setter(value);
+    setDraftDirty(true);
+  }
+
+  function replaceRequest(updated: SchedulingRequest) {
+    setRequests((items) => items.map((item) => item.id === updated.id ? updated : item));
+  }
+
+  function resetDraft() {
+    setTitle("");
+    setDescription("");
+    setLocation("");
+    setCalendarId("");
+    setCalendarEnabled(false);
+    setSlots(initialSlots(translateText));
+    setParticipants([emptyParticipant()]);
+    setAddressLookupQuery("");
+    setAddressSuggestions([]);
+    setDraftDirty(false);
+  }
+}
+
+function RequestGroup({
+  title,
+  requests,
+  selectedId,
+  actor,
+  onSelect
+}: {
+  title: string;
+  requests: SchedulingRequest[];
+  selectedId?: string;
+  actor: SchedulingActor;
+  onSelect: (requestId: string) => void;
+}) {
+  return (
+    <section className="scheduling-list-group">
+      <h2>{title}</h2>
+      {requests.length ? requests.map((request) => (
+        <button
+          key={request.id}
+          className={`scheduling-list-item ${selectedId === request.id ? "is-selected" : ""}`}
+          type="button"
+          onClick={() => onSelect(request.id)}>
+          <span><strong>{request.title}</strong><small>{formatRelevantDate(request)}</small></span>
+          <small className="scheduling-list-status">{requestStatusLabel(request, actor)}</small>
+        </button>
+      )) : <p className="scheduling-list-empty">{I18N.noRequestsInGroup}</p>}
+    </section>
+  );
+}
+
+function LifecycleActions({
+  request,
+  saving,
+  onOpen,
+  onClose,
+  onReminder
+}: {
+  request: SchedulingRequest;
+  saving: boolean;
+  onOpen: () => void;
+  onClose: () => void;
+  onReminder: () => void;
+}) {
+  if (request.status === "draft") {
+    return <Button variant="primary" disabled={saving} onClick={onOpen}><Send aria-hidden="true" size={16} /> {I18N.openPoll}</Button>;
+  }
+  if (request.status === "collecting") {
+    return (
+      <div className="scheduling-actions">
+        <Button disabled={saving} onClick={onReminder}><Bell aria-hidden="true" size={16} /> {I18N.reminder}</Button>
+        <Button variant="primary" disabled={saving} onClick={onClose}><XCircle aria-hidden="true" size={16} /> {I18N.closePoll}</Button>
+      </div>
+    );
+  }
+  return null;
+}
+
+function EditableSlots({
+  slots,
+  onAdd,
+  onChange,
+  onRemove
+}: {
+  slots: SlotDraft[];
+  onAdd: () => void;
+  onChange: (index: number, field: keyof SlotDraft, value: string) => void;
+  onRemove: (index: number) => void;
+}) {
+  return (
+    <section className="scheduling-card scheduling-table-card" aria-labelledby="scheduling-edit-slots-heading">
+      <div className="scheduling-section-heading">
+        <h2 id="scheduling-edit-slots-heading">{I18N.candidateSlots}</h2>
+        <Button type="button" onClick={onAdd}><Plus aria-hidden="true" size={16} /> {I18N.addSlot}</Button>
+      </div>
+      <div className="scheduling-table-scroll">
+        <table className="scheduling-table scheduling-edit-table">
+          <thead><tr><th>{I18N.title}</th><th>{I18N.start}</th><th>{I18N.end}</th><th aria-label="i18n:govoplan-scheduling.remove.e963907d" /></tr></thead>
+          <tbody>{slots.map((slot, index) => (
+            <tr key={index}>
+              <td><input required value={slot.label} onChange={(event) => onChange(index, "label", event.target.value)} /></td>
+              <td><input required type="datetime-local" value={slot.start_at} onChange={(event) => onChange(index, "start_at", event.target.value)} /></td>
+              <td><input required type="datetime-local" value={slot.end_at} onChange={(event) => onChange(index, "end_at", event.target.value)} /></td>
+              <td className="scheduling-table-actions">
+                <Button
+                  className="scheduling-icon-button"
+                  type="button"
+                  disabled={slots.length === 1}
+                  title={i18nMessage("i18n:govoplan-scheduling.remove_slot_value.3adc7576", { value0: index + 1 })}
+                  aria-label={i18nMessage("i18n:govoplan-scheduling.remove_slot_value.3adc7576", { value0: index + 1 })}
+                  onClick={() => onRemove(index)}>
+                  <Trash2 aria-hidden="true" size={16} />
+                </Button>
+              </td>
+            </tr>
+          ))}</tbody>
+        </table>
+      </div>
+    </section>
+  );
+}
+
+function EditableParticipants({
+  participants,
+  suggestions,
+  canWrite,
+  onSuggestionQueryChange,
+  onAdd,
+  onChange,
+  onRemove
+}: {
+  participants: ParticipantDraft[];
+  suggestions: MailboxAddress[];
+  canWrite: boolean;
+  onSuggestionQueryChange: (query: string) => void;
+  onAdd: () => void;
+  onChange: (index: number, patch: Partial<ParticipantDraft>) => void;
+  onRemove: (index: number) => void;
+}) {
+  return (
+    <section className="scheduling-card scheduling-table-card" aria-labelledby="scheduling-edit-participants-heading">
+      <div className="scheduling-section-heading">
+        <h2 id="scheduling-edit-participants-heading">{I18N.participants}</h2>
+        <Button type="button" onClick={onAdd}><Plus aria-hidden="true" size={16} /> {I18N.addParticipant}</Button>
+      </div>
+      <div className="scheduling-table-scroll">
+        <table className="scheduling-table scheduling-edit-table">
+          <thead><tr><th>{I18N.name}</th><th>{I18N.participantEmail}</th><th>{I18N.required}</th><th aria-label="i18n:govoplan-scheduling.remove.e963907d" /></tr></thead>
+          <tbody>{participants.map((participant, index) => (
+            <tr key={index}>
+              <td><input value={participant.display_name} onChange={(event) => onChange(index, { display_name: event.target.value })} /></td>
+              <td><EmailAddressInput
+                value={participant.email ? [{ name: participant.display_name || undefined, email: participant.email }] : []}
+                suggestions={suggestions}
+                onSuggestionQueryChange={onSuggestionQueryChange}
+                allowMultiple={false}
+                disabled={!canWrite}
+                compact
+                addLabel={I18N.addParticipant}
+                emptyText={I18N.participantEmail}
+                onChange={(addresses) => {
+                  const address = addresses[0];
+                  onChange(index, {
+                    display_name: address?.name ?? participant.display_name,
+                    email: address?.email ?? ""
+                  });
+                }} /></td>
+              <td><input type="checkbox" checked={participant.required} aria-label={I18N.required} onChange={(event) => onChange(index, { required: event.target.checked })} /></td>
+              <td className="scheduling-table-actions"><Button
+                className="scheduling-icon-button"
+                type="button"
+                title={i18nMessage("i18n:govoplan-scheduling.remove_participant_value.e55f2b70", { value0: index + 1 })}
+                aria-label={i18nMessage("i18n:govoplan-scheduling.remove_participant_value.e55f2b70", { value0: index + 1 })}
+                onClick={() => onRemove(index)}><Trash2 aria-hidden="true" size={16} /></Button></td>
+            </tr>
+          ))}</tbody>
+        </table>
+      </div>
+    </section>
+  );
+}
+
+function firstRequest(groups: SchedulingRequestGroups): SchedulingRequest | null {
+  return groups.owned[0] ?? groups.invited[0] ?? groups.other[0] ?? null;
+}
+
+function requestStatusLabel(request: SchedulingRequest, actor: SchedulingActor): string {
+  const phase = schedulingSortPhase(request, actor);
+  if (phase === "past") return I18N.past;
+  if (phase === "determined") return I18N.determined;
+  if (phase === "closed") return I18N.closed;
+  if (phase === "answered") return I18N.answered;
+  if (!schedulingRequestIsOwned(request, actor) && schedulingParticipantForActor(request, actor)) return I18N.awaitingResponse;
+  return request.status === "draft" ? "i18n:govoplan-scheduling.draft.23d33e22" : I18N.open;
+}
+
+function freeBusyLabel(status: string): string {
+  if (status === "free") return I18N.free;
+  if (status === "busy") return I18N.busy;
+  if (status === "error") return "i18n:govoplan-scheduling.error.7f2f6a15";
+  return I18N.unchecked;
+}
+
+function participantStatusLabel(status: string): string {
+  return ({
+    invited: "i18n:govoplan-scheduling.invited.53469df1",
+    responded: "i18n:govoplan-scheduling.responded.4f218211",
+    declined: "i18n:govoplan-scheduling.declined.ff59b80f",
+    removed: "i18n:govoplan-scheduling.removed.b5e77c5c",
+    draft: "i18n:govoplan-scheduling.draft.23d33e22"
+  } as Record<string, string>)[status] ?? status;
+}
+
+function notificationKindLabel(kind: string): string {
+  return ({
+    invitation: "i18n:govoplan-scheduling.invitation.6306ef74",
+    reminder: "i18n:govoplan-scheduling.reminder.b87a1929",
+    decision: "i18n:govoplan-scheduling.decision.7f59a1f1",
+    cancellation: "i18n:govoplan-scheduling.cancellation.319aaae4"
+  } as Record<string, string>)[kind] ?? kind;
+}
+
+function notificationStatusLabel(status: string): string {
+  return ({
+    pending: "i18n:govoplan-scheduling.pending.96f608c1",
+    queued: "i18n:govoplan-scheduling.queued.6a599877",
+    sending: "i18n:govoplan-scheduling.sending.ceafde86",
+    sent: "i18n:govoplan-scheduling.sent.35f49dcf",
+    failed: "i18n:govoplan-scheduling.failed.09fef5d8",
+    skipped: "i18n:govoplan-scheduling.skipped.5a000ad7"
+  } as Record<string, string>)[status] ?? status;
+}
+
+function isRequestEnvelope(value: unknown): value is { request: SchedulingRequest } {
+  return Boolean(value && typeof value === "object" && "request" in value);
+}
+
+function initialSlots(translateText: (value: string) => string): SlotDraft[] {
+  return [newSlot(1, translateText)];
+}
+
+function newSlot(position: number, translateText: (value: string) => string): SlotDraft {
+  const start = new Date(Date.now() + 24 * 60 * 60 * 1000);
+  start.setMinutes(0, 0, 0);
+  const end = new Date(start.getTime() + 60 * 60 * 1000);
+  return {
+    label: translateText(i18nMessage("i18n:govoplan-scheduling.option_value.3f643dc0", { value0: position })),
+    start_at: localValue(start),
+    end_at: localValue(end)
+  };
+}
+
+function emptyParticipant(): ParticipantDraft {
+  return { display_name: "", email: "", required: true };
+}
 
 function localValue(date: Date): string {
   const pad = (value: number) => value.toString().padStart(2, "0");
@@ -36,367 +1001,19 @@ function isoFromLocal(value: string): string {
   return new Date(value).toISOString();
 }
 
-export default function SchedulingPage({ settings, auth }: { settings: ApiSettings; auth: AuthInfo }) {
-  const [requests, setRequests] = useState<SchedulingRequest[]>([]);
-  const [selectedId, setSelectedId] = useState("");
-  const [summary, setSummary] = useState<SchedulingSummaryResponse | null>(null);
-  const [notifications, setNotifications] = useState<SchedulingNotification[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
-  const [error, setError] = useState("");
-  const [title, setTitle] = useState("Scheduling poll");
-  const [location, setLocation] = useState("");
-  const [calendarId, setCalendarId] = useState("");
-  const [calendarEnabled, setCalendarEnabled] = useState(false);
-  const [slots, setSlots] = useState<SlotDraft[]>([
-    { label: "Option 1", start_at: localValue(defaultStart), end_at: localValue(defaultEnd) }
-  ]);
-  const [participants, setParticipants] = useState<ParticipantDraft[]>([{ display_name: "", email: "", required: true }]);
-  const [addressLookupQuery, setAddressLookupQuery] = useState("");
-  const [addressSuggestions, setAddressSuggestions] = useState<MailboxAddress[]>([]);
-
-  const canWrite = hasScope(auth, "scheduling:schedule:write");
-  const selected = useMemo(() => requests.find((item) => item.id === selectedId) || requests[0] || null, [requests, selectedId]);
-  const optionResultById = useMemo(() => {
-    const map = new Map<string, SchedulingSummaryResponse["poll_summary"]["option_results"][number]>();
-    for (const result of summary?.poll_summary.option_results || []) map.set(result.option_id, result);
-    return map;
-  }, [summary]);
-
-  useEffect(() => {
-    void loadRequests();
-  }, [settings.apiBaseUrl, settings.apiKey, settings.accessToken]);
-
-  useEffect(() => {
-    if (!selected?.id) {
-      setSummary(null);
-      setNotifications([]);
-      return;
-    }
-    void loadDetails(selected.id);
-  }, [selected?.id]);
-
-  useEffect(() => {
-    const query = addressLookupQuery.trim();
-    if (!canWrite || query.length < 2) {
-      setAddressSuggestions([]);
-      return;
-    }
-    let cancelled = false;
-    const timer = window.setTimeout(() => {
-      void lookupSchedulingAddresses(settings, query).
-        then((response) => {
-          if (cancelled) return;
-          if (!response.available) {
-            setAddressSuggestions([]);
-            return;
-          }
-          setAddressSuggestions(
-            response.candidates
-              .map((candidate) => candidate.email ? { name: candidate.display_name || undefined, email: candidate.email } : null)
-              .filter((address): address is MailboxAddress => Boolean(address?.email))
-          );
-        }).
-        catch(() => {
-          if (!cancelled) setAddressSuggestions([]);
-        });
-    }, 200);
-    return () => {
-      cancelled = true;
-      window.clearTimeout(timer);
-    };
-  }, [addressLookupQuery, canWrite, settings.accessToken, settings.apiBaseUrl, settings.apiKey]);
-
-  async function loadRequests() {
-    setLoading(true);
-    setError("");
-    try {
-      const response = await listSchedulingRequests(settings);
-      setRequests(response.requests);
-      if (!selectedId && response.requests[0]) setSelectedId(response.requests[0].id);
-    } catch (err) {
-      setError(errorMessage(err));
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  async function loadDetails(requestId: string) {
-    try {
-      const [summaryResponse, notificationResponse] = await Promise.all([
-        schedulingSummary(settings, requestId).catch(() => null),
-        listSchedulingNotifications(settings, requestId).catch(() => ({ notifications: [] }))
-      ]);
-      setSummary(summaryResponse);
-      setNotifications(notificationResponse.notifications);
-    } catch (err) {
-      setError(errorMessage(err));
-    }
-  }
-
-  async function createRequest(event: FormEvent) {
-    event.preventDefault();
-    if (!canWrite) return;
-    setSaving(true);
-    setError("");
-    try {
-      const request = await createSchedulingRequest(settings, {
-        title,
-        location: location || null,
-        status: "collecting",
-        calendar: {
-          enabled: calendarEnabled,
-          calendar_id: calendarId || null,
-          freebusy_enabled: calendarEnabled,
-          tentative_holds_enabled: calendarEnabled,
-          create_event_on_decision: calendarEnabled
-        },
-        slots: slots.map((slot) => ({
-          label: slot.label || null,
-          start_at: isoFromLocal(slot.start_at),
-          end_at: isoFromLocal(slot.end_at),
-          location: location || null
-        })),
-        participants: participants
-          .filter((participant) => participant.email || participant.display_name)
-          .map((participant) => ({ ...participant, participant_type: "external" }))
-      });
-      setRequests((items) => [request, ...items]);
-      setSelectedId(request.id);
-    } catch (err) {
-      setError(errorMessage(err));
-    } finally {
-      setSaving(false);
-    }
-  }
-
-  async function runAction(action: () => Promise<{ request?: SchedulingRequest } | SchedulingSummaryResponse | unknown>) {
-    if (!selected || !canWrite) return;
-    setSaving(true);
-    setError("");
-    try {
-      const response = await action();
-      const updated = isRequestEnvelope(response) ? response.request : null;
-      if (updated) {
-        setRequests((items) => items.map((item) => (item.id === updated.id ? updated : item)));
-      }
-      await loadDetails(selected.id);
-    } catch (err) {
-      setError(errorMessage(err));
-    } finally {
-      setSaving(false);
-    }
-  }
-
-  return (
-    <main className="scheduling-page">
-      <div className="scheduling-shell">
-        <aside className="scheduling-sidebar">
-          <div className="scheduling-sidebar-bar">
-            <strong>Scheduling</strong>
-            <Button className="scheduling-icon-button" onClick={() => void loadRequests()} title="Refresh">
-              <RefreshCw size={16} />
-            </Button>
-          </div>
-          <div className="scheduling-list">
-            {loading ? <div className="scheduling-note">Loading</div> : null}
-            {requests.map((request) => (
-              <button
-                key={request.id}
-                className={`scheduling-list-item ${selected?.id === request.id ? "is-selected" : ""}`}
-                type="button"
-                onClick={() => setSelectedId(request.id)}
-              >
-                <span>{request.title}</span>
-                <small>{request.status}</small>
-              </button>
-            ))}
-          </div>
-        </aside>
-        <section className="scheduling-workspace">
-          <div className="scheduling-topbar">
-            <div className="scheduling-title-line">
-              <CalendarCheck size={18} />
-              <strong>{selected?.title || "Scheduling"}</strong>
-            </div>
-            <div className="scheduling-actions">
-              <Button disabled={!selected || saving || !canWrite} onClick={() => void runAction(() => openSchedulingRequest(settings, selected!.id))}>
-                <Send size={16} /> Open
-              </Button>
-              <Button disabled={!selected || saving || !canWrite} onClick={() => void runAction(() => closeSchedulingRequest(settings, selected!.id))}>
-                <XCircle size={16} /> Close
-              </Button>
-              <Button disabled={!selected || saving || !canWrite} onClick={() => void runAction(() => evaluateSchedulingFreeBusy(settings, selected!.id))}>
-                <RefreshCw size={16} /> Free/busy
-              </Button>
-              <Button disabled={!selected || saving || !canWrite} onClick={() => void runAction(() => createSchedulingHolds(settings, selected!.id))}>
-                <Clock size={16} /> Holds
-              </Button>
-              <Button disabled={!selected || saving || !canWrite} onClick={() => void runAction(() => createSchedulingCalendarEvent(settings, selected!.id))}>
-                <CalendarCheck size={16} /> Event
-              </Button>
-              <Button disabled={!selected || saving || !canWrite} onClick={() => void runAction(() => createSchedulingNotifications(settings, selected!.id, "reminder"))}>
-                <Bell size={16} /> Reminder
-              </Button>
-            </div>
-          </div>
-
-          {error ? <div className="scheduling-alert">{error}</div> : null}
-
-          <div className="scheduling-content">
-            <form className="scheduling-create-panel" onSubmit={(event) => void createRequest(event)}>
-              <div className="scheduling-panel-heading">
-                <Plus size={16} />
-                <strong>New poll</strong>
-              </div>
-              <label>
-                <span>Title</span>
-                <input value={title} onChange={(event) => setTitle(event.target.value)} />
-              </label>
-              <label>
-                <span>Location</span>
-                <input value={location} onChange={(event) => setLocation(event.target.value)} />
-              </label>
-              <label className="scheduling-checkbox">
-                <input checked={calendarEnabled} type="checkbox" onChange={(event) => setCalendarEnabled(event.target.checked)} />
-                <span>Calendar</span>
-              </label>
-              {calendarEnabled ? (
-                <label>
-                  <span>Calendar ID</span>
-                  <input value={calendarId} onChange={(event) => setCalendarId(event.target.value)} />
-                </label>
-              ) : null}
-              <div className="scheduling-form-section">
-                <div className="scheduling-mini-heading">
-                  <span>Slots</span>
-                  <Button type="button" onClick={() => setSlots((items) => [...items, { label: `Option ${items.length + 1}`, start_at: localValue(defaultStart), end_at: localValue(defaultEnd) }])}>
-                    <Plus size={14} />
-                  </Button>
-                </div>
-                {slots.map((slot, index) => (
-                  <div className="scheduling-slot-draft" key={index}>
-                    <input value={slot.label} onChange={(event) => updateSlot(index, "label", event.target.value)} />
-                    <input type="datetime-local" value={slot.start_at} onChange={(event) => updateSlot(index, "start_at", event.target.value)} />
-                    <input type="datetime-local" value={slot.end_at} onChange={(event) => updateSlot(index, "end_at", event.target.value)} />
-                  </div>
-                ))}
-              </div>
-              <div className="scheduling-form-section">
-                <div className="scheduling-mini-heading">
-                  <span>Participants</span>
-                  <Button type="button" onClick={() => setParticipants((items) => [...items, { display_name: "", email: "", required: true }])}>
-                    <Plus size={14} />
-                  </Button>
-                </div>
-                {participants.map((participant, index) => (
-                  <div className="scheduling-participant-draft" key={index}>
-                    <input placeholder="Name" value={participant.display_name} onChange={(event) => updateParticipant(index, "display_name", event.target.value)} />
-                    <EmailAddressInput
-                      value={participant.email ? [{ name: participant.display_name || undefined, email: participant.email }] : []}
-                      suggestions={addressSuggestions}
-                      onSuggestionQueryChange={setAddressLookupQuery}
-                      allowMultiple={false}
-                      disabled={!canWrite}
-                      compact
-                      addLabel="Add participant"
-                      emptyText="Participant email"
-                      onChange={(addresses) => {
-                        const address = addresses[0];
-                        updateParticipantDraft(index, {
-                          display_name: address?.name ?? participant.display_name,
-                          email: address?.email ?? ""
-                        });
-                      }} />
-                  </div>
-                ))}
-              </div>
-              <Button disabled={saving || !canWrite} type="submit" variant="primary">
-                <Plus size={16} /> Create
-              </Button>
-            </form>
-
-            <div className="scheduling-detail">
-              {selected ? (
-                <>
-                  <div className="scheduling-status-row">
-                    <span className={`scheduling-status scheduling-status-${selected.status}`}>{selected.status}</span>
-                    <span>{selected.participants.length} participants</span>
-                    <span>{summary?.poll_summary.response_count || 0} responses</span>
-                  </div>
-                  <div className="scheduling-slot-table">
-                    {selected.slots.map((slot) => {
-                      const result = slot.poll_option_id ? optionResultById.get(slot.poll_option_id) : null;
-                      return (
-                        <div className="scheduling-slot-row" key={slot.id}>
-                          <div>
-                            <strong>{slot.label}</strong>
-                            <small>{formatRange(slot.start_at, slot.end_at)}</small>
-                          </div>
-                          <span className={`scheduling-freebusy ${slot.freebusy_status || "unknown"}`}>{slot.freebusy_status || "unchecked"}</span>
-                          <span>{result?.values.available || 0} yes</span>
-                          <span>{result?.values.maybe || 0} maybe</span>
-                          <span>{result?.values.unavailable || 0} no</span>
-                          <Button disabled={saving || !canWrite} onClick={() => void runAction(() => decideSchedulingRequest(settings, selected.id, { slot_id: slot.id, handoff_to_calendar: selected.create_calendar_event_on_decision }))}>
-                            <Check size={16} /> Decide
-                          </Button>
-                        </div>
-                      );
-                    })}
-                  </div>
-                  <div className="scheduling-columns">
-                    <div>
-                      <div className="scheduling-panel-heading"><strong>Participants</strong></div>
-                      {selected.participants.map((participant) => (
-                        <div className="scheduling-compact-row" key={participant.id}>
-                          <span>{participant.display_name || participant.email || participant.id}</span>
-                          <small>{participant.status}</small>
-                        </div>
-                      ))}
-                    </div>
-                    <div>
-                      <div className="scheduling-panel-heading"><strong>Outbox</strong></div>
-                      {notifications.map((notification) => (
-                        <div className="scheduling-compact-row" key={notification.id}>
-                          <span>{notification.event_kind}</span>
-                          <small>{notification.status}</small>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                </>
-              ) : (
-                <div className="scheduling-empty">No scheduling request</div>
-              )}
-            </div>
-          </div>
-        </section>
-      </div>
-    </main>
-  );
-
-  function updateSlot(index: number, field: keyof SlotDraft, value: string) {
-    setSlots((items) => items.map((item, itemIndex) => (itemIndex === index ? { ...item, [field]: value } : item)));
-  }
-
-  function updateParticipant(index: number, field: keyof ParticipantDraft, value: string) {
-    setParticipants((items) => items.map((item, itemIndex) => (itemIndex === index ? { ...item, [field]: value } : item)));
-  }
-
-  function updateParticipantDraft(index: number, patch: Partial<ParticipantDraft>) {
-    setParticipants((items) => items.map((item, itemIndex) => (itemIndex === index ? { ...item, ...patch } : item)));
-  }
-}
-
-function isRequestEnvelope(value: unknown): value is { request: SchedulingRequest } {
-  return Boolean(value && typeof value === "object" && "request" in value);
+function formatDateTime(value: string): string {
+  return new Intl.DateTimeFormat(undefined, { dateStyle: "short", timeStyle: "short" }).format(new Date(value));
 }
 
 function formatRange(start: string, end: string): string {
-  const formatter = new Intl.DateTimeFormat(undefined, { dateStyle: "short", timeStyle: "short" });
-  return `${formatter.format(new Date(start))} - ${formatter.format(new Date(end))}`;
+  return `${formatDateTime(start)} – ${formatDateTime(end)}`;
 }
 
-function errorMessage(error: unknown): string {
-  return error instanceof Error ? error.message : "Request failed";
+function formatRelevantDate(request: SchedulingRequest): string {
+  const timestamp = schedulingRelevantTimestamp(request);
+  return Number.isFinite(timestamp) ? formatDateTime(new Date(timestamp).toISOString()) : "";
+}
+
+function errorMessage(error: unknown, fallback: string): string {
+  return error instanceof Error && error.message ? error.message : fallback;
 }
diff --git a/webui/src/i18n/generatedTranslations.ts b/webui/src/i18n/generatedTranslations.ts
index b2d1925..463052e 100644
--- a/webui/src/i18n/generatedTranslations.ts
+++ b/webui/src/i18n/generatedTranslations.ts
@@ -1,4 +1,210 @@
 export const generatedTranslations = {
-  en: {},
-  de: {}
+  en: {
+    "i18n:govoplan-scheduling.add_participant.6cff957d": "Add participant",
+    "i18n:govoplan-scheduling.add_scheduling_request.3c71be15": "Add scheduling request",
+    "i18n:govoplan-scheduling.add_slot.9fcff3ed": "Add slot",
+    "i18n:govoplan-scheduling.answered.e0aafffa": "Answered",
+    "i18n:govoplan-scheduling.available.7c62a142": "Available",
+    "i18n:govoplan-scheduling.awaiting_response.ee646ea9": "Awaiting response",
+    "i18n:govoplan-scheduling.basic_information.d8bc7383": "Basic information",
+    "i18n:govoplan-scheduling.busy.592a9d16": "Busy",
+    "i18n:govoplan-scheduling.calendar.adab5090": "Calendar",
+    "i18n:govoplan-scheduling.calendar_coordination.291ab00a": "Calendar coordination",
+    "i18n:govoplan-scheduling.configured_calendar.e2e8ebd5": "Configured calendar",
+    "i18n:govoplan-scheduling.calendar_integration.181ad18b": "Calendar integration",
+    "i18n:govoplan-scheduling.calendar_integration_requires_the_calendar_module_plus_c.f892cb1e": "Calendar integration requires the Calendar module plus calendar-read, availability-read, and event-write access.",
+    "i18n:govoplan-scheduling.candidate_availability.9541c4b5": "Candidate availability",
+    "i18n:govoplan-scheduling.candidate_slots.c414946b": "Candidate slots",
+    "i18n:govoplan-scheduling.check_free_busy.e9700e00": "Check free/busy",
+    "i18n:govoplan-scheduling.choose_availability.ac95b8f6": "Choose availability",
+    "i18n:govoplan-scheduling.choose_availability_for_at_least_one_candidate_slot.28d2111f": "Choose availability for at least one candidate slot.",
+    "i18n:govoplan-scheduling.close_poll.a6a18916": "Close poll",
+    "i18n:govoplan-scheduling.close_stops_accepting_new_availability_responses.a1d57519": "Close stops accepting new availability responses.",
+    "i18n:govoplan-scheduling.closed.88d86b77": "Closed",
+    "i18n:govoplan-scheduling.create_and_open_scheduling_request.1dbc9345": "Create and open scheduling request",
+    "i18n:govoplan-scheduling.create_calendar_event.0b87cfcf": "Create calendar event",
+    "i18n:govoplan-scheduling.create_tentative_holds.51c4744e": "Create tentative holds",
+    "i18n:govoplan-scheduling.cancellation.319aaae4": "Cancellation",
+    "i18n:govoplan-scheduling.decision.7f59a1f1": "Decision",
+    "i18n:govoplan-scheduling.declined.ff59b80f": "Declined",
+    "i18n:govoplan-scheduling.decide_on_value.196409cd": "Decide on {value0}",
+    "i18n:govoplan-scheduling.description.55f8ebc8": "Description",
+    "i18n:govoplan-scheduling.determined.9f23293d": "Determined",
+    "i18n:govoplan-scheduling.discard.36fff63c": "Discard",
+    "i18n:govoplan-scheduling.discard_this_unsaved_scheduling_request.4a956be2": "Discard this unsaved scheduling request?",
+    "i18n:govoplan-scheduling.draft.23d33e22": "Draft",
+    "i18n:govoplan-scheduling.end.a2bb9d34": "End",
+    "i18n:govoplan-scheduling.error.7f2f6a15": "Error",
+    "i18n:govoplan-scheduling.every_candidate_slot_must_end_after_it_starts.47836010": "Every candidate slot must end after it starts.",
+    "i18n:govoplan-scheduling.failed.09fef5d8": "Failed",
+    "i18n:govoplan-scheduling.free.75f52718": "Free",
+    "i18n:govoplan-scheduling.free_busy_checks_each_candidate_slot_against_the_selecte.50f0371a": "Free/busy checks each candidate slot against the selected calendar.",
+    "i18n:govoplan-scheduling.loading_scheduling_requests.f42be95d": "Loading scheduling requests…",
+    "i18n:govoplan-scheduling.invitation.6306ef74": "Invitation",
+    "i18n:govoplan-scheduling.invited.53469df1": "Invited",
+    "i18n:govoplan-scheduling.location.d219c681": "Location",
+    "i18n:govoplan-scheduling.managed_scheduling_requests.7a45972f": "Managed scheduling requests",
+    "i18n:govoplan-scheduling.maybe.56dd8d0b": "Maybe",
+    "i18n:govoplan-scheduling.my_scheduling_requests.d28ef235": "My scheduling requests",
+    "i18n:govoplan-scheduling.name.709a2322": "Name",
+    "i18n:govoplan-scheduling.new_scheduling_request.2080f675": "New scheduling request",
+    "i18n:govoplan-scheduling.no_notifications_have_been_created.c8d43ca3": "No notifications have been created.",
+    "i18n:govoplan-scheduling.no_participants.73a89101": "No participants",
+    "i18n:govoplan-scheduling.no_requests_in_this_group.a63c1b40": "No requests in this group",
+    "i18n:govoplan-scheduling.no_scheduling_request_selected.ac940664": "No scheduling request selected",
+    "i18n:govoplan-scheduling.notifications.753a22b2": "Notifications",
+    "i18n:govoplan-scheduling.open.cf9b7706": "Open",
+    "i18n:govoplan-scheduling.open_poll.2beac9a7": "Open poll",
+    "i18n:govoplan-scheduling.open_starts_collecting_availability_responses.c8ec34e5": "Open starts collecting availability responses.",
+    "i18n:govoplan-scheduling.option_value.3f643dc0": "Option {value0}",
+    "i18n:govoplan-scheduling.other_scheduling_requests.5cb6eb30": "Other scheduling requests",
+    "i18n:govoplan-scheduling.participant_email.2cadfd9e": "Participant email",
+    "i18n:govoplan-scheduling.participants.cd56e083": "Participants",
+    "i18n:govoplan-scheduling.past.405c12fb": "Past",
+    "i18n:govoplan-scheduling.pending.96f608c1": "Pending",
+    "i18n:govoplan-scheduling.queued.6a599877": "Queued",
+    "i18n:govoplan-scheduling.refresh_requests.0a3ed7a1": "Refresh requests",
+    "i18n:govoplan-scheduling.reminder_creates_a_notification_job_for_every_active_par.7ec68797": "Reminder creates a notification job for every active participant.",
+    "i18n:govoplan-scheduling.remove.e963907d": "Remove",
+    "i18n:govoplan-scheduling.remove_participant_value.e55f2b70": "Remove participant {value0}",
+    "i18n:govoplan-scheduling.remove_slot_value.3adc7576": "Remove slot {value0}",
+    "i18n:govoplan-scheduling.removed.b5e77c5c": "Removed",
+    "i18n:govoplan-scheduling.reminder.b87a1929": "Reminder",
+    "i18n:govoplan-scheduling.request_failed.9fcda32c": "Request failed",
+    "i18n:govoplan-scheduling.required.eed6bfb4": "Required",
+    "i18n:govoplan-scheduling.requires_calendar_availability_read_access.b48ed91b": "Requires Calendar availability-read access.",
+    "i18n:govoplan-scheduling.requires_calendar_event_write_access.887b0763": "Requires Calendar event-write access.",
+    "i18n:govoplan-scheduling.responses_may_be_updated_while_this_request_remains_open.4faecbbe": "Responses may be updated while this request remains open.",
+    "i18n:govoplan-scheduling.responded.4f218211": "Responded",
+    "i18n:govoplan-scheduling.save.efc007a3": "Save",
+    "i18n:govoplan-scheduling.saving.56a2285c": "Saving…",
+    "i18n:govoplan-scheduling.scheduling_requests.b3c12f4d": "Scheduling requests",
+    "i18n:govoplan-scheduling.scheduling_request_title_is_required.a27338be": "Scheduling request title is required.",
+    "i18n:govoplan-scheduling.scheduling_requests_for_me.1d521aba": "Scheduling requests for me",
+    "i18n:govoplan-scheduling.select_a_calendar.f6af95bb": "Select a calendar",
+    "i18n:govoplan-scheduling.select_a_calendar_or_turn_off_calendar_integration.cc3652a9": "Select a calendar or turn off Calendar integration.",
+    "i18n:govoplan-scheduling.send_reminder.cf5eb3bf": "Send reminder",
+    "i18n:govoplan-scheduling.sending.ceafde86": "Sending",
+    "i18n:govoplan-scheduling.sent.35f49dcf": "Sent",
+    "i18n:govoplan-scheduling.skipped.5a000ad7": "Skipped",
+    "i18n:govoplan-scheduling.start.952f3754": "Start",
+    "i18n:govoplan-scheduling.submit_response.a5f0c053": "Submit response",
+    "i18n:govoplan-scheduling.tentative_holds_create_one_provisional_calendar_event_pe.ff3f1884": "Tentative holds create one provisional calendar event per candidate slot.",
+    "i18n:govoplan-scheduling.the_final_event_is_created_only_for_the_selected_slot.e3621252": "The final event is created only for the selected slot.",
+    "i18n:govoplan-scheduling.the_response_replaces_your_previous_availability_choices.74c16d53": "The response replaces your previous availability choices.",
+    "i18n:govoplan-scheduling.title.768e0c1c": "Title",
+    "i18n:govoplan-scheduling.unavailable.2c9c1f79": "Unavailable",
+    "i18n:govoplan-scheduling.unchecked.1b927dec": "Unchecked",
+    "i18n:govoplan-scheduling.update_response.346233cf": "Update response",
+    "i18n:govoplan-scheduling.use_a_calendar_for_availability_checks_tentative_holds_a.20ccc1fa": "Use a calendar for availability checks, tentative holds, and the final event.",
+    "i18n:govoplan-scheduling.value_participants.e776b092": "{value0} participants",
+    "i18n:govoplan-scheduling.value_responses.ba17af9a": "{value0} responses",
+    "i18n:govoplan-scheduling.what_do_these_actions_do.9a9aee0e": "What do these actions do?",
+    "i18n:govoplan-scheduling.you_can_respond_here_or_use_the_invitation_link_you_rece.1a25fd53": "You can respond here or use the invitation link you received.",
+    "i18n:govoplan-scheduling.your_response_has_been_recorded.b855088d": "Your response has been recorded."
+  },
+  de: {
+    "i18n:govoplan-scheduling.add_participant.6cff957d": "Teilnehmende Person hinzufügen",
+    "i18n:govoplan-scheduling.add_scheduling_request.3c71be15": "Terminanfrage hinzufügen",
+    "i18n:govoplan-scheduling.add_slot.9fcff3ed": "Terminvorschlag hinzufügen",
+    "i18n:govoplan-scheduling.answered.e0aafffa": "Beantwortet",
+    "i18n:govoplan-scheduling.available.7c62a142": "Verfügbar",
+    "i18n:govoplan-scheduling.awaiting_response.ee646ea9": "Antwort ausstehend",
+    "i18n:govoplan-scheduling.basic_information.d8bc7383": "Grunddaten",
+    "i18n:govoplan-scheduling.busy.592a9d16": "Belegt",
+    "i18n:govoplan-scheduling.calendar.adab5090": "Kalender",
+    "i18n:govoplan-scheduling.calendar_coordination.291ab00a": "Kalenderabgleich",
+    "i18n:govoplan-scheduling.configured_calendar.e2e8ebd5": "Ausgewählter Kalender",
+    "i18n:govoplan-scheduling.calendar_integration.181ad18b": "Kalenderintegration",
+    "i18n:govoplan-scheduling.calendar_integration_requires_the_calendar_module_plus_c.f892cb1e": "Die Kalenderintegration benötigt das Kalendermodul sowie Leserechte für Kalender und Verfügbarkeiten und Schreibrechte für Termine.",
+    "i18n:govoplan-scheduling.candidate_availability.9541c4b5": "Verfügbarkeit zu den Vorschlägen",
+    "i18n:govoplan-scheduling.candidate_slots.c414946b": "Terminvorschläge",
+    "i18n:govoplan-scheduling.check_free_busy.e9700e00": "Frei/Belegt prüfen",
+    "i18n:govoplan-scheduling.choose_availability.ac95b8f6": "Verfügbarkeit auswählen",
+    "i18n:govoplan-scheduling.choose_availability_for_at_least_one_candidate_slot.28d2111f": "Wählen Sie für mindestens einen Terminvorschlag eine Verfügbarkeit aus.",
+    "i18n:govoplan-scheduling.close_poll.a6a18916": "Abstimmung schließen",
+    "i18n:govoplan-scheduling.close_stops_accepting_new_availability_responses.a1d57519": "Schließen beendet die Annahme neuer Verfügbarkeitsantworten.",
+    "i18n:govoplan-scheduling.closed.88d86b77": "Geschlossen",
+    "i18n:govoplan-scheduling.create_and_open_scheduling_request.1dbc9345": "Terminanfrage erstellen und öffnen",
+    "i18n:govoplan-scheduling.create_calendar_event.0b87cfcf": "Kalendertermin erstellen",
+    "i18n:govoplan-scheduling.create_tentative_holds.51c4744e": "Vorläufige Reservierungen erstellen",
+    "i18n:govoplan-scheduling.cancellation.319aaae4": "Stornierung",
+    "i18n:govoplan-scheduling.decision.7f59a1f1": "Entscheidung",
+    "i18n:govoplan-scheduling.declined.ff59b80f": "Abgelehnt",
+    "i18n:govoplan-scheduling.decide_on_value.196409cd": "{value0} als Termin festlegen",
+    "i18n:govoplan-scheduling.description.55f8ebc8": "Beschreibung",
+    "i18n:govoplan-scheduling.determined.9f23293d": "Festgelegt",
+    "i18n:govoplan-scheduling.discard.36fff63c": "Verwerfen",
+    "i18n:govoplan-scheduling.discard_this_unsaved_scheduling_request.4a956be2": "Diese ungespeicherte Terminanfrage verwerfen?",
+    "i18n:govoplan-scheduling.draft.23d33e22": "Entwurf",
+    "i18n:govoplan-scheduling.end.a2bb9d34": "Ende",
+    "i18n:govoplan-scheduling.error.7f2f6a15": "Fehler",
+    "i18n:govoplan-scheduling.every_candidate_slot_must_end_after_it_starts.47836010": "Jeder Terminvorschlag muss nach seinem Beginn enden.",
+    "i18n:govoplan-scheduling.failed.09fef5d8": "Fehlgeschlagen",
+    "i18n:govoplan-scheduling.free.75f52718": "Frei",
+    "i18n:govoplan-scheduling.free_busy_checks_each_candidate_slot_against_the_selecte.50f0371a": "Frei/Belegt prüft jeden Terminvorschlag gegen den ausgewählten Kalender.",
+    "i18n:govoplan-scheduling.loading_scheduling_requests.f42be95d": "Terminanfragen werden geladen …",
+    "i18n:govoplan-scheduling.invitation.6306ef74": "Einladung",
+    "i18n:govoplan-scheduling.invited.53469df1": "Eingeladen",
+    "i18n:govoplan-scheduling.location.d219c681": "Ort",
+    "i18n:govoplan-scheduling.managed_scheduling_requests.7a45972f": "Verwaltete Terminanfragen",
+    "i18n:govoplan-scheduling.maybe.56dd8d0b": "Vielleicht",
+    "i18n:govoplan-scheduling.my_scheduling_requests.d28ef235": "Meine Terminanfragen",
+    "i18n:govoplan-scheduling.name.709a2322": "Name",
+    "i18n:govoplan-scheduling.new_scheduling_request.2080f675": "Neue Terminanfrage",
+    "i18n:govoplan-scheduling.no_notifications_have_been_created.c8d43ca3": "Es wurden noch keine Benachrichtigungen erstellt.",
+    "i18n:govoplan-scheduling.no_participants.73a89101": "Keine Teilnehmenden",
+    "i18n:govoplan-scheduling.no_requests_in_this_group.a63c1b40": "Keine Anfragen in dieser Gruppe",
+    "i18n:govoplan-scheduling.no_scheduling_request_selected.ac940664": "Keine Terminanfrage ausgewählt",
+    "i18n:govoplan-scheduling.notifications.753a22b2": "Benachrichtigungen",
+    "i18n:govoplan-scheduling.open.cf9b7706": "Offen",
+    "i18n:govoplan-scheduling.open_poll.2beac9a7": "Abstimmung öffnen",
+    "i18n:govoplan-scheduling.open_starts_collecting_availability_responses.c8ec34e5": "Öffnen startet die Erfassung von Verfügbarkeitsantworten.",
+    "i18n:govoplan-scheduling.option_value.3f643dc0": "Vorschlag {value0}",
+    "i18n:govoplan-scheduling.other_scheduling_requests.5cb6eb30": "Andere Terminanfragen",
+    "i18n:govoplan-scheduling.participant_email.2cadfd9e": "E-Mail der teilnehmenden Person",
+    "i18n:govoplan-scheduling.participants.cd56e083": "Teilnehmende",
+    "i18n:govoplan-scheduling.past.405c12fb": "Vergangen",
+    "i18n:govoplan-scheduling.pending.96f608c1": "Ausstehend",
+    "i18n:govoplan-scheduling.queued.6a599877": "Eingereiht",
+    "i18n:govoplan-scheduling.refresh_requests.0a3ed7a1": "Anfragen aktualisieren",
+    "i18n:govoplan-scheduling.reminder_creates_a_notification_job_for_every_active_par.7ec68797": "Erinnern erstellt für jede aktive teilnehmende Person einen Benachrichtigungsauftrag.",
+    "i18n:govoplan-scheduling.remove.e963907d": "Entfernen",
+    "i18n:govoplan-scheduling.remove_participant_value.e55f2b70": "Teilnehmende Person {value0} entfernen",
+    "i18n:govoplan-scheduling.remove_slot_value.3adc7576": "Terminvorschlag {value0} entfernen",
+    "i18n:govoplan-scheduling.removed.b5e77c5c": "Entfernt",
+    "i18n:govoplan-scheduling.reminder.b87a1929": "Erinnerung",
+    "i18n:govoplan-scheduling.request_failed.9fcda32c": "Anfrage fehlgeschlagen",
+    "i18n:govoplan-scheduling.required.eed6bfb4": "Erforderlich",
+    "i18n:govoplan-scheduling.requires_calendar_availability_read_access.b48ed91b": "Erfordert Leserechte für Kalenderverfügbarkeiten.",
+    "i18n:govoplan-scheduling.requires_calendar_event_write_access.887b0763": "Erfordert Schreibrechte für Kalendertermine.",
+    "i18n:govoplan-scheduling.responses_may_be_updated_while_this_request_remains_open.4faecbbe": "Antworten können aktualisiert werden, solange diese Anfrage offen ist.",
+    "i18n:govoplan-scheduling.responded.4f218211": "Geantwortet",
+    "i18n:govoplan-scheduling.save.efc007a3": "Speichern",
+    "i18n:govoplan-scheduling.saving.56a2285c": "Wird gespeichert …",
+    "i18n:govoplan-scheduling.scheduling_requests.b3c12f4d": "Terminanfragen",
+    "i18n:govoplan-scheduling.scheduling_request_title_is_required.a27338be": "Für die Terminanfrage ist ein Titel erforderlich.",
+    "i18n:govoplan-scheduling.scheduling_requests_for_me.1d521aba": "Terminanfragen an mich",
+    "i18n:govoplan-scheduling.select_a_calendar.f6af95bb": "Kalender auswählen",
+    "i18n:govoplan-scheduling.select_a_calendar_or_turn_off_calendar_integration.cc3652a9": "Wählen Sie einen Kalender aus oder schalten Sie die Kalenderintegration aus.",
+    "i18n:govoplan-scheduling.send_reminder.cf5eb3bf": "Erinnerung senden",
+    "i18n:govoplan-scheduling.sending.ceafde86": "Wird gesendet",
+    "i18n:govoplan-scheduling.sent.35f49dcf": "Gesendet",
+    "i18n:govoplan-scheduling.skipped.5a000ad7": "Übersprungen",
+    "i18n:govoplan-scheduling.start.952f3754": "Beginn",
+    "i18n:govoplan-scheduling.submit_response.a5f0c053": "Antwort senden",
+    "i18n:govoplan-scheduling.tentative_holds_create_one_provisional_calendar_event_pe.ff3f1884": "Vorläufige Reservierungen erstellen je Terminvorschlag einen provisorischen Kalendereintrag.",
+    "i18n:govoplan-scheduling.the_final_event_is_created_only_for_the_selected_slot.e3621252": "Der endgültige Kalendereintrag wird nur für den ausgewählten Termin erstellt.",
+    "i18n:govoplan-scheduling.the_response_replaces_your_previous_availability_choices.74c16d53": "Die Antwort ersetzt Ihre vorherige Verfügbarkeitsauswahl.",
+    "i18n:govoplan-scheduling.title.768e0c1c": "Titel",
+    "i18n:govoplan-scheduling.unavailable.2c9c1f79": "Nicht verfügbar",
+    "i18n:govoplan-scheduling.unchecked.1b927dec": "Nicht geprüft",
+    "i18n:govoplan-scheduling.update_response.346233cf": "Antwort aktualisieren",
+    "i18n:govoplan-scheduling.use_a_calendar_for_availability_checks_tentative_holds_a.20ccc1fa": "Einen Kalender für Verfügbarkeitsprüfungen, vorläufige Reservierungen und den endgültigen Termin verwenden.",
+    "i18n:govoplan-scheduling.value_participants.e776b092": "{value0} Teilnehmende",
+    "i18n:govoplan-scheduling.value_responses.ba17af9a": "{value0} Antworten",
+    "i18n:govoplan-scheduling.what_do_these_actions_do.9a9aee0e": "Was bewirken diese Aktionen?",
+    "i18n:govoplan-scheduling.you_can_respond_here_or_use_the_invitation_link_you_rece.1a25fd53": "Sie können hier oder über den erhaltenen Einladungslink antworten.",
+    "i18n:govoplan-scheduling.your_response_has_been_recorded.b855088d": "Ihre Antwort wurde gespeichert."
+  }
 };
diff --git a/webui/src/styles/scheduling.css b/webui/src/styles/scheduling.css
index 6f83d14..3fdd80c 100644
--- a/webui/src/styles/scheduling.css
+++ b/webui/src/styles/scheduling.css
@@ -2,7 +2,6 @@
   box-sizing: border-box;
   height: calc(100vh - 115px);
   min-height: 0;
-  padding: 0;
   overflow: hidden;
   color: var(--text);
   background: var(--bg);
@@ -15,48 +14,87 @@
 }
 
 .scheduling-shell {
-  min-height: 0;
-  height: 100%;
   display: grid;
-  grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
+  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
   border: var(--border-line);
   background: var(--panel);
-  overflow: hidden;
 }
 
-.scheduling-sidebar {
+.scheduling-sidebar,
+.scheduling-workspace,
+.scheduling-full-editor {
   min-width: 0;
   min-height: 0;
   display: flex;
   flex-direction: column;
+}
+
+.scheduling-sidebar {
   border-right: var(--border-line);
   background: var(--panel-soft);
 }
 
 .scheduling-sidebar-bar,
 .scheduling-topbar,
-.scheduling-panel-heading,
-.scheduling-mini-heading,
-.scheduling-status-row,
+.scheduling-page-header {
+  min-height: 58px;
+  padding: 10px 14px;
+  border-bottom: var(--border-line);
+  background: var(--panel-header);
+}
+
+.scheduling-sidebar-bar,
+.scheduling-topbar,
+.scheduling-page-header,
+.scheduling-section-heading,
+.scheduling-sidebar-actions,
+.scheduling-page-actions,
+.scheduling-card-actions,
 .scheduling-actions,
-.scheduling-title-line {
+.scheduling-title-line,
+.scheduling-page-title,
+.scheduling-status-row {
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
-.scheduling-sidebar-bar {
+.scheduling-sidebar-bar,
+.scheduling-topbar,
+.scheduling-page-header,
+.scheduling-section-heading {
   justify-content: space-between;
-  min-height: 54px;
-  padding: 10px 12px;
-  border-bottom: var(--border-line);
-  background: var(--panel-header);
+}
+
+.scheduling-sidebar-actions,
+.scheduling-page-actions,
+.scheduling-card-actions,
+.scheduling-actions {
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.scheduling-sidebar-actions .btn,
+.scheduling-page-actions .btn,
+.scheduling-card-actions .btn,
+.scheduling-actions .btn,
+.scheduling-section-heading .btn,
+.scheduling-response-card .btn {
+  min-height: 34px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
 }
 
 .scheduling-icon-button.btn {
   width: 34px;
   min-width: 34px;
   height: 34px;
+  min-height: 34px;
   padding: 0;
   justify-content: center;
 }
@@ -67,30 +105,61 @@
   padding: 8px;
 }
 
+.scheduling-list-group + .scheduling-list-group {
+  margin-top: 14px;
+  padding-top: 12px;
+  border-top: var(--border-line);
+}
+
+.scheduling-list-group h2 {
+  margin: 0 8px 6px;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: .025em;
+  text-transform: uppercase;
+}
+
 .scheduling-list-item {
   width: 100%;
+  min-height: 50px;
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
-  gap: 8px;
+  gap: 10px;
   align-items: center;
-  min-height: 40px;
   margin: 0 0 4px;
-  padding: 8px 9px;
-  border: 0;
-  border-radius: 6px;
+  padding: 8px 10px;
+  border: 1px solid transparent;
+  border-radius: 7px;
   color: var(--text);
   background: transparent;
   text-align: left;
   cursor: pointer;
 }
 
-.scheduling-list-item:hover,
-.scheduling-list-item.is-selected {
+.scheduling-list-item:hover {
   background: var(--hover-bg);
 }
 
-.scheduling-list-item span,
-.scheduling-slot-row strong,
+.scheduling-list-item.is-selected {
+  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
+  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
+}
+
+.scheduling-list-item > span,
+.scheduling-title-line > div,
+.scheduling-page-title > div,
+.scheduling-section-heading > div {
+  min-width: 0;
+}
+
+.scheduling-list-item > span {
+  display: grid;
+  gap: 3px;
+}
+
+.scheduling-list-item strong,
+.scheduling-list-item small,
 .scheduling-compact-row span {
   min-width: 0;
   overflow: hidden;
@@ -99,121 +168,110 @@
 }
 
 .scheduling-list-item small,
-.scheduling-slot-row small,
-.scheduling-compact-row small,
-.scheduling-note {
+.scheduling-title-line small,
+.scheduling-page-title p,
+.scheduling-section-heading p,
+.scheduling-note,
+.scheduling-list-empty,
+.scheduling-compact-row small {
   color: var(--muted);
   font-size: 12px;
 }
 
+.scheduling-list-status {
+  max-width: 110px;
+  padding: 3px 7px;
+  border-radius: 999px;
+  background: var(--panel);
+  font-weight: 700;
+}
+
+.scheduling-list-empty {
+  margin: 3px 8px 8px;
+}
+
 .scheduling-workspace {
-  min-width: 0;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
   overflow: hidden;
 }
 
-.scheduling-topbar {
-  justify-content: space-between;
-  min-height: 54px;
-  padding: 9px 12px;
-  border-bottom: var(--border-line);
-  background: var(--panel-header);
-}
-
 .scheduling-title-line {
-  min-width: 180px;
+  min-width: 0;
 }
 
-.scheduling-actions {
-  flex-wrap: wrap;
-  justify-content: flex-end;
+.scheduling-title-line > div {
+  display: grid;
+  gap: 2px;
 }
 
-.scheduling-actions .btn,
-.scheduling-create-panel .btn,
-.scheduling-slot-row .btn {
-  min-height: 32px;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
+.scheduling-alert,
+.scheduling-success {
+  margin: 10px 14px 0;
+  padding: 9px 11px;
+  border: var(--border-line);
+  border-radius: 7px;
 }
 
 .scheduling-alert {
-  margin: 8px 12px 0;
-  padding: 8px 10px;
-  border: var(--border-line);
   border-color: var(--danger);
-  border-radius: 6px;
   color: var(--danger);
   background: var(--danger-soft);
 }
 
-.scheduling-content {
-  min-height: 0;
-  display: grid;
-  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
-  gap: 0;
-  overflow: hidden;
+.scheduling-success {
+  border-color: var(--success);
+  color: var(--success);
+  background: color-mix(in srgb, var(--success) 10%, var(--panel));
 }
 
-.scheduling-create-panel,
-.scheduling-detail {
+.scheduling-detail,
+.scheduling-editor-scroll {
   min-height: 0;
   overflow: auto;
-  padding: 12px;
+  padding: 14px;
 }
 
-.scheduling-create-panel {
+.scheduling-detail {
   display: grid;
   align-content: start;
-  gap: 10px;
-  border-right: var(--border-line);
-  background: var(--panel-soft);
+  gap: 12px;
 }
 
-.scheduling-create-panel label,
-.scheduling-form-section {
-  display: grid;
-  gap: 5px;
-}
-
-.scheduling-create-panel label span,
-.scheduling-mini-heading span {
-  color: var(--muted);
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.scheduling-create-panel input {
+.scheduling-card {
   width: 100%;
-  min-height: 34px;
-  padding: 6px 8px;
+  min-width: 0;
+  padding: 14px;
   border: var(--border-line);
-  border-radius: 6px;
-  color: var(--text);
-  background: var(--input-bg);
+  border-radius: 8px;
+  background: var(--panel);
 }
 
-.scheduling-checkbox {
-  grid-template-columns: auto minmax(0, 1fr);
-  align-items: center;
+.scheduling-card h2,
+.scheduling-page-header h1,
+.scheduling-section-heading h2 {
+  margin: 0;
+  color: var(--text-strong);
 }
 
-.scheduling-slot-draft,
-.scheduling-participant-draft {
-  display: grid;
-  gap: 6px;
+.scheduling-card h2,
+.scheduling-section-heading h2 {
+  font-size: 15px;
 }
 
-.scheduling-slot-draft {
-  grid-template-columns: minmax(0, 1fr);
+.scheduling-page-header h1 {
+  font-size: 19px;
+}
+
+.scheduling-page-title p,
+.scheduling-section-heading p {
+  margin: 3px 0 0;
+}
+
+.scheduling-summary-card > p:last-child {
+  margin-bottom: 0;
 }
 
 .scheduling-status-row {
   flex-wrap: wrap;
-  margin-bottom: 10px;
 }
 
 .scheduling-status {
@@ -222,7 +280,7 @@
   color: var(--text-strong);
   background: var(--panel-soft);
   font-size: 12px;
-  font-weight: 700;
+  font-weight: 800;
 }
 
 .scheduling-status-collecting,
@@ -230,33 +288,76 @@
   background: color-mix(in srgb, var(--accent) 18%, transparent);
 }
 
-.scheduling-slot-table {
-  display: grid;
-  gap: 6px;
+.scheduling-table-card {
+  padding: 0;
+  overflow: hidden;
 }
 
-.scheduling-slot-row {
-  display: grid;
-  grid-template-columns: minmax(180px, 1fr) auto auto auto auto auto;
-  gap: 8px;
-  align-items: center;
-  min-height: 46px;
-  padding: 8px;
+.scheduling-table-card > .scheduling-section-heading {
+  min-height: 52px;
+  padding: 9px 14px;
   border-bottom: var(--border-line);
+  background: var(--panel-header);
 }
 
-.scheduling-slot-row:hover {
-  background: var(--hover-bg);
+.scheduling-table-scroll {
+  width: 100%;
+  overflow: auto;
+}
+
+.scheduling-table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: auto;
+}
+
+.scheduling-table th,
+.scheduling-table td {
+  padding: 9px 10px;
+  border-bottom: var(--border-line);
+  text-align: left;
+  vertical-align: middle;
+}
+
+.scheduling-table tr:last-child td {
+  border-bottom: 0;
+}
+
+.scheduling-table th {
+  color: var(--muted);
+  background: var(--panel-soft);
+  font-size: 12px;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.scheduling-table td {
+  font-size: 13px;
+}
+
+.scheduling-table td:first-child {
+  min-width: 190px;
+}
+
+.scheduling-table td > strong {
+  display: block;
+}
+
+.scheduling-table-actions {
+  width: 1%;
+  text-align: right !important;
+  white-space: nowrap;
 }
 
 .scheduling-freebusy {
-  min-width: 74px;
-  padding: 3px 7px;
-  border-radius: 6px;
-  text-align: center;
-  font-size: 12px;
-  font-weight: 700;
+  display: inline-block;
+  margin-top: 3px;
+  padding: 2px 6px;
+  border-radius: 5px;
+  color: var(--muted);
   background: var(--panel-soft);
+  font-size: 11px;
+  font-weight: 700;
 }
 
 .scheduling-freebusy.free {
@@ -272,37 +373,218 @@
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 12px;
-  margin-top: 16px;
 }
 
 .scheduling-compact-row {
+  min-height: 36px;
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   gap: 8px;
-  min-height: 34px;
   align-items: center;
   border-bottom: var(--border-line);
 }
 
-.scheduling-empty {
-  padding: 20px;
+.scheduling-compact-row:last-child {
+  border-bottom: 0;
+}
+
+.scheduling-response-card {
+  display: grid;
+  gap: 12px;
+}
+
+.scheduling-response-grid {
+  display: grid;
+  gap: 6px;
+}
+
+.scheduling-response-grid label {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: minmax(220px, 1fr) minmax(160px, 240px);
+  gap: 12px;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: var(--border-line);
+}
+
+.scheduling-response-grid label:last-child {
+  border-bottom: 0;
+}
+
+.scheduling-response-grid label > span {
+  min-width: 0;
+  display: grid;
+  gap: 3px;
+}
+
+.scheduling-response-grid small {
   color: var(--muted);
 }
 
-@media (max-width: 980px) {
-  .scheduling-shell,
-  .scheduling-content,
-  .scheduling-columns {
-    grid-template-columns: minmax(0, 1fr);
+.scheduling-response-grid select,
+.scheduling-field input,
+.scheduling-field textarea,
+.scheduling-edit-table input:not([type="checkbox"]) {
+  width: 100%;
+  min-height: 36px;
+  padding: 7px 9px;
+  border: var(--border-line);
+  border-radius: 6px;
+  color: var(--text);
+  background: var(--input-bg);
+  font: inherit;
+}
+
+.scheduling-action-help summary {
+  cursor: pointer;
+  font-weight: 700;
+}
+
+.scheduling-action-help ul {
+  margin-bottom: 0;
+}
+
+.scheduling-empty {
+  padding: 28px;
+  color: var(--muted);
+  text-align: center;
+}
+
+.scheduling-editor-page {
+  background: var(--panel);
+}
+
+.scheduling-full-editor {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border: var(--border-line);
+  background: var(--bg);
+}
+
+.scheduling-page-header {
+  flex: 0 0 auto;
+}
+
+.scheduling-page-actions {
+  margin-left: auto;
+}
+
+.scheduling-editor-scroll {
+  display: grid;
+  align-content: start;
+  gap: 12px;
+}
+
+.scheduling-form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.scheduling-form-grid h2,
+.scheduling-field-wide {
+  grid-column: 1 / -1;
+}
+
+.scheduling-field {
+  display: grid;
+  gap: 5px;
+}
+
+.scheduling-field > span {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.scheduling-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  font-weight: 700;
+}
+
+.scheduling-capability-note {
+  margin: 10px 0 0;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.scheduling-edit-table input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+}
+
+@media (max-width: 1050px) {
+  .scheduling-shell {
+    grid-template-columns: minmax(260px, 310px) minmax(0, 1fr);
   }
 
-  .scheduling-sidebar,
-  .scheduling-create-panel {
+  .scheduling-sidebar-bar {
+    align-items: flex-start;
+  }
+
+  .scheduling-sidebar-actions {
+    align-items: flex-end;
+  }
+}
+
+@media (max-width: 820px) {
+  .scheduling-page {
+    height: auto;
+    min-height: calc(100vh - 115px);
+    overflow: auto;
+  }
+
+  .scheduling-shell {
+    height: auto;
+    grid-template-columns: minmax(0, 1fr);
+    overflow: visible;
+  }
+
+  .scheduling-sidebar {
+    max-height: 46vh;
     border-right: 0;
     border-bottom: var(--border-line);
   }
 
-  .scheduling-slot-row {
-    grid-template-columns: minmax(0, 1fr) auto;
+  .scheduling-workspace,
+  .scheduling-full-editor {
+    overflow: visible;
+  }
+
+  .scheduling-detail,
+  .scheduling-editor-scroll {
+    overflow: visible;
+  }
+
+  .scheduling-columns,
+  .scheduling-form-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .scheduling-page-header,
+  .scheduling-topbar,
+  .scheduling-section-heading {
+    align-items: flex-start;
+    flex-wrap: wrap;
+  }
+
+  .scheduling-page-actions,
+  .scheduling-card-actions,
+  .scheduling-actions {
+    width: 100%;
+  }
+
+  .scheduling-page-actions .btn:last-child,
+  .scheduling-card-actions .btn:last-child,
+  .scheduling-actions .btn:last-child {
+    margin-left: auto;
+  }
+
+  .scheduling-response-grid label {
+    grid-template-columns: minmax(0, 1fr);
   }
 }