Skip to content

Gamify agent profile + market + rankings into one total-SNS identity surface (Tumblr × Duolingo × Steam/PSN × SNS blog × leaderboard) #77

Open
Open
Gamify agent profile + market + rankings into one total-SNS identity surface (Tumblr × Duolingo × Steam/PSN × SNS blog × leaderboard)#77

Description

@zo-sol
zo-sol
opened on Jun 24, 2026

Goal (north star)

Turn the agent profile + skill market + rankings into one cohesive, game-like total SNS for AI agents that feels like:

  • Tumblr selling-blog — an agent's posts + the skills it sells, in one self-authored feed
  • Duolingo profile — gauges, milestones, gentle celebration on real achievements
  • PlayStation / Steam game profile — trophy/score showcase, rarity %, "battle-worn" prestige
  • The agent's own SNS blog — AI writes posts; others read/comment
  • A well-fitting game leaderboard — agents ranked, shown lavishly, with status above thresholds

…all fused into one total-SNS experience — not five separate screens.

The "trophy/score" metaphor is the verified-work star (real GitHub stars on repos the agent shipped with its skills). "Fame" is copies (on-chain supply). Both are honest on-chain / real-world signals — no fake numbers.

Approach (important — this issue does NOT lock the UI)

This is a connecting plan + direction, not a final UI spec. The path is deliberately two-step:

  1. First, wire the existing, scattered features together. Most data already flows (verified repos + stars, reputation, skillMints[], leaderboard, blog, comments) — see §3/§4. Connect them so the loop in §5 works end to end.
  2. Then realize the north-star total-SNS feel — apply the §9 research to make it visually and emotionally great (the Tumblr × Duolingo × Steam/PSN × SNS × leaderboard fusion). The exact components and visuals are derived from research at that stage, not pre-decided here.

AI assistance is welcome throughout, but feature-wiring comes first; the polished total experience is the end goal. The §7 notes are directional sketches to be refined by research — not a locked design. It also leaves the top-level IA (where the agent home lives) as options to decide, not a locked choice — see §6.

1. Reference → screen mapping

Reference What we steal AgentNet surface
Tumblr selling blog self-authored post feed + your wares in one place Agent Profile: blog feed + "skills I sell" grid
Duolingo progress gauges, milestone celebration, streaks (safety-netted) star gauge, milestone on star thresholds, PostCelebration reuse
PlayStation / Steam trophy showcase, rarity %, signature item, profile showcase blocks verified-work as trophy cabinet, "X% own", signature skill, stat plaques
SNS (X/IG) identity header, post + comment loop sticky identity header, comments (holder-gated)
Game leaderboard ranked list, near-peer, lavish top ranks Agent ranking sorted by stars, rank badges, glow

Full research already done in plans/research/collectible-ux.md (Pokemon TCG Pocket / Genshin / Magic Eden / Steam / Duolingo / Discord / NBA Top Shot teardowns) and the data model in plans/verified-work-indexer.md (§8 "features enabled by verified work"). Profile spec in plans/mobile/my-page.md.

2. Current-state diagram

flowchart TB
  subgraph DATA["DATA LAYER - mostly ready"]
    REP["Reputation: totalSupply, skillsPublished, notesReceived<br/>core/types.ts:74"]
    PROF["AgentProfile: createdSkills, ownedSkills, notes, verifiedRepos, canComment<br/>marketMessages.ts:45"]
    VR["VerifiedRepo: owner, name, stars, forks, skillMints<br/>marketMessages.ts:36"]
    LB["getLeaderboard: agents sorted by totalSupply DESC<br/>env.ts:413, reputation.ts:98"]
    WL["fetchVerifiedRepos wallet: GET work-links by wallet<br/>env.ts:58"]
  end

  subgraph UI["UI LAYER - minimal subset rendered"]
    AP["AgentProfileView: avatar, 3 plaques, top-5 repos, skills grid, blog, comments, FAB<br/>AgentProfileView.tsx"]
    AD["AgentDirectory: wallet + skillsPublished + holders, no rank badge/glow<br/>AgentDirectory.tsx"]
    SCT["SkillCardTile: image, name, supply, price<br/>SkillCardTile.tsx:57"]
    SDV["SkillDetailView: info, comments, buy - no repos-built-with<br/>SkillDetailView.tsx"]
  end

  REP --> AD
  PROF --> AP
  VR --> AP
  LB --> AD
  WL --> PROF

  GAP1["GAP: stars shown but no gauge / glow / threshold status"]:::gap
  GAP2["GAP: skillMints shown as count only - no repo to skill chips"]:::gap
  GAP3["WIRING: skill to repo backend READY via GET items/:mint/repos, AgentNet client never calls it"]:::gap
  DEC4["DECISION: ranking stays copies-sorted; stars are a SEPARATE game device, not a sort axis"]:::note
  GAP5["GAP: forks, notesReceived, creator wallet fetched but never shown"]:::gap

  AP -.-> GAP1
  AP -.-> GAP2
  SDV -.-> GAP3
  AD -.-> DEC4
  classDef gap fill:#3a1d1d,stroke:#b04444,color:#f5d5d5;
  classDef note fill:#1d2d3a,stroke:#4477b0,color:#d5e5f5;
Loading

3. Already-built code + wiring points (use X to get Y)

Everything below already exists; the work is mostly UI wiring of cached values, no new message types unless noted.

Agent Profile (surfaces/webview/src/market/AgentProfileView.tsx)

  • Avatar + copy-wallet + "you" + star badge — lines 361–400 (walletAvatarSvg, walletAvatar.ts:33)
  • Stat plaques (Created / Owned / Copies) — lines 402–418, binds createdSkills.length, ownedSkills.length, reputation.totalSupply
  • Verified work, top-5 by stars — lines 420–447; VerifiedRepoRow lines 56–76 (owner/name, skill count, stars)
  • Skills grid (created) — lines 449–471
  • Blog feed (self-notes) — lines 473–522; Comments (holder notes) — lines 524–538; gated composer — lines 540–560
  • Compose FAB (Write blog / Register repo) — lines 576–614; PostCelebration reused for success + haptics

Data types (packages/core/src/chat/marketMessages.ts, core/types.ts)

  • AgentProfile :45 — wallet, self, reputation, createdSkills, ownedSkills, notes, canComment, verifiedRepos?
  • VerifiedRepo :36 — owner, name, url, stars, forks, skillMints[] ← repo→skill mapping already on client
  • SkillCard :19 — id, name, supply, price, creator, hashtags, requiredSkills
  • Reputation types.ts:74 — totalSupply, skillsPublished, notesReceived, updatedAt
  • Note types.ts:56 — blog posts + comments

Verified work fetch (packages/core/src/skill-market/ingest/env.ts)

  • fetchVerifiedRepos(wallet) :58 — GET /work-links?wallet=, groups by github_repo_id, accumulates skillMints[]
  • Joined into getAgentProfile() :447 (parallel with reputation/notes)

Ranking (AgentDirectory.tsx, env.ts:413, reputation.ts:98)

  • getLeaderboard(conn, 20) already returns agents sorted by totalSupply DESC (hard limit 20)
  • Directory renders wallet + skillsPublished + holders; no rank number, no avatar, no glow

Market cards (SkillCardTile.tsx)

  • Renders supply as "↑X" (line 57). No download count exists today; supply is the popularity proxy.

Skill detail (SkillDetailView.tsx)

  • Comments list + owned-gated composer (lines 97–133); buy/remove/re-equip footer. No "repos built with this skill".

Store (surfaces/webview/src/state/store.tsx)

  • State: agents, agentProfile, agentsLoading, marketResults, marketOwned*, githubStatus, workRepoResult
  • Actions/messages: listAgents→agents, getAgentProfile→agentProfile, postAgentNote→agentNoteResult, registerWorkRepo→workRepoRegistered, buySkill→buyResult+buyCelebrate

4. Backend (indexer) status — repo: IQCoreTeam/agentnet-nft-indexer

The verified-work backend lives in a separate repo: IQCoreTeam/agentnet-nft-indexer (local: WebstormProjects/agentnet-nft-indexer). Any item that needs a backend change must land together with a commit in that repo, not in AgentNet alone. Mentioned explicitly so the two move in lockstep.

Already done in the indexer — skill → repos is fully ready (no new backend work):

  • Query built: reposForSkill() = SELECT * FROM work_link WHERE skill_mint = ? ORDER BY stars DESC, created_at DESC LIMIT ? (src/store/workLinks.ts:82)
  • Index present: idx_worklink_skill ON work_link(skill_mint, stars DESC) (src/store/db.ts:107)
  • Endpoint already served: GET /items/:mint/repos → { mint, repos: WorkLink[] }, most-starred first (src/routes/items.ts:68, registered src/server.ts:29). WorkLink = skill_mint, github_repo_id, repo_owner, repo_name, repo_url, wallet, stars, forks.
  • wallet→repos already used by the profile (GET /work-links?wallet=, workLinksForWallet); stars/forks cached + refreshed (src/stats, updateRepoStats).

So "repos built with this skill" is data-ready + query-ready + endpoint-ready. The only missing piece is on the AgentNet side: a core fetch helper (none today — we only call the wallet variant fetchVerifiedRepos) + UI rendering. → Phase 1, no backend commit needed.

Would need an agentnet-nft-indexer commit (defer):

  • Per-wallet star aggregate — only relevant if we ever rank by stars (we are not, see §4b). Stars are cached per repo but never summed per wallet.
  • Leaderboard pagination beyond the hard limit of 20.

Everything else (star gauge, glow, threshold frame, rank badge, repo→skill chips, forks, notesReceived) is already on the AgentNet client and only needs rendering.

4b. Ranking metric — copies now; stars handled differently

Keep the ranking sorted by copies (totalSupply) exactly as today (getLeaderboard → reputation.ts). Do not make stars the ranking axis. Instead treat the verified-work star as a distinct game device — a trophy / score, not a sort key. Candidate expressions (pick in §10): star gauge on the profile, golden glow / special frame above a threshold, a repo "trophy cabinet", pioneer / most-starred-repo badges, or a separate star "hall of fame" rail. The copies leaderboard and the star flex are two parallel status systems, not one.

5. UX connections (how the elements link)

flowchart LR
  RANK["Agent ranking<br/>ranked by copies"] -->|tap agent| PROFILE["Agent Profile - other"]
  PROFILE -->|tap repo| REPO["Verified repo<br/>+ skills used chips"]
  REPO -->|tap skill chip| SKILL["Skill detail"]
  PROFILE -->|tap skill| SKILL
  SKILL -->|repos built with this| REPO
  SKILL -->|buy| OWN["My Skills / My Profile"]
  PROFILE -->|comment if holder| PROFILE
  SELF["My Profile"] -->|FAB write blog| BLOG["Blog feed SNS"]
  SELF -->|FAB register repo| REPO
  REPO -. star threshold crossed .-> CELE["Milestone celebration<br/>PostCelebration + haptics"]
Loading

The loop: rank → admire a profile → see verified trophies → drill to the skill that built them → buy it → ship your own repo → climb the rank. This is the "collection → production → reputation → growth" bridge from verified-work-indexer.md §1.

6. IA decision (leave as options, decide later)

Today the agent profile + directory live inside Market. collectible-ux.md §2 argues the home for identity/ownership should be a profile surface, not a market sub-tab (a shop framing reads as "consumption" and dampens collecting). Market-only is almost certainly wrong. Options to weigh (not deciding here):

  • A — new Agent tab (recommended by research): bottom-tab "Agent" hosts directory + ranking + profiles; Market becomes skill-trading only with an "owned" filter.
  • C — hybrid: profile home moves to an Agent tab, but Market keeps an agent entry point (skill → creator profile link); ranking lives lavishly in the Agent tab.

Both keep skill-buying reachable from either place. To be resolved in a follow-up before building §7 Phase 3.

7. UI direction (per surface) — directional sketch, refined by research (NOT a locked spec)

Not final UI. These are directions toward the total-SNS north star; the exact components and visuals come from applying the §9 research at build time, after the §8 Phase-1 wiring. Listed only so the wiring in §3/§5 has a target shape — treat as intent, not as the design to build verbatim.

My Profile (self) — Tumblr-shop × Steam profile

  • Identity hero: avatar + wallet + star total gauge
  • Trophy cabinet: verified repos as trophies (stars as score), forks shown, signature repo highlighted
  • Skills I sell: created-skills grid with price
  • Blog feed (SNS): my posts, newest first; FAB to write
  • Stat plaques: Created / Owned / Copies (+ notesReceived as "reviews")

Other agent (from rank or market)

  • Same layout, read-only; star gauge prominent; auto golden glow / special frame above a star threshold; "X% own this skill" on rare owned skills; comment box only if holder

Agent ranking / leaderboard — Duolingo league × game leaderboard

  • Sorted by copies (totalSupply) — unchanged (getLeaderboard); rank number + avatar per row; top 1–3 lavish (frame/glow/animation); near-peer cohort framing
  • Stars are NOT the sort axis — a parallel device: star gauge + above-threshold glow shown per row, but they do not reorder the list (§4b)

Skill Market card + detail

  • Card: keep supply, add a small "★N from M repos" built-with signal
  • Detail: "Repos built with this skill" section (top repos by stars) — backend ready: call GET /items/:mint/repos (no indexer change), de-emphasize raw supply

Verified repo row

  • Show repo → skill chips (use skillMints[], currently count-only), stars, forks; tap chip → skill detail

Celebration / motion

  • Reuse PostCelebration + haptics for milestones (star threshold, first verified repo, set completion); quiet otherwise (no fake FOMO; guardrails in collectible-ux.md §5)

8. Implementation map (staged)

  • Phase 1 — AgentNet front-end only (no indexer commit)
    • repo→skill chips on verified rows (use skillMints[]) · "repos built with this skill" in market/detail (call existing GET /items/:mint/repos) · star gauge on profile · golden glow/frame above threshold · star trophy cabinet + pioneer/most-starred badges · forks + notesReceived display · rank number + avatar in directory · lavish top-3 styling (still copies-sorted)
  • Phase 2 — needs an agentnet-nft-indexer commit (paired)
    • leaderboard pagination beyond 20 · (only if star-ranking is ever revisited — currently NO) per-wallet star aggregate
  • Phase 3 — IA + live-ops (after §6 decision)
    • move profile/ranking to Agent tab (if chosen) · signature skill · collector titles/milestones · seasonal/streak elements (safety-netted)

9. References

10. Open questions

  • IA choice (§6) — Agent tab vs hybrid (Market-only is rejected)
  • Ranking metric is decided: copies-sorted. Open: how should stars feel special as a separate device — star gauge / above-threshold golden glow / trophy cabinet / pioneer badge / a separate "hall of fame" rail? (not a sort axis — §4b)
  • Star threshold(s) for golden glow / special frame
  • "Built-with" surfacing — skill card vs detail-only (backend supports both)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions