From a39b6a11a32aed13c9e87e3b18c8221c79e59d42 Mon Sep 17 00:00:00 2001
From: dirtybits <dirtybitsofficial@gmail.com>
Date: Wed, 4 Nov 2026 17:28:41 -0800
Subject: [PATCH 1/2] style(web): tighten diagram layout and show skill file
 tree

---
 web/app/page.tsx                            |  6 ---
 web/components/AgentVouchDiagram.module.css | 56 +++++++++++++++++----
 web/components/AgentVouchDiagram.tsx        | 26 ++++++++--
 3 files changed, 67 insertions(+), 21 deletions(-)

diff --git a/web/app/page.tsx b/web/app/page.tsx
index a5d20154..2108f348 100644
--- a/web/app/page.tsx
+++ b/web/app/page.tsx
@@ -95,12 +95,6 @@ export default async function Home() {
 
       <section className="px-6 pb-6" aria-labelledby="agent-flow-heading">
         <div className="mx-auto max-w-6xl">
-          <h2
-            id="agent-flow-heading"
-            className="font-display text-3xl text-gray-900 dark:text-white md:text-4xl"
-          >
-            How AI Agents use AgentVouch
-          </h2>
           <AgentVouchDiagram />
         </div>
       </section>
diff --git a/web/components/AgentVouchDiagram.module.css b/web/components/AgentVouchDiagram.module.css
index b0c4af75..6dcd45c8 100644
--- a/web/components/AgentVouchDiagram.module.css
+++ b/web/components/AgentVouchDiagram.module.css
@@ -3,9 +3,7 @@
   --surface: var(--color-white);
   --muted: var(--color-gray-500);
   --return: var(--color-emerald-600);
-  margin-top: 28px;
-  padding: 28px;
-  border: 1px solid var(--edge);
+  padding: 0 0 8px;
   border-radius: 16px;
   background: var(--color-gray-50);
   color: var(--foreground);
@@ -21,8 +19,9 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-  gap: 12px;
-  font-size: 13px;
+  align-items: baseline;
+  gap: 12px 24px;
+  font-size: 16px;
   color: var(--muted);
 }
 .status {
@@ -33,7 +32,7 @@
   display: grid;
   grid-template-columns: 1fr 48px 1.15fr 48px 1fr;
   align-items: center;
-  padding: 44px 0 28px;
+  padding: 24px 28px 8px;
 }
 .card {
   min-width: 0;
@@ -180,11 +179,46 @@
   font-size: 12px;
   transition: border-color 125ms;
 }
+.fileTree {
+  margin: 0 0 0 6px;
+  padding: 0;
+  list-style: none;
+}
+.fileTree li {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 0 5px 22px;
+}
+.fileTree li::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  border-left: 1px solid var(--edge);
+}
+.fileTree li:last-child::before {
+  bottom: 50%;
+}
+.fileTree li::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 14px;
+  border-top: 1px solid var(--edge);
+}
+.fileTree svg {
+  flex-shrink: 0;
+  color: var(--muted);
+}
 .skillTitle {
   display: flex;
   gap: 8px;
   align-items: center;
-  margin-bottom: 8px;
+  margin-bottom: 0;
   color: var(--lobster-accent);
 }
 @keyframes outbound {
@@ -221,11 +255,11 @@
 }
 @media (max-width: 767px) {
   .scene {
-    padding: 20px;
+    padding: 0 0 8px;
   }
   .flow {
     grid-template-columns: 1fr;
-    padding-top: 28px;
+    padding: 16px 12px 8px;
   }
   .card {
     padding: 22px;
@@ -255,9 +289,10 @@
     animation-name: up;
   }
   .caption {
-    font-size: 12px;
+    font-size: 14px;
   }
   .status {
+    margin-left: 0;
     min-height: 36px;
   }
   @keyframes down {
@@ -363,6 +398,5 @@
   animation: logoIn 240ms ease-out;
 }
 .skillTitle {
-  min-height: 3lh;
   animation: logoIn 240ms ease-out;
 }
diff --git a/web/components/AgentVouchDiagram.tsx b/web/components/AgentVouchDiagram.tsx
index eaecd912..0880ebd7 100644
--- a/web/components/AgentVouchDiagram.tsx
+++ b/web/components/AgentVouchDiagram.tsx
@@ -13,6 +13,7 @@ import {
   FiShield,
   FiUsers,
   FiFileText,
+  FiFolder,
 } from "react-icons/fi";
 import { IoGameControllerOutline } from "react-icons/io5";
 import agentvouchLogo from "@/app/agentvouch_logo.svg";
@@ -80,6 +81,12 @@ export function AgentVouchDiagram() {
   return (
     <div className={styles.scene} data-phase={reduced ? "static" : phase}>
       <div className={styles.caption}>
+        <h2
+          id="agent-flow-heading"
+          className="font-display text-3xl text-gray-900 dark:text-white md:text-4xl"
+        >
+          How AI Agents use AgentVouch
+        </h2>
         <span className={styles.status}>
           {reduced ? "Find · Review · Get" : `0${phase + 1} / ${steps[phase]}`}
         </span>
@@ -150,7 +157,7 @@ export function AgentVouchDiagram() {
           <p className={styles.eyebrow}>Reputation + discovery</p>
           <h3>AgentVouch</h3>
           <p>
-            Find skills for your workflow. Review their security scans and
+            Find skills for your workflows. Review their security scans and
             author reputation.
           </p>
           <div className={styles.signals}>
@@ -188,9 +195,20 @@ export function AgentVouchDiagram() {
                 <WorkflowIcon aria-hidden="true" />
                 <span>{workflow.name} Workflow</span>
               </div>
-              <span>skill.md</span>
-              <span>scripts/</span>
-              <span>templates/</span>
+              <ul className={styles.fileTree} aria-label="Skill package files">
+                <li>
+                  <FiFileText aria-hidden="true" />
+                  <span>SKILL.md</span>
+                </li>
+                <li>
+                  <FiFolder aria-hidden="true" />
+                  <span>scripts/</span>
+                </li>
+                <li>
+                  <FiFolder aria-hidden="true" />
+                  <span>templates/</span>
+                </li>
+              </ul>
             </div>
           </div>
         </article>

From d3a1ea403bbdd4cc3cf61ee15351e04dc618e92a Mon Sep 17 00:00:00 2001
From: dirtybits <dirtybitsofficial@gmail.com>
Date: Wed, 4 Nov 2026 17:29:14 -0800
Subject: [PATCH 2/2] fix(web): keep rotating skill card height stable

---
 web/components/AgentVouchDiagram.module.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/web/components/AgentVouchDiagram.module.css b/web/components/AgentVouchDiagram.module.css
index 6dcd45c8..15c10390 100644
--- a/web/components/AgentVouchDiagram.module.css
+++ b/web/components/AgentVouchDiagram.module.css
@@ -171,6 +171,8 @@
 .skill {
   position: relative;
   display: grid;
+  align-content: start;
+  min-height: 180px;
   gap: 8px;
   padding: 16px;
   background: var(--surface);