V48 Gate 3 (implementation-only): rich tooltips across deposit/read stat surfaces + compact source-selection spacing

Rich hover tooltips (the TelemetryExplainerTrigger used by telemetry
pills, now generalized: 'as' div wrapper for block rows, optional
generic section) across every stat surface the pages show:
- route header metric chips (Depositing: Stage/Options/Positive ROI/
  Admitted/Network/Authority/Earning estimate; Reading: Stage/Rows/
  Boundary/Quote) via ProductRouteMetric.description
- source-safe session rows, organization-authority rows, earning-
  supply-intelligence rows, and opportunity-root rows on /deposits
- deposit proof-detail roots via ProductRouteProofRoot.description
- disclosure summaries (Disclosure boundary, Authority blockers) via
  ProductRouteDisclosure.summaryDescription
- transactions-table overview stat cards (Activity/Own visible/Visible
  tokens) and state pills (selection, mode, data source, search span)
- Provider/Repository kickers on the deposit source selection get the
  established (i) inline explainers (new provider explainer copy)
Copy lives in app/deposits/deposit-stat-explainers.ts.

Spacing: the source-selection stack compacts — provider/repo and
branch/commit blocks tightened (mt-3/gap-3), branch+commit pair at
tablet instead of lg, card chrome shrunk (px-3 py-2.5, h-9 combobox
triggers, smaller captions), summary strip tightened.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: geraldarthurdavis

uapi/app/deposits/DepositPageClient.tsx

@@ -70,6 +70,17 @@ import { QuantumOrb } from "@/components/base/bitcode/effects/quantum-orb";
 import { verifiedAccessOrbConfig } from "@/app/(root)/components/landing/marketing-landing-shared";
 import BitcodeInlineExplainer from "@/components/base/bitcode/execution/BitcodeInlineExplainer";
 import { DEPOSIT_SECTION_EXPLAINERS } from "@/app/deposits/deposit-explainers";
+import {
+  DEPOSIT_AUTHORITY_BLOCKERS_EXPLAINER,
+  DEPOSIT_AUTHORITY_ROW_EXPLAINERS,
+  DEPOSIT_DISCLOSURE_BOUNDARY_EXPLAINER,
+  DEPOSIT_EARNING_ROW_EXPLAINERS,
+  DEPOSIT_HEADER_METRIC_EXPLAINERS,
+  DEPOSIT_OPPORTUNITY_ROOT_EXPLAINER,
+  DEPOSIT_PROOF_ROOT_EXPLAINERS,
+  DEPOSIT_SESSION_ROW_EXPLAINERS,
+} from "@/app/deposits/deposit-stat-explainers";
+import { TelemetryExplainerTrigger } from "@/components/base/bitcode/execution/TelemetryExplainerTrigger";
 import type {
   DepositOptionReviewDecision,
   DepositOptionReviewDecisionState,
@@ -1246,33 +1257,40 @@ export default function DepositPageClient() {
         metrics={[
           {
             label: "Stage",
+            description: DEPOSIT_HEADER_METRIC_EXPLAINERS["Stage"],
             value: depositRouteSession.activeStepId.replace(/-/g, " "),
           },
           {
             label: "Options",
+            description: DEPOSIT_HEADER_METRIC_EXPLAINERS["Options"],
             value: depositRouteSession.synthesis.optionCount,
           },
           {
             label: "Positive ROI",
+            description: DEPOSIT_HEADER_METRIC_EXPLAINERS["Positive ROI"],
             value: depositRouteSession.policy.reviewablePositiveRoiCount,
           },
           {
             label: "Admitted",
+            description: DEPOSIT_HEADER_METRIC_EXPLAINERS["Admitted"],
             value: depositRouteSession.admission.admittedCount,
           },
           {
             label: "Network",
+            description: DEPOSIT_HEADER_METRIC_EXPLAINERS["Network"],
             value:
               networkDepositoryCount === null ? "—" : networkDepositoryCount,
           },
           {
             label: "Authority",
+            description: DEPOSIT_HEADER_METRIC_EXPLAINERS["Authority"],
             value:
               depositRouteSession.organizationPolicyWalletAuthority.aggregate
                 .state,
           },
           {
             label: "Earning estimate",
+            description: DEPOSIT_HEADER_METRIC_EXPLAINERS["Earning estimate"],
             value: formatSats(
               depositRouteSession.earningSupplyIntelligence.aggregate
                 .totalExpectedCompensationSats,
@@ -2239,7 +2257,15 @@ export default function DepositPageClient() {
                 />
               </summary>
               <dl className="mt-4 grid gap-2">
-                <div className="border border-emerald-300/15 bg-emerald-300/[0.04] px-3 py-2">
+                <TelemetryExplainerTrigger
+                  as="div"
+                  className="border border-emerald-300/15 bg-emerald-300/[0.04] px-3 py-2"
+                  explainer={{
+                    kicker: "Earning intelligence",
+                    title: "Likely demand",
+                    specific: DEPOSIT_EARNING_ROW_EXPLAINERS["Likely demand"],
+                  }}
+                >
                   <dt className="text-[0.58rem] uppercase tracking-[0.14em] text-neutral-500">
                     Likely demand
                   </dt>
@@ -2251,8 +2277,16 @@ export default function DepositPageClient() {
                     )}
                     %
                   </dd>
-                </div>
-                <div className="border border-white/8 bg-black/20 px-3 py-2">
+                </TelemetryExplainerTrigger>
+                <TelemetryExplainerTrigger
+                  as="div"
+                  className="border border-white/8 bg-black/20 px-3 py-2"
+                  explainer={{
+                    kicker: "Earning intelligence",
+                    title: "Unfit Need opportunities",
+                    specific: DEPOSIT_EARNING_ROW_EXPLAINERS["Unfit Need opportunities"],
+                  }}
+                >
                   <dt className="text-[0.58rem] uppercase tracking-[0.14em] text-neutral-500">
                     Unfit Need opportunities
                   </dt>
@@ -2267,8 +2301,16 @@ export default function DepositPageClient() {
                         .unfitNeedOpportunities.state
                     }
                   </dd>
-                </div>
-                <div className="border border-white/8 bg-black/20 px-3 py-2">
+                </TelemetryExplainerTrigger>
+                <TelemetryExplainerTrigger
+                  as="div"
+                  className="border border-white/8 bg-black/20 px-3 py-2"
+                  explainer={{
+                    kicker: "Earning intelligence",
+                    title: "Expected compensation",
+                    specific: DEPOSIT_EARNING_ROW_EXPLAINERS["Expected compensation"],
+                  }}
+                >
                   <dt className="text-[0.58rem] uppercase tracking-[0.14em] text-neutral-500">
                     Expected compensation
                   </dt>
@@ -2283,8 +2325,16 @@ export default function DepositPageClient() {
                         .expectedCompensationRangeSats.high,
                     )}
                   </dd>
-                </div>
-                <div className="border border-white/8 bg-black/20 px-3 py-2">
+                </TelemetryExplainerTrigger>
+                <TelemetryExplainerTrigger
+                  as="div"
+                  className="border border-white/8 bg-black/20 px-3 py-2"
+                  explainer={{
+                    kicker: "Earning intelligence",
+                    title: "Supply recommendations",
+                    specific: DEPOSIT_EARNING_ROW_EXPLAINERS["Supply recommendations"],
+                  }}
+                >
                   <dt className="text-[0.58rem] uppercase tracking-[0.14em] text-neutral-500">
                     Supply recommendations
                   </dt>
@@ -2300,7 +2350,7 @@ export default function DepositPageClient() {
                     }{" "}
                     repair
                   </dd>
-                </div>
+                </TelemetryExplainerTrigger>
               </dl>
               <details className="mt-3 border border-emerald-300/15 bg-emerald-300/[0.04] px-3 py-3">
                 <summary className="cursor-pointer text-[0.62rem] uppercase tracking-[0.16em] text-emerald-100/85">
@@ -2309,14 +2359,22 @@ export default function DepositPageClient() {
                 <dl className="mt-2 grid gap-2">
                   {depositRouteSession.earningSupplyIntelligence.unfitNeedOpportunities.opportunities.map(
                     (opportunity) => (
-                      <div key={opportunity.id}>
+                      <TelemetryExplainerTrigger
+                        key={opportunity.id}
+                        as="div"
+                        explainer={{
+                          kicker: "Opportunity root",
+                          title: opportunity.label,
+                          specific: DEPOSIT_OPPORTUNITY_ROOT_EXPLAINER,
+                        }}
+                      >
                         <dt className="text-[0.56rem] uppercase tracking-[0.12em] text-neutral-500">
                           {opportunity.label}
                         </dt>
                         <dd className="break-all font-mono text-[0.66rem] text-neutral-300">
                           {opportunity.opportunityRoot}
                         </dd>
-                      </div>
+                      </TelemetryExplainerTrigger>
                     ),
                   )}
                 </dl>
@@ -2343,17 +2401,25 @@ export default function DepositPageClient() {
               </summary>
               <dl className="mt-4 grid gap-2">
                 {authorityRows.map((row) => (
-                  <div
+                  <TelemetryExplainerTrigger
                     key={row.label}
+                    as="div"
                     className="border border-white/8 bg-black/20 px-3 py-2"
+                    explainer={{
+                      kicker: "Governance",
+                      title: row.label,
+                      specific:
+                        DEPOSIT_AUTHORITY_ROW_EXPLAINERS[row.label] ??
+                        "Organization authority state for this deposit route.",
+                    }}
                   >
                     <dt className="text-[0.58rem] uppercase tracking-[0.14em] text-neutral-500">
                       {row.label}
                     </dt>
                     <dd className="mt-1 break-words font-mono text-[0.68rem] text-neutral-200">
                       {row.value}
                     </dd>
-                  </div>
+                  </TelemetryExplainerTrigger>
                 ))}
               </dl>
               {depositRouteSession.organizationPolicyWalletAuthority.aggregate
@@ -2362,6 +2428,7 @@ export default function DepositPageClient() {
                   <ProductRouteDisclosure
                     title="Authority blockers"
                     tone="emerald"
+                    summaryDescription={DEPOSIT_AUTHORITY_BLOCKERS_EXPLAINER}
                   >
                     {depositRouteSession.organizationPolicyWalletAuthority.aggregate.blockers.join(
                       "; ",
@@ -2391,23 +2458,32 @@ export default function DepositPageClient() {
               </summary>
               <dl className="mt-4 grid gap-2">
                 {sessionRows.map((row) => (
-                  <div
+                  <TelemetryExplainerTrigger
                     key={row.label}
+                    as="div"
                     className="border border-white/8 bg-black/20 px-3 py-2"
+                    explainer={{
+                      kicker: "Session state",
+                      title: row.label,
+                      specific:
+                        DEPOSIT_SESSION_ROW_EXPLAINERS[row.label] ??
+                        "Source-safe session state for this deposit route.",
+                    }}
                   >
                     <dt className="text-[0.58rem] uppercase tracking-[0.14em] text-neutral-500">
                       {row.label}
                     </dt>
                     <dd className="mt-1 break-words font-mono text-[0.68rem] text-neutral-200">
                       {row.value}
                     </dd>
-                  </div>
+                  </TelemetryExplainerTrigger>
                 ))}
               </dl>
               <div className="mt-3">
                 <ProductRouteDisclosure
                   title="Disclosure boundary"
                   tone="emerald"
+                  summaryDescription={DEPOSIT_DISCLOSURE_BOUNDARY_EXPLAINER}
                 >
                   Visible: measurements, demand roots, source path roots, policy
                   roots, estimated ROI, BTD potential, compensation metadata.
@@ -2424,34 +2500,40 @@ export default function DepositPageClient() {
                   roots={[
                     {
                       id: "route-session-root",
+                      description: DEPOSIT_PROOF_ROOT_EXPLAINERS["route-session-root"],
                       label: "Route session root",
                       root: depositRouteSession.proofRoot,
                     },
                     {
                       id: "synthesis-root",
+                      description: DEPOSIT_PROOF_ROOT_EXPLAINERS["synthesis-root"],
                       label: "Synthesis root",
                       root: depositRouteSession.synthesis.roots.synthesisRoot,
                     },
                     {
                       id: "policy-root",
+                      description: DEPOSIT_PROOF_ROOT_EXPLAINERS["policy-root"],
                       label: "Policy root",
                       root: depositRouteSession.policy.roots.policyReportRoot,
                     },
                     {
                       id: "admission-root",
+                      description: DEPOSIT_PROOF_ROOT_EXPLAINERS["admission-root"],
                       label: "Admission root",
                       root:
                         depositRouteSession.admission.roots.admissionReportRoot,
                     },
                     {
                       id: "earning-root",
+                      description: DEPOSIT_PROOF_ROOT_EXPLAINERS["earning-root"],
                       label: "Earning intelligence root",
                       root:
                         depositRouteSession.earningSupplyIntelligence.roots
                           .intelligenceRoot,
                     },
                     {
                       id: "authority-root",
+                      description: DEPOSIT_PROOF_ROOT_EXPLAINERS["authority-root"],
                       label: "Authority root",
                       root:
                         depositRouteSession.organizationPolicyWalletAuthority

uapi/app/deposits/DepositSourceSelection.tsx

@@ -448,10 +448,11 @@ export default function DepositSourceSelection({
         </button>
       </div>
 
-      <div className="mt-4 grid gap-3 lg:grid-cols-[minmax(0,240px)_minmax(0,1fr)]">
+      <div className="mt-3 grid gap-3 lg:grid-cols-[minmax(0,240px)_minmax(0,1fr)]">
         <div>
-          <span className="text-[0.62rem] uppercase tracking-[0.18em] text-neutral-500">
-            Provider
+          <span className="flex items-center gap-2 text-[0.62rem] uppercase tracking-[0.18em] text-neutral-500">
+            <span>Provider</span>
+            <BitcodeInlineExplainer explainer={DEPOSIT_SECTION_EXPLAINERS.provider} triggerAriaLabel="More info about this field" />
           </span>
           <div className="mt-1.5">
             <SearchableSelect
@@ -486,8 +487,9 @@ export default function DepositSourceSelection({
           </div>
         </div>
         <div>
-          <span className="text-[0.62rem] uppercase tracking-[0.18em] text-neutral-500">
-            Repository
+          <span className="flex items-center gap-2 text-[0.62rem] uppercase tracking-[0.18em] text-neutral-500">
+            <span>Repository</span>
+            <BitcodeInlineExplainer explainer={DEPOSIT_SECTION_EXPLAINERS.repository} triggerAriaLabel="More info about this field" />
           </span>
           <div className="mt-1.5">
             <VCSRepositorySelector
@@ -519,14 +521,14 @@ export default function DepositSourceSelection({
         </div>
       </div>
 
-      <div className="mt-4 grid gap-4 lg:grid-cols-2">
-        <div className="rounded-[1.25rem] border border-white/8 bg-white/5 px-4 py-4">
+      <div className="mt-3 grid gap-3 tablet:grid-cols-2">
+        <div className="rounded-[1rem] border border-white/8 bg-white/5 px-3 py-2.5">
           <span className="flex items-center gap-2 text-[0.64rem] uppercase tracking-[0.2em] text-neutral-400">
             <GitBranch className="h-3.5 w-3.5" />
             <span>Branch</span>
             <BitcodeInlineExplainer explainer={DEPOSIT_SECTION_EXPLAINERS.branch} triggerAriaLabel="More info about this field" />
           </span>
-          <div className="mt-3">
+          <div className="mt-2">
             <SearchableSelect
               aria-label="Repository source branch"
               value={selectedBranch || null}
@@ -555,22 +557,22 @@ export default function DepositSourceSelection({
                   params.delete("commit");
                 })
               }
-              className="rounded-xl border-white/10 bg-[rgba(10,15,30,0.88)] px-3 py-3 text-sm text-white hover:bg-[rgba(10,15,30,0.88)] focus:border-emerald-400/40"
+              className="h-9 rounded-xl border-white/10 bg-[rgba(10,15,30,0.88)] px-3 text-sm text-white hover:bg-[rgba(10,15,30,0.88)] focus:border-emerald-400/40"
             />
           </div>
-          <p className="mt-2 text-[0.68rem] uppercase tracking-[0.18em] text-neutral-500">
+          <p className="mt-1.5 text-[0.6rem] uppercase tracking-[0.16em] text-neutral-500">
             {isLoadingBranches
               ? "Loading branches…"
               : "Default branch is selected when available"}
           </p>
         </div>
 
-        <div className="rounded-[1.25rem] border border-white/8 bg-white/5 px-4 py-4">
+        <div className="rounded-[1rem] border border-white/8 bg-white/5 px-3 py-2.5">
           <span className="flex items-center gap-2 text-[0.64rem] uppercase tracking-[0.2em] text-neutral-400">
             <span>Commit / ref</span>
             <BitcodeInlineExplainer explainer={DEPOSIT_SECTION_EXPLAINERS.commit} triggerAriaLabel="More info about this field" />
           </span>
-          <div className="mt-3">
+          <div className="mt-2">
             <SearchableSelect
               aria-label="Repository source commit"
               value={selectedCommit || null}
@@ -596,18 +598,18 @@ export default function DepositSourceSelection({
                   params.delete("commit");
                 })
               }
-              className="rounded-xl border-white/10 bg-[rgba(10,15,30,0.88)] px-3 py-3 text-sm text-white hover:bg-[rgba(10,15,30,0.88)] focus:border-emerald-400/40"
+              className="h-9 rounded-xl border-white/10 bg-[rgba(10,15,30,0.88)] px-3 text-sm text-white hover:bg-[rgba(10,15,30,0.88)] focus:border-emerald-400/40"
             />
           </div>
-          <p className="mt-2 text-[0.68rem] uppercase tracking-[0.18em] text-neutral-500">
+          <p className="mt-1.5 text-[0.6rem] uppercase tracking-[0.16em] text-neutral-500">
             {isLoadingCommits
               ? "Loading commits…"
               : "Latest branch commit is selected when available"}
           </p>
         </div>
       </div>
 
-      <div className="mt-4 flex flex-wrap items-center justify-between gap-3 border border-white/8 bg-white/[0.025] px-4 py-3">
+      <div className="mt-3 flex flex-wrap items-center justify-between gap-3 border border-white/8 bg-white/[0.025] px-3 py-2.5">
         <span className="flex items-center gap-2 text-sm text-neutral-300">
           {connectionStatus?.connected ? null : (
             <Lock className="h-3.5 w-3.5 text-neutral-500" />

uapi/app/deposits/deposit-explainers.ts

@@ -31,6 +31,23 @@ export const DEPOSIT_SECTION_EXPLAINERS = {
       canon: DEPOSIT_CANON_REFS,
     },
   }),
+  provider: buildExplainer({
+    kicker: 'Provider',
+    title: 'Repository provider',
+    summary:
+      'The version-control host Bitcode reads your repositories from. GitHub is the supported provider today; the selection drives which account connection and repository inventory the deposit route uses.',
+    detail:
+      'Switching provider clears the selected repository, branch, and commit — the source package re-derives from the new provider connection. The item description shows whether the provider connection is currently live.',
+    points: [
+      'Pick the host whose repositories you want to deposit from',
+      'Connection state is checked live against the provider session',
+      'More providers (GitLab, Bitbucket) slot in through the same selector',
+    ],
+    references: {
+      source: [...DEPOSIT_SOURCE_REFS, 'uapi/app/terminal/terminal-repository-context.ts'],
+      canon: DEPOSIT_CANON_REFS,
+    },
+  }),
   repository: buildExplainer({
     kicker: 'Repository',
     title: 'Select the repository you are depositing',