Add relay status badge, toast notifications, per-tab feed timestamps, relay UX improvements

- Relay status badge in feed header: shows connected/total relay count with
  color coding (green >75%, yellow 25-75%, red <25%), hover tooltip with
  per-relay status
- Toast notification system: transient messages for connection lost,
  reconnecting, relay reset, and back-online events
- Per-tab "last updated" relative timestamp in feed header (global,
  following, trending tracked independently)
- Consolidated all relay management into RelaysView (removed duplicate
  relay section from Settings); per-relay remove button on health cards
- Show all supported NIP badges on relay cards (was filtering to 11 notable)
- Tooltips on relay status dots explaining green/yellow/red/gray meaning
- Fix relay removal with trailing-slash URL normalization
- Fix stale health results lingering after relay removal
- Add acknowledgements section to README

README.md

@@ -171,6 +171,17 @@ Wrystr is free and open-source. If it's useful to you:
 | ♥ GitHub Sponsors | [github.com/sponsors/hoornet](https://github.com/sponsors/hoornet) |
 | ★ GitHub star | Helps with visibility and grant applications |
 
+## Acknowledgements
+
+Wrystr is built on the shoulders of excellent open-source projects:
+
+- [Tauri](https://tauri.app/) — the desktop shell that makes cross-platform Rust+Web apps possible
+- [NDK (Nostr Dev Kit)](https://github.com/nostr-dev-kit/ndk) by [Pablo Fernandez](https://github.com/pablof7z) — the Nostr protocol library that powers all relay communication
+- [Nostr protocol](https://github.com/nostr-protocol/nostr) by [fiatjaf](https://github.com/fiatjaf) — the protocol itself
+- [React](https://react.dev/), [Vite](https://vite.dev/), [Tailwind CSS](https://tailwindcss.com/), [Zustand](https://github.com/pmndrs/zustand) — the frontend stack
+- [ants](https://github.com/dergigi/ants) by [Gigi](https://github.com/dergigi) — inspiration and Nostr ecosystem advocacy
+- The Nostr community — for building an open, censorship-resistant communication layer
+
 ## License
 
 MIT License — Copyright (c) 2026 Jure Sršen — [hoornet](https://github.com/hoornet)

src/App.tsx

@@ -20,6 +20,7 @@ import { BookmarkView } from "./components/bookmark/BookmarkView";
 import { HashtagFeed } from "./components/feed/HashtagFeed";
 import { PodcastsView } from "./components/podcast/PodcastsView";
 import { PodcastPlayerBar } from "./components/podcast/PodcastPlayerBar";
+import { ToastContainer } from "./components/shared/ToastContainer";
 import { HelpModal } from "./components/shared/HelpModal";
 import { useUIStore } from "./stores/ui";
 import { useUpdater } from "./hooks/useUpdater";
@@ -108,6 +109,7 @@ function App() {
       </main>
       </div>
       <PodcastPlayerBar />
+      <ToastContainer />
       {showHelp && <HelpModal onClose={toggleHelp} />}
     </div>
   );

src/components/feed/Feed.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
 import { useFeedStore } from "../../stores/feed";
 import { useUserStore } from "../../stores/user";
 import { useMuteStore } from "../../stores/mute";
@@ -10,15 +10,33 @@ import { NoteCard } from "./NoteCard";
 import { ArticleCard } from "../article/ArticleCard";
 import { ComposeBox } from "./ComposeBox";
 import { SkeletonNoteList } from "../shared/Skeleton";
+import { RelayStatusBadge } from "./RelayStatusBadge";
 import { NDKEvent } from "@nostr-dev-kit/ndk";
 
+function timeAgo(ts: number): string {
+  const sec = Math.floor((Date.now() - ts) / 1000);
+  if (sec < 5) return "just now";
+  if (sec < 60) return `${sec}s ago`;
+  const min = Math.floor(sec / 60);
+  if (min < 60) return `${min}m ago`;
+  const hr = Math.floor(min / 60);
+  return `${hr}h ago`;
+}
+
 export function Feed() {
-  const { notes, loading, connected, error, connect, loadCachedFeed, loadFeed, trendingNotes, trendingLoading, loadTrendingFeed, focusedNoteIndex } = useFeedStore();
+  const { notes, loading, error, connect, loadCachedFeed, loadFeed, trendingNotes, trendingLoading, loadTrendingFeed, focusedNoteIndex, lastUpdated } = useFeedStore();
   const { loggedIn, follows } = useUserStore();
   const { mutedPubkeys, contentMatchesMutedKeyword } = useMuteStore();
   const { feedTab: tab, setFeedTab: setTab, feedLanguageFilter, setFeedLanguageFilter } = useUIStore();
   const [followNotes, setFollowNotes] = useState<NDKEvent[]>([]);
   const [followLoading, setFollowLoading] = useState(false);
+  const [, setTick] = useState(0);
+
+  // Tick every 10s to keep "last updated" relative time fresh
+  useEffect(() => {
+    const id = setInterval(() => setTick((t) => t + 1), 10000);
+    return () => clearInterval(id);
+  }, []);
 
   useEffect(() => {
     // Show cached notes immediately, then fetch fresh ones once connected
@@ -36,16 +54,18 @@ export function Feed() {
     }
   }, [tab, follows]);
 
-  const loadFollowFeed = async () => {
+  const loadFollowFeed = useCallback(async () => {
     setFollowLoading(true);
     try {
       await ensureConnected();
       const events = await diagWrapFetch("follow_fetch", () => fetchFollowFeed(follows));
       setFollowNotes(events);
+      const prev = useFeedStore.getState().lastUpdated;
+      useFeedStore.setState({ lastUpdated: { ...prev, following: Date.now() } });
     } finally {
       setFollowLoading(false);
     }
-  };
+  }, [follows]);
 
   const isFollowing = tab === "following";
   const isTrending = tab === "trending";
@@ -135,11 +155,9 @@ export function Feed() {
               <option key={s} value={s}>{s.toLowerCase()}</option>
             ))}
           </select>
-          {connected && (
-            <span className="text-success text-[11px] flex items-center gap-1">
-              <span className="w-1.5 h-1.5 rounded-full bg-success inline-block" />
-              connected
-            </span>
+          <RelayStatusBadge />
+          {lastUpdated[tab] && (
+            <span className="text-text-dim text-[10px]">{timeAgo(lastUpdated[tab])}</span>
           )}
           <button
             onClick={() => {

src/components/feed/RelayStatusBadge.tsx

@@ -0,0 +1,57 @@
+import { useState } from "react";
+import { useRelayStatus } from "../../hooks/useRelayStatus";
+
+function shortenUrl(url: string): string {
+  return url.replace(/^wss?:\/\//, "").replace(/\/$/, "");
+}
+
+export function RelayStatusBadge() {
+  const { connectedCount, totalCount, relays } = useRelayStatus();
+  const [hovered, setHovered] = useState(false);
+
+  const ratio = totalCount > 0 ? connectedCount / totalCount : 0;
+  const colorClass =
+    ratio > 0.75
+      ? "text-success"
+      : ratio > 0.25
+        ? "text-warning"
+        : "text-danger";
+  const dotClass =
+    ratio > 0.75
+      ? "bg-success"
+      : ratio > 0.25
+        ? "bg-warning"
+        : "bg-danger";
+
+  if (totalCount === 0) return null;
+
+  return (
+    <span
+      className={`relative ${colorClass} text-[11px] flex items-center gap-1 cursor-default`}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      <span className={`w-1.5 h-1.5 rounded-full ${dotClass} inline-block`} />
+      {connectedCount}/{totalCount} relays
+
+      {hovered && (
+        <div className="absolute right-0 top-full mt-1 bg-bg-raised border border-border p-2 z-50 min-w-[200px] shadow-lg">
+          {relays
+            .sort((a, b) => (a.connected === b.connected ? 0 : a.connected ? -1 : 1))
+            .map((r) => (
+              <div key={r.url} className="flex items-center gap-2 py-0.5">
+                <span
+                  className={`w-1.5 h-1.5 rounded-full shrink-0 ${
+                    r.connected ? "bg-success" : "bg-danger"
+                  }`}
+                />
+                <span className="text-[11px] text-text-dim truncate">
+                  {shortenUrl(r.url)}
+                </span>
+              </div>
+            ))}
+        </div>
+      )}
+    </span>
+  );
+}

src/components/shared/RelaysView.tsx

@@ -27,12 +27,11 @@ function formatLatency(ms: number | null): string {
 }
 
 function NipBadges({ nips }: { nips: number[] }) {
-  const notable = [1, 4, 11, 17, 23, 25, 50, 57, 65, 96, 98];
-  const supported = notable.filter((n) => nips.includes(n));
-  if (supported.length === 0) return null;
+  if (nips.length === 0) return null;
+  const sorted = [...nips].sort((a, b) => a - b);
   return (
     <div className="flex flex-wrap gap-1 mt-1">
-      {supported.map((n) => (
+      {sorted.map((n) => (
         <span key={n} className="px-1 py-0 text-[9px] border border-border text-text-dim rounded-sm">
           NIP-{String(n).padStart(2, "0")}
         </span>
@@ -41,17 +40,20 @@ function NipBadges({ nips }: { nips: number[] }) {
   );
 }
 
-function RelayHealthCard({ result, poolConnected }: { result: RelayHealthResult; poolConnected: boolean }) {
+function RelayHealthCard({ result, poolConnected, onRemove }: { result: RelayHealthResult; poolConnected: boolean; onRemove: () => void }) {
   const [expanded, setExpanded] = useState(false);
   const nip11 = result.nip11;
 
   return (
-    <div className="border border-border">
+    <div className="border border-border group/card">
       <div
         className="flex items-center gap-3 px-3 py-2 text-[12px] cursor-pointer hover:bg-bg-hover transition-colors"
         onClick={() => setExpanded((v) => !v)}
       >
-        <span className={`w-2 h-2 rounded-full shrink-0 ${statusColor(result.status)}`} />
+        <span
+          className={`w-2 h-2 rounded-full shrink-0 ${statusColor(result.status)}`}
+          title={result.status === "online" ? "Online" : result.status === "slow" ? `Slow (${formatLatency(result.latencyMs)})` : "Offline — connection failed"}
+        />
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-2">
             <span className="text-text truncate font-mono">{result.url}</span>
@@ -72,6 +74,12 @@ function RelayHealthCard({ result, poolConnected }: { result: RelayHealthResult;
           {poolConnected && (
             <span className="w-1.5 h-1.5 rounded-full bg-accent shrink-0" title="NDK connected" />
           )}
+          <button
+            onClick={(e) => { e.stopPropagation(); onRemove(); }}
+            className="text-text-dim hover:text-danger text-[10px] opacity-0 group-hover/card:opacity-100 transition-opacity"
+          >
+            remove
+          </button>
           <span className="text-text-dim text-[10px]">{expanded ? "▾" : "▸"}</span>
         </div>
       </div>
@@ -105,9 +113,6 @@ function RelayHealthCard({ result, poolConnected }: { result: RelayHealthResult;
               </div>
               {nip11.supported_nips && nip11.supported_nips.length > 0 && (
                 <div>
-                  <span className="text-text-dim text-[10px]">
-                    {nip11.supported_nips.length} NIPs supported
-                  </span>
                   <NipBadges nips={nip11.supported_nips} />
                 </div>
               )}
@@ -125,12 +130,21 @@ function RelayHealthCard({ result, poolConnected }: { result: RelayHealthResult;
 }
 
 /** Fallback row for relays not yet health-checked */
-function RelayPoolRow({ url, connected }: { url: string; connected: boolean }) {
+function RelayPoolRow({ url, connected, onRemove }: { url: string; connected: boolean; onRemove: () => void }) {
   return (
-    <div className="flex items-center gap-3 px-3 py-2 border border-border text-[12px]">
-      <span className={`w-2 h-2 rounded-full shrink-0 ${connected ? "bg-success" : "bg-text-dim"}`} />
+    <div className="flex items-center gap-3 px-3 py-2 border border-border text-[12px] group">
+      <span
+        className={`w-2 h-2 rounded-full shrink-0 ${connected ? "bg-success" : "bg-text-dim"}`}
+        title={connected ? "Connected" : "Not connected — awaiting health check"}
+      />
       <span className="text-text truncate flex-1 font-mono">{url}</span>
       <span className="text-text-dim text-[10px]">{connected ? "connected" : "—"}</span>
+      <button
+        onClick={onRemove}
+        className="text-text-dim hover:text-danger text-[10px] opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
+      >
+        remove
+      </button>
     </div>
   );
 }
@@ -142,6 +156,11 @@ export function RelaysView() {
   const poolRelays = Array.from(ndk.pool?.relays?.values() ?? []);
   const poolConnectedUrls = new Set(poolRelays.filter((r) => r.connected).map((r) => r.url));
 
+  const [input, setInput] = useState("");
+  const [addError, setAddError] = useState<string | null>(null);
+  const [removing, setRemoving] = useState(false);
+  const [republishing, setRepublishing] = useState(false);
+
   // Auto-check on first mount if no results yet
   useEffect(() => {
     if (results.length === 0 && !checking) {
@@ -154,15 +173,33 @@ export function RelaysView() {
   const offlineCount = results.filter((r) => r.status === "offline").length;
   const deadRelays = results.filter((r) => r.status === "offline");
 
-  const [removing, setRemoving] = useState(false);
-  const [republishing, setRepublishing] = useState(false);
+  const handleAddRelay = () => {
+    const url = input.trim();
+    if (!url) return;
+    if (!url.startsWith("ws://") && !url.startsWith("wss://")) {
+      setAddError("URL must start with ws:// or wss://");
+      return;
+    }
+    if (getStoredRelayUrls().includes(url)) {
+      setAddError("Already in list");
+      return;
+    }
+    addRelay(url);
+    setInput("");
+    setAddError(null);
+    checkAll();
+  };
+
+  const handleRemoveRelay = (url: string) => {
+    removeRelay(url);
+    checkAll();
+  };
 
   const handleRemoveDead = async () => {
     setRemoving(true);
     for (const r of deadRelays) {
       removeRelay(r.url);
     }
-    // Re-check remaining
     await checkAll();
     setRemoving(false);
   };
@@ -175,6 +212,11 @@ export function RelaysView() {
     setRepublishing(false);
   };
 
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") handleAddRelay();
+    if (e.key === "Escape") setInput("");
+  };
+
   // Merge: show health results first, then any pool relays not yet checked
   const checkedUrls = new Set(results.map((r) => r.url));
   const uncheckedPoolRelays = poolRelays.filter((r) => !checkedUrls.has(r.url));
@@ -221,30 +263,48 @@ export function RelaysView() {
         </div>
       </header>
 
+      {/* Add relay input */}
+      <div className="border-b border-border px-4 py-2 shrink-0">
+        <div className="flex gap-2">
+          <input
+            value={input}
+            onChange={(e) => { setInput(e.target.value); setAddError(null); }}
+            onKeyDown={handleKeyDown}
+            placeholder="wss://relay.example.com"
+            className="flex-1 bg-bg border border-border px-3 py-1.5 text-text text-[12px] font-mono focus:outline-none focus:border-accent/50 placeholder:text-text-dim"
+          />
+          <button
+            onClick={handleAddRelay}
+            className="px-3 py-1.5 text-[11px] border border-border text-text-muted hover:text-accent hover:border-accent/40 transition-colors shrink-0"
+          >
+            add
+          </button>
+          {loggedIn && !!getNDK().signer && (
+            <button
+              onClick={handleRepublish}
+              disabled={republishing}
+              className="px-3 py-1.5 text-[11px] border border-border text-text-muted hover:text-accent hover:border-accent/40 transition-colors disabled:opacity-40 shrink-0"
+            >
+              {republishing ? "publishing…" : "publish list"}
+            </button>
+          )}
+        </div>
+        {addError && <p className="text-danger text-[11px] mt-1">{addError}</p>}
+      </div>
+
       {/* Actions bar — show when there are dead relays */}
       {deadRelays.length > 0 && (
         <div className="border-b border-border px-4 py-2 bg-danger/5 flex items-center justify-between shrink-0">
           <span className="text-danger text-[11px]">
             {deadRelays.length} relay{deadRelays.length > 1 ? "s" : ""} offline
           </span>
-          <div className="flex items-center gap-2">
-            <button
-              onClick={handleRemoveDead}
-              disabled={removing}
-              className="px-3 py-1 text-[11px] border border-danger/30 text-danger hover:bg-danger/10 transition-colors disabled:opacity-40"
-            >
-              {removing ? "removing…" : "remove dead"}
-            </button>
-            {loggedIn && !!getNDK().signer && (
-              <button
-                onClick={handleRepublish}
-                disabled={republishing}
-                className="px-3 py-1 text-[11px] border border-border text-text-muted hover:text-accent hover:border-accent/40 transition-colors disabled:opacity-40"
-              >
-                {republishing ? "publishing…" : "republish list"}
-              </button>
-            )}
-          </div>
+          <button
+            onClick={handleRemoveDead}
+            disabled={removing}
+            className="px-3 py-1 text-[11px] border border-danger/30 text-danger hover:bg-danger/10 transition-colors disabled:opacity-40"
+          >
+            {removing ? "removing…" : "remove dead"}
+          </button>
         </div>
       )}
 
@@ -259,11 +319,17 @@ export function RelaysView() {
               key={result.url}
               result={result}
               poolConnected={poolConnectedUrls.has(result.url)}
+              onRemove={() => handleRemoveRelay(result.url)}
             />
           ))}
 
           {uncheckedPoolRelays.map((relay) => (
-            <RelayPoolRow key={relay.url} url={relay.url} connected={relay.connected} />
+            <RelayPoolRow
+              key={relay.url}
+              url={relay.url}
+              connected={relay.connected}
+              onRemove={() => handleRemoveRelay(relay.url)}
+            />
           ))}
         </div>
 

src/components/shared/SettingsView.tsx

@@ -4,7 +4,7 @@ import { writeTextFile } from "@tauri-apps/plugin-fs";
 import { useUserStore } from "../../stores/user";
 import { useMuteStore } from "../../stores/mute";
 import { useBookmarkStore } from "../../stores/bookmark";
-import { getNDK, getStoredRelayUrls, addRelay, removeRelay, publishRelayList } from "../../lib/nostr";
+import { getStoredRelayUrls } from "../../lib/nostr";
 import { useProfile } from "../../hooks/useProfile";
 import { NWCWizard } from "./NWCWizard";
 import { getNotificationSettings, saveNotificationSettings, ensurePermission } from "../../lib/notifications";
@@ -113,117 +113,6 @@ function MutedKeywordsSection() {
   );
 }
 
-function RelayRow({ url, onRemove }: { url: string; onRemove: () => void }) {
-  const ndk = getNDK();
-  const relay = ndk.pool?.relays.get(url);
-  const connected = relay?.connected ?? false;
-
-  return (
-    <div className="flex items-center gap-3 px-3 py-2 border border-border text-[12px] group">
-      <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${connected ? "bg-success" : "bg-text-dim"}`} />
-      <span className="text-text truncate flex-1 font-mono">{url}</span>
-      <button
-        onClick={onRemove}
-        className="text-text-dim hover:text-danger text-[10px] opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
-      >
-        remove
-      </button>
-    </div>
-  );
-}
-
-function RelaySection() {
-  const { loggedIn } = useUserStore();
-  const [relays, setRelays] = useState<string[]>(() => getStoredRelayUrls());
-  const [input, setInput] = useState("");
-  const [error, setError] = useState<string | null>(null);
-  const [publishing, setPublishing] = useState(false);
-  const [publishedAt, setPublishedAt] = useState<number | null>(null);
-
-  const handleAdd = () => {
-    const url = input.trim();
-    if (!url) return;
-    if (!url.startsWith("ws://") && !url.startsWith("wss://")) {
-      setError("URL must start with ws:// or wss://");
-      return;
-    }
-    if (relays.includes(url)) {
-      setError("Already in list");
-      return;
-    }
-    addRelay(url);
-    setRelays(getStoredRelayUrls());
-    setInput("");
-    setError(null);
-  };
-
-  const handleRemove = (url: string) => {
-    removeRelay(url);
-    setRelays(getStoredRelayUrls());
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter") handleAdd();
-    if (e.key === "Escape") setInput("");
-  };
-
-  const handlePublishRelayList = async () => {
-    setPublishing(true);
-    try {
-      await publishRelayList(getStoredRelayUrls());
-      setPublishedAt(Date.now());
-    } catch {
-      // ignore — publishing failure is non-critical
-    } finally {
-      setPublishing(false);
-    }
-  };
-
-  return (
-    <section>
-      <h2 className="text-text text-[11px] font-medium uppercase tracking-widest mb-2 text-text-dim">Relays</h2>
-      <div className="space-y-1 mb-3">
-        {relays.length === 0 && (
-          <p className="text-text-dim text-[12px] px-1">No relays configured.</p>
-        )}
-        {relays.map((url) => (
-          <RelayRow key={url} url={url} onRemove={() => handleRemove(url)} />
-        ))}
-      </div>
-      <div className="flex gap-2">
-        <input
-          value={input}
-          onChange={(e) => { setInput(e.target.value); setError(null); }}
-          onKeyDown={handleKeyDown}
-          placeholder="wss://relay.example.com"
-          className="flex-1 bg-bg border border-border px-3 py-1.5 text-text text-[12px] font-mono focus:outline-none focus:border-accent/50 placeholder:text-text-dim"
-        />
-        <button
-          onClick={handleAdd}
-          className="px-3 py-1.5 text-[11px] border border-border text-text-muted hover:text-accent hover:border-accent/40 transition-colors shrink-0"
-        >
-          add
-        </button>
-      </div>
-      {error && <p className="text-danger text-[11px] mt-1">{error}</p>}
-      {loggedIn && !!getNDK().signer && (
-        <div className="mt-3">
-          <button
-            onClick={handlePublishRelayList}
-            disabled={publishing}
-            className="text-[11px] px-3 py-1.5 border border-border text-text-muted hover:text-accent hover:border-accent/40 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
-          >
-            {publishing ? "publishing…" : publishedAt ? "published ✓" : "publish relay list to Nostr"}
-          </button>
-          <p className="text-text-dim text-[10px] mt-1">
-            Saves your relay list as a kind 10002 event (NIP-65) so other clients can find your notes.
-          </p>
-        </div>
-      )}
-    </section>
-  );
-}
-
 function IdentitySection() {
   const { npub, loggedIn } = useUserStore();
   const [copied, setCopied] = useState(false);
@@ -391,7 +280,6 @@ export function SettingsView() {
       <div className="flex-1 overflow-y-auto p-4 space-y-8">
         <WalletSection />
         <NotificationSection />
-        <RelaySection />
         <ExportSection />
         <IdentitySection />
         <MuteSection />

src/components/shared/ToastContainer.tsx

@@ -0,0 +1,35 @@
+import { useToastStore } from "../../stores/toast";
+
+const accentColor: Record<string, string> = {
+  info: "bg-accent",
+  warning: "bg-warning",
+  success: "bg-success",
+};
+
+export function ToastContainer() {
+  const { toasts, removeToast } = useToastStore();
+
+  if (toasts.length === 0) return null;
+
+  return (
+    <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2 items-end">
+      {toasts.map((toast) => (
+        <div
+          key={toast.id}
+          className="flex items-stretch min-w-[240px] max-w-[360px] bg-bg-raised border border-border shadow-lg"
+        >
+          <div className={`w-1 shrink-0 ${accentColor[toast.type]}`} />
+          <div className="flex items-center justify-between gap-2 px-3 py-2 flex-1">
+            <span className="text-[12px] text-text">{toast.message}</span>
+            <button
+              onClick={() => removeToast(toast.id)}
+              className="text-text-dim hover:text-text transition-colors text-[12px] shrink-0"
+            >
+              ×
+            </button>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

src/hooks/useRelayStatus.ts

@@ -0,0 +1,37 @@
+import { useState, useEffect } from "react";
+import { getNDK } from "../lib/nostr";
+
+interface RelayInfo {
+  url: string;
+  connected: boolean;
+}
+
+interface RelayStatus {
+  connectedCount: number;
+  totalCount: number;
+  relays: RelayInfo[];
+}
+
+function readPool(): RelayStatus {
+  const ndk = getNDK();
+  const relays = Array.from(ndk.pool?.relays?.values() ?? []).map((r) => ({
+    url: r.url,
+    connected: r.connected,
+  }));
+  return {
+    connectedCount: relays.filter((r) => r.connected).length,
+    totalCount: relays.length,
+    relays,
+  };
+}
+
+export function useRelayStatus(): RelayStatus {
+  const [status, setStatus] = useState<RelayStatus>(readPool);
+
+  useEffect(() => {
+    const id = setInterval(() => setStatus(readPool()), 5000);
+    return () => clearInterval(id);
+  }, []);
+
+  return status;
+}

src/lib/nostr/core.ts

@@ -116,10 +116,14 @@ export function addRelay(url: string): void {
 
 export function removeRelay(url: string): void {
   const instance = getNDK();
-  const relay = instance.pool?.relays.get(url);
-  if (relay) {
-    relay.disconnect();
-    instance.pool?.relays.delete(url);
+  // NDK may store URLs with or without trailing slash — check both
+  const variants = [url, url.replace(/\/$/, ""), url.replace(/\/?$/, "/")];
+  for (const v of variants) {
+    const relay = instance.pool?.relays.get(v);
+    if (relay) {
+      relay.disconnect();
+      instance.pool?.relays.delete(v);
+    }
   }
   saveRelayUrls(getStoredRelayUrls().filter((u) => u !== url));
 }

src/stores/feed.ts

@@ -1,6 +1,7 @@
 import { create } from "zustand";
 import { NDKEvent, NDKFilter, NDKKind, NDKSubscription, NDKSubscriptionCacheUsage } from "@nostr-dev-kit/ndk";
 import { connectToRelays, ensureConnected, resetNDK, fetchGlobalFeed, fetchBatchEngagement, fetchTrendingCandidates, getNDK } from "../lib/nostr";
+import { useToastStore } from "./toast";
 import { dbLoadFeed, dbSaveNotes } from "../lib/db";
 import { diagWrapFetch, logDiag, startRelaySnapshots, getRelayStates } from "../lib/feedDiagnostics";
 
@@ -18,6 +19,7 @@ interface FeedState {
   connected: boolean;
   error: string | null;
   focusedNoteIndex: number;
+  lastUpdated: Record<string, number>;
   trendingNotes: NDKEvent[];
   trendingLoading: boolean;
   connect: () => Promise<void>;
@@ -34,6 +36,7 @@ export const useFeedStore = create<FeedState>((set, get) => ({
   connected: false,
   error: null,
   focusedNoteIndex: -1,
+  lastUpdated: {},
   trendingNotes: [],
   trendingLoading: false,
   setFocusedNoteIndex: (n: number) => set({ focusedNoteIndex: n }),
@@ -64,6 +67,9 @@ export const useFeedStore = create<FeedState>((set, get) => ({
         const hasConnected = relays.some((r) => r.connected);
 
         if (hasConnected) {
+          if (offlineStreak > 0) {
+            useToastStore.getState().addToast("Back online", "success");
+          }
           offlineStreak = 0;
           if (!get().connected) set({ connected: true });
         } else {
@@ -72,14 +78,17 @@ export const useFeedStore = create<FeedState>((set, get) => ({
           if (offlineStreak >= 3 && get().connected) {
             set({ connected: false });
             logDiag({ ts: new Date().toISOString(), action: "connection_lost", details: `No relays connected after ${offlineStreak} checks` });
+            useToastStore.getState().addToast("Connection lost \u2014 reconnecting\u2026", "warning");
             // Nuclear reset after 6 consecutive failures (30s)
             if (offlineStreak >= 6) {
               offlineStreak = 0;
+              useToastStore.getState().addToast("Resetting relay connections\u2026", "info");
               resetNDK().then(() => {
                 if (getNDK().pool?.relays) {
                   const after = Array.from(getNDK().pool.relays.values());
                   if (after.some((r) => r.connected)) {
                     set({ connected: true });
+                    useToastStore.getState().addToast("Relays reconnected", "success");
                     // Restart live sub after NDK reset
                     get().startLiveFeed();
                   }
@@ -126,7 +135,7 @@ export const useFeedStore = create<FeedState>((set, get) => ({
         .sort((a, b) => (b.created_at ?? 0) - (a.created_at ?? 0))
         .slice(0, MAX_FEED_SIZE);
 
-      set({ notes: merged, loading: false, focusedNoteIndex: -1 });
+      set({ notes: merged, loading: false, focusedNoteIndex: -1, lastUpdated: { ...get().lastUpdated, global: Date.now() } });
 
       // Persist fresh notes to SQLite (fire-and-forget)
       dbSaveNotes(fresh.map((e) => JSON.stringify(e.rawEvent())));
@@ -167,7 +176,7 @@ export const useFeedStore = create<FeedState>((set, get) => ({
       const updated = [event, ...current]
         .sort((a, b) => (b.created_at ?? 0) - (a.created_at ?? 0))
         .slice(0, MAX_FEED_SIZE);
-      set({ notes: updated });
+      set({ notes: updated, lastUpdated: { ...get().lastUpdated, global: Date.now() } });
 
       // Debounced save to SQLite — batch saves every 5s
       if (!saveTimer) {
@@ -233,7 +242,7 @@ export const useFeedStore = create<FeedState>((set, get) => ({
         .slice(0, 50)
         .map((s) => s.note);
 
-      set({ trendingNotes: scored, trendingLoading: false });
+      set({ trendingNotes: scored, trendingLoading: false, lastUpdated: { ...get().lastUpdated, trending: Date.now() } });
 
       // Cache note IDs + timestamp
       localStorage.setItem(TRENDING_CACHE_KEY, JSON.stringify({

src/stores/relayHealth.ts

@@ -16,9 +16,12 @@ export const useRelayHealthStore = create<RelayHealthState>((set, get) => ({
 
   checkAll: async () => {
     if (get().checking) return;
-    set({ checking: true });
+    // Immediately prune stale results for relays no longer stored
+    const currentUrls = new Set(getStoredRelayUrls());
+    const pruned = get().results.filter((r) => currentUrls.has(r.url));
+    set({ checking: true, results: pruned });
     try {
-      const urls = getStoredRelayUrls();
+      const urls = Array.from(currentUrls);
       const results = await checkAllRelays(urls);
       set({ results, lastChecked: Date.now(), checking: false });
     } catch {

src/stores/toast.ts

@@ -0,0 +1,41 @@
+import { create } from "zustand";
+
+interface Toast {
+  id: string;
+  message: string;
+  type: "info" | "warning" | "success";
+  autoCloseMs: number;
+}
+
+interface ToastState {
+  toasts: Toast[];
+  addToast: (message: string, type: Toast["type"], autoCloseMs?: number) => void;
+  removeToast: (id: string) => void;
+}
+
+const MAX_TOASTS = 5;
+
+export const useToastStore = create<ToastState>((set, get) => ({
+  toasts: [],
+
+  addToast: (message, type, autoCloseMs = 4000) => {
+    // Deduplicate — don't add if same message already visible
+    if (get().toasts.some((t) => t.message === message)) return;
+
+    const id = crypto.randomUUID();
+    const toast: Toast = { id, message, type, autoCloseMs };
+
+    set((state) => {
+      const toasts = [...state.toasts, toast];
+      // Drop oldest if over limit
+      if (toasts.length > MAX_TOASTS) toasts.shift();
+      return { toasts };
+    });
+
+    setTimeout(() => get().removeToast(id), autoCloseMs);
+  },
+
+  removeToast: (id) => {
+    set((state) => ({ toasts: state.toasts.filter((t) => t.id !== id) }));
+  },
+}));