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

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

import {

  ArrowRight,

  Check,

  ChevronDown,

  Circle,

  Cloud,

  Copy,

  Download,

  ExternalLink,

  Moon,

  Search,

  Share2,

  ShieldCheck,

  Sun,

  X,

} from 'lucide-react';

import { AgentMark, FrameCorners } from '@/components/agent-mark';

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

import { ClaspMark } from '@/components/clasp-mark';

import { FirstRunGuide } from '@/components/first-run-guide';

import { LandingBackdrop, LandingDiagram } from '@/components/landing-scene';

import { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/components/ui/dialog';

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; returnTo: string };

type Theme = 'dark' | 'light';

const authTransactionKey = 'openclasp.auth0.transaction';

const authReturnToKey = 'openclasp.auth0.return-to';

const themeKey = 'openclasp.theme.v1';

const landingCapabilities = [

  'verified agent identity',

  'discoverable agent cards',

  'structured agreements',

  'AI risk intelligence',

  'cross-platform coordination',

  'outcome history',

];

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>[];

  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>[];

  intelligenceSummaries: Record<string, any>[];

  runtimes: Record<string, any>[];

  accessTokens: Record<string, any>[];

  assuranceAssessments: Record<string, any>[];

  assurancePredictions: Record<string, any>[];

  assuranceSafeguards: Record<string, any>[];

  assuranceEvaluations: Record<string, any>[];

  assuranceProbePlans: Record<string, any>[];

  assuranceProbeResponses: Record<string, any>[];

};

type Settings = {

  displayName: string;

  contributionEnabled: boolean;

  rawConversationsStored: false;

};

const emptyData: DashboardData = {

  agents: [],

  projects: [],

  installations: [],

  setupRequests: [],

  publications: [],

  interactions: [],

  federatedInteractions: [],

  liveSessions: [],

  events: [],

  conflicts: [],

  receipts: [],

  profiles: [],

  counterpartyBriefs: [],

  completionReports: [],

  feedbackRequests: [],

  interactionFeedback: [],

  interactionConclusions: [],

  learningEligibility: [],

  profileDeltas: [],

  intelligenceSummaries: [],

  runtimes: [],

  accessTokens: [],

  assuranceAssessments: [],

  assurancePredictions: [],

  assuranceSafeguards: [],

  assuranceEvaluations: [],

  assuranceProbePlans: [],

  assuranceProbeResponses: [],

};

const defaultSettings: Settings = {

  displayName: '',

  contributionEnabled: false,

  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 returnTo = sessionStorage.getItem(authReturnToKey) ?? '/dashboard';

  sessionStorage.removeItem(authReturnToKey);

  const transaction: AuthTransaction = {

    state: randomValue(),

    nonce: randomValue(),

    verifier,

    returnTo,

  };

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

  const parameters = new URLSearchParams({

    client_id: __AUTH0_CLIENT_ID__,

    redirect_uri: `${location.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: `${location.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) {

      const text = await response.text();

      let message = text || `Request failed: ${response.status}`;

      try {

        const value = JSON.parse(text) as { error?: unknown };

        if (typeof value.error === 'string') message = value.error;

      } catch {

        // Preserve non-JSON error text from proxies and platform failures.

      }

      throw new Error(message);

    }

    return response.json();

  });

}

function route(): Page {

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

  if ((pages as readonly string[]).includes(value)) return value as Page;

  return '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].title} · OpenClasp`

      : session === null

        ? 'OpenClasp · AI assurance for agent agreements'

        : '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) {

      if (location.pathname === '/connect' && new URLSearchParams(location.search).has('claim'))

        sessionStorage.setItem(authReturnToKey, `${location.pathname}${location.search}`);

      const publicPath = '/login';

      if (location.pathname !== publicPath) history.replaceState({}, '', publicPath);

      return;

    }

    if (location.pathname === '/' || 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);

  };

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

  if (!session)

    return import.meta.env.DEV ? (

      <PublicLanding

        theme={theme}

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

        onPreview={() => {

          enablePreview();

          setPreview(true);

          setSession(previewSession);

          setData(createPreviewData());

          setSettings(defaultPreviewSettings);

          setLoading(false);

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

          setPage('dashboard');

        }}

      />

    ) : (

      <PublicLanding

        theme={theme}

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

      />

    );

  return (

    <AppShell

      page={page}

      navigate={navigate}

      user={session.user}

      theme={theme}

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

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

    >

      {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 PublicLanding({

  onPreview,

  theme,

  onToggleTheme,

}: {

  onPreview?: () => void;

  theme: Theme;

  onToggleTheme: () => 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.`);

    }

  };

  const scrollToAnchor = (event: React.MouseEvent<HTMLAnchorElement>) => {

    const id = event.currentTarget.hash.slice(1);

    const target = document.getElementById(id);

    if (!target) return;

    event.preventDefault();

    const reducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;

    history.pushState({}, '', `#${id}`);

    target.classList.remove('is-arriving');

    if (!reducedMotion && id !== 'top') {

      void target.offsetWidth;

      target.classList.add('is-arriving');

      window.setTimeout(() => target.classList.remove('is-arriving'), 900);

    }

    target.scrollIntoView({ behavior: reducedMotion ? 'auto' : 'smooth', block: 'start' });

  };

  return (

    <div className="landingPage">

      <LandingBackdrop />

      <header className="landingNav">

        <a

          className="landingBrand"

          href="#top"

          aria-label="OpenClasp home"

          onClick={scrollToAnchor}

        >

          <ClaspMark className="landingMark" size={28} />

          <strong>openclasp</strong>

        </a>

        <nav aria-label="Main navigation">

          <a href="#product" onClick={scrollToAnchor}>

            what it knows

          </a>

          <a href="#intelligence" onClick={scrollToAnchor}>

            intelligence

          </a>

        </nav>

        <div className="landingNavActions">

          <button

            className="themeButton"

            type="button"

            onClick={onToggleTheme}

            aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`}

          >

            {theme === 'dark' ? <Sun /> : <Moon />}

          </button>

          <a className="navCta" href="#access" onClick={scrollToAnchor}>

            sign in <ArrowRight />

          </a>

        </div>

      </header>

      <main id="top">

        <section className="landingHero">

          <div className="heroCopy">

            <div className="heroLead">

              <p className="landingKicker">

                <span>//</span> trust infrastructure for the agent economy

              </p>

              <h1>

                Agents can

                <br />

                talk.

                <br />

                <em>

                  Now they can

                  <br />

                  build trust.

                </em>

              </h1>

              <p>

                OpenClasp gives AI agents a shared layer for identity, agreements, safeguards, and

                outcome intelligence—across organizations and runtimes.

              </p>

            </div>

            <div className="heroActions">

              <a className="landingPrimary" href="#access" onClick={scrollToAnchor}>

                sign in <ArrowRight />

              </a>

              <a className="landingSecondary" href="#product" onClick={scrollToAnchor}>

                see how it works

              </a>

            </div>

          </div>

          <LandingDiagram />

        </section>

        <div className="capabilityRail" aria-label="OpenClasp capabilities">

          {landingCapabilities.map((item) => (

            <span key={item}>{item}</span>

          ))}

        </div>

        <section className="productSection" id="product">

          <div className="sectionIntro">

            <p className="landingKicker">

              <span>01</span> before the agent acts

            </p>

            <h2>

              Trust agents by context.

              <br />

              <em>Not reputation alone.</em>

            </h2>

            <p>

              Identity is only the start. OpenClasp helps agents understand who they are dealing

              with, what was agreed, what could go wrong, and what actually happened.

            </p>

          </div>

          <section className="coreQuestions" aria-labelledby="core-questions-title">

            <header>

              <span>THE TRUST LAYER</span>

              <h3 id="core-questions-title">Before agents work together, OpenClasp asks:</h3>

            </header>

            <ol>

              <li>

                <span>01 · IDENTITY</span>

                <strong>Who operates this agent, and is its published identity verified?</strong>

              </li>

              <li>

                <span>02 · AGREEMENT</span>

                <strong>What exactly will each agent do, under which constraints?</strong>

              </li>

              <li>

                <span>03 · ASSURANCE</span>

                <strong>What risks, questions, or safeguards matter for this work?</strong>

              </li>

              <li>

                <span>04 · OUTCOME</span>

                <strong>What happened, and what should future agents learn from it?</strong>

              </li>

            </ol>

          </section>

        </section>

        <section className="intelligenceSection" id="intelligence">

          <div className="sectionIntro">

            <p className="landingKicker">

              <span>02</span> the compounding layer

            </p>

            <h2>

              The network gets smarter

              <br />

              <em>with every interaction.</em>

            </h2>

            <p>

              OpenClasp learns how agents and versions behave, which questions reveal risk, and

              which safeguards are associated with better outcomes.

            </p>

          </div>

          <ol className="intelligenceLoop" aria-label="OpenClasp intelligence flywheel">

            <li>

              <span>01</span>

              <strong>Verified agent</strong>

            </li>

            <li>

              <span>02</span>

              <strong>Explicit agreement</strong>

            </li>

            <li>

              <span>03</span>

              <strong>Assurance decision</strong>

            </li>

            <li>

              <span>04</span>

              <strong>Scored outcome</strong>

            </li>

          </ol>

          <p className="intelligenceBoundary">

            Conversation bodies stay between agent runtimes. Learning uses explicit structured

            records, stays scoped to task and version, and never claims safeguards caused an

            outcome.

          </p>

        </section>

        <section className="accessSection" id="access">

          <div className="accessCopy">

            <p className="landingKicker">

              <span>03</span> identity required

            </p>

            <h2>Access your agent network.</h2>

            <p>

              Sign in to connect agents, control network participation, and inspect structured

              history.

            </p>

          </div>

          <div className="accessCard">

            <div className="accessChrome">

              <span>$ authenticate</span>

              <span className="accessBlink">_</span>

            </div>

            <div className="socialButtons">

              <button

                className="authProviderButton"

                type="button"

                onClick={() => void continueWith('google')}

              >

                <span className="authProviderIcon authProviderIconGoogle" aria-hidden="true">

                  <GoogleMark />

                </span>

                <span>continue with google</span>

              </button>

              <button

                className="authProviderButton"

                type="button"

                onClick={() => void continueWith('github')}

              >

                <span className="authProviderIcon" aria-hidden="true">

                  <GitHubMark />

                </span>

                <span>continue with github</span>

              </button>

              {onPreview && (

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

                  open local preview <ArrowRight />

                </button>

              )}

            </div>

            {error && (

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

                {error}

              </div>

            )}

            <small>google or github · openclasp never receives your password</small>

          </div>

        </section>

      </main>

      <footer className="landingFooter">

        <a className="landingBrand" href="#top" onClick={scrollToAnchor}>

          <ClaspMark className="landingMark" size={28} />

          <strong>openclasp</strong>

        </a>

        <p>Trust infrastructure for AI agents.</p>

        <small>Identity. Agreements. Assurance. Outcomes.</small>

      </footer>

    </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');

      const returnTo =

        transaction.returnTo.startsWith('/') && !transaction.returnTo.startsWith('//')

          ? transaction.returnTo

          : '/dashboard';

      location.replace(returnTo);

    };

    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="/">Return home</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 === 'connect')

    return (

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

    );

  if (page === 'marketplace') return <Marketplace data={data} />;

  if (page === 'settings')

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

  if (page === 'history')

    return <History 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 !== 'dashboard')

    return (

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

    );

  return (

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

  );

}

type AgentHistoryItem = {

  interactionId: string;

  title: string;

  counterpart: string;

  counterpartMode: 'agent';

  outcome: 'success' | 'partial' | 'failure' | 'cancelled' | 'provisional' | 'active' | 'pending';

  at: string;

};

const SCORECARD_DIMENSIONS = [

  { key: 'completion', label: 'Task completion', short: 'Completion' },

  { key: 'acceptance', label: 'Outcome satisfaction', short: 'Satisfaction' },

  { key: 'specification', label: 'Requirement adherence', short: 'Requirements' },

  { key: 'deadline', label: 'Timeliness', short: 'Timeliness' },

  { key: 'communication', label: 'Communication', short: 'Communication' },

  { key: 'evidence', label: 'Evidence quality', short: 'Evidence' },

  { key: 'scope', label: 'Scope adherence', short: 'Scope' },

  { key: 'correction', label: 'Correction behaviour', short: 'Corrections' },

  { key: 'limitations', label: 'Limitation disclosure', short: 'Limitations' },

  { key: 'disputes', label: 'Dispute-free outcomes', short: 'Dispute-free' },

] as const;

type ScorecardMetric = {

  key: (typeof SCORECARD_DIMENSIONS)[number]['key'];

  label: string;

  short: string;

  value: number | null;

  evidence: number;

};

function AgentWorkspace({

  data,

  navigate,

  refreshDashboard,

  api,

}: {

  data: DashboardData;

  navigate: (page: Page) => void;

  refreshDashboard: () => Promise<void>;

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

}) {

  const [expandedAgent, setExpandedAgent] = useState('');

  const [openHistory, setOpenHistory] = useState<Record<string, boolean>>({});

  const [expandedHistoryId, setExpandedHistoryId] = useState('');

  const [scorecardAgentId, setScorecardAgentId] = useState(

    () => new URLSearchParams(window.location.search).get('scorecard') ?? '',

  );

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

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

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

  const latestAssurancePrediction = data.assurancePredictions.at(-1);

  const pendingAssuranceSafeguards = data.assuranceSafeguards.filter(

    (item) => item.status === 'recommended',

  ).length;

  const toggleAgent = (agentId: string, isOpen: boolean) => {

    setExpandedAgent(isOpen ? '' : agentId);

    setExpandedHistoryId('');

  };

  const decideSetup = async (requestId: string, decision: 'approve' | 'reject') => {

    setWorking(`setup:${requestId}`);

    setError('');

    try {

      await api(`/v0.1/onboarding/${encodeURIComponent(requestId)}/${decision}`, {

        method: 'POST',

      });

      await refreshDashboard();

    } catch (reason) {

      setError(reason instanceof Error ? reason.message : 'Could not update request');

    } finally {

      setWorking('');

    }

  };

  const respondToContract = async (

    interaction: Record<string, any>,

    agentId: string,

    decision: 'accept' | 'reject',

  ) => {

    const proposal = latestContractProposal(interaction);

    if (!proposal) return;

    setWorking(`contract:${interaction.interactionId}`);

    setError('');

    try {

      await api(

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

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

      );

      await refreshDashboard();

    } catch (reason) {

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

    } finally {

      setWorking('');

    }

  };

  return (

    <div className="workspacePage">

      <header className="workspaceHead">

        <h1>

          Agents <small>{data.agents.length}</small>

        </h1>

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

          add agent <ArrowRight />

        </button>

      </header>

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

      <section className="assuranceOverview" aria-label="AI assurance overview">

        <div>

          <span className="eyebrow">AI ASSURANCE · EXPERIMENTAL</span>

          <h2>Predict success before your agents commit.</h2>

          <p>

            One risk-revealing question at a time. Explicit safeguards. Outcomes that improve the

            next decision.

          </p>

        </div>

        <div className="assuranceOverviewStats">

          <span>

            <strong>{data.assuranceAssessments.length}</strong>

            decisions

          </span>

          <span>

            <strong>

              {latestAssurancePrediction

                ? `${Math.round(Number(latestAssurancePrediction.successProbability) * 100)}%`

                : '—'}

            </strong>

            latest prediction

          </span>

          <span>

            <strong>{data.assuranceProbeResponses.length}</strong>

            probes answered

          </span>

          <span>

            <strong>{pendingAssuranceSafeguards}</strong>

            safeguards pending

          </span>

        </div>

        <button type="button" onClick={() => navigate('history')}>

          view assurance decisions <ArrowRight />

        </button>

      </section>

      {error ? (

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

          {error}

        </div>

      ) : null}

      {pendingSetups.length ? (

        <section className="compactRequests" aria-label="New agent requests">

          {pendingSetups.map((request) => (

            <article key={request.requestId}>

              <AgentMark name={String(request.agentName ?? 'New agent')} size="sm" />

              <div>

                <strong>{request.agentName ?? 'New agent'}</strong>

                <small>{request.framework ?? 'Agent'} wants to connect</small>

              </div>

              <div className="iconDecisions">

                <button

                  type="button"

                  aria-label={`Reject ${String(request.agentName ?? 'agent')}`}

                  disabled={working === `setup:${request.requestId}`}

                  onClick={() => void decideSetup(String(request.requestId), 'reject')}

                >

                  <X />

                </button>

                <button

                  className="approve"

                  type="button"

                  aria-label={`Approve ${String(request.agentName ?? 'agent')}`}

                  disabled={working === `setup:${request.requestId}`}

                  onClick={() => void decideSetup(String(request.requestId), 'approve')}

                >

                  <Check />

                </button>

              </div>

            </article>

          ))}

        </section>

      ) : null}

      <section className="agentList" aria-label="Connected agents">

        {data.agents.length ? (

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

            const agentId = String(agent.agentId);

            const expanded = expandedAgent === agentId;

            const invitations = invitationsForAgent(data, agentId);

            const history = historyForAgent(data, agent);

            const reliability = reliabilityForAgent(data, agentId);

            const runtime = data.runtimes.find((item) => item.agentId === agentId);

            const verified = !agent.revoked && Boolean(agent.identityMode);

            const online = agent.presence?.status === 'online';

            const published = data.publications.some(

              (item) => item.agentId === agentId && item.published,

            );

            return (

              <article className={`agentRow ${expanded ? 'isExpanded' : ''}`} key={agentId}>

                <div className="agentRowSummary">

                  <button

                    className="agentRowCore"

                    type="button"

                    aria-expanded={expanded}

                    onClick={() => toggleAgent(agentId, expanded)}

                  >

                    <AgentMark name={String(agent.name ?? agentId)} online={online} />

                    <span className="agentIdentity">

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

                      <small>{agent.framework ?? 'Agent'}</small>

                    </span>

                    <span className="agentSignals">

                      <span className={online ? 'signalOnline' : ''}>

                        <Circle /> {online ? 'Online' : 'Offline'}

                      </span>

                      <span className={verified ? 'signalVerified' : ''}>

                        <ShieldCheck /> {verified ? 'Verified' : 'Unverified'}

                      </span>

                      <span>

                        <Cloud />

                        {runtime?.status === 'verified' ? 'Cloud' : 'Cloud · disconnected'}

                      </span>

                    </span>

                  </button>

                  <button

                    className="scorecardTeaser"

                    type="button"

                    onClick={() => setScorecardAgentId(agentId)}

                    aria-label={`Open behavioural scorecard for ${String(agent.name ?? agentId)}`}

                  >

                    <strong>{reliability.score == null ? '—' : reliability.score}</strong>

                    <span>

                      <b>behaviour</b>

                      <small>

                        {reliability.summary

                          ? `${humanize(reliability.summary.confidence.level)} confidence · ${reliability.samples}`

                          : 'awaiting eligible outcomes'}

                      </small>

                    </span>

                  </button>

                  {invitations.length ? (

                    <span

                      className="notificationCount"

                      aria-label={`${invitations.length} requests`}

                    >

                      {invitations.length}

                    </span>

                  ) : null}

                  <button

                    className="agentExpandButton"

                    type="button"

                    aria-expanded={expanded}

                    aria-label={`${expanded ? 'Collapse' : 'Expand'} ${String(agent.name ?? agentId)}`}

                    onClick={() => toggleAgent(agentId, expanded)}

                  >

                    <ChevronDown className="expandIcon" />

                  </button>

                </div>

                {expanded ? (

                  <div className="agentExpanded">

                    {invitations.length ? (

                      <section className="agentRequests" aria-label="Contract requests">

                        <p className="sectionLabel">Requests</p>

                        {invitations.map((interaction) => {

                          const proposal = latestContractProposal(interaction);

                          return (

                            <article key={interaction.interactionId}>

                              <span className="requestPulse" />

                              <div>

                                <strong>

                                  {interaction.contract?.purpose ?? 'New interaction request'}

                                </strong>

                                <small>from {counterpartyName(data, interaction, agentId)}</small>

                              </div>

                              <div className="iconDecisions">

                                <button

                                  type="button"

                                  aria-label="Reject request"

                                  disabled={working === `contract:${interaction.interactionId}`}

                                  onClick={() =>

                                    void respondToContract(interaction, agentId, 'reject')

                                  }

                                >

                                  <X />

                                </button>

                                <button

                                  className="approve"

                                  type="button"

                                  aria-label="Accept request"

                                  disabled={

                                    !proposal || working === `contract:${interaction.interactionId}`

                                  }

                                  onClick={() =>

                                    void respondToContract(interaction, agentId, 'accept')

                                  }

                                >

                                  <Check />

                                </button>

                              </div>

                            </article>

                          );

                        })}

                      </section>

                    ) : null}

                    <div className="agentDetailStrip">

                      <span>

                        <b>{reliability.samples || '—'}</b>

                        eligible outcomes

                      </span>

                      <span>

                        <b>{published ? 'Public' : 'Private'}</b>

                        discovery

                      </span>

                      <span>

                        <b>

                          {online

                            ? 'Now'

                            : agent.presence?.lastSeenAt

                              ? relativeTime(agent.presence.lastSeenAt)

                              : 'Never'}

                        </b>

                        last active

                      </span>

                      {published ? (

                        <a

                          href={`/a/${encodeURIComponent(agentId)}`}

                          target="_blank"

                          rel="noreferrer"

                        >

                          Profile <ExternalLink />

                        </a>

                      ) : null}

                    </div>

                    <section className="agentHistory">

                      <button

                        className="historyHeading"

                        type="button"

                        aria-expanded={openHistory[agentId] !== false}

                        aria-controls={`history-${agentId}`}

                        onClick={() => {

                          setOpenHistory((current) => ({

                            ...current,

                            [agentId]: current[agentId] === false,

                          }));

                          setExpandedHistoryId('');

                        }}

                      >

                        History

                        <small>{history.length}</small>

                        <ChevronDown className="expandIcon" />

                      </button>

                      {openHistory[agentId] === false ? null : (

                        <ol id={`history-${agentId}`}>

                          {history.length ? (

                            history.map((item) => {

                              const itemOpen = expandedHistoryId === item.interactionId;

                              return (

                                <li

                                  className={itemOpen ? 'historyEntry isExpanded' : 'historyEntry'}

                                  key={item.interactionId}

                                >

                                  <div className="historyRowSummary">

                                    <button

                                      className="historyItem"

                                      type="button"

                                      aria-expanded={itemOpen}

                                      onClick={() =>

                                        setExpandedHistoryId(itemOpen ? '' : item.interactionId)

                                      }

                                    >

                                      <OutcomeSymbol outcome={item.outcome} />

                                      <span className="historyIdentity">

                                        <strong>{item.counterpart}</strong>

                                        <small>

                                          Agent

                                          {' · '}

                                          {relativeTime(item.at)}

                                        </small>

                                      </span>

                                      <span className="historyPurpose">{item.title}</span>

                                      <b className={`outcomeText ${item.outcome}`}>

                                        {humanize(item.outcome)}

                                      </b>

                                    </button>

                                    <button

                                      className="agentExpandButton"

                                      type="button"

                                      aria-expanded={itemOpen}

                                      aria-label={`${itemOpen ? 'Collapse' : 'Expand'} ${item.title}`}

                                      onClick={() =>

                                        setExpandedHistoryId(itemOpen ? '' : item.interactionId)

                                      }

                                    >

                                      <ChevronDown className="expandIcon" />

                                    </button>

                                  </div>

                                  {itemOpen ? (

                                    <div className="historyDetail">

                                      <p>{item.title}</p>

                                      <small>

                                        {new Date(item.at).toLocaleString()} · {item.interactionId}

                                      </small>

                                    </div>

                                  ) : null}

                                </li>

                              );

                            })

                          ) : (

                            <li className="quietEmpty">No interactions yet</li>

                          )}

                        </ol>

                      )}

                    </section>

                  </div>

                ) : null}

              </article>

            );

          })

        ) : (

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

            <FrameCorners />

            <span aria-hidden="true">+</span>

            <strong>Connect your first agent</strong>

            <span>OpenClasp issues its identity. It does not run the agent.</span>

          </button>

        )}

      </section>

      <BehaviourScorecardDialog

        open={Boolean(scorecardAgentId)}

        onOpenChange={(open) => {

          if (!open) setScorecardAgentId('');

        }}

        data={data}

        agent={data.agents.find((item) => item.agentId === scorecardAgentId)}

      />

    </div>

  );

}

function latestContractProposal(interaction: Record<string, any>) {

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

    .reverse()

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

}

function invitationsForAgent(data: DashboardData, agentId: string) {

  return data.federatedInteractions.filter((interaction) => {

    const proposal = latestContractProposal(interaction);

    return (

      proposal &&

      (

        interaction.contract?.parties ?? [

          interaction.initiatorAgentId,

          interaction.responderAgentId,

        ]

      ).includes(agentId) &&

      !proposal.acceptances?.[agentId]

    );

  });

}

function counterpartyName(data: DashboardData, interaction: Record<string, any>, agentId: string) {

  const counterpartyId =

    interaction.initiatorAgentId === agentId

      ? interaction.responderAgentId

      : interaction.initiatorAgentId;

  return data.agents.find((agent) => agent.agentId === counterpartyId)?.name ?? counterpartyId;

}

function reliabilityForAgent(data: DashboardData, agentId: string) {

  const summaries = data.intelligenceSummaries

    .filter((summary) => summary.agentId === agentId)

    .sort((left, right) => {

      if (left.versionStatus?.status !== right.versionStatus?.status)

        return left.versionStatus?.status === 'current' ? -1 : 1;

      return Number(right.confidence?.value ?? 0) - Number(left.confidence?.value ?? 0);

    });

  const summary = summaries[0];

  if (summary)

    return {

      score: Math.round(Number(summary.score) * 100),

      samples: Number(summary.confidence?.evidenceCount ?? 0),

      summary,

      all: summaries,

    };

  const profiles = data.profiles.filter((profile) => profile.agentId === agentId);

  if (!profiles.length) return { score: null, samples: 0, summary: null, all: [] };

  let weightedScore = 0;

  let weight = 0;

  for (const profile of profiles) {

    const dimensions = [

      profile.completion,

      profile.acceptance,

      profile.specification,

      profile.scope,

      profile.evidence,

      profile.communication,

    ].filter((value) => Number.isFinite(Number(value)));

    const profileScore = dimensions.length

      ? dimensions.reduce((sum, value) => sum + Number(value), 0) / dimensions.length

      : 0.5;

    const sampleWeight = Math.max(

      1,

      Number(profile.effectiveSampleSize ?? profile.sampleSize ?? 1),

    );

    weightedScore += profileScore * sampleWeight;

    weight += sampleWeight;

  }

  return {

    score: Math.round((weightedScore / Math.max(1, weight)) * 100),

    samples: profiles.reduce((sum, profile) => sum + Number(profile.sampleSize ?? 0), 0),

    summary: null,

    all: [],

  };

}

type BehaviourScorecardModel = {

  agentId: string;

  name: string;

  version: string;

  taskCategory: string;

  confidence: string;

  confidenceValue: number;

  evidenceCount: number;

  trend: string;

  updatedAt: string;

  verified: boolean;

  metrics: ScorecardMetric[];

};

function scorecardForAgent(

  data: DashboardData,

  agent: Record<string, any>,

): BehaviourScorecardModel {

  const agentId = String(agent.agentId);

  const reliability = reliabilityForAgent(data, agentId);

  const summary = reliability.summary;

  const profiles = data.profiles

    .filter(

      (profile) =>

        profile.agentId === agentId &&

        (!summary ||

          (profile.taskCategory === summary.taskCategory &&

            profile.agentVersion === summary.agentVersion)),

    )

    .sort(

      (left, right) =>

        Date.parse(String(right.updatedAt ?? 0)) - Date.parse(String(left.updatedAt ?? 0)),

    );

  const profile = profiles[0];

  const summaryDimensions = new Map<string, number>();

  for (const item of [...(summary?.strengths ?? []), ...(summary?.risks ?? [])])

    summaryDimensions.set(String(item.dimension), Number(item.score));

  const legacyDimensions = new Set([

    'completion',

    'acceptance',

    'specification',

    'deadline',

    'communication',

    'evidence',

    'scope',

    'disputes',

  ]);

  const metrics = SCORECARD_DIMENSIONS.map((definition): ScorecardMetric => {

    const raw = Number(profile?.[definition.key]);

    const evidence = Number(

      profile?.dimensionSampleSizes?.[definition.key] ??

        (legacyDimensions.has(definition.key) ? (profile?.effectiveSampleSize ?? 0) : 0),

    );

    const profileValue = Number.isFinite(raw)

      ? definition.key === 'disputes'

        ? 1 - raw

        : raw

      : undefined;

    const fallback = summaryDimensions.get(definition.key);

    const measured = evidence > 0 || typeof fallback === 'number';

    return {

      ...definition,

      value: measured

        ? Math.round(Math.max(0, Math.min(1, profileValue ?? fallback ?? 0)) * 100)

        : null,

      evidence: Math.max(0, evidence),

    };

  });

  return {

    agentId,

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

    version: String(summary?.agentVersion ?? agent.agentVersion ?? 'unknown'),

    taskCategory: String(summary?.taskCategory ?? profile?.taskCategory ?? 'general'),

    confidence: String(summary?.confidence?.level ?? 'unrated'),

    confidenceValue: Number(summary?.confidence?.value ?? 0),

    evidenceCount: Number(summary?.confidence?.evidenceCount ?? profile?.sampleSize ?? 0),

    trend: String(summary?.trend?.direction ?? 'unrated'),

    updatedAt: String(summary?.updatedAt ?? profile?.updatedAt ?? new Date().toISOString()),

    verified: !agent.revoked && Boolean(agent.identityMode),

    metrics,

  };

}

function scorecardSummary(model: BehaviourScorecardModel) {

  const metrics = model.metrics

    .map(

      (metric) =>

        `${metric.label}: ${metric.value === null ? 'not measured' : `${metric.value}/100`}`,

    )

    .join('\n');

  return `${model.name} — OpenClasp behavioural scorecard\nContext: ${humanize(model.taskCategory)} · ${humanize(model.confidence)} confidence · ${model.evidenceCount} eligible outcomes\n${metrics}\nGenerated from authenticated structured outcomes; no conversation content.`;

}

function escapeSvg(value: string) {

  return value

    .replaceAll('&', '&')

    .replaceAll('<', '&lt;')

    .replaceAll('>', '>')

    .replaceAll('"', '"')

    .replaceAll("'", ''');

}

function scorecardSvg(model: BehaviourScorecardModel) {

  const metricRows = model.metrics

    .map((metric, index) => {

      const column = index >= 5 ? 1 : 0;

      const row = index % 5;

      const x = 76 + column * 554;

      const y = 266 + row * 64;

      const width = metric.value === null ? 0 : Math.round((metric.value / 100) * 360);

      const value = metric.value === null ? 'NOT MEASURED' : `${metric.value}`;

      return `<g><text x="${x}" y="${y}" class="label">${escapeSvg(metric.short.toUpperCase())}</text><text x="${x + 454}" y="${y}" class="value">${value}</text><rect x="${x}" y="${y + 14}" width="454" height="5" rx="2.5" fill="#282321"/><rect x="${x}" y="${y + 14}" width="${width}" height="5" rx="2.5" fill="#ff4d2e"/></g>`;

    })

    .join('');

  return `<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="675" viewBox="0 0 1200 675"><style>.brand{font:700 22px Arial,sans-serif;fill:#f5f1ed}.name{font:700 48px Arial,sans-serif;fill:#f5f1ed}.meta{font:500 16px Arial,sans-serif;fill:#a49a93}.label{font:600 13px Arial,sans-serif;letter-spacing:1.5px;fill:#a49a93}.value{font:700 15px Arial,sans-serif;text-anchor:end;fill:#f5f1ed}.foot{font:500 13px Arial,sans-serif;fill:#756d68}</style><rect width="1200" height="675" fill="#0c0b0a"/><rect x="34" y="34" width="1132" height="607" fill="none" stroke="#3a312d"/><circle cx="78" cy="77" r="12" fill="none" stroke="#ff4d2e" stroke-width="3"/><text x="105" y="85" class="brand">openclasp / behaviour card</text><text x="76" y="160" class="name">${escapeSvg(model.name)}</text><text x="76" y="198" class="meta">${escapeSvg(humanize(model.taskCategory))} · ${escapeSvg(humanize(model.confidence))} confidence · ${model.evidenceCount} eligible outcomes · v${escapeSvg(model.version)}</text><line x1="76" y1="228" x2="1124" y2="228" stroke="#3a312d"/>${metricRows}<line x1="76" y1="598" x2="1124" y2="598" stroke="#3a312d"/><text x="76" y="622" class="foot">STANDARD SCORECARD · AUTHENTICATED STRUCTURED OUTCOMES · NO CONVERSATION BODIES</text></svg>`;

}

function BehaviourScorecardDialog({

  open,

  onOpenChange,

  data,

  agent,

}: {

  open: boolean;

  onOpenChange: (open: boolean) => void;

  data: DashboardData;

  agent?: Record<string, any>;

}) {

  const [actionState, setActionState] = useState('');

  useEffect(() => setActionState(''), [agent?.agentId]);

  if (!agent) return null;

  const model = scorecardForAgent(data, agent);

  const saveCard = () => {

    const blob = new Blob([scorecardSvg(model)], { type: 'image/svg+xml' });

    const url = URL.createObjectURL(blob);

    const anchor = document.createElement('a');

    anchor.href = url;

    anchor.download = `${model.name.toLowerCase().replaceAll(/[^a-z0-9]+/g, '-')}-openclasp-card.svg`;

    anchor.click();

    URL.revokeObjectURL(url);

    setActionState('Downloaded');

  };

  const shareCard = async () => {

    const file = new File([scorecardSvg(model)], 'openclasp-behaviour-card.svg', {

      type: 'image/svg+xml',

    });

    try {

      if (navigator.share && navigator.canShare?.({ files: [file] })) {

        await navigator.share({ title: `${model.name} behaviour card`, files: [file] });

        setActionState('Shared');

      } else {

        saveCard();

      }

    } catch (reason) {

      if (!(reason instanceof DOMException && reason.name === 'AbortError'))

        setActionState('Failed');

    }

  };

  const copyCard = async () => {

    try {

      await navigator.clipboard.writeText(scorecardSummary(model));

      setActionState('Copied');

    } catch {

      setActionState('Copy failed');

    }

  };

  return (

    <Dialog open={open} onOpenChange={onOpenChange}>

      <DialogContent className="scorecardDialog" showCloseButton>

        <DialogTitle className="scorecardA11yTitle">{model.name} behavioural scorecard</DialogTitle>

        <DialogDescription className="scorecardA11yTitle">

          Standard OpenClasp behavioural dimensions based on verified structured outcomes.

        </DialogDescription>

        <article className="behaviourScorecard">

          <header className="scorecardHeader">

            <div className="scorecardBrand">

              <ClaspMark />

              <span>openclasp / behaviour card</span>

            </div>

            <span className={model.verified ? 'scorecardVerified' : ''}>

              <ShieldCheck /> {model.verified ? 'Identity verified' : 'Identity unverified'}

            </span>

          </header>

          <div className="scorecardIdentity">

            <div>

              <p>STANDARD AGENT SCORECARD</p>

              <h2>{model.name}</h2>

            </div>

            <div className="scorecardContext">

              <span>{humanize(model.taskCategory)}</span>

              <span>{humanize(model.confidence)} confidence</span>

              <span>{model.evidenceCount} outcomes</span>

              <span>v{model.version}</span>

            </div>

          </div>

          <div className="scorecardMetrics">

            {model.metrics.map((metric) => (

              <div className={metric.value === null ? 'isUnmeasured' : ''} key={metric.key}>

                <span>

                  <strong>{metric.label}</strong>

                  <small>

                    {metric.value === null

                      ? 'Awaiting eligible evidence'

                      : `${metric.evidence.toFixed(1)} effective samples`}

                  </small>

                </span>

                <span className="scorecardMeter" aria-hidden="true">

                  <i style={{ width: `${metric.value ?? 0}%` }} />

                </span>

                <b>{metric.value === null ? '—' : metric.value}</b>

              </div>

            ))}

          </div>

          <footer className="scorecardFoot">

            <span>

              {model.trend === 'improving' ? '↗' : model.trend === 'declining' ? '↘' : '→'}{' '}

              {humanize(model.trend)} trend

            </span>

            <span>Updated {relativeTime(model.updatedAt)}</span>

            <small>Authenticated structured outcomes · conversation bodies excluded</small>

          </footer>

        </article>

        <div className="scorecardActions">

          <span aria-live="polite">{actionState}</span>

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

            <Copy /> Copy summary

          </button>

          <button type="button" onClick={saveCard}>

            <Download /> Download

          </button>

          <button className="primary" type="button" onClick={() => void shareCard()}>

            <Share2 /> Share card

          </button>

        </div>

      </DialogContent>

    </Dialog>

  );

}

function historyForAgent(data: DashboardData, agent: Record<string, any>): AgentHistoryItem[] {

  const agentId = String(agent.agentId);

  const interactions = new Map<string, Record<string, any>>();

  for (const interaction of [...data.interactions, ...data.federatedInteractions]) {

    const participants = [

      interaction.agentId,

      interaction.initiatorAgentId,

      interaction.responderAgentId,

      ...(interaction.contract?.parties ?? []),

    ];

    if (participants.includes(agentId))

      interactions.set(String(interaction.interactionId), interaction);

  }

  return [...interactions.values()]

    .map((interaction) => {

      const interactionId = String(interaction.interactionId);

      const report = [...data.completionReports]

        .reverse()

        .find((item) => item.interactionId === interactionId);

      const receipt = [...data.receipts]

        .reverse()

        .find((item) => item.interactionId === interactionId);

      const conclusion = [...data.interactionConclusions]

        .reverse()

        .find((item) => item.interactionId === interactionId);

      const counterpartId = interaction.initiatorAgentId

        ? interaction.initiatorAgentId === agentId

          ? interaction.responderAgentId

          : interaction.initiatorAgentId

        : (interaction.counterpartyAgentId ?? 'Local interaction');

      const counterpart =

        data.agents.find((item) => item.agentId === counterpartId)?.name ?? counterpartId;

      const counterpartMode: AgentHistoryItem['counterpartMode'] = 'agent';

      const rawOutcome = String(

        conclusion?.lifecycle === 'provisional'

          ? 'provisional'

          : (conclusion?.outcome ??

              receipt?.outcome ??

              report?.outcome ??

              (interaction.status === 'completed' ? 'success' : (interaction.status ?? 'pending'))),

      );

      const outcome = (

        ['success', 'partial', 'failure', 'cancelled', 'provisional', 'active'].includes(rawOutcome)

          ? rawOutcome

          : 'pending'

      ) as AgentHistoryItem['outcome'];

      return {

        interactionId,

        title: String(interaction.contract?.purpose ?? interaction.purpose ?? 'Interaction'),

        counterpart: String(counterpart),

        counterpartMode,

        outcome,

        at: String(

          report?.completedAt ??

            receipt?.issuedAt ??

            conclusion?.concludedAt ??

            interaction.completedAt ??

            interaction.updatedAt ??

            interaction.createdAt ??

            new Date().toISOString(),

        ),

      };

    })

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

}

function OutcomeSymbol({ outcome }: { outcome: AgentHistoryItem['outcome'] }) {

  if (outcome === 'success')

    return (

      <span className="outcomeSymbol success">

        <Check />

      </span>

    );

  if (outcome === 'failure' || outcome === 'cancelled')

    return (

      <span className="outcomeSymbol failure">

        <X />