Body:
Summary
The current dashboard shows a flat, chronological stream of all translated events across all contracts. There is no way to drill into a specific contract and see its full event history in context. This issue adds a dedicated Contract Explorer page that makes Open-Audit genuinely useful as an investigative tool — not just a live feed.
Problem
A user who wants to audit a specific contract (e.g. a DEX, lending protocol, or token contract) currently has to scroll through a global feed and manually filter. There is no permalink to a contract, no event timeline, and no indication of how confident the translation engine is in its output.
Required work
New route: app/contract/[contractId]/page.tsx
Contract header section:
Display the contract ID with a copy-to-clipboard button
Show network badge (Testnet / Mainnet) derived from NEXT_PUBLIC_NETWORK_PASSPHRASE
Link to the contract on Stellar Expert (https://stellar.expert/explorer/...)
Show total event count and first/last seen timestamps
Event timeline:
Render events in a vertical timeline layout (not a table) — each event is a card with: translated description, raw XDR toggle (collapsed by default), ledger number, and timestamp
Group events by ledger sequence with a ledger divider between groups
Implement infinite scroll or "Load more" pagination — do not load all events at once
Highlight the most recent event with a "New" badge when a live WebSocket update arrives for this contract
Translation confidence indicator:
Add a confidence field to the TranslatedEvent type in lib/translator/types.ts with values: "exact" | "partial" | "unknown"
"exact" — the contract ID matched a blueprint and all fields resolved correctly
"partial" — the contract ID matched but some fields could not be resolved (fallback values used)
"unknown" — no blueprint exists; raw XDR shown with a note
Display a small coloured badge on each event card: green for exact, amber for partial, grey for unknown
Add a tooltip explaining what each confidence level means
Search within contract:
Add a local search input that filters the timeline by translated description text
Debounce at 300ms; do not trigger a network request — filter the already-loaded events client-side
Acceptance criteria
Navigating to /contract/CDLZ...ABC renders the Contract Explorer for that contract ID
Invalid or unknown contract IDs show a clear not-found state with a link back to the dashboard
Timeline correctly groups events by ledger and loads additional events on scroll
Confidence badges render correctly for all three states
Page is fully responsive on mobile (timeline cards stack correctly on narrow viewports)
New route is linked from each event row on the main dashboard
Component tests cover: valid contract render, unknown contract not-found state, confidence badge variants, live update badge
npm run lint and npm test pass with no regressions
Body:
Summary
The current dashboard shows a flat, chronological stream of all translated events across all contracts. There is no way to drill into a specific contract and see its full event history in context. This issue adds a dedicated Contract Explorer page that makes Open-Audit genuinely useful as an investigative tool — not just a live feed.
Problem
A user who wants to audit a specific contract (e.g. a DEX, lending protocol, or token contract) currently has to scroll through a global feed and manually filter. There is no permalink to a contract, no event timeline, and no indication of how confident the translation engine is in its output.
Required work
New route: app/contract/[contractId]/page.tsx
Contract header section:
Display the contract ID with a copy-to-clipboard button
Show network badge (Testnet / Mainnet) derived from NEXT_PUBLIC_NETWORK_PASSPHRASE
Link to the contract on Stellar Expert (https://stellar.expert/explorer/...)
Show total event count and first/last seen timestamps
Event timeline:
Render events in a vertical timeline layout (not a table) — each event is a card with: translated description, raw XDR toggle (collapsed by default), ledger number, and timestamp
Group events by ledger sequence with a ledger divider between groups
Implement infinite scroll or "Load more" pagination — do not load all events at once
Highlight the most recent event with a "New" badge when a live WebSocket update arrives for this contract
Translation confidence indicator:
Add a confidence field to the TranslatedEvent type in lib/translator/types.ts with values: "exact" | "partial" | "unknown"
"exact" — the contract ID matched a blueprint and all fields resolved correctly
"partial" — the contract ID matched but some fields could not be resolved (fallback values used)
"unknown" — no blueprint exists; raw XDR shown with a note
Display a small coloured badge on each event card: green for exact, amber for partial, grey for unknown
Add a tooltip explaining what each confidence level means
Search within contract:
Add a local search input that filters the timeline by translated description text
Debounce at 300ms; do not trigger a network request — filter the already-loaded events client-side
Acceptance criteria
Navigating to /contract/CDLZ...ABC renders the Contract Explorer for that contract ID
Invalid or unknown contract IDs show a clear not-found state with a link back to the dashboard
Timeline correctly groups events by ledger and loads additional events on scroll
Confidence badges render correctly for all three states
Page is fully responsive on mobile (timeline cards stack correctly on narrow viewports)
New route is linked from each event row on the main dashboard
Component tests cover: valid contract render, unknown contract not-found state, confidence badge variants, live update badge
npm run lint and npm test pass with no regressions