@graph8/sdk 0.361.0 → 0.370.0

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

@@ -0,0 +1,184 @@
+"use client";
+
+/**
+ * AgentsScreen: the finished agents workspace. Two tabs.
+ *   Agents: stat strip (agents, active, inactive), search and status filter, the agent list, and for the open agent
+ *           (deep link ?id=) a detail panel with Configure (persona, voice, knowledge, skills, active switch, delete),
+ *           Test (free dry runs, saved cases, the activation gate, run a skill live) and Runs.
+ *   Runs:   every agent run in the workspace as a list; opening one (deep link ?run=) shows the full run (AgentRunDetail:
+ *           status, step, next action, credits, times, its approvals to approve or reject, cancel). Start a run from here.
+ * "New agent" opens a form sheet (name, role, what it is for, personality); the agent starts inactive and opens
+ * in the detail panel so voice, knowledge and skills can be added next.
+ *
+ * Composes: AgentBuilder (hideList), AgentTestConsole, AgentRuns. Billable, external and destructive actions
+ * (document upload, run a skill, start/cancel a run, approve, delete an agent) stay inside those parts and are
+ * confirmed there with ConfirmSpendDialog.
+ *
+ * SDK operations of its own:
+ *   1. GET  /voice/agents?search&page_size=100   (voice.listAgents)       read
+ *   2. POST /voice/agents { role, persona, identity, entity_type, agent_status: "inactive" }  (voice.createAgent)  write
+ *   3. PUT  /voice/agents/{agent_id} { agent_status }   (voice.updateAgent)  write   activate / deactivate from the panel
+ * Slot props: renderRowActions, renderDetailActions, extraDetailTabs, toolbarActions.
+ */
+import { useRef, useState, type ReactNode } from "react";
+import { Bot, Plus } from "lucide-react";
+import { Button, Input, Label, Skeleton, Textarea } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get, g8Post, g8Put } from "@/g8/lib/g8-client";
+import { DetailPanel } from "@/g8/components/screen/detail-panel";
+import { EntityAvatar } from "@/g8/components/screen/entity-avatar";
+import { FormSheet } from "@/g8/components/screen/form-sheet";
+import { ScreenLayout } from "@/g8/components/screen/screen-layout";
+import { SplitView } from "@/g8/components/screen/split-view";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { Toolbar } from "@/g8/components/screen/toolbar";
+import { useUrlState } from "@/g8/hooks/use-url-state";
+import { DEFAULT_PERSONA, bodyOf, listOf } from "../lib/agent-types";
+import type { AgentSummary } from "../lib/agent-types";
+import { AgentBuilder } from "./agent-builder";
+import { AgentRunDetail } from "./agent-run-detail";
+import { AgentRuns } from "./agent-runs";
+import { AgentTestConsole } from "./agent-test-console";
+
+export interface AgentsScreenProps {
+  /** Row-level extra actions (for example "Use in a campaign"). */
+  renderRowActions?: (agent: AgentSummary) => ReactNode;
+  renderDetailActions?: (agent: AgentSummary) => ReactNode;
+  extraDetailTabs?: Array<{ id: string; label: string; render: (agent: AgentSummary) => ReactNode }>;
+  toolbarActions?: ReactNode;
+  className?: string;
+}
+
+const SCREEN_TABS = [{ id: "agents", label: "Agents" }, { id: "runs", label: "Runs" }];
+const FILTERS = [{ id: "", label: "All" }, { id: "active", label: "Active" }, { id: "inactive", label: "Inactive" }];
+
+interface NewAgent { name: string; role: string; description: string; persona: string }
+const blank = (): NewAgent => ({ name: "", role: "SDR", description: "", persona: "" });
+const tone = (status: string) => (status === "active" ? "positive" : status === "archived" ? "neutral" : "warning");
+
+/** Create sheet. Keeps the id of an agent it already created so a retry after a later failure never makes a twin. */
+function NewAgentSheet({ open, onOpenChange, onCreated }: { open: boolean; onOpenChange: (o: boolean) => void; onCreated: (id: string) => void }) {
+  const [form, setForm] = useState<NewAgent>(blank());
+  const created = useRef<string | null>(null);
+  const create = useG8Mutation(async () => {
+    if (created.current) return created.current;
+    const res = await g8Post("/voice/agents", {
+      entity_type: "agent", role: form.role.trim(), agent_status: "inactive", use_company_knowledge: true, identity: {},
+      persona: { ...DEFAULT_PERSONA, agent_name: form.name.trim(), description: form.description.trim(), persona: form.persona.trim() },
+    });
+    const id = bodyOf<{ agent?: { agent_id?: string } }>(res).agent?.agent_id ?? "";
+    created.current = id || null;
+    return id;
+  }, { onSuccess: (id) => { created.current = null; setForm(blank()); onOpenChange(false); if (id) onCreated(id); } });
+  const set = (patch: Partial<NewAgent>) => setForm((f) => ({ ...f, ...patch }));
+  const valid = Boolean(form.name.trim() && form.role.trim() && form.description.trim() && form.persona.trim());
+  return (
+    <FormSheet open={open} onOpenChange={onOpenChange} title="New agent" description="It starts inactive. Add a voice, knowledge and skills, test it, then turn it on."
+      footer={<><Button variant="ghost" onClick={() => onOpenChange(false)}>Cancel</Button><Button loading={create.loading} disabled={!valid} onClick={() => void create.mutate(undefined)}>Create agent</Button></>}>
+      <div className="flex flex-col gap-3">
+        <div className="flex flex-col gap-1"><Label htmlFor="na-name">Name</Label><Input id="na-name" value={form.name} onChange={(e) => set({ name: e.target.value })} /></div>
+        <div className="flex flex-col gap-1"><Label htmlFor="na-role">Role</Label><Input id="na-role" value={form.role} onChange={(e) => set({ role: e.target.value })} /></div>
+        <div className="flex flex-col gap-1"><Label htmlFor="na-desc">What it is for</Label><Input id="na-desc" value={form.description} onChange={(e) => set({ description: e.target.value })} /></div>
+        <div className="flex flex-col gap-1"><Label htmlFor="na-persona">Personality and behaviour</Label><Textarea id="na-persona" rows={5} value={form.persona} onChange={(e) => set({ persona: e.target.value })} /></div>
+        {create.error ? <ApiError error={create.error} title="Could not create the agent" /> : null}
+      </div>
+    </FormSheet>
+  );
+}
+
+function AgentRow({ agent, selected, onOpen, extra }: { agent: AgentSummary; selected: boolean; onOpen: () => void; extra?: ReactNode }) {
+  return (
+    <li className={`flex items-center gap-3 border-b px-3 py-2 ${selected ? "bg-accent" : ""}`}>
+      <button type="button" data-testid={`agent-${agent.agent_id}`} onClick={onOpen} className="flex min-w-0 flex-1 items-center gap-3 text-left">
+        <EntityAvatar name={agent.agent_name} kind="person" size="md" />
+        <span className="min-w-0 flex-1">
+          <span className="block truncate text-sm font-medium">{agent.agent_name}</span>
+          <span className="block truncate text-xs text-muted-foreground">{agent.role}{agent.description ? ` - ${agent.description}` : ""}</span>
+        </span>
+        <StatusPill tone={tone(agent.agent_status)} dot>{agent.agent_status}</StatusPill>
+      </button>
+      {extra}
+    </li>
+  );
+}
+
+export function AgentsScreen({ renderRowActions, renderDetailActions, extraDetailTabs, toolbarActions, className }: AgentsScreenProps) {
+  const [tab, setTab] = useUrlState("tab", "agents");
+  const [selected, setSelected] = useUrlState("id", "");
+  const [search, setSearch] = useState("");
+  const [filter, setFilter] = useState("");
+  const [creating, setCreating] = useState(false);
+  const [run, setRun] = useUrlState("run", "");
+  const [view, setView] = useUrlState("view", "");
+  const closeAgent = () => { setSelected(""); setView(""); };
+  const closeRun = () => { setRun(""); setView(""); };
+  const expand = { expanded: view === "full", onExpandedChange: (e: boolean) => setView(e ? "full" : "") };
+  const [runsKey, setRunsKey] = useState(0);
+  const q = search.trim();
+
+  const agents = useG8Query((signal) => g8Get("/voice/agents", { search: q || undefined, page_size: 100 }, { signal }), [q]);
+  const all = listOf<AgentSummary>(agents.data, "agents");
+  const rows = filter ? all.filter((a) => a.agent_status === filter) : all;
+  // Resolve the open agent from the list first, else by id, so a search, a filter or a cold deep link never hides it.
+  const inList = all.find((a) => a.agent_id === selected);
+  const byId = useG8Query((signal) => g8Get(`/voice/agents/${encodeURIComponent(selected)}`, undefined, { signal }), [selected], { enabled: Boolean(selected) && !inList && !agents.loading });
+  const fetched = bodyOf<{ agent?: { agent_id: string; agent_status: string; role: string; persona?: { agent_name?: string; description?: string } } }>(byId.data).agent;
+  const open: AgentSummary | undefined = inList ?? (fetched ? { agent_id: fetched.agent_id, agent_name: fetched.persona?.agent_name ?? "Agent", role: fetched.role, agent_status: fetched.agent_status, description: fetched.persona?.description } : undefined);
+  const active = all.filter((a) => a.agent_status === "active").length;
+
+  const toggle = useG8Mutation((a: AgentSummary) => g8Put(`/voice/agents/${a.agent_id}`, { agent_status: a.agent_status === "active" ? "inactive" : "active" }), { onSuccess: () => { void agents.refetch(); void byId.refetch(); } });
+  const current = tab === "runs" ? "runs" : "agents";
+
+  const detail = open ? (
+    <DetailPanel title={open.agent_name} subtitle={open.role} avatar={<EntityAvatar name={open.agent_name} kind="person" size="lg" />}
+      badges={<StatusPill tone={tone(open.agent_status)} dot>{open.agent_status}</StatusPill>} onClose={closeAgent} onExpand={() => setView("full")}
+      actions={<>
+        <Button size="sm" variant="outline" loading={toggle.loading} onClick={() => void toggle.mutate(open)}>{open.agent_status === "active" ? "Deactivate" : "Activate"}</Button>
+        {renderDetailActions?.(open)}
+      </>}
+      tabs={[
+        { id: "configure", label: "Configure", content: <AgentBuilder key={`${open.agent_id}:${open.agent_status}`} hideList agentId={open.agent_id} onSelect={(id) => setSelected(id ?? "")} onChanged={() => void agents.refetch()} /> },
+        { id: "test", label: "Test", content: <AgentTestConsole agentId={open.agent_id} /> },
+        { id: "runs", label: "Runs", content: <AgentRuns agentId={open.agent_id} /> },
+        ...(extraDetailTabs ?? []).map((t) => ({ id: t.id, label: t.label, content: t.render(open) })),
+      ]}>
+      {toggle.error ? <ApiError error={toggle.error} title="Could not change the status" /> : null}
+    </DetailPanel>
+  ) : selected && !agents.loading && !byId.loading && (byId.error || byId.data) ? <EmptyState title="Agent not found" description="It may have been deleted." /> : selected ? <Skeleton className="m-4 h-40" aria-label="Loading agent" /> : null;
+
+  const list = (
+    <div className="flex flex-col gap-3">
+      <Toolbar search={{ value: search, onChange: setSearch, placeholder: "Search agents" }} actions={toolbarActions}
+        filters={<div role="group" aria-label="Status" className="flex gap-1">{FILTERS.map((f) => <Button key={f.id || "all"} size="sm" variant={filter === f.id ? "default" : "outline"} onClick={() => setFilter(f.id)}>{f.label}</Button>)}</div>} />
+      {agents.error ? <ApiError error={agents.error} title="Could not load agents" onRetry={() => void agents.refetch()} /> : null}
+      {agents.loading && all.length === 0 ? <div className="space-y-2">{[0, 1, 2, 3].map((i) => <Skeleton key={i} className="h-14 w-full" />)}</div> : null}
+      <ul className="rounded-md border">
+        {rows.map((a) => <AgentRow key={a.agent_id} agent={a} selected={a.agent_id === selected} onOpen={() => setSelected(a.agent_id)} extra={renderRowActions?.(a)} />)}
+      </ul>
+      {!agents.loading && !agents.error && rows.length === 0 ? (
+        <EmptyState title={all.length ? "No agents match" : "No agents yet"} description="An agent has a persona, a voice, knowledge and skills."
+          action={all.length ? undefined : <Button onClick={() => setCreating(true)}>New agent</Button>} />
+      ) : null}
+    </div>
+  );
+
+  return (
+    <ScreenLayout className={className} title="Agents" description="Build AI agents, prove they work before they talk to anyone, and follow the work they do."
+      icon={<Bot className="size-5" />} tabs={SCREEN_TABS} activeTab={current} onTabChange={setTab}
+      actions={<Button onClick={() => setCreating(true)}><Plus className="mr-1 size-4" />New agent</Button>}
+      stats={current === "agents" ? [
+        { label: "Agents", value: String(all.length) },
+        { label: "Active", value: String(active), tone: "positive" },
+        { label: "Inactive", value: String(all.filter((a) => a.agent_status === "inactive").length), tone: "warning" },
+      ] : undefined}>
+      {current === "runs" ? (
+        <SplitView list={<AgentRuns hideDetail selectedId={run || null} onSelectRun={(id) => setRun(id ?? "")} refreshKey={runsKey} />} detailOpen={Boolean(run)} onCloseDetail={closeRun} {...expand} detailWidth="lg"
+          detail={run ? <DetailPanel title="Run" subtitle={run} onClose={closeRun} onExpand={() => setView("full")} tabs={[{ id: "run", label: "Run", content: <AgentRunDetail key={run} runId={run} onChanged={() => setRunsKey((k) => k + 1)} /> }]} /> : null} />
+      ) : <SplitView list={list} detail={detail} detailOpen={Boolean(selected)} onCloseDetail={closeAgent} {...expand} detailWidth="xl" />}
+      <NewAgentSheet open={creating} onOpenChange={setCreating} onCreated={(id) => { setSelected(id); setTab("agents"); void agents.refetch(); }} />
+    </ScreenLayout>
+  );
+}

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,209 @@
+"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 { 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 { 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>
+  );
+}
+
+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 = useG8Query(async (signal) => reportBody<{ reports?: SavedReport[] }>(await g8Get("/reports", { object_slug: objectSlug || undefined, limit: 50 }, { signal })).reports ?? [], [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);
+
+  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 ? <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>
+      {!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/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,7 +16,7 @@
  * 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 { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
@@ -26,11 +26,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 +87,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 +114,8 @@ function ResultTable({ result }: { result: ReportResultData }) {
   );
 }
 
-export function ReportBuilder({ objectSlug: initialSlug = "", onSaved, className }: ReportBuilderProps) {
+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);
@@ -143,20 +151,26 @@ 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); }
+  }); // 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">
+    <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-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}
+        {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>
@@ -164,7 +178,7 @@ export function ReportBuilder({ objectSlug: initialSlug = "", onSaved, className
           </div>
         ))}
         {!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">