@graph8/sdk 0.361.0 → 0.370.0

package/blocks/analytics/components/report-detail.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+/**
+ * ReportDetail: everything about one saved custom-object report: its definition (object, measure, grouping, filters,
+ * chart type, visibility, revision, owner dates), the latest result table, and the actions Run again and Delete.
+ *
+ * SDK operations, in order:
+ *   1. GET    /reports/{id}          (reports.getObjectReportApi)       read    the definition
+ *   2. POST   /reports/{id}/execute  (reports.executeObjectReportApi)   write   run it (creates a run record, sends nothing); runs once on open
+ *   3. DELETE /reports/{id}          (reports.archiveObjectReportApi)   DESTRUCTIVE -> ConfirmSpendDialog
+ * Editing happens in ReportBuilder (`reportId`). Preview and execute share the org's report-run slots (429 `too_many_report_runs`).
+ */
+import { useEffect, useState } from "react";
+import { Button, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Delete, g8Get, g8Post } from "@/g8/lib/g8-client";
+import { reportBody, type ReportResultData, type SavedReport } from "../lib/analytics-types";
+import { ResultTable } from "./report-builder";
+
+export interface ReportDetailProps {
+  reportId: string;
+  /** Called after the report was deleted. */
+  onDeleted?: () => void;
+  /** A result the host already holds (kept across tab switches). While set, opening does not run the report again. */
+  result?: ReportResultData | null;
+  /** Called with every fresh result, so the host can keep it. */
+  onResult?: (result: ReportResultData | null) => void;
+  className?: string;
+}
+
+type Cfg = { measures?: Array<Record<string, unknown>>; group_by?: Array<Record<string, unknown>>; filters?: unknown[] };
+
+const measureText = (m: Record<string, unknown> | undefined): string => (m ? `${String(m.kind)}${m.attribute_slug ? ` of ${String(m.attribute_slug)}` : ""}` : "");
+const groupText = (g: Record<string, unknown> | undefined): string => (g ? (g.kind === "created_at" ? `created date by ${String(g.grain ?? "month")}` : String(g.attribute_slug ?? "")) : "None");
+
+export function ReportDetail({ reportId, onDeleted, result: given, onResult, className }: ReportDetailProps) {
+  const [confirming, setConfirming] = useState(false);
+  const [own, setOwn] = useState<ReportResultData | null>(null);
+  const result = given ?? own;
+  const setResult = (r: ReportResultData | null) => { setOwn(r); onResult?.(r); };
+  const report = useG8Query(async (signal) => reportBody<SavedReport>(await g8Get(`/reports/${encodeURIComponent(reportId)}`, undefined, { signal })), [reportId]);
+  const run = useG8Mutation(async () => { const out = reportBody<ReportResultData>(await g8Post(`/reports/${encodeURIComponent(reportId)}/execute`, {})); setResult(out); return out; });
+  const remove = useG8Mutation(async () => { await g8Delete(`/reports/${encodeURIComponent(reportId)}`); }, { onSuccess: () => { setConfirming(false); onDeleted?.(); }, onError: () => setConfirming(false) });
+
+  // A different report starts clean; it runs once on open unless the host already holds a result.
+  useEffect(() => { run.reset(); if (!given) void run.mutate(undefined); }, [reportId]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const r = report.data;
+  const cfg = (r?.config ?? {}) as Cfg;
+  if (report.error) return <ApiError error={report.error} title="Could not load the report" onRetry={() => void report.refetch()} />;
+  if (!r) return <Skeleton className="h-40 w-full" aria-label="Loading report" />;
+
+  return (
+    <div className={`space-y-4 ${className ?? ""}`} data-testid="report-detail">
+      <div className="flex flex-wrap items-center gap-2">
+        <StatusPill tone={r.visibility === "private" ? "neutral" : "info"}>{r.visibility}</StatusPill>
+        <span className="text-xs text-muted-foreground">Revision {r.revision}</span>
+        <div className="ml-auto flex gap-2">
+          <Button size="sm" variant="outline" loading={run.loading} onClick={() => void run.mutate(undefined)}>Run again</Button>
+          {r.can_delete ? <Button size="sm" variant="ghost" onClick={() => setConfirming(true)}>Delete</Button> : null}
+        </div>
+      </div>
+      <KeyValueList columns={2} items={[
+        { label: "Object", value: r.source.plural_noun, mono: false },
+        { label: "Object slug", value: r.source.slug, mono: true },
+        { label: "Chart", value: r.chart_type },
+        { label: "Measure", value: (cfg.measures ?? []).map(measureText).join(", ") || "count" },
+        { label: "Grouped by", value: (cfg.group_by ?? []).map(groupText).join(", ") || "None" },
+        { label: "Filters", value: (cfg.filters ?? []).length ? `${(cfg.filters ?? []).length} applied` : "None" },
+      ]} />
+      {run.error ? <ApiError error={run.error} title="Could not run the report" onRetry={() => void run.mutate(undefined)} /> : null}
+      {run.loading && !result ? <Skeleton className="h-24 w-full" aria-label="Running report" /> : null}
+      {result ? <ResultTable result={result} /> : null}
+      {remove.error ? <ApiError error={remove.error} title="Could not delete the report" /> : null}
+      <ConfirmSpendDialog open={confirming} tier="destructive" title={`Delete "${r.title}"?`} description="The saved report is removed for everyone who can see it. The underlying records are not touched."
+        confirmLabel="Delete report" affected={1} confirming={remove.loading} onConfirm={() => void remove.mutate(undefined)} onCancel={() => setConfirming(false)} />
+    </div>
+  );
+}

package/blocks/analytics/components/trend-chart.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+/**
+ * TrendChart: a daily line chart for one outbound channel (email, calls or meetings), drawn with the kit TimeSeriesChart (recharts).
+ *
+ * SDK operations (pick the channel):
+ *   channel "email":    GET /analytics/outbound/email-metrics/trend?days=    (analytics.getEmailTrend)    read   rows { date, sent, replied, ... }
+ *   channel "calls":    GET /analytics/outbound/call-metrics/trend?days=     (analytics.getCallTrend)     read   rows { date, dials, connected, ... }
+ *   channel "meetings": GET /analytics/outbound/meeting-metrics/trend?days=  (analytics.getMeetingTrend)  read   rows { date, booked, cancelled, held, ... }
+ * Two series per channel (the volume and the outcome). Dates are plain `YYYY-MM-DD` days and are shown as UTC days.
+ */
+import { Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { TimeSeriesChart } from "@/g8/components/screen/time-series-chart";
+import { useReport } from "../hooks/use-report";
+import { formatNumber } from "../lib/analytics-types";
+
+export type TrendChannel = "email" | "calls" | "meetings";
+
+export const TREND_SERIES: Record<TrendChannel, { path: string; keys: [string, string]; labels: [string, string] }> = {
+  email: { path: "/analytics/outbound/email-metrics/trend", keys: ["sent", "replied"], labels: ["Sent", "Replied"] },
+  calls: { path: "/analytics/outbound/call-metrics/trend", keys: ["dials", "connected"], labels: ["Dials", "Connected"] },
+  meetings: { path: "/analytics/outbound/meeting-metrics/trend", keys: ["booked", "held"], labels: ["Booked", "Held"] },
+};
+
+export type TrendRow = { date?: string } & Record<string, unknown>;
+
+/** Daily values of one key, in date order. */
+export function seriesOf(rows: TrendRow[] | undefined, key: string): number[] {
+  return (Array.isArray(rows) ? rows : []).map((r) => Number(r[key] ?? 0) || 0);
+}
+
+export interface TrendChartProps {
+  channel?: TrendChannel;
+  days?: number;
+  className?: string;
+}
+
+export function TrendChart({ channel = "email", days = 30, className }: TrendChartProps) {
+  const spec = TREND_SERIES[channel];
+  const { data, loading, error, refetch } = useReport<TrendRow[]>(spec.path, { days });
+  const rows = Array.isArray(data) ? data : [];
+  const a = seriesOf(rows, spec.keys[0]);
+  const b = seriesOf(rows, spec.keys[1]);
+  const total = (v: number[]) => v.reduce((x, y) => x + y, 0);
+
+  if (error) return <ApiError error={error} title="Could not load the trend" onRetry={() => void refetch()} />;
+  if (loading && !data) return <Skeleton className="h-48 w-full" aria-label="Loading trend" />;
+  if (rows.length === 0 || total(a) === 0) return <EmptyState className={className} title="No activity in this window" description="Daily numbers appear here as emails, calls and meetings are recorded." />;
+
+  return (
+    <figure className={className} aria-label={`${channel} trend`}>
+      <div className="mb-2 flex flex-wrap gap-4 text-xs text-muted-foreground">
+        <span>{spec.labels[0]} {formatNumber(total(a))}</span>
+        <span>{spec.labels[1]} {formatNumber(total(b))}</span>
+      </div>
+      <TimeSeriesChart data={rows} xKey="date" kind="line" height={200}
+        series={[{ key: spec.keys[0], label: spec.labels[0] }, { key: spec.keys[1], label: spec.labels[1], tone: "positive" }]} />
+    </figure>
+  );
+}

package/blocks/appointments/README.md

@@ -4,6 +4,25 @@ Event types, weekly working hours, a booking page, a list of booked and recorded
 rep takes on a booking (confirm, cancel, add a note). Install with `npx @graph8/sdk add appointments`
 (depends on `crm`).
 
+## Screens
+
+- `MeetingsScreen` (`components/meetings-screen.tsx`): `<MeetingsScreen />`. Upcoming, Past, Cancelled and Recorded
+  meetings; headline numbers (upcoming, awaiting approval); open a booking (deep link `?sel=booking:<uid>`) to accept or
+  decline a pending one, add an internal note or cancel (all confirmed, they email attendees), or open a recorded
+  meeting for its summary, topics, action items and transcript. **Schedule a meeting** picks an event type, a day and a
+  time and books it for an attendee (external, confirmed). Calendar sign-in is only possible in the graph8 app, so the
+  screen shows a link-out card (`connectCalendarUrl`).
+- `SchedulingScreen` (`components/scheduling-screen.tsx`): `<SchedulingScreen />`. Event types tab: the list (from
+  `GET /event-types`), create, open one (`?id=<event type id>`) to edit or delete it (confirmed) and to try its booking
+  page. Working hours tab: weekly hours, date overrides and connected calendars for a schedule.
+- Slots for cross-block glue, all optional: `renderRowActions`, `renderDetailActions`, `extraDetailTabs`,
+  `toolbarActions`.
+
+The older note that there is no list-event-types operation is out of date: `GET /event-types` (`useEventTypes`) lists
+them, so ids no longer have to be stored. It needs the `campaigns:read` scope and `event-types` in the proxy
+`allowedPrefixes`, next to `appointments` and `inbox`.
+
+
 ## The flow, in order
 
 1. **Hours** (`AvailabilityEditor`): `GET /appointments/schedules` -> pick `schedule.id` ->
@@ -30,7 +49,7 @@ booking), `booking.uid` (list -> detail -> confirm/cancel/notes), recorded `meet
   not in the API. `AvailabilityEditor` shows connection state and links out via `connectCalendarUrl`.
 - Use an API key minted by the host. Appointments act as a person; an organisation key can read and
   list slots, but anything personal (profile, slot reservation) requires a personal key.
-- Scopes: `meetings:read`, `meetings:write`, `meetings:run`, `meetings:delete` (cancel a booking, delete an event type).
+- Scopes: `meetings:read`, `meetings:write`, `meetings:run`, `meetings:delete` (cancel a booking, delete an event type), plus `campaigns:read` for the event-type list.
 
 ## Defaults (the agent does not need to ask)
 
@@ -70,6 +89,7 @@ with the full API key.
 | `appointments.addBookingNote` | POST /appointments/bookings/{uid}/notes | external | MeetingDetail |
 | `meetings.listMeetings` | GET /inbox/meetings | read | MeetingList |
 | `meetings.getMeeting` | GET /inbox/meetings/{id} | read | MeetingDetail |
+| `gtmLaunchHelpers.listEventTypes` | GET /event-types | read | useEventTypes (both screens) |
 
 ## Recipes (server side)
 

package/blocks/appointments/block.json

@@ -27,6 +27,7 @@
     "get_meeting_inbox_meetings__meeting_id__get",
     "list_bookings_appointments_bookings_get",
     "list_calendars_appointments_calendars_get",
+    "list_event_types_event_types_get",
     "list_meetings_inbox_meetings_get",
     "list_schedules_appointments_schedules_get",
     "update_availability_appointments_schedules__schedule_id__availability_patch",
@@ -107,6 +108,36 @@
         "external",
         "destructive"
       ]
+    },
+    {
+      "name": "MeetingsScreen",
+      "file": "components/meetings-screen.tsx",
+      "purpose": "Finished meetings product: upcoming, past, cancelled and recorded meetings with detail, approvals, notes and a schedule-a-meeting flow.",
+      "operations": [
+        "list_bookings_appointments_bookings_get"
+      ],
+      "tiers": [
+        "read"
+      ]
+    },
+    {
+      "name": "SchedulingScreen",
+      "file": "components/scheduling-screen.tsx",
+      "purpose": "Finished scheduling product: event types with settings and booking-page preview, plus weekly working hours and calendar status.",
+      "operations": [],
+      "tiers": []
+    },
+    {
+      "name": "EventTypeOverview",
+      "file": "components/event-type-related.tsx",
+      "purpose": "Read views of one event type: every field (EventTypeOverview) and the bookings made through it (EventTypeBookings, with MeetingDetail in a sheet).",
+      "operations": [
+        "get_event_type_appointments_event_types__event_type_id__get",
+        "list_bookings_appointments_bookings_get"
+      ],
+      "tiers": [
+        "read"
+      ]
     }
   ],
   "hooks": [
@@ -125,6 +156,14 @@
       "operations": [
         "get_available_slots_appointments_slots_get"
       ]
+    },
+    {
+      "name": "useEventTypes",
+      "file": "hooks/use-event-types.ts",
+      "purpose": "The org's bookable event types (the list operation the editor needs).",
+      "operations": [
+        "list_event_types_event_types_get"
+      ]
     }
   ],
   "lib": [
@@ -174,12 +213,13 @@
     },
     {
       "id": "meetings-scopes",
-      "description": "Key scopes meetings:read, meetings:write, meetings:run (booking, confirm, notes are tier external) and meetings:delete (cancel, delete event type).",
+      "description": "Key scopes meetings:read, meetings:write, meetings:run (booking, confirm, notes are tier external) and meetings:delete (cancel, delete event type), plus campaigns:read for the event-type list (GET /event-types).",
       "where": "api",
       "verify": "`g8.api.me.describeCurrentKey()` lists the meetings:* scopes."
     }
   ],
   "scopes": [
+    "campaigns:read",
     "meetings:delete",
     "meetings:read",
     "meetings:run",
@@ -213,6 +253,7 @@
     }
   ],
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "lucide-react": ">=0.400.0"
   }
 }

package/blocks/appointments/components/availability-editor.tsx

@@ -23,6 +23,7 @@ import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
 import { useG8Query } from "@/g8/hooks/use-g8-query";
 import { useSchedules } from "../hooks/use-schedules";
 import { WEEKDAYS, listOf, toHHMM, unwrap, type AvailabilityRule, type Schedule, type TimeWindow } from "../lib/appointments-types";
+import { useBrand } from "@/g8/hooks/use-brand";
 
 export interface AvailabilityEditorProps {
   /** Schedule to edit; defaults to the org's default schedule. */
@@ -72,6 +73,7 @@ function WindowRow({ window: w, onChange, onRemove }: { window: TimeWindow; onCh
 }
 
 function CalendarPanel({ connectUrl }: { connectUrl: string }) {
+  const brand = useBrand();
   const cals = useG8Query(async (signal) => listOf<CalendarRow>(await g8Get("/appointments/calendars", undefined, { signal }), "calendars"), []);
   return (
     <section aria-label="Calendars" className="space-y-2 rounded-lg border p-3 text-sm">
@@ -84,22 +86,26 @@ function CalendarPanel({ connectUrl }: { connectUrl: string }) {
       ))}
       {!cals.loading && !cals.error && (cals.data ?? []).length === 0 ? <p className="text-muted-foreground">No calendar connected, so busy time is not checked.</p> : null}
       <a className="underline" href={connectUrl} target="_blank" rel="noreferrer">
-        Connect or manage calendars in graph8
+        Connect or manage calendars in {brand.linkLabel}
       </a>
     </section>
   );
 }
 
-export function AvailabilityEditor({ scheduleId, connectCalendarUrl = "https://app.graph8.com", onSaved, className }: AvailabilityEditorProps) {
+export function AvailabilityEditor({ scheduleId, connectCalendarUrl: connectCalendarUrlProp, onSaved, className }: AvailabilityEditorProps) {
+  const brand = useBrand();
+  const connectCalendarUrl = connectCalendarUrlProp ?? brand.appUrl;
   const { schedules, loading: loadingSchedules, error: schedulesError } = useSchedules();
   const [picked, setPicked] = useState<number | undefined>(scheduleId);
   const activeId = picked ?? schedules[0]?.id;
   const [week, setWeek] = useState<Week>({});
   const [overrides, setOverrides] = useState<Override[]>([]);
   const [newDate, setNewDate] = useState("");
+  /** The schedule whose hours are in the form. Save is offered only for a schedule that has loaded, never over a blank week. */
+  const [appliedFor, setAppliedFor] = useState<number | undefined>(undefined);
 
   // Stale context: switching schedule must not show (or save!) the previous schedule's hours.
-  useEffect(() => { setWeek({}); setOverrides([]); }, [activeId]);
+  useEffect(() => { setWeek({}); setOverrides([]); setAppliedFor(undefined); }, [activeId]);
 
   const availability = useG8Query(
     async (signal) => unwrap<Schedule>(await g8Get(`/appointments/schedules/${activeId}/availability`, undefined, { signal })),
@@ -109,9 +115,10 @@ export function AvailabilityEditor({ scheduleId, connectCalendarUrl = "https://a
   useEffect(() => {
     const data = availability.data;
     if (!data) return;
+    setAppliedFor(activeId);
     setWeek(toWeek(data.availability ?? []));
     setOverrides((data.overrides ?? []).filter((o) => o.date).map((o) => ({ date: o.date as string, start: toHHMM(o.start_time), end: toHHMM(o.end_time, "17:00") })));
-  }, [availability.data]);
+  }, [availability.data, activeId]);
 
   const save = useG8Mutation(
     async () =>
@@ -122,10 +129,11 @@ export function AvailabilityEditor({ scheduleId, connectCalendarUrl = "https://a
     { onSuccess: () => onSaved?.() },
   );
 
+  const ready = appliedFor === activeId && !availability.error && !availability.loading;
   const setDay = (day: number, windows: TimeWindow[]) => setWeek((w) => ({ ...w, [day]: windows }));
   if (schedulesError) return <ApiError error={schedulesError} title="Could not load schedules" />;
   if (loadingSchedules) return <Skeleton className="h-64 w-full" aria-label="Loading schedules" />;
-  if (activeId == null) return <EmptyState title="No schedule yet" description="Create a working-hours schedule in graph8 (or POST /appointments/schedules), then edit it here." />;
+  if (activeId == null) return <EmptyState title="No schedule yet" description={`Create a working-hours schedule in ${brand.linkLabel} (or POST /appointments/schedules), then edit it here.`} />;
 
   return (
     <div className={`space-y-4 ${className ?? ""}`}>
@@ -141,6 +149,8 @@ export function AvailabilityEditor({ scheduleId, connectCalendarUrl = "https://a
       <p className="text-sm text-muted-foreground">Times are wall-clock hours in the schedule's time zone: {schedules.find((x) => x.id === activeId)?.time_zone ?? "the schedule's zone"}.</p>
       {availability.error ? <ApiError error={availability.error} title="Could not load availability" onRetry={() => void availability.refetch()} /> : null}
 
+      {!ready ? (availability.error ? null : <Skeleton className="h-48 w-full" aria-label="Loading availability" />) : (
+      <>
       <div className="space-y-2">
         {WEEKDAYS.map(({ day, label }) => {
           const windows = week[day] ?? [];
@@ -186,6 +196,8 @@ export function AvailabilityEditor({ scheduleId, connectCalendarUrl = "https://a
       <Button onClick={() => void save.mutate(undefined)} loading={save.loading}>
         Save availability
       </Button>
+      </>
+      )}
       <CalendarPanel connectUrl={connectCalendarUrl} />
     </div>
   );

package/blocks/appointments/components/event-type-editor.tsx

@@ -116,7 +116,8 @@ export function EventTypeEditor({ eventTypeId, onSaved, onDeleted, className }:
   const valid = form.title.trim().length > 0 && form.length >= 5 && (slugTouched ? form.slug.trim().length > 0 : true);
 
   if (existing.error) return <ApiError error={existing.error} title="Could not load the event type" onRetry={() => void existing.refetch()} />;
-  if (eventTypeId != null && existing.loading && !existing.data) return <Skeleton className="h-64 w-full" aria-label="Loading event type" />;
+  // Also while the NEXT event type loads (the hook keeps the previous one's data meanwhile): the form is blank then, and saving it would blank the record.
+  if (eventTypeId != null && (existing.loading || !existing.data)) return <Skeleton className="h-64 w-full" aria-label="Loading event type" />;
 
   return (
     <form

package/blocks/appointments/components/event-type-related.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+/**
+ * Read views of one event type, as tabs of its full detail: Overview (every field) and Bookings (who booked it).
+ *
+ * SDK operations, in order:
+ *   EventTypeOverview: GET /appointments/event-types/{id}                          (appointments.getEventType)  read
+ *   EventTypeBookings: GET /appointments/bookings?event_type_ids=&skip=&take=      (appointments.listBookings)  read
+ *                      then MeetingDetail in a side sheet for the booking you open (confirm, cancel and notes
+ *                      are external or destructive there and go through ConfirmSpendDialog).
+ */
+import { useState } from "react";
+import { CalendarClock } from "lucide-react";
+import { Button, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { StatusPill, humanizeStatus, toneForStatus } from "@/g8/components/screen/status-pill";
+import { g8Get } from "@/g8/lib/g8-client";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { formatDateTime, listOf, unwrap, type Booking, type EventType } from "../lib/appointments-types";
+import { MeetingDetail } from "./meeting-detail";
+import { rowActivationProps } from "@/g8/hooks/use-row-activation";
+import { RecordLink } from "@/g8/components/screen/record-link";
+
+export function EventTypeOverview({ eventTypeId }: { eventTypeId: number }) {
+  const q = useG8Query(async (signal) => unwrap<EventType>(await g8Get(`/appointments/event-types/${eventTypeId}`, undefined, { signal })), [eventTypeId]);
+  if (q.error) return <ApiError error={q.error} title="Could not load the event type" onRetry={() => void q.refetch()} />;
+  if (!q.data) return <Skeleton className="h-32 w-full" aria-label="Loading event type" />;
+  const t = q.data;
+  return (
+    <SectionCard title="Details">
+      <KeyValueList columns={2} items={[
+        { label: "Title", value: t.title }, { label: "URL slug", value: t.slug ? `/${t.slug}` : null, mono: true }, { label: "Length", value: t.length ? `${t.length} minutes` : null },
+        { label: "Working hours", value: t.schedule?.name }, { label: "Minimum notice", value: t.minimum_booking_notice != null ? `${t.minimum_booking_notice} minutes` : null },
+        { label: "Host approval", value: t.requires_confirmation ? "Required" : "Not required" }, { label: "Visibility", value: t.hidden ? "Hidden" : "Bookable" },
+        { label: "Scheduling type", value: t.scheduling_type ?? "Single host" }, { label: "Description", value: t.description, wide: true },
+      ]} />
+    </SectionCard>
+  );
+}
+
+export function EventTypeBookings({ eventTypeId, pageSize = 20 }: { eventTypeId: number; pageSize?: number }) {
+  const [page, setPage] = useState(0);
+  const [open, setOpen] = useState<string | null>(null);
+  const q = useG8Query(async (signal) => listOf<Booking>(await g8Get("/appointments/bookings", { event_type_ids: String(eventTypeId), skip: page * pageSize, take: pageSize, sort_by: "start_time", sort_order: "desc" }, { signal }), "bookings"), [eventTypeId, page, pageSize]);
+  if (q.error) return <ApiError error={q.error} title="Could not load bookings" onRetry={() => void q.refetch()} />;
+  if (!q.data) return <Skeleton className="h-32 w-full" aria-label="Loading bookings" />;
+  if (q.data.length === 0 && page === 0) return <EmptyState icon={<CalendarClock className="size-8" />} title="No bookings yet" description="Bookings made through this event type appear here." />;
+  return (
+    <div className="space-y-3">
+      <Table>
+        <TableHeader><TableRow><TableHead>When</TableHead><TableHead>Attendees</TableHead><TableHead>Status</TableHead></TableRow></TableHeader>
+        <TableBody>
+          {q.data.map((b) => (
+            <TableRow key={b.uid} className="cursor-pointer" {...rowActivationProps(() => setOpen(b.uid))}>
+              <TableCell><RecordLink id={b.uid} onOpen={() => setOpen(b.uid)}>{formatDateTime(b.start_time)}</RecordLink></TableCell>
+              <TableCell className="max-w-64 truncate">{b.attendees.map((a) => a.name || a.email).join(", ") || "No attendees"}</TableCell>
+              <TableCell><StatusPill tone={toneForStatus(b.status)} dot>{humanizeStatus(b.status)}</StatusPill></TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      <div className="flex justify-end gap-2">
+        <Button size="sm" variant="outline" disabled={page === 0 || q.loading} onClick={() => setPage((p) => p - 1)}>Previous</Button>
+        <Button size="sm" variant="outline" disabled={q.data.length < pageSize || q.loading} onClick={() => setPage((p) => p + 1)}>Next</Button>
+      </div>
+      <Sheet open={open != null} onOpenChange={(o) => { if (!o) setOpen(null); }}>
+        <SheetContent className="w-full overflow-y-auto sm:max-w-xl">
+          <SheetHeader><SheetTitle>Booking</SheetTitle><SheetDescription>Accept, decline, note or cancel.</SheetDescription></SheetHeader>
+          {open ? <MeetingDetail selection={{ kind: "booking", id: open }} onChanged={() => void q.refetch()} /> : null}
+        </SheetContent>
+      </Sheet>
+    </div>
+  );
+}

package/blocks/appointments/components/meeting-list.tsx

@@ -19,14 +19,22 @@ import { EmptyState } from "@/g8/components/empty-state";
 import { g8Get } from "@/g8/lib/g8-client";
 import { useG8Query } from "@/g8/hooks/use-g8-query";
 import { formatDateTime, listOf, type Booking, type RecordedMeeting } from "../lib/appointments-types";
+import { rowActivationProps } from "@/g8/hooks/use-row-activation";
+import { RecordLink } from "@/g8/components/screen/record-link";
 
 export type MeetingView = "upcoming" | "past" | "cancelled" | "recorded";
 export type MeetingSelection = { kind: "booking"; id: string } | { kind: "meeting"; id: string };
 
 export interface MeetingListProps {
+  /** URL param the host screen reads for this record type. With it the name is a real link (Cmd-click opens it in a new tab); without it a plain button. */
+  linkParam?: string;
   onSelect?: (selection: MeetingSelection) => void;
   initialView?: MeetingView;
   pageSize?: number;
+  /** Change it to reload the current page (after a confirm, cancel or booking elsewhere on the screen). */
+  refreshKey?: number;
+  /** Mark this row as the open one. */
+  selectedId?: string | null;
   className?: string;
 }
 
@@ -54,7 +62,7 @@ function useDebouncedText(value: string, ms = 300): string {
   return v;
 }
 
-export function MeetingList({ onSelect, initialView = "upcoming", pageSize = 20, className }: MeetingListProps) {
+export function MeetingList({ linkParam, onSelect, initialView = "upcoming", pageSize = 20, refreshKey, selectedId, className }: MeetingListProps) {
   const [view, setView] = useState<MeetingView>(initialView);
   const [page, setPage] = useState(0);
   const [search, setSearch] = useState("");
@@ -71,7 +79,7 @@ export function MeetingList({ onSelect, initialView = "upcoming", pageSize = 20,
       const items = listOf<Booking>(env, "bookings");
       return { kind: "booking" as const, items, more: items.length === pageSize };
     },
-    [view, page, query, pageSize, now],
+    [view, page, query, pageSize, now, refreshKey],
   );
 
   const switchView = (next: MeetingView) => {
@@ -116,17 +124,17 @@ export function MeetingList({ onSelect, initialView = "upcoming", pageSize = 20,
           <TableBody>
             {result.kind === "booking"
               ? (result.items as Booking[]).map((b) => (
-                  <TableRow key={b.uid} className="cursor-pointer" onClick={() => onSelect?.({ kind: "booking", id: b.uid })}>
+                  <TableRow key={b.uid} data-state={selectedId === b.uid ? "selected" : undefined} className="cursor-pointer" {...(onSelect ? rowActivationProps(() => onSelect({ kind: "booking", id: b.uid })) : {})}>
                     <TableCell className="whitespace-nowrap">{formatDateTime(b.start_time)}</TableCell>
-                    <TableCell className="font-medium">{b.title || b.event_type_title || "Meeting"}</TableCell>
+                    <TableCell className="font-medium">{onSelect ? <RecordLink param={linkParam} id={`booking:${b.uid}`} onOpen={() => onSelect({ kind: "booking", id: b.uid })}>{b.title || b.event_type_title || "Meeting"}</RecordLink> : b.title || b.event_type_title || "Meeting"}</TableCell>
                     <TableCell className="max-w-64 truncate">{attendeeNames(b)}</TableCell>
                     <TableCell className="capitalize">{b.status}</TableCell>
                   </TableRow>
                 ))
               : (result.items as RecordedMeeting[]).map((m) => (
-                  <TableRow key={m.id} className="cursor-pointer" onClick={() => onSelect?.({ kind: "meeting", id: m.id })}>
+                  <TableRow key={m.id} data-state={selectedId === m.id ? "selected" : undefined} className="cursor-pointer" {...(onSelect ? rowActivationProps(() => onSelect({ kind: "meeting", id: m.id })) : {})}>
                     <TableCell className="whitespace-nowrap">{formatDateTime(m.start_time)}</TableCell>
-                    <TableCell className="font-medium">{m.subject || "Untitled meeting"}</TableCell>
+                    <TableCell className="font-medium">{onSelect ? <RecordLink param={linkParam} id={`meeting:${m.id}`} onOpen={() => onSelect({ kind: "meeting", id: m.id })}>{m.subject || "Untitled meeting"}</RecordLink> : m.subject || "Untitled meeting"}</TableCell>
                     <TableCell className="max-w-64 truncate">{m.transcript_summary || "No summary yet"}</TableCell>
                     <TableCell className="capitalize">{m.transcript_status ?? "none"}</TableCell>
                   </TableRow>