@luckydye/calendar 1.3.0 → 1.3.2

package/src/CalendarView.ts

@@ -3,7 +3,6 @@ import {
 	type Attendee,
 	type CalendarEvent,
 	CalendarInternal,
-	type EventSegment,
 	type WeekInfo,
 	NOTIFICATION_PRESETS,
 } from "./CalendarInternal.js";
@@ -19,12 +18,16 @@ import { serializeEventsToICal } from "./ICal.js";
 import { queueStatus } from "./StatusMessage.js";
 import type { StatusBarData } from "./StatusBar.js";
 import { IndexedDBStorage } from "./IndexedDBStorage.js";
+import { sanitizeEventDescription } from "./DescriptionSanitizer.js";
+import { TIME_SCALE_DAY_HEIGHT, type CalendarLayer, type LayerContext } from "./CalendarLayer.js";
+import { createGridLayer } from "./layers/GridLayer.js";
+import { createEventsLayer, type EventRect, type EventsState } from "./layers/EventsLayer.js";
+import { createTimeseriesHeatmapLayer } from "./layers/TimeseriesHeatmapLayer.js";
 
-const MIN_DAY_HEIGHT = 100;
+const MIN_DAY_HEIGHT = 50;
 const MAX_DAY_HEIGHT = 3000; // 1px per minute
 const LEFT_GUTTER_WIDTH = 60;
 const MINIMAP_WIDTH = 12;
-const MIN_EVENT_HEIGHT = 20;
 
 export class CalendarViewElement extends LitElement {
 	static styles = css`
@@ -257,7 +260,7 @@ export class CalendarViewElement extends LitElement {
       left: 60px;
       right: 12px;
       pointer-events: none;
-      z-index: 2;
+      z-index: 101;
       overflow: hidden;
     }
 
@@ -298,7 +301,7 @@ export class CalendarViewElement extends LitElement {
       flex-direction: row;
       backdrop-filter: blur(10px);
       box-shadow: var(--shadow-overlay, 0 4px 12px rgba(0, 0, 0, 0.9));
-      z-index: 100;
+      z-index: 102;
     }
 
     .event-detail-header {
@@ -677,6 +680,19 @@ export class CalendarViewElement extends LitElement {
       text-align: left;
     }
 
+    .description-actions {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+
+    .description-actions .description-see-more {
+      display: inline-block;
+      margin-top: 8px;
+      padding: 0;
+    }
+
     .description-see-more:hover {
       color: var(--accent-hover, rgb(120, 170, 255));
     }
@@ -854,6 +870,14 @@ export class CalendarViewElement extends LitElement {
 	minimapBufferCanvas: HTMLCanvasElement | null = null;
 	minimapBufferCtx: CanvasRenderingContext2D | null = null;
 	stripePatternCanvas: HTMLCanvasElement | null = null;
+	layers: CalendarLayer[] = [];
+	eventsLayer: ReturnType<typeof createEventsLayer> | null = null;
+	heatmapEvents: CalendarEvent[] = [];
+	heatmapRange: { start: Date; end: Date } | null = null;
+	heatmapQueryKey: string | null = null;
+	heatmapQueryToken = 0;
+	timeseriesSourceIds: Set<string> = new Set();
+	timeseriesSourceCacheKey: string | null = null;
 	scrollContainer: HTMLElement | null = null;
 	scrollContent: HTMLElement | null = null;
 	resizeObserver: ResizeObserver | null = null;
@@ -875,9 +899,12 @@ export class CalendarViewElement extends LitElement {
 	cursorPosition: { x: number; y: number } | null = null; // Mouse position in calendar coordinates
 	animationFrame: number | null = null;
 	isDraggingMinimap = false;
+	altKeyActive = false; // Tracks if alt/meta key is held (bypasses event interaction)
 	isFiltered = false; // Tracks if filter is currently active
 	timeUpdateInterval: ReturnType<typeof setInterval> | null = null;
 	isExtendingRange = false; // Prevents concurrent range extensions
+	boundaryCheckInterval: ReturnType<typeof setInterval> | null = null;
+	lastWheelTime = 0; // Timestamp of last wheel event, used to distinguish wheel vs scrollbar drag
 	isCreatingEvent = false;
 	eventCreationStart: { x: number; y: number } | null = null;
 	eventCreationEnd: { x: number; y: number } | null = null;
@@ -979,6 +1006,11 @@ export class CalendarViewElement extends LitElement {
 		height: number;
 	} | null = null;
 	isDescriptionExpanded = false;
+	descriptionSummaryTargetKey: string | null = null;
+	descriptionSummaryText = "";
+	descriptionSummaryLoading = false;
+	descriptionSummaryError: string | null = null;
+	private requestedDescriptionSummaryKey: string | null = null;
 
 	notificationPopoverOpen = false;
 	scheduledNotifications: any[] = [];
@@ -992,6 +1024,7 @@ export class CalendarViewElement extends LitElement {
 	currentTheme: ThemeName = loadThemePreference();
 
 	activeCalendarColor: string | null = null;
+	activeCalendarId: string | null = null;
 
 	get filter() {
 		return this.internal.getFilter();
@@ -1302,6 +1335,8 @@ export class CalendarViewElement extends LitElement {
 		window.addEventListener("mousemove", this.onMouseMove);
 		window.addEventListener("mouseup", this.onMouseUp);
 		window.addEventListener("paste", this.onPaste);
+		window.addEventListener("keydown", this.onKeyDown);
+		window.addEventListener("keyup", this.onKeyUp);
 	}
 
 	disconnectedCallback() {
@@ -1310,6 +1345,8 @@ export class CalendarViewElement extends LitElement {
 		window.removeEventListener("mousemove", this.onMouseMove);
 		window.removeEventListener("mouseup", this.onMouseUp);
 		window.removeEventListener("paste", this.onPaste);
+		window.removeEventListener("keydown", this.onKeyDown);
+		window.removeEventListener("keyup", this.onKeyUp);
 
 		if (this.scrollContainer) {
 			this.scrollContainer.removeEventListener(
@@ -1326,6 +1363,9 @@ export class CalendarViewElement extends LitElement {
 		if (this.timeUpdateInterval) {
 			clearInterval(this.timeUpdateInterval);
 		}
+		if (this.boundaryCheckInterval) {
+			clearInterval(this.boundaryCheckInterval);
+		}
 	}
 
 	onScrollContainerMouseLeave = (): void => {
@@ -1338,6 +1378,97 @@ export class CalendarViewElement extends LitElement {
 		this.repositionEventDetailOverlay();
 	}
 
+	clearDescriptionSummary(): void {
+		if (this.requestedDescriptionSummaryKey) {
+			this.dispatchEvent(
+				new CustomEvent("cancel-description-summary", {
+					detail: { key: this.requestedDescriptionSummaryKey },
+					bubbles: true,
+					composed: true,
+				}),
+			);
+		}
+		this.requestedDescriptionSummaryKey = null;
+		this.descriptionSummaryTargetKey = null;
+		this.descriptionSummaryText = "";
+		this.descriptionSummaryLoading = false;
+		this.descriptionSummaryError = null;
+		this.requestUpdate();
+	}
+
+	private getDescriptionSummaryTargetKey(event: CalendarEvent): string {
+		return `${event.id}:${sanitizeEventDescription(event.description ?? "")}`;
+	}
+
+	private requestDescriptionSummary(event: CalendarEvent): void {
+		const description = sanitizeEventDescription(event.description ?? "").trim();
+		if (description.length <= 200) return;
+
+		const targetKey = this.getDescriptionSummaryTargetKey(event);
+		this.clearDescriptionSummary();
+		this.requestedDescriptionSummaryKey = targetKey;
+		this.descriptionSummaryTargetKey = targetKey;
+		this.descriptionSummaryText = "";
+		this.descriptionSummaryLoading = true;
+		this.descriptionSummaryError = null;
+		this.dispatchEvent(
+			new CustomEvent("request-description-summary", {
+				detail: {
+					event,
+					key: targetKey,
+					description,
+				},
+				bubbles: true,
+				composed: true,
+			}),
+		);
+		this.requestUpdate();
+	}
+
+	startDescriptionSummary(key: string): void {
+		if (key !== this.descriptionSummaryTargetKey) return;
+		this.descriptionSummaryText = "";
+		this.descriptionSummaryLoading = true;
+		this.descriptionSummaryError = null;
+		this.requestUpdate();
+	}
+
+	appendDescriptionSummaryChunk(key: string, chunk: string): void {
+		if (key !== this.descriptionSummaryTargetKey) return;
+		if (!chunk) return;
+		this.descriptionSummaryText += chunk;
+		this.descriptionSummaryLoading = true;
+		this.requestUpdate();
+	}
+
+	finishDescriptionSummary(key: string, error: string | null = null): void {
+		if (key !== this.descriptionSummaryTargetKey) return;
+		this.descriptionSummaryLoading = false;
+		this.descriptionSummaryError = error;
+		this.requestUpdate();
+	}
+
+	failDescriptionSummary(key: string, message: string): void {
+		if (key !== this.descriptionSummaryTargetKey) return;
+		this.descriptionSummaryLoading = false;
+		this.descriptionSummaryError = message;
+		if (!this.descriptionSummaryText && this.selectedEventForDetail?.description) {
+			this.descriptionSummaryText = this.selectedEventForDetail.description.replaceAll(
+				"\\n",
+				"\n",
+			);
+		}
+		this.requestUpdate();
+	}
+
+	cancelDescriptionSummary(key: string): void {
+		if (key !== this.descriptionSummaryTargetKey) {
+			return;
+		}
+		this.descriptionSummaryLoading = false;
+		this.requestUpdate();
+	}
+
 	repositionEventDetailOverlay(): void {
 		if (!this.selectedEventForDetail || !this.selectedEventRect) return;
 
@@ -1367,6 +1498,24 @@ export class CalendarViewElement extends LitElement {
 		this.minimapBufferCanvas = document.createElement("canvas");
 		this.minimapBufferCtx = this.minimapBufferCanvas.getContext("2d");
 
+		const self = this;
+		const eventsState: EventsState = {
+			get events() { return self.events; },
+			get hoveredEventId() { return self.hoveredEventId; },
+			isEventSelected: (event) => self.internal.isEventSelected(event),
+			shouldRenderEventWithStripes: (event) => self.shouldRenderEventWithStripes(event),
+			getStripePatternCanvas: () => self.getStripePatternCanvas(),
+		};
+		const heatmapState = {
+			get events() { return self.heatmapEvents; },
+		};
+		this.eventsLayer = createEventsLayer(eventsState);
+		this.layers = [
+			createGridLayer(),
+			createTimeseriesHeatmapLayer(heatmapState),
+			this.eventsLayer,
+		];
+
 		this.weeks = this.internal.generateWeeks();
 
 		// Restore zoom level from localStorage
@@ -1399,13 +1548,48 @@ export class CalendarViewElement extends LitElement {
 			this.requestUpdate();
 		}, 10000);
 
+		// Extend range while stationary at the buffer boundary (no scroll events fire when idle)
+		this.boundaryCheckInterval = setInterval(() => {
+			this.checkAndExtendRange();
+		}, 500);
+
 		// Try to restore saved scroll position, otherwise scroll to today
 		this.loadScrollPosition();
 
 		let previousFilter = this.filter;
 
 		for await (const events of this.internal.events()) {
-			this.events = events;
+			const timeseriesIds = this.loadTimeseriesSourceIds();
+			let normalized = events;
+			if (timeseriesIds.size > 0) {
+				let needsClone = false;
+				for (const event of events) {
+					if (
+						event.visualStyle !== "heatmap" &&
+						event.sourceId &&
+						timeseriesIds.has(event.sourceId)
+					) {
+						needsClone = true;
+						break;
+					}
+				}
+				if (needsClone) {
+					normalized = events.map((event) => {
+						if (
+							event.visualStyle === "heatmap" ||
+							!event.sourceId ||
+							!timeseriesIds.has(event.sourceId)
+						) {
+							return event;
+						}
+						return { ...event, visualStyle: "heatmap" };
+					});
+				}
+			}
+			this.events = normalized;
+			if (this.heatmapRange) {
+				void this.refreshHeatmapEvents(true);
+			}
 
 			this.renderCanvas();
 
@@ -1548,6 +1732,101 @@ export class CalendarViewElement extends LitElement {
 		}
 	}
 
+	resolveStyles(): Record<string, string> {
+		const cs = getComputedStyle(this);
+		const props = [
+			"--bg-today",
+			"--accent-current-time",
+			"--grid-color",
+			"--grid-color-strong",
+			"--grid-color-hover",
+			"--text-muted",
+			"--text-primary",
+			"--text-inverse",
+			"--bg-primary",
+			"--bg-elevated",
+		];
+		const styles: Record<string, string> = {};
+		for (const prop of props) {
+			styles[prop] = cs.getPropertyValue(prop).trim();
+		}
+		return styles;
+	}
+
+	private loadTimeseriesSourceIds(): Set<string> {
+		const saved = localStorage.getItem("caldav-sources") || "";
+		if (saved && saved === this.timeseriesSourceCacheKey) {
+			return this.timeseriesSourceIds;
+		}
+		const ids = new Set<string>();
+		if (saved) {
+			try {
+				const sources = JSON.parse(saved) as Array<{ id?: string; type?: string }>;
+				for (const source of sources) {
+					if (source?.type === "timeseries-json" && source.id) {
+						ids.add(source.id);
+					}
+				}
+			} catch {
+				// Ignore malformed storage
+			}
+		}
+		this.timeseriesSourceCacheKey = saved;
+		this.timeseriesSourceIds = ids;
+		return ids;
+	}
+
+	private updateHeatmapRange(visibleWeeks: WeekInfo[]): void {
+		if (visibleWeeks.length === 0) {
+			this.heatmapRange = null;
+			return;
+		}
+		const firstWeek = visibleWeeks[0]!;
+		const lastWeek = visibleWeeks[visibleWeeks.length - 1]!;
+		const startDay = firstWeek.days[0];
+		const endDay = lastWeek.days[6];
+		if (!startDay || !endDay) {
+			this.heatmapRange = null;
+			return;
+		}
+		const start = new Date(startDay);
+		start.setHours(0, 0, 0, 0);
+		const end = new Date(endDay);
+		end.setHours(23, 59, 59, 999);
+		this.heatmapRange = { start, end };
+	}
+
+	private async refreshHeatmapEvents(force = false): Promise<void> {
+		if (!this.heatmapRange) return;
+		const { start, end } = this.heatmapRange;
+		const timeseriesIds = this.loadTimeseriesSourceIds();
+		const enabledKey = [...this.internal.enabledCalendars].join(",");
+		const lockedKey = [...this.internal.lockedCalendars].join(",");
+		const key = `${start.toISOString()}::${end.toISOString()}::${this.filter || ""}::${enabledKey}::${lockedKey}`;
+		if (!force && key === this.heatmapQueryKey) return;
+		this.heatmapQueryKey = key;
+
+		const token = ++this.heatmapQueryToken;
+		try {
+			let events: CalendarEvent[];
+			if (this.internal.storage) {
+				events = await this.internal.storage.queryEvents(start, end);
+			} else {
+				events = this.events;
+			}
+			if (token !== this.heatmapQueryToken) return;
+
+			const filtered = this.internal.filterEvents(events, this.filter);
+			this.heatmapEvents = filtered.filter((event) => {
+				if (event.visualStyle === "heatmap") return true;
+				return event.sourceId ? timeseriesIds.has(event.sourceId) : false;
+			});
+			this.renderCanvas();
+		} catch (error) {
+			console.warn("Failed to refresh heatmap events:", error);
+		}
+	}
+
 	renderCanvas(): void {
 		if (!this.ctx || !this.canvas || !this.scrollContainer) return;
 
@@ -1561,292 +1840,48 @@ export class CalendarViewElement extends LitElement {
 		const scrollTop = this.scrollTop;
 		const gridWidth = width - LEFT_GUTTER_WIDTH;
 		const dayWidth = gridWidth / this._columnsPerRow;
-		const today = new Date();
 
-		// Find visible weeks
 		const visibleWeeks = this.weeks.filter(
 			(w) =>
 				w.height > 0 &&
 				w.yOffset + w.height > scrollTop &&
 				w.yOffset < scrollTop + height,
 		);
+		this.updateHeatmapRange(visibleWeeks);
+		this.refreshHeatmapEvents();
+
+		const lc: LayerContext = {
+			ctx,
+			width,
+			height,
+			scrollTop,
+			dayWidth,
+			dayHeight: this.dayHeight,
+			leftGutterWidth: LEFT_GUTTER_WIDTH,
+			columnsPerRow: this._columnsPerRow,
+			rowsPerWeek: this.rowsPerWeek,
+			visibleWeeks,
+			allWeeks: this.weeks,
+			fontFamily,
+			styles: this.resolveStyles(),
+			getDayVisualPosition: (dayIndex) => this.getDayVisualPosition(dayIndex),
+			filter: this.filter,
+		};
 
-		// Draw today highlight and current time indicator
-		const showTimeScale = this.dayHeight >= 300;
-		for (const week of visibleWeeks) {
-			const todayIndex = week.days.findIndex((d) =>
-				CalendarInternal.isSameDay(d, today),
-			);
-			if (todayIndex >= 0) {
-				const { row, col } = this.getDayVisualPosition(todayIndex);
-				const x = LEFT_GUTTER_WIDTH + col * dayWidth;
-				const dayY = week.yOffset + row * this.dayHeight - scrollTop;
-				const bgToday =
-					getComputedStyle(this).getPropertyValue("--bg-today").trim() ||
-					"rgba(255, 255, 255, 0.05)";
-				ctx.fillStyle = bgToday;
-				ctx.fillRect(x, dayY, dayWidth, this.dayHeight);
-
-				if (showTimeScale) {
-					// Draw current time indicator line (zoomed in)
-					const now = new Date();
-					const currentMinutes = now.getHours() * 60 + now.getMinutes();
-					const timeY = dayY + (currentMinutes / 1440) * this.dayHeight;
-					if (timeY >= 0 && timeY <= height) {
-						const accentTime =
-							getComputedStyle(this)
-								.getPropertyValue("--accent-current-time")
-								.trim() || "rgba(255, 0, 0, 0.8)";
-						ctx.strokeStyle = accentTime;
-						ctx.lineWidth = 1;
-						ctx.beginPath();
-						ctx.moveTo(x, timeY);
-						ctx.lineTo(x + dayWidth, timeY);
-						ctx.stroke();
-						ctx.lineWidth = 1;
-					}
-				}
-			}
-		}
-
-		// Draw grid lines
-		ctx.strokeStyle =
-			getComputedStyle(this).getPropertyValue("--grid-color").trim() ||
-			"rgba(255, 255, 255, 0.1)";
-		ctx.lineWidth = 1;
-
-		// Vertical lines (day separators) - draw for each column
-		for (let i = 1; i <= this._columnsPerRow; i++) {
-			const x = LEFT_GUTTER_WIDTH + i * dayWidth;
-			ctx.beginPath();
-			ctx.moveTo(x, 0);
-			ctx.lineTo(x, height);
-			ctx.stroke();
+		for (const layer of this.layers) {
+			if (!layer.enabled) continue;
+			ctx.save();
+			layer.render(lc);
+			ctx.restore();
 		}
 
-		// Horizontal lines (week separators) and left gutter content
-		for (let i = 0; i < visibleWeeks.length; i++) {
-			const week = visibleWeeks[i];
-			if (!week) continue;
-			const y = week.yOffset - scrollTop;
-
-			// Draw gap indicator if there are hidden weeks before this one
-			if (this.filter && i > 0) {
-				const prevWeek = visibleWeeks[i - 1];
-				if (!prevWeek) continue;
-				const prevWeekIndex = this.weeks.indexOf(prevWeek);
-				const currentWeekIndex = this.weeks.indexOf(week);
-				const hiddenWeeks = currentWeekIndex - prevWeekIndex - 1;
-
-				if (hiddenWeeks > 0) {
-					// Draw gap indicator at the top of the current week
-					const gapY = y;
-
-					// Draw dashed line
-					const gridColorStrong =
-						getComputedStyle(this)
-							.getPropertyValue("--grid-color-strong")
-							.trim() || "rgba(255, 255, 255, 0.3)";
-					ctx.strokeStyle = gridColorStrong;
-					ctx.lineWidth = 1;
-					ctx.setLineDash([4, 4]);
-					ctx.beginPath();
-					ctx.moveTo(LEFT_GUTTER_WIDTH, gapY);
-					ctx.lineTo(width, gapY);
-					ctx.stroke();
-					ctx.setLineDash([]);
-
-					// Draw ellipsis in the center
-					const textMuted =
-						getComputedStyle(this).getPropertyValue("--text-muted").trim() ||
-						"rgba(255, 255, 255, 0.4)";
-					ctx.fillStyle = textMuted;
-					ctx.textAlign = "center";
-					const ellipsisText = `⋯ ${hiddenWeeks} week${
-						hiddenWeeks > 1 ? "s" : ""
-					}`;
-
-					// Draw background pill for the ellipsis
-					const textWidth = ctx.measureText(ellipsisText).width;
-					const pillPadding = 8;
-					const pillX =
-						(LEFT_GUTTER_WIDTH + width) / 2 - textWidth / 2 - pillPadding;
-					const pillY = gapY - 8;
-					const pillWidth = textWidth + pillPadding * 2;
-					const pillHeight = 16;
-
-					const bgPrimary =
-						getComputedStyle(this).getPropertyValue("--bg-primary").trim() ||
-						"rgba(30, 30, 30, 0.9)";
-					ctx.fillStyle = bgPrimary;
-					ctx.beginPath();
-					ctx.roundRect(pillX, pillY, pillWidth, pillHeight, 8);
-					ctx.fill();
-
-					ctx.fillStyle = textMuted;
-					ctx.fillText(ellipsisText, (LEFT_GUTTER_WIDTH + width) / 2, gapY + 4);
-				}
-			}
-
-			// Week separator line
-			ctx.strokeStyle =
-				getComputedStyle(this).getPropertyValue("--grid-color").trim() ||
-				"rgba(255, 255, 255, 0.1)";
-			ctx.beginPath();
-			ctx.moveTo(LEFT_GUTTER_WIDTH, y);
-			ctx.lineTo(width, y);
-			ctx.stroke();
-
-			// Draw horizontal lines between visual rows within this week
-			for (let row = 1; row < this.rowsPerWeek; row++) {
-				const rowY = y + row * this.dayHeight;
-				if (rowY >= 0 && rowY <= height) {
-					ctx.beginPath();
-					ctx.moveTo(LEFT_GUTTER_WIDTH, rowY);
-					ctx.lineTo(width, rowY);
-					ctx.stroke();
-				}
-			}
-
-			// Left gutter: week number and time scale
-			const hourLabelOpacity = Math.max(
-				0,
-				Math.min(1, (this.dayHeight - 300) / 300),
-			);
-
-			ctx.font = `500 11px ${fontFamily}`;
-			ctx.textBaseline = "bottom";
-			ctx.textAlign = "right";
-
-			// Draw hourly lines and labels for each visual row
-			const gridColor =
-				getComputedStyle(this).getPropertyValue("--grid-color").trim() ||
-				"rgba(255, 255, 255, 0.1)";
-			const textMuted =
-				getComputedStyle(this).getPropertyValue("--text-muted").trim() ||
-				"rgba(255, 255, 255, 0.4)";
-			ctx.strokeStyle = gridColor.replace(
-				/[\d.]+\)$/,
-				`${0.05 * hourLabelOpacity})`,
-			);
-
-			// Calculate opacity for hour labels based on zoom level
-			// Fade in as we zoom in from 200px to 400px
-			ctx.fillStyle = textMuted.replace(
-				/[\d.]+\)$/,
-				`${0.4 * hourLabelOpacity})`,
-			);
-
-			for (let row = 0; row < this.rowsPerWeek; row++) {
-				const rowY = y + row * this.dayHeight;
-				for (let hour = 0; hour < 24; hour++) {
-					const hourY = rowY + (hour / 24) * this.dayHeight;
-					if (hourY >= 0 && hourY <= height) {
-						// Hour line
-						ctx.beginPath();
-						ctx.moveTo(LEFT_GUTTER_WIDTH, hourY);
-						ctx.lineTo(width, hourY);
-						ctx.stroke();
-
-						// Hour label (only draw if opacity is significant)
-						if (hourLabelOpacity > 0.1) {
-							const label = `${hour.toString().padStart(2, "0")}:00`;
-							ctx.fillText(label, 48, hourY + 4);
-						}
-					}
-				}
-			}
-
-			// Draw current time indicator in left gutter (only when timescale is visible and today is in this week)
-			if (hourLabelOpacity > 0.1) {
-				const today = new Date();
-				const todayIndex = week.days.findIndex((d) =>
-					CalendarInternal.isSameDay(d, today),
-				);
-
-				if (todayIndex >= 0) {
-					const { row } = this.getDayVisualPosition(todayIndex);
-					const currentMinutes = today.getHours() * 60 + today.getMinutes();
-					const timeY =
-						y + row * this.dayHeight + (currentMinutes / 1440) * this.dayHeight;
-
-					if (timeY >= 0 && timeY <= height) {
-						const hours = today.getHours().toString().padStart(2, "0");
-						const minutes = today.getMinutes().toString().padStart(2, "0");
-						const timeText = `${hours}:${minutes}`;
-
-						ctx.save();
-						ctx.textAlign = "right";
-						ctx.textBaseline = "middle";
-
-						const textWidth = ctx.measureText(timeText).width;
-						const bgPaddingX = 6;
-						const bgPaddingY = 3;
-						const textX = 48;
-						const textY = timeY;
-
-						// Draw background pill
-						const bgElevated =
-							getComputedStyle(this).getPropertyValue("--bg-elevated").trim() ||
-							"rgba(0, 0, 0, 0.7)";
-						ctx.fillStyle = bgElevated;
-						ctx.beginPath();
-						ctx.roundRect(
-							textX - textWidth - bgPaddingX,
-							textY - 8,
-							textWidth + bgPaddingX * 2,
-							16,
-							4,
-						);
-						ctx.fill();
-
-						// Draw current time text in white
-						ctx.fillStyle =
-							getComputedStyle(this)
-								.getPropertyValue("--text-primary")
-								.trim() || "rgba(255, 255, 255, 1)";
-						ctx.fillText(timeText, textX, textY);
-						ctx.restore();
-					}
-				}
-			}
-
-			// Draw week number - sticky within visible portion of week
-			// Fade out week numbers as we zoom in from 150px to 200px
-			const weekNumberOpacity = Math.max(
-				0,
-				Math.min(1, 1 - (this.dayHeight - 300) / 50),
-			);
-			const textMutedForWeek =
-				getComputedStyle(this).getPropertyValue("--text-muted").trim() ||
-				"rgba(255, 255, 255, 0.4)";
-			ctx.fillStyle = textMutedForWeek.replace(
-				/[\d.]+\)$/,
-				`${0.4 * weekNumberOpacity})`,
-			);
-			ctx.textAlign = "center";
-			const label = `W${week.weekNumber}`;
-			const weekTop = y;
-			const weekBottom = y + week.height;
-			// Clamp label to be visible: at least 14px from top of viewport,
-			// but within the week's bounds
-			const labelY = Math.max(
-				14,
-				Math.min(weekTop + week.height / 2 + 4, weekBottom - 4),
-			);
-			// Only draw if the label position is within the week's visible area and viewport and opacity is significant
-			if (
-				labelY >= Math.max(0, weekTop + 4) &&
-				labelY <= Math.min(height, weekBottom) &&
-				weekNumberOpacity > 0.1
-			) {
-				ctx.fillText(label, 30, labelY);
-			}
+		// Copy event rects from events layer for hit-testing
+		if (this.eventsLayer) {
+			this.eventRects = this.eventsLayer.eventRects;
+		} else {
+			this.eventRects = [];
 		}
 
-		// Render events on canvas
-		this.renderEventsOnCanvas(ctx, scrollTop, height, dayWidth, visibleWeeks);
-
 		this.renderDateLabels();
 
 		// Draw sticky weekday labels at top of viewport
@@ -1862,808 +1897,17 @@ export class CalendarViewElement extends LitElement {
 		this.renderMinimap();
 	}
 
-	renderEventsOnCanvas(
-		ctx: CanvasRenderingContext2D,
-		scrollTop: number,
-		height: number,
-		dayWidth: number,
-		visibleWeeks: WeekInfo[],
-	): void {
-		const events = this.events;
-		const fontFamily = getComputedStyle(this).fontFamily;
-		const viewportBottom = scrollTop + height;
-		const showTimeScale = this.dayHeight >= 300;
-
-		// Clear event rects for new render
-		this.eventRects = [];
-
-		if (visibleWeeks.length === 0) return;
-
-		// Compute visible date range
-		const firstVisibleWeek = visibleWeeks[0]!;
-		const lastVisibleWeek = visibleWeeks[visibleWeeks.length - 1]!;
-		const firstVisibleDay = firstVisibleWeek.days[0]!;
-		const lastVisibleDay = lastVisibleWeek.days[6]!;
-		const visibleStartTime = firstVisibleDay.getTime();
-		const visibleEndTime = lastVisibleDay.getTime() + 86400000 - 1;
-
-		// Track occupied row slots per day-column for stacking
-		const dayOccupiedRows = new Map<string, Set<number>>();
-		const eventRowIndex = new Map<string, number>();
-
-		const segments: EventSegment[] = [];
-
-		// Build segments - separate all-day and timed events
-		const allDaySegments: EventSegment[] = [];
-		const timedSegments: EventSegment[] = [];
-
-		for (const event of events) {
-			const eventStartTime = event.start.getTime();
-			const eventEndTime = event.end.getTime();
-
-			if (eventEndTime < visibleStartTime || eventStartTime > visibleEndTime)
-				continue;
-
-			// Only iterate through visible weeks
-			const eventWeeks: { weekIndex: number; week: WeekInfo }[] = [];
-
-			for (const week of visibleWeeks) {
-				const weekStartDay = week.days[0];
-				const weekEndDay = week.days[6];
-				if (!weekStartDay || !weekEndDay) continue;
-
-				const weekStart = weekStartDay.getTime();
-				const weekEnd = weekEndDay.getTime() + 86399999;
-
-				if (eventEndTime >= weekStart && eventStartTime <= weekEnd) {
-					const weekIndex = this.weeks.indexOf(week);
-					eventWeeks.push({ weekIndex, week });
-				}
-			}
-
-			const totalWeeks = eventWeeks.length;
-			const isAllDay = event.isAllDay === true;
-
-			for (let i = 0; i < eventWeeks.length; i++) {
-				const { weekIndex, week } = eventWeeks[i]!;
-
-				const isStart = i === 0;
-				const isEnd = i === eventWeeks.length - 1;
-
-				let startDayIndex = 0;
-				let endDayIndex = 6;
-
-				if (isStart) {
-					startDayIndex = getDayIndexInWeek(week, event.start);
-				}
-				if (isEnd) {
-					// For all-day events, the end date is exclusive (e.g., Monday event ends Tuesday 00:00)
-					// Subtract 1ms to get the actual last day
-					const effectiveEnd = isAllDay
-						? new Date(event.end.getTime() - 1)
-						: event.end;
-					endDayIndex = getDayIndexInWeek(week, effectiveEnd);
-				}
-
-				const segment = {
-					event,
-					weekIndex,
-					week,
-					startDayIndex,
-					endDayIndex,
-					isStart,
-					isEnd,
-					totalWeeks,
-				};
-
-				if (isAllDay) {
-					allDaySegments.push(segment);
-				} else {
-					timedSegments.push(segment);
-				}
-			}
-		}
-
-		// In timescale mode, split multi-day timed segments into per-day sub-segments
-		// so each day renders its own block with correct time positions (like renderVirtualEvent).
-		const renderedTimedSegments = showTimeScale
-			? timedSegments.flatMap((seg) => {
-					if (seg.startDayIndex === seg.endDayIndex) return [seg];
-					const result = [];
-					for (let d = seg.startDayIndex; d <= seg.endDayIndex; d++) {
-						result.push({
-							...seg,
-							startDayIndex: d,
-							endDayIndex: d,
-							isStart: d === seg.startDayIndex && seg.isStart,
-							isEnd: d === seg.endDayIndex && seg.isEnd,
-							totalWeeks: 1,
-						});
-					}
-					return result;
-			  })
-			: timedSegments;
-
-		// Combine segments with all-day events first (so they get top rows)
-		segments.push(...allDaySegments, ...renderedTimedSegments);
-
-		// Calculate columns for overlapping events in time scale mode
-		interface EventLayout {
-			segment: EventSegment;
-			yStart: number;
-			yEnd: number;
-			column: number;
-			totalColumns: number;
-		}
-		const eventLayouts: EventLayout[] = [];
-
-		// Group segments by week and day for overlap detection
-		const segmentsByWeekDay = new Map<string, EventSegment[]>();
-		for (const segment of segments) {
-			const allDay = segment.event.isAllDay === true;
-
-			// Only do column layout for time-scaled non-all-day events
-			if (showTimeScale && !allDay) {
-				// For multi-day events in time scale, each day gets its own column calculation
-				for (
-					let dayIdx = segment.startDayIndex;
-					dayIdx <= segment.endDayIndex;
-					dayIdx++
-				) {
-					const key = `${segment.weekIndex}-${dayIdx}`;
-					if (!segmentsByWeekDay.has(key)) {
-						segmentsByWeekDay.set(key, []);
-					}
-					segmentsByWeekDay.get(key)!.push(segment);
-				}
-			}
-		}
-
-		// Calculate column assignments for each day's overlapping events
-		const segmentColumns = new Map<
-			string,
-			{ column: number; totalColumns: number }
-		>();
-
-		for (const [dayKey, daySegments] of segmentsByWeekDay) {
-			const [weekIndexStr, dayIndexStr] = dayKey.split("-");
-			const dayIndex = parseInt(dayIndexStr!);
-			const weekIndex = parseInt(weekIndexStr!);
-
-			// Calculate time ranges for each segment in this day
-			interface SegmentTime {
-				segment: EventSegment;
-				startMinutes: number;
-				endMinutes: number;
-			}
-			const segmentTimes: SegmentTime[] = [];
-
-			for (const seg of daySegments) {
-				const week = this.weeks[weekIndex];
-				if (!week) continue;
-
-				const dayStartTime = new Date(week.days[dayIndex]!).setHours(
-					0,
-					0,
-					0,
-					0,
-				);
-				const dayEndTime = new Date(week.days[dayIndex]!).setHours(
-					23,
-					59,
-					59,
-					999,
-				);
-				const eventStartTime = seg.event.start.getTime();
-				const eventEndTime = seg.event.end.getTime() - 60000; // Subtract 1 minute for rendering
-
-				const effectiveStartTime = Math.max(eventStartTime, dayStartTime);
-				const effectiveEndTime = Math.min(eventEndTime, dayEndTime);
-
-				const effectiveStart = new Date(effectiveStartTime);
-				const effectiveEnd = new Date(effectiveEndTime);
-
-				const startMinutes =
-					effectiveStart.getHours() * 60 + effectiveStart.getMinutes();
-				const endMinutes =
-					effectiveEnd.getHours() * 60 + effectiveEnd.getMinutes();
-
-				segmentTimes.push({ segment: seg, startMinutes, endMinutes });
-			}
-
-			// Sort by start time, then by duration (longer first)
-			segmentTimes.sort((a, b) => {
-				if (a.startMinutes !== b.startMinutes)
-					return a.startMinutes - b.startMinutes;
-				return b.endMinutes - b.startMinutes - (a.endMinutes - a.startMinutes);
-			});
-
-			// Assign columns using a greedy algorithm
-			const columns: { endMinutes: number }[] = [];
-
-			for (const st of segmentTimes) {
-				// Find the first column where this event fits
-				let columnIndex = 0;
-				for (; columnIndex < columns.length; columnIndex++) {
-					if (columns[columnIndex]!.endMinutes <= st.startMinutes) {
-						// This column is free
-						break;
-					}
-				}
-
-				// If no existing column works, create a new one
-				if (columnIndex === columns.length) {
-					columns.push({ endMinutes: st.endMinutes });
-				} else {
-					columns[columnIndex]!.endMinutes = st.endMinutes;
-				}
-
-				const segmentKey = `${st.segment.weekIndex}-${st.segment.event.id}-${dayIndex}`;
-				segmentColumns.set(segmentKey, {
-					column: columnIndex,
-					totalColumns: columns.length,
-				});
-			}
-
-			// Update total columns for all segments in this day
-			for (const st of segmentTimes) {
-				const segmentKey = `${st.segment.weekIndex}-${st.segment.event.id}-${dayIndex}`;
-				const layout = segmentColumns.get(segmentKey);
-				if (layout) {
-					layout.totalColumns = columns.length;
-				}
-			}
-		}
-
-		// Render segments
-		for (const segment of segments) {
-			const {
-				event,
-				week,
-				weekIndex,
-				startDayIndex,
-				endDayIndex,
-				isStart,
-				isEnd,
-				totalWeeks,
-			} = segment;
-			const weekYOffset = week.yOffset;
-
-			const allDay = event.isAllDay === true;
-
-			// Get visual position for the start day
-			const startVisualPos = this.getDayVisualPosition(startDayIndex);
-			const endVisualPos = this.getDayVisualPosition(endDayIndex);
-
-			// Skip segments that span multiple visual rows for now (would need to be split)
-			// For simple case, render each day on its visual row
-			if (startVisualPos.row !== endVisualPos.row) {
-				// Event spans visual rows - for now, only render the start portion
-				// TODO: Split into multiple segments across visual rows
-			}
-
-			let yStart: number;
-			let yEnd: number;
-
-			if (showTimeScale && !allDay) {
-				const dayStartTime = new Date(week.days[startDayIndex]!).setHours(
-					0,
-					0,
-					0,
-					0,
-				);
-				const dayEndTime = new Date(week.days[endDayIndex]!).setHours(
-					23,
-					59,
-					59,
-					999,
-				);
-				const eventStartTime = event.start.getTime();
-				const eventEndTime = event.end.getTime() - 60000; // Subtract 1 minute for rendering
-
-				const effectiveStartTime = Math.max(eventStartTime, dayStartTime);
-				const effectiveEndTime = Math.min(eventEndTime, dayEndTime);
-
-				const effectiveStart = new Date(effectiveStartTime);
-				const effectiveEnd = new Date(effectiveEndTime);
-
-				const startMinutes =
-					effectiveStart.getHours() * 60 + effectiveStart.getMinutes();
-				const endMinutes =
-					effectiveEnd.getHours() * 60 + effectiveEnd.getMinutes();
-
-				// Position within the visual row
-				const visualRowY = weekYOffset + startVisualPos.row * this.dayHeight;
-				yStart = visualRowY + (startMinutes / 1440) * this.dayHeight;
-				yEnd = visualRowY + (endMinutes / 1440) * this.dayHeight;
-			} else {
-				const eventKey = `${weekIndex}-${event.id}`;
-				let rowIndex = eventRowIndex.get(eventKey);
-
-				if (rowIndex === undefined) {
-					rowIndex = 0;
-					while (true) {
-						let rowFree = true;
-						for (let d = startDayIndex; d <= endDayIndex; d++) {
-							const dayKey = `${weekIndex}-${d}`;
-							const occupied = dayOccupiedRows.get(dayKey);
-							if (occupied?.has(rowIndex)) {
-								rowFree = false;
-								break;
-							}
-						}
-						if (rowFree) break;
-						rowIndex++;
-					}
-					eventRowIndex.set(eventKey, rowIndex);
-				}
-
-				for (let d = startDayIndex; d <= endDayIndex; d++) {
-					const dayKey = `${weekIndex}-${d}`;
-					let occupied = dayOccupiedRows.get(dayKey);
-					if (!occupied) {
-						occupied = new Set();
-						dayOccupiedRows.set(dayKey, occupied);
-					}
-					occupied.add(rowIndex);
-				}
-
-				const maxEventsInRow = Math.floor(
-					(this.dayHeight - 4) / (MIN_EVENT_HEIGHT + 2),
-				);
-				if (rowIndex >= maxEventsInRow) continue;
-
-				// Position within the visual row
-				const visualRowY = weekYOffset + startVisualPos.row * this.dayHeight;
-				yStart = visualRowY + 4 + rowIndex * (MIN_EVENT_HEIGHT + 2);
-				yEnd = yStart + MIN_EVENT_HEIGHT;
-			}
-
-			const eventHeight = Math.max(
-				showTimeScale ? 4 : MIN_EVENT_HEIGHT,
-				yEnd - yStart,
-			);
-
-			// Calculate horizontal position with column layout for time-scaled events
-			let x: number;
-			let spanWidth: number;
-
-			const segmentKey = `${weekIndex}-${event.id}-${startDayIndex}`;
-			const columnLayout = segmentColumns.get(segmentKey);
-
-			if (
-				showTimeScale &&
-				!allDay &&
-				columnLayout &&
-				columnLayout.totalColumns > 1
-			) {
-				// This event has parallel events - divide the day width
-				const columnWidth = dayWidth / columnLayout.totalColumns;
-				x =
-					LEFT_GUTTER_WIDTH +
-					startVisualPos.col * dayWidth +
-					columnLayout.column * columnWidth;
-				spanWidth = columnWidth;
-			} else {
-				// Normal layout - use visual column position
-				// For multi-day events on same visual row, calculate span
-				const colSpan = endVisualPos.col - startVisualPos.col + 1;
-				x = LEFT_GUTTER_WIDTH + startVisualPos.col * dayWidth;
-				spanWidth = colSpan * dayWidth;
-			}
-
-			// Convert to viewport coordinates
-			const viewportY = yStart - scrollTop;
-
-			// Skip if completely out of view
-			if (viewportY + eventHeight < 0 || viewportY > height) continue;
-
-			const eventColor = event.color || "#888888";
-			const isSelected = this.internal.isEventSelected(event);
-			const isHovered = this.hoveredEventId === event.id;
-
-			// Apple Calendar style dimensions
-			const padding = 2;
-			const eventWidth = spanWidth - padding * 2;
-			const leftBorderWidth = 3;
-			const contentPadding = 6;
-
-			// Determine border radius based on span position
-			let radiusTopLeft = 4;
-			let radiusTopRight = 4;
-			let radiusBottomLeft = 4;
-			let radiusBottomRight = 4;
-
-			if (totalWeeks > 1) {
-				if (isStart && !isEnd) {
-					radiusTopRight = 0;
-					radiusBottomRight = 0;
-				} else if (!isStart && isEnd) {
-					radiusTopLeft = 0;
-					radiusBottomLeft = 0;
-				} else if (!isStart && !isEnd) {
-					radiusTopLeft = 0;
-					radiusTopRight = 0;
-					radiusBottomLeft = 0;
-					radiusBottomRight = 0;
-				}
-			}
-
-			ctx.save();
-
-			// Apply transparency for read-only events
-			if (event.readOnly) {
-				ctx.globalAlpha = 0.5;
-			}
-
-			// Draw background - solid color if selected, subtle if not
-			const hsl = rgbToHsl(hexToRgb(eventColor));
-			const textPrimary =
-				getComputedStyle(this).getPropertyValue("--text-primary").trim() ||
-				"rgba(255, 255, 255, 0.9)";
-			const textInverse =
-				getComputedStyle(this).getPropertyValue("--text-inverse").trim() ||
-				"rgb(0, 0, 0)";
-			// Increase saturation to 75% for more vibrant colors, allow higher lightness for brighter backgrounds
-			const backgroundColor = isSelected
-				? eventColor
-				: `hsla(${hsl[0]}, ${Math.min(hsl[1] * 0.9, 90)}%, ${Math.min(
-						hsl[2] + 15,
-						40,
-				  )}%, 0.45)`;
-			const borderColor = isSelected
-				? eventColor
-				: `hsla(${hsl[0]}, ${Math.min(hsl[1] * 0.9, 90)}%, ${Math.min(
-						hsl[2] + 10,
-						70,
-				  )}%, 1)`;
-
-			// Check if event should have stripes (not accepted)
-			const useStripes = this.shouldRenderEventWithStripes(event);
-
-			ctx.beginPath();
-			ctx.roundRect(x + padding, viewportY, eventWidth, eventHeight, [
-				radiusTopLeft,
-				radiusTopRight,
-				radiusBottomRight,
-				radiusBottomLeft,
-			]);
-
-			// Fill with solid background first
-			ctx.fillStyle = backgroundColor;
-			ctx.fill();
-
-			// Add stripe pattern overlay if needed
-			if (useStripes) {
-				const patternCanvas = this.getStripePatternCanvas();
-				if (patternCanvas) {
-					ctx.save();
-
-					// Clip to the event rectangle
-					ctx.beginPath();
-					ctx.roundRect(x + padding, viewportY, eventWidth, eventHeight, [
-						radiusTopLeft,
-						radiusTopRight,
-						radiusBottomRight,
-						radiusBottomLeft,
-					]);
-					ctx.clip();
-
-					// Pattern size is 16px (8 * scale of 2)
-					const patternSize = 12;
-
-					// Calculate starting position to align with content coordinates
-					// Start from a position that makes the pattern appear fixed in content space
-					const startX = Math.floor((x + padding) / patternSize) * patternSize;
-					const startY =
-						Math.floor(yStart / patternSize) * patternSize - scrollTop;
-
-					// Tile the pattern across the clipped area
-					for (
-						let py = startY;
-						py < viewportY + eventHeight;
-						py += patternSize
-					) {
-						for (
-							let px = startX;
-							px < x + padding + eventWidth;
-							px += patternSize
-						) {
-							ctx.drawImage(patternCanvas, px, py, patternSize, patternSize);
-						}
-					}
-
-					ctx.restore();
-				}
-			}
-
-			// Draw colored left border (Apple Calendar style)
-			if (!isSelected) {
-				ctx.fillStyle = borderColor;
-				ctx.beginPath();
-				ctx.roundRect(
-					x + padding + 2,
-					viewportY + 2,
-					leftBorderWidth,
-					eventHeight - 4,
-					[radiusTopLeft, radiusTopLeft, radiusBottomLeft, radiusBottomLeft],
-				);
-				ctx.fill();
-			}
-
-			// Draw selection border - visible outline for selected events
-			if (isSelected) {
-				ctx.strokeStyle = textInverse;
-				ctx.lineWidth = 1;
-				ctx.beginPath();
-				ctx.roundRect(x + padding, viewportY, eventWidth, eventHeight, [
-					radiusTopLeft,
-					radiusTopRight,
-					radiusBottomRight,
-					radiusBottomLeft,
-				]);
-				ctx.stroke();
-			}
-
-			// Draw hover outline
-			if (isHovered && !isSelected) {
-				ctx.strokeStyle =
-					getComputedStyle(this)
-						.getPropertyValue("--grid-color-hover")
-						.trim() || "rgba(255, 255, 255, 0.2)";
-				ctx.lineWidth = 1;
-				ctx.beginPath();
-				ctx.roundRect(x + padding, viewportY, eventWidth, eventHeight, [
-					radiusTopLeft,
-					radiusTopRight,
-					radiusBottomRight,
-					radiusBottomLeft,
-				]);
-				ctx.stroke();
-			}
-
-			// Draw text if this is the start segment and there's enough space
-			if (isStart && eventHeight >= 16) {
-				// Use inverse text color for selected events (for contrast against solid color)
-				// Use event color or primary text color for unselected events
-				const textColor = isSelected
-					? textInverse || "white"
-					: textPrimary || eventColor;
-				ctx.fillStyle = textColor;
-				ctx.font = `11px ${fontFamily}`;
-				ctx.textAlign = "left";
-				ctx.textBaseline = "top";
-
-				const textX = x + padding + leftBorderWidth + contentPadding + 1;
-				const textY = viewportY + 6;
-				let maxTextWidth = eventWidth - leftBorderWidth - contentPadding - 4;
-
-				// Clip text to event bounds
-				ctx.save();
-				ctx.beginPath();
-				ctx.rect(
-					x + padding + leftBorderWidth,
-					viewportY,
-					eventWidth - leftBorderWidth,
-					eventHeight,
-				);
-				ctx.clip();
-
-				// Draw recurring icon if event has rrule
-				if (event.rrule) {
-					ctx.font = `11px ${fontFamily}`;
-					const recurIcon = "⟳";
-					const iconWidth = ctx.measureText(recurIcon).width;
-					ctx.fillText(recurIcon, textX, textY);
-					maxTextWidth -= iconWidth + 4;
-				}
-
-				// Draw title with ellipsis if needed
-				const titleStartX =
-					textX + (event.rrule ? ctx.measureText("⟳").width + 4 : 0);
-				let displayTitle = event.title;
-				ctx.font = `11px ${fontFamily}`;
-				const titleWidth = ctx.measureText(displayTitle).width;
-
-				if (titleWidth > maxTextWidth) {
-					const ellipsis = "…";
-					const ellipsisWidth = ctx.measureText(ellipsis).width;
-
-					// Binary search for the right length
-					let left = 0;
-					let right = displayTitle.length;
-					let bestFit = 0;
-
-					while (left <= right) {
-						const mid = Math.floor((left + right) / 2);
-						const testText = displayTitle.substring(0, mid);
-						const testWidth = ctx.measureText(testText).width + ellipsisWidth;
-
-						if (testWidth <= maxTextWidth) {
-							bestFit = mid;
-							left = mid + 1;
-						} else {
-							right = mid - 1;
-						}
-					}
-
-					displayTitle = displayTitle.substring(0, bestFit) + ellipsis;
-				}
-
-				ctx.fillText(displayTitle, titleStartX, textY);
-
-				// Draw time if there's enough space (at least 32px for title + time)
-				if (eventHeight >= 32) {
-					const formatTime = (date: Date) => {
-						const hours = date.getHours();
-						const minutes = date.getMinutes();
-						const ampm = hours >= 12 ? "PM" : "AM";
-						const displayHours = hours % 12 || 12;
-						return `${displayHours}:${minutes
-							.toString()
-							.padStart(2, "0")} ${ampm}`;
-					};
-
-					const startTime = formatTime(event.start);
-					const endTime = formatTime(event.end);
-					const timeText = `${startTime} – ${endTime}`;
-
-					// Use inverse text color for selected events, primary text or event color for unselected
-					const timeTextColor = isSelected
-						? textInverse || "white"
-						: textPrimary || eventColor;
-					ctx.fillStyle = timeTextColor;
-					ctx.font = `10px ${fontFamily}`;
-
-					// Draw time with ellipsis if needed
-					let displayTime = timeText;
-					let timeWidth = ctx.measureText(displayTime).width;
-
-					if (timeWidth > maxTextWidth) {
-						const ellipsis = "…";
-						const ellipsisWidth = ctx.measureText(ellipsis).width;
-
-						let left = 0;
-						let right = displayTime.length;
-						let bestFit = 0;
-
-						while (left <= right) {
-							const mid = Math.floor((left + right) / 2);
-							const testText = displayTime.substring(0, mid);
-							const testWidth = ctx.measureText(testText).width + ellipsisWidth;
-
-							if (testWidth <= maxTextWidth) {
-								bestFit = mid;
-								left = mid + 1;
-							} else {
-								right = mid - 1;
-							}
-						}
-
-						displayTime = displayTime.substring(0, bestFit) + ellipsis;
-					}
-
-					ctx.fillText(displayTime, textX, textY + 14);
-				}
-
-				ctx.restore();
-			}
-
-			ctx.restore();
-
-			// Store rect for hit testing (in content coordinates)
-			this.eventRects.push({
-				event,
-				x: x + padding,
-				y: yStart,
-				width: eventWidth,
-				height: eventHeight,
-			});
-		}
-
-		// Render month labels
-		const monthNames = [
-			"January",
-			"February",
-			"March",
-			"April",
-			"May",
-			"June",
-			"July",
-			"August",
-			"September",
-			"October",
-			"November",
-			"December",
-		];
-
-		const monthBoundaries: {
-			monthKey: string;
-			monthName: string;
-			year: number;
-			yOffset: number;
-		}[] = [];
-		const seenMonths = new Set<string>();
-
-		for (const week of visibleWeeks) {
-			const firstDay = week.days[0];
-			if (!firstDay) continue;
-
-			const monthIndex = firstDay.getMonth();
-			const year = firstDay.getFullYear();
-			const monthKey = `${monthIndex}-${year}`;
-
-			if (!seenMonths.has(monthKey)) {
-				seenMonths.add(monthKey);
-				const monthName = monthNames[monthIndex];
-				if (monthName) {
-					monthBoundaries.push({
-						monthKey,
-						monthName,
-						year,
-						yOffset: week.yOffset,
-					});
-				}
-			}
-		}
-
-		for (let i = 0; i < monthBoundaries.length; i++) {
-			const month = monthBoundaries[i]!;
-			const nextMonth = monthBoundaries[i + 1];
-			const labelY = month.yOffset;
-			const nextMonthY = nextMonth ? nextMonth.yOffset : this.totalHeight;
-
-			if (nextMonthY < scrollTop) continue;
-			if (labelY > viewportBottom) break;
-
-			const padding = [12, 0, 0, 12];
-
-			const stickyTop = Math.max(0, scrollTop - labelY);
-			const maxStickyTop = nextMonthY - labelY - 24;
-			const clampedStickyTop = Math.min(stickyTop, maxStickyTop);
-			const labelTopMargin = 32;
-			const finalTop = labelY + clampedStickyTop - scrollTop + labelTopMargin;
-
-			ctx.save();
-			ctx.font = `bold 18px ${fontFamily}`;
-			ctx.textAlign = "left";
-			ctx.textBaseline = "top";
-
-			const labelText = `${month.monthName} ${month.year}`;
-			const textWidth = ctx.measureText(labelText).width;
-			const leftMargin = 8;
-			const textX = 64 + padding[3] + leftMargin;
-			const textY = finalTop + padding[0];
-
-			// Draw background
-			const bgPaddingLeft = 8;
-			const bgPaddingRight = 8;
-			const bgElevated =
-				getComputedStyle(this).getPropertyValue("--bg-elevated").trim() ||
-				"rgba(0, 0, 0, 0.7)";
-			ctx.fillStyle = bgElevated;
-			ctx.beginPath();
-			ctx.roundRect(
-				textX - bgPaddingLeft,
-				textY - 4,
-				textWidth + bgPaddingLeft + bgPaddingRight,
-				26,
-				6,
-			);
-			ctx.fill();
-
-			// Draw text
-			const textPrimary =
-				getComputedStyle(this).getPropertyValue("--text-primary").trim() ||
-				"rgba(255, 255, 255, 0.95)";
-			ctx.fillStyle = textPrimary;
-			ctx.fillText(labelText, textX, textY);
-			ctx.restore();
-		}
+	toggleLayer(name: string): void {
+		const layer = this.layers.find((l) => l.name === name);
+		if (!layer) throw new Error(`Layer "${name}" not found`);
+		layer.enabled = !layer.enabled;
+		this.renderCanvas();
 	}
 
+
 	onWheel = (e: WheelEvent): void => {
 		if (this.hasAttribute("scroll-lock")) return;
+		this.lastWheelTime = Date.now();
 
 		if (this.scrollAnimationFrame) {
 			this.cancelScrollAnimation();
@@ -3051,9 +2295,10 @@ export class CalendarViewElement extends LitElement {
 						snappedEnd.setTime(snappedStart.getTime() + 15 * 60 * 1000);
 					}
 
+					const isZoomedOut = this.dayHeight < TIME_SCALE_DAY_HEIGHT;
 					this.dispatchEvent(
 						new CustomEvent("create-event", {
-							detail: { start: snappedStart, end: snappedEnd },
+							detail: { start: snappedStart, end: snappedEnd, isAllDay: isZoomedOut },
 							bubbles: true,
 						}),
 					);
@@ -3119,6 +2364,9 @@ export class CalendarViewElement extends LitElement {
 			this.resizingOriginalStart = null;
 			this.resizingOriginalEnd = null;
 			this.isResizingEvent = false;
+			if (this.scrollContainer) {
+				this.scrollContainer.style.cursor = "";
+			}
 			this.renderCanvas();
 			this.requestUpdate();
 		}
@@ -3138,6 +2386,7 @@ export class CalendarViewElement extends LitElement {
 			// Close event detail overlay
 			this.selectedEventForDetail = null;
 			this.selectedEventRect = null;
+			this.clearDescriptionSummary();
 
 			if (hadSelection) {
 				this.dispatchEvent(
@@ -3188,6 +2437,7 @@ export class CalendarViewElement extends LitElement {
 		this.internal.clearSelection();
 		this.selectedEventForDetail = null;
 		this.selectedEventRect = null;
+		this.clearDescriptionSummary();
 		this.dispatchEvent(
 			new CustomEvent("selection-change", {
 				detail: { selectedEvents: [] },
@@ -3220,6 +2470,7 @@ export class CalendarViewElement extends LitElement {
 			this.selectedEventForDetail = null;
 			this.selectedEventRect = null;
 			this.isDescriptionExpanded = false;
+			this.clearDescriptionSummary();
 			this.renderCanvas();
 			this.requestUpdate();
 			this.dispatchEvent(
@@ -3241,16 +2492,17 @@ export class CalendarViewElement extends LitElement {
 		// Update cursor position for status bar
 		this.cursorPosition = { x, y };
 
-		// Check for resize handles first
-		const resizeHandle = this.getResizeHandle(x, y);
+		// Check for resize handles first — suppressed when alt key is active
+		const resizeHandle = !e.altKey ? this.getResizeHandle(x, y) : null;
 		if (resizeHandle && !this.isResizingEvent && !this.isDraggingEvent) {
-			this.scrollContainer.style.cursor = "ns-resize";
+			this.scrollContainer.style.cursor =
+				this.dayHeight >= TIME_SCALE_DAY_HEIGHT ? "ns-resize" : "ew-resize";
 		} else if (!this.isResizingEvent && !this.isDraggingEvent) {
 			this.scrollContainer.style.cursor = "";
 		}
 
-		// Check for event hover
-		const hoveredEvent = this.getEventAtPosition(x, y);
+		// Check for event hover — suppressed when alt key is active
+		const hoveredEvent = !e.altKey ? this.getEventAtPosition(x, y) : null;
 		const newHoveredId = hoveredEvent ? hoveredEvent.id : null;
 
 		if (newHoveredId !== this.hoveredEventId) {
@@ -3383,11 +2635,10 @@ export class CalendarViewElement extends LitElement {
 				} else {
 					// Move event
 					this.dispatchEvent(
-						new CustomEvent("move-event", {
+						new CustomEvent("update-event", {
 							detail: {
 								event: this.movingEvent,
-								start: newStart,
-								end: newEnd,
+								updates: { start: newStart, end: newEnd },
 							},
 							bubbles: true,
 						}),
@@ -3408,6 +2659,31 @@ export class CalendarViewElement extends LitElement {
 		}
 	};
 
+	onKeyDown = (e: KeyboardEvent): void => {
+		const focused = e.composedPath()[0] as HTMLElement;
+		if (focused?.tagName === "INPUT" || focused?.tagName === "TEXTAREA" || focused?.isContentEditable) return;
+		if (e.altKey && !this.altKeyActive) {
+			this.altKeyActive = true;
+			this.dispatchEvent(new CustomEvent("meta-key-change", { bubbles: true }));
+			if (this.scrollContainer) {
+				this.scrollContainer.style.cursor = "";
+			}
+			if (this.hoveredEventId !== null) {
+				this.hoveredEventId = null;
+				this.renderCanvas();
+			}
+		}
+	};
+
+	onKeyUp = (e: KeyboardEvent): void => {
+		const focused = e.composedPath()[0] as HTMLElement;
+		if (focused?.tagName === "INPUT" || focused?.tagName === "TEXTAREA" || focused?.isContentEditable) return;
+		if (!e.altKey && this.altKeyActive) {
+			this.altKeyActive = false;
+			this.dispatchEvent(new CustomEvent("meta-key-change", { bubbles: true }));
+		}
+	};
+
 	onPaste = async (e: ClipboardEvent): Promise<void> => {
 		const files = e.clipboardData?.files;
 		if (files && files.length > 0) {
@@ -3522,6 +2798,7 @@ export class CalendarViewElement extends LitElement {
 		y: number,
 	): { event: CalendarEvent; edge: "start" | "end" } | null {
 		const RESIZE_HANDLE_SIZE = 8; // pixels from edge to detect resize
+		const isZoomedIn = this.dayHeight >= TIME_SCALE_DAY_HEIGHT;
 
 		// Check in reverse order (top to bottom rendering)
 		for (let i = this.eventRects.length - 1; i >= 0; i--) {
@@ -3531,18 +2808,33 @@ export class CalendarViewElement extends LitElement {
 			// Skip read-only events
 			if (rect.event.readOnly) continue;
 
-			// Check if within horizontal bounds
-			if (x < rect.x || x > rect.x + rect.width) continue;
+			if (isZoomedIn) {
+				// In time-scale view, resize vertically from the top/bottom edges.
+				if (x < rect.x || x > rect.x + rect.width) continue;
+
+				if (y >= rect.y && y <= rect.y + RESIZE_HANDLE_SIZE) {
+					return { event: rect.event, edge: "start" };
+				}
+
+				if (
+					y >= rect.y + rect.height - RESIZE_HANDLE_SIZE &&
+					y <= rect.y + rect.height
+				) {
+					return { event: rect.event, edge: "end" };
+				}
+				continue;
+			}
 
-			// Check top edge (resize start)
-			if (y >= rect.y && y <= rect.y + RESIZE_HANDLE_SIZE) {
+			// In zoomed-out view, resize horizontally from the left/right edges.
+			if (y < rect.y || y > rect.y + rect.height) continue;
+
+			if (x >= rect.x && x <= rect.x + RESIZE_HANDLE_SIZE) {
 				return { event: rect.event, edge: "start" };
 			}
 
-			// Check bottom edge (resize end)
 			if (
-				y >= rect.y + rect.height - RESIZE_HANDLE_SIZE &&
-				y <= rect.y + rect.height
+				x >= rect.x + rect.width - RESIZE_HANDLE_SIZE &&
+				x <= rect.x + rect.width
 			) {
 				return { event: rect.event, edge: "end" };
 			}
@@ -3582,6 +2874,8 @@ export class CalendarViewElement extends LitElement {
 			this.resizingOriginalStart = new Date(resizeHandle.event.start);
 			this.resizingOriginalEnd = new Date(resizeHandle.event.end);
 			this.isResizingEvent = false; // Will be set to true on first mouse move
+			this.scrollContainer.style.cursor =
+				this.dayHeight >= TIME_SCALE_DAY_HEIGHT ? "ns-resize" : "ew-resize";
 			return;
 		}
 
@@ -3604,6 +2898,7 @@ export class CalendarViewElement extends LitElement {
 			// Close event detail overlay
 			this.selectedEventForDetail = null;
 			this.selectedEventRect = null;
+			this.clearDescriptionSummary();
 
 			this.movingEvent = clickedEvent;
 			this.movingEventOrigin = { x, y };
@@ -3619,6 +2914,7 @@ export class CalendarViewElement extends LitElement {
 		// Close event detail overlay when clicking outside of events
 		this.selectedEventForDetail = null;
 		this.selectedEventRect = null;
+		this.clearDescriptionSummary();
 
 		// Clear selection when clicking on empty space
 		const hadSelection = this.internal.getSelectedEvents().length > 0;
@@ -3653,13 +2949,13 @@ export class CalendarViewElement extends LitElement {
 	 *
 	 * Selection box is 2D with different behavior based on zoom level:
 	 *
-	 * ZOOMED OUT (dayHeight < 200):
+	 * ZOOMED OUT (dayHeight < TIME_SCALE_DAY_HEIGHT):
 	 * - X axis: days of the week (horizontal)
 	 * - Y axis: multiple weeks stacked (vertical)
 	 * - Creates time ranges per WEEK for selected day range
 	 * - Example: Wed-Thu across 3 weeks = 3 ranges (one per week)
 	 *
-	 * ZOOMED IN (dayHeight >= 200, time scale visible):
+	 * ZOOMED IN (dayHeight >= TIME_SCALE_DAY_HEIGHT, time scale visible):
 	 * - X axis: days of the week (horizontal)
 	 * - Y axis: time within days (vertical, with weeks)
 	 * - Creates time ranges per DAY for selected time range
@@ -3705,7 +3001,7 @@ export class CalendarViewElement extends LitElement {
 		if (intersectingWeeks.length === 0) return;
 
 		const timeRanges: Array<{ start: Date; end: Date }> = [];
-		const isZoomedIn = this.dayHeight >= 200;
+		const isZoomedIn = this.dayHeight >= TIME_SCALE_DAY_HEIGHT;
 
 		if (isZoomedIn) {
 			// ZOOMED IN: Create time ranges per DAY (same time across multiple weeks)
@@ -3794,6 +3090,10 @@ export class CalendarViewElement extends LitElement {
 		for (const event of this.events) {
 			// Skip all-day events
 			if (event.isAllDay) continue;
+			if (event.visualStyle === "heatmap") continue;
+
+			// Only select events from the active calendar
+			if (this.activeCalendarId && event.calendarId !== this.activeCalendarId && event.sourceId !== this.activeCalendarId) continue;
 
 			const eventStartTime = event.start.getTime();
 			const eventEndTime = event.end.getTime();
@@ -3822,6 +3122,7 @@ export class CalendarViewElement extends LitElement {
 			// Close event detail overlay when replacing selection
 			this.selectedEventForDetail = null;
 			this.selectedEventRect = null;
+			this.clearDescriptionSummary();
 		}
 		for (const event of selectedEvents) {
 			this.internal.selectEvent(event, "add");
@@ -3885,9 +3186,17 @@ export class CalendarViewElement extends LitElement {
 		const scrollTop = this.scrollTop;
 		const scrollBottom = scrollTop + this.viewportHeight;
 
+		const nearTop = scrollTop < bufferHeight;
+		const nearBottom = scrollBottom > this.totalHeight - bufferHeight;
+		if (!nearTop && !nearBottom) return;
+
 		// Check if near top (extending to past)
-		if (scrollTop < bufferHeight) {
+		if (nearTop) {
 			this.isExtendingRange = true;
+			// Capture before extension: only compensate for wheel/touch scroll.
+			// For scrollbar drags, skip compensation so the thumb stays where the user
+			// put it and they see the newly loaded historical content — no treadmill.
+			const isWheelScroll = Date.now() - this.lastWheelTime < 200;
 			const newWeeks = this.internal.extendRange("past");
 
 			// Prepend new weeks
@@ -3906,11 +3215,13 @@ export class CalendarViewElement extends LitElement {
 			// Must update DOM first so scroll container has correct height
 			this.requestUpdate();
 
-			// Adjust scroll position to maintain visual position (after DOM update)
 			requestAnimationFrame(() => {
-				this._scrollTop += addedHeight;
-				if (this.scrollContainer) {
-					this.scrollContainer.scrollTop = this._scrollTop;
+				if (isWheelScroll) {
+					// Maintain visual position so content doesn't jump during wheel scroll
+					this._scrollTop += addedHeight;
+					if (this.scrollContainer) {
+						this.scrollContainer.scrollTop = this._scrollTop;
+					}
 				}
 
 				this.renderCanvas();
@@ -3921,7 +3232,7 @@ export class CalendarViewElement extends LitElement {
 		}
 
 		// Check if near bottom (extending to future)
-		if (scrollBottom > this.totalHeight - bufferHeight) {
+		if (nearBottom) {
 			this.isExtendingRange = true;
 			const newWeeks = this.internal.extendRange("future");
 
@@ -4021,6 +3332,7 @@ export class CalendarViewElement extends LitElement {
 
 		// Show event detail overlay for single selection
 		if (!isCmdOrCtrl) {
+			this.clearDescriptionSummary();
 			this.selectedEventForDetail = event;
 			this.isDescriptionExpanded = false;
 			// Find the event's rect and store it for positioning
@@ -4040,6 +3352,7 @@ export class CalendarViewElement extends LitElement {
 			this.selectedEventForDetail = null;
 			this.selectedEventRect = null;
 			this.isDescriptionExpanded = false;
+			this.clearDescriptionSummary();
 			this.requestUpdate();
 		}
 
@@ -4101,6 +3414,7 @@ export class CalendarViewElement extends LitElement {
 		// Close event detail overlay when clearing selection
 		this.selectedEventForDetail = null;
 		this.selectedEventRect = null;
+		this.clearDescriptionSummary();
 
 		if (hadSelection) {
 			this.dispatchEvent(
@@ -4194,6 +3508,7 @@ export class CalendarViewElement extends LitElement {
 					fill: accent.replace("rgb", "rgba").replace(")", ", 0.3)"),
 					stroke: accent.replace("rgb", "rgba").replace(")", ", 0.8)"),
 					text: "white",
+					dashed: false,
 				},
 				useStartEdge,
 			);
@@ -4206,6 +3521,7 @@ export class CalendarViewElement extends LitElement {
 					fill: `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.5)`,
 					stroke: `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.5)`,
 					text: "rgba(255, 255, 255, 0.5)",
+					dashed: false,
 				},
 				useStartEdge,
 			);
@@ -4250,8 +3566,13 @@ export class CalendarViewElement extends LitElement {
 			later = startDate < endDate ? endDate : startDate;
 		}
 
-		earlier.setMinutes(Math.round(earlier.getMinutes() / 15) * 15, 0, 0);
-		later.setMinutes(Math.round(later.getMinutes() / 15) * 15, 0, 0);
+		if (this.dayHeight < TIME_SCALE_DAY_HEIGHT) {
+			earlier.setHours(0, 0, 0, 0);
+			later.setHours(23, 59, 59, 999);
+		} else {
+			earlier.setMinutes(Math.round(earlier.getMinutes() / 15) * 15, 0, 0);
+			later.setMinutes(Math.round(later.getMinutes() / 15) * 15, 0, 0);
+		}
 
 		// Use active calendar color if available, otherwise fall back to accent-primary
 		let fill: string;
@@ -4279,7 +3600,7 @@ export class CalendarViewElement extends LitElement {
 	renderVirtualEvent(
 		start: Date,
 		end: Date,
-		color: { fill: string; stroke: string; text: string },
+		color: { fill: string; stroke: string; text: string; dashed?: boolean },
 		useStartEdge = true,
 	): void {
 		if (!this.overlayCanvas || !this.overlayCtx || !this.scrollContainer)
@@ -4329,7 +3650,7 @@ export class CalendarViewElement extends LitElement {
 			ctx.fill();
 			ctx.strokeStyle = color.stroke;
 			ctx.lineWidth = 1;
-			ctx.setLineDash([6, 3]);
+			if (color.dashed !== false) ctx.setLineDash([6, 3]);
 			ctx.stroke();
 			ctx.setLineDash([]);
 		};
@@ -4813,7 +4134,7 @@ export class CalendarViewElement extends LitElement {
 		let hour = 0;
 		let minute = 0;
 
-		if (this.dayHeight >= 200) {
+		if (this.dayHeight >= TIME_SCALE_DAY_HEIGHT) {
 			const offsetInRow = y - (week.yOffset + rowInWeek * this.dayHeight);
 			const minutes = Math.floor((offsetInRow / this.dayHeight) * 24 * 60);
 			hour = Math.floor(minutes / 60);
@@ -4897,6 +4218,7 @@ export class CalendarViewElement extends LitElement {
 			formattedCursorDate: cursorTime
 				? this.formatCompactDate(cursorTime.date)
 				: "",
+			altKeyActive: this.altKeyActive,
 		};
 	}
 
@@ -4940,6 +4262,7 @@ export class CalendarViewElement extends LitElement {
 
 		this.selectedEventForDetail = null;
 		this.selectedEventRect = null;
+		this.clearDescriptionSummary();
 		this.requestUpdate();
 	}
 
@@ -5079,6 +4402,31 @@ export class CalendarViewElement extends LitElement {
 		}
 
 		const event = this.selectedEventForDetail;
+		const eventDescription = sanitizeEventDescription(event.description ?? "");
+		const eventDescriptionText = eventDescription.replaceAll("\\n", "\n");
+		const useDescriptionSummary = eventDescription.trim().length > 200;
+		const currentSummaryKey = this.getDescriptionSummaryTargetKey(event);
+		const hasRequestedSummaryForCurrentEvent =
+			this.requestedDescriptionSummaryKey === currentSummaryKey;
+		const isSummaryForCurrentEvent =
+			this.descriptionSummaryTargetKey === currentSummaryKey;
+		const hasSummaryStateForCurrentEvent =
+			hasRequestedSummaryForCurrentEvent || isSummaryForCurrentEvent;
+		const streamedSummaryText = hasSummaryStateForCurrentEvent
+			? this.descriptionSummaryText
+			: "";
+		const isSummaryLoading =
+			useDescriptionSummary && hasSummaryStateForCurrentEvent && this.descriptionSummaryLoading;
+		const shouldRenderSummary =
+			useDescriptionSummary && hasSummaryStateForCurrentEvent;
+		const descriptionToRender = shouldRenderSummary
+			? streamedSummaryText || (isSummaryLoading ? "Generating summary..." : eventDescriptionText)
+			: eventDescriptionText;
+		const summarizeButtonLabel = isSummaryLoading
+			? "Summarizing..."
+			: shouldRenderSummary
+				? "Summarize again"
+				: "Summarize";
 
 		const formatDate = (date: Date) => {
 			return new Intl.DateTimeFormat(this.locale, {
@@ -5217,6 +4565,7 @@ export class CalendarViewElement extends LitElement {
 							this.selectedEventForDetail = null;
 							this.selectedEventRect = null;
 							this.isDescriptionExpanded = false;
+							this.clearDescriptionSummary();
 							this.requestUpdate();
 						}}
           >×</button>
@@ -5224,7 +4573,7 @@ export class CalendarViewElement extends LitElement {
 
         <div class="event-detail-body">
           ${(() => {
-						const teamsMatch = event.description?.match(/https:\/\/teams\.microsoft\.com\/[^\s<>"]+/);
+						const teamsMatch = eventDescription?.match(/https:\/\/teams\.microsoft\.com\/[^\s<>"]+/);
 						const teamsUrl = teamsMatch ? teamsMatch[0] : null;
 						if (!event.location && !teamsUrl) return null;
 						return html`
@@ -5327,47 +4676,84 @@ export class CalendarViewElement extends LitElement {
 					}
 
           ${
-						event.readOnly ||
-						(event.organizer != null &&
-							!this.currentUserEmails.has(event.organizer.email))
-							? event.description
+						useDescriptionSummary
 								? html`
               <div class="event-detail-section">
                 <div class="event-detail-label">Description</div>
                 <div class="event-detail-description ${
-									this.isDescriptionExpanded ? "expanded" : ""
+									shouldRenderSummary || this.isDescriptionExpanded
+										? "expanded"
+										: ""
 								}">
-                  <pre class="event-detail-value">${event.description.replaceAll(
-										"\\n",
-										"\n",
-									)}</pre>
+                  <pre class="event-detail-value">${descriptionToRender}</pre>
+                </div>
+                ${
+										shouldRenderSummary && this.descriptionSummaryError
+											? html`<div class="event-detail-value" style="opacity: 0.7;">Summary unavailable: ${this.descriptionSummaryError}. Showing original description.</div>`
+											: null
+									}
+                <div class="description-actions">
+                  ${
+										!shouldRenderSummary
+											? html`<button
+                        class="description-see-more"
+                        @click=${() => {
+													this.isDescriptionExpanded = !this.isDescriptionExpanded;
+													this.requestUpdate();
+												}}
+                      >
+                        ${this.isDescriptionExpanded ? "Show less" : "Show more"}
+                      </button>`
+											: null
+									}
+                  <button
+                    class="description-see-more"
+                    ?disabled=${isSummaryLoading}
+                    @click=${() => this.requestDescriptionSummary(event)}
+                  >
+                    ${summarizeButtonLabel}
+                  </button>
+                </div>
+              </div>
+            `
+							: event.readOnly ||
+								  (event.organizer != null &&
+										!this.currentUserEmails.has(event.organizer.email))
+								? eventDescription
+									? html`
+              <div class="event-detail-section">
+                <div class="event-detail-label">Description</div>
+                <div class="event-detail-description ${
+										this.isDescriptionExpanded ? "expanded" : ""
+									}">
+                  <pre class="event-detail-value">${descriptionToRender}</pre>
                 </div>
                 ${
-									event.description.length > 300 ||
-									event.description.split("\n").length > 8
-										? html`
+										eventDescription.length > 300 ||
+										eventDescription.split("\n").length > 8
+											? html`
                     <button
                       class="description-see-more"
                       @click=${() => {
-												this.isDescriptionExpanded =
-													!this.isDescriptionExpanded;
-												this.requestUpdate();
-											}}
+													this.isDescriptionExpanded =
+														!this.isDescriptionExpanded;
+													this.requestUpdate();
+												}}
                     >
                       ${this.isDescriptionExpanded ? "See less" : "See more"}
                     </button>
                   `
-										: null
-								}
+											: null
+									}
               </div>
             `
-								: null
-							: html`
+									: null
+								: html`
               <div class="event-detail-section">
                 <div class="event-detail-label">Description</div>
                 <textarea
                   class="event-detail-description-input"
-                  .value=${event.description ?? ""}
+                  .value=${eventDescription}
                   placeholder="Add description..."
                   rows="3"
                   @input=${(e: Event) => {
@@ -5397,7 +4783,7 @@ export class CalendarViewElement extends LitElement {
 											clearTimeout(this.updateEventTimeout);
 											this.updateEventTimeout = null;
 										}
-										if (newDescription !== (event.description ?? "")) {
+										if (newDescription !== eventDescription) {
 											this.dispatchEvent(
 												new CustomEvent("update-event", {
 													detail: {
@@ -5635,18 +5021,3 @@ export class CalendarViewElement extends LitElement {
 		`;
 	}
 }
-
-// Helper to get day index (0-6) within a week for a given date
-function getDayIndexInWeek(week: WeekInfo, date: Date) {
-	const dateStart = new Date(date).setHours(0, 0, 0, 0);
-	for (let i = 0; i < 7; i++) {
-		const weekDay = week.days[i];
-		if (weekDay && new Date(weekDay).setHours(0, 0, 0, 0) === dateStart) {
-			return i;
-		}
-	}
-	// Date is before or after this week
-	const weekStart = new Date(week.days[0]!).setHours(0, 0, 0, 0);
-	if (dateStart < weekStart) return 0;
-	return 6;
-}