Implement /shoutrrr endpoint

scnserver/api/handler/apiMessage.go

@@ -271,6 +271,65 @@ func (h APIHandler) GetMessage(pctx ginext.PreContext) ginext.HTTPResponse {
 	})
 }
 
+// ListMessageDeliveries swaggerdoc
+//
+//	@Summary		List deliveries for a message
+//	@Description	The user must own the channel and request the resource with the ADMIN Key
+//	@ID				api-messages-deliveries
+//	@Tags			API-v2
+//
+//	@Param			mid	path		string	true	"MessageID"
+//
+//	@Success		200	{object}	handler.ListMessageDeliveries.response
+//	@Failure		400	{object}	ginresp.apiError	"supplied values/parameters cannot be parsed / are invalid"
+//	@Failure		401	{object}	ginresp.apiError	"user is not authorized / has missing permissions"
+//	@Failure		404	{object}	ginresp.apiError	"message not found"
+//	@Failure		500	{object}	ginresp.apiError	"internal server error"
+//
+//	@Router			/api/v2/messages/{mid}/deliveries [GET]
+func (h APIHandler) ListMessageDeliveries(pctx ginext.PreContext) ginext.HTTPResponse {
+	type uri struct {
+		MessageID models.MessageID `uri:"mid" binding:"entityid"`
+	}
+	type response struct {
+		Deliveries []models.Delivery `json:"deliveries"`
+	}
+
+	var u uri
+	ctx, g, errResp := pctx.URI(&u).Start()
+	if errResp != nil {
+		return *errResp
+	}
+	defer ctx.Cancel()
+
+	return h.app.DoRequest(ctx, g, models.TLockRead, func(ctx *logic.AppContext, finishSuccess func(r ginext.HTTPResponse) ginext.HTTPResponse) ginext.HTTPResponse {
+
+		if permResp := ctx.CheckPermissionAny(); permResp != nil {
+			return *permResp
+		}
+
+		msg, err := h.database.GetMessage(ctx, u.MessageID, false)
+		if errors.Is(err, sql.ErrNoRows) {
+			return ginresp.APIError(g, 404, apierr.MESSAGE_NOT_FOUND, "message not found", err)
+		}
+		if err != nil {
+			return ginresp.APIError(g, 500, apierr.DATABASE_ERROR, "Failed to query message", err)
+		}
+
+		// User must own the channel and have admin key
+		if permResp := ctx.CheckPermissionUserAdmin(msg.ChannelOwnerUserID); permResp != nil {
+			return *permResp
+		}
+
+		deliveries, err := h.database.ListDeliveriesOfMessage(ctx, msg.MessageID)
+		if err != nil {
+			return ginresp.APIError(g, 500, apierr.DATABASE_ERROR, "Failed to query deliveries", err)
+		}
+
+		return finishSuccess(ginext.JSON(http.StatusOK, response{Deliveries: deliveries}))
+	})
+}
+
 // DeleteMessage swaggerdoc
 //
 //	@Summary		Delete a single message

scnserver/api/handler/compat.go

@@ -1,6 +1,11 @@
 package handler
 
 import (
+	"database/sql"
+	"errors"
+	"fmt"
+	"net/http"
+
 	"blackforestbytes.com/simplecloudnotifier/api/apierr"
 	hl "blackforestbytes.com/simplecloudnotifier/api/apihighlight"
 	"blackforestbytes.com/simplecloudnotifier/api/ginresp"
@@ -8,13 +13,9 @@ import (
 	primarydb "blackforestbytes.com/simplecloudnotifier/db/impl/primary"
 	"blackforestbytes.com/simplecloudnotifier/logic"
 	"blackforestbytes.com/simplecloudnotifier/models"
-	"database/sql"
-	"errors"
-	"fmt"
 	"git.blackforestbytes.com/BlackForestBytes/goext/dataext"
 	"git.blackforestbytes.com/BlackForestBytes/goext/ginext"
 	"git.blackforestbytes.com/BlackForestBytes/goext/langext"
-	"net/http"
 )
 
 type CompatHandler struct {
@@ -90,7 +91,7 @@ func (h CompatHandler) SendMessage(pctx ginext.PreContext) ginext.HTTPResponse {
 			return ginresp.SendAPIError(g, 400, apierr.USER_NOT_FOUND, hl.USER_ID, "User not found (compat)", nil)
 		}
 
-		okResp, errResp := h.app.SendMessage(g, ctx, langext.Ptr(models.UserID(*newid)), data.UserKey, nil, data.Title, data.Content, data.Priority, data.UserMessageID, data.SendTimestamp, nil)
+		okResp, errResp := h.app.SendMessage(g, ctx, data.UserKey, nil, data.Title, data.Content, data.Priority, data.UserMessageID, data.SendTimestamp, nil)
 		if errResp != nil {
 			return *errResp
 		} else {

scnserver/api/handler/external.go

@@ -1,16 +1,17 @@
 package handler
 
 import (
+	"fmt"
+	"net/http"
+	"time"
+
 	"blackforestbytes.com/simplecloudnotifier/api/apierr"
 	"blackforestbytes.com/simplecloudnotifier/api/ginresp"
 	primarydb "blackforestbytes.com/simplecloudnotifier/db/impl/primary"
 	"blackforestbytes.com/simplecloudnotifier/logic"
 	"blackforestbytes.com/simplecloudnotifier/models"
-	"fmt"
 	"git.blackforestbytes.com/BlackForestBytes/goext/ginext"
 	"git.blackforestbytes.com/BlackForestBytes/goext/langext"
-	"net/http"
-	"time"
 )
 
 type ExternalHandler struct {
@@ -27,8 +28,10 @@ func NewExternalHandler(app *logic.Application) ExternalHandler {
 
 // UptimeKuma swaggerdoc
 //
-//	@Summary		Send a new message
-//	@Description	All parameter can be set via query-parameter or the json body. Only UserID, UserKey and Title are required
+//	@Summary		Send a new message (uses uptime-kuma notification schema)
+//	@Description	Set necessary parameter via query (key, channel etc.), title+message are build from uptime-kuma payload
+//	@Description	You can specify different channels/priorities for [up] and [down] notifications
+//
 //	@Tags			External
 //
 //	@Param			query_data	query		handler.UptimeKuma.query	false	" "
@@ -36,22 +39,21 @@ func NewExternalHandler(app *logic.Application) ExternalHandler {
 //
 //	@Success		200			{object}	handler.UptimeKuma.response
 //	@Failure		400			{object}	ginresp.apiError
-//	@Failure		401			{object}	ginresp.apiError	"The user_id was not found or the user_key is wrong"
+//	@Failure		401			{object}	ginresp.apiError	"The user_key is wrong"
 //	@Failure		403			{object}	ginresp.apiError	"The user has exceeded its daily quota - wait 24 hours or upgrade your account"
 //	@Failure		500			{object}	ginresp.apiError	"An internal server error occurred - try again later"
 //
 //	@Router			/external/v1/uptime-kuma [POST]
 func (h ExternalHandler) UptimeKuma(pctx ginext.PreContext) ginext.HTTPResponse {
 	type query struct {
-		UserID       *models.UserID `form:"user_id"     example:"7725"`
-		KeyToken     *string        `form:"key"         example:"P3TNH8mvv14fm"`
-		Channel      *string        `form:"channel"`
-		ChannelUp    *string        `form:"channel_up"`
-		ChannelDown  *string        `form:"channel_down"`
-		Priority     *int           `form:"priority"`
-		PriorityUp   *int           `form:"priority_up"`
-		PriorityDown *int           `form:"priority_down"`
-		SenderName   *string        `form:"senderName"`
+		KeyToken     *string `form:"key"         example:"P3TNH8mvv14fm"`
+		Channel      *string `form:"channel"`
+		ChannelUp    *string `form:"channel_up"`
+		ChannelDown  *string `form:"channel_down"`
+		Priority     *int    `form:"priority"`
+		PriorityUp   *int    `form:"priority_up"`
+		PriorityDown *int    `form:"priority_down"`
+		SenderName   *string `form:"senderName"`
 	}
 	type body struct {
 		Heartbeat *struct {
@@ -125,7 +127,62 @@ func (h ExternalHandler) UptimeKuma(pctx ginext.PreContext) ginext.HTTPResponse
 			priority = q.PriorityDown
 		}
 
-		okResp, errResp := h.app.SendMessage(g, ctx, q.UserID, q.KeyToken, channel, &title, &content, priority, nil, timestamp, q.SenderName)
+		okResp, errResp := h.app.SendMessage(g, ctx, q.KeyToken, channel, &title, &content, priority, nil, timestamp, q.SenderName)
+		if errResp != nil {
+			return *errResp
+		}
+
+		return finishSuccess(ginext.JSON(http.StatusOK, response{
+			MessageID: okResp.Message.MessageID,
+		}))
+
+	})
+}
+
+// Shoutrrr swaggerdoc
+//
+//	@Summary		Send a new message (uses shoutrrr generic:// format=json schema)
+//	@Description	Set necessary parameter via query (key, channel etc.), title+message are set via the shoutrrr payload
+//	@Description	Use the shoutrrr format `generic://{{url}}?template=json`
+//
+//	@Tags			External
+//
+//	@Param			query_data	query		handler.Shoutrrr.query	false	" "
+//	@Param			post_body	body		handler.Shoutrrr.body		false	" "
+//
+//	@Success		200			{object}	handler.Shoutrrr.response
+//	@Failure		400			{object}	ginresp.apiError
+//	@Failure		401			{object}	ginresp.apiError	"The user_key is wrong"
+//	@Failure		403			{object}	ginresp.apiError	"The user has exceeded its daily quota - wait 24 hours or upgrade your account"
+//	@Failure		500			{object}	ginresp.apiError	"An internal server error occurred - try again later"
+//
+//	@Router			/external/v1/uptime-kuma [POST]
+func (h ExternalHandler) Shoutrrr(pctx ginext.PreContext) ginext.HTTPResponse {
+	type query struct {
+		KeyToken   *string `form:"key"         example:"P3TNH8mvv14fm"`
+		Channel    *string `form:"channel"`
+		Priority   *int    `form:"priority"`
+		SenderName *string `form:"senderName"`
+	}
+	type body struct {
+		Title   string `json:"title"`
+		Message string `json:"message"`
+	}
+	type response struct {
+		MessageID models.MessageID `json:"message_id"`
+	}
+
+	var b body
+	var q query
+	ctx, g, errResp := pctx.Query(&q).Body(&b).Start()
+	if errResp != nil {
+		return *errResp
+	}
+	defer ctx.Cancel()
+
+	return h.app.DoRequest(ctx, g, models.TLockReadWrite, func(ctx *logic.AppContext, finishSuccess func(r ginext.HTTPResponse) ginext.HTTPResponse) ginext.HTTPResponse {
+
+		okResp, errResp := h.app.SendMessage(g, ctx, q.KeyToken, q.Channel, &b.Title, &b.Message, q.Priority, nil, nil, q.SenderName)
 		if errResp != nil {
 			return *errResp
 		}

scnserver/api/handler/message.go

@@ -1,6 +1,8 @@
 package handler
 
 import (
+	"net/http"
+
 	"blackforestbytes.com/simplecloudnotifier/api/apierr"
 	primarydb "blackforestbytes.com/simplecloudnotifier/db/impl/primary"
 	"blackforestbytes.com/simplecloudnotifier/logic"
@@ -8,7 +10,6 @@ import (
 	"git.blackforestbytes.com/BlackForestBytes/goext/dataext"
 	"git.blackforestbytes.com/BlackForestBytes/goext/ginext"
 	"git.blackforestbytes.com/BlackForestBytes/goext/langext"
-	"net/http"
 )
 
 type SendMessageResponse struct {
@@ -42,7 +43,7 @@ func NewMessageHandler(app *logic.Application) MessageHandler {
 //
 //	@Success		200			{object}	handler.SendMessage.response
 //	@Failure		400			{object}	ginresp.apiError
-//	@Failure		401			{object}	ginresp.apiError	"The user_id was not found or the user_key is wrong"
+//	@Failure		401			{object}	ginresp.apiError	"The user_key is wrong"
 //	@Failure		403			{object}	ginresp.apiError	"The user has exceeded its daily quota - wait 24 hours or upgrade your account"
 //	@Failure		500			{object}	ginresp.apiError	"An internal server error occurred - try again later"
 //
@@ -50,15 +51,14 @@ func NewMessageHandler(app *logic.Application) MessageHandler {
 //	@Router			/send [POST]
 func (h MessageHandler) SendMessage(pctx ginext.PreContext) ginext.HTTPResponse {
 	type combined struct {
-		UserID        *models.UserID `json:"user_id"     form:"user_id"     example:"7725"                               `
-		KeyToken      *string        `json:"key"         form:"key"         example:"P3TNH8mvv14fm"                      `
-		Channel       *string        `json:"channel"     form:"channel"     example:"test"                               `
-		Title         *string        `json:"title"       form:"title"       example:"Hello World"                        `
-		Content       *string        `json:"content"     form:"content"     example:"This is a message"                  `
-		Priority      *int           `json:"priority"    form:"priority"    example:"1"                   enums:"0,1,2"  `
-		UserMessageID *string        `json:"msg_id"      form:"msg_id"      example:"db8b0e6a-a08c-4646"                 `
-		SendTimestamp *float64       `json:"timestamp"   form:"timestamp"   example:"1669824037"                         `
-		SenderName    *string        `json:"sender_name" form:"sender_name" example:"example-server"                     `
+		KeyToken      *string  `json:"key"         form:"key"         example:"P3TNH8mvv14fm"                      `
+		Channel       *string  `json:"channel"     form:"channel"     example:"test"                               `
+		Title         *string  `json:"title"       form:"title"       example:"Hello World"                        `
+		Content       *string  `json:"content"     form:"content"     example:"This is a message"                  `
+		Priority      *int     `json:"priority"    form:"priority"    example:"1"                   enums:"0,1,2"  `
+		UserMessageID *string  `json:"msg_id"      form:"msg_id"      example:"db8b0e6a-a08c-4646"                 `
+		SendTimestamp *float64 `json:"timestamp"   form:"timestamp"   example:"1669824037"                         `
+		SenderName    *string  `json:"sender_name" form:"sender_name" example:"example-server"                     `
 	}
 
 	type response struct {
@@ -88,7 +88,7 @@ func (h MessageHandler) SendMessage(pctx ginext.PreContext) ginext.HTTPResponse
 		// query has highest prio, then form, then json
 		data := dataext.ObjectMerge(dataext.ObjectMerge(b, f), q)
 
-		okResp, errResp := h.app.SendMessage(g, ctx, data.UserID, data.KeyToken, data.Channel, data.Title, data.Content, data.Priority, data.UserMessageID, data.SendTimestamp, data.SenderName)
+		okResp, errResp := h.app.SendMessage(g, ctx, data.KeyToken, data.Channel, data.Title, data.Content, data.Priority, data.UserMessageID, data.SendTimestamp, data.SenderName)
 		if errResp != nil {
 			return *errResp
 		} else {

scnserver/api/router.go

@@ -164,6 +164,7 @@ func (r *Router) Init(e *ginext.GinWrapper) error {
 		apiv2.GET("/messages").Handle(r.apiHandler.ListMessages)
 		apiv2.GET("/messages/:mid").Handle(r.apiHandler.GetMessage)
 		apiv2.DELETE("/messages/:mid").Handle(r.apiHandler.DeleteMessage)
+		apiv2.GET("/messages/:mid/deliveries").Handle(r.apiHandler.ListMessageDeliveries)
 
 		apiv2.GET("/sender-names").Handle(r.apiHandler.ListSenderNames)
 
@@ -181,6 +182,7 @@ func (r *Router) Init(e *ginext.GinWrapper) error {
 		sendAPI.POST("/send.php").Handle(r.compatHandler.SendMessage)
 
 		sendAPI.POST("/external/v1/uptime-kuma").Handle(r.externalHandler.UptimeKuma)
+		sendAPI.POST("/external/v1/shoutrrr").Handle(r.externalHandler.Shoutrrr)
 
 	}
 

scnserver/db/impl/primary/deliveries.go

@@ -1,12 +1,13 @@
 package primary
 
 import (
+	"time"
+
 	scn "blackforestbytes.com/simplecloudnotifier"
 	"blackforestbytes.com/simplecloudnotifier/db"
 	"blackforestbytes.com/simplecloudnotifier/models"
 	"git.blackforestbytes.com/BlackForestBytes/goext/langext"
 	"git.blackforestbytes.com/BlackForestBytes/goext/sq"
-	"time"
 )
 
 func (db *Database) CreateRetryDelivery(ctx db.TxContext, client models.Client, msg models.Message) (models.Delivery, error) {
@@ -182,3 +183,12 @@ func (db *Database) DeleteDeliveriesOfChannel(ctx db.TxContext, channelid models
 
 	return nil
 }
+
+func (db *Database) ListDeliveriesOfMessage(ctx db.TxContext, messageID models.MessageID) ([]models.Delivery, error) {
+	tx, err := ctx.GetOrCreateTransaction(db)
+	if err != nil {
+		return nil, err
+	}
+
+	return sq.QueryAll[models.Delivery](ctx, tx, "SELECT * FROM deliveries WHERE message_id = :mid AND deleted=0 ORDER BY timestamp_created ASC", sq.PP{"mid": messageID}, sq.SModeExtended, sq.Safe)
+}

scnserver/db/impl/primary/users.go

@@ -1,12 +1,13 @@
 package primary
 
 import (
+	"time"
+
 	scn "blackforestbytes.com/simplecloudnotifier"
 	"blackforestbytes.com/simplecloudnotifier/db"
 	"blackforestbytes.com/simplecloudnotifier/models"
 	"git.blackforestbytes.com/BlackForestBytes/goext/langext"
 	"git.blackforestbytes.com/BlackForestBytes/goext/sq"
-	"time"
 )
 
 func (db *Database) CreateUser(ctx db.TxContext, protoken *string, username *string) (models.User, error) {
@@ -63,6 +64,15 @@ func (db *Database) GetUser(ctx db.TxContext, userid models.UserID) (models.User
 	return sq.QuerySingle[models.User](ctx, tx, "SELECT * FROM users WHERE user_id = :uid AND deleted=0 LIMIT 1", sq.PP{"uid": userid}, sq.SModeExtended, sq.Safe)
 }
 
+func (db *Database) GetUserByKey(ctx db.TxContext, key string) (models.User, error) {
+	tx, err := ctx.GetOrCreateTransaction(db)
+	if err != nil {
+		return models.User{}, err
+	}
+
+	return sq.QuerySingle[models.User](ctx, tx, "SELECT * FROM users WHERE EXISTS(SELECT keytokens.keytoken_id FROM keytokens WHERE keytokens.token = :tok AND users.user_id = keytokens.owner_user_id AND keytokens.deleted=0) AND users.deleted=0 LIMIT 1", sq.PP{"tok": key}, sq.SModeExtended, sq.Safe)
+}
+
 func (db *Database) GetUserOpt(ctx db.TxContext, userid models.UserID) (*models.User, error) {
 	tx, err := ctx.GetOrCreateTransaction(db)
 	if err != nil {

scnserver/logic/message.go

@@ -1,21 +1,22 @@
 package logic
 
 import (
+	"database/sql"
+	"errors"
+	"fmt"
+	"strings"
+	"time"
+
 	"blackforestbytes.com/simplecloudnotifier/api/apierr"
 	hl "blackforestbytes.com/simplecloudnotifier/api/apihighlight"
 	"blackforestbytes.com/simplecloudnotifier/api/ginresp"
 	"blackforestbytes.com/simplecloudnotifier/models"
-	"database/sql"
-	"errors"
-	"fmt"
 	"git.blackforestbytes.com/BlackForestBytes/goext/ginext"
 	"git.blackforestbytes.com/BlackForestBytes/goext/langext"
 	"git.blackforestbytes.com/BlackForestBytes/goext/mathext"
 	"git.blackforestbytes.com/BlackForestBytes/goext/timeext"
 	"github.com/gin-gonic/gin"
 	"github.com/rs/zerolog/log"
-	"strings"
-	"time"
 )
 
 type SendMessageResponse struct {
@@ -25,7 +26,7 @@ type SendMessageResponse struct {
 	CompatMessageID int64
 }
 
-func (app *Application) SendMessage(g *gin.Context, ctx *AppContext, UserID *models.UserID, Key *string, Channel *string, Title *string, Content *string, Priority *int, UserMessageID *string, SendTimestamp *float64, SenderName *string) (*SendMessageResponse, *ginext.HTTPResponse) {
+func (app *Application) SendMessage(g *gin.Context, ctx *AppContext, Key *string, Channel *string, Title *string, Content *string, Priority *int, UserMessageID *string, SendTimestamp *float64, SenderName *string) (*SendMessageResponse, *ginext.HTTPResponse) {
 	if Title != nil {
 		Title = langext.Ptr(strings.TrimSpace(*Title))
 	}
@@ -33,9 +34,6 @@ func (app *Application) SendMessage(g *gin.Context, ctx *AppContext, UserID *mod
 		UserMessageID = langext.Ptr(strings.TrimSpace(*UserMessageID))
 	}
 
-	if UserID == nil {
-		return nil, langext.Ptr(ginresp.SendAPIError(g, 400, apierr.MISSING_UID, hl.USER_ID, "Missing parameter [[user_id]]", nil))
-	}
 	if Key == nil {
 		return nil, langext.Ptr(ginresp.SendAPIError(g, 400, apierr.MISSING_TOK, hl.USER_KEY, "Missing parameter [[key]]", nil))
 	}
@@ -49,9 +47,9 @@ func (app *Application) SendMessage(g *gin.Context, ctx *AppContext, UserID *mod
 		return nil, langext.Ptr(ginresp.SendAPIError(g, 400, apierr.NO_TITLE, hl.TITLE, "No title specified", nil))
 	}
 
-	user, err := app.Database.Primary.GetUser(ctx, *UserID)
+	user, err := app.Database.Primary.GetUserByKey(ctx, *Key)
 	if errors.Is(err, sql.ErrNoRows) {
-		return nil, langext.Ptr(ginresp.SendAPIError(g, 400, apierr.USER_NOT_FOUND, hl.USER_ID, "User not found", err))
+		return nil, langext.Ptr(ginresp.SendAPIError(g, 401, apierr.USER_AUTH_FAILED, hl.USER_KEY, "Key not found or not valid", err))
 	}
 	if err != nil {
 		return nil, langext.Ptr(ginresp.SendAPIError(g, 500, apierr.DATABASE_ERROR, hl.NONE, "Failed to query user", err))
@@ -126,7 +124,7 @@ func (app *Application) SendMessage(g *gin.Context, ctx *AppContext, UserID *mod
 		return nil, langext.Ptr(ginresp.SendAPIError(g, 403, apierr.QUOTA_REACHED, hl.NONE, fmt.Sprintf("Daily quota reached (%d)", user.QuotaPerDay()), nil))
 	}
 
-	channel, err := app.GetOrCreateChannel(ctx, *UserID, channelDisplayName, channelInternalName)
+	channel, err := app.GetOrCreateChannel(ctx, user.UserID, channelDisplayName, channelInternalName)
 	if err != nil {
 		return nil, langext.Ptr(ginresp.SendAPIError(g, 500, apierr.DATABASE_ERROR, hl.NONE, "Failed to query/create (owned) channel", err))
 	}
@@ -145,7 +143,7 @@ func (app *Application) SendMessage(g *gin.Context, ctx *AppContext, UserID *mod
 
 	clientIP := g.ClientIP()
 
-	msg, err := app.Database.Primary.CreateMessage(ctx, *UserID, channel, sendTimestamp, *Title, Content, priority, UserMessageID, clientIP, SenderName, keytok.KeyTokenID)
+	msg, err := app.Database.Primary.CreateMessage(ctx, user.UserID, channel, sendTimestamp, *Title, Content, priority, UserMessageID, clientIP, SenderName, keytok.KeyTokenID)
 	if err != nil {
 		return nil, langext.Ptr(ginresp.SendAPIError(g, 500, apierr.DATABASE_ERROR, hl.NONE, "Failed to create message in db", err))
 	}
@@ -176,7 +174,7 @@ func (app *Application) SendMessage(g *gin.Context, ctx *AppContext, UserID *mod
 		return nil, langext.Ptr(ginresp.SendAPIError(g, 500, apierr.DATABASE_ERROR, hl.NONE, "Failed to inc token msg-counter", err))
 	}
 
-	log.Info().Msg(fmt.Sprintf("Sending new notification %s for user %s (to %d active subscriptions)", msg.MessageID, UserID, len(activeSubscriptions)))
+	log.Info().Msg(fmt.Sprintf("Sending new notification %s for user %s (to %d active subscriptions)", msg.MessageID, user.UserID, len(activeSubscriptions)))
 
 	for _, sub := range activeSubscriptions {
 		clients, err := app.Database.Primary.ListClients(ctx, sub.SubscriberUserID)

scnserver/test/channel_test.go

@@ -1142,9 +1142,8 @@ func TestChannelMessageCounter(t *testing.T) {
 	}
 
 	tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
-		"key":     admintok,
-		"user_id": uid,
-		"title":   tt.ShortLipsum(1001, 1),
+		"key":   admintok,
+		"title": tt.ShortLipsum(1001, 1),
 	})
 
 	chan0 := tt.RequestAuthGet[chanlist](t, admintok, baseUrl, fmt.Sprintf("/api/v2/users/%s/channels", uid)).Channels[0]
@@ -1171,28 +1170,24 @@ func TestChannelMessageCounter(t *testing.T) {
 	assertCounter(1, 0, 0)
 
 	tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
-		"key":     admintok,
-		"user_id": uid,
-		"title":   tt.ShortLipsum(1002, 1),
+		"key":   admintok,
+		"title": tt.ShortLipsum(1002, 1),
 	})
 
 	assertCounter(2, 0, 0)
 
 	tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
 		"key":     admintok,
-		"user_id": uid,
 		"channel": "Chan1",
 		"title":   tt.ShortLipsum(1003, 1),
 	})
 	tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
 		"key":     admintok,
-		"user_id": uid,
 		"channel": "Chan2",
 		"title":   tt.ShortLipsum(1004, 1),
 	})
 	tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
 		"key":     admintok,
-		"user_id": uid,
 		"channel": "Chan2",
 		"title":   tt.ShortLipsum(1005, 1),
 	})

scnserver/test/keytoken_test.go

@@ -126,7 +126,6 @@ func TestTokenKeys(t *testing.T) {
 
 	msg1s := tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
 		"key":     key7.Token,
-		"user_id": data.UID,
 		"channel": "testchan1",
 		"title":   "HelloWorld_001",
 	})
@@ -137,15 +136,13 @@ func TestTokenKeys(t *testing.T) {
 
 	tt.RequestPostShouldFail(t, baseUrl, "/", gin.H{
 		"key":     key7.Token,
-		"user_id": data.UID,
 		"channel": "testchan2",
 		"title":   "HelloWorld_001",
 	}, 401, apierr.USER_AUTH_FAILED) // wrong channel
 
 	tt.RequestPostShouldFail(t, baseUrl, "/", gin.H{
-		"key":     key7.Token,
-		"user_id": data.UID,
-		"title":   "HelloWorld_001",
+		"key":   key7.Token,
+		"title": "HelloWorld_001",
 	}, 401, apierr.USER_AUTH_FAILED) // no channel (=main)
 
 	tt.RequestAuthGetShouldFail(t, key7.Token, baseUrl, fmt.Sprintf("/api/v2/users/%s", data.UID), 401, apierr.USER_AUTH_FAILED) // no user read perm
@@ -160,9 +157,8 @@ func TestTokenKeys(t *testing.T) {
 	})
 
 	tt.RequestPostShouldFail(t, baseUrl, "/", gin.H{
-		"key":     key8.Token,
-		"user_id": data.UID,
-		"title":   "HelloWorld_001",
+		"key":   key8.Token,
+		"title": "HelloWorld_001",
 	}, 401, apierr.USER_AUTH_FAILED) // no send perm
 
 }
@@ -470,15 +466,13 @@ func TestTokenKeysPermissions(t *testing.T) {
 
 	tt.RequestPostShouldFail(t, baseUrl, "/", gin.H{
 		"key":     key7.Token,
-		"user_id": data.UID,
 		"channel": "testchan2",
 		"title":   "HelloWorld_001",
 	}, 401, apierr.USER_AUTH_FAILED) // wrong channel
 
 	tt.RequestPostShouldFail(t, baseUrl, "/", gin.H{
-		"key":     key7.Token,
-		"user_id": data.UID,
-		"title":   "HelloWorld_001",
+		"key":   key7.Token,
+		"title": "HelloWorld_001",
 	}, 401, apierr.USER_AUTH_FAILED) // no channel (=main)
 
 	tt.RequestAuthGetShouldFail(t, key7.Token, baseUrl, fmt.Sprintf("/api/v2/users/%s", data.UID), 401, apierr.USER_AUTH_FAILED) // no user read perm
@@ -493,9 +487,8 @@ func TestTokenKeysPermissions(t *testing.T) {
 	})
 
 	tt.RequestPostShouldFail(t, baseUrl, "/", gin.H{
-		"key":     key8.Token,
-		"user_id": data.UID,
-		"title":   "HelloWorld_001",
+		"key":   key8.Token,
+		"title": "HelloWorld_001",
 	}, 401, apierr.USER_AUTH_FAILED) // no send perm
 
 }
@@ -550,44 +543,38 @@ func TestTokenKeysMessageCounter(t *testing.T) {
 	assertCounter(0, 0, 0)
 
 	tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
-		"key":     admintok,
-		"user_id": uid,
-		"title":   tt.ShortLipsum(1001, 1),
+		"key":   admintok,
+		"title": tt.ShortLipsum(1001, 1),
 	})
 
 	assertCounter(1, 0, 0)
 
 	tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
-		"key":     admintok,
-		"user_id": uid,
-		"title":   tt.ShortLipsum(1002, 1),
+		"key":   admintok,
+		"title": tt.ShortLipsum(1002, 1),
 	})
 
 	assertCounter(2, 0, 0)
 
 	tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
-		"key":     sendtok,
-		"user_id": uid,
-		"title":   tt.ShortLipsum(1002, 1),
+		"key":   sendtok,
+		"title": tt.ShortLipsum(1002, 1),
 	})
 
 	assertCounter(2, 1, 0)
 
 	tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
 		"key":     sendtok,
-		"user_id": uid,
 		"channel": "Chan1",
 		"title":   tt.ShortLipsum(1003, 1),
 	})
 	tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
 		"key":     sendtok,
-		"user_id": uid,
 		"channel": "Chan2",
 		"title":   tt.ShortLipsum(1004, 1),
 	})
 	tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
 		"key":     sendtok,
-		"user_id": uid,
 		"channel": "Chan2",
 		"title":   tt.ShortLipsum(1005, 1),
 	})
@@ -597,7 +584,6 @@ func TestTokenKeysMessageCounter(t *testing.T) {
 
 	tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
 		"key":     admintok,
-		"user_id": uid,
 		"channel": "Chan2",
 		"title":   tt.ShortLipsum(1004, 1),
 	})
@@ -605,9 +591,8 @@ func TestTokenKeysMessageCounter(t *testing.T) {
 	assertCounter(3, 4, 0)
 
 	tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
-		"key":     admintok,
-		"user_id": uid,
-		"title":   tt.ShortLipsum(1002, 1),
+		"key":   admintok,
+		"title": tt.ShortLipsum(1002, 1),
 	})
 
 	assertCounter(4, 4, 0)

scnserver/test/main_test.go

@@ -2,11 +2,13 @@ package test
 
 import (
 	"database/sql"
+	"os"
+	"testing"
+
+	tt "blackforestbytes.com/simplecloudnotifier/test/util"
 	"git.blackforestbytes.com/BlackForestBytes/goext/exerr"
 	"git.blackforestbytes.com/BlackForestBytes/goext/langext"
 	"github.com/glebarez/go-sqlite"
-	"os"
-	"testing"
 )
 
 func TestMain(m *testing.M) {
@@ -20,3 +22,10 @@ func TestMain(m *testing.M) {
 
 	os.Exit(m.Run())
 }
+
+func TestInitFactory(t *testing.T) {
+	ws, _, stop := tt.StartSimpleWebserver(t)
+	defer stop()
+
+	tt.InitDefaultData(t, ws)
+}

scnserver/test/message_test.go

@@ -418,14 +418,12 @@ func TestDeleteMessage(t *testing.T) {
 		"fcm_token":     "DUMMY_FCM",
 	})
 
-	uid := r0["user_id"].(string)
 	sendtok := r0["send_key"].(string)
 	admintok := r0["admin_key"].(string)
 
 	msg1 := tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
-		"key":     sendtok,
-		"user_id": uid,
-		"title":   "Message_1",
+		"key":   sendtok,
+		"title": "Message_1",
 	})
 
 	tt.RequestAuthGet[tt.Void](t, admintok, baseUrl, "/api/v2/messages/"+fmt.Sprintf("%v", msg1["scn_msg_id"]))
@@ -446,15 +444,13 @@ func TestDeleteMessageAndResendUsrMsgId(t *testing.T) {
 		"fcm_token":     "DUMMY_FCM",
 	})
 
-	uid := r0["user_id"].(string)
 	sendtok := r0["send_key"].(string)
 	admintok := r0["admin_key"].(string)
 
 	msg1 := tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
-		"key":     sendtok,
-		"user_id": uid,
-		"title":   "Message_1",
-		"msg_id":  "bef8dd3d-078e-4f89-abf4-5258ad22a2e4",
+		"key":    sendtok,
+		"title":  "Message_1",
+		"msg_id": "bef8dd3d-078e-4f89-abf4-5258ad22a2e4",
 	})
 
 	tt.AssertEqual(t, "suppress_send", false, msg1["suppress_send"])
@@ -462,10 +458,9 @@ func TestDeleteMessageAndResendUsrMsgId(t *testing.T) {
 	tt.RequestAuthGet[tt.Void](t, admintok, baseUrl, "/api/v2/messages/"+fmt.Sprintf("%v", msg1["scn_msg_id"]))
 
 	msg2 := tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
-		"key":     sendtok,
-		"user_id": uid,
-		"title":   "Message_1",
-		"msg_id":  "bef8dd3d-078e-4f89-abf4-5258ad22a2e4",
+		"key":    sendtok,
+		"title":  "Message_1",
+		"msg_id": "bef8dd3d-078e-4f89-abf4-5258ad22a2e4",
 	})
 
 	tt.AssertEqual(t, "suppress_send", true, msg2["suppress_send"])
@@ -475,10 +470,9 @@ func TestDeleteMessageAndResendUsrMsgId(t *testing.T) {
 	// even though message is deleted, we still get a `suppress_send` on send_message
 
 	msg3 := tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
-		"key":     sendtok,
-		"user_id": uid,
-		"title":   "Message_1",
-		"msg_id":  "bef8dd3d-078e-4f89-abf4-5258ad22a2e4",
+		"key":    sendtok,
+		"title":  "Message_1",
+		"msg_id": "bef8dd3d-078e-4f89-abf4-5258ad22a2e4",
 	})
 
 	tt.AssertEqual(t, "suppress_send", true, msg3["suppress_send"])
@@ -492,9 +486,8 @@ func TestGetMessageSimple(t *testing.T) {
 	data := tt.InitDefaultData(t, ws)
 
 	msgOut := tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
-		"key":     data.User[0].SendKey,
-		"user_id": data.User[0].UID,
-		"title":   "Message_1",
+		"key":   data.User[0].SendKey,
+		"title": "Message_1",
 	})
 
 	msgIn := tt.RequestAuthGet[gin.H](t, data.User[0].AdminKey, baseUrl, "/api/v2/messages/"+fmt.Sprintf("%v", msgOut["scn_msg_id"]))
@@ -533,7 +526,6 @@ func TestGetMessageFull(t *testing.T) {
 
 	msgOut := tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
 		"key":         data.User[0].SendKey,
-		"user_id":     data.User[0].UID,
 		"title":       "Message_1",
 		"content":     content,
 		"channel":     "demo-channel-007",
@@ -948,7 +940,6 @@ func TestDeactivatedSubscriptionListMessages(t *testing.T) {
 	newMessageTitle := langext.RandBase62(48)
 	tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
 		"key":     user15.AdminKey,
-		"user_id": user15.UID,
 		"channel": chanName,
 		"title":   newMessageTitle,
 	})
@@ -1122,7 +1113,6 @@ func TestActiveSubscriptionListMessages(t *testing.T) {
 	newMessageTitle := langext.RandBase62(48)
 	tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
 		"key":     user15.AdminKey,
-		"user_id": user15.UID,
 		"channel": chanName,
 		"title":   newMessageTitle,
 	})
@@ -1176,7 +1166,6 @@ func TestUnconfirmedSubscriptionListMessages(t *testing.T) {
 	newMessageTitle := langext.RandBase62(48)
 	tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
 		"key":     user15.AdminKey,
-		"user_id": user15.UID,
 		"channel": chanName,
 		"title":   newMessageTitle,
 	})
@@ -1229,7 +1218,7 @@ func TestListMessagesSubscriptionStatusAllInactiveSubscription(t *testing.T) {
 	subscriptionID, _ := tt.FindSubscriptionByChanName(t, baseUrl, user14, user15.UID, chanName)
 
 	newMessageTitle := langext.RandBase62(48)
-	tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{"key": user15.AdminKey, "user_id": user15.UID, "channel": chanName, "title": newMessageTitle})
+	tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{"key": user15.AdminKey, "channel": chanName, "title": newMessageTitle})
 
 	type msg struct {
 		MessageId string `json:"message_id"`
@@ -1282,7 +1271,7 @@ func TestListMessagesSubscriptionStatusAllNoSubscription(t *testing.T) {
 	chan2 := data.User[0].Channels[2]
 
 	newMessageTitle := langext.RandBase62(48)
-	tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{"key": user0.AdminKey, "user_id": user0.UID, "channel": chan2.InternalName, "title": newMessageTitle})
+	tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{"key": user0.AdminKey, "channel": chan2.InternalName, "title": newMessageTitle})
 
 	{
 		messages := tt.RequestAuthGet[mglist](t, user0.AdminKey, baseUrl, "/api/v2/messages")
@@ -1563,3 +1552,111 @@ func TestListMessagesPaginatedDirectInvalidToken(t *testing.T) {
 	// Test invalid paginated token (float)
 	tt.RequestAuthGetShouldFail(t, data.User[16].AdminKey, baseUrl, fmt.Sprintf("/api/v2/messages?page_size=%d&next_page_token=%s", 10, "$1.5"), 400, apierr.PAGETOKEN_ERROR)
 }
+
+func TestListMessageDeliveries(t *testing.T) {
+	_, baseUrl, stop := tt.StartSimpleWebserver(t)
+	defer stop()
+
+	r0 := tt.RequestPost[gin.H](t, baseUrl, "/api/v2/users", gin.H{
+		"agent_model":   "DUMMY_PHONE",
+		"agent_version": "4X",
+		"client_type":   "ANDROID",
+		"fcm_token":     "DUMMY_FCM",
+	})
+
+	sendtok := r0["send_key"].(string)
+	admintok := r0["admin_key"].(string)
+
+	msg1 := tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
+		"key":   sendtok,
+		"title": "Message_1",
+	})
+
+	type delivery struct {
+		DeliveryID       string  `json:"delivery_id"`
+		MessageID        string  `json:"message_id"`
+		ReceiverUserID   string  `json:"receiver_user_id"`
+		ReceiverClientID string  `json:"receiver_client_id"`
+		Status           string  `json:"status"`
+		RetryCount       int     `json:"retry_count"`
+		TimestampCreated string  `json:"timestamp_created"`
+		FCMMessageID     *string `json:"fcm_message_id"`
+	}
+	type deliveryList struct {
+		Deliveries []delivery `json:"deliveries"`
+	}
+
+	deliveries := tt.RequestAuthGet[deliveryList](t, admintok, baseUrl, "/api/v2/messages/"+fmt.Sprintf("%v", msg1["scn_msg_id"])+"/deliveries")
+
+	tt.AssertTrue(t, "deliveries.len >= 1", len(deliveries.Deliveries) >= 1)
+	tt.AssertEqual(t, "deliveries[0].message_id", fmt.Sprintf("%v", msg1["scn_msg_id"]), deliveries.Deliveries[0].MessageID)
+}
+
+func TestListMessageDeliveriesNotFound(t *testing.T) {
+	ws, baseUrl, stop := tt.StartSimpleWebserver(t)
+	defer stop()
+
+	data := tt.InitDefaultData(t, ws)
+
+	tt.RequestAuthGetShouldFail(t, data.User[0].AdminKey, baseUrl, "/api/v2/messages/"+models.NewMessageID().String()+"/deliveries", 404, apierr.MESSAGE_NOT_FOUND)
+}
+
+func TestListMessageDeliveriesNoAuth(t *testing.T) {
+	_, baseUrl, stop := tt.StartSimpleWebserver(t)
+	defer stop()
+
+	r0 := tt.RequestPost[gin.H](t, baseUrl, "/api/v2/users", gin.H{
+		"agent_model":   "DUMMY_PHONE",
+		"agent_version": "4X",
+		"client_type":   "ANDROID",
+		"fcm_token":     "DUMMY_FCM",
+	})
+
+	sendtok := r0["send_key"].(string)
+
+	msg1 := tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
+		"key":   sendtok,
+		"title": "Message_1",
+	})
+
+	tt.RequestGetShouldFail(t, baseUrl, "/api/v2/messages/"+fmt.Sprintf("%v", msg1["scn_msg_id"])+"/deliveries", 401, apierr.USER_AUTH_FAILED)
+}
+
+func TestListMessageDeliveriesNonAdminKey(t *testing.T) {
+	_, baseUrl, stop := tt.StartSimpleWebserver(t)
+	defer stop()
+
+	r0 := tt.RequestPost[gin.H](t, baseUrl, "/api/v2/users", gin.H{
+		"agent_model":   "DUMMY_PHONE",
+		"agent_version": "4X",
+		"client_type":   "ANDROID",
+		"fcm_token":     "DUMMY_FCM",
+	})
+
+	sendtok := r0["send_key"].(string)
+	readtok := r0["read_key"].(string)
+
+	msg1 := tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
+		"key":   sendtok,
+		"title": "Message_1",
+	})
+
+	// read key should fail (not admin)
+	tt.RequestAuthGetShouldFail(t, readtok, baseUrl, "/api/v2/messages/"+fmt.Sprintf("%v", msg1["scn_msg_id"])+"/deliveries", 401, apierr.USER_AUTH_FAILED)
+}
+
+func TestListMessageDeliveriesDifferentUserChannel(t *testing.T) {
+	ws, baseUrl, stop := tt.StartSimpleWebserver(t)
+	defer stop()
+
+	data := tt.InitDefaultData(t, ws)
+
+	// User 0 sends a message
+	msg1 := tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
+		"key":   data.User[0].SendKey,
+		"title": "Message_from_user_0",
+	})
+
+	// User 1 tries to access deliveries of User 0's message - should fail
+	tt.RequestAuthGetShouldFail(t, data.User[1].AdminKey, baseUrl, "/api/v2/messages/"+fmt.Sprintf("%v", msg1["scn_msg_id"])+"/deliveries", 401, apierr.USER_AUTH_FAILED)
+}

scnserver/test/send_test.go

@@ -1,18 +1,18 @@
 package test
 
 import (
-	"blackforestbytes.com/simplecloudnotifier/api/apierr"
-	"blackforestbytes.com/simplecloudnotifier/models"
-	"blackforestbytes.com/simplecloudnotifier/push"
-	tt "blackforestbytes.com/simplecloudnotifier/test/util"
 	"fmt"
-	"git.blackforestbytes.com/BlackForestBytes/goext/langext"
-	"github.com/gin-gonic/gin"
 	"math/rand/v2"
 	"net/url"
 	"strings"
 	"testing"
 	"time"
+
+	"blackforestbytes.com/simplecloudnotifier/api/apierr"
+	"blackforestbytes.com/simplecloudnotifier/push"
+	tt "blackforestbytes.com/simplecloudnotifier/test/util"
+	"git.blackforestbytes.com/BlackForestBytes/goext/langext"
+	"github.com/gin-gonic/gin"
 )
 
 func TestSendSimpleMessageJSON(t *testing.T) {
@@ -28,27 +28,23 @@ func TestSendSimpleMessageJSON(t *testing.T) {
 		"fcm_token":     "DUMMY_FCM",
 	})
 
-	uid := r0["user_id"].(string)
 	admintok := r0["admin_key"].(string)
 	readtok := r0["read_key"].(string)
 	sendtok := r0["send_key"].(string)
 
 	msg1 := tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
-		"key":     sendtok,
-		"user_id": uid,
-		"title":   "HelloWorld_001",
+		"key":   sendtok,
+		"title": "HelloWorld_001",
 	})
 
 	tt.RequestPostShouldFail(t, baseUrl, "/", gin.H{
-		"key":     readtok,
-		"user_id": uid,
-		"title":   "HelloWorld_001",
+		"key":   readtok,
+		"title": "HelloWorld_001",
 	}, 401, apierr.USER_AUTH_FAILED)
 
 	tt.RequestPostShouldFail(t, baseUrl, "/", gin.H{
-		"key":     "asdf",
-		"user_id": uid,
-		"title":   "HelloWorld_001",
+		"key":   "asdf",
+		"title": "HelloWorld_001",
 	}, 401, apierr.USER_AUTH_FAILED)
 
 	tt.AssertEqual(t, "messageCount", 1, len(pusher.Data))
@@ -117,14 +113,12 @@ func TestSendSimpleMessageForm(t *testing.T) {
 		"fcm_token":     "DUMMY_FCM",
 	})
 
-	uid := r0["user_id"].(string)
 	admintok := r0["admin_key"].(string)
 	sendtok := r0["send_key"].(string)
 
 	msg1 := tt.RequestPost[gin.H](t, baseUrl, "/", tt.FormData{
-		"key":     sendtok,
-		"user_id": uid,
-		"title":   "Hello World 9999 [$$$]",
+		"key":   sendtok,
+		"title": "Hello World 9999 [$$$]",
 	})
 
 	tt.AssertEqual(t, "messageCount", 1, len(pusher.Data))
@@ -189,9 +183,8 @@ func TestSendSimpleMessageJSONAndQuery(t *testing.T) {
 
 	// query overwrite body
 	msg1 := tt.RequestPost[gin.H](t, baseUrl, fmt.Sprintf("/?user_id=%s&key=%s&title=%s", uid, sendtok, url.QueryEscape("1111111")), gin.H{
-		"key":     "ERR",
-		"user_id": models.NewUserID(),
-		"title":   "2222222",
+		"key":   "ERR",
+		"title": "2222222",
 	})
 
 	tt.AssertEqual(t, "messageCount", 1, len(pusher.Data))
@@ -212,21 +205,18 @@ func TestSendSimpleMessageAlt1(t *testing.T) {
 		"fcm_token":     "DUMMY_FCM",
 	})
 
-	uid := r0["user_id"].(string)
 	admintok := r0["admin_key"].(string)
 	readtok := r0["read_key"].(string)
 	sendtok := r0["send_key"].(string)
 
 	msg1 := tt.RequestPost[gin.H](t, baseUrl, "/send", gin.H{
-		"key":     sendtok,
-		"user_id": uid,
-		"title":   "HelloWorld_001",
+		"key":   sendtok,
+		"title": "HelloWorld_001",
 	})
 
 	tt.RequestPostShouldFail(t, baseUrl, "/send", gin.H{
-		"key":     readtok,
-		"user_id": uid,
-		"title":   "HelloWorld_001",
+		"key":   readtok,
+		"title": "HelloWorld_001",
 	}, 401, apierr.USER_AUTH_FAILED)
 
 	tt.AssertEqual(t, "messageCount", 1, len(pusher.Data))
@@ -259,13 +249,11 @@ func TestSendContentMessage(t *testing.T) {
 		"fcm_token":     "DUMMY_FCM",
 	})
 
-	uid := r0["user_id"].(string)
 	admintok := r0["admin_key"].(string)
 	sendtok := r0["send_key"].(string)
 
 	msg1 := tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
 		"key":     sendtok,
-		"user_id": uid,
 		"title":   "HelloWorld_042",
 		"content": "I am Content\nasdf",
 	})
@@ -304,13 +292,11 @@ func TestSendWithSendername(t *testing.T) {
 		"fcm_token":     "DUMMY_FCM",
 	})
 
-	uid := r0["user_id"].(string)
 	sendtok := r0["send_key"].(string)
 	admintok := r0["admin_key"].(string)
 
 	msg1 := tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
 		"key":         sendtok,
-		"user_id":     uid,
 		"title":       "HelloWorld_xyz",
 		"content":     "Unicode: 日本 - yäy\000\n\t\x00...",
 		"sender_name": "localhorst",
@@ -353,7 +339,6 @@ func TestSendLongContent(t *testing.T) {
 		"fcm_token":     "DUMMY_FCM",
 	})
 
-	uid := r0["user_id"].(string)
 	admintok := r0["admin_key"].(string)
 	sendtok := r0["send_key"].(string)
 
@@ -364,7 +349,6 @@ func TestSendLongContent(t *testing.T) {
 
 	msg1 := tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
 		"key":     sendtok,
-		"user_id": uid,
 		"title":   "HelloWorld_042",
 		"content": longContent,
 	})

scnserver/test/shoutrrr_test.go

@@ -0,0 +1,127 @@
+package test
+
+import (
+	"blackforestbytes.com/simplecloudnotifier/push"
+	tt "blackforestbytes.com/simplecloudnotifier/test/util"
+	"fmt"
+	"github.com/gin-gonic/gin"
+	"testing"
+)
+
+func TestShoutrrrBasic(t *testing.T) {
+	ws, baseUrl, stop := tt.StartSimpleWebserver(t)
+	defer stop()
+
+	data := tt.InitSingleData(t, ws)
+
+	pusher := ws.Pusher.(*push.TestSink)
+
+	suffix := fmt.Sprintf("/external/v1/shoutrrr?key=%v", data.SendKey)
+	_ = tt.RequestPost[gin.H](t, baseUrl, suffix, gin.H{
+		"title":   "Test Title",
+		"message": "Test Message Content",
+	})
+
+	tt.AssertEqual(t, "messageCount", 1, len(pusher.Data))
+	tt.AssertStrRepEqual(t, "msg.title", "Test Title", pusher.Last().Message.Title)
+	tt.AssertStrRepEqual(t, "msg.content", "Test Message Content", pusher.Last().Message.Content)
+
+	type mglist struct {
+		Messages []gin.H `json:"messages"`
+	}
+
+	msgList1 := tt.RequestAuthGet[mglist](t, data.AdminKey, baseUrl, "/api/v2/messages")
+	tt.AssertEqual(t, "len(messages)", 1, len(msgList1.Messages))
+	tt.AssertStrRepEqual(t, "msg.title", "Test Title", msgList1.Messages[0]["title"])
+	tt.AssertStrRepEqual(t, "msg.content", "Test Message Content", msgList1.Messages[0]["content"])
+}
+
+func TestShoutrrrChannelNone(t *testing.T) {
+	ws, baseUrl, stop := tt.StartSimpleWebserver(t)
+	defer stop()
+
+	data := tt.InitSingleData(t, ws)
+
+	pusher := ws.Pusher.(*push.TestSink)
+
+	suffix := fmt.Sprintf("/external/v1/shoutrrr?key=%v", data.SendKey)
+	_ = tt.RequestPost[gin.H](t, baseUrl, suffix, gin.H{
+		"title":   "Test Title",
+		"message": "Test Message",
+	})
+
+	tt.AssertEqual(t, "messageCount", 1, len(pusher.Data))
+	tt.AssertStrRepEqual(t, "msg.channel", "main", pusher.Last().Message.ChannelInternalName)
+}
+
+func TestShoutrrrChannelCustom(t *testing.T) {
+	ws, baseUrl, stop := tt.StartSimpleWebserver(t)
+	defer stop()
+
+	data := tt.InitSingleData(t, ws)
+
+	pusher := ws.Pusher.(*push.TestSink)
+
+	suffix := fmt.Sprintf("/external/v1/shoutrrr?key=%v&channel=CTEST", data.SendKey)
+	_ = tt.RequestPost[gin.H](t, baseUrl, suffix, gin.H{
+		"title":   "Test Title",
+		"message": "Test Message",
+	})
+
+	tt.AssertEqual(t, "messageCount", 1, len(pusher.Data))
+	tt.AssertStrRepEqual(t, "msg.channel", "CTEST", pusher.Last().Message.ChannelInternalName)
+}
+
+func TestShoutrrrPriorityNone(t *testing.T) {
+	ws, baseUrl, stop := tt.StartSimpleWebserver(t)
+	defer stop()
+
+	data := tt.InitSingleData(t, ws)
+
+	pusher := ws.Pusher.(*push.TestSink)
+
+	suffix := fmt.Sprintf("/external/v1/shoutrrr?key=%v", data.SendKey)
+	_ = tt.RequestPost[gin.H](t, baseUrl, suffix, gin.H{
+		"title":   "Test Title",
+		"message": "Test Message",
+	})
+
+	tt.AssertEqual(t, "messageCount", 1, len(pusher.Data))
+	tt.AssertStrRepEqual(t, "msg.priority", 1, pusher.Last().Message.Priority)
+}
+
+func TestShoutrrrPrioritySingle(t *testing.T) {
+	ws, baseUrl, stop := tt.StartSimpleWebserver(t)
+	defer stop()
+
+	data := tt.InitSingleData(t, ws)
+
+	pusher := ws.Pusher.(*push.TestSink)
+
+	suffix0 := fmt.Sprintf("/external/v1/shoutrrr?key=%v&priority=0", data.SendKey)
+	_ = tt.RequestPost[gin.H](t, baseUrl, suffix0, gin.H{
+		"title":   "Test Title",
+		"message": "Test Message",
+	})
+
+	tt.AssertEqual(t, "messageCount", 1, len(pusher.Data))
+	tt.AssertStrRepEqual(t, "msg.prio", 0, pusher.Last().Message.Priority)
+
+	suffix1 := fmt.Sprintf("/external/v1/shoutrrr?key=%v&priority=1", data.SendKey)
+	_ = tt.RequestPost[gin.H](t, baseUrl, suffix1, gin.H{
+		"title":   "Test Title",
+		"message": "Test Message",
+	})
+
+	tt.AssertEqual(t, "messageCount", 2, len(pusher.Data))
+	tt.AssertStrRepEqual(t, "msg.prio", 1, pusher.Last().Message.Priority)
+
+	suffix2 := fmt.Sprintf("/external/v1/shoutrrr?key=%v&priority=2", data.SendKey)
+	_ = tt.RequestPost[gin.H](t, baseUrl, suffix2, gin.H{
+		"title":   "Test Title",
+		"message": "Test Message",
+	})
+
+	tt.AssertEqual(t, "messageCount", 3, len(pusher.Data))
+	tt.AssertStrRepEqual(t, "msg.prio", 2, pusher.Last().Message.Priority)
+}

scnserver/test/user_test.go

@@ -401,36 +401,31 @@ func TestUserMessageCounter(t *testing.T) {
 	assertCounter(0)
 
 	tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
-		"key":     admintok,
-		"user_id": uid,
-		"title":   tt.ShortLipsum(1001, 1),
+		"key":   admintok,
+		"title": tt.ShortLipsum(1001, 1),
 	})
 
 	assertCounter(1)
 	assertCounter(1)
 
 	tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
-		"key":     admintok,
-		"user_id": uid,
-		"title":   tt.ShortLipsum(1002, 1),
+		"key":   admintok,
+		"title": tt.ShortLipsum(1002, 1),
 	})
 
 	assertCounter(2)
 
 	tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
-		"key":     admintok,
-		"user_id": uid,
-		"title":   tt.ShortLipsum(1003, 1),
+		"key":   admintok,
+		"title": tt.ShortLipsum(1003, 1),
 	})
 	tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
-		"key":     admintok,
-		"user_id": uid,
-		"title":   tt.ShortLipsum(1004, 1),
+		"key":   admintok,
+		"title": tt.ShortLipsum(1004, 1),
 	})
 	tt.RequestPost[gin.H](t, baseUrl, "/", gin.H{
-		"key":     admintok,
-		"user_id": uid,
-		"title":   tt.ShortLipsum(1005, 1),
+		"key":   admintok,
+		"title": tt.ShortLipsum(1005, 1),
 	})
 
 	assertCounter(5)

scnserver/test/util/factory.go

@@ -1,15 +1,16 @@
 package util
 
 import (
-	"blackforestbytes.com/simplecloudnotifier/logic"
 	"fmt"
+	"testing"
+	"time"
+
+	"blackforestbytes.com/simplecloudnotifier/logic"
 	"git.blackforestbytes.com/BlackForestBytes/goext/langext"
 	"git.blackforestbytes.com/BlackForestBytes/goext/timeext"
 	"github.com/gin-gonic/gin"
 	"github.com/rs/zerolog/log"
 	"gopkg.in/loremipsum.v1"
-	"testing"
-	"time"
 )
 
 // # Generated by https://chat.openai.com/chat
@@ -393,7 +394,6 @@ func InitDefaultData(t *testing.T, ws *logic.Application) DefData {
 	for _, mex := range messageExamples {
 		body := gin.H{}
 		body["title"] = mex.Title
-		body["user_id"] = users[mex.User].UID
 		switch mex.Key {
 		case AKEY:
 			body["key"] = users[mex.User].AdminKey

scnserver/website/api.html

@@ -19,10 +19,9 @@
 
         <a tabindex="-1" href="/" class="linkcaption"><h1>Simple Cloud Notifier</h1></a>
 
-        <p>Get your user-id and user-key from the android or iOS app.<br/>And send notifications to your phone by performing a POST request against <code>{{config|baseURL}}/</code> from anywhere</p>
+        <p>Get your user-key from the android or iOS app.<br/>And send notifications to your phone by performing a POST request against <code>{{config|baseURL}}/</code> from anywhere</p>
         <pre>
 curl                                                                        \
-    --data "user_id=${userid}"                                              \
     --data "key=${key}"                                                     \
     --data "title=${message_title}"                                         \
     --data "content=${message_body}"                                        \
@@ -35,7 +34,6 @@ curl                                                                        \
     <p>Most parameters are optional, you can send a message with only a title (default priority and channel will be used)</p>
         <pre>
 curl                                          \
-    --data "user_id={userid}"                 \
     --data "key={key}"                        \
     --data "title={message_title}"            \
     {{config|baseURL}}/</pre>

scnserver/website/api_more.html

@@ -52,7 +52,7 @@
                 All Parameters can either directly be submitted as URL parameters or they can be put into the POST body (either multipart/form-data or JSON).
             </p>
             <p>
-                You <i>need</i> to supply a valid <code>[user_id, key]</code> pair and a <code>title</code> for your message, all other parameter are optional.
+                You <i>need</i> to supply a valid <code>key</code> and a <code>title</code> for your message, all other parameter are optional.
             </p>
         </div>
 
@@ -90,7 +90,7 @@
                 </tr>
                 <tr>
                     <td data-label="Statuscode">401 (Unauthorized)</td>
-                    <td data-label="Explanation">The user_id was not found, the key is wrong or the [user_id, key] combination does not have the SEND permissions on the specified channel</td>
+                    <td data-label="Explanation">The key is wrong or does not have the SEND permissions on the specified channel</td>
                 </tr>
                 <tr>
                     <td data-label="Statuscode">403 (Forbidden)</td>
@@ -125,7 +125,6 @@
                If needed the content can be supplied in the <code>content</code> parameter.
             </p>
             <pre>curl                                          \
-    --data "user_id={userid}"                 \
     --data "key={key}"                        \
     --data "title={message_title}"            \
     --data "content={message_content}"        \
@@ -143,7 +142,6 @@
                 If no priority is supplied the message will get the default priority of 1.
             </p>
             <pre>curl                                          \
-    --data "user_id={userid}"                 \
     --data "key={key}"                        \
     --data "title={message_title}"            \
     --data "priority={0|1|2}"                 \
@@ -158,7 +156,6 @@
                 Channel names are case-insensitive and can only contain letters, numbers, underscores and minuses ( <code>/[[:alnum:]\-_]+/</code> )
             </p>
             <pre>curl                                          \
-    --data "user_id={userid}"                 \
     --data "key={key}"                        \
     --data "title={message_title}"            \
     --data "channel={my_channel}"             \
@@ -229,7 +226,6 @@
                 The message_id is optional - but if you want to use it you need to supply it via the <code>msg_id</code> parameter.
             </p>
             <pre>curl                                          \
-    --data "user_id={userid}"                 \
     --data "key={key}"                        \
     --data "title={message_title}"            \
     --data "msg_id={message_id}"              \
@@ -248,7 +244,6 @@
                 The custom timestamp must be within 48 hours of the current time. This parameter is only intended to supply a more precise value in case the message sending was delayed.
             </p>
             <pre>curl                                          \
-    --data "user_id={userid}"                 \
     --data "key={key}"                        \
     --data "title={message_title}"            \
     --data "timestamp={unix_timestamp}"       \

scnserver/website/index.html

@@ -21,11 +21,6 @@
 
         <a tabindex="-1" href="/" class="linkcaption"><h1>Simple Cloud Notifier</h1></a>
 
-		<div class="row responsive-label">
-			<div class="col-sm-12 col-md-3"><label for="uid" class="doc">UserID</label></div>
-			<div class="col-sm-12 col-md"><input placeholder="UserID" id="uid" class="doc" type="text" pattern="USR[A-Za-z0-9]{21}"></div>
-		</div>
-
 		<div class="row responsive-label">
 			<div class="col-sm-12 col-md-3"><label for="ukey" class="doc">Authentification Key</label></div>
 			<div class="col-sm-12 col-md"><input placeholder="Key" id="ukey" class="doc" type="text" pattern="[A-Za-z0-9]{64}"></div>

scnserver/website/js/logic.js

@@ -8,20 +8,17 @@ function send()
 
 	me.classList.add("btn-disabled");
 
-	let uid = document.getElementById("uid");
 	let key = document.getElementById("ukey");
 	let tit = document.getElementById("tit");
 	let cnt = document.getElementById("cnt");
 	let pio = document.getElementById("prio");
 	let cha = document.getElementById("chan");
 
-	uid.classList.remove('input-invalid');
 	key.classList.remove('input-invalid');
 	cnt.classList.remove('input-invalid');
 	pio.classList.remove('input-invalid');
 
 	let data = new FormData();
-	data.append('user_id', uid.value);
 	data.append('key', key.value);
 	if (tit.value !== '') data.append('title', tit.value);
 	if (cnt.value !== '') data.append('content', cnt.value);
@@ -40,7 +37,6 @@ function send()
 			let resp = JSON.parse(xhr.responseText);
 			if (!resp.success || xhr.status !== 200)
 			{
-				if (resp.errhighlight === 101) uid.classList.add('input-invalid');
 				if (resp.errhighlight === 102) key.classList.add('input-invalid');
 				if (resp.errhighlight === 103) tit.classList.add('input-invalid');
 				if (resp.errhighlight === 104) cnt.classList.add('input-invalid');
@@ -63,7 +59,6 @@ function send()
 					'&quota=' + resp.quota +
 					'&quota_remain=' + (resp.quota_max-resp.quota) +
 					'&quota_max=' + resp.quota_max +
-					'&preset_user_id=' + uid.value +
 					'&preset_user_key=' + key.value +
 					'&preset_channel=' + cha.value;
 			}
@@ -89,7 +84,6 @@ window.addEventListener("load", function ()
 	const qp = new URLSearchParams(window.location.search);
 
 	let btn = document.getElementById("btnSend");
-	let uid = document.getElementById("uid");
 	let key = document.getElementById("ukey");
 	let tit = document.getElementById("tit");
 	let cnt = document.getElementById("cnt");
@@ -100,7 +94,6 @@ window.addEventListener("load", function ()
 
 	if (qp.has('preset_priority')) pio.selectedIndex = parseInt(qp.get("preset_priority"));
 	if (qp.has('preset_user_key')) key.value         =          qp.get("preset_user_key");
-	if (qp.has('preset_user_id'))  uid.value         =          qp.get("preset_user_id");
 	if (qp.has('preset_title'))    tit.value         =          qp.get("preset_title");
 	if (qp.has('preset_content'))  cnt.value         =          qp.get("preset_content");
 	if (qp.has('preset_channel'))  cha.value         =          qp.get("preset_channel");

webapp/CLAUDE.md

@@ -0,0 +1,50 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is the web application for SimpleCloudNotifier (SCN), a push notification service. It's an Angular 19 standalone component-based SPA using ng-zorro-antd (Ant Design) for UI components.
+
+## Common Commands
+
+- `npm start` - Start development server
+- `npm run build` - Production build (outputs to `dist/scn-webapp`)
+- `npm run watch` - Development build with watch mode
+- `npm test` - Run tests with Karma
+
+## Architecture
+
+### Application Structure
+
+The app follows a feature-based module organization with standalone components:
+
+- `src/app/core/` - Singleton services, guards, interceptors, and data models
+- `src/app/features/` - Feature modules (messages, channels, subscriptions, keys, clients, senders, account, auth)
+- `src/app/shared/` - Reusable components, directives, and pipes
+- `src/app/layout/` - Main layout component with sidebar navigation
+
+### Key Patterns
+
+**Authentication**: Uses a custom `SCN` token scheme. Credentials (user_id and admin_key) are stored in localStorage and attached via `authInterceptor`. The `authGuard` protects all routes except `/login`.
+
+**API Communication**: All API calls go through `ApiService` (`src/app/core/services/api.service.ts`). The base URL is configured in `src/environments/environment.ts`.
+
+**State Management**: Uses Angular signals throughout. No external state library - each component manages its own state with signals.
+
+**Routing**: Lazy-loaded standalone components. All authenticated routes are children of `MainLayoutComponent`.
+
+### Data Models
+
+Models in `src/app/core/models/` correspond to SCN API entities:
+- User, Message, Channel, Subscription, KeyToken, Client, SenderName
+
+### UI Framework
+
+Uses ng-zorro-antd with explicit icon imports in `app.config.ts`. Icons must be added to the `icons` array before use.
+
+### Project Configuration
+
+- SCSS for styling
+- Strict TypeScript (`strict: true`)
+- Component generation skips tests by default (configured in `angular.json`)

webapp/Makefile

@@ -6,7 +6,7 @@ NAMESPACE=$(shell git rev-parse --abbrev-ref HEAD)
 HASH=$(shell git rev-parse HEAD)
 
 run:
-	. ${HOME}/.nvm/nvm.sh && nvm use && npm i && npm run dev
+	. ${HOME}/.nvm/nvm.sh && nvm use && npm i && npm run start
 
 setup:
 	npm install

webapp/src/app/app.config.ts

@@ -39,6 +39,12 @@ import {
   InfoCircleOutline,
   ExclamationCircleOutline,
   CheckCircleOutline,
+  UserAddOutline,
+  UserDeleteOutline,
+  PauseCircleOutline,
+  PlayCircleOutline,
+  StopOutline,
+  ArrowLeftOutline,
 } from '@ant-design/icons-angular/icons';
 
 import { routes } from './app.routes';
@@ -79,6 +85,12 @@ const icons: IconDefinition[] = [
   InfoCircleOutline,
   ExclamationCircleOutline,
   CheckCircleOutline,
+  UserAddOutline,
+  UserDeleteOutline,
+  PauseCircleOutline,
+  PlayCircleOutline,
+  StopOutline,
+  ArrowLeftOutline,
 ];
 
 export const appConfig: ApplicationConfig = {

webapp/src/app/app.routes.ts

@@ -33,14 +33,26 @@ export const routes: Routes = [
         path: 'subscriptions',
         loadComponent: () => import('./features/subscriptions/subscription-list/subscription-list.component').then(m => m.SubscriptionListComponent)
       },
+      {
+        path: 'subscriptions/:id',
+        loadComponent: () => import('./features/subscriptions/subscription-detail/subscription-detail.component').then(m => m.SubscriptionDetailComponent)
+      },
       {
         path: 'keys',
         loadComponent: () => import('./features/keys/key-list/key-list.component').then(m => m.KeyListComponent)
       },
+      {
+        path: 'keys/:id',
+        loadComponent: () => import('./features/keys/key-detail/key-detail.component').then(m => m.KeyDetailComponent)
+      },
       {
         path: 'clients',
         loadComponent: () => import('./features/clients/client-list/client-list.component').then(m => m.ClientListComponent)
       },
+      {
+        path: 'clients/:id',
+        loadComponent: () => import('./features/clients/client-detail/client-detail.component').then(m => m.ClientDetailComponent)
+      },
       {
         path: 'senders',
         loadComponent: () => import('./features/senders/sender-list/sender-list.component').then(m => m.SenderListComponent)

webapp/src/app/core/models/channel.model.ts

@@ -7,7 +7,6 @@ export interface Channel {
   display_name: string;
   description_name: string | null;
   subscribe_key?: string;
-  send_key?: string;
   timestamp_created: string;
   timestamp_lastsent: string | null;
   messages_sent: number;
@@ -34,8 +33,7 @@ export interface CreateChannelRequest {
 export interface UpdateChannelRequest {
   display_name?: string;
   description_name?: string;
-  subscribe_key?: string;
-  send_key?: string;
+  subscribe_key?: boolean;  // RefreshSubscribeKey
 }
 
 export interface ChannelListResponse {

webapp/src/app/core/models/delivery.model.ts

@@ -0,0 +1,18 @@
+export type DeliveryStatus = 'RETRY' | 'SUCCESS' | 'FAILED';
+
+export interface Delivery {
+  delivery_id: string;
+  message_id: string;
+  receiver_user_id: string;
+  receiver_client_id: string;
+  timestamp_created: string;
+  timestamp_finalized: string | null;
+  status: DeliveryStatus;
+  retry_count: number;
+  next_delivery: string | null;
+  fcm_message_id: string | null;
+}
+
+export interface DeliveryListResponse {
+  deliveries: Delivery[];
+}

webapp/src/app/core/models/index.ts

@@ -5,4 +5,5 @@ export * from './subscription.model';
 export * from './key-token.model';
 export * from './client.model';
 export * from './sender-name.model';
+export * from './delivery.model';
 export * from './api-response.model';

webapp/src/app/core/models/message.model.ts

@@ -23,6 +23,7 @@ export interface MessageListParams {
   search?: string;
   sender?: string[];
   subscription_status?: 'all' | 'confirmed' | 'unconfirmed';
+  used_key?: string;
   trimmed?: boolean;
   page_size?: number;
   next_page_token?: string;

webapp/src/app/core/models/subscription.model.ts

@@ -6,6 +6,7 @@ export interface Subscription {
   channel_internal_name: string;
   timestamp_created: string;
   confirmed: boolean;
+  active: boolean;
 }
 
 export interface SubscriptionFilter {
@@ -25,7 +26,8 @@ export interface CreateSubscriptionRequest {
 }
 
 export interface ConfirmSubscriptionRequest {
-  confirmed: boolean;
+  confirmed?: boolean;
+  active?: boolean;
 }
 
 export interface SubscriptionListResponse {

webapp/src/app/core/services/api.service.ts

@@ -28,6 +28,7 @@ import {
   ClientListResponse,
   SenderNameStatistics,
   SenderNameListResponse,
+  DeliveryListResponse,
 } from '../models';
 
 @Injectable({
@@ -152,6 +153,7 @@ export class ApiService {
         }
       }
       if (params.subscription_status) httpParams = httpParams.set('subscription_status', params.subscription_status);
+      if (params.used_key) httpParams = httpParams.set('used_key', params.used_key);
       if (params.trimmed !== undefined) httpParams = httpParams.set('trimmed', params.trimmed);
       if (params.page_size) httpParams = httpParams.set('page_size', params.page_size);
       if (params.next_page_token) httpParams = httpParams.set('next_page_token', params.next_page_token);
@@ -167,6 +169,10 @@ export class ApiService {
     return this.http.delete<Message>(`${this.baseUrl}/messages/${messageId}`);
   }
 
+  getDeliveries(messageId: string): Observable<DeliveryListResponse> {
+    return this.http.get<DeliveryListResponse>(`${this.baseUrl}/messages/${messageId}/deliveries`);
+  }
+
   // Subscription endpoints
   getSubscriptions(userId: string, filter?: SubscriptionFilter): Observable<SubscriptionListResponse> {
     let httpParams = new HttpParams();

webapp/src/app/core/services/auth.service.ts

@@ -17,8 +17,8 @@ export class AuthService {
   }
 
   private loadFromStorage(): void {
-    const userId = sessionStorage.getItem(USER_ID_KEY);
-    const adminKey = sessionStorage.getItem(ADMIN_KEY_KEY);
+    const userId = localStorage.getItem(USER_ID_KEY);
+    const adminKey = localStorage.getItem(ADMIN_KEY_KEY);
     if (userId && adminKey) {
       this.userId.set(userId);
       this.adminKey.set(adminKey);
@@ -26,15 +26,15 @@ export class AuthService {
   }
 
   login(userId: string, adminKey: string): void {
-    sessionStorage.setItem(USER_ID_KEY, userId);
-    sessionStorage.setItem(ADMIN_KEY_KEY, adminKey);
+    localStorage.setItem(USER_ID_KEY, userId);
+    localStorage.setItem(ADMIN_KEY_KEY, adminKey);
     this.userId.set(userId);
     this.adminKey.set(adminKey);
   }
 
   logout(): void {
-    sessionStorage.removeItem(USER_ID_KEY);
-    sessionStorage.removeItem(ADMIN_KEY_KEY);
+    localStorage.removeItem(USER_ID_KEY);
+    localStorage.removeItem(ADMIN_KEY_KEY);
     this.userId.set(null);
     this.adminKey.set(null);
   }

webapp/src/app/core/services/key-cache.service.ts

@@ -0,0 +1,58 @@
+import { Injectable, inject } from '@angular/core';
+import { Observable, of, map, shareReplay, catchError } from 'rxjs';
+import { ApiService } from './api.service';
+import { AuthService } from './auth.service';
+import { KeyToken } from '../models';
+
+export interface ResolvedKey {
+  keyId: string;
+  name: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class KeyCacheService {
+  private apiService = inject(ApiService);
+  private authService = inject(AuthService);
+
+  private keysCache$: Observable<Map<string, KeyToken>> | null = null;
+
+  resolveKey(keyId: string): Observable<ResolvedKey> {
+    return this.getKeysMap().pipe(
+      map(keysMap => {
+        const key = keysMap.get(keyId);
+        return {
+          keyId,
+          name: key?.name || keyId
+        };
+      })
+    );
+  }
+
+  private getKeysMap(): Observable<Map<string, KeyToken>> {
+    const userId = this.authService.getUserId();
+    if (!userId) {
+      return of(new Map());
+    }
+
+    if (!this.keysCache$) {
+      this.keysCache$ = this.apiService.getKeys(userId).pipe(
+        map(response => {
+          const map = new Map<string, KeyToken>();
+          for (const key of response.keys) {
+            map.set(key.keytoken_id, key);
+          }
+          return map;
+        }),
+        catchError(() => of(new Map())),
+        shareReplay(1)
+      );
+    }
+    return this.keysCache$;
+  }
+
+  clearCache(): void {
+    this.keysCache$ = null;
+  }
+}

webapp/src/app/core/services/settings.service.ts

@@ -0,0 +1,30 @@
+import { Injectable, signal } from '@angular/core';
+
+const EXPERT_MODE_KEY = 'scn_expert_mode';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SettingsService {
+  private _expertMode = signal(false);
+
+  expertMode = this._expertMode.asReadonly();
+
+  constructor() {
+    this.loadFromStorage();
+  }
+
+  private loadFromStorage(): void {
+    const stored = localStorage.getItem(EXPERT_MODE_KEY);
+    this._expertMode.set(stored === 'true');
+  }
+
+  setExpertMode(enabled: boolean): void {
+    localStorage.setItem(EXPERT_MODE_KEY, String(enabled));
+    this._expertMode.set(enabled);
+  }
+
+  toggleExpertMode(): void {
+    this.setExpertMode(!this._expertMode());
+  }
+}

webapp/src/app/features/account/account-info/account-info.component.html

@@ -13,36 +13,36 @@
     </div>
   } @else if (user()) {
     <nz-card nzTitle="User Information">
-      <nz-descriptions nzBordered [nzColumn]="2">
-        <nz-descriptions-item nzTitle="User ID" [nzSpan]="2">
+      <scn-metadata-grid>
+        <scn-metadata-value label="User ID">
           <span class="mono">{{ user()!.user_id }}</span>
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Username">
+        </scn-metadata-value>
+        <scn-metadata-value label="Username">
           {{ user()!.username || '(Not set)' }}
           <button nz-button nzSize="small" nzType="link" (click)="openEditModal()">
             <span nz-icon nzType="edit"></span>
           </button>
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Account Type">
+        </scn-metadata-value>
+        <scn-metadata-value label="Account Type">
           @if (user()!.is_pro) {
             <nz-tag nzColor="gold">Pro</nz-tag>
           } @else {
             <nz-tag>Free</nz-tag>
           }
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Messages Sent">
+        </scn-metadata-value>
+        <scn-metadata-value label="Messages Sent">
           {{ user()!.messages_sent }}
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Created">
+        </scn-metadata-value>
+        <scn-metadata-value label="Created">
           {{ user()!.timestamp_created | relativeTime }}
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Last Read">
+        </scn-metadata-value>
+        <scn-metadata-value label="Last Read">
           {{ user()!.timestamp_lastread | relativeTime }}
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Last Sent">
+        </scn-metadata-value>
+        <scn-metadata-value label="Last Sent">
           {{ user()!.timestamp_lastsent | relativeTime }}
-        </nz-descriptions-item>
-      </nz-descriptions>
+        </scn-metadata-value>
+      </scn-metadata-grid>
     </nz-card>
 
     <nz-card nzTitle="Quota" class="mt-16">
@@ -62,22 +62,39 @@
 
       <nz-divider></nz-divider>
 
-      <nz-descriptions [nzColumn]="2" nzSize="small">
-        <nz-descriptions-item nzTitle="Max Body Size">
+      <scn-metadata-grid>
+        <scn-metadata-value label="Max Body Size">
           {{ user()!.max_body_size | number }} bytes
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Max Title Length">
+        </scn-metadata-value>
+        <scn-metadata-value label="Max Title Length">
           {{ user()!.max_title_length }} chars
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Default Channel">
+        </scn-metadata-value>
+        <scn-metadata-value label="Default Channel">
           {{ user()!.default_channel }}
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Default Priority">
+        </scn-metadata-value>
+        <scn-metadata-value label="Default Priority">
           {{ user()!.default_priority }}
-        </nz-descriptions-item>
-      </nz-descriptions>
+        </scn-metadata-value>
+      </scn-metadata-grid>
     </nz-card>
 
+    @if (expertMode()) {
+      <nz-card nzTitle="Danger Zone" class="mt-16 danger-zone">
+        <p class="danger-warning">Deleting your account is permanent and cannot be undone. All your data will be lost.</p>
+        <button
+          nz-button
+          nzDanger
+          nz-popconfirm
+          nzPopconfirmTitle="Are you sure you want to delete your account? This action cannot be undone."
+          (nzOnConfirm)="deleteAccount()"
+          [nzLoading]="deleting()"
+        >
+          <span nz-icon nzType="delete"></span>
+          Delete Account
+        </button>
+      </nz-card>
+    }
+
   }
 </div>
 

webapp/src/app/features/account/account-info/account-info.component.scss

@@ -43,3 +43,17 @@
     margin-bottom: 16px;
   }
 }
+
+.danger-zone {
+  border-color: #ff4d4f !important;
+
+  :host ::ng-deep .ant-card-head {
+    color: #ff4d4f;
+    border-bottom-color: #ff4d4f;
+  }
+
+  .danger-warning {
+    color: #666;
+    margin-bottom: 16px;
+  }
+}

webapp/src/app/features/account/account-info/account-info.component.ts

@@ -1,6 +1,7 @@
 import { Component, inject, signal, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
 import { NzCardModule } from 'ng-zorro-antd/card';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzIconModule } from 'ng-zorro-antd/icon';
@@ -12,11 +13,14 @@ import { NzModalModule } from 'ng-zorro-antd/modal';
 import { NzFormModule } from 'ng-zorro-antd/form';
 import { NzInputModule } from 'ng-zorro-antd/input';
 import { NzDividerModule } from 'ng-zorro-antd/divider';
+import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
 import { ApiService } from '../../../core/services/api.service';
 import { AuthService } from '../../../core/services/auth.service';
 import { NotificationService } from '../../../core/services/notification.service';
+import { SettingsService } from '../../../core/services/settings.service';
 import { UserWithExtra } from '../../../core/models';
 import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
+import { MetadataGridComponent, MetadataValueComponent } from '../../../shared/components/metadata-grid';
 
 @Component({
   selector: 'app-account-info',
@@ -35,7 +39,10 @@ import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
     NzFormModule,
     NzInputModule,
     NzDividerModule,
+    NzPopconfirmModule,
     RelativeTimePipe,
+    MetadataGridComponent,
+    MetadataValueComponent,
   ],
   templateUrl: './account-info.component.html',
   styleUrl: './account-info.component.scss'
@@ -44,9 +51,13 @@ export class AccountInfoComponent implements OnInit {
   private apiService = inject(ApiService);
   private authService = inject(AuthService);
   private notification = inject(NotificationService);
+  private settingsService = inject(SettingsService);
+  private router = inject(Router);
 
   user = signal<UserWithExtra | null>(null);
   loading = signal(true);
+  deleting = signal(false);
+  expertMode = this.settingsService.expertMode;
 
   // Edit username modal
   showEditModal = signal(false);
@@ -116,4 +127,21 @@ export class AccountInfoComponent implements OnInit {
       }
     });
   }
+
+  deleteAccount(): void {
+    const userId = this.authService.getUserId();
+    if (!userId) return;
+
+    this.deleting.set(true);
+    this.apiService.deleteUser(userId).subscribe({
+      next: () => {
+        this.notification.success('Account deleted');
+        this.authService.logout();
+        this.router.navigate(['/login']);
+      },
+      error: () => {
+        this.deleting.set(false);
+      }
+    });
+  }
 }

webapp/src/app/features/auth/login/login.component.html

@@ -14,59 +14,37 @@
       ></nz-alert>
     }
 
-    <form nz-form nzLayout="horizontal" (ngSubmit)="login()">
-      <nz-form-item>
-        <nz-form-label [nzSpan]="7">User ID</nz-form-label>
-        <nz-form-control [nzSpan]="17">
-          <nz-input-group nzPrefixIcon="user">
-            <input
-              type="text"
-              nz-input
-              placeholder="Enter your User ID"
-              [(ngModel)]="userId"
-              name="userId"
-              [disabled]="loading()"
-            />
-          </nz-input-group>
-        </nz-form-control>
-      </nz-form-item>
+    <div class="login-form">
+      <label for="userId">User ID</label>
+      <input
+        id="userId"
+        type="text"
+        nz-input
+        placeholder="Enter your User ID"
+        [(ngModel)]="userId"
+        [disabled]="loading()"
+      />
 
-      <nz-form-item>
-        <nz-form-label [nzSpan]="7">Admin Key</nz-form-label>
-        <nz-form-control [nzSpan]="17">
-          <nz-input-group nzPrefixIcon="key" [nzSuffix]="keySuffix">
-            <input
-              [type]="showKey() ? 'text' : 'password'"
-              nz-input
-              placeholder="Enter your Admin Key"
-              [(ngModel)]="adminKey"
-              name="adminKey"
-              [disabled]="loading()"
-            />
-          </nz-input-group>
-          <ng-template #keySuffix>
-            <span
-              nz-icon
-              [nzType]="showKey() ? 'eye' : 'eye-invisible'"
-              class="key-toggle"
-              (click)="toggleShowKey()"
-            ></span>
-          </ng-template>
-        </nz-form-control>
-      </nz-form-item>
+      <label for="adminKey">Admin Key</label>
+      <input
+        id="adminKey"
+        type="text"
+        nz-input
+        placeholder="Enter your Admin Key"
+        [(ngModel)]="adminKey"
+        [disabled]="loading()"
+      />
+    </div>
 
-      <nz-form-item class="mb-0">
-        <button
-          nz-button
-          nzType="primary"
-          nzBlock
-          type="submit"
-          [nzLoading]="loading()"
-        >
-          Sign In
-        </button>
-      </nz-form-item>
-    </form>
+    <button
+      nz-button
+      nzType="primary"
+      nzBlock
+      [nzLoading]="loading()"
+      (click)="login()"
+    >
+      Sign In
+    </button>
 
     <div class="login-footer">
       <p>You need an admin key to access.</p>

webapp/src/app/features/auth/login/login.component.scss

@@ -9,7 +9,7 @@
 
 .login-card {
   width: 100%;
-  max-width: 400px;
+  max-width: 650px;
   border-radius: 8px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
 }
@@ -38,13 +38,15 @@
   }
 }
 
-.key-toggle {
-  cursor: pointer;
-  color: #999;
-  transition: color 0.3s;
+.login-form {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 12px 16px;
+  align-items: center;
+  margin-bottom: 16px;
 
-  &:hover {
-    color: #1890ff;
+  label {
+    font-weight: 500;
   }
 }
 
@@ -58,7 +60,3 @@
     color: #999;
   }
 }
-
-nz-form-label {
-  font-weight: 500;
-}

webapp/src/app/features/auth/login/login.component.ts

@@ -2,13 +2,10 @@ import { Component, inject, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Router, ActivatedRoute } from '@angular/router';
 import { FormsModule } from '@angular/forms';
-import { NzFormModule } from 'ng-zorro-antd/form';
 import { NzInputModule } from 'ng-zorro-antd/input';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzCardModule } from 'ng-zorro-antd/card';
 import { NzAlertModule } from 'ng-zorro-antd/alert';
-import { NzIconModule } from 'ng-zorro-antd/icon';
-import { NzSpinModule } from 'ng-zorro-antd/spin';
 import { AuthService } from '../../../core/services/auth.service';
 import { ApiService } from '../../../core/services/api.service';
 import { isAdminKey } from '../../../core/models';
@@ -19,13 +16,10 @@ import { isAdminKey } from '../../../core/models';
   imports: [
     CommonModule,
     FormsModule,
-    NzFormModule,
     NzInputModule,
     NzButtonModule,
     NzCardModule,
     NzAlertModule,
-    NzIconModule,
-    NzSpinModule,
   ],
   templateUrl: './login.component.html',
   styleUrl: './login.component.scss'
@@ -40,7 +34,6 @@ export class LoginComponent {
   adminKey = '';
   loading = signal(false);
   error = signal<string | null>(null);
-  showKey = signal(false);
 
   async login(): Promise<void> {
     if (!this.userId.trim() || !this.adminKey.trim()) {
@@ -80,8 +73,4 @@ export class LoginComponent {
       }
     });
   }
-
-  toggleShowKey(): void {
-    this.showKey.update(v => !v);
-  }
 }

webapp/src/app/features/channels/channel-detail/channel-detail.component.html

@@ -15,141 +15,119 @@
             <span nz-icon nzType="edit"></span>
             Edit
           </button>
-          <button
-            nz-button
-            nzType="primary"
-            nzDanger
-            nz-popconfirm
-            nzPopconfirmTitle="Are you sure you want to delete this channel? All messages and subscriptions will be lost."
-            nzPopconfirmPlacement="bottomRight"
-            (nzOnConfirm)="deleteChannel()"
-            [nzLoading]="deleting()"
-          >
-            <span nz-icon nzType="delete"></span>
-            Delete
-          </button>
+          @if (expertMode()) {
+            <button
+              nz-button
+              nzDanger
+              nz-popconfirm
+              nzPopconfirmTitle="Are you sure you want to delete this channel? All messages and subscriptions will be lost."
+              (nzOnConfirm)="deleteChannel()"
+              [nzLoading]="deleting()"
+            >
+              <span nz-icon nzType="delete"></span>
+              Delete
+            </button>
+          }
         </div>
       }
     </div>
 
     <nz-card [nzTitle]="channel()!.display_name">
-      <nz-descriptions nzBordered [nzColumn]="2">
-        <nz-descriptions-item nzTitle="Channel ID" [nzSpan]="2">
+      <scn-metadata-grid>
+        <scn-metadata-value label="Channel ID">
           <span class="mono">{{ channel()!.channel_id }}</span>
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Internal Name">
+        </scn-metadata-value>
+        <scn-metadata-value label="Internal Name">
           <span class="mono">{{ channel()!.internal_name }}</span>
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Status">
+        </scn-metadata-value>
+        <scn-metadata-value label="Status">
           <nz-tag [nzColor]="getSubscriptionStatus().color">
             {{ getSubscriptionStatus().label }}
           </nz-tag>
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Owner" [nzSpan]="2">
+        </scn-metadata-value>
+        <scn-metadata-value label="Owner">
           <span class="mono">{{ channel()!.owner_user_id }}</span>
-        </nz-descriptions-item>
+        </scn-metadata-value>
         @if (channel()!.description_name) {
-          <nz-descriptions-item nzTitle="Description" [nzSpan]="2">
+          <scn-metadata-value label="Description">
             {{ channel()!.description_name }}
-          </nz-descriptions-item>
+          </scn-metadata-value>
         }
-        <nz-descriptions-item nzTitle="Messages Sent">
+        <scn-metadata-value label="Messages Sent">
           {{ channel()!.messages_sent }}
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Last Sent">
+        </scn-metadata-value>
+        <scn-metadata-value label="Last Sent">
           @if (channel()!.timestamp_lastsent) {
-            {{ channel()!.timestamp_lastsent | relativeTime }}
+            <div class="timestamp-absolute">{{ channel()!.timestamp_lastsent | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+            <div class="timestamp-relative">{{ channel()!.timestamp_lastsent | relativeTime }}</div>
           } @else {
             Never
           }
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Created" [nzSpan]="2">
-          {{ channel()!.timestamp_created }}
-        </nz-descriptions-item>
-      </nz-descriptions>
+        </scn-metadata-value>
+        <scn-metadata-value label="Created">
+          <div class="timestamp-absolute">{{ channel()!.timestamp_created | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+          <div class="timestamp-relative">{{ channel()!.timestamp_created | relativeTime }}</div>
+        </scn-metadata-value>
+        @if (isOwner() && channel()!.subscribe_key) {
+          <scn-metadata-value label="Subscribe Key">
+            <div class="key-field">
+              <nz-input-group [nzSuffix]="subscribeKeySuffix">
+                <input
+                  type="text"
+                  nz-input
+                  [value]="channel()!.subscribe_key"
+                  readonly
+                  class="mono"
+                />
+              </nz-input-group>
+              <ng-template #subscribeKeySuffix>
+                <span
+                  nz-icon
+                  nzType="copy"
+                  class="action-icon"
+                  nz-tooltip
+                  nzTooltipTitle="Copy"
+                  [appCopyToClipboard]="channel()!.subscribe_key!"
+                ></span>
+              </ng-template>
+              @if (expertMode()) {
+                <button
+                  nz-button
+                  nz-popconfirm
+                  nzPopconfirmTitle="Regenerate subscribe key? The existing key will no longer be valid."
+                  (nzOnConfirm)="regenerateSubscribeKey()"
+                >
+                  Invalidate & Regenerate
+                </button>
+              }
+            </div>
+          </scn-metadata-value>
+          <scn-metadata-value label="Subscribe QR">
+            <div class="qr-container">
+              <app-qr-code-display [data]="qrCodeData()"></app-qr-code-display>
+              <p class="qr-hint">Scan with the SimpleCloudNotifier app to subscribe</p>
+            </div>
+          </scn-metadata-value>
+        }
+      </scn-metadata-grid>
     </nz-card>
 
     @if (isOwner()) {
-      <nz-card nzTitle="Keys" class="mt-16">
-        @if (channel()!.subscribe_key) {
-          <div class="key-section">
-            <label>Subscribe Key</label>
-            <nz-input-group [nzSuffix]="subscribeKeySuffix">
-              <input
-                type="text"
-                nz-input
-                [value]="channel()!.subscribe_key"
-                readonly
-                class="mono"
-              />
-            </nz-input-group>
-            <ng-template #subscribeKeySuffix>
-              <span
-                nz-icon
-                nzType="copy"
-                class="action-icon"
-                nz-tooltip
-                nzTooltipTitle="Copy"
-                [appCopyToClipboard]="channel()!.subscribe_key!"
-              ></span>
-            </ng-template>
-            <div class="key-actions">
-              <button
-                nz-button
-                nzSize="small"
-                nz-popconfirm
-                nzPopconfirmTitle="Regenerate subscribe key? The existing key will no longer be valid."
-                (nzOnConfirm)="regenerateSubscribeKey()"
-              >
-                Invalidate & Regenerate
-              </button>
-            </div>
-            <div class="qr-section">
-              <app-qr-code-display [data]="qrCodeData()"></app-qr-code-display>
-              <p class="qr-hint">Scan this QR code with the SimpleCloudNotifier app to subscribe to this channel.</p>
-            </div>
-          </div>
+      <nz-card nzTitle="Subscriptions" [nzExtra]="subscriptionsCardExtra" class="mt-16">
+      <ng-template #subscriptionsCardExtra>
+        @if (expertMode()) {
+          <button
+            nz-button
+            nzSize="small"
+            [nzType]="isUserSubscribed() ? 'default' : 'primary'"
+            nz-tooltip
+            [nzTooltipTitle]="isUserSubscribed() ? 'Unsubscribe' : 'Subscribe'"
+            (click)="toggleSelfSubscription()"
+          >
+            <span nz-icon [nzType]="isUserSubscribed() ? 'user-delete' : 'user-add'"></span>
+          </button>
         }
-
-        @if (channel()!.send_key) {
-          <nz-divider></nz-divider>
-          <div class="key-section">
-            <label>Send Key</label>
-            <nz-input-group [nzSuffix]="sendKeySuffix">
-              <input
-                type="text"
-                nz-input
-                [value]="channel()!.send_key"
-                readonly
-                class="mono"
-              />
-            </nz-input-group>
-            <ng-template #sendKeySuffix>
-              <span
-                nz-icon
-                nzType="copy"
-                class="action-icon"
-                nz-tooltip
-                nzTooltipTitle="Copy"
-                [appCopyToClipboard]="channel()!.send_key!"
-              ></span>
-            </ng-template>
-            <div class="key-actions">
-              <button
-                nz-button
-                nzSize="small"
-                nz-popconfirm
-                nzPopconfirmTitle="Regenerate send key?"
-                (nzOnConfirm)="regenerateSendKey()"
-              >
-                Regenerate
-              </button>
-            </div>
-          </div>
-        }
-      </nz-card>
-
-      <nz-card nzTitle="Subscriptions" class="mt-16">
+      </ng-template>
         <nz-table
           #subscriptionTable
           [nzData]="subscriptions()"
@@ -162,26 +140,88 @@
           <thead>
             <tr>
               <th>Subscriber</th>
-              <th>Status</th>
-              <th>Created</th>
+              <th nzWidth="0">Status</th>
+              <th nzWidth="0">Active</th>
+              <th nzWidth="0">Created</th>
+              <th nzWidth="0">Actions</th>
             </tr>
           </thead>
           <tbody>
             @for (sub of subscriptions(); track sub.subscription_id) {
-              <tr>
+              <tr class="clickable-row">
                 <td>
-                  <span class="mono">{{ sub.subscriber_user_id }}</span>
+                  <a class="cell-link" [routerLink]="['/subscriptions', sub.subscription_id]">
+                    <div class="cell-name">{{ getUserDisplayName(sub.subscriber_user_id) }}</div>
+                    <div class="cell-id mono">{{ sub.subscriber_user_id }}</div>
+                  </a>
                 </td>
                 <td>
-                  <nz-tag [nzColor]="sub.confirmed ? 'green' : 'orange'">
-                    {{ sub.confirmed ? 'Confirmed' : 'Pending' }}
-                  </nz-tag>
+                  <a class="cell-link" [routerLink]="['/subscriptions', sub.subscription_id]">
+                    <nz-tag [nzColor]="sub.confirmed ? 'green' : 'orange'">
+                      {{ sub.confirmed ? 'Confirmed' : 'Pending' }}
+                    </nz-tag>
+                  </a>
+                </td>
+                <td>
+                  <a class="cell-link" [routerLink]="['/subscriptions', sub.subscription_id]">
+                    <nz-tag [nzColor]="sub.active ? 'green' : 'default'">
+                      {{ sub.active ? 'Active' : 'Inactive' }}
+                    </nz-tag>
+                  </a>
+                </td>
+                <td>
+                  <a class="cell-link" [routerLink]="['/subscriptions', sub.subscription_id]">
+                    <div class="timestamp-absolute">{{ sub.timestamp_created | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+                    <div class="timestamp-relative">{{ sub.timestamp_created | relativeTime }}</div>
+                  </a>
+                </td>
+                <td>
+                  <div class="action-buttons">
+                    @if (!sub.confirmed) {
+                      <button
+                        nz-button
+                        nzSize="small"
+                        nzType="primary"
+                        nz-tooltip
+                        nzTooltipTitle="Accept"
+                        (click)="acceptSubscription(sub)"
+                      >
+                        <span nz-icon nzType="check"></span>
+                      </button>
+                      <button
+                        nz-button
+                        nzSize="small"
+                        nzDanger
+                        nz-tooltip
+                        nzTooltipTitle="Deny"
+                        nz-popconfirm
+                        nzPopconfirmTitle="Deny this subscription request?"
+                        (nzOnConfirm)="denySubscription(sub)"
+                      >
+                        <span nz-icon nzType="close"></span>
+                      </button>
+                    } @else {
+                      @if (expertMode()) {
+                        <button
+                          nz-button
+                          nzSize="small"
+                          nzDanger
+                          nz-tooltip
+                          nzTooltipTitle="Revoke"
+                          nz-popconfirm
+                          nzPopconfirmTitle="Revoke this subscription?"
+                          (nzOnConfirm)="revokeSubscription(sub)"
+                        >
+                          <span nz-icon nzType="delete"></span>
+                        </button>
+                      }
+                    }
+                  </div>
                 </td>
-                <td>{{ sub.timestamp_created | relativeTime }}</td>
               </tr>
             } @empty {
               <tr>
-                <td colspan="3">
+                <td colspan="5">
                   <nz-empty nzNotFoundContent="No subscriptions"></nz-empty>
                 </td>
               </tr>
@@ -190,6 +230,84 @@
         </nz-table>
       </nz-card>
     }
+
+    <nz-card nzTitle="Messages" class="mt-16">
+      <nz-table
+        #messageTable
+        [nzData]="messages()"
+        [nzLoading]="loadingMessages()"
+        [nzShowPagination]="false"
+        [nzNoResult]="noMessagesResultTpl"
+        nzSize="small"
+      >
+        <ng-template #noMessagesResultTpl></ng-template>
+        <thead>
+          <tr>
+            <th>Title</th>
+            <th>Content</th>
+            <th nzWidth="0">Sender</th>
+            <th nzWidth="0">Priority</th>
+            <th nzWidth="0">Time</th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (message of messages(); track message.message_id) {
+            <tr class="clickable-row">
+              <td>
+                <a class="cell-link" [routerLink]="['/messages', message.message_id]">
+                  <div class="message-title">{{ message.title }}</div>
+                  <div class="message-id mono">{{ message.message_id }}</div>
+                </a>
+              </td>
+              <td>
+                <a class="cell-link" [routerLink]="['/messages', message.message_id]">
+                  @if (message.content) {
+                    <div class="message-content">{{ message.content | slice:0:128 }}{{ message.content.length > 128 ? '...' : '' }}</div>
+                  } @else {
+                    <span class="text-muted"></span>
+                  }
+                </a>
+              </td>
+              <td>
+                <a class="cell-link" [routerLink]="['/messages', message.message_id]">
+                  <span style="white-space: pre">{{ message.sender_name || '-' }}</span>
+                </a>
+              </td>
+              <td>
+                <a class="cell-link" [routerLink]="['/messages', message.message_id]">
+                  <nz-tag [nzColor]="getPriorityColor(message.priority)">
+                    {{ getPriorityLabel(message.priority) }}
+                  </nz-tag>
+                </a>
+              </td>
+              <td>
+                <a class="cell-link" [routerLink]="['/messages', message.message_id]">
+                  <div class="timestamp-absolute">{{ message.timestamp | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+                  <div class="timestamp-relative">{{ message.timestamp | relativeTime }}</div>
+                </a>
+              </td>
+            </tr>
+          } @empty {
+            <tr>
+              <td colspan="5">
+                <nz-empty nzNotFoundContent="No messages"></nz-empty>
+              </td>
+            </tr>
+          }
+        </tbody>
+      </nz-table>
+      @if (messagesTotalCount() > messagesPageSize) {
+        <div class="pagination-controls">
+          <nz-pagination
+            [nzPageIndex]="messagesCurrentPage()"
+            [nzPageSize]="messagesPageSize"
+            [nzTotal]="messagesTotalCount()"
+            [nzDisabled]="loadingMessages()"
+            (nzPageIndexChange)="messagesGoToPage($event)"
+          ></nz-pagination>
+        </div>
+      }
+    </nz-card>
   } @else {
     <nz-card>
       <div class="not-found">

webapp/src/app/features/channels/channel-detail/channel-detail.component.scss

@@ -10,17 +10,14 @@
   gap: 8px;
 }
 
-.key-section {
-  label {
-    display: block;
-    font-weight: 500;
-    margin-bottom: 8px;
-    color: #333;
-  }
+.key-field {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
 }
 
 .key-actions {
-  margin-top: 8px;
+  display: flex;
 }
 
 .action-icon {
@@ -44,28 +41,81 @@
   }
 }
 
-.qr-section {
-  margin-top: 16px;
-  padding-top: 16px;
-  border-top: 1px solid #f0f0f0;
-
-  label {
-    display: block;
-    font-weight: 500;
-    margin-bottom: 12px;
-    color: #333;
-  }
-
-  app-qr-code-display {
-    display: flex;
-    justify-content: center;
-  }
+.qr-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .qr-hint {
-  text-align: center;
   color: #666;
   font-size: 13px;
-  margin-top: 12px;
+  margin-top: 8px;
   margin-bottom: 0;
 }
+
+.cell-name {
+  font-weight: 500;
+  color: #333;
+}
+
+.cell-id {
+  font-size: 11px;
+  color: #999;
+  margin-top: 2px;
+}
+
+.timestamp-absolute {
+  font-size: 13px;
+  color: #333;
+  white-space: pre;
+}
+
+.timestamp-relative {
+  font-size: 12px;
+  color: #999;
+  white-space: pre;
+}
+
+.clickable-row {
+  cursor: pointer;
+
+  &:hover {
+    background-color: #fafafa;
+  }
+}
+
+.action-buttons {
+  display: flex;
+  gap: 4px;
+}
+
+.message-title {
+  font-weight: 500;
+  color: #333;
+}
+
+.message-id {
+  font-size: 11px;
+  color: #999;
+  margin-top: 2px;
+}
+
+.message-content {
+  font-size: 12px;
+  color: #666;
+  white-space: pre;
+  max-height: 2lh;
+  overflow-y: clip;
+}
+
+.text-muted {
+  color: #999;
+}
+
+.pagination-controls {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 16px 0;
+}

webapp/src/app/features/channels/channel-detail/channel-detail.component.ts

@@ -1,11 +1,10 @@
 import { Component, inject, signal, computed, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ActivatedRoute, Router } from '@angular/router';
+import { CommonModule, DatePipe } from '@angular/common';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 import { NzCardModule } from 'ng-zorro-antd/card';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzIconModule } from 'ng-zorro-antd/icon';
-import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
 import { NzTagModule } from 'ng-zorro-antd/tag';
 import { NzSpinModule } from 'ng-zorro-antd/spin';
 import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
@@ -16,24 +15,29 @@ import { NzFormModule } from 'ng-zorro-antd/form';
 import { NzTableModule } from 'ng-zorro-antd/table';
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 import { NzEmptyModule } from 'ng-zorro-antd/empty';
+import { NzPaginationModule } from 'ng-zorro-antd/pagination';
 import { ApiService } from '../../../core/services/api.service';
 import { AuthService } from '../../../core/services/auth.service';
 import { NotificationService } from '../../../core/services/notification.service';
-import { ChannelWithSubscription, Subscription } from '../../../core/models';
+import { SettingsService } from '../../../core/services/settings.service';
+import { UserCacheService, ResolvedUser } from '../../../core/services/user-cache.service';
+import { ChannelWithSubscription, Subscription, Message } from '../../../core/models';
 import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
 import { CopyToClipboardDirective } from '../../../shared/directives/copy-to-clipboard.directive';
 import { QrCodeDisplayComponent } from '../../../shared/components/qr-code-display/qr-code-display.component';
+import { MetadataGridComponent, MetadataValueComponent } from '../../../shared/components/metadata-grid';
 
 @Component({
   selector: 'app-channel-detail',
   standalone: true,
   imports: [
     CommonModule,
+    DatePipe,
     FormsModule,
+    RouterLink,
     NzCardModule,
     NzButtonModule,
     NzIconModule,
-    NzDescriptionsModule,
     NzTagModule,
     NzSpinModule,
     NzPopconfirmModule,
@@ -44,9 +48,12 @@ import { QrCodeDisplayComponent } from '../../../shared/components/qr-code-displ
     NzTableModule,
     NzToolTipModule,
     NzEmptyModule,
+    NzPaginationModule,
     RelativeTimePipe,
     CopyToClipboardDirective,
     QrCodeDisplayComponent,
+    MetadataGridComponent,
+    MetadataValueComponent,
   ],
   templateUrl: './channel-detail.component.html',
   styleUrl: './channel-detail.component.scss'
@@ -57,13 +64,24 @@ export class ChannelDetailComponent implements OnInit {
   private apiService = inject(ApiService);
   private authService = inject(AuthService);
   private notification = inject(NotificationService);
+  private settingsService = inject(SettingsService);
+  private userCacheService = inject(UserCacheService);
 
   channel = signal<ChannelWithSubscription | null>(null);
   subscriptions = signal<Subscription[]>([]);
+  messages = signal<Message[]>([]);
+  userNames = signal<Map<string, ResolvedUser>>(new Map());
   loading = signal(true);
   loadingSubscriptions = signal(false);
+  loadingMessages = signal(false);
   deleting = signal(false);
+  expertMode = this.settingsService.expertMode;
 
+  // Messages pagination
+  messagesPageSize = 16;
+  messagesNextPageToken = signal<string | null>(null);
+  messagesTotalCount = signal(0);
+  messagesCurrentPage = signal(1);
   // Edit modal
   showEditModal = signal(false);
   editDisplayName = '';
@@ -104,6 +122,7 @@ export class ChannelDetailComponent implements OnInit {
         if (this.isOwner()) {
           this.loadSubscriptions(channelId);
         }
+        this.loadMessages(channelId);
       },
       error: () => {
         this.loading.set(false);
@@ -120,6 +139,7 @@ export class ChannelDetailComponent implements OnInit {
       next: (response) => {
         this.subscriptions.set(response.subscriptions);
         this.loadingSubscriptions.set(false);
+        this.resolveUserNames(response.subscriptions);
       },
       error: () => {
         this.loadingSubscriptions.set(false);
@@ -127,6 +147,86 @@ export class ChannelDetailComponent implements OnInit {
     });
   }
 
+  loadMessages(channelId: string, nextPageToken?: string): void {
+    const userId = this.authService.getUserId();
+    if (!userId) return;
+
+    this.loadingMessages.set(true);
+    this.apiService.getChannelMessages(userId, channelId, {
+      page_size: this.messagesPageSize,
+      next_page_token: nextPageToken,
+      trimmed: true
+    }).subscribe({
+      next: (response) => {
+        this.messages.set(response.messages);
+        this.messagesNextPageToken.set(response.next_page_token || null);
+        this.messagesTotalCount.set(response.total_count);
+        this.loadingMessages.set(false);
+      },
+      error: () => {
+        this.loadingMessages.set(false);
+      }
+    });
+  }
+
+  messagesGoToPage(page: number): void {
+    const channel = this.channel();
+    if (!channel) return;
+
+    this.messagesCurrentPage.set(page);
+    // For pagination with tokens, we need to handle this differently
+    // The API uses next_page_token, so we'll reload from the beginning for now
+    // In a real implementation, you'd need to track tokens per page or use offset-based pagination
+    if (page === 1) {
+      this.loadMessages(channel.channel_id);
+    } else {
+      // For simplicity, use the next page token if going forward
+      const token = this.messagesNextPageToken();
+      if (token) {
+        this.loadMessages(channel.channel_id, token);
+      }
+    }
+  }
+
+  viewMessage(message: Message): void {
+    this.router.navigate(['/messages', message.message_id]);
+  }
+
+  getPriorityColor(priority: number): string {
+    switch (priority) {
+      case 0: return 'default';
+      case 1: return 'blue';
+      case 2: return 'orange';
+      default: return 'default';
+    }
+  }
+
+  getPriorityLabel(priority: number): string {
+    switch (priority) {
+      case 0: return 'Low';
+      case 1: return 'Normal';
+      case 2: return 'High';
+      default: return 'Unknown';
+    }
+  }
+
+  private resolveUserNames(subscriptions: Subscription[]): void {
+    const userIds = new Set<string>();
+    for (const sub of subscriptions) {
+      userIds.add(sub.subscriber_user_id);
+    }
+    for (const id of userIds) {
+      this.userCacheService.resolveUser(id).subscribe(resolved => {
+        this.userNames.update(map => new Map(map).set(id, resolved));
+      });
+    }
+  }
+
+  getUserDisplayName(userId: string): string {
+    const resolved = this.userNames().get(userId);
+    return resolved?.displayName || userId;
+  }
+
   goBack(): void {
     this.router.navigate(['/channels']);
   }
@@ -173,24 +273,6 @@ export class ChannelDetailComponent implements OnInit {
     });
   }
 
-  // Delete channel
-  deleteChannel(): void {
-    const channel = this.channel();
-    const userId = this.authService.getUserId();
-    if (!channel || !userId) return;
-
-    this.deleting.set(true);
-    this.apiService.deleteChannel(userId, channel.channel_id).subscribe({
-      next: () => {
-        this.notification.success('Channel deleted');
-        this.router.navigate(['/channels']);
-      },
-      error: () => {
-        this.deleting.set(false);
-      }
-    });
-  }
-
   // Regenerate keys
   regenerateSubscribeKey(): void {
     const channel = this.channel();
@@ -198,7 +280,7 @@ export class ChannelDetailComponent implements OnInit {
     if (!channel || !userId) return;
 
     this.apiService.updateChannel(userId, channel.channel_id, {
-      subscribe_key: 'true'
+      subscribe_key: true
     }).subscribe({
       next: (updated) => {
         this.channel.set(updated);
@@ -207,21 +289,6 @@ export class ChannelDetailComponent implements OnInit {
     });
   }
 
-  regenerateSendKey(): void {
-    const channel = this.channel();
-    const userId = this.authService.getUserId();
-    if (!channel || !userId) return;
-
-    this.apiService.updateChannel(userId, channel.channel_id, {
-      send_key: 'true'
-    }).subscribe({
-      next: (updated) => {
-        this.channel.set(updated);
-        this.notification.success('Send key regenerated');
-      }
-    });
-  }
-
   getSubscriptionStatus(): { label: string; color: string } {
     const channel = this.channel();
     if (!channel) return { label: 'Unknown', color: 'default' };
@@ -242,4 +309,99 @@ export class ChannelDetailComponent implements OnInit {
 
     return { label: 'Not Subscribed', color: 'default' };
   }
+
+  deleteChannel(): void {
+    const channel = this.channel();
+    const userId = this.authService.getUserId();
+    if (!channel || !userId) return;
+
+    this.deleting.set(true);
+    this.apiService.deleteChannel(userId, channel.channel_id).subscribe({
+      next: () => {
+        this.notification.success('Channel deleted');
+        this.router.navigate(['/channels']);
+      },
+      error: () => {
+        this.deleting.set(false);
+      }
+    });
+  }
+
+  viewSubscription(sub: Subscription): void {
+    this.router.navigate(['/subscriptions', sub.subscription_id]);
+  }
+
+  acceptSubscription(sub: Subscription): void {
+    const userId = this.authService.getUserId();
+    if (!userId) return;
+
+    this.apiService.confirmSubscription(userId, sub.subscription_id, { confirmed: true }).subscribe({
+      next: () => {
+        this.notification.success('Subscription accepted');
+        const channel = this.channel();
+        if (channel) {
+          this.loadSubscriptions(channel.channel_id);
+        }
+      }
+    });
+  }
+
+  denySubscription(sub: Subscription): void {
+    const userId = this.authService.getUserId();
+    if (!userId) return;
+
+    this.apiService.deleteSubscription(userId, sub.subscription_id).subscribe({
+      next: () => {
+        this.notification.success('Subscription denied');
+        const channel = this.channel();
+        if (channel) {
+          this.loadSubscriptions(channel.channel_id);
+        }
+      }
+    });
+  }
+
+  revokeSubscription(sub: Subscription): void {
+    const userId = this.authService.getUserId();
+    if (!userId) return;
+
+    this.apiService.deleteSubscription(userId, sub.subscription_id).subscribe({
+      next: () => {
+        this.notification.success('Subscription revoked');
+        const channel = this.channel();
+        if (channel) {
+          this.loadSubscriptions(channel.channel_id);
+        }
+      }
+    });
+  }
+
+  isUserSubscribed(): boolean {
+    return this.channel()?.subscription !== null;
+  }
+
+  toggleSelfSubscription(): void {
+    const channel = this.channel();
+    const userId = this.authService.getUserId();
+    if (!channel || !userId) return;
+
+    if (this.isUserSubscribed()) {
+      // Unsubscribe
+      const subscriptionId = channel.subscription!.subscription_id;
+      this.apiService.deleteSubscription(userId, subscriptionId).subscribe({
+        next: () => {
+          this.notification.success('Unsubscribed from channel');
+          this.loadChannel(channel.channel_id);
+        }
+      });
+    } else {
+      // Subscribe
+      this.apiService.createSubscription(userId, { channel_id: channel.channel_id }).subscribe({
+        next: () => {
+          this.notification.success('Subscribed to channel');
+          this.loadChannel(channel.channel_id);
+        }
+      });
+    }
+  }
 }

webapp/src/app/features/channels/channel-list/channel-list.component.html

@@ -9,6 +9,21 @@
     </div>
   </div>
 
+  <nz-tabset (nzSelectedIndexChange)="onTabChange($event)">
+    <nz-tab nzTitle="All"></nz-tab>
+    <nz-tab nzTitle="Owned"></nz-tab>
+    <nz-tab nzTitle="Foreign"></nz-tab>
+  </nz-tabset>
+
+  @if (getTabDescription()) {
+    <nz-alert
+      nzType="info"
+      [nzMessage]="getTabDescription()!"
+      nzShowIcon
+      style="margin-bottom: 16px;"
+    ></nz-alert>
+  }
+
   <nz-card>
     <nz-table
       #channelTable
@@ -21,46 +36,122 @@
     <ng-template #noResultTpl></ng-template>
       <thead>
         <tr>
-          <th nzWidth="20%">Name</th>
-          <th nzWidth="15%">Internal Name</th>
-          <th nzWidth="15%">Owner</th>
-          <th nzWidth="15%">Status</th>
-          <th nzWidth="15%">Messages</th>
-          <th nzWidth="20%">Last Sent</th>
+          <th style="width: auto">Name</th>
+          <th style="width: auto">Internal Name</th>
+          <th style="width: auto">Owner</th>
+          <th style="width: 0">Status</th>
+          <th style="width: 400px">Subscribers</th>
+          <th style="width: 0">Messages</th>
+          <th style="width: 0">Last Sent</th>
+          @if (expertMode()) {
+            <th style="width: 0">Actions</th>
+          }
         </tr>
       </thead>
       <tbody>
         @for (channel of channels(); track channel.channel_id) {
-          <tr class="clickable-row" (click)="viewChannel(channel)">
+          <tr [class.clickable-row]="isOwned(channel)">
             <td>
-              <div class="channel-name">{{ channel.display_name }}</div>
-              @if (channel.description_name) {
-                <div class="channel-description">{{ channel.description_name }}</div>
-              }
-            </td>
-            <td>
-              <span class="mono">{{ channel.internal_name }}</span>
-            </td>
-            <td>{{ getOwnerDisplayName(channel.owner_user_id) }}</td>
-            <td>
-              <nz-tag [nzColor]="getSubscriptionStatus(channel).color">
-                {{ getSubscriptionStatus(channel).label }}
-              </nz-tag>
-            </td>
-            <td>{{ channel.messages_sent }}</td>
-            <td>
-              @if (channel.timestamp_lastsent) {
-                <span nz-tooltip [nzTooltipTitle]="channel.timestamp_lastsent">
-                  {{ channel.timestamp_lastsent | relativeTime }}
-                </span>
+              @if (isOwned(channel)) {
+                <a class="cell-link" [routerLink]="['/channels', channel.channel_id]">
+                  <div class="channel-name">{{ channel.display_name }}</div>
+                  <div class="channel-id mono">{{ channel.channel_id }}</div>
+                </a>
               } @else {
-                <span class="text-muted">Never</span>
+                <div class="channel-name">{{ channel.display_name }}</div>
+                <div class="channel-id mono">{{ channel.channel_id }}</div>
               }
             </td>
+            <td>
+              @if (isOwned(channel)) {
+                <a class="cell-link" [routerLink]="['/channels', channel.channel_id]">
+                  <span class="mono">{{ channel.internal_name }}</span>
+                </a>
+              } @else {
+                <span class="mono">{{ channel.internal_name }}</span>
+              }
+            </td>
+            <td>
+              @if (isOwned(channel)) {
+                <a class="cell-link" [routerLink]="['/channels', channel.channel_id]">
+                  <div class="channel-name">{{ getOwnerDisplayName(channel.owner_user_id) }}</div>
+                  <div class="channel-id mono">{{ channel.owner_user_id }}</div>
+                </a>
+              } @else {
+                <div class="channel-name">{{ getOwnerDisplayName(channel.owner_user_id) }}</div>
+                <div class="channel-id mono">{{ channel.owner_user_id }}</div>
+              }
+            </td>
+            <td>
+              @if (isOwned(channel)) {
+                <a class="cell-link" [routerLink]="['/channels', channel.channel_id]">
+                  <nz-tag [nzColor]="getSubscriptionStatus(channel).color">
+                    {{ getSubscriptionStatus(channel).label }}
+                  </nz-tag>
+                </a>
+              } @else {
+                <nz-tag [nzColor]="getSubscriptionStatus(channel).color">
+                  {{ getSubscriptionStatus(channel).label }}
+                </nz-tag>
+              }
+            </td>
+            <td>
+              @if (isOwned(channel)) {
+                <a class="cell-link" [routerLink]="['/channels', channel.channel_id]">
+                  <app-channel-subscribers [channelId]="channel.channel_id" />
+                </a>
+              } @else {
+                <span class="text-muted">-</span>
+              }
+            </td>
+            <td>
+              @if (isOwned(channel)) {
+                <a class="cell-link" [routerLink]="['/channels', channel.channel_id]">
+                  {{ channel.messages_sent }}
+                </a>
+              } @else {
+                {{ channel.messages_sent }}
+              }
+            </td>
+            <td>
+              @if (isOwned(channel)) {
+                <a class="cell-link" [routerLink]="['/channels', channel.channel_id]">
+                  @if (channel.timestamp_lastsent) {
+                    <div class="timestamp-absolute">{{ channel.timestamp_lastsent | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+                    <div class="timestamp-relative">{{ channel.timestamp_lastsent | relativeTime }}</div>
+                  } @else {
+                    <span class="text-muted">Never</span>
+                  }
+                </a>
+              } @else {
+                @if (channel.timestamp_lastsent) {
+                  <div class="timestamp-absolute">{{ channel.timestamp_lastsent | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+                  <div class="timestamp-relative">{{ channel.timestamp_lastsent | relativeTime }}</div>
+                } @else {
+                  <span class="text-muted">Never</span>
+                }
+              }
+            </td>
+            @if (expertMode()) {
+              <td>
+                @if (isOwned(channel)) {
+                  <button
+                    nz-button
+                    nzSize="small"
+                    [nzType]="channel.subscription ? 'default' : 'primary'"
+                    nz-tooltip
+                    [nzTooltipTitle]="channel.subscription ? 'Unsubscribe' : 'Subscribe'"
+                    (click)="toggleSelfSubscription(channel, $event)"
+                  >
+                    <span nz-icon [nzType]="channel.subscription ? 'user-delete' : 'user-add'"></span>
+                  </button>
+                }
+              </td>
+            }
           </tr>
         } @empty {
           <tr>
-            <td colspan="6">
+            <td [attr.colspan]="expertMode() ? 8 : 7">
               <nz-empty nzNotFoundContent="No channels found"></nz-empty>
             </td>
           </tr>

webapp/src/app/features/channels/channel-list/channel-list.component.scss

@@ -23,12 +23,32 @@
   color: #333;
 }
 
-.channel-description {
-  font-size: 12px;
+.channel-id {
+  font-size: 11px;
   color: #999;
-  margin-top: 4px;
+  margin-top: 2px;
 }
 
 .text-muted {
   color: #999;
 }
+
+.timestamp-absolute {
+  font-size: 13px;
+  color: #333;
+  white-space: pre;
+}
+
+.timestamp-relative {
+  font-size: 12px;
+  color: #999;
+  white-space: pre;
+}
+
+.clickable-row {
+  cursor: pointer;
+
+  &:hover {
+    background-color: #fafafa;
+  }
+}

webapp/src/app/features/channels/channel-list/channel-list.component.ts

@@ -1,6 +1,6 @@
-import { Component, inject, signal, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { Router } from '@angular/router';
+import { Component, inject, signal, computed, OnInit } from '@angular/core';
+import { CommonModule, DatePipe } from '@angular/common';
+import { Router, RouterLink } from '@angular/router';
 import { NzTableModule } from 'ng-zorro-antd/table';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzIconModule } from 'ng-zorro-antd/icon';
@@ -9,17 +9,26 @@ import { NzBadgeModule } from 'ng-zorro-antd/badge';
 import { NzEmptyModule } from 'ng-zorro-antd/empty';
 import { NzCardModule } from 'ng-zorro-antd/card';
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
+import { NzTabsModule } from 'ng-zorro-antd/tabs';
+import { NzAlertModule } from 'ng-zorro-antd/alert';
 import { ApiService } from '../../../core/services/api.service';
 import { AuthService } from '../../../core/services/auth.service';
+import { NotificationService } from '../../../core/services/notification.service';
+import { SettingsService } from '../../../core/services/settings.service';
 import { UserCacheService, ResolvedUser } from '../../../core/services/user-cache.service';
 import { ChannelWithSubscription } from '../../../core/models';
 import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
+import { ChannelSubscribersComponent } from '../channel-subscribers/channel-subscribers.component';
+
+type ChannelTab = 'all' | 'owned' | 'foreign';
 
 @Component({
   selector: 'app-channel-list',
   standalone: true,
   imports: [
     CommonModule,
+    DatePipe,
+    RouterLink,
     NzTableModule,
     NzButtonModule,
     NzIconModule,
@@ -28,7 +37,10 @@ import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
     NzEmptyModule,
     NzCardModule,
     NzToolTipModule,
+    NzTabsModule,
+    NzAlertModule,
     RelativeTimePipe,
+    ChannelSubscribersComponent,
   ],
   templateUrl: './channel-list.component.html',
   styleUrl: './channel-list.component.scss'
@@ -36,12 +48,31 @@ import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
 export class ChannelListComponent implements OnInit {
   private apiService = inject(ApiService);
   private authService = inject(AuthService);
+  private notification = inject(NotificationService);
+  private settingsService = inject(SettingsService);
   private userCacheService = inject(UserCacheService);
   private router = inject(Router);
 
-  channels = signal<ChannelWithSubscription[]>([]);
+  allChannels = signal<ChannelWithSubscription[]>([]);
   ownerNames = signal<Map<string, ResolvedUser>>(new Map());
   loading = signal(false);
+  expertMode = this.settingsService.expertMode;
+  activeTab = signal<ChannelTab>('all');
+
+  channels = computed(() => {
+    const userId = this.authService.getUserId();
+    const all = this.allChannels();
+    const tab = this.activeTab();
+
+    switch (tab) {
+      case 'owned':
+        return all.filter(c => c.owner_user_id === userId);
+      case 'foreign':
+        return all.filter(c => c.owner_user_id !== userId);
+      default:
+        return all;
+    }
+  });
 
   ngOnInit(): void {
     this.loadChannels();
@@ -54,7 +85,7 @@ export class ChannelListComponent implements OnInit {
     this.loading.set(true);
     this.apiService.getChannels(userId, 'all_any').subscribe({
       next: (response) => {
-        this.channels.set(response.channels);
+        this.allChannels.set(response.channels);
         this.loading.set(false);
         this.resolveOwnerNames(response.channels);
       },
@@ -64,6 +95,22 @@ export class ChannelListComponent implements OnInit {
     });
   }
 
+  onTabChange(index: number): void {
+    const tabs: ChannelTab[] = ['all', 'owned', 'foreign'];
+    this.activeTab.set(tabs[index]);
+  }
+
+  getTabDescription(): string | null {
+    switch (this.activeTab()) {
+      case 'owned':
+        return 'Channels that you own and can configure.';
+      case 'foreign':
+        return 'Channels owned by other users that you are subscribed to.';
+      default:
+        return null;
+    }
+  }
+
   private resolveOwnerNames(channels: ChannelWithSubscription[]): void {
     const uniqueOwnerIds = [...new Set(channels.map(c => c.owner_user_id))];
     for (const ownerId of uniqueOwnerIds) {
@@ -78,6 +125,10 @@ export class ChannelListComponent implements OnInit {
     return resolved?.displayName || ownerId;
   }
 
+  isOwned(channel: ChannelWithSubscription): boolean {
+    return channel.owner_user_id === this.authService.getUserId();
+  }
+
   viewChannel(channel: ChannelWithSubscription): void {
     this.router.navigate(['/channels', channel.channel_id]);
   }
@@ -101,4 +152,28 @@ export class ChannelListComponent implements OnInit {
 
     return { label: 'Not Subscribed', color: 'default' };
   }
+
+  toggleSelfSubscription(channel: ChannelWithSubscription, event: Event): void {
+    event.stopPropagation();
+    const userId = this.authService.getUserId();
+    if (!userId) return;
+
+    if (channel.subscription) {
+      // Unsubscribe
+      this.apiService.deleteSubscription(userId, channel.subscription.subscription_id).subscribe({
+        next: () => {
+          this.notification.success('Unsubscribed from channel');
+          this.loadChannels();
+        }
+      });
+    } else {
+      // Subscribe
+      this.apiService.createSubscription(userId, { channel_id: channel.channel_id }).subscribe({
+        next: () => {
+          this.notification.success('Subscribed to channel');
+          this.loadChannels();
+        }
+      });
+    }
+  }
 }

webapp/src/app/features/channels/channel-subscribers/channel-subscribers.component.ts

@@ -0,0 +1,107 @@
+import { Component, inject, input, signal, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NzSpinModule } from 'ng-zorro-antd/spin';
+import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
+import { ApiService } from '../../../core/services/api.service';
+import { AuthService } from '../../../core/services/auth.service';
+import { UserCacheService, ResolvedUser } from '../../../core/services/user-cache.service';
+import { Subscription } from '../../../core/models';
+
+@Component({
+  selector: 'app-channel-subscribers',
+  standalone: true,
+  imports: [CommonModule, NzSpinModule, NzToolTipModule],
+  template: `
+    @if (loading()) {
+      <nz-spin nzSimple nzSize="small"></nz-spin>
+    } @else if (subscribers().length === 0) {
+      <span class="text-muted">None</span>
+    } @else {
+      <div class="subscribers-list">
+        @for (sub of subscribers(); track sub.subscription_id) {
+          <span
+            class="subscriber"
+            [class.unconfirmed]="!sub.confirmed"
+            nz-tooltip
+            [nzTooltipTitle]="getTooltip(sub)"
+          >
+            {{ getDisplayName(sub.subscriber_user_id) }}
+          </span>
+        }
+      </div>
+    }
+  `,
+  styles: [`
+    .text-muted {
+      color: #999;
+    }
+    .subscribers-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+    }
+    .subscriber {
+      background: #f0f0f0;
+      padding: 2px 8px;
+      border-radius: 4px;
+      font-size: 12px;
+    }
+    .subscriber.unconfirmed {
+      background: #fff7e6;
+      color: #d48806;
+    }
+  `]
+})
+export class ChannelSubscribersComponent implements OnInit {
+  private apiService = inject(ApiService);
+  private authService = inject(AuthService);
+  private userCacheService = inject(UserCacheService);
+
+  channelId = input.required<string>();
+
+  loading = signal(true);
+  subscribers = signal<Subscription[]>([]);
+  userNames = signal<Map<string, ResolvedUser>>(new Map());
+
+  ngOnInit(): void {
+    this.loadSubscribers();
+  }
+
+  private loadSubscribers(): void {
+    const userId = this.authService.getUserId();
+    if (!userId) {
+      this.loading.set(false);
+      return;
+    }
+
+    this.apiService.getChannelSubscriptions(userId, this.channelId()).subscribe({
+      next: (response) => {
+        this.subscribers.set(response.subscriptions);
+        this.loading.set(false);
+        this.resolveUserNames(response.subscriptions);
+      },
+      error: () => {
+        this.loading.set(false);
+      }
+    });
+  }
+
+  private resolveUserNames(subscriptions: Subscription[]): void {
+    const userIds = new Set(subscriptions.map(s => s.subscriber_user_id));
+    for (const userId of userIds) {
+      this.userCacheService.resolveUser(userId).subscribe(resolved => {
+        this.userNames.update(map => new Map(map).set(userId, resolved));
+      });
+    }
+  }
+
+  getDisplayName(userId: string): string {
+    const resolved = this.userNames().get(userId);
+    return resolved?.displayName || userId;
+  }
+
+  getTooltip(sub: Subscription): string {
+    const status = sub.confirmed ? 'Confirmed' : 'Pending';
+    return `${sub.subscriber_user_id} (${status})`;
+  }
+}

webapp/src/app/features/clients/client-detail/client-detail.component.html

@@ -0,0 +1,74 @@
+<div class="page-content">
+  @if (loading()) {
+    <div class="loading-container">
+      <nz-spin nzSimple nzSize="large"></nz-spin>
+    </div>
+  } @else if (client()) {
+    <div class="detail-header">
+      <button nz-button (click)="goBack()">
+        <span nz-icon nzType="arrow-left" nzTheme="outline"></span>
+        Back to Clients
+      </button>
+      @if (expertMode()) {
+        <div class="header-actions">
+          <button
+            nz-button
+            nzDanger
+            nz-popconfirm
+            nzPopconfirmTitle="Are you sure you want to delete this client?"
+            (nzOnConfirm)="deleteClient()"
+          >
+            <span nz-icon nzType="delete"></span>
+            Delete
+          </button>
+        </div>
+      }
+    </div>
+
+    <nz-card>
+      <div class="client-header">
+        <span
+          nz-icon
+          [nzType]="getClientIcon(client()!.type)"
+          nzTheme="outline"
+          class="client-type-icon"
+        ></span>
+        <h2 class="client-title">{{ client()!.name || 'Unnamed Client' }}</h2>
+        <nz-tag>{{ getClientTypeLabel(client()!.type) }}</nz-tag>
+      </div>
+
+      <scn-metadata-grid>
+        <scn-metadata-value label="Client ID">
+          <span class="mono">{{ client()!.client_id }}</span>
+        </scn-metadata-value>
+        <scn-metadata-value label="Type">
+          <nz-tag>{{ getClientTypeLabel(client()!.type) }}</nz-tag>
+        </scn-metadata-value>
+        <scn-metadata-value label="Agent">
+          <div class="agent-info">
+            <span>{{ client()!.agent_model }}</span>
+            <span class="agent-version">v{{ client()!.agent_version }}</span>
+          </div>
+        </scn-metadata-value>
+        <scn-metadata-value label="Created">
+          <div class="timestamp-absolute">{{ client()!.timestamp_created | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+          <div class="timestamp-relative">{{ client()!.timestamp_created | relativeTime }}</div>
+        </scn-metadata-value>
+        <scn-metadata-value label="FCM Token">
+          <span class="mono fcm-token" nz-tooltip [nzTooltipTitle]="client()!.fcm_token">
+            {{ client()!.fcm_token }}
+          </span>
+        </scn-metadata-value>
+      </scn-metadata-grid>
+    </nz-card>
+  } @else {
+    <nz-card>
+      <div class="not-found">
+        <p>Client not found</p>
+        <button nz-button nzType="primary" (click)="goBack()">
+          Back to Clients
+        </button>
+      </div>
+    </nz-card>
+  }
+</div>

webapp/src/app/features/clients/client-detail/client-detail.component.scss

@@ -0,0 +1,69 @@
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 300px;
+}
+
+.header-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.client-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.client-type-icon {
+  font-size: 24px;
+  color: #666;
+}
+
+.client-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.agent-info {
+  display: flex;
+  flex-direction: column;
+
+  .agent-version {
+    font-size: 12px;
+    color: #999;
+  }
+}
+
+.fcm-token {
+  display: block;
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.not-found {
+  text-align: center;
+  padding: 48px;
+
+  p {
+    color: #999;
+    margin-bottom: 16px;
+  }
+}
+
+.timestamp-absolute {
+  font-size: 13px;
+  color: #333;
+  white-space: pre;
+}
+
+.timestamp-relative {
+  font-size: 12px;
+  color: #999;
+  white-space: pre;
+}

webapp/src/app/features/clients/client-detail/client-detail.component.ts

@@ -0,0 +1,105 @@
+import { Component, inject, signal, OnInit } from '@angular/core';
+import { CommonModule, DatePipe } from '@angular/common';
+import { ActivatedRoute, Router } from '@angular/router';
+import { NzCardModule } from 'ng-zorro-antd/card';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzTagModule } from 'ng-zorro-antd/tag';
+import { NzSpinModule } from 'ng-zorro-antd/spin';
+import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
+import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
+import { ApiService } from '../../../core/services/api.service';
+import { AuthService } from '../../../core/services/auth.service';
+import { NotificationService } from '../../../core/services/notification.service';
+import { SettingsService } from '../../../core/services/settings.service';
+import { Client, ClientType, getClientTypeIcon } from '../../../core/models';
+import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
+import { MetadataGridComponent, MetadataValueComponent } from '../../../shared/components/metadata-grid';
+
+@Component({
+  selector: 'app-client-detail',
+  standalone: true,
+  imports: [
+    CommonModule,
+    DatePipe,
+    NzCardModule,
+    NzButtonModule,
+    NzIconModule,
+    NzTagModule,
+    NzSpinModule,
+    NzPopconfirmModule,
+    NzToolTipModule,
+    RelativeTimePipe,
+    MetadataGridComponent,
+    MetadataValueComponent,
+  ],
+  templateUrl: './client-detail.component.html',
+  styleUrl: './client-detail.component.scss'
+})
+export class ClientDetailComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private apiService = inject(ApiService);
+  private authService = inject(AuthService);
+  private notification = inject(NotificationService);
+  private settingsService = inject(SettingsService);
+
+  client = signal<Client | null>(null);
+  loading = signal(true);
+  expertMode = this.settingsService.expertMode;
+
+  ngOnInit(): void {
+    const clientId = this.route.snapshot.paramMap.get('id');
+    if (clientId) {
+      this.loadClient(clientId);
+    }
+  }
+
+  loadClient(clientId: string): void {
+    const userId = this.authService.getUserId();
+    if (!userId) return;
+
+    this.loading.set(true);
+    this.apiService.getClient(userId, clientId).subscribe({
+      next: (client) => {
+        this.client.set(client);
+        this.loading.set(false);
+      },
+      error: () => {
+        this.loading.set(false);
+      }
+    });
+  }
+
+  goBack(): void {
+    this.router.navigate(['/clients']);
+  }
+
+  getClientIcon(type: ClientType): string {
+    return getClientTypeIcon(type);
+  }
+
+  getClientTypeLabel(type: ClientType): string {
+    switch (type) {
+      case 'ANDROID': return 'Android';
+      case 'IOS': return 'iOS';
+      case 'MACOS': return 'macOS';
+      case 'WINDOWS': return 'Windows';
+      case 'LINUX': return 'Linux';
+      default: return type;
+    }
+  }
+
+  deleteClient(): void {
+    const client = this.client();
+    const userId = this.authService.getUserId();
+    if (!client || !userId) return;
+
+    this.apiService.deleteClient(userId, client.client_id).subscribe({
+      next: () => {
+        this.notification.success('Client deleted');
+        this.router.navigate(['/clients']);
+      }
+    });
+  }
+}

webapp/src/app/features/clients/client-list/client-list.component.html

@@ -19,47 +19,55 @@
     <ng-template #noResultTpl></ng-template>
       <thead>
         <tr>
-          <th nzWidth="5%"></th>
-          <th nzWidth="20%">Name</th>
-          <th nzWidth="15%">Type</th>
-          <th nzWidth="25%">Agent</th>
-          <th nzWidth="20%">Created</th>
-          <th nzWidth="15%">Client ID</th>
+          <th nzWidth="0"></th>
+          <th>Name</th>
+          <th nzWidth="0">Type</th>
+          <th nzWidth="0">Agent</th>
+          <th nzWidth="0">Created</th>
         </tr>
       </thead>
       <tbody>
         @for (client of clients(); track client.client_id) {
-          <tr>
+          <tr class="clickable-row">
             <td>
-              <span
-                nz-icon
-                [nzType]="getClientIcon(client.type)"
-                nzTheme="outline"
-                class="client-icon"
-              ></span>
-            </td>
-            <td>{{ client.name || '-' }}</td>
-            <td>
-              <nz-tag>{{ getClientTypeLabel(client.type) }}</nz-tag>
+              <a class="cell-link" [routerLink]="['/clients', client.client_id]">
+                <span
+                  nz-icon
+                  [nzType]="getClientIcon(client.type)"
+                  nzTheme="outline"
+                  class="client-icon"
+                ></span>
+              </a>
             </td>
             <td>
-              <div class="agent-info">
-                <span>{{ client.agent_model }}</span>
-                <span class="agent-version">v{{ client.agent_version }}</span>
-              </div>
+              <a class="cell-link" [routerLink]="['/clients', client.client_id]">
+                <div class="client-name">{{ client.name || '-' }}</div>
+                <div class="client-id mono">{{ client.client_id }}</div>
+              </a>
             </td>
             <td>
-              <span nz-tooltip [nzTooltipTitle]="client.timestamp_created">
-                {{ client.timestamp_created | relativeTime }}
-              </span>
+              <a class="cell-link" [routerLink]="['/clients', client.client_id]">
+                <nz-tag>{{ getClientTypeLabel(client.type) }}</nz-tag>
+              </a>
             </td>
             <td>
-              <span class="mono client-id">{{ client.client_id }}</span>
+              <a class="cell-link" [routerLink]="['/clients', client.client_id]">
+                <div class="agent-info">
+                  <span style="white-space: pre;">{{ client.agent_model }}</span>
+                  <span style="white-space: pre;" class="agent-version">v{{ client.agent_version }}</span>
+                </div>
+              </a>
+            </td>
+            <td>
+              <a class="cell-link" [routerLink]="['/clients', client.client_id]">
+                <div class="timestamp-absolute">{{ client.timestamp_created | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+                <div class="timestamp-relative">{{ client.timestamp_created | relativeTime }}</div>
+              </a>
             </td>
           </tr>
         } @empty {
           <tr>
-            <td colspan="6">
+            <td colspan="5">
               <nz-empty nzNotFoundContent="No clients registered"></nz-empty>
             </td>
           </tr>

webapp/src/app/features/clients/client-list/client-list.component.scss

@@ -24,7 +24,33 @@
   }
 }
 
+.client-name {
+  font-weight: 500;
+  color: #333;
+}
+
 .client-id {
   font-size: 11px;
   color: #999;
+  margin-top: 2px;
+}
+
+.clickable-row {
+  cursor: pointer;
+
+  &:hover {
+    background-color: #fafafa;
+  }
+}
+
+.timestamp-absolute {
+  font-size: 13px;
+  color: #333;
+  white-space: pre;
+}
+
+.timestamp-relative {
+  font-size: 12px;
+  color: #999;
+  white-space: pre;
 }

webapp/src/app/features/clients/client-list/client-list.component.ts

@@ -1,5 +1,6 @@
 import { Component, inject, signal, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
+import { Router, RouterLink } from '@angular/router';
 import { NzTableModule } from 'ng-zorro-antd/table';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzIconModule } from 'ng-zorro-antd/icon';
@@ -17,6 +18,8 @@ import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
   standalone: true,
   imports: [
     CommonModule,
+    DatePipe,
+    RouterLink,
     NzTableModule,
     NzButtonModule,
     NzIconModule,
@@ -32,6 +35,7 @@ import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
 export class ClientListComponent implements OnInit {
   private apiService = inject(ApiService);
   private authService = inject(AuthService);
+  private router = inject(Router);
 
   clients = signal<Client[]>([]);
   loading = signal(false);
@@ -70,4 +74,8 @@ export class ClientListComponent implements OnInit {
       default: return type;
     }
   }
+
+  openClient(clientId: string): void {
+    this.router.navigate(['/clients', clientId]);
+  }
 }

webapp/src/app/features/keys/key-detail/key-detail.component.html

@@ -0,0 +1,276 @@
+<div class="page-content">
+  @if (loading()) {
+    <div class="loading-container">
+      <nz-spin nzSimple nzSize="large"></nz-spin>
+    </div>
+  } @else if (key()) {
+    <div class="detail-header">
+      <button nz-button (click)="goBack()">
+        <span nz-icon nzType="arrow-left" nzTheme="outline"></span>
+        Back to Keys
+      </button>
+      <div class="header-actions">
+        <button nz-button (click)="openEditModal()">
+          <span nz-icon nzType="edit"></span>
+          Edit
+        </button>
+        @if (!isCurrentKey()) {
+          <button
+            nz-button
+            nzDanger
+            nz-popconfirm
+            nzPopconfirmTitle="Are you sure you want to delete this key?"
+            (nzOnConfirm)="deleteKey()"
+          >
+            <span nz-icon nzType="delete"></span>
+            Delete
+          </button>
+        }
+      </div>
+    </div>
+
+    <nz-card>
+      <div class="key-header">
+        <h2 class="key-title">{{ key()!.name }}</h2>
+        @if (isCurrentKey()) {
+          <nz-tag nzColor="cyan">Current</nz-tag>
+        }
+      </div>
+
+      <scn-metadata-grid>
+        <scn-metadata-value label="Key ID">
+          <span class="mono">{{ key()!.keytoken_id }}</span>
+        </scn-metadata-value>
+        <scn-metadata-value label="Permissions">
+          <div class="permissions">
+            @for (perm of getPermissions(); track perm) {
+              <nz-tag
+                [nzColor]="getPermissionColor(perm)"
+                nz-tooltip
+                [nzTooltipTitle]="getPermissionLabel(perm)"
+              >
+                {{ perm }}
+              </nz-tag>
+            }
+          </div>
+        </scn-metadata-value>
+        <scn-metadata-value label="Channel Access">
+          @if (key()!.all_channels) {
+            <nz-tag nzColor="default">All Channels</nz-tag>
+          } @else if (key()!.channels && key()!.channels.length > 0) {
+            <div class="channel-list">
+              @for (channelId of key()!.channels; track channelId) {
+                <nz-tag nzColor="orange" nz-tooltip [nzTooltipTitle]="channelId">
+                  {{ getChannelDisplayName(channelId) }}
+                </nz-tag>
+              }
+            </div>
+          } @else {
+            <span class="text-muted">No channels</span>
+          }
+        </scn-metadata-value>
+        <scn-metadata-value label="Messages Sent">
+          {{ key()!.messages_sent }}
+        </scn-metadata-value>
+        <scn-metadata-value label="Created">
+          <div class="timestamp-absolute">{{ key()!.timestamp_created | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+          <div class="timestamp-relative">{{ key()!.timestamp_created | relativeTime }}</div>
+        </scn-metadata-value>
+        <scn-metadata-value label="Last Used">
+          @if (key()!.timestamp_lastused) {
+            <div class="timestamp-absolute">{{ key()!.timestamp_lastused | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+            <div class="timestamp-relative">{{ key()!.timestamp_lastused | relativeTime }}</div>
+          } @else {
+            <span class="text-muted">Never</span>
+          }
+        </scn-metadata-value>
+        <scn-metadata-value label="Owner">
+          @if (resolvedOwner()) {
+            <div class="owner-name">{{ resolvedOwner()!.displayName }}</div>
+            <div class="owner-id mono">{{ key()!.owner_user_id }}</div>
+          } @else {
+            <span class="mono">{{ key()!.owner_user_id }}</span>
+          }
+        </scn-metadata-value>
+      </scn-metadata-grid>
+    </nz-card>
+
+    <nz-card nzTitle="Messages" class="mt-16">
+      <nz-table
+        #messageTable
+        [nzData]="messages()"
+        [nzLoading]="loadingMessages()"
+        [nzShowPagination]="false"
+        [nzNoResult]="noMessagesResultTpl"
+        nzSize="small"
+      >
+        <ng-template #noMessagesResultTpl></ng-template>
+        <thead>
+          <tr>
+            <th>Title</th>
+            <th>Content</th>
+            <th nzWidth="0">Channel</th>
+            <th nzWidth="0">Sender</th>
+            <th nzWidth="0">Priority</th>
+            <th nzWidth="0">Time</th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (message of messages(); track message.message_id) {
+            <tr class="clickable-row">
+              <td>
+                <a class="cell-link" [routerLink]="['/messages', message.message_id]">
+                  <div class="message-title">{{ message.title }}</div>
+                  <div class="message-id mono">{{ message.message_id }}</div>
+                </a>
+              </td>
+              <td>
+                <a class="cell-link" [routerLink]="['/messages', message.message_id]">
+                  @if (message.content) {
+                    <div class="message-content">{{ message.content | slice:0:128 }}{{ message.content.length > 128 ? '...' : '' }}</div>
+                  } @else {
+                    <span class="text-muted"></span>
+                  }
+                </a>
+              </td>
+              <td>
+                <a class="cell-link" [routerLink]="['/messages', message.message_id]">
+                  <div class="cell-name">{{ message.channel_internal_name }}</div>
+                  <div class="cell-id mono">{{ message.channel_id }}</div>
+                </a>
+              </td>
+              <td>
+                <a class="cell-link" [routerLink]="['/messages', message.message_id]">
+                  <span style="white-space: pre">{{ message.sender_name || '-' }}</span>
+                </a>
+              </td>
+              <td>
+                <a class="cell-link" [routerLink]="['/messages', message.message_id]">
+                  <nz-tag [nzColor]="getPriorityColor(message.priority)">
+                    {{ getPriorityLabel(message.priority) }}
+                  </nz-tag>
+                </a>
+              </td>
+              <td>
+                <a class="cell-link" [routerLink]="['/messages', message.message_id]">
+                  <div class="timestamp-absolute">{{ message.timestamp | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+                  <div class="timestamp-relative">{{ message.timestamp | relativeTime }}</div>
+                </a>
+              </td>
+            </tr>
+          } @empty {
+            <tr>
+              <td colspan="6">
+                <nz-empty nzNotFoundContent="No messages sent with this key"></nz-empty>
+              </td>
+            </tr>
+          }
+        </tbody>
+      </nz-table>
+      @if (messagesTotalCount() > messagesPageSize) {
+        <div class="pagination-controls">
+          <nz-pagination
+            [nzPageIndex]="messagesCurrentPage()"
+            [nzPageSize]="messagesPageSize"
+            [nzTotal]="messagesTotalCount()"
+            [nzDisabled]="loadingMessages()"
+            (nzPageIndexChange)="messagesGoToPage($event)"
+          ></nz-pagination>
+        </div>
+      }
+    </nz-card>
+  } @else {
+    <nz-card>
+      <div class="not-found">
+        <p>Key not found</p>
+        <button nz-button nzType="primary" (click)="goBack()">
+          Back to Keys
+        </button>
+      </div>
+    </nz-card>
+  }
+</div>
+
+<!-- Edit Modal -->
+<nz-modal
+  [(nzVisible)]="showEditModal"
+  nzTitle="Edit Key"
+  (nzOnCancel)="closeEditModal()"
+  [nzFooter]="editModalFooter"
+  nzWidth="500px"
+>
+  <ng-container *nzModalContent>
+    <nz-form-item>
+      <nz-form-label>Name</nz-form-label>
+      <nz-form-control>
+        <input
+          type="text"
+          nz-input
+          placeholder="Enter a name for this key"
+          [(ngModel)]="editKeyName"
+        />
+      </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item>
+      <nz-form-label>Permissions</nz-form-label>
+      <nz-form-control>
+        <div class="permission-checkboxes">
+          @for (opt of permissionOptions; track opt.value) {
+            <label
+              nz-checkbox
+              [nzChecked]="isEditPermissionChecked(opt.value)"
+              [nzDisabled]="opt.value !== 'A' && isEditPermissionChecked('A')"
+              (nzCheckedChange)="onEditPermissionChange(opt.value, $event)"
+            >
+              <nz-tag [nzColor]="getPermissionColor(opt.value)">{{ opt.value }}</nz-tag>
+              <span class="perm-label">{{ opt.label }}</span>
+              <span class="perm-desc">- {{ opt.description }}</span>
+            </label>
+          }
+        </div>
+      </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item>
+      <label nz-checkbox [(ngModel)]="editKeyAllChannels">
+        Access to all channels
+      </label>
+    </nz-form-item>
+
+    @if (!editKeyAllChannels) {
+      <nz-form-item class="mb-0">
+        <nz-form-label>Channels</nz-form-label>
+        <nz-form-control>
+          <nz-select
+            [(ngModel)]="editKeyChannels"
+            nzMode="multiple"
+            nzPlaceHolder="Select channels"
+            nzShowSearch
+            style="width: 100%"
+          >
+            @for (channel of availableChannels(); track channel.channel_id) {
+              <nz-option
+                [nzValue]="channel.channel_id"
+                [nzLabel]="getChannelLabel(channel)"
+              ></nz-option>
+            }
+          </nz-select>
+        </nz-form-control>
+      </nz-form-item>
+    }
+  </ng-container>
+</nz-modal>
+
+<ng-template #editModalFooter>
+  <button nz-button (click)="closeEditModal()">Cancel</button>
+  <button
+    nz-button
+    nzType="primary"
+    [nzLoading]="updating()"
+    [disabled]="!editKeyName.trim() || editKeyPermissions.length === 0"
+    (click)="updateKey()"
+  >
+    Save
+  </button>
+</ng-template>

webapp/src/app/features/keys/key-detail/key-detail.component.scss

@@ -0,0 +1,145 @@
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 300px;
+}
+
+.header-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.key-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.key-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.permissions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.channel-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.text-muted {
+  color: #999;
+}
+
+.owner-name {
+  font-weight: 500;
+  color: #333;
+}
+
+.owner-id {
+  font-size: 11px;
+  color: #999;
+  margin-top: 2px;
+}
+
+.not-found {
+  text-align: center;
+  padding: 48px;
+
+  p {
+    color: #999;
+    margin-bottom: 16px;
+  }
+}
+
+.permission-checkboxes {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  label {
+    display: flex;
+    align-items: center;
+    margin-left: 0;
+  }
+
+  nz-tag {
+    width: 32px;
+    text-align: center;
+    margin-right: 8px;
+  }
+
+  .perm-label {
+    min-width: 100px;
+  }
+
+  .perm-desc {
+    color: #999;
+    font-size: 12px;
+  }
+}
+
+.timestamp-absolute {
+  font-size: 13px;
+  color: #333;
+  white-space: pre;
+}
+
+.timestamp-relative {
+  font-size: 12px;
+  color: #999;
+  white-space: pre;
+}
+
+.clickable-row {
+  cursor: pointer;
+
+  &:hover {
+    background-color: #fafafa;
+  }
+}
+
+.message-title {
+  font-weight: 500;
+  color: #333;
+}
+
+.message-id {
+  font-size: 11px;
+  color: #999;
+  margin-top: 2px;
+}
+
+.message-content {
+  font-size: 12px;
+  color: #666;
+  white-space: pre;
+  max-height: 2lh;
+  overflow-y: clip;
+}
+
+.cell-name {
+  font-weight: 500;
+  color: #333;
+}
+
+.cell-id {
+  font-size: 11px;
+  color: #999;
+  margin-top: 2px;
+}
+
+.pagination-controls {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 16px 0;
+}

webapp/src/app/features/keys/key-detail/key-detail.component.ts

@@ -0,0 +1,332 @@
+import { Component, inject, signal, OnInit } from '@angular/core';
+import { CommonModule, DatePipe } from '@angular/common';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+import { NzCardModule } from 'ng-zorro-antd/card';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzTagModule } from 'ng-zorro-antd/tag';
+import { NzSpinModule } from 'ng-zorro-antd/spin';
+import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
+import { NzModalModule } from 'ng-zorro-antd/modal';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
+import { NzTableModule } from 'ng-zorro-antd/table';
+import { NzEmptyModule } from 'ng-zorro-antd/empty';
+import { NzPaginationModule } from 'ng-zorro-antd/pagination';
+import { ApiService } from '../../../core/services/api.service';
+import { AuthService } from '../../../core/services/auth.service';
+import { NotificationService } from '../../../core/services/notification.service';
+import { ChannelCacheService, ResolvedChannel } from '../../../core/services/channel-cache.service';
+import { UserCacheService, ResolvedUser } from '../../../core/services/user-cache.service';
+import { KeyToken, parsePermissions, TokenPermission, ChannelWithSubscription, Message } from '../../../core/models';
+import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
+import { MetadataGridComponent, MetadataValueComponent } from '../../../shared/components/metadata-grid';
+
+interface PermissionOption {
+  value: TokenPermission;
+  label: string;
+  description: string;
+}
+
+@Component({
+  selector: 'app-key-detail',
+  standalone: true,
+  imports: [
+    CommonModule,
+    DatePipe,
+    FormsModule,
+    RouterLink,
+    NzCardModule,
+    NzButtonModule,
+    NzIconModule,
+    NzTagModule,
+    NzSpinModule,
+    NzPopconfirmModule,
+    NzModalModule,
+    NzFormModule,
+    NzInputModule,
+    NzCheckboxModule,
+    NzSelectModule,
+    NzToolTipModule,
+    NzTableModule,
+    NzEmptyModule,
+    NzPaginationModule,
+    RelativeTimePipe,
+    MetadataGridComponent,
+    MetadataValueComponent,
+  ],
+  templateUrl: './key-detail.component.html',
+  styleUrl: './key-detail.component.scss'
+})
+export class KeyDetailComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private apiService = inject(ApiService);
+  private authService = inject(AuthService);
+  private notification = inject(NotificationService);
+  private channelCacheService = inject(ChannelCacheService);
+  private userCacheService = inject(UserCacheService);
+
+  key = signal<KeyToken | null>(null);
+  currentKeyId = signal<string | null>(null);
+  loading = signal(true);
+  channelNames = signal<Map<string, ResolvedChannel>>(new Map());
+  availableChannels = signal<ChannelWithSubscription[]>([]);
+  resolvedOwner = signal<ResolvedUser | null>(null);
+
+  // Messages
+  messages = signal<Message[]>([]);
+  loadingMessages = signal(false);
+  messagesPageSize = 16;
+  messagesTotalCount = signal(0);
+  messagesCurrentPage = signal(1);
+  messagesNextPageToken = signal<string | null>(null);
+
+  // Edit modal
+  showEditModal = signal(false);
+  editKeyName = '';
+  editKeyPermissions: TokenPermission[] = [];
+  editKeyAllChannels = true;
+  editKeyChannels: string[] = [];
+  updating = signal(false);
+
+  permissionOptions: PermissionOption[] = [
+    { value: 'A', label: 'Admin', description: 'Full access to all operations' },
+    { value: 'CR', label: 'Channel Read', description: 'Read messages from channels' },
+    { value: 'CS', label: 'Channel Send', description: 'Send messages to channels' },
+    { value: 'UR', label: 'User Read', description: 'Read user information' },
+  ];
+
+  ngOnInit(): void {
+    const keyId = this.route.snapshot.paramMap.get('id');
+    if (keyId) {
+      this.loadKey(keyId);
+      this.loadCurrentKey();
+      this.loadAvailableChannels();
+    }
+  }
+
+  loadKey(keyId: string): void {
+    const userId = this.authService.getUserId();
+    if (!userId) return;
+
+    this.loading.set(true);
+    this.apiService.getKey(userId, keyId).subscribe({
+      next: (key) => {
+        this.key.set(key);
+        this.loading.set(false);
+        this.resolveChannelNames(key);
+        this.resolveOwner(key.owner_user_id);
+        this.loadMessages(keyId);
+      },
+      error: () => {
+        this.loading.set(false);
+      }
+    });
+  }
+
+  loadMessages(keyId: string, nextPageToken?: string): void {
+    this.loadingMessages.set(true);
+    this.apiService.getMessages({
+      subscription_status: 'all',
+      used_key: keyId,
+      page_size: this.messagesPageSize,
+      next_page_token: nextPageToken,
+      trimmed: true
+    }).subscribe({
+      next: (response) => {
+        this.messages.set(response.messages);
+        this.messagesTotalCount.set(response.total_count);
+        this.messagesNextPageToken.set(response.next_page_token || null);
+        this.loadingMessages.set(false);
+      },
+      error: () => {
+        this.loadingMessages.set(false);
+      }
+    });
+  }
+
+  messagesGoToPage(page: number): void {
+    const key = this.key();
+    if (!key) return;
+    this.messagesCurrentPage.set(page);
+    if (page === 1) {
+      this.loadMessages(key.keytoken_id);
+    } else {
+      const token = this.messagesNextPageToken();
+      if (token) {
+        this.loadMessages(key.keytoken_id, token);
+      }
+    }
+  }
+
+  viewMessage(message: Message): void {
+    this.router.navigate(['/messages', message.message_id]);
+  }
+
+  getPriorityColor(priority: number): string {
+    switch (priority) {
+      case 0: return 'default';
+      case 1: return 'blue';
+      case 2: return 'orange';
+      default: return 'default';
+    }
+  }
+
+  getPriorityLabel(priority: number): string {
+    switch (priority) {
+      case 0: return 'Low';
+      case 1: return 'Normal';
+      case 2: return 'High';
+      default: return 'Unknown';
+    }
+  }
+
+  private resolveOwner(ownerId: string): void {
+    this.userCacheService.resolveUser(ownerId).subscribe(resolved => {
+      this.resolvedOwner.set(resolved);
+    });
+  }
+
+  loadCurrentKey(): void {
+    const userId = this.authService.getUserId();
+    if (!userId) return;
+
+    this.apiService.getCurrentKey(userId).subscribe({
+      next: (key) => {
+        this.currentKeyId.set(key.keytoken_id);
+      }
+    });
+  }
+
+  loadAvailableChannels(): void {
+    this.channelCacheService.getAllChannels().subscribe(channels => {
+      this.availableChannels.set(channels);
+    });
+  }
+
+  private resolveChannelNames(key: KeyToken): void {
+    if (!key.all_channels && key.channels && key.channels.length > 0) {
+      this.channelCacheService.resolveChannels(key.channels).subscribe(resolved => {
+        this.channelNames.set(resolved);
+      });
+    }
+  }
+
+  goBack(): void {
+    this.router.navigate(['/keys']);
+  }
+
+  isCurrentKey(): boolean {
+    const key = this.key();
+    return key?.keytoken_id === this.currentKeyId();
+  }
+
+  getPermissions(): TokenPermission[] {
+    const key = this.key();
+    return key ? parsePermissions(key.permissions) : [];
+  }
+
+  getPermissionColor(perm: TokenPermission): string {
+    switch (perm) {
+      case 'A': return 'red';
+      case 'CR': return 'blue';
+      case 'CS': return 'green';
+      case 'UR': return 'purple';
+      default: return 'default';
+    }
+  }
+
+  getPermissionLabel(perm: TokenPermission): string {
+    const option = this.permissionOptions.find(o => o.value === perm);
+    return option?.label || perm;
+  }
+
+  getChannelDisplayName(channelId: string): string {
+    const resolved = this.channelNames().get(channelId);
+    return resolved?.displayName || channelId;
+  }
+
+  getChannelLabel(channel: ChannelWithSubscription): string {
+    return channel.display_name || channel.internal_name;
+  }
+
+  // Edit modal
+  openEditModal(): void {
+    const key = this.key();
+    if (!key) return;
+
+    this.editKeyName = key.name;
+    this.editKeyPermissions = parsePermissions(key.permissions);
+    this.editKeyAllChannels = key.all_channels;
+    this.editKeyChannels = key.channels ? [...key.channels] : [];
+    this.showEditModal.set(true);
+  }
+
+  closeEditModal(): void {
+    this.showEditModal.set(false);
+  }
+
+  updateKey(): void {
+    const userId = this.authService.getUserId();
+    const key = this.key();
+    if (!userId || !key || !this.editKeyName.trim() || this.editKeyPermissions.length === 0) return;
+
+    this.updating.set(true);
+    this.apiService.updateKey(userId, key.keytoken_id, {
+      name: this.editKeyName.trim(),
+      permissions: this.editKeyPermissions.join(';'),
+      all_channels: this.editKeyAllChannels,
+      channels: this.editKeyAllChannels ? undefined : this.editKeyChannels
+    }).subscribe({
+      next: (updated) => {
+        this.key.set(updated);
+        this.notification.success('Key updated');
+        this.updating.set(false);
+        this.closeEditModal();
+        this.resolveChannelNames(updated);
+      },
+      error: () => {
+        this.updating.set(false);
+      }
+    });
+  }
+
+  onEditPermissionChange(perm: TokenPermission, checked: boolean): void {
+    if (checked) {
+      if (perm === 'A') {
+        this.editKeyPermissions = ['A'];
+      } else if (!this.editKeyPermissions.includes(perm)) {
+        this.editKeyPermissions = [...this.editKeyPermissions, perm];
+      }
+    } else {
+      this.editKeyPermissions = this.editKeyPermissions.filter(p => p !== perm);
+    }
+  }
+
+  isEditPermissionChecked(perm: TokenPermission): boolean {
+    return this.editKeyPermissions.includes(perm);
+  }
+
+  deleteKey(): void {
+    const key = this.key();
+    const userId = this.authService.getUserId();
+    if (!key || !userId) return;
+
+    if (this.isCurrentKey()) {
+      this.notification.warning('Cannot delete the key you are currently using');
+      return;
+    }
+
+    this.apiService.deleteKey(userId, key.keytoken_id).subscribe({
+      next: () => {
+        this.notification.success('Key deleted');
+        this.router.navigate(['/keys']);
+      }
+    });
+  }
+}

webapp/src/app/features/keys/key-list/key-list.component.html

@@ -25,58 +25,67 @@
     <ng-template #noResultTpl></ng-template>
       <thead>
         <tr>
-          <th nzWidth="25%">Name</th>
-          <th nzWidth="25%">Permissions</th>
-          <th nzWidth="15%">Messages Sent</th>
-          <th nzWidth="20%">Last Used</th>
-          <th nzWidth="15%">Actions</th>
+          <th>Name</th>
+          <th>Permissions</th>
+          <th nzWidth="0">Messages Sent</th>
+          <th nzWidth="0">Last Used</th>
+          <th nzWidth="0">Actions</th>
         </tr>
       </thead>
       <tbody>
         @for (key of keys(); track key.keytoken_id) {
-          <tr>
+          <tr class="clickable-row">
             <td>
-              <div class="key-name">
-                {{ key.name }}
-                @if (isCurrentKey(key)) {
-                  <nz-tag nzColor="cyan" class="current-tag">Current</nz-tag>
-                }
-              </div>
-              <div class="key-id mono">{{ key.keytoken_id }}</div>
+              <a class="cell-link" [routerLink]="['/keys', key.keytoken_id]">
+                <div class="key-name">
+                  {{ key.name }}
+                  @if (isCurrentKey(key)) {
+                    <nz-tag nzColor="cyan" class="current-tag">Current</nz-tag>
+                  }
+                </div>
+                <div class="key-id mono">{{ key.keytoken_id }}</div>
+              </a>
             </td>
             <td>
-              <div class="permissions">
-                @for (perm of getPermissions(key); track perm) {
-                  <nz-tag
-                    [nzColor]="getPermissionColor(perm)"
-                    nz-tooltip
-                    [nzTooltipTitle]="getPermissionLabel(perm)"
-                  >
-                    {{ perm }}
-                  </nz-tag>
-                }
-                @if (key.all_channels) {
-                  <nz-tag nzColor="default" nz-tooltip nzTooltipTitle="Access to all channels">
-                    All Channels
-                  </nz-tag>
-                } @else if (key.channels && key.channels.length > 0) {
-                  @for (channelId of key.channels; track channelId) {
-                    <nz-tag nzColor="orange" nz-tooltip [nzTooltipTitle]="channelId">
-                      {{ getChannelDisplayName(channelId) }}
+              <a class="cell-link" [routerLink]="['/keys', key.keytoken_id]">
+                <div class="permissions">
+                  @for (perm of getPermissions(key); track perm) {
+                    <nz-tag
+                      [nzColor]="getPermissionColor(perm)"
+                      nz-tooltip
+                      [nzTooltipTitle]="getPermissionLabel(perm)"
+                    >
+                      {{ perm }}
                     </nz-tag>
                   }
-                }
-              </div>
+                  @if (key.all_channels) {
+                    <nz-tag nzColor="default" nz-tooltip nzTooltipTitle="Access to all channels">
+                      All Channels
+                    </nz-tag>
+                  } @else if (key.channels && key.channels.length > 0) {
+                    @for (channelId of key.channels; track channelId) {
+                      <nz-tag nzColor="orange" nz-tooltip [nzTooltipTitle]="channelId">
+                        {{ getChannelDisplayName(channelId) }}
+                      </nz-tag>
+                    }
+                  }
+                </div>
+              </a>
             </td>
-            <td>{{ key.messages_sent }}</td>
             <td>
-              @if (key.timestamp_lastused) {
-                <span nz-tooltip [nzTooltipTitle]="key.timestamp_lastused">
-                  {{ key.timestamp_lastused | relativeTime }}
-                </span>
-              } @else {
-                <span class="text-muted">Never</span>
-              }
+              <a class="cell-link" [routerLink]="['/keys', key.keytoken_id]">
+                {{ key.messages_sent }}
+              </a>
+            </td>
+            <td>
+              <a class="cell-link" [routerLink]="['/keys', key.keytoken_id]">
+                @if (key.timestamp_lastused) {
+                  <div class="timestamp-absolute">{{ key.timestamp_lastused | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+                  <div class="timestamp-relative">{{ key.timestamp_lastused | relativeTime }}</div>
+                } @else {
+                  <span class="text-muted">Never</span>
+                }
+              </a>
             </td>
             <td>
               <div class="action-buttons">

webapp/src/app/features/keys/key-list/key-list.component.scss

@@ -83,3 +83,23 @@
     font-size: 12px;
   }
 }
+
+.clickable-row {
+  cursor: pointer;
+
+  &:hover {
+    background-color: #fafafa;
+  }
+}
+
+.timestamp-absolute {
+  font-size: 13px;
+  color: #333;
+  white-space: pre;
+}
+
+.timestamp-relative {
+  font-size: 12px;
+  color: #999;
+  white-space: pre;
+}

webapp/src/app/features/keys/key-list/key-list.component.ts

@@ -1,5 +1,6 @@
 import { Component, inject, signal, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
+import { Router, RouterLink } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 import { NzTableModule } from 'ng-zorro-antd/table';
 import { NzButtonModule } from 'ng-zorro-antd/button';
@@ -34,7 +35,9 @@ interface PermissionOption {
   standalone: true,
   imports: [
     CommonModule,
+    DatePipe,
     FormsModule,
+    RouterLink,
     NzTableModule,
     NzButtonModule,
     NzIconModule,
@@ -56,6 +59,7 @@ interface PermissionOption {
   styleUrl: './key-list.component.scss'
 })
 export class KeyListComponent implements OnInit {
+  private router = inject(Router);
   private apiService = inject(ApiService);
   private authService = inject(AuthService);
   private notification = inject(NotificationService);
@@ -162,6 +166,10 @@ export class KeyListComponent implements OnInit {
     return key.keytoken_id === this.currentKeyId();
   }
 
+  viewKey(key: KeyToken): void {
+    this.router.navigate(['/keys', key.keytoken_id]);
+  }
+
   deleteKey(key: KeyToken): void {
     if (this.isCurrentKey(key)) {
       this.notification.warning('Cannot delete the key you are currently using');

webapp/src/app/features/messages/message-detail/message-detail.component.html

@@ -9,58 +9,114 @@
         <span nz-icon nzType="arrow-left" nzTheme="outline"></span>
         Back to Messages
       </button>
-      <button
-        nz-button
-        nzType="primary"
-        nzDanger
-        nz-popconfirm
-        nzPopconfirmTitle="Are you sure you want to delete this message?"
-        nzPopconfirmPlacement="bottomRight"
-        (nzOnConfirm)="deleteMessage()"
-        [nzLoading]="deleting()"
-      >
-        <span nz-icon nzType="delete"></span>
-        Delete
-      </button>
+      @if (expertMode()) {
+        <div class="header-actions">
+          <button
+            nz-button
+            nzDanger
+            nz-popconfirm
+            nzPopconfirmTitle="Are you sure you want to delete this message?"
+            (nzOnConfirm)="deleteMessage()"
+            [nzLoading]="deleting()"
+          >
+            <span nz-icon nzType="delete"></span>
+            Delete
+          </button>
+        </div>
+      }
     </div>
 
     <nz-card [nzTitle]="message()!.title">
-      <nz-descriptions nzBordered [nzColumn]="2">
-        <nz-descriptions-item nzTitle="Message ID" [nzSpan]="2">
-          <span class="mono">{{ message()!.message_id }}</span>
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Channel">
-          {{ message()!.channel_internal_name }}
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Priority">
-          <nz-tag [nzColor]="getPriorityColor(message()!.priority)">
-            {{ getPriorityLabel(message()!.priority) }}
-          </nz-tag>
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Sender Name">
-          {{ message()!.sender_name || '-' }}
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Sender IP">
-          {{ message()!.sender_ip }}
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Timestamp" [nzSpan]="2">
-          {{ message()!.timestamp }} ({{ message()!.timestamp | relativeTime }})
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="User Message ID" [nzSpan]="2">
-          <span class="mono">{{ message()!.usr_message_id || '-' }}</span>
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Used Key ID" [nzSpan]="2">
-          <span class="mono">{{ message()!.used_key_id }}</span>
-        </nz-descriptions-item>
-      </nz-descriptions>
-
       @if (message()!.content) {
-        <nz-divider nzText="Content"></nz-divider>
         <div class="message-content">
           <pre>{{ message()!.content }}</pre>
         </div>
+      } @else {
+        <div class="no-content">No content</div>
       }
     </nz-card>
+
+    <nz-card nzTitle="Metadata">
+      <scn-metadata-grid>
+        <scn-metadata-value label="Message ID">
+          <span class="mono">{{ message()!.message_id }}</span>
+        </scn-metadata-value>
+        <scn-metadata-value label="Channel">
+          <a [routerLink]="['/channels', message()!.channel_id]" class="metadata-link">
+            <div class="cell-name">{{ message()!.channel_internal_name }}</div>
+            <div class="cell-id mono">{{ message()!.channel_id }}</div>
+          </a>
+        </scn-metadata-value>
+        <scn-metadata-value label="Channel Owner">
+          <div class="cell-name">{{ resolvedChannelOwner()?.displayName || message()!.channel_owner_user_id }}</div>
+          <div class="cell-id mono">{{ message()!.channel_owner_user_id }}</div>
+        </scn-metadata-value>
+        <scn-metadata-value label="Priority">
+          <nz-tag [nzColor]="getPriorityColor(message()!.priority)">
+            {{ getPriorityLabel(message()!.priority) }}
+          </nz-tag>
+        </scn-metadata-value>
+        <scn-metadata-value label="Sender Name">
+          {{ message()!.sender_name || '-' }}
+        </scn-metadata-value>
+        <scn-metadata-value label="Sender IP">
+          {{ message()!.sender_ip }}
+        </scn-metadata-value>
+        <scn-metadata-value label="Timestamp">
+          <div class="timestamp-absolute">{{ message()!.timestamp | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+          <div class="timestamp-relative">{{ message()!.timestamp | relativeTime }}</div>
+        </scn-metadata-value>
+        <scn-metadata-value label="User Message ID">
+          <span class="mono">{{ message()!.usr_message_id || '-' }}</span>
+        </scn-metadata-value>
+        <scn-metadata-value label="Used Key">
+          <a [routerLink]="['/keys', message()!.used_key_id]" class="metadata-link">
+            <div class="cell-name">{{ resolvedKey()?.name || message()!.used_key_id }}</div>
+            <div class="cell-id mono">{{ message()!.used_key_id }}</div>
+          </a>
+        </scn-metadata-value>
+      </scn-metadata-grid>
+    </nz-card>
+
+    @if (showDeliveries()) {
+      <nz-card nzTitle="Deliveries">
+        <nz-table
+          #deliveriesTable
+          [nzData]="deliveries()"
+          [nzLoading]="loadingDeliveries()"
+          [nzShowPagination]="deliveries().length > 10"
+          [nzPageSize]="10"
+          nzSize="small"
+        >
+          <thead>
+            <tr>
+              <th>Client ID</th>
+              <th>Status</th>
+              <th>Retries</th>
+              <th>Created</th>
+              <th>Finalized</th>
+            </tr>
+          </thead>
+          <tbody>
+            @for (delivery of deliveriesTable.data; track delivery.delivery_id) {
+              <tr>
+                <td>
+                  <span class="mono">{{ delivery.receiver_client_id }}</span>
+                </td>
+                <td>
+                  <nz-tag [nzColor]="getStatusColor(delivery.status)">
+                    {{ delivery.status }}
+                  </nz-tag>
+                </td>
+                <td>{{ delivery.retry_count }}</td>
+                <td>{{ delivery.timestamp_created | date:'yyyy-MM-dd HH:mm:ss' }}</td>
+                <td>{{ delivery.timestamp_finalized ? (delivery.timestamp_finalized | date:'yyyy-MM-dd HH:mm:ss') : '-' }}</td>
+              </tr>
+            }
+          </tbody>
+        </nz-table>
+      </nz-card>
+    }
   } @else {
     <nz-card>
       <div class="not-found">

webapp/src/app/features/messages/message-detail/message-detail.component.scss

@@ -20,6 +20,11 @@
   }
 }
 
+.no-content {
+  color: rgba(0, 0, 0, 0.45);
+  font-style: italic;
+}
+
 .not-found {
   text-align: center;
   padding: 48px;
@@ -29,3 +34,41 @@
     margin-bottom: 16px;
   }
 }
+
+nz-card + nz-card {
+  margin-top: 16px;
+}
+
+.cell-name {
+  font-weight: 500;
+  color: #333;
+}
+
+.cell-id {
+  font-size: 11px;
+  color: #999;
+  margin-top: 2px;
+}
+
+.metadata-link {
+  text-decoration: none;
+  display: block;
+
+  &:hover {
+    .cell-name {
+      color: #1890ff;
+    }
+  }
+}
+
+.timestamp-absolute {
+  font-size: 13px;
+  color: #333;
+  white-space: pre;
+}
+
+.timestamp-relative {
+  font-size: 12px;
+  color: #999;
+  white-space: pre;
+}

webapp/src/app/features/messages/message-detail/message-detail.component.ts

@@ -1,33 +1,40 @@
-import { Component, inject, signal, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Component, inject, signal, OnInit, computed, effect } from '@angular/core';
+import { CommonModule, DatePipe } from '@angular/common';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { NzCardModule } from 'ng-zorro-antd/card';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzIconModule } from 'ng-zorro-antd/icon';
-import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
 import { NzTagModule } from 'ng-zorro-antd/tag';
 import { NzSpinModule } from 'ng-zorro-antd/spin';
 import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
-import { NzDividerModule } from 'ng-zorro-antd/divider';
+import { NzTableModule } from 'ng-zorro-antd/table';
 import { ApiService } from '../../../core/services/api.service';
+import { AuthService } from '../../../core/services/auth.service';
 import { NotificationService } from '../../../core/services/notification.service';
-import { Message } from '../../../core/models';
+import { SettingsService } from '../../../core/services/settings.service';
+import { KeyCacheService, ResolvedKey } from '../../../core/services/key-cache.service';
+import { UserCacheService, ResolvedUser } from '../../../core/services/user-cache.service';
+import { Message, Delivery } from '../../../core/models';
 import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
+import { MetadataGridComponent, MetadataValueComponent } from '../../../shared/components/metadata-grid';
 
 @Component({
   selector: 'app-message-detail',
   standalone: true,
   imports: [
     CommonModule,
+    DatePipe,
     NzCardModule,
     NzButtonModule,
     NzIconModule,
-    NzDescriptionsModule,
     NzTagModule,
     NzSpinModule,
     NzPopconfirmModule,
-    NzDividerModule,
+    NzTableModule,
+    RouterLink,
     RelativeTimePipe,
+    MetadataGridComponent,
+    MetadataValueComponent,
   ],
   templateUrl: './message-detail.component.html',
   styleUrl: './message-detail.component.scss'
@@ -36,11 +43,37 @@ export class MessageDetailComponent implements OnInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private apiService = inject(ApiService);
+  private authService = inject(AuthService);
   private notification = inject(NotificationService);
+  private settingsService = inject(SettingsService);
+  private keyCacheService = inject(KeyCacheService);
+  private userCacheService = inject(UserCacheService);
 
   message = signal<Message | null>(null);
+  resolvedKey = signal<ResolvedKey | null>(null);
+  resolvedChannelOwner = signal<ResolvedUser | null>(null);
+  deliveries = signal<Delivery[]>([]);
   loading = signal(true);
   deleting = signal(false);
+  loadingDeliveries = signal(false);
+  expertMode = this.settingsService.expertMode;
+
+  isChannelOwner = computed(() => {
+    const msg = this.message();
+    const userId = this.authService.getUserId();
+    return msg !== null && userId !== null && msg.channel_owner_user_id === userId;
+  });
+
+  showDeliveries = computed(() => this.expertMode() && this.isChannelOwner());
+
+  constructor() {
+    // Watch for expert mode changes and load deliveries when it becomes visible
+    effect(() => {
+      if (this.showDeliveries() && this.message() && this.deliveries().length === 0 && !this.loadingDeliveries()) {
+        this.loadDeliveries(this.message()!.message_id);
+      }
+    });
+  }
 
   ngOnInit(): void {
     const messageId = this.route.snapshot.paramMap.get('id');
@@ -55,6 +88,9 @@ export class MessageDetailComponent implements OnInit {
       next: (message) => {
         this.message.set(message);
         this.loading.set(false);
+        this.resolveKey(message.used_key_id);
+        this.resolveChannelOwner(message.channel_owner_user_id);
+        this.loadDeliveries(messageId);
       },
       error: () => {
         this.loading.set(false);
@@ -62,6 +98,34 @@ export class MessageDetailComponent implements OnInit {
     });
   }
 
+  private loadDeliveries(messageId: string): void {
+    if (!this.showDeliveries()) {
+      return;
+    }
+    this.loadingDeliveries.set(true);
+    this.apiService.getDeliveries(messageId).subscribe({
+      next: (response) => {
+        this.deliveries.set(response.deliveries);
+        this.loadingDeliveries.set(false);
+      },
+      error: () => {
+        this.loadingDeliveries.set(false);
+      }
+    });
+  }
+
+  private resolveKey(keyId: string): void {
+    this.keyCacheService.resolveKey(keyId).subscribe({
+      next: (resolved) => this.resolvedKey.set(resolved)
+    });
+  }
+
+  private resolveChannelOwner(userId: string): void {
+    this.userCacheService.resolveUser(userId).subscribe({
+      next: (resolved) => this.resolvedChannelOwner.set(resolved)
+    });
+  }
+
   goBack(): void {
     this.router.navigate(['/messages']);
   }
@@ -99,4 +163,13 @@ export class MessageDetailComponent implements OnInit {
       default: return 'default';
     }
   }
+
+  getStatusColor(status: string): string {
+    switch (status) {
+      case 'SUCCESS': return 'green';
+      case 'FAILED': return 'red';
+      case 'RETRY': return 'orange';
+      default: return 'default';
+    }
+  }
 }

webapp/src/app/features/messages/message-list/message-list.component.html

@@ -67,26 +67,26 @@
     <ng-template #noResultTpl></ng-template>
       <thead>
         <tr>
-          <th nzWidth="40%">Title</th>
+          <th>Title</th>
+          <th>Content</th>
           <th
-            nzWidth="15%"
             [nzFilters]="channelFilters()"
             [nzFilterMultiple]="true"
             (nzFilterChange)="onChannelFilterChange($event)"
           >Channel</th>
           <th
-            nzWidth="15%"
+            nzWidth="0"
             [nzFilters]="senderFilters()"
             [nzFilterMultiple]="true"
             (nzFilterChange)="onSenderFilterChange($event)"
           >Sender</th>
           <th
-            nzWidth="10%"
+            nzWidth="0"
             [nzFilters]="priorityFilters"
             [nzFilterMultiple]="false"
             (nzFilterChange)="onPriorityFilterChange($event)"
           >Priority</th>
-          <th nzWidth="20%" nzCustomFilter>
+          <th nzWidth="0" nzCustomFilter>
             Time
             <nz-filter-trigger [(nzVisible)]="dateFilterVisible" [nzActive]="!!dateRange" [nzDropdownMenu]="dateMenu">
               <span nz-icon nzType="filter" nzTheme="fill"></span>
@@ -107,33 +107,50 @@
       </thead>
       <tbody>
         @for (message of messages(); track message.message_id) {
-          <tr class="clickable-row" (click)="viewMessage(message)">
+          <tr class="clickable-row">
             <td>
-              <div class="message-title">{{ message.title }}</div>
-              @if (message.content && !message.trimmed) {
-                <div class="message-preview">{{ message.content | slice:0:100 }}{{ message.content.length > 100 ? '...' : '' }}</div>
-              }
+              <a class="cell-link" [routerLink]="['/messages', message.message_id]">
+                <div class="message-title">{{ message.title }}</div>
+                <div class="message-id mono">{{ message.message_id }}</div>
+              </a>
             </td>
             <td>
-              <span class="mono">{{ message.channel_internal_name }}</span>
+              <a class="cell-link" [routerLink]="['/messages', message.message_id]">
+                @if (message.content) {
+                  <div class="message-content">{{ message.content | slice:0:128 }}{{ message.content.length > 128 ? '...' : '' }}</div>
+                } @else {
+                  <span class="text-muted"></span>
+                }
+              </a>
             </td>
             <td>
-              {{ message.sender_name || '-' }}
+              <a class="cell-link" [routerLink]="['/messages', message.message_id]">
+                <div class="cell-name">{{ message.channel_internal_name }}</div>
+                <div class="cell-id">{{ message.channel_id }}</div>
+              </a>
             </td>
             <td>
-              <nz-tag [nzColor]="getPriorityColor(message.priority)">
-                {{ getPriorityLabel(message.priority) }}
-              </nz-tag>
+              <a class="cell-link" [routerLink]="['/messages', message.message_id]">
+                <span style="white-space: pre">{{ message.sender_name || '-' }}</span>
+              </a>
             </td>
             <td>
-              <span nz-tooltip [nzTooltipTitle]="message.timestamp">
-                {{ message.timestamp | relativeTime }}
-              </span>
+              <a class="cell-link" [routerLink]="['/messages', message.message_id]">
+                <nz-tag [nzColor]="getPriorityColor(message.priority)">
+                  {{ getPriorityLabel(message.priority) }}
+                </nz-tag>
+              </a>
+            </td>
+            <td>
+              <a class="cell-link" [routerLink]="['/messages', message.message_id]">
+                <div class="timestamp-absolute">{{ message.timestamp | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+                <div class="timestamp-relative">{{ message.timestamp | relativeTime }}</div>
+              </a>
             </td>
           </tr>
         } @empty {
           <tr>
-            <td colspan="5">
+            <td colspan="6">
               <nz-empty nzNotFoundContent="No messages found"></nz-empty>
             </td>
           </tr>

webapp/src/app/features/messages/message-list/message-list.component.scss

@@ -41,10 +41,45 @@
   color: #333;
 }
 
-.message-preview {
+.message-id {
+  font-size: 11px;
+  color: #999;
+  margin-top: 2px;
+}
+
+.message-content {
+  font-size: 12px;
+  color: #666;
+  white-space: pre;
+  max-height: 2lh;
+  overflow-y: clip;
+}
+
+.text-muted {
+  color: #999;
+}
+
+.cell-name {
+  font-weight: 500;
+  color: #333;
+}
+
+.cell-id {
+  font-size: 11px;
+  color: #999;
+  margin-top: 2px;
+}
+
+.timestamp-absolute {
+  font-size: 13px;
+  color: #333;
+  white-space: pre;
+}
+
+.timestamp-relative {
   font-size: 12px;
   color: #999;
-  margin-top: 4px;
+  white-space: pre;
 }
 
 .pagination-controls {

webapp/src/app/features/messages/message-list/message-list.component.ts

@@ -1,6 +1,6 @@
 import { Component, inject, signal, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { Router } from '@angular/router';
+import { Router, RouterLink } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 import { NzTableModule, NzTableFilterList } from 'ng-zorro-antd/table';
 import { NzButtonModule } from 'ng-zorro-antd/button';
@@ -24,6 +24,7 @@ import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
   imports: [
     CommonModule,
     FormsModule,
+    RouterLink,
     NzTableModule,
     NzButtonModule,
     NzInputModule,

webapp/src/app/features/senders/sender-list/sender-list.component.html

@@ -21,9 +21,9 @@
           <ng-template #noResultTpl></ng-template>
           <thead>
             <tr>
-              <th nzWidth="40%">Sender Name</th>
-              <th nzWidth="20%">Message Count</th>
-              <th nzWidth="40%">Last Used</th>
+              <th>Sender Name</th>
+              <th nzWidth="0">Message Count</th>
+              <th nzWidth="0">Last Used</th>
             </tr>
           </thead>
           <tbody>
@@ -34,9 +34,8 @@
                 </td>
                 <td>{{ sender.count }}</td>
                 <td>
-                  <span nz-tooltip [nzTooltipTitle]="sender.last_timestamp">
-                    {{ sender.last_timestamp | relativeTime }}
-                  </span>
+                  <div class="timestamp-absolute">{{ sender.last_timestamp | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+                  <div class="timestamp-relative">{{ sender.last_timestamp | relativeTime }}</div>
                 </td>
               </tr>
             } @empty {
@@ -62,9 +61,9 @@
           <ng-template #noResultTpl2></ng-template>
           <thead>
             <tr>
-              <th nzWidth="40%">Sender Name</th>
-              <th nzWidth="20%">Message Count</th>
-              <th nzWidth="40%">Last Used</th>
+              <th>Sender Name</th>
+              <th nzWidth="0">Message Count</th>
+              <th nzWidth="0">Last Used</th>
             </tr>
           </thead>
           <tbody>
@@ -75,9 +74,8 @@
                 </td>
                 <td>{{ sender.count }}</td>
                 <td>
-                  <span nz-tooltip [nzTooltipTitle]="sender.last_timestamp">
-                    {{ sender.last_timestamp | relativeTime }}
-                  </span>
+                  <div class="timestamp-absolute">{{ sender.last_timestamp | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+                  <div class="timestamp-relative">{{ sender.last_timestamp | relativeTime }}</div>
                 </td>
               </tr>
             } @empty {

webapp/src/app/features/senders/sender-list/sender-list.component.scss

@@ -12,3 +12,15 @@
 .sender-name {
   font-weight: 500;
 }
+
+.timestamp-absolute {
+  font-size: 13px;
+  color: #333;
+  white-space: pre;
+}
+
+.timestamp-relative {
+  font-size: 12px;
+  color: #999;
+  white-space: pre;
+}

webapp/src/app/features/senders/sender-list/sender-list.component.ts

@@ -1,5 +1,5 @@
 import { Component, inject, signal, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
 import { NzTableModule } from 'ng-zorro-antd/table';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzIconModule } from 'ng-zorro-antd/icon';
@@ -17,6 +17,7 @@ import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
   standalone: true,
   imports: [
     CommonModule,
+    DatePipe,
     NzTableModule,
     NzButtonModule,
     NzIconModule,

webapp/src/app/features/subscriptions/subscription-detail/subscription-detail.component.html

@@ -0,0 +1,142 @@
+<div class="page-content">
+  @if (loading()) {
+    <div class="loading-container">
+      <nz-spin nzSimple nzSize="large"></nz-spin>
+    </div>
+  } @else if (subscription()) {
+    <div class="detail-header">
+      <button nz-button (click)="goBack()">
+        <span nz-icon nzType="arrow-left" nzTheme="outline"></span>
+        Back to Subscriptions
+      </button>
+      <div class="header-actions">
+        @if (!subscription()!.confirmed && isOwner()) {
+          <button nz-button nzType="primary" (click)="acceptSubscription()">
+            <span nz-icon nzType="check"></span>
+            Accept
+          </button>
+        }
+        @if (subscription()!.confirmed && isOwner() && !isOwnSubscription()) {
+          <button
+            nz-button
+            nz-popconfirm
+            nzPopconfirmTitle="Deactivate this subscription?"
+            (nzOnConfirm)="deactivateSubscription()"
+          >
+            <span nz-icon nzType="stop"></span>
+            Deactivate
+          </button>
+        }
+        @if (isOwnSubscription()) {
+          @if (subscription()!.active) {
+            <button
+              nz-button
+              nz-popconfirm
+              nzPopconfirmTitle="Deactivate this subscription?"
+              (nzOnConfirm)="setInactive()"
+            >
+              <span nz-icon nzType="pause-circle"></span>
+              Deactivate
+            </button>
+          } @else {
+            <button nz-button nzType="primary" (click)="activateSubscription()">
+              <span nz-icon nzType="play-circle"></span>
+              Activate
+            </button>
+          }
+        }
+        @if (expertMode() && isOutgoing() && subscription()!.confirmed && subscription()!.active && !isOwnSubscription()) {
+          <button
+            nz-button
+            nz-popconfirm
+            nzPopconfirmTitle="Set this subscription to inactive? You will stop receiving messages."
+            (nzOnConfirm)="setInactive()"
+          >
+            <span nz-icon nzType="pause-circle"></span>
+            Set Inactive
+          </button>
+        }
+        @if (expertMode() && isOutgoing()) {
+          <button
+            nz-button
+            nzDanger
+            nz-popconfirm
+            nzPopconfirmTitle="Are you sure you want to delete this subscription?"
+            (nzOnConfirm)="deleteSubscription()"
+          >
+            <span nz-icon nzType="delete"></span>
+            Delete
+          </button>
+        }
+      </div>
+    </div>
+
+    <nz-card>
+      <div class="subscription-header">
+        <h2 class="subscription-title">Subscription</h2>
+        <nz-tag [nzColor]="getTypeLabel().color">{{ getTypeLabel().label }}</nz-tag>
+        <nz-tag [nzColor]="getStatusInfo().color">{{ getStatusInfo().label }}</nz-tag>
+      </div>
+
+      <scn-metadata-grid>
+        <scn-metadata-value label="Subscription ID">
+          <span class="mono">{{ subscription()!.subscription_id }}</span>
+        </scn-metadata-value>
+        <scn-metadata-value label="Channel">
+          <a [routerLink]="['/channels', subscription()!.channel_id]" class="channel-link">
+            @if (resolvedChannel()) {
+              <div class="resolved-name">{{ resolvedChannel()!.displayName }}</div>
+            }
+            <div class="resolved-id mono">{{ subscription()!.channel_id }}</div>
+          </a>
+        </scn-metadata-value>
+        <scn-metadata-value label="Channel Internal Name">
+          <span>{{ subscription()!.channel_internal_name }}</span>
+        </scn-metadata-value>
+        <scn-metadata-value label="Subscriber">
+          @if (resolvedSubscriber()) {
+            <div class="resolved-name">{{ resolvedSubscriber()!.displayName }}</div>
+            <div class="resolved-id mono">{{ subscription()!.subscriber_user_id }}</div>
+          } @else {
+            <span class="mono">{{ subscription()!.subscriber_user_id }}</span>
+          }
+        </scn-metadata-value>
+        <scn-metadata-value label="Channel Owner">
+          @if (resolvedOwner()) {
+            <div class="resolved-name">{{ resolvedOwner()!.displayName }}</div>
+            <div class="resolved-id mono">{{ subscription()!.channel_owner_user_id }}</div>
+          } @else {
+            <span class="mono">{{ subscription()!.channel_owner_user_id }}</span>
+          }
+        </scn-metadata-value>
+        <scn-metadata-value label="Confirmed">
+          @if (subscription()!.confirmed) {
+            <nz-tag nzColor="green">Yes</nz-tag>
+          } @else {
+            <nz-tag nzColor="orange">No</nz-tag>
+          }
+        </scn-metadata-value>
+        <scn-metadata-value label="Active">
+          @if (subscription()!.active) {
+            <nz-tag nzColor="green">Yes</nz-tag>
+          } @else {
+            <nz-tag nzColor="red">No</nz-tag>
+          }
+        </scn-metadata-value>
+        <scn-metadata-value label="Created">
+          <div class="timestamp-absolute">{{ subscription()!.timestamp_created | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+          <div class="timestamp-relative">{{ subscription()!.timestamp_created | relativeTime }}</div>
+        </scn-metadata-value>
+      </scn-metadata-grid>
+    </nz-card>
+  } @else {
+    <nz-card>
+      <div class="not-found">
+        <p>Subscription not found</p>
+        <button nz-button nzType="primary" (click)="goBack()">
+          Back to Subscriptions
+        </button>
+      </div>
+    </nz-card>
+  }
+</div>

webapp/src/app/features/subscriptions/subscription-detail/subscription-detail.component.scss

@@ -0,0 +1,68 @@
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 300px;
+}
+
+.header-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.subscription-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.subscription-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.channel-link {
+  text-decoration: none;
+  color: inherit;
+
+  &:hover {
+    .resolved-name {
+      color: #1890ff;
+    }
+  }
+}
+
+.resolved-name {
+  font-weight: 500;
+  color: #333;
+}
+
+.resolved-id {
+  font-size: 11px;
+  color: #999;
+  margin-top: 2px;
+}
+
+.not-found {
+  text-align: center;
+  padding: 48px;
+
+  p {
+    color: #999;
+    margin-bottom: 16px;
+  }
+}
+
+.timestamp-absolute {
+  font-size: 13px;
+  color: #333;
+  white-space: pre;
+}
+
+.timestamp-relative {
+  font-size: 12px;
+  color: #999;
+  white-space: pre;
+}

webapp/src/app/features/subscriptions/subscription-detail/subscription-detail.component.ts

@@ -0,0 +1,214 @@
+import { Component, inject, signal, OnInit } from '@angular/core';
+import { CommonModule, DatePipe } from '@angular/common';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { NzCardModule } from 'ng-zorro-antd/card';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzTagModule } from 'ng-zorro-antd/tag';
+import { NzSpinModule } from 'ng-zorro-antd/spin';
+import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
+import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
+import { ApiService } from '../../../core/services/api.service';
+import { AuthService } from '../../../core/services/auth.service';
+import { NotificationService } from '../../../core/services/notification.service';
+import { SettingsService } from '../../../core/services/settings.service';
+import { ChannelCacheService, ResolvedChannel } from '../../../core/services/channel-cache.service';
+import { UserCacheService, ResolvedUser } from '../../../core/services/user-cache.service';
+import { Subscription } from '../../../core/models';
+import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
+import { MetadataGridComponent, MetadataValueComponent } from '../../../shared/components/metadata-grid';
+
+@Component({
+  selector: 'app-subscription-detail',
+  standalone: true,
+  imports: [
+    CommonModule,
+    DatePipe,
+    RouterLink,
+    NzCardModule,
+    NzButtonModule,
+    NzIconModule,
+    NzTagModule,
+    NzSpinModule,
+    NzPopconfirmModule,
+    NzToolTipModule,
+    RelativeTimePipe,
+    MetadataGridComponent,
+    MetadataValueComponent,
+  ],
+  templateUrl: './subscription-detail.component.html',
+  styleUrl: './subscription-detail.component.scss'
+})
+export class SubscriptionDetailComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private apiService = inject(ApiService);
+  private authService = inject(AuthService);
+  private notification = inject(NotificationService);
+  private settingsService = inject(SettingsService);
+  private channelCacheService = inject(ChannelCacheService);
+  private userCacheService = inject(UserCacheService);
+
+  subscription = signal<Subscription | null>(null);
+  loading = signal(true);
+  resolvedChannel = signal<ResolvedChannel | null>(null);
+  resolvedSubscriber = signal<ResolvedUser | null>(null);
+  resolvedOwner = signal<ResolvedUser | null>(null);
+  expertMode = this.settingsService.expertMode;
+
+  ngOnInit(): void {
+    const subscriptionId = this.route.snapshot.paramMap.get('id');
+    if (subscriptionId) {
+      this.loadSubscription(subscriptionId);
+    }
+  }
+
+  loadSubscription(subscriptionId: string): void {
+    const userId = this.authService.getUserId();
+    if (!userId) return;
+
+    this.loading.set(true);
+    this.apiService.getSubscription(userId, subscriptionId).subscribe({
+      next: (subscription) => {
+        this.subscription.set(subscription);
+        this.loading.set(false);
+        this.resolveChannel(subscription.channel_id);
+        this.resolveSubscriber(subscription.subscriber_user_id);
+        this.resolveOwner(subscription.channel_owner_user_id);
+      },
+      error: () => {
+        this.loading.set(false);
+      }
+    });
+  }
+
+  private resolveChannel(channelId: string): void {
+    this.channelCacheService.resolveChannel(channelId).subscribe(resolved => {
+      this.resolvedChannel.set(resolved);
+    });
+  }
+
+  private resolveSubscriber(userId: string): void {
+    this.userCacheService.resolveUser(userId).subscribe(resolved => {
+      this.resolvedSubscriber.set(resolved);
+    });
+  }
+
+  private resolveOwner(userId: string): void {
+    this.userCacheService.resolveUser(userId).subscribe(resolved => {
+      this.resolvedOwner.set(resolved);
+    });
+  }
+
+  goBack(): void {
+    this.router.navigate(['/subscriptions']);
+  }
+
+  isOutgoing(): boolean {
+    const sub = this.subscription();
+    if (!sub) return false;
+    const userId = this.authService.getUserId();
+    return sub.subscriber_user_id === userId;
+  }
+
+  isOwner(): boolean {
+    const sub = this.subscription();
+    if (!sub) return false;
+    const userId = this.authService.getUserId();
+    return sub.channel_owner_user_id === userId;
+  }
+
+  isOwnSubscription(): boolean {
+    const sub = this.subscription();
+    if (!sub) return false;
+    const userId = this.authService.getUserId();
+    return sub.subscriber_user_id === userId && sub.channel_owner_user_id === userId;
+  }
+
+  getStatusInfo(): { label: string; color: string } {
+    const sub = this.subscription();
+    if (!sub) return { label: 'Unknown', color: 'default' };
+    if (sub.confirmed) {
+      return { label: 'Confirmed', color: 'green' };
+    }
+    return { label: 'Pending', color: 'orange' };
+  }
+
+  getTypeLabel(): { label: string; color: string } {
+    const sub = this.subscription();
+    if (!sub) return { label: 'Unknown', color: 'default' };
+    const userId = this.authService.getUserId();
+    if (sub.subscriber_user_id === sub.channel_owner_user_id) {
+      return { label: 'Own', color: 'green' };
+    }
+    if (sub.subscriber_user_id === userId) {
+      return { label: 'External', color: 'blue' };
+    }
+    return { label: 'Incoming', color: 'purple' };
+  }
+
+  acceptSubscription(): void {
+    const sub = this.subscription();
+    const userId = this.authService.getUserId();
+    if (!sub || !userId) return;
+
+    this.apiService.confirmSubscription(userId, sub.subscription_id, { confirmed: true }).subscribe({
+      next: (updated) => {
+        this.subscription.set(updated);
+        this.notification.success('Subscription accepted');
+      }
+    });
+  }
+
+  activateSubscription(): void {
+    const sub = this.subscription();
+    const userId = this.authService.getUserId();
+    if (!sub || !userId) return;
+
+    this.apiService.confirmSubscription(userId, sub.subscription_id, { active: true }).subscribe({
+      next: (updated) => {
+        this.subscription.set(updated);
+        this.notification.success('Subscription activated');
+      }
+    });
+  }
+
+  deactivateSubscription(): void {
+    const sub = this.subscription();
+    const userId = this.authService.getUserId();
+    if (!sub || !userId) return;
+
+    this.apiService.confirmSubscription(userId, sub.subscription_id, { confirmed: false }).subscribe({
+      next: (updated) => {
+        this.subscription.set(updated);
+        this.notification.success('Subscription deactivated');
+      }
+    });
+  }
+
+  setInactive(): void {
+    const sub = this.subscription();
+    const userId = this.authService.getUserId();
+    if (!sub || !userId) return;
+
+    this.apiService.confirmSubscription(userId, sub.subscription_id, { active: false }).subscribe({
+      next: (updated) => {
+        this.subscription.set(updated);
+        this.notification.success('Subscription set to inactive');
+      }
+    });
+  }
+
+  deleteSubscription(): void {
+    const sub = this.subscription();
+    const userId = this.authService.getUserId();
+    if (!sub || !userId) return;
+
+    this.apiService.deleteSubscription(userId, sub.subscription_id).subscribe({
+      next: () => {
+        this.notification.success('Subscription deleted');
+        this.router.navigate(['/subscriptions']);
+      }
+    });
+  }
+}

webapp/src/app/features/subscriptions/subscription-list/subscription-list.component.html

@@ -42,37 +42,69 @@
     <ng-template #noResultTpl></ng-template>
       <thead>
         <tr>
-          <th nzWidth="10%">Type</th>
-          <th nzWidth="20%">Channel</th>
-          <th nzWidth="20%">Subscriber</th>
-          <th nzWidth="20%">Owner</th>
-          <th nzWidth="10%">Status</th>
-          <th nzWidth="12%">Created</th>
-          <th nzWidth="8%">Actions</th>
+          <th nzWidth="0">ID</th>
+          <th nzWidth="0">Type</th>
+          <th>Channel</th>
+          <th>Subscriber</th>
+          <th>Owner</th>
+          <th nzWidth="0">Confirmation</th>
+          <th nzWidth="0">Active</th>
+          <th nzWidth="0">Created</th>
+          <th nzWidth="0">Actions</th>
         </tr>
       </thead>
       <tbody>
         @for (sub of subscriptions(); track sub.subscription_id) {
-          <tr>
+          <tr class="clickable-row">
             <td>
-              <nz-tag [nzColor]="getTypeLabel(sub).color">
-                {{ getTypeLabel(sub).label }}
-              </nz-tag>
+              <a class="cell-link" [routerLink]="['/subscriptions', sub.subscription_id]">
+                <span class="mono subscription-id">{{ sub.subscription_id }}</span>
+              </a>
             </td>
             <td>
-              <span class="mono">{{ sub.channel_internal_name }}</span>
-            </td>
-            <td>{{ getUserDisplayName(sub.subscriber_user_id) }}</td>
-            <td>{{ getUserDisplayName(sub.channel_owner_user_id) }}</td>
-            <td>
-              <nz-tag [nzColor]="getStatusInfo(sub).color">
-                {{ getStatusInfo(sub).label }}
-              </nz-tag>
+              <a class="cell-link" [routerLink]="['/subscriptions', sub.subscription_id]">
+                <nz-tag [nzColor]="getTypeLabel(sub).color">
+                  {{ getTypeLabel(sub).label }}
+                </nz-tag>
+              </a>
             </td>
             <td>
-              <span nz-tooltip [nzTooltipTitle]="sub.timestamp_created">
-                {{ sub.timestamp_created | relativeTime }}
-              </span>
+              <a class="cell-link" [routerLink]="['/subscriptions', sub.subscription_id]">
+                <div class="cell-name">{{ sub.channel_internal_name }}</div>
+                <div class="cell-id mono">{{ sub.channel_id }}</div>
+              </a>
+            </td>
+            <td>
+              <a class="cell-link" [routerLink]="['/subscriptions', sub.subscription_id]">
+                <div class="cell-name">{{ getUserDisplayName(sub.subscriber_user_id) }}</div>
+                <div class="cell-id mono">{{ sub.subscriber_user_id }}</div>
+              </a>
+            </td>
+            <td>
+              <a class="cell-link" [routerLink]="['/subscriptions', sub.subscription_id]">
+                <div class="cell-name">{{ getUserDisplayName(sub.channel_owner_user_id) }}</div>
+                <div class="cell-id mono">{{ sub.channel_owner_user_id }}</div>
+              </a>
+            </td>
+            <td>
+              <a class="cell-link" [routerLink]="['/subscriptions', sub.subscription_id]">
+                <nz-tag [nzColor]="getConfirmationInfo(sub).color">
+                  {{ getConfirmationInfo(sub).label }}
+                </nz-tag>
+              </a>
+            </td>
+            <td>
+              <a class="cell-link" [routerLink]="['/subscriptions', sub.subscription_id]">
+                <nz-tag [nzColor]="getActiveInfo(sub).color">
+                  {{ getActiveInfo(sub).label }}
+                </nz-tag>
+              </a>
+            </td>
+            <td>
+              <a class="cell-link" [routerLink]="['/subscriptions', sub.subscription_id]">
+                <div class="timestamp-absolute">{{ sub.timestamp_created | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+                <div class="timestamp-relative">{{ sub.timestamp_created | relativeTime }}</div>
+              </a>
             </td>
             <td>
               <div class="action-buttons">
@@ -101,26 +133,55 @@
                     <span nz-icon nzType="close"></span>
                   </button>
                 } @else {
+                  <!-- Own subscriptions: can activate/deactivate -->
+                  @if (isOwnSubscription(sub)) {
+                    @if (sub.active) {
+                      <button
+                        nz-button
+                        nzSize="small"
+                        nz-tooltip
+                        nzTooltipTitle="Deactivate"
+                        nz-popconfirm
+                        nzPopconfirmTitle="Deactivate this subscription?"
+                        (nzOnConfirm)="deactivateSubscription(sub)"
+                      >
+                        <span nz-icon nzType="pause-circle"></span>
+                      </button>
+                    } @else {
+                      <button
+                        nz-button
+                        nzSize="small"
+                        nzType="primary"
+                        nz-tooltip
+                        nzTooltipTitle="Activate"
+                        (click)="activateSubscription(sub)"
+                      >
+                        <span nz-icon nzType="play-circle"></span>
+                      </button>
+                    }
+                  }
                   <!-- Confirmed or outgoing: can revoke -->
-                  <button
-                    nz-button
-                    nzSize="small"
-                    nzDanger
-                    nz-tooltip
-                    nzTooltipTitle="Revoke"
-                    nz-popconfirm
-                    nzPopconfirmTitle="Revoke this subscription?"
-                    (nzOnConfirm)="revokeSubscription(sub)"
-                  >
-                    <span nz-icon nzType="delete"></span>
-                  </button>
+                  @if (expertMode()) {
+                    <button
+                      nz-button
+                      nzSize="small"
+                      nzDanger
+                      nz-tooltip
+                      nzTooltipTitle="Revoke"
+                      nz-popconfirm
+                      nzPopconfirmTitle="Revoke this subscription?"
+                      (nzOnConfirm)="revokeSubscription(sub)"
+                    >
+                      <span nz-icon nzType="delete"></span>
+                    </button>
+                  }
                 }
               </div>
             </td>
           </tr>
         } @empty {
           <tr>
-            <td colspan="7">
+            <td colspan="9">
               <nz-empty nzNotFoundContent="No subscriptions found"></nz-empty>
             </td>
           </tr>

webapp/src/app/features/subscriptions/subscription-list/subscription-list.component.scss

@@ -25,6 +25,30 @@
   gap: 4px;
 }
 
+.clickable-row {
+  cursor: pointer;
+
+  &:hover {
+    background-color: #fafafa;
+  }
+}
+
+.subscription-id {
+  font-size: 11px;
+  color: #999;
+}
+
+.cell-name {
+  font-weight: 500;
+  color: #333;
+}
+
+.cell-id {
+  font-size: 11px;
+  color: #999;
+  margin-top: 2px;
+}
+
 .modal-hint {
   color: #666;
   font-size: 13px;
@@ -36,3 +60,15 @@
   justify-content: center;
   padding: 16px 0;
 }
+
+.timestamp-absolute {
+  font-size: 13px;
+  color: #333;
+  white-space: pre;
+}
+
+.timestamp-relative {
+  font-size: 12px;
+  color: #999;
+  white-space: pre;
+}

webapp/src/app/features/subscriptions/subscription-list/subscription-list.component.ts

@@ -1,5 +1,6 @@
 import { Component, inject, signal, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
+import { Router, RouterLink } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 import { NzTableModule } from 'ng-zorro-antd/table';
 import { NzButtonModule } from 'ng-zorro-antd/button';
@@ -17,6 +18,7 @@ import { NzPaginationModule } from 'ng-zorro-antd/pagination';
 import { ApiService } from '../../../core/services/api.service';
 import { AuthService } from '../../../core/services/auth.service';
 import { NotificationService } from '../../../core/services/notification.service';
+import { SettingsService } from '../../../core/services/settings.service';
 import { UserCacheService, ResolvedUser } from '../../../core/services/user-cache.service';
 import { Subscription, SubscriptionFilter } from '../../../core/models';
 import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
@@ -40,7 +42,9 @@ const TAB_CONFIGS: Record<SubscriptionTab, TabConfig> = {
   standalone: true,
   imports: [
     CommonModule,
+    DatePipe,
     FormsModule,
+    RouterLink,
     NzTableModule,
     NzButtonModule,
     NzIconModule,
@@ -60,11 +64,15 @@ const TAB_CONFIGS: Record<SubscriptionTab, TabConfig> = {
   styleUrl: './subscription-list.component.scss'
 })
 export class SubscriptionListComponent implements OnInit {
+  private router = inject(Router);
   private apiService = inject(ApiService);
   private authService = inject(AuthService);
   private notification = inject(NotificationService);
+  private settingsService = inject(SettingsService);
   private userCacheService = inject(UserCacheService);
 
+  expertMode = this.settingsService.expertMode;
+
   subscriptions = signal<Subscription[]>([]);
   userNames = signal<Map<string, ResolvedUser>>(new Map());
   loading = signal(false);
@@ -155,6 +163,15 @@ export class SubscriptionListComponent implements OnInit {
     return sub.channel_owner_user_id === userId;
   }
 
+  isOwnSubscription(sub: Subscription): boolean {
+    const userId = this.authService.getUserId();
+    return sub.subscriber_user_id === userId && sub.channel_owner_user_id === userId;
+  }
+
+  viewSubscription(sub: Subscription): void {
+    this.router.navigate(['/subscriptions', sub.subscription_id]);
+  }
+
   // Actions
   acceptSubscription(sub: Subscription): void {
     const userId = this.authService.getUserId();
@@ -192,6 +209,30 @@ export class SubscriptionListComponent implements OnInit {
     });
   }
 
+  activateSubscription(sub: Subscription): void {
+    const userId = this.authService.getUserId();
+    if (!userId) return;
+
+    this.apiService.confirmSubscription(userId, sub.subscription_id, { active: true }).subscribe({
+      next: () => {
+        this.notification.success('Subscription activated');
+        this.loadSubscriptions();
+      }
+    });
+  }
+
+  deactivateSubscription(sub: Subscription): void {
+    const userId = this.authService.getUserId();
+    if (!userId) return;
+
+    this.apiService.confirmSubscription(userId, sub.subscription_id, { active: false }).subscribe({
+      next: () => {
+        this.notification.success('Subscription deactivated');
+        this.loadSubscriptions();
+      }
+    });
+  }
+
   // Create subscription
   openCreateModal(): void {
     this.newChannelOwner = '';
@@ -224,13 +265,20 @@ export class SubscriptionListComponent implements OnInit {
     });
   }
 
-  getStatusInfo(sub: Subscription): { label: string; color: string } {
+  getConfirmationInfo(sub: Subscription): { label: string; color: string } {
     if (sub.confirmed) {
       return { label: 'Confirmed', color: 'green' };
     }
     return { label: 'Pending', color: 'orange' };
   }
 
+  getActiveInfo(sub: Subscription): { label: string; color: string } {
+    if (sub.active) {
+      return { label: 'Active', color: 'green' };
+    }
+    return { label: 'Inactive', color: 'default' };
+  }
+
   getTypeLabel(sub: Subscription): { label: string; color: string } {
     const userId = this.authService.getUserId();
     if (sub.subscriber_user_id === sub.channel_owner_user_id) {

webapp/src/app/layout/main-layout/main-layout.component.html

@@ -56,7 +56,20 @@
         </span>
       </div>
       <div class="header-right">
-        <span class="user-id mono">{{ userId }}</span>
+        <div class="expert-mode-toggle">
+          <nz-switch
+            [ngModel]="expertMode()"
+            (ngModelChange)="settingsService.setExpertMode($event)"
+            nzSize="small"
+          ></nz-switch>
+          <span class="expert-mode-label">Expert</span>
+        </div>
+        <div class="user-info">
+          <span class="user-id mono">{{ userId }}</span>
+          @if (currentKey()) {
+            <span class="key-id mono">{{ currentKey()!.keytoken_id }}</span>
+          }
+        </div>
         <button nz-button nzType="text" nzDanger (click)="logout()">
           <span nz-icon nzType="logout"></span>
           Logout

webapp/src/app/layout/main-layout/main-layout.component.scss

@@ -51,6 +51,17 @@
   align-items: center;
 }
 
+.expert-mode-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  .expert-mode-label {
+    font-size: 13px;
+    color: #666;
+  }
+}
+
 .header-trigger {
   font-size: 18px;
   cursor: pointer;
@@ -66,11 +77,23 @@
   display: flex;
   align-items: center;
   gap: 16px;
+}
+
+.user-info {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  line-height: 1.3;
 
   .user-id {
     color: #666;
     font-size: 13px;
   }
+
+  .key-id {
+    color: #999;
+    font-size: 13px;
+  }
 }
 
 .content-area {

webapp/src/app/layout/main-layout/main-layout.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, signal } from '@angular/core';
+import { Component, inject, signal, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterOutlet, RouterLink, Router } from '@angular/router';
 import { NzLayoutModule } from 'ng-zorro-antd/layout';
@@ -6,13 +6,19 @@ import { NzMenuModule } from 'ng-zorro-antd/menu';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import { FormsModule } from '@angular/forms';
 import { AuthService } from '../../core/services/auth.service';
+import { SettingsService } from '../../core/services/settings.service';
+import { ApiService } from '../../core/services/api.service';
+import { KeyToken } from '../../core/models';
 
 @Component({
   selector: 'app-main-layout',
   standalone: true,
   imports: [
     CommonModule,
+    FormsModule,
     RouterOutlet,
     RouterLink,
     NzLayoutModule,
@@ -20,16 +26,34 @@ import { AuthService } from '../../core/services/auth.service';
     NzIconModule,
     NzButtonModule,
     NzDropDownModule,
+    NzSwitchModule,
   ],
   templateUrl: './main-layout.component.html',
   styleUrl: './main-layout.component.scss'
 })
-export class MainLayoutComponent {
+export class MainLayoutComponent implements OnInit {
   private authService = inject(AuthService);
+  private apiService = inject(ApiService);
   private router = inject(Router);
+  settingsService = inject(SettingsService);
 
   isCollapsed = signal(false);
   userId = this.authService.getUserId();
+  currentKey = signal<KeyToken | null>(null);
+  expertMode = this.settingsService.expertMode;
+
+  ngOnInit(): void {
+    this.loadCurrentKey();
+  }
+
+  private loadCurrentKey(): void {
+    const userId = this.userId;
+    if (!userId) return;
+
+    this.apiService.getCurrentKey(userId).subscribe({
+      next: (key) => this.currentKey.set(key)
+    });
+  }
 
   toggleCollapsed(): void {
     this.isCollapsed.update(v => !v);

webapp/src/app/shared/components/metadata-grid/index.ts

@@ -0,0 +1,2 @@
+export { MetadataGridComponent } from './metadata-grid.component';
+export { MetadataValueComponent } from './metadata-value.component';

webapp/src/app/shared/components/metadata-grid/metadata-grid.component.ts

@@ -0,0 +1,74 @@
+import { Component, ContentChildren, QueryList, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MetadataValueComponent } from './metadata-value.component';
+
+@Component({
+  selector: 'scn-metadata-grid',
+  standalone: true,
+  imports: [CommonModule],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="scn-metadata-grid">
+      @for (item of items; track item; let first = $first; let last = $last) {
+        <label class="scn-metadata-label" [class.first]="first" [class.last]="last">{{ item.label }}</label>
+        <div class="scn-metadata-value" [class.first]="first" [class.last]="last">
+          <ng-container [ngTemplateOutlet]="item.content"></ng-container>
+        </div>
+      }
+    </div>
+  `,
+  styles: [`
+    .scn-metadata-grid {
+      display: grid;
+      grid-template-columns: minmax(120px, auto) 1fr;
+      border-radius: 4px;
+      overflow: hidden;
+    }
+
+    .scn-metadata-label {
+      font-size: 14px;
+      color: rgba(0, 0, 0, 0.45);
+      padding: 12px 16px;
+      background: #fafafa;
+      border: 1px solid #f0f0f0;
+      border-right: none;
+      border-top: none;
+    }
+
+    .scn-metadata-label.first {
+      border-top: 1px solid #f0f0f0;
+      border-top-left-radius: 4px;
+    }
+
+    .scn-metadata-label.last {
+      border-bottom-left-radius: 4px;
+    }
+
+    .scn-metadata-value {
+      font-size: 14px;
+      color: rgba(0, 0, 0, 0.85);
+      padding: 12px 16px;
+      background: #fff;
+      border: 1px solid #f0f0f0;
+      border-top: none;
+      word-break: break-word;
+    }
+
+    .scn-metadata-value.first {
+      border-top: 1px solid #f0f0f0;
+      border-top-right-radius: 4px;
+    }
+
+    .scn-metadata-value.last {
+      border-bottom-right-radius: 4px;
+    }
+  `]
+})
+export class MetadataGridComponent {
+  @ContentChildren(MetadataValueComponent) children!: QueryList<MetadataValueComponent>;
+
+  get items(): MetadataValueComponent[] {
+    return this.children?.toArray() ?? [];
+  }
+}

webapp/src/app/shared/components/metadata-grid/metadata-value.component.ts

@@ -0,0 +1,20 @@
+import { Component, Input, ViewChild, TemplateRef, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  selector: 'scn-metadata-value',
+  standalone: true,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <ng-template #contentTemplate><ng-content></ng-content></ng-template>
+  `,
+})
+export class MetadataValueComponent {
+  @Input() label: string = '';
+
+  @ViewChild('contentTemplate', { static: true }) contentTemplate!: TemplateRef<any>;
+
+  get content(): TemplateRef<any> {
+    return this.contentTemplate;
+  }
+}

webapp/src/styles.scss

@@ -67,15 +67,28 @@ body {
   align-items: center;
 }
 
-// Clickable row
+// Clickable row with anchor link for proper middle-click support
 .clickable-row {
-  cursor: pointer;
-
   &:hover {
     background-color: #fafafa;
   }
 }
 
+td:has(> a.cell-link) {
+  padding: 0 !important;
+}
+
+a.cell-link {
+  display: block;
+  padding: 8px;
+  color: inherit;
+  text-decoration: none;
+
+  &:hover {
+    color: inherit;
+  }
+}
+
 // Status colors
 .status-confirmed {
   color: #52c41a;
@@ -150,3 +163,7 @@ nz-card {
     flex-grow: 1;
   }
 }
+
+th {
+  white-space: pre;
+}