Merge security/pentest-remediation-2026-02-26: remediate F-01, F-02, F-06

.env.example

@@ -16,5 +16,17 @@ SECRET_KEY=change-this-to-a-random-secret-key-in-production
 # Timezone (applied to backend + db containers via env_file)
 TZ=Australia/Perth
 
+# Session cookie security
+# Set to true when serving over HTTPS. Required before any TLS deployment.
+# COOKIE_SECURE=true
+
 # Integrations
 OPENWEATHERMAP_API_KEY=your-openweathermap-api-key
+
+# Production security checklist (enable all before any non-internal deployment):
+#   1. Set SECRET_KEY to output of: openssl rand -hex 32
+#   2. Set POSTGRES_PASSWORD to a strong unique value
+#   3. Set ENVIRONMENT=production (disables Swagger/ReDoc on backend:8000)
+#   4. Set COOKIE_SECURE=true (requires TLS termination at nginx or upstream)
+#   5. Add HSTS to nginx.conf: add_header Strict-Transport-Security "max-age=63072000; includeSubDomains" always;
+#   6. Complete user_id migration (migration 026) before enabling multi-user accounts

README.md

@@ -111,8 +111,8 @@ A self-hosted personal life administration app with a dark-themed UI. Manage you
 - **Non-root containers** — both backend (`appuser:1000`) and frontend (`nginx-unprivileged`) run as non-root
 - **No external backend port** — port 8000 is internal-only; all traffic flows through nginx
 - **Server version suppression** — `server_tokens off` (nginx) and `--no-server-header` (uvicorn)
-- **Rate limiting** — nginx `limit_req_zone` (10 req/min, burst=5) on `/api/auth/login`, `/verify-password`, `/change-password`, `/totp-verify`
-- **Application-level rate limiting** — in-memory IP-based rate limit (5 attempts / 5 min) + DB-backed account lockout (10 failures = 30-min lock)
+- **Rate limiting** — nginx `limit_req_zone` (10 req/min) on `/api/auth/login` (burst=5), `/verify-password` (burst=5), `/change-password` (burst=5), `/totp-verify` (burst=5), `/setup` (burst=3)
+- **DB-backed account lockout** — 10 failed attempts triggers 30-minute lock per account
 - **Dotfile blocking** — `/.env`, `/.git/config`, etc. return 404 (`.well-known` preserved for ACME)
 - **CSP headers** — Content-Security-Policy on all responses, scoped for Google Fonts
 - **CORS** — configurable origins with explicit method/header allowlists

backend/app/routers/auth.py

@@ -9,14 +9,12 @@ Session flow:
   GET  /status → verify user exists + session valid
 
 Security layers:
-  1. IP-based in-memory rate limit (5 attempts / 5 min) — outer guard, username enumeration
+  1. Nginx limit_req_zone (real-IP, 10 req/min burst 5) — outer guard on all auth endpoints
   2. DB-backed account lockout (10 failures → 30-min lock, HTTP 423) — per-user guard
   3. Session revocation stored in DB (survives container restarts)
   4. bcrypt→Argon2id transparent upgrade on first login with migrated hash
 """
 import uuid
-import time
-from collections import defaultdict
 from datetime import datetime, timedelta
 from typing import Optional
 
@@ -40,41 +38,6 @@ from app.config import settings as app_settings
 
 router = APIRouter()
 
-# ---------------------------------------------------------------------------
-# IP-based in-memory rate limit (retained as outer layer for all login attempts)
-# ---------------------------------------------------------------------------
-_failed_attempts: dict[str, list[float]] = defaultdict(list)
-_MAX_IP_ATTEMPTS = 5
-_IP_WINDOW_SECONDS = 300  # 5 minutes
-_MAX_TRACKED_IPS = 10000  # cap to prevent unbounded memory growth
-
-
-def _check_ip_rate_limit(ip: str) -> None:
-    """Raise 429 if the IP has exceeded the failure window."""
-    now = time.time()
-    # Purge all stale entries if the dict is oversized (spray attack defense)
-    if len(_failed_attempts) > _MAX_TRACKED_IPS:
-        stale_ips = [k for k, v in _failed_attempts.items() if all(now - t >= _IP_WINDOW_SECONDS for t in v)]
-        for k in stale_ips:
-            del _failed_attempts[k]
-        # If still over cap after purge, clear everything (all entries are within window
-        # but we can't let memory grow unbounded — login will still hit account lockout)
-        if len(_failed_attempts) > _MAX_TRACKED_IPS:
-            _failed_attempts.clear()
-    _failed_attempts[ip] = [t for t in _failed_attempts[ip] if now - t < _IP_WINDOW_SECONDS]
-    if not _failed_attempts[ip]:
-        _failed_attempts.pop(ip, None)
-    elif len(_failed_attempts[ip]) >= _MAX_IP_ATTEMPTS:
-        raise HTTPException(
-            status_code=429,
-            detail="Too many failed login attempts. Try again in a few minutes.",
-        )
-
-
-def _record_ip_failure(ip: str) -> None:
-    _failed_attempts[ip].append(time.time())
-
-
 # ---------------------------------------------------------------------------
 # Cookie helper
 # ---------------------------------------------------------------------------
@@ -267,14 +230,12 @@ async def login(
       HTTP 429  — IP rate limited
     """
     client_ip = request.client.host if request.client else "unknown"
-    _check_ip_rate_limit(client_ip)
 
     # Lookup user — do NOT differentiate "user not found" from "wrong password"
     result = await db.execute(select(User).where(User.username == data.username))
     user = result.scalar_one_or_none()
 
     if not user:
-        _record_ip_failure(client_ip)
         raise HTTPException(status_code=401, detail="Invalid username or password")
 
     await _check_account_lockout(user)
@@ -283,7 +244,6 @@ async def login(
     valid, new_hash = verify_password_with_upgrade(data.password, user.password_hash)
 
     if not valid:
-        _record_ip_failure(client_ip)
         await _record_failed_login(db, user)
         raise HTTPException(status_code=401, detail="Invalid username or password")
 
@@ -291,8 +251,6 @@ async def login(
     if new_hash:
         user.password_hash = new_hash
 
-    # Clear IP failures and update user state
-    _failed_attempts.pop(client_ip, None)
     await _record_successful_login(db, user)
 
     # If TOTP is enabled, issue a short-lived MFA challenge token instead of a full session
@@ -376,7 +334,6 @@ async def auth_status(
 @router.post("/verify-password")
 async def verify_password(
     data: VerifyPasswordRequest,
-    request: Request,
     db: AsyncSession = Depends(get_db),
     current_user: User = Depends(get_current_user),
 ):
@@ -384,20 +341,15 @@ async def verify_password(
     Verify the current user's password without changing anything.
     Used by the frontend lock screen to re-authenticate without a full login.
     Also handles transparent bcrypt→Argon2id upgrade.
-    Shares the same rate-limit and lockout guards as /login.
+    Shares the same lockout guards as /login. Nginx limit_req_zone handles IP rate limiting.
     """
-    client_ip = request.client.host if request.client else "unknown"
-    _check_ip_rate_limit(client_ip)
     await _check_account_lockout(current_user)
 
     valid, new_hash = verify_password_with_upgrade(data.password, current_user.password_hash)
     if not valid:
-        _record_ip_failure(client_ip)
         await _record_failed_login(db, current_user)
         raise HTTPException(status_code=401, detail="Invalid password")
 
-    _failed_attempts.pop(client_ip, None)
-
     # Persist upgraded hash if migration happened
     if new_hash:
         current_user.password_hash = new_hash
@@ -409,22 +361,17 @@ async def verify_password(
 @router.post("/change-password")
 async def change_password(
     data: ChangePasswordRequest,
-    request: Request,
     db: AsyncSession = Depends(get_db),
     current_user: User = Depends(get_current_user),
 ):
     """Change the current user's password. Requires old password verification."""
-    client_ip = request.client.host if request.client else "unknown"
-    _check_ip_rate_limit(client_ip)
     await _check_account_lockout(current_user)
 
     valid, _ = verify_password_with_upgrade(data.old_password, current_user.password_hash)
     if not valid:
-        _record_ip_failure(client_ip)
         await _record_failed_login(db, current_user)
         raise HTTPException(status_code=401, detail="Invalid current password")
 
-    _failed_attempts.pop(client_ip, None)
     current_user.password_hash = hash_password(data.new_password)
     await db.commit()
 

backend/app/services/ntfy.py

@@ -17,13 +17,18 @@ logger = logging.getLogger(__name__)
 
 NTFY_TIMEOUT = 8.0  # seconds — hard cap to prevent hung requests
 
-# Loopback + link-local only. Private IPs (RFC 1918) are intentionally allowed
-# because UMBRA is self-hosted and the user's ntfy server is typically on the same LAN.
+# Loopback, link-local, and all RFC 1918 private ranges are blocked to prevent
+# SSRF against Docker-internal services. If a self-hosted ntfy server on the LAN
+# is required, remove the RFC 1918 entries from _BLOCKED_NETWORKS and document the accepted risk.
 _BLOCKED_NETWORKS = [
-    ipaddress.ip_network("127.0.0.0/8"),
-    ipaddress.ip_network("169.254.0.0/16"),
-    ipaddress.ip_network("::1/128"),
-    ipaddress.ip_network("fe80::/10"),
+    ipaddress.ip_network("127.0.0.0/8"),        # IPv4 loopback
+    ipaddress.ip_network("10.0.0.0/8"),          # RFC 1918 private
+    ipaddress.ip_network("172.16.0.0/12"),       # RFC 1918 private — covers Docker bridge 172.17-31.x
+    ipaddress.ip_network("192.168.0.0/16"),      # RFC 1918 private
+    ipaddress.ip_network("169.254.0.0/16"),      # IPv4 link-local
+    ipaddress.ip_network("::1/128"),             # IPv6 loopback
+    ipaddress.ip_network("fe80::/10"),           # IPv6 link-local
+    ipaddress.ip_network("fc00::/7"),            # IPv6 ULA (covers fd00::/8)
 ]
 
 

frontend/nginx.conf

@@ -46,6 +46,13 @@ server {
         include /etc/nginx/proxy-params.conf;
     }
 
+    location /api/auth/setup {
+        # Tighter burst: setup is one-time-only, 3 attempts is sufficient
+        limit_req zone=auth_limit burst=3 nodelay;
+        limit_req_status 429;
+        include /etc/nginx/proxy-params.conf;
+    }
+
     # API proxy
     location /api {
         proxy_pass http://backend:8000;

frontend/src/components/calendar/CalendarPage.tsx

@@ -1,4 +1,5 @@
 import { useState, useRef, useEffect, useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
 import FullCalendar from '@fullcalendar/react';
@@ -6,20 +7,16 @@ import dayGridPlugin from '@fullcalendar/daygrid';
 import timeGridPlugin from '@fullcalendar/timegrid';
 import interactionPlugin from '@fullcalendar/interaction';
 import type { EventClickArg, DateSelectArg, EventDropArg, DatesSetArg } from '@fullcalendar/core';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { ChevronLeft, ChevronRight, Plus, Search } from 'lucide-react';
 import api, { getErrorMessage } from '@/lib/api';
-import type { CalendarEvent, EventTemplate } from '@/types';
+import type { CalendarEvent, EventTemplate, Location as LocationType } from '@/types';
 import { useCalendars } from '@/hooks/useCalendars';
 import { useSettings } from '@/hooks/useSettings';
 import { Button } from '@/components/ui/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
 import CalendarSidebar from './CalendarSidebar';
-import EventForm from './EventForm';
+import EventDetailPanel from './EventDetailPanel';
+import type { CreateDefaults } from './EventDetailPanel';
 
 type CalendarView = 'dayGridMonth' | 'timeGridWeek' | 'timeGridDay';
 
@@ -29,32 +26,57 @@ const viewLabels: Record<CalendarView, string> = {
   timeGridDay: 'Day',
 };
 
-type ScopeAction = 'edit' | 'delete';
-
 export default function CalendarPage() {
   const queryClient = useQueryClient();
+  const location = useLocation();
   const calendarRef = useRef<FullCalendar>(null);
-  const [showForm, setShowForm] = useState(false);
-  const [editingEvent, setEditingEvent] = useState<CalendarEvent | null>(null);
-  const [selectedStart, setSelectedStart] = useState<string | null>(null);
-  const [selectedEnd, setSelectedEnd] = useState<string | null>(null);
-  const [selectedAllDay, setSelectedAllDay] = useState(false);
   const [currentView, setCurrentView] = useState<CalendarView>('dayGridMonth');
   const [calendarTitle, setCalendarTitle] = useState('');
 
-  const [templateEvent, setTemplateEvent] = useState<Partial<CalendarEvent> | null>(null);
-  const [templateName, setTemplateName] = useState<string | null>(null);
+  const [eventSearch, setEventSearch] = useState('');
+  const [searchFocused, setSearchFocused] = useState(false);
 
-  // Scope dialog state
-  const [scopeDialogOpen, setScopeDialogOpen] = useState(false);
-  const [scopeAction, setScopeAction] = useState<ScopeAction>('edit');
-  const [scopeEvent, setScopeEvent] = useState<CalendarEvent | null>(null);
-  const [activeEditScope, setActiveEditScope] = useState<'this' | 'this_and_future' | null>(null);
+  // Panel state
+  const [selectedEventId, setSelectedEventId] = useState<number | string | null>(null);
+  const [panelMode, setPanelMode] = useState<'closed' | 'view' | 'create'>('closed');
+  const [createDefaults, setCreateDefaults] = useState<CreateDefaults | null>(null);
 
   const { settings } = useSettings();
   const { data: calendars = [] } = useCalendars();
   const calendarContainerRef = useRef<HTMLDivElement>(null);
 
+  // Location data for event panel
+  const { data: locations = [] } = useQuery({
+    queryKey: ['locations'],
+    queryFn: async () => {
+      const { data } = await api.get<LocationType[]>('/locations');
+      return data;
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const locationMap = useMemo(() => {
+    const map = new Map<number, string>();
+    locations.forEach((l) => map.set(l.id, l.name));
+    return map;
+  }, [locations]);
+
+  // Handle navigation state from dashboard
+  useEffect(() => {
+    const state = location.state as { date?: string; view?: string; eventId?: number } | null;
+    if (!state) return;
+    const calApi = calendarRef.current?.getApi();
+    if (state.date && calApi) {
+      calApi.gotoDate(state.date);
+      if (state.view) calApi.changeView(state.view);
+    }
+    if (state.eventId) {
+      setSelectedEventId(state.eventId);
+      setPanelMode('view');
+    }
+    window.history.replaceState({}, '');
+  }, [location.state]);
+
   // Resize FullCalendar when container size changes (e.g. sidebar collapse)
   useEffect(() => {
     const el = calendarContainerRef.current;
@@ -66,6 +88,23 @@ export default function CalendarPage() {
     return () => observer.disconnect();
   }, []);
 
+  const panelOpen = panelMode !== 'closed';
+
+  // Continuously resize calendar during panel open/close CSS transition
+  useEffect(() => {
+    let rafId: number;
+    const start = performance.now();
+    const duration = 350; // slightly longer than the 300ms CSS transition
+    const tick = () => {
+      calendarRef.current?.getApi().updateSize();
+      if (performance.now() - start < duration) {
+        rafId = requestAnimationFrame(tick);
+      }
+    };
+    rafId = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(rafId);
+  }, [panelOpen]);
+
   // Scroll wheel navigation in month view
   useEffect(() => {
     const el = calendarContainerRef.current;
@@ -94,6 +133,21 @@ export default function CalendarPage() {
     },
   });
 
+  const selectedEvent = useMemo(
+    () => events.find((e) => e.id === selectedEventId) ?? null,
+    [selectedEventId, events],
+  );
+
+  // Escape key closes detail panel
+  useEffect(() => {
+    if (!panelOpen) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') handlePanelClose();
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [panelOpen]);
+
   const visibleCalendarIds = useMemo(
     () => new Set(calendars.filter((c) => c.is_visible).map((c) => c.id)),
     [calendars],
@@ -152,28 +206,38 @@ export default function CalendarPage() {
     },
   });
 
-  const scopeDeleteMutation = useMutation({
-    mutationFn: async ({ id, scope }: { id: number; scope: string }) => {
-      await api.delete(`/events/${id}?scope=${scope}`);
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['calendar-events'] });
-      queryClient.invalidateQueries({ queryKey: ['dashboard'] });
-      queryClient.invalidateQueries({ queryKey: ['upcoming'] });
-      toast.success('Event(s) deleted');
-      setScopeDialogOpen(false);
-      setScopeEvent(null);
-    },
-    onError: (error) => {
-      toast.error(getErrorMessage(error, 'Failed to delete event'));
-    },
-  });
-
   const filteredEvents = useMemo(() => {
     if (calendars.length === 0) return events;
     return events.filter((e) => visibleCalendarIds.has(e.calendar_id));
   }, [events, visibleCalendarIds, calendars.length]);
 
+  const searchResults = useMemo(() => {
+    if (!eventSearch.trim()) return [];
+    const q = eventSearch.toLowerCase();
+    return filteredEvents
+      .filter((e) => e.title.toLowerCase().includes(q))
+      .slice(0, 8);
+  }, [filteredEvents, eventSearch]);
+
+  const handleSearchSelect = (event: CalendarEvent) => {
+    const calApi = calendarRef.current?.getApi();
+    if (!calApi) return;
+    const startDate = new Date(event.start_datetime);
+    calApi.gotoDate(startDate);
+    if (event.all_day) {
+      calApi.changeView('dayGridMonth');
+    } else {
+      calApi.changeView('timeGridDay');
+    }
+    setEventSearch('');
+    setSearchFocused(false);
+    // Also open the event in the panel
+    if (!event.is_virtual) {
+      setSelectedEventId(event.id);
+      setPanelMode('view');
+    }
+  };
+
   const calendarEvents = filteredEvents.map((event) => ({
     id: String(event.id),
     title: event.title,
@@ -189,10 +253,6 @@ export default function CalendarPage() {
     },
   }));
 
-  const isRecurring = (event: CalendarEvent): boolean => {
-    return !!(event.is_recurring || event.parent_event_id);
-  };
-
   const handleEventClick = (info: EventClickArg) => {
     const event = events.find((e) => String(e.id) === info.event.id);
     if (!event) return;
@@ -200,27 +260,8 @@ export default function CalendarPage() {
       toast.info(`${event.title} — from People contacts`);
       return;
     }
-
-    if (isRecurring(event)) {
-      setScopeEvent(event);
-      setScopeAction('edit');
-      setScopeDialogOpen(true);
-    } else {
-      setEditingEvent(event);
-      setShowForm(true);
-    }
-  };
-
-  const handleScopeChoice = (scope: 'this' | 'this_and_future') => {
-    if (!scopeEvent) return;
-    if (scopeAction === 'edit') {
-      setEditingEvent(scopeEvent);
-      setActiveEditScope(scope);
-      setShowForm(true);
-      setScopeDialogOpen(false);
-    } else if (scopeAction === 'delete') {
-      scopeDeleteMutation.mutate({ id: scopeEvent.id as number, scope });
-    }
+    setSelectedEventId(event.id);
+    setPanelMode('view');
   };
 
   const handleEventDrop = (info: EventDropArg) => {
@@ -228,7 +269,6 @@ export default function CalendarPage() {
       info.revert();
       return;
     }
-    // Prevent drag-drop on recurring events — user must use scope dialog via click
     if (info.event.extendedProps.is_recurring || info.event.extendedProps.parent_event_id) {
       info.revert();
       toast.info('Click the event to edit recurring events');
@@ -253,7 +293,6 @@ export default function CalendarPage() {
       info.revert();
       return;
     }
-    // Prevent resize on recurring events — user must use scope dialog via click
     if (info.event.extendedProps.is_recurring || info.event.extendedProps.parent_event_id) {
       info.revert();
       toast.info('Click the event to edit recurring events');
@@ -274,37 +313,43 @@ export default function CalendarPage() {
   };
 
   const handleDateSelect = (selectInfo: DateSelectArg) => {
-    setSelectedStart(selectInfo.startStr);
-    setSelectedEnd(selectInfo.endStr);
-    setSelectedAllDay(selectInfo.allDay);
-    setShowForm(true);
+    setSelectedEventId(null);
+    setPanelMode('create');
+    setCreateDefaults({
+      start: selectInfo.startStr,
+      end: selectInfo.endStr,
+      allDay: selectInfo.allDay,
+    });
   };
 
-  const handleCloseForm = () => {
+  const handleCreateNew = () => {
+    setSelectedEventId(null);
+    setPanelMode('create');
+    setCreateDefaults(null);
+  };
+
+  const handlePanelClose = () => {
     calendarRef.current?.getApi().unselect();
-    setShowForm(false);
-    setEditingEvent(null);
-    setTemplateEvent(null);
-    setTemplateName(null);
-    setActiveEditScope(null);
-    setSelectedStart(null);
-    setSelectedEnd(null);
-    setSelectedAllDay(false);
+    setPanelMode('closed');
+    setSelectedEventId(null);
+    setCreateDefaults(null);
   };
 
   const handleUseTemplate = (template: EventTemplate) => {
-    setTemplateEvent({
-      title: template.title,
-      description: template.description || '',
-      all_day: template.all_day,
-      calendar_id: template.calendar_id ?? undefined,
-      location_id: template.location_id || undefined,
-      is_starred: template.is_starred,
-      recurrence_rule: template.recurrence_rule || undefined,
-    } as Partial<CalendarEvent>);
-    setTemplateName(template.name);
-    setEditingEvent(null);
-    setShowForm(true);
+    setSelectedEventId(null);
+    setPanelMode('create');
+    setCreateDefaults({
+      templateData: {
+        title: template.title,
+        description: template.description || '',
+        all_day: template.all_day,
+        calendar_id: template.calendar_id ?? undefined,
+        location_id: template.location_id || undefined,
+        is_starred: template.is_starred,
+        recurrence_rule: template.recurrence_rule || undefined,
+      } as Partial<CalendarEvent>,
+      templateName: template.name,
+    });
   };
 
   const handleDatesSet = (arg: DatesSetArg) => {
@@ -318,11 +363,11 @@ export default function CalendarPage() {
   const changeView = (view: CalendarView) => calendarRef.current?.getApi().changeView(view);
 
   return (
-    <div className="flex h-full overflow-hidden">
+    <div className="flex h-full overflow-hidden animate-fade-in">
       <CalendarSidebar onUseTemplate={handleUseTemplate} />
 
       <div ref={calendarContainerRef} className="flex-1 flex flex-col overflow-hidden">
-        {/* Custom toolbar — h-16 matches sidebar header */}
+        {/* Custom toolbar */}
         <div className="border-b bg-card px-6 h-16 flex items-center gap-4 shrink-0">
           <div className="flex items-center gap-1">
             <Button variant="ghost" size="icon" className="h-8 w-8" onClick={navigatePrev}>
@@ -335,7 +380,7 @@ export default function CalendarPage() {
           <Button variant="outline" size="sm" className="h-8" onClick={navigateToday}>
             Today
           </Button>
-          <h2 className="text-lg font-semibold font-heading flex-1">{calendarTitle}</h2>
+
           <div className="flex items-center rounded-md border border-border overflow-hidden">
             {(Object.entries(viewLabels) as [CalendarView, string][]).map(([view, label]) => (
               <button
@@ -355,89 +400,126 @@ export default function CalendarPage() {
               </button>
             ))}
           </div>
+
+          <h2 className="text-lg font-semibold font-heading">{calendarTitle}</h2>
+
+          <div className="flex-1" />
+
+          {/* Event search */}
+          <div className="relative">
+            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+            <Input
+              placeholder="Search events..."
+              value={eventSearch}
+              onChange={(e) => setEventSearch(e.target.value)}
+              onFocus={() => setSearchFocused(true)}
+              onBlur={() => setTimeout(() => setSearchFocused(false), 200)}
+              className="w-52 h-8 pl-8 text-sm ring-inset"
+            />
+            {searchFocused && searchResults.length > 0 && (
+              <div className="absolute z-50 mt-1 w-72 right-0 rounded-md border bg-popover shadow-lg overflow-hidden">
+                {searchResults.map((event) => (
+                  <button
+                    key={event.id}
+                    type="button"
+                    onMouseDown={(e) => e.preventDefault()}
+                    onClick={() => handleSearchSelect(event)}
+                    className="flex items-center gap-2.5 w-full px-3 py-2 text-sm text-left hover:bg-accent/10 transition-colors"
+                  >
+                    <div
+                      className="w-2 h-2 rounded-full shrink-0"
+                      style={{ backgroundColor: event.calendar_color || 'hsl(var(--accent-color))' }}
+                    />
+                    <div className="min-w-0 flex-1">
+                      <span className="font-medium truncate block">{event.title}</span>
+                      <span className="text-xs text-muted-foreground">
+                        {new Date(event.start_datetime).toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}
+                      </span>
+                    </div>
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+
+          <Button size="sm" onClick={handleCreateNew}>
+            <Plus className="mr-2 h-4 w-4" />
+            Create Event
+          </Button>
         </div>
 
-        {/* Calendar grid */}
-        <div className="flex-1 overflow-y-auto">
-          <div className="h-full">
-            <FullCalendar
-              key={`fc-${settings?.first_day_of_week ?? 0}`}
-              ref={calendarRef}
-              plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
-              initialView="dayGridMonth"
-              headerToolbar={false}
-              firstDay={settings?.first_day_of_week ?? 0}
-              events={calendarEvents}
-              editable={true}
-              selectable={true}
-              selectMirror={true}
-              unselectAuto={false}
-              dayMaxEvents={true}
-              weekends={true}
-              nowIndicator={true}
-              eventClick={handleEventClick}
-              eventDrop={handleEventDrop}
-              eventResize={handleEventResize}
-              select={handleDateSelect}
-              datesSet={handleDatesSet}
-              height="100%"
+        {/* Calendar grid + event detail panel */}
+        <div className="flex-1 overflow-hidden flex">
+          <div
+            className={`overflow-y-auto transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] ${
+              panelOpen ? 'w-full lg:w-[55%]' : 'w-full'
+            }`}
+          >
+            <div className="h-full">
+              <FullCalendar
+                key={`fc-${settings?.first_day_of_week ?? 0}`}
+                ref={calendarRef}
+                plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
+                initialView="dayGridMonth"
+                headerToolbar={false}
+                firstDay={settings?.first_day_of_week ?? 0}
+                events={calendarEvents}
+                editable={true}
+                selectable={true}
+                selectMirror={true}
+                unselectAuto={false}
+                dayMaxEvents={true}
+                weekends={true}
+                nowIndicator={true}
+                eventClick={handleEventClick}
+                eventDrop={handleEventDrop}
+                eventResize={handleEventResize}
+                select={handleDateSelect}
+                datesSet={handleDatesSet}
+                height="100%"
+              />
+            </div>
+          </div>
+
+          {/* Detail panel (desktop) */}
+          <div
+            className={`overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] ${
+              panelOpen ? 'hidden lg:block lg:w-[45%]' : 'w-0 opacity-0'
+            }`}
+          >
+            <EventDetailPanel
+              event={panelMode === 'view' ? selectedEvent : null}
+              isCreating={panelMode === 'create'}
+              createDefaults={createDefaults}
+              onClose={handlePanelClose}
+              onSaved={handlePanelClose}
+              locationName={selectedEvent?.location_id ? locationMap.get(selectedEvent.location_id) : undefined}
             />
           </div>
         </div>
       </div>
 
-      {showForm && (
-        <EventForm
-          event={editingEvent}
-          templateData={templateEvent}
-          templateName={templateName}
-          initialStart={selectedStart}
-          initialEnd={selectedEnd}
-          initialAllDay={selectedAllDay}
-          editScope={activeEditScope}
-          onClose={handleCloseForm}
-        />
-      )}
-
-      {/* Recurring event scope dialog */}
-      <Dialog open={scopeDialogOpen} onOpenChange={setScopeDialogOpen}>
-        <DialogContent className="max-w-sm">
-          <DialogHeader>
-            <DialogTitle>
-              {scopeAction === 'edit' ? 'Edit Recurring Event' : 'Delete Recurring Event'}
-            </DialogTitle>
-          </DialogHeader>
-          <p className="text-sm text-muted-foreground">
-            This is a recurring event. How would you like to proceed?
-          </p>
-          <div className="flex flex-col gap-2 mt-2">
-            <Button
-              variant="outline"
-              className="w-full justify-center"
-              onClick={() => handleScopeChoice('this')}
-            >
-              This event only
-            </Button>
-            <Button
-              variant="outline"
-              className="w-full justify-center"
-              onClick={() => handleScopeChoice('this_and_future')}
-            >
-              This and all future events
-            </Button>
-            <Button
-              variant="ghost"
-              className="w-full justify-center"
-              onClick={() => {
-                setScopeDialogOpen(false);
-                setScopeEvent(null);
-              }}
-            >
-              Cancel
-            </Button>
+      {/* Mobile detail panel overlay */}
+      {panelOpen && (
+        <div
+          className="lg:hidden fixed inset-0 z-50 bg-background/80 backdrop-blur-sm"
+          onClick={handlePanelClose}
+        >
+          <div
+            className="fixed inset-y-0 right-0 w-full sm:w-[400px] bg-card border-l border-border shadow-lg"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <EventDetailPanel
+              event={panelMode === 'view' ? selectedEvent : null}
+              isCreating={panelMode === 'create'}
+              createDefaults={createDefaults}
+              onClose={handlePanelClose}
+              onSaved={handlePanelClose}
+              locationName={selectedEvent?.location_id ? locationMap.get(selectedEvent.location_id) : undefined}
+            />
           </div>
-        </DialogContent>
-      </Dialog>
+        </div>
+      )}
     </div>
   );
 }

frontend/src/components/calendar/EventDetailPanel.tsx

@@ -0,0 +1,915 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { format, parseISO } from 'date-fns';
+import {
+  X, Pencil, Trash2, Save, Clock, MapPin, AlignLeft, Repeat, Star, Calendar,
+} from 'lucide-react';
+import api, { getErrorMessage } from '@/lib/api';
+import type { CalendarEvent, Location as LocationType, RecurrenceRule } from '@/types';
+import { useCalendars } from '@/hooks/useCalendars';
+import { useConfirmAction } from '@/hooks/useConfirmAction';
+import { formatUpdatedAt } from '@/components/shared/utils';
+import CopyableField from '@/components/shared/CopyableField';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Select } from '@/components/ui/select';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import LocationPicker from '@/components/ui/location-picker';
+
+// --- Helpers ---
+
+function toDateOnly(dt: string): string {
+  if (!dt) return '';
+  return dt.split('T')[0];
+}
+
+function toDatetimeLocal(dt: string, fallbackTime = '09:00'): string {
+  if (!dt) return '';
+  if (dt.includes('T')) return dt.slice(0, 16);
+  return `${dt}T${fallbackTime}`;
+}
+
+function formatForInput(dt: string, allDay: boolean, fallbackTime = '09:00'): string {
+  if (!dt) return '';
+  return allDay ? toDateOnly(dt) : toDatetimeLocal(dt, fallbackTime);
+}
+
+function adjustAllDayEndForDisplay(dateStr: string): string {
+  if (!dateStr) return '';
+  const d = new Date(dateStr.split('T')[0] + 'T12:00:00');
+  d.setDate(d.getDate() - 1);
+  const pad = (n: number) => n.toString().padStart(2, '0');
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+
+function adjustAllDayEndForSave(dateStr: string): string {
+  if (!dateStr) return '';
+  const d = new Date(dateStr + 'T12:00:00');
+  d.setDate(d.getDate() + 1);
+  const pad = (n: number) => n.toString().padStart(2, '0');
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+
+function nowLocal(): string {
+  const now = new Date();
+  const pad = (n: number) => n.toString().padStart(2, '0');
+  return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}T${pad(now.getHours())}:${pad(now.getMinutes())}`;
+}
+
+function plusOneHour(dt: string): string {
+  const d = new Date(dt);
+  d.setHours(d.getHours() + 1);
+  const pad = (n: number) => n.toString().padStart(2, '0');
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+function formatRecurrenceRule(rule: string): string {
+  try {
+    const parsed = JSON.parse(rule);
+    const weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+    switch (parsed.type) {
+      case 'every_n_days':
+        return parsed.interval === 1 ? 'Every day' : `Every ${parsed.interval} days`;
+      case 'weekly':
+        return parsed.weekday != null ? `Weekly on ${weekdays[parsed.weekday]}` : 'Weekly';
+      case 'monthly_nth_weekday':
+        return parsed.week && parsed.weekday != null
+          ? `Monthly on week ${parsed.week}, ${weekdays[parsed.weekday]}`
+          : 'Monthly';
+      case 'monthly_date':
+        return parsed.day ? `Monthly on the ${parsed.day}${ordinal(parsed.day)}` : 'Monthly';
+      default:
+        return 'Recurring';
+    }
+  } catch {
+    return 'Recurring';
+  }
+}
+
+function ordinal(n: number): string {
+  const s = ['th', 'st', 'nd', 'rd'];
+  const v = n % 100;
+  return s[(v - 20) % 10] || s[v] || s[0];
+}
+
+function parseRecurrenceRule(raw?: string): RecurrenceRule | null {
+  if (!raw) return null;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+
+// Python weekday: 0=Monday, 6=Sunday
+const WEEKDAYS = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+
+// --- Types ---
+
+export interface CreateDefaults {
+  start?: string;
+  end?: string;
+  allDay?: boolean;
+  templateData?: Partial<CalendarEvent>;
+  templateName?: string;
+}
+
+interface EventDetailPanelProps {
+  event: CalendarEvent | null;
+  isCreating?: boolean;
+  createDefaults?: CreateDefaults | null;
+  onClose: () => void;
+  onSaved?: () => void;
+  onDeleted?: () => void;
+  locationName?: string;
+}
+
+interface EditState {
+  title: string;
+  description: string;
+  start_datetime: string;
+  end_datetime: string;
+  all_day: boolean;
+  location_id: string;
+  calendar_id: string;
+  is_starred: boolean;
+  recurrence_type: string;
+  recurrence_interval: number;
+  recurrence_weekday: number;
+  recurrence_week: number;
+  recurrence_day: number;
+}
+
+function buildEditStateFromEvent(event: CalendarEvent): EditState {
+  const rule = parseRecurrenceRule(event.recurrence_rule);
+  const isAllDay = event.all_day;
+  const displayEnd = isAllDay ? adjustAllDayEndForDisplay(event.end_datetime) : event.end_datetime;
+  return {
+    title: event.title,
+    description: event.description || '',
+    start_datetime: formatForInput(event.start_datetime, isAllDay, '09:00'),
+    end_datetime: formatForInput(displayEnd, isAllDay, '10:00'),
+    all_day: isAllDay,
+    location_id: event.location_id?.toString() || '',
+    calendar_id: event.calendar_id?.toString() || '',
+    is_starred: event.is_starred || false,
+    recurrence_type: rule?.type || '',
+    recurrence_interval: rule?.interval || 2,
+    recurrence_weekday: rule?.weekday ?? 1,
+    recurrence_week: rule?.week || 1,
+    recurrence_day: rule?.day || 1,
+  };
+}
+
+function buildCreateState(defaults: CreateDefaults | null, defaultCalendarId: string): EditState {
+  const source = defaults?.templateData;
+  const isAllDay = source?.all_day ?? defaults?.allDay ?? false;
+  const defaultStart = nowLocal();
+  const defaultEnd = plusOneHour(defaultStart);
+  const rawStart = defaults?.start || defaultStart;
+  const rawEnd = defaults?.end || defaultEnd;
+  const displayEnd = isAllDay ? adjustAllDayEndForDisplay(rawEnd) : rawEnd;
+  const rule = parseRecurrenceRule(source?.recurrence_rule);
+
+  return {
+    title: source?.title || '',
+    description: source?.description || '',
+    start_datetime: formatForInput(rawStart, isAllDay, '09:00'),
+    end_datetime: formatForInput(displayEnd, isAllDay, '10:00'),
+    all_day: isAllDay,
+    location_id: source?.location_id?.toString() || '',
+    calendar_id: source?.calendar_id?.toString() || defaultCalendarId,
+    is_starred: source?.is_starred || false,
+    recurrence_type: rule?.type || '',
+    recurrence_interval: rule?.interval || 2,
+    recurrence_weekday: rule?.weekday ?? 1,
+    recurrence_week: rule?.week || 1,
+    recurrence_day: rule?.day || 1,
+  };
+}
+
+function buildRecurrencePayload(state: EditState): RecurrenceRule | null {
+  if (!state.recurrence_type) return null;
+  switch (state.recurrence_type) {
+    case 'every_n_days':
+      return { type: 'every_n_days', interval: state.recurrence_interval };
+    case 'weekly':
+      return { type: 'weekly' };
+    case 'monthly_nth_weekday':
+      return { type: 'monthly_nth_weekday', week: state.recurrence_week, weekday: state.recurrence_weekday };
+    case 'monthly_date':
+      return { type: 'monthly_date', day: state.recurrence_day };
+    default:
+      return null;
+  }
+}
+
+// --- Component ---
+
+export default function EventDetailPanel({
+  event,
+  isCreating = false,
+  createDefaults,
+  onClose,
+  onSaved,
+  onDeleted,
+  locationName,
+}: EventDetailPanelProps) {
+  const queryClient = useQueryClient();
+  const { data: calendars = [] } = useCalendars();
+  const selectableCalendars = calendars.filter((c) => !c.is_system);
+  const defaultCalendar = calendars.find((c) => c.is_default);
+
+  const { data: locations = [] } = useQuery({
+    queryKey: ['locations'],
+    queryFn: async () => {
+      const { data } = await api.get<LocationType[]>('/locations');
+      return data;
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const [isEditing, setIsEditing] = useState(false);
+  const [editState, setEditState] = useState<EditState>(() =>
+    isCreating
+      ? buildCreateState(createDefaults ?? null, defaultCalendar?.id?.toString() || '')
+      : event
+        ? buildEditStateFromEvent(event)
+        : buildCreateState(null, defaultCalendar?.id?.toString() || '')
+  );
+  const [scopeStep, setScopeStep] = useState<'edit' | 'delete' | null>(null);
+  const [editScope, setEditScope] = useState<'this' | 'this_and_future' | null>(null);
+  const [locationSearch, setLocationSearch] = useState('');
+
+  const isRecurring = !!(event?.is_recurring || event?.parent_event_id);
+
+  // Reset state when event changes
+  useEffect(() => {
+    setIsEditing(false);
+    setScopeStep(null);
+    setEditScope(null);
+    setLocationSearch('');
+    if (event) setEditState(buildEditStateFromEvent(event));
+  }, [event?.id]);
+
+  // Enter edit mode when creating
+  useEffect(() => {
+    if (isCreating) {
+      setIsEditing(true);
+      setEditState(buildCreateState(createDefaults ?? null, defaultCalendar?.id?.toString() || ''));
+      setLocationSearch('');
+    }
+  }, [isCreating, createDefaults]);
+
+  // Initialize location search text from existing location
+  useEffect(() => {
+    if (isEditing && !isCreating && event?.location_id) {
+      const loc = locations.find((l) => l.id === event.location_id);
+      if (loc) setLocationSearch(loc.name);
+    }
+  }, [isEditing, isCreating, event?.location_id, locations]);
+
+  const invalidateAll = useCallback(() => {
+    queryClient.invalidateQueries({ queryKey: ['calendar-events'] });
+    queryClient.invalidateQueries({ queryKey: ['dashboard'] });
+    queryClient.invalidateQueries({ queryKey: ['upcoming'] });
+  }, [queryClient]);
+
+  // --- Mutations ---
+
+  const saveMutation = useMutation({
+    mutationFn: async (data: EditState) => {
+      const rule = buildRecurrencePayload(data);
+      let endDt = data.end_datetime;
+      if (data.all_day && endDt) endDt = adjustAllDayEndForSave(endDt);
+
+      const payload: Record<string, unknown> = {
+        title: data.title,
+        description: data.description || null,
+        start_datetime: data.start_datetime,
+        end_datetime: endDt,
+        all_day: data.all_day,
+        location_id: data.location_id ? parseInt(data.location_id) : null,
+        calendar_id: data.calendar_id ? parseInt(data.calendar_id) : null,
+        is_starred: data.is_starred,
+        recurrence_rule: rule,
+      };
+
+      if (event && !isCreating) {
+        if (editScope) payload.edit_scope = editScope;
+        return api.put(`/events/${event.id}`, payload);
+      } else {
+        return api.post('/events', payload);
+      }
+    },
+    onSuccess: () => {
+      invalidateAll();
+      toast.success(isCreating ? 'Event created' : 'Event updated');
+      if (isCreating) {
+        onClose();
+      } else {
+        setIsEditing(false);
+        setEditScope(null);
+      }
+      onSaved?.();
+    },
+    onError: (error) => {
+      toast.error(getErrorMessage(error, isCreating ? 'Failed to create event' : 'Failed to update event'));
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: async () => {
+      const scope = editScope ? `?scope=${editScope}` : '';
+      await api.delete(`/events/${event!.id}${scope}`);
+    },
+    onSuccess: () => {
+      invalidateAll();
+      toast.success('Event deleted');
+      onClose();
+      onDeleted?.();
+    },
+    onError: (error) => {
+      toast.error(getErrorMessage(error, 'Failed to delete event'));
+    },
+  });
+
+  const executeDelete = useCallback(() => deleteMutation.mutate(), [deleteMutation]);
+  const { confirming: confirmingDelete, handleClick: handleDeleteClick } = useConfirmAction(executeDelete);
+
+  // --- Handlers ---
+
+  const handleEditStart = () => {
+    if (isRecurring) {
+      setScopeStep('edit');
+    } else {
+      if (event) setEditState(buildEditStateFromEvent(event));
+      setIsEditing(true);
+    }
+  };
+
+  const handleScopeSelect = (scope: 'this' | 'this_and_future') => {
+    setEditScope(scope);
+    if (scopeStep === 'edit') {
+      if (event) setEditState(buildEditStateFromEvent(event));
+      setIsEditing(true);
+      setScopeStep(null);
+    } else if (scopeStep === 'delete') {
+      // Delete with scope — execute immediately
+      setScopeStep(null);
+      // The deleteMutation will read editScope, but we need to set it first
+      // Since setState is async, use the mutation directly with the scope
+      const scopeParam = `?scope=${scope}`;
+      api.delete(`/events/${event!.id}${scopeParam}`).then(() => {
+        invalidateAll();
+        toast.success('Event(s) deleted');
+        onClose();
+        onDeleted?.();
+      }).catch((error) => {
+        toast.error(getErrorMessage(error, 'Failed to delete event'));
+      });
+    }
+  };
+
+  const handleEditCancel = () => {
+    setIsEditing(false);
+    setEditScope(null);
+    setLocationSearch('');
+    if (isCreating) {
+      onClose();
+    } else if (event) {
+      setEditState(buildEditStateFromEvent(event));
+    }
+  };
+
+  const handleEditSave = () => {
+    saveMutation.mutate(editState);
+  };
+
+  const handleDeleteStart = () => {
+    if (isRecurring) {
+      setScopeStep('delete');
+    } else {
+      handleDeleteClick();
+    }
+  };
+
+  // --- Render helpers ---
+
+  const updateField = <K extends keyof EditState>(key: K, value: EditState[K]) => {
+    setEditState((s) => ({ ...s, [key]: value }));
+  };
+
+  // Empty state
+  if (!event && !isCreating) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full text-muted-foreground">
+        <Calendar className="h-8 w-8 mb-3 opacity-40" />
+        <p className="text-sm">Select an event to view details</p>
+      </div>
+    );
+  }
+
+  // View mode data
+  const startDate = event ? parseISO(event.start_datetime) : null;
+  const endDate = event?.end_datetime ? parseISO(event.end_datetime) : null;
+  const startStr = startDate
+    ? event!.all_day
+      ? format(startDate, 'EEEE, MMMM d, yyyy')
+      : format(startDate, 'EEEE, MMMM d, yyyy · h:mm a')
+    : '';
+  const endStr = endDate
+    ? event!.all_day
+      ? format(endDate, 'EEEE, MMMM d, yyyy')
+      : format(endDate, 'h:mm a')
+    : null;
+
+  const panelTitle = isCreating
+    ? createDefaults?.templateName
+      ? `New Event from ${createDefaults.templateName}`
+      : 'New Event'
+    : event?.title || '';
+
+  return (
+    <div className="flex flex-col h-full bg-card border-l border-border overflow-hidden">
+      {/* Header */}
+      <div className="px-5 py-4 border-b border-border shrink-0">
+        <div className="flex items-start justify-between gap-3">
+          {isEditing ? (
+            <div className="flex-1 min-w-0">
+              {isCreating ? (
+                <h3 className="font-heading text-lg font-semibold">{panelTitle}</h3>
+              ) : (
+                <Input
+                  value={editState.title}
+                  onChange={(e) => updateField('title', e.target.value)}
+                  className="h-8 text-base font-semibold"
+                  placeholder="Event title"
+                  autoFocus
+                />
+              )}
+            </div>
+          ) : scopeStep ? (
+            <h3 className="font-heading text-sm font-semibold">
+              {scopeStep === 'edit' ? 'Edit Recurring Event' : 'Delete Recurring Event'}
+            </h3>
+          ) : (
+            <div className="flex items-center gap-3 min-w-0 flex-1">
+              <div
+                className="w-3 h-3 rounded-full shrink-0"
+                style={{ backgroundColor: event?.calendar_color || 'hsl(var(--accent-color))' }}
+              />
+              <div className="min-w-0">
+                <h3 className="font-heading text-lg font-semibold truncate">{event?.title}</h3>
+                <span className="text-xs text-muted-foreground">{event?.calendar_name}</span>
+              </div>
+            </div>
+          )}
+
+          <div className="flex items-center gap-1 shrink-0">
+            {scopeStep ? (
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7"
+                onClick={() => setScopeStep(null)}
+                title="Cancel"
+              >
+                <X className="h-3.5 w-3.5" />
+              </Button>
+            ) : isEditing ? (
+              <>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7 text-green-400 hover:text-green-300"
+                  onClick={handleEditSave}
+                  disabled={saveMutation.isPending}
+                  title="Save"
+                >
+                  <Save className="h-3.5 w-3.5" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7"
+                  onClick={handleEditCancel}
+                  title="Cancel"
+                >
+                  <X className="h-3.5 w-3.5" />
+                </Button>
+              </>
+            ) : (
+              <>
+                {!event?.is_virtual && (
+                  <>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-7 w-7"
+                      onClick={handleEditStart}
+                      title="Edit event"
+                    >
+                      <Pencil className="h-3.5 w-3.5" />
+                    </Button>
+                    {confirmingDelete ? (
+                      <Button
+                        variant="ghost"
+                        onClick={handleDeleteStart}
+                        disabled={deleteMutation.isPending}
+                        className="h-7 px-2 bg-destructive/20 text-destructive text-[11px] font-medium"
+                        title="Confirm delete"
+                      >
+                        Sure?
+                      </Button>
+                    ) : (
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7 text-muted-foreground hover:text-destructive"
+                        onClick={handleDeleteStart}
+                        disabled={deleteMutation.isPending}
+                        title="Delete event"
+                      >
+                        <Trash2 className="h-3.5 w-3.5" />
+                      </Button>
+                    )}
+                  </>
+                )}
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7"
+                  onClick={onClose}
+                  title="Close panel"
+                >
+                  <X className="h-3.5 w-3.5" />
+                </Button>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Body */}
+      <div className="flex-1 overflow-y-auto px-5 py-4 space-y-3">
+        {scopeStep ? (
+          /* Scope selection step */
+          <div className="space-y-3">
+            <p className="text-sm text-muted-foreground">
+              This is a recurring event. How would you like to proceed?
+            </p>
+            <div className="flex flex-col gap-2">
+              <Button
+                variant="outline"
+                className="w-full justify-center"
+                onClick={() => handleScopeSelect('this')}
+              >
+                This event only
+              </Button>
+              <Button
+                variant="outline"
+                className="w-full justify-center"
+                onClick={() => handleScopeSelect('this_and_future')}
+              >
+                This and all future events
+              </Button>
+              <Button
+                variant="ghost"
+                className="w-full justify-center"
+                onClick={() => setScopeStep(null)}
+              >
+                Cancel
+              </Button>
+            </div>
+          </div>
+        ) : isEditing ? (
+          /* Edit / Create mode */
+          <div className="space-y-4">
+            {/* Title (only shown in body for create mode; edit mode has it in header) */}
+            {isCreating && (
+              <div className="space-y-1">
+                <Label htmlFor="panel-title" required>Title</Label>
+                <Input
+                  id="panel-title"
+                  value={editState.title}
+                  onChange={(e) => updateField('title', e.target.value)}
+                  placeholder="Event title"
+                  required
+                  autoFocus
+                />
+              </div>
+            )}
+
+            <div className="space-y-1">
+              <Label htmlFor="panel-desc">Description</Label>
+              <Textarea
+                id="panel-desc"
+                value={editState.description}
+                onChange={(e) => updateField('description', e.target.value)}
+                placeholder="Add a description..."
+                rows={3}
+                className="text-sm resize-none"
+              />
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="panel-allday"
+                checked={editState.all_day}
+                onChange={(e) => {
+                  const checked = (e.target as HTMLInputElement).checked;
+                  updateField('all_day', checked);
+                  updateField('start_datetime', formatForInput(editState.start_datetime, checked, '09:00'));
+                  updateField('end_datetime', formatForInput(editState.end_datetime, checked, '10:00'));
+                }}
+              />
+              <Label htmlFor="panel-allday">All day event</Label>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1">
+                <Label htmlFor="panel-start" required>Start</Label>
+                <Input
+                  id="panel-start"
+                  type={editState.all_day ? 'date' : 'datetime-local'}
+                  value={editState.start_datetime}
+                  onChange={(e) => updateField('start_datetime', e.target.value)}
+                  className="text-xs"
+                  required
+                />
+              </div>
+              <div className="space-y-1">
+                <Label htmlFor="panel-end">End</Label>
+                <Input
+                  id="panel-end"
+                  type={editState.all_day ? 'date' : 'datetime-local'}
+                  value={editState.end_datetime}
+                  onChange={(e) => updateField('end_datetime', e.target.value)}
+                  className="text-xs"
+                />
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1">
+                <Label htmlFor="panel-calendar">Calendar</Label>
+                <Select
+                  id="panel-calendar"
+                  value={editState.calendar_id}
+                  onChange={(e) => updateField('calendar_id', e.target.value)}
+                  className="text-xs"
+                >
+                  {selectableCalendars.map((cal) => (
+                    <option key={cal.id} value={cal.id}>{cal.name}</option>
+                  ))}
+                </Select>
+              </div>
+              <div className="space-y-1">
+                <Label htmlFor="panel-location">Location</Label>
+                <LocationPicker
+                  id="panel-location"
+                  value={locationSearch}
+                  onChange={(val) => {
+                    setLocationSearch(val);
+                    if (!val) updateField('location_id', '');
+                  }}
+                  onSelect={async (result) => {
+                    if (result.source === 'local' && result.location_id) {
+                      updateField('location_id', result.location_id.toString());
+                    } else if (result.source === 'nominatim') {
+                      try {
+                        const { data: newLoc } = await api.post('/locations', {
+                          name: result.name,
+                          address: result.address,
+                          category: 'other',
+                        });
+                        queryClient.invalidateQueries({ queryKey: ['locations'] });
+                        updateField('location_id', newLoc.id.toString());
+                        toast.success(`Location "${result.name}" created`);
+                      } catch {
+                        toast.error('Failed to create location');
+                      }
+                    }
+                  }}
+                  placeholder="Search location..."
+                />
+              </div>
+            </div>
+
+            {/* Recurrence */}
+            <div className="space-y-1">
+              <Label htmlFor="panel-recurrence">Recurrence</Label>
+              <Select
+                id="panel-recurrence"
+                value={editState.recurrence_type}
+                onChange={(e) => updateField('recurrence_type', e.target.value)}
+                className="text-xs"
+              >
+                <option value="">None</option>
+                <option value="every_n_days">Every X days</option>
+                <option value="weekly">Weekly</option>
+                <option value="monthly_nth_weekday">Monthly (nth weekday)</option>
+                <option value="monthly_date">Monthly (date)</option>
+              </Select>
+            </div>
+
+            {editState.recurrence_type === 'every_n_days' && (
+              <div className="space-y-1">
+                <Label htmlFor="panel-interval">Every how many days?</Label>
+                <Input
+                  id="panel-interval"
+                  type="number"
+                  min={1}
+                  max={365}
+                  value={editState.recurrence_interval}
+                  onChange={(e) => updateField('recurrence_interval', parseInt(e.target.value) || 1)}
+                  className="text-xs"
+                />
+              </div>
+            )}
+
+            {editState.recurrence_type === 'weekly' && (
+              <p className="text-xs text-muted-foreground">
+                Repeats every week on the same day as the start date.
+              </p>
+            )}
+
+            {editState.recurrence_type === 'monthly_nth_weekday' && (
+              <div className="grid grid-cols-2 gap-3">
+                <div className="space-y-1">
+                  <Label htmlFor="panel-week">Week of month</Label>
+                  <Select
+                    id="panel-week"
+                    value={editState.recurrence_week.toString()}
+                    onChange={(e) => updateField('recurrence_week', parseInt(e.target.value))}
+                    className="text-xs"
+                  >
+                    <option value="1">1st</option>
+                    <option value="2">2nd</option>
+                    <option value="3">3rd</option>
+                    <option value="4">4th</option>
+                  </Select>
+                </div>
+                <div className="space-y-1">
+                  <Label htmlFor="panel-weekday">Day of week</Label>
+                  <Select
+                    id="panel-weekday"
+                    value={editState.recurrence_weekday.toString()}
+                    onChange={(e) => updateField('recurrence_weekday', parseInt(e.target.value))}
+                    className="text-xs"
+                  >
+                    {WEEKDAYS.map((name, i) => (
+                      <option key={i} value={i}>{name}</option>
+                    ))}
+                  </Select>
+                </div>
+              </div>
+            )}
+
+            {editState.recurrence_type === 'monthly_date' && (
+              <div className="space-y-1">
+                <Label htmlFor="panel-day">Day of month</Label>
+                <Input
+                  id="panel-day"
+                  type="number"
+                  min={1}
+                  max={31}
+                  value={editState.recurrence_day}
+                  onChange={(e) => updateField('recurrence_day', parseInt(e.target.value) || 1)}
+                  className="text-xs"
+                />
+              </div>
+            )}
+
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="panel-starred"
+                checked={editState.is_starred}
+                onChange={(e) => updateField('is_starred', (e.target as HTMLInputElement).checked)}
+              />
+              <Label htmlFor="panel-starred">Star this event</Label>
+            </div>
+
+            {/* Save / Cancel buttons at bottom of form */}
+            <div className="flex items-center justify-end gap-2 pt-2 border-t border-border">
+              <Button variant="outline" size="sm" onClick={handleEditCancel}>
+                Cancel
+              </Button>
+              <Button size="sm" onClick={handleEditSave} disabled={saveMutation.isPending}>
+                {saveMutation.isPending ? 'Saving...' : isCreating ? 'Create' : 'Update'}
+              </Button>
+            </div>
+          </div>
+        ) : (
+          /* View mode */
+          <>
+            {/* 2-column grid: Calendar, Starred, Start, End, Location, Recurrence */}
+            <div className="grid grid-cols-2 gap-3">
+              {/* Calendar */}
+              <div className="space-y-1">
+                <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground uppercase tracking-wider">
+                  <Calendar className="h-3 w-3" />
+                  Calendar
+                </div>
+                <div className="flex items-center gap-2">
+                  <div
+                    className="w-2 h-2 rounded-full shrink-0"
+                    style={{ backgroundColor: event?.calendar_color || 'hsl(var(--accent-color))' }}
+                  />
+                  <span className="text-sm">{event?.calendar_name}</span>
+                </div>
+              </div>
+
+              {/* Starred */}
+              <div className="space-y-1">
+                <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground uppercase tracking-wider">
+                  <Star className="h-3 w-3" />
+                  Starred
+                </div>
+                {event?.is_starred ? (
+                  <p className="text-sm text-amber-200/90">Starred</p>
+                ) : (
+                  <p className="text-sm text-muted-foreground">—</p>
+                )}
+              </div>
+
+              {/* Start */}
+              <div className="space-y-1">
+                <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground uppercase tracking-wider">
+                  <Clock className="h-3 w-3" />
+                  Start
+                </div>
+                <CopyableField value={startStr} icon={Clock} label="Start time" />
+              </div>
+
+              {/* End */}
+              <div className="space-y-1">
+                <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground uppercase tracking-wider">
+                  <Clock className="h-3 w-3" />
+                  End
+                </div>
+                {endStr ? (
+                  <CopyableField value={endStr} icon={Clock} label="End time" />
+                ) : (
+                  <p className="text-sm text-muted-foreground">—</p>
+                )}
+              </div>
+
+              {/* Location */}
+              <div className="space-y-1">
+                <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground uppercase tracking-wider">
+                  <MapPin className="h-3 w-3" />
+                  Location
+                </div>
+                {locationName ? (
+                  <CopyableField value={locationName} icon={MapPin} label="Location" />
+                ) : (
+                  <p className="text-sm text-muted-foreground">—</p>
+                )}
+              </div>
+
+              {/* Recurrence */}
+              <div className="space-y-1">
+                <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground uppercase tracking-wider">
+                  <Repeat className="h-3 w-3" />
+                  Recurrence
+                </div>
+                {isRecurring && event?.recurrence_rule ? (
+                  <p className="text-sm">{formatRecurrenceRule(event.recurrence_rule)}</p>
+                ) : isRecurring ? (
+                  <p className="text-sm">Recurring event</p>
+                ) : (
+                  <p className="text-sm text-muted-foreground">—</p>
+                )}
+              </div>
+            </div>
+
+            {/* Description — full width */}
+            {event?.description && (
+              <div className="space-y-1">
+                <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground uppercase tracking-wider">
+                  <AlignLeft className="h-3 w-3" />
+                  Description
+                </div>
+                <p className="text-sm whitespace-pre-wrap">{event.description}</p>
+              </div>
+            )}
+
+            {/* Updated at */}
+            {event && !event.is_virtual && (
+              <div className="pt-2 border-t border-border">
+                <span className="text-[11px] text-muted-foreground">
+                  {formatUpdatedAt(event.updated_at)}
+                </span>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/dashboard/CalendarWidget.tsx

@@ -1,4 +1,5 @@
 import { format } from 'date-fns';
+import { useNavigate } from 'react-router-dom';
 import { Calendar } from 'lucide-react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 
@@ -17,6 +18,9 @@ interface CalendarWidgetProps {
 }
 
 export default function CalendarWidget({ events }: CalendarWidgetProps) {
+  const navigate = useNavigate();
+  const todayStr = format(new Date(), 'yyyy-MM-dd');
+
   return (
     <Card>
       <CardHeader>
@@ -37,7 +41,8 @@ export default function CalendarWidget({ events }: CalendarWidgetProps) {
             {events.map((event) => (
               <div
                 key={event.id}
-                className="flex items-center gap-2 py-1.5 px-2 rounded-md hover:bg-card-elevated transition-colors duration-150"
+                onClick={() => navigate('/calendar', { state: { date: todayStr, view: 'timeGridDay', eventId: event.id } })}
+                className="flex items-center gap-2 py-1.5 px-2 rounded-md hover:bg-white/5 transition-colors duration-150 cursor-pointer"
               >
                 <div
                   className="w-1.5 h-1.5 rounded-full shrink-0"

frontend/src/components/dashboard/CountdownWidget.tsx

@@ -1,4 +1,5 @@
-import { differenceInCalendarDays } from 'date-fns';
+import { differenceInCalendarDays, format } from 'date-fns';
+import { useNavigate } from 'react-router-dom';
 import { Star } from 'lucide-react';
 
 interface CountdownWidgetProps {
@@ -10,6 +11,7 @@ interface CountdownWidgetProps {
 }
 
 export default function CountdownWidget({ events }: CountdownWidgetProps) {
+  const navigate = useNavigate();
   const visible = events.filter((e) => differenceInCalendarDays(new Date(e.start_datetime), new Date()) >= 0);
   if (visible.length === 0) return null;
 
@@ -18,8 +20,13 @@ export default function CountdownWidget({ events }: CountdownWidgetProps) {
       {visible.map((event) => {
         const days = differenceInCalendarDays(new Date(event.start_datetime), new Date());
         const label = days === 0 ? 'Today' : days === 1 ? '1 day' : `${days} days`;
+        const dateStr = format(new Date(event.start_datetime), 'yyyy-MM-dd');
         return (
-          <div key={event.id} className="flex items-center gap-2">
+          <div
+            key={event.id}
+            onClick={() => navigate('/calendar', { state: { date: dateStr, view: 'timeGridDay', eventId: event.id } })}
+            className="flex items-center gap-2 cursor-pointer hover:bg-amber-500/10 rounded px-1 -mx-1 transition-colors duration-150"
+          >
             <Star className="h-3 w-3 text-amber-400 fill-amber-400 shrink-0" />
             <span className="text-sm text-amber-200/90 truncate">
               <span className="font-semibold tabular-nums">{label}</span>

frontend/src/components/dashboard/DashboardPage.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 import { format } from 'date-fns';
 import { Bell, Plus, Calendar as CalIcon, ListTodo } from 'lucide-react';
@@ -33,6 +34,7 @@ function getGreeting(name?: string): string {
 }
 
 export default function DashboardPage() {
+  const navigate = useNavigate();
   const { settings } = useSettings();
   const { alerts, dismiss: dismissAlert, snooze: snoozeAlert } = useAlerts();
   const [quickAddType, setQuickAddType] = useState<'event' | 'todo' | 'reminder' | null>(null);
@@ -234,7 +236,8 @@ export default function DashboardPage() {
                     {futureReminders.map((reminder) => (
                       <div
                         key={reminder.id}
-                        className="flex items-center gap-2 py-1.5 px-2 rounded-md hover:bg-card-elevated transition-colors duration-150"
+                        onClick={() => navigate('/reminders', { state: { reminderId: reminder.id } })}
+                        className="flex items-center gap-2 py-1.5 px-2 rounded-md hover:bg-white/5 transition-colors duration-150 cursor-pointer"
                       >
                         <div className="w-1.5 h-1.5 rounded-full bg-orange-400 shrink-0" />
                         <span className="font-medium text-sm truncate flex-1 min-w-0">{reminder.title}</span>

frontend/src/components/dashboard/StatsWidget.tsx

@@ -1,3 +1,4 @@
+import { useNavigate } from 'react-router-dom';
 import { FolderKanban, TrendingUp, CheckSquare, CloudSun } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 
@@ -11,6 +12,8 @@ interface StatsWidgetProps {
 }
 
 export default function StatsWidget({ projectStats, totalIncompleteTodos, weatherData }: StatsWidgetProps) {
+  const navigate = useNavigate();
+
   const statCards = [
     {
       label: 'PROJECTS',
@@ -18,6 +21,7 @@ export default function StatsWidget({ projectStats, totalIncompleteTodos, weathe
       icon: FolderKanban,
       color: 'text-blue-400',
       glowBg: 'bg-blue-500/10',
+      onClick: () => navigate('/projects'),
     },
     {
       label: 'IN PROGRESS',
@@ -25,6 +29,7 @@ export default function StatsWidget({ projectStats, totalIncompleteTodos, weathe
       icon: TrendingUp,
       color: 'text-purple-400',
       glowBg: 'bg-purple-500/10',
+      onClick: () => navigate('/projects', { state: { filter: 'in_progress' } }),
     },
     {
       label: 'OPEN TODOS',
@@ -32,13 +37,18 @@ export default function StatsWidget({ projectStats, totalIncompleteTodos, weathe
       icon: CheckSquare,
       color: 'text-teal-400',
       glowBg: 'bg-teal-500/10',
+      onClick: () => navigate('/todos'),
     },
   ];
 
   return (
     <div className="grid gap-2.5 grid-cols-2 lg:grid-cols-4">
       {statCards.map((stat) => (
-        <Card key={stat.label} className="bg-gradient-to-br from-accent/[0.03] to-transparent">
+        <Card
+          key={stat.label}
+          className="bg-gradient-to-br from-accent/[0.03] to-transparent cursor-pointer group transition-transform duration-150 hover:scale-[1.01]"
+          onClick={stat.onClick}
+        >
           <CardContent className="px-3 py-2">
             <div className="flex items-center justify-between">
               <div className="space-y-0.5">

frontend/src/components/dashboard/TodoWidget.tsx

@@ -1,4 +1,5 @@
 import { format, isPast, endOfDay } from 'date-fns';
+import { useNavigate } from 'react-router-dom';
 import { CheckCircle2 } from 'lucide-react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
@@ -29,6 +30,8 @@ const dotColors: Record<string, string> = {
 };
 
 export default function TodoWidget({ todos }: TodoWidgetProps) {
+  const navigate = useNavigate();
+
   return (
     <Card>
       <CardHeader>
@@ -51,7 +54,8 @@ export default function TodoWidget({ todos }: TodoWidgetProps) {
               return (
                 <div
                   key={todo.id}
-                  className="flex items-center gap-2 py-1.5 px-2 rounded-md hover:bg-card-elevated transition-colors duration-150"
+                  onClick={() => navigate('/todos', { state: { todoId: todo.id } })}
+                  className="flex items-center gap-2 py-1.5 px-2 rounded-md hover:bg-white/5 transition-colors duration-150 cursor-pointer"
                 >
                   <div className={cn('w-1.5 h-1.5 rounded-full shrink-0', dotColors[todo.priority] || dotColors.medium)} />
                   <span className="text-sm font-medium truncate flex-1 min-w-0">{todo.title}</span>

frontend/src/components/dashboard/UpcomingWidget.tsx

@@ -1,4 +1,5 @@
 import { format } from 'date-fns';
+import { useNavigate } from 'react-router-dom';
 import { CheckSquare, Calendar, Bell, ArrowRight } from 'lucide-react';
 import type { UpcomingItem } from '@/types';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -17,6 +18,26 @@ const typeConfig: Record<string, { icon: typeof CheckSquare; color: string; labe
 };
 
 export default function UpcomingWidget({ items, days = 7 }: UpcomingWidgetProps) {
+  const navigate = useNavigate();
+
+  const handleItemClick = (item: UpcomingItem) => {
+    switch (item.type) {
+      case 'event': {
+        const dateStr = item.datetime
+          ? format(new Date(item.datetime), 'yyyy-MM-dd')
+          : item.date;
+        navigate('/calendar', { state: { date: dateStr, view: 'timeGridDay', eventId: item.id } });
+        break;
+      }
+      case 'todo':
+        navigate('/todos', { state: { todoId: item.id } });
+        break;
+      case 'reminder':
+        navigate('/reminders', { state: { reminderId: item.id } });
+        break;
+    }
+  };
+
   return (
     <Card className="h-full">
       <CardHeader>
@@ -44,7 +65,8 @@ export default function UpcomingWidget({ items, days = 7 }: UpcomingWidgetProps)
                 return (
                   <div
                     key={`${item.type}-${item.id}-${index}`}
-                    className="flex items-center gap-2 py-1.5 px-2 rounded-md hover:bg-card-elevated transition-colors duration-150"
+                    onClick={() => handleItemClick(item)}
+                    className="flex items-center gap-2 py-1.5 px-2 rounded-md hover:bg-white/5 transition-colors duration-150 cursor-pointer"
                   >
                     <Icon className={cn('h-3.5 w-3.5 shrink-0', config.color)} />
                     <span className="text-sm font-medium truncate flex-1 min-w-0">{item.title}</span>

frontend/src/components/dashboard/WeekTimeline.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { format, startOfWeek, addDays, isSameDay, isBefore, startOfDay } from 'date-fns';
 import type { UpcomingItem } from '@/types';
 import { cn } from '@/lib/utils';
@@ -14,6 +15,7 @@ const typeColors: Record<string, string> = {
 };
 
 export default function WeekTimeline({ items }: WeekTimelineProps) {
+  const navigate = useNavigate();
   const today = useMemo(() => startOfDay(new Date()), []);
   const weekStart = useMemo(() => startOfWeek(today, { weekStartsOn: 1 }), [today]);
 
@@ -41,12 +43,13 @@ export default function WeekTimeline({ items }: WeekTimelineProps) {
       {days.map((day) => (
         <div
           key={day.key}
+          onClick={() => navigate('/calendar', { state: { date: day.key, view: 'timeGridDay' } })}
           className={cn(
-            'flex-1 flex flex-col items-center gap-1.5 rounded-lg py-3 px-2 transition-all duration-200 border',
+            'flex-1 flex flex-col items-center gap-1.5 rounded-lg py-3 px-2 transition-all duration-200 border cursor-pointer',
             day.isToday
               ? 'bg-accent/10 border-accent/30 shadow-[0_0_12px_hsl(var(--accent-color)/0.15)]'
               : day.isPast
-                ? 'border-transparent opacity-50'
+                ? 'border-transparent opacity-50 hover:opacity-75'
                 : 'border-transparent hover:border-border/50'
           )}
         >

frontend/src/components/layout/AppLayout.tsx

@@ -10,7 +10,10 @@ import LockOverlay from './LockOverlay';
 
 export default function AppLayout() {
   useTheme();
-  const [collapsed, setCollapsed] = useState(false);
+  const [collapsed, setCollapsed] = useState(() => {
+    try { return JSON.parse(localStorage.getItem('umbra-sidebar-collapsed') || 'false'); }
+    catch { return false; }
+  });
   const [mobileOpen, setMobileOpen] = useState(false);
 
   return (
@@ -19,7 +22,11 @@ export default function AppLayout() {
         <div className="flex h-screen overflow-hidden bg-background">
           <Sidebar
             collapsed={collapsed}
-            onToggle={() => setCollapsed(!collapsed)}
+            onToggle={() => {
+              const next = !collapsed;
+              setCollapsed(next);
+              localStorage.setItem('umbra-sidebar-collapsed', JSON.stringify(next));
+            }}
             mobileOpen={mobileOpen}
             onMobileClose={() => setMobileOpen(false)}
           />

frontend/src/components/layout/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useCallback } from 'react';
 import { NavLink, useNavigate, useLocation } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 import {
@@ -20,6 +20,7 @@ import {
 import { cn } from '@/lib/utils';
 import { useAuth } from '@/hooks/useAuth';
 import { useLock } from '@/hooks/useLock';
+import { useConfirmAction } from '@/hooks/useConfirmAction';
 import { Button } from '@/components/ui/button';
 import api from '@/lib/api';
 import type { Project } from '@/types';
@@ -57,10 +58,12 @@ export default function Sidebar({ collapsed, onToggle, mobileOpen, onMobileClose
     select: (data) => data.map(({ id, name }) => ({ id, name })),
   });
 
-  const handleLogout = async () => {
+  const doLogout = useCallback(async () => {
     await logout();
     navigate('/login');
-  };
+  }, [logout, navigate]);
+
+  const { confirming: logoutConfirming, handleClick: handleLogout } = useConfirmAction(doLogout);
 
   const isProjectsActive = location.pathname.startsWith('/projects');
   const showExpanded = !collapsed || mobileOpen;
@@ -200,10 +203,15 @@ export default function Sidebar({ collapsed, onToggle, mobileOpen, onMobileClose
         </NavLink>
         <button
           onClick={handleLogout}
-          className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
+          className={cn(
+            'flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+            logoutConfirming
+              ? 'bg-destructive/15 text-destructive'
+              : 'text-muted-foreground hover:bg-destructive/10 hover:text-destructive'
+          )}
         >
           <LogOut className="h-5 w-5 shrink-0" />
-          {showExpanded && <span>Logout</span>}
+          {showExpanded && <span>{logoutConfirming ? 'Sure?' : 'Logout'}</span>}
         </button>
       </div>
     </>

frontend/src/components/locations/LocationsPage.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo, useRef, useEffect } from 'react';
-import { Plus, MapPin, Phone, Mail } from 'lucide-react';
+import { Plus, MapPin, Phone, Mail, Tag, AlignLeft } from 'lucide-react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
 import api, { getErrorMessage } from '@/lib/api';
@@ -240,11 +240,11 @@ export default function LocationsPage() {
   ];
 
   const panelFields: PanelField[] = [
-    { label: 'Address', key: 'address', copyable: true, icon: MapPin },
     { label: 'Contact Number', key: 'contact_number', copyable: true, icon: Phone },
     { label: 'Email', key: 'email', copyable: true, icon: Mail },
-    { label: 'Category', key: 'category' },
-    { label: 'Notes', key: 'notes', multiline: true },
+    { label: 'Category', key: 'category', icon: Tag },
+    { label: 'Address', key: 'address', copyable: true, icon: MapPin, fullWidth: true },
+    { label: 'Notes', key: 'notes', multiline: true, icon: AlignLeft, fullWidth: true },
   ];
 
   const renderPanel = () => (
@@ -283,7 +283,7 @@ export default function LocationsPage() {
   );
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full animate-fade-in">
       {/* Header */}
       <div className="border-b bg-card px-6 h-16 flex items-center gap-4 shrink-0">
         <h1 className="font-heading text-2xl font-bold tracking-tight">Locations</h1>

frontend/src/components/people/PeoplePage.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo, useRef, useEffect } from 'react';
-import { Plus, Users, Star, Cake, Phone, Mail, MapPin } from 'lucide-react';
+import { Plus, Users, Star, Cake, Phone, Mail, MapPin, Tag, Building2, Briefcase, AlignLeft } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { format, parseISO, differenceInYears } from 'date-fns';
@@ -173,12 +173,12 @@ const panelFields: PanelField[] = [
   { label: 'Mobile', key: 'mobile', copyable: true, icon: Phone },
   { label: 'Phone', key: 'phone', copyable: true, icon: Phone },
   { label: 'Email', key: 'email', copyable: true, icon: Mail },
-  { label: 'Address', key: 'address', copyable: true, icon: MapPin },
-  { label: 'Birthday', key: 'birthday_display' },
-  { label: 'Category', key: 'category' },
-  { label: 'Company', key: 'company' },
-  { label: 'Job Title', key: 'job_title' },
-  { label: 'Notes', key: 'notes', multiline: true },
+  { label: 'Birthday', key: 'birthday_display', icon: Cake },
+  { label: 'Category', key: 'category', icon: Tag },
+  { label: 'Company', key: 'company', icon: Building2 },
+  { label: 'Job Title', key: 'job_title', icon: Briefcase },
+  { label: 'Address', key: 'address', copyable: true, icon: MapPin, fullWidth: true },
+  { label: 'Notes', key: 'notes', multiline: true, icon: AlignLeft, fullWidth: true },
 ];
 
 // ---------------------------------------------------------------------------
@@ -237,6 +237,9 @@ export default function PeoplePage() {
       list = list.filter(
         (p) =>
           p.name.toLowerCase().includes(q) ||
+          p.first_name?.toLowerCase().includes(q) ||
+          p.last_name?.toLowerCase().includes(q) ||
+          p.nickname?.toLowerCase().includes(q) ||
           p.email?.toLowerCase().includes(q) ||
           p.mobile?.toLowerCase().includes(q) ||
           p.phone?.toLowerCase().includes(q) ||
@@ -400,24 +403,25 @@ export default function PeoplePage() {
   );
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full animate-fade-in">
       {/* Header */}
       <div className="border-b bg-card px-6 h-16 flex items-center gap-4 shrink-0">
         <h1 className="font-heading text-2xl font-bold tracking-tight">People</h1>
-        <CategoryFilterBar
-          activeFilters={activeFilters}
-          pinnedLabel="Favourites"
-          showPinned={showPinned}
-          categories={orderedCategories}
-          onToggleAll={toggleAll}
-          onTogglePinned={togglePinned}
-          onToggleCategory={toggleCategory}
-          onSelectAllCategories={selectAllCategories}
-          onReorderCategories={reorderCategories}
-          searchValue={search}
-          onSearchChange={setSearch}
-        />
-        <div className="flex-1" />
+        <div className="flex-1 min-w-0">
+          <CategoryFilterBar
+            activeFilters={activeFilters}
+            pinnedLabel="Favourites"
+            showPinned={showPinned}
+            categories={orderedCategories}
+            onToggleAll={toggleAll}
+            onTogglePinned={togglePinned}
+            onToggleCategory={toggleCategory}
+            onSelectAllCategories={selectAllCategories}
+            onReorderCategories={reorderCategories}
+            searchValue={search}
+            onSearchChange={setSearch}
+          />
+        </div>
         <Button onClick={() => setShowForm(true)} size="sm" aria-label="Add person">
           <Plus className="mr-2 h-4 w-4" />
           Add Person

frontend/src/components/projects/ProjectDetail.tsx

@@ -344,7 +344,7 @@ export default function ProjectDetail() {
 
   if (isLoading) {
     return (
-      <div className="flex flex-col h-full">
+      <div className="flex flex-col h-full animate-fade-in">
         <div className="border-b bg-card px-6 h-16 flex items-center gap-4 shrink-0">
           <Button variant="ghost" size="icon" onClick={() => navigate('/projects')}>
             <ArrowLeft className="h-5 w-5" />
@@ -373,7 +373,7 @@ export default function ProjectDetail() {
     project.due_date && project.status !== 'completed' && isPast(parseISO(project.due_date));
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full animate-fade-in">
       {/* Header */}
       <div className="border-b bg-card px-6 h-16 flex items-center gap-4 shrink-0">
         <Button variant="ghost" size="icon" onClick={() => navigate('/projects')}>

frontend/src/components/projects/ProjectsPage.tsx

@@ -1,9 +1,11 @@
-import { useState } from 'react';
-import { Plus, FolderKanban, Layers, PlayCircle, CheckCircle2 } from 'lucide-react';
+import { useState, useMemo, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { Plus, FolderKanban, Layers, PlayCircle, CheckCircle2, Search } from 'lucide-react';
 import { useQuery } from '@tanstack/react-query';
 import api from '@/lib/api';
 import type { Project } from '@/types';
 import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
 import { Card, CardContent } from '@/components/ui/card';
 import { GridSkeleton } from '@/components/ui/skeleton';
 import { EmptyState } from '@/components/ui/empty-state';
@@ -18,9 +20,20 @@ const statusFilters = [
 ] as const;
 
 export default function ProjectsPage() {
+  const location = useLocation();
   const [showForm, setShowForm] = useState(false);
   const [editingProject, setEditingProject] = useState<Project | null>(null);
   const [statusFilter, setStatusFilter] = useState('');
+  const [search, setSearch] = useState('');
+
+  // Handle navigation state from dashboard
+  useEffect(() => {
+    const state = location.state as { filter?: string } | null;
+    if (state?.filter) {
+      setStatusFilter(state.filter);
+      window.history.replaceState({}, '');
+    }
+  }, [location.state]);
 
   const { data: projects = [], isLoading } = useQuery({
     queryKey: ['projects'],
@@ -30,9 +43,16 @@ export default function ProjectsPage() {
     },
   });
 
-  const filteredProjects = statusFilter
-    ? projects.filter((p) => p.status === statusFilter)
-    : projects;
+  const filteredProjects = useMemo(() => {
+    let list = statusFilter ? projects.filter((p) => p.status === statusFilter) : projects;
+    if (search) {
+      const q = search.toLowerCase();
+      list = list.filter(
+        (p) => p.name.toLowerCase().includes(q) || p.description?.toLowerCase().includes(q)
+      );
+    }
+    return list;
+  }, [projects, statusFilter, search]);
 
   const inProgressCount = projects.filter((p) => p.status === 'in_progress').length;
   const completedCount = projects.filter((p) => p.status === 'completed').length;
@@ -48,7 +68,7 @@ export default function ProjectsPage() {
   };
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full animate-fade-in">
       {/* Header */}
       <div className="border-b bg-card px-6 h-16 flex items-center gap-4 shrink-0">
         <h1 className="font-heading text-2xl font-bold tracking-tight">Projects</h1>
@@ -75,6 +95,16 @@ export default function ProjectsPage() {
 
         <div className="flex-1" />
 
+        <div className="relative">
+          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+          <Input
+            placeholder="Search..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="w-52 h-8 pl-8 text-sm"
+          />
+        </div>
+
         <Button onClick={() => setShowForm(true)} size="sm">
           <Plus className="mr-2 h-4 w-4" />
           New Project

frontend/src/components/projects/TaskDetailPanel.tsx

@@ -7,6 +7,7 @@ import {
   Calendar, User, Flag, Activity, Send, X, Save,
 } from 'lucide-react';
 import api, { getErrorMessage } from '@/lib/api';
+import { formatUpdatedAt } from '@/components/shared/utils';
 import type { ProjectTask, TaskComment, Person } from '@/types';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
@@ -558,6 +559,15 @@ export default function TaskDetailPanel({
               <Send className="h-4 w-4" />
             </Button>
           </div>
+
+          {/* Updated at footer */}
+          {task.updated_at && (
+            <div className="pt-2 border-t border-border">
+              <span className="text-[11px] text-muted-foreground">
+                {formatUpdatedAt(task.updated_at)}
+              </span>
+            </div>
+          )}
         </div>
       </div>
     </div>

frontend/src/components/reminders/ReminderDetailPanel.tsx

@@ -0,0 +1,473 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { format, parseISO, isPast, isToday } from 'date-fns';
+import {
+  X, Pencil, Trash2, Save, Bell, BellOff, Clock, Repeat, AlertCircle, AlignLeft,
+} from 'lucide-react';
+import api, { getErrorMessage } from '@/lib/api';
+import type { Reminder } from '@/types';
+import { useConfirmAction } from '@/hooks/useConfirmAction';
+import { formatUpdatedAt } from '@/components/shared/utils';
+import CopyableField from '@/components/shared/CopyableField';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Select } from '@/components/ui/select';
+import { Label } from '@/components/ui/label';
+
+// --- Types ---
+
+interface ReminderDetailPanelProps {
+  reminder: Reminder | null;
+  isCreating?: boolean;
+  onClose: () => void;
+  onSaved?: () => void;
+  onDeleted?: () => void;
+}
+
+interface EditState {
+  title: string;
+  description: string;
+  remind_at: string;
+  recurrence_rule: string;
+}
+
+const recurrenceLabels: Record<string, string> = {
+  daily: 'Daily',
+  weekly: 'Weekly',
+  monthly: 'Monthly',
+};
+
+const QUERY_KEYS = [['reminders'], ['dashboard'], ['upcoming']] as const;
+
+function buildEditState(reminder: Reminder): EditState {
+  return {
+    title: reminder.title,
+    description: reminder.description || '',
+    remind_at: reminder.remind_at ? reminder.remind_at.slice(0, 16) : '',
+    recurrence_rule: reminder.recurrence_rule || '',
+  };
+}
+
+function buildCreateState(): EditState {
+  return {
+    title: '',
+    description: '',
+    remind_at: '',
+    recurrence_rule: '',
+  };
+}
+
+// --- Component ---
+
+export default function ReminderDetailPanel({
+  reminder,
+  isCreating = false,
+  onClose,
+  onSaved,
+  onDeleted,
+}: ReminderDetailPanelProps) {
+  const queryClient = useQueryClient();
+
+  const [isEditing, setIsEditing] = useState(false);
+  const [editState, setEditState] = useState<EditState>(() =>
+    isCreating ? buildCreateState() : reminder ? buildEditState(reminder) : buildCreateState()
+  );
+
+  // Reset state when reminder changes
+  useEffect(() => {
+    setIsEditing(false);
+    if (reminder) setEditState(buildEditState(reminder));
+  }, [reminder?.id]);
+
+  // Enter edit mode when creating
+  useEffect(() => {
+    if (isCreating) {
+      setIsEditing(true);
+      setEditState(buildCreateState());
+    }
+  }, [isCreating]);
+
+  const invalidateAll = useCallback(() => {
+    QUERY_KEYS.forEach((key) => queryClient.invalidateQueries({ queryKey: [...key] }));
+  }, [queryClient]);
+
+  // --- Mutations ---
+
+  const saveMutation = useMutation({
+    mutationFn: async (data: EditState) => {
+      const payload = {
+        title: data.title,
+        description: data.description || null,
+        remind_at: data.remind_at || null,
+        recurrence_rule: data.recurrence_rule || null,
+      };
+      if (reminder && !isCreating) {
+        return api.put(`/reminders/${reminder.id}`, payload);
+      } else {
+        return api.post('/reminders', payload);
+      }
+    },
+    onSuccess: () => {
+      invalidateAll();
+      toast.success(isCreating ? 'Reminder created' : 'Reminder updated');
+      if (isCreating) {
+        onClose();
+      } else {
+        setIsEditing(false);
+      }
+      onSaved?.();
+    },
+    onError: (error) => {
+      toast.error(getErrorMessage(error, isCreating ? 'Failed to create reminder' : 'Failed to update reminder'));
+    },
+  });
+
+  const dismissMutation = useMutation({
+    mutationFn: async () => {
+      const { data } = await api.patch(`/reminders/${reminder!.id}/dismiss`);
+      return data;
+    },
+    onSuccess: () => {
+      invalidateAll();
+      toast.success('Reminder dismissed');
+    },
+    onError: () => {
+      toast.error('Failed to dismiss reminder');
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: async () => {
+      await api.delete(`/reminders/${reminder!.id}`);
+    },
+    onSuccess: () => {
+      invalidateAll();
+      toast.success('Reminder deleted');
+      onClose();
+      onDeleted?.();
+    },
+    onError: (error) => {
+      toast.error(getErrorMessage(error, 'Failed to delete reminder'));
+    },
+  });
+
+  const executeDelete = useCallback(() => deleteMutation.mutate(), [deleteMutation]);
+  const { confirming: confirmingDelete, handleClick: handleDeleteClick } = useConfirmAction(executeDelete);
+
+  // --- Handlers ---
+
+  const handleEditStart = () => {
+    if (reminder) setEditState(buildEditState(reminder));
+    setIsEditing(true);
+  };
+
+  const handleEditCancel = () => {
+    setIsEditing(false);
+    if (isCreating) {
+      onClose();
+    } else if (reminder) {
+      setEditState(buildEditState(reminder));
+    }
+  };
+
+  const handleEditSave = () => {
+    saveMutation.mutate(editState);
+  };
+
+  const updateField = <K extends keyof EditState>(key: K, value: EditState[K]) => {
+    setEditState((s) => ({ ...s, [key]: value }));
+  };
+
+  // Empty state
+  if (!reminder && !isCreating) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full text-muted-foreground">
+        <Bell className="h-8 w-8 mb-3 opacity-40" />
+        <p className="text-sm">Select a reminder to view details</p>
+      </div>
+    );
+  }
+
+  // View data
+  const remindDate = reminder?.remind_at ? parseISO(reminder.remind_at) : null;
+  const isOverdue = !reminder?.is_dismissed && remindDate && isPast(remindDate) && !isToday(remindDate);
+  const isDueToday = remindDate ? isToday(remindDate) : false;
+
+  return (
+    <div className="flex flex-col h-full bg-card border-l border-border overflow-hidden">
+      {/* Header */}
+      <div className="px-5 py-4 border-b border-border shrink-0">
+        <div className="flex items-start justify-between gap-3">
+          {isEditing && !isCreating ? (
+            <Input
+              value={editState.title}
+              onChange={(e) => updateField('title', e.target.value)}
+              className="h-8 text-base font-semibold flex-1"
+              placeholder="Reminder title"
+              autoFocus
+            />
+          ) : isCreating ? (
+            <h3 className="font-heading text-lg font-semibold">New Reminder</h3>
+          ) : (
+            <div className="flex items-center gap-3 min-w-0 flex-1">
+              <Bell
+                className={`h-4 w-4 shrink-0 ${
+                  isOverdue ? 'text-red-400' : reminder!.is_dismissed ? 'text-muted-foreground' : 'text-orange-400'
+                }`}
+              />
+              <h3 className={`font-heading text-lg font-semibold truncate ${reminder!.is_dismissed ? 'line-through text-muted-foreground' : ''}`}>
+                {reminder!.title}
+              </h3>
+            </div>
+          )}
+
+          <div className="flex items-center gap-1 shrink-0">
+            {isEditing ? (
+              <>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7 text-green-400 hover:text-green-300"
+                  onClick={handleEditSave}
+                  disabled={saveMutation.isPending}
+                  title="Save"
+                >
+                  <Save className="h-3.5 w-3.5" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7"
+                  onClick={handleEditCancel}
+                  title="Cancel"
+                >
+                  <X className="h-3.5 w-3.5" />
+                </Button>
+              </>
+            ) : (
+              <>
+                {!reminder!.is_dismissed && (
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-7 w-7 hover:bg-orange-500/10 hover:text-orange-400"
+                    onClick={() => dismissMutation.mutate()}
+                    disabled={dismissMutation.isPending}
+                    title="Dismiss reminder"
+                  >
+                    <BellOff className="h-3.5 w-3.5" />
+                  </Button>
+                )}
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7"
+                  onClick={handleEditStart}
+                  title="Edit reminder"
+                >
+                  <Pencil className="h-3.5 w-3.5" />
+                </Button>
+                {confirmingDelete ? (
+                  <Button
+                    variant="ghost"
+                    onClick={handleDeleteClick}
+                    disabled={deleteMutation.isPending}
+                    className="h-7 px-2 bg-destructive/20 text-destructive text-[11px] font-medium"
+                    title="Confirm delete"
+                  >
+                    Sure?
+                  </Button>
+                ) : (
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-7 w-7 text-muted-foreground hover:text-destructive"
+                    onClick={handleDeleteClick}
+                    disabled={deleteMutation.isPending}
+                    title="Delete reminder"
+                  >
+                    <Trash2 className="h-3.5 w-3.5" />
+                  </Button>
+                )}
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7"
+                  onClick={onClose}
+                  title="Close panel"
+                >
+                  <X className="h-3.5 w-3.5" />
+                </Button>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Body */}
+      <div className="flex-1 overflow-y-auto px-5 py-4 space-y-3">
+        {isEditing ? (
+          /* Edit / Create mode */
+          <div className="space-y-4">
+            {isCreating && (
+              <div className="space-y-1">
+                <Label htmlFor="reminder-title" required>Title</Label>
+                <Input
+                  id="reminder-title"
+                  value={editState.title}
+                  onChange={(e) => updateField('title', e.target.value)}
+                  placeholder="Reminder title"
+                  required
+                  autoFocus
+                />
+              </div>
+            )}
+
+            <div className="space-y-1">
+              <Label htmlFor="reminder-desc">Description</Label>
+              <Textarea
+                id="reminder-desc"
+                value={editState.description}
+                onChange={(e) => updateField('description', e.target.value)}
+                placeholder="Add a description..."
+                rows={3}
+                className="text-sm resize-none"
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1">
+                <Label htmlFor="reminder-at">Remind At</Label>
+                <Input
+                  id="reminder-at"
+                  type="datetime-local"
+                  value={editState.remind_at}
+                  onChange={(e) => updateField('remind_at', e.target.value)}
+                  className="text-xs"
+                />
+              </div>
+              <div className="space-y-1">
+                <Label htmlFor="reminder-recurrence">Recurrence</Label>
+                <Select
+                  id="reminder-recurrence"
+                  value={editState.recurrence_rule}
+                  onChange={(e) => updateField('recurrence_rule', e.target.value)}
+                  className="text-xs"
+                >
+                  <option value="">None</option>
+                  <option value="daily">Daily</option>
+                  <option value="weekly">Weekly</option>
+                  <option value="monthly">Monthly</option>
+                </Select>
+              </div>
+            </div>
+
+            {/* Save / Cancel at bottom */}
+            <div className="flex items-center justify-end gap-2 pt-2 border-t border-border">
+              <Button variant="outline" size="sm" onClick={handleEditCancel}>
+                Cancel
+              </Button>
+              <Button size="sm" onClick={handleEditSave} disabled={saveMutation.isPending}>
+                {saveMutation.isPending ? 'Saving...' : isCreating ? 'Create' : 'Update'}
+              </Button>
+            </div>
+          </div>
+        ) : (
+          /* View mode */
+          <>
+            {/* 2-column grid: Status, Recurrence, Remind At, Snoozed Until */}
+            <div className="grid grid-cols-2 gap-3">
+              {/* Status */}
+              <div className="space-y-1">
+                <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground uppercase tracking-wider">
+                  {reminder!.is_dismissed ? (
+                    <BellOff className="h-3 w-3" />
+                  ) : isOverdue ? (
+                    <AlertCircle className="h-3 w-3" />
+                  ) : (
+                    <Bell className="h-3 w-3" />
+                  )}
+                  Status
+                </div>
+                {reminder!.is_dismissed ? (
+                  <p className="text-sm text-muted-foreground">Dismissed</p>
+                ) : isOverdue ? (
+                  <p className="text-sm text-red-400">Overdue</p>
+                ) : isDueToday ? (
+                  <p className="text-sm text-yellow-400">Due today</p>
+                ) : (
+                  <p className="text-sm text-orange-400">Active</p>
+                )}
+              </div>
+
+              {/* Recurrence */}
+              <div className="space-y-1">
+                <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground uppercase tracking-wider">
+                  <Repeat className="h-3 w-3" />
+                  Recurrence
+                </div>
+                {reminder!.recurrence_rule ? (
+                  <p className="text-sm">{recurrenceLabels[reminder!.recurrence_rule] || reminder!.recurrence_rule}</p>
+                ) : (
+                  <p className="text-sm text-muted-foreground">—</p>
+                )}
+              </div>
+
+              {/* Remind At */}
+              <div className="space-y-1">
+                <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground uppercase tracking-wider">
+                  <Clock className="h-3 w-3" />
+                  Remind At
+                </div>
+                {remindDate ? (
+                  <CopyableField
+                    value={format(remindDate, 'EEEE, MMMM d, yyyy · h:mm a')}
+                    icon={Clock}
+                    label="Remind at"
+                  />
+                ) : (
+                  <p className="text-sm text-muted-foreground">—</p>
+                )}
+              </div>
+
+              {/* Snoozed Until */}
+              <div className="space-y-1">
+                <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground uppercase tracking-wider">
+                  <Clock className="h-3 w-3" />
+                  Snoozed Until
+                </div>
+                {reminder!.snoozed_until ? (
+                  <p className="text-sm">{format(parseISO(reminder!.snoozed_until), 'MMM d, h:mm a')}</p>
+                ) : (
+                  <p className="text-sm text-muted-foreground">—</p>
+                )}
+              </div>
+            </div>
+
+            {/* Description — full width */}
+            {reminder!.description && (
+              <div className="space-y-1">
+                <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground uppercase tracking-wider">
+                  <AlignLeft className="h-3 w-3" />
+                  Description
+                </div>
+                <p className="text-sm whitespace-pre-wrap text-muted-foreground leading-relaxed">
+                  {reminder!.description}
+                </p>
+              </div>
+            )}
+
+            {/* Updated at */}
+            <div className="pt-2 border-t border-border">
+              <span className="text-[11px] text-muted-foreground">
+                {formatUpdatedAt(reminder!.updated_at)}
+              </span>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/reminders/RemindersPage.tsx

@@ -1,4 +1,5 @@
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
 import { Plus, Bell, BellOff, AlertCircle, Search } from 'lucide-react';
 import { useQuery } from '@tanstack/react-query';
 import { isPast, isToday, parseISO } from 'date-fns';
@@ -9,7 +10,7 @@ import { Input } from '@/components/ui/input';
 import { Card, CardContent } from '@/components/ui/card';
 import { ListSkeleton } from '@/components/ui/skeleton';
 import ReminderList from './ReminderList';
-import ReminderForm from './ReminderForm';
+import ReminderDetailPanel from './ReminderDetailPanel';
 
 const statusFilters = [
   { value: 'active', label: 'Active' },
@@ -20,11 +21,25 @@ const statusFilters = [
 type StatusFilter = (typeof statusFilters)[number]['value'];
 
 export default function RemindersPage() {
-  const [showForm, setShowForm] = useState(false);
-  const [editingReminder, setEditingReminder] = useState<Reminder | null>(null);
+  const location = useLocation();
+
+  // Panel state
+  const [selectedReminderId, setSelectedReminderId] = useState<number | null>(null);
+  const [panelMode, setPanelMode] = useState<'closed' | 'view' | 'create'>('closed');
+
   const [filter, setFilter] = useState<StatusFilter>('active');
   const [search, setSearch] = useState('');
 
+  // Handle navigation state from dashboard
+  useEffect(() => {
+    const state = location.state as { reminderId?: number } | null;
+    if (state?.reminderId) {
+      setSelectedReminderId(state.reminderId);
+      setPanelMode('view');
+      window.history.replaceState({}, '');
+    }
+  }, [location.state]);
+
   const { data: reminders = [], isLoading } = useQuery({
     queryKey: ['reminders'],
     queryFn: async () => {
@@ -50,18 +65,39 @@ export default function RemindersPage() {
   ).length;
   const dismissedCount = reminders.filter((r) => r.is_dismissed).length;
 
-  const handleEdit = (reminder: Reminder) => {
-    setEditingReminder(reminder);
-    setShowForm(true);
+  const panelOpen = panelMode !== 'closed';
+  const selectedReminder = useMemo(
+    () => reminders.find((r) => r.id === selectedReminderId) ?? null,
+    [selectedReminderId, reminders],
+  );
+
+  const handleSelect = (reminder: Reminder) => {
+    setSelectedReminderId(reminder.id);
+    setPanelMode('view');
   };
 
-  const handleCloseForm = () => {
-    setShowForm(false);
-    setEditingReminder(null);
+  const handleCreateNew = () => {
+    setSelectedReminderId(null);
+    setPanelMode('create');
   };
 
+  const handlePanelClose = () => {
+    setPanelMode('closed');
+    setSelectedReminderId(null);
+  };
+
+  // Escape key closes panel
+  useEffect(() => {
+    if (!panelOpen) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') handlePanelClose();
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [panelOpen]);
+
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full animate-fade-in">
       {/* Header */}
       <div className="border-b bg-card px-6 h-16 flex items-center gap-4 shrink-0">
         <h1 className="font-heading text-2xl font-bold tracking-tight">Reminders</h1>
@@ -87,82 +123,123 @@ export default function RemindersPage() {
           ))}
         </div>
 
-        <div className="relative ml-2">
+        <div className="flex-1" />
+
+        <div className="relative">
           <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
           <Input
             placeholder="Search..."
             value={search}
             onChange={(e) => setSearch(e.target.value)}
-            className="w-52 h-8 pl-8 text-sm"
+            className="w-52 h-8 pl-8 text-sm ring-inset"
           />
         </div>
 
-        <div className="flex-1" />
-
-        <Button onClick={() => setShowForm(true)} size="sm">
+        <Button onClick={handleCreateNew} size="sm">
           <Plus className="mr-2 h-4 w-4" />
           Add Reminder
         </Button>
       </div>
 
-      <div className="flex-1 overflow-y-auto px-6 py-5">
-        {/* Summary stats */}
-        {!isLoading && reminders.length > 0 && (
-          <div className="grid gap-2.5 grid-cols-3 mb-5">
-            <Card className="bg-gradient-to-br from-accent/[0.03] to-transparent">
-              <CardContent className="p-4 flex items-center gap-3">
-                <div className="p-1.5 rounded-md bg-orange-500/10">
-                  <Bell className="h-4 w-4 text-orange-400" />
-                </div>
-                <div>
-                  <p className="text-[10px] tracking-wider uppercase text-muted-foreground">
-                    Active
-                  </p>
-                  <p className="font-heading text-xl font-bold tabular-nums">{activeCount}</p>
-                </div>
-              </CardContent>
-            </Card>
-            <Card className="bg-gradient-to-br from-accent/[0.03] to-transparent">
-              <CardContent className="p-4 flex items-center gap-3">
-                <div className="p-1.5 rounded-md bg-red-500/10">
-                  <AlertCircle className="h-4 w-4 text-red-400" />
-                </div>
-                <div>
-                  <p className="text-[10px] tracking-wider uppercase text-muted-foreground">
-                    Overdue
-                  </p>
-                  <p className="font-heading text-xl font-bold tabular-nums">{overdueCount}</p>
-                </div>
-              </CardContent>
-            </Card>
-            <Card className="bg-gradient-to-br from-accent/[0.03] to-transparent">
-              <CardContent className="p-4 flex items-center gap-3">
-                <div className="p-1.5 rounded-md bg-gray-500/10">
-                  <BellOff className="h-4 w-4 text-gray-400" />
-                </div>
-                <div>
-                  <p className="text-[10px] tracking-wider uppercase text-muted-foreground">
-                    Dismissed
-                  </p>
-                  <p className="font-heading text-xl font-bold tabular-nums">{dismissedCount}</p>
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-        )}
+      {/* Main content — list + detail panel */}
+      <div className="flex-1 overflow-hidden flex">
+        <div
+          className={`overflow-y-auto transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] ${
+            panelOpen ? 'w-full lg:w-[55%]' : 'w-full'
+          }`}
+        >
+          <div className="px-6 py-5">
+            {/* Summary stats */}
+            {!isLoading && reminders.length > 0 && (
+              <div className="grid gap-2.5 grid-cols-3 mb-5">
+                <Card className="bg-gradient-to-br from-accent/[0.03] to-transparent">
+                  <CardContent className="p-4 flex items-center gap-3">
+                    <div className="p-1.5 rounded-md bg-orange-500/10">
+                      <Bell className="h-4 w-4 text-orange-400" />
+                    </div>
+                    <div>
+                      <p className="text-[10px] tracking-wider uppercase text-muted-foreground">
+                        Active
+                      </p>
+                      <p className="font-heading text-xl font-bold tabular-nums">{activeCount}</p>
+                    </div>
+                  </CardContent>
+                </Card>
+                <Card className="bg-gradient-to-br from-accent/[0.03] to-transparent">
+                  <CardContent className="p-4 flex items-center gap-3">
+                    <div className="p-1.5 rounded-md bg-red-500/10">
+                      <AlertCircle className="h-4 w-4 text-red-400" />
+                    </div>
+                    <div>
+                      <p className="text-[10px] tracking-wider uppercase text-muted-foreground">
+                        Overdue
+                      </p>
+                      <p className="font-heading text-xl font-bold tabular-nums">{overdueCount}</p>
+                    </div>
+                  </CardContent>
+                </Card>
+                <Card className="bg-gradient-to-br from-accent/[0.03] to-transparent">
+                  <CardContent className="p-4 flex items-center gap-3">
+                    <div className="p-1.5 rounded-md bg-gray-500/10">
+                      <BellOff className="h-4 w-4 text-gray-400" />
+                    </div>
+                    <div>
+                      <p className="text-[10px] tracking-wider uppercase text-muted-foreground">
+                        Dismissed
+                      </p>
+                      <p className="font-heading text-xl font-bold tabular-nums">{dismissedCount}</p>
+                    </div>
+                  </CardContent>
+                </Card>
+              </div>
+            )}
 
-        {isLoading ? (
-          <ListSkeleton rows={6} />
-        ) : (
-          <ReminderList
-            reminders={filteredReminders}
-            onEdit={handleEdit}
-            onAdd={() => setShowForm(true)}
+            {isLoading ? (
+              <ListSkeleton rows={6} />
+            ) : (
+              <ReminderList
+                reminders={filteredReminders}
+                onEdit={handleSelect}
+                onAdd={handleCreateNew}
+              />
+            )}
+          </div>
+        </div>
+
+        {/* Detail panel (desktop) */}
+        <div
+          className={`overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] ${
+            panelOpen ? 'hidden lg:block lg:w-[45%]' : 'w-0 opacity-0'
+          }`}
+        >
+          <ReminderDetailPanel
+            reminder={panelMode === 'view' ? selectedReminder : null}
+            isCreating={panelMode === 'create'}
+            onClose={handlePanelClose}
+            onSaved={panelMode === 'create' ? handlePanelClose : undefined}
           />
-        )}
+        </div>
       </div>
 
-      {showForm && <ReminderForm reminder={editingReminder} onClose={handleCloseForm} />}
+      {/* Mobile detail panel overlay */}
+      {panelOpen && (
+        <div
+          className="lg:hidden fixed inset-0 z-50 bg-background/80 backdrop-blur-sm"
+          onClick={handlePanelClose}
+        >
+          <div
+            className="fixed inset-y-0 right-0 w-full sm:w-[400px] bg-card border-l border-border shadow-lg"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <ReminderDetailPanel
+              reminder={panelMode === 'view' ? selectedReminder : null}
+              isCreating={panelMode === 'create'}
+              onClose={handlePanelClose}
+              onSaved={panelMode === 'create' ? handlePanelClose : undefined}
+            />
+          </div>
+        </div>
+      )}
     </div>
   );
 }

frontend/src/components/settings/SettingsPage.tsx

@@ -210,7 +210,7 @@ export default function SettingsPage() {
   };
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full animate-fade-in">
       {/* Page header — matches Stage 4-5 pages */}
       <div className="border-b bg-card px-6 h-16 flex items-center gap-3 shrink-0">
         <Settings className="h-5 w-5 text-accent" aria-hidden="true" />

frontend/src/components/shared/CategoryFilterBar.tsx

@@ -118,7 +118,6 @@ export default function CategoryFilterBar({
   onSearchChange,
 }: CategoryFilterBarProps) {
   const [otherOpen, setOtherOpen] = useState(false);
-  const [searchCollapsed, setSearchCollapsed] = useState(false);
   const searchInputRef = useRef<HTMLInputElement>(null);
 
   const isAllActive = activeFilters.length === 0;
@@ -129,16 +128,6 @@ export default function CategoryFilterBar({
     useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
   );
 
-  // Collapse search if there are many categories
-  useEffect(() => {
-    setSearchCollapsed(categories.length >= 4);
-  }, [categories.length]);
-
-  const handleExpandSearch = () => {
-    setSearchCollapsed(false);
-    setTimeout(() => searchInputRef.current?.focus(), 50);
-  };
-
   const handleDragEnd = (event: DragEndEvent) => {
     const { active, over } = event;
     if (!over || active.id === over.id || !onReorderCategories) return;
@@ -254,32 +243,18 @@ export default function CategoryFilterBar({
       <div className="flex-1" />
 
       {/* Search */}
-      {searchCollapsed ? (
-        <button
-          type="button"
-          onClick={handleExpandSearch}
-          aria-label="Expand search"
-          className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-card-elevated transition-colors duration-150"
-        >
-          <Search className="h-4 w-4" />
-        </button>
-      ) : (
-        <div className="relative transition-all duration-200">
-          <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground pointer-events-none" />
-          <Input
-            ref={searchInputRef}
-            type="search"
-            placeholder="Search..."
-            value={searchValue}
-            onChange={(e) => onSearchChange(e.target.value)}
-            onBlur={() => {
-              if (!searchValue && categories.length >= 4) setSearchCollapsed(true);
-            }}
-            className="w-44 h-8 pl-8 text-sm"
-            aria-label="Search"
-          />
-        </div>
-      )}
+      <div className="relative shrink-0">
+        <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground pointer-events-none" />
+        <Input
+          ref={searchInputRef}
+          type="search"
+          placeholder="Search..."
+          value={searchValue}
+          onChange={(e) => onSearchChange(e.target.value)}
+          className="w-52 h-8 pl-8 text-sm ring-inset"
+          aria-label="Search"
+        />
+      </div>
     </div>
   );
 }

frontend/src/components/shared/EntityDetailPanel.tsx

@@ -11,6 +11,7 @@ export interface PanelField {
   copyable?: boolean;
   icon?: LucideIcon;
   multiline?: boolean;
+  fullWidth?: boolean;
 }
 
 interface EntityDetailPanelProps<T> {
@@ -81,29 +82,54 @@ export function EntityDetailPanel<T>({
 
       {/* Body */}
       <div className="flex-1 overflow-y-auto px-5 py-4 space-y-3">
-        {fields.map((field) => {
-          const value = getValue(item, field.key);
-          if (!value) return null;
+        {(() => {
+          const gridFields = fields.filter((f) => !f.fullWidth && getValue(item, f.key));
+          const fullWidthFields = fields.filter((f) => f.fullWidth && getValue(item, f.key));
+
           return (
-            <div key={field.key}>
-              {field.copyable ? (
-                <div className="space-y-0.5">
-                  <p className="text-[11px] uppercase tracking-wider text-muted-foreground">
-                    {field.label}
-                  </p>
-                  <CopyableField value={value} icon={field.icon} label={field.label} />
-                </div>
-              ) : (
-                <div className="space-y-0.5">
-                  <p className="text-[11px] uppercase tracking-wider text-muted-foreground">
-                    {field.label}
-                  </p>
-                  <p className={`text-sm ${field.multiline ? 'whitespace-pre-wrap' : ''}`}>{value}</p>
+            <>
+              {gridFields.length > 0 && (
+                <div className="grid grid-cols-2 gap-3">
+                  {gridFields.map((field) => {
+                    const value = getValue(item, field.key)!;
+                    return (
+                      <div key={field.key} className="space-y-1">
+                        <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground uppercase tracking-wider">
+                          {field.icon && <field.icon className="h-3 w-3" />}
+                          {field.label}
+                        </div>
+                        {field.copyable ? (
+                          <CopyableField value={value} icon={field.icon} label={field.label} />
+                        ) : (
+                          <p className="text-sm">{value}</p>
+                        )}
+                      </div>
+                    );
+                  })}
                 </div>
               )}
-            </div>
+
+              {fullWidthFields.map((field) => {
+                const value = getValue(item, field.key)!;
+                return (
+                  <div key={field.key} className="space-y-1">
+                    <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground uppercase tracking-wider">
+                      {field.icon && <field.icon className="h-3 w-3" />}
+                      {field.label}
+                    </div>
+                    {field.copyable ? (
+                      <CopyableField value={value} icon={field.icon} label={field.label} />
+                    ) : (
+                      <p className={`text-sm ${field.multiline ? 'whitespace-pre-wrap text-muted-foreground leading-relaxed' : ''}`}>
+                        {value}
+                      </p>
+                    )}
+                  </div>
+                );
+              })}
+            </>
           );
-        })}
+        })()}
       </div>
 
       {/* Footer */}

frontend/src/components/todos/TodoDetailPanel.tsx

@@ -0,0 +1,548 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { format, parseISO, isToday } from 'date-fns';
+import {
+  X, Pencil, Trash2, Save, Clock, Calendar, Flag, Tag, Repeat, CheckSquare, AlertCircle, AlignLeft,
+} from 'lucide-react';
+import api, { getErrorMessage } from '@/lib/api';
+import type { Todo } from '@/types';
+import { isTodoOverdue } from '@/lib/utils';
+import { useConfirmAction } from '@/hooks/useConfirmAction';
+import { formatUpdatedAt } from '@/components/shared/utils';
+import CopyableField from '@/components/shared/CopyableField';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Select } from '@/components/ui/select';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+
+// --- Types ---
+
+export interface TodoCreateDefaults {
+  category?: string;
+}
+
+interface TodoDetailPanelProps {
+  todo: Todo | null;
+  isCreating?: boolean;
+  createDefaults?: TodoCreateDefaults | null;
+  onClose: () => void;
+  onSaved?: () => void;
+  onDeleted?: () => void;
+}
+
+interface EditState {
+  title: string;
+  description: string;
+  priority: string;
+  due_date: string;
+  due_time: string;
+  category: string;
+  recurrence_rule: string;
+}
+
+const priorityColors: Record<string, string> = {
+  none: 'bg-gray-500/20 text-gray-400',
+  low: 'bg-green-500/20 text-green-400',
+  medium: 'bg-yellow-500/20 text-yellow-400',
+  high: 'bg-red-500/20 text-red-400',
+};
+
+const recurrenceLabels: Record<string, string> = {
+  daily: 'Daily',
+  weekly: 'Weekly',
+  monthly: 'Monthly',
+};
+
+const QUERY_KEYS = [['todos'], ['dashboard'], ['upcoming']] as const;
+
+function buildEditState(todo: Todo): EditState {
+  return {
+    title: todo.title,
+    description: todo.description || '',
+    priority: todo.priority,
+    due_date: todo.due_date ? todo.due_date.slice(0, 10) : '',
+    due_time: todo.due_time ? todo.due_time.slice(0, 5) : '',
+    category: todo.category || '',
+    recurrence_rule: todo.recurrence_rule || '',
+  };
+}
+
+function buildCreateState(defaults?: TodoCreateDefaults | null): EditState {
+  return {
+    title: '',
+    description: '',
+    priority: 'medium',
+    due_date: '',
+    due_time: '',
+    category: defaults?.category || '',
+    recurrence_rule: '',
+  };
+}
+
+// --- Component ---
+
+export default function TodoDetailPanel({
+  todo,
+  isCreating = false,
+  createDefaults,
+  onClose,
+  onSaved,
+  onDeleted,
+}: TodoDetailPanelProps) {
+  const queryClient = useQueryClient();
+
+  const [isEditing, setIsEditing] = useState(false);
+  const [editState, setEditState] = useState<EditState>(() =>
+    isCreating ? buildCreateState(createDefaults) : todo ? buildEditState(todo) : buildCreateState()
+  );
+
+  // Reset state when todo changes
+  useEffect(() => {
+    setIsEditing(false);
+    if (todo) setEditState(buildEditState(todo));
+  }, [todo?.id]);
+
+  // Enter edit mode when creating
+  useEffect(() => {
+    if (isCreating) {
+      setIsEditing(true);
+      setEditState(buildCreateState(createDefaults));
+    }
+  }, [isCreating, createDefaults]);
+
+  const invalidateAll = useCallback(() => {
+    QUERY_KEYS.forEach((key) => queryClient.invalidateQueries({ queryKey: [...key] }));
+  }, [queryClient]);
+
+  // --- Mutations ---
+
+  const saveMutation = useMutation({
+    mutationFn: async (data: EditState) => {
+      const payload = {
+        title: data.title,
+        description: data.description || null,
+        priority: data.priority,
+        due_date: data.due_date || null,
+        due_time: data.due_time || null,
+        category: data.category || null,
+        recurrence_rule: data.recurrence_rule || null,
+      };
+      if (todo && !isCreating) {
+        return api.put(`/todos/${todo.id}`, payload);
+      } else {
+        return api.post('/todos', payload);
+      }
+    },
+    onSuccess: () => {
+      invalidateAll();
+      toast.success(isCreating ? 'Todo created' : 'Todo updated');
+      if (isCreating) {
+        onClose();
+      } else {
+        setIsEditing(false);
+      }
+      onSaved?.();
+    },
+    onError: (error) => {
+      toast.error(getErrorMessage(error, isCreating ? 'Failed to create todo' : 'Failed to update todo'));
+    },
+  });
+
+  const toggleMutation = useMutation({
+    mutationFn: async () => {
+      const { data } = await api.patch(`/todos/${todo!.id}/toggle`);
+      return data;
+    },
+    onSuccess: () => {
+      invalidateAll();
+      toast.success(todo!.completed ? 'Todo marked incomplete' : 'Todo completed!');
+    },
+    onError: () => {
+      toast.error('Failed to update todo');
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: async () => {
+      await api.delete(`/todos/${todo!.id}`);
+    },
+    onSuccess: () => {
+      invalidateAll();
+      toast.success('Todo deleted');
+      onClose();
+      onDeleted?.();
+    },
+    onError: (error) => {
+      toast.error(getErrorMessage(error, 'Failed to delete todo'));
+    },
+  });
+
+  const executeDelete = useCallback(() => deleteMutation.mutate(), [deleteMutation]);
+  const { confirming: confirmingDelete, handleClick: handleDeleteClick } = useConfirmAction(executeDelete);
+
+  // --- Handlers ---
+
+  const handleEditStart = () => {
+    if (todo) setEditState(buildEditState(todo));
+    setIsEditing(true);
+  };
+
+  const handleEditCancel = () => {
+    setIsEditing(false);
+    if (isCreating) {
+      onClose();
+    } else if (todo) {
+      setEditState(buildEditState(todo));
+    }
+  };
+
+  const handleEditSave = () => {
+    saveMutation.mutate(editState);
+  };
+
+  const updateField = <K extends keyof EditState>(key: K, value: EditState[K]) => {
+    setEditState((s) => ({ ...s, [key]: value }));
+  };
+
+  // Empty state
+  if (!todo && !isCreating) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full text-muted-foreground">
+        <CheckSquare className="h-8 w-8 mb-3 opacity-40" />
+        <p className="text-sm">Select a todo to view details</p>
+      </div>
+    );
+  }
+
+  // View data
+  const dueDate = todo?.due_date ? parseISO(todo.due_date) : null;
+  const isDueToday = dueDate ? isToday(dueDate) : false;
+  const isOverdue = todo ? isTodoOverdue(todo.due_date, todo.completed) : false;
+
+  return (
+    <div className="flex flex-col h-full bg-card border-l border-border overflow-hidden">
+      {/* Header */}
+      <div className="px-5 py-4 border-b border-border shrink-0">
+        <div className="flex items-start justify-between gap-3">
+          {isEditing && !isCreating ? (
+            <Input
+              value={editState.title}
+              onChange={(e) => updateField('title', e.target.value)}
+              className="h-8 text-base font-semibold flex-1"
+              placeholder="Todo title"
+              autoFocus
+            />
+          ) : isCreating ? (
+            <h3 className="font-heading text-lg font-semibold">New Todo</h3>
+          ) : (
+            <div className="flex items-center gap-3 min-w-0 flex-1">
+              <span onClick={(e) => e.stopPropagation()}>
+                <Checkbox
+                  checked={todo!.completed}
+                  onChange={() => toggleMutation.mutate()}
+                  disabled={toggleMutation.isPending}
+                />
+              </span>
+              <h3 className={`font-heading text-lg font-semibold truncate ${todo!.completed ? 'line-through text-muted-foreground' : ''}`}>
+                {todo!.title}
+              </h3>
+            </div>
+          )}
+
+          <div className="flex items-center gap-1 shrink-0">
+            {isEditing ? (
+              <>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7 text-green-400 hover:text-green-300"
+                  onClick={handleEditSave}
+                  disabled={saveMutation.isPending}
+                  title="Save"
+                >
+                  <Save className="h-3.5 w-3.5" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7"
+                  onClick={handleEditCancel}
+                  title="Cancel"
+                >
+                  <X className="h-3.5 w-3.5" />
+                </Button>
+              </>
+            ) : (
+              <>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7"
+                  onClick={handleEditStart}
+                  title="Edit todo"
+                >
+                  <Pencil className="h-3.5 w-3.5" />
+                </Button>
+                {confirmingDelete ? (
+                  <Button
+                    variant="ghost"
+                    onClick={handleDeleteClick}
+                    disabled={deleteMutation.isPending}
+                    className="h-7 px-2 bg-destructive/20 text-destructive text-[11px] font-medium"
+                    title="Confirm delete"
+                  >
+                    Sure?
+                  </Button>
+                ) : (
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-7 w-7 text-muted-foreground hover:text-destructive"
+                    onClick={handleDeleteClick}
+                    disabled={deleteMutation.isPending}
+                    title="Delete todo"
+                  >
+                    <Trash2 className="h-3.5 w-3.5" />
+                  </Button>
+                )}
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7"
+                  onClick={onClose}
+                  title="Close panel"
+                >
+                  <X className="h-3.5 w-3.5" />
+                </Button>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Body */}
+      <div className="flex-1 overflow-y-auto px-5 py-4 space-y-3">
+        {isEditing ? (
+          /* Edit / Create mode */
+          <div className="space-y-4">
+            {isCreating && (
+              <div className="space-y-1">
+                <Label htmlFor="todo-title" required>Title</Label>
+                <Input
+                  id="todo-title"
+                  value={editState.title}
+                  onChange={(e) => updateField('title', e.target.value)}
+                  placeholder="Todo title"
+                  required
+                  autoFocus
+                />
+              </div>
+            )}
+
+            <div className="space-y-1">
+              <Label htmlFor="todo-desc">Description</Label>
+              <Textarea
+                id="todo-desc"
+                value={editState.description}
+                onChange={(e) => updateField('description', e.target.value)}
+                placeholder="Add a description..."
+                rows={3}
+                className="text-sm resize-none"
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1">
+                <Label htmlFor="todo-priority">Priority</Label>
+                <Select
+                  id="todo-priority"
+                  value={editState.priority}
+                  onChange={(e) => updateField('priority', e.target.value)}
+                  className="text-xs"
+                >
+                  <option value="none">None</option>
+                  <option value="low">Low</option>
+                  <option value="medium">Medium</option>
+                  <option value="high">High</option>
+                </Select>
+              </div>
+              <div className="space-y-1">
+                <Label htmlFor="todo-category">Category</Label>
+                <Input
+                  id="todo-category"
+                  value={editState.category}
+                  onChange={(e) => updateField('category', e.target.value)}
+                  placeholder="e.g., Work"
+                  className="text-xs"
+                />
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1">
+                <Label htmlFor="todo-due-date">Due Date</Label>
+                <Input
+                  id="todo-due-date"
+                  type="date"
+                  value={editState.due_date}
+                  onChange={(e) => updateField('due_date', e.target.value)}
+                  className="text-xs"
+                />
+              </div>
+              <div className="space-y-1">
+                <Label htmlFor="todo-due-time">Due Time</Label>
+                <Input
+                  id="todo-due-time"
+                  type="time"
+                  value={editState.due_time}
+                  onChange={(e) => updateField('due_time', e.target.value)}
+                  className="text-xs"
+                />
+              </div>
+            </div>
+
+            <div className="space-y-1">
+              <Label htmlFor="todo-recurrence">Recurrence</Label>
+              <Select
+                id="todo-recurrence"
+                value={editState.recurrence_rule}
+                onChange={(e) => updateField('recurrence_rule', e.target.value)}
+                className="text-xs"
+              >
+                <option value="">None</option>
+                <option value="daily">Daily</option>
+                <option value="weekly">Weekly</option>
+                <option value="monthly">Monthly</option>
+              </Select>
+            </div>
+
+            {/* Save / Cancel at bottom */}
+            <div className="flex items-center justify-end gap-2 pt-2 border-t border-border">
+              <Button variant="outline" size="sm" onClick={handleEditCancel}>
+                Cancel
+              </Button>
+              <Button size="sm" onClick={handleEditSave} disabled={saveMutation.isPending}>
+                {saveMutation.isPending ? 'Saving...' : isCreating ? 'Create' : 'Update'}
+              </Button>
+            </div>
+          </div>
+        ) : (
+          /* View mode */
+          <>
+            {/* 2-column grid: Priority, Category, Due Date, Recurrence */}
+            <div className="grid grid-cols-2 gap-3">
+              {/* Priority */}
+              <div className="space-y-1">
+                <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground uppercase tracking-wider">
+                  <Flag className="h-3 w-3" />
+                  Priority
+                </div>
+                <Badge className={`text-[9px] px-1.5 py-0.5 rounded-full ${priorityColors[todo!.priority] ?? ''}`}>
+                  {todo!.priority}
+                </Badge>
+              </div>
+
+              {/* Category */}
+              <div className="space-y-1">
+                <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground uppercase tracking-wider">
+                  <Tag className="h-3 w-3" />
+                  Category
+                </div>
+                {todo!.category ? (
+                  <Badge className="text-[9px] px-1.5 py-0.5 bg-blue-500/15 text-blue-400">
+                    {todo!.category}
+                  </Badge>
+                ) : (
+                  <p className="text-sm text-muted-foreground">—</p>
+                )}
+              </div>
+
+              {/* Due Date */}
+              <div className="space-y-1">
+                <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground uppercase tracking-wider">
+                  {isOverdue ? <AlertCircle className="h-3 w-3" /> : <Calendar className="h-3 w-3" />}
+                  Due Date
+                </div>
+                {dueDate ? (
+                  <CopyableField
+                    value={`${isOverdue ? 'Overdue · ' : isDueToday ? 'Today · ' : ''}${format(dueDate, 'EEEE, MMMM d, yyyy')}${todo!.due_time ? ` at ${todo!.due_time.slice(0, 5)}` : ''}`}
+                    icon={isOverdue ? AlertCircle : Calendar}
+                    label="Due date"
+                  />
+                ) : todo!.due_time ? (
+                  <CopyableField value={todo!.due_time.slice(0, 5)} icon={Clock} label="Due time" />
+                ) : (
+                  <p className="text-sm text-muted-foreground">—</p>
+                )}
+              </div>
+
+              {/* Recurrence */}
+              <div className="space-y-1">
+                <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground uppercase tracking-wider">
+                  <Repeat className="h-3 w-3" />
+                  Recurrence
+                </div>
+                {todo!.recurrence_rule ? (
+                  <p className="text-sm">{recurrenceLabels[todo!.recurrence_rule] || todo!.recurrence_rule}</p>
+                ) : (
+                  <p className="text-sm text-muted-foreground">—</p>
+                )}
+              </div>
+            </div>
+
+            {/* Completion status — full width */}
+            {todo!.completed && todo!.completed_at && (
+              <div className="space-y-1">
+                <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground uppercase tracking-wider">
+                  <CheckSquare className="h-3 w-3" />
+                  Completed
+                </div>
+                <p className="text-sm text-green-400">
+                  {format(parseISO(todo!.completed_at), 'MMM d, yyyy · h:mm a')}
+                </p>
+              </div>
+            )}
+
+            {/* Reset info — full width */}
+            {todo!.completed && todo!.recurrence_rule && todo!.reset_at && (
+              <div className="space-y-1">
+                <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground uppercase tracking-wider">
+                  <Repeat className="h-3 w-3" />
+                  Resets
+                </div>
+                <p className="text-sm text-purple-400">
+                  {format(parseISO(todo!.reset_at), 'EEE, MMM d')}
+                  {todo!.next_due_date && ` · Next due ${format(parseISO(todo!.next_due_date), 'MMM d')}`}
+                </p>
+              </div>
+            )}
+
+            {/* Description — full width */}
+            {todo!.description && (
+              <div className="space-y-1">
+                <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground uppercase tracking-wider">
+                  <AlignLeft className="h-3 w-3" />
+                  Description
+                </div>
+                <p className="text-sm whitespace-pre-wrap text-muted-foreground leading-relaxed">
+                  {todo!.description}
+                </p>
+              </div>
+            )}
+
+            {/* Updated at */}
+            <div className="pt-2 border-t border-border">
+              <span className="text-[11px] text-muted-foreground">
+                {formatUpdatedAt(todo!.updated_at)}
+              </span>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/todos/TodosPage.tsx

@@ -1,17 +1,17 @@
-import { useState, useMemo } from 'react';
-import { Plus, CheckSquare, CheckCircle2, AlertCircle, Search, ChevronDown } from 'lucide-react';
+import { useState, useMemo, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { Plus, CheckSquare, CheckCircle2, AlertCircle } from 'lucide-react';
 import { useQuery } from '@tanstack/react-query';
 import api from '@/lib/api';
 import type { Todo } from '@/types';
 import { isTodoOverdue } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
 import { Card, CardContent } from '@/components/ui/card';
-import { Checkbox } from '@/components/ui/checkbox';
-import { Label } from '@/components/ui/label';
 import { ListSkeleton } from '@/components/ui/skeleton';
+import { CategoryFilterBar } from '@/components/shared';
+import { useCategoryOrder } from '@/hooks/useCategoryOrder';
 import TodoList from './TodoList';
-import TodoForm from './TodoForm';
+import TodoDetailPanel from './TodoDetailPanel';
 
 const priorityFilters = [
   { value: '', label: 'All' },
@@ -22,14 +22,27 @@ const priorityFilters = [
 ] as const;
 
 export default function TodosPage() {
-  const [showForm, setShowForm] = useState(false);
-  const [editingTodo, setEditingTodo] = useState<Todo | null>(null);
-  const [filters, setFilters] = useState({
-    priority: '',
-    category: '',
-    showCompleted: true,
-    search: '',
-  });
+  const location = useLocation();
+
+  // Panel state
+  const [selectedTodoId, setSelectedTodoId] = useState<number | null>(null);
+  const [panelMode, setPanelMode] = useState<'closed' | 'view' | 'create'>('closed');
+
+  // Filters
+  const [priorityFilter, setPriorityFilter] = useState('');
+  const [activeFilters, setActiveFilters] = useState<string[]>([]);
+  const [showCompleted, setShowCompleted] = useState(true);
+  const [search, setSearch] = useState('');
+
+  // Handle navigation state from dashboard
+  useEffect(() => {
+    const state = location.state as { todoId?: number } | null;
+    if (state?.todoId) {
+      setSelectedTodoId(state.todoId);
+      setPanelMode('view');
+      window.history.replaceState({}, '');
+    }
+  }, [location.state]);
 
   const { data: todos = [], isLoading } = useQuery({
     queryKey: ['todos'],
@@ -39,7 +52,7 @@ export default function TodosPage() {
     },
   });
 
-  const categories = useMemo(() => {
+  const allCategories = useMemo(() => {
     const cats = new Set<string>();
     todos.forEach((t) => {
       if (t.category) cats.add(t.category);
@@ -47,54 +60,92 @@ export default function TodosPage() {
     return Array.from(cats).sort();
   }, [todos]);
 
+  const { orderedCategories, reorder: reorderCategories } = useCategoryOrder('todos', allCategories);
+
   const filteredTodos = useMemo(
     () =>
       todos.filter((todo) => {
-        if (filters.priority && todo.priority !== filters.priority) return false;
-        if (filters.category && todo.category?.toLowerCase() !== filters.category.toLowerCase())
-          return false;
-        if (!filters.showCompleted && todo.completed) return false;
-        if (filters.search && !todo.title.toLowerCase().includes(filters.search.toLowerCase()))
+        if (priorityFilter && todo.priority !== priorityFilter) return false;
+        if (activeFilters.length > 0) {
+          if (!todo.category || !activeFilters.includes(todo.category)) return false;
+        }
+        if (!showCompleted && todo.completed) return false;
+        if (search && !todo.title.toLowerCase().includes(search.toLowerCase()))
           return false;
         return true;
       }),
-    [todos, filters]
+    [todos, priorityFilter, activeFilters, showCompleted, search]
   );
 
   const totalCount = filteredTodos.filter((t) => !t.completed).length;
   const completedCount = filteredTodos.filter((t) => t.completed).length;
   const overdueCount = filteredTodos.filter((t) => isTodoOverdue(t.due_date, t.completed)).length;
 
-  const handleEdit = (todo: Todo) => {
-    setEditingTodo(todo);
-    setShowForm(true);
+  const panelOpen = panelMode !== 'closed';
+  const selectedTodo = useMemo(
+    () => todos.find((t) => t.id === selectedTodoId) ?? null,
+    [selectedTodoId, todos],
+  );
+
+  const handleSelect = (todo: Todo) => {
+    setSelectedTodoId(todo.id);
+    setPanelMode('view');
   };
 
-  const handleCloseForm = () => {
-    setShowForm(false);
-    setEditingTodo(null);
+  const handleCreateNew = () => {
+    setSelectedTodoId(null);
+    setPanelMode('create');
   };
 
+  const handlePanelClose = () => {
+    setPanelMode('closed');
+    setSelectedTodoId(null);
+  };
+
+  // CategoryFilterBar handlers
+  const toggleAll = () => setActiveFilters([]);
+  const toggleCompleted = () => setShowCompleted((p) => !p);
+  const toggleCategory = (cat: string) => {
+    setActiveFilters((prev) =>
+      prev.includes(cat) ? prev.filter((c) => c !== cat) : [...prev, cat]
+    );
+  };
+  const selectAllCategories = () => {
+    const allSelected = orderedCategories.every((c) => activeFilters.includes(c));
+    setActiveFilters(allSelected ? [] : [...orderedCategories]);
+  };
+
+  // Escape key closes panel
+  useEffect(() => {
+    if (!panelOpen) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') handlePanelClose();
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [panelOpen]);
+
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full animate-fade-in">
       {/* Header */}
       <div className="border-b bg-card px-6 h-16 flex items-center gap-4 shrink-0">
         <h1 className="font-heading text-2xl font-bold tracking-tight">Todos</h1>
 
+        {/* Priority filter */}
         <div className="flex items-center rounded-md border border-border overflow-hidden ml-4">
           {priorityFilters.map((pf) => (
             <button
               key={pf.value}
-              onClick={() => setFilters({ ...filters, priority: pf.value })}
+              onClick={() => setPriorityFilter(pf.value)}
               className={`px-3 py-1.5 text-sm font-medium transition-colors duration-150 ${
-                filters.priority === pf.value
+                priorityFilter === pf.value
                   ? 'bg-accent/15 text-accent'
                   : 'text-muted-foreground hover:text-foreground hover:bg-card-elevated'
               }`}
               style={{
                 backgroundColor:
-                  filters.priority === pf.value ? 'hsl(var(--accent-color) / 0.15)' : undefined,
-                color: filters.priority === pf.value ? 'hsl(var(--accent-color))' : undefined,
+                  priorityFilter === pf.value ? 'hsl(var(--accent-color) / 0.15)' : undefined,
+                color: priorityFilter === pf.value ? 'hsl(var(--accent-color))' : undefined,
               }}
             >
               {pf.label}
@@ -102,111 +153,128 @@ export default function TodosPage() {
           ))}
         </div>
 
-        <div className="relative ml-2">
-          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
-          <Input
-            placeholder="Search..."
-            value={filters.search}
-            onChange={(e) => setFilters({ ...filters, search: e.target.value })}
-            className="w-52 h-8 pl-8 text-sm"
+        {/* Category filter bar (All + Completed + Categories with drag) */}
+        <div className="flex-1 min-w-0">
+          <CategoryFilterBar
+            activeFilters={activeFilters}
+            pinnedLabel="Completed"
+            showPinned={showCompleted}
+            categories={orderedCategories}
+            onToggleAll={toggleAll}
+            onTogglePinned={toggleCompleted}
+            onToggleCategory={toggleCategory}
+            onSelectAllCategories={selectAllCategories}
+            onReorderCategories={reorderCategories}
+            searchValue={search}
+            onSearchChange={setSearch}
           />
         </div>
 
-        <div className="relative">
-          <select
-            value={filters.category}
-            onChange={(e) => setFilters({ ...filters, category: e.target.value })}
-            className="h-8 rounded-md border border-input bg-background px-3 pr-8 text-sm text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 appearance-none cursor-pointer"
-          >
-            <option value="">All Categories</option>
-            {categories.map((cat) => (
-              <option key={cat} value={cat}>
-                {cat}
-              </option>
-            ))}
-          </select>
-          <ChevronDown className="absolute right-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground pointer-events-none" />
-        </div>
-
-        <div className="flex items-center gap-1.5">
-          <Checkbox
-            id="show-completed"
-            checked={filters.showCompleted}
-            onChange={(e) =>
-              setFilters({ ...filters, showCompleted: (e.target as HTMLInputElement).checked })
-            }
-          />
-          <Label htmlFor="show-completed" className="text-xs text-muted-foreground cursor-pointer">
-            Completed
-          </Label>
-        </div>
-
-        <div className="flex-1" />
-
-        <Button onClick={() => setShowForm(true)} size="sm">
+        <Button onClick={handleCreateNew} size="sm">
           <Plus className="mr-2 h-4 w-4" />
           Add Todo
         </Button>
       </div>
 
-      <div className="flex-1 overflow-y-auto px-6 py-5">
-        {/* Summary stats */}
-        {!isLoading && todos.length > 0 && (
-          <div className="grid gap-2.5 grid-cols-3 mb-5">
-            <Card className="bg-gradient-to-br from-accent/[0.03] to-transparent">
-              <CardContent className="p-4 flex items-center gap-3">
-                <div className="p-1.5 rounded-md bg-blue-500/10">
-                  <CheckSquare className="h-4 w-4 text-blue-400" />
-                </div>
-                <div>
-                  <p className="text-[10px] tracking-wider uppercase text-muted-foreground">
-                    Open
-                  </p>
-                  <p className="font-heading text-xl font-bold tabular-nums">{totalCount}</p>
-                </div>
-              </CardContent>
-            </Card>
-            <Card className="bg-gradient-to-br from-accent/[0.03] to-transparent">
-              <CardContent className="p-4 flex items-center gap-3">
-                <div className="p-1.5 rounded-md bg-green-500/10">
-                  <CheckCircle2 className="h-4 w-4 text-green-400" />
-                </div>
-                <div>
-                  <p className="text-[10px] tracking-wider uppercase text-muted-foreground">
-                    Completed
-                  </p>
-                  <p className="font-heading text-xl font-bold tabular-nums">{completedCount}</p>
-                </div>
-              </CardContent>
-            </Card>
-            <Card className="bg-gradient-to-br from-accent/[0.03] to-transparent">
-              <CardContent className="p-4 flex items-center gap-3">
-                <div className="p-1.5 rounded-md bg-red-500/10">
-                  <AlertCircle className="h-4 w-4 text-red-400" />
-                </div>
-                <div>
-                  <p className="text-[10px] tracking-wider uppercase text-muted-foreground">
-                    Overdue
-                  </p>
-                  <p className="font-heading text-xl font-bold tabular-nums">{overdueCount}</p>
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-        )}
+      {/* Main content — list + detail panel */}
+      <div className="flex-1 overflow-hidden flex">
+        <div
+          className={`overflow-y-auto transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] ${
+            panelOpen ? 'w-full lg:w-[55%]' : 'w-full'
+          }`}
+        >
+          <div className="px-6 py-5">
+            {/* Summary stats */}
+            {!isLoading && todos.length > 0 && (
+              <div className="grid gap-2.5 grid-cols-3 mb-5">
+                <Card className="bg-gradient-to-br from-accent/[0.03] to-transparent">
+                  <CardContent className="p-4 flex items-center gap-3">
+                    <div className="p-1.5 rounded-md bg-blue-500/10">
+                      <CheckSquare className="h-4 w-4 text-blue-400" />
+                    </div>
+                    <div>
+                      <p className="text-[10px] tracking-wider uppercase text-muted-foreground">
+                        Open
+                      </p>
+                      <p className="font-heading text-xl font-bold tabular-nums">{totalCount}</p>
+                    </div>
+                  </CardContent>
+                </Card>
+                <Card className="bg-gradient-to-br from-accent/[0.03] to-transparent">
+                  <CardContent className="p-4 flex items-center gap-3">
+                    <div className="p-1.5 rounded-md bg-green-500/10">
+                      <CheckCircle2 className="h-4 w-4 text-green-400" />
+                    </div>
+                    <div>
+                      <p className="text-[10px] tracking-wider uppercase text-muted-foreground">
+                        Completed
+                      </p>
+                      <p className="font-heading text-xl font-bold tabular-nums">{completedCount}</p>
+                    </div>
+                  </CardContent>
+                </Card>
+                <Card className="bg-gradient-to-br from-accent/[0.03] to-transparent">
+                  <CardContent className="p-4 flex items-center gap-3">
+                    <div className="p-1.5 rounded-md bg-red-500/10">
+                      <AlertCircle className="h-4 w-4 text-red-400" />
+                    </div>
+                    <div>
+                      <p className="text-[10px] tracking-wider uppercase text-muted-foreground">
+                        Overdue
+                      </p>
+                      <p className="font-heading text-xl font-bold tabular-nums">{overdueCount}</p>
+                    </div>
+                  </CardContent>
+                </Card>
+              </div>
+            )}
 
-        {isLoading ? (
-          <ListSkeleton rows={6} />
-        ) : (
-          <TodoList
-            todos={filteredTodos}
-            onEdit={handleEdit}
-            onAdd={() => setShowForm(true)}
+            {isLoading ? (
+              <ListSkeleton rows={6} />
+            ) : (
+              <TodoList
+                todos={filteredTodos}
+                onEdit={handleSelect}
+                onAdd={handleCreateNew}
+              />
+            )}
+          </div>
+        </div>
+
+        {/* Detail panel (desktop) */}
+        <div
+          className={`overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] ${
+            panelOpen ? 'hidden lg:block lg:w-[45%]' : 'w-0 opacity-0'
+          }`}
+        >
+          <TodoDetailPanel
+            todo={panelMode === 'view' ? selectedTodo : null}
+            isCreating={panelMode === 'create'}
+            onClose={handlePanelClose}
+            onSaved={panelMode === 'create' ? handlePanelClose : undefined}
           />
-        )}
+        </div>
       </div>
 
-      {showForm && <TodoForm todo={editingTodo} onClose={handleCloseForm} />}
+      {/* Mobile detail panel overlay */}
+      {panelOpen && (
+        <div
+          className="lg:hidden fixed inset-0 z-50 bg-background/80 backdrop-blur-sm"
+          onClick={handlePanelClose}
+        >
+          <div
+            className="fixed inset-y-0 right-0 w-full sm:w-[400px] bg-card border-l border-border shadow-lg"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <TodoDetailPanel
+              todo={panelMode === 'view' ? selectedTodo : null}
+              isCreating={panelMode === 'create'}
+              onClose={handlePanelClose}
+              onSaved={panelMode === 'create' ? handlePanelClose : undefined}
+            />
+          </div>
+        </div>
+      )}
     </div>
   );
 }