import React, { useCallback, useEffect, useMemo, useState } from 'react';

import { createRoot } from 'react-dom/client';

import { Bot } from 'lucide-react';

import { AppShell } from '@/components/app-shell';

import { Input } from '@/components/ui/input';

import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';

import { pageMeta, pages, type Page } from '@/lib/navigation';

import {

  applyPreviewRequest,

  createPreviewData,

  defaultPreviewSettings,

  disablePreview,

  enablePreview,

  isPreviewActive,

  previewSession,

} from './preview.js';

import './styles.css';

declare const __AUTH0_DOMAIN__: string;

declare const __AUTH0_CLIENT_ID__: string;

declare const __AUTH0_AUDIENCE__: string;

type Auth0User = { sub: string; name?: string; email?: string; picture?: string };

type AuthSession = { user: Auth0User };

type AuthTransaction = { state: string; nonce: string; verifier: string };

type Theme = 'dark' | 'light';

const authTransactionKey = 'openclasp.auth0.transaction';

const themeKey = 'openclasp.theme.v1';

type DashboardData = {

  agents: Record<string, any>[];

  projects: Record<string, any>[];

  installations: Record<string, any>[];

  setupRequests: Record<string, any>[];

  publications: Record<string, any>[];

  interactions: Record<string, any>[];

  federatedInteractions: Record<string, any>[];

  liveSessions: Record<string, any>[];

  hostedThreads: Record<string, any>[];

  events: Record<string, any>[];

  conflicts: Record<string, any>[];

  receipts: Record<string, any>[];

  profiles: Record<string, any>[];

  counterpartyBriefs: Record<string, any>[];

  completionReports: Record<string, any>[];

  feedbackRequests: Record<string, any>[];

  interactionFeedback: Record<string, any>[];

  interactionConclusions: Record<string, any>[];

  learningEligibility: Record<string, any>[];

  profileDeltas: Record<string, any>[];

  runtimes: Record<string, any>[];

  accessTokens: Record<string, any>[];

};

type Settings = {

  displayName: string;

  contributionEnabled: boolean;

  retentionDays: number;

  evidenceSharing: 'never' | 'ask' | 'contract_only';

  rawConversationsStored: false;

};

const emptyData: DashboardData = {

  agents: [],

  projects: [],

  installations: [],

  setupRequests: [],

  publications: [],

  interactions: [],

  federatedInteractions: [],

  liveSessions: [],

  hostedThreads: [],

  events: [],

  conflicts: [],

  receipts: [],

  profiles: [],

  counterpartyBriefs: [],

  completionReports: [],

  feedbackRequests: [],

  interactionFeedback: [],

  interactionConclusions: [],

  learningEligibility: [],

  profileDeltas: [],

  runtimes: [],

  accessTokens: [],

};

const defaultSettings: Settings = {

  displayName: '',

  contributionEnabled: false,

  retentionDays: 30,

  evidenceSharing: 'ask',

  rawConversationsStored: false,

};

function normalizeDashboard(value: unknown): DashboardData {

  return { ...emptyData, ...(value as Partial<DashboardData>) };

}

function base64Url(bytes: Uint8Array) {

  let binary = '';

  for (const byte of bytes) binary += String.fromCharCode(byte);

  return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');

}

function randomValue(size = 32) {

  return base64Url(crypto.getRandomValues(new Uint8Array(size)));

}

async function beginAuth(provider: 'google' | 'github') {

  const verifier = randomValue(48);

  const digest = await crypto.subtle.digest(

    'SHA-256',

    new TextEncoder().encode(verifier) as BufferSource,

  );

  const transaction: AuthTransaction = { state: randomValue(), nonce: randomValue(), verifier };

  sessionStorage.setItem(authTransactionKey, JSON.stringify(transaction));

  const parameters = new URLSearchParams({

    client_id: __AUTH0_CLIENT_ID__,

    redirect_uri: `${new URL(__AUTH0_AUDIENCE__).origin}/sso-callback`,

    response_type: 'code',

    scope: 'openid profile email',

    audience: __AUTH0_AUDIENCE__,

    state: transaction.state,

    nonce: transaction.nonce,

    code_challenge: base64Url(new Uint8Array(digest)),

    code_challenge_method: 'S256',

    connection: provider === 'google' ? 'google-oauth2' : 'github',

  });

  location.assign(`https://${__AUTH0_DOMAIN__}/authorize?${parameters}`);

}

async function signOut(preview: boolean) {

  if (preview) {

    disablePreview();

    location.replace('/login');

    return;

  }

  await fetch('/api/session', { method: 'DELETE', credentials: 'same-origin' });

  const parameters = new URLSearchParams({

    client_id: __AUTH0_CLIENT_ID__,

    returnTo: `${new URL(__AUTH0_AUDIENCE__).origin}/login`,

  });

  location.assign(`https://${__AUTH0_DOMAIN__}/v2/logout?${parameters}`);

}

async function remoteApi(path: string, init?: RequestInit) {

  const headers = new Headers(init?.headers);

  if (init?.body && !headers.has('content-type')) headers.set('content-type', 'application/json');

  return fetch(path, {

    ...init,

    credentials: 'same-origin',

    headers,

  }).then(async (response) => {

    if (!response.ok)

      throw new Error((await response.text()) || `Request failed: ${response.status}`);

    return response.json();

  });

}

function route(): Page {

  const value = location.pathname.slice(1) || 'dashboard';

  return pages.includes(value as Page) ? (value as Page) : 'dashboard';

}

function initialTheme(): Theme {

  const saved = localStorage.getItem(themeKey);

  if (saved === 'dark' || saved === 'light') return saved;

  return matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';

}

function App() {

  const [session, setSession] = useState<AuthSession | null>();

  const [preview, setPreview] = useState(false);

  const [theme, setTheme] = useState<Theme>(initialTheme);

  const [page, setPage] = useState<Page>(route());

  const [data, setData] = useState<DashboardData>(emptyData);

  const [settings, setSettings] = useState<Settings>(defaultSettings);

  const [loading, setLoading] = useState(true);

  const [error, setError] = useState('');

  const api = useCallback(

    async (path: string, init?: RequestInit) => {

      if (preview) {

        const next = applyPreviewRequest(data, settings, path, init);

        setData(next.data);

        setSettings(next.settings);

        return next.result;

      }

      return remoteApi(path, init);

    },

    [data, preview, settings],

  );

  const refreshDashboard = useCallback(async () => {

    if (preview) return;

    setData(normalizeDashboard(await remoteApi('/v0.1/dashboard')));

  }, [preview]);

  useEffect(() => {

    document.title = session

      ? `${pageMeta[page].label} · OpenClasp`

      : session === null

        ? 'Sign in · OpenClasp'

        : 'OpenClasp';

  }, [page, session]);

  useEffect(() => {

    let cancelled = false;

    const boot = async () => {

      if (import.meta.env.DEV && isPreviewActive()) {

        if (cancelled) return;

        setPreview(true);

        setSession(previewSession);

        setData(createPreviewData());

        setSettings(defaultPreviewSettings);

        setLoading(false);

        return;

      }

      try {

        const response = await fetch('/api/session', { credentials: 'same-origin' });

        if (!response.ok) {

          if (!cancelled && !(import.meta.env.DEV && isPreviewActive())) setSession(null);

          return;

        }

        if (!cancelled && !(import.meta.env.DEV && isPreviewActive())) {

          setSession((await response.json()) as AuthSession);

        }

      } catch {

        if (!cancelled && !(import.meta.env.DEV && isPreviewActive())) setSession(null);

      }

    };

    void boot();

    return () => {

      cancelled = true;

    };

  }, []);

  useEffect(() => {

    document.documentElement.dataset.theme = theme;

    document.documentElement.classList.toggle('dark', theme === 'dark');

    localStorage.setItem(themeKey, theme);

    const meta = document.querySelector('meta[name="theme-color"]');

    if (meta) meta.setAttribute('content', theme === 'light' ? '#f7f4f2' : '#0c0a0a');

  }, [theme]);

  useEffect(() => {

    const onPopState = () => setPage(route());

    addEventListener('popstate', onPopState);

    return () => removeEventListener('popstate', onPopState);

  }, []);

  useEffect(() => {

    if (session === undefined) return;

    if (!session && location.pathname !== '/login') history.replaceState({}, '', '/login');

    if (!session) return;

    if (location.pathname === '/login') history.replaceState({}, '', '/dashboard');

    setPage(route());

    if (preview) {

      setLoading(false);

      return;

    }

    Promise.all([remoteApi('/v0.1/dashboard'), remoteApi('/v0.1/settings')])

      .then(([dashboard, accountSettings]) => {

        setData(normalizeDashboard(dashboard));

        setSettings(accountSettings as Settings);

      })

      .catch((reason: unknown) =>

        setError(reason instanceof Error ? reason.message : 'Load failed'),

      )

      .finally(() => setLoading(false));

  }, [preview, session]);

  useEffect(() => {

    if (!session || preview) return;

    const refresh = () => {

      if (document.visibilityState === 'visible') void refreshDashboard().catch(() => undefined);

    };

    const timer = window.setInterval(refresh, 10_000);

    document.addEventListener('visibilitychange', refresh);

    return () => {

      window.clearInterval(timer);

      document.removeEventListener('visibilitychange', refresh);

    };

  }, [preview, refreshDashboard, session]);

  const navigate = (next: Page) => {

    history.pushState({}, '', `/${next}`);

    setPage(next);

  };

  const pendingSetup = data.setupRequests.filter((request) => request.status === 'pending').length;

  const pendingInvites = data.federatedInteractions.filter(

    (interaction) => interaction.status === 'pending',

  ).length;

  const unreadThreads = data.hostedThreads.reduce(

    (total, thread) => total + Number(thread.unreadCount ?? 0),

    0,

  );

  if (session === undefined) return <Loading />;

  if (!session)

    return import.meta.env.DEV ? (

      <Login

        onPreview={() => {

          enablePreview();

          setPreview(true);

          setSession(previewSession);

          setData(createPreviewData());

          setSettings(defaultPreviewSettings);

          setLoading(false);

          history.replaceState({}, '', '/dashboard');

          setPage('dashboard');

        }}

      />

    ) : (

      <Login />

    );

  return (

    <AppShell

      page={page}

      navigate={navigate}

      user={session.user}

      theme={theme}

      onToggleTheme={() => setTheme((current) => (current === 'dark' ? 'light' : 'dark'))}

      onSignOut={() => void signOut(preview)}

      badges={{

        dashboard: pendingInvites || pendingSetup ? pendingInvites + pendingSetup : 0,

        conversations: unreadThreads,

        connect: pendingSetup,

      }}

      agents={data.agents.map((agent) => ({

        agentId: String(agent.agentId ?? ''),

        name: typeof agent.name === 'string' ? agent.name : undefined,

      }))}

      attention={{ setup: pendingSetup, invites: pendingInvites, inbox: unreadThreads }}

    >

      {preview && <div className="previewBanner">Local preview. Changes stay here.</div>}

      {error && (

        <div className="errorBar" role="alert">

          {error}

        </div>

      )}

      {loading ? (

        <Loading compact />

      ) : (

        <PageContent

          page={page}

          data={data}

          settings={settings}

          setSettings={setSettings}

          navigate={navigate}

          refreshDashboard={refreshDashboard}

          api={api}

        />

      )}

    </AppShell>

  );

}

function Login({ onPreview }: { onPreview?: () => void }) {

  const [error, setError] = useState('');

  const continueWith = async (provider: 'google' | 'github') => {

    setError('');

    try {

      await beginAuth(provider);

    } catch {

      setError(`${provider === 'google' ? 'Google' : 'GitHub'} sign-in is not configured yet.`);

    }

  };

  return (

    <div className="loginPage">

      <section className="loginPitch">

        <div className="brand">

          <div className="mark">OC</div>

          <strong>OpenClasp</strong>

        </div>

        <div>

          <p className="eyebrow">ASSURANCE</p>

          <h1>Know who your agent is dealing with.</h1>

          <p>Verified identities and signed outcomes. No message bodies for scoring.</p>

        </div>

        <div className="loginProof">

          <span>01</span> User-owned history

          <span>02</span> No universal trust score

          <span>03</span> Explicit network consent

        </div>

      </section>

      <section className="loginCard">

        <div>

          <p className="eyebrow">SECURE ACCESS</p>

          <h2>Sign in</h2>

          <p>Agents, signed history, and network controls.</p>

        </div>

        <div className="socialButtons">

          <button type="button" onClick={() => void continueWith('google')}>

            <GoogleMark /> Continue with Google

          </button>

          <button type="button" onClick={() => void continueWith('github')}>

            <GitHubMark /> Continue with GitHub

          </button>

          {onPreview && (

            <button type="button" onClick={() => void onPreview()}>

              Continue with local preview

            </button>

          )}

        </div>

        {error && (

          <div className="loginError" role="alert">

            {error}

          </div>

        )}

        <small>

          Google and GitHub handle authentication. OpenClasp never receives your password.

        </small>

      </section>

    </div>

  );

}

let callbackStarted = false;

function AuthCallback() {

  const [error, setError] = useState('');

  useEffect(() => {

    if (callbackStarted) return;

    callbackStarted = true;

    const finish = async () => {

      const query = new URLSearchParams(location.search);

      const oauthError = query.get('error_description') ?? query.get('error');

      if (oauthError) throw new Error(oauthError);

      const code = query.get('code');

      const returnedState = query.get('state');

      if (code && returnedState?.startsWith('oc_tx_')) {

        const response = await fetch('/api/oauth-callback', {

          method: 'POST',

          credentials: 'same-origin',

          headers: { 'content-type': 'application/json' },

          body: JSON.stringify({ code, state: returnedState }),

        });

        if (!response.ok) throw new Error('MCP authorization failed');

        const result = (await response.json()) as { redirectTo?: unknown };

        if (typeof result.redirectTo !== 'string')

          throw new Error('Invalid MCP authorization response');

        location.replace(result.redirectTo);

        return;

      }

      const rawTransaction = sessionStorage.getItem(authTransactionKey);

      if (!code || !returnedState || !rawTransaction) throw new Error('Missing OAuth transaction');

      const transaction = JSON.parse(rawTransaction) as AuthTransaction;

      sessionStorage.removeItem(authTransactionKey);

      if (returnedState !== transaction.state) throw new Error('OAuth state mismatch');

      const response = await fetch('/api/session', {

        method: 'POST',

        credentials: 'same-origin',

        headers: { 'content-type': 'application/json' },

        body: JSON.stringify({

          code,

          codeVerifier: transaction.verifier,

        }),

      });

      if (!response.ok) throw new Error('Auth0 token exchange failed');

      location.replace('/dashboard');

    };

    void finish().catch((reason: unknown) =>

      setError(reason instanceof Error ? reason.message : 'Authentication failed'),

    );

  }, []);

  if (error)

    return (

      <div className="loading">

        <span className="mark">OC</span>

        <p>{error}</p>

        <a href="/login">Return to login</a>

      </div>

    );

  return <Loading />;

}

function PageContent({

  page,

  data,

  settings,

  setSettings,

  navigate,

  refreshDashboard,

  api,

}: {

  page: Page;

  data: DashboardData;

  settings: Settings;

  setSettings: React.Dispatch<React.SetStateAction<Settings>>;

  navigate: (page: Page) => void;

  refreshDashboard: () => Promise<void>;

  api: (path: string, init?: RequestInit) => Promise<unknown>;

}) {

  if (page === 'history') return <History data={data} />;

  if (page === 'conversations')

    return <Conversations data={data} refreshDashboard={refreshDashboard} api={api} />;

  if (page === 'agents')

    return <Agents data={data} navigate={navigate} refreshDashboard={refreshDashboard} api={api} />;

  if (page === 'insights') return <Insights data={data} />;

  if (page === 'connect')

    return (

      <Connect data={data} navigate={navigate} refreshDashboard={refreshDashboard} api={api} />

    );

  if (page === 'settings')

    return <SettingsPage settings={settings} setSettings={setSettings} api={api} />;

  return <Overview data={data} navigate={navigate} refreshDashboard={refreshDashboard} api={api} />;

}

function Overview({

  data,

  navigate,

  refreshDashboard,

  api,

}: {

  data: DashboardData;

  navigate: (page: Page) => void;

  refreshDashboard: () => Promise<void>;

  api: (path: string, init?: RequestInit) => Promise<unknown>;

}) {

  const completed = data.receipts.filter((item) => item.outcome === 'success').length;

  const warnings = data.events.filter((item) =>

    ['policy_warning', 'policy_violation', 'objection'].includes(String(item.eventType)),

  ).length;

  const publishedIds = new Set(

    data.publications

      .filter((publication) => publication.published)

      .map((publication) => String(publication.agentId)),

  );

  const runtimeIds = new Set(

    data.runtimes

      .filter((runtime) => runtime.status === 'verified')

      .map((runtime) => String(runtime.agentId)),

  );

  const modeOf = (agent: Record<string, any>) =>

    agent.agentMode ?? (agent.a2aEndpoint ? 'persistent_runtime' : 'temporary_chat');

  const readyAgents = data.agents.filter(

    (agent) =>

      publishedIds.has(String(agent.agentId)) &&

      (modeOf(agent) === 'temporary_chat' || runtimeIds.has(String(agent.agentId))),

  ).length;

  const activeTemporaryChats = data.agents.filter(

    (agent) => modeOf(agent) === 'temporary_chat' && agent.presence?.status === 'online',

  ).length;

  const pendingInvitations = data.federatedInteractions.filter(

    (interaction) => interaction.status === 'pending',

  ).length;

  const pendingFeedback = data.feedbackRequests.filter(

    (request) => request.status === 'pending',

  ).length;

  const pendingSetup = data.setupRequests.filter((request) => request.status === 'pending').length;

  const reviewCount = warnings + pendingInvitations + pendingFeedback;

  return (

    <>

      <PageHead page="dashboard" action="Connect agent" onAction={() => navigate('connect')} />

      {pendingSetup > 0 && (

        <button className="attentionBanner" type="button" onClick={() => navigate('connect')}>

          <div>

            <span className="statusOrb">{pendingSetup}</span>

            <div>

              <strong>

                {pendingSetup} setup request{pendingSetup === 1 ? '' : 's'} waiting

              </strong>

            </div>

          </div>

        </button>

      )}

      {!(readyAgents === data.agents.length && readyAgents) && (

        <section className="readiness">

          <div>

            <span className="statusOrb">!</span>

            <div>

              <strong>

                {readyAgents} of {data.agents.length} agents can receive A2A work

              </strong>

            </div>

          </div>

          <button className="secondary" type="button" onClick={() => navigate('agents')}>

            Manage

          </button>

        </section>

      )}

      <section className="metrics">

        <Metric

          label="Active temporary chats"

          value={activeTemporaryChats}

          note={`${runtimeIds.size} persistent runtimes connected`}

        />

        <Metric

          label="Interactions"

          value={data.interactions.length + data.federatedInteractions.length}

          note="local and shared"

        />

        <Metric label="Successful outcomes" value={completed} note="receipt-backed" />

        <Metric

          label="Needs review"

          value={reviewCount}

          note={`${pendingFeedback} feedback · ${pendingInvitations} invitations`}

          warn={reviewCount > 0}

        />

      </section>

      <Invitations data={data} refreshDashboard={refreshDashboard} api={api} />

      <section className="contentGrid">

        <Panel title="Recent activity" subtitle="">

          <Timeline events={data.events.slice(-6).reverse()} />

          <TextButton onClick={() => navigate('history')}>All history</TextButton>

        </Panel>

        <Panel title="Reliability" subtitle="">

          {data.profiles.length ? (

            data.profiles.slice(0, 4).map((profile) => {

              const deltas = data.profileDeltas.filter(

                (delta) =>

                  delta.agentId === profile.agentId &&

                  delta.agentVersion === profile.agentVersion &&

                  delta.taskCategory === profile.taskCategory,

              );

              return (

                <Profile

                  key={`${profile.agentId}-${profile.agentVersion}-${profile.taskCategory}`}

                  profile={profile}

                  deltas={deltas}

                />

              );

            })

          ) : (

            <Empty

              title="No reliability profile yet"

              text="Profiles appear after signed receipts and eligible bilateral feedback."

            />

          )}

        </Panel>

      </section>

    </>

  );

}

function Conversations({

  data,

  refreshDashboard,

  api,

}: {

  data: DashboardData;

  refreshDashboard: () => Promise<void>;

  api: (path: string, init?: RequestInit) => Promise<unknown>;

}) {

  const [selected, setSelected] = useState<Record<string, any> | null>(null);

  const [selectedAgentId, setSelectedAgentId] = useState('');

  const [draft, setDraft] = useState('');

  const [working, setWorking] = useState(false);

  const [error, setError] = useState('');

  const temporaryAgentFor = (thread: Record<string, any>) =>

    data.agents.find(

      (agent) =>

        thread.participantAgentIds?.includes(agent.agentId) &&

        (agent.agentMode ?? (agent.a2aEndpoint ? 'persistent_runtime' : 'temporary_chat')) ===

          'temporary_chat',

    );

  const openThread = async (thread: Record<string, any>) => {

    const agent = temporaryAgentFor(thread);

    if (!agent) return;

    setWorking(true);

    setError('');

    try {

      const [detail] = (await Promise.all([

        api(

          `/v0.1/agents/${encodeURIComponent(agent.agentId)}/threads/${encodeURIComponent(thread.threadId)}`,

        ),

        api(

          `/v0.1/agents/${encodeURIComponent(agent.agentId)}/threads/${encodeURIComponent(thread.threadId)}/read`,

          { method: 'POST' },

        ),

      ])) as [Record<string, any>, unknown];

      setSelected(detail);

      setSelectedAgentId(String(agent.agentId));

      await refreshDashboard();

    } catch (reason) {

      setError(reason instanceof Error ? reason.message : 'Could not open conversation');

    } finally {

      setWorking(false);

    }

  };

  const reply = async () => {

    if (!selected || !draft.trim() || !selectedAgentId) return;

    setWorking(true);

    setError('');

    try {

      await api(`/v0.1/agents/${encodeURIComponent(selectedAgentId)}/messages`, {

        method: 'POST',

        body: JSON.stringify({

          interactionId: selected.thread.interactionId,

          content: draft.trim(),

        }),

      });

      setDraft('');

      await openThread(selected.thread);

    } catch (reason) {

      setError(reason instanceof Error ? reason.message : 'Could not send reply');

      setWorking(false);

    }

  };

  return (

    <>

      <PageHead page="conversations" />

      <div className="notice">

        <strong>Temporary only.</strong> Encrypted 30 days. Persistent runtime messages stay direct.

      </div>

      {error ? (

        <div className="errorBar" role="alert">

          {error}

        </div>

      ) : null}

      <section className="conversationLayout">

        <Panel title="Threads" subtitle="Temporary chat identities only">

          <div className="threadList">

            {data.hostedThreads.length ? (

              data.hostedThreads.map((thread) => {

                const agent = temporaryAgentFor(thread);

                const peer = thread.participantAgentIds?.find(

                  (value: string) => value !== agent?.agentId,

                );

                return (

                  <button

                    type="button"

                    key={thread.threadId}

                    className={selected?.thread?.threadId === thread.threadId ? 'active' : ''}

                    onClick={() => void openThread(thread)}

                    disabled={working}

                  >

                    <span>

                      <strong>{peer ?? 'Counterparty'}</strong>

                      <small>{agent?.name ?? agent?.agentId}</small>

                    </span>

                    <b>{thread.unreadCount ? `${thread.unreadCount} NEW` : thread.status}</b>

                  </button>

                );

              })

            ) : (

              <Empty

                title="No temporary conversations"

                text="Messages appear after a temporary chat identity accepts an interaction with a persistent runtime."

              />

            )}

          </div>

        </Panel>

        <Panel

          title={selected ? 'Conversation' : 'Select a thread'}

          subtitle="Private insights are attributable and task-specific"

        >

          {selected ? (

            <div className="conversationDetail">

              {!!selected.insights?.length && (

                <div className="conversationInsights">

                  {selected.insights.map((insight: Record<string, any>) => (

                    <p key={insight.code}>

                      <b>{String(insight.severity).toUpperCase()}</b> {insight.message}

                    </p>

                  ))}

                </div>

              )}

              <div className="messageList">

                {selected.messages.map((message: Record<string, any>) => (

                  <article

                    key={message.messageId}

                    className={message.senderAgentId === selectedAgentId ? 'sent' : 'received'}

                  >

                    <small>{message.senderAgentId === selectedAgentId ? 'You' : 'Peer'}</small>

                    <p>{message.content}</p>

                    <span>{new Date(message.createdAt).toLocaleString()}</span>

                  </article>

                ))}

              </div>

              <div className="replyBox">

                <textarea

                  aria-label="Temporary chat reply"

                  value={draft}

                  onChange={(event) => setDraft(event.target.value)}

                  maxLength={20_000}

                  placeholder="Reply through the temporary OpenClasp A2A adapter"

                />

                <button

                  className="primary"

                  type="button"

                  disabled={working || !draft.trim() || selected.thread.status !== 'open'}

                  onClick={() => void reply()}

                >

                  {working ? 'Sending…' : 'Send reply'}

                </button>

              </div>

            </div>

          ) : (

            <Empty title="Nothing selected" text="Choose a thread to read its hosted history." />

          )}

        </Panel>

      </section>

    </>

  );

}

function History({ data }: { data: DashboardData }) {

  const [query, setQuery] = useState('');

  const [status, setStatus] = useState<

    'all' | 'pending' | 'active' | 'provisional' | 'finalizing' | 'completed'

  >('all');

  const journeys = useMemo(() => interactionJourneys(data), [data]);

  const filtered = useMemo(() => {

    const needle = query.trim().toLowerCase();

    return journeys.filter((journey) => {

      if (status !== 'all' && journey.status !== status) return false;

      if (!needle) return true;

      const hay = [

        journey.interactionId,

        journey.purpose,

        journey.taskCategory,

        journey.status,

        ...journey.participants,

      ]

        .filter(Boolean)

        .join(' ')

        .toLowerCase();

      return hay.includes(needle);

    });

  }, [journeys, query, status]);

  const [selectedId, setSelectedId] = useState('');

  const selected = filtered.find((journey) => journey.interactionId === selectedId) ?? filtered[0];

  return (

    <>

      <PageHead page="history" />

      <div className="historyToolbar">

        <Input

          value={query}

          onChange={(event) => setQuery(event.target.value)}

          placeholder="Search purpose, category, or agent"

          aria-label="Search interaction history"

          className="h-9 min-w-[220px] flex-1 rounded-none border-0 border-b bg-transparent px-0 shadow-none dark:bg-transparent"

        />

        <Tabs

          value={status === 'finalizing' ? 'all' : status}

          onValueChange={(value) =>

            setStatus(value as 'all' | 'pending' | 'active' | 'provisional' | 'completed')

          }

        >

          <TabsList variant="line" aria-label="Interaction status filters">

            {(['all', 'pending', 'active', 'provisional', 'completed'] as const).map((value) => (

              <TabsTrigger key={value} value={value} className="capitalize">

                {value}

                <span className="font-mono text-[10px] text-muted-foreground">

                  {value === 'all'

                    ? journeys.length

                    : journeys.filter((item) => item.status === value).length}

                </span>

              </TabsTrigger>

            ))}

          </TabsList>

        </Tabs>

      </div>

      {filtered.length ? (

        <section className="journeyLayout">

          <div className="journeyList" aria-label="Interactions">

            {filtered.map((journey) => (

              <button

                key={journey.interactionId}

                className={selected?.interactionId === journey.interactionId ? 'active' : ''}

                type="button"

                onClick={() => {

                  setSelectedId(journey.interactionId);

                  if (matchMedia('(max-width: 980px)').matches)

                    requestAnimationFrame(() =>

                      document

                        .querySelector('.journeyDetail')

                        ?.scrollIntoView({ behavior: 'smooth' }),

                    );

                }}

              >

                <span className="journeyListTop">

                  <b>{journey.taskCategory}</b>

                  <StatusPill value={journey.status} />

                </span>

                <strong>{journey.purpose}</strong>

                <small>{journey.participants.join(' ↔ ') || 'Participants unavailable'}</small>

                <span className="journeyListMeta">

                  {relativeTime(journey.updatedAt)}

                  <i>{journey.stepCount} recorded steps</i>

                </span>

              </button>

            ))}

          </div>

          {selected ? <InteractionJourney journey={selected} /> : null}

        </section>

      ) : (

        <section className="panel">

          <Empty

            title={journeys.length ? 'No matching interactions' : 'No interactions recorded'}

            text={

              journeys.length

                ? 'Clear the search or choose another status.'

                : 'Completed contracts, outcomes, feedback, and learning will appear as one readable journey.'

            }

          />

        </section>

      )}

    </>

  );

}

type InteractionJourneyModel = {

  interactionId: string;

  purpose: string;

  taskCategory: string;

  status: string;

  participants: string[];

  updatedAt: string;

  stepCount: number;

  interaction: Record<string, any>;

  session?: Record<string, any>;

  events: Record<string, any>[];

  briefs: Record<string, any>[];

  reports: Record<string, any>[];

  feedbackRequests: Record<string, any>[];

  feedback: Record<string, any>[];

  conclusion?: Record<string, any>;

  receipt?: Record<string, any>;

  eligibility?: Record<string, any>;

  deltas: Record<string, any>[];

  conflicts: Record<string, any>[];

};

function interactionJourneys(data: DashboardData): InteractionJourneyModel[] {

  const ids = new Set<string>();

  const collections = [

    data.interactions,

    data.federatedInteractions,

    data.liveSessions,

    data.events,

    data.counterpartyBriefs,

    data.completionReports,

    data.feedbackRequests,

    data.interactionFeedback,

    data.interactionConclusions,

    data.receipts,

    data.learningEligibility,

    data.profileDeltas,

    data.conflicts,

  ];

  for (const collection of collections)

    for (const item of collection) if (item.interactionId) ids.add(String(item.interactionId));

  return [...ids]

    .map((interactionId) => {

      const interaction = data.federatedInteractions.find(

        (item) => item.interactionId === interactionId,

      ) ??

        data.interactions.find((item) => item.interactionId === interactionId) ?? { interactionId };

      const session = data.liveSessions.find((item) => item.interactionId === interactionId);

      const events = data.events.filter((item) => item.interactionId === interactionId);

      const briefs = data.counterpartyBriefs.filter((item) => item.interactionId === interactionId);

      const reports = data.completionReports.filter((item) => item.interactionId === interactionId);

      const feedbackRequests = data.feedbackRequests.filter(

        (item) => item.interactionId === interactionId,

      );

      const feedback = data.interactionFeedback.filter(

        (item) => item.interactionId === interactionId,

      );

      const conclusion = data.interactionConclusions.find(

        (item) => item.interactionId === interactionId,

      );

      const receipt = data.receipts.find((item) => item.interactionId === interactionId);

      const eligibility = data.learningEligibility.find(

        (item) => item.interactionId === interactionId,

      );

      const deltas = data.profileDeltas.filter((item) => item.interactionId === interactionId);

      const conflicts = data.conflicts.filter((item) => item.interactionId === interactionId);

      const participants = [

        interaction.initiatorAgentId,

        interaction.responderAgentId,

        interaction.agentId,

        ...reports.flatMap((report) => [report.reportingAgentId, report.counterpartyAgentId]),

      ]

        .filter((value): value is string => typeof value === 'string' && Boolean(value))

        .filter((value, index, values) => values.indexOf(value) === index);

      const dates = [

        interaction.updatedAt,

        interaction.createdAt,

        session?.completedAt,

        session?.activatedAt,

        ...events.map(timestamp),

        ...reports.map(timestamp),

        ...feedback.map(timestamp),

        conclusion?.generatedAt,

        receipt?.completedAt,

        eligibility?.decidedAt,

      ].filter((value): value is string => typeof value === 'string');

      return {

        interactionId,

        purpose: String(

          interaction.contract?.purpose ??

            interaction.contract?.requestedOutcome ??

            conclusion?.summary ??

            'Assured agent interaction',

        ),

        taskCategory: String(interaction.contract?.taskCategory ?? 'general'),

        status: String(

          conclusion || receipt

            ? conclusion?.lifecycle === 'provisional' || receipt?.provisional

              ? 'provisional'

              : 'completed'

            : reports.length > 0

              ? 'finalizing'

              : (session?.status ?? interaction.status ?? 'pending'),

        ),

        participants,

        updatedAt:

          dates.sort((left, right) => Date.parse(right) - Date.parse(left))[0] ??

          new Date(0).toISOString(),

        stepCount:

          1 +

          Math.max(0, Number(interaction.contractRevisions?.length ?? 0) - 1) +

          events.length +

          briefs.length +

          reports.length +

          feedbackRequests.length +

          feedback.length +

          conflicts.length +

          Number(Boolean(conclusion)) +

          Number(Boolean(receipt)) +

          Number(Boolean(eligibility)) +

          deltas.length,

        interaction,

        ...(session ? { session } : {}),

        events,

        briefs,

        reports,

        feedbackRequests,

        feedback,

        ...(conclusion ? { conclusion } : {}),

        ...(receipt ? { receipt } : {}),

        ...(eligibility ? { eligibility } : {}),

        deltas,

        conflicts,

      };

    })

    .sort((left, right) => Date.parse(right.updatedAt) - Date.parse(left.updatedAt));

}

function InteractionJourney({ journey }: { journey: InteractionJourneyModel }) {

  const timeline = interactionTimeline(journey);

  const conclusion = journey.conclusion;

  const checkpoints = journey.events.filter(

    (event) => (event.type ?? event.eventType) === 'progress_checkpoint' && event.checkpoint,

  );

  const latestCheckpoint = checkpoints.at(-1)?.checkpoint;

  const progress = Number(latestCheckpoint?.progress ?? 0);

  const submittedFeedback = new Set(

    journey.feedback.map((item) => item.reviewerAgentId).filter(Boolean),

  ).size;

  return (

    <article className="journeyDetail">

      <header className="journeyHero">

        <div>

          <span className="eyebrow">{journey.taskCategory}</span>

          <h2>{journey.purpose}</h2>

          <p>{journey.participants.join(' ↔ ')}</p>

        </div>

        <StatusPill value={conclusion?.outcome ?? journey.status} />

      </header>

      <div className="journeySummaryGrid">

        <section>

          <span>Progress</span>

          <strong>

            {latestCheckpoint

              ? `${Math.round(progress * 100)}% · ${humanize(latestCheckpoint.state)}`

              : journey.reports.length

                ? 'One side ended'

                : 'Awaiting checkpoint'}

          </strong>

          <small>

            {latestCheckpoint

              ? `${humanize(latestCheckpoint.topicStatus)} · ${Math.round(Number(latestCheckpoint.confidence ?? 0) * 100)}% confidence`

              : 'Agents report compact progress every few exchanges'}

          </small>

        </section>

        <section>

          <span>Outcome</span>

          <strong>

            {conclusion

              ? humanize(conclusion.outcome)

              : `${journey.reports.length}/2 terminal reports`}

          </strong>

          <small>

            {conclusion

              ? conclusion.lifecycle === 'provisional'

                ? `${Math.round(Number(conclusion.confidence ?? 0) * 100)}% confidence · peer ${humanize(conclusion.peerReportStatus ?? 'awaiting').toLowerCase()}`

                : humanize(conclusion.consensus)

              : journey.reports.length === 1

                ? 'One agent finished; confirming with the peer'

                : 'Conversation remains active'}

          </small>

        </section>

        <section>

          <span>Sealed feedback</span>

          <strong>

            {journey.feedbackRequests.some((request) => request.status === 'pending')

              ? `${submittedFeedback}/2 sealed`

              : 'Window closed'}

          </strong>

          <small>{feedbackState(journey.feedbackRequests)}</small>

        </section>

        <section>

          <span>Learning</span>

          <strong>

            {journey.eligibility

              ? journey.eligibility.eligible

                ? `${Math.round(Number(journey.eligibility.sampleWeight ?? 0) * 100)}% weight`

                : 'Not eligible'

              : conclusion?.lifecycle === 'provisional'

                ? 'Pending corroboration'

                : 'Not assessed'}

          </strong>

          <small>{humanize(journey.eligibility?.contributionMode ?? 'Local only')}</small>

        </section>

      </div>

      {latestCheckpoint ? (

        <section className="progressCard">

          <div className="progressCardTop">

            <div>

              <span className="eyebrow">LATEST PRIVATE CHECKPOINT</span>

              <h3>{humanize(latestCheckpoint.state)}</h3>

            </div>

            <strong>{Math.round(progress * 100)}%</strong>

          </div>

          <div

            className="progressTrack"

            role="progressbar"

            aria-label="Interaction progress"

            aria-valuemin={0}

            aria-valuemax={100}

            aria-valuenow={Math.round(progress * 100)}

          >

            <i style={{ width: `${Math.round(progress * 100)}%` }} />

          </div>

          <div className="progressFacts">

            <span>{latestCheckpoint.criteriaMet?.length ?? 0} criteria met</span>

            <span>{latestCheckpoint.criteriaRemaining?.length ?? 0} remaining</span>

            <span>{latestCheckpoint.expectedRemainingTurns ?? '—'} expected turns</span>

            <span>

              {latestCheckpoint.needsHuman ? 'Human input needed' : 'No human input needed'}

            </span>

          </div>

          {latestCheckpoint.topicStatus !== 'in_scope' ? (

            <p className="progressWarning">

              Topic {humanize(latestCheckpoint.topicStatus)}. Amend the contract or start a new

              interaction before continuing.

            </p>

          ) : null}

        </section>

      ) : null}

      {conclusion ? (

        <section className="outcomeCard">

          <div>

            <span className="eyebrow">

              {conclusion.lifecycle === 'provisional' ? 'PROVISIONAL INSIGHT' : 'WHAT HAPPENED'}

            </span>

            <h3>{conclusion.summary}</h3>

            {conclusion.lifecycle === 'provisional' ? (

              <p className="progressWarning">

                Based on {conclusion.reportIds?.length ?? 1} participant report. Missing:{' '}

                {(conclusion.missingReportAgentIds ?? []).join(', ') || 'peer report'}. This is

                usable now at reduced confidence and will be revised if the peer responds.

              </p>

            ) : null}

          </div>

          {!!conclusion.criteria?.length && (

            <ul>

              {conclusion.criteria.map((criterion: Record<string, any>) => (

                <li key={criterion.criterion}>

                  <StatusPill value={String(criterion.status)} />

                  <span>{criterion.criterion}</span>

                </li>

              ))}

            </ul>

          )}

          {!!Object.keys(conclusion.averageRatings ?? {}).length && (

            <div className="ratingGrid">

              {Object.entries(conclusion.averageRatings).map(([label, value]) => (

                <Meter key={label} label={humanize(label)} value={Number(value)} />

              ))}

            </div>

          )}

        </section>

      ) : (

        <div className="journeyNotice">

          {journey.reports.length === 1

            ? 'Finalizing: one agent submitted its terminal report. OpenClasp has requested independent confirmation from the peer.'

            : journey.reports.length >= 2

              ? 'Both agents finished. Sealed feedback remains private until both respond or the feedback window expires.'

              : 'Active interaction. Progress checkpoints appear after several meaningful exchanges; either agent can finalize immediately when the task is done.'}

        </div>

      )}

      <section className="journeyTimelineSection">

        <div>

          <h3>Interaction timeline</h3>

          <small>Contract → session → outcome → feedback → learning</small>

        </div>

        <ol className="journeyTimeline">

          {timeline.map((step, index) => (

            <li key={`${step.at}-${step.title}-${index}`}>

              <span className={`journeyNode ${step.tone}`} />

              <div>

                <span>{formatDate(step.at)}</span>

                <strong>{step.title}</strong>

                <p>{step.detail}</p>

              </div>

              <StatusPill value={step.status} />

            </li>

          ))}

        </ol>

      </section>

    </article>

  );

}

function interactionTimeline(journey: InteractionJourneyModel) {

  const revisions = journey.interaction.contractRevisions ?? [];

  const contractSteps = revisions.length

    ? revisions.map((revision: Record<string, any>) => ({

        at: String(revision.updatedAt ?? revision.createdAt ?? journey.interaction.createdAt),

        title: `Contract v${revision.revision} ${humanize(revision.status)}`,

        detail: `${revision.proposedByAgentId} · ${Object.keys(revision.acceptances ?? {}).length}/${journey.participants.length || 2} accepted · ${String(revision.termsHash).slice(0, 12)}…`,

        status: String(revision.status),

        tone:

          revision.status === 'accepted'

            ? 'good'

            : revision.status === 'rejected'

              ? 'danger'

              : revision.status === 'proposed'

                ? 'warn'

                : 'neutral',

      }))

    : [

        {

          at: String(journey.interaction.createdAt ?? journey.updatedAt),

          title: 'Contract proposed',

          detail: `${journey.participants.length || 2} participants · ${journey.taskCategory}`,

          status: String(journey.interaction.status ?? 'recorded'),

          tone: 'neutral',

        },

        ...Object.values(journey.interaction.acceptances ?? {}).map((acceptance: any) => ({

          at: String(acceptance.acceptedAt ?? journey.interaction.updatedAt ?? journey.updatedAt),

          title: `Contract accepted by ${acceptance.agentId}`,

          detail: `Acceptance method: ${humanize(acceptance.method ?? 'recorded')}`,

          status: 'accepted',

          tone: 'good',

        })),

      ];

  const steps: { at: string; title: string; detail: string; status: string; tone: string }[] = [

    ...contractSteps,

    ...journey.briefs.map((brief) => ({

      at: String(brief.generatedAt ?? journey.updatedAt),

      title: `Private counterparty brief for ${brief.recipientAgentId}`,

      detail: `${brief.relevantSampleSize ?? 0} relevant samples · ${Math.round(Number(brief.historyConfidence ?? 0) * 100)}% history confidence`,

      status: String(brief.decision ?? 'ready'),

      tone: brief.decision === 'DENY' ? 'danger' : brief.decision === 'CHALLENGE' ? 'warn' : 'good',

    })),

    ...(journey.session?.activatedAt

      ? [

          {

            at: String(journey.session.activatedAt),

            title: 'A2A session activated',

            detail:

              'Scoped credentials were issued. Persistent runtimes exchange content directly; temporary mode uses the hosted adapter.',

            status: 'active',

            tone: 'good',

          },

        ]

      : []),

    ...journey.events.map((event) => {

      const eventType = String(event.type ?? event.eventType ?? 'structured_event');

      const checkpoint = event.checkpoint;

      return {

        at: timestamp(event),

        title:

          eventType === 'progress_checkpoint'

            ? `${Math.round(Number(checkpoint?.progress ?? 0) * 100)}% progress checkpoint`

            : humanize(eventType),

        detail:

          eventType === 'progress_checkpoint'

            ? `${event.agentId} · ${humanize(checkpoint?.state ?? 'active')} · ${humanize(checkpoint?.topicStatus ?? 'in_scope')}`

            : String(event.agentId ?? 'OpenClasp') + ' submitted structured metadata.',

        status: String(checkpoint?.state ?? event.visibility ?? 'recorded'),

        tone:

          checkpoint?.topicStatus === 'changed' || checkpoint?.state === 'blocked'

            ? 'warn'

            : eventType.includes('violation')

              ? 'danger'

              : eventType.includes('warning')

                ? 'warn'

                : checkpoint

                  ? 'good'

                  : 'neutral',

      };

    }),

    ...journey.reports.map((report) => ({

      at: timestamp(report),

      title: `Completion reported by ${report.reportingAgentId}`,

      detail: String(report.summary ?? 'Structured completion report submitted.'),

      status: String(report.outcome ?? 'reported'),

      tone:

        report.outcome === 'failure' ? 'danger' : report.outcome === 'partial' ? 'warn' : 'good',

    })),

    ...journey.feedback.map((item) => ({

      at: timestamp(item),

      title: `Feedback submitted by ${item.reviewerAgentId}`,

      detail: `Would work again: ${humanize(item.wouldWorkAgain ?? 'unsure')} · private comment concealed`,

      status: 'sealed',

      tone: 'neutral',

    })),

    ...journey.feedbackRequests

      .filter((request) => request.status !== 'submitted')

      .map((request) => ({

        at: String(request.requestedAt ?? journey.updatedAt),

        title: `Feedback request ${humanize(request.status)}`,

        detail:

          request.status === 'pending'

            ? `Response due ${formatDate(String(request.dueAt))}`

            : 'The bilateral conclusion continued without this response.',

        status: String(request.status),

        tone: request.status === 'pending' ? 'warn' : 'neutral',

      })),

    ...journey.conflicts.map((conflict) => ({

      at: timestamp(conflict),

      title: 'Dispute recorded',

      detail: String(conflict.summary ?? 'The interaction has a structured dispute record.'),

      status: String(conflict.status ?? 'open'),

      tone: conflict.status === 'resolved' ? 'good' : 'danger',

    })),

    ...(journey.conclusion

      ? [

          {

            at: String(journey.conclusion.generatedAt),

            title:

              journey.conclusion.lifecycle === 'provisional'

                ? 'Provisional insight generated'

                : 'Conclusion released',

            detail: String(journey.conclusion.summary),

            status: String(journey.conclusion.consensus),

            tone:

              journey.conclusion.lifecycle === 'provisional' ||

              journey.conclusion.consensus === 'conflicting'

                ? 'warn'

                : 'good',

          },

        ]

      : []),

    ...(journey.receipt

      ? [

          {

            at: timestamp(journey.receipt),

            title: journey.receipt.provisional

              ? 'Provisional outcome attested'

              : 'Outcome receipt attested',

            detail: journey.receipt.provisional

              ? 'The available one-sided report was sealed without claiming peer agreement.'

              : 'Contract result, commitment status, and evidence hashes were sealed.',

            status: String(journey.receipt.outcome ?? 'signed'),

            tone: journey.receipt.outcome === 'failure' ? 'danger' : 'good',

          },

        ]

      : []),

    ...(journey.eligibility

      ? [

          {

            at: String(journey.eligibility.decidedAt),

            title: journey.eligibility.eligible

              ? 'Eligible history applied'

              : 'History excluded from profile',

            detail: `${Math.round(Number(journey.eligibility.sampleWeight ?? 0) * 100)}% sample weight · ${humanize(journey.eligibility.contributionMode)}`,

            status: journey.eligibility.eligible ? 'attested' : 'excluded',

            tone: journey.eligibility.eligible ? 'good' : 'warn',

          },

        ]

      : []),

  ];

  return steps.sort((left, right) => Date.parse(left.at) - Date.parse(right.at));

}

function Agents({

  data,

  navigate,

  refreshDashboard,

  api,

}: {

  data: DashboardData;

  navigate: (page: Page) => void;

  refreshDashboard: () => Promise<void>;

  api: (path: string, init?: RequestInit) => Promise<unknown>;

}) {

  const [working, setWorking] = useState('');

  const [error, setError] = useState('');

  const saveAutomation = async (

    agentId: string,

    value: {

      autoPublish: boolean;

      autoAcceptPolicy: 'off' | 'safe_matching';

      autoAcceptTaskCategories: string[];

    },

  ) => {

    setWorking(agentId);

    setError('');

    try {

      await api(`/v0.1/agents/${encodeURIComponent(agentId)}/automation`, {

        method: 'PUT',

        body: JSON.stringify(value),

      });

      await refreshDashboard();

      return true;

    } catch (reason) {

      setError(reason instanceof Error ? reason.message : 'Directory update failed');

      return false;

    } finally {

      setWorking('');

    }

  };

  const saveRuntime = async (agentId: string, endpoint: string) => {

    setWorking(`runtime:${agentId}`);

    setError('');

    try {

      await api(`/v0.1/agents/${encodeURIComponent(agentId)}/runtime`, {

        method: 'PUT',

        body: JSON.stringify({ endpoint }),

      });

      await refreshDashboard();

    } catch (reason) {

      setError(reason instanceof Error ? reason.message : 'Runtime verification failed');

    } finally {

      setWorking('');

    }

  };

  const disableRuntime = async (agentId: string) => {

    setWorking(`runtime:${agentId}`);

    setError('');

    try {

      await api(`/v0.1/agents/${encodeURIComponent(agentId)}/runtime`, { method: 'DELETE' });

      await refreshDashboard();

    } catch (reason) {

      setError(reason instanceof Error ? reason.message : 'Runtime update failed');

    } finally {

      setWorking('');

    }

  };

  const revokeAccessToken = async (agentId: string, tokenId: string) => {

    setWorking(`token:${agentId}`);

    setError('');

    try {

      await api(

        `/v0.1/agents/${encodeURIComponent(agentId)}/access-tokens/${encodeURIComponent(tokenId)}`,

        { method: 'DELETE' },

      );

      await refreshDashboard();

    } catch (reason) {

      setError(reason instanceof Error ? reason.message : 'Could not revoke agent access token');

    } finally {

      setWorking('');

    }

  };

  const deleteAgent = async (agent: Record<string, any>) => {

    const agentId = String(agent.agentId);

    if (

      !window.confirm(

        `Delete “${String(agent.name ?? agentId)}”?\n\nIts runtime, publication, presence, MCP binding and hosted temporary messages will be removed. Signed interaction and receipt history will be retained.`,

      )

    )

      return;

    setWorking(`delete:${agentId}`);

    setError('');

    try {

      await api(`/v0.1/agents/${encodeURIComponent(agentId)}`, { method: 'DELETE' });

      await refreshDashboard();

    } catch (reason) {

      setError(reason instanceof Error ? reason.message : 'Agent deletion failed');

    } finally {

      setWorking('');

    }

  };

  return (

    <>

      <PageHead page="agents" action="Connect agent" onAction={() => navigate('connect')} />

      <div className="notice">

        <strong>Two explicit modes.</strong> Persistent runtimes talk directly over A2A. Temporary

        chats use an OpenClasp-hosted endpoint with encrypted-at-rest history. There is no offline

        relay for persistent runtimes.

      </div>

      {error && (

        <div className="errorBar" role="alert">

          {error}

        </div>

      )}

      <section className="agentGrid">

        {data.agents.length ? (

          data.agents.map((agent) => (

            <AgentCard

              key={agent.agentId}

              agent={agent}

              projectName={

                data.projects.find((project) => project.projectId === agent.projectId)?.name

              }

              published={data.publications.some(

                (publication) => publication.agentId === agent.agentId && publication.published,

              )}

              working={working === agent.agentId}

              onSave={(value) => saveAutomation(agent.agentId, value)}

              runtime={data.runtimes.find((runtime) => runtime.agentId === agent.agentId)}

              runtimeWorking={working === `runtime:${agent.agentId}`}

              deleteWorking={working === `delete:${agent.agentId}`}

              onRuntime={(endpoint) => saveRuntime(agent.agentId, endpoint)}

              onDisableRuntime={() => disableRuntime(agent.agentId)}

              accessTokens={data.accessTokens.filter(

                (token) =>

                  token.agentId === agent.agentId &&

                  !token.revokedAt &&

                  Date.parse(String(token.expiresAt)) > Date.now(),

              )}

              accessTokenWorking={working === `token:${agent.agentId}`}

              onRevokeAccessToken={(tokenId) => revokeAccessToken(agent.agentId, tokenId)}

              onDelete={() => deleteAgent(agent)}

            />

          ))

        ) : (

          <Empty

            title="No agents connected"

            text="Install the remote MCP endpoint in an agent, sign in, then create and register its identity."

            action="Open connection guide"

            onAction={() => navigate('connect')}

          />

        )}

      </section>

    </>

  );

}

function Invitations({

  data,

  refreshDashboard,

  api,

}: {

  data: DashboardData;

  refreshDashboard: () => Promise<void>;

  api: (path: string, init?: RequestInit) => Promise<unknown>;

}) {

  const [working, setWorking] = useState('');

  const [error, setError] = useState('');

  const ownedAgentIds = useMemo(

    () => new Set(data.agents.map((agent) => String(agent.agentId))),

    [data.agents],

  );

  const currentProposal = (interaction: Record<string, any>) =>

    [...(interaction.contractRevisions ?? [])]

      .reverse()

      .find((revision) => revision.status === 'proposed');

  const respondingAgent = (interaction: Record<string, any>) => {

    const proposal = currentProposal(interaction);

    return (interaction.contract?.parties ?? []).find(

      (agentId: string) => ownedAgentIds.has(String(agentId)) && !proposal?.acceptances?.[agentId],

    );

  };

  const incoming = data.federatedInteractions.filter(

    (interaction) => currentProposal(interaction) && respondingAgent(interaction),

  );

  const respond = async (

    interactionId: string,

    revisionId: string,

    agentId: string,

    decision: 'accept' | 'reject',

  ) => {

    setWorking(interactionId);

    setError('');

    try {

      await api(

        `/v0.1/federated-interactions/${encodeURIComponent(interactionId)}/contract-proposals/${encodeURIComponent(revisionId)}/respond`,

        {

          method: 'POST',

          body: JSON.stringify({ agentId, decision }),

        },

      );

      await refreshDashboard();

    } catch (reason) {

      setError(reason instanceof Error ? reason.message : 'Could not respond to invitation');

    } finally {

      setWorking('');

    }

  };

  if (!incoming.length && !data.federatedInteractions.length) return null;

  return (