Add WebMCP integration

Add getting individuals and focusing the view on a selected person.

This feature was added following the method described in the article
"Elephants, Goldfish and the New Golden Age of Software Engineering"
by Dave Rensin
https://drensin.medium.com/elephants-goldfish-and-the-new-golden-age-of-software-engineering-c33641a48874

 #vibecoded

src/app.tsx

@@ -49,6 +49,7 @@ import {SidePanel} from './sidepanel/side-panel';
 import {analyticsEvent} from './util/analytics';
 import {getI18nMessage} from './util/error_i18n';
 import {idToIndiMap, TopolaData} from './util/gedcom_util';
+import {WebMcpBridge} from './webmcp';
 
 /**
  * Load GEDCOM URL from VITE_STATIC_URL environment variable.
@@ -246,6 +247,7 @@ export function App() {
   /** Freeze animations after initial chart render. */
   const [freezeAnimation, setFreezeAnimation] = useState(false);
   const [config, setConfig] = useState(DEFALUT_CONFIG);
+  const [mcpBridge] = useState(() => new WebMcpBridge());
 
   const intl = useIntl();
   const navigate = useNavigate();
@@ -437,6 +439,27 @@ export function App() {
     })();
   });
 
+  useEffect(() => {
+    mcpBridge.registerTools();
+    return () => {
+      mcpBridge.unregisterTools();
+    };
+  }, [mcpBridge]);
+
+  useEffect(() => {
+    mcpBridge.setData(data || null);
+  }, [data, mcpBridge]);
+
+  useEffect(() => {
+    mcpBridge.setDetailIndi(detailIndi || null);
+  }, [detailIndi, mcpBridge]);
+
+  useEffect(() => {
+    mcpBridge.setSetSelectionCallback((id: string) => {
+      onSelection({id, generation: 0});
+    });
+  }, [mcpBridge]);
+
   function updateUrl(args: queryString.ParsedQuery<any>) {
     const search = queryString.parse(location.search);
     for (const key in args) {