@graph8/sdk 0.370.0 → 0.374.0

package/blocks/agents/components/skill-library.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+/**
+ * SkillLibrary: every skill in the workspace (your own plus graph8's defaults) in one list. Search by name, filter by kind
+ * and by enabled, open one to edit it (SkillEditor), write a new LLM or API skill, or start from a template. A skill that no
+ * agent uses yet can be attached from an agent's Skills tab.
+ *
+ * SDK operations, in order:
+ *   1. listSkills          GET  /skills?runtime_type&enabled&include_system   (read)  returns every skill, no cap
+ *   2. listTemplates       GET  /skills/templates                              (read)
+ *   3. createFromTemplate  POST /skills/from-template { template_id, name }    (write)
+ *   4. SkillEditor         see skill-editor.tsx (getSkill, updateSkill, deleteSkill, createSkill, validateTemplate, extractVariables, listModels)
+ */
+import { useMemo, useRef, useState } from "react";
+import { Wand2 } from "lucide-react";
+import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, Label, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { Toolbar } from "@/g8/components/screen/toolbar";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get, g8Post } from "@/g8/lib/g8-client";
+import { listOf } from "../lib/agent-types";
+import type { SkillDetail } from "../lib/skill-utils";
+import { skillOf } from "../lib/skill-utils";
+import { SkillEditor } from "./skill-editor";
+import type { SkillEditorTarget } from "./skill-editor";
+
+export interface SkillLibraryProps {
+  className?: string;
+}
+
+interface Template { template_id?: string; action_id?: string; id?: string; name: string; description?: string | null; runtime_type?: string }
+const tid = (t: Template): string => t.template_id ?? t.action_id ?? t.id ?? "";
+const KINDS = [{ id: "", label: "All" }, { id: "llm", label: "LLM" }, { id: "api", label: "API" }];
+const STATES = [{ id: "", label: "Any state" }, { id: "true", label: "Enabled" }, { id: "false", label: "Disabled" }];
+
+function FromTemplate({ open, onClose, onCreated }: { open: boolean; onClose: () => void; onCreated: (id?: string) => void }) {
+  const [picked, setPicked] = useState<Template | null>(null);
+  const [name, setName] = useState("");
+  const made = useRef<{ id?: string } | null>(null);
+  const templates = useG8Query((signal) => g8Get("/skills/templates", undefined, { signal }), [], { enabled: open });
+  const create = useG8Mutation(async (v: { id: string; name: string }) => {
+    if (made.current) return made.current.id;
+    const id = skillOf(await g8Post("/skills/from-template", { template_id: v.id, name: v.name }))?.action_id;
+    made.current = { id };
+    return id;
+  }, { onSuccess: (id) => { made.current = null; setPicked(null); onCreated(id); } });
+  const rows = listOf<Template>(templates.data, "actions", "templates", "items");
+  return (
+    <Dialog open={open} onOpenChange={(o) => !o && !create.loading && onClose()}>
+      <DialogContent>
+        <DialogHeader><DialogTitle>New skill from a template</DialogTitle><DialogDescription>Templates are ready-made skills. Name yours and edit it afterwards.</DialogDescription></DialogHeader>
+        {templates.error ? <ApiError error={templates.error} title="Could not load templates" onRetry={() => void templates.refetch()} /> : null}
+        {templates.loading && !templates.data ? <Skeleton className="h-16 w-full" /> : null}
+        <ul className="max-h-64 divide-y overflow-y-auto rounded-md border">
+          {rows.map((t) => (
+            <li key={tid(t)}><button type="button" aria-pressed={picked != null && tid(picked) === tid(t)} className={`block w-full px-3 py-2 text-left text-sm ${picked != null && tid(picked) === tid(t) ? "bg-accent" : ""}`} onClick={() => { made.current = null; setPicked(t); setName(t.name); }}>
+              <span className="font-medium">{t.name}</span>{t.runtime_type ? <span className="ml-2 text-xs text-muted-foreground">{t.runtime_type}</span> : null}
+              {t.description ? <span className="block text-xs text-muted-foreground">{t.description}</span> : null}
+            </button></li>
+          ))}
+        </ul>
+        {!templates.loading && !templates.error && rows.length === 0 ? <p className="text-sm text-muted-foreground">There are no templates yet.</p> : null}
+        {picked ? <div className="flex flex-col gap-1"><Label htmlFor="skill-from-template">Name</Label><Input id="skill-from-template" value={name} onChange={(e) => setName(e.target.value)} /></div> : null}
+        {create.error ? <ApiError error={create.error} title="Could not create the skill" /> : null}
+        <DialogFooter><Button variant="ghost" disabled={create.loading} onClick={onClose}>Cancel</Button><Button loading={create.loading} disabled={!picked || !name.trim()} onClick={() => picked && void create.mutate({ id: tid(picked), name: name.trim() })}>Create skill</Button></DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export function SkillLibrary({ className }: SkillLibraryProps) {
+  const [search, setSearch] = useState("");
+  const [kind, setKind] = useState("");
+  const [state, setState] = useState("");
+  const [target, setTarget] = useState<SkillEditorTarget | null>(null);
+  const [fromTemplate, setFromTemplate] = useState(false);
+  const skills = useG8Query((signal) => g8Get("/skills", { runtime_type: kind || undefined, enabled: state || undefined, include_system: true }, { signal }), [kind, state]);
+  const all = listOf<SkillDetail>(skills.data, "actions", "skills", "items");
+  const q = search.trim().toLowerCase();
+  const rows = useMemo(() => (q ? all.filter((s) => `${s.name} ${s.description ?? ""} ${s.category ?? ""}`.toLowerCase().includes(q)) : all), [all, q]);
+
+  return (
+    <div className={`flex flex-col gap-3 ${className ?? ""}`}>
+      <Toolbar search={{ value: search, onChange: setSearch, placeholder: "Search skills" }}
+        filters={<><div role="group" aria-label="Skill kind" className="flex gap-1">{KINDS.map((k) => <Button key={k.id || "all"} size="sm" variant={kind === k.id ? "default" : "outline"} onClick={() => setKind(k.id)}>{k.label}</Button>)}</div>
+          <select aria-label="Skill state" className="h-8 rounded-md border bg-background px-2 text-sm" value={state} onChange={(e) => setState(e.target.value)}>{STATES.map((s) => <option key={s.id} value={s.id}>{s.label}</option>)}</select></>}
+        actions={<><Button size="sm" variant="outline" onClick={() => setFromTemplate(true)}>From a template</Button><Button size="sm" variant="outline" onClick={() => setTarget({ kind: "new", runtime: "api" })}>New API skill</Button><Button size="sm" onClick={() => setTarget({ kind: "new", runtime: "llm" })}>New LLM skill</Button></>} />
+      {skills.error ? <ApiError error={skills.error} title="Could not load skills" onRetry={() => void skills.refetch()} /> : null}
+      {skills.loading && !skills.data ? <div className="space-y-2">{[0, 1, 2].map((i) => <Skeleton key={i} className="h-12 w-full" />)}</div> : null}
+      <ul className="divide-y rounded-md border">
+        {rows.map((s) => (
+          <li key={s.action_id}>
+            <button type="button" data-testid={`skill-${s.action_id}`} className="flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-sm" onClick={() => setTarget({ kind: "edit", id: s.action_id })}>
+              <span className="min-w-0"><span className="block truncate font-medium">{s.name}</span>{s.description ? <span className="block truncate text-xs text-muted-foreground">{s.description}</span> : null}</span>
+              <span className="flex shrink-0 items-center gap-2">{s.category ? <span className="text-xs text-muted-foreground">{s.category}</span> : null}<StatusPill tone="neutral">{s.runtime_type ?? "skill"}</StatusPill><StatusPill tone={s.enabled === false ? "warning" : "positive"} dot>{s.enabled === false ? "disabled" : "enabled"}</StatusPill></span>
+            </button>
+          </li>
+        ))}
+      </ul>
+      {!skills.loading && !skills.error && rows.length === 0 ? (
+        <EmptyState icon={<Wand2 strokeWidth={1.5} />} title={all.length ? "No skills match" : "No skills yet"} description="A skill is one thing an agent can do: write a summary, call an API."
+          action={all.length ? undefined : <Button onClick={() => setTarget({ kind: "new", runtime: "llm" })}>New LLM skill</Button>} />
+      ) : null}
+      <SkillEditor target={target} onClose={() => setTarget(null)} onChanged={() => void skills.refetch()} />
+      <FromTemplate open={fromTemplate} onClose={() => setFromTemplate(false)} onCreated={(id) => { setFromTemplate(false); void skills.refetch(); if (id) setTarget({ kind: "edit", id }); }} />
+    </div>
+  );
+}

package/blocks/agents/lib/agent-types.ts

@@ -58,7 +58,7 @@ export interface SkillRow {
   description?: string | null;
   runtime_type?: "llm" | "api" | string;
   category?: string | null;
-  llm_config?: { prompt?: string; model?: string } | null;
+  llm_config?: { prompt_template?: string; model?: string } | null;
 }
 
 export interface AgentRun {
@@ -112,3 +112,9 @@ export function pretty(value: unknown): string {
     return String(value);
   }
 }
+
+/** The id of the agent a create or clone answered with, whatever envelope it came in. */
+export function agentIdOf(res: G8Envelope<unknown> | null | undefined): string {
+  const b = bodyOf<{ agent?: { agent_id?: string }; agent_id?: string; new_agent_id?: string }>(res);
+  return b.agent?.agent_id ?? b.agent_id ?? b.new_agent_id ?? "";
+}

package/blocks/agents/lib/facts.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+/** Renders an open-shaped API object (health, scorecard, status) as labelled facts without guessing its fields. */
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+
+const label = (k: string): string => { const t = k.replace(/_/g, " "); return t.charAt(0).toUpperCase() + t.slice(1); };
+const show = (v: unknown): string => (v == null ? "" : typeof v === "string" ? v : typeof v === "number" || typeof v === "boolean" ? String(v) : JSON.stringify(v));
+
+export function FactList({ data, empty = "Nothing reported yet." }: { data: unknown; empty?: string }) {
+  const entries = Object.entries((data && typeof data === "object" && !Array.isArray(data) ? data : {}) as Record<string, unknown>).filter(([, v]) => v != null && v !== "");
+  if (entries.length === 0) return <p className="text-sm text-muted-foreground">{empty}</p>;
+  return <KeyValueList columns={2} items={entries.map(([k, v]) => ({ label: label(k), value: show(v), wide: typeof v === "object", mono: typeof v === "object" }))} />;
+}

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

@@ -0,0 +1,49 @@
+"use client";
+
+/** Shapes of the company knowledge (the Knowledge Brain) the agents block reads, and the body helpers for authoring. */
+
+export interface KnowledgeSummary {
+  concept_id: string;
+  concept_type: string;
+  title: string;
+  source_type?: string;
+  knowledge_status?: string;
+  trust_tier?: string;
+  visibility?: string;
+  stale?: boolean;
+  logical_path?: string;
+}
+
+export interface KnowledgeConcept {
+  summary: KnowledgeSummary;
+  markdown?: string;
+  source_refs?: Array<{ resource?: string; title?: string | null; locator?: string | null; checksum?: string | null }>;
+  relationships?: string[];
+  warnings?: string[];
+  capabilities?: Record<string, boolean>;
+}
+
+export interface KnowledgeInput {
+  title: string;
+  concept_type: string;
+  body: string;
+}
+
+export const LIFECYCLES = ["draft", "stable", "deprecated"] as const;
+
+/** Rendered markdown can start with a `---` frontmatter block; the authoring body must not carry it. */
+export function bodyFromMarkdown(markdown: string | undefined): string {
+  const text = markdown ?? "";
+  const m = /^---\r?\n[\s\S]*?\r?\n---\r?\n?/.exec(text);
+  return (m ? text.slice(m[0].length) : text).replace(/^\s+/, "");
+}
+
+/** Only authored entries can be edited, amended, verified or deprecated; generated ones come from the product's own records. */
+export function isAuthored(s: KnowledgeSummary | undefined): boolean {
+  return Boolean(s?.source_type && /authored/i.test(s.source_type));
+}
+
+export function conceptOf(res: unknown): KnowledgeConcept | undefined {
+  const d = ((res as { data?: unknown } | null)?.data ?? res) as Partial<KnowledgeConcept> | null;
+  return d && d.summary && d.summary.concept_id ? (d as KnowledgeConcept) : undefined;
+}

package/blocks/agents/lib/load-more.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+/**
+ * Paging helpers for the agents block, in the same shape as the foundation's paging primitives (a list never stops silently at a
+ * cap: it shows "Load more" while the last page was full).
+ *
+ *   useLoadMoreList   offset + limit APIs (the next page starts at items.length).
+ *   useGrowingList    limit-only APIs (a bigger limit refetches the list from the start).
+ *   LoadMore          the footer button plus the error of a failed "more" request.
+ */
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Button } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+
+export interface LoadMoreList<T> {
+  items: T[];
+  /** The first page is loading (or reloading after the deps changed). */
+  loading: boolean;
+  loadingMore: boolean;
+  error: unknown;
+  moreError: unknown;
+  hasMore: boolean;
+  /** A limit-only API stopped at its own maximum: there are more rows the API will not return. */
+  capped?: boolean;
+  loadMore: () => void;
+  reload: () => void;
+}
+
+interface Options {
+  pageSize?: number;
+  enabled?: boolean;
+  /** useGrowingList: the largest `limit` the API accepts. */
+  max?: number;
+}
+
+/** Offset paging. `fetchPage(offset, limit)` returns that page's rows; a full page means there may be more. */
+export function useLoadMoreList<T>(
+  fetchPage: (offset: number, limit: number, signal: AbortSignal) => Promise<T[]>,
+  deps: readonly unknown[],
+  { pageSize = 50, enabled = true }: Options = {},
+): LoadMoreList<T> {
+  const [items, setItems] = useState<T[]>([]);
+  const [loading, setLoading] = useState(enabled);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [error, setError] = useState<unknown>(null);
+  const [moreError, setMoreError] = useState<unknown>(null);
+  const [hasMore, setHasMore] = useState(false);
+  const [tick, setTick] = useState(0);
+  const fetchRef = useRef(fetchPage);
+  fetchRef.current = fetchPage;
+  const gen = useRef(0);
+  const count = useRef(0);
+  const sig = JSON.stringify([...deps, enabled, pageSize]);
+  const lastSig = useRef(sig);
+
+  useEffect(() => {
+    if (!enabled) { setLoading(false); return; }
+    const mine = ++gen.current;
+    const ctl = new AbortController();
+    // A reload() keeps showing the rows it has until the fresh first page lands; a changed filter starts from nothing.
+    const fresh = lastSig.current !== sig;
+    lastSig.current = sig;
+    setLoading(true); setError(null); setMoreError(null);
+    if (fresh) { setItems([]); setHasMore(false); count.current = 0; }
+    // A reload() refetches as many pages as were showing, so a row opened from page 2 does not vanish; a changed filter starts at page 1.
+    const want = fresh ? pageSize : Math.max(count.current, pageSize);
+    const load = async (): Promise<T[]> => {
+      const all: T[] = [];
+      let last = pageSize;
+      while (all.length < want && last >= pageSize) {
+        const page = await fetchRef.current(all.length, pageSize, ctl.signal);
+        all.push(...page);
+        last = page.length;
+      }
+      return all;
+    };
+    load().then((rows) => {
+      if (gen.current !== mine) return;
+      setItems(rows); count.current = rows.length; setHasMore(rows.length > 0 && rows.length % pageSize === 0); setLoading(false);
+    }, (e) => { if (gen.current === mine) { setError(e); setLoading(false); } });
+    return () => ctl.abort();
+  }, [...deps, enabled, pageSize, tick]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const loadMore = useCallback(() => {
+    const mine = gen.current;
+    setLoadingMore(true); setMoreError(null);
+    fetchRef.current(count.current, pageSize, new AbortController().signal).then((rows) => {
+      if (gen.current !== mine) return;
+      count.current += rows.length;
+      setItems((prev) => [...prev, ...rows]); setHasMore(rows.length >= pageSize); setLoadingMore(false);
+    }, (e) => { if (gen.current === mine) { setMoreError(e); setLoadingMore(false); } });
+  }, [pageSize]);
+
+  return { items, loading, loadingMore, error, moreError, hasMore, loadMore, reload: () => setTick((t) => t + 1) };
+}
+
+/** Limit-only APIs: asks for `step` rows, and "Load more" asks again for `step` more from the start. */
+export function useGrowingList<T>(
+  fetchRows: (limit: number, signal: AbortSignal) => Promise<T[]>,
+  deps: readonly unknown[],
+  { pageSize = 50, enabled = true, max = Infinity }: Options = {},
+): LoadMoreList<T> {
+  const [limit, setLimit] = useState(pageSize);
+  const [rows, setRows] = useState<T[]>([]);
+  const [loading, setLoading] = useState(enabled);
+  const [error, setError] = useState<unknown>(null);
+  const [tick, setTick] = useState(0);
+  const [growing, setGrowing] = useState(false);
+  const fetchRef = useRef(fetchRows);
+  fetchRef.current = fetchRows;
+  const depKey = JSON.stringify(deps);
+  const lastDeps = useRef(depKey);
+
+  useEffect(() => { if (lastDeps.current !== depKey) { lastDeps.current = depKey; setLimit(pageSize); } }, [depKey, pageSize]);
+  useEffect(() => {
+    if (!enabled) { setLoading(false); return; }
+    let live = true;
+    const ctl = new AbortController();
+    setLoading(true); setError(null);
+    fetchRef.current(limit, ctl.signal).then((r) => { if (live) { setRows(r); setLoading(false); setGrowing(false); } }, (e) => { if (live) { setError(e); setLoading(false); setGrowing(false); } });
+    return () => { live = false; ctl.abort(); };
+  }, [limit, depKey, enabled, tick]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return {
+    items: rows, loading: loading && !growing, loadingMore: loading && growing, error: growing ? null : error, moreError: growing ? error : null,
+    hasMore: !loading && rows.length >= limit && limit < max, capped: !loading && rows.length >= limit && limit >= max,
+    loadMore: () => { setGrowing(true); setLimit((l) => Math.min(max, l + pageSize)); }, reload: () => setTick((t) => t + 1),
+  };
+}
+
+/** The footer of a paged list. Renders nothing when everything is shown. */
+export function LoadMore<T>({ list, noun = "rows" }: { list: LoadMoreList<T>; noun?: string }) {
+  if (!list.hasMore && !list.moreError && !list.capped) return null;
+  return (
+    <div className="flex flex-col items-center gap-2 py-2">
+      {list.moreError ? <ApiError compact error={list.moreError} title={`Could not load more ${noun}`} onRetry={list.loadMore} /> : null}
+      {list.capped ? <p className="text-xs text-muted-foreground">Showing the latest {list.items.length} {noun}. The API returns no more than this.</p> : null}
+      {list.hasMore && !list.moreError ? <Button size="sm" variant="outline" loading={list.loadingMore} onClick={list.loadMore}>Load more {noun}</Button> : null}
+    </div>
+  );
+}

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/components/analytics-screen.tsx

@@ -23,10 +23,13 @@
  * 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 { 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";
@@ -128,6 +131,9 @@ function Overview({ days, nameFor }: { days: number; nameFor?: (email: string) =
   );
 }
 
+/** 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", "");
@@ -136,11 +142,17 @@ function ReportsPane({ objectSlug }: { objectSlug?: string }) {
   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 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")}
@@ -148,7 +160,7 @@ function ReportsPane({ objectSlug }: { objectSlug?: string }) {
         { 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;
+  ) : 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">
@@ -166,6 +178,7 @@ function ReportsPane({ objectSlug }: { objectSlug?: string }) {
           </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>

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/report-builder.tsx

@@ -19,6 +19,9 @@
 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";
@@ -114,6 +117,9 @@ export function ResultTable({ result }: { result: ReportResultData }) {
   );
 }
 
+/** 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);
@@ -124,7 +130,11 @@ export function ReportBuilder({ objectSlug: initialSlug = "", onSaved, reportId,
   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; });
@@ -162,6 +172,8 @@ export function ReportBuilder({ objectSlug: initialSlug = "", onSaved, reportId,
   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;
@@ -169,7 +181,7 @@ export function ReportBuilder({ objectSlug: initialSlug = "", onSaved, reportId,
   return (
     <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>
+        <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">
@@ -177,6 +189,7 @@ export function ReportBuilder({ objectSlug: initialSlug = "", onSaved, reportId,
             {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>}
 

package/blocks/appointments/README.md

@@ -98,3 +98,9 @@ with the full API key.
 - `03-bookings-digest.ts`: upcoming bookings, pending approvals, recorded meetings.
 - `04-calendar-invite.ts`: ad-hoc invite via `calendarInvites.createCalendarInvite` (not part of the block's
   UI; add the operation to your own proxy allowlist if you call it from the browser).
+
+## Cross-block glue
+
+- `MeetingContactLinks` (`components/meeting-contact-links.tsx`): "Open <attendee>" buttons for a booked or recorded meeting, one per attendee who is a CRM contact. Use it in `MeetingsScreen`'s `renderDetailActions`.
+
+- `RecordMeetingsTab` (`components/record-meetings-tab.tsx`): meetings booked with a contact (`getContactMeetings`, the API's 50 most recent booking events), each opening `/meetings?sel=booking:<id>`. `extraDetailTabs` entry for ContactsScreen.

package/blocks/appointments/block.json

@@ -23,10 +23,12 @@
     "get_availability_appointments_schedules__schedule_id__availability_get",
     "get_available_slots_appointments_slots_get",
     "get_booking_appointments_bookings__booking_uid__get",
+    "get_contact_meetings_contacts__contact_id__meetings_get",
     "get_event_type_appointments_event_types__event_type_id__get",
     "get_meeting_inbox_meetings__meeting_id__get",
     "list_bookings_appointments_bookings_get",
     "list_calendars_appointments_calendars_get",
+    "list_contacts_contacts_get",
     "list_event_types_event_types_get",
     "list_meetings_inbox_meetings_get",
     "list_schedules_appointments_schedules_get",
@@ -138,6 +140,30 @@
       "tiers": [
         "read"
       ]
+    },
+    {
+      "name": "MeetingContactLinks",
+      "file": "components/meeting-contact-links.tsx",
+      "purpose": "\"Open <attendee>\" buttons for a booked or recorded meeting: one per attendee who is a CRM contact; for MeetingsScreen renderDetailActions.",
+      "operations": [
+        "get_booking_appointments_bookings__booking_uid__get",
+        "get_meeting_inbox_meetings__meeting_id__get",
+        "list_contacts_contacts_get"
+      ],
+      "tiers": [
+        "read"
+      ]
+    },
+    {
+      "name": "RecordMeetingsTab",
+      "file": "components/record-meetings-tab.tsx",
+      "purpose": "The meetings booked with one contact (booked, rescheduled, cancelled), each opening in the meetings screen; an extraDetailTabs entry for ContactsScreen.",
+      "operations": [
+        "get_contact_meetings_contacts__contact_id__meetings_get"
+      ],
+      "tiers": [
+        "read"
+      ]
     }
   ],
   "hooks": [
@@ -220,6 +246,7 @@
   ],
   "scopes": [
     "campaigns:read",
+    "contacts:read",
     "meetings:delete",
     "meetings:read",
     "meetings:run",