From 73f1ec2b28ca05d79db9fb0ea64bc1902c81fb9a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 9 Oct 2026 21:25:31 +0000
Subject: [PATCH 1/2] Web: show a labeled "AgentID verified" section on the
 agent profile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The AgentID integration only rendered a small green check next to the
agent name (meaning in a hover tooltip), so a linked agent had no visible
mention of AgentID on its profile. Add a dedicated verified-identity
section under the header showing the AgentID badge, "AgentID verified ·
<display name>", the verified email, the issuer (linked to agentid.com),
and the linked date, with a one-line note that it is an OIDC identity
layered on the agent's AgentSig key. Gated on agent.agentId.verified;
no change when an agent has no linked AgentID.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NNqTSRyDjL1LcayDuUeDkr
---
 packages/web/src/pages/AgentProfile.tsx | 63 +++++++++++++++++++++++++
 1 file changed, 63 insertions(+)

diff --git a/packages/web/src/pages/AgentProfile.tsx b/packages/web/src/pages/AgentProfile.tsx
index 5bc6f0d..c384957 100644
--- a/packages/web/src/pages/AgentProfile.tsx
+++ b/packages/web/src/pages/AgentProfile.tsx
@@ -350,6 +350,69 @@ export default function AgentProfile(): React.ReactElement {
           </p>
         </div>
 
+        {/* Verified identity (AgentID) */}
+        {agent.agentId?.verified && (
+          <div
+            style={{
+              background: 'var(--bg-secondary)',
+              border: '1px solid var(--border)',
+              borderRadius: 8,
+              padding: 20,
+              marginBottom: 32,
+              display: 'flex',
+              alignItems: 'flex-start',
+              gap: 14,
+            }}
+          >
+            <AgentIdBadge size={26} title="AgentID verified" />
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', marginBottom: 8 }}>
+                <span style={{ fontSize: 15, fontWeight: 600, color: 'var(--text-primary)' }}>AgentID verified</span>
+                {agent.agentId.displayName && (
+                  <span style={{ fontSize: 13, color: 'var(--text-secondary)' }}>· {agent.agentId.displayName}</span>
+                )}
+              </div>
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px 20px', fontSize: 13 }}>
+                {agent.agentId.email && (
+                  <span>
+                    <span style={{ color: 'var(--text-tertiary)' }}>Email </span>
+                    <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text-primary)' }}>{agent.agentId.email}</span>
+                    {agent.agentId.emailVerified && (
+                      <span style={{ color: 'var(--status-active)', marginLeft: 6 }}>✓ verified</span>
+                    )}
+                  </span>
+                )}
+                <span>
+                  <span style={{ color: 'var(--text-tertiary)' }}>Issuer </span>
+                  <a
+                    href="https://agentid.com"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    style={{ color: 'var(--accent)' }}
+                  >
+                    {agent.agentId.issuer.replace(/^https?:\/\//, '')}
+                  </a>
+                </span>
+                {agent.agentId.linkedAt && (
+                  <span>
+                    <span style={{ color: 'var(--text-tertiary)' }}>Linked </span>
+                    <span style={{ color: 'var(--text-primary)' }}>
+                      {new Date(agent.agentId.linkedAt).toLocaleDateString(undefined, {
+                        year: 'numeric',
+                        month: 'short',
+                        day: 'numeric',
+                      })}
+                    </span>
+                  </span>
+                )}
+              </div>
+              <div style={{ fontSize: 12, color: 'var(--text-tertiary)', marginTop: 8 }}>
+                Cryptographically verified identity via AgentID (OpenID Connect), layered on this agent&rsquo;s AgentSig signing key.
+              </div>
+            </div>
+          </div>
+        )}
+
         {/* Reputation card */}
         <div
           style={{

From 4aceea63c6f690ea9b25993f825dcc4b2fb5c3df Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 9 Oct 2026 21:33:38 +0000
Subject: [PATCH 2/2] Web: wrap long AgentID identity text so the card never
 overflows on mobile

Greptile P2 on the new verified-identity card: flexWrap moves whole items
to the next line but does not break long unbroken values, so a long masked
email or display name could spill outside the card on narrow phones. Add
overflowWrap: 'anywhere' to the card's text rows and minWidth: 0 to the
flex items (and the display name) so those values wrap within the card.
Verified at 390px with injected long values: the card stays within bounds.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NNqTSRyDjL1LcayDuUeDkr
---
 packages/web/src/pages/AgentProfile.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/web/src/pages/AgentProfile.tsx b/packages/web/src/pages/AgentProfile.tsx
index c384957..6a512ba 100644
--- a/packages/web/src/pages/AgentProfile.tsx
+++ b/packages/web/src/pages/AgentProfile.tsx
@@ -366,35 +366,35 @@ export default function AgentProfile(): React.ReactElement {
           >
             <AgentIdBadge size={26} title="AgentID verified" />
             <div style={{ flex: 1, minWidth: 0 }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', marginBottom: 8 }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', marginBottom: 8, overflowWrap: 'anywhere' }}>
                 <span style={{ fontSize: 15, fontWeight: 600, color: 'var(--text-primary)' }}>AgentID verified</span>
                 {agent.agentId.displayName && (
-                  <span style={{ fontSize: 13, color: 'var(--text-secondary)' }}>· {agent.agentId.displayName}</span>
+                  <span style={{ fontSize: 13, color: 'var(--text-secondary)', minWidth: 0, overflowWrap: 'anywhere' }}>· {agent.agentId.displayName}</span>
                 )}
               </div>
-              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px 20px', fontSize: 13 }}>
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px 20px', fontSize: 13, overflowWrap: 'anywhere' }}>
                 {agent.agentId.email && (
-                  <span>
+                  <span style={{ minWidth: 0 }}>
                     <span style={{ color: 'var(--text-tertiary)' }}>Email </span>
-                    <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text-primary)' }}>{agent.agentId.email}</span>
+                    <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text-primary)', overflowWrap: 'anywhere' }}>{agent.agentId.email}</span>
                     {agent.agentId.emailVerified && (
                       <span style={{ color: 'var(--status-active)', marginLeft: 6 }}>✓ verified</span>
                     )}
                   </span>
                 )}
-                <span>
+                <span style={{ minWidth: 0 }}>
                   <span style={{ color: 'var(--text-tertiary)' }}>Issuer </span>
                   <a
                     href="https://agentid.com"
                     target="_blank"
                     rel="noopener noreferrer"
-                    style={{ color: 'var(--accent)' }}
+                    style={{ color: 'var(--accent)', overflowWrap: 'anywhere' }}
                   >
                     {agent.agentId.issuer.replace(/^https?:\/\//, '')}
                   </a>
                 </span>
                 {agent.agentId.linkedAt && (
-                  <span>
+                  <span style={{ minWidth: 0 }}>
                     <span style={{ color: 'var(--text-tertiary)' }}>Linked </span>
                     <span style={{ color: 'var(--text-primary)' }}>
                       {new Date(agent.agentId.linkedAt).toLocaleDateString(undefined, {