Pub/Sub Topic Inspector Page

[ElioNeto]

Pub/Sub Topic Inspector Page

Create an Angular page for browsing Pub/Sub topics, publishing test messages, and monitoring message flow using the existing PubSub infrastructure.

Backend Endpoints Needed

GET    /admin/pubsub/topics              — List all active topics with subscriber counts
GET    /admin/pubsub/topics/{topic}      — Get topic details (subscribers, message count)
POST   /admin/pubsub/topics/{topic}/publish  — Publish a test message to a topic
GET    /admin/pubsub/topics/{topic}/messages — Recent messages on a topic (if captured)
DELETE /admin/pubsub/topics/{topic}      — Delete a topic (disconnect all subscribers)

UI Requirements

Topic List

• Table: Topic name, subscriber count, messages sent, last activity
• Search/Filter: Filter topics by name
• Create: Button to create a new topic

Topic Detail

• Stats: Subscriber count, message throughput, last message timestamp
• Publish Test Message: Textarea + publish button
• Message History: Recent messages with timestamps (if captured)
• Live Feed: Toggle to subscribe and see messages in real-time

Component Structure

app/
  pages/
    pubsub/
      pubsub.component.ts
      pubsub.component.html
      pubsub.component.scss
      topic-detail.component.ts
      topic-detail.component.html
      topic-detail.component.scss

Acceptance Criteria

• Topic list displays with subscriber counts
• Can publish test messages to a topic
• Topic detail shows message history
• Live feed shows messages in real-time (WebSocket)
• Error states for API failures
• Responsive layout

Parent Epic

#290

[ElioNeto]

Resolved via feat/notes-engine-v2 branch (PR #321) - commit closes via merge to main