From 82bc5dd04eb978e1fa609ce313050c2882964699 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Mon, 23 Feb 2026 11:35:57 +0700
Subject: [PATCH] refactor(frontend): extract calendar scene into workspace
 component

---
 .../components/workspace/CrmWorkspaceApp.vue  | 558 +++--------------
 .../workspace/calendar/CrmCalendarPanel.vue   | 559 ++++++++++++++++++
 2 files changed, 646 insertions(+), 471 deletions(-)
 create mode 100644 frontend/app/components/workspace/calendar/CrmCalendarPanel.vue

diff --git a/frontend/app/components/workspace/CrmWorkspaceApp.vue b/frontend/app/components/workspace/CrmWorkspaceApp.vue
index 4d9d2ee..374354b 100644
--- a/frontend/app/components/workspace/CrmWorkspaceApp.vue
+++ b/frontend/app/components/workspace/CrmWorkspaceApp.vue
@@ -2,6 +2,7 @@
 import { nextTick, onBeforeUnmount, onMounted } from "vue";
 import CrmAuthLoading from "~~/app/components/workspace/auth/CrmAuthLoading.vue";
 import CrmAuthLoginForm from "~~/app/components/workspace/auth/CrmAuthLoginForm.vue";
+import CrmCalendarPanel from "~~/app/components/workspace/calendar/CrmCalendarPanel.vue";
 import CrmDocumentsPanel from "~~/app/components/workspace/documents/CrmDocumentsPanel.vue";
 import CrmWorkspaceTopbar from "~~/app/components/workspace/header/CrmWorkspaceTopbar.vue";
 import CrmPilotSidebar from "~~/app/components/workspace/pilot/CrmPilotSidebar.vue";
@@ -2364,6 +2365,41 @@ const calendarZoomOverlayRef = ref<HTMLElement | null>(null);
 const calendarHoveredMonthIndex = ref<number | null>(null);
 const calendarHoveredWeekStartKey = ref("");
 const calendarHoveredDayKey = ref("");
+
+function setCalendarContentWrapRef(element: HTMLElement | null) {
+  calendarContentWrapRef.value = element;
+}
+
+function setCalendarContentScrollRef(element: HTMLElement | null) {
+  calendarContentScrollRef.value = element;
+}
+
+function setCalendarSceneRef(element: HTMLElement | null) {
+  calendarSceneRef.value = element;
+}
+
+function setCalendarZoomOverlayRef(element: HTMLElement | null) {
+  calendarZoomOverlayRef.value = element;
+}
+
+function setCalendarHoveredMonthIndex(value: number | null) {
+  calendarHoveredMonthIndex.value = value;
+}
+
+function setCalendarHoveredWeekStartKey(value: string) {
+  calendarHoveredWeekStartKey.value = value;
+}
+
+function setCalendarHoveredDayKey(value: string) {
+  calendarHoveredDayKey.value = value;
+}
+
+function onCalendarSceneMouseLeave() {
+  calendarHoveredMonthIndex.value = null;
+  calendarHoveredWeekStartKey.value = "";
+  calendarHoveredDayKey.value = "";
+  clearCalendarZoomPrime();
+}
 const calendarZoomOverlay = ref<{ active: boolean } & CalendarRect>({
   active: false,
   left: 0,
@@ -4820,250 +4856,57 @@ async function decideFeedCard(card: FeedCard, decision: "accepted" | "rejected")
             class="min-h-0 flex-1"
             :class="selectedTab === 'documents' || (selectedTab === 'communications' && peopleLeftMode === 'contacts') ? 'px-0 pt-0 pb-0' : 'px-3 pt-3 pb-0 md:px-4 md:pt-4 md:pb-0'"
           >
-	            <section
-                v-if="selectedTab === 'communications' && peopleLeftMode === 'calendar'"
-                class="relative flex h-full min-h-0 flex-col gap-3"
-                :class="[
-                  contextPickerEnabled ? 'context-scope-block context-scope-block-active' : '',
-                  hasContextScope('calendar') ? 'context-scope-block-selected' : '',
-                ]"
-                @click="toggleContextScope('calendar')"
-              >
-              <span
-                v-if="contextPickerEnabled"
-                class="context-scope-label"
-              >{{ contextScopeLabel('calendar') }}</span>
-	            <div class="grid grid-cols-[auto_1fr_auto] items-center gap-2">
-              <div class="flex items-center gap-1">
-                <button class="btn btn-xs" @click="setToday">Today</button>
-              </div>
-
-              <div class="text-center text-sm font-medium">
-                {{ calendarPeriodLabel }}
-              </div>
-
-              <div class="justify-self-end calendar-zoom-inline" @click.stop>
-                <input
-                  class="calendar-zoom-slider"
-                  type="range"
-                  min="0"
-                  max="3"
-                  step="1"
-                  :value="calendarZoomLevelIndex"
-                  aria-label="Calendar zoom level"
-                  @input="onCalendarZoomSliderInput"
-                >
-                <div class="calendar-zoom-marks" aria-hidden="true">
-                  <span
-                    v-for="index in 4"
-                    :key="`calendar-zoom-mark-${index}`"
-                    class="calendar-zoom-mark"
-                    :class="calendarZoomLevelIndex === index - 1 ? 'calendar-zoom-mark-active' : ''"
-                  />
-                </div>
-              </div>
-	            </div>
-
-            <article
-              v-if="focusedCalendarEvent"
-              class="rounded-xl border border-success/50 bg-success/10 px-3 py-2"
-            >
-              <p class="text-xs font-semibold uppercase tracking-wide text-success/80">Review focus event</p>
-              <p class="text-sm font-medium text-base-content">{{ focusedCalendarEvent.title }}</p>
-              <p class="text-xs text-base-content/70">
-                {{ formatDay(focusedCalendarEvent.start) }} · {{ formatTime(focusedCalendarEvent.start) }} - {{ formatTime(focusedCalendarEvent.end) }}
-              </p>
-              <p class="mt-1 text-xs text-base-content/80">{{ focusedCalendarEvent.note || "No note" }}</p>
-            </article>
-
-	            <div ref="calendarContentWrapRef" class="calendar-content-wrap min-h-0 flex-1">
-              <button
-                class="calendar-side-nav calendar-side-nav-left"
-                type="button"
-                title="Previous period"
-                @click="shiftCalendar(-1)"
-              >
-                <span>←</span>
-              </button>
-	              <button
-	                class="calendar-side-nav calendar-side-nav-right"
-                type="button"
-                title="Next period"
-                @click="shiftCalendar(1)"
-	              >
-	                <span>→</span>
-	              </button>
-		            <div
-		                ref="calendarContentScrollRef"
-		                class="calendar-content-scroll min-h-0 h-full overflow-y-auto pr-1"
-		                @wheel.prevent="onCalendarHierarchyWheel"
-		              >
-		                <div
-		                  ref="calendarSceneRef"
-		                  :class="[
-	                        'calendar-scene',
-	                        normalizedCalendarView === 'day' ? 'cursor-zoom-out' : 'cursor-zoom-in',
-	                        calendarSceneMasked ? 'calendar-scene-hidden' : '',
-	                      ]"
-		                  :style="calendarSceneTransformStyle"
-		                  @mouseleave="calendarHoveredMonthIndex = null; calendarHoveredWeekStartKey = ''; calendarHoveredDayKey = ''; clearCalendarZoomPrime()"
-		                >
-	                <div class="grid gap-2" :class="calendarView === 'year' ? 'sm:grid-cols-2 xl:grid-cols-3' : 'grid-cols-1'">
-		                  <article
-		                    v-for="item in yearMonths"
-		                    :key="`year-month-${item.monthIndex}`"
-		                    v-show="calendarView === 'year' || item.monthIndex === calendarCursor.getMonth()"
-		                    class="group relative rounded-xl border border-base-300 p-3 text-left transition calendar-hover-targetable"
-	                      :class="[
-	                        calendarView === 'year' ? 'hover:border-primary/50 hover:bg-primary/5 cursor-zoom-in' : 'cursor-default min-h-[26rem] bg-base-100',
-	                        calendarHoveredMonthIndex === item.monthIndex ? 'calendar-hover-target' : '',
-	                        calendarZoomPrimeToken === calendarPrimeMonthToken(item.monthIndex) ? 'calendar-zoom-prime-active' : '',
-	                      ]"
-		                      :style="calendarPrimeStyle(calendarPrimeMonthToken(item.monthIndex))"
-		                    :data-calendar-month-index="item.monthIndex"
-		                    @mouseenter="calendarHoveredMonthIndex = item.monthIndex"
-		                    @click="calendarView === 'year' ? zoomToMonth(item.monthIndex) : undefined"
-		                  >
-	                    <p class="font-medium">{{ item.label }}</p>
-	                    <p class="text-xs text-base-content/60">{{ item.count }} events</p>
-	                    <button
-	                      v-if="calendarView === 'year' && item.first"
-	                      class="mt-1 block w-full text-left text-xs text-base-content/70 hover:underline"
-	                      @click.stop="openThreadFromCalendarItem(item.first)"
-	                    >
-	                      {{ formatDay(item.first.start) }} · {{ item.first.title }}
-	                    </button>
-
-	                    <div
-	                      v-if="item.monthIndex === calendarCursor.getMonth() && (calendarView === 'month' || calendarView === 'agenda')"
-	                      class="mt-3 space-y-1"
-	                    >
-	                      <div class="grid grid-cols-7 gap-1 text-center text-xs font-semibold text-base-content/60">
-	                        <span>Sun</span>
-	                        <span>Mon</span>
-	                        <span>Tue</span>
-	                        <span>Wed</span>
-	                        <span>Thu</span>
-	                        <span>Fri</span>
-	                        <span>Sat</span>
-	                      </div>
-
-	                      <div class="space-y-1">
-		                        <div
-		                          v-for="row in monthRows"
-		                          :key="row.key"
-		                          class="group relative calendar-hover-targetable"
-	                            :class="[
-	                              calendarHoveredWeekStartKey === row.startKey ? 'calendar-hover-target' : '',
-	                              calendarZoomPrimeToken === calendarPrimeWeekToken(row.startKey) ? 'calendar-zoom-prime-active' : '',
-	                            ]"
-	                            :style="calendarPrimeStyle(calendarPrimeWeekToken(row.startKey))"
-		                          :data-calendar-week-start-key="row.startKey"
-		                          @mouseenter="calendarHoveredWeekStartKey = row.startKey"
-		                        >
-		                          <div class="grid grid-cols-7 gap-1">
-		                            <button
-		                              v-for="cell in row.cells"
-		                              :key="cell.key"
-		                              class="group relative min-h-24 rounded-lg border p-1 text-left"
-		                              :class="[
-		                                cell.inMonth ? 'border-base-300 bg-base-100' : 'border-base-200 bg-base-200/40 text-base-content/40',
-		                                selectedDateKey === cell.key ? 'border-primary bg-primary/5' : '',
-		                                monthCellHasFocusedEvent(cell.events) ? 'border-success/60 bg-success/10' : '',
-		                              ]"
-		                              :data-calendar-day-key="cell.key"
-		                              @mouseenter="calendarHoveredDayKey = cell.key"
-		                              @click="pickDate(cell.key)"
-		                            >
-		                              <p class="mb-1 text-xs font-semibold">{{ cell.day }}</p>
-		                              <button
-		                                v-for="event in monthCellEvents(cell.events)"
-		                                :key="event.id"
-		                                class="block w-full truncate rounded px-1 text-left text-[10px] text-base-content/70 transition hover:underline"
-		                                :class="isReviewHighlightedEvent(event.id) ? 'bg-success/20 text-success-content ring-1 ring-success/40' : ''"
-	                                @click.stop="openThreadFromCalendarItem(event)"
-	                              >
-	                                {{ formatTime(event.start) }} {{ event.title }}
-	                              </button>
-		                            </button>
-		                          </div>
-		                        </div>
-	                      </div>
-	                    </div>
-
-	                    <div
-	                      v-else-if="item.monthIndex === calendarCursor.getMonth() && calendarView === 'week'"
-	                      class="mt-3 calendar-week-scroll overflow-x-auto pb-1"
-	                    >
-	                      <div class="calendar-week-grid">
-		                        <article
-		                          v-for="day in weekDays"
-		                          :key="day.key"
-		                          class="group relative flex min-h-[18rem] flex-col rounded-xl border border-base-300 bg-base-100 p-2.5 cursor-zoom-in calendar-hover-targetable"
-		                          :class="[
-		                            selectedDateKey === day.key ? 'border-primary bg-primary/5' : '',
-		                            calendarHoveredDayKey === day.key ? 'calendar-hover-target' : '',
-		                            calendarZoomPrimeToken === calendarPrimeDayToken(day.key) ? 'calendar-zoom-prime-active' : '',
-		                          ]"
-		                          :style="calendarPrimeStyle(calendarPrimeDayToken(day.key))"
-		                          :data-calendar-day-key="day.key"
-		                          @mouseenter="calendarHoveredDayKey = day.key"
-		                          @click="pickDate(day.key)"
-	                        >
-		                          <div class="mb-2 flex items-start justify-between gap-2">
-		                            <p class="text-sm font-semibold leading-tight">{{ day.label }} {{ day.day }}</p>
-		                          </div>
-		                          <div class="space-y-1.5">
-		                            <button
-		                              v-for="event in day.events"
-		                              :key="event.id"
-		                              class="block w-full rounded-md px-2 py-1.5 text-left text-xs"
-		                              :class="isReviewHighlightedEvent(event.id) ? 'bg-success/20 ring-1 ring-success/45' : 'bg-base-200 hover:bg-base-300/80'"
-		                              @click.stop="openThreadFromCalendarItem(event)"
-		                            >
-		                              {{ formatTime(event.start) }} - {{ event.title }} ({{ event.contact }})
-		                            </button>
-		                            <p v-if="day.events.length === 0" class="pt-1 text-xs text-base-content/50">No events</p>
-		                          </div>
-		                        </article>
-	                      </div>
-	                    </div>
-
-	                    <div
-	                      v-else-if="item.monthIndex === calendarCursor.getMonth() && calendarView === 'day'"
-	                      class="mt-3 space-y-2"
-	                    >
-	                      <button
-	                        v-for="event in selectedDayEvents"
-	                        :key="event.id"
-	                        class="block w-full rounded-xl border border-base-300 p-3 text-left transition hover:bg-base-200/60"
-	                        :class="isReviewHighlightedEvent(event.id) ? 'border-success/60 bg-success/10' : ''"
-	                        @click="openThreadFromCalendarItem(event)"
-	                      >
-	                        <p class="font-medium">{{ event.title }}</p>
-	                        <p class="text-xs text-base-content/60">{{ event.contact }}</p>
-	                        <p class="text-xs text-base-content/60">{{ formatTime(event.start) }} - {{ formatTime(event.end) }}</p>
-	                        <p class="mt-1 text-sm text-base-content/80">{{ event.note }}</p>
-	                      </button>
-	                      <p v-if="selectedDayEvents.length === 0" class="text-sm text-base-content/60">No events on this day.</p>
-	                    </div>
-	                  </article>
-	                </div>
-		                </div>
-		            </div>
-              <div
-                v-if="calendarZoomOverlay.active"
-                ref="calendarZoomOverlayRef"
-                class="calendar-zoom-overlay"
-                :style="calendarZoomOverlayStyle"
-              >
-                <div v-if="calendarZoomGhost" class="calendar-zoom-overlay-content">
-                  <p class="calendar-zoom-overlay-title">{{ calendarZoomGhost.title }}</p>
-                  <p v-if="calendarZoomGhost.subtitle" class="calendar-zoom-overlay-subtitle">{{ calendarZoomGhost.subtitle }}</p>
-                </div>
-              </div>
-		            </div>
-	            </section>
+            <CrmCalendarPanel
+              v-if="selectedTab === 'communications' && peopleLeftMode === 'calendar'"
+              :context-picker-enabled="contextPickerEnabled"
+              :has-context-scope="hasContextScope"
+              :toggle-context-scope="toggleContextScope"
+              :context-scope-label="contextScopeLabel"
+              :set-today="setToday"
+              :calendar-period-label="calendarPeriodLabel"
+              :calendar-zoom-level-index="calendarZoomLevelIndex"
+              :on-calendar-zoom-slider-input="onCalendarZoomSliderInput"
+              :focused-calendar-event="focusedCalendarEvent"
+              :format-day="formatDay"
+              :format-time="formatTime"
+              :set-calendar-content-wrap-ref="setCalendarContentWrapRef"
+              :shift-calendar="shiftCalendar"
+              :set-calendar-content-scroll-ref="setCalendarContentScrollRef"
+              :on-calendar-hierarchy-wheel="onCalendarHierarchyWheel"
+              :set-calendar-scene-ref="setCalendarSceneRef"
+              :normalized-calendar-view="normalizedCalendarView"
+              :calendar-scene-masked="calendarSceneMasked"
+              :calendar-scene-transform-style="calendarSceneTransformStyle"
+              :on-calendar-scene-mouse-leave="onCalendarSceneMouseLeave"
+              :calendar-view="calendarView"
+              :year-months="yearMonths"
+              :calendar-cursor-month="calendarCursor.getMonth()"
+              :calendar-hovered-month-index="calendarHoveredMonthIndex"
+              :set-calendar-hovered-month-index="setCalendarHoveredMonthIndex"
+              :calendar-zoom-prime-token="calendarZoomPrimeToken"
+              :calendar-prime-month-token="calendarPrimeMonthToken"
+              :calendar-prime-style="calendarPrimeStyle"
+              :zoom-to-month="zoomToMonth"
+              :open-thread-from-calendar-item="openThreadFromCalendarItem"
+              :month-rows="monthRows"
+              :calendar-hovered-week-start-key="calendarHoveredWeekStartKey"
+              :set-calendar-hovered-week-start-key="setCalendarHoveredWeekStartKey"
+              :calendar-prime-week-token="calendarPrimeWeekToken"
+              :selected-date-key="selectedDateKey"
+              :month-cell-has-focused-event="monthCellHasFocusedEvent"
+              :calendar-hovered-day-key="calendarHoveredDayKey"
+              :set-calendar-hovered-day-key="setCalendarHoveredDayKey"
+              :pick-date="pickDate"
+              :month-cell-events="monthCellEvents"
+              :is-review-highlighted-event="isReviewHighlightedEvent"
+              :week-days="weekDays"
+              :calendar-prime-day-token="calendarPrimeDayToken"
+              :selected-day-events="selectedDayEvents"
+              :calendar-zoom-overlay="calendarZoomOverlay"
+              :set-calendar-zoom-overlay-ref="setCalendarZoomOverlayRef"
+              :calendar-zoom-overlay-style="calendarZoomOverlayStyle"
+              :calendar-zoom-ghost="calendarZoomGhost"
+            />
 
             <section v-else-if="selectedTab === 'communications' && false" class="space-y-3">
             <div class="mb-1 flex justify-end">
@@ -6181,233 +6024,6 @@ async function decideFeedCard(card: FeedCard, decision: "accepted" | "rejected")
 </template>
 
 <style scoped>
-.calendar-content-wrap {
-  position: relative;
-  padding-left: 40px;
-  padding-right: 40px;
-}
-
-.calendar-content-scroll {
-  height: 100%;
-  overscroll-behavior: contain;
-}
-
-.calendar-scene {
-  min-height: 100%;
-  min-width: 100%;
-  transform-origin: center center;
-}
-
-.calendar-scene-hidden {
-  visibility: hidden;
-}
-
-.calendar-scene.cursor-zoom-in,
-.calendar-scene.cursor-zoom-in * {
-  cursor: zoom-in;
-}
-
-.calendar-scene.cursor-zoom-out,
-.calendar-scene.cursor-zoom-out * {
-  cursor: zoom-out;
-}
-
-.calendar-week-grid {
-  display: grid;
-  grid-template-columns: repeat(7, minmax(165px, 1fr));
-  gap: 8px;
-  min-width: 1180px;
-}
-
-.calendar-side-nav {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 4;
-  width: 28px;
-  height: 28px;
-  border: 1px solid color-mix(in oklab, var(--color-base-content) 16%, transparent);
-  border-radius: 999px;
-  background: color-mix(in oklab, var(--color-base-100) 88%, transparent);
-  color: color-mix(in oklab, var(--color-base-content) 86%, transparent);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
-}
-
-.calendar-side-nav:hover {
-  border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
-  background: color-mix(in oklab, var(--color-primary) 14%, var(--color-base-100));
-  transform: translateY(-50%) scale(1.03);
-}
-
-.calendar-side-nav-left {
-  left: 4px;
-}
-
-.calendar-side-nav-right {
-  right: 4px;
-}
-
-.calendar-hover-targetable {
-  transform-origin: center center;
-  transition: transform 320ms ease, box-shadow 320ms ease, outline-color 320ms ease;
-}
-
-.calendar-hover-target {
-  outline: 2px solid color-mix(in oklab, var(--color-primary) 66%, transparent);
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-primary) 32%, transparent) inset;
-}
-
-.calendar-zoom-prime-active {
-  z-index: 2;
-}
-
-.calendar-zoom-inline {
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 128px;
-  height: 22px;
-  padding: 0 10px;
-}
-
-.calendar-zoom-slider {
-  width: 100%;
-  height: 18px;
-  margin: 0;
-  background: transparent;
-  -webkit-appearance: none;
-  appearance: none;
-  cursor: pointer;
-}
-
-.calendar-zoom-slider:focus-visible {
-  outline: none;
-}
-
-.calendar-zoom-slider::-webkit-slider-runnable-track {
-  height: 2px;
-  border-radius: 999px;
-  background: color-mix(in oklab, var(--color-base-content) 22%, transparent);
-}
-
-.calendar-zoom-slider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  margin-top: -4px;
-  width: 10px;
-  height: 10px;
-  border-radius: 999px;
-  border: 1px solid color-mix(in oklab, var(--color-base-content) 35%, transparent);
-  background: color-mix(in oklab, var(--color-base-100) 98%, var(--color-base-content));
-}
-
-.calendar-zoom-slider::-moz-range-track {
-  height: 2px;
-  border-radius: 999px;
-  background: color-mix(in oklab, var(--color-base-content) 22%, transparent);
-}
-
-.calendar-zoom-slider::-moz-range-progress {
-  background: transparent;
-}
-
-.calendar-zoom-slider::-moz-range-thumb {
-  width: 10px;
-  height: 10px;
-  border-radius: 999px;
-  border: 1px solid color-mix(in oklab, var(--color-base-content) 35%, transparent);
-  background: color-mix(in oklab, var(--color-base-100) 98%, var(--color-base-content));
-}
-
-.calendar-zoom-marks {
-  position: absolute;
-  inset-inline: 10px;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  justify-content: space-between;
-  pointer-events: none;
-}
-
-.calendar-zoom-mark {
-  width: 4px;
-  height: 4px;
-  border-radius: 999px;
-  background: color-mix(in oklab, var(--color-base-content) 30%, transparent);
-}
-
-.calendar-zoom-mark-active {
-  width: 6px;
-  height: 6px;
-  background: color-mix(in oklab, var(--color-base-content) 78%, transparent);
-}
-
-.calendar-zoom-overlay {
-  position: absolute;
-  z-index: 6;
-  border: 3px solid color-mix(in oklab, var(--color-primary) 64%, transparent);
-  border-radius: 12px;
-  background: color-mix(in oklab, var(--color-primary) 14%, transparent);
-  overflow: hidden;
-  pointer-events: none;
-  transition:
-    left 2400ms cubic-bezier(0.16, 0.86, 0.18, 1),
-    top 2400ms cubic-bezier(0.16, 0.86, 0.18, 1),
-    width 2400ms cubic-bezier(0.16, 0.86, 0.18, 1),
-    height 2400ms cubic-bezier(0.16, 0.86, 0.18, 1);
-}
-
-.calendar-zoom-overlay-content {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  gap: 4px;
-  padding: 10px;
-  color: color-mix(in oklab, var(--color-base-content) 86%, transparent);
-}
-
-.calendar-zoom-overlay-title {
-  margin: 0;
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 1.2;
-}
-
-.calendar-zoom-overlay-subtitle {
-  margin: 0;
-  font-size: 11px;
-  line-height: 1.2;
-  opacity: 0.74;
-}
-
-@media (max-width: 960px) {
-  .calendar-content-wrap {
-    padding-left: 32px;
-    padding-right: 32px;
-  }
-
-  .calendar-week-grid {
-    grid-template-columns: repeat(7, minmax(150px, 1fr));
-    min-width: 1060px;
-  }
-
-  .calendar-side-nav {
-    width: 24px;
-    height: 24px;
-  }
-
-  .calendar-zoom-inline {
-    width: 108px;
-  }
-}
-
-
 .comm-input-wrap {
   display: grid;
   gap: 6px;
diff --git a/frontend/app/components/workspace/calendar/CrmCalendarPanel.vue b/frontend/app/components/workspace/calendar/CrmCalendarPanel.vue
new file mode 100644
index 0000000..6c2ee35
--- /dev/null
+++ b/frontend/app/components/workspace/calendar/CrmCalendarPanel.vue
@@ -0,0 +1,559 @@
+<script setup lang="ts">
+type CalendarEvent = {
+  id: string;
+  title: string;
+  start: string;
+  end: string;
+  contact: string;
+  note: string;
+};
+
+type YearMonthItem = {
+  monthIndex: number;
+  label: string;
+  count: number;
+  first?: CalendarEvent;
+};
+
+type MonthCell = {
+  key: string;
+  day: number;
+  inMonth: boolean;
+  events: CalendarEvent[];
+};
+
+type MonthRow = {
+  key: string;
+  startKey: string;
+  cells: MonthCell[];
+};
+
+type WeekDay = {
+  key: string;
+  label: string;
+  day: number;
+  events: CalendarEvent[];
+};
+
+defineProps<{
+  contextPickerEnabled: boolean;
+  hasContextScope: (scope: "calendar") => boolean;
+  toggleContextScope: (scope: "calendar") => void;
+  contextScopeLabel: (scope: "calendar") => string;
+  setToday: () => void;
+  calendarPeriodLabel: string;
+  calendarZoomLevelIndex: number;
+  onCalendarZoomSliderInput: (event: Event) => void;
+  focusedCalendarEvent: CalendarEvent | null;
+  formatDay: (iso: string) => string;
+  formatTime: (iso: string) => string;
+  setCalendarContentWrapRef: (element: HTMLDivElement | null) => void;
+  shiftCalendar: (step: number) => void;
+  setCalendarContentScrollRef: (element: HTMLDivElement | null) => void;
+  onCalendarHierarchyWheel: (event: WheelEvent) => void;
+  setCalendarSceneRef: (element: HTMLDivElement | null) => void;
+  normalizedCalendarView: string;
+  calendarSceneMasked: boolean;
+  calendarSceneTransformStyle: Record<string, string>;
+  onCalendarSceneMouseLeave: () => void;
+  calendarView: string;
+  yearMonths: YearMonthItem[];
+  calendarCursorMonth: number;
+  calendarHoveredMonthIndex: number | null;
+  setCalendarHoveredMonthIndex: (value: number | null) => void;
+  calendarZoomPrimeToken: string;
+  calendarPrimeMonthToken: (monthIndex: number) => string;
+  calendarPrimeStyle: (token: string) => Record<string, string>;
+  zoomToMonth: (monthIndex: number) => void;
+  openThreadFromCalendarItem: (event: CalendarEvent) => void;
+  monthRows: MonthRow[];
+  calendarHoveredWeekStartKey: string;
+  setCalendarHoveredWeekStartKey: (value: string) => void;
+  calendarPrimeWeekToken: (startKey: string) => string;
+  selectedDateKey: string;
+  monthCellHasFocusedEvent: (events: CalendarEvent[]) => boolean;
+  calendarHoveredDayKey: string;
+  setCalendarHoveredDayKey: (value: string) => void;
+  pickDate: (key: string) => void;
+  monthCellEvents: (events: CalendarEvent[]) => CalendarEvent[];
+  isReviewHighlightedEvent: (eventId: string) => boolean;
+  weekDays: WeekDay[];
+  calendarPrimeDayToken: (dayKey: string) => string;
+  selectedDayEvents: CalendarEvent[];
+  calendarZoomOverlay: { active: boolean };
+  setCalendarZoomOverlayRef: (element: HTMLDivElement | null) => void;
+  calendarZoomOverlayStyle: Record<string, string>;
+  calendarZoomGhost: { title: string; subtitle?: string } | null;
+}>();
+</script>
+
+<template>
+  <section
+    class="relative flex h-full min-h-0 flex-col gap-3"
+    :class="[
+      contextPickerEnabled ? 'context-scope-block context-scope-block-active' : '',
+      hasContextScope('calendar') ? 'context-scope-block-selected' : '',
+    ]"
+    @click="toggleContextScope('calendar')"
+  >
+    <span
+      v-if="contextPickerEnabled"
+      class="context-scope-label"
+    >{{ contextScopeLabel('calendar') }}</span>
+    <div class="grid grid-cols-[auto_1fr_auto] items-center gap-2">
+      <div class="flex items-center gap-1">
+        <button class="btn btn-xs" @click="setToday">Today</button>
+      </div>
+
+      <div class="text-center text-sm font-medium">
+        {{ calendarPeriodLabel }}
+      </div>
+
+      <div class="justify-self-end calendar-zoom-inline" @click.stop>
+        <input
+          class="calendar-zoom-slider"
+          type="range"
+          min="0"
+          max="3"
+          step="1"
+          :value="calendarZoomLevelIndex"
+          aria-label="Calendar zoom level"
+          @input="onCalendarZoomSliderInput"
+        >
+        <div class="calendar-zoom-marks" aria-hidden="true">
+          <span
+            v-for="index in 4"
+            :key="`calendar-zoom-mark-${index}`"
+            class="calendar-zoom-mark"
+            :class="calendarZoomLevelIndex === index - 1 ? 'calendar-zoom-mark-active' : ''"
+          />
+        </div>
+      </div>
+    </div>
+
+    <article
+      v-if="focusedCalendarEvent"
+      class="rounded-xl border border-success/50 bg-success/10 px-3 py-2"
+    >
+      <p class="text-xs font-semibold uppercase tracking-wide text-success/80">Review focus event</p>
+      <p class="text-sm font-medium text-base-content">{{ focusedCalendarEvent.title }}</p>
+      <p class="text-xs text-base-content/70">
+        {{ formatDay(focusedCalendarEvent.start) }} · {{ formatTime(focusedCalendarEvent.start) }} - {{ formatTime(focusedCalendarEvent.end) }}
+      </p>
+      <p class="mt-1 text-xs text-base-content/80">{{ focusedCalendarEvent.note || "No note" }}</p>
+    </article>
+
+    <div :ref="setCalendarContentWrapRef" class="calendar-content-wrap min-h-0 flex-1">
+      <button
+        class="calendar-side-nav calendar-side-nav-left"
+        type="button"
+        title="Previous period"
+        @click="shiftCalendar(-1)"
+      >
+        <span>←</span>
+      </button>
+      <button
+        class="calendar-side-nav calendar-side-nav-right"
+        type="button"
+        title="Next period"
+        @click="shiftCalendar(1)"
+      >
+        <span>→</span>
+      </button>
+      <div
+        :ref="setCalendarContentScrollRef"
+        class="calendar-content-scroll min-h-0 h-full overflow-y-auto pr-1"
+        @wheel.prevent="onCalendarHierarchyWheel"
+      >
+        <div
+          :ref="setCalendarSceneRef"
+          :class="[
+            'calendar-scene',
+            normalizedCalendarView === 'day' ? 'cursor-zoom-out' : 'cursor-zoom-in',
+            calendarSceneMasked ? 'calendar-scene-hidden' : '',
+          ]"
+          :style="calendarSceneTransformStyle"
+          @mouseleave="onCalendarSceneMouseLeave"
+        >
+          <div class="grid gap-2" :class="calendarView === 'year' ? 'sm:grid-cols-2 xl:grid-cols-3' : 'grid-cols-1'">
+            <article
+              v-for="item in yearMonths"
+              :key="`year-month-${item.monthIndex}`"
+              v-show="calendarView === 'year' || item.monthIndex === calendarCursorMonth"
+              class="group relative rounded-xl border border-base-300 p-3 text-left transition calendar-hover-targetable"
+              :class="[
+                calendarView === 'year' ? 'hover:border-primary/50 hover:bg-primary/5 cursor-zoom-in' : 'cursor-default min-h-[26rem] bg-base-100',
+                calendarHoveredMonthIndex === item.monthIndex ? 'calendar-hover-target' : '',
+                calendarZoomPrimeToken === calendarPrimeMonthToken(item.monthIndex) ? 'calendar-zoom-prime-active' : '',
+              ]"
+              :style="calendarPrimeStyle(calendarPrimeMonthToken(item.monthIndex))"
+              :data-calendar-month-index="item.monthIndex"
+              @mouseenter="setCalendarHoveredMonthIndex(item.monthIndex)"
+              @click="calendarView === 'year' ? zoomToMonth(item.monthIndex) : undefined"
+            >
+              <p class="font-medium">{{ item.label }}</p>
+              <p class="text-xs text-base-content/60">{{ item.count }} events</p>
+              <button
+                v-if="calendarView === 'year' && item.first"
+                class="mt-1 block w-full text-left text-xs text-base-content/70 hover:underline"
+                @click.stop="openThreadFromCalendarItem(item.first)"
+              >
+                {{ formatDay(item.first.start) }} · {{ item.first.title }}
+              </button>
+
+              <div
+                v-if="item.monthIndex === calendarCursorMonth && (calendarView === 'month' || calendarView === 'agenda')"
+                class="mt-3 space-y-1"
+              >
+                <div class="grid grid-cols-7 gap-1 text-center text-xs font-semibold text-base-content/60">
+                  <span>Sun</span>
+                  <span>Mon</span>
+                  <span>Tue</span>
+                  <span>Wed</span>
+                  <span>Thu</span>
+                  <span>Fri</span>
+                  <span>Sat</span>
+                </div>
+
+                <div class="space-y-1">
+                  <div
+                    v-for="row in monthRows"
+                    :key="row.key"
+                    class="group relative calendar-hover-targetable"
+                    :class="[
+                      calendarHoveredWeekStartKey === row.startKey ? 'calendar-hover-target' : '',
+                      calendarZoomPrimeToken === calendarPrimeWeekToken(row.startKey) ? 'calendar-zoom-prime-active' : '',
+                    ]"
+                    :style="calendarPrimeStyle(calendarPrimeWeekToken(row.startKey))"
+                    :data-calendar-week-start-key="row.startKey"
+                    @mouseenter="setCalendarHoveredWeekStartKey(row.startKey)"
+                  >
+                    <div class="grid grid-cols-7 gap-1">
+                      <button
+                        v-for="cell in row.cells"
+                        :key="cell.key"
+                        class="group relative min-h-24 rounded-lg border p-1 text-left"
+                        :class="[
+                          cell.inMonth ? 'border-base-300 bg-base-100' : 'border-base-200 bg-base-200/40 text-base-content/40',
+                          selectedDateKey === cell.key ? 'border-primary bg-primary/5' : '',
+                          monthCellHasFocusedEvent(cell.events) ? 'border-success/60 bg-success/10' : '',
+                        ]"
+                        :data-calendar-day-key="cell.key"
+                        @mouseenter="setCalendarHoveredDayKey(cell.key)"
+                        @click="pickDate(cell.key)"
+                      >
+                        <p class="mb-1 text-xs font-semibold">{{ cell.day }}</p>
+                        <button
+                          v-for="event in monthCellEvents(cell.events)"
+                          :key="event.id"
+                          class="block w-full truncate rounded px-1 text-left text-[10px] text-base-content/70 transition hover:underline"
+                          :class="isReviewHighlightedEvent(event.id) ? 'bg-success/20 text-success-content ring-1 ring-success/40' : ''"
+                          @click.stop="openThreadFromCalendarItem(event)"
+                        >
+                          {{ formatTime(event.start) }} {{ event.title }}
+                        </button>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div
+                v-else-if="item.monthIndex === calendarCursorMonth && calendarView === 'week'"
+                class="mt-3 calendar-week-scroll overflow-x-auto pb-1"
+              >
+                <div class="calendar-week-grid">
+                  <article
+                    v-for="day in weekDays"
+                    :key="day.key"
+                    class="group relative flex min-h-[18rem] flex-col rounded-xl border border-base-300 bg-base-100 p-2.5 cursor-zoom-in calendar-hover-targetable"
+                    :class="[
+                      selectedDateKey === day.key ? 'border-primary bg-primary/5' : '',
+                      calendarHoveredDayKey === day.key ? 'calendar-hover-target' : '',
+                      calendarZoomPrimeToken === calendarPrimeDayToken(day.key) ? 'calendar-zoom-prime-active' : '',
+                    ]"
+                    :style="calendarPrimeStyle(calendarPrimeDayToken(day.key))"
+                    :data-calendar-day-key="day.key"
+                    @mouseenter="setCalendarHoveredDayKey(day.key)"
+                    @click="pickDate(day.key)"
+                  >
+                    <div class="mb-2 flex items-start justify-between gap-2">
+                      <p class="text-sm font-semibold leading-tight">{{ day.label }} {{ day.day }}</p>
+                    </div>
+                    <div class="space-y-1.5">
+                      <button
+                        v-for="event in day.events"
+                        :key="event.id"
+                        class="block w-full rounded-md px-2 py-1.5 text-left text-xs"
+                        :class="isReviewHighlightedEvent(event.id) ? 'bg-success/20 ring-1 ring-success/45' : 'bg-base-200 hover:bg-base-300/80'"
+                        @click.stop="openThreadFromCalendarItem(event)"
+                      >
+                        {{ formatTime(event.start) }} - {{ event.title }} ({{ event.contact }})
+                      </button>
+                      <p v-if="day.events.length === 0" class="pt-1 text-xs text-base-content/50">No events</p>
+                    </div>
+                  </article>
+                </div>
+              </div>
+
+              <div
+                v-else-if="item.monthIndex === calendarCursorMonth && calendarView === 'day'"
+                class="mt-3 space-y-2"
+              >
+                <button
+                  v-for="event in selectedDayEvents"
+                  :key="event.id"
+                  class="block w-full rounded-xl border border-base-300 p-3 text-left transition hover:bg-base-200/60"
+                  :class="isReviewHighlightedEvent(event.id) ? 'border-success/60 bg-success/10' : ''"
+                  @click="openThreadFromCalendarItem(event)"
+                >
+                  <p class="font-medium">{{ event.title }}</p>
+                  <p class="text-xs text-base-content/60">{{ event.contact }}</p>
+                  <p class="text-xs text-base-content/60">{{ formatTime(event.start) }} - {{ formatTime(event.end) }}</p>
+                  <p class="mt-1 text-sm text-base-content/80">{{ event.note }}</p>
+                </button>
+                <p v-if="selectedDayEvents.length === 0" class="text-sm text-base-content/60">No events on this day.</p>
+              </div>
+            </article>
+          </div>
+        </div>
+      </div>
+      <div
+        v-if="calendarZoomOverlay.active"
+        :ref="setCalendarZoomOverlayRef"
+        class="calendar-zoom-overlay"
+        :style="calendarZoomOverlayStyle"
+      >
+        <div v-if="calendarZoomGhost" class="calendar-zoom-overlay-content">
+          <p class="calendar-zoom-overlay-title">{{ calendarZoomGhost.title }}</p>
+          <p v-if="calendarZoomGhost.subtitle" class="calendar-zoom-overlay-subtitle">{{ calendarZoomGhost.subtitle }}</p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.calendar-content-wrap {
+  position: relative;
+  padding-left: 40px;
+  padding-right: 40px;
+}
+
+.calendar-content-scroll {
+  height: 100%;
+  overscroll-behavior: contain;
+}
+
+.calendar-scene {
+  min-height: 100%;
+  min-width: 100%;
+  transform-origin: center center;
+}
+
+.calendar-scene-hidden {
+  visibility: hidden;
+}
+
+.calendar-scene.cursor-zoom-in,
+.calendar-scene.cursor-zoom-in * {
+  cursor: zoom-in;
+}
+
+.calendar-scene.cursor-zoom-out,
+.calendar-scene.cursor-zoom-out * {
+  cursor: zoom-out;
+}
+
+.calendar-week-grid {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(165px, 1fr));
+  gap: 8px;
+  min-width: 1180px;
+}
+
+.calendar-side-nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 4;
+  width: 28px;
+  height: 28px;
+  border: 1px solid color-mix(in oklab, var(--color-base-content) 16%, transparent);
+  border-radius: 999px;
+  background: color-mix(in oklab, var(--color-base-100) 88%, transparent);
+  color: color-mix(in oklab, var(--color-base-content) 86%, transparent);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
+}
+
+.calendar-side-nav:hover {
+  border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
+  background: color-mix(in oklab, var(--color-primary) 14%, var(--color-base-100));
+  transform: translateY(-50%) scale(1.03);
+}
+
+.calendar-side-nav-left {
+  left: 4px;
+}
+
+.calendar-side-nav-right {
+  right: 4px;
+}
+
+.calendar-hover-targetable {
+  transform-origin: center center;
+  transition: transform 320ms ease, box-shadow 320ms ease, outline-color 320ms ease;
+}
+
+.calendar-hover-target {
+  outline: 2px solid color-mix(in oklab, var(--color-primary) 66%, transparent);
+  outline-offset: 1px;
+  box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-primary) 32%, transparent) inset;
+}
+
+.calendar-zoom-prime-active {
+  z-index: 2;
+}
+
+.calendar-zoom-inline {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 128px;
+  height: 22px;
+  padding: 0 10px;
+}
+
+.calendar-zoom-slider {
+  width: 100%;
+  height: 18px;
+  margin: 0;
+  background: transparent;
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: pointer;
+}
+
+.calendar-zoom-slider:focus-visible {
+  outline: none;
+}
+
+.calendar-zoom-slider::-webkit-slider-runnable-track {
+  height: 2px;
+  border-radius: 999px;
+  background: color-mix(in oklab, var(--color-base-content) 22%, transparent);
+}
+
+.calendar-zoom-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 10px;
+  height: 10px;
+  margin-top: -4px;
+  border-radius: 999px;
+  background: color-mix(in oklab, var(--color-base-content) 88%, transparent);
+  border: 0;
+}
+
+.calendar-zoom-slider::-moz-range-track {
+  height: 2px;
+  border-radius: 999px;
+  background: color-mix(in oklab, var(--color-base-content) 22%, transparent);
+}
+
+.calendar-zoom-slider::-moz-range-progress {
+  height: 2px;
+  border-radius: 999px;
+  background: transparent;
+}
+
+.calendar-zoom-slider::-moz-range-thumb {
+  width: 10px;
+  height: 10px;
+  border: 0;
+  border-radius: 999px;
+  background: color-mix(in oklab, var(--color-base-content) 88%, transparent);
+}
+
+.calendar-zoom-marks {
+  position: absolute;
+  inset: 0 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  pointer-events: none;
+}
+
+.calendar-zoom-mark {
+  width: 4px;
+  height: 4px;
+  border-radius: 999px;
+  background: color-mix(in oklab, var(--color-base-content) 35%, transparent);
+}
+
+.calendar-zoom-mark-active {
+  background: color-mix(in oklab, var(--color-base-content) 85%, transparent);
+}
+
+.calendar-zoom-overlay {
+  position: absolute;
+  z-index: 18;
+  border: 1px solid color-mix(in oklab, var(--color-primary) 62%, transparent);
+  border-radius: 14px;
+  background:
+    radial-gradient(circle at 20% 20%, color-mix(in oklab, var(--color-primary) 30%, transparent), transparent 55%),
+    color-mix(in oklab, var(--color-base-100) 84%, transparent);
+  box-shadow:
+    0 0 0 1px color-mix(in oklab, var(--color-primary) 42%, transparent) inset,
+    0 18px 38px rgba(18, 30, 58, 0.28);
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.calendar-zoom-overlay-content {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: 4px;
+  padding: 14px;
+  color: color-mix(in oklab, var(--color-base-content) 90%, transparent);
+}
+
+.calendar-zoom-overlay-title {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.calendar-zoom-overlay-subtitle {
+  margin: 0;
+  font-size: 11px;
+  opacity: 0.72;
+}
+
+@media (max-width: 960px) {
+  .calendar-content-wrap {
+    padding-left: 32px;
+    padding-right: 32px;
+  }
+
+  .calendar-week-grid {
+    grid-template-columns: repeat(7, minmax(150px, 1fr));
+    min-width: 1060px;
+  }
+
+  .calendar-side-nav {
+    width: 24px;
+    height: 24px;
+  }
+
+  .calendar-zoom-inline {
+    width: 108px;
+  }
+}
+</style>