From 5c86f7919283ea71d68142a8b74d54daac81e53b Mon Sep 17 00:00:00 2001
From: Nathan Panchout <nathanpanchout@hotmail.com>
Date: Fri, 6 Feb 2026 16:30:37 +0100
Subject: [PATCH] Refactor EventModal into section components (#7)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🙈(tools) remove OpenSpec skills and commands from Git tracking

Remove .claude/skills/openspec-*/ and .claude/commands/opsx/ from
Git tracking while keeping them locally. Extends the previous
cleanup (d24eed9) that handled the openspec/ directory.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* ✨(front) add EventModal section components and useEventForm hook

Extract modal sections into dedicated components (DateTimeSection,
RecurrenceSection, LocationSection, VideoConferenceSection,
AttendeesSection, DescriptionSection, InvitationResponseSection,
RemindersSection, StatusSection, AttachmentsSection) with shared
SectionRow and SectionPill layout components.
Add useEventForm hook to centralize form state management.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* ♻️(front) refactor EventModal to use extracted sections

Simplify EventModal by delegating to section components and
useEventForm hook. Replace alert() with addToast() for error
feedback, convert useCallback to useMemo for buildSummary in
RecurrenceEditor, and add missing organizer dependency in
useEventForm useEffect.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* 💄(front) update scheduler styles for new modal design

Rework SCSS for EventModal, AttendeesInput, RecurrenceEditor,
and Scheduler. Move inline styles to CSS classes. Update
globals and frontend dependencies.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
---
 .claude/commands/opsx/apply.md                | 152 ----
 .claude/commands/opsx/archive.md              | 157 -----
 .claude/commands/opsx/bulk-archive.md         | 242 -------
 .claude/commands/opsx/continue.md             | 114 ---
 .claude/commands/opsx/explore.md              | 174 -----
 .claude/commands/opsx/ff.md                   |  94 ---
 .claude/commands/opsx/new.md                  |  69 --
 .claude/commands/opsx/onboard.md              | 525 --------------
 .claude/commands/opsx/sync.md                 | 134 ----
 .claude/commands/opsx/verify.md               | 164 -----
 .claude/skills/openspec-apply-change/SKILL.md | 156 -----
 .../skills/openspec-archive-change/SKILL.md   | 114 ---
 .../openspec-bulk-archive-change/SKILL.md     | 246 -------
 .../skills/openspec-continue-change/SKILL.md  | 118 ----
 .claude/skills/openspec-explore/SKILL.md      | 290 --------
 .claude/skills/openspec-ff-change/SKILL.md    | 101 ---
 .claude/skills/openspec-new-change/SKILL.md   |  74 --
 .claude/skills/openspec-onboard/SKILL.md      | 529 --------------
 .claude/skills/openspec-sync-specs/SKILL.md   | 138 ----
 .../skills/openspec-verify-change/SKILL.md    | 168 -----
 .gitignore                                    |   2 +
 src/frontend/apps/calendars/package.json      |   4 +-
 .../components/scheduler/AttendeesInput.scss  | 196 ++----
 .../components/scheduler/AttendeesInput.tsx   | 232 +++----
 .../components/scheduler/EventModal.scss      | 252 +++++--
 .../components/scheduler/EventModal.tsx       | 650 +++++-------------
 .../scheduler/RecurrenceEditor.scss           | 142 ++--
 .../components/scheduler/RecurrenceEditor.tsx | 469 +++++++------
 .../components/scheduler/Scheduler.scss       | 240 +++----
 .../AttachmentsSection.tsx                    | 110 +++
 .../event-modal-sections/AttendeesSection.tsx |  45 ++
 .../event-modal-sections/DateTimeSection.tsx  |  72 ++
 .../DescriptionSection.tsx                    |  44 ++
 .../InvitationResponseSection.scss            |  36 +
 .../InvitationResponseSection.tsx             |  81 +++
 .../event-modal-sections/LocationSection.tsx  |  42 ++
 .../RecurrenceSection.tsx                     |  36 +
 .../event-modal-sections/RemindersSection.tsx | 118 ++++
 .../event-modal-sections/SectionPill.scss     |  46 ++
 .../event-modal-sections/SectionPill.tsx      |  25 +
 .../event-modal-sections/SectionPills.tsx     |  34 +
 .../event-modal-sections/SectionRow.scss      | 113 +++
 .../event-modal-sections/SectionRow.tsx       |  87 +++
 .../event-modal-sections/StatusSection.tsx    | 113 +++
 .../VideoConferenceSection.tsx                |  56 ++
 .../scheduler/hooks/useEventForm.ts           | 380 ++++++++++
 .../calendar/components/scheduler/types.ts    |  40 +-
 .../src/features/i18n/translations.json       | 135 +++-
 .../apps/calendars/src/styles/globals.scss    |  26 +-
 src/frontend/yarn.lock                        |  18 +-
 50 files changed, 2644 insertions(+), 4959 deletions(-)
 delete mode 100644 .claude/commands/opsx/apply.md
 delete mode 100644 .claude/commands/opsx/archive.md
 delete mode 100644 .claude/commands/opsx/bulk-archive.md
 delete mode 100644 .claude/commands/opsx/continue.md
 delete mode 100644 .claude/commands/opsx/explore.md
 delete mode 100644 .claude/commands/opsx/ff.md
 delete mode 100644 .claude/commands/opsx/new.md
 delete mode 100644 .claude/commands/opsx/onboard.md
 delete mode 100644 .claude/commands/opsx/sync.md
 delete mode 100644 .claude/commands/opsx/verify.md
 delete mode 100644 .claude/skills/openspec-apply-change/SKILL.md
 delete mode 100644 .claude/skills/openspec-archive-change/SKILL.md
 delete mode 100644 .claude/skills/openspec-bulk-archive-change/SKILL.md
 delete mode 100644 .claude/skills/openspec-continue-change/SKILL.md
 delete mode 100644 .claude/skills/openspec-explore/SKILL.md
 delete mode 100644 .claude/skills/openspec-ff-change/SKILL.md
 delete mode 100644 .claude/skills/openspec-new-change/SKILL.md
 delete mode 100644 .claude/skills/openspec-onboard/SKILL.md
 delete mode 100644 .claude/skills/openspec-sync-specs/SKILL.md
 delete mode 100644 .claude/skills/openspec-verify-change/SKILL.md
 create mode 100644 src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/AttachmentsSection.tsx
 create mode 100644 src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/AttendeesSection.tsx
 create mode 100644 src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/DateTimeSection.tsx
 create mode 100644 src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/DescriptionSection.tsx
 create mode 100644 src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/InvitationResponseSection.scss
 create mode 100644 src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/InvitationResponseSection.tsx
 create mode 100644 src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/LocationSection.tsx
 create mode 100644 src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/RecurrenceSection.tsx
 create mode 100644 src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/RemindersSection.tsx
 create mode 100644 src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/SectionPill.scss
 create mode 100644 src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/SectionPill.tsx
 create mode 100644 src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/SectionPills.tsx
 create mode 100644 src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/SectionRow.scss
 create mode 100644 src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/SectionRow.tsx
 create mode 100644 src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/StatusSection.tsx
 create mode 100644 src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/VideoConferenceSection.tsx
 create mode 100644 src/frontend/apps/calendars/src/features/calendar/components/scheduler/hooks/useEventForm.ts

diff --git a/.claude/commands/opsx/apply.md b/.claude/commands/opsx/apply.md
deleted file mode 100644
index 645bbdb..0000000
--- a/.claude/commands/opsx/apply.md
+++ /dev/null
@@ -1,152 +0,0 @@
----
-name: "OPSX: Apply"
-description: Implement tasks from an OpenSpec change (Experimental)
-category: Workflow
-tags: [workflow, artifacts, experimental]
----
-
-Implement tasks from an OpenSpec change.
-
-**Input**: Optionally specify a change name (e.g., `/opsx:apply add-auth`). If omitted, check if it can be inferred from conversation context. If vague or ambiguous you MUST prompt for available changes.
-
-**Steps**
-
-1. **Select the change**
-
-   If a name is provided, use it. Otherwise:
-   - Infer from conversation context if the user mentioned a change
-   - Auto-select if only one active change exists
-   - If ambiguous, run `openspec list --json` to get available changes and use the **AskUserQuestion tool** to let the user select
-
-   Always announce: "Using change: <name>" and how to override (e.g., `/opsx:apply <other>`).
-
-2. **Check status to understand the schema**
-   ```bash
-   openspec status --change "<name>" --json
-   ```
-   Parse the JSON to understand:
-   - `schemaName`: The workflow being used (e.g., "spec-driven")
-   - Which artifact contains the tasks (typically "tasks" for spec-driven, check status for others)
-
-3. **Get apply instructions**
-
-   ```bash
-   openspec instructions apply --change "<name>" --json
-   ```
-
-   This returns:
-   - Context file paths (varies by schema)
-   - Progress (total, complete, remaining)
-   - Task list with status
-   - Dynamic instruction based on current state
-
-   **Handle states:**
-   - If `state: "blocked"` (missing artifacts): show message, suggest using `/opsx:continue`
-   - If `state: "all_done"`: congratulate, suggest archive
-   - Otherwise: proceed to implementation
-
-4. **Read context files**
-
-   Read the files listed in `contextFiles` from the apply instructions output.
-   The files depend on the schema being used:
-   - **spec-driven**: proposal, specs, design, tasks
-   - Other schemas: follow the contextFiles from CLI output
-
-5. **Show current progress**
-
-   Display:
-   - Schema being used
-   - Progress: "N/M tasks complete"
-   - Remaining tasks overview
-   - Dynamic instruction from CLI
-
-6. **Implement tasks (loop until done or blocked)**
-
-   For each pending task:
-   - Show which task is being worked on
-   - Make the code changes required
-   - Keep changes minimal and focused
-   - Mark task complete in the tasks file: `- [ ]` → `- [x]`
-   - Continue to next task
-
-   **Pause if:**
-   - Task is unclear → ask for clarification
-   - Implementation reveals a design issue → suggest updating artifacts
-   - Error or blocker encountered → report and wait for guidance
-   - User interrupts
-
-7. **On completion or pause, show status**
-
-   Display:
-   - Tasks completed this session
-   - Overall progress: "N/M tasks complete"
-   - If all done: suggest archive
-   - If paused: explain why and wait for guidance
-
-**Output During Implementation**
-
-```
-## Implementing: <change-name> (schema: <schema-name>)
-
-Working on task 3/7: <task description>
-[...implementation happening...]
-✓ Task complete
-
-Working on task 4/7: <task description>
-[...implementation happening...]
-✓ Task complete
-```
-
-**Output On Completion**
-
-```
-## Implementation Complete
-
-**Change:** <change-name>
-**Schema:** <schema-name>
-**Progress:** 7/7 tasks complete ✓
-
-### Completed This Session
-- [x] Task 1
-- [x] Task 2
-...
-
-All tasks complete! Ready to archive this change.
-```
-
-**Output On Pause (Issue Encountered)**
-
-```
-## Implementation Paused
-
-**Change:** <change-name>
-**Schema:** <schema-name>
-**Progress:** 4/7 tasks complete
-
-### Issue Encountered
-<description of the issue>
-
-**Options:**
-1. <option 1>
-2. <option 2>
-3. Other approach
-
-What would you like to do?
-```
-
-**Guardrails**
-- Keep going through tasks until done or blocked
-- Always read context files before starting (from the apply instructions output)
-- If task is ambiguous, pause and ask before implementing
-- If implementation reveals issues, pause and suggest artifact updates
-- Keep code changes minimal and scoped to each task
-- Update task checkbox immediately after completing each task
-- Pause on errors, blockers, or unclear requirements - don't guess
-- Use contextFiles from CLI output, don't assume specific file names
-
-**Fluid Workflow Integration**
-
-This skill supports the "actions on a change" model:
-
-- **Can be invoked anytime**: Before all artifacts are done (if tasks exist), after partial implementation, interleaved with other actions
-- **Allows artifact updates**: If implementation reveals design issues, suggest updating artifacts - not phase-locked, work fluidly
diff --git a/.claude/commands/opsx/archive.md b/.claude/commands/opsx/archive.md
deleted file mode 100644
index 7275c85..0000000
--- a/.claude/commands/opsx/archive.md
+++ /dev/null
@@ -1,157 +0,0 @@
----
-name: "OPSX: Archive"
-description: Archive a completed change in the experimental workflow
-category: Workflow
-tags: [workflow, archive, experimental]
----
-
-Archive a completed change in the experimental workflow.
-
-**Input**: Optionally specify a change name after `/opsx:archive` (e.g., `/opsx:archive add-auth`). If omitted, check if it can be inferred from conversation context. If vague or ambiguous you MUST prompt for available changes.
-
-**Steps**
-
-1. **If no change name provided, prompt for selection**
-
-   Run `openspec list --json` to get available changes. Use the **AskUserQuestion tool** to let the user select.
-
-   Show only active changes (not already archived).
-   Include the schema used for each change if available.
-
-   **IMPORTANT**: Do NOT guess or auto-select a change. Always let the user choose.
-
-2. **Check artifact completion status**
-
-   Run `openspec status --change "<name>" --json` to check artifact completion.
-
-   Parse the JSON to understand:
-   - `schemaName`: The workflow being used
-   - `artifacts`: List of artifacts with their status (`done` or other)
-
-   **If any artifacts are not `done`:**
-   - Display warning listing incomplete artifacts
-   - Prompt user for confirmation to continue
-   - Proceed if user confirms
-
-3. **Check task completion status**
-
-   Read the tasks file (typically `tasks.md`) to check for incomplete tasks.
-
-   Count tasks marked with `- [ ]` (incomplete) vs `- [x]` (complete).
-
-   **If incomplete tasks found:**
-   - Display warning showing count of incomplete tasks
-   - Prompt user for confirmation to continue
-   - Proceed if user confirms
-
-   **If no tasks file exists:** Proceed without task-related warning.
-
-4. **Assess delta spec sync state**
-
-   Check for delta specs at `openspec/changes/<name>/specs/`. If none exist, proceed without sync prompt.
-
-   **If delta specs exist:**
-   - Compare each delta spec with its corresponding main spec at `openspec/specs/<capability>/spec.md`
-   - Determine what changes would be applied (adds, modifications, removals, renames)
-   - Show a combined summary before prompting
-
-   **Prompt options:**
-   - If changes needed: "Sync now (recommended)", "Archive without syncing"
-   - If already synced: "Archive now", "Sync anyway", "Cancel"
-
-   If user chooses sync, execute `/opsx:sync` logic. Proceed to archive regardless of choice.
-
-5. **Perform the archive**
-
-   Create the archive directory if it doesn't exist:
-   ```bash
-   mkdir -p openspec/changes/archive
-   ```
-
-   Generate target name using current date: `YYYY-MM-DD-<change-name>`
-
-   **Check if target already exists:**
-   - If yes: Fail with error, suggest renaming existing archive or using different date
-   - If no: Move the change directory to archive
-
-   ```bash
-   mv openspec/changes/<name> openspec/changes/archive/YYYY-MM-DD-<name>
-   ```
-
-6. **Display summary**
-
-   Show archive completion summary including:
-   - Change name
-   - Schema that was used
-   - Archive location
-   - Spec sync status (synced / sync skipped / no delta specs)
-   - Note about any warnings (incomplete artifacts/tasks)
-
-**Output On Success**
-
-```
-## Archive Complete
-
-**Change:** <change-name>
-**Schema:** <schema-name>
-**Archived to:** openspec/changes/archive/YYYY-MM-DD-<name>/
-**Specs:** ✓ Synced to main specs
-
-All artifacts complete. All tasks complete.
-```
-
-**Output On Success (No Delta Specs)**
-
-```
-## Archive Complete
-
-**Change:** <change-name>
-**Schema:** <schema-name>
-**Archived to:** openspec/changes/archive/YYYY-MM-DD-<name>/
-**Specs:** No delta specs
-
-All artifacts complete. All tasks complete.
-```
-
-**Output On Success With Warnings**
-
-```
-## Archive Complete (with warnings)
-
-**Change:** <change-name>
-**Schema:** <schema-name>
-**Archived to:** openspec/changes/archive/YYYY-MM-DD-<name>/
-**Specs:** Sync skipped (user chose to skip)
-
-**Warnings:**
-- Archived with 2 incomplete artifacts
-- Archived with 3 incomplete tasks
-- Delta spec sync was skipped (user chose to skip)
-
-Review the archive if this was not intentional.
-```
-
-**Output On Error (Archive Exists)**
-
-```
-## Archive Failed
-
-**Change:** <change-name>
-**Target:** openspec/changes/archive/YYYY-MM-DD-<name>/
-
-Target archive directory already exists.
-
-**Options:**
-1. Rename the existing archive
-2. Delete the existing archive if it's a duplicate
-3. Wait until a different date to archive
-```
-
-**Guardrails**
-- Always prompt for change selection if not provided
-- Use artifact graph (openspec status --json) for completion checking
-- Don't block archive on warnings - just inform and confirm
-- Preserve .openspec.yaml when moving to archive (it moves with the directory)
-- Show clear summary of what happened
-- If sync is requested, use /opsx:sync approach (agent-driven)
-- If delta specs exist, always run the sync assessment and show the combined summary before prompting
diff --git a/.claude/commands/opsx/bulk-archive.md b/.claude/commands/opsx/bulk-archive.md
deleted file mode 100644
index b700261..0000000
--- a/.claude/commands/opsx/bulk-archive.md
+++ /dev/null
@@ -1,242 +0,0 @@
----
-name: "OPSX: Bulk Archive"
-description: Archive multiple completed changes at once
-category: Workflow
-tags: [workflow, archive, experimental, bulk]
----
-
-Archive multiple completed changes in a single operation.
-
-This skill allows you to batch-archive changes, handling spec conflicts intelligently by checking the codebase to determine what's actually implemented.
-
-**Input**: None required (prompts for selection)
-
-**Steps**
-
-1. **Get active changes**
-
-   Run `openspec list --json` to get all active changes.
-
-   If no active changes exist, inform user and stop.
-
-2. **Prompt for change selection**
-
-   Use **AskUserQuestion tool** with multi-select to let user choose changes:
-   - Show each change with its schema
-   - Include an option for "All changes"
-   - Allow any number of selections (1+ works, 2+ is the typical use case)
-
-   **IMPORTANT**: Do NOT auto-select. Always let the user choose.
-
-3. **Batch validation - gather status for all selected changes**
-
-   For each selected change, collect:
-
-   a. **Artifact status** - Run `openspec status --change "<name>" --json`
-      - Parse `schemaName` and `artifacts` list
-      - Note which artifacts are `done` vs other states
-
-   b. **Task completion** - Read `openspec/changes/<name>/tasks.md`
-      - Count `- [ ]` (incomplete) vs `- [x]` (complete)
-      - If no tasks file exists, note as "No tasks"
-
-   c. **Delta specs** - Check `openspec/changes/<name>/specs/` directory
-      - List which capability specs exist
-      - For each, extract requirement names (lines matching `### Requirement: <name>`)
-
-4. **Detect spec conflicts**
-
-   Build a map of `capability -> [changes that touch it]`:
-
-   ```
-   auth -> [change-a, change-b]  <- CONFLICT (2+ changes)
-   api  -> [change-c]            <- OK (only 1 change)
-   ```
-
-   A conflict exists when 2+ selected changes have delta specs for the same capability.
-
-5. **Resolve conflicts agentically**
-
-   **For each conflict**, investigate the codebase:
-
-   a. **Read the delta specs** from each conflicting change to understand what each claims to add/modify
-
-   b. **Search the codebase** for implementation evidence:
-      - Look for code implementing requirements from each delta spec
-      - Check for related files, functions, or tests
-
-   c. **Determine resolution**:
-      - If only one change is actually implemented -> sync that one's specs
-      - If both implemented -> apply in chronological order (older first, newer overwrites)
-      - If neither implemented -> skip spec sync, warn user
-
-   d. **Record resolution** for each conflict:
-      - Which change's specs to apply
-      - In what order (if both)
-      - Rationale (what was found in codebase)
-
-6. **Show consolidated status table**
-
-   Display a table summarizing all changes:
-
-   ```
-   | Change               | Artifacts | Tasks | Specs   | Conflicts | Status |
-   |---------------------|-----------|-------|---------|-----------|--------|
-   | schema-management   | Done      | 5/5   | 2 delta | None      | Ready  |
-   | project-config      | Done      | 3/3   | 1 delta | None      | Ready  |
-   | add-oauth           | Done      | 4/4   | 1 delta | auth (!)  | Ready* |
-   | add-verify-skill    | 1 left    | 2/5   | None    | None      | Warn   |
-   ```
-
-   For conflicts, show the resolution:
-   ```
-   * Conflict resolution:
-     - auth spec: Will apply add-oauth then add-jwt (both implemented, chronological order)
-   ```
-
-   For incomplete changes, show warnings:
-   ```
-   Warnings:
-   - add-verify-skill: 1 incomplete artifact, 3 incomplete tasks
-   ```
-
-7. **Confirm batch operation**
-
-   Use **AskUserQuestion tool** with a single confirmation:
-
-   - "Archive N changes?" with options based on status
-   - Options might include:
-     - "Archive all N changes"
-     - "Archive only N ready changes (skip incomplete)"
-     - "Cancel"
-
-   If there are incomplete changes, make clear they'll be archived with warnings.
-
-8. **Execute archive for each confirmed change**
-
-   Process changes in the determined order (respecting conflict resolution):
-
-   a. **Sync specs** if delta specs exist:
-      - Use the openspec-sync-specs approach (agent-driven intelligent merge)
-      - For conflicts, apply in resolved order
-      - Track if sync was done
-
-   b. **Perform the archive**:
-      ```bash
-      mkdir -p openspec/changes/archive
-      mv openspec/changes/<name> openspec/changes/archive/YYYY-MM-DD-<name>
-      ```
-
-   c. **Track outcome** for each change:
-      - Success: archived successfully
-      - Failed: error during archive (record error)
-      - Skipped: user chose not to archive (if applicable)
-
-9. **Display summary**
-
-   Show final results:
-
-   ```
-   ## Bulk Archive Complete
-
-   Archived 3 changes:
-   - schema-management-cli -> archive/2026-01-19-schema-management-cli/
-   - project-config -> archive/2026-01-19-project-config/
-   - add-oauth -> archive/2026-01-19-add-oauth/
-
-   Skipped 1 change:
-   - add-verify-skill (user chose not to archive incomplete)
-
-   Spec sync summary:
-   - 4 delta specs synced to main specs
-   - 1 conflict resolved (auth: applied both in chronological order)
-   ```
-
-   If any failures:
-   ```
-   Failed 1 change:
-   - some-change: Archive directory already exists
-   ```
-
-**Conflict Resolution Examples**
-
-Example 1: Only one implemented
-```
-Conflict: specs/auth/spec.md touched by [add-oauth, add-jwt]
-
-Checking add-oauth:
-- Delta adds "OAuth Provider Integration" requirement
-- Searching codebase... found src/auth/oauth.ts implementing OAuth flow
-
-Checking add-jwt:
-- Delta adds "JWT Token Handling" requirement
-- Searching codebase... no JWT implementation found
-
-Resolution: Only add-oauth is implemented. Will sync add-oauth specs only.
-```
-
-Example 2: Both implemented
-```
-Conflict: specs/api/spec.md touched by [add-rest-api, add-graphql]
-
-Checking add-rest-api (created 2026-01-10):
-- Delta adds "REST Endpoints" requirement
-- Searching codebase... found src/api/rest.ts
-
-Checking add-graphql (created 2026-01-15):
-- Delta adds "GraphQL Schema" requirement
-- Searching codebase... found src/api/graphql.ts
-
-Resolution: Both implemented. Will apply add-rest-api specs first,
-then add-graphql specs (chronological order, newer takes precedence).
-```
-
-**Output On Success**
-
-```
-## Bulk Archive Complete
-
-Archived N changes:
-- <change-1> -> archive/YYYY-MM-DD-<change-1>/
-- <change-2> -> archive/YYYY-MM-DD-<change-2>/
-
-Spec sync summary:
-- N delta specs synced to main specs
-- No conflicts (or: M conflicts resolved)
-```
-
-**Output On Partial Success**
-
-```
-## Bulk Archive Complete (partial)
-
-Archived N changes:
-- <change-1> -> archive/YYYY-MM-DD-<change-1>/
-
-Skipped M changes:
-- <change-2> (user chose not to archive incomplete)
-
-Failed K changes:
-- <change-3>: Archive directory already exists
-```
-
-**Output When No Changes**
-
-```
-## No Changes to Archive
-
-No active changes found. Use `/opsx:new` to create a new change.
-```
-
-**Guardrails**
-- Allow any number of changes (1+ is fine, 2+ is the typical use case)
-- Always prompt for selection, never auto-select
-- Detect spec conflicts early and resolve by checking codebase
-- When both changes are implemented, apply specs in chronological order
-- Skip spec sync only when implementation is missing (warn user)
-- Show clear per-change status before confirming
-- Use single confirmation for entire batch
-- Track and report all outcomes (success/skip/fail)
-- Preserve .openspec.yaml when moving to archive
-- Archive directory target uses current date: YYYY-MM-DD-<name>
-- If archive target exists, fail that change but continue with others
diff --git a/.claude/commands/opsx/continue.md b/.claude/commands/opsx/continue.md
deleted file mode 100644
index 49daaa7..0000000
--- a/.claude/commands/opsx/continue.md
+++ /dev/null
@@ -1,114 +0,0 @@
----
-name: "OPSX: Continue"
-description: Continue working on a change - create the next artifact (Experimental)
-category: Workflow
-tags: [workflow, artifacts, experimental]
----
-
-Continue working on a change by creating the next artifact.
-
-**Input**: Optionally specify a change name after `/opsx:continue` (e.g., `/opsx:continue add-auth`). If omitted, check if it can be inferred from conversation context. If vague or ambiguous you MUST prompt for available changes.
-
-**Steps**
-
-1. **If no change name provided, prompt for selection**
-
-   Run `openspec list --json` to get available changes sorted by most recently modified. Then use the **AskUserQuestion tool** to let the user select which change to work on.
-
-   Present the top 3-4 most recently modified changes as options, showing:
-   - Change name
-   - Schema (from `schema` field if present, otherwise "spec-driven")
-   - Status (e.g., "0/5 tasks", "complete", "no tasks")
-   - How recently it was modified (from `lastModified` field)
-
-   Mark the most recently modified change as "(Recommended)" since it's likely what the user wants to continue.
-
-   **IMPORTANT**: Do NOT guess or auto-select a change. Always let the user choose.
-
-2. **Check current status**
-   ```bash
-   openspec status --change "<name>" --json
-   ```
-   Parse the JSON to understand current state. The response includes:
-   - `schemaName`: The workflow schema being used (e.g., "spec-driven")
-   - `artifacts`: Array of artifacts with their status ("done", "ready", "blocked")
-   - `isComplete`: Boolean indicating if all artifacts are complete
-
-3. **Act based on status**:
-
-   ---
-
-   **If all artifacts are complete (`isComplete: true`)**:
-   - Congratulate the user
-   - Show final status including the schema used
-   - Suggest: "All artifacts created! You can now implement this change or archive it."
-   - STOP
-
-   ---
-
-   **If artifacts are ready to create** (status shows artifacts with `status: "ready"`):
-   - Pick the FIRST artifact with `status: "ready"` from the status output
-   - Get its instructions:
-     ```bash
-     openspec instructions <artifact-id> --change "<name>" --json
-     ```
-   - Parse the JSON. The key fields are:
-     - `context`: Project background (constraints for you - do NOT include in output)
-     - `rules`: Artifact-specific rules (constraints for you - do NOT include in output)
-     - `template`: The structure to use for your output file
-     - `instruction`: Schema-specific guidance
-     - `outputPath`: Where to write the artifact
-     - `dependencies`: Completed artifacts to read for context
-   - **Create the artifact file**:
-     - Read any completed dependency files for context
-     - Use `template` as the structure - fill in its sections
-     - Apply `context` and `rules` as constraints when writing - but do NOT copy them into the file
-     - Write to the output path specified in instructions
-   - Show what was created and what's now unlocked
-   - STOP after creating ONE artifact
-
-   ---
-
-   **If no artifacts are ready (all blocked)**:
-   - This shouldn't happen with a valid schema
-   - Show status and suggest checking for issues
-
-4. **After creating an artifact, show progress**
-   ```bash
-   openspec status --change "<name>"
-   ```
-
-**Output**
-
-After each invocation, show:
-- Which artifact was created
-- Schema workflow being used
-- Current progress (N/M complete)
-- What artifacts are now unlocked
-- Prompt: "Run `/opsx:continue` to create the next artifact"
-
-**Artifact Creation Guidelines**
-
-The artifact types and their purpose depend on the schema. Use the `instruction` field from the instructions output to understand what to create.
-
-Common artifact patterns:
-
-**spec-driven schema** (proposal → specs → design → tasks):
-- **proposal.md**: Ask user about the change if not clear. Fill in Why, What Changes, Capabilities, Impact.
-  - The Capabilities section is critical - each capability listed will need a spec file.
-- **specs/<capability>/spec.md**: Create one spec per capability listed in the proposal's Capabilities section (use the capability name, not the change name).
-- **design.md**: Document technical decisions, architecture, and implementation approach.
-- **tasks.md**: Break down implementation into checkboxed tasks.
-
-For other schemas, follow the `instruction` field from the CLI output.
-
-**Guardrails**
-- Create ONE artifact per invocation
-- Always read dependency artifacts before creating a new one
-- Never skip artifacts or create out of order
-- If context is unclear, ask the user before creating
-- Verify the artifact file exists after writing before marking progress
-- Use the schema's artifact sequence, don't assume specific artifact names
-- **IMPORTANT**: `context` and `rules` are constraints for YOU, not content for the file
-  - Do NOT copy `<context>`, `<rules>`, `<project_context>` blocks into the artifact
-  - These guide what you write, but should never appear in the output
diff --git a/.claude/commands/opsx/explore.md b/.claude/commands/opsx/explore.md
deleted file mode 100644
index 202566b..0000000
--- a/.claude/commands/opsx/explore.md
+++ /dev/null
@@ -1,174 +0,0 @@
----
-name: "OPSX: Explore"
-description: "Enter explore mode - think through ideas, investigate problems, clarify requirements"
-category: Workflow
-tags: [workflow, explore, experimental, thinking]
----
-
-Enter explore mode. Think deeply. Visualize freely. Follow the conversation wherever it goes.
-
-**IMPORTANT: Explore mode is for thinking, not implementing.** You may read files, search code, and investigate the codebase, but you must NEVER write code or implement features. If the user asks you to implement something, remind them to exit explore mode first (e.g., start a change with `/opsx:new` or `/opsx:ff`). You MAY create OpenSpec artifacts (proposals, designs, specs) if the user asks—that's capturing thinking, not implementing.
-
-**This is a stance, not a workflow.** There are no fixed steps, no required sequence, no mandatory outputs. You're a thinking partner helping the user explore.
-
-**Input**: The argument after `/opsx:explore` is whatever the user wants to think about. Could be:
-- A vague idea: "real-time collaboration"
-- A specific problem: "the auth system is getting unwieldy"
-- A change name: "add-dark-mode" (to explore in context of that change)
-- A comparison: "postgres vs sqlite for this"
-- Nothing (just enter explore mode)
-
----
-
-## The Stance
-
-- **Curious, not prescriptive** - Ask questions that emerge naturally, don't follow a script
-- **Open threads, not interrogations** - Surface multiple interesting directions and let the user follow what resonates. Don't funnel them through a single path of questions.
-- **Visual** - Use ASCII diagrams liberally when they'd help clarify thinking
-- **Adaptive** - Follow interesting threads, pivot when new information emerges
-- **Patient** - Don't rush to conclusions, let the shape of the problem emerge
-- **Grounded** - Explore the actual codebase when relevant, don't just theorize
-
----
-
-## What You Might Do
-
-Depending on what the user brings, you might:
-
-**Explore the problem space**
-- Ask clarifying questions that emerge from what they said
-- Challenge assumptions
-- Reframe the problem
-- Find analogies
-
-**Investigate the codebase**
-- Map existing architecture relevant to the discussion
-- Find integration points
-- Identify patterns already in use
-- Surface hidden complexity
-
-**Compare options**
-- Brainstorm multiple approaches
-- Build comparison tables
-- Sketch tradeoffs
-- Recommend a path (if asked)
-
-**Visualize**
-```
-┌─────────────────────────────────────────┐
-│     Use ASCII diagrams liberally        │
-├─────────────────────────────────────────┤
-│                                         │
-│   ┌────────┐         ┌────────┐        │
-│   │ State  │────────▶│ State  │        │
-│   │   A    │         │   B    │        │
-│   └────────┘         └────────┘        │
-│                                         │
-│   System diagrams, state machines,      │
-│   data flows, architecture sketches,    │
-│   dependency graphs, comparison tables  │
-│                                         │
-└─────────────────────────────────────────┘
-```
-
-**Surface risks and unknowns**
-- Identify what could go wrong
-- Find gaps in understanding
-- Suggest spikes or investigations
-
----
-
-## OpenSpec Awareness
-
-You have full context of the OpenSpec system. Use it naturally, don't force it.
-
-### Check for context
-
-At the start, quickly check what exists:
-```bash
-openspec list --json
-```
-
-This tells you:
-- If there are active changes
-- Their names, schemas, and status
-- What the user might be working on
-
-If the user mentioned a specific change name, read its artifacts for context.
-
-### When no change exists
-
-Think freely. When insights crystallize, you might offer:
-
-- "This feels solid enough to start a change. Want me to create one?"
-  → Can transition to `/opsx:new` or `/opsx:ff`
-- Or keep exploring - no pressure to formalize
-
-### When a change exists
-
-If the user mentions a change or you detect one is relevant:
-
-1. **Read existing artifacts for context**
-   - `openspec/changes/<name>/proposal.md`
-   - `openspec/changes/<name>/design.md`
-   - `openspec/changes/<name>/tasks.md`
-   - etc.
-
-2. **Reference them naturally in conversation**
-   - "Your design mentions using Redis, but we just realized SQLite fits better..."
-   - "The proposal scopes this to premium users, but we're now thinking everyone..."
-
-3. **Offer to capture when decisions are made**
-
-   | Insight Type | Where to Capture |
-   |--------------|------------------|
-   | New requirement discovered | `specs/<capability>/spec.md` |
-   | Requirement changed | `specs/<capability>/spec.md` |
-   | Design decision made | `design.md` |
-   | Scope changed | `proposal.md` |
-   | New work identified | `tasks.md` |
-   | Assumption invalidated | Relevant artifact |
-
-   Example offers:
-   - "That's a design decision. Capture it in design.md?"
-   - "This is a new requirement. Add it to specs?"
-   - "This changes scope. Update the proposal?"
-
-4. **The user decides** - Offer and move on. Don't pressure. Don't auto-capture.
-
----
-
-## What You Don't Have To Do
-
-- Follow a script
-- Ask the same questions every time
-- Produce a specific artifact
-- Reach a conclusion
-- Stay on topic if a tangent is valuable
-- Be brief (this is thinking time)
-
----
-
-## Ending Discovery
-
-There's no required ending. Discovery might:
-
-- **Flow into action**: "Ready to start? `/opsx:new` or `/opsx:ff`"
-- **Result in artifact updates**: "Updated design.md with these decisions"
-- **Just provide clarity**: User has what they need, moves on
-- **Continue later**: "We can pick this up anytime"
-
-When things crystallize, you might offer a summary - but it's optional. Sometimes the thinking IS the value.
-
----
-
-## Guardrails
-
-- **Don't implement** - Never write code or implement features. Creating OpenSpec artifacts is fine, writing application code is not.
-- **Don't fake understanding** - If something is unclear, dig deeper
-- **Don't rush** - Discovery is thinking time, not task time
-- **Don't force structure** - Let patterns emerge naturally
-- **Don't auto-capture** - Offer to save insights, don't just do it
-- **Do visualize** - A good diagram is worth many paragraphs
-- **Do explore the codebase** - Ground discussions in reality
-- **Do question assumptions** - Including the user's and your own
diff --git a/.claude/commands/opsx/ff.md b/.claude/commands/opsx/ff.md
deleted file mode 100644
index bea9d61..0000000
--- a/.claude/commands/opsx/ff.md
+++ /dev/null
@@ -1,94 +0,0 @@
----
-name: "OPSX: Fast Forward"
-description: Create a change and generate all artifacts needed for implementation in one go
-category: Workflow
-tags: [workflow, artifacts, experimental]
----
-
-Fast-forward through artifact creation - generate everything needed to start implementation.
-
-**Input**: The argument after `/opsx:ff` is the change name (kebab-case), OR a description of what the user wants to build.
-
-**Steps**
-
-1. **If no input provided, ask what they want to build**
-
-   Use the **AskUserQuestion tool** (open-ended, no preset options) to ask:
-   > "What change do you want to work on? Describe what you want to build or fix."
-
-   From their description, derive a kebab-case name (e.g., "add user authentication" → `add-user-auth`).
-
-   **IMPORTANT**: Do NOT proceed without understanding what the user wants to build.
-
-2. **Create the change directory**
-   ```bash
-   openspec new change "<name>"
-   ```
-   This creates a scaffolded change at `openspec/changes/<name>/`.
-
-3. **Get the artifact build order**
-   ```bash
-   openspec status --change "<name>" --json
-   ```
-   Parse the JSON to get:
-   - `applyRequires`: array of artifact IDs needed before implementation (e.g., `["tasks"]`)
-   - `artifacts`: list of all artifacts with their status and dependencies
-
-4. **Create artifacts in sequence until apply-ready**
-
-   Use the **TodoWrite tool** to track progress through the artifacts.
-
-   Loop through artifacts in dependency order (artifacts with no pending dependencies first):
-
-   a. **For each artifact that is `ready` (dependencies satisfied)**:
-      - Get instructions:
-        ```bash
-        openspec instructions <artifact-id> --change "<name>" --json
-        ```
-      - The instructions JSON includes:
-        - `context`: Project background (constraints for you - do NOT include in output)
-        - `rules`: Artifact-specific rules (constraints for you - do NOT include in output)
-        - `template`: The structure to use for your output file
-        - `instruction`: Schema-specific guidance for this artifact type
-        - `outputPath`: Where to write the artifact
-        - `dependencies`: Completed artifacts to read for context
-      - Read any completed dependency files for context
-      - Create the artifact file using `template` as the structure
-      - Apply `context` and `rules` as constraints - but do NOT copy them into the file
-      - Show brief progress: "✓ Created <artifact-id>"
-
-   b. **Continue until all `applyRequires` artifacts are complete**
-      - After creating each artifact, re-run `openspec status --change "<name>" --json`
-      - Check if every artifact ID in `applyRequires` has `status: "done"` in the artifacts array
-      - Stop when all `applyRequires` artifacts are done
-
-   c. **If an artifact requires user input** (unclear context):
-      - Use **AskUserQuestion tool** to clarify
-      - Then continue with creation
-
-5. **Show final status**
-   ```bash
-   openspec status --change "<name>"
-   ```
-
-**Output**
-
-After completing all artifacts, summarize:
-- Change name and location
-- List of artifacts created with brief descriptions
-- What's ready: "All artifacts created! Ready for implementation."
-- Prompt: "Run `/opsx:apply` to start implementing."
-
-**Artifact Creation Guidelines**
-
-- Follow the `instruction` field from `openspec instructions` for each artifact type
-- The schema defines what each artifact should contain - follow it
-- Read dependency artifacts for context before creating new ones
-- Use the `template` as a starting point, filling in based on context
-
-**Guardrails**
-- Create ALL artifacts needed for implementation (as defined by schema's `apply.requires`)
-- Always read dependency artifacts before creating a new one
-- If context is critically unclear, ask the user - but prefer making reasonable decisions to keep momentum
-- If a change with that name already exists, ask if user wants to continue it or create a new one
-- Verify each artifact file exists after writing before proceeding to next
diff --git a/.claude/commands/opsx/new.md b/.claude/commands/opsx/new.md
deleted file mode 100644
index ef26cfa..0000000
--- a/.claude/commands/opsx/new.md
+++ /dev/null
@@ -1,69 +0,0 @@
----
-name: "OPSX: New"
-description: Start a new change using the experimental artifact workflow (OPSX)
-category: Workflow
-tags: [workflow, artifacts, experimental]
----
-
-Start a new change using the experimental artifact-driven approach.
-
-**Input**: The argument after `/opsx:new` is the change name (kebab-case), OR a description of what the user wants to build.
-
-**Steps**
-
-1. **If no input provided, ask what they want to build**
-
-   Use the **AskUserQuestion tool** (open-ended, no preset options) to ask:
-   > "What change do you want to work on? Describe what you want to build or fix."
-
-   From their description, derive a kebab-case name (e.g., "add user authentication" → `add-user-auth`).
-
-   **IMPORTANT**: Do NOT proceed without understanding what the user wants to build.
-
-2. **Determine the workflow schema**
-
-   Use the default schema (omit `--schema`) unless the user explicitly requests a different workflow.
-
-   **Use a different schema only if the user mentions:**
-   - A specific schema name → use `--schema <name>`
-   - "show workflows" or "what workflows" → run `openspec schemas --json` and let them choose
-
-   **Otherwise**: Omit `--schema` to use the default.
-
-3. **Create the change directory**
-   ```bash
-   openspec new change "<name>"
-   ```
-   Add `--schema <name>` only if the user requested a specific workflow.
-   This creates a scaffolded change at `openspec/changes/<name>/` with the selected schema.
-
-4. **Show the artifact status**
-   ```bash
-   openspec status --change "<name>"
-   ```
-   This shows which artifacts need to be created and which are ready (dependencies satisfied).
-
-5. **Get instructions for the first artifact**
-   The first artifact depends on the schema. Check the status output to find the first artifact with status "ready".
-   ```bash
-   openspec instructions <first-artifact-id> --change "<name>"
-   ```
-   This outputs the template and context for creating the first artifact.
-
-6. **STOP and wait for user direction**
-
-**Output**
-
-After completing the steps, summarize:
-- Change name and location
-- Schema/workflow being used and its artifact sequence
-- Current status (0/N artifacts complete)
-- The template for the first artifact
-- Prompt: "Ready to create the first artifact? Run `/opsx:continue` or just describe what this change is about and I'll draft it."
-
-**Guardrails**
-- Do NOT create any artifacts yet - just show the instructions
-- Do NOT advance beyond showing the first artifact template
-- If the name is invalid (not kebab-case), ask for a valid name
-- If a change with that name already exists, suggest using `/opsx:continue` instead
-- Pass --schema if using a non-default workflow
diff --git a/.claude/commands/opsx/onboard.md b/.claude/commands/opsx/onboard.md
deleted file mode 100644
index e15790e..0000000
--- a/.claude/commands/opsx/onboard.md
+++ /dev/null
@@ -1,525 +0,0 @@
----
-name: "OPSX: Onboard"
-description: Guided onboarding - walk through a complete OpenSpec workflow cycle with narration
-category: Workflow
-tags: [workflow, onboarding, tutorial, learning]
----
-
-Guide the user through their first complete OpenSpec workflow cycle. This is a teaching experience—you'll do real work in their codebase while explaining each step.
-
----
-
-## Preflight
-
-Before starting, check if OpenSpec is initialized:
-
-```bash
-openspec status --json 2>&1 || echo "NOT_INITIALIZED"
-```
-
-**If not initialized:**
-> OpenSpec isn't set up in this project yet. Run `openspec init` first, then come back to `/opsx:onboard`.
-
-Stop here if not initialized.
-
----
-
-## Phase 1: Welcome
-
-Display:
-
-```
-## Welcome to OpenSpec!
-
-I'll walk you through a complete change cycle—from idea to implementation—using a real task in your codebase. Along the way, you'll learn the workflow by doing it.
-
-**What we'll do:**
-1. Pick a small, real task in your codebase
-2. Explore the problem briefly
-3. Create a change (the container for our work)
-4. Build the artifacts: proposal → specs → design → tasks
-5. Implement the tasks
-6. Archive the completed change
-
-**Time:** ~15-20 minutes
-
-Let's start by finding something to work on.
-```
-
----
-
-## Phase 2: Task Selection
-
-### Codebase Analysis
-
-Scan the codebase for small improvement opportunities. Look for:
-
-1. **TODO/FIXME comments** - Search for `TODO`, `FIXME`, `HACK`, `XXX` in code files
-2. **Missing error handling** - `catch` blocks that swallow errors, risky operations without try-catch
-3. **Functions without tests** - Cross-reference `src/` with test directories
-4. **Type issues** - `any` types in TypeScript files (`: any`, `as any`)
-5. **Debug artifacts** - `console.log`, `console.debug`, `debugger` statements in non-debug code
-6. **Missing validation** - User input handlers without validation
-
-Also check recent git activity:
-```bash
-git log --oneline -10 2>/dev/null || echo "No git history"
-```
-
-### Present Suggestions
-
-From your analysis, present 3-4 specific suggestions:
-
-```
-## Task Suggestions
-
-Based on scanning your codebase, here are some good starter tasks:
-
-**1. [Most promising task]**
-   Location: `src/path/to/file.ts:42`
-   Scope: ~1-2 files, ~20-30 lines
-   Why it's good: [brief reason]
-
-**2. [Second task]**
-   Location: `src/another/file.ts`
-   Scope: ~1 file, ~15 lines
-   Why it's good: [brief reason]
-
-**3. [Third task]**
-   Location: [location]
-   Scope: [estimate]
-   Why it's good: [brief reason]
-
-**4. Something else?**
-   Tell me what you'd like to work on.
-
-Which task interests you? (Pick a number or describe your own)
-```
-
-**If nothing found:** Fall back to asking what the user wants to build:
-> I didn't find obvious quick wins in your codebase. What's something small you've been meaning to add or fix?
-
-### Scope Guardrail
-
-If the user picks or describes something too large (major feature, multi-day work):
-
-```
-That's a valuable task, but it's probably larger than ideal for your first OpenSpec run-through.
-
-For learning the workflow, smaller is better—it lets you see the full cycle without getting stuck in implementation details.
-
-**Options:**
-1. **Slice it smaller** - What's the smallest useful piece of [their task]? Maybe just [specific slice]?
-2. **Pick something else** - One of the other suggestions, or a different small task?
-3. **Do it anyway** - If you really want to tackle this, we can. Just know it'll take longer.
-
-What would you prefer?
-```
-
-Let the user override if they insist—this is a soft guardrail.
-
----
-
-## Phase 3: Explore Demo
-
-Once a task is selected, briefly demonstrate explore mode:
-
-```
-Before we create a change, let me quickly show you **explore mode**—it's how you think through problems before committing to a direction.
-```
-
-Spend 1-2 minutes investigating the relevant code:
-- Read the file(s) involved
-- Draw a quick ASCII diagram if it helps
-- Note any considerations
-
-```
-## Quick Exploration
-
-[Your brief analysis—what you found, any considerations]
-
-┌─────────────────────────────────────────┐
-│   [Optional: ASCII diagram if helpful]  │
-└─────────────────────────────────────────┘
-
-Explore mode (`/opsx:explore`) is for this kind of thinking—investigating before implementing. You can use it anytime you need to think through a problem.
-
-Now let's create a change to hold our work.
-```
-
-**PAUSE** - Wait for user acknowledgment before proceeding.
-
----
-
-## Phase 4: Create the Change
-
-**EXPLAIN:**
-```
-## Creating a Change
-
-A "change" in OpenSpec is a container for all the thinking and planning around a piece of work. It lives in `openspec/changes/<name>/` and holds your artifacts—proposal, specs, design, tasks.
-
-Let me create one for our task.
-```
-
-**DO:** Create the change with a derived kebab-case name:
-```bash
-openspec new change "<derived-name>"
-```
-
-**SHOW:**
-```
-Created: `openspec/changes/<name>/`
-
-The folder structure:
-```
-openspec/changes/<name>/
-├── proposal.md    ← Why we're doing this (empty, we'll fill it)
-├── design.md      ← How we'll build it (empty)
-├── specs/         ← Detailed requirements (empty)
-└── tasks.md       ← Implementation checklist (empty)
-```
-
-Now let's fill in the first artifact—the proposal.
-```
-
----
-
-## Phase 5: Proposal
-
-**EXPLAIN:**
-```
-## The Proposal
-
-The proposal captures **why** we're making this change and **what** it involves at a high level. It's the "elevator pitch" for the work.
-
-I'll draft one based on our task.
-```
-
-**DO:** Draft the proposal content (don't save yet):
-
-```
-Here's a draft proposal:
-
----
-
-## Why
-
-[1-2 sentences explaining the problem/opportunity]
-
-## What Changes
-
-[Bullet points of what will be different]
-
-## Capabilities
-
-### New Capabilities
-- `<capability-name>`: [brief description]
-
-### Modified Capabilities
-<!-- If modifying existing behavior -->
-
-## Impact
-
-- `src/path/to/file.ts`: [what changes]
-- [other files if applicable]
-
----
-
-Does this capture the intent? I can adjust before we save it.
-```
-
-**PAUSE** - Wait for user approval/feedback.
-
-After approval, save the proposal:
-```bash
-openspec instructions proposal --change "<name>" --json
-```
-Then write the content to `openspec/changes/<name>/proposal.md`.
-
-```
-Proposal saved. This is your "why" document—you can always come back and refine it as understanding evolves.
-
-Next up: specs.
-```
-
----
-
-## Phase 6: Specs
-
-**EXPLAIN:**
-```
-## Specs
-
-Specs define **what** we're building in precise, testable terms. They use a requirement/scenario format that makes expected behavior crystal clear.
-
-For a small task like this, we might only need one spec file.
-```
-
-**DO:** Create the spec file:
-```bash
-mkdir -p openspec/changes/<name>/specs/<capability-name>
-```
-
-Draft the spec content:
-
-```
-Here's the spec:
-
----
-
-## ADDED Requirements
-
-### Requirement: <Name>
-
-<Description of what the system should do>
-
-#### Scenario: <Scenario name>
-
-- **WHEN** <trigger condition>
-- **THEN** <expected outcome>
-- **AND** <additional outcome if needed>
-
----
-
-This format—WHEN/THEN/AND—makes requirements testable. You can literally read them as test cases.
-```
-
-Save to `openspec/changes/<name>/specs/<capability>/spec.md`.
-
----
-
-## Phase 7: Design
-
-**EXPLAIN:**
-```
-## Design
-
-The design captures **how** we'll build it—technical decisions, tradeoffs, approach.
-
-For small changes, this might be brief. That's fine—not every change needs deep design discussion.
-```
-
-**DO:** Draft design.md:
-
-```
-Here's the design:
-
----
-
-## Context
-
-[Brief context about the current state]
-
-## Goals / Non-Goals
-
-**Goals:**
-- [What we're trying to achieve]
-
-**Non-Goals:**
-- [What's explicitly out of scope]
-
-## Decisions
-
-### Decision 1: [Key decision]
-
-[Explanation of approach and rationale]
-
----
-
-For a small task, this captures the key decisions without over-engineering.
-```
-
-Save to `openspec/changes/<name>/design.md`.
-
----
-
-## Phase 8: Tasks
-
-**EXPLAIN:**
-```
-## Tasks
-
-Finally, we break the work into implementation tasks—checkboxes that drive the apply phase.
-
-These should be small, clear, and in logical order.
-```
-
-**DO:** Generate tasks based on specs and design:
-
-```
-Here are the implementation tasks:
-
----
-
-## 1. [Category or file]
-
-- [ ] 1.1 [Specific task]
-- [ ] 1.2 [Specific task]
-
-## 2. Verify
-
-- [ ] 2.1 [Verification step]
-
----
-
-Each checkbox becomes a unit of work in the apply phase. Ready to implement?
-```
-
-**PAUSE** - Wait for user to confirm they're ready to implement.
-
-Save to `openspec/changes/<name>/tasks.md`.
-
----
-
-## Phase 9: Apply (Implementation)
-
-**EXPLAIN:**
-```
-## Implementation
-
-Now we implement each task, checking them off as we go. I'll announce each one and occasionally note how the specs/design informed the approach.
-```
-
-**DO:** For each task:
-
-1. Announce: "Working on task N: [description]"
-2. Implement the change in the codebase
-3. Reference specs/design naturally: "The spec says X, so I'm doing Y"
-4. Mark complete in tasks.md: `- [ ]` → `- [x]`
-5. Brief status: "✓ Task N complete"
-
-Keep narration light—don't over-explain every line of code.
-
-After all tasks:
-
-```
-## Implementation Complete
-
-All tasks done:
-- [x] Task 1
-- [x] Task 2
-- [x] ...
-
-The change is implemented! One more step—let's archive it.
-```
-
----
-
-## Phase 10: Archive
-
-**EXPLAIN:**
-```
-## Archiving
-
-When a change is complete, we archive it. This moves it from `openspec/changes/` to `openspec/changes/archive/YYYY-MM-DD-<name>/`.
-
-Archived changes become your project's decision history—you can always find them later to understand why something was built a certain way.
-```
-
-**DO:**
-```bash
-openspec archive "<name>"
-```
-
-**SHOW:**
-```
-Archived to: `openspec/changes/archive/YYYY-MM-DD-<name>/`
-
-The change is now part of your project's history. The code is in your codebase, the decision record is preserved.
-```
-
----
-
-## Phase 11: Recap & Next Steps
-
-```
-## Congratulations!
-
-You just completed a full OpenSpec cycle:
-
-1. **Explore** - Thought through the problem
-2. **New** - Created a change container
-3. **Proposal** - Captured WHY
-4. **Specs** - Defined WHAT in detail
-5. **Design** - Decided HOW
-6. **Tasks** - Broke it into steps
-7. **Apply** - Implemented the work
-8. **Archive** - Preserved the record
-
-This same rhythm works for any size change—a small fix or a major feature.
-
----
-
-## Command Reference
-
-| Command | What it does |
-|---------|--------------|
-| `/opsx:explore` | Think through problems before/during work |
-| `/opsx:new` | Start a new change, step through artifacts |
-| `/opsx:ff` | Fast-forward: create all artifacts at once |
-| `/opsx:continue` | Continue working on an existing change |
-| `/opsx:apply` | Implement tasks from a change |
-| `/opsx:verify` | Verify implementation matches artifacts |
-| `/opsx:archive` | Archive a completed change |
-
----
-
-## What's Next?
-
-Try `/opsx:new` or `/opsx:ff` on something you actually want to build. You've got the rhythm now!
-```
-
----
-
-## Graceful Exit Handling
-
-### User wants to stop mid-way
-
-If the user says they need to stop, want to pause, or seem disengaged:
-
-```
-No problem! Your change is saved at `openspec/changes/<name>/`.
-
-To pick up where we left off later:
-- `/opsx:continue <name>` - Resume artifact creation
-- `/opsx:apply <name>` - Jump to implementation (if tasks exist)
-
-The work won't be lost. Come back whenever you're ready.
-```
-
-Exit gracefully without pressure.
-
-### User just wants command reference
-
-If the user says they just want to see the commands or skip the tutorial:
-
-```
-## OpenSpec Quick Reference
-
-| Command | What it does |
-|---------|--------------|
-| `/opsx:explore` | Think through problems (no code changes) |
-| `/opsx:new <name>` | Start a new change, step by step |
-| `/opsx:ff <name>` | Fast-forward: all artifacts at once |
-| `/opsx:continue <name>` | Continue an existing change |
-| `/opsx:apply <name>` | Implement tasks |
-| `/opsx:verify <name>` | Verify implementation |
-| `/opsx:archive <name>` | Archive when done |
-
-Try `/opsx:new` to start your first change, or `/opsx:ff` if you want to move fast.
-```
-
-Exit gracefully.
-
----
-
-## Guardrails
-
-- **Follow the EXPLAIN → DO → SHOW → PAUSE pattern** at key transitions (after explore, after proposal draft, after tasks, after archive)
-- **Keep narration light** during implementation—teach without lecturing
-- **Don't skip phases** even if the change is small—the goal is teaching the workflow
-- **Pause for acknowledgment** at marked points, but don't over-pause
-- **Handle exits gracefully**—never pressure the user to continue
-- **Use real codebase tasks**—don't simulate or use fake examples
-- **Adjust scope gently**—guide toward smaller tasks but respect user choice
diff --git a/.claude/commands/opsx/sync.md b/.claude/commands/opsx/sync.md
deleted file mode 100644
index 1571610..0000000
--- a/.claude/commands/opsx/sync.md
+++ /dev/null
@@ -1,134 +0,0 @@
----
-name: "OPSX: Sync"
-description: Sync delta specs from a change to main specs
-category: Workflow
-tags: [workflow, specs, experimental]
----
-
-Sync delta specs from a change to main specs.
-
-This is an **agent-driven** operation - you will read delta specs and directly edit main specs to apply the changes. This allows intelligent merging (e.g., adding a scenario without copying the entire requirement).
-
-**Input**: Optionally specify a change name after `/opsx:sync` (e.g., `/opsx:sync add-auth`). If omitted, check if it can be inferred from conversation context. If vague or ambiguous you MUST prompt for available changes.
-
-**Steps**
-
-1. **If no change name provided, prompt for selection**
-
-   Run `openspec list --json` to get available changes. Use the **AskUserQuestion tool** to let the user select.
-
-   Show changes that have delta specs (under `specs/` directory).
-
-   **IMPORTANT**: Do NOT guess or auto-select a change. Always let the user choose.
-
-2. **Find delta specs**
-
-   Look for delta spec files in `openspec/changes/<name>/specs/*/spec.md`.
-
-   Each delta spec file contains sections like:
-   - `## ADDED Requirements` - New requirements to add
-   - `## MODIFIED Requirements` - Changes to existing requirements
-   - `## REMOVED Requirements` - Requirements to remove
-   - `## RENAMED Requirements` - Requirements to rename (FROM:/TO: format)
-
-   If no delta specs found, inform user and stop.
-
-3. **For each delta spec, apply changes to main specs**
-
-   For each capability with a delta spec at `openspec/changes/<name>/specs/<capability>/spec.md`:
-
-   a. **Read the delta spec** to understand the intended changes
-
-   b. **Read the main spec** at `openspec/specs/<capability>/spec.md` (may not exist yet)
-
-   c. **Apply changes intelligently**:
-
-      **ADDED Requirements:**
-      - If requirement doesn't exist in main spec → add it
-      - If requirement already exists → update it to match (treat as implicit MODIFIED)
-
-      **MODIFIED Requirements:**
-      - Find the requirement in main spec
-      - Apply the changes - this can be:
-        - Adding new scenarios (don't need to copy existing ones)
-        - Modifying existing scenarios
-        - Changing the requirement description
-      - Preserve scenarios/content not mentioned in the delta
-
-      **REMOVED Requirements:**
-      - Remove the entire requirement block from main spec
-
-      **RENAMED Requirements:**
-      - Find the FROM requirement, rename to TO
-
-   d. **Create new main spec** if capability doesn't exist yet:
-      - Create `openspec/specs/<capability>/spec.md`
-      - Add Purpose section (can be brief, mark as TBD)
-      - Add Requirements section with the ADDED requirements
-
-4. **Show summary**
-
-   After applying all changes, summarize:
-   - Which capabilities were updated
-   - What changes were made (requirements added/modified/removed/renamed)
-
-**Delta Spec Format Reference**
-
-```markdown
-## ADDED Requirements
-
-### Requirement: New Feature
-The system SHALL do something new.
-
-#### Scenario: Basic case
-- **WHEN** user does X
-- **THEN** system does Y
-
-## MODIFIED Requirements
-
-### Requirement: Existing Feature
-#### Scenario: New scenario to add
-- **WHEN** user does A
-- **THEN** system does B
-
-## REMOVED Requirements
-
-### Requirement: Deprecated Feature
-
-## RENAMED Requirements
-
-- FROM: `### Requirement: Old Name`
-- TO: `### Requirement: New Name`
-```
-
-**Key Principle: Intelligent Merging**
-
-Unlike programmatic merging, you can apply **partial updates**:
-- To add a scenario, just include that scenario under MODIFIED - don't copy existing scenarios
-- The delta represents *intent*, not a wholesale replacement
-- Use your judgment to merge changes sensibly
-
-**Output On Success**
-
-```
-## Specs Synced: <change-name>
-
-Updated main specs:
-
-**<capability-1>**:
-- Added requirement: "New Feature"
-- Modified requirement: "Existing Feature" (added 1 scenario)
-
-**<capability-2>**:
-- Created new spec file
-- Added requirement: "Another Feature"
-
-Main specs are now updated. The change remains active - archive when implementation is complete.
-```
-
-**Guardrails**
-- Read both delta and main specs before making changes
-- Preserve existing content not mentioned in delta
-- If something is unclear, ask for clarification
-- Show what you're changing as you go
-- The operation should be idempotent - running twice should give same result
diff --git a/.claude/commands/opsx/verify.md b/.claude/commands/opsx/verify.md
deleted file mode 100644
index 82ab63f..0000000
--- a/.claude/commands/opsx/verify.md
+++ /dev/null
@@ -1,164 +0,0 @@
----
-name: "OPSX: Verify"
-description: Verify implementation matches change artifacts before archiving
-category: Workflow
-tags: [workflow, verify, experimental]
----
-
-Verify that an implementation matches the change artifacts (specs, tasks, design).
-
-**Input**: Optionally specify a change name after `/opsx:verify` (e.g., `/opsx:verify add-auth`). If omitted, check if it can be inferred from conversation context. If vague or ambiguous you MUST prompt for available changes.
-
-**Steps**
-
-1. **If no change name provided, prompt for selection**
-
-   Run `openspec list --json` to get available changes. Use the **AskUserQuestion tool** to let the user select.
-
-   Show changes that have implementation tasks (tasks artifact exists).
-   Include the schema used for each change if available.
-   Mark changes with incomplete tasks as "(In Progress)".
-
-   **IMPORTANT**: Do NOT guess or auto-select a change. Always let the user choose.
-
-2. **Check status to understand the schema**
-   ```bash
-   openspec status --change "<name>" --json
-   ```
-   Parse the JSON to understand:
-   - `schemaName`: The workflow being used (e.g., "spec-driven")
-   - Which artifacts exist for this change
-
-3. **Get the change directory and load artifacts**
-
-   ```bash
-   openspec instructions apply --change "<name>" --json
-   ```
-
-   This returns the change directory and context files. Read all available artifacts from `contextFiles`.
-
-4. **Initialize verification report structure**
-
-   Create a report structure with three dimensions:
-   - **Completeness**: Track tasks and spec coverage
-   - **Correctness**: Track requirement implementation and scenario coverage
-   - **Coherence**: Track design adherence and pattern consistency
-
-   Each dimension can have CRITICAL, WARNING, or SUGGESTION issues.
-
-5. **Verify Completeness**
-
-   **Task Completion**:
-   - If tasks.md exists in contextFiles, read it
-   - Parse checkboxes: `- [ ]` (incomplete) vs `- [x]` (complete)
-   - Count complete vs total tasks
-   - If incomplete tasks exist:
-     - Add CRITICAL issue for each incomplete task
-     - Recommendation: "Complete task: <description>" or "Mark as done if already implemented"
-
-   **Spec Coverage**:
-   - If delta specs exist in `openspec/changes/<name>/specs/`:
-     - Extract all requirements (marked with "### Requirement:")
-     - For each requirement:
-       - Search codebase for keywords related to the requirement
-       - Assess if implementation likely exists
-     - If requirements appear unimplemented:
-       - Add CRITICAL issue: "Requirement not found: <requirement name>"
-       - Recommendation: "Implement requirement X: <description>"
-
-6. **Verify Correctness**
-
-   **Requirement Implementation Mapping**:
-   - For each requirement from delta specs:
-     - Search codebase for implementation evidence
-     - If found, note file paths and line ranges
-     - Assess if implementation matches requirement intent
-     - If divergence detected:
-       - Add WARNING: "Implementation may diverge from spec: <details>"
-       - Recommendation: "Review <file>:<lines> against requirement X"
-
-   **Scenario Coverage**:
-   - For each scenario in delta specs (marked with "#### Scenario:"):
-     - Check if conditions are handled in code
-     - Check if tests exist covering the scenario
-     - If scenario appears uncovered:
-       - Add WARNING: "Scenario not covered: <scenario name>"
-       - Recommendation: "Add test or implementation for scenario: <description>"
-
-7. **Verify Coherence**
-
-   **Design Adherence**:
-   - If design.md exists in contextFiles:
-     - Extract key decisions (look for sections like "Decision:", "Approach:", "Architecture:")
-     - Verify implementation follows those decisions
-     - If contradiction detected:
-       - Add WARNING: "Design decision not followed: <decision>"
-       - Recommendation: "Update implementation or revise design.md to match reality"
-   - If no design.md: Skip design adherence check, note "No design.md to verify against"
-
-   **Code Pattern Consistency**:
-   - Review new code for consistency with project patterns
-   - Check file naming, directory structure, coding style
-   - If significant deviations found:
-     - Add SUGGESTION: "Code pattern deviation: <details>"
-     - Recommendation: "Consider following project pattern: <example>"
-
-8. **Generate Verification Report**
-
-   **Summary Scorecard**:
-   ```
-   ## Verification Report: <change-name>
-
-   ### Summary
-   | Dimension    | Status           |
-   |--------------|------------------|
-   | Completeness | X/Y tasks, N reqs|
-   | Correctness  | M/N reqs covered |
-   | Coherence    | Followed/Issues  |
-   ```
-
-   **Issues by Priority**:
-
-   1. **CRITICAL** (Must fix before archive):
-      - Incomplete tasks
-      - Missing requirement implementations
-      - Each with specific, actionable recommendation
-
-   2. **WARNING** (Should fix):
-      - Spec/design divergences
-      - Missing scenario coverage
-      - Each with specific recommendation
-
-   3. **SUGGESTION** (Nice to fix):
-      - Pattern inconsistencies
-      - Minor improvements
-      - Each with specific recommendation
-
-   **Final Assessment**:
-   - If CRITICAL issues: "X critical issue(s) found. Fix before archiving."
-   - If only warnings: "No critical issues. Y warning(s) to consider. Ready for archive (with noted improvements)."
-   - If all clear: "All checks passed. Ready for archive."
-
-**Verification Heuristics**
-
-- **Completeness**: Focus on objective checklist items (checkboxes, requirements list)
-- **Correctness**: Use keyword search, file path analysis, reasonable inference - don't require perfect certainty
-- **Coherence**: Look for glaring inconsistencies, don't nitpick style
-- **False Positives**: When uncertain, prefer SUGGESTION over WARNING, WARNING over CRITICAL
-- **Actionability**: Every issue must have a specific recommendation with file/line references where applicable
-
-**Graceful Degradation**
-
-- If only tasks.md exists: verify task completion only, skip spec/design checks
-- If tasks + specs exist: verify completeness and correctness, skip design
-- If full artifacts: verify all three dimensions
-- Always note which checks were skipped and why
-
-**Output Format**
-
-Use clear markdown with:
-- Table for summary scorecard
-- Grouped lists for issues (CRITICAL/WARNING/SUGGESTION)
-- Code references in format: `file.ts:123`
-- Specific, actionable recommendations
-- No vague suggestions like "consider reviewing"
diff --git a/.claude/skills/openspec-apply-change/SKILL.md b/.claude/skills/openspec-apply-change/SKILL.md
deleted file mode 100644
index bc95df4..0000000
--- a/.claude/skills/openspec-apply-change/SKILL.md
+++ /dev/null
@@ -1,156 +0,0 @@
----
-name: openspec-apply-change
-description: Implement tasks from an OpenSpec change. Use when the user wants to start implementing, continue implementation, or work through tasks.
-license: MIT
-compatibility: Requires openspec CLI.
-metadata:
-  author: openspec
-  version: "1.0"
-  generatedBy: "1.0.2"
----
-
-Implement tasks from an OpenSpec change.
-
-**Input**: Optionally specify a change name. If omitted, check if it can be inferred from conversation context. If vague or ambiguous you MUST prompt for available changes.
-
-**Steps**
-
-1. **Select the change**
-
-   If a name is provided, use it. Otherwise:
-   - Infer from conversation context if the user mentioned a change
-   - Auto-select if only one active change exists
-   - If ambiguous, run `openspec list --json` to get available changes and use the **AskUserQuestion tool** to let the user select
-
-   Always announce: "Using change: <name>" and how to override (e.g., `/opsx:apply <other>`).
-
-2. **Check status to understand the schema**
-   ```bash
-   openspec status --change "<name>" --json
-   ```
-   Parse the JSON to understand:
-   - `schemaName`: The workflow being used (e.g., "spec-driven")
-   - Which artifact contains the tasks (typically "tasks" for spec-driven, check status for others)
-
-3. **Get apply instructions**
-
-   ```bash
-   openspec instructions apply --change "<name>" --json
-   ```
-
-   This returns:
-   - Context file paths (varies by schema - could be proposal/specs/design/tasks or spec/tests/implementation/docs)
-   - Progress (total, complete, remaining)
-   - Task list with status
-   - Dynamic instruction based on current state
-
-   **Handle states:**
-   - If `state: "blocked"` (missing artifacts): show message, suggest using openspec-continue-change
-   - If `state: "all_done"`: congratulate, suggest archive
-   - Otherwise: proceed to implementation
-
-4. **Read context files**
-
-   Read the files listed in `contextFiles` from the apply instructions output.
-   The files depend on the schema being used:
-   - **spec-driven**: proposal, specs, design, tasks
-   - Other schemas: follow the contextFiles from CLI output
-
-5. **Show current progress**
-
-   Display:
-   - Schema being used
-   - Progress: "N/M tasks complete"
-   - Remaining tasks overview
-   - Dynamic instruction from CLI
-
-6. **Implement tasks (loop until done or blocked)**
-
-   For each pending task:
-   - Show which task is being worked on
-   - Make the code changes required
-   - Keep changes minimal and focused
-   - Mark task complete in the tasks file: `- [ ]` → `- [x]`
-   - Continue to next task
-
-   **Pause if:**
-   - Task is unclear → ask for clarification
-   - Implementation reveals a design issue → suggest updating artifacts
-   - Error or blocker encountered → report and wait for guidance
-   - User interrupts
-
-7. **On completion or pause, show status**
-
-   Display:
-   - Tasks completed this session
-   - Overall progress: "N/M tasks complete"
-   - If all done: suggest archive
-   - If paused: explain why and wait for guidance
-
-**Output During Implementation**
-
-```
-## Implementing: <change-name> (schema: <schema-name>)
-
-Working on task 3/7: <task description>
-[...implementation happening...]
-✓ Task complete
-
-Working on task 4/7: <task description>
-[...implementation happening...]
-✓ Task complete
-```
-
-**Output On Completion**
-
-```
-## Implementation Complete
-
-**Change:** <change-name>
-**Schema:** <schema-name>
-**Progress:** 7/7 tasks complete ✓
-
-### Completed This Session
-- [x] Task 1
-- [x] Task 2
-...
-
-All tasks complete! Ready to archive this change.
-```
-
-**Output On Pause (Issue Encountered)**
-
-```
-## Implementation Paused
-
-**Change:** <change-name>
-**Schema:** <schema-name>
-**Progress:** 4/7 tasks complete
-
-### Issue Encountered
-<description of the issue>
-
-**Options:**
-1. <option 1>
-2. <option 2>
-3. Other approach
-
-What would you like to do?
-```
-
-**Guardrails**
-- Keep going through tasks until done or blocked
-- Always read context files before starting (from the apply instructions output)
-- If task is ambiguous, pause and ask before implementing
-- If implementation reveals issues, pause and suggest artifact updates
-- Keep code changes minimal and scoped to each task
-- Update task checkbox immediately after completing each task
-- Pause on errors, blockers, or unclear requirements - don't guess
-- Use contextFiles from CLI output, don't assume specific file names
-
-**Fluid Workflow Integration**
-
-This skill supports the "actions on a change" model:
-
-- **Can be invoked anytime**: Before all artifacts are done (if tasks exist), after partial implementation, interleaved with other actions
-- **Allows artifact updates**: If implementation reveals design issues, suggest updating artifacts - not phase-locked, work fluidly
diff --git a/.claude/skills/openspec-archive-change/SKILL.md b/.claude/skills/openspec-archive-change/SKILL.md
deleted file mode 100644
index 9ea63e8..0000000
--- a/.claude/skills/openspec-archive-change/SKILL.md
+++ /dev/null
@@ -1,114 +0,0 @@
----
-name: openspec-archive-change
-description: Archive a completed change in the experimental workflow. Use when the user wants to finalize and archive a change after implementation is complete.
-license: MIT
-compatibility: Requires openspec CLI.
-metadata:
-  author: openspec
-  version: "1.0"
-  generatedBy: "1.0.2"
----
-
-Archive a completed change in the experimental workflow.
-
-**Input**: Optionally specify a change name. If omitted, check if it can be inferred from conversation context. If vague or ambiguous you MUST prompt for available changes.
-
-**Steps**
-
-1. **If no change name provided, prompt for selection**
-
-   Run `openspec list --json` to get available changes. Use the **AskUserQuestion tool** to let the user select.
-
-   Show only active changes (not already archived).
-   Include the schema used for each change if available.
-
-   **IMPORTANT**: Do NOT guess or auto-select a change. Always let the user choose.
-
-2. **Check artifact completion status**
-
-   Run `openspec status --change "<name>" --json` to check artifact completion.
-
-   Parse the JSON to understand:
-   - `schemaName`: The workflow being used
-   - `artifacts`: List of artifacts with their status (`done` or other)
-
-   **If any artifacts are not `done`:**
-   - Display warning listing incomplete artifacts
-   - Use **AskUserQuestion tool** to confirm user wants to proceed
-   - Proceed if user confirms
-
-3. **Check task completion status**
-
-   Read the tasks file (typically `tasks.md`) to check for incomplete tasks.
-
-   Count tasks marked with `- [ ]` (incomplete) vs `- [x]` (complete).
-
-   **If incomplete tasks found:**
-   - Display warning showing count of incomplete tasks
-   - Use **AskUserQuestion tool** to confirm user wants to proceed
-   - Proceed if user confirms
-
-   **If no tasks file exists:** Proceed without task-related warning.
-
-4. **Assess delta spec sync state**
-
-   Check for delta specs at `openspec/changes/<name>/specs/`. If none exist, proceed without sync prompt.
-
-   **If delta specs exist:**
-   - Compare each delta spec with its corresponding main spec at `openspec/specs/<capability>/spec.md`
-   - Determine what changes would be applied (adds, modifications, removals, renames)
-   - Show a combined summary before prompting
-
-   **Prompt options:**
-   - If changes needed: "Sync now (recommended)", "Archive without syncing"
-   - If already synced: "Archive now", "Sync anyway", "Cancel"
-
-   If user chooses sync, execute /opsx:sync logic (use the openspec-sync-specs skill). Proceed to archive regardless of choice.
-
-5. **Perform the archive**
-
-   Create the archive directory if it doesn't exist:
-   ```bash
-   mkdir -p openspec/changes/archive
-   ```
-
-   Generate target name using current date: `YYYY-MM-DD-<change-name>`
-
-   **Check if target already exists:**
-   - If yes: Fail with error, suggest renaming existing archive or using different date
-   - If no: Move the change directory to archive
-
-   ```bash
-   mv openspec/changes/<name> openspec/changes/archive/YYYY-MM-DD-<name>
-   ```
-
-6. **Display summary**
-
-   Show archive completion summary including:
-   - Change name
-   - Schema that was used
-   - Archive location
-   - Whether specs were synced (if applicable)
-   - Note about any warnings (incomplete artifacts/tasks)
-
-**Output On Success**
-
-```
-## Archive Complete
-
-**Change:** <change-name>
-**Schema:** <schema-name>
-**Archived to:** openspec/changes/archive/YYYY-MM-DD-<name>/
-**Specs:** ✓ Synced to main specs (or "No delta specs" or "Sync skipped")
-
-All artifacts complete. All tasks complete.
-```
-
-**Guardrails**
-- Always prompt for change selection if not provided
-- Use artifact graph (openspec status --json) for completion checking
-- Don't block archive on warnings - just inform and confirm
-- Preserve .openspec.yaml when moving to archive (it moves with the directory)
-- Show clear summary of what happened
-- If sync is requested, use openspec-sync-specs approach (agent-driven)
-- If delta specs exist, always run the sync assessment and show the combined summary before prompting
diff --git a/.claude/skills/openspec-bulk-archive-change/SKILL.md b/.claude/skills/openspec-bulk-archive-change/SKILL.md
deleted file mode 100644
index 5ce056a..0000000
--- a/.claude/skills/openspec-bulk-archive-change/SKILL.md
+++ /dev/null
@@ -1,246 +0,0 @@
----
-name: openspec-bulk-archive-change
-description: Archive multiple completed changes at once. Use when archiving several parallel changes.
-license: MIT
-compatibility: Requires openspec CLI.
-metadata:
-  author: openspec
-  version: "1.0"
-  generatedBy: "1.0.2"
----
-
-Archive multiple completed changes in a single operation.
-
-This skill allows you to batch-archive changes, handling spec conflicts intelligently by checking the codebase to determine what's actually implemented.
-
-**Input**: None required (prompts for selection)
-
-**Steps**
-
-1. **Get active changes**
-
-   Run `openspec list --json` to get all active changes.
-
-   If no active changes exist, inform user and stop.
-
-2. **Prompt for change selection**
-
-   Use **AskUserQuestion tool** with multi-select to let user choose changes:
-   - Show each change with its schema
-   - Include an option for "All changes"
-   - Allow any number of selections (1+ works, 2+ is the typical use case)
-
-   **IMPORTANT**: Do NOT auto-select. Always let the user choose.
-
-3. **Batch validation - gather status for all selected changes**
-
-   For each selected change, collect:
-
-   a. **Artifact status** - Run `openspec status --change "<name>" --json`
-      - Parse `schemaName` and `artifacts` list
-      - Note which artifacts are `done` vs other states
-
-   b. **Task completion** - Read `openspec/changes/<name>/tasks.md`
-      - Count `- [ ]` (incomplete) vs `- [x]` (complete)
-      - If no tasks file exists, note as "No tasks"
-
-   c. **Delta specs** - Check `openspec/changes/<name>/specs/` directory
-      - List which capability specs exist
-      - For each, extract requirement names (lines matching `### Requirement: <name>`)
-
-4. **Detect spec conflicts**
-
-   Build a map of `capability -> [changes that touch it]`:
-
-   ```
-   auth -> [change-a, change-b]  <- CONFLICT (2+ changes)
-   api  -> [change-c]            <- OK (only 1 change)
-   ```
-
-   A conflict exists when 2+ selected changes have delta specs for the same capability.
-
-5. **Resolve conflicts agentically**
-
-   **For each conflict**, investigate the codebase:
-
-   a. **Read the delta specs** from each conflicting change to understand what each claims to add/modify
-
-   b. **Search the codebase** for implementation evidence:
-      - Look for code implementing requirements from each delta spec
-      - Check for related files, functions, or tests
-
-   c. **Determine resolution**:
-      - If only one change is actually implemented -> sync that one's specs
-      - If both implemented -> apply in chronological order (older first, newer overwrites)
-      - If neither implemented -> skip spec sync, warn user
-
-   d. **Record resolution** for each conflict:
-      - Which change's specs to apply
-      - In what order (if both)
-      - Rationale (what was found in codebase)
-
-6. **Show consolidated status table**
-
-   Display a table summarizing all changes:
-
-   ```
-   | Change               | Artifacts | Tasks | Specs   | Conflicts | Status |
-   |---------------------|-----------|-------|---------|-----------|--------|
-   | schema-management   | Done      | 5/5   | 2 delta | None      | Ready  |
-   | project-config      | Done      | 3/3   | 1 delta | None      | Ready  |
-   | add-oauth           | Done      | 4/4   | 1 delta | auth (!)  | Ready* |
-   | add-verify-skill    | 1 left    | 2/5   | None    | None      | Warn   |
-   ```
-
-   For conflicts, show the resolution:
-   ```
-   * Conflict resolution:
-     - auth spec: Will apply add-oauth then add-jwt (both implemented, chronological order)
-   ```
-
-   For incomplete changes, show warnings:
-   ```
-   Warnings:
-   - add-verify-skill: 1 incomplete artifact, 3 incomplete tasks
-   ```
-
-7. **Confirm batch operation**
-
-   Use **AskUserQuestion tool** with a single confirmation:
-
-   - "Archive N changes?" with options based on status
-   - Options might include:
-     - "Archive all N changes"
-     - "Archive only N ready changes (skip incomplete)"
-     - "Cancel"
-
-   If there are incomplete changes, make clear they'll be archived with warnings.
-
-8. **Execute archive for each confirmed change**
-
-   Process changes in the determined order (respecting conflict resolution):
-
-   a. **Sync specs** if delta specs exist:
-      - Use the openspec-sync-specs approach (agent-driven intelligent merge)
-      - For conflicts, apply in resolved order
-      - Track if sync was done
-
-   b. **Perform the archive**:
-      ```bash
-      mkdir -p openspec/changes/archive
-      mv openspec/changes/<name> openspec/changes/archive/YYYY-MM-DD-<name>
-      ```
-
-   c. **Track outcome** for each change:
-      - Success: archived successfully
-      - Failed: error during archive (record error)
-      - Skipped: user chose not to archive (if applicable)
-
-9. **Display summary**
-
-   Show final results:
-
-   ```
-   ## Bulk Archive Complete
-
-   Archived 3 changes:
-   - schema-management-cli -> archive/2026-01-19-schema-management-cli/
-   - project-config -> archive/2026-01-19-project-config/
-   - add-oauth -> archive/2026-01-19-add-oauth/
-
-   Skipped 1 change:
-   - add-verify-skill (user chose not to archive incomplete)
-
-   Spec sync summary:
-   - 4 delta specs synced to main specs
-   - 1 conflict resolved (auth: applied both in chronological order)
-   ```
-
-   If any failures:
-   ```
-   Failed 1 change:
-   - some-change: Archive directory already exists
-   ```
-
-**Conflict Resolution Examples**
-
-Example 1: Only one implemented
-```
-Conflict: specs/auth/spec.md touched by [add-oauth, add-jwt]
-
-Checking add-oauth:
-- Delta adds "OAuth Provider Integration" requirement
-- Searching codebase... found src/auth/oauth.ts implementing OAuth flow
-
-Checking add-jwt:
-- Delta adds "JWT Token Handling" requirement
-- Searching codebase... no JWT implementation found
-
-Resolution: Only add-oauth is implemented. Will sync add-oauth specs only.
-```
-
-Example 2: Both implemented
-```
-Conflict: specs/api/spec.md touched by [add-rest-api, add-graphql]
-
-Checking add-rest-api (created 2026-01-10):
-- Delta adds "REST Endpoints" requirement
-- Searching codebase... found src/api/rest.ts
-
-Checking add-graphql (created 2026-01-15):
-- Delta adds "GraphQL Schema" requirement
-- Searching codebase... found src/api/graphql.ts
-
-Resolution: Both implemented. Will apply add-rest-api specs first,
-then add-graphql specs (chronological order, newer takes precedence).
-```
-
-**Output On Success**
-
-```
-## Bulk Archive Complete
-
-Archived N changes:
-- <change-1> -> archive/YYYY-MM-DD-<change-1>/
-- <change-2> -> archive/YYYY-MM-DD-<change-2>/
-
-Spec sync summary:
-- N delta specs synced to main specs
-- No conflicts (or: M conflicts resolved)
-```
-
-**Output On Partial Success**
-
-```
-## Bulk Archive Complete (partial)
-
-Archived N changes:
-- <change-1> -> archive/YYYY-MM-DD-<change-1>/
-
-Skipped M changes:
-- <change-2> (user chose not to archive incomplete)
-
-Failed K changes:
-- <change-3>: Archive directory already exists
-```
-
-**Output When No Changes**
-
-```
-## No Changes to Archive
-
-No active changes found. Use `/opsx:new` to create a new change.
-```
-
-**Guardrails**
-- Allow any number of changes (1+ is fine, 2+ is the typical use case)
-- Always prompt for selection, never auto-select
-- Detect spec conflicts early and resolve by checking codebase
-- When both changes are implemented, apply specs in chronological order
-- Skip spec sync only when implementation is missing (warn user)
-- Show clear per-change status before confirming
-- Use single confirmation for entire batch
-- Track and report all outcomes (success/skip/fail)
-- Preserve .openspec.yaml when moving to archive
-- Archive directory target uses current date: YYYY-MM-DD-<name>
-- If archive target exists, fail that change but continue with others
diff --git a/.claude/skills/openspec-continue-change/SKILL.md b/.claude/skills/openspec-continue-change/SKILL.md
deleted file mode 100644
index 79aaac4..0000000
--- a/.claude/skills/openspec-continue-change/SKILL.md
+++ /dev/null
@@ -1,118 +0,0 @@
----
-name: openspec-continue-change
-description: Continue working on an OpenSpec change by creating the next artifact. Use when the user wants to progress their change, create the next artifact, or continue their workflow.
-license: MIT
-compatibility: Requires openspec CLI.
-metadata:
-  author: openspec
-  version: "1.0"
-  generatedBy: "1.0.2"
----
-
-Continue working on a change by creating the next artifact.
-
-**Input**: Optionally specify a change name. If omitted, check if it can be inferred from conversation context. If vague or ambiguous you MUST prompt for available changes.
-
-**Steps**
-
-1. **If no change name provided, prompt for selection**
-
-   Run `openspec list --json` to get available changes sorted by most recently modified. Then use the **AskUserQuestion tool** to let the user select which change to work on.
-
-   Present the top 3-4 most recently modified changes as options, showing:
-   - Change name
-   - Schema (from `schema` field if present, otherwise "spec-driven")
-   - Status (e.g., "0/5 tasks", "complete", "no tasks")
-   - How recently it was modified (from `lastModified` field)
-
-   Mark the most recently modified change as "(Recommended)" since it's likely what the user wants to continue.
-
-   **IMPORTANT**: Do NOT guess or auto-select a change. Always let the user choose.
-
-2. **Check current status**
-   ```bash
-   openspec status --change "<name>" --json
-   ```
-   Parse the JSON to understand current state. The response includes:
-   - `schemaName`: The workflow schema being used (e.g., "spec-driven")
-   - `artifacts`: Array of artifacts with their status ("done", "ready", "blocked")
-   - `isComplete`: Boolean indicating if all artifacts are complete
-
-3. **Act based on status**:
-
-   ---
-
-   **If all artifacts are complete (`isComplete: true`)**:
-   - Congratulate the user
-   - Show final status including the schema used
-   - Suggest: "All artifacts created! You can now implement this change or archive it."
-   - STOP
-
-   ---
-
-   **If artifacts are ready to create** (status shows artifacts with `status: "ready"`):
-   - Pick the FIRST artifact with `status: "ready"` from the status output
-   - Get its instructions:
-     ```bash
-     openspec instructions <artifact-id> --change "<name>" --json
-     ```
-   - Parse the JSON. The key fields are:
-     - `context`: Project background (constraints for you - do NOT include in output)
-     - `rules`: Artifact-specific rules (constraints for you - do NOT include in output)
-     - `template`: The structure to use for your output file
-     - `instruction`: Schema-specific guidance
-     - `outputPath`: Where to write the artifact
-     - `dependencies`: Completed artifacts to read for context
-   - **Create the artifact file**:
-     - Read any completed dependency files for context
-     - Use `template` as the structure - fill in its sections
-     - Apply `context` and `rules` as constraints when writing - but do NOT copy them into the file
-     - Write to the output path specified in instructions
-   - Show what was created and what's now unlocked
-   - STOP after creating ONE artifact
-
-   ---
-
-   **If no artifacts are ready (all blocked)**:
-   - This shouldn't happen with a valid schema
-   - Show status and suggest checking for issues
-
-4. **After creating an artifact, show progress**
-   ```bash
-   openspec status --change "<name>"
-   ```
-
-**Output**
-
-After each invocation, show:
-- Which artifact was created
-- Schema workflow being used
-- Current progress (N/M complete)
-- What artifacts are now unlocked
-- Prompt: "Want to continue? Just ask me to continue or tell me what to do next."
-
-**Artifact Creation Guidelines**
-
-The artifact types and their purpose depend on the schema. Use the `instruction` field from the instructions output to understand what to create.
-
-Common artifact patterns:
-
-**spec-driven schema** (proposal → specs → design → tasks):
-- **proposal.md**: Ask user about the change if not clear. Fill in Why, What Changes, Capabilities, Impact.
-  - The Capabilities section is critical - each capability listed will need a spec file.
-- **specs/<capability>/spec.md**: Create one spec per capability listed in the proposal's Capabilities section (use the capability name, not the change name).
-- **design.md**: Document technical decisions, architecture, and implementation approach.
-- **tasks.md**: Break down implementation into checkboxed tasks.
-
-For other schemas, follow the `instruction` field from the CLI output.
-
-**Guardrails**
-- Create ONE artifact per invocation
-- Always read dependency artifacts before creating a new one
-- Never skip artifacts or create out of order
-- If context is unclear, ask the user before creating
-- Verify the artifact file exists after writing before marking progress
-- Use the schema's artifact sequence, don't assume specific artifact names
-- **IMPORTANT**: `context` and `rules` are constraints for YOU, not content for the file
-  - Do NOT copy `<context>`, `<rules>`, `<project_context>` blocks into the artifact
-  - These guide what you write, but should never appear in the output
diff --git a/.claude/skills/openspec-explore/SKILL.md b/.claude/skills/openspec-explore/SKILL.md
deleted file mode 100644
index 49d051d..0000000
--- a/.claude/skills/openspec-explore/SKILL.md
+++ /dev/null
@@ -1,290 +0,0 @@
----
-name: openspec-explore
-description: Enter explore mode - a thinking partner for exploring ideas, investigating problems, and clarifying requirements. Use when the user wants to think through something before or during a change.
-license: MIT
-compatibility: Requires openspec CLI.
-metadata:
-  author: openspec
-  version: "1.0"
-  generatedBy: "1.0.2"
----
-
-Enter explore mode. Think deeply. Visualize freely. Follow the conversation wherever it goes.
-
-**IMPORTANT: Explore mode is for thinking, not implementing.** You may read files, search code, and investigate the codebase, but you must NEVER write code or implement features. If the user asks you to implement something, remind them to exit explore mode first (e.g., start a change with `/opsx:new` or `/opsx:ff`). You MAY create OpenSpec artifacts (proposals, designs, specs) if the user asks—that's capturing thinking, not implementing.
-
-**This is a stance, not a workflow.** There are no fixed steps, no required sequence, no mandatory outputs. You're a thinking partner helping the user explore.
-
----
-
-## The Stance
-
-- **Curious, not prescriptive** - Ask questions that emerge naturally, don't follow a script
-- **Open threads, not interrogations** - Surface multiple interesting directions and let the user follow what resonates. Don't funnel them through a single path of questions.
-- **Visual** - Use ASCII diagrams liberally when they'd help clarify thinking
-- **Adaptive** - Follow interesting threads, pivot when new information emerges
-- **Patient** - Don't rush to conclusions, let the shape of the problem emerge
-- **Grounded** - Explore the actual codebase when relevant, don't just theorize
-
----
-
-## What You Might Do
-
-Depending on what the user brings, you might:
-
-**Explore the problem space**
-- Ask clarifying questions that emerge from what they said
-- Challenge assumptions
-- Reframe the problem
-- Find analogies
-
-**Investigate the codebase**
-- Map existing architecture relevant to the discussion
-- Find integration points
-- Identify patterns already in use
-- Surface hidden complexity
-
-**Compare options**
-- Brainstorm multiple approaches
-- Build comparison tables
-- Sketch tradeoffs
-- Recommend a path (if asked)
-
-**Visualize**
-```
-┌─────────────────────────────────────────┐
-│     Use ASCII diagrams liberally        │
-├─────────────────────────────────────────┤
-│                                         │
-│   ┌────────┐         ┌────────┐        │
-│   │ State  │────────▶│ State  │        │
-│   │   A    │         │   B    │        │
-│   └────────┘         └────────┘        │
-│                                         │
-│   System diagrams, state machines,      │
-│   data flows, architecture sketches,    │
-│   dependency graphs, comparison tables  │
-│                                         │
-└─────────────────────────────────────────┘
-```
-
-**Surface risks and unknowns**
-- Identify what could go wrong
-- Find gaps in understanding
-- Suggest spikes or investigations
-
----
-
-## OpenSpec Awareness
-
-You have full context of the OpenSpec system. Use it naturally, don't force it.
-
-### Check for context
-
-At the start, quickly check what exists:
-```bash
-openspec list --json
-```
-
-This tells you:
-- If there are active changes
-- Their names, schemas, and status
-- What the user might be working on
-
-### When no change exists
-
-Think freely. When insights crystallize, you might offer:
-
-- "This feels solid enough to start a change. Want me to create one?"
-  → Can transition to `/opsx:new` or `/opsx:ff`
-- Or keep exploring - no pressure to formalize
-
-### When a change exists
-
-If the user mentions a change or you detect one is relevant:
-
-1. **Read existing artifacts for context**
-   - `openspec/changes/<name>/proposal.md`
-   - `openspec/changes/<name>/design.md`
-   - `openspec/changes/<name>/tasks.md`
-   - etc.
-
-2. **Reference them naturally in conversation**
-   - "Your design mentions using Redis, but we just realized SQLite fits better..."
-   - "The proposal scopes this to premium users, but we're now thinking everyone..."
-
-3. **Offer to capture when decisions are made**
-
-   | Insight Type | Where to Capture |
-   |--------------|------------------|
-   | New requirement discovered | `specs/<capability>/spec.md` |
-   | Requirement changed | `specs/<capability>/spec.md` |
-   | Design decision made | `design.md` |
-   | Scope changed | `proposal.md` |
-   | New work identified | `tasks.md` |
-   | Assumption invalidated | Relevant artifact |
-
-   Example offers:
-   - "That's a design decision. Capture it in design.md?"
-   - "This is a new requirement. Add it to specs?"
-   - "This changes scope. Update the proposal?"
-
-4. **The user decides** - Offer and move on. Don't pressure. Don't auto-capture.
-
----
-
-## What You Don't Have To Do
-
-- Follow a script
-- Ask the same questions every time
-- Produce a specific artifact
-- Reach a conclusion
-- Stay on topic if a tangent is valuable
-- Be brief (this is thinking time)
-
----
-
-## Handling Different Entry Points
-
-**User brings a vague idea:**
-```
-User: I'm thinking about adding real-time collaboration
-
-You: Real-time collab is a big space. Let me think about this...
-
-      COLLABORATION SPECTRUM
-      ════════════════════════════════════════════
-
-      Awareness          Coordination         Sync
-          │                   │                 │
-          ▼                   ▼                 ▼
-      ┌────────┐         ┌────────┐        ┌────────┐
-      │Presence│         │Cursors │        │  CRDT  │
-      │  "3    │         │ Multi  │        │Conflict│
-      │online" │         │ select │        │  free  │
-      └────────┘         └────────┘        └────────┘
-          │                   │                 │
-       trivial            moderate           complex
-
-      Where's your head at?
-```
-
-**User brings a specific problem:**
-```
-User: The auth system is a mess
-
-You: [reads codebase]
-
-     ┌─────────────────────────────────────────────┐
-     │              CURRENT AUTH FLOW              │
-     └─────────────────────────────────────────────┘
-                        │
-          ┌─────────────┼─────────────┐
-          ▼             ▼             ▼
-     ┌─────────┐  ┌─────────┐  ┌─────────┐
-     │ Google  │  │  GitHub │  │  Email  │
-     │  OAuth  │  │  OAuth  │  │  Magic  │
-     └────┬────┘  └────┬────┘  └────┬────┘
-          │             │             │
-          └─────────────┼─────────────┘
-                        ▼
-                  ┌───────────┐
-                  │  Session  │
-                  └─────┬─────┘
-                        │
-                        ▼
-                  ┌───────────┐
-                  │   Perms   │
-                  └───────────┘
-
-     I see three tangles. Which one's burning?
-```
-
-**User is stuck mid-implementation:**
-```
-User: /opsx:explore add-auth-system
-      The OAuth integration is more complex than expected
-
-You: [reads change artifacts]
-
-     You're on task 4: "Implement OAuth flow"
-
-     Let me trace what's involved...
-
-     [draws diagram, explores options, suggests paths]
-
-     Want to update the design to reflect this?
-     Or add a spike task to investigate?
-```
-
-**User wants to compare options:**
-```
-User: Should we use Postgres or SQLite?
-
-You: Generic answer is boring. What's the context?
-
-User: A CLI tool that tracks local dev environments
-
-You: That changes everything.
-
-     ┌─────────────────────────────────────────────────┐
-     │         CLI TOOL DATA STORAGE                  │
-     └─────────────────────────────────────────────────┘
-
-     Key constraints:
-     • No daemon running
-     • Must work offline
-     • Single user
-
-                  SQLite          Postgres
-     Deployment   embedded ✓      needs server ✗
-     Offline      yes ✓           no ✗
-     Single file  yes ✓           no ✗
-
-     SQLite. Not even close.
-
-     Unless... is there a sync component?
-```
-
----
-
-## Ending Discovery
-
-There's no required ending. Discovery might:
-
-- **Flow into action**: "Ready to start? /opsx:new or /opsx:ff"
-- **Result in artifact updates**: "Updated design.md with these decisions"
-- **Just provide clarity**: User has what they need, moves on
-- **Continue later**: "We can pick this up anytime"
-
-When it feels like things are crystallizing, you might summarize:
-
-```
-## What We Figured Out
-
-**The problem**: [crystallized understanding]
-
-**The approach**: [if one emerged]
-
-**Open questions**: [if any remain]
-
-**Next steps** (if ready):
-- Create a change: /opsx:new <name>
-- Fast-forward to tasks: /opsx:ff <name>
-- Keep exploring: just keep talking
-```
-
-But this summary is optional. Sometimes the thinking IS the value.
-
----
-
-## Guardrails
-
-- **Don't implement** - Never write code or implement features. Creating OpenSpec artifacts is fine, writing application code is not.
-- **Don't fake understanding** - If something is unclear, dig deeper
-- **Don't rush** - Discovery is thinking time, not task time
-- **Don't force structure** - Let patterns emerge naturally
-- **Don't auto-capture** - Offer to save insights, don't just do it
-- **Do visualize** - A good diagram is worth many paragraphs
-- **Do explore the codebase** - Ground discussions in reality
-- **Do question assumptions** - Including the user's and your own
diff --git a/.claude/skills/openspec-ff-change/SKILL.md b/.claude/skills/openspec-ff-change/SKILL.md
deleted file mode 100644
index 64f058c..0000000
--- a/.claude/skills/openspec-ff-change/SKILL.md
+++ /dev/null
@@ -1,101 +0,0 @@
----
-name: openspec-ff-change
-description: Fast-forward through OpenSpec artifact creation. Use when the user wants to quickly create all artifacts needed for implementation without stepping through each one individually.
-license: MIT
-compatibility: Requires openspec CLI.
-metadata:
-  author: openspec
-  version: "1.0"
-  generatedBy: "1.0.2"
----
-
-Fast-forward through artifact creation - generate everything needed to start implementation in one go.
-
-**Input**: The user's request should include a change name (kebab-case) OR a description of what they want to build.
-
-**Steps**
-
-1. **If no clear input provided, ask what they want to build**
-
-   Use the **AskUserQuestion tool** (open-ended, no preset options) to ask:
-   > "What change do you want to work on? Describe what you want to build or fix."
-
-   From their description, derive a kebab-case name (e.g., "add user authentication" → `add-user-auth`).
-
-   **IMPORTANT**: Do NOT proceed without understanding what the user wants to build.
-
-2. **Create the change directory**
-   ```bash
-   openspec new change "<name>"
-   ```
-   This creates a scaffolded change at `openspec/changes/<name>/`.
-
-3. **Get the artifact build order**
-   ```bash
-   openspec status --change "<name>" --json
-   ```
-   Parse the JSON to get:
-   - `applyRequires`: array of artifact IDs needed before implementation (e.g., `["tasks"]`)
-   - `artifacts`: list of all artifacts with their status and dependencies
-
-4. **Create artifacts in sequence until apply-ready**
-
-   Use the **TodoWrite tool** to track progress through the artifacts.
-
-   Loop through artifacts in dependency order (artifacts with no pending dependencies first):
-
-   a. **For each artifact that is `ready` (dependencies satisfied)**:
-      - Get instructions:
-        ```bash
-        openspec instructions <artifact-id> --change "<name>" --json
-        ```
-      - The instructions JSON includes:
-        - `context`: Project background (constraints for you - do NOT include in output)
-        - `rules`: Artifact-specific rules (constraints for you - do NOT include in output)
-        - `template`: The structure to use for your output file
-        - `instruction`: Schema-specific guidance for this artifact type
-        - `outputPath`: Where to write the artifact
-        - `dependencies`: Completed artifacts to read for context
-      - Read any completed dependency files for context
-      - Create the artifact file using `template` as the structure
-      - Apply `context` and `rules` as constraints - but do NOT copy them into the file
-      - Show brief progress: "✓ Created <artifact-id>"
-
-   b. **Continue until all `applyRequires` artifacts are complete**
-      - After creating each artifact, re-run `openspec status --change "<name>" --json`
-      - Check if every artifact ID in `applyRequires` has `status: "done"` in the artifacts array
-      - Stop when all `applyRequires` artifacts are done
-
-   c. **If an artifact requires user input** (unclear context):
-      - Use **AskUserQuestion tool** to clarify
-      - Then continue with creation
-
-5. **Show final status**
-   ```bash
-   openspec status --change "<name>"
-   ```
-
-**Output**
-
-After completing all artifacts, summarize:
-- Change name and location
-- List of artifacts created with brief descriptions
-- What's ready: "All artifacts created! Ready for implementation."
-- Prompt: "Run `/opsx:apply` or ask me to implement to start working on the tasks."
-
-**Artifact Creation Guidelines**
-
-- Follow the `instruction` field from `openspec instructions` for each artifact type
-- The schema defines what each artifact should contain - follow it
-- Read dependency artifacts for context before creating new ones
-- Use `template` as the structure for your output file - fill in its sections
-- **IMPORTANT**: `context` and `rules` are constraints for YOU, not content for the file
-  - Do NOT copy `<context>`, `<rules>`, `<project_context>` blocks into the artifact
-  - These guide what you write, but should never appear in the output
-
-**Guardrails**
-- Create ALL artifacts needed for implementation (as defined by schema's `apply.requires`)
-- Always read dependency artifacts before creating a new one
-- If context is critically unclear, ask the user - but prefer making reasonable decisions to keep momentum
-- If a change with that name already exists, suggest continuing that change instead
-- Verify each artifact file exists after writing before proceeding to next
diff --git a/.claude/skills/openspec-new-change/SKILL.md b/.claude/skills/openspec-new-change/SKILL.md
deleted file mode 100644
index 53d96b9..0000000
--- a/.claude/skills/openspec-new-change/SKILL.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-name: openspec-new-change
-description: Start a new OpenSpec change using the experimental artifact workflow. Use when the user wants to create a new feature, fix, or modification with a structured step-by-step approach.
-license: MIT
-compatibility: Requires openspec CLI.
-metadata:
-  author: openspec
-  version: "1.0"
-  generatedBy: "1.0.2"
----
-
-Start a new change using the experimental artifact-driven approach.
-
-**Input**: The user's request should include a change name (kebab-case) OR a description of what they want to build.
-
-**Steps**
-
-1. **If no clear input provided, ask what they want to build**
-
-   Use the **AskUserQuestion tool** (open-ended, no preset options) to ask:
-   > "What change do you want to work on? Describe what you want to build or fix."
-
-   From their description, derive a kebab-case name (e.g., "add user authentication" → `add-user-auth`).
-
-   **IMPORTANT**: Do NOT proceed without understanding what the user wants to build.
-
-2. **Determine the workflow schema**
-
-   Use the default schema (omit `--schema`) unless the user explicitly requests a different workflow.
-
-   **Use a different schema only if the user mentions:**
-   - A specific schema name → use `--schema <name>`
-   - "show workflows" or "what workflows" → run `openspec schemas --json` and let them choose
-
-   **Otherwise**: Omit `--schema` to use the default.
-
-3. **Create the change directory**
-   ```bash
-   openspec new change "<name>"
-   ```
-   Add `--schema <name>` only if the user requested a specific workflow.
-   This creates a scaffolded change at `openspec/changes/<name>/` with the selected schema.
-
-4. **Show the artifact status**
-   ```bash
-   openspec status --change "<name>"
-   ```
-   This shows which artifacts need to be created and which are ready (dependencies satisfied).
-
-5. **Get instructions for the first artifact**
-   The first artifact depends on the schema (e.g., `proposal` for spec-driven).
-   Check the status output to find the first artifact with status "ready".
-   ```bash
-   openspec instructions <first-artifact-id> --change "<name>"
-   ```
-   This outputs the template and context for creating the first artifact.
-
-6. **STOP and wait for user direction**
-
-**Output**
-
-After completing the steps, summarize:
-- Change name and location
-- Schema/workflow being used and its artifact sequence
-- Current status (0/N artifacts complete)
-- The template for the first artifact
-- Prompt: "Ready to create the first artifact? Just describe what this change is about and I'll draft it, or ask me to continue."
-
-**Guardrails**
-- Do NOT create any artifacts yet - just show the instructions
-- Do NOT advance beyond showing the first artifact template
-- If the name is invalid (not kebab-case), ask for a valid name
-- If a change with that name already exists, suggest continuing that change instead
-- Pass --schema if using a non-default workflow
diff --git a/.claude/skills/openspec-onboard/SKILL.md b/.claude/skills/openspec-onboard/SKILL.md
deleted file mode 100644
index 40080aa..0000000
--- a/.claude/skills/openspec-onboard/SKILL.md
+++ /dev/null
@@ -1,529 +0,0 @@
----
-name: openspec-onboard
-description: Guided onboarding for OpenSpec - walk through a complete workflow cycle with narration and real codebase work.
-license: MIT
-compatibility: Requires openspec CLI.
-metadata:
-  author: openspec
-  version: "1.0"
-  generatedBy: "1.0.2"
----
-
-Guide the user through their first complete OpenSpec workflow cycle. This is a teaching experience—you'll do real work in their codebase while explaining each step.
-
----
-
-## Preflight
-
-Before starting, check if OpenSpec is initialized:
-
-```bash
-openspec status --json 2>&1 || echo "NOT_INITIALIZED"
-```
-
-**If not initialized:**
-> OpenSpec isn't set up in this project yet. Run `openspec init` first, then come back to `/opsx:onboard`.
-
-Stop here if not initialized.
-
----
-
-## Phase 1: Welcome
-
-Display:
-
-```
-## Welcome to OpenSpec!
-
-I'll walk you through a complete change cycle—from idea to implementation—using a real task in your codebase. Along the way, you'll learn the workflow by doing it.
-
-**What we'll do:**
-1. Pick a small, real task in your codebase
-2. Explore the problem briefly
-3. Create a change (the container for our work)
-4. Build the artifacts: proposal → specs → design → tasks
-5. Implement the tasks
-6. Archive the completed change
-
-**Time:** ~15-20 minutes
-
-Let's start by finding something to work on.
-```
-
----
-
-## Phase 2: Task Selection
-
-### Codebase Analysis
-
-Scan the codebase for small improvement opportunities. Look for:
-
-1. **TODO/FIXME comments** - Search for `TODO`, `FIXME`, `HACK`, `XXX` in code files
-2. **Missing error handling** - `catch` blocks that swallow errors, risky operations without try-catch
-3. **Functions without tests** - Cross-reference `src/` with test directories
-4. **Type issues** - `any` types in TypeScript files (`: any`, `as any`)
-5. **Debug artifacts** - `console.log`, `console.debug`, `debugger` statements in non-debug code
-6. **Missing validation** - User input handlers without validation
-
-Also check recent git activity:
-```bash
-git log --oneline -10 2>/dev/null || echo "No git history"
-```
-
-### Present Suggestions
-
-From your analysis, present 3-4 specific suggestions:
-
-```
-## Task Suggestions
-
-Based on scanning your codebase, here are some good starter tasks:
-
-**1. [Most promising task]**
-   Location: `src/path/to/file.ts:42`
-   Scope: ~1-2 files, ~20-30 lines
-   Why it's good: [brief reason]
-
-**2. [Second task]**
-   Location: `src/another/file.ts`
-   Scope: ~1 file, ~15 lines
-   Why it's good: [brief reason]
-
-**3. [Third task]**
-   Location: [location]
-   Scope: [estimate]
-   Why it's good: [brief reason]
-
-**4. Something else?**
-   Tell me what you'd like to work on.
-
-Which task interests you? (Pick a number or describe your own)
-```
-
-**If nothing found:** Fall back to asking what the user wants to build:
-> I didn't find obvious quick wins in your codebase. What's something small you've been meaning to add or fix?
-
-### Scope Guardrail
-
-If the user picks or describes something too large (major feature, multi-day work):
-
-```
-That's a valuable task, but it's probably larger than ideal for your first OpenSpec run-through.
-
-For learning the workflow, smaller is better—it lets you see the full cycle without getting stuck in implementation details.
-
-**Options:**
-1. **Slice it smaller** - What's the smallest useful piece of [their task]? Maybe just [specific slice]?
-2. **Pick something else** - One of the other suggestions, or a different small task?
-3. **Do it anyway** - If you really want to tackle this, we can. Just know it'll take longer.
-
-What would you prefer?
-```
-
-Let the user override if they insist—this is a soft guardrail.
-
----
-
-## Phase 3: Explore Demo
-
-Once a task is selected, briefly demonstrate explore mode:
-
-```
-Before we create a change, let me quickly show you **explore mode**—it's how you think through problems before committing to a direction.
-```
-
-Spend 1-2 minutes investigating the relevant code:
-- Read the file(s) involved
-- Draw a quick ASCII diagram if it helps
-- Note any considerations
-
-```
-## Quick Exploration
-
-[Your brief analysis—what you found, any considerations]
-
-┌─────────────────────────────────────────┐
-│   [Optional: ASCII diagram if helpful]  │
-└─────────────────────────────────────────┘
-
-Explore mode (`/opsx:explore`) is for this kind of thinking—investigating before implementing. You can use it anytime you need to think through a problem.
-
-Now let's create a change to hold our work.
-```
-
-**PAUSE** - Wait for user acknowledgment before proceeding.
-
----
-
-## Phase 4: Create the Change
-
-**EXPLAIN:**
-```
-## Creating a Change
-
-A "change" in OpenSpec is a container for all the thinking and planning around a piece of work. It lives in `openspec/changes/<name>/` and holds your artifacts—proposal, specs, design, tasks.
-
-Let me create one for our task.
-```
-
-**DO:** Create the change with a derived kebab-case name:
-```bash
-openspec new change "<derived-name>"
-```
-
-**SHOW:**
-```
-Created: `openspec/changes/<name>/`
-
-The folder structure:
-```
-openspec/changes/<name>/
-├── proposal.md    ← Why we're doing this (empty, we'll fill it)
-├── design.md      ← How we'll build it (empty)
-├── specs/         ← Detailed requirements (empty)
-└── tasks.md       ← Implementation checklist (empty)
-```
-
-Now let's fill in the first artifact—the proposal.
-```
-
----
-
-## Phase 5: Proposal
-
-**EXPLAIN:**
-```
-## The Proposal
-
-The proposal captures **why** we're making this change and **what** it involves at a high level. It's the "elevator pitch" for the work.
-
-I'll draft one based on our task.
-```
-
-**DO:** Draft the proposal content (don't save yet):
-
-```
-Here's a draft proposal:
-
----
-
-## Why
-
-[1-2 sentences explaining the problem/opportunity]
-
-## What Changes
-
-[Bullet points of what will be different]
-
-## Capabilities
-
-### New Capabilities
-- `<capability-name>`: [brief description]
-
-### Modified Capabilities
-<!-- If modifying existing behavior -->
-
-## Impact
-
-- `src/path/to/file.ts`: [what changes]
-- [other files if applicable]
-
----
-
-Does this capture the intent? I can adjust before we save it.
-```
-
-**PAUSE** - Wait for user approval/feedback.
-
-After approval, save the proposal:
-```bash
-openspec instructions proposal --change "<name>" --json
-```
-Then write the content to `openspec/changes/<name>/proposal.md`.
-
-```
-Proposal saved. This is your "why" document—you can always come back and refine it as understanding evolves.
-
-Next up: specs.
-```
-
----
-
-## Phase 6: Specs
-
-**EXPLAIN:**
-```
-## Specs
-
-Specs define **what** we're building in precise, testable terms. They use a requirement/scenario format that makes expected behavior crystal clear.
-
-For a small task like this, we might only need one spec file.
-```
-
-**DO:** Create the spec file:
-```bash
-mkdir -p openspec/changes/<name>/specs/<capability-name>
-```
-
-Draft the spec content:
-
-```
-Here's the spec:
-
----
-
-## ADDED Requirements
-
-### Requirement: <Name>
-
-<Description of what the system should do>
-
-#### Scenario: <Scenario name>
-
-- **WHEN** <trigger condition>
-- **THEN** <expected outcome>
-- **AND** <additional outcome if needed>
-
----
-
-This format—WHEN/THEN/AND—makes requirements testable. You can literally read them as test cases.
-```
-
-Save to `openspec/changes/<name>/specs/<capability>/spec.md`.
-
----
-
-## Phase 7: Design
-
-**EXPLAIN:**
-```
-## Design
-
-The design captures **how** we'll build it—technical decisions, tradeoffs, approach.
-
-For small changes, this might be brief. That's fine—not every change needs deep design discussion.
-```
-
-**DO:** Draft design.md:
-
-```
-Here's the design:
-
----
-
-## Context
-
-[Brief context about the current state]
-
-## Goals / Non-Goals
-
-**Goals:**
-- [What we're trying to achieve]
-
-**Non-Goals:**
-- [What's explicitly out of scope]
-
-## Decisions
-
-### Decision 1: [Key decision]
-
-[Explanation of approach and rationale]
-
----
-
-For a small task, this captures the key decisions without over-engineering.
-```
-
-Save to `openspec/changes/<name>/design.md`.
-
----
-
-## Phase 8: Tasks
-
-**EXPLAIN:**
-```
-## Tasks
-
-Finally, we break the work into implementation tasks—checkboxes that drive the apply phase.
-
-These should be small, clear, and in logical order.
-```
-
-**DO:** Generate tasks based on specs and design:
-
-```
-Here are the implementation tasks:
-
----
-
-## 1. [Category or file]
-
-- [ ] 1.1 [Specific task]
-- [ ] 1.2 [Specific task]
-
-## 2. Verify
-
-- [ ] 2.1 [Verification step]
-
----
-
-Each checkbox becomes a unit of work in the apply phase. Ready to implement?
-```
-
-**PAUSE** - Wait for user to confirm they're ready to implement.
-
-Save to `openspec/changes/<name>/tasks.md`.
-
----
-
-## Phase 9: Apply (Implementation)
-
-**EXPLAIN:**
-```
-## Implementation
-
-Now we implement each task, checking them off as we go. I'll announce each one and occasionally note how the specs/design informed the approach.
-```
-
-**DO:** For each task:
-
-1. Announce: "Working on task N: [description]"
-2. Implement the change in the codebase
-3. Reference specs/design naturally: "The spec says X, so I'm doing Y"
-4. Mark complete in tasks.md: `- [ ]` → `- [x]`
-5. Brief status: "✓ Task N complete"
-
-Keep narration light—don't over-explain every line of code.
-
-After all tasks:
-
-```
-## Implementation Complete
-
-All tasks done:
-- [x] Task 1
-- [x] Task 2
-- [x] ...
-
-The change is implemented! One more step—let's archive it.
-```
-
----
-
-## Phase 10: Archive
-
-**EXPLAIN:**
-```
-## Archiving
-
-When a change is complete, we archive it. This moves it from `openspec/changes/` to `openspec/changes/archive/YYYY-MM-DD-<name>/`.
-
-Archived changes become your project's decision history—you can always find them later to understand why something was built a certain way.
-```
-
-**DO:**
-```bash
-openspec archive "<name>"
-```
-
-**SHOW:**
-```
-Archived to: `openspec/changes/archive/YYYY-MM-DD-<name>/`
-
-The change is now part of your project's history. The code is in your codebase, the decision record is preserved.
-```
-
----
-
-## Phase 11: Recap & Next Steps
-
-```
-## Congratulations!
-
-You just completed a full OpenSpec cycle:
-
-1. **Explore** - Thought through the problem
-2. **New** - Created a change container
-3. **Proposal** - Captured WHY
-4. **Specs** - Defined WHAT in detail
-5. **Design** - Decided HOW
-6. **Tasks** - Broke it into steps
-7. **Apply** - Implemented the work
-8. **Archive** - Preserved the record
-
-This same rhythm works for any size change—a small fix or a major feature.
-
----
-
-## Command Reference
-
-| Command | What it does |
-|---------|--------------|
-| `/opsx:explore` | Think through problems before/during work |
-| `/opsx:new` | Start a new change, step through artifacts |
-| `/opsx:ff` | Fast-forward: create all artifacts at once |
-| `/opsx:continue` | Continue working on an existing change |
-| `/opsx:apply` | Implement tasks from a change |
-| `/opsx:verify` | Verify implementation matches artifacts |
-| `/opsx:archive` | Archive a completed change |
-
----
-
-## What's Next?
-
-Try `/opsx:new` or `/opsx:ff` on something you actually want to build. You've got the rhythm now!
-```
-
----
-
-## Graceful Exit Handling
-
-### User wants to stop mid-way
-
-If the user says they need to stop, want to pause, or seem disengaged:
-
-```
-No problem! Your change is saved at `openspec/changes/<name>/`.
-
-To pick up where we left off later:
-- `/opsx:continue <name>` - Resume artifact creation
-- `/opsx:apply <name>` - Jump to implementation (if tasks exist)
-
-The work won't be lost. Come back whenever you're ready.
-```
-
-Exit gracefully without pressure.
-
-### User just wants command reference
-
-If the user says they just want to see the commands or skip the tutorial:
-
-```
-## OpenSpec Quick Reference
-
-| Command | What it does |
-|---------|--------------|
-| `/opsx:explore` | Think through problems (no code changes) |
-| `/opsx:new <name>` | Start a new change, step by step |
-| `/opsx:ff <name>` | Fast-forward: all artifacts at once |
-| `/opsx:continue <name>` | Continue an existing change |
-| `/opsx:apply <name>` | Implement tasks |
-| `/opsx:verify <name>` | Verify implementation |
-| `/opsx:archive <name>` | Archive when done |
-
-Try `/opsx:new` to start your first change, or `/opsx:ff` if you want to move fast.
-```
-
-Exit gracefully.
-
----
-
-## Guardrails
-
-- **Follow the EXPLAIN → DO → SHOW → PAUSE pattern** at key transitions (after explore, after proposal draft, after tasks, after archive)
-- **Keep narration light** during implementation—teach without lecturing
-- **Don't skip phases** even if the change is small—the goal is teaching the workflow
-- **Pause for acknowledgment** at marked points, but don't over-pause
-- **Handle exits gracefully**—never pressure the user to continue
-- **Use real codebase tasks**—don't simulate or use fake examples
-- **Adjust scope gently**—guide toward smaller tasks but respect user choice
diff --git a/.claude/skills/openspec-sync-specs/SKILL.md b/.claude/skills/openspec-sync-specs/SKILL.md
deleted file mode 100644
index 632681c..0000000
--- a/.claude/skills/openspec-sync-specs/SKILL.md
+++ /dev/null
@@ -1,138 +0,0 @@
----
-name: openspec-sync-specs
-description: Sync delta specs from a change to main specs. Use when the user wants to update main specs with changes from a delta spec, without archiving the change.
-license: MIT
-compatibility: Requires openspec CLI.
-metadata:
-  author: openspec
-  version: "1.0"
-  generatedBy: "1.0.2"
----
-
-Sync delta specs from a change to main specs.
-
-This is an **agent-driven** operation - you will read delta specs and directly edit main specs to apply the changes. This allows intelligent merging (e.g., adding a scenario without copying the entire requirement).
-
-**Input**: Optionally specify a change name. If omitted, check if it can be inferred from conversation context. If vague or ambiguous you MUST prompt for available changes.
-
-**Steps**
-
-1. **If no change name provided, prompt for selection**
-
-   Run `openspec list --json` to get available changes. Use the **AskUserQuestion tool** to let the user select.
-
-   Show changes that have delta specs (under `specs/` directory).
-
-   **IMPORTANT**: Do NOT guess or auto-select a change. Always let the user choose.
-
-2. **Find delta specs**
-
-   Look for delta spec files in `openspec/changes/<name>/specs/*/spec.md`.
-
-   Each delta spec file contains sections like:
-   - `## ADDED Requirements` - New requirements to add
-   - `## MODIFIED Requirements` - Changes to existing requirements
-   - `## REMOVED Requirements` - Requirements to remove
-   - `## RENAMED Requirements` - Requirements to rename (FROM:/TO: format)
-
-   If no delta specs found, inform user and stop.
-
-3. **For each delta spec, apply changes to main specs**
-
-   For each capability with a delta spec at `openspec/changes/<name>/specs/<capability>/spec.md`:
-
-   a. **Read the delta spec** to understand the intended changes
-
-   b. **Read the main spec** at `openspec/specs/<capability>/spec.md` (may not exist yet)
-
-   c. **Apply changes intelligently**:
-
-      **ADDED Requirements:**
-      - If requirement doesn't exist in main spec → add it
-      - If requirement already exists → update it to match (treat as implicit MODIFIED)
-
-      **MODIFIED Requirements:**
-      - Find the requirement in main spec
-      - Apply the changes - this can be:
-        - Adding new scenarios (don't need to copy existing ones)
-        - Modifying existing scenarios
-        - Changing the requirement description
-      - Preserve scenarios/content not mentioned in the delta
-
-      **REMOVED Requirements:**
-      - Remove the entire requirement block from main spec
-
-      **RENAMED Requirements:**
-      - Find the FROM requirement, rename to TO
-
-   d. **Create new main spec** if capability doesn't exist yet:
-      - Create `openspec/specs/<capability>/spec.md`
-      - Add Purpose section (can be brief, mark as TBD)
-      - Add Requirements section with the ADDED requirements
-
-4. **Show summary**
-
-   After applying all changes, summarize:
-   - Which capabilities were updated
-   - What changes were made (requirements added/modified/removed/renamed)
-
-**Delta Spec Format Reference**
-
-```markdown
-## ADDED Requirements
-
-### Requirement: New Feature
-The system SHALL do something new.
-
-#### Scenario: Basic case
-- **WHEN** user does X
-- **THEN** system does Y
-
-## MODIFIED Requirements
-
-### Requirement: Existing Feature
-#### Scenario: New scenario to add
-- **WHEN** user does A
-- **THEN** system does B
-
-## REMOVED Requirements
-
-### Requirement: Deprecated Feature
-
-## RENAMED Requirements
-
-- FROM: `### Requirement: Old Name`
-- TO: `### Requirement: New Name`
-```
-
-**Key Principle: Intelligent Merging**
-
-Unlike programmatic merging, you can apply **partial updates**:
-- To add a scenario, just include that scenario under MODIFIED - don't copy existing scenarios
-- The delta represents *intent*, not a wholesale replacement
-- Use your judgment to merge changes sensibly
-
-**Output On Success**
-
-```
-## Specs Synced: <change-name>
-
-Updated main specs:
-
-**<capability-1>**:
-- Added requirement: "New Feature"
-- Modified requirement: "Existing Feature" (added 1 scenario)
-
-**<capability-2>**:
-- Created new spec file
-- Added requirement: "Another Feature"
-
-Main specs are now updated. The change remains active - archive when implementation is complete.
-```
-
-**Guardrails**
-- Read both delta and main specs before making changes
-- Preserve existing content not mentioned in delta
-- If something is unclear, ask for clarification
-- Show what you're changing as you go
-- The operation should be idempotent - running twice should give same result
diff --git a/.claude/skills/openspec-verify-change/SKILL.md b/.claude/skills/openspec-verify-change/SKILL.md
deleted file mode 100644
index 21cbc50..0000000
--- a/.claude/skills/openspec-verify-change/SKILL.md
+++ /dev/null
@@ -1,168 +0,0 @@
----
-name: openspec-verify-change
-description: Verify implementation matches change artifacts. Use when the user wants to validate that implementation is complete, correct, and coherent before archiving.
-license: MIT
-compatibility: Requires openspec CLI.
-metadata:
-  author: openspec
-  version: "1.0"
-  generatedBy: "1.0.2"
----
-
-Verify that an implementation matches the change artifacts (specs, tasks, design).
-
-**Input**: Optionally specify a change name. If omitted, check if it can be inferred from conversation context. If vague or ambiguous you MUST prompt for available changes.
-
-**Steps**
-
-1. **If no change name provided, prompt for selection**
-
-   Run `openspec list --json` to get available changes. Use the **AskUserQuestion tool** to let the user select.
-
-   Show changes that have implementation tasks (tasks artifact exists).
-   Include the schema used for each change if available.
-   Mark changes with incomplete tasks as "(In Progress)".
-
-   **IMPORTANT**: Do NOT guess or auto-select a change. Always let the user choose.
-
-2. **Check status to understand the schema**
-   ```bash
-   openspec status --change "<name>" --json
-   ```
-   Parse the JSON to understand:
-   - `schemaName`: The workflow being used (e.g., "spec-driven")
-   - Which artifacts exist for this change
-
-3. **Get the change directory and load artifacts**
-
-   ```bash
-   openspec instructions apply --change "<name>" --json
-   ```
-
-   This returns the change directory and context files. Read all available artifacts from `contextFiles`.
-
-4. **Initialize verification report structure**
-
-   Create a report structure with three dimensions:
-   - **Completeness**: Track tasks and spec coverage
-   - **Correctness**: Track requirement implementation and scenario coverage
-   - **Coherence**: Track design adherence and pattern consistency
-
-   Each dimension can have CRITICAL, WARNING, or SUGGESTION issues.
-
-5. **Verify Completeness**
-
-   **Task Completion**:
-   - If tasks.md exists in contextFiles, read it
-   - Parse checkboxes: `- [ ]` (incomplete) vs `- [x]` (complete)
-   - Count complete vs total tasks
-   - If incomplete tasks exist:
-     - Add CRITICAL issue for each incomplete task
-     - Recommendation: "Complete task: <description>" or "Mark as done if already implemented"
-
-   **Spec Coverage**:
-   - If delta specs exist in `openspec/changes/<name>/specs/`:
-     - Extract all requirements (marked with "### Requirement:")
-     - For each requirement:
-       - Search codebase for keywords related to the requirement
-       - Assess if implementation likely exists
-     - If requirements appear unimplemented:
-       - Add CRITICAL issue: "Requirement not found: <requirement name>"
-       - Recommendation: "Implement requirement X: <description>"
-
-6. **Verify Correctness**
-
-   **Requirement Implementation Mapping**:
-   - For each requirement from delta specs:
-     - Search codebase for implementation evidence
-     - If found, note file paths and line ranges
-     - Assess if implementation matches requirement intent
-     - If divergence detected:
-       - Add WARNING: "Implementation may diverge from spec: <details>"
-       - Recommendation: "Review <file>:<lines> against requirement X"
-
-   **Scenario Coverage**:
-   - For each scenario in delta specs (marked with "#### Scenario:"):
-     - Check if conditions are handled in code
-     - Check if tests exist covering the scenario
-     - If scenario appears uncovered:
-       - Add WARNING: "Scenario not covered: <scenario name>"
-       - Recommendation: "Add test or implementation for scenario: <description>"
-
-7. **Verify Coherence**
-
-   **Design Adherence**:
-   - If design.md exists in contextFiles:
-     - Extract key decisions (look for sections like "Decision:", "Approach:", "Architecture:")
-     - Verify implementation follows those decisions
-     - If contradiction detected:
-       - Add WARNING: "Design decision not followed: <decision>"
-       - Recommendation: "Update implementation or revise design.md to match reality"
-   - If no design.md: Skip design adherence check, note "No design.md to verify against"
-
-   **Code Pattern Consistency**:
-   - Review new code for consistency with project patterns
-   - Check file naming, directory structure, coding style
-   - If significant deviations found:
-     - Add SUGGESTION: "Code pattern deviation: <details>"
-     - Recommendation: "Consider following project pattern: <example>"
-
-8. **Generate Verification Report**
-
-   **Summary Scorecard**:
-   ```
-   ## Verification Report: <change-name>
-
-   ### Summary
-   | Dimension    | Status           |
-   |--------------|------------------|
-   | Completeness | X/Y tasks, N reqs|
-   | Correctness  | M/N reqs covered |
-   | Coherence    | Followed/Issues  |
-   ```
-
-   **Issues by Priority**:
-
-   1. **CRITICAL** (Must fix before archive):
-      - Incomplete tasks
-      - Missing requirement implementations
-      - Each with specific, actionable recommendation
-
-   2. **WARNING** (Should fix):
-      - Spec/design divergences
-      - Missing scenario coverage
-      - Each with specific recommendation
-
-   3. **SUGGESTION** (Nice to fix):
-      - Pattern inconsistencies
-      - Minor improvements
-      - Each with specific recommendation
-
-   **Final Assessment**:
-   - If CRITICAL issues: "X critical issue(s) found. Fix before archiving."
-   - If only warnings: "No critical issues. Y warning(s) to consider. Ready for archive (with noted improvements)."
-   - If all clear: "All checks passed. Ready for archive."
-
-**Verification Heuristics**
-
-- **Completeness**: Focus on objective checklist items (checkboxes, requirements list)
-- **Correctness**: Use keyword search, file path analysis, reasonable inference - don't require perfect certainty
-- **Coherence**: Look for glaring inconsistencies, don't nitpick style
-- **False Positives**: When uncertain, prefer SUGGESTION over WARNING, WARNING over CRITICAL
-- **Actionability**: Every issue must have a specific recommendation with file/line references where applicable
-
-**Graceful Degradation**
-
-- If only tasks.md exists: verify task completion only, skip spec/design checks
-- If tasks + specs exist: verify completeness and correctness, skip design
-- If full artifacts: verify all three dimensions
-- Always note which checks were skipped and why
-
-**Output Format**
-
-Use clear markdown with:
-- Table for summary scorecard
-- Grouped lists for issues (CRITICAL/WARNING/SUGGESTION)
-- Code references in format: `file.ts:123`
-- Specific, actionable recommendations
-- No vague suggestions like "consider reviewing"
diff --git a/.gitignore b/.gitignore
index fabfd62..7be7485 100644
--- a/.gitignore
+++ b/.gitignore
@@ -85,3 +85,5 @@ db.sqlite3
 
 # OpenSpec
 openspec/
+.claude/skills/openspec-*/
+.claude/commands/opsx/
diff --git a/src/frontend/apps/calendars/package.json b/src/frontend/apps/calendars/package.json
index d833f84..c50d21d 100644
--- a/src/frontend/apps/calendars/package.json
+++ b/src/frontend/apps/calendars/package.json
@@ -17,8 +17,8 @@
   },
   "dependencies": {
     "@event-calendar/core": "^5.2.3",
-    "@gouvfr-lasuite/cunningham-react": "4.1.0",
-    "@gouvfr-lasuite/ui-kit": "0.18.7",
+    "@gouvfr-lasuite/cunningham-react": "4.2.0",
+    "@gouvfr-lasuite/ui-kit": "0.19.6",
     "@tanstack/react-query": "5.90.10",
     "@tanstack/react-table": "8.21.3",
     "@viselect/react": "3.9.0",
diff --git a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/AttendeesInput.scss b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/AttendeesInput.scss
index 28c5f45..14b5a0b 100644
--- a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/AttendeesInput.scss
+++ b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/AttendeesInput.scss
@@ -1,155 +1,83 @@
 .attendees-input {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
 
   &__field {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
     width: 100%;
   }
 
-  &__participants {
+  &__add-btn {
     display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-  }
-
-  &__header {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-
-  &__title {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    margin: 0;
-    font-size: 1rem;
-    font-weight: 600;
-    color: #6a6a6a;
-  }
-
-  &__badge {
-    display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-width: 1.5rem;
-    height: 1.5rem;
-    padding: 0 0.375rem;
-    background-color: #6a6a6a;
-    color: white;
+    width: 2.5rem;
+    height: 2.5rem;
+    margin-top: 0.25rem;
+    padding: 0;
+    border: 1px solid var(--c--theme--colors--greyscale-200);
     border-radius: 4px;
-    font-size: 0.875rem;
-    font-weight: 600;
-  }
-
-  &__list {
-    display: flex;
-    flex-direction: column;
-    gap: 0;
-    background: white;
-    border: 1px solid #e0e0e0;
-    border-radius: 4px;
-    overflow: hidden;
-  }
-
-  &__item {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    padding: 0.875rem 1rem;
-    background: white;
-    border-bottom: 1px solid #f0f0f0;
-
-    &:last-child {
-      border-bottom: none;
-    }
+    background: transparent;
+    color: var(--c--theme--colors--greyscale-600);
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: all 0.15s;
 
     &:hover {
-      background-color: #fafafa;
-    }
-  }
-
-  &__status-icon {
-    font-size: 1.5rem;
-    flex-shrink: 0;
-
-    &--accepted {
-      color: #4caf50;
-    }
-
-    &--pending {
-      color: #9e9e9e;
-    }
-  }
-
-  &__item-content {
-    display: flex;
-    flex-direction: column;
-    gap: 0.125rem;
-    flex: 1;
-    min-width: 0;
-  }
-
-  &__item-name {
-    font-size: 0.9375rem;
-    font-weight: 500;
-    color: #161616;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &__item-email {
-    font-size: 0.875rem;
-    color: #6a6a6a;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &__organizer-badge {
-    display: inline-block;
-    padding: 0.125rem 0.5rem;
-    color: #6a6a6a;
-    border-radius: 3px;
-    font-size: 0.75rem;
-    font-weight: 500;
-    text-transform: capitalize;
-  }
-
-  &__action-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 2rem;
-    height: 2rem;
-    padding: 0;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    color: #6a6a6a;
-    border-radius: 4px;
-    transition: all 0.2s;
-    flex-shrink: 0;
-
-    &:hover:not(:disabled) {
-      background-color: #f0f0f0;
-      color: #161616;
-    }
-
-    &:disabled {
-      opacity: 0.3;
-      cursor: not-allowed;
-    }
-
-    &--remove:hover:not(:disabled) {
-      background-color: #fef0f0;
-      color: #d32f2f;
+      background-color: var(--c--theme--colors--greyscale-100);
+      color: var(--c--theme--colors--greyscale-900);
+      border-color: var(--c--theme--colors--greyscale-400);
     }
 
     .material-icons {
       font-size: 1.25rem;
     }
   }
+
+  &__pills {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  &__pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    cursor: default;
+
+    .material-icons {
+      font-size: 14px;
+    }
+  }
+
+  &__organizer-label {
+    font-size: 0.75rem;
+    opacity: 0.8;
+  }
+
+  &__pill-remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    margin-left: 0.125rem;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    color: inherit;
+    opacity: 0.6;
+    border-radius: 50%;
+    transition: opacity 0.15s;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    .material-icons {
+      font-size: 14px;
+    }
+  }
 }
diff --git a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/AttendeesInput.tsx b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/AttendeesInput.tsx
index b177f51..2a1f446 100644
--- a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/AttendeesInput.tsx
+++ b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/AttendeesInput.tsx
@@ -1,7 +1,8 @@
-import { useState, useCallback, type KeyboardEvent } from 'react';
-import { Input } from '@gouvfr-lasuite/cunningham-react';
-import { useTranslation } from 'react-i18next';
-import type { IcsAttendee, IcsOrganizer } from 'ts-ics';
+import { useState, useCallback, type KeyboardEvent } from "react";
+import { Input } from "@gouvfr-lasuite/cunningham-react";
+import { Badge } from "@gouvfr-lasuite/ui-kit";
+import { useTranslation } from "react-i18next";
+import type { IcsAttendee, IcsOrganizer } from "ts-ics";
 
 interface AttendeesInputProps {
   attendees: IcsAttendee[];
@@ -10,48 +11,55 @@ interface AttendeesInputProps {
   organizer?: IcsOrganizer;
 }
 
-// Validate email format
 const isValidEmail = (email: string): boolean => {
   const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
   return emailRegex.test(email);
 };
 
-// Get partstat display style
-const getPartstatStyle = (partstat?: string): { bgColor: string; textColor: string } => {
+type BadgeType =
+  | "accent"
+  | "neutral"
+  | "danger"
+  | "success"
+  | "warning"
+  | "info";
+
+const getBadgeType = (partstat?: string): BadgeType => {
   switch (partstat) {
-    case 'ACCEPTED':
-      return { bgColor: '#d4edda', textColor: '#155724' };
-    case 'DECLINED':
-      return { bgColor: '#f8d7da', textColor: '#721c24' };
-    case 'TENTATIVE':
-      return { bgColor: '#fff3cd', textColor: '#856404' };
-    default: // NEEDS-ACTION or undefined
-      return { bgColor: '#e9ecef', textColor: '#495057' };
+    case "ACCEPTED":
+      return "success";
+    case "DECLINED":
+      return "danger";
+    case "TENTATIVE":
+      return "warning";
+    default:
+      return "neutral";
   }
 };
 
-// Get partstat icon
 const getPartstatIcon = (partstat?: string): string => {
   switch (partstat) {
-    case 'ACCEPTED':
-      return 'check_circle';
-    case 'DECLINED':
-      return 'cancel';
-    case 'TENTATIVE':
-      return 'help';
+    case "ACCEPTED":
+      return "check_circle";
+    case "DECLINED":
+      return "cancel";
+    case "TENTATIVE":
+      return "help";
     default:
-      return 'schedule';
+      return "schedule";
   }
 };
 
-export function AttendeesInput({ attendees, onChange, organizerEmail, organizer }: AttendeesInputProps) {
+export function AttendeesInput({
+  attendees,
+  onChange,
+  organizerEmail,
+  organizer,
+}: AttendeesInputProps) {
   const { t } = useTranslation();
-  const [inputValue, setInputValue] = useState('');
+  const [inputValue, setInputValue] = useState("");
   const [error, setError] = useState<string | null>(null);
 
-  // Calculate total participants (organizer + attendees)
-  const totalParticipants = (organizer ? 1 : 0) + attendees.length;
-
   const addAttendee = useCallback(() => {
     const email = inputValue.trim().toLowerCase();
 
@@ -60,50 +68,57 @@ export function AttendeesInput({ attendees, onChange, organizerEmail, organizer
     }
 
     if (!isValidEmail(email)) {
-      setError(t('calendar.attendees.invalidEmail'));
+      setError(t("calendar.attendees.invalidEmail"));
       return;
     }
 
-    // Check if already in list
-    if (attendees.some(a => a.email.toLowerCase() === email)) {
-      setError(t('calendar.attendees.alreadyAdded'));
+    if (attendees.some((a) => a.email.toLowerCase() === email)) {
+      setError(t("calendar.attendees.alreadyAdded"));
       return;
     }
 
-    // Check if it's the organizer
     if (organizerEmail && email === organizerEmail.toLowerCase()) {
-      setError(t('calendar.attendees.cannotAddOrganizer'));
+      setError(t("calendar.attendees.cannotAddOrganizer"));
       return;
     }
 
     const newAttendee: IcsAttendee = {
       email,
-      partstat: 'NEEDS-ACTION',
+      partstat: "NEEDS-ACTION",
       rsvp: true,
-      role: 'REQ-PARTICIPANT',
+      role: "REQ-PARTICIPANT",
     };
 
     onChange([...attendees, newAttendee]);
-    setInputValue('');
+    setInputValue("");
     setError(null);
   }, [inputValue, attendees, onChange, organizerEmail, t]);
 
-  const removeAttendee = useCallback((emailToRemove: string) => {
-    onChange(attendees.filter(a => a.email !== emailToRemove));
-  }, [attendees, onChange]);
+  const removeAttendee = useCallback(
+    (emailToRemove: string) => {
+      onChange(attendees.filter((a) => a.email !== emailToRemove));
+    },
+    [attendees, onChange],
+  );
 
-  const handleKeyDown = useCallback((e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      addAttendee();
-    }
-  }, [addAttendee]);
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        addAttendee();
+      }
+    },
+    [addAttendee],
+  );
 
   return (
     <div className="attendees-input">
       <div className="attendees-input__field">
         <Input
-          label={t('calendar.attendees.label')}
+          label={t("calendar.attendees.label")}
+          hideLabel
+          placeholder={t("calendar.attendees.placeholder")}
+          variant="classic"
           fullWidth
           value={inputValue}
           onChange={(e) => {
@@ -111,101 +126,42 @@ export function AttendeesInput({ attendees, onChange, organizerEmail, organizer
             if (error) setError(null);
           }}
           onKeyDown={handleKeyDown}
-          state={error ? 'error' : 'default'}
+          state={error ? "error" : "default"}
           text={error || undefined}
-          icon={<span className="material-icons">person_add</span>}
         />
       </div>
 
-      {totalParticipants > 0 && (
-        <div className="attendees-input__participants">
-          <div className="attendees-input__header">
-            <h3 className="attendees-input__title">
-              {t('calendar.attendees.participants')}
-              <span className="attendees-input__badge">{totalParticipants}</span>
-            </h3>
-          </div>
-
-          <div className="attendees-input__list">
-            {/* Organizer */}
-            {organizer && (
-              <div className="attendees-input__item">
-                <span className="material-icons attendees-input__status-icon attendees-input__status-icon--accepted">
-                  check_circle
-                </span>
-                <div className="attendees-input__item-content">
-                  <span className="attendees-input__item-name">
-                    {organizer.name || organizer.email}
-                  </span>
-                  <span className="attendees-input__organizer-badge">
-                    {t('calendar.attendees.organizer')}
-                  </span>
-                </div>
-                <button
-                  type="button"
-                  className="attendees-input__action-btn"
-                  aria-label={t('calendar.attendees.viewProfile')}
-                >
-                  <span className="material-icons">person</span>
-                </button>
-                <button
-                  type="button"
-                  className="attendees-input__action-btn attendees-input__action-btn--remove"
-                  disabled
-                  aria-label={t('calendar.attendees.cannotRemoveOrganizer')}
-                >
-                  <span className="material-icons">close</span>
-                </button>
-              </div>
-            )}
-
-            {/* Attendees */}
-            {attendees.map((attendee) => {
-              const icon = getPartstatIcon(attendee.partstat);
-              const isAccepted = attendee.partstat === 'ACCEPTED';
-
-              return (
-                <div key={attendee.email} className="attendees-input__item">
-                  <span
-                    className={`material-icons attendees-input__status-icon ${
-                      isAccepted
-                        ? 'attendees-input__status-icon--accepted'
-                        : 'attendees-input__status-icon--pending'
-                    }`}
-                  >
-                    {icon}
-                  </span>
-                  <div className="attendees-input__item-content">
-                    <span className="attendees-input__item-name">
-                      {attendee.name || attendee.email}
-                    </span>
-                    {attendee.name && (
-                      <span className="attendees-input__item-email">
-                        &lt;{attendee.email}&gt;
-                      </span>
-                    )}
-                  </div>
-                  <button
-                    type="button"
-                    className="attendees-input__action-btn"
-                    aria-label={t('calendar.attendees.viewProfile')}
-                  >
-                    <span className="material-icons">person</span>
-                  </button>
-                  <button
-                    type="button"
-                    className="attendees-input__action-btn attendees-input__action-btn--remove"
-                    onClick={() => removeAttendee(attendee.email)}
-                    aria-label={t('calendar.attendees.remove')}
-                  >
-                    <span className="material-icons">close</span>
-                  </button>
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      )}
+      <div className="attendees-input__pills">
+        {organizer && attendees.length > 0 && (
+          <Badge type={"success"} className="attendees-input__pill">
+            <span className="material-icons">check_circle</span>
+            {organizer.email}
+            <span className="attendees-input__organizer-label">
+              ({t("calendar.attendees.organizer")})
+            </span>
+          </Badge>
+        )}
+        {attendees.map((attendee) => (
+          <Badge
+            key={attendee.email}
+            type={getBadgeType(attendee.partstat)}
+            className="attendees-input__pill"
+          >
+            <span className="material-icons">
+              {getPartstatIcon(attendee.partstat)}
+            </span>
+            {attendee.email}
+            <button
+              type="button"
+              className="attendees-input__pill-remove"
+              onClick={() => removeAttendee(attendee.email)}
+              aria-label={t("calendar.attendees.remove")}
+            >
+              <span className="material-icons">close</span>
+            </button>
+          </Badge>
+        ))}
+      </div>
     </div>
   );
 }
diff --git a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/EventModal.scss b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/EventModal.scss
index 381a78b..1e41166 100644
--- a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/EventModal.scss
+++ b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/EventModal.scss
@@ -1,90 +1,212 @@
 .event-modal {
-  &__feature-tag {
-    display: inline-flex;
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  &__more-options {
+    border-top: 1px solid #f1f3f4;
+    padding-top: 0.5rem;
+  }
+
+  &__more-options-header {
+    display: flex;
     align-items: center;
     gap: 0.5rem;
-    padding: 0.5rem 1rem;
-    border-radius: 2rem;
-    border: none;
-    background: #f1f3f4;
-    color: #5f6368;
+    padding: 0.5rem;
     cursor: pointer;
+    border-radius: 4px;
     font-size: 0.875rem;
-    transition: background-color 0.15s, color 0.15s;
+    color: #5f6368;
+    transition: background-color 0.15s;
 
     &:hover {
-      background: #e8eaeb;
-    }
-
-    &--active {
-      background: #e8f0fe;
-      color: #1a73e8;
-
-      &:hover {
-        background: #d2e3fc;
-      }
+      background-color: #f8f9fa;
     }
 
     .material-icons {
-      font-size: 1.125rem;
+      font-size: 20px;
+    }
+  }
+
+  &__more-options-content {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid #e8eaeb;
+    border-radius: 8px;
+    overflow: hidden;
+    margin-top: 0.5rem;
+  }
+}
+
+// DateTimeSection layout
+.datetime-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  &__inputs {
+    display: flex;
+    gap: 0.5rem;
+    flex: 1;
+  }
+
+  &__arrow {
+    align-self: center;
+    margin: 0 8px;
+    font-size: 20px;
+    color: #888;
+  }
+
+  &__allday {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    color: #5f6368;
+    cursor: pointer;
+  }
+}
+
+// VideoConferenceSection layout
+.video-conference-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+
+  &__link {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  &__actions {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  &__remove {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border: none;
+    background: transparent;
+    border-radius: 50%;
+    cursor: pointer;
+    color: #5f6368;
+    flex-shrink: 0;
+
+    &:hover {
+      background-color: #f1f3f4;
+    }
+
+    .material-icons {
+      font-size: 18px;
     }
   }
 }
 
-// Utility classes for layout
-.event-modal-layout {
+// RemindersSection layout
+.reminders-section {
   display: flex;
   flex-direction: column;
+  gap: 0.5rem;
 
-  &--row {
-    flex-direction: row;
-  }
-
-  &--wrap {
-    flex-wrap: wrap;
-  }
-
-  &--justify-space-between {
-    justify-content: space-between;
-  }
-
-  &--align-center {
+  &__item {
+    display: flex;
     align-items: center;
-  }
-
-  &--flex-1 {
-    flex: 1;
-  }
-
-  &--gap-2rem {
-    gap: 2rem;
-  }
-
-  &--gap-1rem {
-    gap: 1rem;
-  }
-
-  &--gap-0-5rem {
     gap: 0.5rem;
   }
 
-  &--margin-bottom-1rem {
-    margin-bottom: 1rem;
-  }
+  &__remove {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border: none;
+    background: transparent;
+    border-radius: 50%;
+    cursor: pointer;
+    color: #5f6368;
+    flex-shrink: 0;
 
-  &--margin-top-2rem {
-    margin-top: 2rem;
-  }
+    &:hover {
+      background-color: #f1f3f4;
+    }
 
-  &--margin-left-auto {
-    margin-left: auto;
-  }
-
-  &--margin-left-2rem {
-    margin-left: 2rem;
-  }
-
-  &--margin-top-0-5rem {
-    margin-top: 0.5rem;
+    .material-icons {
+      font-size: 18px;
+    }
   }
 }
+
+// AttachmentsSection layout
+.attachments-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.375rem 0.5rem;
+    background: #f8f9fa;
+    border-radius: 4px;
+    font-size: 0.8125rem;
+  }
+
+  &__info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  &__name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: #202124;
+  }
+
+  &__size {
+    color: #5f6368;
+    font-size: 0.75rem;
+  }
+
+  &__remove {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border: none;
+    background: transparent;
+    border-radius: 50%;
+    cursor: pointer;
+    color: #5f6368;
+    flex-shrink: 0;
+
+    &:hover {
+      background-color: #e8eaeb;
+    }
+
+    .material-icons {
+      font-size: 16px;
+    }
+  }
+}
+
+// StatusSection layout
+.status-section {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
diff --git a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/EventModal.tsx b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/EventModal.tsx
index 8e07113..b4632f0 100644
--- a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/EventModal.tsx
+++ b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/EventModal.tsx
@@ -1,39 +1,28 @@
-/**
- * EventModal component.
- * Handles creation and editing of calendar events.
- */
-
-import { useEffect, useState } from "react";
+import { useState, useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import {
-  IcsEvent,
-  IcsAttendee,
-  IcsOrganizer,
-  IcsRecurrenceRule,
-} from "ts-ics";
+import type { IcsEvent, IcsOrganizer } from "ts-ics";
 import {
   Button,
   Input,
   Modal,
   ModalSize,
   Select,
-  TextArea,
 } from "@gouvfr-lasuite/cunningham-react";
 
 import { useAuth } from "@/features/auth/Auth";
-import { AttendeesInput } from "./AttendeesInput";
-import { RecurrenceEditor } from "./RecurrenceEditor";
+import { addToast, ToasterItem } from "@/features/ui/components/toaster/Toaster";
 import { DeleteEventModal } from "./DeleteEventModal";
+import { useEventForm } from "./hooks/useEventForm";
+import { DateTimeSection } from "./event-modal-sections/DateTimeSection";
+import { RecurrenceSection } from "./event-modal-sections/RecurrenceSection";
+import { LocationSection } from "./event-modal-sections/LocationSection";
+import { VideoConferenceSection } from "./event-modal-sections/VideoConferenceSection";
+import { AttendeesSection } from "./event-modal-sections/AttendeesSection";
+import { DescriptionSection } from "./event-modal-sections/DescriptionSection";
+import { InvitationResponseSection } from "./event-modal-sections/InvitationResponseSection";
+import { SectionPills } from "./event-modal-sections/SectionPills";
 import type { EventModalProps, RecurringDeleteOption } from "./types";
-import {
-  formatDateTimeLocal,
-  formatDateLocal,
-  parseDateTimeLocal,
-  parseDateLocal,
-} from "./utils/dateFormatters";
-
-// Get browser timezone
-const BROWSER_TIMEZONE = Intl.DateTimeFormat().resolvedOptions().timeZone;
+import { SectionRow } from "./event-modal-sections/SectionRow";
 
 export const EventModal = ({
   isOpen,
@@ -49,36 +38,21 @@ export const EventModal = ({
 }: EventModalProps) => {
   const { t } = useTranslation();
   const { user } = useAuth();
-  const [title, setTitle] = useState(event?.summary || "");
-  const [description, setDescription] = useState(event?.description || "");
-  const [location, setLocation] = useState(event?.location || "");
-  const [startDateTime, setStartDateTime] = useState("");
-  const [endDateTime, setEndDateTime] = useState("");
-  const [selectedCalendarUrl, setSelectedCalendarUrl] = useState(calendarUrl);
   const [isLoading, setIsLoading] = useState(false);
-  const [attendees, setAttendees] = useState<IcsAttendee[]>([]);
-  const [showAttendees, setShowAttendees] = useState(false);
-  const [recurrence, setRecurrence] = useState<IcsRecurrenceRule | undefined>(
-    event?.recurrenceRule
-  );
-  const [showRecurrence, setShowRecurrence] = useState(() => {
-    return !!event?.recurrenceRule;
-  });
   const [showDeleteModal, setShowDeleteModal] = useState(false);
-  const [isAllDay, setIsAllDay] = useState(() => {
-    return event?.start?.type === 'DATE';
-  });
 
-  // Calculate organizer
   const organizer: IcsOrganizer | undefined =
     event?.organizer ||
     (user?.email
-      ? { email: user.email, name: user.email.split('@')[0] }
+      ? { email: user.email, name: user.email.split("@")[0] }
       : undefined);
 
-  // Check if current user is an attendee (invited to this event)
+  const form = useEventForm({ event, calendarUrl, adapter, organizer, mode });
+
+  // Check if current user is invited
   const currentUserAttendee = event?.attendees?.find(
-    (att) => user?.email && att.email.toLowerCase() === user.email.toLowerCase()
+    (att) =>
+      user?.email && att.email.toLowerCase() === user.email.toLowerCase(),
   );
   const isInvited = !!(
     event?.organizer &&
@@ -86,304 +60,95 @@ export const EventModal = ({
     event.organizer.email !== user?.email
   );
   const currentParticipationStatus =
-    currentUserAttendee?.partstat || 'NEEDS-ACTION';
+    currentUserAttendee?.partstat || "NEEDS-ACTION";
 
-  // Reset form when event changes
-  useEffect(() => {
-    setTitle(event?.summary || "");
-    setDescription(event?.description || "");
-    setLocation(event?.location || "");
-    setSelectedCalendarUrl(calendarUrl);
-
-    // Initialize attendees from event
-    if (event?.attendees && event.attendees.length > 0) {
-      setAttendees(event.attendees);
-      setShowAttendees(true);
-    } else {
-      setAttendees([]);
-      setShowAttendees(false);
-    }
-
-    // Initialize recurrence from event
-    if (event?.recurrenceRule) {
-      setRecurrence(event.recurrenceRule);
-      setShowRecurrence(true);
-    } else {
-      setRecurrence(undefined);
-      setShowRecurrence(false);
-    }
-
-    // Initialize all-day from event
-    const eventIsAllDay = event?.start?.type === 'DATE';
-    setIsAllDay(eventIsAllDay);
-
-    // Parse start/end dates
-    // Dates from adapter have timezone info and are "fake UTC" - use getUTC* methods
-    if (event?.start?.date) {
-      const startDate =
-        event.start.date instanceof Date
-          ? event.start.date
-          : new Date(event.start.date);
-      // If there's timezone info, the date is "fake UTC"
-      const isFakeUtc = Boolean(event.start.local?.timezone);
-
-      if (eventIsAllDay) {
-        setStartDateTime(formatDateLocal(startDate, isFakeUtc));
-      } else {
-        setStartDateTime(formatDateTimeLocal(startDate, isFakeUtc));
-      }
-    } else {
-      if (eventIsAllDay) {
-        setStartDateTime(formatDateLocal(new Date()));
-      } else {
-        setStartDateTime(formatDateTimeLocal(new Date()));
-      }
-    }
-
-    if (event?.end?.date) {
-      const endDate =
-        event.end.date instanceof Date
-          ? event.end.date
-          : new Date(event.end.date);
-      const isFakeUtc = Boolean(event.end.local?.timezone);
-
-      if (eventIsAllDay) {
-        // For all-day events, the end date in ICS is exclusive (next day)
-        // But in the UI we want to show the inclusive end date (same day for 1-day event)
-        // So subtract 1 day when displaying
-        const displayEndDate = new Date(endDate);
-        displayEndDate.setUTCDate(displayEndDate.getUTCDate() - 1);
-        setEndDateTime(formatDateLocal(displayEndDate, isFakeUtc));
-      } else {
-        setEndDateTime(formatDateTimeLocal(endDate, isFakeUtc));
-      }
-    } else {
-      if (eventIsAllDay) {
-        // Default: same day
-        setEndDateTime(formatDateLocal(new Date()));
-      } else {
-        // Default: 1 hour after start
-        const defaultEnd = new Date();
-        defaultEnd.setHours(defaultEnd.getHours() + 1);
-        setEndDateTime(formatDateTimeLocal(defaultEnd));
-      }
-    }
-  }, [event, calendarUrl]);
+  const showError = (message: string) => {
+    addToast(
+      <ToasterItem type="error" closeButton>{message}</ToasterItem>,
+    );
+  };
 
   const handleSave = async () => {
     setIsLoading(true);
     try {
-      // Remove duration to avoid union type conflict
-      // (IcsEvent is either end or duration, not both)
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { duration: _duration, ...eventWithoutDuration } = event ?? {};
-
-      let icsEvent: IcsEvent;
-
-      if (isAllDay) {
-        // All-day event
-        const startDate = parseDateLocal(startDateTime);
-        const endDate = parseDateLocal(endDateTime);
-
-        // Create UTC dates for all-day events
-        const utcStart = new Date(
-          Date.UTC(
-            startDate.getFullYear(),
-            startDate.getMonth(),
-            startDate.getDate()
-          )
-        );
-        // For all-day events, the end date in ICS is exclusive (next day)
-        // The user enters the inclusive end date, so we add 1 day for ICS
-        const utcEnd = new Date(
-          Date.UTC(
-            endDate.getFullYear(),
-            endDate.getMonth(),
-            endDate.getDate() + 1 // Add 1 day for exclusive end
-          )
-        );
-
-        icsEvent = {
-          ...eventWithoutDuration,
-          uid: event?.uid || crypto.randomUUID(),
-          summary: title,
-          description: description || undefined,
-          location: location || undefined,
-          stamp: event?.stamp || { date: new Date() },
-          start: {
-            date: utcStart,
-            type: "DATE",
-          },
-          end: {
-            date: utcEnd,
-            type: "DATE",
-          },
-          organizer: organizer,
-          attendees: attendees.length > 0 ? attendees : undefined,
-          recurrenceRule: recurrence,
-        };
-      } else {
-        // Timed event
-        const startDate = parseDateTimeLocal(startDateTime);
-        const endDate = parseDateTimeLocal(endDateTime);
-
-        // Create "fake UTC" dates where getUTCHours() = local hours
-        // This is required because ts-ics uses getUTCHours() to generate ICS
-        const fakeUtcStart = new Date(
-          Date.UTC(
-            startDate.getFullYear(),
-            startDate.getMonth(),
-            startDate.getDate(),
-            startDate.getHours(),
-            startDate.getMinutes(),
-            startDate.getSeconds()
-          )
-        );
-        const fakeUtcEnd = new Date(
-          Date.UTC(
-            endDate.getFullYear(),
-            endDate.getMonth(),
-            endDate.getDate(),
-            endDate.getHours(),
-            endDate.getMinutes(),
-            endDate.getSeconds()
-          )
-        );
-
-        icsEvent = {
-          ...eventWithoutDuration,
-          uid: event?.uid || crypto.randomUUID(),
-          summary: title,
-          description: description || undefined,
-          location: location || undefined,
-          stamp: event?.stamp || { date: new Date() },
-          start: {
-            date: fakeUtcStart,
-            type: "DATE-TIME",
-            local: {
-              date: fakeUtcStart,
-              timezone: BROWSER_TIMEZONE,
-              tzoffset: adapter.getTimezoneOffset(startDate, BROWSER_TIMEZONE),
-            },
-          },
-          end: {
-            date: fakeUtcEnd,
-            type: "DATE-TIME",
-            local: {
-              date: fakeUtcEnd,
-              timezone: BROWSER_TIMEZONE,
-              tzoffset: adapter.getTimezoneOffset(endDate, BROWSER_TIMEZONE),
-            },
-          },
-          organizer: organizer,
-          attendees: attendees.length > 0 ? attendees : undefined,
-          recurrenceRule: recurrence,
-        };
-      }
-
-      await onSave(icsEvent, selectedCalendarUrl);
+      const icsEvent = form.toIcsEvent();
+      await onSave(icsEvent, form.selectedCalendarUrl);
       onClose();
     } catch (error) {
       console.error("Failed to save event:", error);
-      alert(t('api.error.unexpected'));
+      showError(t("api.error.unexpected"));
     } finally {
       setIsLoading(false);
     }
   };
 
-  const handleDeleteClick = () => {
-    setShowDeleteModal(true);
-  };
-
   const handleDeleteConfirm = async (option?: RecurringDeleteOption) => {
     if (!onDelete || !event?.uid) return;
-
     setShowDeleteModal(false);
     setIsLoading(true);
     try {
-      await onDelete(event as IcsEvent, selectedCalendarUrl, option);
+      await onDelete(event as IcsEvent, form.selectedCalendarUrl, option);
       onClose();
     } catch (error) {
       console.error("Failed to delete event:", error);
-      alert(t('api.error.unexpected'));
+      showError(t("api.error.unexpected"));
     } finally {
       setIsLoading(false);
     }
   };
 
-  const handleDeleteCancel = () => {
-    setShowDeleteModal(false);
-  };
-
   const handleRespondToInvitation = async (
-    status: 'ACCEPTED' | 'TENTATIVE' | 'DECLINED'
+    status: "ACCEPTED" | "TENTATIVE" | "DECLINED",
   ) => {
     if (!onRespondToInvitation || !event) return;
-
     setIsLoading(true);
     try {
       await onRespondToInvitation(event as IcsEvent, status);
-      // Update local state to reflect new status
-      setAttendees((prev) =>
+      form.setAttendees((prev) =>
         prev.map((att) =>
           user?.email && att.email.toLowerCase() === user.email.toLowerCase()
             ? { ...att, partstat: status }
-            : att
-        )
+            : att,
+        ),
       );
     } catch (error) {
       console.error("Failed to respond to invitation:", error);
-      alert(t('api.error.unexpected'));
+      showError(t("api.error.unexpected"));
     } finally {
       setIsLoading(false);
     }
   };
 
-  const handleStartDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newStartValue = e.target.value;
-
-    if (isAllDay) {
-      const oldStart = parseDateLocal(startDateTime);
-      const oldEnd = parseDateLocal(endDateTime);
-      const duration = oldEnd.getTime() - oldStart.getTime();
-
-      const newStart = parseDateLocal(newStartValue);
-      const newEnd = new Date(newStart.getTime() + duration);
-
-      setStartDateTime(newStartValue);
-      setEndDateTime(formatDateLocal(newEnd));
-    } else {
-      const oldStart = parseDateTimeLocal(startDateTime);
-      const oldEnd = parseDateTimeLocal(endDateTime);
-      const duration = oldEnd.getTime() - oldStart.getTime();
-
-      const newStart = parseDateTimeLocal(newStartValue);
-      const newEnd = new Date(newStart.getTime() + duration);
-
-      setStartDateTime(newStartValue);
-      setEndDateTime(formatDateTimeLocal(newEnd));
-    }
-  };
-
-  const handleAllDayChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newIsAllDay = e.target.checked;
-    setIsAllDay(newIsAllDay);
-
-    // Convert dates when switching modes
-    if (newIsAllDay) {
-      // Convert to date-only format
-      const start = parseDateTimeLocal(startDateTime);
-      const end = parseDateTimeLocal(endDateTime);
-      setStartDateTime(formatDateLocal(start));
-      setEndDateTime(formatDateLocal(end));
-    } else {
-      // Convert to datetime format
-      const start = parseDateLocal(startDateTime);
-      const end = parseDateLocal(endDateTime);
-      setStartDateTime(formatDateTimeLocal(start));
-      setEndDateTime(formatDateTimeLocal(end));
-    }
-  };
+  const pills = useMemo(
+    () => [
+      {
+        id: "videoConference" as const,
+        icon: "videocam",
+        label: t("calendar.event.sections.addVideoConference"),
+      },
+      {
+        id: "location" as const,
+        icon: "place",
+        label: t("calendar.event.location"),
+      },
+      {
+        id: "description" as const,
+        icon: "notes",
+        label: t("calendar.event.description"),
+      },
+      {
+        id: "recurrence" as const,
+        icon: "repeat",
+        label: t("calendar.recurrence.label"),
+      },
+      {
+        id: "attendees" as const,
+        icon: "group",
+        label: t("calendar.event.attendees"),
+      },
+    ],
+    [t],
+  );
 
   return (
     <>
@@ -393,227 +158,142 @@ export const EventModal = ({
         size={ModalSize.MEDIUM}
         title={
           mode === "create"
-            ? t('calendar.event.createTitle')
-            : t('calendar.event.editTitle')
+            ? t("calendar.event.createTitle")
+            : t("calendar.event.editTitle")
         }
         leftActions={
           mode === "edit" && onDelete ? (
             <Button
               color="error"
-              onClick={handleDeleteClick}
+              onClick={() => setShowDeleteModal(true)}
               disabled={isLoading}
             >
-              {t('calendar.event.delete')}
+              {t("calendar.event.delete")}
             </Button>
           ) : undefined
         }
         rightActions={
           <>
             <Button color="neutral" onClick={onClose} disabled={isLoading}>
-              {t('calendar.event.cancel')}
+              {t("calendar.event.cancel")}
             </Button>
             <Button
               color="brand"
               onClick={handleSave}
-              disabled={isLoading || !title.trim()}
+              disabled={isLoading || !form.title.trim()}
             >
-              {isLoading ? "..." : t('calendar.event.save')}
+              {isLoading ? "..." : t("calendar.event.save")}
             </Button>
           </>
         }
       >
         <div className="event-modal__content">
-          <Input
-            label={t('calendar.event.title')}
-            value={title}
-            onChange={(e) => setTitle(e.target.value)}
-            fullWidth
-          />
-
-          {/* Invitation Response Section */}
-          {isInvited && mode === 'edit' && onRespondToInvitation && (
-            <div className="event-modal__invitation">
-              <div className="event-modal__invitation-header">
-                <span className="event-modal__invitation-label">
-                  {t('calendar.event.invitation', { defaultValue: 'Invitation' })}
-                </span>
-                <span className="event-modal__invitation-organizer">
-                  {t('calendar.event.organizedBy', {
-                    defaultValue: 'Organisé par',
-                  })}{' '}
-                  {event?.organizer?.name || event?.organizer?.email}
-                </span>
-              </div>
-              <div className="event-modal__invitation-actions">
-                <Button
-                  size="small"
-                  color={
-                    currentParticipationStatus === 'ACCEPTED'
-                      ? 'success'
-                      : 'neutral'
-                  }
-                  onClick={() => handleRespondToInvitation('ACCEPTED')}
-                  disabled={
-                    isLoading || currentParticipationStatus === 'ACCEPTED'
-                  }
-                >
-                  ✓ {t('calendar.event.accept', { defaultValue: 'Accepter' })}
-                </Button>
-                <Button
-                  size="small"
-                  color={
-                    currentParticipationStatus === 'TENTATIVE'
-                      ? 'warning'
-                      : 'neutral'
-                  }
-                  onClick={() => handleRespondToInvitation('TENTATIVE')}
-                  disabled={
-                    isLoading || currentParticipationStatus === 'TENTATIVE'
-                  }
-                >
-                  ? {t('calendar.event.maybe', { defaultValue: 'Peut-être' })}
-                </Button>
-                <Button
-                  size="small"
-                  color={
-                    currentParticipationStatus === 'DECLINED'
-                      ? 'error'
-                      : 'neutral'
-                  }
-                  onClick={() => handleRespondToInvitation('DECLINED')}
-                  disabled={
-                    isLoading || currentParticipationStatus === 'DECLINED'
-                  }
-                >
-                  ✗ {t('calendar.event.decline', { defaultValue: 'Refuser' })}
-                </Button>
-              </div>
-              {currentParticipationStatus && (
-                <div className="event-modal__invitation-status">
-                  {t('calendar.event.yourResponse', {
-                    defaultValue: 'Votre réponse',
-                  })}
-                  :{' '}
-                  <strong>
-                    {currentParticipationStatus === 'ACCEPTED' &&
-                      t('calendar.event.accepted', { defaultValue: 'Accepté' })}
-                    {currentParticipationStatus === 'TENTATIVE' &&
-                      t('calendar.event.tentative', {
-                        defaultValue: 'Peut-être',
-                      })}
-                    {currentParticipationStatus === 'DECLINED' &&
-                      t('calendar.event.declined', { defaultValue: 'Refusé' })}
-                    {currentParticipationStatus === 'NEEDS-ACTION' &&
-                      t('calendar.event.needsAction', {
-                        defaultValue: 'En attente',
-                      })}
-                  </strong>
-                </div>
-              )}
-            </div>
-          )}
-
-          <Select
-            label={t('calendar.event.calendar', { defaultValue: 'Calendrier' })}
-            value={selectedCalendarUrl}
-            onChange={(e) => setSelectedCalendarUrl(String(e.target.value))}
-            options={calendars.map((cal) => ({
-              value: cal.url,
-              label: cal.displayName || cal.url,
-            }))}
-            fullWidth
-          />
-
-          <label className="event-modal__checkbox">
-            <input
-              type="checkbox"
-              checked={isAllDay}
-              onChange={handleAllDayChange}
-            />
-            <span>{t('calendar.event.allDay')}</span>
-          </label>
-
-          <div className="event-modal__datetime-row">
+          <SectionRow
+            icon="edit"
+            label={t("calendar.event.calendar")}
+            alwaysOpen={true}
+          >
             <Input
-              type={isAllDay ? "date" : "datetime-local"}
-              label={t('calendar.event.start')}
-              value={startDateTime}
-              onChange={handleStartDateChange}
+              label={t("calendar.event.title")}
+              hideLabel
+              autoFocus={mode === "create"}
+              value={form.title}
+              onChange={(e) => form.setTitle(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") e.preventDefault();
+              }}
+              fullWidth
+              placeholder={t("calendar.event.titlePlaceholder")}
+              variant="classic"
+            />
+          </SectionRow>
+          <SectionRow
+            icon="event"
+            label={t("calendar.event.calendar")}
+            alwaysOpen={true}
+          >
+            <Select
+              label={t("calendar.event.calendar")}
+              hideLabel
+              value={form.selectedCalendarUrl}
+              onChange={(e) =>
+                form.setSelectedCalendarUrl(String(e.target.value))
+              }
+              options={calendars.map((cal) => ({
+                value: cal.url,
+                label: cal.displayName || cal.url,
+              }))}
+              variant="classic"
               fullWidth
             />
-            <Input
-              type={isAllDay ? "date" : "datetime-local"}
-              label={t('calendar.event.end')}
-              value={endDateTime}
-              onChange={(e) => setEndDateTime(e.target.value)}
-              fullWidth
+          </SectionRow>
+          <DateTimeSection
+            startDateTime={form.startDateTime}
+            endDateTime={form.endDateTime}
+            isAllDay={form.isAllDay}
+            onStartChange={form.handleStartDateChange}
+            onEndChange={form.setEndDateTime}
+            onAllDayChange={form.handleAllDayChange}
+          />
+          {form.isSectionExpanded("recurrence") && (
+            <RecurrenceSection
+              recurrence={form.recurrence}
+              onChange={form.setRecurrence}
+              alwaysOpen
+            />
+          )}
+          {isInvited && mode === "edit" && onRespondToInvitation && (
+            <InvitationResponseSection
+              organizer={event?.organizer}
+              currentStatus={currentParticipationStatus}
+              isLoading={isLoading}
+              onRespond={handleRespondToInvitation}
+            />
+          )}
+          {form.isSectionExpanded("videoConference") && (
+            <VideoConferenceSection
+              url={form.videoConferenceUrl}
+              onChange={form.setVideoConferenceUrl}
+              alwaysOpen
+            />
+          )}
+          {form.isSectionExpanded("location") && (
+            <LocationSection
+              location={form.location}
+              onChange={form.setLocation}
+              alwaysOpen
             />
-          </div>
-
-          <Input
-            label={t('calendar.event.location')}
-            value={location}
-            onChange={(e) => setLocation(e.target.value)}
-            fullWidth
-          />
-
-          <TextArea
-            label={t('calendar.event.description')}
-            value={description}
-            onChange={(e) => setDescription(e.target.value)}
-            rows={3}
-            fullWidth
-          />
-
-          <div className="event-modal__features">
-            <button
-              type="button"
-              className={`event-modal__feature-tag ${
-                showAttendees ? 'event-modal__feature-tag--active' : ''
-              }`}
-              onClick={() => setShowAttendees(!showAttendees)}
-            >
-              <span className="material-icons">people</span>
-              {t('calendar.event.attendees')}
-              {attendees.length > 0 && ` (${attendees.length})`}
-            </button>
-
-            <button
-              type="button"
-              className={`event-modal__feature-tag ${
-                showRecurrence ? 'event-modal__feature-tag--active' : ''
-              }`}
-              onClick={() => setShowRecurrence(!showRecurrence)}
-            >
-              <span className="material-icons">repeat</span>
-              {t('calendar.recurrence.label')}
-            </button>
-          </div>
-
-          {showAttendees && (
-            <div className="event-modal__attendees-input">
-              <AttendeesInput
-                attendees={attendees}
-                onChange={setAttendees}
-                organizerEmail={user?.email}
-                organizer={organizer}
-              />
-            </div>
           )}
 
-          {showRecurrence && (
-            <div className="event-modal__recurrence-editor">
-              <RecurrenceEditor value={recurrence} onChange={setRecurrence} />
-            </div>
+          {form.isSectionExpanded("attendees") && (
+            <AttendeesSection
+              attendees={form.attendees}
+              onChange={form.setAttendees}
+              organizerEmail={user?.email}
+              organizer={organizer}
+              alwaysOpen
+            />
           )}
+          {form.isSectionExpanded("description") && (
+            <DescriptionSection
+              description={form.description}
+              onChange={form.setDescription}
+              alwaysOpen
+            />
+          )}
+          <SectionPills
+            pills={pills}
+            isSectionExpanded={form.isSectionExpanded}
+            onToggle={form.toggleSection}
+          />
         </div>
       </Modal>
 
       <DeleteEventModal
         isOpen={showDeleteModal}
-        isRecurring={!!recurrence}
+        isRecurring={!!form.recurrence}
         onConfirm={handleDeleteConfirm}
-        onCancel={handleDeleteCancel}
+        onCancel={() => setShowDeleteModal(false)}
       />
     </>
   );
diff --git a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/RecurrenceEditor.scss b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/RecurrenceEditor.scss
index f55af8c..e040c83 100644
--- a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/RecurrenceEditor.scss
+++ b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/RecurrenceEditor.scss
@@ -1,8 +1,38 @@
 .recurrence-editor {
-  &__label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+
+  &__card {
+    background: var(--c--theme--colors--greyscale-50, #f8f9fa);
+    border-radius: 8px;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  &__summary {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    border-radius: 20px;
+    background: var(--c--theme--colors--primary-100, #e8f0fe);
+    color: var(--c--theme--colors--primary-700, #1a56db);
+    font-size: 0.8125rem;
     font-weight: 500;
-    color: #333;
-    font-size: 0.9375rem;
+    line-height: 1.4;
+  }
+
+  &__interval {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  &__weekdays {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
   }
 
   &__weekday-button {
@@ -10,32 +40,94 @@
     height: 32px;
     border-radius: 50%;
     border: none;
-    background: #f1f3f4;
+    background: var(--c--theme--colors--greyscale-100, #f1f3f4);
     color: inherit;
     cursor: pointer;
     font-size: 0.875rem;
     transition: background-color 0.15s, color 0.15s;
 
     &:hover {
-      background: #e8eaeb;
+      background: var(--c--theme--colors--greyscale-200, #e8eaeb);
     }
 
     &--selected {
-      background: #1a73e8;
+      background: var(--c--theme--colors--primary-600, #1a73e8);
       color: white;
 
       &:hover {
-        background: #1557b0;
+        background: var(--c--theme--colors--primary-700, #1557b0);
       }
     }
   }
 
+  &__day-select {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  &__label {
+    font-weight: 500;
+    color: #333;
+    font-size: 0.9375rem;
+  }
+
+  &__section-label {
+    text-transform: uppercase;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--c--theme--colors--greyscale-500, #6b7280);
+    letter-spacing: 0.05em;
+  }
+
+  &__end {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  &__end-options {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  &__end-btn {
+    border: 1px solid var(--c--theme--colors--greyscale-300, #d1d5db);
+    border-radius: 20px;
+    padding: 0.375rem 0.75rem;
+    background: transparent;
+    cursor: pointer;
+    font-size: 0.875rem;
+    transition: all 0.15s;
+    color: inherit;
+
+    &:hover {
+      border-color: var(--c--theme--colors--greyscale-400, #9ca3af);
+    }
+
+    &--active {
+      border-color: var(--c--theme--colors--primary-600, #1a73e8);
+      color: var(--c--theme--colors--primary-600, #1a73e8);
+      background: var(--c--theme--colors--primary-50, #eff6ff);
+
+      &:hover {
+        border-color: var(--c--theme--colors--primary-700, #1557b0);
+        color: var(--c--theme--colors--primary-700, #1557b0);
+      }
+    }
+  }
+
+  &__end-input {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
   &__warning {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     padding: 0.75rem 1rem;
-    margin-top: 0.5rem;
     background-color: #fff3cd;
     border: 1px solid #ffc107;
     border-radius: 4px;
@@ -44,37 +136,3 @@
     line-height: 1.4;
   }
 }
-
-// Utility classes for layout
-.recurrence-editor-layout {
-  display: flex;
-  flex-direction: column;
-
-  &--row {
-    flex-direction: row;
-  }
-
-  &--align-center {
-    align-items: center;
-  }
-
-  &--flex-wrap {
-    flex-wrap: wrap;
-  }
-
-  &--gap-1rem {
-    gap: 1rem;
-  }
-
-  &--gap-0-5rem {
-    gap: 0.5rem;
-  }
-
-  &--margin-left-2rem {
-    margin-left: 2rem;
-  }
-
-  &--margin-top-0-5rem {
-    margin-top: 0.5rem;
-  }
-}
diff --git a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/RecurrenceEditor.tsx b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/RecurrenceEditor.tsx
index 6df98e1..d0ba22a 100644
--- a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/RecurrenceEditor.tsx
+++ b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/RecurrenceEditor.tsx
@@ -1,25 +1,26 @@
-import { Select, Input } from '@gouvfr-lasuite/cunningham-react';
-import { useState, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import type { IcsRecurrenceRule, IcsWeekDay } from 'ts-ics';
+import { Select, Input } from "@gouvfr-lasuite/cunningham-react";
+import { useState, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import type { IcsRecurrenceRule, IcsWeekDay } from "ts-ics";
 
-type RecurrenceFrequency = IcsRecurrenceRule['frequency'];
+type RecurrenceFrequency = IcsRecurrenceRule["frequency"];
+type EndType = "never" | "count" | "date";
 
-const WEEKDAY_KEYS: IcsWeekDay[] = ['MO', 'TU', 'WE', 'TH', 'FR', 'SA', 'SU'];
+const WEEKDAY_KEYS: IcsWeekDay[] = ["MO", "TU", "WE", "TH", "FR", "SA", "SU"];
 
 const MONTHS = [
-  { value: 1, key: 'january' },
-  { value: 2, key: 'february' },
-  { value: 3, key: 'march' },
-  { value: 4, key: 'april' },
-  { value: 5, key: 'may' },
-  { value: 6, key: 'june' },
-  { value: 7, key: 'july' },
-  { value: 8, key: 'august' },
-  { value: 9, key: 'september' },
-  { value: 10, key: 'october' },
-  { value: 11, key: 'november' },
-  { value: 12, key: 'december' },
+  { value: 1, key: "january" },
+  { value: 2, key: "february" },
+  { value: 3, key: "march" },
+  { value: 4, key: "april" },
+  { value: 5, key: "may" },
+  { value: 6, key: "june" },
+  { value: 7, key: "july" },
+  { value: 8, key: "august" },
+  { value: 9, key: "september" },
+  { value: 10, key: "october" },
+  { value: 11, key: "november" },
+  { value: 12, key: "december" },
 ];
 
 interface RecurrenceEditorProps {
@@ -27,98 +28,140 @@ interface RecurrenceEditorProps {
   onChange: (rule: IcsRecurrenceRule | undefined) => void;
 }
 
-/**
- * Validate day of month based on month (handles leap years and month lengths)
- */
-function isValidDayForMonth(day: number, month?: number): boolean {
-  if (day < 1 || day > 31) return false;
-
-  if (!month) return true; // No month specified, allow any valid day
-
-  // Days per month (non-leap year)
-  const daysInMonth: Record<number, number> = {
-    1: 31, 2: 29, 3: 31, 4: 30, 5: 31, 6: 30,
-    7: 31, 8: 31, 9: 30, 10: 31, 11: 30, 12: 31
-  };
-
-  return day <= (daysInMonth[month] || 31);
-}
-
-/**
- * Get warning message for invalid dates
- */
-function getDateWarning(t: (key: string) => string, day: number, month?: number): string | null {
+function getDateWarning(
+  t: (key: string) => string,
+  day: number,
+  month?: number,
+): string | null {
   if (!month) return null;
 
   if (month === 2 && day > 29) {
-    return t('calendar.recurrence.warnings.februaryMax');
+    return t("calendar.recurrence.warnings.februaryMax");
   }
   if (month === 2 && day === 29) {
-    return t('calendar.recurrence.warnings.leapYear');
+    return t("calendar.recurrence.warnings.leapYear");
   }
   if ([4, 6, 9, 11].includes(month) && day > 30) {
-    return t('calendar.recurrence.warnings.monthMax30');
+    return t("calendar.recurrence.warnings.monthMax30");
   }
   if (day > 31) {
-    return t('calendar.recurrence.warnings.dayMax31');
+    return t("calendar.recurrence.warnings.dayMax31");
   }
 
   return null;
 }
 
+function getEndType(value?: IcsRecurrenceRule): EndType {
+  if (value?.count) return "count";
+  if (value?.until) return "date";
+  return "never";
+}
+
 export function RecurrenceEditor({ value, onChange }: RecurrenceEditorProps) {
   const { t } = useTranslation();
 
   const [isCustom, setIsCustom] = useState(() => {
     if (!value) return false;
-    return value.interval !== 1 || value.byDay?.length || value.byMonthday?.length || value.byMonth?.length || value.count || value.until;
+    return !!(
+      value.interval !== 1 ||
+      value.byDay?.length ||
+      value.byMonthday?.length ||
+      value.byMonth?.length ||
+      value.count ||
+      value.until
+    );
   });
 
-  // Generate options from translations
-  const recurrenceOptions = useMemo(() => [
-    { value: 'NONE', label: t('calendar.recurrence.none') },
-    { value: 'DAILY', label: t('calendar.recurrence.daily') },
-    { value: 'WEEKLY', label: t('calendar.recurrence.weekly') },
-    { value: 'MONTHLY', label: t('calendar.recurrence.monthly') },
-    { value: 'YEARLY', label: t('calendar.recurrence.yearly') },
-    { value: 'CUSTOM', label: t('calendar.recurrence.custom') },
-  ], [t]);
+  const recurrenceOptions = useMemo(
+    () => [
+      { value: "NONE", label: t("calendar.recurrence.none") },
+      { value: "DAILY", label: t("calendar.recurrence.daily") },
+      { value: "WEEKLY", label: t("calendar.recurrence.weekly") },
+      { value: "MONTHLY", label: t("calendar.recurrence.monthly") },
+      { value: "YEARLY", label: t("calendar.recurrence.yearly") },
+      { value: "CUSTOM", label: t("calendar.recurrence.custom") },
+    ],
+    [t],
+  );
 
-  const frequencyOptions = useMemo(() => [
-    { value: 'DAILY', label: t('calendar.recurrence.days') },
-    { value: 'WEEKLY', label: t('calendar.recurrence.weeks') },
-    { value: 'MONTHLY', label: t('calendar.recurrence.months') },
-    { value: 'YEARLY', label: t('calendar.recurrence.years') },
-  ], [t]);
+  const frequencyOptions = useMemo(
+    () => [
+      { value: "DAILY", label: t("calendar.recurrence.days") },
+      { value: "WEEKLY", label: t("calendar.recurrence.weeks") },
+      { value: "MONTHLY", label: t("calendar.recurrence.months") },
+      { value: "YEARLY", label: t("calendar.recurrence.years") },
+    ],
+    [t],
+  );
 
-  const weekdays = useMemo(() => WEEKDAY_KEYS.map(key => ({
-    value: key,
-    label: t(`calendar.recurrence.weekdays.${key.toLowerCase()}`),
-  })), [t]);
+  const weekdays = useMemo(
+    () =>
+      WEEKDAY_KEYS.map((key) => ({
+        value: key,
+        label: t(`calendar.recurrence.weekdays.${key.toLowerCase()}`),
+      })),
+    [t],
+  );
 
-  const monthOptions = useMemo(() => MONTHS.map(month => ({
-    value: String(month.value),
-    label: t(`calendar.recurrence.months.${month.key}`),
-  })), [t]);
+  const monthOptions = useMemo(
+    () =>
+      MONTHS.map((month) => ({
+        value: String(month.value),
+        label: t(`calendar.recurrence.months.${month.key}`),
+      })),
+    [t],
+  );
+
+  const summary = useMemo((): string => {
+    if (!isCustom || !value) return "";
+
+    const interval = value.interval || 1;
+    const freq = value.frequency;
+    const freqLabel = t(`calendar.recurrence.${freq === "DAILY" ? "days" : freq === "WEEKLY" ? "weeks" : freq === "MONTHLY" ? "months" : "years"}`);
+
+    let result = `${t("calendar.recurrence.everyLabel")} ${interval > 1 ? `${interval} ` : ""}${freqLabel}`;
+
+    if (freq === "WEEKLY" && value.byDay?.length) {
+      const dayLabels = value.byDay.map((d) => {
+        const dayKey = typeof d === "string" ? d : d.day;
+        return t(
+          `calendar.recurrence.weekdays.${dayKey.toLowerCase()}`,
+        );
+      });
+      result += ` · ${dayLabels.join(", ")}`;
+    }
+
+    if (value.until) {
+      const dateStr =
+        value.until.date instanceof Date
+          ? value.until.date.toISOString().split("T")[0]
+          : "";
+      result += ` · ${t("calendar.recurrence.on")} ${dateStr}`;
+    } else if (value.count) {
+      result += ` · ${value.count} ${t("calendar.recurrence.occurrences")}`;
+    }
+
+    return result;
+  }, [isCustom, value, t]);
 
   const getSimpleValue = (): string => {
-    if (!value) return 'NONE';
-    if (isCustom) return 'CUSTOM';
+    if (!value) return "NONE";
+    if (isCustom) return "CUSTOM";
     return value.frequency;
   };
 
   const handleSimpleChange = (newValue: string) => {
-    if (newValue === 'NONE') {
+    if (newValue === "NONE") {
       setIsCustom(false);
       onChange(undefined);
       return;
     }
 
-    if (newValue === 'CUSTOM') {
+    if (newValue === "CUSTOM") {
       setIsCustom(true);
       onChange({
-        frequency: 'WEEKLY',
-        interval: 1
+        frequency: "WEEKLY",
+        interval: 1,
       });
       return;
     }
@@ -131,23 +174,24 @@ export function RecurrenceEditor({ value, onChange }: RecurrenceEditorProps) {
       byMonthday: undefined,
       byMonth: undefined,
       count: undefined,
-      until: undefined
+      until: undefined,
     });
   };
 
   const handleChange = (updates: Partial<IcsRecurrenceRule>) => {
     onChange({
-      frequency: 'WEEKLY',
+      frequency: "WEEKLY",
       interval: 1,
       ...value,
-      ...updates
+      ...updates,
     });
   };
 
-  // Get selected day strings from byDay array
   const getSelectedDays = (): IcsWeekDay[] => {
     if (!value?.byDay) return [];
-    return value.byDay.map(d => typeof d === 'string' ? d as IcsWeekDay : d.day);
+    return value.byDay.map((d) =>
+      typeof d === "string" ? (d as IcsWeekDay) : d.day,
+    );
   };
 
   const isDaySelected = (day: IcsWeekDay): boolean => {
@@ -157,17 +201,15 @@ export function RecurrenceEditor({ value, onChange }: RecurrenceEditorProps) {
   const toggleDay = (day: IcsWeekDay) => {
     const currentDays = getSelectedDays();
     const newDays = currentDays.includes(day)
-      ? currentDays.filter(d => d !== day)
+      ? currentDays.filter((d) => d !== day)
       : [...currentDays, day];
-    handleChange({ byDay: newDays.map(d => ({ day: d })) });
+    handleChange({ byDay: newDays.map((d) => ({ day: d })) });
   };
 
-  // Get selected month day
   const getMonthDay = (): number => {
     return value?.byMonthday?.[0] ?? 1;
   };
 
-  // Get selected month for yearly recurrence
   const getMonth = (): string => {
     return String(value?.byMonth?.[0] ?? 1);
   };
@@ -180,78 +222,97 @@ export function RecurrenceEditor({ value, onChange }: RecurrenceEditorProps) {
     handleChange({ byMonth: [month] });
   };
 
-  // Calculate date warning
+  const endType = getEndType(value);
+
   const monthDay = getMonthDay();
-  const selectedMonth = value?.frequency === 'YEARLY' ? parseInt(getMonth()) : undefined;
-  const dateWarning = isCustom && (value?.frequency === 'MONTHLY' || value?.frequency === 'YEARLY')
-    ? getDateWarning(t, monthDay, selectedMonth)
-    : null;
+  const selectedMonth =
+    value?.frequency === "YEARLY" ? parseInt(getMonth()) : undefined;
+  const dateWarning =
+    isCustom &&
+    (value?.frequency === "MONTHLY" || value?.frequency === "YEARLY")
+      ? getDateWarning(t, monthDay, selectedMonth)
+      : null;
+
 
   return (
-    <div className="recurrence-editor-layout recurrence-editor-layout--gap-1rem">
+    <div className="recurrence-editor">
       <Select
-        label={t('calendar.recurrence.label')}
+        label={t("calendar.recurrence.label")}
+        hideLabel
         value={getSimpleValue()}
         options={recurrenceOptions}
-        onChange={(e) => handleSimpleChange(String(e.target.value ?? ''))}
+        onChange={(e) => handleSimpleChange(String(e.target.value ?? ""))}
+        variant="classic"
         fullWidth
       />
 
       {isCustom && (
-        <div className="recurrence-editor-layout recurrence-editor-layout--gap-1rem recurrence-editor-layout--margin-left-2rem">
-          <div className="recurrence-editor-layout recurrence-editor-layout--row recurrence-editor-layout--align-center recurrence-editor-layout--gap-1rem">
-            <span>{t('calendar.recurrence.everyLabel')}</span>
+        <div className="recurrence-editor__card">
+          {summary && (
+            <div className="recurrence-editor__summary">{summary}</div>
+          )}
+
+          <div className="recurrence-editor__interval">
+            <span>{t("calendar.recurrence.everyLabel")}</span>
             <Input
               label=""
               type="number"
+              variant="classic"
               min={1}
               value={value?.interval || 1}
-              onChange={(e) => handleChange({ interval: parseInt(e.target.value) || 1 })}
+              onChange={(e) =>
+                handleChange({ interval: parseInt(e.target.value) || 1 })
+              }
             />
             <Select
               label=""
-              value={value?.frequency || 'WEEKLY'}
+              variant="classic"
+              value={value?.frequency || "WEEKLY"}
               options={frequencyOptions}
-              onChange={(e) => handleChange({ frequency: String(e.target.value ?? '') as RecurrenceFrequency })}
+              onChange={(e) =>
+                handleChange({
+                  frequency: String(
+                    e.target.value ?? "",
+                  ) as RecurrenceFrequency,
+                })
+              }
             />
           </div>
 
-          {/* WEEKLY: Day selection */}
-          {value?.frequency === 'WEEKLY' && (
-            <div className="recurrence-editor-layout">
-              <span className="recurrence-editor__label">{t('calendar.recurrence.repeatOn')}</span>
-              <div className="recurrence-editor-layout recurrence-editor-layout--row recurrence-editor-layout--gap-0-5rem recurrence-editor-layout--margin-top-0-5rem recurrence-editor-layout--flex-wrap">
-                {weekdays.map(day => {
-                  const isSelected = isDaySelected(day.value);
-                  return (
-                    <button
-                      key={day.value}
-                      type="button"
-                      className={`recurrence-editor__weekday-button ${isSelected ? 'recurrence-editor__weekday-button--selected' : ''}`}
-                      onClick={(e) => {
-                        e.preventDefault();
-                        toggleDay(day.value);
-                      }}
-                    >
-                      {day.label}
-                    </button>
-                  );
-                })}
-              </div>
+          {value?.frequency === "WEEKLY" && (
+            <div className="recurrence-editor__weekdays">
+              {weekdays.map((day) => {
+                const isSelected = isDaySelected(day.value);
+                return (
+                  <button
+                    key={day.value}
+                    type="button"
+                    className={`recurrence-editor__weekday-button ${isSelected ? "recurrence-editor__weekday-button--selected" : ""}`}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      toggleDay(day.value);
+                    }}
+                  >
+                    {day.label}
+                  </button>
+                );
+              })}
             </div>
           )}
 
-          {/* MONTHLY: Day of month selection */}
-          {value?.frequency === 'MONTHLY' && (
-            <div className="recurrence-editor-layout">
-              <span className="recurrence-editor__label">{t('calendar.recurrence.repeatOnDay')}</span>
-              <div className="recurrence-editor-layout recurrence-editor-layout--row recurrence-editor-layout--align-center recurrence-editor-layout--gap-0-5rem recurrence-editor-layout--margin-top-0-5rem">
-                <span>{t('calendar.recurrence.dayOfMonth')}</span>
+          {value?.frequency === "MONTHLY" && (
+            <div className="recurrence-editor__day-select">
+              <span className="recurrence-editor__label">
+                {t("calendar.recurrence.repeatOnDay")}
+              </span>
+              <div className="recurrence-editor__interval">
+                <span>{t("calendar.recurrence.dayOfMonth")}</span>
                 <Input
                   label=""
                   type="number"
                   min={1}
                   max={31}
+                  variant="classic"
                   value={getMonthDay()}
                   onChange={(e) => {
                     const day = parseInt(e.target.value) || 1;
@@ -259,30 +320,35 @@ export function RecurrenceEditor({ value, onChange }: RecurrenceEditorProps) {
                       handleMonthDayChange(day);
                     }
                   }}
-                    />
+                />
               </div>
               {dateWarning && (
                 <div className="recurrence-editor__warning">
-                  ⚠️ {dateWarning}
+                  {dateWarning}
                 </div>
               )}
             </div>
           )}
 
-          {/* YEARLY: Month + Day selection */}
-          {value?.frequency === 'YEARLY' && (
-            <div className="recurrence-editor-layout">
-              <span className="recurrence-editor__label">{t('calendar.recurrence.repeatOnDate')}</span>
-              <div className="recurrence-editor-layout recurrence-editor-layout--row recurrence-editor-layout--align-center recurrence-editor-layout--gap-0-5rem recurrence-editor-layout--margin-top-0-5rem">
+          {value?.frequency === "YEARLY" && (
+            <div className="recurrence-editor__day-select">
+              <span className="recurrence-editor__label">
+                {t("calendar.recurrence.repeatOnDate")}
+              </span>
+              <div className="recurrence-editor__interval">
                 <Select
                   label=""
                   value={getMonth()}
+                  variant="classic"
                   options={monthOptions}
-                  onChange={(e) => handleMonthChange(parseInt(String(e.target.value)) || 1)}
+                  onChange={(e) =>
+                    handleMonthChange(parseInt(String(e.target.value)) || 1)
+                  }
                 />
                 <Input
                   label=""
                   type="number"
+                  variant="classic"
                   min={1}
                   max={31}
                   value={getMonthDay()}
@@ -292,78 +358,91 @@ export function RecurrenceEditor({ value, onChange }: RecurrenceEditorProps) {
                       handleMonthDayChange(day);
                     }
                   }}
-                    />
+                />
               </div>
               {dateWarning && (
                 <div className="recurrence-editor__warning">
-                  ⚠️ {dateWarning}
+                  {dateWarning}
                 </div>
               )}
             </div>
           )}
 
-          {/* End conditions */}
-          <div className="recurrence-editor-layout">
-            <span className="recurrence-editor__label">{t('calendar.recurrence.endsLabel')}</span>
-            <div className="recurrence-editor-layout recurrence-editor-layout--gap-0-5rem recurrence-editor-layout--margin-top-0-5rem">
-              <div className="recurrence-editor-layout recurrence-editor-layout--row recurrence-editor-layout--align-center recurrence-editor-layout--gap-0-5rem">
-                <input
-                  type="radio"
-                  id="end-never"
-                  name="end-type"
-                  checked={!value?.count && !value?.until}
-                  onChange={() => handleChange({ count: undefined, until: undefined })}
-                />
-                <label htmlFor="end-never">{t('calendar.recurrence.never')}</label>
-              </div>
-
-              <div className="recurrence-editor-layout recurrence-editor-layout--row recurrence-editor-layout--align-center recurrence-editor-layout--gap-0-5rem">
-                <input
-                  type="radio"
-                  id="end-date"
-                  name="end-type"
-                  checked={!!value?.until}
-                  onChange={() => handleChange({ until: { type: 'DATE', date: new Date() }, count: undefined })}
-                />
-                <label htmlFor="end-date">{t('calendar.recurrence.on')}</label>
-                {value?.until && (
-                  <Input
-                    label=""
-                    type="date"
-                    value={value.until.date instanceof Date ? value.until.date.toISOString().split('T')[0] : ''}
-                    onChange={(e) => handleChange({
-                      until: {
-                        type: 'DATE',
-                        date: new Date(e.target.value),
-                      }
-                    })}
-                  />
-                )}
-              </div>
-
-              <div className="recurrence-editor-layout recurrence-editor-layout--row recurrence-editor-layout--align-center recurrence-editor-layout--gap-0-5rem">
-                <input
-                  type="radio"
-                  id="end-count"
-                  name="end-type"
-                  checked={!!value?.count}
-                  onChange={() => handleChange({ count: 10, until: undefined })}
-                />
-                <label htmlFor="end-count">{t('calendar.recurrence.after')}</label>
-                {value?.count !== undefined && (
-                  <>
-                    <Input
-                      label=""
-                      type="number"
-                      min={1}
-                      value={value.count}
-                      onChange={(e) => handleChange({ count: parseInt(e.target.value) || 1 })}
-                            />
-                    <span>{t('calendar.recurrence.occurrences')}</span>
-                  </>
-                )}
-              </div>
+          <div className="recurrence-editor__end">
+            <span className="recurrence-editor__section-label">
+              {t("calendar.recurrence.endsLabel")}
+            </span>
+            <div className="recurrence-editor__end-options">
+              <button
+                type="button"
+                className={`recurrence-editor__end-btn ${endType === "never" ? "recurrence-editor__end-btn--active" : ""}`}
+                onClick={() =>
+                  handleChange({ count: undefined, until: undefined })
+                }
+              >
+                {t("calendar.recurrence.never")}
+              </button>
+              <button
+                type="button"
+                className={`recurrence-editor__end-btn ${endType === "count" ? "recurrence-editor__end-btn--active" : ""}`}
+                onClick={() =>
+                  handleChange({ count: 10, until: undefined })
+                }
+              >
+                {t("calendar.recurrence.after")}...
+              </button>
+              <button
+                type="button"
+                className={`recurrence-editor__end-btn ${endType === "date" ? "recurrence-editor__end-btn--active" : ""}`}
+                onClick={() =>
+                  handleChange({
+                    until: { type: "DATE", date: new Date() },
+                    count: undefined,
+                  })
+                }
+              >
+                {t("calendar.recurrence.on")}...
+              </button>
             </div>
+
+            {endType === "count" && (
+              <div className="recurrence-editor__end-input">
+                <Input
+                  label=""
+                  type="number"
+                  variant="classic"
+                  min={1}
+                  value={value?.count ?? 10}
+                  onChange={(e) =>
+                    handleChange({ count: parseInt(e.target.value) || 1 })
+                  }
+                />
+                <span>{t("calendar.recurrence.occurrences")}</span>
+              </div>
+            )}
+
+            {endType === "date" && (
+              <div className="recurrence-editor__end-input">
+                <Input
+                  label=""
+                  type="date"
+                  variant="classic"
+                  value={
+                    value?.until?.date instanceof Date
+                      ? value.until.date.toISOString().split("T")[0]
+                      : ""
+                  }
+                  onChange={(e) =>
+                    handleChange({
+                      until: {
+                        type: "DATE",
+                        date: new Date(e.target.value),
+                      },
+                    })
+                  }
+                />
+              </div>
+            )}
           </div>
         </div>
       )}
diff --git a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/Scheduler.scss b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/Scheduler.scss
index f4026af..fc748c3 100644
--- a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/Scheduler.scss
+++ b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/Scheduler.scss
@@ -11,145 +11,145 @@
 // Event Modal Styles (for use with Cunningham Modal)
 // ============================================================================
 
-.event-modal {
-  &__content {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
+// .event-modal {
+//   &__content {
+//     display: flex;
+//     flex-direction: column;
+//     gap: 1rem;
+//   }
 
-  // Date/Time row with two columns
-  &__datetime-row {
-    display: flex;
-    gap: 1rem;
+//   // Date/Time row with two columns
+//   &__datetime-row {
+//     display: flex;
+//     gap: 1rem;
 
-    > * {
-      flex: 1;
-    }
-  }
+//     > * {
+//       flex: 1;
+//     }
+//   }
 
-  // Features section (buttons + inputs)
-  &__features {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    margin-top: 0.5rem;
-  }
+//   // Features section (buttons + inputs)
+//   &__features {
+//     display: flex;
+//     flex-wrap: wrap;
+//     gap: 0.5rem;
+//     margin-top: 0.5rem;
+//   }
 
-  &__attendees-input {
-    padding: 0.75rem;
-    background-color: #f8f9fa;
-    border-radius: 4px;
-    margin-top: 0.75rem;
-  }
+//   &__attendees-input {
+//     padding: 0.75rem;
+//     background-color: #f8f9fa;
+//     border-radius: 4px;
+//     margin-top: 0.75rem;
+//   }
 
-  &__recurrence-editor {
-    padding: 0.75rem;
-    background-color: #f8f9fa;
-    border-radius: 4px;
-    margin-top: 0.75rem;
-  }
+//   &__recurrence-editor {
+//     padding: 0.75rem;
+//     background-color: #f8f9fa;
+//     border-radius: 4px;
+//     margin-top: 0.75rem;
+//   }
 
-  // Checkbox for all-day
-  &__checkbox {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    cursor: pointer;
-    user-select: none;
+//   // Checkbox for all-day
+//   &__checkbox {
+//     display: flex;
+//     align-items: center;
+//     gap: 0.5rem;
+//     cursor: pointer;
+//     user-select: none;
 
-    input[type="checkbox"] {
-      cursor: pointer;
-      width: 1.25rem;
-      height: 1.25rem;
-      margin: 0;
-    }
+//     input[type="checkbox"] {
+//       cursor: pointer;
+//       width: 1.25rem;
+//       height: 1.25rem;
+//       margin: 0;
+//     }
 
-    span {
-      font-size: 0.9375rem;
-      line-height: 1.5;
-      color: #212529;
-    }
-  }
+//     span {
+//       font-size: 0.9375rem;
+//       line-height: 1.5;
+//       color: #212529;
+//     }
+//   }
 
-  // Feature tag button
-  &__feature-tag {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.375rem;
-    padding: 0.375rem 0.75rem;
-    border: 1px solid #dee2e6;
-    border-radius: 1rem;
-    background-color: #fff;
-    color: #495057;
-    font-size: 0.875rem;
-    cursor: pointer;
-    transition: all 0.15s ease-in-out;
+//   // Feature tag button
+//   &__feature-tag {
+//     display: inline-flex;
+//     align-items: center;
+//     gap: 0.375rem;
+//     padding: 0.375rem 0.75rem;
+//     border: 1px solid #dee2e6;
+//     border-radius: 1rem;
+//     background-color: #fff;
+//     color: #495057;
+//     font-size: 0.875rem;
+//     cursor: pointer;
+//     transition: all 0.15s ease-in-out;
 
-    &:hover {
-      background-color: #f8f9fa;
-      border-color: #adb5bd;
-    }
+//     &:hover {
+//       background-color: #f8f9fa;
+//       border-color: #adb5bd;
+//     }
 
-    &--active {
-      background-color: #e7f5ff;
-      border-color: #339af0;
-      color: #1971c2;
-    }
+//     &--active {
+//       background-color: #e7f5ff;
+//       border-color: #339af0;
+//       color: #1971c2;
+//     }
 
-    .material-icons {
-      font-size: 1.125rem;
-    }
-  }
+//     .material-icons {
+//       font-size: 1.125rem;
+//     }
+//   }
 
-  // Invitation section
-  &__invitation {
-    padding: 1rem;
-    background-color: #e7f5ff;
-    border: 1px solid #339af0;
-    border-radius: 0.5rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-  }
+//   // Invitation section
+//   &__invitation {
+//     padding: 1rem;
+//     background-color: #e7f5ff;
+//     border: 1px solid #339af0;
+//     border-radius: 0.5rem;
+//     display: flex;
+//     flex-direction: column;
+//     gap: 0.75rem;
+//   }
 
-  &__invitation-header {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-  }
+//   &__invitation-header {
+//     display: flex;
+//     flex-direction: column;
+//     gap: 0.25rem;
+//   }
 
-  &__invitation-label {
-    font-size: 0.875rem;
-    font-weight: 600;
-    color: #1971c2;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
+//   &__invitation-label {
+//     font-size: 0.875rem;
+//     font-weight: 600;
+//     color: #1971c2;
+//     text-transform: uppercase;
+//     letter-spacing: 0.05em;
+//   }
 
-  &__invitation-organizer {
-    font-size: 0.9375rem;
-    color: #495057;
-  }
+//   &__invitation-organizer {
+//     font-size: 0.9375rem;
+//     color: #495057;
+//   }
 
-  &__invitation-actions {
-    display: flex;
-    gap: 0.5rem;
-    flex-wrap: wrap;
-  }
+//   &__invitation-actions {
+//     display: flex;
+//     gap: 0.5rem;
+//     flex-wrap: wrap;
+//   }
 
-  &__invitation-status {
-    padding: 0.5rem 0.75rem;
-    background-color: #fff;
-    border-radius: 0.375rem;
-    font-size: 0.875rem;
-    color: #495057;
+//   &__invitation-status {
+//     padding: 0.5rem 0.75rem;
+//     background-color: #fff;
+//     border-radius: 0.375rem;
+//     font-size: 0.875rem;
+//     color: #495057;
 
-    strong {
-      color: #1971c2;
-    }
-  }
-}
+//     strong {
+//       color: #1971c2;
+//     }
+//   }
+// }
 
 // ============================================================================
 // Delete Event Modal Styles
diff --git a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/AttachmentsSection.tsx b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/AttachmentsSection.tsx
new file mode 100644
index 0000000..0e3faa5
--- /dev/null
+++ b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/AttachmentsSection.tsx
@@ -0,0 +1,110 @@
+import { useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "@gouvfr-lasuite/cunningham-react";
+import type { AttachmentMeta } from "../types";
+import { SectionRow } from "./SectionRow";
+
+interface AttachmentsSectionProps {
+  attachments: AttachmentMeta[];
+  onChange: (attachments: AttachmentMeta[]) => void;
+  isExpanded?: boolean;
+  onToggle?: () => void;
+}
+
+const formatFileSize = (bytes: number): string => {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+};
+
+export const AttachmentsSection = ({
+  attachments,
+  onChange,
+  isExpanded,
+  onToggle,
+}: AttachmentsSectionProps) => {
+  const { t } = useTranslation();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const summary =
+    attachments.length > 0
+      ? `${attachments.length} ${t("calendar.event.sections.attachment", { count: attachments.length })}`
+      : undefined;
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files) return;
+
+    const newAttachments: AttachmentMeta[] = Array.from(files).map((file) => ({
+      id: crypto.randomUUID(),
+      name: file.name,
+      size: file.size,
+      type: file.type,
+    }));
+
+    onChange([...attachments, ...newAttachments]);
+
+    // Reset input
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  const handleRemove = (id: string) => {
+    onChange(attachments.filter((a) => a.id !== id));
+  };
+
+  return (
+    <SectionRow
+      icon="attach_file"
+      label={t("calendar.event.sections.addAttachment")}
+      summary={summary}
+      isEmpty={attachments.length === 0}
+      isExpanded={isExpanded}
+      onToggle={onToggle}
+    >
+      <div className="attachments-section">
+        {attachments.map((attachment) => (
+          <div key={attachment.id} className="attachments-section__item">
+            <span className="material-icons" style={{ fontSize: 18 }}>
+              description
+            </span>
+            <div className="attachments-section__info">
+              <span className="attachments-section__name">
+                {attachment.name}
+              </span>
+              <span className="attachments-section__size">
+                {formatFileSize(attachment.size)}
+              </span>
+            </div>
+            <button
+              type="button"
+              className="attachments-section__remove"
+              onClick={() => handleRemove(attachment.id)}
+              aria-label={t("common.cancel")}
+            >
+              <span className="material-icons">close</span>
+            </button>
+          </div>
+        ))}
+        <input
+          ref={fileInputRef}
+          type="file"
+          multiple
+          onChange={handleFileSelect}
+          style={{ display: "none" }}
+        />
+        <Button
+          size="small"
+          color="neutral"
+          onClick={() => fileInputRef.current?.click()}
+        >
+          <span className="material-icons" style={{ fontSize: 16 }}>
+            add
+          </span>
+          {t("calendar.event.sections.addAttachment")}
+        </Button>
+      </div>
+    </SectionRow>
+  );
+};
diff --git a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/AttendeesSection.tsx b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/AttendeesSection.tsx
new file mode 100644
index 0000000..46badaa
--- /dev/null
+++ b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/AttendeesSection.tsx
@@ -0,0 +1,45 @@
+import { useTranslation } from "react-i18next";
+import type { IcsAttendee, IcsOrganizer } from "ts-ics";
+import { AttendeesInput } from "../AttendeesInput";
+import { SectionRow } from "./SectionRow";
+
+interface AttendeesSectionProps {
+  attendees: IcsAttendee[];
+  onChange: (attendees: IcsAttendee[]) => void;
+  organizerEmail?: string;
+  organizer?: IcsOrganizer;
+  alwaysOpen?: boolean;
+  isExpanded?: boolean;
+  onToggle?: () => void;
+}
+
+export const AttendeesSection = ({
+  attendees,
+  onChange,
+  organizerEmail,
+  organizer,
+  alwaysOpen,
+  isExpanded,
+  onToggle,
+}: AttendeesSectionProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <SectionRow
+      icon="group"
+      label={t("calendar.event.sections.addAttendees")}
+      isEmpty={attendees.length === 0}
+      alwaysOpen={alwaysOpen}
+      isExpanded={isExpanded}
+      onToggle={onToggle}
+      iconAlign="flex-start"
+    >
+      <AttendeesInput
+        attendees={attendees}
+        onChange={onChange}
+        organizerEmail={organizerEmail}
+        organizer={organizer}
+      />
+    </SectionRow>
+  );
+};
diff --git a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/DateTimeSection.tsx b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/DateTimeSection.tsx
new file mode 100644
index 0000000..ba8c57f
--- /dev/null
+++ b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/DateTimeSection.tsx
@@ -0,0 +1,72 @@
+import { useTranslation } from "react-i18next";
+import { Input } from "@gouvfr-lasuite/cunningham-react";
+import { SectionRow } from "./SectionRow";
+
+interface DateTimeSectionProps {
+  startDateTime: string;
+  endDateTime: string;
+  isAllDay: boolean;
+  onStartChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onEndChange: (value: string) => void;
+  onAllDayChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export const DateTimeSection = ({
+  startDateTime,
+  endDateTime,
+  isAllDay,
+  onStartChange,
+  onEndChange,
+  onAllDayChange,
+}: DateTimeSectionProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <SectionRow
+        icon="access_time"
+        label={t("calendar.event.sections.addDateTime")}
+        isEmpty={!startDateTime || !endDateTime}
+        alwaysOpen={true}
+        iconAlign="flex-start"
+      >
+        <div className="datetime-section">
+          <div className="datetime-section__inputs">
+            <Input
+              type={isAllDay ? "date" : "datetime-local"}
+              label={t("calendar.event.start")}
+              value={startDateTime}
+              onChange={onStartChange}
+              fullWidth
+              hideLabel
+              variant="classic"
+            />
+            <span
+              className="material-icons datetime-section__arrow"
+              aria-hidden="true"
+            >
+              arrow_forward
+            </span>
+            <Input
+              type={isAllDay ? "date" : "datetime-local"}
+              label={t("calendar.event.end")}
+              value={endDateTime}
+              onChange={(e) => onEndChange(e.target.value)}
+              fullWidth
+              hideLabel
+              variant="classic"
+            />
+          </div>
+          <label className="datetime-section__allday">
+            <input
+              type="checkbox"
+              checked={isAllDay}
+              onChange={onAllDayChange}
+            />
+            <span>{t("calendar.event.allDay")}</span>
+          </label>
+        </div>
+      </SectionRow>
+    </div>
+  );
+};
diff --git a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/DescriptionSection.tsx b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/DescriptionSection.tsx
new file mode 100644
index 0000000..d63a451
--- /dev/null
+++ b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/DescriptionSection.tsx
@@ -0,0 +1,44 @@
+import { useTranslation } from "react-i18next";
+import { TextArea } from "@gouvfr-lasuite/cunningham-react";
+import { SectionRow } from "./SectionRow";
+
+interface DescriptionSectionProps {
+  description: string;
+  onChange: (value: string) => void;
+  alwaysOpen?: boolean;
+  isExpanded?: boolean;
+  onToggle?: () => void;
+}
+
+export const DescriptionSection = ({
+  description,
+  onChange,
+  alwaysOpen,
+  isExpanded,
+  onToggle,
+}: DescriptionSectionProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <SectionRow
+      icon="notes"
+      label={t("calendar.event.sections.addDescription")}
+      isEmpty={!description}
+      alwaysOpen={alwaysOpen}
+      isExpanded={isExpanded}
+      onToggle={onToggle}
+      iconAlign="flex-start"
+    >
+      <TextArea
+        label={t("calendar.event.description")}
+        placeholder={t("calendar.event.descriptionPlaceholder")}
+        value={description}
+        onChange={(e) => onChange(e.target.value)}
+        rows={3}
+        fullWidth
+        variant="classic"
+        hideLabel
+      />
+    </SectionRow>
+  );
+};
diff --git a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/InvitationResponseSection.scss b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/InvitationResponseSection.scss
new file mode 100644
index 0000000..da2ff3a
--- /dev/null
+++ b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/InvitationResponseSection.scss
@@ -0,0 +1,36 @@
+.invitation-response {
+  padding: 0.75rem;
+  background: #f8f9fa;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  &__header {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  &__label {
+    font-weight: 600;
+    font-size: 0.875rem;
+    color: #202124;
+  }
+
+  &__organizer {
+    font-size: 0.8125rem;
+    color: #5f6368;
+  }
+
+  &__actions {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+
+  &__status {
+    font-size: 0.8125rem;
+    color: #5f6368;
+  }
+}
diff --git a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/InvitationResponseSection.tsx b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/InvitationResponseSection.tsx
new file mode 100644
index 0000000..363e331
--- /dev/null
+++ b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/InvitationResponseSection.tsx
@@ -0,0 +1,81 @@
+import { useTranslation } from "react-i18next";
+import { Button } from "@gouvfr-lasuite/cunningham-react";
+import type { IcsOrganizer } from "ts-ics";
+
+interface InvitationResponseSectionProps {
+  organizer?: IcsOrganizer;
+  currentStatus: string;
+  isLoading: boolean;
+  onRespond: (status: "ACCEPTED" | "TENTATIVE" | "DECLINED") => void;
+}
+
+export const InvitationResponseSection = ({
+  organizer,
+  currentStatus,
+  isLoading,
+  onRespond,
+}: InvitationResponseSectionProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="invitation-response">
+      <div className="invitation-response__header">
+        <span className="invitation-response__label">
+          {t("calendar.event.invitation", { defaultValue: "Invitation" })}
+        </span>
+        <span className="invitation-response__organizer">
+          {t("calendar.event.organizedBy", {
+            defaultValue: "Organisé par",
+          })}{" "}
+          {organizer?.name || organizer?.email}
+        </span>
+      </div>
+      <div className="invitation-response__actions">
+        <Button
+          size="small"
+          color={currentStatus === "ACCEPTED" ? "success" : "neutral"}
+          onClick={() => onRespond("ACCEPTED")}
+          disabled={isLoading || currentStatus === "ACCEPTED"}
+        >
+          ✓ {t("calendar.event.accept", { defaultValue: "Accepter" })}
+        </Button>
+        <Button
+          size="small"
+          color={currentStatus === "TENTATIVE" ? "warning" : "neutral"}
+          onClick={() => onRespond("TENTATIVE")}
+          disabled={isLoading || currentStatus === "TENTATIVE"}
+        >
+          ? {t("calendar.event.maybe", { defaultValue: "Peut-être" })}
+        </Button>
+        <Button
+          size="small"
+          color={currentStatus === "DECLINED" ? "error" : "neutral"}
+          onClick={() => onRespond("DECLINED")}
+          disabled={isLoading || currentStatus === "DECLINED"}
+        >
+          ✗ {t("calendar.event.decline", { defaultValue: "Refuser" })}
+        </Button>
+      </div>
+      {currentStatus && (
+        <div className="invitation-response__status">
+          {t("calendar.event.yourResponse", {
+            defaultValue: "Votre réponse",
+          })}
+          :{" "}
+          <strong>
+            {currentStatus === "ACCEPTED" &&
+              t("calendar.event.accepted", { defaultValue: "Accepté" })}
+            {currentStatus === "TENTATIVE" &&
+              t("calendar.event.tentative", { defaultValue: "Peut-être" })}
+            {currentStatus === "DECLINED" &&
+              t("calendar.event.declined", { defaultValue: "Refusé" })}
+            {currentStatus === "NEEDS-ACTION" &&
+              t("calendar.event.needsAction", {
+                defaultValue: "En attente",
+              })}
+          </strong>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/LocationSection.tsx b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/LocationSection.tsx
new file mode 100644
index 0000000..96bb2be
--- /dev/null
+++ b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/LocationSection.tsx
@@ -0,0 +1,42 @@
+import { useTranslation } from "react-i18next";
+import { Input } from "@gouvfr-lasuite/cunningham-react";
+import { SectionRow } from "./SectionRow";
+
+interface LocationSectionProps {
+  location: string;
+  onChange: (value: string) => void;
+  alwaysOpen?: boolean;
+  isExpanded?: boolean;
+  onToggle?: () => void;
+}
+
+export const LocationSection = ({
+  location,
+  onChange,
+  alwaysOpen,
+  isExpanded,
+  onToggle,
+}: LocationSectionProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <SectionRow
+      icon="place"
+      label={t("calendar.event.sections.addLocation")}
+      isEmpty={!location}
+      alwaysOpen={alwaysOpen}
+      isExpanded={isExpanded}
+      onToggle={onToggle}
+    >
+      <Input
+        label={t("calendar.event.location")}
+        hideLabel
+        value={location}
+        placeholder={t("calendar.event.locationPlaceholder")}
+        onChange={(e) => onChange(e.target.value)}
+        variant="classic"
+        fullWidth
+      />
+    </SectionRow>
+  );
+};
diff --git a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/RecurrenceSection.tsx b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/RecurrenceSection.tsx
new file mode 100644
index 0000000..5973ba5
--- /dev/null
+++ b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/RecurrenceSection.tsx
@@ -0,0 +1,36 @@
+import { useTranslation } from "react-i18next";
+import type { IcsRecurrenceRule } from "ts-ics";
+import { RecurrenceEditor } from "../RecurrenceEditor";
+import { SectionRow } from "./SectionRow";
+
+interface RecurrenceSectionProps {
+  recurrence: IcsRecurrenceRule | undefined;
+  onChange: (value: IcsRecurrenceRule | undefined) => void;
+  alwaysOpen?: boolean;
+  isExpanded?: boolean;
+  onToggle?: () => void;
+}
+
+export const RecurrenceSection = ({
+  recurrence,
+  onChange,
+  alwaysOpen,
+  isExpanded,
+  onToggle,
+}: RecurrenceSectionProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <SectionRow
+      icon="repeat"
+      label={t("calendar.event.sections.addRecurrence")}
+      isEmpty={!recurrence}
+      alwaysOpen={alwaysOpen}
+      isExpanded={isExpanded}
+      onToggle={onToggle}
+      iconAlign="flex-start"
+    >
+      <RecurrenceEditor value={recurrence} onChange={onChange} />
+    </SectionRow>
+  );
+};
diff --git a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/RemindersSection.tsx b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/RemindersSection.tsx
new file mode 100644
index 0000000..dddce27
--- /dev/null
+++ b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/RemindersSection.tsx
@@ -0,0 +1,118 @@
+import { useTranslation } from "react-i18next";
+import { Button, Select } from "@gouvfr-lasuite/cunningham-react";
+import type { IcsAlarm } from "ts-ics";
+import { SectionRow } from "./SectionRow";
+
+interface RemindersSectionProps {
+  alarms: IcsAlarm[];
+  onChange: (alarms: IcsAlarm[]) => void;
+  alwaysOpen?: boolean;
+  isExpanded?: boolean;
+  onToggle?: () => void;
+}
+
+const REMINDER_PRESETS = [
+  { minutes: 5, key: "5min" },
+  { minutes: 15, key: "15min" },
+  { minutes: 30, key: "30min" },
+  { minutes: 60, key: "1hour" },
+  { minutes: 1440, key: "1day" },
+  { minutes: 10080, key: "1week" },
+];
+
+const alarmToMinutes = (alarm: IcsAlarm): number => {
+  const trigger = alarm.trigger;
+  if (trigger.type !== "relative") return 15;
+  const d = trigger.value;
+  return (
+    (d.weeks || 0) * 10080 +
+    (d.days || 0) * 1440 +
+    (d.hours || 0) * 60 +
+    (d.minutes || 0)
+  );
+};
+
+const minutesToAlarm = (minutes: number): IcsAlarm => ({
+  action: "DISPLAY",
+  trigger: {
+    type: "relative",
+    value: {
+      before: true,
+      ...(minutes >= 10080 && minutes % 10080 === 0
+        ? { weeks: minutes / 10080 }
+        : minutes >= 1440 && minutes % 1440 === 0
+          ? { days: minutes / 1440 }
+          : minutes >= 60 && minutes % 60 === 0
+            ? { hours: minutes / 60 }
+            : { minutes }),
+    },
+  },
+});
+
+export const RemindersSection = ({
+  alarms,
+  onChange,
+  alwaysOpen,
+  isExpanded,
+  onToggle,
+}: RemindersSectionProps) => {
+  const { t } = useTranslation();
+
+  const handleAdd = () => {
+    onChange([...alarms, minutesToAlarm(15)]);
+  };
+
+  const handleRemove = (index: number) => {
+    onChange(alarms.filter((_, i) => i !== index));
+  };
+
+  const handleChange = (index: number, minutes: number) => {
+    const updated = [...alarms];
+    updated[index] = minutesToAlarm(minutes);
+    onChange(updated);
+  };
+
+  const presetOptions = REMINDER_PRESETS.map((p) => ({
+    value: String(p.minutes),
+    label: t(`calendar.event.reminders.${p.key}`),
+  }));
+
+  return (
+    <SectionRow
+      icon="notifications"
+      label={t("calendar.event.sections.addReminder")}
+      isEmpty={alarms.length === 0}
+      alwaysOpen={alwaysOpen}
+      isExpanded={isExpanded}
+      onToggle={onToggle}
+    >
+      <div className="reminders-section">
+        {alarms.map((alarm, index) => (
+          <div key={index} className="reminders-section__item">
+            <Select
+              label=""
+              value={String(alarmToMinutes(alarm))}
+              onChange={(e) => handleChange(index, Number(e.target.value))}
+              options={presetOptions}
+              fullWidth
+            />
+            <button
+              type="button"
+              className="reminders-section__remove"
+              onClick={() => handleRemove(index)}
+              aria-label={t("common.cancel")}
+            >
+              <span className="material-icons">close</span>
+            </button>
+          </div>
+        ))}
+        <Button size="small" color="neutral" onClick={handleAdd}>
+          <span className="material-icons" style={{ fontSize: 16 }}>
+            add
+          </span>
+          {t("calendar.event.sections.addReminder")}
+        </Button>
+      </div>
+    </SectionRow>
+  );
+};
diff --git a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/SectionPill.scss b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/SectionPill.scss
new file mode 100644
index 0000000..c80fec8
--- /dev/null
+++ b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/SectionPill.scss
@@ -0,0 +1,46 @@
+.section-pill {
+  display: inline-flex;
+  align-items: center;
+
+  gap: 0.25rem;
+  padding: 0.5rem 0.75rem;
+  height: 32px;
+  border: none;
+  border-radius: 20px;
+  cursor: pointer;
+  font-size: 0.8125rem;
+  font-family: inherit;
+  line-height: 1;
+  transition:
+    background-color 0.15s,
+    color 0.15s;
+  border: 1px solid var(--c--contextuals--border--surface--primary);
+  background-color: var(--c--contextuals--background--surface--primary);
+  color: var(--c--contextuals--content--semantic--neutral--primary);
+
+  &--active {
+    border: 1px solid
+      var(--c--contextuals--border--semantic--contextual--primary);
+    background-color: var(
+      --c--contextuals--background--semantic--neutral--tertiary
+    );
+    color: var(--c--contextuals--content--semantic--neutral--tertiary);
+  }
+
+  &__icon {
+    font-size: 16px;
+  }
+
+  &__label {
+    white-space: nowrap;
+  }
+}
+
+.section-pills {
+  display: flex;
+  flex-wrap: wrap;
+
+  gap: 0.5rem;
+  padding-top: 1rem;
+  padding-bottom: 0.5rem;
+}
diff --git a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/SectionPill.tsx b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/SectionPill.tsx
new file mode 100644
index 0000000..c5452cf
--- /dev/null
+++ b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/SectionPill.tsx
@@ -0,0 +1,25 @@
+interface SectionPillProps {
+  icon: string;
+  label: string;
+  isActive: boolean;
+  onClick: () => void;
+}
+
+export const SectionPill = ({
+  icon,
+  label,
+  isActive,
+  onClick,
+}: SectionPillProps) => {
+  return (
+    <button
+      type="button"
+      className={`section-pill ${isActive ? "section-pill--active" : ""}`}
+      onClick={onClick}
+      aria-pressed={isActive}
+    >
+      <span className="material-icons section-pill__icon">{icon}</span>
+      <span className="section-pill__label">{label}</span>
+    </button>
+  );
+};
diff --git a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/SectionPills.tsx b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/SectionPills.tsx
new file mode 100644
index 0000000..1e1f25b
--- /dev/null
+++ b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/SectionPills.tsx
@@ -0,0 +1,34 @@
+import { SectionPill } from "./SectionPill";
+import type { EventFormSectionId } from "../types";
+
+interface PillConfig {
+  id: EventFormSectionId;
+  icon: string;
+  label: string;
+}
+
+interface SectionPillsProps {
+  pills: PillConfig[];
+  isSectionExpanded: (id: EventFormSectionId) => boolean;
+  onToggle: (id: EventFormSectionId) => void;
+}
+
+export const SectionPills = ({
+  pills,
+  isSectionExpanded,
+  onToggle,
+}: SectionPillsProps) => {
+  return (
+    <div className="section-pills">
+      {pills.map((pill) => (
+        <SectionPill
+          key={pill.id}
+          icon={pill.icon}
+          label={pill.label}
+          isActive={isSectionExpanded(pill.id)}
+          onClick={() => onToggle(pill.id)}
+        />
+      ))}
+    </div>
+  );
+};
diff --git a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/SectionRow.scss b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/SectionRow.scss
new file mode 100644
index 0000000..c733dc3
--- /dev/null
+++ b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/SectionRow.scss
@@ -0,0 +1,113 @@
+.section-row {
+  border-bottom: 1px solid #f1f3f4;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &--always-open {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.5rem 0;
+    border-bottom: none;
+  }
+
+  &--icon-start {
+    align-items: flex-start;
+
+    .section-row__icon {
+      padding-top: 10px;
+    }
+  }
+
+  &--icon-start &__header {
+    align-items: flex-start;
+  }
+
+  &--always-open &__body {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    padding: 0.625rem 0.5rem;
+    min-height: 44px;
+    gap: 0.25rem;
+    border-radius: 4px;
+    transition: background-color 0.15s;
+
+    &--clickable {
+      cursor: pointer;
+
+      &:hover {
+        background-color: #f8f9fa;
+      }
+    }
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    flex-shrink: 0;
+
+    .material-icons {
+      font-size: 20px;
+      color: #5f6368;
+    }
+  }
+
+  &__label {
+    flex: 1;
+    font-size: 0.875rem;
+    color: #202124;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
+
+  &--empty &__label {
+    color: #5f6368;
+  }
+
+  &__right-action {
+    flex-shrink: 0;
+    margin-left: auto;
+  }
+
+  &__chevron {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+
+    .material-icons {
+      font-size: 20px;
+      color: #5f6368;
+    }
+  }
+
+  &__content {
+    padding: 0 0.5rem 0.75rem calc(36px + 0.25rem);
+    animation: sectionSlideDown 0.2s ease-out;
+  }
+
+  &--expanded &__header--clickable:hover {
+    background-color: transparent;
+  }
+}
+
+@keyframes sectionSlideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
diff --git a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/SectionRow.tsx b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/SectionRow.tsx
new file mode 100644
index 0000000..6dc04dc
--- /dev/null
+++ b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/SectionRow.tsx
@@ -0,0 +1,87 @@
+import { type ReactNode } from "react";
+
+interface SectionRowProps {
+  icon: string;
+  label: string;
+  summary?: string;
+  isEmpty?: boolean;
+  isExpanded?: boolean;
+  onToggle?: () => void;
+  rightAction?: ReactNode;
+  children?: ReactNode;
+  alwaysOpen?: boolean;
+  iconAlign?: "center" | "flex-start";
+}
+
+export const SectionRow = ({
+  icon,
+  label,
+  summary,
+  isEmpty = false,
+  isExpanded = false,
+  onToggle,
+  rightAction,
+  children,
+  alwaysOpen = false,
+  iconAlign = "center",
+}: SectionRowProps) => {
+  const iconAlignClass =
+    iconAlign === "flex-start" ? "section-row--icon-start" : "";
+
+  if (alwaysOpen) {
+    return (
+      <div className={`section-row section-row--always-open ${iconAlignClass}`}>
+        <div className="section-row__icon">
+          <span className="material-icons">{icon}</span>
+        </div>
+        <div className="section-row__body">{children}</div>
+      </div>
+    );
+  }
+
+  const isClickable = !!onToggle;
+
+  return (
+    <div
+      className={`section-row ${isExpanded ? "section-row--expanded" : ""} ${
+        isEmpty ? "section-row--empty" : ""
+      } ${iconAlignClass}`}
+    >
+      <div
+        className={`section-row__header ${
+          isClickable ? "section-row__header--clickable" : ""
+        }`}
+        onClick={onToggle}
+        onKeyDown={(e) => {
+          if (isClickable && (e.key === "Enter" || e.key === " ")) {
+            e.preventDefault();
+            onToggle?.();
+          }
+        }}
+        role={isClickable ? "button" : undefined}
+        tabIndex={isClickable ? 0 : undefined}
+        aria-expanded={isClickable ? isExpanded : undefined}
+      >
+        <div className="section-row__icon">
+          <span className="material-icons">{icon}</span>
+        </div>
+        <div className="section-row__label">
+          {isEmpty ? label : summary || label}
+        </div>
+        {rightAction && (
+          <div className="section-row__right-action">{rightAction}</div>
+        )}
+        {isClickable && (
+          <div className="section-row__chevron">
+            <span className="material-icons">
+              {isExpanded ? "expand_less" : "expand_more"}
+            </span>
+          </div>
+        )}
+      </div>
+      {isExpanded && children && (
+        <div className="section-row__content">{children}</div>
+      )}
+    </div>
+  );
+};
diff --git a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/StatusSection.tsx b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/StatusSection.tsx
new file mode 100644
index 0000000..e435d41
--- /dev/null
+++ b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/StatusSection.tsx
@@ -0,0 +1,113 @@
+import { useTranslation } from "react-i18next";
+import { Select } from "@gouvfr-lasuite/cunningham-react";
+import type {
+  IcsClassType,
+  IcsEventStatusType,
+  IcsTimeTransparentType,
+} from "ts-ics";
+import { SectionRow } from "./SectionRow";
+
+interface StatusSectionProps {
+  status: IcsEventStatusType;
+  visibility: IcsClassType;
+  availability: IcsTimeTransparentType;
+  onStatusChange: (value: IcsEventStatusType) => void;
+  onVisibilityChange: (value: IcsClassType) => void;
+  onAvailabilityChange: (value: IcsTimeTransparentType) => void;
+  isExpanded?: boolean;
+  onToggle?: () => void;
+}
+
+export const StatusSection = ({
+  status,
+  visibility,
+  availability,
+  onStatusChange,
+  onVisibilityChange,
+  onAvailabilityChange,
+  isExpanded,
+  onToggle,
+}: StatusSectionProps) => {
+  const { t } = useTranslation();
+
+  const statusLabel = t(`calendar.event.status.${status.toLowerCase()}`);
+  const visibilityLabel = t(
+    `calendar.event.visibility.${visibility.toLowerCase()}`,
+  );
+  const availabilityLabel =
+    availability === "OPAQUE"
+      ? t("calendar.event.availability.busy")
+      : t("calendar.event.availability.free");
+
+  const summary = `${statusLabel} · ${visibilityLabel} · ${availabilityLabel}`;
+
+  return (
+    <SectionRow
+      icon="info_outline"
+      label={t("calendar.event.sections.moreOptions")}
+      summary={summary}
+      isExpanded={isExpanded}
+      onToggle={onToggle}
+    >
+      <div className="status-section">
+        <Select
+          label={t("calendar.event.status.label")}
+          value={status}
+          onChange={(e) =>
+            onStatusChange(e.target.value as IcsEventStatusType)
+          }
+          options={[
+            {
+              value: "CONFIRMED",
+              label: t("calendar.event.status.confirmed"),
+            },
+            {
+              value: "TENTATIVE",
+              label: t("calendar.event.status.tentative"),
+            },
+            {
+              value: "CANCELLED",
+              label: t("calendar.event.status.cancelled"),
+            },
+          ]}
+          fullWidth
+        />
+        <Select
+          label={t("calendar.event.visibility.label")}
+          value={visibility}
+          onChange={(e) => onVisibilityChange(e.target.value as IcsClassType)}
+          options={[
+            { value: "PUBLIC", label: t("calendar.event.visibility.public") },
+            {
+              value: "PRIVATE",
+              label: t("calendar.event.visibility.private"),
+            },
+            {
+              value: "CONFIDENTIAL",
+              label: t("calendar.event.visibility.confidential"),
+            },
+          ]}
+          fullWidth
+        />
+        <Select
+          label={t("calendar.event.availability.label")}
+          value={availability}
+          onChange={(e) =>
+            onAvailabilityChange(e.target.value as IcsTimeTransparentType)
+          }
+          options={[
+            {
+              value: "OPAQUE",
+              label: t("calendar.event.availability.busy"),
+            },
+            {
+              value: "TRANSPARENT",
+              label: t("calendar.event.availability.free"),
+            },
+          ]}
+          fullWidth
+        />
+      </div>
+    </SectionRow>
+  );
+};
diff --git a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/VideoConferenceSection.tsx b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/VideoConferenceSection.tsx
new file mode 100644
index 0000000..abb2e6c
--- /dev/null
+++ b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/VideoConferenceSection.tsx
@@ -0,0 +1,56 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "@gouvfr-lasuite/cunningham-react";
+import { SectionRow } from "./SectionRow";
+
+interface VideoConferenceSectionProps {
+  url: string;
+  onChange: (url: string) => void;
+  alwaysOpen?: boolean;
+  isExpanded?: boolean;
+  onToggle?: () => void;
+}
+
+export const VideoConferenceSection = ({
+  url,
+  onChange,
+  alwaysOpen,
+  isExpanded,
+  onToggle,
+}: VideoConferenceSectionProps) => {
+  const { t } = useTranslation();
+  const [isCreating, setIsCreating] = useState(false);
+
+  const handleCreateVisio = () => {
+    // Inert for now - will integrate with La Suite API in the future
+    setIsCreating(true);
+    setTimeout(() => {
+      setIsCreating(false);
+    }, 500);
+  };
+
+  const handleRemove = () => {
+    onChange("");
+  };
+
+  return (
+    <SectionRow
+      icon="videocam"
+      label={t("calendar.event.sections.addVideoConference")}
+      isEmpty={!url}
+      alwaysOpen={alwaysOpen}
+      isExpanded={isExpanded}
+      onToggle={onToggle}
+    >
+      <Button
+        size="small"
+        color="neutral"
+        variant="tertiary"
+        onClick={handleCreateVisio}
+        disabled={isCreating}
+      >
+        {t("calendar.event.sections.createVisio")}
+      </Button>
+    </SectionRow>
+  );
+};
diff --git a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/hooks/useEventForm.ts b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/hooks/useEventForm.ts
new file mode 100644
index 0000000..664a21b
--- /dev/null
+++ b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/hooks/useEventForm.ts
@@ -0,0 +1,380 @@
+import { useCallback, useEffect, useState } from "react";
+import type {
+  IcsEvent,
+  IcsAttendee,
+  IcsAlarm,
+  IcsRecurrenceRule,
+  IcsClassType,
+  IcsEventStatusType,
+  IcsTimeTransparentType,
+  IcsOrganizer,
+} from "ts-ics";
+import type { EventCalendarAdapter } from "../../../services/dav/EventCalendarAdapter";
+import type { AttachmentMeta, EventFormSectionId } from "../types";
+import {
+  formatDateTimeLocal,
+  formatDateLocal,
+  parseDateTimeLocal,
+  parseDateLocal,
+} from "../utils/dateFormatters";
+
+const BROWSER_TIMEZONE = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+interface UseEventFormParams {
+  event: Partial<IcsEvent> | null;
+  calendarUrl: string;
+  adapter: EventCalendarAdapter;
+  organizer: IcsOrganizer | undefined;
+  mode: "create" | "edit";
+}
+
+export const useEventForm = ({
+  event,
+  calendarUrl,
+  adapter,
+  organizer,
+  mode,
+}: UseEventFormParams) => {
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [location, setLocation] = useState("");
+  const [startDateTime, setStartDateTime] = useState("");
+  const [endDateTime, setEndDateTime] = useState("");
+  const [selectedCalendarUrl, setSelectedCalendarUrl] = useState(calendarUrl);
+  const [isAllDay, setIsAllDay] = useState(false);
+  const [attendees, setAttendees] = useState<IcsAttendee[]>([]);
+  const [recurrence, setRecurrence] = useState<IcsRecurrenceRule | undefined>(
+    undefined,
+  );
+  const [alarms, setAlarms] = useState<IcsAlarm[]>([]);
+  const [videoConferenceUrl, setVideoConferenceUrl] = useState("");
+  const [attachments, setAttachments] = useState<AttachmentMeta[]>([]);
+  const [status, setStatus] = useState<IcsEventStatusType>("CONFIRMED");
+  const [visibility, setVisibility] = useState<IcsClassType>("PUBLIC");
+  const [availability, setAvailability] =
+    useState<IcsTimeTransparentType>("OPAQUE");
+  const [expandedSections, setExpandedSections] = useState<
+    Set<EventFormSectionId>
+  >(new Set());
+
+  // Reset form when event changes
+  useEffect(() => {
+    setTitle(event?.summary || "");
+    setDescription(event?.description || "");
+    setLocation(event?.location || "");
+    setSelectedCalendarUrl(calendarUrl);
+    setStatus(event?.status || "CONFIRMED");
+    setVisibility(event?.class || "PUBLIC");
+    setAvailability(event?.timeTransparent || "OPAQUE");
+    setVideoConferenceUrl(event?.url || "");
+    setAlarms(event?.alarms || []);
+    setAttachments([]);
+
+    // Initialize attendees
+    if (event?.attendees && event.attendees.length > 0) {
+      setAttendees(event.attendees);
+    } else {
+      setAttendees([]);
+    }
+
+    // Initialize recurrence
+    if (event?.recurrenceRule) {
+      setRecurrence(event.recurrenceRule);
+    } else {
+      setRecurrence(undefined);
+    }
+
+    // Initialize all-day
+    const eventIsAllDay = event?.start?.type === "DATE";
+    setIsAllDay(eventIsAllDay);
+
+    const initialExpanded = new Set<EventFormSectionId>();
+    if (event?.location) initialExpanded.add("location");
+    if (event?.description) initialExpanded.add("description");
+    if (event?.recurrenceRule) initialExpanded.add("recurrence");
+    if (event?.url) initialExpanded.add("videoConference");
+
+    if (mode === "create") {
+      initialExpanded.add("attendees");
+    } else if (
+      event?.attendees?.some(
+        (att) =>
+          att.email.toLowerCase() !== organizer?.email?.toLowerCase(),
+      )
+    ) {
+      initialExpanded.add("attendees");
+    }
+
+    setExpandedSections(initialExpanded);
+
+    // Parse start/end dates
+    if (event?.start?.date) {
+      const startDate =
+        event.start.date instanceof Date
+          ? event.start.date
+          : new Date(event.start.date);
+      const isFakeUtc = Boolean(event.start.local?.timezone);
+
+      if (eventIsAllDay) {
+        setStartDateTime(formatDateLocal(startDate, isFakeUtc));
+      } else {
+        setStartDateTime(formatDateTimeLocal(startDate, isFakeUtc));
+      }
+    } else {
+      if (eventIsAllDay) {
+        setStartDateTime(formatDateLocal(new Date()));
+      } else {
+        setStartDateTime(formatDateTimeLocal(new Date()));
+      }
+    }
+
+    if (event?.end?.date) {
+      const endDate =
+        event.end.date instanceof Date
+          ? event.end.date
+          : new Date(event.end.date);
+      const isFakeUtc = Boolean(event.end.local?.timezone);
+
+      if (eventIsAllDay) {
+        const displayEndDate = new Date(endDate);
+        displayEndDate.setUTCDate(displayEndDate.getUTCDate() - 1);
+        setEndDateTime(formatDateLocal(displayEndDate, isFakeUtc));
+      } else {
+        setEndDateTime(formatDateTimeLocal(endDate, isFakeUtc));
+      }
+    } else {
+      if (eventIsAllDay) {
+        setEndDateTime(formatDateLocal(new Date()));
+      } else {
+        const defaultEnd = new Date();
+        defaultEnd.setHours(defaultEnd.getHours() + 1);
+        setEndDateTime(formatDateTimeLocal(defaultEnd));
+      }
+    }
+  }, [event, calendarUrl, mode, organizer?.email]);
+
+  const toggleSection = useCallback((sectionId: EventFormSectionId) => {
+    setExpandedSections((prev) => {
+      const next = new Set(prev);
+      if (next.has(sectionId)) {
+        next.delete(sectionId);
+      } else {
+        next.add(sectionId);
+      }
+      return next;
+    });
+  }, []);
+
+  const isSectionExpanded = useCallback(
+    (sectionId: EventFormSectionId) => expandedSections.has(sectionId),
+    [expandedSections],
+  );
+
+  const handleStartDateChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newStartValue = e.target.value;
+
+      if (isAllDay) {
+        const oldStart = parseDateLocal(startDateTime);
+        const oldEnd = parseDateLocal(endDateTime);
+        const duration = oldEnd.getTime() - oldStart.getTime();
+        const newStart = parseDateLocal(newStartValue);
+        const newEnd = new Date(newStart.getTime() + duration);
+        setStartDateTime(newStartValue);
+        setEndDateTime(formatDateLocal(newEnd));
+      } else {
+        const oldStart = parseDateTimeLocal(startDateTime);
+        const oldEnd = parseDateTimeLocal(endDateTime);
+        const duration = oldEnd.getTime() - oldStart.getTime();
+        const newStart = parseDateTimeLocal(newStartValue);
+        const newEnd = new Date(newStart.getTime() + duration);
+        setStartDateTime(newStartValue);
+        setEndDateTime(formatDateTimeLocal(newEnd));
+      }
+    },
+    [isAllDay, startDateTime, endDateTime],
+  );
+
+  const handleAllDayChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newIsAllDay = e.target.checked;
+      setIsAllDay(newIsAllDay);
+
+      if (newIsAllDay) {
+        const start = parseDateTimeLocal(startDateTime);
+        const end = parseDateTimeLocal(endDateTime);
+        setStartDateTime(formatDateLocal(start));
+        setEndDateTime(formatDateLocal(end));
+      } else {
+        const start = parseDateLocal(startDateTime);
+        const end = parseDateLocal(endDateTime);
+        setStartDateTime(formatDateTimeLocal(start));
+        setEndDateTime(formatDateTimeLocal(end));
+      }
+    },
+    [startDateTime, endDateTime],
+  );
+
+  const toIcsEvent = useCallback((): IcsEvent => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { duration: _duration, ...eventWithoutDuration } = event ?? {};
+
+    if (isAllDay) {
+      const startDate = parseDateLocal(startDateTime);
+      const endDate = parseDateLocal(endDateTime);
+      const utcStart = new Date(
+        Date.UTC(
+          startDate.getFullYear(),
+          startDate.getMonth(),
+          startDate.getDate(),
+        ),
+      );
+      const utcEnd = new Date(
+        Date.UTC(
+          endDate.getFullYear(),
+          endDate.getMonth(),
+          endDate.getDate() + 1,
+        ),
+      );
+
+      return {
+        ...eventWithoutDuration,
+        uid: event?.uid || crypto.randomUUID(),
+        summary: title,
+        description: description || undefined,
+        location: location || undefined,
+        stamp: event?.stamp || { date: new Date() },
+        start: { date: utcStart, type: "DATE" },
+        end: { date: utcEnd, type: "DATE" },
+        organizer,
+        attendees: attendees.length > 0 ? attendees : undefined,
+        recurrenceRule: recurrence,
+        alarms: alarms.length > 0 ? alarms : undefined,
+        url: videoConferenceUrl || undefined,
+        status,
+        class: visibility,
+        timeTransparent: availability,
+      } as IcsEvent;
+    }
+
+    const startDate = parseDateTimeLocal(startDateTime);
+    const endDate = parseDateTimeLocal(endDateTime);
+    const fakeUtcStart = new Date(
+      Date.UTC(
+        startDate.getFullYear(),
+        startDate.getMonth(),
+        startDate.getDate(),
+        startDate.getHours(),
+        startDate.getMinutes(),
+        startDate.getSeconds(),
+      ),
+    );
+    const fakeUtcEnd = new Date(
+      Date.UTC(
+        endDate.getFullYear(),
+        endDate.getMonth(),
+        endDate.getDate(),
+        endDate.getHours(),
+        endDate.getMinutes(),
+        endDate.getSeconds(),
+      ),
+    );
+
+    return {
+      ...eventWithoutDuration,
+      uid: event?.uid || crypto.randomUUID(),
+      summary: title,
+      description: description || undefined,
+      location: location || undefined,
+      stamp: event?.stamp || { date: new Date() },
+      start: {
+        date: fakeUtcStart,
+        type: "DATE-TIME",
+        local: {
+          date: fakeUtcStart,
+          timezone: BROWSER_TIMEZONE,
+          tzoffset: adapter.getTimezoneOffset(startDate, BROWSER_TIMEZONE),
+        },
+      },
+      end: {
+        date: fakeUtcEnd,
+        type: "DATE-TIME",
+        local: {
+          date: fakeUtcEnd,
+          timezone: BROWSER_TIMEZONE,
+          tzoffset: adapter.getTimezoneOffset(endDate, BROWSER_TIMEZONE),
+        },
+      },
+      organizer,
+      attendees: attendees.length > 0 ? attendees : undefined,
+      recurrenceRule: recurrence,
+      alarms: alarms.length > 0 ? alarms : undefined,
+      url: videoConferenceUrl || undefined,
+      status,
+      class: visibility,
+      timeTransparent: availability,
+    } as IcsEvent;
+  }, [
+    event,
+    isAllDay,
+    startDateTime,
+    endDateTime,
+    title,
+    description,
+    location,
+    organizer,
+    attendees,
+    recurrence,
+    alarms,
+    videoConferenceUrl,
+    status,
+    visibility,
+    availability,
+    adapter,
+  ]);
+
+  return {
+    // Basic fields
+    title,
+    setTitle,
+    description,
+    setDescription,
+    location,
+    setLocation,
+    startDateTime,
+    endDateTime,
+    setEndDateTime,
+    selectedCalendarUrl,
+    setSelectedCalendarUrl,
+    isAllDay,
+
+    // Complex fields
+    attendees,
+    setAttendees,
+    recurrence,
+    setRecurrence,
+    alarms,
+    setAlarms,
+    videoConferenceUrl,
+    setVideoConferenceUrl,
+    attachments,
+    setAttachments,
+    status,
+    setStatus,
+    visibility,
+    setVisibility,
+    availability,
+    setAvailability,
+
+    // Section management
+    toggleSection,
+    isSectionExpanded,
+
+    // Handlers
+    handleStartDateChange,
+    handleAllDayChange,
+
+    // Conversion
+    toIcsEvent,
+  };
+};
diff --git a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/types.ts b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/types.ts
index 9535292..fcfe610 100644
--- a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/types.ts
+++ b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/types.ts
@@ -2,7 +2,15 @@
  * Type definitions for Scheduler components.
  */
 
-import type { IcsEvent, IcsRecurrenceRule } from "ts-ics";
+import type {
+  IcsEvent,
+  IcsRecurrenceRule,
+  IcsAlarm,
+  IcsAttendee,
+  IcsClassType,
+  IcsEventStatusType,
+  IcsTimeTransparentType,
+} from "ts-ics";
 import type { CalDavCalendar } from "../../services/dav/types/caldav-service";
 import type { EventCalendarAdapter } from "../../services/dav/EventCalendarAdapter";
 
@@ -63,6 +71,26 @@ export interface EventModalState {
   etag?: string;
 }
 
+/**
+ * Sections toggled via pills in the event modal.
+ */
+export type EventFormSectionId =
+  | "location"
+  | "description"
+  | "recurrence"
+  | "attendees"
+  | "videoConference";
+
+/**
+ * Attachment metadata (UI only, no actual file upload).
+ */
+export interface AttachmentMeta {
+  id: string;
+  name: string;
+  size: number;
+  type: string;
+}
+
 /**
  * Form state for the event modal.
  */
@@ -74,9 +102,15 @@ export interface EventFormState {
   endDateTime: string;
   selectedCalendarUrl: string;
   isAllDay: boolean;
+  attendees: IcsAttendee[];
   recurrence: IcsRecurrenceRule | undefined;
-  showRecurrence: boolean;
-  showAttendees: boolean;
+  alarms: IcsAlarm[];
+  videoConferenceUrl: string;
+  attachments: AttachmentMeta[];
+  status: IcsEventStatusType;
+  visibility: IcsClassType;
+  availability: IcsTimeTransparentType;
+  expandedSections: Set<EventFormSectionId>;
 }
 
 /**
diff --git a/src/frontend/apps/calendars/src/features/i18n/translations.json b/src/frontend/apps/calendars/src/features/i18n/translations.json
index 2b91297..50928d8 100644
--- a/src/frontend/apps/calendars/src/features/i18n/translations.json
+++ b/src/frontend/apps/calendars/src/features/i18n/translations.json
@@ -131,7 +131,48 @@
           "delete": "Delete",
           "cancel": "Cancel",
           "save": "Save",
-          "create": "Create"
+          "create": "Create",
+          "sections": {
+            "addRecurrence": "Add recurrence",
+            "addLocation": "Add location",
+            "addVideoConference": "Visio",
+            "createVisio": "Add video conference",
+            "videoLink": "Video conference link",
+            "addAttendees": "Add participants",
+            "addDescription": "Add description",
+            "addReminder": "Add reminder",
+            "addAttachment": "Add attachment",
+            "moreOptions": "More options",
+            "reminder_one": "reminder",
+            "reminder_other": "reminders",
+            "attachment_one": "attachment",
+            "attachment_other": "attachments"
+          },
+          "reminders": {
+            "5min": "5 minutes before",
+            "15min": "15 minutes before",
+            "30min": "30 minutes before",
+            "1hour": "1 hour before",
+            "1day": "1 day before",
+            "1week": "1 week before"
+          },
+          "status": {
+            "label": "Status",
+            "confirmed": "Confirmed",
+            "tentative": "Tentative",
+            "cancelled": "Cancelled"
+          },
+          "visibility": {
+            "label": "Visibility",
+            "public": "Public",
+            "private": "Private",
+            "confidential": "Confidential"
+          },
+          "availability": {
+            "label": "Availability",
+            "busy": "Busy",
+            "free": "Free"
+          }
         },
         "list": {
           "myCalendars": "My calendars",
@@ -170,7 +211,7 @@
         },
         "recurrence": {
           "label": "Repeat",
-          "none": "No",
+          "none": "Does not repeat",
           "daily": "Daily",
           "weekly": "Weekly",
           "monthly": "Monthly",
@@ -700,7 +741,48 @@
           "delete": "Supprimer",
           "cancel": "Annuler",
           "save": "Enregistrer",
-          "create": "Créer"
+          "create": "Créer",
+          "sections": {
+            "addRecurrence": "Ajouter une récurrence",
+            "addLocation": "Ajouter un lieu",
+            "addVideoConference": "Visio",
+            "createVisio": "Ajouter une visioconférence",
+            "videoLink": "Lien de visioconférence",
+            "addAttendees": "Ajouter des participants",
+            "addDescription": "Ajouter une description",
+            "addReminder": "Ajouter un rappel",
+            "addAttachment": "Ajouter une pièce jointe",
+            "moreOptions": "Plus d'options",
+            "reminder_one": "rappel",
+            "reminder_other": "rappels",
+            "attachment_one": "pièce jointe",
+            "attachment_other": "pièces jointes"
+          },
+          "reminders": {
+            "5min": "5 minutes avant",
+            "15min": "15 minutes avant",
+            "30min": "30 minutes avant",
+            "1hour": "1 heure avant",
+            "1day": "1 jour avant",
+            "1week": "1 semaine avant"
+          },
+          "status": {
+            "label": "Statut",
+            "confirmed": "Confirmé",
+            "tentative": "Provisoire",
+            "cancelled": "Annulé"
+          },
+          "visibility": {
+            "label": "Visibilité",
+            "public": "Public",
+            "private": "Privé",
+            "confidential": "Confidentiel"
+          },
+          "availability": {
+            "label": "Disponibilité",
+            "busy": "Occupé",
+            "free": "Libre"
+          }
         },
         "list": {
           "myCalendars": "Mes agendas",
@@ -739,7 +821,7 @@
         },
         "recurrence": {
           "label": "Répéter",
-          "none": "Non",
+          "none": "Ne se répète pas",
           "daily": "Tous les jours",
           "weekly": "Toutes les semaines",
           "monthly": "Tous les mois",
@@ -1016,7 +1098,48 @@
           "delete": "Verwijderen",
           "cancel": "Annuleren",
           "save": "Opslaan",
-          "create": "Aanmaken"
+          "create": "Aanmaken",
+          "sections": {
+            "addRecurrence": "Herhaling toevoegen",
+            "addLocation": "Locatie toevoegen",
+            "addVideoConference": "Visio",
+            "createVisio": "Add video conference",
+            "videoLink": "Videoconferentie link",
+            "addAttendees": "Deelnemers toevoegen",
+            "addDescription": "Beschrijving toevoegen",
+            "addReminder": "Herinnering toevoegen",
+            "addAttachment": "Bijlage toevoegen",
+            "moreOptions": "Meer opties",
+            "reminder_one": "herinnering",
+            "reminder_other": "herinneringen",
+            "attachment_one": "bijlage",
+            "attachment_other": "bijlagen"
+          },
+          "reminders": {
+            "5min": "5 minuten voor",
+            "15min": "15 minuten voor",
+            "30min": "30 minuten voor",
+            "1hour": "1 uur voor",
+            "1day": "1 dag voor",
+            "1week": "1 week voor"
+          },
+          "status": {
+            "label": "Status",
+            "confirmed": "Bevestigd",
+            "tentative": "Voorlopig",
+            "cancelled": "Geannuleerd"
+          },
+          "visibility": {
+            "label": "Zichtbaarheid",
+            "public": "Openbaar",
+            "private": "Privé",
+            "confidential": "Vertrouwelijk"
+          },
+          "availability": {
+            "label": "Beschikbaarheid",
+            "busy": "Bezet",
+            "free": "Vrij"
+          }
         },
         "list": {
           "myCalendars": "Mijn agenda's",
@@ -1055,7 +1178,7 @@
         },
         "recurrence": {
           "label": "Herhalen",
-          "none": "Nee",
+          "none": "Niet herhalen",
           "daily": "Dagelijks",
           "weekly": "Wekelijks",
           "monthly": "Maandelijks",
diff --git a/src/frontend/apps/calendars/src/styles/globals.scss b/src/frontend/apps/calendars/src/styles/globals.scss
index 0575d14..b9fe4c5 100644
--- a/src/frontend/apps/calendars/src/styles/globals.scss
+++ b/src/frontend/apps/calendars/src/styles/globals.scss
@@ -18,6 +18,9 @@
 @use "./../features/calendar/components/scheduler/Scheduler.scss";
 @use "./../features/calendar/components/scheduler/scheduler-theme.scss";
 @use "./../features/calendar/components/scheduler/SchedulerToolbar.scss";
+@use "./../features/calendar/components/scheduler/event-modal-sections/SectionRow.scss";
+@use "./../features/calendar/components/scheduler/event-modal-sections/InvitationResponseSection.scss";
+@use "./../features/calendar/components/scheduler/event-modal-sections/SectionPill.scss";
 @use "./../pages/index.scss" as *;
 @use "./../pages/calendar.scss" as *;
 html,
@@ -77,5 +80,26 @@ body {
 
 .c__datagrid--empty,
 .c__datagrid thead {
-  transition: background-color 0.3s ease, box-shadow 0.3s ease;
+  transition:
+    background-color 0.3s ease,
+    box-shadow 0.3s ease;
+}
+
+.c__modal__title {
+  text-align: left;
+  padding: 0;
+  font-size: 1.125rem;
+  margin-bottom: 1rem;
+}
+
+.c__modal__close button {
+  padding: 0;
+  font-size: 88px;
+  top: -5px !important;
+  width: 28px !important;
+  height: 28px;
+}
+
+.c__modal__scroller {
+  padding-top: 1rem;
 }
diff --git a/src/frontend/yarn.lock b/src/frontend/yarn.lock
index 1a1aec7..6eef404 100644
--- a/src/frontend/yarn.lock
+++ b/src/frontend/yarn.lock
@@ -489,10 +489,10 @@
   dependencies:
     tslib "^2.8.0"
 
-"@gouvfr-lasuite/cunningham-react@4.1.0":
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/@gouvfr-lasuite/cunningham-react/-/cunningham-react-4.1.0.tgz#3a1347a7e05f9add18462d5b1ded3e26635bdd37"
-  integrity sha512-r6QKi4qcPEG4Vxe7rKt89d7I2KYD9gvOKxkzlDAVBjo9DYnQ4ZM9T5tG/W0/oBbcURTFqxINfFhaF8CyviiOjw==
+"@gouvfr-lasuite/cunningham-react@4.2.0":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@gouvfr-lasuite/cunningham-react/-/cunningham-react-4.2.0.tgz#19bc8a658cc069d7b9397cba735b194e578b9b1f"
+  integrity sha512-97eTA+v/ySsl6d5NCn6D2mVoNqrJnHWG+PWCY1L/Fz8MEx18sPwqUsqdaIuSj0C+iug0SCJ6Ufx57MURHCf0oA==
   dependencies:
     "@fontsource-variable/roboto-flex" "5.2.5"
     "@fontsource/material-icons-outlined" "5.2.5"
@@ -529,16 +529,16 @@
   resolved "https://registry.yarnpkg.com/@gouvfr-lasuite/integration/-/integration-1.0.2.tgz#ed0000f4b738c5a19bb60f5b80a9a2f5d9414234"
   integrity sha512-npOotZQSyu6SffHiPP+jQVOkJ3qW2KE2cANhEK92sNLX9uZqQaCqljO5GhzsBmh0lB76fiXnrr9i8SIpnDUSZg==
 
-"@gouvfr-lasuite/ui-kit@0.18.7":
-  version "0.18.7"
-  resolved "https://registry.yarnpkg.com/@gouvfr-lasuite/ui-kit/-/ui-kit-0.18.7.tgz#1c3912f2b366ece09616937c2a5901300fe25a35"
-  integrity sha512-1Bw1FSol9+mxztiaPEyfwVf9/1Vns7OJVEzvwLTlChbo6cS8FjuP/ZYG57RMvschsN4kfMzC03YmxcVdS0L9Nw==
+"@gouvfr-lasuite/ui-kit@0.19.6":
+  version "0.19.6"
+  resolved "https://registry.yarnpkg.com/@gouvfr-lasuite/ui-kit/-/ui-kit-0.19.6.tgz#bc9e32f5b575147bd92e19172aaac794522c4772"
+  integrity sha512-PY0Jh2Wno/+dBVy89OdAook3h9GfrJXXVyOeNLA5mJ9NlNQBq0XKxSB87iqzDn/CBe1aUSLJY47QWzRWQQ0wXQ==
   dependencies:
     "@dnd-kit/core" "6.3.1"
     "@dnd-kit/modifiers" "9.0.0"
     "@dnd-kit/sortable" "10.0.0"
     "@fontsource/material-icons" "5.2.5"
-    "@gouvfr-lasuite/cunningham-react" "4.1.0"
+    "@gouvfr-lasuite/cunningham-react" "4.2.0"
     "@gouvfr-lasuite/cunningham-tokens" "3.1.0"
     "@gouvfr-lasuite/integration" "1.0.2"
     "@types/node" "22.10.7"