[Dashboard] Add reputation history chart to AgentCard

[IyanuOluwaJesuloba]

Summary

The AgentCard component in dashboard/src/components/AgentExplorer.tsx shows a static reputation bar but gives no historical context. A user cannot tell if an agent's reputation is trending up, down, or stable. This issue adds a small sparkline chart to the expanded AgentCard view showing reputation over the last 30 interactions.

Current State

In AgentExplorer.tsx, the expanded card section (rendered when expanded === true, line ~130–155) shows three static stats: Total Calls, Registered date, Owner. There is no reputation history visualization.

Data Source

The Registry contract emits a repupd/agent event every time update_reputation() is called:

rust

// contracts/src/registry.rs — line ~145
env.events().publish(
    (symbol_short!("repupd"), symbol_short!("agent")),
    (id, new_rep),
);

Each event contains (agent_id, new_reputation_score). By fetching these events via rpc.getEvents(), we can reconstruct reputation history for any agent.

For this issue, use mock/simulated data since the indexer integration (Issue #1) is not yet complete. Generate a realistic-looking history array when the card expands.

What Needs to Be Built

1. A ReputationSparkline component

Create dashboard/src/components/ReputationSparkline.tsx:

tsx

interface ReputationSparklineProps {
  // Array of reputation scores (0–10000) ordered oldest → newest
  history: number[]
  // Width and height of the SVG
  width?: number
  height?: number
}

export default function ReputationSparkline({ history, width = 200, height = 40 }: ReputationSparklineProps)

The component should:

Render a clean SVG polyline chart (no external chart library needed)

Color the line green if the last score > first score (trending up), red if trending down, blue if stable

Show a small dot at the latest score point

Show a subtle area fill under the line

No axes, no labels — just the sparkline shape

2. Mock history generator

In AgentExplorer.tsx, when a card is expanded, generate a plausible history:

ts

function generateMockHistory(currentScore: number, totalCalls: number): number[] {
  // Generate ~20 data points showing the journey to currentScore
  // Should look realistic — not perfectly smooth
  // Older agents (high totalCalls) should have more stable histories
  // Return array of 20 scores ending at currentScore
}

3. Wire it into the expanded card

In the expanded card section of AgentExplorer.tsx, add the sparkline and a label:

REPUTATION HISTORY (last 30 interactions)
[sparkline chart here]
87.40% ↑ +2.1% this week

Relevant Files

dashboard/src/components/AgentExplorer.tsx: Add sparkline + mock history to expanded card sectiondashboard/src/components/ReputationSparkline.tsx: Create this new component

Acceptance Criteria

ReputationSparkline.tsx component created

Sparkline renders as an SVG polyline (no external chart library)

Line color reflects trend direction (green/up, red/down, blue/stable)

Sparkline shown in expanded AgentCard view

Trend label shown: e.g. ↑ +2.1% this week or ↓ -1.3% this week

Component accepts history: number[] prop correctly typed

Looks good at both 200px and 300px widths

No layout breakage on the existing card

Estimated Effort

Small–Medium (3–5 hours)