availsync 0.1.0

package/frontend/app/app/availability/page.tsx

@@ -0,0 +1,840 @@
+'use client';
+
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { loadSession, type StoredSession } from '@/lib/storage';
+import {
+  listAgents,
+  checkAvailability,
+  createAvailabilityWindow,
+  updateAvailabilityWindow,
+  deleteAvailabilityWindow,
+  getAvailabilityWindows,
+  getPreferences,
+  updatePreferences,
+  createHold,
+  getActivityLog,
+} from '@/lib/api';
+import { Badge } from '@/components/ui/Badge';
+import { useToast } from '@/components/ui/Toast';
+import { SkeletonRow } from '@/components/ui/Skeleton';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { CalendarClock, Check, Pencil, Plus, Trash2, X } from 'lucide-react';
+import type { Agent } from '@/lib/schemas';
+import { toLocalInputValue } from '@/lib/format';
+
+type FocusBlock = { weekday: number; start_time: string; end_time: string };
+
+const weekdayLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+function toIsoLocalMinute(value: string) {
+  const date = new Date(value);
+  const offset = date.getTimezoneOffset();
+  return new Date(date.getTime() - offset * 60_000).toISOString().slice(0, 16).replace('T', ' ');
+}
+
+function localFieldValue(date: Date) {
+  return toLocalInputValue(date).replace('T', ' ');
+}
+
+function fieldValueToDate(value: string) {
+  return new Date(value.trim().replace(' ', 'T'));
+}
+
+function formatSlotRange(start: string, end: string) {
+  return `${toIsoLocalMinute(start).slice(11)} - ${toIsoLocalMinute(end).slice(11)}`;
+}
+
+function activitySummary(event: { activity_type: string; metadata: Record<string, unknown> | null; status: string; status_code: number | null; error_code: string | null }) {
+  const metadata = event.metadata ?? {};
+  if (event.activity_type === 'availability_check') {
+    return `checked ${metadata.duration_minutes ?? ''}min slots`.replace('  ', ' ');
+  }
+  if (event.activity_type === 'hold_create') {
+    return event.status === 'success' ? 'claimed slot' : 'claim failed';
+  }
+  if (event.activity_type === 'conflict_preview') {
+    return 'previewed conflict';
+  }
+  if (event.activity_type.startsWith('work_') || event.activity_type.startsWith('automation_')) {
+    return event.activity_type.replaceAll('_', ' ');
+  }
+  return event.activity_type.replaceAll('_', ' ');
+}
+
+export default function AvailabilityPage() {
+  const { toast } = useToast();
+  const [session, setSession] = useState<StoredSession | null>(null);
+  const [agents, setAgents] = useState<Agent[]>([]);
+  const [selectedAgent, setSelectedAgent] = useState<string>('');
+  const [loading, setLoading] = useState(true);
+
+  // Availability windows
+  const [windows, setWindows] = useState<Array<{
+    id: string;
+    start_at: string;
+    end_at: string;
+    window_type: string;
+  }>>([]);
+  const [editingWindowId, setEditingWindowId] = useState<string | null>(null);
+  const [editWindowForm, setEditWindowForm] = useState({
+    start_at: '',
+    end_at: '',
+    window_type: 'available' as 'available' | 'focus' | 'blocked',
+  });
+
+  // Slot checker
+  const [from, setFrom] = useState(localFieldValue(new Date(Date.now() + 86400000)));
+  const [to, setTo] = useState(localFieldValue(new Date(Date.now() + 86400000 * 2)));
+  const [duration, setDuration] = useState(30);
+  const [slots, setSlots] = useState<Array<{
+    start: string;
+    end: string;
+    confidence: number;
+    competing_holds_count: number;
+  }>>([]);
+  const [checking, setChecking] = useState(false);
+  const [recentActivity, setRecentActivity] = useState<Array<{
+    id: string;
+    activity_type: string;
+    status: string;
+    status_code: number | null;
+    created_at: string;
+    metadata: Record<string, unknown> | null;
+    error_code: string | null;
+  }>>([]);
+
+  // New window form
+  const [showWindowForm, setShowWindowForm] = useState(false);
+  const [windowForm, setWindowForm] = useState({
+    start_at: localFieldValue(new Date(Date.now() + 86400000)),
+    end_at: localFieldValue(new Date(Date.now() + 86400000 + 28800000)),
+    window_type: 'available' as 'available' | 'focus' | 'blocked',
+  });
+
+  // Preferences
+  const [prefs, setPrefs] = useState<{
+    buffer_minutes_after: number;
+    buffer_minutes_before: number;
+    allow_back_to_back: boolean;
+    booking_window_days: number;
+    focus_blocks: FocusBlock[];
+    priority_over_agents: string[];
+  } | null>(null);
+  const [bufferDraft, setBufferDraft] = useState({
+    buffer_minutes_after: 0,
+    buffer_minutes_before: 0,
+  });
+  const preferenceSaveTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const selectedAgentName = agents.find((agent) => agent.id === selectedAgent)?.name || 'agent';
+
+  useEffect(() => {
+    const s = loadSession();
+    setSession(s);
+    if (s) {
+      listAgents(s.orgId)
+        .then((data) => {
+          setAgents(data);
+          if (data.length > 0) setSelectedAgent(data[0].id);
+          setLoading(false);
+        })
+        .catch(() => setLoading(false));
+    } else {
+      setLoading(false);
+    }
+  }, []);
+
+  // Load windows and prefs when agent changes
+  useEffect(() => {
+    if (!session || !selectedAgent) return;
+    getAvailabilityWindows({ agent_id: selectedAgent })
+      .then((w) => setWindows(w.map((win: any) => ({
+        id: win.id,
+        start_at: win.start_at,
+        end_at: win.end_at,
+        window_type: win.window_type,
+      }))))
+      .catch(() => {});
+    getPreferences(selectedAgent)
+      .then((r) => setPrefs(r.preferences))
+      .catch(() => {});
+  }, [session, selectedAgent]);
+
+  useEffect(() => {
+    if (!prefs) return;
+    setBufferDraft({
+      buffer_minutes_after: prefs.buffer_minutes_after,
+      buffer_minutes_before: prefs.buffer_minutes_before,
+    });
+  }, [prefs?.buffer_minutes_after, prefs?.buffer_minutes_before]);
+
+  useEffect(() => {
+    return () => {
+      if (preferenceSaveTimer.current) {
+        clearTimeout(preferenceSaveTimer.current);
+      }
+    };
+  }, []);
+
+  const refreshWindows = async () => {
+    if (!selectedAgent) return;
+    const w = await getAvailabilityWindows({ agent_id: selectedAgent });
+    setWindows(w.map((win: any) => ({
+      id: win.id,
+      start_at: win.start_at,
+      end_at: win.end_at,
+      window_type: win.window_type,
+    })));
+  };
+
+  const refreshRecentActivity = useCallback(async () => {
+    if (!selectedAgent) return;
+    const activity = await getActivityLog({
+      agent_id: selectedAgent,
+      limit: 8,
+    }).catch(() => ({ events: [] }));
+    setRecentActivity(activity.events.map((event: any) => ({
+      id: event.id,
+      activity_type: event.activity_type,
+      status: event.status,
+      status_code: event.status_code,
+      created_at: event.created_at,
+      metadata: event.metadata,
+      error_code: event.error_code,
+    })));
+  }, [selectedAgent]);
+
+  useEffect(() => {
+    refreshRecentActivity();
+  }, [refreshRecentActivity]);
+
+  const handleCheckSlots = async () => {
+    if (!session || !selectedAgent) return;
+    setChecking(true);
+    try {
+      const result = await checkAvailability({
+        agent_id: selectedAgent,
+        from: fieldValueToDate(from).toISOString(),
+        to: fieldValueToDate(to).toISOString(),
+        duration_minutes: duration,
+      });
+      setSlots(result.slots.map((s) => ({
+        start: s.start,
+        end: s.end,
+        confidence: s.confidence,
+        competing_holds_count: s.competing_holds_count,
+      })));
+      await refreshRecentActivity();
+    } catch (err) {
+      toast((err as Error).message, 'error');
+    } finally {
+      setChecking(false);
+    }
+  };
+
+  const handleCreateWindow = async () => {
+    if (!session || !selectedAgent) return;
+    try {
+      await createAvailabilityWindow({
+        agent_id: selectedAgent,
+        start_at: fieldValueToDate(windowForm.start_at).toISOString(),
+        end_at: fieldValueToDate(windowForm.end_at).toISOString(),
+        window_type: windowForm.window_type,
+      });
+      toast('Window created', 'success');
+      setShowWindowForm(false);
+      await refreshWindows();
+    } catch (err) {
+      toast((err as Error).message, 'error');
+    }
+  };
+
+  const startEditWindow = (window: { id: string; start_at: string; end_at: string; window_type: string }) => {
+    setEditingWindowId(window.id);
+    setEditWindowForm({
+      start_at: localFieldValue(new Date(window.start_at)),
+      end_at: localFieldValue(new Date(window.end_at)),
+      window_type: window.window_type as 'available' | 'focus' | 'blocked',
+    });
+  };
+
+  const handleUpdateWindow = async () => {
+    if (!editingWindowId) return;
+    try {
+      await updateAvailabilityWindow({
+        window_id: editingWindowId,
+        start_at: fieldValueToDate(editWindowForm.start_at).toISOString(),
+        end_at: fieldValueToDate(editWindowForm.end_at).toISOString(),
+        window_type: editWindowForm.window_type,
+      });
+      toast('Window updated', 'success');
+      setEditingWindowId(null);
+      await refreshWindows();
+    } catch (err) {
+      toast((err as Error).message, 'error');
+    }
+  };
+
+  const handleDeleteWindow = async (windowId: string) => {
+    if (!window.confirm('Delete this availability window?')) return;
+    try {
+      await deleteAvailabilityWindow(windowId);
+      toast('Window deleted', 'success');
+      if (editingWindowId === windowId) setEditingWindowId(null);
+      await refreshWindows();
+    } catch (err) {
+      toast((err as Error).message, 'error');
+    }
+  };
+
+  const handleUpdatePrefs = async (data: Record<string, unknown>) => {
+    if (!session || !selectedAgent) return;
+    try {
+      await updatePreferences(selectedAgent, data);
+      const r = await getPreferences(selectedAgent);
+      setPrefs(r.preferences);
+      toast('Preferences updated', 'success');
+    } catch (err) {
+      toast((err as Error).message, 'error');
+    }
+  };
+
+  const schedulePreferenceUpdate = (data: Record<string, unknown>) => {
+    if (preferenceSaveTimer.current) {
+      clearTimeout(preferenceSaveTimer.current);
+    }
+    preferenceSaveTimer.current = setTimeout(() => {
+      preferenceSaveTimer.current = null;
+      handleUpdatePrefs(data);
+    }, 500);
+  };
+
+  const addFocusBlock = () => {
+    if (!prefs) return;
+    handleUpdatePrefs({
+      focus_blocks: [
+        ...prefs.focus_blocks,
+        { weekday: 1, start_time: '09:00', end_time: '10:00' },
+      ],
+    });
+  };
+
+  const updateFocusBlock = (index: number, block: FocusBlock) => {
+    if (!prefs) return;
+    handleUpdatePrefs({
+      focus_blocks: prefs.focus_blocks.map((item, itemIndex) => (itemIndex === index ? block : item)),
+    });
+  };
+
+  const removeFocusBlock = (index: number) => {
+    if (!prefs) return;
+    handleUpdatePrefs({
+      focus_blocks: prefs.focus_blocks.filter((_, itemIndex) => itemIndex !== index),
+    });
+  };
+
+  const togglePriorityOverAgent = (agentId: string) => {
+    if (!prefs) return;
+    const current = new Set(prefs.priority_over_agents);
+    if (current.has(agentId)) {
+      current.delete(agentId);
+    } else {
+      current.add(agentId);
+    }
+    handleUpdatePrefs({ priority_over_agents: Array.from(current) });
+  };
+
+  const handleBookSlot = async (start: string, end: string) => {
+    if (!session || !selectedAgent) return;
+    try {
+      await createHold({
+        agent_id: selectedAgent,
+        start_at: start,
+        end_at: end,
+        reason: 'Booked from dashboard',
+      });
+      toast('Hold booked', 'success');
+      await handleCheckSlots();
+    } catch (err) {
+      toast((err as Error).message, 'error');
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="w-full max-w-none p-4 sm:p-6">
+        <h1 className="text-title font-semibold text-text-primary mb-6">Availability</h1>
+        <div className="space-y-2">{Array.from({ length: 3 }).map((_, i) => <SkeletonRow key={i} />)}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full max-w-none p-4 sm:p-6">
+      <h1 className="text-title font-semibold text-text-primary mb-6">Availability</h1>
+
+      <div className="grid grid-cols-1 gap-6 xl:grid-cols-[minmax(0,1fr)_360px]">
+        {/* Left: Windows + Slot checker */}
+        <div className="lg:col-span-2 space-y-6">
+          {/* Agent selector */}
+          <div className="flex items-center gap-3">
+            <label className="text-label uppercase text-text-tertiary">Agent</label>
+            <select
+              value={selectedAgent}
+              onChange={(e) => setSelectedAgent(e.target.value)}
+              className="rounded bg-surface border border-border px-3 py-1.5 text-body text-text-primary outline-none focus:border-border-focus"
+            >
+              {agents.map((a) => (
+                <option key={a.id} value={a.id}>{a.name}</option>
+              ))}
+            </select>
+          </div>
+
+          {/* Availability windows */}
+          <div>
+            <div className="flex items-center justify-between mb-3">
+              <h2 className="text-heading font-medium text-text-primary">Windows</h2>
+              <button
+                onClick={() => setShowWindowForm(!showWindowForm)}
+                className="flex items-center gap-1 text-body text-accent hover:text-accent-hover"
+              >
+                <Plus className="h-3.5 w-3.5" />
+                Add window
+              </button>
+            </div>
+
+            {showWindowForm && (
+              <div className="rounded border border-border bg-surface p-4 mb-3 space-y-3">
+                <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                  <div>
+                    <label className="block text-label uppercase text-text-tertiary mb-1">Start</label>
+                    <input
+                      type="text"
+                      value={windowForm.start_at}
+                      onChange={(e) => setWindowForm({ ...windowForm, start_at: e.target.value })}
+                      placeholder="2026-05-13 09:00"
+                      className="w-full rounded bg-bg border border-border px-3 py-1.5 font-mono text-body text-text-primary outline-none focus:border-border-focus"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-label uppercase text-text-tertiary mb-1">End</label>
+                    <input
+                      type="text"
+                      value={windowForm.end_at}
+                      onChange={(e) => setWindowForm({ ...windowForm, end_at: e.target.value })}
+                      placeholder="2026-05-13 17:00"
+                      className="w-full rounded bg-bg border border-border px-3 py-1.5 font-mono text-body text-text-primary outline-none focus:border-border-focus"
+                    />
+                  </div>
+                </div>
+                <div>
+                  <label className="block text-label uppercase text-text-tertiary mb-1">Type</label>
+                  <select
+                    value={windowForm.window_type}
+                    onChange={(e) => setWindowForm({ ...windowForm, window_type: e.target.value as any })}
+                    className="rounded bg-bg border border-border px-3 py-1.5 text-body text-text-primary outline-none focus:border-border-focus"
+                  >
+                    <option value="available">Available</option>
+                    <option value="focus">Focus</option>
+                    <option value="blocked">Blocked</option>
+                  </select>
+                </div>
+                <button
+                  onClick={handleCreateWindow}
+                  className="rounded bg-accent text-white px-3 py-1.5 text-body font-medium hover:bg-accent-hover transition-colors"
+                >
+                  Create window
+                </button>
+              </div>
+            )}
+
+            {windows.length === 0 ? (
+              <EmptyState
+                icon={CalendarClock}
+                title="No windows"
+                description="Create availability windows so agents know when they can reserve time."
+              />
+            ) : (
+              <div className="overflow-x-auto rounded border border-border dark-scroll">
+                <table className="w-full min-w-[720px]">
+                  <thead>
+                    <tr className="border-b border-border bg-surface text-label uppercase text-text-tertiary">
+                      <th className="text-left px-4 py-2 font-medium">Start</th>
+                      <th className="text-left px-4 py-2 font-medium">End</th>
+                      <th className="text-left px-4 py-2 font-medium">Type</th>
+                      <th className="text-right px-4 py-2 font-medium">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {windows.map((w) => (
+                      <tr key={w.id} className="border-b border-border h-9 hover:bg-surface-raised transition-colors duration-150">
+                        {editingWindowId === w.id ? (
+                          <>
+                            <td className="px-4 py-2">
+                              <input
+                                type="text"
+                                value={editWindowForm.start_at}
+                                onChange={(e) => setEditWindowForm({ ...editWindowForm, start_at: e.target.value })}
+                                className="w-full rounded bg-bg border border-border px-2 py-1 font-mono text-body text-text-primary outline-none focus:border-border-focus"
+                              />
+                            </td>
+                            <td className="px-4 py-2">
+                              <input
+                                type="text"
+                                value={editWindowForm.end_at}
+                                onChange={(e) => setEditWindowForm({ ...editWindowForm, end_at: e.target.value })}
+                                className="w-full rounded bg-bg border border-border px-2 py-1 font-mono text-body text-text-primary outline-none focus:border-border-focus"
+                              />
+                            </td>
+                            <td className="px-4 py-2">
+                              <select
+                                value={editWindowForm.window_type}
+                                onChange={(e) => setEditWindowForm({ ...editWindowForm, window_type: e.target.value as 'available' | 'focus' | 'blocked' })}
+                                className="rounded bg-bg border border-border px-2 py-1 text-body text-text-primary outline-none focus:border-border-focus"
+                              >
+                                <option value="available">Available</option>
+                                <option value="focus">Focus</option>
+                                <option value="blocked">Blocked</option>
+                              </select>
+                            </td>
+                            <td className="px-4 py-2">
+                              <div className="flex items-center justify-end gap-2">
+                                <button
+                                  onClick={handleUpdateWindow}
+                                  className="text-success hover:text-success/80"
+                                  title="Save changes"
+                                >
+                                  <Check className="h-3.5 w-3.5" />
+                                </button>
+                                <button
+                                  onClick={() => setEditingWindowId(null)}
+                                  className="text-text-tertiary hover:text-text-secondary"
+                                  title="Cancel"
+                                >
+                                  <X className="h-3.5 w-3.5" />
+                                </button>
+                              </div>
+                            </td>
+                          </>
+                        ) : (
+                          <>
+                            <td className="px-4 font-mono text-body text-text-secondary">
+                              {toIsoLocalMinute(w.start_at)}
+                            </td>
+                            <td className="px-4 font-mono text-body text-text-secondary">
+                              {toIsoLocalMinute(w.end_at)}
+                            </td>
+                            <td className="px-4">
+                              <Badge variant={w.window_type === 'available' ? 'success' : w.window_type === 'focus' ? 'accent' : 'error'}>
+                                {w.window_type}
+                              </Badge>
+                            </td>
+                            <td className="px-4">
+                              <div className="flex items-center justify-end gap-2">
+                                <button
+                                  onClick={() => startEditWindow(w)}
+                                  className="text-text-tertiary hover:text-text-secondary"
+                                  title="Edit window"
+                                >
+                                  <Pencil className="h-3.5 w-3.5" />
+                                </button>
+                                <button
+                                  onClick={() => handleDeleteWindow(w.id)}
+                                  className="text-error hover:text-error/80"
+                                  title="Delete window"
+                                >
+                                  <Trash2 className="h-3.5 w-3.5" />
+                                </button>
+                              </div>
+                            </td>
+                          </>
+                        )}
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </div>
+
+          {/* Slot checker */}
+          <div>
+            <h2 className="text-heading font-medium text-text-primary mb-3">Check slots</h2>
+            <div className="rounded border border-border bg-surface p-4 space-y-3">
+              <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+                <div>
+                  <label className="block text-label uppercase text-text-tertiary mb-1">From</label>
+                  <input
+                    type="text"
+                    value={from}
+                    onChange={(e) => setFrom(e.target.value)}
+                    placeholder="2026-05-13 09:00"
+                    className="w-full rounded bg-bg border border-border px-3 py-1.5 font-mono text-body text-text-primary outline-none focus:border-border-focus"
+                  />
+                </div>
+                <div>
+                  <label className="block text-label uppercase text-text-tertiary mb-1">To</label>
+                  <input
+                    type="text"
+                    value={to}
+                    onChange={(e) => setTo(e.target.value)}
+                    placeholder="2026-05-13 17:00"
+                    className="w-full rounded bg-bg border border-border px-3 py-1.5 font-mono text-body text-text-primary outline-none focus:border-border-focus"
+                  />
+                </div>
+                <div>
+                  <label className="block text-label uppercase text-text-tertiary mb-1">Duration (min)</label>
+                  <input
+                    type="number"
+                    value={duration}
+                    onChange={(e) => setDuration(Number(e.target.value))}
+                    min={1}
+                    max={480}
+                    className="w-full rounded bg-bg border border-border px-3 py-1.5 text-body text-text-primary outline-none focus:border-border-focus"
+                  />
+                </div>
+              </div>
+              <button
+                onClick={handleCheckSlots}
+                disabled={checking}
+                className="rounded bg-accent text-white px-3 py-1.5 text-body font-medium hover:bg-accent-hover transition-colors disabled:opacity-40"
+              >
+                {checking ? 'Checking...' : 'Check availability'}
+              </button>
+            </div>
+
+            {slots.length > 0 && (
+              <div className="mt-3 overflow-x-auto rounded border border-border bg-surface dark-scroll">
+                <div className="border-b border-border px-4 py-3">
+                  <h3 className="text-body font-medium text-text-primary">Available slots</h3>
+                </div>
+                <table className="w-full min-w-[700px]">
+                  <thead>
+                    <tr className="border-b border-border bg-surface text-label uppercase text-text-tertiary">
+                      <th className="text-left px-4 py-2 font-medium">Slot</th>
+                      <th className="text-left px-4 py-2 font-medium">Confidence</th>
+                      <th className="text-left px-4 py-2 font-medium">Competition</th>
+                      <th className="text-left px-4 py-2 font-medium"></th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {slots.map((slot, i) => (
+                      <tr key={i} className="border-b border-border h-9 hover:bg-surface-raised transition-colors duration-150">
+                        <td className="px-4 font-mono text-body text-text-secondary">
+                          {formatSlotRange(slot.start, slot.end)}
+                        </td>
+                        <td className="px-4">
+                          <Badge variant={slot.confidence > 0.7 ? 'success' : slot.confidence > 0.4 ? 'warning' : 'error'}>
+                            {Math.round(slot.confidence * 100)}%
+                          </Badge>
+                        </td>
+                        <td className="px-4 font-mono text-body text-text-tertiary">
+                          {slot.competing_holds_count} competing holds
+                        </td>
+                        <td className="px-4">
+                          <button
+                            onClick={() => handleBookSlot(slot.start, slot.end)}
+                            className="text-body text-accent hover:text-accent-hover"
+                          >
+                            Book
+                          </button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Right: Preferences panel */}
+        <div className="space-y-6">
+          <div>
+            <h2 className="text-heading font-medium text-text-primary mb-3">Preferences</h2>
+            {prefs ? (
+              <div className="rounded border border-border bg-surface p-4 space-y-4">
+                <div>
+                  <label className="block text-label uppercase text-text-tertiary mb-1">
+                    Buffer after (min)
+                  </label>
+                  <input
+                    type="range"
+                    min={0}
+                    max={60}
+                    step={5}
+                    value={bufferDraft.buffer_minutes_after}
+                    onChange={(e) => {
+                      const value = Number(e.target.value);
+                      setBufferDraft((current) => ({ ...current, buffer_minutes_after: value }));
+                      schedulePreferenceUpdate({ buffer_minutes_after: value });
+                    }}
+                    className="w-full accent-accent"
+                  />
+                  <span className="font-mono text-body text-text-secondary">{bufferDraft.buffer_minutes_after} min</span>
+                </div>
+                <div>
+                  <label className="block text-label uppercase text-text-tertiary mb-1">
+                    Buffer before (min)
+                  </label>
+                  <input
+                    type="range"
+                    min={0}
+                    max={60}
+                    step={5}
+                    value={bufferDraft.buffer_minutes_before}
+                    onChange={(e) => {
+                      const value = Number(e.target.value);
+                      setBufferDraft((current) => ({ ...current, buffer_minutes_before: value }));
+                      schedulePreferenceUpdate({ buffer_minutes_before: value });
+                    }}
+                    className="w-full accent-accent"
+                  />
+                  <span className="font-mono text-body text-text-secondary">{bufferDraft.buffer_minutes_before} min</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <label className="text-body text-text-secondary">Back-to-back</label>
+                  <button
+                    onClick={() => handleUpdatePrefs({ allow_back_to_back: !prefs.allow_back_to_back })}
+                    className={`w-10 h-5 rounded-full transition-colors ${
+                      prefs.allow_back_to_back ? 'bg-accent' : 'bg-border'
+                    }`}
+                  >
+                    <div
+                      className={`h-4 w-4 rounded-full bg-white transition-transform ${
+                        prefs.allow_back_to_back ? 'translate-x-5' : 'translate-x-0.5'
+                      }`}
+                    />
+                  </button>
+                </div>
+                <div>
+                  <label className="block text-label uppercase text-text-tertiary mb-1">
+                    Booking window
+                  </label>
+                  <input
+                    type="number"
+                    min={1}
+                    max={365}
+                    value={prefs.booking_window_days}
+                    onChange={(e) => handleUpdatePrefs({ booking_window_days: Number(e.target.value) })}
+                    className="w-full rounded bg-bg border border-border px-3 py-1.5 text-body text-text-primary outline-none focus:border-border-focus"
+                  />
+                  <span className="mt-1 block font-mono text-body text-text-secondary">
+                    {prefs.booking_window_days} days
+                  </span>
+                </div>
+                <div className="border-t border-border pt-4">
+                  <div className="mb-2 flex items-center justify-between">
+                    <label className="text-label uppercase text-text-tertiary">Focus blocks</label>
+                    <button onClick={addFocusBlock} className="text-body text-accent hover:text-accent-hover">
+                      Add
+                    </button>
+                  </div>
+                  <div className="space-y-2">
+                    {prefs.focus_blocks.length === 0 ? (
+                      <p className="text-body text-text-tertiary">No focus blocks.</p>
+                    ) : (
+                      prefs.focus_blocks.map((block, index) => (
+                        <div className="grid grid-cols-[1fr_1fr_auto] gap-2 sm:grid-cols-[72px_1fr_1fr_auto]" key={`${block.weekday}-${block.start_time}-${index}`}>
+                          <select
+                            value={block.weekday}
+                            onChange={(e) => updateFocusBlock(index, { ...block, weekday: Number(e.target.value) })}
+                            className="col-span-3 rounded bg-bg border border-border px-2 py-1 text-body text-text-primary outline-none focus:border-border-focus sm:col-span-1"
+                          >
+                            {weekdayLabels.map((label, value) => (
+                              <option key={label} value={value}>{label}</option>
+                            ))}
+                          </select>
+                          <input
+                            type="time"
+                            value={block.start_time}
+                            onChange={(e) => updateFocusBlock(index, { ...block, start_time: e.target.value })}
+                            className="rounded bg-bg border border-border px-2 py-1 text-body text-text-primary outline-none focus:border-border-focus"
+                          />
+                          <input
+                            type="time"
+                            value={block.end_time}
+                            onChange={(e) => updateFocusBlock(index, { ...block, end_time: e.target.value })}
+                            className="rounded bg-bg border border-border px-2 py-1 text-body text-text-primary outline-none focus:border-border-focus"
+                          />
+                          <button
+                            onClick={() => removeFocusBlock(index)}
+                            className="text-error hover:text-error/80"
+                            title="Remove focus block"
+                          >
+                            <Trash2 className="h-3.5 w-3.5" />
+                          </button>
+                        </div>
+                      ))
+                    )}
+                  </div>
+                </div>
+                <div className="border-t border-border pt-4">
+                  <label className="block text-label uppercase text-text-tertiary mb-2">
+                    Priority over agents
+                  </label>
+                  <div className="space-y-2">
+                    {agents.filter((agent) => agent.id !== selectedAgent).length === 0 ? (
+                      <p className="text-body text-text-tertiary">Create another agent to set overrides.</p>
+                    ) : (
+                      agents.filter((agent) => agent.id !== selectedAgent).map((agent) => (
+                        <label key={agent.id} className="flex items-center justify-between rounded border border-border bg-bg px-3 py-2">
+                          <span className="text-body text-text-secondary">{agent.name}</span>
+                          <input
+                            type="checkbox"
+                            checked={prefs.priority_over_agents.includes(agent.id)}
+                            onChange={() => togglePriorityOverAgent(agent.id)}
+                            className="h-4 w-4 accent-accent"
+                          />
+                        </label>
+                      ))
+                    )}
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <p className="text-body text-text-tertiary">Select an agent to view preferences.</p>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <section className="mt-6">
+        <h2 className="text-heading font-medium text-text-primary mb-3">Recent activity - {selectedAgentName}</h2>
+        {recentActivity.length === 0 ? (
+          <div className="rounded border border-border bg-surface p-4 text-body text-text-tertiary">
+            No slot checks or claims observed for this agent yet.
+          </div>
+        ) : (
+          <div className="overflow-x-auto rounded border border-border dark-scroll">
+            <table className="w-full min-w-[760px]">
+              <thead>
+                <tr className="border-b border-border bg-surface text-label uppercase text-text-tertiary">
+                  <th className="text-left px-4 py-2 font-medium">Time</th>
+                  <th className="text-left px-4 py-2 font-medium">Action</th>
+                  <th className="text-left px-4 py-2 font-medium">Outcome</th>
+                </tr>
+              </thead>
+              <tbody>
+                {recentActivity.map((event) => (
+                  <tr key={event.id} className="border-b border-border h-9 hover:bg-surface-raised">
+                    <td className="px-4 font-mono text-body text-text-tertiary">
+                      {toIsoLocalMinute(event.created_at)}
+                    </td>
+                    <td className="px-4 text-body text-text-secondary">
+                      {activitySummary(event)}
+                    </td>
+                    <td className="px-4">
+                      <Badge variant={event.status === 'success' ? 'success' : 'error'}>
+                        {event.error_code || event.status_code || event.status}
+                      </Badge>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}