fixes and optimizations that may or may not break margin

backend/internal/api/handler.go

···
 
 	fetchLimit := limit + offset
 
+	perTypeFetchLimit := fetchLimit
+	if motivation == "" {
+		perTypeFetchLimit = fetchLimit/2 + 10
+	}
+
 	if tag != "" {
 		if creator != "" {
 			if motivation == "" || motivation == "commenting" {
···
 		}
 		collectionItems = []db.CollectionItem{}
 	} else {
+		typeLim := fetchLimit
+		if motivation == "" {
+			typeLim = perTypeFetchLimit
+		}
 		if motivation == "" || motivation == "commenting" {
 			switch feedType {
 			case "margin":
-				annotations, _ = h.db.GetMarginAnnotations(fetchLimit, 0)
+				annotations, _ = h.db.GetMarginAnnotations(typeLim, 0)
 			case "semble":
-				annotations, _ = h.db.GetSembleAnnotations(fetchLimit, 0)
+				annotations, _ = h.db.GetSembleAnnotations(typeLim, 0)
 			case "popular":
-				annotations, _ = h.db.GetPopularAnnotations(fetchLimit, 0)
+				annotations, _ = h.db.GetPopularAnnotations(typeLim, 0)
 			case "shelved":
-				annotations, _ = h.db.GetShelvedAnnotations(fetchLimit, 0)
+				annotations, _ = h.db.GetShelvedAnnotations(typeLim, 0)
 			default:
-				annotations, _ = h.db.GetRecentAnnotations(fetchLimit, 0)
+				annotations, _ = h.db.GetRecentAnnotations(typeLim, 0)
 			}
 		}
 		if motivation == "" || motivation == "highlighting" {
 			switch feedType {
 			case "margin":
-				highlights, _ = h.db.GetMarginHighlights(fetchLimit, 0)
+				highlights, _ = h.db.GetMarginHighlights(typeLim, 0)
 			case "semble":
-				highlights, _ = h.db.GetSembleHighlights(fetchLimit, 0)
+				highlights, _ = h.db.GetSembleHighlights(typeLim, 0)
 			case "popular":
-				highlights, _ = h.db.GetPopularHighlights(fetchLimit, 0)
+				highlights, _ = h.db.GetPopularHighlights(typeLim, 0)
 			case "shelved":
-				highlights, _ = h.db.GetShelvedHighlights(fetchLimit, 0)
+				highlights, _ = h.db.GetShelvedHighlights(typeLim, 0)
 			default:
-				highlights, _ = h.db.GetRecentHighlights(fetchLimit, 0)
+				highlights, _ = h.db.GetRecentHighlights(typeLim, 0)
 			}
 		}
 		if motivation == "" || motivation == "bookmarking" {
 			switch feedType {
 			case "margin":
-				bookmarks, _ = h.db.GetMarginBookmarks(fetchLimit, 0)
+				bookmarks, _ = h.db.GetMarginBookmarks(typeLim, 0)
 			case "semble":
-				bookmarks, _ = h.db.GetSembleBookmarks(fetchLimit, 0)
+				bookmarks, _ = h.db.GetSembleBookmarks(typeLim, 0)
 			case "popular":
-				bookmarks, _ = h.db.GetPopularBookmarks(fetchLimit, 0)
+				bookmarks, _ = h.db.GetPopularBookmarks(typeLim, 0)
 			case "shelved":
-				bookmarks, _ = h.db.GetShelvedBookmarks(fetchLimit, 0)
+				bookmarks, _ = h.db.GetShelvedBookmarks(typeLim, 0)
 			default:
-				bookmarks, _ = h.db.GetRecentBookmarks(fetchLimit, 0)
+				bookmarks, _ = h.db.GetRecentBookmarks(typeLim, 0)
 			}
 		}
 		if motivation == "" {
 			switch feedType {
 			case "popular":
-				collectionItems, err = h.db.GetPopularCollectionItems(fetchLimit, 0)
+				collectionItems, err = h.db.GetPopularCollectionItems(typeLim, 0)
 			case "shelved":
-				collectionItems, err = h.db.GetShelvedCollectionItems(fetchLimit, 0)
+				collectionItems, err = h.db.GetShelvedCollectionItems(typeLim, 0)
 			default:
-				collectionItems, err = h.db.GetRecentCollectionItems(fetchLimit, 0)
+				collectionItems, err = h.db.GetRecentCollectionItems(typeLim, 0)
 			}
 			if err != nil {
 				logger.Error("Error fetching collection items: %v", err)

backend/internal/api/hydration.go

···
 	"margin.at/internal/constellation"
 	"margin.at/internal/db"
 	"margin.at/internal/logger"
+	"margin.at/internal/xrpc"
 )
 
 var (
···
 	}
 
 	if len(missingDIDs) > 0 {
-		batchSize := 25
+		// Batch fetch from bsky.social (fast — 1 HTTP call per 25 DIDs)
 		var wg sync.WaitGroup
 		var mu sync.Mutex
+		batchSize := 25
 
 		for i := 0; i < len(missingDIDs); i += batchSize {
 			end := i + batchSize
···
 			}(batch)
 		}
 		wg.Wait()
+
+		// Fallback: resolve stragglers via Slingshot (individual calls)
+		stillMissing := make([]string, 0)
+		for _, did := range missingDIDs {
+			if p, ok := profiles[did]; !ok || p.Handle == "" {
+				stillMissing = append(stillMissing, did)
+			}
+		}
+
+		if len(stillMissing) > 0 {
+			sem := make(chan struct{}, 5)
+			for _, did := range stillMissing {
+				wg.Add(1)
+				go func(d string) {
+					defer wg.Done()
+					sem <- struct{}{}
+					defer func() { <-sem }()
+					ctx, cancel := context.WithTimeout(context.Background(), 2*time.Second)
+					defer cancel()
+					identity, err := xrpc.SlingshotClient.ResolveIdentity(ctx, d)
+					if err != nil || identity.Handle == "" {
+						return
+					}
+					mu.Lock()
+					author := profiles[d]
+					author.DID = d
+					author.Handle = identity.Handle
+					profiles[d] = author
+					Cache.Set(d, author)
+					mu.Unlock()
+				}(did)
+			}
+			wg.Wait()
+		}
 	}
 
 	if database != nil && len(dids) > 0 {
···
 		mu             sync.Mutex
 	)
 
-	nestedShared := &hydrationData{profiles: profiles}
+	// Fetch raw items first to collect all author DIDs
+	var rawAnnos []db.Annotation
+	var rawHighlights []db.Highlight
+	var rawBookmarks []db.Bookmark
 
 	if len(annotationURIs) > 0 {
 		wg.Add(1)
 		go func() {
 			defer wg.Done()
-			rawAnnos, err := database.GetAnnotationsByURIs(annotationURIs)
+			result, err := database.GetAnnotationsByURIs(annotationURIs)
 			if err == nil {
-				hydrated, _ := hydrateAnnotationsWithData(database, rawAnnos, viewerDID, nestedShared)
 				mu.Lock()
-				for _, a := range hydrated {
-					annotationsMap[a.ID] = a
-				}
+				rawAnnos = result
 				mu.Unlock()
 			}
 		}()
 	}
-
 	if len(highlightURIs) > 0 {
 		wg.Add(1)
 		go func() {
 			defer wg.Done()
-			rawHighlights, err := database.GetHighlightsByURIs(highlightURIs)
+			result, err := database.GetHighlightsByURIs(highlightURIs)
 			if err == nil {
-				hydrated, _ := hydrateHighlightsWithData(database, rawHighlights, viewerDID, nestedShared)
 				mu.Lock()
-				for _, h := range hydrated {
-					highlightsMap[h.ID] = h
-				}
+				rawHighlights = result
 				mu.Unlock()
 			}
 		}()
 	}
-
 	if len(bookmarkURIs) > 0 {
 		wg.Add(1)
 		go func() {
 			defer wg.Done()
-			rawBookmarks, err := database.GetBookmarksByURIs(bookmarkURIs)
+			result, err := database.GetBookmarksByURIs(bookmarkURIs)
 			if err == nil {
-				hydrated, _ := hydrateBookmarksWithData(database, rawBookmarks, viewerDID, nestedShared)
 				mu.Lock()
-				for _, b := range hydrated {
-					bookmarksMap[b.ID] = b
-				}
+				rawBookmarks = result
 				mu.Unlock()
 			}
+		}()
+	}
+	wg.Wait()
+
+	// Collect missing author DIDs from nested items and fetch their profiles
+	missingDIDs := make(map[string]bool)
+	for _, a := range rawAnnos {
+		if _, ok := profiles[a.AuthorDID]; !ok {
+			missingDIDs[a.AuthorDID] = true
+		}
+	}
+	for _, h := range rawHighlights {
+		if _, ok := profiles[h.AuthorDID]; !ok {
+			missingDIDs[h.AuthorDID] = true
+		}
+	}
+	for _, b := range rawBookmarks {
+		if _, ok := profiles[b.AuthorDID]; !ok {
+			missingDIDs[b.AuthorDID] = true
+		}
+	}
+	if len(missingDIDs) > 0 {
+		dids := make([]string, 0, len(missingDIDs))
+		for did := range missingDIDs {
+			dids = append(dids, did)
+		}
+		extra := fetchProfilesForDIDs(database, dids)
+		for did, prof := range extra {
+			profiles[did] = prof
+		}
+	}
+
+	nestedShared := &hydrationData{profiles: profiles}
+
+	if len(rawAnnos) > 0 {
+		wg.Add(1)
+		go func() {
+			defer wg.Done()
+			hydrated, _ := hydrateAnnotationsWithData(database, rawAnnos, viewerDID, nestedShared)
+			mu.Lock()
+			for _, a := range hydrated {
+				annotationsMap[a.ID] = a
+			}
+			mu.Unlock()
+		}()
+	}
+
+	if len(rawHighlights) > 0 {
+		wg.Add(1)
+		go func() {
+			defer wg.Done()
+			hydrated, _ := hydrateHighlightsWithData(database, rawHighlights, viewerDID, nestedShared)
+			mu.Lock()
+			for _, h := range hydrated {
+				highlightsMap[h.ID] = h
+			}
+			mu.Unlock()
+		}()
+	}
+
+	if len(rawBookmarks) > 0 {
+		wg.Add(1)
+		go func() {
+			defer wg.Done()
+			hydrated, _ := hydrateBookmarksWithData(database, rawBookmarks, viewerDID, nestedShared)
+			mu.Lock()
+			for _, b := range hydrated {
+				bookmarksMap[b.ID] = b
+			}
+			mu.Unlock()
 		}()
 	}
 

backend/internal/api/semble_fetch.go

···
 	"margin.at/internal/xrpc"
 )
 
+var (
+	failedCardsMu sync.RWMutex
+	failedCards   = make(map[string]time.Time)
+)
+
+func isRecentlyFailed(uri string) bool {
+	failedCardsMu.RLock()
+	t, ok := failedCards[uri]
+	failedCardsMu.RUnlock()
+	return ok && time.Since(t) < 30*time.Minute
+}
+
+func markFailed(uri string) {
+	failedCardsMu.Lock()
+	failedCards[uri] = time.Now()
+	failedCardsMu.Unlock()
+}
+
+func init() {
+	go func() {
+		for {
+			time.Sleep(10 * time.Minute)
+			failedCardsMu.Lock()
+			for uri, t := range failedCards {
+				if time.Since(t) > 30*time.Minute {
+					delete(failedCards, uri)
+				}
+			}
+			failedCardsMu.Unlock()
+		}
+	}()
+}
+
 func ensureSembleCardsIndexed(ctx context.Context, database *db.DB, uris []string) {
 	if len(uris) == 0 || database == nil {
 		return
···
 
 	missing := make([]string, 0)
 	for _, u := range deduped {
-		if !foundSet[u] {
+		if !foundSet[u] && !isRecentlyFailed(u) {
 			missing = append(missing, u)
 		}
 	}
···
 			}
 
 			if err := fetchSembleCard(ctx, database, u); err != nil {
+				markFailed(u)
 				if ctx.Err() == nil {
 					logger.Error("Failed to lazy fetch card %s: %v", u, err)
 				}
···
 	if len(parts) < 3 {
 		return fmt.Errorf("invalid uri parts: expected at least 3 parts")
 	}
-	did, collection, rkey := parts[0], parts[1], parts[2]
+	did, _, _ := parts[0], parts[1], parts[2]
+
+	record, err := xrpc.SlingshotClient.GetRecord(ctx, uri)
+	if err != nil {
+		return fetchSembleCardFromPDS(ctx, database, uri, did, parts[1], parts[2])
+	}
+
+	var card xrpc.SembleCard
+	if err := json.Unmarshal(record.Value, &card); err != nil {
+		return err
+	}
+
+	return indexSembleCard(database, uri, did, &card)
+}
 
+func fetchSembleCardFromPDS(ctx context.Context, database *db.DB, uri, did, collection, rkey string) error {
 	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)
+	fetchURL := 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)
+	req, err := http.NewRequestWithContext(ctx, "GET", fetchURL, nil)
 	if err != nil {
 		return err
 	}
 
+	client := &http.Client{Timeout: 5 * time.Second}
 	resp, err := client.Do(req)
 	if err != nil {
 		return fmt.Errorf("failed to fetch record: %w", err)
···
 		return err
 	}
 
+	return indexSembleCard(database, uri, did, &card)
+}
+
+func indexSembleCard(database *db.DB, uri, did string, card *xrpc.SembleCard) error {
 	createdAt := card.GetCreatedAtTime()
 	content, err := card.ParseContent()
 	if err != nil {

backend/internal/constellation/client.go

···
 	Cursor string `json:"cursor,omitempty"`
 }
 
-func (c *Client) GetLikeCount(ctx context.Context, subjectURI string) (int, error) {
+func (c *Client) getBacklinksCount(ctx context.Context, subject, source string) (int, error) {
 	params := url.Values{}
-	params.Set("target", subjectURI)
-	params.Set("collection", "at.margin.like")
-	params.Set("path", ".subject.uri")
+	params.Set("subject", subject)
+	params.Set("source", source)
 
-	endpoint := fmt.Sprintf("%s/links/count/distinct-dids?%s", c.baseURL, params.Encode())
+	endpoint := fmt.Sprintf("%s/xrpc/blue.microcosm.links.getBacklinksCount?%s", c.baseURL, params.Encode())
 
 	req, err := http.NewRequestWithContext(ctx, "GET", endpoint, nil)
 	if err != nil {
···
 	return countResp.Total, nil
 }
 
-func (c *Client) GetReplyCount(ctx context.Context, rootURI string) (int, error) {
+type BacklinksResponse struct {
+	Backlinks []struct {
+		URI string `json:"uri"`
+		DID string `json:"did"`
+	} `json:"backlinks"`
+	Cursor string `json:"cursor,omitempty"`
+}
+
+func (c *Client) getBacklinks(ctx context.Context, subject, source string, limit int) (*BacklinksResponse, error) {
 	params := url.Values{}
-	params.Set("target", rootURI)
-	params.Set("collection", "at.margin.reply")
-	params.Set("path", ".root.uri")
+	params.Set("subject", subject)
+	params.Set("source", source)
+	if limit > 0 {
+		params.Set("limit", fmt.Sprintf("%d", limit))
+	}
 
-	endpoint := fmt.Sprintf("%s/links/count?%s", c.baseURL, params.Encode())
+	endpoint := fmt.Sprintf("%s/xrpc/blue.microcosm.links.getBacklinks?%s", c.baseURL, params.Encode())
 
 	req, err := http.NewRequestWithContext(ctx, "GET", endpoint, nil)
 	if err != nil {
-		return 0, fmt.Errorf("failed to create request: %w", err)
+		return nil, fmt.Errorf("failed to create request: %w", err)
 	}
 	req.Header.Set("User-Agent", UserAgent)
 
 	resp, err := c.httpClient.Do(req)
 	if err != nil {
-		return 0, fmt.Errorf("request failed: %w", err)
+		return nil, fmt.Errorf("request failed: %w", err)
 	}
 	defer resp.Body.Close()
 
 	if resp.StatusCode != http.StatusOK {
-		return 0, fmt.Errorf("unexpected status code: %d", resp.StatusCode)
+		return nil, fmt.Errorf("unexpected status code: %d", resp.StatusCode)
 	}
 
-	var countResp CountResponse
-	if err := json.NewDecoder(resp.Body).Decode(&countResp); err != nil {
-		return 0, fmt.Errorf("failed to decode response: %w", err)
+	var result BacklinksResponse
+	if err := json.NewDecoder(resp.Body).Decode(&result); err != nil {
+		return nil, fmt.Errorf("failed to decode response: %w", err)
 	}
 
-	return countResp.Total, nil
+	return &result, nil
+}
+
+func (c *Client) GetLikeCount(ctx context.Context, subjectURI string) (int, error) {
+	return c.getBacklinksCount(ctx, subjectURI, "at.margin.like:subject.uri")
+}
+
+func (c *Client) GetReplyCount(ctx context.Context, rootURI string) (int, error) {
+	return c.getBacklinksCount(ctx, rootURI, "at.margin.reply:root.uri")
 }
 
 type CountsResult struct {
···
 }
 
 func (c *Client) GetAnnotationsForURL(ctx context.Context, targetURL string) ([]Link, error) {
-	params := url.Values{}
-	params.Set("target", targetURL)
-	params.Set("collection", "at.margin.annotation")
-	params.Set("path", ".target.source")
-
-	endpoint := fmt.Sprintf("%s/links?%s", c.baseURL, params.Encode())
-
-	req, err := http.NewRequestWithContext(ctx, "GET", endpoint, nil)
-	if err != nil {
-		return nil, fmt.Errorf("failed to create request: %w", err)
-	}
-	req.Header.Set("User-Agent", UserAgent)
-
-	resp, err := c.httpClient.Do(req)
+	resp, err := c.getBacklinks(ctx, targetURL, "at.margin.annotation:target.source", 100)
 	if err != nil {
-		return nil, fmt.Errorf("request failed: %w", err)
-	}
-	defer resp.Body.Close()
-
-	if resp.StatusCode != http.StatusOK {
-		return nil, fmt.Errorf("unexpected status code: %d", resp.StatusCode)
+		return nil, err
 	}
-
-	var linksResp LinksResponse
-	if err := json.NewDecoder(resp.Body).Decode(&linksResp); err != nil {
-		return nil, fmt.Errorf("failed to decode response: %w", err)
+	links := make([]Link, len(resp.Backlinks))
+	for i, bl := range resp.Backlinks {
+		links[i] = Link{URI: bl.URI, DID: bl.DID, Collection: "at.margin.annotation", Path: ".target.source"}
 	}
-
-	return linksResp.Links, nil
+	return links, nil
 }
 
 func (c *Client) GetHighlightsForURL(ctx context.Context, targetURL string) ([]Link, error) {
-	params := url.Values{}
-	params.Set("target", targetURL)
-	params.Set("collection", "at.margin.highlight")
-	params.Set("path", ".target.source")
-
-	endpoint := fmt.Sprintf("%s/links?%s", c.baseURL, params.Encode())
-
-	req, err := http.NewRequestWithContext(ctx, "GET", endpoint, nil)
+	resp, err := c.getBacklinks(ctx, targetURL, "at.margin.highlight:target.source", 100)
 	if err != nil {
-		return nil, fmt.Errorf("failed to create request: %w", err)
+		return nil, err
 	}
-	req.Header.Set("User-Agent", UserAgent)
-
-	resp, err := c.httpClient.Do(req)
-	if err != nil {
-		return nil, fmt.Errorf("request failed: %w", err)
+	links := make([]Link, len(resp.Backlinks))
+	for i, bl := range resp.Backlinks {
+		links[i] = Link{URI: bl.URI, DID: bl.DID, Collection: "at.margin.highlight", Path: ".target.source"}
 	}
-	defer resp.Body.Close()
-
-	if resp.StatusCode != http.StatusOK {
-		return nil, fmt.Errorf("unexpected status code: %d", resp.StatusCode)
-	}
-
-	var linksResp LinksResponse
-	if err := json.NewDecoder(resp.Body).Decode(&linksResp); err != nil {
-		return nil, fmt.Errorf("failed to decode response: %w", err)
-	}
-
-	return linksResp.Links, nil
+	return links, nil
 }
 
 func (c *Client) GetBookmarksForURL(ctx context.Context, targetURL string) ([]Link, error) {
-	params := url.Values{}
-	params.Set("target", targetURL)
-	params.Set("collection", "at.margin.bookmark")
-	params.Set("path", ".source")
-
-	endpoint := fmt.Sprintf("%s/links?%s", c.baseURL, params.Encode())
-
-	req, err := http.NewRequestWithContext(ctx, "GET", endpoint, nil)
-	if err != nil {
-		return nil, fmt.Errorf("failed to create request: %w", err)
-	}
-	req.Header.Set("User-Agent", UserAgent)
-
-	resp, err := c.httpClient.Do(req)
+	resp, err := c.getBacklinks(ctx, targetURL, "at.margin.bookmark:source", 100)
 	if err != nil {
-		return nil, fmt.Errorf("request failed: %w", err)
-	}
-	defer resp.Body.Close()
-
-	if resp.StatusCode != http.StatusOK {
-		return nil, fmt.Errorf("unexpected status code: %d", resp.StatusCode)
+		return nil, err
 	}
-
-	var linksResp LinksResponse
-	if err := json.NewDecoder(resp.Body).Decode(&linksResp); err != nil {
-		return nil, fmt.Errorf("failed to decode response: %w", err)
+	links := make([]Link, len(resp.Backlinks))
+	for i, bl := range resp.Backlinks {
+		links[i] = Link{URI: bl.URI, DID: bl.DID, Collection: "at.margin.bookmark", Path: ".source"}
 	}
-
-	return linksResp.Links, nil
+	return links, nil
 }
 
 func (c *Client) GetAllItemsForURL(ctx context.Context, targetURL string) (annotations, highlights, bookmarks []Link, err error) {
···
 }
 
 func (c *Client) GetLikers(ctx context.Context, subjectURI string) ([]string, error) {
-	params := url.Values{}
-	params.Set("target", subjectURI)
-	params.Set("collection", "at.margin.like")
-	params.Set("path", ".subject.uri")
-
-	endpoint := fmt.Sprintf("%s/links/distinct-dids?%s", c.baseURL, params.Encode())
-
-	req, err := http.NewRequestWithContext(ctx, "GET", endpoint, nil)
+	resp, err := c.getBacklinks(ctx, subjectURI, "at.margin.like:subject.uri", 100)
 	if err != nil {
-		return nil, fmt.Errorf("failed to create request: %w", err)
-	}
-	req.Header.Set("User-Agent", UserAgent)
-
-	resp, err := c.httpClient.Do(req)
-	if err != nil {
-		return nil, fmt.Errorf("request failed: %w", err)
-	}
-	defer resp.Body.Close()
-
-	if resp.StatusCode != http.StatusOK {
-		return nil, fmt.Errorf("unexpected status code: %d", resp.StatusCode)
+		return nil, err
 	}
-
-	var result struct {
-		DIDs []string `json:"dids"`
+	dids := make([]string, len(resp.Backlinks))
+	for i, bl := range resp.Backlinks {
+		dids[i] = bl.DID
 	}
-	if err := json.NewDecoder(resp.Body).Decode(&result); err != nil {
-		return nil, fmt.Errorf("failed to decode response: %w", err)
-	}
-
-	return result.DIDs, nil
+	return dids, nil
 }

backend/internal/firehose/ingester.go

···
 			i.dispatchToHandler(firehoseEvent)
 
 			did := event.Did
-		select {
-		case i.workerPool <- func() { i.triggerLazySync(did) }:
-		default:
-		}
+			select {
+			case i.workerPool <- func() { i.triggerLazySync(did) }:
+			default:
+			}
 		}
 	case "delete":
 		i.handleDelete(commit.Collection, uri)

backend/internal/slingshot/client.go

···
 }
 
 func (c *Client) ResolveIdentity(ctx context.Context, identifier string) (*Identity, error) {
-	endpoint := fmt.Sprintf("%s/identity/%s", c.baseURL, url.PathEscape(identifier))
+	params := url.Values{}
+	params.Set("identifier", identifier)
+
+	endpoint := fmt.Sprintf("%s/xrpc/blue.microcosm.identity.resolveMiniDoc?%s", c.baseURL, params.Encode())
 
 	req, err := http.NewRequestWithContext(ctx, "GET", endpoint, nil)
 	if err != nil {
···
 
 func (c *Client) GetRecord(ctx context.Context, uri string) (*Record, error) {
 	params := url.Values{}
-	params.Set("uri", uri)
+	params.Set("at_uri", uri)
 
-	endpoint := fmt.Sprintf("%s/record?%s", c.baseURL, params.Encode())
+	endpoint := fmt.Sprintf("%s/xrpc/blue.microcosm.repo.getRecordByUri?%s", c.baseURL, params.Encode())
 
 	req, err := http.NewRequestWithContext(ctx, "GET", endpoint, nil)
 	if err != nil {

backend/internal/verification/verify.go

···
 	"net/url"
 	"regexp"
 	"strings"
+	"sync"
 	"time"
 
 	"margin.at/internal/logger"
 )
 
 var client = &http.Client{
-	Timeout: 10 * time.Second,
+	Timeout: 5 * time.Second,
 	CheckRedirect: func(req *http.Request, via []*http.Request) error {
 		if len(via) >= 3 {
 			return fmt.Errorf("too many redirects")
···
 	},
 }
 
-var verifySem = make(chan struct{}, 3)
+var linkTagPattern = regexp.MustCompile(`<link[^>]+rel=["']site\.standard\.document["'][^>]+href=["']([^"']+)["'][^>]*/?>|<link[^>]+href=["']([^"']+)["'][^>]+rel=["']site\.standard\.document["'][^>]*/?>`)
+
+var (
+	verifyQueue = make(chan verifyTask, 50)
+	recentMu    sync.RWMutex
+	recentURIs  = make(map[string]time.Time)
+)
+
+var (
+	domainMu      sync.Mutex
+	domainActive  = make(map[string]int)
+	domainMaxConc = 1
+)
+
+var rateLimiter = make(chan struct{}, 2)
+
+func init() {
+	for i := 0; i < cap(rateLimiter); i++ {
+		rateLimiter <- struct{}{}
+	}
+	go func() {
+		ticker := time.NewTicker(500 * time.Millisecond)
+		for range ticker.C {
+			select {
+			case rateLimiter <- struct{}{}:
+			default:
+			}
+		}
+	}()
+
+	for i := 0; i < 3; i++ {
+		go verifyWorker()
+	}
+	go func() {
+		for {
+			time.Sleep(5 * time.Minute)
+			recentMu.Lock()
+			cutoff := time.Now().Add(-10 * time.Minute)
+			for uri, t := range recentURIs {
+				if t.Before(cutoff) {
+					delete(recentURIs, uri)
+				}
+			}
+			recentMu.Unlock()
+
+			domainMu.Lock()
+			for d, c := range domainActive {
+				if c <= 0 {
+					delete(domainActive, d)
+				}
+			}
+			domainMu.Unlock()
+		}
+	}()
+}
+
+type verifyTask struct {
+	url        string
+	uri        string
+	onVerified func(string)
+	isDoc      bool
+}
+
+func extractDomain(rawURL string) string {
+	parsed, err := url.Parse(rawURL)
+	if err != nil {
+		return ""
+	}
+	return parsed.Host
+}
+
+func acquireDomain(domain string) bool {
+	if domain == "" {
+		return true
+	}
+	domainMu.Lock()
+	defer domainMu.Unlock()
+	if domainActive[domain] >= domainMaxConc {
+		return false
+	}
+	domainActive[domain]++
+	return true
+}
+
+func releaseDomain(domain string) {
+	if domain == "" {
+		return
+	}
+	domainMu.Lock()
+	domainActive[domain]--
+	if domainActive[domain] <= 0 {
+		delete(domainActive, domain)
+	}
+	domainMu.Unlock()
+}
+
+func verifyWorker() {
+	for task := range verifyQueue {
+		<-rateLimiter
 
-var linkTagPattern = regexp.MustCompile(`<link[^>]+rel=["']site\.standard\.document["'][^>]+href=["']([^"']+)["'][^>]*/?>|<link[^>]+href=["']([^"']+)["'][^>]+rel=["']site\.standard\.document["'][^>]*/?>`)
+		domain := extractDomain(task.url)
+
+		if !acquireDomain(domain) {
+			continue
+		}
+
+		var err error
+		if task.isDoc {
+			err = VerifyDocument(task.url, task.uri)
+		} else {
+			err = VerifyPublication(task.url, task.uri)
+		}
+
+		releaseDomain(domain)
+
+		if err != nil {
+			continue
+		}
+		kind := "Publication"
+		if task.isDoc {
+			kind = "Document"
+		}
+		logger.Info("%s verified: %s", kind, task.uri)
+		if task.onVerified != nil {
+			task.onVerified(task.uri)
+		}
+	}
+}
+
+func isDuplicate(uri string) bool {
+	recentMu.RLock()
+	_, exists := recentURIs[uri]
+	recentMu.RUnlock()
+	if exists {
+		return true
+	}
+	recentMu.Lock()
+	recentURIs[uri] = time.Now()
+	recentMu.Unlock()
+	return false
+}
 
 func VerifyPublication(pubURL, expectedURI string) error {
 	pubURL = strings.TrimRight(pubURL, "/")
···
 }
 
 func VerifyPublicationAsync(pubURL, uri string, onVerified func(string)) {
-	go func() {
-		verifySem <- struct{}{}
-		defer func() { <-verifySem }()
-
-		if err := VerifyPublication(pubURL, uri); err != nil {
-			return
-		}
-		logger.Info("Publication verified: %s", uri)
-		if onVerified != nil {
-			onVerified(uri)
-		}
-	}()
+	if isDuplicate(uri) {
+		return
+	}
+	select {
+	case verifyQueue <- verifyTask{url: pubURL, uri: uri, onVerified: onVerified, isDoc: false}:
+	default:
+		// Queue full — drop silently to protect network
+	}
 }
 
 func VerifyDocumentAsync(docURL, uri string, onVerified func(string)) {
-	go func() {
-		verifySem <- struct{}{}
-		defer func() { <-verifySem }()
-
-		if err := VerifyDocument(docURL, uri); err != nil {
-			return
-		}
-		logger.Info("Document verified: %s", uri)
-		if onVerified != nil {
-			onVerified(uri)
-		}
-	}()
+	if isDuplicate(uri) {
+		return
+	}
+	select {
+	case verifyQueue <- verifyTask{url: docURL, uri: uri, onVerified: onVerified, isDoc: true}:
+	default:
+		// Queue full — drop silently to protect network
+	}
 }

web/src/components/common/Card.tsx

···
 
   React.useEffect(() => {
     if (isBookmark && item.uri && !ogData && pageUrl) {
-      const fetchMetadata = async () => {
-        try {
-          const res = await fetch(
-            `/api/url-metadata?url=${encodeURIComponent(pageUrl)}`,
-          );
-          if (res.ok) {
-            const data = await res.json();
-            setOgData(data);
-            try {
-              sessionStorage.setItem(`og:${pageUrl}`, JSON.stringify(data));
-            } catch {
-              /* quota exceeded */
-            }
-          }
-        } catch (e) {
-          console.error("Failed to fetch metadata", e);
-        }
+      let cancelled = false;
+      import("../../lib/metadataQueue").then(({ fetchMetadata }) => {
+        fetchMetadata(pageUrl).then((data) => {
+          if (!cancelled && data) setOgData(data);
+        });
+      });
+      return () => {
+        cancelled = true;
       };
-      fetchMetadata();
     }
   }, [isBookmark, item.uri, pageUrl, ogData]);
 
···
   const displayImage = ogData?.image;
 
   return (
-    <article className="card p-4 hover:ring-black/10 dark:hover:ring-white/10 transition-all relative">
+    <article className="card p-4 hover:ring-black/10 dark:hover:ring-white/10 transition-all relative overflow-hidden">
       {(item.collection || (item.context && item.context.length > 0)) && (
         <div className="flex items-center gap-1.5 text-xs text-surface-400 dark:text-surface-500 mb-2 flex-wrap">
           {item.addedBy && item.addedBy.did !== item.author?.did ? (
···
         )}
       >
         {contentWarning && !contentRevealed && (
-          <div className="absolute inset-0 z-10 rounded-lg bg-surface-100 dark:bg-surface-800 flex flex-col items-center justify-center gap-2 py-4">
+          <div className="z-10 rounded-lg bg-surface-100 dark:bg-surface-800 flex flex-col items-center justify-center gap-2 py-6 min-h-[120px]">
             <div className="flex items-center gap-2 text-surface-500 dark:text-surface-400">
               <EyeOff size={16} />
               <span className="text-sm font-medium">
···
             Hide Content
           </button>
         )}
-        {isBookmark && (
+        {!(contentWarning && !contentRevealed) && isBookmark && (
           <div
             onClick={(e) => {
               e.preventDefault();
···
           </div>
         )}
 
-        {item.target?.selector?.exact && (
-          <blockquote
-            className={clsx(
-              "pl-4 py-2 border-l-[3px] mb-3 text-[15px] italic text-surface-600 dark:text-surface-300 rounded-r-lg hover:bg-surface-50 dark:hover:bg-surface-800/50 transition-colors",
-              !item.color &&
-                type === "highlight" &&
-                "border-yellow-400 bg-yellow-50/50 dark:bg-yellow-900/20",
-              item.color === "yellow" &&
-                "border-yellow-400 bg-yellow-50/50 dark:bg-yellow-900/20",
-              item.color === "green" &&
-                "border-green-400 bg-green-50/50 dark:bg-green-900/20",
-              item.color === "red" &&
-                "border-red-400 bg-red-50/50 dark:bg-red-900/20",
-              item.color === "blue" &&
-                "border-blue-400 bg-blue-50/50 dark:bg-blue-900/20",
-              !item.color &&
-                type !== "highlight" &&
-                "border-surface-300 dark:border-surface-600",
-            )}
-            style={
-              item.color?.startsWith("#")
-                ? {
-                    borderColor: item.color,
-                    backgroundColor: `${item.color}15`,
-                  }
-                : undefined
-            }
-          >
-            <a
-              href={`${pageUrl}#:~:text=${item.target.selector.prefix ? encodeURIComponent(item.target.selector.prefix) + "-," : ""}${encodeURIComponent(item.target.selector.exact)}${item.target.selector.suffix ? ",-" + encodeURIComponent(item.target.selector.suffix) : ""}`}
-              target="_blank"
-              rel="noopener noreferrer"
-              onClick={(e) => {
-                const sel = item.target?.selector;
-                if (!sel) return;
-                const url = `${pageUrl}#:~:text=${sel.prefix ? encodeURIComponent(sel.prefix) + "-," : ""}${encodeURIComponent(sel.exact)}${sel.suffix ? ",-" + encodeURIComponent(sel.suffix) : ""}`;
-                handleExternalClick(e, url);
-              }}
-              className="block"
+        {!(contentWarning && !contentRevealed) &&
+          item.target?.selector?.exact && (
+            <blockquote
+              className={clsx(
+                "pl-4 py-2 border-l-[3px] mb-3 text-[15px] italic text-surface-600 dark:text-surface-300 rounded-r-lg hover:bg-surface-50 dark:hover:bg-surface-800/50 transition-colors",
+                !item.color &&
+                  type === "highlight" &&
+                  "border-yellow-400 bg-yellow-50/50 dark:bg-yellow-900/20",
+                item.color === "yellow" &&
+                  "border-yellow-400 bg-yellow-50/50 dark:bg-yellow-900/20",
+                item.color === "green" &&
+                  "border-green-400 bg-green-50/50 dark:bg-green-900/20",
+                item.color === "red" &&
+                  "border-red-400 bg-red-50/50 dark:bg-red-900/20",
+                item.color === "blue" &&
+                  "border-blue-400 bg-blue-50/50 dark:bg-blue-900/20",
+                !item.color &&
+                  type !== "highlight" &&
+                  "border-surface-300 dark:border-surface-600",
+              )}
+              style={
+                item.color?.startsWith("#")
+                  ? {
+                      borderColor: item.color,
+                      backgroundColor: `${item.color}15`,
+                    }
+                  : undefined
+              }
             >
-              "{item.target?.selector?.exact}"
-            </a>
-          </blockquote>
-        )}
+              <a
+                href={`${pageUrl}#:~:text=${item.target.selector.prefix ? encodeURIComponent(item.target.selector.prefix) + "-," : ""}${encodeURIComponent(item.target.selector.exact)}${item.target.selector.suffix ? ",-" + encodeURIComponent(item.target.selector.suffix) : ""}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={(e) => {
+                  const sel = item.target?.selector;
+                  if (!sel) return;
+                  const url = `${pageUrl}#:~:text=${sel.prefix ? encodeURIComponent(sel.prefix) + "-," : ""}${encodeURIComponent(sel.exact)}${sel.suffix ? ",-" + encodeURIComponent(sel.suffix) : ""}`;
+                  handleExternalClick(e, url);
+                }}
+                className="block"
+              >
+                "{item.target?.selector?.exact}"
+              </a>
+            </blockquote>
+          )}
 
-        {item.body?.value && (
-          <p className="text-surface-900 dark:text-surface-100 whitespace-pre-wrap leading-relaxed text-[15px]">
+        {!(contentWarning && !contentRevealed) && item.body?.value && (
+          <p className="text-surface-900 dark:text-surface-100 whitespace-pre-wrap break-words leading-relaxed text-[15px]">
             <RichText text={item.body.value} />
           </p>
         )}
 
-        {item.tags && item.tags.length > 0 && (
-          <div className="flex flex-wrap gap-2 mt-3">
-            {item.tags.map((tag) => (
-              <a
-                key={tag}
-                href={`/home?tag=${encodeURIComponent(tag)}`}
-                className="inline-flex items-center gap-1 px-2 py-1 rounded-md bg-surface-100 dark:bg-surface-800 text-xs font-medium text-surface-600 dark:text-surface-400 hover:bg-surface-200 dark:hover:bg-surface-700 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
-                onClick={(e) => e.stopPropagation()}
-              >
-                <Tag size={10} />
-                <span>{tag}</span>
-              </a>
-            ))}
-          </div>
-        )}
+        {!(contentWarning && !contentRevealed) &&
+          item.tags &&
+          item.tags.length > 0 && (
+            <div className="flex flex-wrap gap-2 mt-3">
+              {item.tags.map((tag) => (
+                <a
+                  key={tag}
+                  href={`/home?tag=${encodeURIComponent(tag)}`}
+                  className="inline-flex items-center gap-1 px-2 py-1 rounded-md bg-surface-100 dark:bg-surface-800 text-xs font-medium text-surface-600 dark:text-surface-400 hover:bg-surface-200 dark:hover:bg-surface-700 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <Tag size={10} />
+                  <span>{tag}</span>
+                </a>
+              ))}
+            </div>
+          )}
       </div>
 
       <div className="flex items-center gap-1 mt-3 ml-[52px] md:ml-0 md:gap-0">

web/src/components/feed/FeedItems.tsx

···
 import { Clock, Loader2 } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { type GetFeedParams, getFeed } from "../../api/client";
 import Card from "../../components/common/Card";
 import { EmptyState } from "../../components/ui";
···
 > {
   layout: "list" | "mosaic";
   emptyMessage: string;
+  initialItems?: AnnotationItem[];
+  initialHasMore?: boolean;
 }
 
 export default function FeedItems({
···
   motivation,
   emptyMessage,
   layout,
+  initialItems,
+  initialHasMore,
 }: FeedItemsProps) {
-  const [items, setItems] = useState<AnnotationItem[]>([]);
-  const [loading, setLoading] = useState(true);
+  const [items, setItems] = useState<AnnotationItem[]>(initialItems || []);
+  const [loading, setLoading] = useState(!initialItems);
   const [loadingMore, setLoadingMore] = useState(false);
-  const [hasMore, setHasMore] = useState(false);
-  const [offset, setOffset] = useState(0);
+  const [hasMore, setHasMore] = useState(initialHasMore ?? false);
+  const [offset, setOffset] = useState(initialItems?.length ?? 0);
+  const skipInitialFetch = useRef(!!initialItems);
 
   useEffect(() => {
+    if (skipInitialFetch.current) {
+      skipInitialFetch.current = false;
+      return;
+    }
+
     let cancelled = false;
     const cacheKey = JSON.stringify({ type, motivation, tag, creator, source });
     const cached = feedCache.get(cacheKey);

web/src/components/modals/AddToCollectionModal.tsx

···
 } from "lucide-react";
 import CollectionIcon from "../common/CollectionIcon";
 import { ICON_MAP } from "../common/iconMap";
-import EmojiPicker, { Theme } from "emoji-picker-react";
+import { Theme } from "emoji-picker-react";
+const EmojiPicker = React.lazy(() => import("emoji-picker-react"));
 import { useStore } from "@nanostores/react";
 import { $user } from "../../store/auth";
 import { $theme } from "../../store/theme";
···
                   </div>
                 ) : (
                   <div className="w-full bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 overflow-hidden">
-                    <EmojiPicker
-                      className="custom-emoji-picker"
-                      onEmojiClick={(emojiData) => setNewIcon(emojiData.emoji)}
-                      autoFocusSearch={false}
-                      width="100%"
-                      height={300}
-                      previewConfig={{ showPreview: false }}
-                      skinTonesDisabled
-                      lazyLoadEmojis
-                      theme={
-                        theme === "dark" ||
-                        (theme === "system" &&
-                          window.matchMedia("(prefers-color-scheme: dark)")
-                            .matches)
-                          ? (Theme.DARK as Theme)
-                          : (Theme.LIGHT as Theme)
+                    <React.Suspense
+                      fallback={
+                        <div className="flex items-center justify-center h-[300px]">
+                          <Loader2
+                            className="animate-spin text-surface-400"
+                            size={24}
+                          />
+                        </div>
                       }
-                    />
+                    >
+                      <EmojiPicker
+                        className="custom-emoji-picker"
+                        onEmojiClick={(emojiData) =>
+                          setNewIcon(emojiData.emoji)
+                        }
+                        autoFocusSearch={false}
+                        width="100%"
+                        height={300}
+                        previewConfig={{ showPreview: false }}
+                        skinTonesDisabled
+                        lazyLoadEmojis
+                        theme={
+                          theme === "dark" ||
+                          (theme === "system" &&
+                            window.matchMedia("(prefers-color-scheme: dark)")
+                              .matches)
+                            ? (Theme.DARK as Theme)
+                            : (Theme.LIGHT as Theme)
+                        }
+                      />
+                    </React.Suspense>
                   </div>
                 )}
 

web/src/components/modals/EditCollectionModal.tsx

···
 import { X, Loader2 } from "lucide-react";
 import CollectionIcon from "../common/CollectionIcon";
 import { ICON_MAP } from "../common/iconMap";
-import EmojiPicker, { Theme } from "emoji-picker-react";
+import { Theme } from "emoji-picker-react";
+const EmojiPicker = React.lazy(() => import("emoji-picker-react"));
 import { updateCollection, type Collection } from "../../api/client";
 import { useStore } from "@nanostores/react";
 import { $theme } from "../../store/theme";
···
                 </div>
               ) : (
                 <div className="w-full bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 overflow-hidden">
-                  <EmojiPicker
-                    className="custom-emoji-picker"
-                    onEmojiClick={(emojiData) => setIcon(emojiData.emoji)}
-                    autoFocusSearch={false}
-                    width="100%"
-                    height={300}
-                    previewConfig={{ showPreview: false }}
-                    skinTonesDisabled
-                    lazyLoadEmojis
-                    theme={
-                      theme === "dark" ||
-                      (theme === "system" &&
-                        window.matchMedia("(prefers-color-scheme: dark)")
-                          .matches)
-                        ? (Theme.DARK as Theme)
-                        : (Theme.LIGHT as Theme)
+                  <React.Suspense
+                    fallback={
+                      <div className="flex items-center justify-center h-[300px]">
+                        <Loader2
+                          className="animate-spin text-surface-400"
+                          size={24}
+                        />
+                      </div>
                     }
-                  />
+                  >
+                    <EmojiPicker
+                      className="custom-emoji-picker"
+                      onEmojiClick={(emojiData) => setIcon(emojiData.emoji)}
+                      autoFocusSearch={false}
+                      width="100%"
+                      height={300}
+                      previewConfig={{ showPreview: false }}
+                      skinTonesDisabled
+                      lazyLoadEmojis
+                      theme={
+                        theme === "dark" ||
+                        (theme === "system" &&
+                          window.matchMedia("(prefers-color-scheme: dark)")
+                            .matches)
+                          ? (Theme.DARK as Theme)
+                          : (Theme.LIGHT as Theme)
+                      }
+                    />
+                  </React.Suspense>
                 </div>
               )}
 

web/src/components/modals/ShareMenu.tsx

···
     if (customUrl) return customUrl;
     if (!uri) return "";
 
+    const origin = typeof window !== "undefined" ? window.location.origin : "";
     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}`;
+      return `${origin}/at/${did}/${rkey}`;
     if (handle && type)
-      return `${window.location.origin}/${handle}/${type.toLowerCase()}/${rkey}`;
-    return `${window.location.origin}/at/${did}/${rkey}`;
+      return `${origin}/${handle}/${type.toLowerCase()}/${rkey}`;
+    return `${origin}/at/${did}/${rkey}`;
   };
 
   const shareUrl = getShareUrl();
···
               copied === "aturi",
             )}
 
-            {navigator.share &&
+            {typeof navigator !== "undefined" &&
+              navigator.share &&
               renderMenuItem(
                 "More Options...",
                 <MoreHorizontal size={16} />,

web/src/pages/[handle]/annotation/[rkey].astro

···
 import AppLayout from '../../../layouts/AppLayout.astro';
 import AnnotationDetail from '../../../views/content/AnnotationDetail';
 import { resolveHandle, fetchOGForRoute } from '../../../lib/og';
+import { getAnnotation, getReplies } from '../../../lib/api';
 
 const { handle, rkey } = Astro.params;
 const user = Astro.locals.user;
+const cookie = Astro.request.headers.get('cookie') || '';
 
 let title = 'Annotation - Margin';
 let description = 'Annotate the web';
 let image = 'https://margin.at/og.png';
+let initialAnnotation = null;
+let initialReplies: any[] = [];
+let resolvedUri = '';
 
 if (handle && rkey) {
 	try {
 		const did = await resolveHandle(handle);
 		if (did) {
-			const data = await fetchOGForRoute(did, rkey, 'at.margin.annotation');
-			if (data) {
-				title = data.title;
-				description = data.description;
-				image = data.image;
+			resolvedUri = `at://${did}/at.margin.annotation/${rkey}`;
+			const [ogData, annData, repData] = await Promise.all([
+				fetchOGForRoute(did, rkey, 'at.margin.annotation'),
+				getAnnotation(cookie, resolvedUri),
+				getReplies(cookie, resolvedUri),
+			]);
+			if (ogData) {
+				title = ogData.title;
+				description = ogData.description;
+				image = ogData.image;
 			}
+			initialAnnotation = annData;
+			initialReplies = repData;
 		}
 	} catch (e) {
-		console.error('OG fetch error (annotation):', e);
+		console.error('OG/data fetch error (annotation):', e);
 	}
 }
 ---
 
 <AppLayout title={title} description={description} image={image} user={user}>
-	<AnnotationDetail client:load handle={handle} rkey={rkey} type="annotation" />
+	<AnnotationDetail client:idle handle={handle} rkey={rkey} type="annotation"
+		initialAnnotation={initialAnnotation} initialReplies={initialReplies} resolvedUri={resolvedUri} />
 </AppLayout>

web/src/pages/[handle]/bookmark/[rkey].astro

···
 import AppLayout from '../../../layouts/AppLayout.astro';
 import AnnotationDetail from '../../../views/content/AnnotationDetail';
 import { resolveHandle, fetchOGForRoute } from '../../../lib/og';
+import { getAnnotation, getReplies } from '../../../lib/api';
 
 const { handle, rkey } = Astro.params;
 const user = Astro.locals.user;
+const cookie = Astro.request.headers.get('cookie') || '';
 
 let title = 'Bookmark - Margin';
 let description = 'Annotate the web';
 let image = 'https://margin.at/og.png';
+let initialAnnotation = null;
+let initialReplies: any[] = [];
+let resolvedUri = '';
 
 if (handle && rkey) {
 	try {
 		const did = await resolveHandle(handle);
 		if (did) {
-			const data = await fetchOGForRoute(did, rkey, 'at.margin.bookmark');
-			if (data) {
-				title = data.title;
-				description = data.description;
-				image = data.image;
+			resolvedUri = `at://${did}/at.margin.bookmark/${rkey}`;
+			const [ogData, annData, repData] = await Promise.all([
+				fetchOGForRoute(did, rkey, 'at.margin.bookmark'),
+				getAnnotation(cookie, resolvedUri),
+				getReplies(cookie, resolvedUri),
+			]);
+			if (ogData) {
+				title = ogData.title;
+				description = ogData.description;
+				image = ogData.image;
 			}
+			initialAnnotation = annData;
+			initialReplies = repData;
 		}
 	} catch (e) {
-		console.error('OG fetch error (bookmark):', e);
+		console.error('OG/data fetch error (bookmark):', e);
 	}
 }
 ---
 
 <AppLayout title={title} description={description} image={image} user={user}>
-	<AnnotationDetail client:load handle={handle} rkey={rkey} type="bookmark" />
+	<AnnotationDetail client:idle handle={handle} rkey={rkey} type="bookmark"
+		initialAnnotation={initialAnnotation} initialReplies={initialReplies} resolvedUri={resolvedUri} />
 </AppLayout>

web/src/pages/[handle]/collection/[rkey].astro

···
 import AppLayout from '../../../layouts/AppLayout.astro';
 import CollectionDetail from '../../../views/collections/CollectionDetail';
 import { resolveHandle, fetchCollectionOG } from '../../../lib/og';
+import { getCollection, getCollectionItems } from '../../../lib/api';
 
 const { handle, rkey } = Astro.params;
 const user = Astro.locals.user;
+const cookie = Astro.request.headers.get('cookie') || '';
 
 let title = 'Collection - Margin';
 let description = 'Annotate the web';
 let image = 'https://margin.at/og.png';
+let initialCollection = null;
+let initialItems: any[] = [];
+let resolvedUri = '';
 
 if (handle && rkey) {
 	try {
 		const did = await resolveHandle(handle);
 		if (did) {
-			const uri = `at://${did}/at.margin.collection/${rkey}`;
-			const data = await fetchCollectionOG(uri);
-			if (data) {
-				title = data.title;
-				description = data.description;
-				image = data.image;
+			resolvedUri = `at://${did}/at.margin.collection/${rkey}`;
+			const [ogData, col] = await Promise.all([
+				fetchCollectionOG(resolvedUri),
+				getCollection(cookie, resolvedUri),
+			]);
+			if (ogData) {
+				title = ogData.title;
+				description = ogData.description;
+				image = ogData.image;
+			}
+			if (col) {
+				initialCollection = col;
+				initialItems = await getCollectionItems(cookie, col.uri);
 			}
 		}
 	} catch (e) {
-		console.error('OG fetch error (collection):', e);
+		console.error('OG/data fetch error (collection):', e);
 	}
 }
 ---
 
 <AppLayout title={title} description={description} image={image} user={user}>
-	<CollectionDetail client:load handle={handle} rkey={rkey} />
+	<CollectionDetail client:idle handle={handle} rkey={rkey}
+		initialCollection={initialCollection} initialItems={initialItems} resolvedUri={resolvedUri} />
 </AppLayout>

web/src/pages/[handle]/highlight/[rkey].astro

···
 import AppLayout from '../../../layouts/AppLayout.astro';
 import AnnotationDetail from '../../../views/content/AnnotationDetail';
 import { resolveHandle, fetchOGForRoute } from '../../../lib/og';
+import { getAnnotation, getReplies } from '../../../lib/api';
 
 const { handle, rkey } = Astro.params;
 const user = Astro.locals.user;
+const cookie = Astro.request.headers.get('cookie') || '';
 
 let title = 'Highlight - Margin';
 let description = 'Annotate the web';
 let image = 'https://margin.at/og.png';
+let initialAnnotation = null;
+let initialReplies: any[] = [];
+let resolvedUri = '';
 
 if (handle && rkey) {
 	try {
 		const did = await resolveHandle(handle);
 		if (did) {
-			const data = await fetchOGForRoute(did, rkey, 'at.margin.highlight');
-			if (data) {
-				title = data.title;
-				description = data.description;
-				image = data.image;
+			resolvedUri = `at://${did}/at.margin.highlight/${rkey}`;
+			const [ogData, annData, repData] = await Promise.all([
+				fetchOGForRoute(did, rkey, 'at.margin.highlight'),
+				getAnnotation(cookie, resolvedUri),
+				getReplies(cookie, resolvedUri),
+			]);
+			if (ogData) {
+				title = ogData.title;
+				description = ogData.description;
+				image = ogData.image;
 			}
+			initialAnnotation = annData;
+			initialReplies = repData;
 		}
 	} catch (e) {
-		console.error('OG fetch error (highlight):', e);
+		console.error('OG/data fetch error (highlight):', e);
 	}
 }
 ---
 
 <AppLayout title={title} description={description} image={image} user={user}>
-	<AnnotationDetail client:load handle={handle} rkey={rkey} type="highlight" />
+	<AnnotationDetail client:idle handle={handle} rkey={rkey} type="highlight"
+		initialAnnotation={initialAnnotation} initialReplies={initialReplies} resolvedUri={resolvedUri} />
 </AppLayout>

web/src/pages/at/[did]/[rkey].astro

···
 import AppLayout from '../../../layouts/AppLayout.astro';
 import AnnotationDetail from '../../../views/content/AnnotationDetail';
 import { fetchOGForRoute } from '../../../lib/og';
+import { getAnnotation, getReplies } from '../../../lib/api';
 
 const { did, rkey } = Astro.params;
 const user = Astro.locals.user;
+const cookie = Astro.request.headers.get('cookie') || '';
 
 let title = 'Margin';
 let description = 'Annotate the web';
 let image = 'https://margin.at/og.png';
+let initialAnnotation = null;
+let initialReplies: any[] = [];
+let resolvedUri = '';
 
 if (did && rkey) {
-	const data = await fetchOGForRoute(did, rkey);
-	if (data) {
-		title = data.title;
-		description = data.description;
-		image = data.image;
+	try {
+		resolvedUri = `at://${did}/at.margin.annotation/${rkey}`;
+		const [ogData, annData, repData] = await Promise.all([
+			fetchOGForRoute(did, rkey),
+			getAnnotation(cookie, resolvedUri),
+			getReplies(cookie, resolvedUri),
+		]);
+		if (ogData) {
+			title = ogData.title;
+			description = ogData.description;
+			image = ogData.image;
+		}
+		initialAnnotation = annData;
+		initialReplies = repData;
+	} catch (e) {
+		console.error('OG/data fetch error:', e);
 	}
 }
 ---
 
 <AppLayout title={title} description={description} image={image} user={user}>
-	<AnnotationDetail client:load did={did} rkey={rkey} />
+	<AnnotationDetail client:idle did={did} rkey={rkey}
+		initialAnnotation={initialAnnotation} initialReplies={initialReplies} resolvedUri={resolvedUri} />
 </AppLayout>

web/src/pages/collections/[rkey].astro

···
 
 import AppLayout from '../../layouts/AppLayout.astro';
 import CollectionDetail from '../../views/collections/CollectionDetail';
+import { getCollection, getCollectionItems } from '../../lib/api';
 
 const { rkey } = Astro.params;
 const user = Astro.locals.user;
+const cookie = Astro.request.headers.get('cookie') || '';
+
+let initialCollection = null;
+let initialItems: any[] = [];
+let resolvedUri = '';
+let pageTitle = 'Collection - Margin';
+
+if (user && rkey) {
+	try {
+		resolvedUri = `at://${user.did}/at.margin.collection/${rkey}`;
+		const col = await getCollection(cookie, resolvedUri);
+		if (col) {
+			initialCollection = col;
+			pageTitle = `${col.name || 'Collection'} - Margin`;
+			initialItems = await getCollectionItems(cookie, col.uri);
+		}
+	} catch { /* component will fetch client-side */ }
+}
 ---
 
-<AppLayout title="Collection - Margin" user={user}>
-	<CollectionDetail client:load rkey={rkey} />
+<AppLayout title={pageTitle} user={user}>
+	<CollectionDetail client:idle rkey={rkey} initialCollection={initialCollection} initialItems={initialItems} resolvedUri={resolvedUri} />
 </AppLayout>

web/src/pages/profile/[did].astro

···
 
 import AppLayout from '../../layouts/AppLayout.astro';
 import Profile from '../../views/profile/Profile';
+import { getProfile } from '../../lib/api';
 
 const { did } = Astro.params;
 const user = Astro.locals.user;
···
 if (!did) {
 	return Astro.redirect('/home');
 }
+
+const cookie = Astro.request.headers.get('cookie') || '';
+let initialProfile = null;
+let pageTitle = 'Profile - Margin';
+
+try {
+	initialProfile = await getProfile(cookie, did);
+	if (initialProfile?.displayName) {
+		pageTitle = `${initialProfile.displayName} - Margin`;
+	} else if (initialProfile?.handle) {
+		pageTitle = `@${initialProfile.handle} - Margin`;
+	}
+} catch { /* component will fetch client-side */ }
 ---
 
-<AppLayout title="Profile - Margin" user={user}>
-	<Profile client:load did={did} />
+<AppLayout title={pageTitle} user={user}>
+	<Profile client:load did={did} initialProfile={initialProfile} />
 </AppLayout>

web/src/pages/search.astro

···
 ---
 
 import AppLayout from '../layouts/AppLayout.astro';
-import Search from '../views/core/Search';
+import SearchView from '../views/core/Search';
 
 const user = Astro.locals.user;
 const q = Astro.url.searchParams.get('q') || undefined;
 ---
 
 <AppLayout title={q ? `Search: ${q} - Margin` : 'Search - Margin'} user={user}>
-	<Search client:load initialQuery={q} />
+	<SearchView client:load initialQuery={q} />
 </AppLayout>

web/src/store/auth.ts

···
 import { atom } from "nanostores";
-import { checkSession } from "../api/client";
 import { loadPreferences } from "./preferences";
 import type { UserProfile } from "../types";
 
 export const $user = atom<UserProfile | null>(null);
-export const $isLoading = atom<boolean>(true);
 
 $user.subscribe((user) => {
   if (user) {
     loadPreferences();
   }
 });
-
-export async function initAuth() {
-  $isLoading.set(true);
-  const session = await checkSession();
-  $user.set(session);
-  $isLoading.set(false);
-}
 
 export function logout() {
   fetch("/auth/logout", { method: "POST" }).then(() => {

web/src/views/collections/CollectionDetail.tsx

···
   handle?: string;
   rkey?: string;
   uri?: string;
+  initialCollection?: Collection | null;
+  initialItems?: AnnotationItem[];
+  resolvedUri?: string;
 }
 
 export default function CollectionDetail({
   handle,
   rkey,
   uri,
+  initialCollection,
+  initialItems,
+  resolvedUri,
 }: CollectionDetailProps) {
   const user = useStore($user);
-  const [collection, setCollection] = useState<Collection | null>(null);
-  const [items, setItems] = useState<AnnotationItem[]>([]);
-  const [loading, setLoading] = useState(true);
+  const [collection, setCollection] = useState<Collection | null>(
+    initialCollection || null,
+  );
+  const [items, setItems] = useState<AnnotationItem[]>(initialItems || []);
+  const [loading, setLoading] = useState(!initialCollection);
   const [error, setError] = useState<string | null>(null);
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);
 
   useEffect(() => {
+    if (initialCollection) return;
+
     const loadData = async () => {
       setLoading(true);
       try {
-        let targetUri = uri;
+        let targetUri = resolvedUri || uri;
         if (!targetUri && handle && rkey) {
           if (handle.startsWith("did:")) {
             targetUri = `at://${handle}/at.margin.collection/${rkey}`;
···
     };
 
     loadData();
-  }, [handle, rkey, uri]);
+  }, [handle, rkey, uri, initialCollection, resolvedUri]);
 
   const handleDelete = async () => {
     if (!collection) return;

web/src/views/collections/Collections.tsx

···
   createCollection,
   deleteCollection,
 } from "../../api/client";
-import { Plus, Folder, Trash2, X } from "lucide-react";
+import { Plus, Folder, Trash2, X, Loader2 } from "lucide-react";
 import CollectionIcon from "../../components/common/CollectionIcon";
 import { ICON_MAP } from "../../components/common/iconMap";
 import { useStore } from "@nanostores/react";
 import { $user } from "../../store/auth";
-import EmojiPicker, { Theme } from "emoji-picker-react";
+import { Theme } from "emoji-picker-react";
+const EmojiPicker = React.lazy(() => import("emoji-picker-react"));
 import { $theme } from "../../store/theme";
 import type { Collection } from "../../types";
 import { formatDistanceToNow } from "date-fns";
···
   timestamp: 0,
 };
 
-export default function Collections() {
+interface CollectionsProps {
+  initialCollections?: Collection[];
+}
+
+export default function Collections({ initialCollections }: CollectionsProps) {
   const user = useStore($user);
   const theme = useStore($theme);
-  const [collections, setCollections] = useState<Collection[]>([]);
-  const [loading, setLoading] = useState(true);
+  const [collections, setCollections] = useState<Collection[]>(
+    Array.isArray(initialCollections) ? initialCollections : [],
+  );
+  const [loading, setLoading] = useState(!Array.isArray(initialCollections));
   const [showCreateModal, setShowCreateModal] = useState(false);
   const [newItemName, setNewItemName] = useState("");
   const [newItemDesc, setNewItemDesc] = useState("");
···
   };
 
   useEffect(() => {
+    if (initialCollections) return;
     fetchCollections();
-  }, []);
+  }, [initialCollections]);
 
   const handleCreate = async (e: React.FormEvent) => {
     e.preventDefault();
···
                   </div>
                 ) : (
                   <div className="w-full bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 overflow-hidden">
-                    <EmojiPicker
-                      className="custom-emoji-picker"
-                      onEmojiClick={(emojiData) =>
-                        setNewItemIcon(emojiData.emoji)
+                    <React.Suspense
+                      fallback={
+                        <div className="flex items-center justify-center h-[300px]">
+                          <Loader2
+                            className="animate-spin text-surface-400"
+                            size={24}
+                          />
+                        </div>
                       }
-                      autoFocusSearch={false}
-                      width="100%"
-                      height={300}
-                      previewConfig={{ showPreview: false }}
-                      skinTonesDisabled
-                      lazyLoadEmojis
-                      theme={
-                        theme === "dark" ||
-                        (theme === "system" &&
-                          window.matchMedia("(prefers-color-scheme: dark)")
-                            .matches)
-                          ? (Theme.DARK as Theme)
-                          : (Theme.LIGHT as Theme)
-                      }
-                    />
+                    >
+                      <EmojiPicker
+                        className="custom-emoji-picker"
+                        onEmojiClick={(emojiData) =>
+                          setNewItemIcon(emojiData.emoji)
+                        }
+                        autoFocusSearch={false}
+                        width="100%"
+                        height={300}
+                        previewConfig={{ showPreview: false }}
+                        skinTonesDisabled
+                        lazyLoadEmojis
+                        theme={
+                          theme === "dark" ||
+                          (theme === "system" &&
+                            window.matchMedia("(prefers-color-scheme: dark)")
+                              .matches)
+                            ? (Theme.DARK as Theme)
+                            : (Theme.LIGHT as Theme)
+                        }
+                      />
+                    </React.Suspense>
                   </div>
                 )}
               </div>

web/src/views/content/AnnotationDetail.tsx

···
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useStore } from "@nanostores/react";
 import { $user } from "../../store/auth";
 import {
···
   type?: string;
   uri?: string;
   did?: string;
+  initialAnnotation?: AnnotationItem | null;
+  initialReplies?: AnnotationItem[];
+  resolvedUri?: string;
 }
 
 export default function AnnotationDetail({
···
   type,
   uri,
   did,
+  initialAnnotation,
+  initialReplies,
+  resolvedUri,
 }: AnnotationDetailProps) {
   const user = useStore($user);
 
-  const [annotation, setAnnotation] = useState<AnnotationItem | null>(null);
-  const [replies, setReplies] = useState<AnnotationItem[]>([]);
-  const [loading, setLoading] = useState(true);
+  const [annotation, setAnnotation] = useState<AnnotationItem | null>(
+    initialAnnotation || null,
+  );
+  const [replies, setReplies] = useState<AnnotationItem[]>(
+    initialReplies || [],
+  );
+  const [loading, setLoading] = useState(!initialAnnotation);
   const [error, setError] = useState<string | null>(null);
 
   const [replyText, setReplyText] = useState("");
   const [posting, setPosting] = useState(false);
   const [replyingTo, setReplyingTo] = useState<AnnotationItem | null>(null);
 
-  const [targetUri, setTargetUri] = useState<string | null>(uri || null);
+  const [targetUri, setTargetUri] = useState<string | null>(
+    resolvedUri || uri || null,
+  );
+  const skipInitialFetch = useRef(!!initialAnnotation);
 
   useEffect(() => {
+    if (resolvedUri) return;
+
     async function resolve() {
       if (uri) {
         setTargetUri(decodeURIComponent(uri));
···
       }
     }
     resolve();
-  }, [uri, did, rkey, handle, type]);
+  }, [uri, did, rkey, handle, type, resolvedUri]);
 
   const refreshReplies = async () => {
     if (!targetUri) return;
···
   };
 
   useEffect(() => {
+    if (skipInitialFetch.current) {
+      skipInitialFetch.current = false;
+      return;
+    }
+
     async function fetchData() {
       if (!targetUri) return;
 

web/src/views/core/Discover.tsx

···
 import { $feedLayout } from "../../store/feedLayout";
 import { formatDistanceToNow } from "date-fns";
 
-export default function Discover() {
+interface DiscoverProps {
+  initialDocuments?: DocumentItem[];
+  initialHasMore?: boolean;
+}
+
+export default function Discover({
+  initialDocuments,
+  initialHasMore,
+}: DiscoverProps) {
   const user = useStore($user);
   const layout = useStore($feedLayout);
   const [activeTab, setActiveTab] = useState("new");
-  const [items, setItems] = useState<DocumentItem[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [hasMore, setHasMore] = useState(false);
-  const [offset, setOffset] = useState(0);
+  const [items, setItems] = useState<DocumentItem[]>(initialDocuments || []);
+  const [loading, setLoading] = useState(!initialDocuments);
+  const [hasMore, setHasMore] = useState(initialHasMore ?? false);
+  const [offset, setOffset] = useState(initialDocuments?.length ?? 0);
   const [recommendationsUnavailable, setRecommendationsUnavailable] =
     useState(false);
   const fetchIdRef = useRef(0);
···
     [limit],
   );
 
+  const skipInitialFetch = useRef(!!initialDocuments);
   useEffect(() => {
+    if (skipInitialFetch.current) {
+      skipInitialFetch.current = false;
+      return;
+    }
     queueMicrotask(() => fetchItems(activeTab, 0));
   }, [activeTab, fetchItems]);
 

web/src/views/core/Feed.tsx

···
 import { useStore } from "@nanostores/react";
 import { clsx } from "clsx";
-import { Bookmark, Highlighter, MessageSquareText } from "lucide-react";
+import {
+  Bookmark,
+  Highlighter,
+  MessageSquareText,
+  User,
+  Users,
+} from "lucide-react";
 import { useState } from "react";
 import FeedItems from "../../components/feed/FeedItems";
 import { Button, Tabs } from "../../components/ui";
 import LayoutToggle from "../../components/ui/LayoutToggle";
 import { $user } from "../../store/auth";
 import { $feedLayout } from "../../store/feedLayout";
-import type { UserProfile } from "../../types";
+import type { AnnotationItem, UserProfile } from "../../types";
 
 interface FeedProps {
   initialType?: string;
···
   motivation?: string;
   showTabs?: boolean;
   emptyMessage?: string;
+  initialItems?: AnnotationItem[];
+  initialHasMore?: boolean;
 }
 
 export default function Feed({
···
   motivation,
   showTabs = true,
   emptyMessage = "No items found.",
+  initialItems,
+  initialHasMore,
 }: FeedProps) {
   const [tag, setTag] = useState<string | undefined>(
     initialTag ||
···
   const [activeFilter, setActiveFilter] = useState<string | undefined>(
     motivation,
   );
+  const [mineOnly, setMineOnly] = useState(false);
 
   const clearTag = () => {
     setTag(undefined);
···
         </div>
       )}
 
-      {showTabs && (
-        <div className="sticky top-0 z-10 bg-white/90 dark:bg-surface-800/90 backdrop-blur-md pb-3 mb-2 -mx-1 px-1 pt-2 space-y-2">
-          {!tag && (
-            <Tabs
-              tabs={tabs}
-              activeTab={activeTab}
-              onChange={handleTabChange}
-            />
-          )}
-          {tag && (
-            <div className="flex items-center justify-between mb-2">
-              <h2 className="text-xl font-bold flex items-center gap-2">
-                <span className="text-surface-500 font-normal">
-                  Items with tag:
-                </span>
-                <span className="bg-primary-50 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 px-2 py-0.5 rounded-lg">
-                  #{tag}
-                </span>
-              </h2>
-              <button
-                onClick={clearTag}
-                className="text-sm text-surface-500 hover:text-surface-900 dark:hover:text-white"
-              >
-                Clear filter
-              </button>
-            </div>
-          )}
+      <div className="sticky top-0 z-10 bg-white/90 dark:bg-surface-800/90 backdrop-blur-md pb-3 mb-2 -mx-1 px-1 pt-2 space-y-2">
+        {showTabs && !tag && (
+          <Tabs tabs={tabs} activeTab={activeTab} onChange={handleTabChange} />
+        )}
+        {tag && (
+          <div className="flex items-center justify-between mb-2">
+            <h2 className="text-xl font-bold flex items-center gap-2">
+              <span className="text-surface-500 font-normal">
+                Items with tag:
+              </span>
+              <span className="bg-primary-50 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 px-2 py-0.5 rounded-lg">
+                #{tag}
+              </span>
+            </h2>
+            <button
+              onClick={clearTag}
+              className="text-sm text-surface-500 hover:text-surface-900 dark:hover:text-white"
+            >
+              Clear filter
+            </button>
+          </div>
+        )}
+        {showTabs && (
           <div className="flex items-center gap-1.5 flex-wrap">
             {filters.map((f) => {
               const isActive =
···
               <LayoutToggle className="hidden sm:inline-flex" />
             </div>
           </div>
-        </div>
-      )}
+        )}
+        {!showTabs && user && (
+          <div className="flex items-center gap-1.5">
+            {[
+              { id: "everyone", label: "Everyone", icon: Users },
+              { id: "mine", label: "Mine", icon: User },
+            ].map((f) => {
+              const isActive = f.id === "mine" ? mineOnly : !mineOnly;
+              return (
+                <button
+                  key={f.id}
+                  onClick={() => setMineOnly(f.id === "mine")}
+                  className={clsx(
+                    "inline-flex items-center gap-1.5 px-3 py-1 text-xs font-medium rounded-full border transition-all",
+                    isActive
+                      ? "bg-primary-600 dark:bg-primary-500 text-white border-transparent shadow-sm"
+                      : "bg-white dark:bg-surface-900 text-surface-500 dark:text-surface-400 border-surface-200 dark:border-surface-700 hover:border-primary-300 dark:hover:border-primary-700 hover:text-primary-600 dark:hover:text-primary-400",
+                  )}
+                >
+                  <f.icon size={12} />
+                  {f.label}
+                </button>
+              );
+            })}
+            <div className="ml-auto">
+              <LayoutToggle className="hidden sm:inline-flex" />
+            </div>
+          </div>
+        )}
+      </div>
 
       <FeedItems
-        key={`${activeTab}-${activeFilter || "all"}-${tag || ""}`}
+        key={`${activeTab}-${activeFilter || "all"}-${tag || ""}-${mineOnly ? "mine" : "all"}`}
         type={activeTab === "atmosphereconf" ? "all" : activeTab}
         motivation={activeFilter}
+        creator={mineOnly && user ? user.did : undefined}
         emptyMessage={emptyMessage}
         layout={layout}
-        tag={activeTab === "atmosphereconf" ? "atmosphereconf" : tag?.toLowerCase()}
+        tag={
+          activeTab === "atmosphereconf" ? "atmosphereconf" : tag?.toLowerCase()
+        }
+        initialItems={
+          activeTab === initialType && activeFilter === motivation && !mineOnly
+            ? initialItems
+            : undefined
+        }
+        initialHasMore={
+          activeTab === initialType && activeFilter === motivation && !mineOnly
+            ? initialHasMore
+            : undefined
+        }
       />
     </div>
   );

web/src/views/core/Notifications.tsx

···
   );
 }
 
-export default function Notifications() {
-  const [notifications, setNotifications] = useState<NotificationItem[]>([]);
-  const [loading, setLoading] = useState(true);
+interface NotificationsProps {
+  initialNotifications?: NotificationItem[];
+}
+
+export default function Notifications({
+  initialNotifications,
+}: NotificationsProps) {
+  const [notifications, setNotifications] = useState<NotificationItem[]>(
+    initialNotifications || [],
+  );
+  const [loading, setLoading] = useState(!initialNotifications);
 
   useEffect(() => {
+    if (initialNotifications) {
+      markNotificationsRead();
+      return;
+    }
+
     const load = async () => {
       if (
         notificationsCache.data &&
···
       markNotificationsRead();
     };
     load();
-  }, []);
+  }, [initialNotifications]);
 
   if (loading) {
     return (

web/src/views/core/Search.tsx

···
 
 interface SearchProps {
   initialQuery?: string;
+  initialResults?: AnnotationItem[];
+  initialHasMore?: boolean;
 }
 
-export default function Search({ initialQuery = "" }: SearchProps) {
+export default function Search({
+  initialQuery = "",
+  initialResults,
+  initialHasMore,
+}: SearchProps) {
   const user = useStore($user);
   const layout = useStore($feedLayout);
 
   const [query, setQuery] = useState(initialQuery);
-  const [results, setResults] = useState<AnnotationItem[]>([]);
+  const [results, setResults] = useState<AnnotationItem[]>(
+    initialResults || [],
+  );
   const [loading, setLoading] = useState(false);
-  const [hasMore, setHasMore] = useState(false);
-  const [offset, setOffset] = useState(0);
+  const [hasMore, setHasMore] = useState(initialHasMore ?? false);
+  const [offset, setOffset] = useState(initialResults?.length ?? 0);
   const [myItemsOnly, setMyItemsOnly] = useState(false);
   const [activeFilter, setActiveFilter] = useState<string | undefined>(
     undefined,
···
     [user],
   );
 
+  const skipInitialSearch = useRef(!!initialResults);
   useEffect(() => {
+    if (skipInitialSearch.current) {
+      skipInitialSearch.current = false;
+      return;
+    }
     if (initialQuery) {
       // eslint-disable-next-line react-hooks/set-state-in-effect
       doSearch(initialQuery);

web/src/views/profile/Profile.tsx

···
 
 interface ProfileProps {
   did: string;
+  initialProfile?: UserProfile | null;
 }
 
 type Tab = "all" | "annotations" | "highlights" | "bookmarks" | "collections";
···
   collections: undefined,
 };
 
-export default function Profile({ did }: ProfileProps) {
-  const [profile, setProfile] = useState<UserProfile | null>(null);
-  const [loading, setLoading] = useState(true);
+export default function Profile({ did, initialProfile }: ProfileProps) {
+  const [profile, setProfile] = useState<UserProfile | null>(
+    initialProfile || null,
+  );
+  const [loading, setLoading] = useState(!initialProfile);
   const [activeTab, setActiveTab] = useState<Tab>("all");
 
   const [collections, setCollections] = useState<Collection[]>([]);
···
     }
   };
 
+  const skipInitialProfileFetch = useRef(!!initialProfile);
   useEffect(() => {
-    setProfile(null);
-    setCollections([]);
-    setActiveTab("all");
-    setLoading(true);
+    if (skipInitialProfileFetch.current) {
+      skipInitialProfileFetch.current = false;
+    } else {
+      setProfile(null);
+      setCollections([]);
+      setActiveTab("all");
+      setLoading(true);
+    }
 
     const loadProfile = async () => {
       const cached = profileCache.get(did);
···
         setAccountLabels(cached.labels);
         setModRelation(cached.relation);
         setLoading(false);
-      } else {
+      } else if (!initialProfile) {
         setLoading(true);
       }
 
···
       }
     };
     if (did) loadProfile();
-  }, [did, user]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [did, user, initialProfile]);
 
   useEffect(() => {
     loadPreferences();