@graph8/sdk 0.370.0 → 0.374.0

package/blocks/agents/components/agent-runs.tsx

@@ -100,8 +100,8 @@ export function AgentRuns({ agentId, pageSize = 20, pollMs = 3000, selectedId, o
   return (
     <div className={`flex flex-col gap-4 ${className ?? ""}`}>
       {pending.length > 0 ? (
-        <div className="rounded-md border border-amber-300 p-3" data-testid="approvals">
-          <h3 className="mb-2 text-sm font-semibold">Waiting for your decision ({pending.length})</h3>
+        <div className="rounded-md border border-warning-foreground/30 p-3" data-testid="approvals">
+          <h3 className="mb-2 text-sm font-medium">Waiting for your decision ({pending.length})</h3>
           <ul className="flex flex-col gap-2">
             {pending.map((a) => (
               <li key={a.id} className="flex flex-wrap items-center justify-between gap-2 text-sm">
@@ -160,7 +160,7 @@ export function AgentRuns({ agentId, pageSize = 20, pollMs = 3000, selectedId, o
         <div className="rounded-md border p-3" data-testid="run-detail">
           {current ? (
             <>
-              <div className="flex items-center justify-between"><h3 className="font-semibold">{current.title}</h3><span className="text-sm">{current.status}{detail.polling ? " (updating)" : ""}</span></div>
+              <div className="flex items-center justify-between"><h3 className="font-medium">{current.title}</h3><span className="text-sm">{current.status}{detail.polling ? " (updating)" : ""}</span></div>
               <dl className="mt-2 grid grid-cols-2 gap-1 text-sm">
                 <dt className="text-muted-foreground">Current step</dt><dd>{current.current_step ?? "-"}</dd>
                 <dt className="text-muted-foreground">Next action</dt><dd>{current.next_action ?? "-"}</dd>

package/blocks/agents/components/agent-skills-panel.tsx

@@ -10,7 +10,7 @@
  *   3. attachSkillsToAgent      POST   /voice/agents/{agent_id}/skills { action_ids } (write)
  *   4. detachSkillFromAgent     DELETE /voice/agents/{agent_id}/skills/{action_id}    (destructive, ConfirmSpendDialog)
  *   5. listModels               GET    /skills/models                                 (read)
- *   6. createSkill              POST   /skills { name, runtime_type: "llm", llm_config } (write)
+ *   6. createSkill              POST   /skills { name, runtime_type: "llm", llm_config: { model, prompt_template } } (write)
  *
  * Detaching never deletes the skill; it only stops this agent from using it.
  */
@@ -42,16 +42,16 @@ export function AgentSkillsPanel({ agentId, onChanged, className }: AgentSkillsP
   const [attachingId, setAttachingId] = useState<string | null>(null);
   useEffect(() => { setDetaching(null); setCreating(null); setAttachingId(null); }, [agentId]);
 
-  const attached = useG8Query((signal) => g8Get(`/voice/agents/${agentId}/skills`, undefined, { signal }), [agentId]);
+  const attached = useG8Query((signal) => g8Get(`/voice/agents/${encodeURIComponent(agentId)}/skills`, undefined, { signal }), [agentId]);
   const all = useG8Query((signal) => g8Get("/skills", undefined, { signal }), []);
   const models = useG8Query((signal) => g8Get("/skills/models", undefined, { signal }), [], { enabled: creating != null });
 
   const changed = () => { void attached.refetch(); void all.refetch(); onChanged?.(); };
-  const attach = useG8Mutation((actionId: string) => g8Post(`/voice/agents/${agentId}/skills`, { action_ids: [actionId] }), { onSuccess: changed });
+  const attach = useG8Mutation((actionId: string) => g8Post(`/voice/agents/${encodeURIComponent(agentId)}/skills`, { action_ids: [actionId] }), { onSuccess: changed });
   const attachOne = async (id: string) => { setAttachingId(id); await attach.mutate(id); setAttachingId(null); };
-  const detach = useG8Mutation((actionId: string) => g8Delete(`/voice/agents/${agentId}/skills/${actionId}`), { onSuccess: () => { setDetaching(null); changed(); } });
+  const detach = useG8Mutation((actionId: string) => g8Delete(`/voice/agents/${encodeURIComponent(agentId)}/skills/${encodeURIComponent(actionId)}`), { onSuccess: () => { setDetaching(null); changed(); } });
   const create = useG8Mutation(
-    (v: NonNullable<typeof creating>) => g8Post("/skills", { name: v.name, description: v.description || undefined, runtime_type: "llm", llm_config: { prompt: v.prompt, model: v.model } }),
+    (v: NonNullable<typeof creating>) => g8Post("/skills", { name: v.name, description: v.description || undefined, runtime_type: "llm", llm_config: { model: v.model, prompt_template: v.prompt } }),
     { onSuccess: () => { setCreating(null); changed(); } },
   );
 
@@ -63,7 +63,7 @@ export function AgentSkillsPanel({ agentId, onChanged, className }: AgentSkillsP
   return (
     <div className={`flex flex-col gap-5 ${className ?? ""}`}>
       <div className="flex flex-col gap-2">
-        <h3 className="text-sm font-semibold">Attached skills</h3>
+        <h3 className="text-sm font-medium">Attached skills</h3>
         {attached.error ? <ApiError error={attached.error} title="Could not load the agent's skills" onRetry={() => void attached.refetch()} /> : null}
         {attached.loading && mine.length === 0 ? <Skeleton className="h-10 w-full" /> : null}
         <ul className="divide-y rounded-md border">
@@ -79,7 +79,7 @@ export function AgentSkillsPanel({ agentId, onChanged, className }: AgentSkillsP
 
       <div className="flex flex-col gap-2">
         <div className="flex items-center justify-between">
-          <h3 className="text-sm font-semibold">Available skills</h3>
+          <h3 className="text-sm font-medium">Available skills</h3>
           <Button size="sm" variant="outline" onClick={() => setCreating({ name: "", description: "", prompt: "", model: "" })}>New skill</Button>
         </div>
         {all.error ? <ApiError error={all.error} title="Could not load skills" onRetry={() => void all.refetch()} /> : null}

package/blocks/agents/components/agent-test-history.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+/**
+ * AgentTestHistory: the saved test cases of one agent and every run of them. Cases can be renamed or re-worded (only the fields you
+ * change are sent) and deleted (destructive, confirmed); the run history shows when each case ran and whether it passed.
+ * Running a test stays in AgentTestConsole; both are free (dry runs).
+ *
+ * SDK operations, in order:
+ *   1. listAgentTestCases   GET    /voice/agents/{agent_id}/test-cases                          (read)
+ *   2. updateAgentTestCase  PUT    /voice/agents/{agent_id}/test-cases/{test_case_id}  { changed fields }   (write)
+ *   3. deleteAgentTestCase  DELETE /voice/agents/{agent_id}/test-cases/{test_case_id}          (destructive, ConfirmSpendDialog)
+ *   4. listAgentTestRuns    GET    /voice/agents/{agent_id}/test-runs?limit&test_case_id       (read)  "Load more" grows the limit
+ */
+import { useEffect, useState } from "react";
+import { Button, Input, Label, Skeleton, Textarea } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { EmptyState } from "@/g8/components/empty-state";
+import { FormSheet } from "@/g8/components/screen/form-sheet";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { StatusPill, toneForStatus } from "@/g8/components/screen/status-pill";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Delete, g8Get, g8Put } from "@/g8/lib/g8-client";
+import { listOf } from "../lib/agent-types";
+import { LoadMore, useGrowingList } from "../lib/load-more";
+
+export interface AgentTestHistoryProps {
+  agentId: string;
+  className?: string;
+}
+
+interface Case { test_case_id?: string; id?: string; name: string; input_message?: string; channel?: string; assertion_type?: string; expected_output?: unknown }
+interface TestRun { id?: string; run_id?: string; test_case_id?: string; assertion_result?: string; created_at?: string; mode?: string }
+
+const caseId = (c: Case): string => c.test_case_id ?? c.id ?? "";
+const CHANNELS = ["chat", "inbound", "outbound"] as const;
+const ASSERTIONS = ["contains", "not_contains", "exact", "refuses", "expects_tool", "cites_collection", "llm_judge"] as const;
+/** Only these compare against a single text; the others keep their expected_output / config untouched (edit them in graph8). */
+const TEXT_TYPES: readonly string[] = ["contains", "not_contains", "exact"];
+const expectedText = (v: unknown): string => (typeof v === "string" ? v : v == null ? "" : JSON.stringify(v));
+
+/** Only the fields whose value differs from the loaded case. */
+export function changedFields(before: Case, draft: { name: string; input_message: string; channel: string; assertion_type: string; expected_output: string }): Record<string, string> {
+  const base = { name: before.name, input_message: before.input_message ?? "", channel: before.channel ?? "chat", assertion_type: before.assertion_type ?? "contains", expected_output: expectedText(before.expected_output) };
+  return Object.fromEntries(Object.entries(draft).filter(([k, v]) => v !== (base as Record<string, string>)[k] && !(k === "expected_output" && !TEXT_TYPES.includes(draft.assertion_type))));
+}
+
+function EditCase({ agentId, row, onClose, onSaved }: { agentId: string; row: Case | null; onClose: () => void; onSaved: () => void }) {
+  const [d, setD] = useState({ name: "", input_message: "", channel: "chat", assertion_type: "contains", expected_output: "" });
+  useEffect(() => { if (row) setD({ name: row.name, input_message: row.input_message ?? "", channel: row.channel ?? "chat", assertion_type: row.assertion_type ?? "contains", expected_output: expectedText(row.expected_output) }); }, [row]);
+  const diff = row ? changedFields(row, d) : {};
+  const save = useG8Mutation(() => g8Put(`/voice/agents/${encodeURIComponent(agentId)}/test-cases/${encodeURIComponent(caseId(row as Case))}`, diff), { onSuccess: () => { onSaved(); onClose(); } });
+  const needsText = TEXT_TYPES.includes(d.assertion_type);
+  const set = (patch: Partial<typeof d>) => setD((x) => ({ ...x, ...patch }));
+  return (
+    <FormSheet open={row != null} onOpenChange={(o) => !o && onClose()} title="Edit test case" description="Only the fields you change are saved."
+      footer={<><Button variant="ghost" onClick={onClose}>Cancel</Button><Button loading={save.loading} disabled={Object.keys(diff).length === 0 || !d.name.trim() || !d.input_message.trim() || (needsText && !d.expected_output.trim())} onClick={() => void save.mutate(undefined)}>Save changes</Button></>}>
+      <div className="flex flex-col gap-3">
+        <div className="flex flex-col gap-1"><Label htmlFor="tc-name">Name</Label><Input id="tc-name" value={d.name} onChange={(e) => set({ name: e.target.value })} /></div>
+        <div className="flex flex-col gap-1"><Label htmlFor="tc-input">What the person says</Label><Textarea id="tc-input" rows={3} value={d.input_message} onChange={(e) => set({ input_message: e.target.value })} /></div>
+        <div className="grid grid-cols-2 gap-3">
+          <div className="flex flex-col gap-1"><Label htmlFor="tc-channel">Channel</Label>
+            <select id="tc-channel" className="h-9 rounded-md border bg-background px-2 text-sm" value={d.channel} onChange={(e) => set({ channel: e.target.value })}>{CHANNELS.map((c) => <option key={c} value={c}>{c}</option>)}</select></div>
+          <div className="flex flex-col gap-1"><Label htmlFor="tc-assertion">The agent</Label>
+            <select id="tc-assertion" className="h-9 rounded-md border bg-background px-2 text-sm" value={d.assertion_type} onChange={(e) => set({ assertion_type: e.target.value })}>{ASSERTIONS.map((c) => <option key={c} value={c}>{c.replace("_", " ")}</option>)}</select></div>
+        </div>
+        {needsText ? <div className="flex flex-col gap-1"><Label htmlFor="tc-expected">Text to check</Label><Input id="tc-expected" value={d.expected_output} onChange={(e) => set({ expected_output: e.target.value })} /></div> : null}
+        {save.error ? <ApiError error={save.error} title="Could not save the case" /> : null}
+      </div>
+    </FormSheet>
+  );
+}
+
+export function AgentTestHistory({ agentId, className }: AgentTestHistoryProps) {
+  const [editing, setEditing] = useState<Case | null>(null);
+  const [deleting, setDeleting] = useState<Case | null>(null);
+  const [only, setOnly] = useState("");
+  useEffect(() => { setEditing(null); setDeleting(null); setOnly(""); }, [agentId]);
+  const cases = useG8Query((signal) => g8Get(`/voice/agents/${encodeURIComponent(agentId)}/test-cases`, undefined, { signal }), [agentId]);
+  const runs = useGrowingList<TestRun>(async (limit, signal) => listOf<TestRun>(await g8Get(`/voice/agents/${encodeURIComponent(agentId)}/test-runs`, { limit, test_case_id: only || undefined }, { signal }), "items", "runs"), [agentId, only], { pageSize: 25, max: 200 });
+  const remove = useG8Mutation((id: string) => g8Delete(`/voice/agents/${encodeURIComponent(agentId)}/test-cases/${encodeURIComponent(id)}`), { onSuccess: (_r, id) => { setDeleting(null); if (only === id) setOnly(""); void cases.refetch(); runs.reload(); } });
+  const rows = listOf<Case>(cases.data, "items", "test_cases", "cases");
+  const nameOf = (id?: string) => rows.find((c) => caseId(c) === id)?.name ?? "Ad-hoc message";
+
+  return (
+    <div className={`flex flex-col gap-4 ${className ?? ""}`}>
+      <SectionCard title="Saved test cases" description="Each case is a message plus what the agent must do." flush>
+        {cases.error ? <div className="p-3"><ApiError error={cases.error} title="Could not load the test cases" onRetry={() => void cases.refetch()} /></div> : null}
+        {cases.loading && !cases.data ? <Skeleton className="m-3 h-10" /> : null}
+        <ul className="divide-y">
+          {rows.map((c) => (
+            <li key={caseId(c)} data-testid={`case-${caseId(c)}`} className="flex flex-wrap items-center justify-between gap-2 px-4 py-2 text-sm">
+              <span><span className="font-medium">{c.name}</span><span className="block text-xs text-muted-foreground">{c.assertion_type ?? "contains"}: {expectedText(c.expected_output) || "no text"}</span></span>
+              <span className="flex gap-1"><Button size="sm" variant="ghost" onClick={() => setOnly(only === caseId(c) ? "" : caseId(c))}>{only === caseId(c) ? "All runs" : "Runs"}</Button><Button size="sm" variant="outline" onClick={() => setEditing(c)}>Edit</Button><Button size="sm" variant="ghost" onClick={() => setDeleting(c)}>Delete</Button></span>
+            </li>
+          ))}
+        </ul>
+        {!cases.loading && !cases.error && rows.length === 0 ? <EmptyState compact title="No saved cases" description="Save a dry run from the Test tab to keep it here." /> : null}
+      </SectionCard>
+      <SectionCard title="Run history" description={only ? `Runs of ${nameOf(only)}` : "Every test run, newest first"} flush>
+        {runs.error ? <div className="p-3"><ApiError error={runs.error} title="Could not load the run history" onRetry={runs.reload} /></div> : null}
+        {runs.loading ? <Skeleton className="m-3 h-10" /> : null}
+        <ul className="divide-y">
+          {runs.items.map((r, i) => (
+            <li key={r.id ?? r.run_id ?? i} className="flex items-center justify-between gap-2 px-4 py-2 text-sm">
+              <span>{nameOf(r.test_case_id)}</span>
+              <span className="flex items-center gap-2"><StatusPill tone={toneForStatus(r.assertion_result === "pass" ? "completed" : r.assertion_result === "fail" || r.assertion_result === "error" ? "failed" : "pending")} dot>{r.assertion_result ?? "not judged"}</StatusPill><span className="text-xs text-muted-foreground">{r.created_at ? new Date(r.created_at).toLocaleString() : ""}</span></span>
+            </li>
+          ))}
+        </ul>
+        {!runs.loading && !runs.error && runs.items.length === 0 ? <EmptyState compact title="No runs yet" description="Run a dry run or the whole sweep from the Test tab." /> : null}
+        <LoadMore list={runs} noun="runs" />
+      </SectionCard>
+      {remove.error ? <ApiError error={remove.error} title="Could not delete the case" /> : null}
+      <EditCase agentId={agentId} row={editing} onClose={() => setEditing(null)} onSaved={() => { void cases.refetch(); }} />
+      <ConfirmSpendDialog open={deleting != null} tier="destructive" title={`Delete "${deleting?.name ?? "case"}"`} description="The case and its place in the regression sweep are removed. Past runs stay in the history." affected={1}
+        confirmLabel="Delete" confirming={remove.loading} onConfirm={() => deleting && void remove.mutate(caseId(deleting))} onCancel={() => setDeleting(null)} />
+    </div>
+  );
+}

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

@@ -10,9 +10,17 @@
  * "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.
+ * More tabs: Approvals (the inbox for everything agents ask permission for), Skill library (every skill, create/edit/delete),
+ * Company knowledge (the entries agents draw on: browse, search, author, verify, deprecate), Operators (autonomous
+ * monitors: on/off and the trust dial) and Assistant (sessions with the graph8 assistant). The open agent also has
+ * Conversations (its chat history and a message box), Activity (calls, skill runs, skill performance) and Test history
+ * (saved cases, edit/delete, every run). The header has From a template and Receptionist; an open agent can be
+ * duplicated or saved as a template.
+ *
+ * Composes: AgentBuilder (hideList), AgentTestConsole, AgentRuns, AgentApprovals, SkillLibrary, KnowledgeBrowser,
+ * AgentOperators, AssistantSessions, AgentConversations, AgentActivity, AgentTestHistory. Billable, external and
+ * destructive actions (document upload, run a skill, start/cancel a run, approve, send a chat message, turn an operator
+ * on, delete anything) 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
@@ -24,6 +32,9 @@ 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 { useLoadMoreList } from "@/g8/hooks/use-load-more-list";
+import { byPage, hasNextOf } from "@/g8/lib/paging";
+import { LoadMore } from "@/g8/components/paging-notices";
 import { EmptyState } from "@/g8/components/empty-state";
 import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
 import { useG8Query } from "@/g8/hooks/use-g8-query";
@@ -38,10 +49,22 @@ 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 { AgentActivity } from "./agent-activity";
+import { AgentApprovals } from "./agent-approvals";
 import { AgentBuilder } from "./agent-builder";
+import { AgentConversations } from "./agent-conversations";
+import { AgentOperators } from "./agent-operators";
 import { AgentRunDetail } from "./agent-run-detail";
 import { AgentRuns } from "./agent-runs";
 import { AgentTestConsole } from "./agent-test-console";
+import { AgentTestHistory } from "./agent-test-history";
+import { AssistantSessions } from "./assistant-sessions";
+import { DuplicateAgentButton } from "./duplicate-agent-button";
+import { FromTemplateButton } from "./from-template-button";
+import { KnowledgeBrowser } from "./knowledge-browser";
+import { ReceptionistButton } from "./receptionist-button";
+import { SaveAsTemplateButton } from "./save-as-template-button";
+import { SkillLibrary } from "./skill-library";
 
 export interface AgentsScreenProps {
   /** Row-level extra actions (for example "Use in a campaign"). */
@@ -52,7 +75,11 @@ export interface AgentsScreenProps {
   className?: string;
 }
 
-const SCREEN_TABS = [{ id: "agents", label: "Agents" }, { id: "runs", label: "Runs" }];
+const SCREEN_TABS = [
+  { id: "agents", label: "Agents" }, { id: "runs", label: "Runs" }, { id: "approvals", label: "Approvals" }, { id: "skills", label: "Skill library" },
+  { id: "knowledge", label: "Company knowledge" }, { id: "operators", label: "Operators" }, { id: "assistant", label: "Assistant" },
+];
+const TAB_IDS = SCREEN_TABS.map((t) => t.id);
 const FILTERS = [{ id: "", label: "All" }, { id: "active", label: "Active" }, { id: "inactive", label: "Inactive" }];
 
 interface NewAgent { name: string; role: string; description: string; persona: string }
@@ -105,6 +132,9 @@ function AgentRow({ agent, selected, onOpen, extra }: { agent: AgentSummary; sel
   );
 }
 
+/** Agents per read; "Load more" appends the next page (the list used to stop silently at 100). */
+const AGENT_PAGE = 100;
+
 export function AgentsScreen({ renderRowActions, renderDetailActions, extraDetailTabs, toolbarActions, className }: AgentsScreenProps) {
   const [tab, setTab] = useUrlState("tab", "agents");
   const [selected, setSelected] = useUrlState("id", "");
@@ -119,8 +149,12 @@ export function AgentsScreen({ renderRowActions, renderDetailActions, extraDetai
   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 agents = useLoadMoreList(byPage<AgentSummary>(AGENT_PAGE, async (page, signal) => {
+    const env = await g8Get("/voice/agents", { search: q || undefined, page, page_size: AGENT_PAGE }, { signal });
+    const rows = listOf<AgentSummary>(env, "agents");
+    return { rows, hasNext: hasNextOf(env, AGENT_PAGE, rows.length) };
+  }), [q]);
+  const all = agents.data ?? [];
   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);
@@ -129,20 +163,26 @@ export function AgentsScreen({ renderRowActions, renderDetailActions, extraDetai
   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 toggle = useG8Mutation((a: AgentSummary) => g8Put(`/voice/agents/${encodeURIComponent(a.agent_id)}`, { agent_status: a.agent_status === "active" ? "inactive" : "active" }), { onSuccess: () => { void agents.refetch(); void byId.refetch(); } });
+  const current = TAB_IDS.includes(tab) ? tab : "agents";
+  const openRun = (id: string) => { setRun(id); setTab("runs"); };
 
   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>
+        <DuplicateAgentButton agent={open} onDuplicated={(id) => { void agents.refetch(); setSelected(id); }} />
+        <SaveAsTemplateButton agent={open} />
         {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} /> },
+        { id: "conversations", label: "Conversations", content: <AgentConversations agentId={open.agent_id} /> },
+        { id: "activity", label: "Activity", content: <AgentActivity agentId={open.agent_id} /> },
+        { id: "test-history", label: "Test history", content: <AgentTestHistory 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}
@@ -158,6 +198,7 @@ export function AgentsScreen({ renderRowActions, renderDetailActions, extraDetai
       <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>
+      <LoadMore shown={all.length} noun="agents" hasMore={agents.hasMore} loading={agents.loadingMore} onLoadMore={agents.loadMore} />
       {!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>} />
@@ -168,13 +209,14 @@ export function AgentsScreen({ renderRowActions, renderDetailActions, extraDetai
   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>}
+      actions={<><FromTemplateButton onCreated={(id) => { void agents.refetch(); setSelected(id); setTab("agents"); }} /><ReceptionistButton /><Button onClick={() => setCreating(true)}><Plus className="mr-1 size-4" />New agent</Button></>}
       stats={current === "agents" ? [
-        { label: "Agents", value: String(all.length) },
+        { label: "Agents", value: agents.hasMore ? `${all.length}+` : 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" ? (
+      {current === "approvals" ? <AgentApprovals onOpenRun={openRun} /> : current === "skills" ? <SkillLibrary /> : current === "knowledge" ? <KnowledgeBrowser />
+        : current === "operators" ? <AgentOperators /> : current === "assistant" ? <AssistantSessions onOpenRun={openRun} /> : 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" />}

package/blocks/agents/components/assistant-sessions.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+/**
+ * AssistantSessions: conversations with the graph8 assistant (the workspace agent that answers questions and starts jobs). The list of
+ * your sessions (pinned first, "Load more" pages through all of them), a session's messages and the steps the agent took, and the
+ * actions: new session, rename, pin, delete (destructive, confirmed), add a note (no model call; the agent reads it on its next turn)
+ * and "Ask" (one live turn: the agent answers, or reads the message as a job and starts a run).
+ * A live turn runs a model and may start autonomous work that spends credits, so Ask goes through ConfirmSpendDialog (billable).
+ * Live streaming is not available through the API; an answer arrives whole.
+ *
+ * SDK operations, in order:
+ *   1. listAgentSessions       GET    /agent/sessions?limit&offset                       (read)
+ *   2. createAgentSession      POST   /agent/sessions { title? }                         (write)
+ *   3. getAgentSessionState    GET    /agent/sessions/{session_id}/state                 (read)  messages + steps
+ *   4. markAgentSessionRead    PUT    /agent/sessions/{session_id}/read { message_count } (write)
+ *   5. renameAgentSession      POST   /agent/sessions/{session_id}/rename { title }      (write)
+ *   6. pinAgentSession         POST   /agent/sessions/{session_id}/pin { is_pinned }     (write)
+ *   7. deleteAgentSession      DELETE /agent/sessions/{session_id}                       (destructive, ConfirmSpendDialog)
+ *   8. postAgentSessionMessage POST   /agent/sessions/{session_id}/messages { content }  (write, no model call)
+ *   9. postAgentChat           POST   /agent/chat { message, session_id? }               (billable, ConfirmSpendDialog)
+ */
+import { useEffect, useRef, useState } from "react";
+import { MessagesSquare, Pin } from "lucide-react";
+import { Button, Input, Skeleton, Textarea } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { EmptyState } from "@/g8/components/empty-state";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Delete, g8Get, g8Post, g8Put } from "@/g8/lib/g8-client";
+import { bodyOf, listOf } from "../lib/agent-types";
+import { LoadMore, useLoadMoreList } from "../lib/load-more";
+
+export interface AssistantSessionsProps {
+  /** Called when a live turn started a run, so the host can open it. */
+  onOpenRun?: (runId: string) => void;
+  className?: string;
+}
+
+interface Session { id?: string | null; title?: string | null; is_pinned?: boolean | null; updated_at?: string | null; created_at?: string | null }
+interface Message { role?: string; content?: unknown }
+interface Step { title?: string; summary?: string; tool?: string; status?: string }
+const enc = encodeURIComponent;
+const text = (v: unknown): string => (typeof v === "string" ? v : v == null ? "" : JSON.stringify(v));
+
+function Transcript({ sessionId, refreshKey }: { sessionId: string; refreshKey: number }) {
+  const state = useG8Query((signal) => g8Get(`/agent/sessions/${enc(sessionId)}/state`, undefined, { signal }), [sessionId, refreshKey]);
+  const body = bodyOf<{ messages?: Message[]; steps?: Step[] }>(state.data);
+  const messages = body.messages ?? [];
+  const lastRead = useRef<string>("");
+  const markRead = useG8Mutation((n: number) => g8Put(`/agent/sessions/${enc(sessionId)}/read`, { message_count: n }));
+  useEffect(() => {
+    const key = `${sessionId}:${messages.length}`;
+    if (state.data && messages.length > 0 && lastRead.current !== key) { lastRead.current = key; void markRead.mutate(messages.length); }
+  }, [state.data, messages.length, sessionId]); // eslint-disable-line react-hooks/exhaustive-deps
+  if (state.error) return <ApiError error={state.error} title="Could not load the session" onRetry={() => void state.refetch()} />;
+  if (state.loading && !state.data) return <Skeleton className="h-24 w-full" aria-label="Loading session" />;
+  return (
+    <div className="flex flex-col gap-3">
+      {messages.length === 0 ? <p className="text-sm text-muted-foreground">No messages in this session yet.</p> : null}
+      <ol className="flex flex-col gap-2" aria-label="Messages">
+        {messages.map((m, i) => <li key={i} className={`max-w-[85%] rounded-md border px-3 py-2 text-sm ${m.role === "user" ? "self-end bg-accent" : "self-start"}`}><span className="block text-xs text-muted-foreground">{m.role === "user" ? "You" : "Assistant"}</span><span className="whitespace-pre-wrap">{text(m.content)}</span></li>)}
+      </ol>
+      {(body.steps ?? []).length ? <details className="text-sm"><summary className="cursor-pointer text-muted-foreground">What the agent did ({body.steps?.length})</summary><ul className="mt-2 list-disc pl-5">{(body.steps ?? []).map((s, i) => <li key={i}>{s.title ?? s.summary ?? s.tool}{s.status ? ` (${s.status})` : ""}</li>)}</ul></details> : null}
+    </div>
+  );
+}
+
+export function AssistantSessions({ onOpenRun, className }: AssistantSessionsProps) {
+  const [openId, setOpenId] = useState<string | null>(null);
+  const [draft, setDraft] = useState("");
+  const [asking, setAsking] = useState<string | null>(null);
+  const [renaming, setRenaming] = useState<string | null>(null);
+  const [title, setTitle] = useState("");
+  const [deleting, setDeleting] = useState<Session | null>(null);
+  const [reply, setReply] = useState<{ message?: string; kind?: string; work_item_id?: string } | null>(null);
+  const [turnKey, setTurn] = useState(0);
+  const list = useLoadMoreList<Session>(async (offset, limit, signal) => listOf<Session>(await g8Get("/agent/sessions", { limit, offset }, { signal }), "sessions", "items"), [], { pageSize: 50 });
+  const rows = [...list.items].sort((a, b) => Number(Boolean(b.is_pinned)) - Number(Boolean(a.is_pinned)));
+  const open = rows.find((s) => s.id === openId) ?? null;
+
+  const create = useG8Mutation(async () => bodyOf<Session>(await g8Post("/agent/sessions", {})).id ?? null, { onSuccess: (id) => { list.reload(); if (id) { setOpenId(id); setReply(null); } } });
+  const rename = useG8Mutation((v: { id: string; title: string }) => g8Post(`/agent/sessions/${enc(v.id)}/rename`, { title: v.title }), { onSuccess: () => { setRenaming(null); list.reload(); } });
+  const pin = useG8Mutation((v: { id: string; pinned: boolean }) => g8Post(`/agent/sessions/${enc(v.id)}/pin`, { is_pinned: v.pinned }), { onSuccess: () => list.reload() });
+  const remove = useG8Mutation((id: string) => g8Delete(`/agent/sessions/${enc(id)}`), { onSuccess: (_r, id) => { setDeleting(null); if (openId === id) setOpenId(null); list.reload(); }, onError: () => setDeleting(null) });
+  const note = useG8Mutation((v: { id: string; content: string }) => g8Post(`/agent/sessions/${enc(v.id)}/messages`, { content: v.content }), { onSuccess: () => { setDraft(""); setTurn((t) => t + 1); } });
+  // One id per turn, reused when the same turn is retried, so a retry after a timeout cannot be charged twice (the API dedupes on it within a session).
+  const turn = useRef<{ id: string; text: string } | null>(null);
+  const ask = useG8Mutation(async (message: string) => {
+    if (turn.current?.text !== message) turn.current = { id: globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-${Math.random().toString(16).slice(2)}`, text: message };
+    return bodyOf<{ message?: string; kind?: string; work_item_id?: string; session_id?: string }>(await g8Post("/agent/chat", { message, ...(openId ? { session_id: openId, client_turn_id: turn.current.id } : {}) }));
+  },
+    { onSuccess: (r) => { turn.current = null; setAsking(null); setDraft(""); setReply(r); setTurn((t) => t + 1); list.reload(); if (!openId && (r as { session_id?: string }).session_id) setOpenId((r as { session_id?: string }).session_id ?? null); }, onError: () => setAsking(null) });
+
+  return (
+    <div className={`grid gap-4 lg:grid-cols-[18rem_1fr] ${className ?? ""}`}>
+      <div className="flex flex-col gap-2">
+        <div className="flex items-center justify-between"><h3 className="text-sm font-medium">Sessions</h3><Button size="sm" variant="outline" loading={create.loading} onClick={() => void create.mutate(undefined)}>New session</Button></div>
+        {list.error ? <ApiError error={list.error} title="Could not load sessions" onRetry={list.reload} /> : null}
+        {list.loading ? <Skeleton className="h-16 w-full" aria-label="Loading sessions" /> : null}
+        <ul className="divide-y rounded-md border">
+          {rows.map((s) => (
+            <li key={s.id} className={s.id === openId ? "bg-accent" : ""}>
+              <button type="button" data-testid={`session-${s.id}`} className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm" onClick={() => { setOpenId(s.id ?? null); setReply(null); setRenaming(null); }}>
+                {s.is_pinned ? <Pin className="size-3.5 shrink-0" aria-label="Pinned" /> : null}
+                <span className="min-w-0"><span className="block truncate font-medium">{s.title || "Untitled session"}</span><span className="block text-xs text-muted-foreground">{s.updated_at ? new Date(s.updated_at).toLocaleString() : ""}</span></span>
+              </button>
+            </li>
+          ))}
+        </ul>
+        {!list.loading && !list.error && rows.length === 0 ? <EmptyState compact icon={<MessagesSquare strokeWidth={1.5} />} title="No sessions yet" description="Ask the assistant something to start one." /> : null}
+        <LoadMore list={list} noun="sessions" />
+        {create.error ? <ApiError error={create.error} title="Could not start a session" /> : null}
+      </div>
+      <div className="flex min-w-0 flex-col gap-3">
+        {open?.id ? (
+          <>
+            <div className="flex flex-wrap items-center gap-2">
+              {renaming === open.id ? (
+                <><Input aria-label="Session title" className="max-w-xs" value={title} onChange={(e) => setTitle(e.target.value)} /><Button size="sm" loading={rename.loading} disabled={!title.trim()} onClick={() => void rename.mutate({ id: open.id as string, title: title.trim() })}>Save title</Button><Button size="sm" variant="ghost" onClick={() => setRenaming(null)}>Cancel</Button></>
+              ) : (
+                <><h3 className="text-sm font-medium">{open.title || "Untitled session"}</h3><Button size="sm" variant="outline" onClick={() => { setTitle(open.title ?? ""); setRenaming(open.id ?? null); }}>Rename</Button>
+                  <Button size="sm" variant="outline" loading={pin.loading} onClick={() => void pin.mutate({ id: open.id as string, pinned: !open.is_pinned })}>{open.is_pinned ? "Unpin" : "Pin"}</Button><Button size="sm" variant="ghost" onClick={() => setDeleting(open)}>Delete</Button></>
+              )}
+            </div>
+            {rename.error ? <ApiError error={rename.error} title="Could not rename the session" /> : null}
+            {pin.error ? <ApiError error={pin.error} title="Could not pin the session" /> : null}
+            <Transcript sessionId={open.id} refreshKey={turnKey} />
+          </>
+        ) : <p className="text-sm text-muted-foreground">Pick a session, or ask below to start a new one.</p>}
+        {reply?.message ? <p role="status" className="rounded-md border bg-accent px-3 py-2 text-sm" data-testid="assistant-reply">{reply.message}</p> : null}
+        {reply?.kind === "work_item" && reply.work_item_id ? <p role="status" className="text-sm">The assistant started a run. {onOpenRun ? <button type="button" className="underline" onClick={() => onOpenRun(reply.work_item_id as string)}>Open the run</button> : <span className="text-muted-foreground">Follow it on the Runs tab ({reply.work_item_id}).</span>}</p> : null}
+        <div className="flex flex-col gap-2 border-t pt-3">
+          <Textarea aria-label="Message to the assistant" rows={3} value={draft} onChange={(e) => setDraft(e.target.value)} placeholder="Ask the assistant, or leave it a note" />
+          {ask.error ? <ApiError error={ask.error} title="The assistant could not answer" /> : null}
+          {note.error ? <ApiError error={note.error} title="Could not add the note" /> : null}
+          <div className="flex justify-end gap-2">
+            <Button variant="outline" loading={note.loading} disabled={!draft.trim() || !open?.id} onClick={() => open?.id && void note.mutate({ id: open.id, content: draft.trim() })}>Add a note</Button>
+            <Button disabled={!draft.trim()} onClick={() => setAsking(draft.trim())}>Ask</Button>
+          </div>
+        </div>
+      </div>
+      {remove.error ? <ApiError error={remove.error} title="Could not delete the session" /> : null}
+      <ConfirmSpendDialog open={asking != null} tier="billable" title="Ask the assistant" description="The assistant runs a model for this turn and charges for it. If it reads your message as a job, it starts a run that works on its own and spends credits as it goes."
+        confirmLabel="Ask" confirming={ask.loading} onConfirm={() => asking && void ask.mutate(asking)} onCancel={() => setAsking(null)} />
+      <ConfirmSpendDialog open={deleting != null} tier="destructive" title={`Delete "${deleting?.title || "this session"}"`} description="The conversation and its history are removed." affected={1}
+        confirmLabel="Delete" confirming={remove.loading} onConfirm={() => deleting?.id && void remove.mutate(deleting.id)} onCancel={() => setDeleting(null)} />
+    </div>
+  );
+}

package/blocks/agents/components/duplicate-agent-button.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+/**
+ * DuplicateAgentButton: copy an agent under a new name. The copy keeps the persona, voice, knowledge and skills and is a separate agent
+ * from then on. The copy is made once: if the dialog is retried after a failure, the id of the copy already made is reused.
+ *
+ * SDK operations:
+ *   cloneAgent   POST /voice/agents/clone { source_agent_id, new_agent_name }   (write)
+ */
+import { useRef, useState } from "react";
+import { Button } from "@graph8/sdk/ui";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { g8Post } from "@/g8/lib/g8-client";
+import { agentIdOf } from "../lib/agent-types";
+import type { AgentSummary } from "../lib/agent-types";
+import { NameDialog } from "./name-dialog";
+
+export interface DuplicateAgentButtonProps {
+  agent: Pick<AgentSummary, "agent_id" | "agent_name">;
+  /** Called with the id of the new agent. */
+  onDuplicated?: (agentId: string) => void;
+  variant?: "outline" | "ghost";
+}
+
+export function DuplicateAgentButton({ agent, onDuplicated, variant = "outline" }: DuplicateAgentButtonProps) {
+  const [open, setOpen] = useState(false);
+  const [name, setName] = useState("");
+  const made = useRef<string | null>(null);
+  const clone = useG8Mutation(async (n: string) => {
+    if (made.current) return made.current;
+    const id = agentIdOf(await g8Post("/voice/agents/clone", { source_agent_id: agent.agent_id, new_agent_name: n }));
+    made.current = id || null;
+    return id;
+  }, { onSuccess: (id) => { made.current = null; setOpen(false); if (id) onDuplicated?.(id); } });
+  return (
+    <>
+      <Button size="sm" variant={variant} onClick={() => { made.current = null; clone.reset(); setName(`Copy of ${agent.agent_name}`); setOpen(true); }}>Duplicate</Button>
+      <NameDialog open={open} title={`Duplicate ${agent.agent_name}`} description="The copy keeps the persona, voice, knowledge and skills. It is a separate agent from now on." label="Name of the copy"
+        value={name} onChange={setName} confirm="Duplicate" busy={clone.loading} error={clone.error} onCancel={() => setOpen(false)} onConfirm={() => void clone.mutate(name.trim())} />
+    </>
+  );
+}

package/blocks/agents/components/from-template-button.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+/**
+ * FromTemplateButton: start a new agent from a graph8 or workspace template. Pick a template, name the agent, and it is created as a copy
+ * (adjust it afterwards). The copy is made once: a retry after a failure reuses the id of the copy already made.
+ *
+ * SDK operations, in order:
+ *   1. listAgentTemplates   GET  /voice/agent-templates?entity_type=agent&include_system_templates=true   (read)
+ *   2. cloneAgent           POST /voice/agents/clone { source_agent_id, new_agent_name }                   (write)
+ */
+import { useRef, useState } from "react";
+import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, Label, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+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 { agentIdOf, listOf } from "../lib/agent-types";
+
+export interface FromTemplateButtonProps {
+  /** Called with the id of the new agent. */
+  onCreated?: (agentId: string) => void;
+}
+
+interface Template { agent_id: string; agent_name: string; role?: string; description?: string | null }
+
+export function FromTemplateButton({ onCreated }: FromTemplateButtonProps) {
+  const [open, setOpen] = useState(false);
+  const [picked, setPicked] = useState<Template | null>(null);
+  const [name, setName] = useState("");
+  const made = useRef<string | null>(null);
+  const templates = useG8Query((signal) => g8Get("/voice/agent-templates", { entity_type: "agent", include_system_templates: true }, { signal }), [], { enabled: open });
+  const create = useG8Mutation(async (v: { source: string; name: string }) => {
+    if (made.current) return made.current;
+    const id = agentIdOf(await g8Post("/voice/agents/clone", { source_agent_id: v.source, new_agent_name: v.name }));
+    made.current = id || null;
+    return id;
+  }, { onSuccess: (id) => { made.current = null; setOpen(false); setPicked(null); if (id) onCreated?.(id); } });
+  const rows = listOf<Template>(templates.data, "templates", "items");
+  return (
+    <>
+      <Button variant="outline" onClick={() => { made.current = null; create.reset(); setOpen(true); }}>From a template</Button>
+      <Dialog open={open} onOpenChange={(o) => !o && !create.loading && setOpen(false)}>
+        <DialogContent>
+          <DialogHeader><DialogTitle>Start from a template</DialogTitle><DialogDescription>Pick a template, name your agent, and adjust 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={t.agent_id}>
+                <button type="button" aria-pressed={picked?.agent_id === t.agent_id} className={`block w-full px-3 py-2 text-left text-sm ${picked?.agent_id === t.agent_id ? "bg-accent" : ""}`} onClick={() => { setPicked(t); setName(t.agent_name); }}>
+                  <span className="font-medium">{t.agent_name}</span>{t.role ? <span className="ml-2 text-xs text-muted-foreground">{t.role}</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">No templates yet. Save an agent as a template first.</p> : null}
+          {picked ? <div className="flex flex-col gap-1"><Label htmlFor="template-agent-name">Name of the new agent</Label><Input id="template-agent-name" value={name} onChange={(e) => setName(e.target.value)} /></div> : null}
+          {create.error ? <ApiError error={create.error} title="Could not create the agent" /> : null}
+          <DialogFooter><Button variant="ghost" disabled={create.loading} onClick={() => setOpen(false)}>Cancel</Button><Button loading={create.loading} disabled={!picked || !name.trim()} onClick={() => picked && void create.mutate({ source: picked.agent_id, name: name.trim() })}>Create agent</Button></DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}