backend/routers/projects.py

@@ -1235,18 +1235,65 @@ async def get_sessions_calendar(
         if loc:
             loc_names[lid] = loc.name
 
-    # Build day -> list of session dots
-    # day key: date object
+    # Build calendar grid bounds first (needed for session spanning logic)
+    first_day = _date(year, month, 1)
+    last_day = _date(year, month, monthrange(year, month)[1])
+    days_before = (first_day.isoweekday() % 7)
+    grid_start = first_day - _td(days=days_before)
+    days_after = 6 - (last_day.isoweekday() % 7)
+    grid_end = last_day + _td(days=days_after)
+
+    def _period_hours(s):
+        """Return (start_hour, end_hour) for a session, falling back to period_type defaults."""
+        psh, peh = s.period_start_hour, s.period_end_hour
+        if psh is None or peh is None:
+            if s.period_type and "night" in s.period_type:
+                return 19, 7
+            if s.period_type and "day" in s.period_type:
+                return 7, 19
+        return psh, peh
+
+    # Build day -> list of gantt segments
     day_sessions: dict = {}
     for s in sessions:
         if not s.started_at:
             continue
         local_start = utc_to_local(s.started_at)
-        d = local_start.date()
-        if d.year == year and d.month == month:
-            if d not in day_sessions:
-                day_sessions[d] = []
-            day_sessions[d].append({
+        local_end = utc_to_local(s.stopped_at) if s.stopped_at else now_local
+        span_start = local_start.date()
+        span_end = local_end.date()
+        psh, peh = _period_hours(s)
+
+        cur_d = span_start
+        while cur_d <= span_end:
+            if grid_start <= cur_d <= grid_end:
+                # Device bar bounds (hours 0–24 within this day)
+                dev_sh = (local_start.hour + local_start.minute / 60.0) if cur_d == span_start else 0.0
+                dev_eh = (local_end.hour + local_end.minute / 60.0) if cur_d == span_end else 24.0
+
+                # Effective window within this day
+                eff_sh = eff_eh = None
+                if psh is not None and peh is not None:
+                    if psh < peh:
+                        # Day window e.g. 7→19
+                        eff_sh, eff_eh = float(psh), float(peh)
+                    else:
+                        # Night window crossing midnight e.g. 19→7
+                        if cur_d == span_start:
+                            eff_sh, eff_eh = float(psh), 24.0
+                        else:
+                            eff_sh, eff_eh = 0.0, float(peh)
+
+                # Format tooltip labels
+                def _fmt_h(h):
+                    hh = int(h) % 24
+                    mm = int((h % 1) * 60)
+                    suffix = "AM" if hh < 12 else "PM"
+                    return f"{hh % 12 or 12}:{mm:02d} {suffix}"
+
+                if cur_d not in day_sessions:
+                    day_sessions[cur_d] = []
+                day_sessions[cur_d].append({
                     "session_id": s.id,
                     "label": s.session_label or f"Session {s.id[:8]}",
                     "location_id": s.location_id,
@@ -1254,17 +1301,17 @@ async def get_sessions_calendar(
                     "color": loc_color.get(s.location_id, "#9ca3af"),
                     "status": s.status,
                     "period_type": s.period_type,
+                    # Gantt bar percentages (0–100 scale across 24 hours)
+                    "dev_start_pct": round(dev_sh / 24 * 100, 1),
+                    "dev_width_pct": max(1.5, round((dev_eh - dev_sh) / 24 * 100, 1)),
+                    "eff_start_pct": round(eff_sh / 24 * 100, 1) if eff_sh is not None else None,
+                    "eff_width_pct": max(1.0, round((eff_eh - eff_sh) / 24 * 100, 1)) if eff_sh is not None else None,
+                    "dev_start_label": _fmt_h(dev_sh),
+                    "dev_end_label": _fmt_h(dev_eh),
+                    "eff_start_label": f"{int(psh):02d}:00" if eff_sh is not None else None,
+                    "eff_end_label": f"{int(peh):02d}:00" if eff_sh is not None else None,
                 })
-
-    # Build calendar grid (Mon–Sun weeks)
-    first_day = _date(year, month, 1)
-    last_day = _date(year, month, monthrange(year, month)[1])
-    # Start on Sunday before first_day (isoweekday: Mon=1 … Sun=7; weekday: Mon=0 … Sun=6)
-    days_before = (first_day.isoweekday() % 7)  # Sun=0, Mon=1, …, Sat=6
-    grid_start = first_day - _td(days=days_before)
-    # End on Saturday after last_day
-    days_after = 6 - (last_day.isoweekday() % 7)
-    grid_end = last_day + _td(days=days_after)
+            cur_d += _td(days=1)
 
     weeks = []
     cur = grid_start

templates/partials/projects/sessions_calendar.html

@@ -1,7 +1,7 @@
-<!-- Monthly Sessions Calendar -->
+<!-- Monthly Sessions Calendar — Gantt Style -->
 <div class="bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
 
-    <!-- Calendar header: month navigation -->
+    <!-- Month navigation -->
     <div class="px-5 py-3 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
         <button hx-get="/api/projects/{{ project_id }}/sessions-calendar?month={{ prev_month }}&year={{ prev_year }}"
                 hx-target="#sessions-calendar"
@@ -12,9 +12,7 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
             </svg>
         </button>
-
         <h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200">{{ month_name }} {{ year }}</h3>
-
         <button hx-get="/api/projects/{{ project_id }}/sessions-calendar?month={{ next_month }}&year={{ next_year }}"
                 hx-target="#sessions-calendar"
                 hx-swap="innerHTML"
@@ -26,9 +24,10 @@
         </button>
     </div>
 
-    <!-- Legend -->
+    <!-- Legend + key -->
+    <div class="px-5 py-2 border-b border-gray-100 dark:border-gray-700 flex flex-wrap items-center gap-x-5 gap-y-1.5">
         {% if legend %}
-    <div class="px-5 py-2 border-b border-gray-100 dark:border-gray-700 flex flex-wrap gap-3">
+        <div class="flex flex-wrap gap-x-4 gap-y-1">
             {% for loc in legend %}
             <div class="flex items-center gap-1.5 text-xs text-gray-600 dark:text-gray-400">
                 <span class="w-2.5 h-2.5 rounded-full shrink-0" style="background-color: {{ loc.color }}"></span>
@@ -37,12 +36,24 @@
             {% endfor %}
         </div>
         {% endif %}
+        <!-- Bar key -->
+        <div class="flex items-center gap-3 text-xs text-gray-400 dark:text-gray-500 ml-auto shrink-0">
+            <div class="flex items-center gap-1.5">
+                <div class="w-8 h-2 rounded-sm" style="background:rgba(100,100,100,0.25)"></div>
+                <span>Device on</span>
+            </div>
+            <div class="flex items-center gap-1.5">
+                <div class="w-8 h-2 rounded-sm bg-blue-500"></div>
+                <span>Effective window</span>
+            </div>
+        </div>
+    </div>
 
     <!-- Day-of-week headers -->
     <div class="grid grid-cols-7 border-b border-gray-100 dark:border-gray-700">
         {% for day_name in ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] %}
-        <div class="py-2 text-center text-xs font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wide
-                    {% if loop.index == 1 or loop.index == 7 %}text-amber-500 dark:text-amber-400{% endif %}">
+        <div class="py-2 text-center text-xs font-medium uppercase tracking-wide
+                    {% if loop.index == 1 or loop.index == 7 %}text-amber-500 dark:text-amber-400{% else %}text-gray-400 dark:text-gray-500{% endif %}">
             {{ day_name }}
         </div>
         {% endfor %}
@@ -52,40 +63,72 @@
     {% for week in weeks %}
     <div class="grid grid-cols-7 {% if not loop.last %}border-b border-gray-100 dark:border-gray-700{% endif %}">
         {% for day in week %}
-        <div class="min-h-[72px] p-1.5 {% if not loop.last %}border-r border-gray-100 dark:border-gray-700{% endif %}
+        <div class="min-h-[80px] p-1.5
+                    {% if not loop.last %}border-r border-gray-100 dark:border-gray-700{% endif %}
                     {% if not day.in_month %}bg-gray-50 dark:bg-slate-800/50{% else %}bg-white dark:bg-slate-800{% endif %}
                     {% if day.is_today %}ring-1 ring-inset ring-seismo-orange{% endif %}">
 
             <!-- Date number -->
-            <div class="text-right mb-1">
+            <div class="text-right mb-1.5">
                 <span class="text-xs {% if day.is_today %}font-bold text-seismo-orange{% elif day.in_month %}text-gray-700 dark:text-gray-300{% else %}text-gray-300 dark:text-gray-600{% endif %}">
                     {{ day.date.day }}
                 </span>
             </div>
 
-            <!-- Session dots/chips -->
+            <!-- Gantt bars -->
             {% if day.sessions %}
-            <div class="space-y-0.5">
-                {% for s in day.sessions[:4] %}
+            <div class="space-y-2">
+                {% for s in day.sessions %}
+                {% set tooltip %}{{ s.label }} · Device {{ s.dev_start_label }}–{{ s.dev_end_label }}{% if s.eff_start_label %} · Window {{ s.eff_start_label }}–{{ s.eff_end_label }}{% endif %}{% endset %}
                 <a href="/api/projects/{{ project_id }}/sessions/{{ s.session_id }}/detail"
-                   class="flex items-center gap-1 px-1 py-0.5 rounded text-xs truncate hover:opacity-80 transition-opacity"
-                   style="background-color: {{ s.color }}22; border-left: 2px solid {{ s.color }};"
-                   title="{{ s.label }}">
-                    <span class="truncate text-gray-700 dark:text-gray-300" style="color: {{ s.color }}; font-size: 0.65rem; line-height: 1.2;">
-                        {{ s.location_name }}
-                        {% if s.period_type %}
-                        <span class="opacity-60">{{ '☀' if 'day' in s.period_type else '☾' }}</span>
+                   class="block group"
+                   title="{{ tooltip }}">
+
+                    <!-- 24-hour timeline bar -->
+                    <div class="relative w-full rounded-sm overflow-hidden" style="height:11px; background:rgba(128,128,128,0.08);">
+
+                        <!-- Hour guide ticks at 6h, 12h, 18h -->
+                        <div class="absolute top-0 bottom-0 w-px" style="left:25%; background:rgba(128,128,128,0.18)"></div>
+                        <div class="absolute top-0 bottom-0 w-px" style="left:50%; background:rgba(128,128,128,0.28)"></div>
+                        <div class="absolute top-0 bottom-0 w-px" style="left:75%; background:rgba(128,128,128,0.18)"></div>
+
+                        <!-- Device on/off bar (dim) -->
+                        <div class="absolute top-0 bottom-0 rounded-sm"
+                             style="left:{{ s.dev_start_pct }}%; width:{{ s.dev_width_pct }}%; background-color:{{ s.color }}; opacity:0.28;">
+                        </div>
+
+                        <!-- Effective window (solid, slightly inset) -->
+                        {% if s.eff_start_pct is not none %}
+                        <div class="absolute rounded-sm group-hover:brightness-110 transition-all"
+                             style="left:{{ s.eff_start_pct }}%; width:{{ s.eff_width_pct }}%; top:1.5px; bottom:1.5px; background-color:{{ s.color }};">
+                        </div>
                         {% endif %}
-                    </span>
+
+                    </div>
+
+                    <!-- Location micro-label -->
+                    <div class="truncate mt-0.5 group-hover:opacity-70 transition-opacity"
+                         style="color:{{ s.color }}; font-size:0.58rem; line-height:1.3;">
+                        {{ s.location_name }}{% if s.period_type %} <span class="opacity-60">{{ '☀' if 'day' in s.period_type else '☾' }}</span>{% endif %}
+                    </div>
+
                 </a>
                 {% endfor %}
-                {% if day.sessions|length > 4 %}
-                <div class="text-center text-xs text-gray-400 dark:text-gray-500">+{{ day.sessions|length - 4 }} more</div>
-                {% endif %}
             </div>
             {% endif %}
+
         </div>
         {% endfor %}
     </div>
     {% endfor %}
+
+    <!-- Time scale footer hint -->
+    <div class="px-4 py-1.5 border-t border-gray-100 dark:border-gray-700 flex justify-between text-gray-300 dark:text-gray-600" style="font-size:0.6rem;">
+        <span>12 AM</span>
+        <span>6 AM</span>
+        <span>12 PM</span>
+        <span>6 PM</span>
+        <span>12 AM</span>
+    </div>
+
 </div>