feat: marketplace-style Integrations page + fix tests and OG image

- Redesign IntegrationsPage as a card grid with brand colours, status
  icons (checkmark/warning), filter tabs, and per-tool detail pages
- Connected tools navigate to Token Monitoring with the right assistant
  pre-selected (via initialTool prop on BoardView)
- Non-connected tools open a full-width detail view with back button,
  numbered setup steps, and documentation links
- Only tools with real board panels (claude-code, codex, devin, copilot)
  navigate away; others open the detail view to avoid blank screens
- Fix integration badge count: use Set to count distinct reading tools
  instead of Math.max capping at 1
- Fall back to assistants array when integrations data is unavailable
- Replace text-only og.png with real dashboard screenshot
- Fix leaderboard tests: handle cloud-configured openBoard flow,
  re-stub API on reload, update nav item count assertions

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>

Author: reddy-sh

site/public/og-text.png

@@ -2,15 +2,15 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { profilesOf, rankBoard } from '../lib/leaderboard'
 import { TipProvider } from './board/charts'
 import {
-  CodexDays, CodexLimits, CodexModels, CodexPolicy, CodexProjects, CodexSessions, CodexSplit, CodexTiles,
+    CodexDays, CodexLimits, CodexModels, CodexPolicy, CodexProjects, CodexSessions, CodexSplit, CodexTiles,
 } from './board/codex'
 import { AddMachineModal, MachinesPanel, UpgradeModal } from './board/enroll'
 import { ExtensionsCard, governanceBadges, McpCard, PermissionsCard, ToolCallsCard } from './board/governance'
 import Leaderboard from './board/leaderboard'
 import {
-  ActivityCard, Card, DriversCard, EndedFeed, HostsFeed, HoursCard, IntegrationsCard, LiveCard,
-  ModelsTable, Offboard, ProjectsFeed, PromptsFeed, RateCard, SessionsTable, SpendCard, Tiles,
-  TokensCard, UsageWindows,
+    ActivityCard, Card, DriversCard, EndedFeed, HostsFeed, HoursCard, IntegrationsCard, LiveCard,
+    ModelsTable, Offboard, ProjectsFeed, PromptsFeed, RateCard, SessionsTable, SpendCard, Tiles,
+    TokensCard, UsageWindows,
 } from './board/panels'
 import Rail, { Ic } from './board/Rail'
 import { compact, usdShort } from './board/util'
@@ -67,9 +67,10 @@ export default function BoardView({
   theme, onToggleTheme,
   embedded, onBoardState,
   publicBoard,
+  initialTool,
 }) {
   const [picked, setPicked] = useState(null)     /* which machine */
-  const [toolSel, setToolSel] = useState('claude-code')
+  const [toolSel, setToolSel] = useState(initialTool || 'claude-code')
   const [railOpen, setRailOpen] = useState(false)
   const [active, setActive] = useState(null)     /* which nav row is lit */
   const [addOpen, setAddOpen] = useState(false)  /* the add-machine modal */

site/public/og.png

@@ -6,6 +6,7 @@ import { fleetOf, rankBoard } from '../lib/leaderboard'
 import { buildOverview } from '../lib/overview'
 import AdminSidebar from './admin/AdminSidebar'
 import AdminTopbar from './admin/AdminTopbar'
+import IntegrationsPage from './admin/IntegrationsPage'
 import LeaderboardPage, { LEADERBOARD_KEYS, LEADERBOARD_PAGES } from './admin/LeaderboardPage'
 import RootRail, { SECTIONS } from './admin/RootRail'
 import SectionRail from './admin/SectionRail'
@@ -60,6 +61,7 @@ export default function Portal({ onClose, user, onUser, onSelfHost }) {
   const [rootMini, setRootMini] = useState(() => load(SK_ROOTNAV, '') === '1')
   const [collapsed, setCollapsed] = useState(() => load(SK_SUBNAV, '') === '1')
   const [boardState, setBoardState] = useState(null)
+  const [pendingTool, setPendingTool] = useState(null)
 
   /* Every fetch this component has in flight, so a sign-out or a close does
      not land a response into an unmounted tree. */
@@ -220,7 +222,10 @@ export default function Portal({ onClose, user, onUser, onSelfHost }) {
   const toggleRoot = useCallback(() => {
     setRootMini(c => { save(SK_ROOTNAV, c ? '' : '1'); return !c })
   }, [])
-  const goto = useCallback(key => { setSection(key); save(SK_SECTION, key) }, [])
+  const goto = useCallback(key => {
+    if (key !== 'monitoring') setPendingTool(null)
+    setSection(key); save(SK_SECTION, key)
+  }, [])
   const gotoLb = useCallback(key => { setLbPage(key); save(SK_LBPAGE, key) }, [])
 
   /* The fleet in the shape the Leaderboard pages expect. Computed here rather
@@ -246,17 +251,23 @@ export default function Portal({ onClose, user, onUser, onSelfHost }) {
     return row ? row.rank : null
   }, [profiles, meId])
 
-  /* Integration summary across all snapshots for the badge. */
+  /* Integration summary across all snapshots for the badge. Falls back to
+     the assistants array when the agent hasn't been upgraded yet. */
   const intSummary = useMemo(() => {
     const snaps = data?.latest || []
     let reading = 0, known = 0
     const seen = new Set()
+    const readingIds = new Set()
     for (const s of snaps) {
       const sum = s.metrics?.integrationSummary
       if (sum) { reading = Math.max(reading, sum.reading || 0); known = Math.max(known, sum.known || 0) }
-      for (const r of (s.metrics?.integrations || [])) seen.add(r.id)
+      const rows = s.metrics?.integrations || s.metrics?.assistants || []
+      for (const r of rows) {
+        seen.add(r.id)
+        if (r.state === 'reading' || r.hasData) readingIds.add(r.id)
+      }
     }
-    return { reading, known: known || seen.size }
+    return { reading: Math.max(reading, readingIds.size), known: known || seen.size }
   }, [data])
 
   const hasSubNav = section === 'monitoring' || section === 'leaderboard'
@@ -350,6 +361,7 @@ export default function Portal({ onClose, user, onUser, onSelfHost }) {
               publicBoard={publicBoard}
               embedded
               onBoardState={setBoardState}
+              initialTool={pendingTool}
             />
           )}
           {section === 'leaderboard' && (
@@ -361,7 +373,12 @@ export default function Portal({ onClose, user, onUser, onSelfHost }) {
             />
           )}
           {section === 'integrations' && (
-            <IntegrationsPage snapshots={data?.latest || []} />
+            <IntegrationsPage snapshots={data?.latest || []}
+              onNavigate={(toolId) => {
+                setPendingTool(toolId)
+                goto('monitoring')
+              }}
+            />
           )}
           {section === 'settings' && (
             <div className="adm-page" style={{ padding: 'var(--space-xl) var(--page-gutter)' }}>

site/src/components/BoardView.jsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { fleetOf, rankBoard } from '../lib/leaderboard'
 import AdminSidebar from './admin/AdminSidebar'
 import AdminTopbar from './admin/AdminTopbar'
+import IntegrationsPage from './admin/IntegrationsPage'
 import LeaderboardPage, { LEADERBOARD_KEYS, LEADERBOARD_PAGES } from './admin/LeaderboardPage'
 import RootRail, { SECTIONS } from './admin/RootRail'
 import SectionRail from './admin/SectionRail'
@@ -335,6 +336,7 @@ export default function SelfHost({ onClose }) {
   const [nonce, setNonce] = useState(0)
   const [probeSeq, setProbeSeq] = useState(0)
   const [boardState, setBoardState] = useState(null)
+  const [pendingTool, setPendingTool] = useState(null)
   const esRef = useRef(null)
   const [latestRelease, setLatestRelease] = useState(null)
 
@@ -517,7 +519,10 @@ export default function SelfHost({ onClose }) {
   const toggleRoot = useCallback(() => {
     setRootMini(c => { save(SK_ROOTNAV, c ? '' : '1'); return !c })
   }, [])
-  const goto = useCallback(key => { setSection(key); save(SK_SECTION, key) }, [])
+  const goto = useCallback(key => {
+    if (key !== 'monitoring') setPendingTool(null)
+    setSection(key); save(SK_SECTION, key)
+  }, [])
   const gotoLb = useCallback(key => { setLbPage(key); save(SK_LBPAGE, key) }, [])
 
   /* The board wants `id` on a machine row; the server calls it `installId`.
@@ -564,17 +569,23 @@ export default function SelfHost({ onClose }) {
     return row ? row.rank : null
   }, [profiles, meId])
 
-  /* Integration summary across all snapshots for the badge. */
+  /* Integration summary across all snapshots for the badge. Falls back to
+     the assistants array when the agent hasn't been upgraded yet. */
   const intSummary = useMemo(() => {
     const snaps = shaped?.latest || []
     let reading = 0, known = 0
     const seen = new Set()
+    const readingIds = new Set()
     for (const s of snaps) {
       const sum = s.metrics?.integrationSummary
       if (sum) { reading = Math.max(reading, sum.reading || 0); known = Math.max(known, sum.known || 0) }
-      for (const r of (s.metrics?.integrations || [])) seen.add(r.id)
+      const rows = s.metrics?.integrations || s.metrics?.assistants || []
+      for (const r of rows) {
+        seen.add(r.id)
+        if (r.state === 'reading' || r.hasData) readingIds.add(r.id)
+      }
     }
-    return { reading, known: known || seen.size }
+    return { reading: Math.max(reading, readingIds.size), known: known || seen.size }
   }, [shaped])
 
   /* ── routing: probing and offline don't get the admin shell ── */
@@ -693,6 +704,7 @@ export default function SelfHost({ onClose }) {
               onToggleTheme={toggleTheme}
               embedded
               onBoardState={setBoardState}
+              initialTool={pendingTool}
             />
           )}
           {section === 'leaderboard' && (
@@ -707,7 +719,12 @@ export default function SelfHost({ onClose }) {
             />
           )}
           {section === 'integrations' && (
-            <IntegrationsPage snapshots={shaped?.latest || []} />
+            <IntegrationsPage snapshots={shaped?.latest || []}
+              onNavigate={(toolId) => {
+                setPendingTool(toolId)
+                goto('monitoring')
+              }}
+            />
           )}
           {section === 'settings' && (
             <Settings