From 2b5d803a6071295fda6f5cd02f8481319392eccc Mon Sep 17 00:00:00 2001 From: hsiegeln <37154749+hsiegeln@users.noreply.github.com> Date: Thu, 26 Mar 2026 18:13:58 +0100 Subject: [PATCH] docs: add implementation plan for taps, attributes, replay UI features 14-task plan covering: database migration, attributes pipeline, test-expression command with request-reply, OpenAPI regeneration, frontend types/hooks, ExchangeDetail attributes + replay modal, Dashboard attributes column, RouteDetail recording toggle + taps tab + tap CRUD modal, and AppConfigDetailPage restructure. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../2026-03-26-taps-attributes-replay.md | 858 ++++++++++++++++++ 1 file changed, 858 insertions(+) create mode 100644 docs/superpowers/plans/2026-03-26-taps-attributes-replay.md diff --git a/docs/superpowers/plans/2026-03-26-taps-attributes-replay.md b/docs/superpowers/plans/2026-03-26-taps-attributes-replay.md new file mode 100644 index 00000000..b3e4384d --- /dev/null +++ b/docs/superpowers/plans/2026-03-26-taps-attributes-replay.md @@ -0,0 +1,858 @@ +# Taps, Business Attributes & Enhanced Replay — Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Add UI and backend support for tap management, business attribute display, enhanced replay, per-route recording toggles, and success compression. + +**Architecture:** Backend-first approach — add attributes to the execution pipeline, then build the command infrastructure for test-expression and replay, then layer on the frontend features page by page. Each task produces a self-contained, committable unit. + +**Tech Stack:** Java 17 / Spring Boot 3.4 (backend), React 18 / TypeScript / TanStack Query (frontend), @cameleer/design-system components, PostgreSQL (JSONB), OpenSearch. + +**Spec:** `docs/superpowers/specs/2026-03-26-taps-attributes-replay-ui-design.md` + +--- + +## File Map + +### Backend — New Files +- `cameleer3-server-app/src/main/resources/db/migration/V5__attributes.sql` — Flyway migration adding `attributes JSONB` to executions and processor_executions tables +- `cameleer3-server-app/src/main/java/com/cameleer3/server/app/dto/TestExpressionRequest.java` — Request DTO for test-expression endpoint +- `cameleer3-server-app/src/main/java/com/cameleer3/server/app/dto/TestExpressionResponse.java` — Response DTO for test-expression endpoint + +### Backend — Modified Files +- `cameleer3-server-core/src/main/java/com/cameleer3/server/core/agent/CommandType.java` — add TEST_EXPRESSION +- `cameleer3-server-core/src/main/java/com/cameleer3/server/core/storage/ExecutionStore.java` — add attributes to ExecutionRecord and ProcessorRecord +- `cameleer3-server-core/src/main/java/com/cameleer3/server/core/detail/ExecutionDetail.java` — add attributes field +- `cameleer3-server-core/src/main/java/com/cameleer3/server/core/detail/ProcessorNode.java` — add attributes field +- `cameleer3-server-core/src/main/java/com/cameleer3/server/core/detail/DetailService.java` — pass attributes through tree reconstruction +- `cameleer3-server-core/src/main/java/com/cameleer3/server/core/search/ExecutionSummary.java` — add attributes field +- `cameleer3-server-core/src/main/java/com/cameleer3/server/core/ingestion/IngestionService.java` — extract attributes from RouteExecution/ProcessorExecution +- `cameleer3-server-core/src/main/java/com/cameleer3/server/core/storage/model/ExecutionDocument.java` — add attributes to ProcessorDoc +- `cameleer3-server-core/src/main/java/com/cameleer3/server/core/indexing/SearchIndexer.java` — include attributes in indexing +- `cameleer3-server-core/src/main/java/com/cameleer3/server/core/agent/AgentRegistryService.java` — add CompletableFuture-based command reply support +- `cameleer3-server-app/src/main/java/com/cameleer3/server/app/storage/PostgresExecutionStore.java` — add attributes to INSERT/UPDATE queries +- `cameleer3-server-app/src/main/java/com/cameleer3/server/app/search/OpenSearchIndex.java` — add attributes to toMap() and fromSearchHit() +- `cameleer3-server-app/src/main/java/com/cameleer3/server/app/controller/ApplicationConfigController.java` — add test-expression endpoint +- `cameleer3-server-app/src/main/java/com/cameleer3/server/app/controller/AgentCommandController.java` — add test-expression mapping, complete futures on ACK +- `cameleer3-server-app/src/main/java/com/cameleer3/server/app/dto/CommandAckRequest.java` — add optional data field + +### Frontend — Modified Files +- `ui/src/api/schema.d.ts` — add attributes to ExecutionDetail, ProcessorNode, ExecutionSummary +- `ui/src/api/queries/commands.ts` — add TapDefinition type, extend ApplicationConfig, add test-expression mutation, add replay mutation +- `ui/src/pages/ExchangeDetail/ExchangeDetail.tsx` — attributes strip, per-processor attributes, replay modal +- `ui/src/pages/ExchangeDetail/ExchangeDetail.module.css` — attributes strip and replay styles +- `ui/src/pages/Dashboard/Dashboard.tsx` — attributes column in exchanges table +- `ui/src/pages/Routes/RouteDetail.tsx` — recording toggle, taps tab, tap modal with test +- `ui/src/pages/Routes/RouteDetail.module.css` — taps and recording styles +- `ui/src/pages/Admin/AppConfigDetailPage.tsx` — restructure to 3 sections +- `ui/src/pages/Admin/AppConfigDetailPage.module.css` — updated styles + +--- + +## Task 1: Verify Prerequisites and Database Migration + +**Files:** +- Create: `cameleer3-server-app/src/main/resources/db/migration/V5__attributes.sql` + +- [ ] **Step 1: Verify cameleer3-common has attributes support** + +Confirm the `cameleer3-common` SNAPSHOT dependency includes `RouteExecution.getAttributes()` and `ProcessorExecution.getAttributes()`. Run: +```bash +mvn dependency:sources -pl cameleer3-server-core -q +``` +Then inspect the source jar for `RouteExecution.java` to confirm the `attributes` field exists. If it does not, the dependency must be updated first. + +- [ ] **Step 2: Write migration SQL** + +```sql +-- V5__attributes.sql +ALTER TABLE executions ADD COLUMN IF NOT EXISTS attributes JSONB; +ALTER TABLE processor_executions ADD COLUMN IF NOT EXISTS attributes JSONB; +``` + +- [ ] **Step 3: Verify migration compiles** + +Run: `cd cameleer3-server-app && mvn compile -pl . -q` +Expected: BUILD SUCCESS + +- [ ] **Step 4: Commit** + +```bash +git add cameleer3-server-app/src/main/resources/db/migration/V5__attributes.sql +git commit -m "feat: add attributes JSONB columns to executions and processor_executions" +``` + +--- + +## Task 2: Backend — Add Attributes to Storage Records and Detail Models + +**Files:** +- Modify: `cameleer3-server-core/src/main/java/com/cameleer3/server/core/storage/ExecutionStore.java` +- Modify: `cameleer3-server-core/src/main/java/com/cameleer3/server/core/detail/ExecutionDetail.java` +- Modify: `cameleer3-server-core/src/main/java/com/cameleer3/server/core/detail/ProcessorNode.java` +- Modify: `cameleer3-server-core/src/main/java/com/cameleer3/server/core/search/ExecutionSummary.java` + +- [ ] **Step 1: Add `attributes` field to `ExecutionRecord`** + +In `ExecutionStore.java`, add `String attributes` (JSONB as string) as the last parameter of the `ExecutionRecord` record. This is a serialized `Map`. + +- [ ] **Step 2: Add `attributes` field to `ProcessorRecord`** + +In `ExecutionStore.java`, add `String attributes` (JSONB as string) as the last parameter of the `ProcessorRecord` record. + +- [ ] **Step 3: Add `attributes` field to `ExecutionDetail`** + +Add `Map attributes` as the last parameter of the `ExecutionDetail` record (after `outputHeaders`). + +- [ ] **Step 4: Add `attributes` field to `ProcessorNode`** + +`ProcessorNode` is a mutable class with a constructor. Add a `Map attributes` field with getter. Add it to the constructor. Update the existing `ProcessorNode` constructor calls in `DetailService.java` to pass `null` or the attributes map. + +- [ ] **Step 5: Add `attributes` field to `ExecutionSummary`** + +Add `Map attributes` as the last parameter (after `highlight`). + +- [ ] **Step 6: Verify compilation** + +Run: `mvn compile -q` +Expected: Compilation errors in files that construct these records — these will be fixed in the next tasks. + +- [ ] **Step 7: Commit** + +```bash +git add cameleer3-server-core/ +git commit -m "feat: add attributes field to ExecutionRecord, ProcessorRecord, ExecutionDetail, ProcessorNode, ExecutionSummary" +``` + +--- + +## Task 3: Backend — Attributes Ingestion Pipeline + +**Files:** +- Modify: `cameleer3-server-core/src/main/java/com/cameleer3/server/core/ingestion/IngestionService.java` +- Modify: `cameleer3-server-app/src/main/java/com/cameleer3/server/app/storage/PostgresExecutionStore.java` + +- [ ] **Step 1: Extract attributes in `IngestionService.toExecutionRecord()`** + +In the `toExecutionRecord()` method (~line 76-111), serialize `execution.getAttributes()` to JSON string using Jackson `ObjectMapper`. Pass it as the new `attributes` parameter to `ExecutionRecord`. If attributes is null or empty, pass `null`. + +```java +String attributes = null; +if (execution.getAttributes() != null && !execution.getAttributes().isEmpty()) { + attributes = JSON.writeValueAsString(execution.getAttributes()); +} +``` + +Note: `IngestionService` has a static `private static final ObjectMapper JSON` field (line 22). Use `JSON.writeValueAsString()`. + +- [ ] **Step 2: Extract attributes in `IngestionService.flattenProcessors()`** + +In the `flattenProcessors()` method (~line 113-138), serialize each `ProcessorExecution.getAttributes()` to JSON string. Pass as the new `attributes` parameter to `ProcessorRecord`. + +- [ ] **Step 3: Update `PostgresExecutionStore.upsert()`** + +Add `attributes` to the INSERT statement and bind parameters. The column is JSONB, so use `PGobject` with type "jsonb" or cast `?::jsonb` in the SQL. + +In the INSERT (~line 26-32): add `attributes` column and `?::jsonb` placeholder. +In the ON CONFLICT UPDATE (~line 33-51): add `attributes = COALESCE(EXCLUDED.attributes, executions.attributes)` merge (follows the existing pattern, e.g., `input_body = COALESCE(EXCLUDED.input_body, executions.input_body)`). +In the bind parameters (~line 53-62): bind `record.attributes()`. + +- [ ] **Step 4: Update `PostgresExecutionStore.upsertProcessors()`** + +Same pattern: add `attributes` column, `?::jsonb` placeholder, bind parameter. + +- [ ] **Step 5: Verify compilation** + +Run: `mvn compile -q` +Expected: BUILD SUCCESS (or remaining errors from DetailService/SearchIndexer which are next tasks) + +- [ ] **Step 6: Commit** + +```bash +git add cameleer3-server-core/src/main/java/com/cameleer3/server/core/ingestion/IngestionService.java +git add cameleer3-server-app/src/main/java/com/cameleer3/server/app/storage/PostgresExecutionStore.java +git commit -m "feat: store execution and processor attributes from agent data" +``` + +--- + +## Task 4: Backend — Attributes in Detail Service and OpenSearch Indexing + +**Files:** +- Modify: `cameleer3-server-core/src/main/java/com/cameleer3/server/core/detail/DetailService.java` +- Modify: `cameleer3-server-core/src/main/java/com/cameleer3/server/core/storage/model/ExecutionDocument.java` +- Modify: `cameleer3-server-core/src/main/java/com/cameleer3/server/core/indexing/SearchIndexer.java` +- Modify: `cameleer3-server-app/src/main/java/com/cameleer3/server/app/search/OpenSearchIndex.java` + +- [ ] **Step 1: Pass attributes through `DetailService.buildTree()`** + +In `buildTree()` (~line 35-63), when constructing `ProcessorNode` from `ProcessorRecord`, deserialize the `attributes` JSON string back to `Map` and pass it to the constructor. + +In `getDetail()` (~line 16-33), when constructing `ExecutionDetail`, deserialize the `ExecutionRecord.attributes()` JSON and pass it as the `attributes` parameter. + +- [ ] **Step 2: Update `PostgresExecutionStore.findById()` and `findProcessors()` queries** + +These SELECT queries need to include the new `attributes` column and map it into `ExecutionRecord` / `ProcessorRecord` via the row mapper. + +- [ ] **Step 3: Add attributes to `ExecutionDocument.ProcessorDoc`** + +Add `String attributes` field to the `ProcessorDoc` record in `ExecutionDocument.java`. Also add `String attributes` to `ExecutionDocument` itself for route-level attributes. + +- [ ] **Step 4: Update `SearchIndexer.indexExecution()`** + +When constructing `ProcessorDoc` objects (~line 68-74), pass `processor.attributes()`. When constructing `ExecutionDocument` (~line 76-80), pass the execution record's attributes. + +- [ ] **Step 5: Update `OpenSearchIndex.toMap()`** + +In the `toMap()` method (~line 303-333), add `"attributes"` to the document map and to each processor sub-document map. + +- [ ] **Step 6: Update `OpenSearchIndex.fromSearchHit()` (or equivalent)** + +When parsing search results back into `ExecutionSummary`, extract the `attributes` field from the OpenSearch hit source and deserialize it into `Map`. + +- [ ] **Step 7: Verify compilation** + +Run: `mvn compile -q` +Expected: BUILD SUCCESS + +- [ ] **Step 8: Commit** + +```bash +git add cameleer3-server-core/ cameleer3-server-app/ +git commit -m "feat: thread attributes through detail service and OpenSearch indexing" +``` + +--- + +## Task 5: Backend — TEST_EXPRESSION Command and Request-Reply Infrastructure + +**Files:** +- Modify: `cameleer3-server-core/src/main/java/com/cameleer3/server/core/agent/CommandType.java` +- Modify: `cameleer3-server-core/src/main/java/com/cameleer3/server/core/agent/AgentRegistryService.java` +- Modify: `cameleer3-server-app/src/main/java/com/cameleer3/server/app/dto/CommandAckRequest.java` +- Modify: `cameleer3-server-app/src/main/java/com/cameleer3/server/app/controller/AgentCommandController.java` +- Create: `cameleer3-server-app/src/main/java/com/cameleer3/server/app/dto/TestExpressionRequest.java` +- Create: `cameleer3-server-app/src/main/java/com/cameleer3/server/app/dto/TestExpressionResponse.java` +- Modify: `cameleer3-server-app/src/main/java/com/cameleer3/server/app/controller/ApplicationConfigController.java` + +- [ ] **Step 1: Add TEST_EXPRESSION to CommandType enum** + +```java +public enum CommandType { + CONFIG_UPDATE, + DEEP_TRACE, + REPLAY, + SET_TRACED_PROCESSORS, + TEST_EXPRESSION +} +``` + +- [ ] **Step 2: Add `data` field to `CommandAckRequest`** + +```java +public record CommandAckRequest(String status, String message, String data) {} +``` + +The `data` field carries structured JSON results (e.g., expression test result). Existing ACKs that don't send data will deserialize `data` as `null`. + +- [ ] **Step 3: Add CompletableFuture map to AgentRegistryService** + +Add a `ConcurrentHashMap>` for pending request-reply commands. Add methods: + +```java +public CompletableFuture addCommandWithReply(String agentId, CommandType type, String payload) { + AgentCommand command = addCommand(agentId, type, payload); + CompletableFuture future = new CompletableFuture<>(); + pendingReplies.put(command.id(), future); + return future; +} + +public void completeReply(String commandId, CommandAckRequest ack) { + CompletableFuture future = pendingReplies.remove(commandId); + if (future != null) { + future.complete(ack); + } +} +``` + +Note: Use `future.orTimeout(5, TimeUnit.SECONDS)` in the caller. The future auto-completes exceptionally on timeout. Add a `whenComplete` handler that removes the entry from `pendingReplies` to prevent leaks: +```java +future.whenComplete((result, ex) -> pendingReplies.remove(command.id())); +``` + +- [ ] **Step 4: Complete futures in AgentCommandController.acknowledgeCommand()** + +In the ACK endpoint (~line 156-179), after `registryService.acknowledgeCommand()`, call `registryService.completeReply(commandId, ack)`. + +- [ ] **Step 5: Add test-expression mapping to mapCommandType()** + +```java +case "test-expression" -> CommandType.TEST_EXPRESSION; +``` + +- [ ] **Step 6: Create TestExpressionRequest and TestExpressionResponse DTOs** + +```java +// TestExpressionRequest.java +public record TestExpressionRequest(String expression, String language, String body, String target) {} + +// TestExpressionResponse.java +public record TestExpressionResponse(String result, String error) {} +``` + +- [ ] **Step 7: Add test-expression endpoint to ApplicationConfigController** + +Note: `ApplicationConfigController` does not use `@PreAuthorize` — security is handled at the URL pattern level in the security config. The test-expression endpoint inherits the same access rules as other config endpoints. No `@PreAuthorize` annotation needed. + +```java +@PostMapping("/{application}/test-expression") +@Operation(summary = "Test a tap expression against sample data via a live agent") +public ResponseEntity testExpression( + @PathVariable String application, + @RequestBody TestExpressionRequest request) { + // 1. Find a LIVE agent for this application via registryService + // 2. Send TEST_EXPRESSION command with addCommandWithReply() + // 3. Await CompletableFuture with 5s timeout via future.orTimeout(5, TimeUnit.SECONDS) + // 4. Parse ACK data as result/error, return TestExpressionResponse + // Handle: no live agent (404), timeout (504), parse error (500) + // Clean up: future.whenComplete removes from pendingReplies map on timeout +} +``` + +- [ ] **Step 8: Verify compilation** + +Run: `mvn compile -q` +Expected: BUILD SUCCESS + +- [ ] **Step 9: Commit** + +```bash +git add cameleer3-server-core/ cameleer3-server-app/ +git commit -m "feat: add TEST_EXPRESSION command with request-reply infrastructure" +``` + +--- + +## Task 6: Backend — Regenerate OpenAPI and Schema + +**Files:** +- Modify: `openapi.json` (regenerated) +- Modify: `ui/src/api/schema.d.ts` (regenerated) + +- [ ] **Step 1: Build the server to generate updated OpenAPI spec** + +Run: `mvn clean compile -q` + +- [ ] **Step 2: Start the server temporarily to extract OpenAPI JSON** + +Run the server, fetch `http://localhost:8080/v3/api-docs`, save to `openapi.json`. Alternatively, if the project has an automated OpenAPI generation step, use that. + +- [ ] **Step 3: Regenerate schema.d.ts from openapi.json** + +Run the existing schema generation command (check package.json scripts in ui/). + +- [ ] **Step 4: Verify the new types include `attributes` on ExecutionDetail, ProcessorNode, ExecutionSummary** + +Read `ui/src/api/schema.d.ts` and confirm the fields are present. Note: the OpenAPI generator may strip nullable fields (e.g., `highlight` exists on Java `ExecutionSummary` but not in the current schema). If `attributes` is missing, add `@Schema(nullable = true)` or `@JsonInclude(JsonInclude.Include.ALWAYS)` annotation on the Java DTO and regenerate. Alternatively, manually add the field to `schema.d.ts`. + +- [ ] **Step 5: Commit** + +```bash +git add openapi.json ui/src/api/schema.d.ts +git commit -m "chore: regenerate openapi.json and schema.d.ts with attributes and test-expression" +``` + +--- + +## Task 7: Frontend — TypeScript Types and API Hooks + +**Files:** +- Modify: `ui/src/api/queries/commands.ts` + +- [ ] **Step 1: Add TapDefinition interface** + +```typescript +export interface TapDefinition { + tapId: string; + processorId: string; + target: 'INPUT' | 'OUTPUT' | 'BOTH'; + expression: string; + language: string; + attributeName: string; + attributeType: 'BUSINESS_OBJECT' | 'CORRELATION' | 'EVENT' | 'CUSTOM'; + enabled: boolean; + version: number; +} +``` + +- [ ] **Step 2: Extend ApplicationConfig interface** + +Add to the existing `ApplicationConfig` interface: + +```typescript +taps: TapDefinition[]; +tapVersion: number; +routeRecording: Record; +compressSuccess: boolean; +``` + +- [ ] **Step 3: Add useTestExpression mutation hook** + +```typescript +export function useTestExpression() { + return useMutation({ + mutationFn: async ({ application, expression, language, body, target }: { + application: string; + expression: string; + language: string; + body: string; + target: string; + }) => { + const { data, error } = await api.POST('/config/{application}/test-expression', { + params: { path: { application } }, + body: { expression, language, body, target }, + }); + if (error) throw new Error('Failed to test expression'); + return data!; + }, + }); +} +``` + +- [ ] **Step 4: Add useReplayExchange mutation hook** + +```typescript +export function useReplayExchange() { + return useMutation({ + mutationFn: async ({ agentId, headers, body }: { + agentId: string; + headers: Record; + body: string; + }) => { + const { data, error } = await api.POST('/agents/{id}/commands', { + params: { path: { id: agentId } }, + body: { type: 'replay', payload: { headers, body } } as any, + }); + if (error) throw new Error('Failed to send replay command'); + return data!; + }, + }); +} +``` + +- [ ] **Step 5: Verify build** + +Run: `cd ui && npm run build` +Expected: BUILD SUCCESS (or type errors in pages that now receive new fields — those pages are updated in later tasks) + +- [ ] **Step 6: Commit** + +```bash +git add ui/src/api/queries/commands.ts +git commit -m "feat: add TapDefinition type, extend ApplicationConfig, add test-expression and replay hooks" +``` + +--- + +## Task 8: Frontend — Business Attributes on ExchangeDetail + +**Files:** +- Modify: `ui/src/pages/ExchangeDetail/ExchangeDetail.tsx` +- Modify: `ui/src/pages/ExchangeDetail/ExchangeDetail.module.css` + +- [ ] **Step 1: Add attributes strip to exchange header** + +After the header info row and before the stat boxes, render the route-level attributes: + +```tsx +{detail.attributes && Object.keys(detail.attributes).length > 0 && ( +
+ Attributes + {Object.entries(detail.attributes).map(([key, value]) => ( + + ))} +
+)} +``` + +- [ ] **Step 2: Add per-processor attributes in processor detail panel** + +In the processor detail section (where the selected processor's message IN/OUT is shown), add attributes badges if the selected processor has them. Access via `detail.processors` tree — traverse the nested tree to find the processor at the selected index and read its `attributes` map. Note: body/headers data comes from a separate `useProcessorSnapshot` call, but `attributes` is inline on the `ProcessorNode` in the detail response — no additional API call needed. + +- [ ] **Step 3: Add CSS for attributes strip** + +```css +.attributesStrip { + display: flex; + gap: 8px; + flex-wrap: wrap; + align-items: center; + padding: 10px 14px; + background: var(--bg-surface); + border: 1px solid var(--border-subtle); + border-radius: var(--radius-lg); + margin-bottom: 16px; +} + +.attributesLabel { + font-size: 11px; + color: var(--text-muted); + margin-right: 4px; +} +``` + +- [ ] **Step 4: Verify build** + +Run: `cd ui && npm run build` +Expected: BUILD SUCCESS + +- [ ] **Step 5: Commit** + +```bash +git add ui/src/pages/ExchangeDetail/ +git commit -m "feat: display business attributes on ExchangeDetail page" +``` + +--- + +## Task 9: Frontend — Replay Modal on ExchangeDetail + +**Files:** +- Modify: `ui/src/pages/ExchangeDetail/ExchangeDetail.tsx` +- Modify: `ui/src/pages/ExchangeDetail/ExchangeDetail.module.css` + +- [ ] **Step 1: Add replay button to exchange header** + +Add a "Replay" button (primary variant) in the header action area. Only render for OPERATOR/ADMIN roles (check with `useAuthStore()`). + +```tsx + +``` + +- [ ] **Step 2: Build the replay modal component** + +Add state: `replayOpen`, `replayHeaders` (key-value array), `replayBody` (string), `replayAgent` (string), `replayTab` ('headers' | 'body'). + +Pre-populate from `detail.inputHeaders` (parse JSON string to object) and `detail.inputBody`. + +Use Modal (size="lg"), Tabs for Headers/Body, and the `useReplayExchange` mutation hook. + +Headers tab: render editable rows with Input fields for key and value, remove button per row, "Add header" link at bottom. + +Body tab: Textarea with monospace font, pre-populated with `detail.inputBody`. + +- [ ] **Step 3: Wire up agent selector** + +Use `useAgents('LIVE', detail.applicationName)` to populate a Select dropdown. Default to the agent that originally processed this exchange (`detail.agentId`) if it's still LIVE. + +- [ ] **Step 4: Wire up replay submission** + +On "Replay" click: call `replayExchange.mutate({ agentId, headers, body })`. Show loading spinner on button. On success: `toast('Replay command sent')`, close modal. On error: `toast('Replay failed: ...')`. + +- [ ] **Step 5: Add CSS for replay modal elements** + +Style the warning banner, header table, body textarea, and agent selector. + +- [ ] **Step 6: Verify build** + +Run: `cd ui && npm run build` +Expected: BUILD SUCCESS + +- [ ] **Step 7: Commit** + +```bash +git add ui/src/pages/ExchangeDetail/ +git commit -m "feat: add replay modal with editable headers and body on ExchangeDetail" +``` + +--- + +## Task 10: Frontend — Attributes Column on Dashboard + +**Files:** +- Modify: `ui/src/pages/Dashboard/Dashboard.tsx` + +- [ ] **Step 1: Add attributes column to the exchanges table** + +In `buildBaseColumns()` (~line 97-163), add a new column after the `applicationName` column. Use CSS module classes (not inline styles — per project convention in `feedback_css_modules_not_inline.md`): + +```typescript +{ + key: 'attributes', + header: 'Attributes', + render: (_, row) => { + const attrs = row.attributes; + if (!attrs || Object.keys(attrs).length === 0) return —; + const entries = Object.entries(attrs); + const shown = entries.slice(0, 2); + const overflow = entries.length - 2; + return ( +
+ {shown.map(([k, v]) => ( + + ))} + {overflow > 0 && +{overflow}} +
+ ); + }, +}, +``` + +Add corresponding CSS classes to `Dashboard.module.css`: +```css +.attrCell { display: flex; gap: 4px; align-items: center; } +.attrOverflow { font-size: 10px; color: var(--text-muted); } +``` + +- [ ] **Step 2: Verify build** + +Run: `cd ui && npm run build` +Expected: BUILD SUCCESS + +- [ ] **Step 3: Commit** + +```bash +git add ui/src/pages/Dashboard/Dashboard.tsx +git commit -m "feat: show business attributes as compact badges in dashboard exchanges table" +``` + +--- + +## Task 11: Frontend — RouteDetail Recording Toggle and Taps KPI + +**Files:** +- Modify: `ui/src/pages/Routes/RouteDetail.tsx` +- Modify: `ui/src/pages/Routes/RouteDetail.module.css` + +- [ ] **Step 1: Add recording toggle to route header** + +Add imports: `import { useApplicationConfig, useUpdateApplicationConfig } from '../../api/queries/commands'` and `Toggle` from `@cameleer/design-system`. + +In the route header section, add a pill-styled container with a Toggle component: + +```tsx +const config = useApplicationConfig(appId); +const updateConfig = useUpdateApplicationConfig(); + +const isRecording = config.data?.routeRecording?.[routeId] !== false; // default true + +function toggleRecording() { + if (!config.data) return; + const routeRecording = { ...config.data.routeRecording, [routeId]: !isRecording }; + updateConfig.mutate({ ...config.data, routeRecording }); +} +``` + +Render: +```tsx +
+ Recording + +
+``` + +- [ ] **Step 2: Add "Active Taps" to KPI strip** + +Count enabled taps for this route's processors (cross-reference tap processorIds with this route's processor list from diagram data). Add to `kpiItems` array. + +- [ ] **Step 3: Add "Taps" tab to tabs array** + +```typescript +const tapCount = /* count taps for this route */; +const tabs = [ + { label: 'Performance', value: 'performance' }, + { label: 'Recent Executions', value: 'executions', count: exchangeRows.length }, + { label: 'Error Patterns', value: 'errors', count: errorPatterns.length }, + { label: 'Taps', value: 'taps', count: tapCount }, +]; +``` + +- [ ] **Step 4: Add CSS for recording pill** + +```css +.recordingPill { + display: flex; + align-items: center; + gap: 8px; + background: var(--bg-surface); + border: 1px solid var(--border-subtle); + border-radius: var(--radius-lg); + padding: 6px 12px; +} + +.recordingLabel { + font-size: 11px; + color: var(--text-muted); +} +``` + +- [ ] **Step 5: Verify build** + +Run: `cd ui && npm run build` +Expected: BUILD SUCCESS + +- [ ] **Step 6: Commit** + +```bash +git add ui/src/pages/Routes/ +git commit -m "feat: add recording toggle and taps KPI to RouteDetail header" +``` + +--- + +## Task 12: Frontend — RouteDetail Taps Tab and Tap Modal + +**Files:** +- Modify: `ui/src/pages/Routes/RouteDetail.tsx` +- Modify: `ui/src/pages/Routes/RouteDetail.module.css` + +- [ ] **Step 1: Render taps DataTable when "Taps" tab is active** + +Filter `config.data.taps` to only taps whose `processorId` exists in this route's diagram. Display in a DataTable with columns: Attribute, Processor, Expression, Language, Target, Type, Enabled (Toggle), Actions. + +Empty state: "No taps configured for this route. Add a tap to extract business attributes from exchange data." + +- [ ] **Step 2: Build the Add/Edit Tap modal** + +State: `tapModalOpen`, `editingTap` (null for new, TapDefinition for edit), form fields. + +Modal contents: +- FormField + Input for Attribute Name +- FormField + Select for Processor (options from `useDiagramLayout` node list) +- Two FormFields side-by-side: Select for Language (simple, jsonpath, xpath, jq, groovy) and Select for Target (INPUT, OUTPUT, BOTH) +- FormField + Textarea for Expression (monospace) +- Attribute Type pill selector (4 options, styled as button group) +- Toggle for Enabled + +- [ ] **Step 3: Add Test Expression section to tap modal** + +Collapsible section (default expanded) with two tabs: "Recent Exchange" and "Custom Payload". + +Recent Exchange tab: +- Use `useSearchExecutions` with this route's filter to get recent exchanges as summaries +- Auto-select most recent exchange, then fetch its detail via `useExecutionDetail` to get the `inputBody` for the test payload +- Select dropdown to change exchange +- "Test" button calls `useTestExpression` mutation with the exchange's body + +Custom Payload tab: +- Textarea pre-populated from the most recent exchange's body (fetched via detail endpoint) +- Switching from Recent Exchange tab carries the payload over +- "Test" button calls `useTestExpression` mutation + +Result display: green box for success, red box for error. + +- [ ] **Step 4: Wire up tap save** + +On save: update the `taps` array in ApplicationConfig (add new or replace existing by tapId), then call `updateConfig.mutate()`. Generate `tapId` as UUID for new taps. + +- [ ] **Step 5: Wire up tap delete** + +On delete: remove tap from array, call `updateConfig.mutate()`. Import and use `ConfirmDialog` from `@cameleer/design-system` before deleting. + +- [ ] **Step 6: Wire up enabled toggle inline** + +Toggle in the DataTable row directly calls config update (toggle the specific tap's `enabled` field). + +- [ ] **Step 7: Add CSS for taps tab content** + +Style the taps header (title + button), tap modal form layout, test expression section, result boxes. + +- [ ] **Step 8: Verify build** + +Run: `cd ui && npm run build` +Expected: BUILD SUCCESS + +- [ ] **Step 9: Commit** + +```bash +git add ui/src/pages/Routes/ +git commit -m "feat: add taps management tab with CRUD modal and expression testing on RouteDetail" +``` + +--- + +## Task 13: Frontend — AppConfigDetailPage Restructure + +**Files:** +- Modify: `ui/src/pages/Admin/AppConfigDetailPage.tsx` +- Modify: `ui/src/pages/Admin/AppConfigDetailPage.module.css` + +- [ ] **Step 1: Merge Logging + Observability into "Settings" section** + +Replace the two separate `SectionHeader` sections with a single "Settings" section. Render all setting badges in a single flex row: Log Forwarding, Engine Level, Payload Capture, Metrics, Sampling Rate, Compress Success (new field). + +Edit mode: all badges become dropdowns/toggles as before, plus a new Toggle for `compressSuccess`. + +- [ ] **Step 2: Merge Traced Processors + Taps into "Traces & Taps" section** + +Build a merged data structure: for each processor that has either a trace override or taps, create a row with Route, Processor, Capture badge, Taps badges. + +To resolve processor-to-route mapping: fetch route catalog for this application, then for each route fetch its diagram. Build a `Map` by iterating diagram nodes. For processors not found, show "unknown". + +Table columns: Route, Processor, Capture (badge/select in edit mode), Taps (attribute badges with enabled indicators, read-only). + +Summary: "N traced · M taps · manage taps on route pages". + +- [ ] **Step 3: Add "Route Recording" section** + +Fetch route list from `useRouteCatalog` filtered by application. Render table with Route name and Toggle. + +In view mode: toggles show current state (disabled). +In edit mode: toggles are interactive. + +Default for routes not in `routeRecording` map: recording enabled (true). + +Summary: "N of M routes recording". + +- [ ] **Step 4: Update form state for new fields** + +Add `compressSuccess` and `routeRecording` to the form state object and `updateField` handler. Ensure save sends the complete config including new fields. + +- [ ] **Step 5: Update CSS for restructured sections** + +Adjust section spacing, flex row for merged settings badges. + +- [ ] **Step 6: Verify build** + +Run: `cd ui && npm run build` +Expected: BUILD SUCCESS + +- [ ] **Step 7: Commit** + +```bash +git add ui/src/pages/Admin/ +git commit -m "feat: restructure AppConfigDetailPage to Settings, Traces & Taps, Route Recording sections" +``` + +--- + +## Task 14: Final Build Verification and Push + +- [ ] **Step 1: Run full backend build** + +Run: `mvn clean compile -q` +Expected: BUILD SUCCESS + +- [ ] **Step 2: Run full frontend build** + +Run: `cd ui && npm run build` +Expected: BUILD SUCCESS + +- [ ] **Step 3: Manual smoke test checklist** + +Verify in browser: +- ExchangeDetail shows attributes strip when attributes exist +- ExchangeDetail replay button opens modal, can send replay +- Dashboard table shows attributes column +- RouteDetail shows recording toggle, taps tab with CRUD +- Tap modal test expression section works (if live agent available) +- AppConfigDetailPage shows 3 merged sections +- AppConfigDetailPage edit mode works for compress success and route recording + +- [ ] **Step 4: Push to remote** + +```bash +git push origin main +```