backend/src/app/availability_service.py

@@ -4,6 +4,7 @@ from uuid import UUID
 from sqlalchemy import select
 from sqlalchemy.ext.asyncio import AsyncSession
 
+from app.config import settings
 from app.models import BusyBlock, Participant
 
 
@@ -70,13 +71,16 @@ async def calculate_availability(
     participants = {p.id: p for p in participants_result.scalars().all()}
 
     days = ["Mon", "Tue", "Wed", "Thu", "Fri"]
-    hours = list(range(0, 24))
+    slot_interval = settings.slot_interval_minutes
+    slots_per_hour = 60 // slot_interval
     slots = []
 
     for day_offset, day_name in enumerate(days):
-        for hour in hours:
-            slot_start = week_start + timedelta(days=day_offset, hours=hour)
-            slot_end = slot_start + timedelta(hours=1)
+        for hour in range(24):
+            for slot_idx in range(slots_per_hour):
+                minute = slot_idx * slot_interval
+                slot_start = week_start + timedelta(days=day_offset, hours=hour, minutes=minute)
+                slot_end = slot_start + timedelta(minutes=slot_interval)
 
                 available_participants = []
                 for pid in participant_ids:
@@ -98,6 +102,7 @@ async def calculate_availability(
                 slots.append({
                     "day": slot_start.strftime("%Y-%m-%d"),
                     "hour": hour,
+                    "minute": minute,
                     "start_time": slot_start,
                     "availability": availability,
                     "availableParticipants": available_participants,

backend/src/app/config.py

@@ -5,6 +5,7 @@ class Settings(BaseSettings):
     database_url: str = "postgresql+asyncpg://postgres:postgres@db:5432/availability"
     sync_database_url: str = "postgresql://postgres:postgres@db:5432/availability"
     ics_refresh_interval_minutes: int = 15
+    slot_interval_minutes: int = 15  # Time slot granularity (15, 30, or 60)
 
     # SMTP Settings
     smtp_host: str | None = None

backend/src/app/zulip_service.py

@@ -61,7 +61,8 @@ def send_zulip_notification(
             f"📅 **Meeting Scheduled**\n"
             f"**What:** {title}\n"
             f"**When:** {zulip_time}\n"
-            f"**Who:** {people}"
+            f"**Who:** {people}\n"
+            f"*Booked via [Meetly](https://meetly.app.monadical.io/)*"
         )
 
         request = {

frontend/src/components/AvailabilityHeatmap.tsx

@@ -12,7 +12,14 @@ import { Check, X, Loader2, ChevronLeft, ChevronRight, ChevronsRight } from 'luc
 const DEFAULT_TIMEZONE = 'America/Toronto';
 
 const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
-const hours = Array.from({ length: 24 }, (_, i) => i); // 0-23
+const SLOT_INTERVAL_MINUTES = 15;
+const SLOTS_PER_HOUR = 60 / SLOT_INTERVAL_MINUTES;
+
+// Generate time slots: [{hour: 0, minute: 0}, {hour: 0, minute: 30}, {hour: 1, minute: 0}, ...]
+const timeSlots = Array.from({ length: 24 * SLOTS_PER_HOUR }, (_, i) => ({
+  hour: Math.floor(i / SLOTS_PER_HOUR),
+  minute: (i % SLOTS_PER_HOUR) * SLOT_INTERVAL_MINUTES,
+}));
 
 // Get the dates for Mon-Fri of a week in a specific timezone, offset by N weeks
 const getWeekDates = (timezone: string, weekOffset: number = 0): string[] => {
@@ -46,11 +53,11 @@ const getWeekDates = (timezone: string, weekOffset: number = 0): string[] => {
   });
 };
 
-// Convert a date string and hour in a timezone to a UTC Date
-const toUTCDate = (dateStr: string, hour: number, timezone: string): Date => {
-  // Create a date string that represents the given hour in the given timezone
+// Convert a date string, hour, and minute in a timezone to a UTC Date
+const toUTCDate = (dateStr: string, hour: number, minute: number, timezone: string): Date => {
+  // Create a date string that represents the given time in the given timezone
   // Then parse it to get the UTC equivalent
-  const localDateStr = `${dateStr}T${String(hour).padStart(2, '0')}:00:00`;
+  const localDateStr = `${dateStr}T${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}:00`;
 
   // Use a trick: format in UTC then in target TZ to find the offset
   const testDate = new Date(localDateStr + 'Z'); // Treat as UTC first
@@ -111,29 +118,32 @@ const getTimezoneAbbrev = (timezone: string): string => {
   }
 };
 
-// Convert an hour from one timezone to another
-const convertHourBetweenTimezones = (
+// Convert a time from one timezone to another
+const convertTimeBetweenTimezones = (
   hour: number,
+  minute: number,
   dateStr: string,
   fromTimezone: string,
   toTimezone: string
-): number => {
+): { hour: number; minute: number } => {
   try {
-    // Create a UTC date for the given hour in the source timezone
-    const utcDate = toUTCDate(dateStr, hour, fromTimezone);
+    // Create a UTC date for the given time in the source timezone
+    const utcDate = toUTCDate(dateStr, hour, minute, fromTimezone);
 
-    // Format the hour in the target timezone
-    const targetHour = parseInt(
-      new Intl.DateTimeFormat('en-US', {
+    // Format the time in the target timezone
+    const formatter = new Intl.DateTimeFormat('en-US', {
       timeZone: toTimezone,
       hour: 'numeric',
+      minute: 'numeric',
       hour12: false,
-      }).format(utcDate)
-    );
+    });
+    const parts = formatter.formatToParts(utcDate);
+    const targetHour = parseInt(parts.find(p => p.type === 'hour')?.value || '0');
+    const targetMinute = parseInt(parts.find(p => p.type === 'minute')?.value || '0');
 
-    return targetHour;
+    return { hour: targetHour, minute: targetMinute };
   } catch {
-    return hour;
+    return { hour, minute };
   }
 };
 
@@ -216,24 +226,24 @@ export const AvailabilityHeatmap = ({
     const timer = setTimeout(() => {
       if (!scrollContainerRef.current) return;
 
-      const rowHeight = 52; // h-12 (48px) + gap (4px)
-      const rowsAbove = 2;
+      const rowHeight = 28; // h-6 (24px) + gap (4px)
+      const rowsAbove = 4; // Show a few slots before current time
 
-      // Calculate which hour should be at the top
+      // Calculate which slot should be at the top (multiply by slots per hour)
       const targetHour = todayIndex >= 0
-        ? Math.max(0, currentHour - rowsAbove)
+        ? Math.max(0, currentHour - Math.floor(rowsAbove / SLOTS_PER_HOUR))
         : 7; // Default to 7am for other weeks
 
-      scrollContainerRef.current.scrollTop = targetHour * rowHeight;
+      scrollContainerRef.current.scrollTop = targetHour * SLOTS_PER_HOUR * rowHeight;
     }, 100);
 
     return () => clearTimeout(timer);
   }, [weekOffset, todayIndex, currentHour, selectedParticipants.length, isLoading, slots.length]);
 
-  // Find a slot that matches the given display timezone date/hour
-  const getSlot = (dateStr: string, hour: number): TimeSlot | undefined => {
-    // Convert display timezone date/hour to UTC
-    const targetUTC = toUTCDate(dateStr, hour, displayTimezone);
+  // Find a slot that matches the given display timezone date/hour/minute
+  const getSlot = (dateStr: string, hour: number, minute: number): TimeSlot | undefined => {
+    // Convert display timezone date/hour/minute to UTC
+    const targetUTC = toUTCDate(dateStr, hour, minute, displayTimezone);
 
     return slots.find((s) => {
       const slotDate = new Date(s.start_time);
@@ -249,13 +259,13 @@ export const AvailabilityHeatmap = ({
     return slot.availability;
   };
 
-  const formatHour = (hour: number) => {
-    return `${hour.toString().padStart(2, '0')}:00`;
+  const formatTime = (hour: number, minute: number) => {
+    return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
   };
 
-  const isSlotTooSoon = (dateStr: string, hour: number) => {
+  const isSlotTooSoon = (dateStr: string, hour: number, minute: number) => {
     // Convert to UTC and compare with current time
-    const slotTimeUTC = toUTCDate(dateStr, hour, displayTimezone);
+    const slotTimeUTC = toUTCDate(dateStr, hour, minute, displayTimezone);
     const now = new Date();
     const twoHoursFromNow = new Date(now.getTime() + 2 * 60 * 60 * 1000);
     return slotTimeUTC < twoHoursFromNow;
@@ -271,11 +281,11 @@ export const AvailabilityHeatmap = ({
     return `${format(monday)} – ${format(friday)}`;
   };
 
-  // Format hour for display in popover (in the display timezone)
-  const formatDisplayTime = (hour: number) => {
-    // Create a date at that hour
+  // Format time for display in popover (in the display timezone)
+  const formatDisplayTime = (hour: number, minute: number) => {
+    // Create a date at that time
     const date = new Date();
-    date.setHours(hour, 0, 0, 0);
+    date.setHours(hour, minute, 0, 0);
     return new Intl.DateTimeFormat('en-US', {
       hour: 'numeric',
       minute: '2-digit',
@@ -430,10 +440,10 @@ export const AvailabilityHeatmap = ({
             </div>
 
             <div className="space-y-1">
-            {hours.map((hour) => (
+              {timeSlots.map(({ hour, minute }) => (
                 <div
-                key={hour}
-                ref={todayIndex >= 0 && hour === currentHour ? currentHourRef : undefined}
+                  key={`${hour}-${minute}`}
+                  ref={todayIndex >= 0 && hour === currentHour && minute === 0 ? currentHourRef : undefined}
                   className={cn(
                     "grid gap-1",
                     showSecondaryTimezone
@@ -444,37 +454,45 @@ export const AvailabilityHeatmap = ({
                   {showSecondaryTimezone ? (
                     <>
                       <div className="text-xs text-primary font-medium flex items-center justify-center gap-1">
-                      {todayIndex >= 0 && hour === currentHour && (
+                        {todayIndex >= 0 && hour === currentHour && minute === 0 && (
                           <span className="w-2 h-2 rounded-full bg-primary animate-pulse" />
                         )}
-                      {formatHour(hour)}
+                        {formatTime(hour, minute)}
                       </div>
                       <div className="text-xs text-muted-foreground flex items-center justify-center">
-                      {formatHour(convertHourBetweenTimezones(hour, weekDates[0] || '', displayTimezone, secondaryTimezone))}
+                        {(() => {
+                          const converted = convertTimeBetweenTimezones(hour, minute, weekDates[0] || '', displayTimezone, secondaryTimezone);
+                          return formatTime(converted.hour, converted.minute);
+                        })()}
                       </div>
                     </>
                   ) : (
                     <div className="text-xs text-muted-foreground flex items-center justify-end pr-3 gap-1">
-                    {todayIndex >= 0 && hour === currentHour && (
+                      {todayIndex >= 0 && hour === currentHour && minute === 0 && (
                         <span className="w-2 h-2 rounded-full bg-primary animate-pulse" />
                       )}
-                    {formatHour(hour)}
+                      {formatTime(hour, minute)}
                     </div>
                   )}
                   {weekDates.map((dateStr, dayIndex) => {
-                  const slot = getSlot(dateStr, hour);
+                    const slot = getSlot(dateStr, hour, minute);
                     const dayName = dayNames[dayIndex];
-                  const tooSoon = isSlotTooSoon(dateStr, hour);
-                  if (!slot) return <div key={`${dateStr}-${hour}`} className="h-12 bg-muted rounded" />;
+                    const tooSoon = isSlotTooSoon(dateStr, hour, minute);
+                    if (!slot) return <div key={`${dateStr}-${hour}-${minute}`} className="h-6 bg-muted rounded" />;
 
                     const effectiveAvailability = getEffectiveAvailability(slot);
 
+                    // Calculate end time for display
+                    const endMinute = minute + SLOT_INTERVAL_MINUTES;
+                    const endHour = hour + Math.floor(endMinute / 60);
+                    const endMinuteNormalized = endMinute % 60;
+
                     return (
-                    <Popover key={`${dateStr}-${hour}`}>
+                      <Popover key={`${dateStr}-${hour}-${minute}`}>
                         <PopoverTrigger asChild>
                           <button
                             className={cn(
-                            "h-12 rounded-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                              "h-6 rounded-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
                               tooSoon && "opacity-40 cursor-not-allowed",
                               !tooSoon && "hover:scale-105 hover:shadow-md",
                               effectiveAvailability === 'full' && "bg-availability-full hover:bg-availability-full/90",
@@ -486,7 +504,7 @@ export const AvailabilityHeatmap = ({
                         <PopoverContent className="w-64 p-4 animate-scale-in" align="center">
                           <div className="space-y-3">
                             <div className="font-semibold text-foreground">
-                            {dayName} {formatDisplayTime(hour)}–{formatDisplayTime(hour + 1)}
+                              {dayName} {formatDisplayTime(hour, minute)}–{formatDisplayTime(endHour, endMinuteNormalized)}
                             </div>
                             {tooSoon && (
                               <div className="text-sm text-muted-foreground italic">

frontend/src/components/AvailabilityHeatmapV2.tsx

@@ -12,10 +12,19 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
 
 const DEFAULT_TIMEZONE = 'America/Toronto';
 const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
+const SLOT_INTERVAL_MINUTES = 15;
+const SLOTS_PER_HOUR = 60 / SLOT_INTERVAL_MINUTES;
 const WORKING_HOUR_START = 8; // 8 AM
 const WORKING_HOUR_END = 18; // 6 PM
-const ALL_HOURS = Array.from({ length: 24 }, (_, i) => i);
-const WORKING_HOURS = Array.from({ length: WORKING_HOUR_END - WORKING_HOUR_START + 1 }, (_, i) => i + WORKING_HOUR_START);
+
+// Generate time slots with hour and minute
+const ALL_TIME_SLOTS = Array.from({ length: 24 * SLOTS_PER_HOUR }, (_, i) => ({
+  hour: Math.floor(i / SLOTS_PER_HOUR),
+  minute: (i % SLOTS_PER_HOUR) * SLOT_INTERVAL_MINUTES,
+}));
+const WORKING_TIME_SLOTS = ALL_TIME_SLOTS.filter(
+  slot => slot.hour >= WORKING_HOUR_START && slot.hour < WORKING_HOUR_END
+);
 
 // Helper to check if a slot is in the past or too close (2h buffer)
 const isSlotTooSoon = (slotDate: number) => {
@@ -88,21 +97,15 @@ export const AvailabilityHeatmapV2 = ({
   secondaryTimezone = DEFAULT_TIMEZONE,
 }: AvailabilityHeatmapV2Props) => {
   const [showFullDay, setShowFullDay] = useState(false);
-  const activeHours = showFullDay ? ALL_HOURS : WORKING_HOURS;
+  const activeSlots = showFullDay ? ALL_TIME_SLOTS : WORKING_TIME_SLOTS;
 
   const weekDates = useMemo(() => getWeekDates(displayTimezone, weekOffset), [displayTimezone, weekOffset]);
 
   // Pre-compute slots lookup map for O(1) access
-  // Key: YYYY-MM-DD:Hour
+  // Key: YYYY-MM-DD:Hour:Minute
   const slotsMap = useMemo(() => {
     const map = new Map<string, TimeSlot>();
     slots.forEach(slot => {
-      // Assuming slot.start_time is ISO string. 
-      // We need to match it to our grid's local time logic.
-      // This part is "flaky" in the original. 
-      // The slot comes with a specific absolute time.
-      // We want to place it in the intersection of "Day (in DisplayTZ)" and "Hour (in DisplayTZ)".
-
       const d = new Date(slot.start_time);
       // Format to DisplayTZ to find coordinate
       const formatter = new Intl.DateTimeFormat('en-CA', {
@@ -111,22 +114,22 @@ export const AvailabilityHeatmapV2 = ({
         month: '2-digit',
         day: '2-digit',
         hour: 'numeric',
+        minute: 'numeric',
         hour12: false
       });
-      // "2023-10-25, 14"
       const parts = formatter.formatToParts(d);
       const year = parts.find(p => p.type === 'year')?.value;
       const month = parts.find(p => p.type === 'month')?.value;
       const day = parts.find(p => p.type === 'day')?.value;
       const hour = parts.find(p => p.type === 'hour')?.value;
+      const minute = parts.find(p => p.type === 'minute')?.value;
 
-      if (year && month && day && hour) {
-        // Hour in 24h format might be "24" in some locales? No `hour12: false` gives 0-23 usually.
-        // But Intl sometimes returns "24"? No, 0-23.
+      if (year && month && day && hour && minute) {
         let h = parseInt(hour, 10);
+        let m = parseInt(minute, 10);
         if (h === 24) h = 0; // Just in case
 
-        const key = `${year}-${month}-${day}:${h}`;
+        const key = `${year}-${month}-${day}:${h}:${m}`;
         map.set(key, slot);
       }
     });
@@ -144,12 +147,20 @@ export const AvailabilityHeatmapV2 = ({
     return date.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
   };
 
-  const getSlotForCell = (date: Date, hour: number) => {
-    const key = `${formatDateKey(date)}:${hour}`;
+  const getSlotForCell = (date: Date, hour: number, minute: number) => {
+    const key = `${formatDateKey(date)}:${hour}:${minute}`;
     return slotsMap.get(key);
   };
 
-  const formatHour = (hour: number) => {
+  const formatTime = (hour: number, minute: number) => {
+    return new Date(0, 0, 0, hour, minute).toLocaleTimeString('en-US', {
+      hour: 'numeric',
+      minute: '2-digit',
+      hour12: true,
+    });
+  };
+
+  const formatHourOnly = (hour: number) => {
     return new Date(0, 0, 0, hour).toLocaleTimeString('en-US', {
       hour: 'numeric',
       hour12: true,
@@ -290,7 +301,7 @@ export const AvailabilityHeatmapV2 = ({
 
             {/* Grid Body */}
             <div className="relative">
-              {activeHours.map((hour) => {
+              {activeSlots.map(({ hour, minute }) => {
                 const isNight = hour < 8 || hour >= 18;
 
                 // Calculate secondary time
@@ -298,40 +309,54 @@ export const AvailabilityHeatmapV2 = ({
                 if (secondaryHour >= 24) secondaryHour -= 24;
                 if (secondaryHour < 0) secondaryHour += 24;
 
+                // Calculate end time for display
+                const endMinute = minute + SLOT_INTERVAL_MINUTES;
+                const endHour = hour + Math.floor(endMinute / 60);
+                const endMinuteNormalized = endMinute % 60;
+
                 return (
                   <div
-                    key={hour}
+                    key={`${hour}-${minute}`}
                     className={cn(
-                      "grid group items-stretch transition-colors border-b border-border/30 last:border-0",
+                      "grid group items-stretch transition-colors border-border/30 last:border-0",
                       isNight ? "bg-muted/30" : "bg-card",
+                      minute === 0 ? "border-t border-border" : "border-t border-border/10",
                       "hover:bg-muted/10"
                     )}
                     style={{ gridTemplateColumns: `${timeColWidth} repeat(5, 1fr)` }}
                   >
                     {/* Time Label - Sticky Left */}
                     <div className={cn(
-                      "text-xs text-muted-foreground font-medium text-right pr-4 py-3 flex flex-col items-end justify-center gap-0.5",
+                      "text-xs text-muted-foreground font-medium text-right pr-4 py-2 flex flex-col items-end justify-center gap-0.5",
                       "sticky left-0 z-20 border-r border-border/50",
                       isNight ? "bg-muted/30 backdrop-blur-md" : "bg-card"
                     )}>
                       <div className="flex items-center gap-1.5">
+                        {minute === 0 ? (
+                          <div className="flex items-center gap-1.5 font-bold text-foreground/80">
                             {isNight ? (
                               <Moon className="w-3 h-3 text-slate-400/50" />
                             ) : (
                               <Sun className="w-3 h-3 text-amber-500/50" />
                             )}
-                        <span>{formatHour(hour)}</span>
+                            <span>{formatTime(hour, minute)}</span>
+                          </div>
+                        ) : (
+                          <span className="text-[10px] opacity-0 group-hover:opacity-50 transition-opacity">
+                            :{minute.toString().padStart(2, '0')}
+                          </span>
+                        )}
                       </div>
                       {showSecondaryTimezone && (
                         <span className="text-[10px] text-muted-foreground/60 font-mono">
-                          {formatHour(secondaryHour)}
+                          {formatTime(secondaryHour, minute)}
                         </span>
                       )}
                     </div>
 
                     {/* Days */}
                     {weekDates.map(date => {
-                      const slot = getSlotForCell(date, hour);
+                      const slot = getSlotForCell(date, hour, minute);
                       const tooSoon = slot ? isSlotTooSoon(new Date(slot.start_time).getTime()) : true;
 
                       // Availability logic
@@ -357,17 +382,17 @@ export const AvailabilityHeatmapV2 = ({
                       }
 
                       return (
-                        <div key={date.toISOString()} className="p-1 h-[52px] border-r border-border/30 last:border-0">
+                        <div key={`${date.toISOString()}-${minute}`} className="p-0.5 h-[32px] border-r border-border/30 last:border-0">
                           {slot ? (
                             <Popover>
                               <PopoverTrigger asChild disabled={tooSoon}>
                                 <div className={cn(
                                   "w-full h-full rounded-md transition-all duration-200 cursor-pointer flex items-center justify-center group/cell relative overflow-hidden",
                                   bgClass,
-                                  !tooSoon && (isFull || isPartial) ? "scale-[0.98] hover:scale-100 hover:ring-2 ring-primary/20" : ""
+                                  !tooSoon ? "scale-[0.98] hover:scale-105 hover:z-10 hover:shadow-lg hover:ring-2 ring-primary/20" : ""
                                 )}>
                                   {/* Mini Indicators for color-blind accessibility or density */}
-                                  {isFull && <Check className="w-4 h-4 text-white opacity-0 group-hover/cell:opacity-100 transition-opacity" />}
+                                  {isFull && <Check className="w-3 h-3 text-white opacity-0 group-hover/cell:opacity-100 transition-opacity" />}
                                 </div>
                               </PopoverTrigger>
                               <PopoverContent className="w-72 p-0 rounded-xl overflow-hidden shadow-xl border-border" side="right" align={hour >= 12 ? "end" : "start"}>
@@ -378,7 +403,7 @@ export const AvailabilityHeatmapV2 = ({
                                   </h4>
                                   <div className="text-sm text-muted-foreground mt-1 flex items-center gap-2">
                                     <Clock className="w-4 h-4" />
-                                    {formatHour(hour)} - {formatHour(hour + 1)}
+                                    {formatTime(hour, minute)} - {formatTime(endHour, endMinuteNormalized)}
                                   </div>
                                 </div>
 

frontend/src/types/calendar.ts

@@ -11,6 +11,7 @@ export interface Participant {
 export interface TimeSlot {
   day: string;
   hour: number;
+  minute: number;
   start_time: string;
   availability: 'full' | 'partial' | 'none';
   availableParticipants: string[];