Add Steward chain-of-custody hero

Author: dolepee

web/src/main.tsx

@@ -904,6 +904,28 @@ function App() {
               : "Steward stores a DAO voting mandate, asks Somnia's Parse Website agent to read proposal pages, sends the result to independent LLM reviewers, and casts the majority YES, NO, or ABSTAIN vote onchain."}
           </p>
           <p className="proofLine">5 proposal URLs · 15 reviewer calls · external forum proof included</p>
+          <div className="chainOfCustody" aria-label="Agent vote chain of custody">
+            <article>
+              <span>01</span>
+              <strong>Source URL</strong>
+              <p>Developer DAO forum proposal</p>
+            </article>
+            <article>
+              <span>02</span>
+              <strong>Parse Website</strong>
+              <p>Request #{externalCouncilCase.parseRequestId}</p>
+            </article>
+            <article>
+              <span>03</span>
+              <strong>3 reviewers</strong>
+              <p>Budget, risk, participation</p>
+            </article>
+            <article>
+              <span>04</span>
+              <strong>Governor vote</strong>
+              <p>{externalCouncilCase.tally}</p>
+            </article>
+          </div>
           <div className="heroStats" aria-label="Steward live proof metrics">
             <article>
               <strong>5</strong>
@@ -935,6 +957,11 @@ function App() {
         </div>
 
         <div className="receipt" id="proof">
+          <div className="opsHeader" aria-label="Steward command center status">
+            <span>STWD / COUNCIL-05</span>
+            <strong>VERIFIED EXTERNAL RUN</strong>
+            <small>Somnia Testnet · live callbacks</small>
+          </div>
           <div className="proofSpotlight">
             <div className="spotlightTop">
               <span>External proposal proof</span>
@@ -971,6 +998,23 @@ function App() {
               </a>
             </div>
           </div>
+          <div className="reviewerBoard" aria-label="External council reviewer results">
+            <article>
+              <span>Budget reviewer</span>
+              <strong>YES</strong>
+              <p>12,000 USDC request is within delegated public-goods limits.</p>
+            </article>
+            <article>
+              <span>Risk reviewer</span>
+              <strong>YES</strong>
+              <p>No team unlock, no treasury drain, and source page is public.</p>
+            </article>
+            <article>
+              <span>Participation reviewer</span>
+              <strong>YES</strong>
+              <p>DevConnect growth work maps to DAO participation criteria.</p>
+            </article>
+          </div>
           <div className="receiptTop">
             <span>Baseline direct LLM proof</span>
             <strong>

web/src/styles.css

@@ -1696,6 +1696,53 @@ main {
   font-family: "Newsreader", Georgia, serif;
 }
 
+.chainOfCustody {
+  display: grid;
+  max-width: 820px;
+  margin-top: 24px;
+  border: 1px solid rgba(128, 255, 210, 0.18);
+  border-radius: 26px;
+  background:
+    linear-gradient(90deg, rgba(128, 255, 210, 0.1), transparent 34%),
+    rgba(255, 255, 255, 0.035);
+}
+
+.chainOfCustody article {
+  display: grid;
+  grid-template-columns: 52px minmax(0, 0.72fr) minmax(0, 1fr);
+  gap: 16px;
+  align-items: center;
+  min-width: 0;
+  padding: 14px 16px;
+  border-bottom: 1px solid rgba(221, 255, 246, 0.1);
+}
+
+.chainOfCustody article:last-child {
+  border-bottom: 0;
+}
+
+.chainOfCustody span {
+  color: var(--green);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.16em;
+}
+
+.chainOfCustody strong {
+  color: #f6fff7;
+  font-family: "Newsreader", Georgia, serif;
+  font-size: 28px;
+  line-height: 0.94;
+  letter-spacing: -0.06em;
+}
+
+.chainOfCustody p {
+  margin: 0;
+  color: rgba(237, 245, 239, 0.62);
+  font-size: 13px;
+  line-height: 1.25;
+}
+
 .receipt {
   border-color: rgba(128, 255, 210, 0.16);
   border-radius: 18px 70px 18px 70px;
@@ -1715,6 +1762,32 @@ main {
   background-size: 48px 48px;
 }
 
+.opsHeader {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  gap: 14px;
+  align-items: center;
+  margin-bottom: 18px;
+  padding: 12px 14px;
+  border: 1px solid rgba(128, 255, 210, 0.14);
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.16);
+}
+
+.opsHeader strong {
+  color: var(--green);
+  font-size: 12px;
+  letter-spacing: 0.14em;
+}
+
+.opsHeader small {
+  color: rgba(237, 245, 239, 0.5);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
 .proofSpotlight {
   border-color: rgba(128, 255, 210, 0.22);
   border-radius: 14px 48px 14px 48px;
@@ -1757,11 +1830,43 @@ main {
 .quorumDeck article,
 .payloadDeck article,
 .live div,
-.consoleOutput {
+.consoleOutput,
+.reviewerBoard article {
   border-color: rgba(221, 255, 246, 0.12);
   background: rgba(255, 255, 255, 0.045);
 }
 
+.reviewerBoard {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+  margin-top: 14px;
+}
+
+.reviewerBoard article {
+  min-width: 0;
+  padding: 16px;
+  border: 1px solid;
+  border-radius: 22px;
+}
+
+.reviewerBoard strong {
+  display: block;
+  margin-top: 16px;
+  color: var(--green);
+  font-family: "Newsreader", Georgia, serif;
+  font-size: 42px;
+  line-height: 0.84;
+  letter-spacing: -0.07em;
+}
+
+.reviewerBoard p {
+  margin: 12px 0 0;
+  color: rgba(237, 245, 239, 0.64);
+  font-size: 13px;
+  line-height: 1.34;
+}
+
 .voteCard.yes strong,
 .councilBoard .yes strong,
 .proposalSources .yes strong {
@@ -1916,6 +2021,12 @@ main {
     padding-top: 58px;
   }
 
+  .chainOfCustody article,
+  .opsHeader,
+  .reviewerBoard {
+    grid-template-columns: 1fr;
+  }
+
   .copy h1 {
     font-size: clamp(56px, 15vw, 86px);
   }