[Console] Enhance Console UI — Authorization Slots, Auto-Renewal Manager, Chain Health

[mudigal]

Overview

Enhance the existing console-ui/ with features needed for Authorization Slots (#509), grace periods (#516), feeless auto-renew (#504), and better chain health visibility. Not a new app — additions to what's already built.

Informed by: #504, #505, #509, #515, #516, and docs/001_authorizations.md.

---

What already exists

The console UI (console-ui/) already covers:

• Authorizations page — account authorization display (extent, expiration), faucet
• Upload page — store / store_with_cid_config with file upload, CID config, preimage support
• Download page — CID input, IPFS gateway + Helia P2P
• Renew page — renewal with history integration
• Block Explorer — block browser, extrinsic/event decoding
• Dashboard — chain info card, block number, runtime version, basic storage stats
• Accounts — wallet extension connection, account selection
• State management — RxJS (chain.state.ts, wallet.state.ts, storage.state.ts, history.state.ts)
• Tech stack — React 19, Vite 8, polkadot-api (PAPI), Tailwind v4, Radix UI, Helia

---

Enhancements needed

1. Authorizations page — Slot support

Current: Shows a single AuthorizationExtent per account.
Needed: With Authorization Slots (#509), an account can have up to 8 concurrent TimedAuthorization entries.

• Display multiple slots as cards (sorted by expiration, soonest first)
• Per-slot progress bars: bytes / bytes_allowance, bytes_permanent / bytes_allowance, transactions / transactions_allowance
• Derived "Priority Boosted" / "Standard" badge per slot (in-budget on both axes?)
• Grace period badge (Add grace period to AuthorizationExtent #516): "Renew-only until [block]" for slots where expiration <= now < grace_until
• Visual distinction: active vs grace-period vs expired-but-present slots

2. Dashboard — Chain health widgets

Current: Shows chain info (network, block number, runtime version) and basic storage stats (total transactions, bytes, authorizations count).
Needed: Renewed storage capacity visibility.

• PermanentStorageUsed / MaxPermanentStorageSize gauge (circular or bar)
• Near-cap alert banner when > 80% (subscribe to PermanentStorageNearCap event)
• Trend chart: PermanentStorageUsedUpdated events over time (net growth/shrink)
• Block fill rate: current block's transaction count vs MaxBlockTransactions

3. Auto-Renewal Manager (new section)

Current: Not present. Console has no auto-renewal UI.
Needed: Manage enable_auto_renew / disable_auto_renew and monitor status.

• List active auto-renewals for connected account (query AutoRenewals map)
• Enable/disable toggle per content hash
• Cost note: "Costs 1 transaction unit from your authorization" (Make transaction_storage::enable_auto_renew feeless and authorization-paid #504)
• Renewal history: DataAutoRenewed events for this account
• Failed renewals alert: AutoRenewalFailed events with reason hint

4. Activity Feed (new section or Dashboard widget)

Current: Not present. Events are only visible in the Explorer's per-block view.
Needed: Account-scoped event stream.

• Subscribe to pallet events filtered by connected account
• Event types: Stored, Renewed, DataAutoRenewed, AutoRenewalFailed, AccountAuthorized, ExpiredAccountAuthorizationRemoved
• Reverse-chronological feed with filter chips (stores / renewals / errors)
• Failure events highlighted as warnings

5. Stored Content — chain-queried

Current: history.state.ts tracks uploads in browser localStorage only. Lost on clear/different browser.
Needed: Query chain for account's stored content.

• Query TransactionByContentHash + Transactions to show on-chain content for connected account
• Merge with local history (local history has labels, CIDs — chain has authoritative block/index)
• Expiration countdown per entry (stored block + RetentionPeriod)
• "Expiring soon" highlight for content within 1-2 days of retention end
• Quick "Renew" / "Enable auto-renew" action buttons per entry

6. Quota Planner (nice-to-have)

• Input: data size to store, data size to keep permanently
• Output: slots needed, whether current allowance covers it
• Warning: "Chain-wide cap at X% — renewals may be rejected"

---

Implementation notes

• All chain queries use existing polkadot-api (PAPI) infrastructure in storage.state.ts
• Event subscriptions can use PAPI's chainHead event watching
• Authorization Slots (Authorization slots #509) changes the Authorizations storage shape from single Authorization to BoundedVec<TimedAuthorization, 8> — storage.state.ts query needs updating
• Grace period (Add grace period to AuthorizationExtent #516) adds grace_until field — displayed as badge/countdown
• Auto-renewal queries use AutoRenewals map already present in the pallet
• No new dependencies expected — existing Radix UI + Tailwind covers the UI

TODO

• Update storage.state.ts for Slots storage shape (Authorization slots #509)
• Wireframes for new sections (auto-renewal manager, activity feed)
• Implement authorization slot cards with progress bars
• Implement chain health gauge on dashboard
• Implement auto-renewal manager
• Implement activity feed
• Upgrade stored content from local-only to chain-queried
• Quota planner (stretch)

[bkontur]

@RafalMirowski1 if you have some time, I would like to join together these two pannels somehow:

[bkontur]

@RafalMirowski1 plus extend, improve the "Storage Totals", I would like to display three things:

1. Authorizations: Authorizations for Users + Authorizations for Preimages (we have there now)
2. Ephemeral store - Transactions + Bytes (we have there numbers), but we need to calculate those probably from Transactions kind = Store
3. Permanent/Renewals store - Transactions kind = Renew + PermanentStorageUsed / MaxPermanentStorageSize ?
4. Store together?

Basically, relates to the "2. Dashboard — Chain health widgets" topic