The AI trust layer between agents: identity, agreements, safeguards, and outcome intelligence for A2A.
Commit 874239cc
874239cc591fMerged
aryaamin <[email protected]> · 2 months ago · 2 files · ~2 modified
Description
landing page updates
Details
- Commit
- 874239cc591f
- Parent
- 2c749578ec22
apps/dashboard/src/main.tsxmodifiedView file
@@ -1,6 +1,18 @@
11
import React, { useCallback, useEffect, useMemo, useState } from 'react';22
import { createRoot } from 'react-dom/client';3-
import { Bot } from 'lucide-react';3+
import {4+
ArrowRight,5+
Bot,6+
Check,7+
FileSignature,8+
Fingerprint,9+
History as HistoryIcon,10+
Moon,11+
Network,12+
Radar,13+
ShieldCheck,14+
Sun,15+
} from 'lucide-react';416
import { AppShell } from '@/components/app-shell';517
import { Input } from '@/components/ui/input';618
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';@@ -199,7 +211,7 @@
199211
document.title = session200212
? `${pageMeta[page].label} · OpenClasp`201213
: session === null202-
? 'Sign in · OpenClasp'214+
? 'OpenClasp · Trust for agent communication'203215
: 'OpenClasp';204216
}, [page, session]);205217
@@ -299,6 +311,8 @@
299311
if (!session)300312
return import.meta.env.DEV ? (301313
<Login314+
theme={theme}315+
onToggleTheme={() => setTheme((current) => (current === 'dark' ? 'light' : 'dark'))}302316
onPreview={() => {303317
enablePreview();304318
setPreview(true);@@ -311,7 +325,10 @@
311325
}}312326
/>313327
) : (314-
<Login />328+
<Login329+
theme={theme}330+
onToggleTheme={() => setTheme((current) => (current === 'dark' ? 'light' : 'dark'))}331+
/>315332
);316333
317334
return (@@ -356,7 +373,15 @@
356373
);357374
}358375
359-
function Login({ onPreview }: { onPreview?: () => void }) {376+
function Login({377+
onPreview,378+
theme,379+
onToggleTheme,380+
}: {381+
onPreview?: () => void;382+
theme: Theme;383+
onToggleTheme: () => void;384+
}) {360385
const [error, setError] = useState('');361386
const continueWith = async (provider: 'google' | 'github') => {362387
setError('');@@ -366,52 +391,349 @@
366391
setError(`${provider === 'google' ? 'Google' : 'GitHub'} sign-in is not configured yet.`);367392
}368393
};394+
const scrollToAnchor = (event: React.MouseEvent<HTMLAnchorElement>) => {395+
const id = event.currentTarget.hash.slice(1);396+
const target = document.getElementById(id);397+
if (!target) return;398+
event.preventDefault();399+
const reducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;400+
history.pushState({}, '', `#${id}`);401+
target.classList.remove('is-arriving');402+
if (!reducedMotion && id !== 'top') {403+
void target.offsetWidth;404+
target.classList.add('is-arriving');405+
window.setTimeout(() => target.classList.remove('is-arriving'), 900);406+
}407+
target.scrollIntoView({ behavior: reducedMotion ? 'auto' : 'smooth', block: 'start' });408+
};369409
return (370-
<div className="loginPage">371-
<section className="loginPitch">372-
<div className="brand">373-
<div className="mark">OC</div>410+
<div className="landingPage">411+
<header className="landingNav">412+
<a413+
className="landingBrand"414+
href="#top"415+
aria-label="OpenClasp home"416+
onClick={scrollToAnchor}417+
>418+
<span className="landingMark" aria-hidden="true">419+
<span />420+
<span />421+
</span>374422
<strong>OpenClasp</strong>423+
</a>424+
<nav aria-label="Main navigation">425+
<a href="#product" onClick={scrollToAnchor}>426+
Product427+
</a>428+
<a href="#principles" onClick={scrollToAnchor}>429+
Principles430+
</a>431+
</nav>432+
<div className="landingNavActions">433+
<button434+
className="themeButton"435+
type="button"436+
onClick={onToggleTheme}437+
aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`}438+
>439+
{theme === 'dark' ? <Sun /> : <Moon />}440+
</button>441+
<a className="navCta" href="#access" onClick={scrollToAnchor}>442+
Sign in <ArrowRight />443+
</a>375444
</div>376-
<div>377-
<p className="eyebrow">ASSURANCE</p>378-
<h1>Know who your agent is dealing with.</h1>379-
<p>Verified identities and signed outcomes. No message bodies for scoring.</p>445+
</header>446+
447+
<main id="top">448+
<section className="landingHero">449+
<div className="heroCopy">450+
<div className="landingKicker">451+
<span /> Trust infrastructure for A2A452+
</div>453+
<h1>454+
Let agents talk.455+
<br />456+
<em>Know who to trust.</em>457+
</h1>458+
<p>459+
OpenClasp adds verified identity, negotiated contracts, and evidence-backed history to460+
direct agent-to-agent communication.461+
</p>462+
<div className="heroActions">463+
<a className="landingPrimary" href="#access" onClick={scrollToAnchor}>464+
Get started <ArrowRight />465+
</a>466+
<a className="landingSecondary" href="#product" onClick={scrollToAnchor}>467+
Explore the layer468+
</a>469+
</div>470+
<div className="heroNotes" aria-label="Product principles">471+
<span>472+
<Check /> Built around A2A473+
</span>474+
<span>475+
<Check /> Evidence, not a universal score476+
</span>477+
</div>478+
</div>479+
480+
<div className="assuranceVisual" aria-label="Illustration of an assured agent exchange">481+
<div className="visualGrid" aria-hidden="true" />482+
<div className="visualTopline">483+
<span>Assurance flow</span>484+
<span className="visualLive">485+
<i /> Live486+
</span>487+
</div>488+
<div className="agentExchange">489+
<article className="agentNode agentNodeLeft">490+
<div className="agentGlyph">491+
<Bot />492+
</div>493+
<div>494+
<strong>Atlas</strong>495+
<small>Research agent</small>496+
</div>497+
<span className="verifiedTick">498+
<Check />499+
</span>500+
</article>501+
<div className="contractRail">502+
<span className="railDot railDotOne" />503+
<span className="railDot railDotTwo" />504+
<div className="contractChip">505+
<FileSignature />506+
<span>507+
<small>Terms accepted</small>508+
<strong>Contract · 0x7F3C</strong>509+
</span>510+
</div>511+
</div>512+
<article className="agentNode agentNodeRight">513+
<div className="agentGlyph">514+
<Bot />515+
</div>516+
<div>517+
<strong>Nova</strong>518+
<small>Review agent</small>519+
</div>520+
<span className="verifiedTick">521+
<Check />522+
</span>523+
</article>524+
</div>525+
<div className="assuranceEvents">526+
<div>527+
<Fingerprint />528+
<span>529+
<small>Identity</small>530+
<strong>Verified</strong>531+
</span>532+
</div>533+
<div>534+
<Radar />535+
<span>536+
<small>Monitoring</small>537+
<strong>In policy</strong>538+
</span>539+
</div>540+
<div>541+
<HistoryIcon />542+
<span>543+
<small>Outcome</small>544+
<strong>Evidence linked</strong>545+
</span>546+
</div>547+
</div>548+
<div className="visualCaption">549+
<span>Direct A2A channel</span>550+
<span>OpenClasp assurance layer</span>551+
</div>552+
</div>553+
</section>554+
555+
<div className="capabilityRail" aria-label="OpenClasp capabilities">556+
<span>Identity</span>557+
<i />558+
<span>Discovery</span>559+
<i />560+
<span>Counterparty insight</span>561+
<i />562+
<span>Contracts</span>563+
<i />564+
<span>Monitoring</span>565+
<i />566+
<span>Outcomes</span>567+
<i />568+
<span>Feedback</span>380569
</div>381-
<div className="loginProof">382-
<span>01</span> User-owned history383-
<span>02</span> No universal trust score384-
<span>03</span> Explicit network consent385-
</div>386-
</section>387-
<section className="loginCard">388-
<div>389-
<p className="eyebrow">SECURE ACCESS</p>390-
<h2>Sign in</h2>391-
<p>Agents, signed history, and network controls.</p>392-
</div>393-
<div className="socialButtons">394-
<button type="button" onClick={() => void continueWith('google')}>395-
<GoogleMark /> Continue with Google396-
</button>397-
<button type="button" onClick={() => void continueWith('github')}>398-
<GitHubMark /> Continue with GitHub399-
</button>400-
{onPreview && (401-
<button type="button" onClick={() => void onPreview()}>402-
Continue with local preview403-
</button>404-
)}405-
</div>406-
{error && (407-
<div className="loginError" role="alert">408-
{error}570+
571+
<section className="productSection" id="product">572+
<div className="sectionIntro">573+
<p className="landingKicker">574+
<span /> One layer. Before, during, and after.575+
</p>576+
<h2>577+
A trust layer.578+
<br />579+
<em>Not another transport.</em>580+
</h2>581+
<p>582+
Agents keep communicating over A2A. OpenClasp makes each counterparty and interaction583+
easier to inspect, constrain, and learn from.584+
</p>585+
</div>586+
<div className="featureGrid">587+
<article className="featureCard featureCardWide">588+
<div className="featureIcon">589+
<Network />590+
</div>591+
<span>01 / Before</span>592+
<h3>Find the right counterparty.</h3>593+
<p>Public discovery meets private, task-specific insight from your own history.</p>594+
<div className="discoveryMini" aria-hidden="true">595+
<div>596+
<span className="miniAvatar">A</span>597+
<strong>Atlas Research</strong>598+
<small>Verified identity</small>599+
<b>Research</b>600+
</div>601+
<div>602+
<span className="miniAvatar">K</span>603+
<strong>Keel Ops</strong>604+
<small>3 relevant outcomes</small>605+
<b>Operations</b>606+
</div>607+
</div>608+
</article>609+
<article className="featureCard">610+
<div className="featureIcon">611+
<FileSignature />612+
</div>613+
<span>02 / Agree</span>614+
<h3>Negotiate the work.</h3>615+
<p>Agents propose, revise, and sign explicit terms before an interaction begins.</p>616+
<div className="termMini" aria-hidden="true">617+
<small>SCOPE</small>618+
<strong>Source-backed brief</strong>619+
<small>SHARING</small>620+
<strong>Participants only</strong>621+
<span>622+
<Check /> Both parties signed623+
</span>624+
</div>625+
</article>626+
<article className="featureCard">627+
<div className="featureIcon">628+
<ShieldCheck />629+
</div>630+
<span>03 / During + after</span>631+
<h3>Build usable history.</h3>632+
<p>633+
Connect monitoring, outcomes, feedback, and evidence without turning trust into one634+
score.635+
</p>636+
<div className="historyMini" aria-hidden="true">637+
<span>638+
<i className="ok" /> Contract signed <b>09:41</b>639+
</span>640+
<span>641+
<i className="ok" /> Outcome recorded <b>10:08</b>642+
</span>643+
<span>644+
<i /> Feedback attached <b>10:12</b>645+
</span>646+
</div>647+
</article>648+
</div>649+
</section>650+
651+
<section className="principlesSection" id="principles">652+
<div>653+
<p className="landingKicker">654+
<span /> Deliberately bounded655+
</p>656+
<h2>657+
Trust should be658+
<br />659+
<em>specific and inspectable.</em>660+
</h2>661+
</div>662+
<div className="principleList">663+
<article>664+
<span>01</span>665+
<div>666+
<h3>No agent lock-in</h3>667+
<p>OpenClasp works alongside agents. It does not provide them.</p>668+
</div>669+
</article>670+
<article>671+
<span>02</span>672+
<div>673+
<h3>No proprietary transport</h3>674+
<p>Communication remains direct over A2A.</p>675+
</div>676+
</article>677+
<article>678+
<span>03</span>679+
<div>680+
<h3>No universal trust score</h3>681+
<p>Insight stays contextual, evidence-backed, and useful for the task at hand.</p>682+
</div>683+
</article>684+
</div>685+
</section>686+
687+
<section className="accessSection" id="access">688+
<div className="accessCopy">689+
<p className="landingKicker">690+
<span /> Secure access691+
</p>692+
<h2>Make every agent interaction accountable.</h2>693+
<p>694+
Sign in to connect agents, control network participation, and inspect signed history.695+
</p>696+
</div>697+
<div className="accessCard">698+
<div className="socialButtons">699+
<button type="button" onClick={() => void continueWith('google')}>700+
<GoogleMark /> Continue with Google701+
</button>702+
<button type="button" onClick={() => void continueWith('github')}>703+
<GitHubMark /> Continue with GitHub704+
</button>705+
{onPreview && (706+
<button type="button" onClick={() => void onPreview()}>707+
Open local preview <ArrowRight />708+
</button>709+
)}710+
</div>711+
{error && (712+
<div className="loginError" role="alert">713+
{error}714+
</div>715+
)}716+
<small>717+
Authentication is handled by Google or GitHub. OpenClasp never receives your password.718+
</small>409719
</div>410-
)}720+
</section>721+
</main>722+
723+
<footer className="landingFooter">724+
<a className="landingBrand" href="#top" onClick={scrollToAnchor}>725+
<span className="landingMark" aria-hidden="true">726+
<span />727+
<span />728+
</span>729+
<strong>OpenClasp</strong>730+
</a>731+
<p>Assurance for open agent communication.</p>411732
<small>412-
Google and GitHub handle authentication. OpenClasp never receives your password.733+
Not an agent provider, proprietary transport, blockchain product, or universal trust734+
score.413735
</small>414-
</section>736+
</footer>415737
</div>416738
);417739
}apps/dashboard/src/styles.cssmodifiedView file
Loading diff…