Integrations

import { useAgentSession } from '@wacht/nextjs';export default function AgentShell({  ticket,}: {  ticket?: string | null;}) {  const {    hasSession,    sessionLoading,    sessionError,    actor,    agents,    ticketExchanged,  } = useAgentSession(ticket);  if (sessionLoading) {    return <div>Loading agent session...</div>;  }  if (!hasSession || sessionError) {    return <div>Access required</div>;  }  return (    <div>      <h1>{actor?.display_name ?? 'Actor'}</h1>      <p>{agents.length} agents available</p>      {ticket ? <p>Ticket exchanged: {String(ticketExchanged)}</p> : null}    </div>  );}

import { useActorProjects } from '@wacht/nextjs';export default function ProjectsPage() {  const { projects, loading, createProject } = useActorProjects();  if (loading) {    return <div>Loading projects...</div>;  }  return (    <div>      <button        onClick={async () => {          await createProject({            name: 'Planning',            agent_id: 'agent_123',          });        }}      >        Create project      </button>      <ul>        {projects.map((project) => (          <li key={project.id}>{project.name}</li>        ))}      </ul>    </div>  );}

import { useState } from 'react';import { useActorProjectSearch } from '@wacht/nextjs';export default function ProjectSearch() {  const [query, setQuery] = useState('');  const { projects, loading } = useActorProjectSearch({ query, limit: 12 });  return (    <div>      <input value={query} onChange={(event) => setQuery(event.target.value)} />      {loading ? <div>Searching…</div> : null}      <ul>        {projects.map((project) => (          <li key={project.id}>{project.name}</li>        ))}      </ul>    </div>  );}

import { useState } from 'react';import { useActorThreadSearch } from '@wacht/nextjs';export default function ThreadSearch() {  const [query, setQuery] = useState('');  const { threads } = useActorThreadSearch({ query, limit: 16 });  return (    <div>      <input value={query} onChange={(event) => setQuery(event.target.value)} />      <ul>        {threads.map((thread) => (          <li key={thread.id}>{thread.title || thread.responsibility || thread.id}</li>        ))}      </ul>    </div>  );}

import { useProjectThreads } from '@wacht/nextjs';export default function ProjectThreadList({  projectId,}: {  projectId: string;}) {  const { threads, createThread } = useProjectThreads(projectId);  return (    <div>      <button        onClick={async () => {          await createThread({            title: 'Planning thread',            agent_id: 'agent_123',          });        }}      >        New thread      </button>      <ul>        {threads.map((thread) => (          <li key={thread.id}>{thread.title}</li>        ))}      </ul>    </div>  );}

import { useProjectThreadFeed } from '@wacht/nextjs';export default function ThreadFeed({  projectId,}: {  projectId: string;}) {  const { threads, hasMore, loadMore } = useProjectThreadFeed(projectId, {    query: '',  });  return (    <div>      <ul>        {threads.map((thread) => (          <li key={thread.id}>{thread.title}</li>        ))}      </ul>      {hasMore ? <button onClick={() => void loadMore()}>Load more</button> : null}    </div>  );}

import { useAgentThread } from '@wacht/nextjs';export default function ThreadDetail({  threadId,}: {  threadId: string;}) {  const { thread, updateThread } = useAgentThread(threadId, true);  if (!thread) {    return <div>Loading thread...</div>;  }  return (    <button      onClick={async () => {        await updateThread({          title: 'Updated title',        });      }}    >      {thread.title}    </button>  );}

import { useAgentThreadConversation } from '@wacht/nextjs';export default function ThreadConversation({  threadId,}: {  threadId: string;}) {  const {    messages,    sendMessage,    pendingApprovalRequest,    submitApprovalResponse,  } = useAgentThreadConversation({ threadId });  return (    <div>      <ul>        {messages.map((message) => (          <li key={message.id}>{message.content.type}</li>        ))}      </ul>      {pendingApprovalRequest ? (        <button          onClick={() =>            submitApprovalResponse('allow_once', pendingApprovalRequest.request_message_id)          }        >          Approve once        </button>      ) : null}      <button onClick={() => void sendMessage('Continue with the plan')}>Send</button>    </div>  );}

import { useEffect } from 'react';import { useAgentThreadFilesystem } from '@wacht/nextjs';export default function FilesystemPane({  threadId,}: {  threadId: string;}) {  const { filesystem, getFile } = useAgentThreadFilesystem(threadId, true);  useEffect(() => {    const firstFile = filesystem.files.find((entry) => !entry.is_dir);    if (firstFile) {      void getFile(firstFile.path);    }  }, [filesystem.files, getFile]);  return <div>{filesystem.files.length} items</div>;}

import { useAgentThreadEvents } from '@wacht/nextjs';export default function ThreadEvents({  threadId,}: {  threadId: string;}) {  const { events, hasMore, loadMore } = useAgentThreadEvents(threadId, {    enabled: !!threadId,  });  return (    <div>      <ul>        {events.map((event) => (          <li key={event.id}>{event.event_type}</li>        ))}      </ul>      {hasMore ? <button onClick={() => void loadMore()}>More</button> : null}    </div>  );}

import { useAgentThreadAssignments } from '@wacht/nextjs';export default function ThreadAssignments({  threadId,}: {  threadId: string;}) {  const { assignments } = useAgentThreadAssignments(threadId, {    enabled: !!threadId,  });  return (    <ul>      {assignments.map((assignment) => (        <li key={assignment.id}>{assignment.assignment_role}</li>      ))}    </ul>  );}

import { useProjectTasks } from '@wacht/nextjs';export default function ProjectTasks({  projectId,}: {  projectId: string;}) {  const { tasks, createTask } = useProjectTasks(projectId, true, {    limit: 40,  });  return (    <div>      <button        onClick={async () => {          await createTask({            title: 'Review webhook errors',            priority: 'high',          });        }}      >        New task      </button>      <ul>        {tasks.map((task) => (          <li key={task.id}>{task.title}</li>        ))}      </ul>    </div>  );}

import { useProjectTaskBoardItem } from '@wacht/nextjs';export default function TaskDetail({  projectId,  itemId,}: {  projectId: string;  itemId: string;}) {  const { item, appendJournal, taskWorkspace } = useProjectTaskBoardItem(    projectId,    itemId,    true,  );  return (    <div>      <h1>{item?.title}</h1>      <p>{taskWorkspace.files.length} workspace entries</p>      <button        onClick={async () => {          await appendJournal({            summary: 'Reviewed task output',          });        }}      >        Add journal entry      </button>    </div>  );}

import { useAgentThreadTaskGraphs } from '@wacht/nextjs';export default function TaskGraphs({  threadId,}: {  threadId: string;}) {  const { graphs, latestGraph } = useAgentThreadTaskGraphs(threadId, true);  return (    <div>      <p>{graphs.length} graphs loaded</p>      <p>Latest: {latestGraph?.graph.status ?? 'none'}</p>    </div>  );}

import { useActorMcpServers } from '@wacht/nextjs';export default function McpServers() {  const { servers, connect, disconnect } = useActorMcpServers(true);  return (    <ul>      {servers.map((server) => (        <li key={server.id}>          {server.name}          <button            onClick={async () => {              const result = await connect(server.id);              window.open(result.data.auth_url, '_blank', 'noopener,noreferrer');            }}          >            Connect          </button>          <button onClick={() => void disconnect(server.id)}>Disconnect</button>        </li>      ))}    </ul>  );}

import { useWebhookAppSession } from '@wacht/nextjs';export default function WebhookShell({  ticket,}: {  ticket?: string | null;}) {  const {    hasSession,    sessionLoading,    webhookApp,    rotateSecret,  } = useWebhookAppSession(ticket);  if (sessionLoading) {    return <div>Loading webhook app...</div>;  }  if (!hasSession) {    return <div>Access required</div>;  }  return (    <div>      <h1>{webhookApp?.name}</h1>      <button onClick={rotateSecret}>Rotate secret</button>    </div>  );}

import { useWebhookStats } from '@wacht/nextjs';export default function WebhookSnapshot() {  const { stats, loading } = useWebhookStats();  if (loading) {    return <div>Loading stats...</div>;  }  return (    <div>      <p>Endpoints: {stats?.endpoint_count ?? 0}</p>      <p>Events: {stats?.event_count ?? 0}</p>      <p>Pending deliveries: {stats?.pending_deliveries ?? 0}</p>    </div>  );}

import { useWebhookEndpoints } from '@wacht/nextjs';export default function EndpointList() {  const { endpoints, loading } = useWebhookEndpoints();  if (loading) {    return <div>Loading endpoints...</div>;  }  return (    <ul>      {endpoints.map((endpoint) => (        <li key={endpoint.id}>          {endpoint.url} · {endpoint.subscribed_events.length} events        </li>      ))}    </ul>  );}

import { useCreateWebhookEndpoint } from '@wacht/nextjs';export default function CreateEndpointButton() {  const { createEndpoint } = useCreateWebhookEndpoint();  async function handleCreate() {    await createEndpoint({      url: 'https://example.com/webhooks',      subscribed_events: ['user.created'],    });  }  return <button onClick={handleCreate}>Create endpoint</button>;}

import { useState } from 'react';import { useWebhookDeliveries } from '@wacht/nextjs';export default function WebhookLogsPage() {  const [status, setStatus] = useState<string>('all');  const [eventName, setEventName] = useState<string>('all');  const { deliveries, has_more, next_cursor, loading } = useWebhookDeliveries({    status: status === 'all' ? undefined : status,    event_name: eventName === 'all' ? undefined : eventName,    limit: 30,  });  if (loading) {    return <div>Loading deliveries...</div>;  }  return (    <div>      <p>{deliveries.length} deliveries</p>      <p>{has_more ? next_cursor : 'No more pages'}</p>    </div>  );}

import { useWebhookEvents } from '@wacht/nextjs';export default function EventCatalog() {  const { events, loading } = useWebhookEvents();  if (loading) {    return <div>Loading events...</div>;  }  return (    <ul>      {events.map((event) => (        <li key={event.event_name}>          {event.event_name}        </li>      ))}    </ul>  );}

import { useWebhookAnalytics } from '@wacht/nextjs';export default function WebhookOverview() {  const { analytics, loading } = useWebhookAnalytics({    fields: ['total_deliveries', 'successful', 'failed', 'success_rate'],  });  if (loading) {    return <div>Loading analytics...</div>;  }  return (    <div>      <p>Total deliveries: {analytics?.total_deliveries ?? 0}</p>      <p>Success rate: {(analytics?.success_rate ?? 0).toFixed(1)}%</p>    </div>  );}

import { useWebhookTimeseries } from '@wacht/nextjs';export default function DeliveryTrend({  startDate,  endDate,}: {  startDate: string;  endDate: string;}) {  const { timeseries, loading } = useWebhookTimeseries({    start_date: startDate,    end_date: endDate,    interval: 'day',  });  if (loading) {    return <div>Loading chart data...</div>;  }  return <div>{timeseries.length} points</div>;}

import { useApiAuthAppSession } from '@wacht/nextjs';export default function ApiIdentityShell({  ticket,}: {  ticket?: string | null;}) {  const {    hasSession,    sessionLoading,    apiAuthApp,  } = useApiAuthAppSession(ticket);  if (sessionLoading) {    return <div>Loading API identity...</div>;  }  if (!hasSession) {    return <div>Access required</div>;  }  return (    <div>      <h1>{apiAuthApp?.name}</h1>      <p>{apiAuthApp?.key_prefix}</p>    </div>  );}

import { useState } from 'react';import { useApiAuthKeys } from '@wacht/nextjs';export default function KeysPage() {  const [status, setStatus] = useState<'active' | 'revoked' | 'all'>('active');  const { keys, loading, createKey, rotateKey, revokeKey } = useApiAuthKeys({    status,  });  if (loading) {    return <div>Loading keys...</div>;  }  return (    <div>      <button        onClick={async () => {          const result = await createKey({ name: 'Production Backend' });          console.log(result.data.secret);        }}      >        Create key      </button>      <ul>        {keys.map((key) => (          <li key={key.id}>            {key.name}            <button onClick={async () => {              const result = await rotateKey({ key_id: key.id });              console.log(result.data.secret);            }}>Rotate</button>            <button onClick={async () => {              await revokeKey({ key_id: key.id });            }}>Revoke</button>          </li>        ))}      </ul>    </div>  );}

import { useMemo, useState } from 'react';import { addDays } from 'date-fns';import { useApiAuthAuditLogs } from '@wacht/nextjs';export default function AccessLogsPage() {  const [page, setPage] = useState(1);  const [cursors, setCursors] = useState<string[]>([]);  const [outcome, setOutcome] = useState<'all' | 'allowed' | 'blocked'>('all');  const startDate = useMemo(() => {    const d = addDays(new Date(), -7);    d.setHours(0, 0, 0, 0);    return d.toISOString();  }, []);  const endDate = useMemo(() => {    const d = new Date();    d.setHours(23, 59, 59, 999);    return d.toISOString();  }, []);  const cursor = page > 1 ? cursors[page - 2] : undefined;  const { logs, has_more, next_cursor, loading } = useApiAuthAuditLogs({    limit: 25,    cursor,    outcome: outcome === 'all' ? undefined : outcome,    start_date: startDate,    end_date: endDate,  });  if (!loading && next_cursor && page === cursors.length + 1) {    setCursors((prev) => [...prev, next_cursor]);  }  return (    <div>      <button onClick={() => setOutcome('blocked')}>Blocked only</button>      <ul>        {logs.map((log) => (          <li key={log.request_id}>{log.path}</li>        ))}      </ul>      <button disabled={!has_more} onClick={() => setPage((current) => current + 1)}>        Next      </button>    </div>  );}

import { addDays } from 'date-fns';import { useApiAuthAuditAnalytics } from '@wacht/nextjs';export default function ApiIdentityOverview() {  const start = addDays(new Date(), -7).toISOString();  const end = new Date().toISOString();  const { analytics, loading } = useApiAuthAuditAnalytics({    start_date: start,    end_date: end,    include_top_keys: true,    include_top_paths: true,    include_blocked_reasons: true,    include_rate_limits: true,  });  if (loading) {    return <div>Loading analytics...</div>;  }  return (    <div>      <p>Total requests: {analytics?.total_requests}</p>      <p>Success rate: {analytics?.success_rate}</p>    </div>  );}

import { addDays } from 'date-fns';import { useApiAuthAuditTimeseries } from '@wacht/nextjs';export default function ApiIdentityChart() {  const start = addDays(new Date(), -7).toISOString();  const end = new Date().toISOString();  const { timeseries, interval, loading } = useApiAuthAuditTimeseries({    start_date: start,    end_date: end,    interval: 'day',  });  if (loading) {    return <div>Loading chart…</div>;  }  return (    <div>      <p>Interval: {interval}</p>      <p>Points: {timeseries.length}</p>    </div>  );}