feat(P7): IHF Phase 7 complete — advanced observability and operational integration

T01 schema: friction_scores, bottleneck_records, hub_health_snapshots,
cross_hub_propagations + migration 1743552000.

T02 Widget Pain Heatmap: computeFrictionScore (formula documented), RecomputeFriction
action, colour-coded grid view (green/yellow/amber/red).

T03 Workflow Bottleneck Analysis: detectBottlenecks across 4 pipeline stages
(candidate 30d, requirement 60d, decision 30d, observation 14d), idempotent,
severity from age ratio, resolve action.

T04 Hub Health Correlation: computeHubHealth (deduction table documented),
append-only HubHealthSnapshot, health history view, badge on hub Show page.

T05 Cross-Hub Propagation: annotation_cluster + widget_type_friction heuristics,
idempotent detection, acknowledge/resolve lifecycle.

T06 Operational Review Board: 4-panel AutoRefresh global dashboard — health matrix,
top-10 friction, bottleneck stage counts, open propagations.

T07 gate: 5 describe blocks in Test/Integration.hs; SCOPE.md updated Phase 7
complete; docs/phase7-summary.md written.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Web/Controller/CrossHubPropagations.hs

@@ -0,0 +1,37 @@
+module Web.Controller.CrossHubPropagations where
+
+import Web.Types
+import Web.View.CrossHubPropagations.Index
+import Generated.Types
+import IHP.Prelude
+import IHP.ControllerPrelude
+import Application.Helper.CrossHubPropagation (detectPropagations)
+
+instance Controller CrossHubPropagationsController where
+    beforeAction = ensureIsUser
+
+    action CrossHubPropagationsAction = autoRefresh do
+        propagations <- query @CrossHubPropagation
+            |> orderByDesc #detectedAt
+            |> fetch
+        hubs <- query @Hub |> fetch
+        render IndexView { propagations, hubs }
+
+    action DetectPropagationsAction = do
+        hubs        <- query @Hub |> fetch
+        widgets     <- query @Widget |> fetch
+        annotations <- query @Annotation |> fetch
+        frictionScores <- query @FrictionScore |> fetch
+        _ <- detectPropagations hubs annotations widgets frictionScores
+        setSuccessMessage "Propagation detection complete"
+        redirectTo CrossHubPropagationsAction
+
+    action AcknowledgePropagationAction { crossHubPropagationId } = do
+        p <- fetch crossHubPropagationId
+        p |> set #status "acknowledged" |> updateRecord
+        redirectTo CrossHubPropagationsAction
+
+    action ResolvePropagationAction { crossHubPropagationId } = do
+        p <- fetch crossHubPropagationId
+        p |> set #status "resolved" |> updateRecord
+        redirectTo CrossHubPropagationsAction

Web/Controller/Hubs.hs

@@ -10,10 +10,17 @@ import Web.View.Hubs.GovernanceDashboard
 import Web.View.Hubs.AntifragilityDashboard
 import Web.View.Hubs.AgentAuditDashboard
 import Web.View.Hubs.AdapterCompatibilityDashboard
+import Web.View.Hubs.FrictionHeatmap
+import Web.View.Hubs.BottleneckDashboard
+import Web.View.Hubs.HubHealthHistory
+import Web.View.Hubs.OperationalReviewBoard
 import Generated.Types
 import IHP.Prelude
 import IHP.ControllerPrelude
 import Application.Helper.Controller (regressedWidgetIds, widgetCycleCounts)
+import Application.Helper.FrictionScore (computeFrictionScore)
+import Application.Helper.BottleneckDetector (detectBottlenecks)
+import Application.Helper.HubHealth (computeHubHealth)
 
 instance Controller HubsController where
     beforeAction = ensureIsUser
@@ -237,3 +244,117 @@ instance Controller HubsController where
         envelopes  <- query @EnvelopeEmissionContract |> filterWhere (#status, "active") |> fetch
         reportings <- query @InteractionReportingContract |> filterWhere (#status, "active") |> fetch
         render AdapterCompatibilityDashboardView { hub, specs, widgets, envelopes, reportings }
+
+    action FrictionHeatmapAction { hubId } = autoRefresh do
+        hub     <- fetch hubId
+        widgets <- query @Widget |> filterWhere (#hubId, hubId) |> fetch
+        let widgetIds = map (.id) widgets
+        frictionScores <- query @FrictionScore
+            |> filterWhereIn (#widgetId, widgetIds)
+            |> fetch
+        render FrictionHeatmapView { hub, widgets, frictionScores }
+
+    action RecomputeFrictionAction { hubId } = do
+        hub     <- fetch hubId
+        widgets <- query @Widget |> filterWhere (#hubId, hubId) |> fetch
+        let widgetIds = map (.id) widgets
+        annotations <- query @Annotation |> filterWhereIn (#widgetId, widgetIds) |> fetch
+        events      <- sqlQuery "SELECT * FROM interaction_events WHERE widget_id = ANY(?)"
+                           (Only (PGArray widgetIds))
+        signals     <- query @OutcomeSignal |> filterWhereIn (#widgetId, widgetIds) |> fetch
+        candidates  <- query @RequirementCandidate |> filterWhereIn (#sourceWidgetId, widgetIds) |> fetch
+        let regressionWids = regressedWidgetIds signals annotations
+        mapM_ (\w ->
+            let wAnnotations = filter (\a -> a.widgetId == w.id) annotations
+                wEvents      = filter (\e -> e.widgetId == w.id) events
+                wCandidates  = filter (\c -> c.sourceWidgetId == w.id) candidates
+                isRegressed  = w.id `elem` regressionWids
+            in computeFrictionScore w.id wAnnotations wEvents isRegressed wCandidates
+            ) widgets
+        setSuccessMessage "Friction scores recomputed"
+        redirectTo FrictionHeatmapAction { hubId }
+
+    action BottleneckDashboardAction { hubId } = autoRefresh do
+        hub        <- fetch hubId
+        widgets    <- query @Widget |> filterWhere (#hubId, hubId) |> fetch
+        bottlenecks <- query @BottleneckRecord
+            |> filterWhere (#hubId, hubId)
+            |> orderByAsc #stalledSince
+            |> fetch
+        render BottleneckDashboardView { hub, widgets, bottlenecks }
+
+    action DetectBottlenecksAction { hubId } = do
+        hub        <- fetch hubId
+        widgets    <- query @Widget |> filterWhere (#hubId, hubId) |> fetch
+        let widgetIds = map (.id) widgets
+        candidates  <- query @RequirementCandidate |> filterWhereIn (#sourceWidgetId, widgetIds) |> fetch
+        let candidateIds = map (.id) candidates
+            acceptedIds  = map (.id) (filter (\c -> c.status == "accepted") candidates)
+        requirements <- query @Requirement |> filterWhereIn (#sourceCandidateId, acceptedIds) |> fetch
+        let reqIds = map (.id) requirements
+        decisions <- query @DecisionRecord
+            |> filterWhereIn (#requirementId, map Just reqIds)
+            |> fetch
+        let decisionIds = map (.id) decisions
+        deployments <- query @DeploymentRecord |> filterWhereIn (#decisionId, decisionIds) |> fetch
+        _ <- detectBottlenecks hubId widgets candidates requirements decisions deployments
+        setSuccessMessage "Bottleneck detection complete"
+        redirectTo BottleneckDashboardAction { hubId }
+
+    action ResolveBottleneckAction { bottleneckRecordId } = do
+        bottleneck <- fetch bottleneckRecordId
+        now <- getCurrentTime
+        bottleneck |> set #resolvedAt (Just now) |> updateRecord
+        setSuccessMessage "Bottleneck resolved"
+        redirectTo BottleneckDashboardAction { hubId = bottleneck.hubId }
+
+    action SnapshotHubHealthAction { hubId } = do
+        hub        <- fetch hubId
+        widgets    <- query @Widget |> filterWhere (#hubId, hubId) |> fetch
+        let widgetIds = map (.id) widgets
+        candidates  <- query @RequirementCandidate |> filterWhereIn (#sourceWidgetId, widgetIds) |> fetch
+        let acceptedIds  = map (.id) (filter (\c -> c.status == "accepted") candidates)
+        requirements <- query @Requirement |> filterWhereIn (#sourceCandidateId, acceptedIds) |> fetch
+        let reqIds = map (.id) requirements
+        decisions <- query @DecisionRecord |> filterWhereIn (#requirementId, map Just reqIds) |> fetch
+        let decisionIds = map (.id) decisions
+        deployments <- query @DeploymentRecord |> filterWhereIn (#decisionId, decisionIds) |> fetch
+        signals    <- query @OutcomeSignal |> filterWhereIn (#widgetId, widgetIds) |> fetch
+        annotations <- query @Annotation  |> filterWhereIn (#widgetId, widgetIds) |> fetch
+        bottlenecks <- query @BottleneckRecord
+            |> filterWhere (#hubId, hubId)
+            |> filterWhereSql (#resolvedAt, "IS NULL")
+            |> fetch
+        _ <- computeHubHealth hubId widgets candidates decisions deployments signals annotations bottlenecks
+        setSuccessMessage "Hub health snapshot taken"
+        redirectTo HubHealthHistoryAction { hubId }
+
+    action HubHealthHistoryAction { hubId } = autoRefresh do
+        hub       <- fetch hubId
+        snapshots <- query @HubHealthSnapshot
+            |> filterWhere (#hubId, hubId)
+            |> orderByDesc #computedAt
+            |> fetch
+        render HubHealthHistoryView { hub, snapshots }
+
+    action OperationalReviewBoardAction = autoRefresh do
+        hubs               <- query @Hub |> orderByAsc #name |> fetch
+        allSnapshots       <- query @HubHealthSnapshot |> orderByDesc #computedAt |> fetch
+        topFrictionScores  <- query @FrictionScore |> orderByDesc #score |> limit 10 |> fetch
+        topWidgets         <- mapM (\fs -> fetch fs.widgetId) topFrictionScores
+        bottlenecks        <- query @BottleneckRecord
+            |> filterWhereSql (#resolvedAt, "IS NULL")
+            |> orderByAsc #stage
+            |> fetch
+        propagations       <- query @CrossHubPropagation
+            |> orderByDesc #detectedAt
+            |> fetch
+        let openPropagations = filter (\p -> p.status `elem` ["open","acknowledged"]) propagations
+        render OperationalReviewBoardView
+            { hubs
+            , allSnapshots
+            , topFrictionScores
+            , topWidgets
+            , bottlenecks
+            , openPropagations
+            }

Web/FrontController.hs

@@ -23,6 +23,7 @@ import Web.Controller.ApiInteractionEvents ()
 import Web.Controller.EnvelopeEmissionContracts ()
 import Web.Controller.InteractionReportingContracts ()
 import Web.Controller.WidgetAdapterSpecs ()
+import Web.Controller.CrossHubPropagations ()
 import Web.Controller.Sessions ()
 
 instance FrontController WebApplication where
@@ -42,6 +43,7 @@ instance FrontController WebApplication where
         , parseRoute @EnvelopeEmissionContractsController
         , parseRoute @InteractionReportingContractsController
         , parseRoute @WidgetAdapterSpecsController
+        , parseRoute @CrossHubPropagationsController
         ]
 
 instance InitControllerContext WebApplication where
@@ -81,6 +83,8 @@ defaultLayout inner = [hsx|
                 <a href={DeploymentRecordsAction} class="text-sm text-gray-600 hover:text-gray-900">Deployments</a>
                 <a href={AgentProposalsAction} class="text-sm text-gray-600 hover:text-gray-900">Agent</a>
                 <a href={WidgetAdapterSpecsAction} class="text-sm text-gray-600 hover:text-gray-900">Adapters</a>
+                <a href={CrossHubPropagationsAction} class="text-sm text-gray-600 hover:text-gray-900">Propagations</a>
+                <a href={OperationalReviewBoardAction} class="text-sm text-gray-600 hover:text-gray-900">Ops Review</a>
                 <div class="ml-auto">
                     <a href={DeleteSessionAction} class="text-sm text-gray-500 hover:text-gray-700">Sign out</a>
                 </div>

Web/Routes.hs

@@ -52,5 +52,8 @@ instance AutoRoute EnvelopeEmissionContractsController
 instance AutoRoute InteractionReportingContractsController
 instance AutoRoute WidgetAdapterSpecsController
 
+-- Phase 7 — Advanced Observability
+instance AutoRoute CrossHubPropagationsController
+
 -- Sessions
 instance AutoRoute SessionsController

Web/Types.hs

@@ -28,6 +28,14 @@ data HubsController
     | AntifragilityDashboardAction   { hubId :: !(Id Hub) }
     | AgentAuditDashboardAction          { hubId :: !(Id Hub) }
     | AdapterCompatibilityDashboardAction { hubId :: !(Id Hub) }
+    | FrictionHeatmapAction              { hubId :: !(Id Hub) }
+    | RecomputeFrictionAction            { hubId :: !(Id Hub) }
+    | BottleneckDashboardAction          { hubId :: !(Id Hub) }
+    | DetectBottlenecksAction            { hubId :: !(Id Hub) }
+    | ResolveBottleneckAction            { bottleneckRecordId :: !(Id BottleneckRecord) }
+    | SnapshotHubHealthAction            { hubId :: !(Id Hub) }
+    | HubHealthHistoryAction             { hubId :: !(Id Hub) }
+    | OperationalReviewBoardAction
     deriving (Eq, Show, Data)
 
 data WidgetsController
@@ -135,6 +143,13 @@ data WidgetAdapterSpecsController
     | UpdateWidgetAdapterSpecAction { widgetAdapterSpecId :: !(Id WidgetAdapterSpec) }
     deriving (Eq, Show, Data)
 
+data CrossHubPropagationsController
+    = CrossHubPropagationsAction
+    | DetectPropagationsAction
+    | AcknowledgePropagationAction { crossHubPropagationId :: !(Id CrossHubPropagation) }
+    | ResolvePropagationAction     { crossHubPropagationId :: !(Id CrossHubPropagation) }
+    deriving (Eq, Show, Data)
+
 data SessionsController
     = NewSessionAction
     | CreateSessionAction

Web/View/CrossHubPropagations/Index.hs

@@ -0,0 +1,88 @@
+module Web.View.CrossHubPropagations.Index where
+
+import Web.Types
+import Generated.Types
+import IHP.Prelude
+import IHP.ViewPrelude
+
+data IndexView = IndexView
+    { propagations :: ![CrossHubPropagation]
+    , hubs         :: ![Hub]
+    }
+
+instance View IndexView where
+    html IndexView { .. } = [hsx|
+        <div class="flex items-center justify-between mb-6">
+            <h1 class="text-2xl font-semibold">Cross-Hub Propagations</h1>
+            <a href={DetectPropagationsAction}
+               class="text-sm bg-indigo-600 text-white px-3 py-1.5 rounded hover:bg-indigo-700">
+                Detect
+            </a>
+        </div>
+
+        {if null propagations
+            then [hsx|<p class="text-sm text-gray-400">No propagation events detected yet.</p>|]
+            else [hsx|
+                <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
+                    <table class="w-full text-sm">
+                        <thead class="bg-gray-50 border-b border-gray-200">
+                            <tr>
+                                <th class="text-left px-4 py-3 font-medium text-gray-700">Pattern</th>
+                                <th class="text-left px-4 py-3 font-medium text-gray-700">Summary</th>
+                                <th class="text-left px-4 py-3 font-medium text-gray-700">Source Hub</th>
+                                <th class="text-left px-4 py-3 font-medium text-gray-700">Status</th>
+                                <th class="text-left px-4 py-3 font-medium text-gray-700">Detected</th>
+                                <th class="px-4 py-3"></th>
+                            </tr>
+                        </thead>
+                        <tbody class="divide-y divide-gray-100">
+                            {forEach propagations renderRow}
+                        </tbody>
+                    </table>
+                </div>
+            |]}
+    |]
+      where
+        hubName hid = maybe "–" (.name) (find (\h -> h.id == hid) hubs)
+
+        renderRow :: CrossHubPropagation -> Html
+        renderRow p = [hsx|
+            <tr class="hover:bg-gray-50">
+                <td class="px-4 py-3">
+                    <span class="bg-purple-100 text-purple-700 text-xs px-1.5 py-0.5 rounded">
+                        {p.patternType}
+                    </span>
+                </td>
+                <td class="px-4 py-3 text-gray-700">{p.summary}</td>
+                <td class="px-4 py-3 text-gray-500 text-xs">
+                    {maybe "–" hubName p.sourceHubId}
+                </td>
+                <td class="px-4 py-3">
+                    <span class={statusBadge p.status <> " text-xs px-2 py-0.5 rounded font-medium"}>
+                        {p.status}
+                    </span>
+                </td>
+                <td class="px-4 py-3 text-xs text-gray-400">{show p.detectedAt}</td>
+                <td class="px-4 py-3 text-right">
+                    {if p.status == "open"
+                        then [hsx|
+                            <a href={AcknowledgePropagationAction { crossHubPropagationId = p.id }}
+                               class="text-xs text-yellow-600 hover:underline mr-2">Acknowledge</a>
+                        |]
+                        else mempty}
+                    {if p.status /= "resolved"
+                        then [hsx|
+                            <a href={ResolvePropagationAction { crossHubPropagationId = p.id }}
+                               class="text-xs text-green-600 hover:underline">Resolve</a>
+                        |]
+                        else mempty}
+                </td>
+            </tr>
+            |]
+
+statusBadge :: Text -> Text
+statusBadge s = case s of
+    "open"         -> "bg-yellow-100 text-yellow-800"
+    "acknowledged" -> "bg-blue-100 text-blue-800"
+    "resolved"     -> "bg-green-100 text-green-800"
+    _              -> "bg-gray-100 text-gray-600"

Web/View/Hubs/BottleneckDashboard.hs

@@ -0,0 +1,97 @@
+module Web.View.Hubs.BottleneckDashboard where
+
+import Web.Types
+import Generated.Types
+import IHP.Prelude
+import IHP.ViewPrelude
+import Data.Time.Clock (diffUTCTime, getCurrentTime)
+
+data BottleneckDashboardView = BottleneckDashboardView
+    { hub         :: !Hub
+    , widgets     :: ![Widget]
+    , bottlenecks :: ![BottleneckRecord]
+    }
+
+instance View BottleneckDashboardView where
+    html BottleneckDashboardView { .. } = [hsx|
+        <div class="flex items-center justify-between mb-6">
+            <div>
+                <h1 class="text-2xl font-semibold">Bottleneck Dashboard</h1>
+                <p class="text-sm text-gray-500">{hub.name}</p>
+            </div>
+            <div class="flex gap-2">
+                <a href={DetectBottlenecksAction { hubId = hub.id }}
+                   class="text-sm bg-indigo-600 text-white px-3 py-1.5 rounded hover:bg-indigo-700">
+                    Detect
+                </a>
+                <a href={ShowHubAction { hubId = hub.id }}
+                   class="text-sm border border-gray-300 px-3 py-1.5 rounded hover:bg-gray-50">
+                    ← Hub
+                </a>
+            </div>
+        </div>
+
+        {forEach stages renderStageSection}
+
+        {if null bottlenecks
+            then [hsx|<p class="text-sm text-gray-400 mt-4">No active bottlenecks detected.</p>|]
+            else mempty}
+    |]
+      where
+        stages = ["candidate", "requirement", "decision", "observation"] :: [Text]
+        stageLabel s = case s of
+            "candidate"   -> "Stale Candidates (>30 days open)"
+            "requirement" -> "Requirements Without Decision (>60 days)"
+            "decision"    -> "Decisions Without Deployment (>30 days)"
+            "observation" -> "Deployments Without Outcome Signal (>14 days)"
+            _             -> s
+
+        active = filter (\b -> isNothing b.resolvedAt) bottlenecks
+
+        renderStageSection :: Text -> Html
+        renderStageSection stage =
+            let stageBNs = filter (\b -> b.stage == stage) active
+            in if null stageBNs
+               then mempty
+               else [hsx|
+                <div class="bg-white rounded-lg border border-gray-200 p-5 mb-4">
+                    <h2 class="text-sm font-semibold text-gray-700 mb-3">{stageLabel stage}</h2>
+                    <table class="w-full text-sm">
+                        <thead class="bg-gray-50">
+                            <tr>
+                                <th class="text-left px-3 py-2 font-medium text-gray-600">Subject</th>
+                                <th class="text-left px-3 py-2 font-medium text-gray-600">Stalled Since</th>
+                                <th class="text-left px-3 py-2 font-medium text-gray-600">Severity</th>
+                                <th class="px-3 py-2"></th>
+                            </tr>
+                        </thead>
+                        <tbody class="divide-y divide-gray-100">
+                            {forEach stageBNs renderRow}
+                        </tbody>
+                    </table>
+                </div>
+                |]
+
+        renderRow :: BottleneckRecord -> Html
+        renderRow b = [hsx|
+            <tr class="hover:bg-gray-50">
+                <td class="px-3 py-2 font-mono text-xs text-gray-500">{show b.subjectId}</td>
+                <td class="px-3 py-2 text-xs text-gray-500">{show b.stalledSince}</td>
+                <td class="px-3 py-2">
+                    <span class={severityBadge b.severity <> " text-xs px-2 py-0.5 rounded font-medium"}>
+                        {b.severity}
+                    </span>
+                </td>
+                <td class="px-3 py-2 text-right">
+                    <a href={ResolveBottleneckAction { bottleneckRecordId = b.id }}
+                       class="text-xs text-indigo-600 hover:underline">Resolve</a>
+                </td>
+            </tr>
+            |]
+
+severityBadge :: Text -> Text
+severityBadge s = case s of
+    "critical" -> "bg-red-100 text-red-800"
+    "high"     -> "bg-orange-100 text-orange-800"
+    "medium"   -> "bg-yellow-100 text-yellow-800"
+    _          -> "bg-gray-100 text-gray-600"

Web/View/Hubs/FrictionHeatmap.hs

@@ -0,0 +1,68 @@
+module Web.View.Hubs.FrictionHeatmap where
+
+import Web.Types
+import Generated.Types
+import IHP.Prelude
+import IHP.ViewPrelude
+import Application.Helper.FrictionScore (scoreBand)
+
+data FrictionHeatmapView = FrictionHeatmapView
+    { hub           :: !Hub
+    , widgets       :: ![Widget]
+    , frictionScores :: ![FrictionScore]
+    }
+
+instance View FrictionHeatmapView where
+    html FrictionHeatmapView { .. } = [hsx|
+        <div class="flex items-center justify-between mb-6">
+            <div>
+                <h1 class="text-2xl font-semibold">Friction Heatmap</h1>
+                <p class="text-sm text-gray-500">{hub.name}</p>
+            </div>
+            <div class="flex gap-2">
+                <a href={RecomputeFrictionAction { hubId = hub.id }}
+                   class="text-sm bg-indigo-600 text-white px-3 py-1.5 rounded hover:bg-indigo-700">
+                    Recompute
+                </a>
+                <a href={ShowHubAction { hubId = hub.id }}
+                   class="text-sm border border-gray-300 px-3 py-1.5 rounded hover:bg-gray-50">
+                    ← Hub
+                </a>
+            </div>
+        </div>
+
+        <div class="mb-4 flex gap-4 text-xs text-gray-500">
+            <span><span class="inline-block w-3 h-3 rounded bg-green-100 mr-1"></span>Low (0–19)</span>
+            <span><span class="inline-block w-3 h-3 rounded bg-yellow-100 mr-1"></span>Medium (20–39)</span>
+            <span><span class="inline-block w-3 h-3 rounded bg-orange-100 mr-1"></span>High (40–59)</span>
+            <span><span class="inline-block w-3 h-3 rounded bg-red-100 mr-1"></span>Critical (60+)</span>
+        </div>
+
+        {if null widgets
+            then [hsx|<p class="text-sm text-gray-400">No widgets in this hub.</p>|]
+            else [hsx|
+                <div class="grid grid-cols-3 gap-3">
+                    {forEach widgets renderWidgetCard}
+                </div>
+            |]}
+    |]
+      where
+        scoreFor w = maybe 0 (.score) (find (\fs -> fs.widgetId == w.id) frictionScores)
+        hasScore w = any (\fs -> fs.widgetId == w.id) frictionScores
+
+        renderWidgetCard :: Widget -> Html
+        renderWidgetCard w =
+            let s    = scoreFor w
+                band = scoreBand s
+            in [hsx|
+            <div class={"rounded-lg border p-4 " <> band}>
+                <div class="flex items-start justify-between">
+                    <a href={ShowWidgetAction { widgetId = w.id }}
+                       class="font-medium text-sm hover:underline">{w.name}</a>
+                    {if hasScore w
+                        then [hsx|<span class="text-lg font-bold">{show s}</span>|]
+                        else [hsx|<span class="text-xs text-gray-400">–</span>|]}
+                </div>
+                <p class="text-xs mt-1 opacity-70">{w.widgetType}</p>
+            </div>
+            |]

Web/View/Hubs/HubHealthHistory.hs

@@ -0,0 +1,87 @@
+module Web.View.Hubs.HubHealthHistory where
+
+import Web.Types
+import Generated.Types
+import IHP.Prelude
+import IHP.ViewPrelude
+import Application.Helper.HubHealth (healthScoreBadge)
+
+data HubHealthHistoryView = HubHealthHistoryView
+    { hub       :: !Hub
+    , snapshots :: ![HubHealthSnapshot]
+    }
+
+instance View HubHealthHistoryView where
+    html HubHealthHistoryView { .. } = [hsx|
+        <div class="flex items-center justify-between mb-6">
+            <div>
+                <h1 class="text-2xl font-semibold">Hub Health History</h1>
+                <p class="text-sm text-gray-500">{hub.name}</p>
+            </div>
+            <div class="flex gap-2">
+                <a href={SnapshotHubHealthAction { hubId = hub.id }}
+                   class="text-sm bg-indigo-600 text-white px-3 py-1.5 rounded hover:bg-indigo-700">
+                    Take Snapshot
+                </a>
+                <a href={ShowHubAction { hubId = hub.id }}
+                   class="text-sm border border-gray-300 px-3 py-1.5 rounded hover:bg-gray-50">
+                    ← Hub
+                </a>
+            </div>
+        </div>
+
+        {case snapshots of
+            [] -> [hsx|<p class="text-sm text-gray-400">No snapshots yet. Take the first one.</p>|]
+            (latest : _) -> [hsx|
+                <div class="bg-white rounded-lg border border-gray-200 p-5 mb-6 flex items-center gap-6">
+                    <div>
+                        <p class="text-xs text-gray-500 mb-1">Current Health Score</p>
+                        <span class={"text-3xl font-bold px-3 py-1 rounded " <> healthScoreBadge latest.healthScore}>
+                            {show latest.healthScore}
+                        </span>
+                    </div>
+                    <div class="text-sm text-gray-600 space-y-1">
+                        <div>Open candidates: <strong>{show latest.openCandidates}</strong></div>
+                        <div>Regressed widgets: <strong>{show latest.regressedWidgets}</strong></div>
+                        <div>Stale decisions: <strong>{show latest.staleDecisions}</strong></div>
+                        <div>Active bottlenecks: <strong>{show latest.activeBottlenecks}</strong></div>
+                    </div>
+                </div>
+                |]}
+
+        {if null snapshots then mempty else [hsx|
+            <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
+                <table class="w-full text-sm">
+                    <thead class="bg-gray-50 border-b border-gray-200">
+                        <tr>
+                            <th class="text-left px-4 py-3 font-medium text-gray-700">Score</th>
+                            <th class="text-left px-4 py-3 font-medium text-gray-700">Open Cand.</th>
+                            <th class="text-left px-4 py-3 font-medium text-gray-700">Regressed</th>
+                            <th class="text-left px-4 py-3 font-medium text-gray-700">Stale Dec.</th>
+                            <th class="text-left px-4 py-3 font-medium text-gray-700">Bottlenecks</th>
+                            <th class="text-left px-4 py-3 font-medium text-gray-700">Taken At</th>
+                        </tr>
+                    </thead>
+                    <tbody class="divide-y divide-gray-100">
+                        {forEach snapshots renderRow}
+                    </tbody>
+                </table>
+            </div>
+        |]}
+    |]
+
+renderRow :: HubHealthSnapshot -> Html
+renderRow s = [hsx|
+    <tr class="hover:bg-gray-50">
+        <td class="px-4 py-3">
+            <span class={"px-2 py-0.5 rounded text-xs font-semibold " <> healthScoreBadge s.healthScore}>
+                {show s.healthScore}
+            </span>
+        </td>
+        <td class="px-4 py-3 text-gray-700">{show s.openCandidates}</td>
+        <td class="px-4 py-3 text-gray-700">{show s.regressedWidgets}</td>
+        <td class="px-4 py-3 text-gray-700">{show s.staleDecisions}</td>
+        <td class="px-4 py-3 text-gray-700">{show s.activeBottlenecks}</td>
+        <td class="px-4 py-3 text-xs text-gray-400">{show s.computedAt}</td>
+    </tr>
+|]

Web/View/Hubs/OperationalReviewBoard.hs

@@ -0,0 +1,179 @@
+module Web.View.Hubs.OperationalReviewBoard where
+
+import Web.Types
+import Generated.Types
+import IHP.Prelude
+import IHP.ViewPrelude
+import Application.Helper.HubHealth (healthScoreBadge)
+import Application.Helper.FrictionScore (scoreBand)
+import Web.View.Hubs.BottleneckDashboard (severityBadge)
+
+data OperationalReviewBoardView = OperationalReviewBoardView
+    { hubs              :: ![Hub]
+    , allSnapshots      :: ![HubHealthSnapshot]
+    , topFrictionScores :: ![FrictionScore]
+    , topWidgets        :: ![Widget]
+    , bottlenecks       :: ![BottleneckRecord]
+    , openPropagations  :: ![CrossHubPropagation]
+    }
+
+instance View OperationalReviewBoardView where
+    html OperationalReviewBoardView { .. } = [hsx|
+        <div class="flex items-center justify-between mb-6">
+            <h1 class="text-2xl font-semibold">Operational Review Board</h1>
+        </div>
+
+        <!-- Panel 1: Hub health matrix -->
+        <div class="bg-white rounded-lg border border-gray-200 p-5 mb-4">
+            <h2 class="text-sm font-semibold text-gray-700 mb-3">Hub Health Matrix</h2>
+            {if null hubs
+                then [hsx|<p class="text-sm text-gray-400">No hubs registered.</p>|]
+                else [hsx|
+                    <table class="w-full text-sm">
+                        <thead class="bg-gray-50">
+                            <tr>
+                                <th class="text-left px-3 py-2 font-medium text-gray-600">Hub</th>
+                                <th class="text-left px-3 py-2 font-medium text-gray-600">Health</th>
+                                <th class="text-left px-3 py-2 font-medium text-gray-600">Snapshot</th>
+                                <th class="px-3 py-2"></th>
+                            </tr>
+                        </thead>
+                        <tbody class="divide-y divide-gray-100">
+                            {forEach hubs renderHubRow}
+                        </tbody>
+                    </table>
+                |]}
+        </div>
+
+        <!-- Panel 2: Top friction widgets -->
+        <div class="bg-white rounded-lg border border-gray-200 p-5 mb-4">
+            <h2 class="text-sm font-semibold text-gray-700 mb-3">Top Friction Widgets</h2>
+            {if null topFrictionScores
+                then [hsx|<p class="text-sm text-gray-400">No friction scores computed yet.</p>|]
+                else [hsx|
+                    <table class="w-full text-sm">
+                        <thead class="bg-gray-50">
+                            <tr>
+                                <th class="text-left px-3 py-2 font-medium text-gray-600">Widget</th>
+                                <th class="text-left px-3 py-2 font-medium text-gray-600">Score</th>
+                                <th class="text-left px-3 py-2 font-medium text-gray-600">Type</th>
+                            </tr>
+                        </thead>
+                        <tbody class="divide-y divide-gray-100">
+                            {forEach (zip topFrictionScores topWidgets) renderFrictionRow}
+                        </tbody>
+                    </table>
+                |]}
+        </div>
+
+        <!-- Panel 3: Active bottlenecks by stage -->
+        <div class="bg-white rounded-lg border border-gray-200 p-5 mb-4">
+            <h2 class="text-sm font-semibold text-gray-700 mb-3">Active Bottlenecks by Stage</h2>
+            {if null bottlenecks
+                then [hsx|<p class="text-sm text-gray-400">No active bottlenecks.</p>|]
+                else [hsx|
+                    <div class="grid grid-cols-4 gap-3">
+                        {forEach stages renderBottleneckStage}
+                    </div>
+                |]}
+        </div>
+
+        <!-- Panel 4: Open cross-hub propagations -->
+        <div class="bg-white rounded-lg border border-gray-200 p-5">
+            <h2 class="text-sm font-semibold text-gray-700 mb-3">Open Cross-Hub Propagations</h2>
+            {if null openPropagations
+                then [hsx|<p class="text-sm text-gray-400">No open propagation events.</p>|]
+                else [hsx|
+                    <div class="space-y-2">
+                        {forEach openPropagations renderPropagationRow}
+                    </div>
+                |]}
+        </div>
+    |]
+      where
+        stages = ["candidate", "requirement", "decision", "observation"] :: [Text]
+        stageLabel s = case s of
+            "candidate"   -> "Candidate"
+            "requirement" -> "Requirement"
+            "decision"    -> "Decision"
+            "observation" -> "Observation"
+            _             -> s
+
+        latestSnapshotFor hub =
+            find (\s -> s.hubId == hub.id) allSnapshots
+
+        renderHubRow :: Hub -> Html
+        renderHubRow h =
+            let mSnap = latestSnapshotFor h
+            in [hsx|
+            <tr class="hover:bg-gray-50">
+                <td class="px-3 py-2">
+                    <a href={ShowHubAction { hubId = h.id }}
+                       class="text-indigo-600 hover:underline">{h.name}</a>
+                </td>
+                <td class="px-3 py-2">
+                    {case mSnap of
+                        Nothing -> [hsx|<span class="text-xs text-gray-400">–</span>|]
+                        Just s  -> [hsx|
+                            <span class={"px-2 py-0.5 rounded text-xs font-semibold " <> healthScoreBadge s.healthScore}>
+                                {show s.healthScore}
+                            </span>
+                        |]}
+                </td>
+                <td class="px-3 py-2 text-xs text-gray-400">
+                    {maybe "never" (\s -> show s.computedAt) mSnap}
+                </td>
+                <td class="px-3 py-2 text-right">
+                    <a href={HubHealthHistoryAction { hubId = h.id }}
+                       class="text-xs text-indigo-600 hover:underline">History</a>
+                </td>
+            </tr>
+            |]
+
+        renderFrictionRow :: (FrictionScore, Widget) -> Html
+        renderFrictionRow (fs, w) = [hsx|
+            <tr class="hover:bg-gray-50">
+                <td class="px-3 py-2">
+                    <a href={ShowWidgetAction { widgetId = w.id }}
+                       class="text-indigo-600 hover:underline">{w.name}</a>
+                </td>
+                <td class="px-3 py-2">
+                    <span class={"px-2 py-0.5 rounded text-xs font-semibold " <> scoreBand fs.score}>
+                        {show fs.score}
+                    </span>
+                </td>
+                <td class="px-3 py-2 text-gray-500 text-xs">{w.widgetType}</td>
+            </tr>
+            |]
+
+        renderBottleneckStage :: Text -> Html
+        renderBottleneckStage stage =
+            let stageBNs = filter (\b -> b.stage == stage) bottlenecks
+                cnt      = length stageBNs
+                hasCrit  = any (\b -> b.severity == "critical") stageBNs
+                colourCls = if cnt == 0 then "bg-gray-50 text-gray-400"
+                            else if hasCrit then "bg-red-50 text-red-700"
+                            else "bg-orange-50 text-orange-700"
+            in [hsx|
+            <div class={"rounded-lg p-4 text-center " <> colourCls}>
+                <div class="text-2xl font-bold">{show cnt}</div>
+                <div class="text-xs mt-1">{stageLabel stage}</div>
+            </div>
+            |]
+
+        renderPropagationRow :: CrossHubPropagation -> Html
+        renderPropagationRow p = [hsx|
+            <div class="flex items-start justify-between p-3 bg-gray-50 rounded border border-gray-200">
+                <div>
+                    <span class="text-xs bg-purple-100 text-purple-700 px-1.5 py-0.5 rounded mr-2">{p.patternType}</span>
+                    <span class="text-sm text-gray-700">{p.summary}</span>
+                    <p class="text-xs text-gray-400 mt-0.5">{show p.detectedAt}</p>
+                </div>
+                <div class="flex gap-2 ml-4">
+                    <a href={AcknowledgePropagationAction { crossHubPropagationId = p.id }}
+                       class="text-xs text-yellow-600 hover:underline whitespace-nowrap">Acknowledge</a>
+                    <a href={ResolvePropagationAction { crossHubPropagationId = p.id }}
+                       class="text-xs text-green-600 hover:underline">Resolve</a>
+                </div>
+            </div>
+            |]

Web/View/Hubs/Show.hs

@@ -49,6 +49,18 @@ instance View ShowView where
                        class="text-sm border border-teal-300 text-teal-700 px-3 py-1.5 rounded hover:bg-teal-50">
                         Adapters
                     </a>
+                    <a href={FrictionHeatmapAction { hubId = hub.id }}
+                       class="text-sm border border-orange-300 text-orange-700 px-3 py-1.5 rounded hover:bg-orange-50">
+                        Friction
+                    </a>
+                    <a href={BottleneckDashboardAction { hubId = hub.id }}
+                       class="text-sm border border-red-300 text-red-700 px-3 py-1.5 rounded hover:bg-red-50">
+                        Bottlenecks
+                    </a>
+                    <a href={HubHealthHistoryAction { hubId = hub.id }}
+                       class="text-sm border border-green-300 text-green-700 px-3 py-1.5 rounded hover:bg-green-50">
+                        Health
+                    </a>
                     <a href={EditHubAction { hubId = hub.id }}
                        class="text-sm border border-gray-300 px-3 py-1.5 rounded hover:bg-gray-50">
                         Edit