Make onboarding identity ledger explicit (#61)

Author: shaypal5

src/App.tsx

@@ -1039,6 +1039,14 @@ function Onboarding({
   onCopyTokenFileCommand: (agent: AgentIdentity) => void;
   onMintToken: (agent: AgentIdentity) => void;
 }) {
+  const agents = [...state.agents].sort((left, right) => {
+    const rightTime = new Date(right.requestedAt || right.approvedAt || 0).getTime();
+    const leftTime = new Date(left.requestedAt || left.approvedAt || 0).getTime();
+    return rightTime - leftTime || left.handle.localeCompare(right.handle);
+  });
+  const pendingCount = agents.filter((agent) => agent.status === "pending").length;
+  const approvedCount = agents.filter((agent) => agent.status === "approved").length;
+  const suspendedCount = agents.filter((agent) => agent.status === "suspended").length;
   return (
     <div className="view-stack">
       <div className="section-title">
@@ -1062,16 +1070,40 @@ function Onboarding({
         </header>
         <textarea value={introPrompt} onChange={(event) => onIntroPromptChange(event.target.value)} rows={18} />
       </section>
+      <section className="onboarding-ledger" aria-label="Onboarding status summary">
+        <div>
+          <span>{pendingCount}</span>
+          <p>pending approval</p>
+        </div>
+        <div>
+          <span>{approvedCount}</span>
+          <p>approved agents</p>
+        </div>
+        <div>
+          <span>{suspendedCount}</span>
+          <p>suspended agents</p>
+        </div>
+        <div>
+          <span>{agents.length}</span>
+          <p>total identities in storage</p>
+        </div>
+      </section>
+      {pendingCount === 0 ? (
+        <p className="empty-state">No pending onboarding approvals. Approved and suspended identities remain listed below.</p>
+      ) : null}
       <div className="agent-table">
-        {state.agents.map((agent) => (
+        {agents.map((agent) => (
           <article className={agent.status === "pending" ? "agent-card needs-action" : "agent-card"} key={agent.id}>
             <button className="agent-summary" type="button" onClick={() => onToggle(agent.id)}>
               <div>
                 <b>{agent.handle}</b>
                 <span>{agent.displayName}</span>
               </div>
               <span>{agent.machineScope}</span>
-              <span className={`status ${agent.status}`}>{agent.status}</span>
+              <span className={`status ${agent.status}`}>
+                {agent.status}
+                {agent.approvedAt ? ` ${new Date(agent.approvedAt).toLocaleDateString()}` : ""}
+              </span>
             </button>
             {expandedIds.has(agent.id) ? (
               <div className="expanded-panel">

src/styles.css

@@ -943,6 +943,32 @@ meter {
   gap: 12px;
 }
 
+.onboarding-ledger {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.onboarding-ledger div {
+  border: 1px solid var(--color-line);
+  border-radius: 8px;
+  background: var(--color-surface);
+  padding: 12px 14px;
+}
+
+.onboarding-ledger span {
+  display: block;
+  color: var(--color-text);
+  font-size: 1.4rem;
+  font-weight: 900;
+}
+
+.onboarding-ledger p {
+  margin: 2px 0 0;
+  color: var(--color-text-secondary);
+  font-weight: 750;
+}
+
 .agent-row,
 .agent-summary {
   display: grid;
@@ -1174,6 +1200,7 @@ meter {
   }
 
   .stats-grid,
+  .onboarding-ledger,
   .forum-grid,
   .forum-form-grid,
   .direct-create-panel,
@@ -1208,6 +1235,7 @@ meter {
   }
 
   .stats-grid,
+  .onboarding-ledger,
   .forum-grid,
   .forum-form-grid,
   .direct-create-panel,