Implement Semble cards and collections to Margin

backend/internal/api/collections.go

···
 package api
 
 import (
+	"context"
 	"encoding/json"
+	"fmt"
 	"log"
 	"net/http"
 	"net/url"
···
 		return
 	}
 
-	enrichedItems := make([]EnrichedCollectionItem, 0, len(items))
+	var sembleURIs []string
+	for _, item := range items {
+		if strings.Contains(item.AnnotationURI, "network.cosmik.card") {
+			sembleURIs = append(sembleURIs, item.AnnotationURI)
+		}
+	}
+
+	if len(sembleURIs) > 0 {
+		ctx, cancel := context.WithTimeout(r.Context(), 2*time.Second)
+		defer cancel()
+		ensureSembleCardsIndexed(ctx, s.db, sembleURIs)
+	}
 
 	session, err := s.refresher.GetSessionWithAutoRefresh(r)
 	viewerDID := ""
···
 		viewerDID = session.DID
 	}
 
-	for _, item := range items {
-		enriched := EnrichedCollectionItem{
-			URI:           item.URI,
-			CollectionURI: item.CollectionURI,
-			AnnotationURI: item.AnnotationURI,
-			Position:      item.Position,
-			CreatedAt:     item.CreatedAt,
-		}
-
-		if strings.Contains(item.AnnotationURI, "at.margin.annotation") {
-			enriched.Type = "annotation"
-			if a, err := s.db.GetAnnotationByURI(item.AnnotationURI); err == nil {
-				hydrated, _ := hydrateAnnotations(s.db, []db.Annotation{*a}, viewerDID)
-				if len(hydrated) > 0 {
-					enriched.Annotation = &hydrated[0]
-				}
-			}
-		} else if strings.Contains(item.AnnotationURI, "at.margin.highlight") {
-			enriched.Type = "highlight"
-			if h, err := s.db.GetHighlightByURI(item.AnnotationURI); err == nil {
-				hydrated, _ := hydrateHighlights(s.db, []db.Highlight{*h}, viewerDID)
-				if len(hydrated) > 0 {
-					enriched.Highlight = &hydrated[0]
-				}
-			}
-		} else if strings.Contains(item.AnnotationURI, "at.margin.bookmark") {
-			enriched.Type = "bookmark"
-			if b, err := s.db.GetBookmarkByURI(item.AnnotationURI); err == nil {
-				hydrated, _ := hydrateBookmarks(s.db, []db.Bookmark{*b}, viewerDID)
-				if len(hydrated) > 0 {
-					enriched.Bookmark = &hydrated[0]
-				}
-			} else {
-				log.Printf("GetBookmarkByURI failed for %s: %v\n", item.AnnotationURI, err)
-			}
-		} else {
-			log.Printf("Unknown annotation type for URI: %s\n", item.AnnotationURI)
-		}
-
-		if enriched.Annotation != nil || enriched.Highlight != nil || enriched.Bookmark != nil {
-			enrichedItems = append(enrichedItems, enriched)
-		}
+	enrichedItems, err := hydrateCollectionItems(s.db, items, viewerDID)
+	if err != nil {
+		log.Printf("Hydration error: %v", err)
+		enrichedItems = []APICollectionItem{}
 	}
 
 	w.Header().Set("Content-Type", "application/json")
···
 	w.WriteHeader(http.StatusOK)
 	json.NewEncoder(w).Encode(map[string]string{"status": "deleted"})
 }
+
+func (s *CollectionService) GetCollection(w http.ResponseWriter, r *http.Request) {
+	uri := r.URL.Query().Get("uri")
+	if uri == "" {
+		http.Error(w, "URI required", http.StatusBadRequest)
+		return
+	}
+
+	collection, err := s.db.GetCollectionByURI(uri)
+	if err != nil {
+		if strings.Contains(uri, "at.margin.collection") && strings.HasPrefix(uri, "at://") {
+			uriWithoutScheme := strings.TrimPrefix(uri, "at://")
+			parts := strings.Split(uriWithoutScheme, "/")
+			if len(parts) >= 3 {
+				did := parts[0]
+				rkey := parts[len(parts)-1]
+				sembleURI := fmt.Sprintf("at://%s/network.cosmik.collection/%s", did, rkey)
+
+				collection, err = s.db.GetCollectionByURI(sembleURI)
+			}
+		}
+	}
+
+	if err != nil || collection == nil {
+		http.Error(w, "Collection not found", http.StatusNotFound)
+		return
+	}
+
+	profiles := fetchProfilesForDIDs([]string{collection.AuthorDID})
+	creator := profiles[collection.AuthorDID]
+
+	icon := ""
+	if collection.Icon != nil {
+		icon = *collection.Icon
+	}
+	desc := ""
+	if collection.Description != nil {
+		desc = *collection.Description
+	}
+
+	apiCollection := APICollection{
+		URI:         collection.URI,
+		Name:        collection.Name,
+		Description: desc,
+		Icon:        icon,
+		Creator:     creator,
+		CreatedAt:   collection.CreatedAt,
+		IndexedAt:   collection.IndexedAt,
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(apiCollection)
+}

backend/internal/api/handler.go

···
 package api
 
 import (
+	"context"
 	"encoding/json"
+	"fmt"
 	"io"
 	"log"
 	"net/http"
···
 		r.Get("/collections/{collection}/items", collectionService.GetCollectionItems)
 		r.Delete("/collections/items", collectionService.RemoveCollectionItem)
 		r.Get("/collections/containing", collectionService.GetAnnotationCollections)
+		r.Get("/collection", collectionService.GetCollection)
 		r.Post("/sync", h.SyncAll)
 
 		r.Get("/targets", h.GetByTarget)
···
 	limit := parseIntParam(r, "limit", 50)
 	tag := r.URL.Query().Get("tag")
 	creator := r.URL.Query().Get("creator")
+	feedType := r.URL.Query().Get("type")
 
 	viewerDID := h.getViewerDID(r)
 
-	if viewerDID != "" && (creator == viewerDID || (creator == "" && tag == "")) {
+	if viewerDID != "" && (creator == viewerDID || (creator == "" && tag == "" && feedType == "my-feed")) {
 		if creator == viewerDID {
 			h.serveUserFeedFromPDS(w, r, viewerDID, tag, limit)
 			return
···
 	var collectionItems []db.CollectionItem
 	var err error
 
+	motivation := r.URL.Query().Get("motivation")
+
 	if tag != "" {
 		if creator != "" {
-			annotations, _ = h.db.GetAnnotationsByTagAndAuthor(tag, creator, limit, 0)
-			highlights, _ = h.db.GetHighlightsByTagAndAuthor(tag, creator, limit, 0)
-			bookmarks, _ = h.db.GetBookmarksByTagAndAuthor(tag, creator, limit, 0)
+			if motivation == "" || motivation == "commenting" {
+				annotations, _ = h.db.GetAnnotationsByTagAndAuthor(tag, creator, limit, 0)
+			}
+			if motivation == "" || motivation == "highlighting" {
+				highlights, _ = h.db.GetHighlightsByTagAndAuthor(tag, creator, limit, 0)
+			}
+			if motivation == "" || motivation == "bookmarking" {
+				bookmarks, _ = h.db.GetBookmarksByTagAndAuthor(tag, creator, limit, 0)
+			}
 			collectionItems = []db.CollectionItem{}
 		} else {
-			annotations, _ = h.db.GetAnnotationsByTag(tag, limit, 0)
-			highlights, _ = h.db.GetHighlightsByTag(tag, limit, 0)
-			bookmarks, _ = h.db.GetBookmarksByTag(tag, limit, 0)
+			if motivation == "" || motivation == "commenting" {
+				annotations, _ = h.db.GetAnnotationsByTag(tag, limit, 0)
+			}
+			if motivation == "" || motivation == "highlighting" {
+				highlights, _ = h.db.GetHighlightsByTag(tag, limit, 0)
+			}
+			if motivation == "" || motivation == "bookmarking" {
+				bookmarks, _ = h.db.GetBookmarksByTag(tag, limit, 0)
+			}
 			collectionItems = []db.CollectionItem{}
 		}
 	} else if creator != "" {
-		annotations, _ = h.db.GetAnnotationsByAuthor(creator, limit, 0)
-		highlights, _ = h.db.GetHighlightsByAuthor(creator, limit, 0)
-		bookmarks, _ = h.db.GetBookmarksByAuthor(creator, limit, 0)
+		if motivation == "" || motivation == "commenting" {
+			annotations, _ = h.db.GetAnnotationsByAuthor(creator, limit, 0)
+		}
+		if motivation == "" || motivation == "highlighting" {
+			highlights, _ = h.db.GetHighlightsByAuthor(creator, limit, 0)
+		}
+		if motivation == "" || motivation == "bookmarking" {
+			bookmarks, _ = h.db.GetBookmarksByAuthor(creator, limit, 0)
+		}
 		collectionItems = []db.CollectionItem{}
 	} else {
-		annotations, _ = h.db.GetRecentAnnotations(limit, 0)
-		highlights, _ = h.db.GetRecentHighlights(limit, 0)
-		bookmarks, _ = h.db.GetRecentBookmarks(limit, 0)
-		collectionItems, err = h.db.GetRecentCollectionItems(limit, 0)
-		if err != nil {
-			log.Printf("Error fetching collection items: %v\n", err)
+		if motivation == "" || motivation == "commenting" {
+			annotations, _ = h.db.GetRecentAnnotations(limit, 0)
+		}
+		if motivation == "" || motivation == "highlighting" {
+			highlights, _ = h.db.GetRecentHighlights(limit, 0)
+		}
+		if motivation == "" || motivation == "bookmarking" {
+			bookmarks, _ = h.db.GetRecentBookmarks(limit, 0)
+		}
+		if motivation == "" {
+			collectionItems, err = h.db.GetRecentCollectionItems(limit, 0)
+			if err != nil {
+				log.Printf("Error fetching collection items: %v\n", err)
+			}
 		}
 	}
 
···
 	authHighs, _ := hydrateHighlights(h.db, highlights, viewerDID)
 	authBooks, _ := hydrateBookmarks(h.db, bookmarks, viewerDID)
 
+	if len(collectionItems) > 0 {
+		var sembleURIs []string
+		for _, item := range collectionItems {
+			if strings.Contains(item.AnnotationURI, "network.cosmik.card") {
+				sembleURIs = append(sembleURIs, item.AnnotationURI)
+			}
+		}
+		if len(sembleURIs) > 0 {
+			ctx, cancel := context.WithTimeout(r.Context(), 2*time.Second)
+			defer cancel()
+			ensureSembleCardsIndexed(ctx, h.db, sembleURIs)
+		}
+	}
+
 	authCollectionItems, _ := hydrateCollectionItems(h.db, collectionItems, viewerDID)
 
 	var feed []interface{}
···
 		feed = append(feed, ci)
 	}
 
-	sortFeed(feed)
+	if feedType != "" && feedType != "all" && feedType != "my-feed" {
+		var filtered []interface{}
+		for _, item := range feed {
+			isSemble := false
+			var uri string
+			switch v := item.(type) {
+			case APIAnnotation:
+				uri = v.ID
+			case APIHighlight:
+				uri = v.ID
+			case APIBookmark:
+				uri = v.ID
+			case APICollectionItem:
+				uri = v.ID
+			}
+			if strings.Contains(uri, "network.cosmik") {
+				isSemble = true
+			}
+
+			if feedType == "semble" && isSemble {
+				filtered = append(filtered, item)
+			} else if feedType == "margin" && !isSemble {
+				filtered = append(filtered, item)
+			} else if feedType == "popular" {
+				filtered = append(filtered, item)
+			}
+		}
+		feed = filtered
+	}
+
+	if feedType == "popular" {
+		sortFeedByPopularity(feed)
+	} else {
+		sortFeed(feed)
+	}
 
 	if len(feed) > limit {
 		feed = feed[:limit]
···
 			h.db.CreateBookmark(&b)
 		}
 	}()
+
+	collectionItems := []db.CollectionItem{}
+	if tag == "" {
+		items, err := h.db.GetCollectionItemsByAuthor(did)
+		if err != nil {
+			log.Printf("Error fetching collection items for user feed: %v", err)
+		} else {
+			collectionItems = items
+		}
+	}
+
+	if len(collectionItems) > 0 {
+		var sembleURIs []string
+		for _, item := range collectionItems {
+			if strings.Contains(item.AnnotationURI, "network.cosmik.card") {
+				sembleURIs = append(sembleURIs, item.AnnotationURI)
+			}
+		}
+		if len(sembleURIs) > 0 {
+			ctx, cancel := context.WithTimeout(r.Context(), 2*time.Second)
+			defer cancel()
+			ensureSembleCardsIndexed(ctx, h.db, sembleURIs)
+		}
+	}
 
 	authAnnos, _ := hydrateAnnotations(h.db, annotations, did)
 	authHighs, _ := hydrateHighlights(h.db, highlights, did)
 	authBooks, _ := hydrateBookmarks(h.db, bookmarks, did)
+	authCollectionItems, _ := hydrateCollectionItems(h.db, collectionItems, did)
 
 	var feed []interface{}
 	for _, a := range authAnnos {
···
 	}
 	for _, b := range authBooks {
 		feed = append(feed, b)
+	}
+	for _, ci := range authCollectionItems {
+		feed = append(feed, ci)
 	}
 
 	sortFeed(feed)
···
 	}
 }
 
+func sortFeedByPopularity(feed []interface{}) {
+	for i := 0; i < len(feed); i++ {
+		for j := i + 1; j < len(feed); j++ {
+			p1 := getPopularity(feed[i])
+			p2 := getPopularity(feed[j])
+			if p1 < p2 {
+				feed[i], feed[j] = feed[j], feed[i]
+			}
+		}
+	}
+}
+
+func getPopularity(item interface{}) int {
+	switch v := item.(type) {
+	case APIAnnotation:
+		return v.LikeCount + v.ReplyCount
+	case APIHighlight:
+		return v.LikeCount + v.ReplyCount
+	case APIBookmark:
+		return v.LikeCount + v.ReplyCount
+	case APICollectionItem:
+		pop := 0
+		if v.Annotation != nil {
+			pop += v.Annotation.LikeCount + v.Annotation.ReplyCount
+		}
+		if v.Highlight != nil {
+			pop += v.Highlight.LikeCount + v.Highlight.ReplyCount
+		}
+		if v.Bookmark != nil {
+			pop += v.Bookmark.LikeCount + v.Bookmark.ReplyCount
+		}
+		return pop
+	default:
+		return 0
+	}
+}
+
 func (h *Handler) GetAnnotation(w http.ResponseWriter, r *http.Request) {
 	uri := r.URL.Query().Get("uri")
 	if uri == "" {
···
 			if enriched, _ := hydrateHighlights(h.db, []db.Highlight{*highlight}, h.getViewerDID(r)); len(enriched) > 0 {
 				serveResponse(enriched[0], "http://www.w3.org/ns/anno.jsonld")
 				return
+			}
+		}
+	}
+
+	if strings.Contains(uri, "at.margin.annotation") || strings.Contains(uri, "at.margin.bookmark") {
+		if strings.HasPrefix(uri, "at://") {
+			uriWithoutScheme := strings.TrimPrefix(uri, "at://")
+			parts := strings.Split(uriWithoutScheme, "/")
+			if len(parts) >= 3 {
+				did := parts[0]
+				rkey := parts[len(parts)-1]
+
+				sembleURI := fmt.Sprintf("at://%s/network.cosmik.card/%s", did, rkey)
+
+				if annotation, err := h.db.GetAnnotationByURI(sembleURI); err == nil {
+					if enriched, _ := hydrateAnnotations(h.db, []db.Annotation{*annotation}, h.getViewerDID(r)); len(enriched) > 0 {
+						serveResponse(enriched[0], "http://www.w3.org/ns/anno.jsonld")
+						return
+					}
+				}
+
+				if bookmark, err := h.db.GetBookmarkByURI(sembleURI); err == nil {
+					if enriched, _ := hydrateBookmarks(h.db, []db.Bookmark{*bookmark}, h.getViewerDID(r)); len(enriched) > 0 {
+						serveResponse(enriched[0], "http://www.w3.org/ns/anno.jsonld")
+						return
+					}
+				}
 			}
 		}
 	}
···
 	viewerDID := h.getViewerDID(r)
 
 	if offset == 0 && viewerDID != "" && did == viewerDID {
-		raw, err := h.FetchLatestUserRecords(r, did, xrpc.CollectionAnnotation, limit)
-		if err == nil {
-			for _, r := range raw {
-				if a, ok := r.(*db.Annotation); ok {
-					annotations = append(annotations, *a)
-				}
+		go func() {
+			if _, err := h.FetchLatestUserRecords(r, did, xrpc.CollectionAnnotation, limit); err != nil {
+				log.Printf("Background sync error (annotations): %v", err)
 			}
-			go func() {
-				for _, a := range annotations {
-					h.db.CreateAnnotation(&a)
-				}
-			}()
-		} else {
-			log.Printf("PDS Fetch Error (User Annos): %v", err)
-			annotations, err = h.db.GetAnnotationsByAuthor(did, limit, offset)
-		}
-	} else {
-		annotations, err = h.db.GetAnnotationsByAuthor(did, limit, offset)
+		}()
 	}
+
+	annotations, err = h.db.GetAnnotationsByAuthor(did, limit, offset)
 
 	if err != nil {
 		http.Error(w, err.Error(), http.StatusInternalServerError)
···
 	viewerDID := h.getViewerDID(r)
 
 	if offset == 0 && viewerDID != "" && did == viewerDID {
-		raw, err := h.FetchLatestUserRecords(r, did, xrpc.CollectionHighlight, limit)
-		if err == nil {
-			for _, r := range raw {
-				if hi, ok := r.(*db.Highlight); ok {
-					highlights = append(highlights, *hi)
-				}
+		go func() {
+			if _, err := h.FetchLatestUserRecords(r, did, xrpc.CollectionHighlight, limit); err != nil {
+				log.Printf("Background sync error (highlights): %v", err)
 			}
-			go func() {
-				for _, hi := range highlights {
-					h.db.CreateHighlight(&hi)
-				}
-			}()
-		} else {
-			log.Printf("PDS Fetch Error (User Highs): %v", err)
-			highlights, err = h.db.GetHighlightsByAuthor(did, limit, offset)
-		}
-	} else {
-		highlights, err = h.db.GetHighlightsByAuthor(did, limit, offset)
+		}()
 	}
+
+	highlights, err = h.db.GetHighlightsByAuthor(did, limit, offset)
 
 	if err != nil {
 		http.Error(w, err.Error(), http.StatusInternalServerError)
···
 	viewerDID := h.getViewerDID(r)
 
 	if offset == 0 && viewerDID != "" && did == viewerDID {
-		raw, err := h.FetchLatestUserRecords(r, did, xrpc.CollectionBookmark, limit)
-		if err == nil {
-			for _, r := range raw {
-				if b, ok := r.(*db.Bookmark); ok {
-					bookmarks = append(bookmarks, *b)
-				}
+		go func() {
+			if _, err := h.FetchLatestUserRecords(r, did, xrpc.CollectionBookmark, limit); err != nil {
+				log.Printf("Background sync error (bookmarks): %v", err)
 			}
-			go func() {
-				for _, b := range bookmarks {
-					h.db.CreateBookmark(&b)
-				}
-			}()
-		} else {
-			log.Printf("PDS Fetch Error (User Books): %v", err)
-			bookmarks, err = h.db.GetBookmarksByAuthor(did, limit, offset)
-		}
-	} else {
-		bookmarks, err = h.db.GetBookmarksByAuthor(did, limit, offset)
+		}()
 	}
+
+	bookmarks, err = h.db.GetBookmarksByAuthor(did, limit, offset)
 
 	if err != nil {
 		http.Error(w, err.Error(), http.StatusInternalServerError)

backend/internal/api/hydration.go

···
 			highlightURIs = append(highlightURIs, item.AnnotationURI)
 		} else if strings.Contains(item.AnnotationURI, "at.margin.bookmark") {
 			bookmarkURIs = append(bookmarkURIs, item.AnnotationURI)
+		} else if strings.Contains(item.AnnotationURI, "network.cosmik.card") {
+			annotationURIs = append(annotationURIs, item.AnnotationURI)
+			bookmarkURIs = append(bookmarkURIs, item.AnnotationURI)
 		}
 	}
 
···
 			apiItem.Highlight = &val
 		} else if val, ok := bookmarksMap[item.AnnotationURI]; ok {
 			apiItem.Bookmark = &val
+		} else if strings.Contains(item.AnnotationURI, "network.cosmik.card") {
+			apiItem.Annotation = &APIAnnotation{
+				ID:   item.AnnotationURI,
+				Type: "Semble Card",
+				Target: APITarget{
+					Source: "https://semble.so",
+					Title:  "Content Unavailable",
+				},
+				CreatedAt: item.CreatedAt,
+				Author:    profiles[item.AuthorDID],
+			}
 		}
 
 		result[i] = apiItem

backend/internal/api/semble_fetch.go

···
+package api
+
+import (
+	"context"
+	"encoding/json"
+	"fmt"
+	"log"
+	"net/http"
+	"strings"
+	"sync"
+	"time"
+
+	"margin.at/internal/db"
+	"margin.at/internal/xrpc"
+)
+
+func ensureSembleCardsIndexed(ctx context.Context, database *db.DB, uris []string) {
+	if len(uris) == 0 || database == nil {
+		return
+	}
+
+	uniq := make(map[string]struct{}, len(uris))
+	deduped := make([]string, 0, len(uris))
+	for _, u := range uris {
+		if u == "" {
+			continue
+		}
+		if _, ok := uniq[u]; ok {
+			continue
+		}
+		uniq[u] = struct{}{}
+		deduped = append(deduped, u)
+	}
+	if len(deduped) == 0 {
+		return
+	}
+
+	existingAnnos, _ := database.GetAnnotationsByURIs(deduped)
+	existingBooks, _ := database.GetBookmarksByURIs(deduped)
+
+	foundSet := make(map[string]bool, len(existingAnnos)+len(existingBooks))
+	for _, a := range existingAnnos {
+		foundSet[a.URI] = true
+	}
+	for _, b := range existingBooks {
+		foundSet[b.URI] = true
+	}
+
+	missing := make([]string, 0)
+	for _, u := range deduped {
+		if !foundSet[u] {
+			missing = append(missing, u)
+		}
+	}
+	if len(missing) == 0 {
+		return
+	}
+
+	log.Printf("Active Cache: Fetching %d missing Semble cards...", len(missing))
+	fetchAndIndexSembleCards(ctx, database, missing)
+}
+
+func fetchAndIndexSembleCards(ctx context.Context, database *db.DB, uris []string) {
+	sem := make(chan struct{}, 5)
+	var wg sync.WaitGroup
+
+	for _, uri := range uris {
+		select {
+		case <-ctx.Done():
+			return
+		default:
+		}
+
+		wg.Add(1)
+		go func(u string) {
+			defer wg.Done()
+
+			select {
+			case sem <- struct{}{}:
+				defer func() { <-sem }()
+			case <-ctx.Done():
+				return
+			}
+
+			if err := fetchSembleCard(ctx, database, u); err != nil {
+				if ctx.Err() == nil {
+					log.Printf("Failed to lazy fetch card %s: %v", u, err)
+				}
+			}
+		}(uri)
+	}
+
+	done := make(chan struct{})
+	go func() {
+		wg.Wait()
+		close(done)
+	}()
+
+	select {
+	case <-done:
+	case <-ctx.Done():
+		return
+	}
+}
+
+func fetchSembleCard(ctx context.Context, database *db.DB, uri string) error {
+	if database == nil {
+		return fmt.Errorf("nil database")
+	}
+
+	if !strings.HasPrefix(uri, "at://") {
+		return fmt.Errorf("invalid uri")
+	}
+	uriWithoutScheme := strings.TrimPrefix(uri, "at://")
+	parts := strings.Split(uriWithoutScheme, "/")
+	if len(parts) < 3 {
+		return fmt.Errorf("invalid uri parts: expected at least 3 parts")
+	}
+	did, collection, rkey := parts[0], parts[1], parts[2]
+
+	pds, err := xrpc.ResolveDIDToPDS(did)
+	if err != nil {
+		return fmt.Errorf("failed to resolve PDS: %w", err)
+	}
+
+	client := &http.Client{Timeout: 10 * time.Second}
+	url := fmt.Sprintf("%s/xrpc/com.atproto.repo.getRecord?repo=%s&collection=%s&rkey=%s", pds, did, collection, rkey)
+
+	req, err := http.NewRequestWithContext(ctx, "GET", url, nil)
+	if err != nil {
+		return err
+	}
+
+	resp, err := client.Do(req)
+	if err != nil {
+		return fmt.Errorf("failed to fetch record: %w", err)
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != 200 {
+		return fmt.Errorf("unexpected status %d", resp.StatusCode)
+	}
+
+	var output xrpc.GetRecordOutput
+	if err := json.NewDecoder(resp.Body).Decode(&output); err != nil {
+		return err
+	}
+
+	var card xrpc.SembleCard
+	if err := json.Unmarshal(output.Value, &card); err != nil {
+		return err
+	}
+
+	createdAt := card.GetCreatedAtTime()
+	content, err := card.ParseContent()
+	if err != nil {
+		return err
+	}
+
+	switch card.Type {
+	case "NOTE":
+		note, ok := content.(*xrpc.SembleNoteContent)
+		if !ok {
+			return fmt.Errorf("invalid note content")
+		}
+
+		targetSource := card.URL
+		if targetSource == "" {
+			return fmt.Errorf("missing target source")
+		}
+
+		targetHash := db.HashURL(targetSource)
+		motivation := "commenting"
+		bodyValue := note.Text
+
+		annotation := &db.Annotation{
+			URI:          uri,
+			AuthorDID:    did,
+			Motivation:   motivation,
+			BodyValue:    &bodyValue,
+			TargetSource: targetSource,
+			TargetHash:   targetHash,
+			CreatedAt:    createdAt,
+			IndexedAt:    time.Now(),
+		}
+		return database.CreateAnnotation(annotation)
+
+	case "URL":
+		urlContent, ok := content.(*xrpc.SembleURLContent)
+		if !ok {
+			return fmt.Errorf("invalid url content")
+		}
+
+		source := urlContent.URL
+		if source == "" {
+			return fmt.Errorf("missing source")
+		}
+		sourceHash := db.HashURL(source)
+
+		var titlePtr *string
+		if urlContent.Metadata != nil && urlContent.Metadata.Title != "" {
+			t := urlContent.Metadata.Title
+			titlePtr = &t
+		}
+
+		bookmark := &db.Bookmark{
+			URI:        uri,
+			AuthorDID:  did,
+			Source:     source,
+			SourceHash: sourceHash,
+			Title:      titlePtr,
+			CreatedAt:  createdAt,
+			IndexedAt:  time.Now(),
+		}
+		return database.CreateBookmark(bookmark)
+	}
+
+	return nil
+}

backend/internal/firehose/ingester.go

···
 )
 
 const (
-	CollectionAnnotation     = "at.margin.annotation"
-	CollectionHighlight      = "at.margin.highlight"
-	CollectionBookmark       = "at.margin.bookmark"
-	CollectionReply          = "at.margin.reply"
-	CollectionLike           = "at.margin.like"
-	CollectionCollection     = "at.margin.collection"
-	CollectionCollectionItem = "at.margin.collectionItem"
-	CollectionProfile        = "at.margin.profile"
+	CollectionAnnotation       = "at.margin.annotation"
+	CollectionHighlight        = "at.margin.highlight"
+	CollectionBookmark         = "at.margin.bookmark"
+	CollectionReply            = "at.margin.reply"
+	CollectionLike             = "at.margin.like"
+	CollectionCollection       = "at.margin.collection"
+	CollectionCollectionItem   = "at.margin.collectionItem"
+	CollectionProfile          = "at.margin.profile"
+	CollectionSembleCard       = "network.cosmik.card"
+	CollectionSembleCollection = "network.cosmik.collection"
 )
 
 var RelayURL = "wss://jetstream2.us-east.bsky.network/subscribe"
···
 	i.RegisterHandler(CollectionCollection, i.handleCollection)
 	i.RegisterHandler(CollectionCollectionItem, i.handleCollectionItem)
 	i.RegisterHandler(CollectionProfile, i.handleProfile)
+	i.RegisterHandler(CollectionSembleCard, i.handleSembleCard)
+	i.RegisterHandler(CollectionSembleCollection, i.handleSembleCollection)
+	i.RegisterHandler(xrpc.CollectionSembleCollectionLink, i.handleSembleCollectionLink)
 
 	return i
 }
···
 		i.db.RemoveFromCollection(uri)
 	case CollectionProfile:
 		i.db.DeleteProfile(uri)
+	case CollectionSembleCard:
+		i.db.DeleteAnnotation(uri)
+		i.db.DeleteBookmark(uri)
+	case CollectionSembleCollection:
+		i.db.DeleteCollection(uri)
+	case xrpc.CollectionSembleCollectionLink:
+		i.db.RemoveFromCollection(uri)
+
 	}
 }
 
···
 		log.Printf("Indexed profile from %s", event.Repo)
 	}
 }
+
+func (i *Ingester) handleSembleCard(event *FirehoseEvent) {
+	var card xrpc.SembleCard
+	if err := json.Unmarshal(event.Record, &card); err != nil {
+		return
+	}
+
+	uri := fmt.Sprintf("at://%s/%s/%s", event.Repo, event.Collection, event.Rkey)
+	createdAt := card.GetCreatedAtTime()
+
+	content, err := card.ParseContent()
+	if err != nil {
+		return
+	}
+
+	switch card.Type {
+	case "NOTE":
+		note, ok := content.(*xrpc.SembleNoteContent)
+		if !ok {
+			return
+		}
+
+		targetSource := card.URL
+		if targetSource == "" {
+			return
+		}
+
+		targetHash := db.HashURL(targetSource)
+		motivation := "commenting"
+		bodyValue := note.Text
+
+		annotation := &db.Annotation{
+			URI:          uri,
+			AuthorDID:    event.Repo,
+			Motivation:   motivation,
+			BodyValue:    &bodyValue,
+			TargetSource: targetSource,
+			TargetHash:   targetHash,
+			CreatedAt:    createdAt,
+			IndexedAt:    time.Now(),
+		}
+		if err := i.db.CreateAnnotation(annotation); err != nil {
+			log.Printf("Failed to index Semble NOTE as annotation: %v", err)
+		} else {
+			if card.ParentCard != nil {
+				log.Printf("Indexed Semble NOTE from %s on %s (Parent: %s)", event.Repo, targetSource, card.ParentCard.URI)
+			} else {
+				log.Printf("Indexed Semble NOTE from %s on %s", event.Repo, targetSource)
+			}
+		}
+
+	case "URL":
+		urlContent, ok := content.(*xrpc.SembleURLContent)
+		if !ok {
+			return
+		}
+
+		source := urlContent.URL
+		if source == "" {
+			return
+		}
+		sourceHash := db.HashURL(source)
+
+		var titlePtr *string
+		if urlContent.Metadata != nil && urlContent.Metadata.Title != "" {
+			t := urlContent.Metadata.Title
+			titlePtr = &t
+		}
+
+		bookmark := &db.Bookmark{
+			URI:        uri,
+			AuthorDID:  event.Repo,
+			Source:     source,
+			SourceHash: sourceHash,
+			Title:      titlePtr,
+			CreatedAt:  createdAt,
+			IndexedAt:  time.Now(),
+		}
+		if err := i.db.CreateBookmark(bookmark); err != nil {
+			log.Printf("Failed to index Semble URL as bookmark: %v", err)
+		} else {
+			log.Printf("Indexed Semble URL from %s: %s", event.Repo, source)
+		}
+	}
+}
+
+func (i *Ingester) handleSembleCollection(event *FirehoseEvent) {
+	var record xrpc.SembleCollection
+	if err := json.Unmarshal(event.Record, &record); err != nil {
+		return
+	}
+
+	uri := fmt.Sprintf("at://%s/%s/%s", event.Repo, event.Collection, event.Rkey)
+	createdAt, err := time.Parse(time.RFC3339, record.CreatedAt)
+	if err != nil {
+		createdAt = time.Now()
+	}
+
+	var descPtr, iconPtr *string
+	if record.Description != "" {
+		descPtr = &record.Description
+	}
+	icon := "icon:semble"
+	iconPtr = &icon
+
+	collection := &db.Collection{
+		URI:         uri,
+		AuthorDID:   event.Repo,
+		Name:        record.Name,
+		Description: descPtr,
+		Icon:        iconPtr,
+		CreatedAt:   createdAt,
+		IndexedAt:   time.Now(),
+	}
+
+	if err := i.db.CreateCollection(collection); err != nil {
+		log.Printf("Failed to index Semble collection: %v", err)
+	} else {
+		log.Printf("Indexed Semble collection from %s: %s", event.Repo, record.Name)
+	}
+}
+
+func (i *Ingester) handleSembleCollectionLink(event *FirehoseEvent) {
+	var record xrpc.SembleCollectionLink
+	if err := json.Unmarshal(event.Record, &record); err != nil {
+		return
+	}
+
+	uri := fmt.Sprintf("at://%s/%s/%s", event.Repo, event.Collection, event.Rkey)
+	createdAt, err := time.Parse(time.RFC3339, record.CreatedAt)
+	if err != nil {
+		createdAt = time.Now()
+	}
+
+	item := &db.CollectionItem{
+		URI:           uri,
+		AuthorDID:     event.Repo,
+		CollectionURI: record.Collection.URI,
+		AnnotationURI: record.Card.URI,
+		Position:      0,
+		CreatedAt:     createdAt,
+		IndexedAt:     time.Now(),
+	}
+
+	if err := i.db.AddToCollection(item); err != nil {
+		log.Printf("Failed to index Semble collection link: %v", err)
+	} else {
+		log.Printf("Indexed Semble collection link from %s", event.Repo)
+	}
+}

backend/internal/sync/service.go

···
 	"fmt"
 	"io"
 	"net/http"
+	"strings"
 	"time"
 
 	"margin.at/internal/db"
···
 		xrpc.CollectionLike,
 		xrpc.CollectionCollection,
 		xrpc.CollectionCollectionItem,
+		xrpc.CollectionSembleCard,
+		xrpc.CollectionSembleCollection,
+		xrpc.CollectionSembleCollectionLink,
 	}
 
 	results := make(map[string]string)
···
 			switch collectionNSID {
 			case xrpc.CollectionAnnotation:
 				localURIs, err = s.db.GetAnnotationURIs(did)
+				localURIs = filterURIsByCollection(localURIs, xrpc.CollectionAnnotation)
 			case xrpc.CollectionHighlight:
 				localURIs, err = s.db.GetHighlightURIs(did)
+				localURIs = filterURIsByCollection(localURIs, xrpc.CollectionHighlight)
 			case xrpc.CollectionBookmark:
 				localURIs, err = s.db.GetBookmarkURIs(did)
+				localURIs = filterURIsByCollection(localURIs, xrpc.CollectionBookmark)
 			case xrpc.CollectionCollection:
 				cols, e := s.db.GetCollectionsByAuthor(did)
 				if e == nil {
 					for _, c := range cols {
 						localURIs = append(localURIs, c.URI)
 					}
+					localURIs = filterURIsByCollection(localURIs, xrpc.CollectionCollection)
 				} else {
 					err = e
 				}
···
 					for _, item := range items {
 						localURIs = append(localURIs, item.URI)
 					}
+					localURIs = filterURIsByCollection(localURIs, xrpc.CollectionCollectionItem)
 				} else {
 					err = e
 				}
···
 					for _, r := range replies {
 						localURIs = append(localURIs, r.URI)
 					}
+					localURIs = filterURIsByCollection(localURIs, xrpc.CollectionReply)
 				} else {
 					err = e
 				}
···
 					for _, l := range likes {
 						localURIs = append(localURIs, l.URI)
 					}
+					localURIs = filterURIsByCollection(localURIs, xrpc.CollectionLike)
+				} else {
+					err = e
+				}
+			case xrpc.CollectionSembleCard:
+				annos, e1 := s.db.GetAnnotationURIs(did)
+				books, e2 := s.db.GetBookmarkURIs(did)
+				if e1 != nil {
+					err = e1
+					break
+				}
+				if e2 != nil {
+					err = e2
+					break
+				}
+				localURIs = append(localURIs, annos...)
+				localURIs = append(localURIs, books...)
+				localURIs = filterURIsByCollection(localURIs, xrpc.CollectionSembleCard)
+			case xrpc.CollectionSembleCollection:
+				cols, e := s.db.GetCollectionsByAuthor(did)
+				if e == nil {
+					for _, c := range cols {
+						localURIs = append(localURIs, c.URI)
+					}
+					localURIs = filterURIsByCollection(localURIs, xrpc.CollectionSembleCollection)
+				} else {
+					err = e
+				}
+			case xrpc.CollectionSembleCollectionLink:
+				items, e := s.db.GetCollectionItemsByAuthor(did)
+				if e == nil {
+					for _, item := range items {
+						localURIs = append(localURIs, item.URI)
+					}
+					localURIs = filterURIsByCollection(localURIs, xrpc.CollectionSembleCollectionLink)
 				} else {
 					err = e
 				}
···
 							_ = s.db.DeleteReply(uri)
 						case xrpc.CollectionLike:
 							_ = s.db.DeleteLike(uri)
+						case xrpc.CollectionSembleCard:
+							_ = s.db.DeleteAnnotation(uri)
+							_ = s.db.DeleteBookmark(uri)
+						case xrpc.CollectionSembleCollection:
+							_ = s.db.DeleteCollection(uri)
+						case xrpc.CollectionSembleCollectionLink:
+							_ = s.db.RemoveFromCollection(uri)
 						}
 						deletedCount++
 					}
···
 		}
 	}
 	return results, nil
+}
+
+func filterURIsByCollection(uris []string, collectionNSID string) []string {
+	if len(uris) == 0 || collectionNSID == "" {
+		return uris
+	}
+	needle := "/" + collectionNSID + "/"
+	out := make([]string, 0, len(uris))
+	for _, u := range uris {
+		if strings.Contains(u, needle) {
+			out = append(out, u)
+		}
+	}
+	return out
 }
 
 func strPtr(s string) *string {
···
 			SubjectURI: record.Subject.URI,
 			CreatedAt:  createdAt,
 			IndexedAt:  time.Now(),
+		})
+
+	case xrpc.CollectionSembleCard:
+		var card xrpc.SembleCard
+		if err := json.Unmarshal(value, &card); err != nil {
+			return err
+		}
+
+		createdAt := card.GetCreatedAtTime()
+
+		content, err := card.ParseContent()
+		if err != nil {
+			return nil
+		}
+
+		switch card.Type {
+		case "NOTE":
+			note, ok := content.(*xrpc.SembleNoteContent)
+			if !ok {
+				return nil
+			}
+
+			targetSource := card.URL
+			if targetSource == "" {
+				return nil
+			}
+
+			targetHash := db.HashURL(targetSource)
+			motivation := "commenting"
+			bodyValue := note.Text
+
+			return s.db.CreateAnnotation(&db.Annotation{
+				URI:          uri,
+				AuthorDID:    did,
+				Motivation:   motivation,
+				BodyValue:    &bodyValue,
+				TargetSource: targetSource,
+				TargetHash:   targetHash,
+				CreatedAt:    createdAt,
+				IndexedAt:    time.Now(),
+				CID:          cidPtr,
+			})
+
+		case "URL":
+			urlContent, ok := content.(*xrpc.SembleURLContent)
+			if !ok {
+				return nil
+			}
+
+			source := urlContent.URL
+			if source == "" {
+				return nil
+			}
+			sourceHash := db.HashURL(source)
+
+			var titlePtr *string
+			if urlContent.Metadata != nil && urlContent.Metadata.Title != "" {
+				t := urlContent.Metadata.Title
+				titlePtr = &t
+			}
+
+			return s.db.CreateBookmark(&db.Bookmark{
+				URI:        uri,
+				AuthorDID:  did,
+				Source:     source,
+				SourceHash: sourceHash,
+				Title:      titlePtr,
+				CreatedAt:  createdAt,
+				IndexedAt:  time.Now(),
+				CID:        cidPtr,
+			})
+		}
+
+	case xrpc.CollectionSembleCollection:
+		var record xrpc.SembleCollection
+		if err := json.Unmarshal(value, &record); err != nil {
+			return err
+		}
+		createdAt, _ := time.Parse(time.RFC3339, record.CreatedAt)
+
+		var descPtr, iconPtr *string
+		if record.Description != "" {
+			d := record.Description
+			descPtr = &d
+		}
+		icon := "icon:semble"
+		iconPtr = &icon
+
+		return s.db.CreateCollection(&db.Collection{
+			URI:         uri,
+			AuthorDID:   did,
+			Name:        record.Name,
+			Description: descPtr,
+			Icon:        iconPtr,
+			CreatedAt:   createdAt,
+			IndexedAt:   time.Now(),
+		})
+
+	case xrpc.CollectionSembleCollectionLink:
+		var record xrpc.SembleCollectionLink
+		if err := json.Unmarshal(value, &record); err != nil {
+			return err
+		}
+		createdAt, _ := time.Parse(time.RFC3339, record.CreatedAt)
+
+		return s.db.AddToCollection(&db.CollectionItem{
+			URI:           uri,
+			AuthorDID:     did,
+			CollectionURI: record.Collection.URI,
+			AnnotationURI: record.Card.URI,
+			Position:      0,
+			CreatedAt:     createdAt,
+			IndexedAt:     time.Now(),
 		})
 	}
 	return nil

backend/internal/xrpc/semble.go

···
+package xrpc
+
+import (
+	"encoding/json"
+	"time"
+)
+
+const (
+	CollectionSembleCard           = "network.cosmik.card"
+	CollectionSembleCollection     = "network.cosmik.collection"
+	CollectionSembleCollectionLink = "network.cosmik.collectionLink"
+)
+
+type SembleCard struct {
+	Type       string          `json:"type"`
+	Content    json.RawMessage `json:"content"`
+	URL        string          `json:"url,omitempty"`
+	ParentCard *StrongRef      `json:"parentCard,omitempty"`
+	CreatedAt  string          `json:"createdAt"`
+}
+
+type SembleURLContent struct {
+	URL      string             `json:"url"`
+	Metadata *SembleURLMetadata `json:"metadata,omitempty"`
+}
+
+type SembleNoteContent struct {
+	Text string `json:"text"`
+}
+
+type SembleURLMetadata struct {
+	Title       string `json:"title,omitempty"`
+	Description string `json:"description,omitempty"`
+	Author      string `json:"author,omitempty"`
+	SiteName    string `json:"siteName,omitempty"`
+}
+
+type SembleCollection struct {
+	Name        string `json:"name"`
+	Description string `json:"description,omitempty"`
+	AccessType  string `json:"accessType"`
+	CreatedAt   string `json:"createdAt"`
+}
+
+type SembleCollectionLink struct {
+	Collection StrongRef `json:"collection"`
+	Card       StrongRef `json:"card"`
+	AddedBy    string    `json:"addedBy"`
+	AddedAt    string    `json:"addedAt"`
+	CreatedAt  string    `json:"createdAt"`
+}
+
+type StrongRef struct {
+	URI string `json:"uri"`
+	CID string `json:"cid"`
+}
+
+func (c *SembleCard) ParseContent() (interface{}, error) {
+	switch c.Type {
+	case "URL":
+		var content SembleURLContent
+		if err := json.Unmarshal(c.Content, &content); err != nil {
+			return nil, err
+		}
+		return &content, nil
+	case "NOTE":
+		var content SembleNoteContent
+		if err := json.Unmarshal(c.Content, &content); err != nil {
+			return nil, err
+		}
+		return &content, nil
+	}
+	return nil, nil
+}
+
+func (c *SembleCard) GetCreatedAtTime() time.Time {
+	t, err := time.Parse(time.RFC3339, c.CreatedAt)
+	if err != nil {
+		return time.Now()
+	}
+	return t
+}

web/public/semble-logo.svg

···
+<svg width="24" height="24" viewBox="0 0 32 43" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M31.0164 33.1306C31.0164 38.581 25.7882 42.9994 15.8607 42.9994C5.93311 42.9994 0 37.5236 0 32.0732C0 26.6228 5.93311 23.2617 15.8607 23.2617C25.7882 23.2617 31.0164 27.6802 31.0164 33.1306Z" fill="#ff6400"></path><path d="M25.7295 19.3862C25.7295 22.5007 20.7964 22.2058 15.1558 22.2058C9.51511 22.2058 4.93445 22.1482 4.93445 19.0337C4.93445 15.9192 9.71537 12.6895 15.356 12.6895C20.9967 12.6895 25.7295 16.2717 25.7295 19.3862Z" fill="#ff6400"></path><path d="M25.0246 10.9256C25.0246 14.0401 20.7964 11.9829 15.1557 11.9829C9.51506 11.9829 6.34424 13.6876 6.34424 10.5731C6.34424 7.45857 9.51506 5.63867 15.1557 5.63867C20.7964 5.63867 25.0246 7.81103 25.0246 10.9256Z" fill="#ff6400"></path><path d="M20.4426 3.5755C20.4426 5.8323 18.2088 4.22951 15.2288 4.22951C12.2489 4.22951 10.5737 5.8323 10.5737 3.5755C10.5737 1.31871 12.2489 0 15.2288 0C18.2088 0 20.4426 1.31871 20.4426 3.5755Z" fill="#ff6400"></path></svg>

web/src/api/client.js

···
   offset = 0,
   tag = "",
   creator = "",
+  feedType = "",
+  motivation = "",
 ) {
   let url = `${API_BASE}/annotations/feed?limit=${limit}&offset=${offset}`;
   if (tag) url += `&tag=${encodeURIComponent(tag)}`;
   if (creator) url += `&creator=${encodeURIComponent(creator)}`;
+  if (feedType) url += `&type=${encodeURIComponent(feedType)}`;
+  if (motivation) url += `&motivation=${encodeURIComponent(motivation)}`;
   return request(url);
 }
 
···
   let url = `${API_BASE}/collections`;
   if (did) url += `?author=${encodeURIComponent(did)}`;
   return request(url);
+}
+
+export async function getCollection(uri) {
+  return request(`${API_BASE}/collection?uri=${encodeURIComponent(uri)}`);
 }
 
 export async function getCollectionsContaining(annotationUri) {

web/src/components/AnnotationCard.jsx

···
           <UserMeta author={data.author} createdAt={data.createdAt} />
         </div>
         <div className="annotation-header-right">
-          <div style={{ display: "flex", gap: "4px" }}>
+          <div style={{ display: "flex", gap: "4px", alignItems: "center" }}>
+            {data.uri && data.uri.includes("network.cosmik") && (
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "4px",
+                  fontSize: "0.75rem",
+                  color: "var(--text-tertiary)",
+                  marginRight: "8px",
+                }}
+                title="Added using Semble"
+              >
+                <span>via Semble</span>
+                <img
+                  src="/semble-logo.svg"
+                  alt="Semble"
+                  style={{ width: "16px", height: "16px" }}
+                />
+              </div>
+            )}
             {hasEditHistory && !data.color && !data.description && (
               <button
                 className="annotation-action action-icon-only"
···
               </button>
             )}
 
-            {isOwner && (
+            {isOwner && !(data.uri && data.uri.includes("network.cosmik")) && (
               <>
                 {!data.color && !data.description && (
                   <button
···
             text={data.title || data.url}
             handle={data.author?.handle}
             type="Annotation"
+            url={data.url}
           />
           <button
             className="annotation-action"
···
         </div>
 
         <div className="annotation-header-right">
-          <div style={{ display: "flex", gap: "4px" }}>
+          <div style={{ display: "flex", gap: "4px", alignItems: "center" }}>
+            {data.uri && data.uri.includes("network.cosmik") && (
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "4px",
+                  fontSize: "0.75rem",
+                  color: "var(--text-tertiary)",
+                  marginRight: "8px",
+                }}
+                title="Added using Semble"
+              >
+                <span>via Semble</span>
+                <img
+                  src="/semble-logo.svg"
+                  alt="Semble"
+                  style={{ width: "16px", height: "16px" }}
+                />
+              </div>
+            )}
             {isOwner && (
               <>
                 <button

web/src/components/BookmarkCard.jsx

···
         </div>
 
         <div className="annotation-header-right">
-          <div style={{ display: "flex", gap: "4px" }}>
-            {(isOwner || onDelete) && (
-              <button
-                className="annotation-action action-icon-only"
-                onClick={handleDelete}
-                disabled={deleting}
-                title="Delete"
+          <div style={{ display: "flex", gap: "4px", alignItems: "center" }}>
+            {data.uri && data.uri.includes("network.cosmik") && (
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "4px",
+                  fontSize: "0.75rem",
+                  color: "var(--text-tertiary)",
+                  marginRight: "8px",
+                }}
+                title="Added using Semble"
               >
-                <TrashIcon size={16} />
-              </button>
+                <span>via Semble</span>
+                <img
+                  src="/semble-logo.svg"
+                  alt="Semble"
+                  style={{ width: "16px", height: "16px" }}
+                />
+              </div>
             )}
+            <div style={{ display: "flex", gap: "4px" }}>
+              {((isOwner &&
+                !(data.uri && data.uri.includes("network.cosmik"))) ||
+                onDelete) && (
+                <button
+                  className="annotation-action action-icon-only"
+                  onClick={handleDelete}
+                  disabled={deleting}
+                  title="Delete"
+                >
+                  <TrashIcon size={16} />
+                </button>
+              )}
+            </div>
           </div>
         </div>
       </header>
···
             text={data.title || data.description}
             handle={data.author?.handle}
             type="Bookmark"
+            url={data.url}
           />
           <button
             className="annotation-action"

web/src/components/CollectionIcon.jsx

···
     return <Folder size={size} className={className} />;
   }
 
+  if (icon === "icon:semble") {
+    return (
+      <img
+        src="/semble-logo.svg"
+        alt="Semble"
+        style={{ width: size, height: size, objectFit: "contain" }}
+        className={className}
+      />
+    );
+  }
+
   if (icon.startsWith("icon:")) {
     const iconName = icon.replace("icon:", "");
     const IconComponent = ICON_MAP[iconName];

web/src/components/CollectionRow.jsx

···
         </div>
         <ChevronRight size={20} className="collection-row-arrow" />
       </Link>
-      {onEdit && (
+      {onEdit && !collection.uri.includes("network.cosmik") && (
         <button
           onClick={(e) => {
             e.preventDefault();

web/src/components/ShareMenu.jsx

···
   { name: "Deer", domain: "deer.social", Icon: DeerIcon },
 ];
 
-export default function ShareMenu({ uri, text, customUrl, handle, type }) {
+export default function ShareMenu({ uri, text, customUrl, handle, type, url }) {
   const [isOpen, setIsOpen] = useState(false);
   const [copied, setCopied] = useState(false);
   const [copiedAturi, setCopiedAturi] = useState(false);
···
 
     const uriParts = uri.split("/");
     const rkey = uriParts[uriParts.length - 1];
+    const did = uriParts[2];
+
+    if (uri.includes("network.cosmik.card")) {
+      return `${window.location.origin}/at/${did}/${rkey}`;
+    }
 
     if (handle && type) {
       return `${window.location.origin}/${handle}/${type.toLowerCase()}/${rkey}`;
     }
 
-    const did = uriParts[2];
     return `${window.location.origin}/at/${did}/${rkey}`;
   };
 
···
     setIsOpen(false);
   };
 
+  const isSemble = uri && uri.includes("network.cosmik");
+  const sembleUrl = (() => {
+    if (!isSemble) return "";
+    const parts = uri.split("/");
+    const rkey = parts[parts.length - 1];
+    const userHandle = handle || (parts.length > 2 ? parts[2] : "");
+
+    if (uri.includes("network.cosmik.collection")) {
+      return `https://semble.so/profile/${userHandle}/collections/${rkey}`;
+    }
+
+    if (uri.includes("network.cosmik.card") && url) {
+      return `https://semble.so/url?id=${encodeURIComponent(url)}`;
+    }
+
+    return `https://semble.so/profile/${userHandle}`;
+  })();
+
+  const handleCopySemble = async () => {
+    try {
+      await navigator.clipboard.writeText(sembleUrl);
+      setCopied(true);
+      setTimeout(() => {
+        setCopied(false);
+        setIsOpen(false);
+      }, 1500);
+    } catch {
+      prompt("Copy this link:", sembleUrl);
+    }
+  };
+
   return (
     <div className="share-menu-container" ref={menuRef}>
       <button
···
 
       {isOpen && (
         <div className="share-menu">
-          <div className="share-menu-section">
-            <div className="share-menu-label">Share to</div>
-            {BLUESKY_FORKS.map((fork) => (
+          {isSemble ? (
+            <>
+              <div className="share-menu-section">
+                <div
+                  className="share-menu-label"
+                  style={{ display: "flex", alignItems: "center", gap: "6px" }}
+                >
+                  <img
+                    src="/semble-logo.svg"
+                    alt=""
+                    style={{ width: "12px", height: "12px" }}
+                  />
+                  Semble
+                </div>
+                <a
+                  href={sembleUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="share-menu-item"
+                  style={{ textDecoration: "none" }}
+                >
+                  <ExternalLink size={16} />
+                  <span>Open on Semble</span>
+                </a>
+                <button className="share-menu-item" onClick={handleCopySemble}>
+                  {copied ? <Check size={16} /> : <Copy size={16} />}
+                  <span>{copied ? "Copied!" : "Copy Semble Link"}</span>
+                </button>
+              </div>
+              <div className="share-menu-divider" />
               <button
-                key={fork.domain}
                 className="share-menu-item"
-                onClick={() => handleShareToFork(fork.domain)}
+                onClick={handleCopyAturi}
+                title="Copy Universal URL"
               >
-                <span className="share-menu-icon">
-                  <fork.Icon />
-                </span>
-                <span>{fork.name}</span>
+                {copiedAturi ? <Check size={16} /> : <AturiIcon size={16} />}
+                <span>{copiedAturi ? "Copied!" : "Copy Universal URL"}</span>
               </button>
-            ))}
-          </div>
-          <div className="share-menu-divider" />
-          <button className="share-menu-item" onClick={handleCopy}>
-            {copied ? <Check size={16} /> : <Copy size={16} />}
-            <span>{copied ? "Copied!" : "Copy Link"}</span>
-          </button>
-          <button
-            className="share-menu-item"
-            onClick={handleCopyAturi}
-            title="Copy a universal link atproto link (via aturi.to)"
-          >
-            {copiedAturi ? <Check size={16} /> : <AturiIcon size={16} />}
-            <span>{copiedAturi ? "Copied!" : "Copy Universal Link"}</span>
-          </button>
-          {navigator.share && (
-            <button className="share-menu-item" onClick={handleSystemShare}>
-              <ExternalLink size={16} />
-              <span>More...</span>
-            </button>
+            </>
+          ) : (
+            <>
+              <div className="share-menu-section">
+                <div className="share-menu-label">Share to</div>
+                {BLUESKY_FORKS.map((fork) => (
+                  <button
+                    key={fork.domain}
+                    className="share-menu-item"
+                    onClick={() => handleShareToFork(fork.domain)}
+                  >
+                    <span className="share-menu-icon">
+                      <fork.Icon />
+                    </span>
+                    <span>{fork.name}</span>
+                  </button>
+                ))}
+              </div>
+              <div className="share-menu-divider" />
+              <button className="share-menu-item" onClick={handleCopy}>
+                {copied ? <Check size={16} /> : <Copy size={16} />}
+                <span>{copied ? "Copied!" : "Copy Link"}</span>
+              </button>
+              <button
+                className="share-menu-item"
+                onClick={handleCopyAturi}
+                title="Copy a universal link atproto link (via aturi.to)"
+              >
+                {copiedAturi ? <Check size={16} /> : <AturiIcon size={16} />}
+                <span>{copiedAturi ? "Copied!" : "Copy Universal Link"}</span>
+              </button>
+              {navigator.share && (
+                <button className="share-menu-item" onClick={handleSystemShare}>
+                  <ExternalLink size={16} />
+                  <span>More...</span>
+                </button>
+              )}
+            </>
           )}
         </div>
       )}

web/src/css/feed.css

···
     justify-content: flex-end;
   }
 }
+
+.feed-tab {
+  padding: 8px 16px;
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  margin-bottom: -1px;
+}
+
+.feed-tab:hover {
+  color: var(--text-primary);
+}
+
+.feed-tab.active {
+  color: var(--text-primary);
+  border-bottom-color: var(--text-primary);
+  font-weight: 600;
+}
+
+.filter-pill {
+  padding: 6px 16px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  background: var(--bg-tertiary);
+  border: 1px solid transparent;
+  border-radius: 999px;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.filter-pill:hover {
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  border-color: var(--border);
+}
+
+.filter-pill.active {
+  background: var(--text-primary);
+  color: var(--bg-primary);
+  font-weight: 600;
+}

web/src/pages/CollectionDetail.jsx

···
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect } from "react";
 import { useParams, useNavigate, Link, useLocation } from "react-router-dom";
-import { ArrowLeft, Edit2, Trash2, Plus } from "lucide-react";
+import { ArrowLeft, Edit2, Trash2, Plus, ExternalLink } from "lucide-react";
 import {
-  getCollections,
+  getCollection,
   getCollectionItems,
   removeItemFromCollection,
   deleteCollection,
···
   const [error, setError] = useState(null);
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);
 
+  const [refreshTrigger, setRefreshTrigger] = useState(0);
+
   const searchParams = new URLSearchParams(location.search);
   const paramAuthorDid = searchParams.get("author");
 
···
     user?.did &&
     (collection?.creator?.did === user.did || paramAuthorDid === user.did);
 
-  const fetchContext = useCallback(async () => {
-    try {
-      setLoading(true);
+  useEffect(() => {
+    let active = true;
+
+    const fetchContext = async () => {
+      if (active) {
+        setLoading(true);
+        setError(null);
+      }
 
-      let targetUri = null;
-      let targetDid = paramAuthorDid || user?.did;
+      try {
+        let targetUri = null;
+        let targetDid = paramAuthorDid || user?.did;
 
-      if (handle && rkey) {
-        try {
-          targetDid = await resolveHandle(handle);
+        if (handle && rkey) {
+          try {
+            targetDid = await resolveHandle(handle);
+            if (!active) return;
+            targetUri = `at://${targetDid}/at.margin.collection/${rkey}`;
+          } catch (e) {
+            console.error("Failed to resolve handle", e);
+            if (active) setError("Could not resolve user handle");
+          }
+        } else if (wildcardPath) {
+          targetUri = decodeURIComponent(wildcardPath);
+        } else if (rkey && targetDid) {
           targetUri = `at://${targetDid}/at.margin.collection/${rkey}`;
-        } catch (e) {
-          console.error("Failed to resolve handle", e);
         }
-      } else if (wildcardPath) {
-        targetUri = decodeURIComponent(wildcardPath);
-      } else if (rkey && targetDid) {
-        targetUri = `at://${targetDid}/at.margin.collection/${rkey}`;
-      }
 
-      if (!targetUri) {
-        if (!user && !handle && !paramAuthorDid) {
-          setError("Please log in to view your collections");
+        if (!targetUri) {
+          if (active) {
+            if (!user && !handle && !paramAuthorDid) {
+              setError("Please log in to view your collections");
+            } else if (!error) {
+              setError("Invalid collection URL");
+            }
+          }
           return;
         }
-        setError("Invalid collection URL");
-        return;
-      }
 
-      if (!targetDid && targetUri.startsWith("at://")) {
-        const parts = targetUri.split("/");
-        if (parts.length > 2) targetDid = parts[2];
-      }
+        if (!targetDid && targetUri.startsWith("at://")) {
+          const parts = targetUri.split("/");
+          if (parts.length > 2) targetDid = parts[2];
+        }
 
-      if (!targetDid) {
-        setError("Could not determine collection owner");
-        return;
-      }
+        const collectionData = await getCollection(targetUri);
+        if (!active) return;
 
-      const [cols, itemsData] = await Promise.all([
-        getCollections(targetDid),
-        getCollectionItems(targetUri),
-      ]);
+        setCollection(collectionData);
 
-      const found =
-        cols.items?.find((c) => c.uri === targetUri) ||
-        cols.items?.find(
-          (c) => targetUri && c.uri.endsWith(targetUri.split("/").pop()),
-        );
+        const itemsData = await getCollectionItems(collectionData.uri);
+        if (!active) return;
 
-      if (!found) {
-        setError("Collection not found");
-        return;
+        setItems(itemsData || []);
+      } catch (err) {
+        console.error("Fetch failed:", err);
+        if (active) {
+          if (
+            err.message.includes("404") ||
+            err.message.includes("not found")
+          ) {
+            setError("Collection not found");
+          } else {
+            setError(err.message || "Failed to load collection");
+          }
+        }
+      } finally {
+        if (active) setLoading(false);
       }
-      setCollection(found);
-      setItems(itemsData || []);
-    } catch (err) {
-      console.error(err);
-      setError("Failed to load collection");
-    } finally {
-      setLoading(false);
-    }
-  }, [paramAuthorDid, user, handle, rkey, wildcardPath]);
+    };
 
-  useEffect(() => {
     fetchContext();
-  }, [fetchContext]);
+
+    return () => {
+      active = false;
+    };
+  }, [
+    paramAuthorDid,
+    user?.did,
+    handle,
+    rkey,
+    wildcardPath,
+    refreshTrigger,
+    error,
+    user,
+  ]);
 
   const handleEditSuccess = () => {
-    fetchContext();
     setIsEditModalOpen(false);
+    setRefreshTrigger((v) => v + 1);
   };
 
   const handleDeleteItem = async (itemUri) => {
···
           />
           {isOwner && (
             <>
-              <button
-                onClick={() => setIsEditModalOpen(true)}
-                className="collection-detail-edit"
-                title="Edit Collection"
-              >
-                <Edit2 size={18} />
-              </button>
-              <button
-                onClick={async () => {
-                  if (confirm("Delete this collection and all its items?")) {
-                    await deleteCollection(collection.uri);
-                    navigate("/collections");
-                  }
-                }}
-                className="collection-detail-delete"
-                title="Delete Collection"
-              >
-                <Trash2 size={18} />
-              </button>
+              {collection.uri.includes("network.cosmik.collection") ? (
+                <a
+                  href={`https://semble.so/profile/${collection.creator?.handle || collection.creator?.did}/collections/${collection.uri.split("/").pop()}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="collection-detail-edit btn btn-secondary btn-sm"
+                  style={{
+                    textDecoration: "none",
+                    display: "flex",
+                    gap: "6px",
+                    alignItems: "center",
+                  }}
+                  title="Manage on Semble"
+                >
+                  <span>Manage on Semble</span>
+                  <ExternalLink size={16} />
+                </a>
+              ) : (
+                <>
+                  <button
+                    onClick={() => setIsEditModalOpen(true)}
+                    className="collection-detail-edit"
+                    title="Edit Collection"
+                  >
+                    <Edit2 size={18} />
+                  </button>
+                  <button
+                    onClick={async () => {
+                      if (
+                        confirm("Delete this collection and all its items?")
+                      ) {
+                        await deleteCollection(collection.uri);
+                        navigate("/collections");
+                      }
+                    }}
+                    className="collection-detail-delete"
+                    title="Delete Collection"
+                  >
+                    <Trash2 size={18} />
+                  </button>
+                </>
+              )}
             </>
           )}
         </div>
···
         ) : (
           items.map((item) => (
             <div key={item.uri} className="collection-item-wrapper">
-              {isOwner && (
-                <button
-                  onClick={() => handleDeleteItem(item.uri)}
-                  className="collection-item-remove"
-                  title="Remove from collection"
-                >
-                  <Trash2 size={14} />
-                </button>
-              )}
+              {isOwner &&
+                !collection.uri.includes("network.cosmik.collection") && (
+                  <button
+                    onClick={() => handleDeleteItem(item.uri)}
+                    className="collection-item-remove"
+                    title="Remove from collection"
+                  >
+                    <Trash2 size={14} />
+                  </button>
+                )}
 
               {item.annotation ? (
                 <AnnotationCard annotation={item.annotation} />

web/src/pages/Feed.jsx

···
     return localStorage.getItem("feedFilter") || "all";
   });
 
+  const [feedType, setFeedType] = useState(() => {
+    return localStorage.getItem("feedType") || "all";
+  });
+
   const [annotations, setAnnotations] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
···
     localStorage.setItem("feedFilter", filter);
   }, [filter]);
 
+  useEffect(() => {
+    localStorage.setItem("feedType", feedType);
+  }, [feedType]);
+
   const [collectionModalState, setCollectionModalState] = useState({
     isOpen: false,
     uri: null,
···
         setLoading(true);
         let creatorDid = "";
 
-        if (filter === "my-tags") {
+        if (feedType === "my-feed") {
           if (user?.did) {
             creatorDid = user.did;
           } else {
···
           0,
           tagFilter || "",
           creatorDid,
+          feedType,
+          filter !== "all" ? filter : "",
         );
         setAnnotations(data.items || []);
       } catch (err) {
···
       }
     }
     fetchFeed();
-  }, [tagFilter, filter, user]);
+  }, [tagFilter, filter, feedType, user]);
 
   const filteredAnnotations =
-    filter === "all" || filter === "my-tags"
-      ? annotations
-      : annotations.filter((a) => {
-          if (filter === "commenting")
-            return a.motivation === "commenting" || a.type === "Annotation";
-          if (filter === "highlighting")
-            return a.motivation === "highlighting" || a.type === "Highlight";
-          if (filter === "bookmarking")
-            return a.motivation === "bookmarking" || a.type === "Bookmark";
-          return a.motivation === filter;
-        });
+    feedType === "all" ||
+    feedType === "popular" ||
+    feedType === "semble" ||
+    feedType === "margin" ||
+    feedType === "my-feed"
+      ? filter === "all"
+        ? annotations
+        : annotations.filter((a) => {
+            if (filter === "commenting")
+              return a.motivation === "commenting" || a.type === "Annotation";
+            if (filter === "highlighting")
+              return a.motivation === "highlighting" || a.type === "Highlight";
+            if (filter === "bookmarking")
+              return a.motivation === "bookmarking" || a.type === "Bookmark";
+            return a.motivation === filter;
+          })
+      : annotations;
 
   return (
     <div className="feed-page">
···
       </div>
 
       {}
-      <div className="feed-filters">
+      <div
+        className="feed-filters"
+        style={{
+          marginBottom: "12px",
+          borderBottom: "1px solid var(--border)",
+        }}
+      >
         <button
-          className={`filter-tab ${filter === "all" ? "active" : ""}`}
-          onClick={() => setFilter("all")}
+          className={`filter-tab ${feedType === "all" ? "active" : ""}`}
+          onClick={() => setFeedType("all")}
         >
           All
         </button>
+        <button
+          className={`filter-tab ${feedType === "popular" ? "active" : ""}`}
+          onClick={() => setFeedType("popular")}
+        >
+          Popular
+        </button>
+        <button
+          className={`filter-tab ${feedType === "margin" ? "active" : ""}`}
+          onClick={() => setFeedType("margin")}
+        >
+          Margin
+        </button>
+        <button
+          className={`filter-tab ${feedType === "semble" ? "active" : ""}`}
+          onClick={() => setFeedType("semble")}
+        >
+          Semble
+        </button>
         {user && (
           <button
-            className={`filter-tab ${filter === "my-tags" ? "active" : ""}`}
-            onClick={() => setFilter("my-tags")}
+            className={`filter-tab ${feedType === "my-feed" ? "active" : ""}`}
+            onClick={() => setFeedType("my-feed")}
           >
             My Feed
           </button>
         )}
+      </div>
+
+      <div className="feed-filters">
         <button
-          className={`filter-tab ${filter === "commenting" ? "active" : ""}`}
+          className={`filter-pill ${filter === "all" ? "active" : ""}`}
+          onClick={() => setFilter("all")}
+        >
+          All Types
+        </button>
+        <button
+          className={`filter-pill ${filter === "commenting" ? "active" : ""}`}
           onClick={() => setFilter("commenting")}
         >
           Annotations
         </button>
         <button
-          className={`filter-tab ${filter === "highlighting" ? "active" : ""}`}
+          className={`filter-pill ${filter === "highlighting" ? "active" : ""}`}
           onClick={() => setFilter("highlighting")}
         >
           Highlights
         </button>
         <button
-          className={`filter-tab ${filter === "bookmarking" ? "active" : ""}`}
+          className={`filter-pill ${filter === "bookmarking" ? "active" : ""}`}
           onClick={() => setFilter("bookmarking")}
         >
           Bookmarks