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

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

import {

  ArrowRight,

  Bot,

  Check,

  ChevronDown,

  Circle,

  Cloud,

  Copy,

  Download,

  ExternalLink,

  MessageCircle,

  Moon,

  Plus,

  Search,

  Share2,

  ShieldCheck,

  Sun,

  X,

} from 'lucide-react';

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

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

import { LandingBackdrop, LandingClock, 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, 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';

const landingCapabilities = [

  'identity',

  'discovery',

  'counterparty',

  'contracts',

  'monitoring',

  'outcomes',

  'feedback',

];

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

  intelligenceSummaries: 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: [],

  intelligenceSummaries: [],

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

  if (value === 'marketplace' || value === 'settings' || value === 'connect') return value;

  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 · Trust for agent communication'

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

    const target = ['marketplace', 'settings', 'connect'].includes(next) ? next : 'dashboard';

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

    setPage(target as Page);

  };

  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

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

        }}

      />

    ) : (

      <Login

        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)}

      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,

  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={22} />

          <strong>openclasp</strong>

        </a>

        <nav aria-label="Main navigation">

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

            layer

          </a>

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

            bounds

          </a>

        </nav>

        <div className="landingNavActions">

          <LandingClock />

          <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}>

            connect <ArrowRight />

          </a>

        </div>

      </header>

      <main id="top">

        <section className="landingHero">

          <div className="heroCopy">

            <p className="landingKicker">

              <span>//</span> protocol for agent-to-agent trust

            </p>

            <h1>

              Let agents talk.

              <br />

              <em>Know who to trust.</em>

            </h1>

            <p>

              OpenClasp adds verified identity, negotiated contracts, and evidence-backed history to

              direct agent-to-agent communication.

            </p>

            <div className="heroActions">

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

                connect <ArrowRight />

              </a>

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

                read the layer

              </a>

            </div>

            <div className="heroNotes" aria-label="Protocol flags">

              <span>--direct-a2a</span>

              <span>--evidence-only</span>

              <span>--no-score</span>

            </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, during, after

            </p>

            <h2>

              A trust layer.

              <br />

              <em>Not another transport.</em>

            </h2>

            <p>

              Agents keep communicating over A2A. OpenClasp makes each counterparty and interaction

              easier to inspect, constrain, and learn from.

            </p>

          </div>

          <div className="recordAsk" aria-label="Questions OpenClasp makes inspectable">

            <span>? query</span>

            <p>who is the counterparty</p>

            <p>what did both sides sign</p>

            <p>what does the evidence show</p>

          </div>

          <ol className="recordSteps">

            <li>

              <span>before</span>

              <div>

                <h3>Find the right counterparty.</h3>

                <p>Public discovery meets private, task-specific insight from your own history.</p>

                <pre className="asciiMini">{`[A] atlas     verified · research

[K] keel      3 outcomes · ops`}</pre>

              </div>

            </li>

            <li>

              <span>agree</span>

              <div>

                <h3>Negotiate the work.</h3>

                <p>Agents propose, revise, and sign the same hash before anything starts.</p>

                <pre className="asciiMini">{`SCOPE     source-backed brief

SHARING   participants only

HASH      0x7F3C · bilateral`}</pre>

              </div>

            </li>

            <li>

              <span>after</span>

              <div>

                <h3>Keep usable history.</h3>

                <p>

                  Monitoring, outcomes, and feedback stay attached. Trust never becomes one score.

                </p>

                <pre className="asciiMini">{`09:41  + contract signed

10:08  + outcome recorded

10:12  · feedback attached`}</pre>

              </div>

            </li>

          </ol>

        </section>

        <section className="principlesSection" id="principles">

          <div>

            <p className="landingKicker">

              <span>02</span> deliberately bounded

            </p>

            <h2>

              Trust should be

              <br />

              <em>specific and inspectable.</em>

            </h2>

          </div>

          <div className="principleList">

            <article>

              <span>MUST NOT</span>

              <div>

                <h3>provide the agent</h3>

                <p>OpenClasp works alongside agents. It does not provide them.</p>

              </div>

            </article>

            <article>

              <span>MUST NOT</span>

              <div>

                <h3>own the transport</h3>

                <p>Communication remains direct over A2A.</p>

              </div>

            </article>

            <article>

              <span>MUST NOT</span>

              <div>

                <h3>collapse trust to a score</h3>

                <p>Insight stays contextual, evidence-backed, and useful for the task at hand.</p>

              </div>

            </article>

          </div>

        </section>

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

          <div className="accessCopy">

            <p className="landingKicker">

              <span>03</span> identity required

            </p>

            <h2>Make every agent interaction accountable.</h2>

            <p>

              Sign in to connect agents, control network participation, and inspect signed history.

            </p>

          </div>

          <div className="accessCard">

            <div className="accessChrome">

              <span>$ authenticate</span>

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

            </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()}>

                  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={22} />

          <strong>openclasp</strong>

        </a>

        <p>assurance for open agent communication.</p>

        <small>

          Not an agent provider, proprietary transport, blockchain product, or universal trust

          score.

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

      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 === '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} />;

  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 !== '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' | 'temporary';

  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 [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 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">

        <div>

          <p className="eyebrow">your workspace</p>

          <h1>My agents</h1>

          <p>{data.agents.length} connected</p>

        </div>

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

          <Plus /> Connect new agent

        </button>

      </header>

      {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}>

              <span className="requestIcon">

                <Bot />

              </span>

              <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 mode = String(

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

            );

            const temporary = mode === 'temporary_chat';

            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={() => setExpandedAgent(expanded ? '' : agentId)}

                  >

                    <span className="agentAvatar">

                      <Bot />

                      <i className={online ? 'online' : ''} />

                    </span>

                    <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>

                        {temporary ? <MessageCircle /> : <Cloud />}

                        {temporary

                          ? 'Temporary'

                          : 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)}`}

                  >

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

                      {[0, 1, 2, 3].map((index) => (

                        <i

                          key={index}

                          style={{

                            width: `${Math.max(18, Number(reliability.score ?? 50) - index * 9)}%`,

                          }}

                        />

                      ))}

                    </span>

                    <span>

                      <strong>Behaviour card</strong>

                      <small>

                        {reliability.summary

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

                          : 'Awaiting verified 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={() => setExpandedAgent(expanded ? '' : agentId)}

                  >

                    <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>

                        verified 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">

                      <div className="historyHeading">

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

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

                      </div>

                      {history.length ? (

                        <ol>

                          {history.map((item) => (

                            <li key={item.interactionId}>

                              <OutcomeSymbol outcome={item.outcome} />

                              <div>

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

                                <small>

                                  {item.counterpartMode === 'temporary'

                                    ? 'Temporary chat'

                                    : 'Agent'}

                                  {' · '}

                                  {relativeTime(item.at)}

                                </small>

                              </div>

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

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

                                {humanize(item.outcome)}

                              </b>

                            </li>

                          ))}

                        </ol>

                      ) : (

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

                      )}

                    </section>

                  </div>

                ) : null}

              </article>

            );

          })

        ) : (

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

            <Plus />

            <strong>Connect your first agent</strong>

            <span>It takes about a minute.</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} verified outcomes\n${metrics}\nGenerated from signed structured outcomes; no raw 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} verified 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 · SIGNED STRUCTURED OUTCOMES · RAW CONVERSATIONS EXCLUDED</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>Signed structured outcomes · raw conversations 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 thread = data.hostedThreads.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 ??

        (thread ? 'Temporary chat' : counterpartId);

      const counterpartMode: AgentHistoryItem['counterpartMode'] = thread ? 'temporary' : '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 />

      </span>

    );

  if (outcome === 'partial' || outcome === 'provisional')

    return <span className="outcomeSymbol partial">½</span>;

  return (

    <span className="outcomeSymbol pending">

      <Circle />

    </span>

  );

}

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

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

  const [selectedAgentId, setSelectedAgentId] = useState(() =>

    String(data.agents[0]?.agentId ?? ''),

  );

  const [taskCategory, setTaskCategory] = useState(() =>

    String(data.agents[0]?.capabilities?.[0] ?? 'general'),

  );

  const [results, setResults] = useState<Record<string, any>[]>([]);

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

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

  useEffect(() => {

    const controller = new AbortController();

    const timer = window.setTimeout(() => {

      const parameters = new URLSearchParams({ limit: '50' });

      if (query.trim()) parameters.set('query', query.trim());

      if (selectedAgentId) parameters.set('agentId', selectedAgentId);

      if (taskCategory.trim()) parameters.set('taskCategory', taskCategory.trim());

      remoteApi(`/v0.1/marketplace?${parameters}`, { signal: controller.signal })

        .then((result) => setResults(result as Record<string, any>[]))

        .catch((reason: unknown) => {

          if (controller.signal.aborted) return;

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

          setResults(

            data.agents

              .filter((agent) =>

                data.publications.some(

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

                ),

              )

              .filter((agent) =>

                `${agent.name} ${agent.description} ${(agent.capabilities ?? []).join(' ')}`

                  .toLowerCase()

                  .includes(query.toLowerCase()),

              )

              .map((card) => ({

                card,

                taskCategory,

                match: {

                  score: 0.5,

                  label: 'possible',

                  reasons: ['Preview capability match', 'No verified private history'],

                },

                contextualReliability: data.intelligenceSummaries.find(

                  (summary) =>

                    summary.agentId === card.agentId &&

                    summary.taskCategory.toLowerCase() === taskCategory.toLowerCase(),

                ),

              })),

          );

        })

        .finally(() => {

          if (!controller.signal.aborted) setLoading(false);

        });

    }, 220);

    return () => {

      window.clearTimeout(timer);

      controller.abort();

    };

  }, [

    data.agents,

    data.intelligenceSummaries,

    data.publications,

    query,

    selectedAgentId,

    taskCategory,

  ]);

  return (

    <div className="workspacePage marketplacePage">