@graph8/sdk 0.362.0 → 0.373.0

package/blocks/agents/lib/skill-utils.ts

@@ -0,0 +1,91 @@
+"use client";
+
+/** Shapes and diffing for the skill library. Skills answer un-enveloped or enveloped, flat or under `action`; `skillOf` reads all of them. */
+import type { G8Envelope } from "@/g8/lib/g8-client";
+import { bodyOf } from "./agent-types";
+
+export interface SkillDetail {
+  action_id: string;
+  name: string;
+  description?: string | null;
+  category?: string | null;
+  runtime_type?: "llm" | "api" | string;
+  enabled?: boolean;
+  requires_approval?: boolean;
+  llm_config?: { model?: string; temperature?: number; max_tokens?: number; prompt_template?: string; prompt?: string } | null;
+  api_config?: { endpoint?: string; method?: string; headers?: Record<string, string> | null; body_template?: string | null; requires_auth?: boolean } | null;
+}
+
+export interface SkillDraft {
+  name: string;
+  description: string;
+  category: string;
+  enabled: boolean;
+  model: string;
+  prompt_template: string;
+  temperature: string;
+  max_tokens: string;
+  endpoint: string;
+  method: string;
+  headers: string;
+  body_template: string;
+  requires_auth: boolean;
+}
+
+export const BLANK_DRAFT: SkillDraft = { name: "", description: "", category: "", enabled: true, model: "", prompt_template: "", temperature: "0.7", max_tokens: "1000", endpoint: "", method: "POST", headers: "", body_template: "", requires_auth: false };
+export const HTTP_METHODS = ["GET", "POST", "PUT", "PATCH", "DELETE"] as const;
+
+export function skillOf(res: G8Envelope<unknown> | null | undefined): SkillDetail | undefined {
+  const b = bodyOf<{ action?: SkillDetail } & Partial<SkillDetail>>(res);
+  const s = (b.action ?? b) as SkillDetail;
+  return s && s.action_id ? s : undefined;
+}
+
+export function draftOf(s: SkillDetail): SkillDraft {
+  const l = s.llm_config ?? {}, a = s.api_config ?? {};
+  return {
+    name: s.name, description: s.description ?? "", category: s.category ?? "", enabled: s.enabled !== false,
+    model: l.model ?? "", prompt_template: l.prompt_template ?? l.prompt ?? "", temperature: String(l.temperature ?? 0.7), max_tokens: String(l.max_tokens ?? 1000),
+    endpoint: a.endpoint ?? "", method: a.method ?? "POST", headers: a.headers && Object.keys(a.headers).length ? JSON.stringify(a.headers, null, 2) : "", body_template: a.body_template ?? "", requires_auth: Boolean(a.requires_auth),
+  };
+}
+
+/** The headers textarea as an object; undefined when blank, null when it is not a JSON object of strings. */
+export function parseHeaders(text: string): Record<string, string> | undefined | null {
+  if (!text.trim()) return undefined;
+  try {
+    const v = JSON.parse(text) as unknown;
+    if (!v || typeof v !== "object" || Array.isArray(v) || !Object.values(v).every((x) => typeof x === "string")) return null;
+    return v as Record<string, string>;
+  } catch { return null; }
+}
+
+/**
+ * The PUT body: only what changed against the LOADED skill. A runtime config is sent whole when any field in it changed
+ * (voice validates it as a unit: a model and a prompt, or an endpoint).
+ */
+export function skillPatch(loaded: SkillDetail, d: SkillDraft): Record<string, unknown> {
+  const before = draftOf(loaded);
+  const changed = (...keys: (keyof SkillDraft)[]) => keys.some((k) => before[k] !== d[k]);
+  const out: Record<string, unknown> = {};
+  if (changed("name")) out.name = d.name.trim();
+  if (changed("description")) out.description = d.description.trim();
+  if (changed("category")) out.category = d.category.trim();
+  if (changed("enabled")) out.enabled = d.enabled;
+  if (loaded.runtime_type === "llm" && changed("model", "prompt_template", "temperature", "max_tokens")) {
+    out.llm_config = { model: d.model, prompt_template: d.prompt_template, temperature: Number(d.temperature), max_tokens: Number(d.max_tokens) };
+  }
+  if (loaded.runtime_type === "api" && changed("endpoint", "method", "headers", "body_template", "requires_auth")) {
+    const headers = parseHeaders(d.headers);
+    out.api_config = { endpoint: d.endpoint.trim(), method: d.method, body_template: d.body_template || undefined, requires_auth: d.requires_auth, ...(headers ? { headers } : {}) };
+  }
+  return out;
+}
+
+/** The POST body for a new skill. */
+export function newSkillBody(runtime: "llm" | "api", d: SkillDraft): Record<string, unknown> {
+  const base = { name: d.name.trim(), description: d.description.trim() || undefined, category: d.category.trim() || undefined, runtime_type: runtime };
+  if (runtime === "llm") return { ...base, llm_config: { model: d.model, prompt_template: d.prompt_template, temperature: Number(d.temperature), max_tokens: Number(d.max_tokens) } };
+  const headers = parseHeaders(d.headers);
+  return { ...base, api_config: { endpoint: d.endpoint.trim(), method: d.method, body_template: d.body_template || undefined, requires_auth: d.requires_auth, ...(headers ? { headers } : {}) } };
+}

package/blocks/agents/recipes/create-agent-and-attach-skill.ts

@@ -34,7 +34,7 @@ export async function buildAgent() {
     body: {
       name: "Summarise the lead",
       runtime_type: "llm",
-      llm_config: { prompt: "Summarise {contact_name} in two sentences for the sales team.", model: "gpt-4o-mini" },
+      llm_config: { model: "gpt-4o-mini", prompt_template: "Summarise {contact_name} in two sentences for the sales team." },
     },
   });
   const actionId = (skill as { action_id?: string }).action_id;

package/blocks/analytics/README.md

@@ -3,6 +3,19 @@
 Read-only outbound analytics (top-line numbers, rep ranking, funnels) plus a builder for saved custom-object
 reports. Depends only on the foundation. Install with `npx @graph8/sdk add analytics`.
 
+## Screens
+
+`AnalyticsScreen` (`components/analytics-screen.tsx`) is the finished dashboard; mount it as the page and you are done.
+
+- **Overview**: KPI strip (emails, reply rate, calls, meetings) with a daily sparkline and half-over-half change per
+  number, a daily trend chart you switch between email, calls and meetings, the meeting or revenue funnel, and the rep
+  leaderboard. One 7 / 30 / 90 day range drives every card; tab and range live in the URL (`?tab=`, `?days=`).
+- **Reports**: every saved report in a searchable list. Opening one (`?id=`, full page with `&view=full`) shows `ReportDetail`
+  (definition, latest result, Run again, Delete with confirmation) and an Edit tab (`ReportBuilder reportId`); **New report** opens the builder in a sheet.
+- Needs `analytics:read`; Reports also need `objects:read|write|delete` and the per-organisation reports switch.
+- Slot/props: `defaultDays`, `nameFor`, `objectSlug`, `toolbarActions`. New parts: `TrendChart` (on the kit TimeSeriesChart, three trend
+  operations); `Leaderboard` gained `hideRange`; `ReportBuilder` gained `reportId` and `hideList`; new `ReportDetail`.
+
 ## The flow, in order
 
 1. **Tiles** `GET /analytics/outbound/summary?days=` (`KpiTiles`): `emails_sent`, `delivery_rate`,

package/blocks/analytics/block.json

@@ -17,7 +17,11 @@
     "archive_object_report_api_reports__report_id__delete",
     "create_object_report_api_reports_post",
     "execute_object_report_api_reports__report_id__execute_post",
+    "get_call_trend_analytics_outbound_call_metrics_trend_get",
+    "get_email_trend_analytics_outbound_email_metrics_trend_get",
     "get_meeting_funnel_analytics_outbound_meeting_funnel_get",
+    "get_meeting_trend_analytics_outbound_meeting_metrics_trend_get",
+    "get_object_report_api_reports__report_id__get",
     "get_outbound_summary_analytics_outbound_summary_get",
     "get_sdr_leaderboard_analytics_outbound_sdr_activity_leaderboard_get",
     "get_team_conversion_funnel_analytics_team_conversion_funnel_get",
@@ -26,6 +30,45 @@
     "update_object_report_api_reports__report_id__patch"
   ],
   "components": [
+    {
+      "name": "TrendChart",
+      "file": "components/trend-chart.tsx",
+      "purpose": "Daily email, call or meeting line chart on the kit TimeSeriesChart.",
+      "operations": [
+        "get_email_trend_analytics_outbound_email_metrics_trend_get",
+        "get_call_trend_analytics_outbound_call_metrics_trend_get",
+        "get_meeting_trend_analytics_outbound_meeting_metrics_trend_get"
+      ],
+      "tiers": [
+        "read"
+      ]
+    },
+    {
+      "name": "ReportDetail",
+      "file": "components/report-detail.tsx",
+      "purpose": "One saved report in full: definition, latest result, run again, delete (confirmed).",
+      "operations": [
+        "get_object_report_api_reports__report_id__get",
+        "execute_object_report_api_reports__report_id__execute_post",
+        "archive_object_report_api_reports__report_id__delete"
+      ],
+      "tiers": [
+        "read",
+        "write",
+        "destructive"
+      ]
+    },
+    {
+      "name": "AnalyticsScreen",
+      "file": "components/analytics-screen.tsx",
+      "purpose": "Finished dashboard: KPI strip with sparklines, daily trend, funnel, rep leaderboard and a Reports tab, one range for all.",
+      "operations": [
+        "list_object_reports_api_reports_get"
+      ],
+      "tiers": [
+        "read"
+      ]
+    },
     {
       "name": "KpiTiles",
       "file": "components/kpi-tiles.tsx",
@@ -173,6 +216,7 @@
     }
   ],
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "lucide-react": ">=0.400.0"
   }
 }

package/blocks/analytics/components/analytics-screen.tsx

@@ -0,0 +1,222 @@
+"use client";
+
+/**
+ * AnalyticsScreen: the finished outbound dashboard. Two tabs.
+ *   Overview: KPI strip with a daily sparkline per number, a daily trend chart (email, calls or meetings), the
+ *             meeting or revenue funnel, and the rep leaderboard. One 7/30/90 day range drives all of it.
+ *   Reports:  every saved custom-object report as a searchable list; opening one (deep link ?id=) shows a detail panel
+ *             with Result (ReportDetail: the definition, the latest run, Run again, Delete) and Edit (ReportBuilder),
+ *             and "New report" opens the builder in a sheet.
+ *
+ * Composes: StatStrip, TrendChart, FunnelChart, Leaderboard, ReportDetail, ReportBuilder. No required props.
+ *
+ * SDK operations (all read except the report ones, which ReportBuilder owns and confirms):
+ *   0. GET /reports?limit=50 (Reports tab list); the rest of the report lifecycle is ReportDetail and ReportBuilder.
+ *   1. GET /analytics/outbound/summary?days=                     (analytics.getOutboundSummary)   KPI numbers
+ *   2. GET /analytics/outbound/{email,call,meeting}-metrics/trend?days=  sparklines + trend chart
+ *   3. GET /analytics/outbound/meeting-funnel?days= or /analytics/team/conversion-funnel?period_days=   funnel
+ *   4. GET /analytics/outbound/sdr-activity/leaderboard?days=&limit=     leaderboard
+ *   5. /reports...  (Reports tab, see ReportBuilder: delete is destructive and confirmed)
+ *
+ * User flows: switch range; switch trend channel; switch funnel source; sort the leaderboard; open Reports and run
+ * the whole report lifecycle (build, preview, save, re-run, edit, delete); retry any card after an error; read a
+ * stale-cache notice instead of silent old numbers.
+ * The tab and range are kept in the URL (?tab=, ?days=) so a link opens the same view.
+ */
+import { useEffect, useState, type ReactNode } from "react";
+import { BarChart3, FileText, Plus } from "lucide-react";
+import { Button, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { useLoadMoreList } from "@/g8/hooks/use-load-more-list";
+import { byOffset, hasNextOf } from "@/g8/lib/paging";
+import { LoadMore } from "@/g8/components/paging-notices";
+import { EmptyState } from "@/g8/components/empty-state";
+import { DetailPanel } from "@/g8/components/screen/detail-panel";
+import { FormSheet } from "@/g8/components/screen/form-sheet";
+import { SplitView } from "@/g8/components/screen/split-view";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { Toolbar } from "@/g8/components/screen/toolbar";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get } from "@/g8/lib/g8-client";
+import { ScreenLayout } from "@/g8/components/screen/screen-layout";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { StatStrip, type StatItem } from "@/g8/components/screen/stat-strip";
+import { useUrlState } from "@/g8/hooks/use-url-state";
+import { useReport } from "../hooks/use-report";
+import { DAY_RANGES, formatNumber, formatPercent, reportBody, type OutboundSummary, type ReportResultData, type SavedReport } from "../lib/analytics-types";
+import { FunnelChart } from "./funnel-chart";
+import { Leaderboard } from "./leaderboard";
+import { ReportBuilder } from "./report-builder";
+import { ReportDetail } from "./report-detail";
+import { TrendChart, TREND_SERIES, seriesOf, type TrendChannel, type TrendRow } from "./trend-chart";
+import { useBrand } from "@/g8/hooks/use-brand";
+
+export interface AnalyticsScreenProps {
+  /** Window in days when the URL has none. Default 30. */
+  defaultDays?: number;
+  /** Map a rep email to a display name in the leaderboard. */
+  nameFor?: (email: string) => string;
+  /** Pre-select the object (slug) in the report builder. */
+  objectSlug?: string;
+  /** Extra buttons next to the range picker. */
+  toolbarActions?: ReactNode;
+  className?: string;
+}
+
+const TABS = [{ id: "overview", label: "Overview" }, { id: "reports", label: "Reports" }];
+const CHANNELS: Array<{ id: TrendChannel; label: string }> = [{ id: "email", label: "Email" }, { id: "calls", label: "Calls" }, { id: "meetings", label: "Meetings" }];
+
+/** Percent change of the second half of a daily series against the first half; undefined when it cannot be told. */
+export function halfDelta(values: number[]): number | undefined {
+  if (values.length < 4) return undefined;
+  const mid = Math.floor(values.length / 2);
+  const sum = (v: number[]) => v.reduce((a, b) => a + b, 0);
+  const before = sum(values.slice(0, mid));
+  const after = sum(values.slice(mid));
+  return before > 0 ? Math.round(((after - before) / before) * 1000) / 10 : undefined;
+}
+
+function Segmented<T extends string>({ label, value, options, onChange }: { label: string; value: T; options: Array<{ id: T; label: string }>; onChange: (v: T) => void }) {
+  return (
+    <div role="group" aria-label={label} className="flex gap-1">
+      {options.map((o) => <Button key={o.id} size="sm" variant={value === o.id ? "default" : "outline"} onClick={() => onChange(o.id)}>{o.label}</Button>)}
+    </div>
+  );
+}
+
+function useKpis(days: number) {
+  const summary = useReport<OutboundSummary>("/analytics/outbound/summary", { days });
+  const email = useReport<TrendRow[]>(TREND_SERIES.email.path, { days });
+  const calls = useReport<TrendRow[]>(TREND_SERIES.calls.path, { days });
+  const meetings = useReport<TrendRow[]>(TREND_SERIES.meetings.path, { days });
+  const s = summary.data;
+  const sent = seriesOf(email.data, "sent");
+  const replied = seriesOf(email.data, "replied");
+  const rate = sent.map((v, i) => (v > 0 ? (replied[i] / v) * 100 : 0));
+  const dials = seriesOf(calls.data, "dials");
+  const booked = seriesOf(meetings.data, "booked");
+  const items: StatItem[] = [
+    { label: "Emails sent", value: formatNumber(s?.emails_sent), footer: <span className="text-xs text-muted-foreground">{`${formatPercent(s?.delivery_rate)} delivered`}</span>, sparkline: sent, delta: halfDelta(sent) },
+    { label: "Reply rate", value: formatPercent(s?.reply_rate), footer: <span className="text-xs text-muted-foreground">{`${formatNumber(s?.emails_replied)} replies`}</span>, sparkline: rate, delta: halfDelta(rate) },
+    { label: "Calls placed", value: formatNumber(s?.calls_dispatched), footer: <span className="text-xs text-muted-foreground">{`${formatPercent(s?.connect_rate)} connected`}</span>, sparkline: dials, delta: halfDelta(dials) },
+    { label: "Meetings booked", value: formatNumber(s?.meetings_booked), footer: <span className="text-xs text-muted-foreground">{`${formatNumber(s?.meetings_active)} still on the calendar`}</span>, sparkline: booked, delta: halfDelta(booked) },
+  ];
+  const refetch = () => { void summary.refetch(); void email.refetch(); void calls.refetch(); void meetings.refetch(); };
+  return { items, loading: summary.loading && !summary.data, error: summary.error, stale: summary.stale, refetch };
+}
+
+function Overview({ days, nameFor }: { days: number; nameFor?: (email: string) => string }) {
+  const kpis = useKpis(days);
+  const [channel, setChannel] = useState<TrendChannel>("email");
+  const [source, setSource] = useState<"meetings" | "revenue">("meetings");
+
+  return (
+    <div className="space-y-4">
+      {kpis.error ? (
+        <ApiError error={kpis.error} title="Could not load metrics" onRetry={kpis.refetch} />
+      ) : <StatStrip items={kpis.items} loading={kpis.loading} />}
+      {kpis.stale ? <p role="status" className="text-xs text-muted-foreground">These numbers are from a recent cache because a refresh failed.</p> : null}
+      <SectionCard title="Daily activity" description="One line for volume, one dashed line for outcomes." actions={<Segmented label="Channel" value={channel} options={CHANNELS} onChange={setChannel} />}>
+        <TrendChart channel={channel} days={days} />
+      </SectionCard>
+      <div className="grid gap-4 lg:grid-cols-2">
+        <SectionCard title="Funnel" actions={<Segmented label="Funnel source" value={source} options={[{ id: "meetings", label: "Meetings" }, { id: "revenue", label: "Revenue" }]} onChange={setSource} />}>
+          <FunnelChart source={source} days={days} />
+        </SectionCard>
+        <SectionCard title="Rep leaderboard" description="Ranked by reply rate. Click a column to re-sort.">
+          <Leaderboard days={days} hideRange nameFor={nameFor} />
+        </SectionCard>
+      </div>
+    </div>
+  );
+}
+
+/** Reports per read; "Load more" appends the next page (the list used to stop silently at 50). */
+const REPORT_PAGE = 50;
+
+function ReportsPane({ objectSlug }: { objectSlug?: string }) {
+  const brand = useBrand();
+  const [selected, setSelected] = useUrlState("id", "");
+  const [view, setView] = useUrlState("view", "");
+  const [search, setSearch] = useState("");
+  const [creating, setCreating] = useState(false);
+  // Results live here so switching between Result and Edit never runs the report again (each run is a write).
+  const [results, setResults] = useState<Record<string, ReportResultData | null>>({});
+  const list = useLoadMoreList(byOffset<SavedReport>(REPORT_PAGE, async (offset, signal) => {
+    const env = await g8Get("/reports", { object_slug: objectSlug || undefined, limit: REPORT_PAGE, offset: offset || undefined }, { signal });
+    const rows = reportBody<{ reports?: SavedReport[] }>(env).reports ?? [];
+    return { rows, hasNext: hasNextOf(env, REPORT_PAGE, rows.length) };
+  }), [objectSlug]);
+  const switchedOff = (list.error as { status?: number } | undefined)?.status === 404;
+  const q = search.trim().toLowerCase();
+  const rows = (list.data ?? []).filter((r) => !q || `${r.title} ${r.source.plural_noun}`.toLowerCase().includes(q));
+  const open = (list.data ?? []).find((r) => r.id === selected);
+  // A deep link to a report on a later page: keep loading pages until it is found.
+  useEffect(() => { if (selected && !open && list.hasMore && !list.loading && !list.loadingMore) list.loadMore(); }, [selected, open, list.hasMore, list.loading, list.loadingMore]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const detail = open ? (
+    <DetailPanel title={open.title} subtitle={open.source.plural_noun} badges={<StatusPill tone={open.visibility === "private" ? "neutral" : "info"}>{open.visibility}</StatusPill>} onClose={() => { setSelected(""); setView(""); }} onExpand={() => setView("full")}
+      tabs={[
+        { id: "result", label: "Result", content: <ReportDetail key={open.id} reportId={open.id} result={results[open.id]} onResult={(r) => setResults((m) => ({ ...m, [open.id]: r }))} onDeleted={() => { setSelected(""); void list.refetch(); }} /> },
+        { id: "edit", label: "Edit", content: <ReportBuilder key={open.id} hideList reportId={open.id} autoRun={false} onSaved={() => { setResults((m) => Object.fromEntries(Object.entries(m).filter(([k]) => k !== open.id))); void list.refetch(); }} /> }, // a saved edit changes the query: drop the stale result
+      ]} />
+  ) : selected && !list.loading && !list.hasMore ? <EmptyState title="Report not found" description="It may have been deleted." /> : null;
+
+  const listView = (
+    <div className="flex flex-col gap-3">
+      <Toolbar search={{ value: search, onChange: setSearch, placeholder: "Search reports" }} status={list.data ? `${rows.length} of ${list.data.length}` : undefined}
+        actions={<Button size="sm" onClick={() => setCreating(true)}><Plus className="mr-1 size-4" />New report</Button>} />
+      {switchedOff ? <EmptyState title="Reports are not enabled" description={`Custom-object reports are switched on per organisation in ${brand.linkLabel}.`} /> : list.error ? <ApiError error={list.error} title="Could not load saved reports" onRetry={() => void list.refetch()} /> : null}
+      {list.loading && !list.data ? <Skeleton className="h-32 w-full" aria-label="Loading reports" /> : null}
+      <ul className="rounded-md border">
+        {rows.map((r) => (
+          <li key={r.id} className={r.id === selected ? "bg-accent" : ""}>
+            <button type="button" data-testid={`report-${r.id}`} onClick={() => setSelected(r.id)} className="flex w-full items-center gap-3 border-b px-3 py-2 text-left">
+              <span className="min-w-0 flex-1"><span className="block truncate text-sm font-medium">{r.title}</span><span className="block truncate text-xs text-muted-foreground">{r.source.plural_noun} - {r.chart_type}</span></span>
+              <StatusPill tone={r.visibility === "private" ? "neutral" : "info"}>{r.visibility}</StatusPill>
+            </button>
+          </li>
+        ))}
+      </ul>
+      <LoadMore shown={(list.data ?? []).length} noun="reports" hasMore={list.hasMore} loading={list.loadingMore} onLoadMore={list.loadMore} />
+      {!list.loading && !list.error && rows.length === 0 ? <EmptyState title={list.data?.length ? "No reports match" : "No saved reports yet"} description="Pick an object, a measure and a grouping, preview it, then save it."
+        action={list.data?.length ? undefined : <Button onClick={() => setCreating(true)}>New report</Button>} /> : null}
+    </div>
+  );
+  return (
+    <>
+      <SplitView list={listView} detail={detail} detailOpen={Boolean(selected)} onCloseDetail={() => { setSelected(""); setView(""); }} expanded={view === "full"} onExpandedChange={(e) => setView(e ? "full" : "")} detailWidth="xl" />
+      <FormSheet open={creating} onOpenChange={setCreating} title="New report" width="xl" description="Preview as often as you like; nothing is saved until you save.">
+        <ReportBuilder hideList objectSlug={objectSlug} onSaved={(r) => { setCreating(false); setSelected(r.id); void list.refetch(); }} />
+      </FormSheet>
+    </>
+  );
+}
+
+export function AnalyticsScreen({ defaultDays = 30, nameFor, objectSlug, toolbarActions, className }: AnalyticsScreenProps) {
+  const [tab, setTab] = useUrlState("tab", "overview");
+  const [daysText, setDaysText] = useUrlState("days", String(defaultDays));
+  const parsed = Number(daysText);
+  const days = (DAY_RANGES as readonly number[]).includes(parsed) ? parsed : defaultDays;
+  const active = TABS.some((t) => t.id === tab) ? tab : "overview";
+
+  return (
+    <ScreenLayout
+      className={className}
+      title="Analytics"
+      description="How outbound is performing: volume, replies, calls, meetings and your reps."
+      icon={active === "reports" ? <FileText className="size-5" /> : <BarChart3 className="size-5" />}
+      tabs={TABS}
+      activeTab={active}
+      onTabChange={setTab}
+      actions={
+        <div className="flex items-center gap-2">
+          {active === "overview" ? <Segmented label="Time range" value={String(days)} options={DAY_RANGES.map((d) => ({ id: String(d), label: `Last ${d} days` }))} onChange={setDaysText} /> : null}
+          {toolbarActions}
+        </div>
+      }
+    >
+      {active === "reports" ? <ReportsPane objectSlug={objectSlug} /> : <Overview days={days} nameFor={nameFor} />}
+    </ScreenLayout>
+  );
+}

package/blocks/analytics/components/kpi-tiles.tsx

@@ -61,7 +61,7 @@ export function KpiTiles({ days: initialDays = 30, tiles = DEFAULT_TILES, classN
             return (
               <div key={t.key} className="rounded-lg border p-4">
                 <div className="text-xs uppercase text-muted-foreground">{t.label}</div>
-                <div className="mt-1 text-2xl font-semibold">{t.kind === "percent" ? formatPercent(raw) : formatNumber(raw)}</div>
+                <div className="mt-1 text-2xl font-medium">{t.kind === "percent" ? formatPercent(raw) : formatNumber(raw)}</div>
                 {data && t.hint ? <div className="mt-1 text-xs text-muted-foreground">{t.hint(data)}</div> : null}
               </div>
             );

package/blocks/analytics/components/leaderboard.tsx

@@ -15,6 +15,8 @@ import { ApiError } from "@/g8/components/api-error";
 import { EmptyState } from "@/g8/components/empty-state";
 import { useReport } from "../hooks/use-report";
 import { DAY_RANGES, formatNumber, formatPercent, type LeaderRow } from "../lib/analytics-types";
+import { rowActivationProps } from "@/g8/hooks/use-row-activation";
+import { RecordLink } from "@/g8/components/screen/record-link";
 
 type SortKey = "reply_rate" | "emails_sent" | "replies" | "meetings_booked";
 
@@ -24,6 +26,8 @@ export interface LeaderboardProps {
   /** Map an email to a display name. */
   nameFor?: (email: string) => string;
   onSelectRep?: (email: string) => void;
+  /** Hide the built-in 7/30/90 buttons when the host (for example AnalyticsScreen) owns the range; `days` then drives it. */
+  hideRange?: boolean;
   className?: string;
 }
 
@@ -34,17 +38,20 @@ const COLUMNS: ReadonlyArray<{ key: SortKey; label: string; percent?: boolean }>
   { key: "meetings_booked", label: "Meetings" },
 ];
 
-export function Leaderboard({ days: initialDays = 30, limit = 20, nameFor, onSelectRep, className }: LeaderboardProps) {
-  const [days, setDays] = useState(initialDays);
+export function Leaderboard({ days: initialDays = 30, limit = 20, nameFor, onSelectRep, hideRange, className }: LeaderboardProps) {
+  const [ownDays, setDays] = useState(initialDays);
+  const days = hideRange ? initialDays : ownDays;
   const [sortKey, setSortKey] = useState<SortKey>("reply_rate");
   const { data, stale, loading, error, refetch } = useReport<LeaderRow[]>("/analytics/outbound/sdr-activity/leaderboard", { days, limit });
   const rows = useMemo(() => [...(Array.isArray(data) ? data : [])].sort((a, b) => Number(b[sortKey] ?? 0) - Number(a[sortKey] ?? 0)), [data, sortKey]);
 
   return (
     <section className={`space-y-3 ${className ?? ""}`} aria-label="Rep leaderboard">
-      <div role="group" aria-label="Time range" className="flex gap-1">
-        {DAY_RANGES.map((d) => <Button key={d} size="sm" variant={days === d ? "default" : "outline"} onClick={() => setDays(d)}>Last {d} days</Button>)}
-      </div>
+      {hideRange ? null : (
+        <div role="group" aria-label="Time range" className="flex gap-1">
+          {DAY_RANGES.map((d) => <Button key={d} size="sm" variant={days === d ? "default" : "outline"} onClick={() => setDays(d)}>Last {d} days</Button>)}
+        </div>
+      )}
       {error ? (
         <ApiError error={error} title="Could not load the leaderboard" onRetry={() => void refetch()} />
       ) : loading && !data ? (
@@ -68,9 +75,9 @@ export function Leaderboard({ days: initialDays = 30, limit = 20, nameFor, onSel
             {rows.map((r, i) => {
               const email = r.sdr_email ?? "unknown";
               return (
-                <TableRow key={email} className={onSelectRep ? "cursor-pointer" : undefined} onClick={() => onSelectRep?.(email)}>
+                <TableRow key={email} className={onSelectRep ? "cursor-pointer" : undefined} {...(onSelectRep ? rowActivationProps(() => onSelectRep(email)) : {})}>
                   <TableCell>{i + 1}</TableCell>
-                  <TableCell className="font-medium">{nameFor ? nameFor(email) : email}</TableCell>
+                  <TableCell className="font-medium">{onSelectRep ? <RecordLink id={email} onOpen={() => onSelectRep(email)}>{nameFor ? nameFor(email) : email}</RecordLink> : nameFor ? nameFor(email) : email}</TableCell>
                   {COLUMNS.map((c) => (
                     <TableCell key={c.key} className="text-right">{c.percent ? formatPercent(r[c.key] as number | undefined) : formatNumber(r[c.key] as number | undefined)}</TableCell>
                   ))}

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

@@ -16,9 +16,12 @@
  * Preview and run share the org's report-run slots (429 `too_many_report_runs` when all are busy: retry shortly).
  * "write" tier on preview/execute is the contract's classification (they create run records); nothing is sent.
  */
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Button, Input, Label, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@graph8/sdk/ui";
 import { ApiError } from "@/g8/components/api-error";
+import { useLoadMoreList } from "@/g8/hooks/use-load-more-list";
+import { byOffset, hasNextOf } from "@/g8/lib/paging";
+import { LoadMore } from "@/g8/components/paging-notices";
 import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import { EmptyState } from "@/g8/components/empty-state";
 import { g8Delete, g8Get, g8Patch, g8Post } from "@/g8/lib/g8-client";
@@ -26,11 +29,18 @@ import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
 import { useG8Query } from "@/g8/hooks/use-g8-query";
 import { useDebounced } from "../lib/use-debounced";
 import { reportBody, type ReportResultData, type ResultRow, type SavedReport } from "../lib/analytics-types";
+import { useBrand } from "@/g8/hooks/use-brand";
 
 export interface ReportBuilderProps {
   /** Pre-select the object (its slug), for example from the objects block. */
   objectSlug?: string;
   onSaved?: (report: SavedReport) => void;
+  /** Open this saved report for editing as soon as it is loaded (it is run once, like clicking it in the list). */
+  reportId?: string;
+  /** Hide the "Saved reports" column when the host (for example AnalyticsScreen) shows its own list. */
+  hideList?: boolean;
+  /** With `reportId`: run the report once when it is loaded (default true). False only loads the definition. */
+  autoRun?: boolean;
   className?: string;
 }
 
@@ -80,7 +90,7 @@ function groupLabel(g: ResultRow["group"][number]): string {
   return String(g);
 }
 
-function ResultTable({ result }: { result: ReportResultData }) {
+export function ResultTable({ result }: { result: ReportResultData }) {
   const rows = result.rows ?? [];
   if (result.status === "restricted") return <p role="alert" className="text-sm">You do not have access to every field in this report.</p>;
   if (rows.length === 0) return <EmptyState title="No records match" description="Change the object, field or grouping and preview again." />;
@@ -107,7 +117,11 @@ function ResultTable({ result }: { result: ReportResultData }) {
   );
 }
 
-export function ReportBuilder({ objectSlug: initialSlug = "", onSaved, className }: ReportBuilderProps) {
+/** Reports per read; "Load more" appends the next page (the list used to stop silently at 50). */
+const REPORT_PAGE = 50;
+
+export function ReportBuilder({ objectSlug: initialSlug = "", onSaved, reportId, hideList, autoRun = true, className }: ReportBuilderProps) {
+  const brand = useBrand();
   const [slug, setSlug] = useState(initialSlug);
   const [draft, setDraft] = useState<Draft>({ title: "", chart: "table", measure: "count", measureField: "", groupBy: "", grain: "month" });
   const [loaded, setLoaded] = useState<SavedReport | null>(null);
@@ -116,7 +130,11 @@ export function ReportBuilder({ objectSlug: initialSlug = "", onSaved, className
   const set = <K extends keyof Draft>(k: K, v: Draft[K]) => setDraft((d) => ({ ...d, [k]: v }));
 
   const listSlug = useDebounced(slug.trim());
-  const saved = useG8Query(async (signal) => reportBody<{ reports?: SavedReport[] }>(await g8Get("/reports", { object_slug: listSlug || undefined, limit: 50 }, { signal })).reports ?? [], [listSlug]);
+  const saved = useLoadMoreList(byOffset<SavedReport>(REPORT_PAGE, async (offset, signal) => {
+    const env = await g8Get("/reports", { object_slug: listSlug || undefined, limit: REPORT_PAGE, offset: offset || undefined }, { signal });
+    const rows = reportBody<{ reports?: SavedReport[] }>(env).reports ?? [];
+    return { rows, hasNext: hasNextOf(env, REPORT_PAGE, rows.length) };
+  }), [listSlug]);
   const body = () => ({ object_slug: slug, chart_type: draft.chart, config: configOf(draft, loaded?.config as Cfg) });
   const preview = useG8Mutation(async () => { const r = reportBody<ReportResultData>(await g8Post("/reports/preview", body())); setResult(r); return r; });
   const run = useG8Mutation(async (r: SavedReport) => { const out = reportBody<ReportResultData>(await g8Post(`/reports/${encodeURIComponent(r.id)}/execute`, {})); setResult(out); return out; });
@@ -143,28 +161,37 @@ export function ReportBuilder({ objectSlug: initialSlug = "", onSaved, className
     remove.reset();
   };
 
-  const open = (r: SavedReport) => {
+  const open = (r: SavedReport, execute = true) => {
     setLoaded(r);
     setSlug(r.source.slug);
     setDraft((d) => draftFromReport(r, d));
-    void run.mutate(r);
+    if (execute) void run.mutate(r);
   };
+  // Preload `reportId` once its row arrives (and again if the id changes).
+  const preloaded = useRef<string | null>(null);
+  useEffect(() => {
+    const row = reportId ? (saved.data ?? []).find((r) => r.id === reportId) : undefined;
+    if (row && preloaded.current !== reportId) { preloaded.current = reportId ?? null; open(row, autoRun); }
+    // The report sits on a later page: keep loading pages until it is found.
+    else if (reportId && !row && saved.hasMore && !saved.loading && !saved.loadingMore) saved.loadMore();
+  }); // eslint-disable-line react-hooks/exhaustive-deps
   const failure = preview.error ?? run.error ?? save.error ?? remove.error;
   const switchedOff = (saved.error as { status?: number } | undefined)?.status === 404;
 
   return (
-    <div className={`grid gap-4 lg:grid-cols-[minmax(0,2fr)_minmax(0,3fr)] ${className ?? ""}`}>
-      <section aria-label="Saved reports" className="space-y-2">
-        <h3 className="text-sm font-semibold">Saved reports</h3>
-        {switchedOff ? <EmptyState title="Reports are not enabled" description="Custom-object reports are switched on per organisation in graph8." /> : saved.error ? <ApiError error={saved.error} title="Could not load saved reports" onRetry={() => void saved.refetch()} /> : null}
+    <div className={`grid gap-4 ${hideList ? "" : "lg:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]"} ${className ?? ""}`}>
+      {hideList ? null : <section aria-label="Saved reports" className="space-y-2">
+        <h3 className="text-sm font-medium">Saved reports</h3>
+        {switchedOff ? <EmptyState title="Reports are not enabled" description={`Custom-object reports are switched on per organisation in ${brand.linkLabel}.`} /> : saved.error ? <ApiError error={saved.error} title="Could not load saved reports" onRetry={() => void saved.refetch()} /> : null}
         {(saved.data ?? []).map((r) => (
           <div key={r.id} className="flex items-center justify-between rounded border p-2 text-sm">
             <button type="button" className="text-left hover:underline" onClick={() => open(r)}>{r.title} <span className="text-muted-foreground">({r.source.plural_noun})</span></button>
             {r.can_delete ? <Button size="sm" variant="ghost" aria-label={`Delete ${r.title}`} onClick={() => setDeleting(r)}>Delete</Button> : null}
           </div>
         ))}
+        <LoadMore shown={(saved.data ?? []).length} noun="reports" hasMore={saved.hasMore} loading={saved.loadingMore} onLoadMore={saved.loadMore} />
         {!saved.loading && !saved.error && (saved.data ?? []).length === 0 ? <p className="text-sm text-muted-foreground">Nothing saved yet.</p> : null}
-      </section>
+      </section>}
 
       <section aria-label="Report definition" className="space-y-3">
         <div className="grid gap-3 sm:grid-cols-2">