fix(ui): live-refresh FeatureSets and persist meta-tool activity across tabs

Two surfaces went stale when a connected MCP client drove changes through the
self-management meta-tools:

- FeatureSetsPage subscribed to no domain events, so `mcpmux_manage_feature_set`
  create/update/delete left the list stale until a manual refresh. Add a
  `feature-set-changed` listener that reloads the current Space.

- MetaToolAuditLog ("Recent meta-tool activity") kept rows in component-local
  state with a `meta-tool-invoked` listener mounted only while the panel was
  visible — so the list vanished on tab change and showed empty if you opened
  it after a call had fired. Lift the rows and the listener into a global
  store (metaToolActivityStore) started once at app launch, so activity
  accumulates for the whole session regardless of which tab is mounted.

Signed-off-by: Mohammod Al Amin Ashik <maa.ashik00@gmail.com>

Author: its-mash

apps/desktop/src/App.tsx

@@ -8,6 +8,7 @@ import { ServerInstallModal } from '@/components/ServerInstallModal';
 import { SpaceSwitcher } from '@/components/SpaceSwitcher';
 import { useDataSync } from '@/hooks/useDataSync';
 import { useAnalytics } from '@/hooks/useAnalytics';
+import { startMetaToolActivityListener } from '@/stores/metaToolActivityStore';
 import { initAnalytics, capture, optIn, optOut } from '@/lib/analytics';
 import {
   useAppStore,
@@ -161,6 +162,13 @@ function AppContent() {
     }
   }, [appVersion]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  // Start the app-wide meta-tool activity listener once at launch so the
+  // "Recent meta-tool activity" panel accumulates rows for the whole session
+  // and survives tab changes (the listener is idempotent and app-scoped).
+  useEffect(() => {
+    startMetaToolActivityListener();
+  }, []);
+
   // Sync opt-in/out when user toggles analytics
   useEffect(() => {
     if (!appVersion) return;

apps/desktop/src/features/featuresets/FeatureSetsPage.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect, useCallback } from 'react';
+import { listen } from '@tauri-apps/api/event';
 import {
   Plus,
   Loader2,
@@ -101,6 +102,19 @@ export function FeatureSetsPage() {
     loadData(viewSpace?.id);
   }, [viewSpace?.id, loadData]);
 
+  // Refresh when a feature set changes outside this page — most importantly
+  // the `mcpmux_manage_feature_set` meta-tool (create/update/delete) invoked by
+  // a connected MCP client. Without this, agent-driven changes leave the list
+  // stale until the user navigates away and back.
+  useEffect(() => {
+    const un = listen('feature-set-changed', () => {
+      void loadData(viewSpace?.id);
+    });
+    return () => {
+      un.then((fn) => fn()).catch(() => {});
+    };
+  }, [viewSpace?.id, loadData]);
+
   const handleCreate = async () => {
     if (!createName.trim() || !viewSpace) return;
 

apps/desktop/src/features/metaTools/MetaToolAuditLog.tsx

@@ -1,36 +1,20 @@
-import { useEffect, useState } from 'react';
-import { listen } from '@tauri-apps/api/event';
 import { CheckCircle2, Eye, ShieldAlert, XCircle } from 'lucide-react';
 import { Card, CardContent, CardHeader, CardTitle } from '@mcpmux/ui';
-import type { MetaToolAuditEvent } from '@/lib/api/metaTools';
-
-/** Ring-buffer size — keeps the most recent N audit rows in memory. */
-const MAX_ROWS = 50;
+import {
+  MAX_META_TOOL_ROWS as MAX_ROWS,
+  useMetaToolActivityStore,
+} from '@/stores/metaToolActivityStore';
 
 /**
- * In-memory audit log of every `mcpmux_*` invocation (read or write,
- * success or failure). Subscribes to the gateway's `meta-tool-invoked`
- * event channel; rows are kept only for the current UI session — the
- * persistent audit stream lives in the gateway's tracing logs.
+ * Audit log of every `mcpmux_*` invocation (read or write, success or failure).
+ *
+ * Rows live in a global store fed by an app-level `meta-tool-invoked` listener
+ * (see metaToolActivityStore) so they persist across tab changes and capture
+ * calls that fired before this panel was opened. The persistent audit stream
+ * lives in the gateway's tracing logs.
  */
 export function MetaToolAuditLog() {
-  const [rows, setRows] = useState<MetaToolAuditEvent[]>([]);
-
-  useEffect(() => {
-    const unlisten = listen<MetaToolAuditEvent>(
-      'meta-tool-invoked',
-      (event) => {
-        setRows((prev) => {
-          // Most-recent-first; trim to MAX_ROWS.
-          const next = [event.payload, ...prev];
-          return next.length > MAX_ROWS ? next.slice(0, MAX_ROWS) : next;
-        });
-      }
-    );
-    return () => {
-      unlisten.then((fn) => fn()).catch(() => {});
-    };
-  }, []);
+  const rows = useMetaToolActivityStore((s) => s.rows);
 
   return (
     <Card data-testid="meta-tool-audit-log">

apps/desktop/src/stores/metaToolActivityStore.ts

@@ -0,0 +1,59 @@
+/**
+ * Global, navigation-persistent log of `mcpmux_*` meta-tool invocations.
+ *
+ * The audit panel (`MetaToolAuditLog`) previously kept rows in component-local
+ * state with a `meta-tool-invoked` listener mounted only while the panel was
+ * visible. That meant the list vanished on tab change and showed empty if you
+ * navigated in *after* a call had already fired. This store lifts both the rows
+ * and the listener to app scope: the listener starts once at launch and rows
+ * persist for the whole UI session.
+ */
+
+import { create } from 'zustand';
+import { listen, type UnlistenFn } from '@tauri-apps/api/event';
+import type { MetaToolAuditEvent } from '@/lib/api/metaTools';
+
+/** Ring-buffer size — most recent N invocations kept in memory. */
+export const MAX_META_TOOL_ROWS = 50;
+
+interface MetaToolActivityState {
+  rows: MetaToolAuditEvent[];
+  push: (event: MetaToolAuditEvent) => void;
+  clear: () => void;
+}
+
+export const useMetaToolActivityStore = create<MetaToolActivityState>((set) => ({
+  rows: [],
+  push: (event) =>
+    set((state) => {
+      // Most-recent-first; trim to the ring-buffer size.
+      const next = [event, ...state.rows];
+      return { rows: next.length > MAX_META_TOOL_ROWS ? next.slice(0, MAX_META_TOOL_ROWS) : next };
+    }),
+  clear: () => set({ rows: [] }),
+}));
+
+// Module-level singleton listener so it survives component unmounts (tab
+// changes) and is wired exactly once regardless of how many callers init it.
+let listening = false;
+let unlistenPromise: Promise<UnlistenFn> | null = null;
+
+/**
+ * Start the app-wide `meta-tool-invoked` listener (idempotent). Call once near
+ * the app root so activity accumulates for the whole session, independent of
+ * which tab is currently mounted.
+ */
+export function startMetaToolActivityListener(): void {
+  if (listening) return;
+  listening = true;
+  unlistenPromise = listen<MetaToolAuditEvent>('meta-tool-invoked', (event) => {
+    useMetaToolActivityStore.getState().push(event.payload);
+  });
+}
+
+/** Tear down the listener (mainly for tests / hot-reload hygiene). */
+export function stopMetaToolActivityListener(): void {
+  listening = false;
+  void unlistenPromise?.then((fn) => fn()).catch(() => {});
+  unlistenPromise = null;
+}