Skip to main content

UI Automation-First Implementation Record

Date: 2026-02-11 Status: Shipped (all 7 steps complete, typecheck passes)

What Was Built​

Step 1: Backend — identity_subtype filter on entities API​

Files modified:

  • src/storage/storage-adapter.ts — added identitySubtype?: string to EntityQuery
  • src/storage/mongo/adapter.ts — filter on properties.identitySubtype in queryEntities() + countEntities(), supports comma-separated multi-value ($in)
  • src/api/routes/entities.ts — parses identity_subtype query param

Behavior: GET /api/v1/entities?identity_subtype=business_rule,flow_designer_flow filters entities server-side. This was documented in API spec but never implemented.

Step 2: Automations list page + hooks + badges​

New files:

  • ui/src/hooks/use-automations.ts — thin wrapper over useEntities with pre-set subtype filter (business_rule,flow_designer_flow,scheduled_job,system_execution)
  • ui/src/components/AutomationBadges.tsx — 5 badge components:
    • AutomationTypeBadge (BR/Flow/Job/SI with distinct colors)
    • EgressBadge (llm=red, external=orange, internal=green, unknown=gray)
    • OwnershipBadge (valid=green, invalid=red, ambiguous=yellow)
    • RiskGroupBadge (RG1=red, RG2=orange, RG3=yellow, RG4=green, RG5=gray)
    • BindingStatusBadge (bound=green, unlinked=gray)
  • ui/src/pages/AutomationsPage.tsx — 8 PRD-aligned columns (Name, Type, Bound?, Execution, Egress, Origin, Owner, Risk Group), 4 filter dropdowns, search, cursor pagination

Pattern: Follows existing EntitiesListPage pattern — useAuth guard, useTableState, DataTable, DataTableFilters. Client-side filtering for egress/ownership/risk_group (server-side for identity_subtype).

Step 3: Automation detail page + flow diagram​

New files:

  • ui/src/components/AutomationFlowDiagram.tsx — horizontal 5-step flow diagram (Trigger → Automation → Calls → Runs As → Can Access). Built with plain React + Tailwind (no ReactFlow). Extracts data from entity relationships (TRIGGERS_ON, EXECUTES_ON, RUNS_AS) and execution_paths. Missing steps shown grayed out.
  • ui/src/pages/AutomationDetailPage.tsx — header with badges, AutomationFlowDiagram, 4 tabs:
    • Overview: 6 InfoCards (Identity Binding, Execution Detection, Data Egress, Data Origin, Ownership, Risk Group) showing all 7 PRD requirement outputs
    • Graph: MiniGraph centered on this automation
    • Findings: linked findings list with severity badges
    • Timeline: entity events

Data fetching: useEntity(id) + useEntityBatch(relatedIds) + useFindings({ entity_id }) + useEntityTimeline

Step 4: Dashboard redesign​

File modified: ui/src/pages/Dashboard.tsx

Changes:

  • Added useAutomations({ limit: 50 }) alongside existing useFindings()
  • Top section: Automation summary cards (Total, RG1 Critical, RG2 High, Ownership Issues) with links to filtered /automations
  • Middle section: Two side-by-side panels — By Type (horizontal bars) and By Risk Group (color-coded bars)
  • Priority Automations: Top 5 sorted by risk group, showing badges for type, egress, ownership
  • Below: Existing findings sections preserved (severity stats, by type, recent findings) separated by border

Step 5: Navigation​

Files modified:

  • ui/src/components/Layout.tsx — "Automations" nav item with Workflow icon from lucide-react, placed between Dashboard and Findings
  • ui/src/App.tsx — added routes: /automations → AutomationsPage, /automations/:id → AutomationDetailPage

Step 6 (P1): Graph edge styling​

File modified: ui/src/components/graph/layout.ts

Changes to edgeStyle():

  • Authority edges (solid): OWNED_BY, HAS_ROLE, GRANTS, PROTECTS, APPLIES_TO
  • Provenance edges (dashed): AUTHENTICATES_TO, AUTHENTICATES_VIA, RUNS_AS, EXECUTES_ON, TRIGGERS_ON, HAS_CREDENTIAL, CREATED_BY
  • 5 new edge types added (EXECUTES_ON, TRIGGERS_ON, AUTHENTICATES_VIA, APPLIES_TO, CREATED_BY)

Step 7 (P1): Graph path highlighting​

File modified: ui/src/components/graph/GraphCanvas.tsx

Changes:

  • BFS from selected node through all edges to find connected subgraph
  • Connected nodes: full opacity. Disconnected nodes: 0.15 opacity.
  • Connected edges: full opacity. Disconnected edges: 0.1 opacity.
  • Previously: only dimmed non-selected nodes (not edges, not path-aware)

File Summary​

New files (5)​

FilePurpose
ui/src/hooks/use-automations.tsAutomation-scoped entity query hook
ui/src/components/AutomationBadges.tsx5 reusable badge components
ui/src/pages/AutomationsPage.tsxAutomation list with PRD columns
ui/src/pages/AutomationDetailPage.tsxDetail with flow diagram + tabs
ui/src/components/AutomationFlowDiagram.tsxHorizontal step flow

Modified files (7)​

FileChanges
src/storage/storage-adapter.tsidentitySubtype in EntityQuery
src/storage/mongo/adapter.tsFilter in queryEntities + countEntities
src/api/routes/entities.tsParse identity_subtype query param
ui/src/App.tsxAutomation routes
ui/src/components/Layout.tsxAutomations nav item
ui/src/pages/Dashboard.tsxAutomation overview section
ui/src/components/graph/layout.tsEdge type styling
ui/src/components/graph/GraphCanvas.tsxPath highlighting BFS