@luckydye/calendar 1.3.1 → 1.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luckydye/calendar",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "author": "Tim Havlicek",
   "contributors": [],
   "description": "",

package/src/CalDAVSource.ts

@@ -74,13 +74,18 @@ export class CalDAVSource implements CalendarSource {
    * Make an authenticated request to the CalDAV server.
    */
   async request(url: string, method: string, body?: string, headers: Record<string, string> = {}): Promise<Response> {
+    const requestHeaders: Record<string, string> = {
+      'Authorization': this.getAuthHeader(),
+      ...headers,
+    };
+
+    if (body && !Object.keys(requestHeaders).some((key) => key.toLowerCase() === 'content-type')) {
+      requestHeaders['Content-Type'] = 'application/xml; charset=utf-8';
+    }
+
     const response = await fetch(url, {
       method,
-      headers: {
-        'Authorization': this.getAuthHeader(),
-        'Content-Type': 'application/xml; charset=utf-8',
-        ...headers,
-      },
+      headers: requestHeaders,
       body,
     });
 
@@ -242,7 +247,7 @@ export class CalDAVSource implements CalendarSource {
   /**
    * Fetch calendar objects (events) from a specific calendar.
    */
-  private async fetchCalendarObjects(calendarUrl: string): Promise<string[]> {
+  private async fetchCalendarObjects(calendarUrl: string): Promise<Array<{ href: string; icalData: string }>> {
     const response = await this.request(
       calendarUrl,
       'REPORT',
@@ -263,11 +268,17 @@ export class CalDAVSource implements CalendarSource {
 
     const text = await response.text();
 
-    const calendarData: string[] = [];
-    const calendarDataRegex = /<[^:]+:calendar-data[^>]*>(.*?)<\/[^:]+:calendar-data>/gs;
+    const calendarObjects: Array<{ href: string; icalData: string }> = [];
+    const responseRegex = /<[^:]+:response[^>]*>([\s\S]*?)<\/[^:]+:response>/g;
+
+    for (const match of text.matchAll(responseRegex)) {
+      const responseBlock = match[1];
+      const hrefMatch = responseBlock.match(/<[^:]+:href[^>]*>(.*?)<\/[^:]+:href>/);
+      const calendarDataMatch = responseBlock.match(/<[^:]+:calendar-data[^>]*>([\s\S]*?)<\/[^:]+:calendar-data>/);
+      if (!hrefMatch || !calendarDataMatch) continue;
 
-    for (const match of text.matchAll(calendarDataRegex)) {
-      let icalData = match[1].trim();
+      const href = new URL(hrefMatch[1], this.credentials.serverUrl).toString();
+      let icalData = calendarDataMatch[1].trim();
       // Unescape XML entities
       icalData = icalData
         .replace(/&lt;/g, '<')
@@ -277,11 +288,11 @@ export class CalDAVSource implements CalendarSource {
         .replace(/&apos;/g, "'");
 
       if (icalData) {
-        calendarData.push(icalData);
+        calendarObjects.push({ href, icalData });
       }
     }
 
-    return calendarData;
+    return calendarObjects;
   }
 
 
@@ -366,7 +377,13 @@ export class CalDAVSource implements CalendarSource {
   /**
    * Map a parsed VCALENDAR event to CalendarEvent.
    */
-  private mapToCalendarEvent(parsed: Partial<CalendarEvent>, calendarDisplayName: string, calendarUrl: string, calendarColor?: string): CalendarEvent | null {
+  private mapToCalendarEvent(
+    parsed: Partial<CalendarEvent>,
+    calendarDisplayName: string,
+    calendarUrl: string,
+    calendarColor?: string,
+    resourceUrl?: string
+  ): CalendarEvent | null {
     if (!parsed.start || !parsed.id) return null;
 
     return {
@@ -387,6 +404,7 @@ export class CalDAVSource implements CalendarSource {
       readOnly: false,
       isAllDay: parsed.isAllDay,
       reminders: parsed.reminders,
+      resourceUrl,
     };
   }
 
@@ -395,9 +413,21 @@ export class CalDAVSource implements CalendarSource {
    */
   async fetchEventsForCalendar(calendarUrl: string, displayName: string, color?: string): Promise<CalendarEvent[]> {
     const calendarObjects = await this.fetchCalendarObjects(calendarUrl);
-    return calendarObjects
-      .map(ical => this.mapToCalendarEvent(parseSingleICalEvent(ical), displayName, calendarUrl, color))
-      .filter((e): e is CalendarEvent => e !== null);
+    const events: CalendarEvent[] = [];
+
+    for (const calendarObject of calendarObjects) {
+      const event = this.mapToCalendarEvent(
+        parseSingleICalEvent(calendarObject.icalData),
+        displayName,
+        calendarUrl,
+        color,
+        calendarObject.href
+      );
+      if (!event) continue;
+      events.push(event);
+    }
+
+    return events;
   }
 
   /**
@@ -440,6 +470,7 @@ export class CalDAVSource implements CalendarSource {
     await this.request(eventUrl, 'PUT', icalData, {
       'Content-Type': 'text/calendar; charset=utf-8',
     });
+    fullEvent.resourceUrl = eventUrl;
 
     return fullEvent;
   }
@@ -448,10 +479,11 @@ export class CalDAVSource implements CalendarSource {
    * Update an existing event on the CalDAV server.
    * Derives the calendar URL from updates.calendarId, falling back to the event cache.
    */
-  async updateEvent(id: string, updates: Partial<CalendarEvent>): Promise<CalendarEvent> {
-    const calendarUrl = updates.calendarId ?? this.eventCalendarMap.get(id);
+  async updateEvent(event: CalendarEvent, updates: Partial<CalendarEvent>): Promise<CalendarEvent> {
+    const id = event.id;
+    const calendarUrl = updates.calendarId ?? event.calendarId;
     if (!calendarUrl) throw new Error(`Cannot update event ${id}: calendar URL unknown`);
-    const eventUrl = `${calendarUrl.replace(/\/$/, '')}/${id}.ics`;
+    const eventUrl = updates.resourceUrl ?? event.resourceUrl ?? `${calendarUrl.replace(/\/$/, '')}/${id}.ics`;
 
     // For updates, we need to fetch the existing event first
     // This is a simplified implementation
@@ -480,6 +512,7 @@ export class CalDAVSource implements CalendarSource {
       readOnly: false,
       isAllDay: updates.isAllDay !== undefined ? updates.isAllDay : existing.isAllDay,
       reminders: updates.reminders !== undefined ? updates.reminders : existing.reminders,
+      resourceUrl: updates.resourceUrl ?? eventUrl,
     };
 
     const icalData = this.serializeEventToICal(updatedEvent);

package/src/CalendarIntegration.ts

@@ -11,7 +11,7 @@ export interface Calendar {
   calendarUrl?: string;
   fetchEvents(): Promise<CalendarEvent[]>;
   createEvent?(event: Omit<CalendarEvent, 'calendar' | 'color'>): Promise<CalendarEvent>;
-  updateEvent?(id: string, updates: Partial<CalendarEvent>): Promise<CalendarEvent>;
+  updateEvent?(event: CalendarEvent, updates: Partial<CalendarEvent>): Promise<CalendarEvent>;
   deleteEvent?(id: string): Promise<void>;
 }
 
@@ -28,7 +28,7 @@ export interface CalendarSource {
   enabled: boolean;
   fetchEvents(): Promise<CalendarEvent[]>;
   createEvent?(event: Omit<CalendarEvent, 'calendar' | 'color'>): Promise<CalendarEvent>;
-  updateEvent?(id: string, updates: Partial<CalendarEvent>): Promise<CalendarEvent>;
+  updateEvent?(event: CalendarEvent, updates: Partial<CalendarEvent>): Promise<CalendarEvent>;
   deleteEvent?(id: string): Promise<void>;
 }
 

package/src/CalendarInternal.ts

@@ -50,6 +50,7 @@ export interface CalendarEvent {
   reminders?: NotificationConfig[];
   isAllDay?: boolean;
   visualStyle?: 'heatmap';
+  resourceUrl?: string;
 }
 
 export interface WeekInfo {

package/src/CalendarView.ts

@@ -18,6 +18,7 @@ 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";
@@ -259,7 +260,7 @@ export class CalendarViewElement extends LitElement {
       left: 60px;
       right: 12px;
       pointer-events: none;
-      z-index: 2;
+      z-index: 101;
       overflow: hidden;
     }
 
@@ -300,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 {
@@ -679,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));
     }
@@ -992,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[] = [];
@@ -1359,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;
 
@@ -2254,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();
 		}
@@ -2273,6 +2386,7 @@ export class CalendarViewElement extends LitElement {
 			// Close event detail overlay
 			this.selectedEventForDetail = null;
 			this.selectedEventRect = null;
+			this.clearDescriptionSummary();
 
 			if (hadSelection) {
 				this.dispatchEvent(
@@ -2323,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: [] },
@@ -2355,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(
@@ -2379,7 +2495,8 @@ export class CalendarViewElement extends LitElement {
 		// 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 = "";
 		}
@@ -2518,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,
 						}),
@@ -2682,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--) {
@@ -2691,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;
 
-			// Check top edge (resize start)
-			if (y >= rect.y && y <= rect.y + RESIZE_HANDLE_SIZE) {
+				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;
+			}
+
+			// 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" };
 			}
@@ -2742,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;
 		}
 
@@ -2764,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 };
@@ -2779,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;
@@ -2986,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");
@@ -3195,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
@@ -3214,6 +3352,7 @@ export class CalendarViewElement extends LitElement {
 			this.selectedEventForDetail = null;
 			this.selectedEventRect = null;
 			this.isDescriptionExpanded = false;
+			this.clearDescriptionSummary();
 			this.requestUpdate();
 		}
 
@@ -3275,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(
@@ -4122,6 +4262,7 @@ export class CalendarViewElement extends LitElement {
 
 		this.selectedEventForDetail = null;
 		this.selectedEventRect = null;
+		this.clearDescriptionSummary();
 		this.requestUpdate();
 	}
 
@@ -4261,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, {
@@ -4399,6 +4565,7 @@ export class CalendarViewElement extends LitElement {
 							this.selectedEventForDetail = null;
 							this.selectedEventRect = null;
 							this.isDescriptionExpanded = false;
+							this.clearDescriptionSummary();
 							this.requestUpdate();
 						}}
           >×</button>
@@ -4406,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`
@@ -4509,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) => {
@@ -4579,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: {

package/src/DescriptionSanitizer.ts

@@ -0,0 +1,10 @@
+/**
+ * Removes transport/tracking links commonly injected by email/calendar clients.
+ * First pass intentionally targets angle-bracket URI blobs like
+ * <https://...>, <mailto:...>, <tel:...>, <im:...>.
+ */
+export function sanitizeEventDescription(input: string): string {
+	if (!input) return input;
+
+	return input.replace(/<(?:https?|mailto|tel|im):[^>\s]+>/gi, "");
+}