From a73414ca5efaef6522ace2a98c132cbc52a8331d Mon Sep 17 00:00:00 2001 From: Alessandro Joabar Date: Thu, 6 Aug 2026 15:20:21 -0400 Subject: [PATCH] compute view polish and leaderboard Signed-off-by: Alessandro Joabar --- .../ui/CommunityComputeTerritoryMap.tsx | 70 +++++++++++ .../ui/MeshComputeCommunityView.tsx | 11 +- .../ui/MeshComputeImpactReceipt.tsx | 91 ++++++++++++++ .../mesh-compute/ui/MeshComputePage.tsx | 9 +- .../ui/MeshComputeShareBanner.tsx | 112 +++++++++++++----- .../ui/MeshComputeTokenLeaderboard.tsx | 103 ++++++++++++++++ 6 files changed, 364 insertions(+), 32 deletions(-) create mode 100644 desktop/src/features/mesh-compute/ui/MeshComputeImpactReceipt.tsx create mode 100644 desktop/src/features/mesh-compute/ui/MeshComputeTokenLeaderboard.tsx diff --git a/desktop/src/features/mesh-compute/ui/CommunityComputeTerritoryMap.tsx b/desktop/src/features/mesh-compute/ui/CommunityComputeTerritoryMap.tsx index 684078dd40..bdaf2ca9c2 100644 --- a/desktop/src/features/mesh-compute/ui/CommunityComputeTerritoryMap.tsx +++ b/desktop/src/features/mesh-compute/ui/CommunityComputeTerritoryMap.tsx @@ -90,6 +90,7 @@ export function CommunityComputeTerritoryMap({ const hoveredDeployment = hoveredId ? (deploymentById.get(hoveredId) ?? null) : null; + const isHeroDeployment = model.deployments.length === 1; function selectDeployment(deploymentId: string) { if (selectedDeploymentId === undefined) { @@ -193,6 +194,12 @@ export function CommunityComputeTerritoryMap({ ); })} + {isHeroDeployment && activeDeployment ? ( + + ) : null} {hoveredDeployment ? (
+
+ + + {inferenceActive ? "Serving now" : deployment.health} + +
+

+ {shortModelName(deployment.modelId)} +

+

+ {deployment.deviceLabel} + {deployment.isSelf ? " · This machine" : ""} +

+
+ + + +
+
+ ); +} + +function HeroMetric({ label, value }: { label: string; value: string }) { + return ( +
+
+ {label} +
+
+ {value} +
+
+ ); +} + function TerritoryShape({ cells, inferenceActive, diff --git a/desktop/src/features/mesh-compute/ui/MeshComputeCommunityView.tsx b/desktop/src/features/mesh-compute/ui/MeshComputeCommunityView.tsx index ba14693088..af7a9dac01 100644 --- a/desktop/src/features/mesh-compute/ui/MeshComputeCommunityView.tsx +++ b/desktop/src/features/mesh-compute/ui/MeshComputeCommunityView.tsx @@ -67,10 +67,15 @@ export function MeshComputeCommunityView({
-

Model mesh

+

+ {model.deployments.length === 1 + ? "Your community’s first compute node" + : "Model mesh"} +

- Each territory is one ready model on one device. Area reflects its - reported model-memory tier. + {model.deployments.length === 1 + ? "This machine is the foundation of the mesh. More contributors add capacity, model choice, and resilience." + : "Each territory is one ready model on one device. Area reflects its reported model-memory tier."}

{!simulated ? ( diff --git a/desktop/src/features/mesh-compute/ui/MeshComputeImpactReceipt.tsx b/desktop/src/features/mesh-compute/ui/MeshComputeImpactReceipt.tsx new file mode 100644 index 0000000000..fa5e7c6a8d --- /dev/null +++ b/desktop/src/features/mesh-compute/ui/MeshComputeImpactReceipt.tsx @@ -0,0 +1,91 @@ +import { Activity, Cpu, Network, Sparkles } from "lucide-react"; + +import { cn } from "@/shared/lib/cn"; +import type { useMeshComputeState } from "../hooks/useMeshComputeState"; + +export function MeshComputeImpactReceipt({ + mesh, +}: { + mesh: ReturnType; +}) { + const { memory, toggle, usage } = mesh; + const isSharing = toggle.isSharing; + const tokensProcessed = usage?.tokensServed ?? 0; + const peers = usage?.peers ?? 0; + const capacity = memory.totalGb == null ? "—" : formatGb(memory.totalGb); + + const items = [ + { + icon: Cpu, + label: "Capacity offered", + value: isSharing ? capacity : "Not sharing", + }, + { + icon: Sparkles, + label: "Tokens served", + value: isSharing ? formatCount(tokensProcessed) : "—", + }, + { + icon: Network, + label: "Mesh peers", + value: isSharing ? formatCount(peers) : "—", + }, + ]; + + return ( +
+
+ + + +
+

Your contribution

+

+ {isSharing + ? usage?.inflight + ? `Helping run ${usage.inflight} request${usage.inflight === 1 ? "" : "s"} right now.` + : "Available when your community needs more compute." + : "Turn on automatic contribution to start building your impact."} +

+
+ {isSharing ? ( + + Live + + ) : null} +
+
+ {items.map(({ icon: Icon, label, value }) => ( +
+
+ {label} +
+
+ {value} +
+
+ ))} +
+

+ Session totals from this machine. Request attribution to other members + is coming soon. +

+
+ ); +} + +function formatCount(value: number): string { + return new Intl.NumberFormat(undefined, { maximumFractionDigits: 0 }).format( + value, + ); +} + +function formatGb(value: number): string { + return `${new Intl.NumberFormat(undefined, { maximumFractionDigits: 1 }).format(value)} GB`; +} diff --git a/desktop/src/features/mesh-compute/ui/MeshComputePage.tsx b/desktop/src/features/mesh-compute/ui/MeshComputePage.tsx index 574ddb9b86..3a4d5d165b 100644 --- a/desktop/src/features/mesh-compute/ui/MeshComputePage.tsx +++ b/desktop/src/features/mesh-compute/ui/MeshComputePage.tsx @@ -12,8 +12,10 @@ import { import { useMeshComputeState } from "../hooks/useMeshComputeState"; import { CommunityComputeTutorialPanel } from "./CommunityComputeTutorialPanel"; import { MeshComputeCommunityView } from "./MeshComputeCommunityView"; +import { MeshComputeImpactReceipt } from "./MeshComputeImpactReceipt"; import { MeshComputeSettingsCard } from "./MeshComputeSettingsCard"; import { MeshComputeShareBanner } from "./MeshComputeShareBanner"; +import { MeshComputeTokenLeaderboard } from "./MeshComputeTokenLeaderboard"; export function MeshComputePage() { const { activeCommunity } = useCommunities(); @@ -52,7 +54,7 @@ export function MeshComputePage() { Tutorial } - description={`See what ${communityName} can run and contribute this machine’s spare capacity.`} + description={`Contribute this machine’s spare capacity to unlock more models and keep ${communityName}’s agents available when demand grows.`} title="Compute" /> @@ -80,7 +82,10 @@ export function MeshComputePage() { onStepChange={setTutorialStep} step={tutorialStep} /> - ) : null} + ) : ( + + )} + -
+
-

- {statusCopy} +

+ Let Buzz choose the most useful compatible model and make this + machine available when {communityName} needs it.

- {error ? ( -

- {error} + +

+ + + +
+ +
+

+ {statusCopy}

- ) : null} + {error ? ( +

+ {error} +

+ ) : null} +
); } +function Benefit({ + icon: Icon, + label, + detail, +}: { + icon: typeof Sparkles; + label: string; + detail: string; +}) { + return ( +
+ +
+

{label}

+

+ {detail} +

+
+
+ ); +} + function shareStatusCopy({ communityName, isConsuming, @@ -96,18 +154,18 @@ function shareStatusCopy({ pendingAction: "start" | "stop" | null; statusModel: string | null; }): string { - if (pendingAction === "start") { + if (pendingAction === "start") return `Preparing ${statusModel ?? modelToShare ?? "a model"} for ${communityName}…`; - } if (pendingAction === "stop") return "Stopping shared compute…"; - if (isSharing) { + if (isSharing) return `${statusModel ?? modelToShare ?? "A model"} is available to ${communityName}`; - } - if (isConsuming) { - return "Using another member’s compute; turn this on to contribute instead"; - } - if (modelToShare) { - return `${modelToShare} is ready to contribute to ${communityName}`; - } - return "Choose a model in Settings before sharing"; + if (isConsuming) + return "Using another member’s compute; enable this to contribute instead"; + if (modelToShare) + return "Ready to contribute automatically when you turn this on"; + return "Checking this machine and choosing a compatible model…"; +} + +function formatGb(value: number): string { + return `${new Intl.NumberFormat(undefined, { maximumFractionDigits: 1 }).format(value)} GB`; } diff --git a/desktop/src/features/mesh-compute/ui/MeshComputeTokenLeaderboard.tsx b/desktop/src/features/mesh-compute/ui/MeshComputeTokenLeaderboard.tsx new file mode 100644 index 0000000000..9b6a999fb8 --- /dev/null +++ b/desktop/src/features/mesh-compute/ui/MeshComputeTokenLeaderboard.tsx @@ -0,0 +1,103 @@ +import { Medal, Trophy } from "lucide-react"; + +import { cn } from "@/shared/lib/cn"; +import type { useMeshComputeState } from "../hooks/useMeshComputeState"; + +const PREVIEW_LEADERS = [ + { name: "Maya", tokens: 2_840_912 }, + { name: "Jon", tokens: 1_967_401 }, + { name: "Priya", tokens: 1_204_885 }, +] as const; + +export function MeshComputeTokenLeaderboard({ + mesh, + simulated = false, +}: { + mesh: ReturnType; + simulated?: boolean; +}) { + const yourTokens = simulated ? 1_638_240 : (mesh.usage?.tokensServed ?? 0); + const communityLeaders = simulated ? PREVIEW_LEADERS : []; + const rows = [...communityLeaders, { name: "You", tokens: yourTokens }] + .sort((a, b) => b.tokens - a.tokens) + .map((entry, index) => ({ ...entry, rank: index + 1 })); + const yourRank = + rows.find((entry) => entry.name === "You")?.rank ?? rows.length; + + return ( +
+
+ + + +
+

+ Community token contributors +

+

+ {simulated + ? "Tokenmaxxing, inverted: celebrate the tokens you serve—not the tokens you consume." + : "Your locally reported total. Community rankings will appear when aggregate reporting is available."} +

+
+ {simulated ? ( +
+

+ Your rank +

+

+ #{yourRank} +

+
+ ) : null} +
+ +
    + {rows.map((entry) => ( +
  1. + + {entry.rank <= 3 ? : null}# + {entry.rank} + + + {entry.name} + {entry.name === "You" ? ( + + YOU + + ) : null} + + + {formatTokens(entry.tokens)} + + tokens + + +
    2. + ))} +
+ +

+ {simulated + ? "Tutorial preview · example contribution totals" + : "Community rankings preview · aggregate contribution reporting is coming soon."} +

+
+ ); +} + +function formatTokens(value: number): string { + return new Intl.NumberFormat(undefined, { + notation: value >= 10_000 ? "compact" : "standard", + maximumFractionDigits: 1, + }).format(value); +}