chore: review fixes

Author: moshloop

common/src/components/ArchitectureDiagram.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useId } from 'react';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import Xarrow from 'react-xarrows';
 import {
@@ -80,16 +80,16 @@ function BoxNode({ id, title, className = '', bodyClassName = '', border = 'soli
   );
 }
 
-function K8SCRDsBox() {
+function K8SCRDsBox({ id }: { id: string }) {
   return (
-    <div id="arch-k8s-crds" className="flex items-center gap-3 bg-blue-600 rounded-xl px-5 py-3 shadow-lg border-2 border-blue-400">
+    <div id={id} className="flex items-center gap-3 bg-blue-600 rounded-xl px-5 py-3 shadow-lg border-2 border-blue-400">
       <K8S className="w-8 h-8 text-white" />
       <span className="text-white font-bold text-sm">K8S CRDs</span>
     </div>
   );
 }
 
-function MissionControlBox() {
+function MissionControlBox({ id }: { id: string }) {
   const features = [
     { Icon: CanaryCheckerWhite, label: 'Health Checks' },
     { Icon: ConfigDbWhite, label: 'Unified Catalog' },
@@ -98,7 +98,7 @@ function MissionControlBox() {
   ];
 
   return (
-    <div id="arch-missionControl" className="rounded-2xl overflow-hidden border-2 shadow-2xl"
+    <div id={id} className="rounded-2xl overflow-hidden border-2 shadow-2xl"
       style={{ borderColor: '#007fdf', backgroundColor: '#f7fbfe' }}>
       <div className="px-6 py-3 text-center" style={{ backgroundColor: '#007fdf' }}>
         <div className="flex items-center justify-center gap-2">
@@ -129,16 +129,16 @@ function MissionControlBox() {
   );
 }
 
-function MCPServerBox() {
+function MCPServerBox({ id }: { id: string }) {
   return (
-    <div id="arch-mcp-server" className="flex items-center gap-3 bg-indigo-600 rounded-xl px-5 py-3 shadow-lg border-2 border-indigo-400">
+    <div id={id} className="flex items-center gap-3 bg-indigo-600 rounded-xl px-5 py-3 shadow-lg border-2 border-indigo-400">
       <Mcp className="w-7 h-7 text-white fill-white" />
       <span className="text-white font-bold text-sm">MCP Server</span>
     </div>
   );
 }
 
-function IntegrationsBox() {
+function IntegrationsBox({ id }: { id: string }) {
   const integrations = [
     { Icon: Aws },
     { Icon: Azure },
@@ -163,7 +163,7 @@ function IntegrationsBox() {
   ];
 
   return (
-    <div id="arch-integrations">
+    <div id={id}>
       <BoxNode
         title="40+ Integrations"
         className="bg-slate-500"
@@ -182,16 +182,19 @@ interface ArchitectureDiagramProps {
 }
 
 function ArchitectureDiagramInner({ className }: ArchitectureDiagramProps) {
+  const prefix = useId();
+  const id = (name: string) => `${prefix}-${name}`;
+
   return (
     <div className={`${className || ''} relative flex flex-col items-center gap-10 py-8`}>
-      <K8SCRDsBox />
-      <MissionControlBox />
-      <MCPServerBox />
-      <IntegrationsBox />
+      <K8SCRDsBox id={id('k8s-crds')} />
+      <MissionControlBox id={id('missionControl')} />
+      <MCPServerBox id={id('mcp-server')} />
+      <IntegrationsBox id={id('integrations')} />
 
       <Xarrow
-        start="arch-k8s-crds"
-        end="arch-missionControl"
+        start={id('k8s-crds')}
+        end={id('missionControl')}
         color="#3b82f6"
         strokeWidth={3}
         startAnchor="bottom"
@@ -200,8 +203,8 @@ function ArchitectureDiagramInner({ className }: ArchitectureDiagramProps) {
         dashness={{ strokeLen: 10, nonStrokeLen: 5, animation: 1 }}
       />
       <Xarrow
-        start="arch-missionControl"
-        end="arch-mcp-server"
+        start={id('missionControl')}
+        end={id('mcp-server')}
         color="#6366f1"
         strokeWidth={3}
         startAnchor="bottom"
@@ -210,8 +213,8 @@ function ArchitectureDiagramInner({ className }: ArchitectureDiagramProps) {
         dashness={{ strokeLen: 10, nonStrokeLen: 5, animation: 1 }}
       />
       <Xarrow
-        start="arch-mcp-server"
-        end="arch-integrations"
+        start={id('mcp-server')}
+        end={id('integrations')}
         color="#6366f1"
         strokeWidth={3}
         startAnchor="bottom"

common/src/components/AuditDiagram.tsx

@@ -306,6 +306,11 @@ function AuditDiagramInner({ className }: AuditDiagramProps) {
         path="straight"
         startAnchor="right" endAnchor="left"
       />
+      <Xarrow start={id('catalog')} end={id('views')}
+        {...primaryArrowProps}
+        path="straight"
+        startAnchor="right" endAnchor="left"
+      />
       <Xarrow start={id('catalog')} end={id('alerts')}
         {...primaryArrowProps}
         path="straight"

common/src/components/AuditLogDiagrams.tsx

@@ -31,13 +31,6 @@ const primaryArrowProps = {
   dashness: { strokeLen: 10, nonStrokeLen: 5, animation: 1 },
 } as const;
 
-const secondaryArrowProps = {
-  color: COLORS.muted,
-  strokeWidth: 2,
-  headSize: 3,
-  dashness: { strokeLen: 6, nonStrokeLen: 4, animation: 1 },
-} as const;
-
 function NodePill({ children }: { children: React.ReactNode }) {
   return (
     <div className="text-[10px] rounded px-2 py-1 text-center" style={pillStyle}>

common/src/components/ComparisonBox.tsx

@@ -3,7 +3,7 @@ import { SlClose, SlCheck } from "react-icons/sl";
 
 function Pros({ children }: { children: React.ReactNode }) {
   return (
-    <div className="rounded-lg bg-primary-300 p-4 pt-5 pb-6 text-black md:w-1/2" style={{ border: "1px solid #0c63db" }}>
+    <div className="rounded-lg bg-primary-300 p-4 pt-5 pb-6 text-black md:w-1/2 border border-blue-700">
       <div className="w-full justify-center flex mb-3">
         <SlCheck size="36px" style={{ strokeWidth: "1px" }} color="#0c63db" />
       </div>
@@ -17,7 +17,7 @@ function Pros({ children }: { children: React.ReactNode }) {
 
 function Cons({ children }: { children: React.ReactNode }) {
   return (
-    <div className="rounded-lg border p-4 pt-5 pb-6 md:w-1/2" style={{ border: "1px solid #cbd5e1" }}>
+    <div className="rounded-lg p-4 pt-5 pb-6 md:w-1/2 border border-slate-300">
       <div className="w-full justify-center flex mb-3">
         <SlClose size="36px" color="#64748b" />
       </div>

common/src/components/EntityModelDiagram.tsx

@@ -91,7 +91,7 @@ const entities = {
     ],
   },
   externalUser: {
-    title: 'ExternalUser',
+    title: 'User',
     fields: [
       { name: 'id', type: 'uuid', pk: true },
       { name: 'name', type: 'string' },
@@ -103,7 +103,7 @@ const entities = {
     ],
   },
   externalGroup: {
-    title: 'ExternalGroup',
+    title: 'Group',
     fields: [
       { name: 'id', type: 'uuid', pk: true },
       { name: 'name', type: 'string' },
@@ -114,18 +114,20 @@ const entities = {
     ],
   },
   externalRole: {
-    title: 'ExternalRole',
+    title: 'Role',
     fields: [
       { name: 'id', type: 'uuid', pk: true },
       { name: 'name', type: 'string' },
       { name: 'account_id', type: 'string' },
       { name: 'role_type', type: 'string' },
+      { name: 'description', type: 'string' },
+      { name: 'aliases', type: '[]string' },
       { name: 'application_id', type: 'uuid', fk: true },
       { name: 'scraper_id', type: 'uuid', fk: true },
     ],
   },
   externalUserGroup: {
-    title: 'ExternalUserGroup',
+    title: 'UserGroup',
     fields: [
       { name: 'external_user_id', type: 'uuid', pk: true, fk: true },
       { name: 'external_group_id', type: 'uuid', pk: true, fk: true },
@@ -141,7 +143,9 @@ const entities = {
       { name: 'external_role_id', type: 'uuid', fk: true },
       { name: 'application_id', type: 'uuid', fk: true },
       { name: 'scraper_id', type: 'uuid', fk: true },
+      { name: 'source', type: 'string' },
       { name: 'last_reviewed_at', type: 'timestamp' },
+      { name: 'last_reviewed_by', type: 'uuid' },
     ],
   },
   configAccessLog: {
@@ -150,6 +154,7 @@ const entities = {
       { name: 'config_id', type: 'uuid', pk: true, fk: true },
       { name: 'external_user_id', type: 'uuid', pk: true, fk: true },
       { name: 'scraper_id', type: 'uuid', pk: true, fk: true },
+      { name: 'created_at', type: 'timestamp' },
       { name: 'mfa', type: 'bool' },
       { name: 'count', type: 'int' },
       { name: 'properties', type: 'jsonb' },
@@ -173,14 +178,14 @@ function EntityModelDiagramInner({ className }: EntityModelDiagramProps) {
         <EntityBox id={id('configItem-box')} accent={COLORS.accent} {...entities.configItem} />
       </div>
 
-      {/* Row 2: ExternalUser — ConfigAccess (center) — ExternalRole */}
+      {/* Row 2: User — ConfigAccess (center) — Role */}
       <div className="flex justify-center items-start gap-12 mb-12">
         <EntityBox id={id('externalUser-box')} {...entities.externalUser} />
         <EntityBox id={id('configAccess-box')} accent={COLORS.fk} {...entities.configAccess} />
         <EntityBox id={id('externalRole-box')} {...entities.externalRole} />
       </div>
 
-      {/* Row 3: ExternalUserGroup — ExternalGroup — ConfigAccessLog */}
+      {/* Row 3: UserGroup — Group — ConfigAccessLog */}
       <div className="flex justify-center items-start gap-12">
         <EntityBox id={id('externalUserGroup-box')} accent={COLORS.muted} {...entities.externalUserGroup} />
         <EntityBox id={id('externalGroup-box')} {...entities.externalGroup} />
@@ -202,20 +207,20 @@ function EntityModelDiagramInner({ className }: EntityModelDiagramProps) {
         startAnchor={{ position: 'top', offset: { x: -20 } }}
         endAnchor="bottom"
       />
-      {/* ConfigAccess → ExternalUser */}
+      {/* ConfigAccess → User */}
       <Xarrow start={id('configAccess-box')} end={id('externalUser-box')}
         {...arrowProps}
         path="straight"
         startAnchor="left" endAnchor="right"
         labels={{ middle: <RelLabel text="N:1" /> }}
       />
-      {/* ConfigAccess → ExternalRole */}
+      {/* ConfigAccess → Role */}
       <Xarrow start={id('configAccess-box')} end={id('externalRole-box')}
         {...arrowProps}
         path="straight"
         startAnchor="right" endAnchor="left"
       />
-      {/* ConfigAccess → ExternalGroup */}
+      {/* ConfigAccess → Group */}
       <Xarrow start={id('configAccess-box')} end={id('externalGroup-box')}
         {...arrowProps}
         path="straight"
@@ -228,28 +233,28 @@ function EntityModelDiagramInner({ className }: EntityModelDiagramProps) {
         startAnchor="right"
         endAnchor={{ position: 'right', offset: { y: 10 } }}
       />
-      {/* ConfigAccessLog → ExternalUser */}
+      {/* ConfigAccessLog → User */}
       <Xarrow start={id('configAccessLog-box')} end={id('externalUser-box')}
         {...arrowProps}
         startAnchor={{ position: 'left', offset: { y: -10 } }}
         endAnchor={{ position: 'bottom', offset: { x: 20 } }}
       />
 
-      {/* ExternalRole → Application */}
+      {/* Role → Application */}
       <Xarrow start={id('externalRole-box')} end={id('application-box')}
         {...arrowProps}
         startAnchor="top" endAnchor="bottom"
         labels={{ middle: <RelLabel text="N:1" /> }}
       />
 
-      {/* ExternalUserGroup → ExternalUser */}
+      {/* UserGroup → User */}
       <Xarrow start={id('externalUserGroup-box')} end={id('externalUser-box')}
         {...arrowProps}
         path="straight"
         startAnchor="top" endAnchor="bottom"
         labels={{ middle: <RelLabel text="N:1" /> }}
       />
-      {/* ExternalUserGroup → ExternalGroup */}
+      {/* UserGroup → Group */}
       <Xarrow start={id('externalUserGroup-box')} end={id('externalGroup-box')}
         {...arrowProps}
         path="straight"

mission-control/docs/guide/audit/access-logs.mdx

@@ -96,7 +96,7 @@ When `full` mode is enabled, the scraper expects each configuration item to pote
 
 ## Entra ID Audit Logs
 
-Entra ID generates sign-in logs and directory audit logs that can be scraped as access logs. There are three approaches depending on your infrastructure and latency requirements:
+Entra ID generates sign-in logs and directory audit logs that Mission Control scrapes as access logs. There are three approaches depending on your infrastructure and latency requirements:
 
 | | [HTTP + MS Graph](/docs/integrations/azure-ad/audit-logs/http-scraper) | [Logs Scraper](/docs/integrations/azure-ad/audit-logs/logs-scraper) | [Event Hub](/docs/integrations/azure-ad/audit-logs/event-hub) |
 |---|---|---|---|
@@ -113,6 +113,10 @@ For longer retention (beyond 30 days), export logs via Azure Monitor Diagnostic
 
 ## Example: Custom Scraper with Access Logs
 
+:::note
+The `config_id` and `user_id` fields reference UUIDs in the database, but scrapers resolve them by matching on external identifiers (names, aliases, or scraper-assigned IDs). The example below uses human-readable strings to show the scraper input format — Mission Control resolves these to UUIDs internally.
+:::
+
 ```json title="config-with-access-logs.json"
 {
   "id": "db-prod-001",
@@ -124,7 +128,7 @@ For longer retention (beyond 30 days), export logs via Azure Monitor Diagnostic
   "access_logs": [
     {
       "config_id": "db-prod-001",
-      "external_user_id": "user-123",
+      "user": "user-123",
       "created_at": "2025-01-08T10:30:00Z",
       "mfa": true,
       "properties": {
@@ -134,7 +138,7 @@ For longer retention (beyond 30 days), export logs via Azure Monitor Diagnostic
     },
     {
       "config_id": "db-prod-001",
-      "external_user_id": "user-456",
+      "user": "user-456",
       "created_at": "2025-01-08T11:45:00Z",
       "mfa": false
     }

mission-control/docs/guide/audit/applications.mdx

@@ -86,13 +86,8 @@ spec:
   },
   {
     field: 'mapping',
-    description: 'Maps the application to infrastructure, users, and environments',
+    description: 'Maps the application to infrastructure, users, and environments (including custom view sections)',
     scheme: '[`Mapping`](#mapping)'
-  },
-  {
-    field: 'sections',
-    description: 'Custom view sections embedded in the application page',
-    scheme: '`[]ViewSection`'
   }
 ]}/>
 

mission-control/docs/guide/audit/backups.mdx

@@ -61,7 +61,7 @@ Use [scraper transforms](/docs/guide/config-db/concepts/transform) to extract ba
 
 ## Backup Events from Changes
 
-Track backup-related events by mapping [change types](/docs/guide/config-db/concepts/changes) in your scraper. CloudTrail events like `CreateDBSnapshot`, `DeleteDBSnapshot`, and `RestoreDBInstanceFromDBSnapshot` can be mapped to named change types for clearer audit reporting:
+Track backup-related events by mapping [change types](/docs/guide/config-db/concepts/changes) in your scraper. You can map CloudTrail events like `CreateDBSnapshot`, `DeleteDBSnapshot`, and `RestoreDBInstanceFromDBSnapshot` to named change types for clearer audit reporting:
 
 ```yaml title="backup-change-tracking.yaml"
 apiVersion: configs.flanksource.com/v1

mission-control/docs/guide/audit/change-tracking.mdx

@@ -13,8 +13,8 @@ Mission Control provides an immutable audit trail of all configuration modificat
 
 Changes are recorded in two ways:
 
-- **Diff changes**: Mission Control compares each scrape result with the previous version and records the diff automatically. No additional configuration is needed beyond setting up a scraper.
-- **Event-based changes**: External events (CloudTrail, Kubernetes events) are ingested as named change types, providing richer context about who made a change and why.
+- **Diff changes**: Mission Control compares each scrape result with the previous version and records the diff automatically. You don't need additional configuration beyond setting up a scraper.
+- **Event-based changes**: Mission Control ingests external events (CloudTrail, Kubernetes events) as named change types, providing richer context about who made a change and why.
 
 See [Changes](/docs/guide/config-db/concepts/changes) for details on change types, severity mapping, and retention.
 

mission-control/docs/guide/audit/concepts.mdx

@@ -15,7 +15,7 @@ Mission Control's audit system stores four categories of data: identities (who),
 
 ## How Entities Relate
 
-**Identity providers** (Entra ID, AWS IAM, Kubernetes RBAC, databases) are scraped into **users**, **groups**, and **roles**. Users belong to groups, and roles define permission sets.
+Mission Control scrapes **identity providers** (Entra ID, AWS IAM, Kubernetes RBAC, databases) into **users**, **groups**, and **roles**. Users belong to groups, and roles define permission sets.
 
 **Permissions** link users, groups, and roles to specific **resources** — the infrastructure items in your catalog (AWS accounts, Azure subscriptions, Kubernetes clusters, databases, etc.). This answers "who _can_ access what."