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/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