From cbe41d7ac749a07fc410172fc0ee613c8f01c522 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Fri, 27 Mar 2026 20:23:19 +0100
Subject: [PATCH] feat: configure-tap action navigates to AppConfig page

The tap button in the node toolbar now navigates to
/admin/appconfig?app=<application>&processor=<nodeId>, which
auto-selects the application in the AppConfigPage. The AppConfigPage
reads the ?app query param to open the detail panel for that app.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/src/pages/Admin/AppConfigPage.tsx           | 15 ++++++++++++++-
 ui/src/pages/ExchangeDetail/ExchangeDetail.tsx |  4 +++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/ui/src/pages/Admin/AppConfigPage.tsx b/ui/src/pages/Admin/AppConfigPage.tsx
index 351a2ec2..1dcd6872 100644
--- a/ui/src/pages/Admin/AppConfigPage.tsx
+++ b/ui/src/pages/Admin/AppConfigPage.tsx
@@ -1,5 +1,5 @@
 import { useState, useMemo, useEffect } from 'react';
-import { useNavigate } from 'react-router';
+import { useNavigate, useSearchParams } from 'react-router';
 import {
   DataTable, Badge, MonoText, DetailPanel, SectionHeader, Button, Toggle, Spinner, useToast,
 } from '@cameleer/design-system';
@@ -311,9 +311,22 @@ function AppConfigDetail({ appId, onClose }: { appId: string; onClose: () => voi
 
 export default function AppConfigPage() {
   const { data: configs } = useAllApplicationConfigs();
+  const [searchParams, setSearchParams] = useSearchParams();
   const [selectedApp, setSelectedApp] = useState<string | null>(null);
   const columns = useMemo(buildColumns, []);
 
+  // Auto-select app from query param (e.g., ?app=caller-app)
+  useEffect(() => {
+    const appParam = searchParams.get('app');
+    if (appParam && !selectedApp) {
+      setSelectedApp(appParam);
+      // Clean up the query param
+      searchParams.delete('app');
+      searchParams.delete('processor');
+      setSearchParams(searchParams, { replace: true });
+    }
+  }, [searchParams]); // eslint-disable-line react-hooks/exhaustive-deps
+
   return (
     <div>
       <DataTable<ConfigRow>
diff --git a/ui/src/pages/ExchangeDetail/ExchangeDetail.tsx b/ui/src/pages/ExchangeDetail/ExchangeDetail.tsx
index 70216452..f58b5588 100644
--- a/ui/src/pages/ExchangeDetail/ExchangeDetail.tsx
+++ b/ui/src/pages/ExchangeDetail/ExchangeDetail.tsx
@@ -243,8 +243,10 @@ export default function ExchangeDetail() {
   const handleNodeAction = useCallback((nodeId: string, action: NodeAction) => {
     if (action === 'toggle-trace') {
       handleToggleTracing(nodeId)
+    } else if (action === 'configure-tap' && detail?.applicationName) {
+      navigate(`/admin/appconfig?app=${encodeURIComponent(detail.applicationName)}&processor=${encodeURIComponent(nodeId)}`)
     }
-  }, [handleToggleTracing])
+  }, [handleToggleTracing, detail?.applicationName, navigate])
 
   // ── Replay ─────────────────────────────────────────────────────────────
   const { data: liveAgents } = useAgents('LIVE', detail?.applicationName)