feat(dashboard): surface exclusive managed leases in Sessions view (#11389)

Merged into release/v3.8.51 via batch validation: exclusive-session-observability unit+UI suites green on the combined tree, static gates green. Nice additive observability layer over the #10362 lease backend — thanks @KaspaPulse!

src/app/(dashboard)/dashboard/usage/components/SessionsTab.tsx

@@ -2,19 +2,47 @@
 
 import { useTranslations } from "next-intl";
 
-import { useState, useEffect, useCallback } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  mergeDashboardSessions,
+  type DashboardSession,
+  type ExclusiveDashboardSession,
+  type RecentSessionForDashboard,
+} from "@/lib/sessionObservability";
 import { Card } from "@/shared/components";
 
+type SessionsResponse = {
+  sessions: RecentSessionForDashboard[];
+  exclusiveSessions: ExclusiveDashboardSession[];
+};
+
+const EMPTY_DATA: SessionsResponse = {
+  sessions: [],
+  exclusiveSessions: [],
+};
+
+function isLeaseBackedSession(session: DashboardSession): session is ExclusiveDashboardSession {
+  return "leaseBacked" in session && session.leaseBacked;
+}
+
 export default function SessionsTab() {
   const t = useTranslations("usage");
-  const [data, setData] = useState({ count: 0, sessions: [] });
+  const tCommon = useTranslations("common");
+  const [data, setData] = useState<SessionsResponse>(EMPTY_DATA);
   const [loading, setLoading] = useState(true);
 
   const loadSessions = useCallback(async () => {
     try {
       const res = await fetch("/api/sessions");
-      if (res.ok) setData(await res.json());
+      if (res.ok) {
+        const next = await res.json();
+        setData({
+          sessions: Array.isArray(next.sessions) ? next.sessions : [],
+          exclusiveSessions: Array.isArray(next.exclusiveSessions) ? next.exclusiveSessions : [],
+        });
+      }
     } catch {
+      // A failed background poll leaves the last successful Sessions snapshot visible.
     } finally {
       setLoading(false);
     }
@@ -26,7 +54,12 @@ export default function SessionsTab() {
     return () => clearInterval(interval);
   }, [loadSessions]);
 
-  const formatAge = (ms) => {
+  const displaySessions = useMemo(() => {
+    return mergeDashboardSessions(data.exclusiveSessions, data.sessions);
+  }, [data.exclusiveSessions, data.sessions]);
+
+  const formatAge = (ms: number | null) => {
+    if (ms == null) return t("notAvailableSymbol");
     if (ms < 60000) return t("durationSecondsShort", { value: Math.floor(ms / 1000) });
     if (ms < 3600000) return t("durationMinutesShort", { value: Math.floor(ms / 60000) });
     return t("durationHoursShort", { value: Math.floor(ms / 3600000) });
@@ -47,12 +80,17 @@ export default function SessionsTab() {
         <div className="flex items-center gap-2">
           <span className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-cyan-500/10 border border-cyan-500/20">
             <span className="w-2 h-2 rounded-full bg-cyan-500 animate-pulse" />
-            <span className="text-sm font-semibold tabular-nums text-cyan-400">{data.count}</span>
+            <span
+              className="text-sm font-semibold tabular-nums text-cyan-400"
+              data-testid="session-count"
+            >
+              {displaySessions.length}
+            </span>
           </span>
         </div>
       </div>
 
-      {data.sessions.length === 0 ? (
+      {displaySessions.length === 0 ? (
         <div className="text-center py-8 text-text-muted">
           <span
             className="material-symbols-outlined text-[40px] mb-2 block opacity-40"
@@ -83,31 +121,46 @@ export default function SessionsTab() {
               </tr>
             </thead>
             <tbody>
-              {data.sessions.map((s) => (
-                <tr
-                  key={s.sessionId}
-                  className="border-b border-border/10 hover:bg-surface/20 transition-colors"
-                >
-                  <td className="py-2.5 px-3">
-                    <span className="font-mono text-xs px-2 py-1 rounded bg-surface/40 text-text-muted">
-                      {s.sessionId.slice(0, 12)}…
-                    </span>
-                  </td>
-                  <td className="py-2.5 px-3 text-text-muted tabular-nums">{formatAge(s.ageMs)}</td>
-                  <td className="py-2.5 px-3 text-right">
-                    <span className="font-semibold tabular-nums">{s.requestCount}</span>
-                  </td>
-                  <td className="py-2.5 px-3">
-                    {s.connectionId ? (
-                      <span className="text-xs font-mono text-cyan-400">
-                        {s.connectionId.slice(0, 10)}
-                      </span>
-                    ) : (
-                      <span className="text-text-muted/40">{t("notAvailableSymbol")}</span>
-                    )}
-                  </td>
-                </tr>
-              ))}
+              {displaySessions.map((s) => {
+                const leaseBacked = isLeaseBackedSession(s);
+                return (
+                  <tr
+                    key={s.sessionId}
+                    className="border-b border-border/10 hover:bg-surface/20 transition-colors"
+                  >
+                    <td className="py-2.5 px-3">
+                      <div className="flex items-center gap-2">
+                        <span
+                          className="font-mono text-xs px-2 py-1 rounded bg-surface/40 text-text-muted"
+                          title={s.sessionId}
+                        >
+                          {s.sessionId.slice(0, 12)}…
+                        </span>
+                        {leaseBacked && s.active && (
+                          <span className="text-[10px] font-semibold tracking-wide px-2 py-0.5 rounded-full border text-green-400 border-green-500/30 bg-green-500/10">
+                            {tCommon("active")}
+                          </span>
+                        )}
+                      </div>
+                    </td>
+                    <td className="py-2.5 px-3 text-text-muted tabular-nums">
+                      {formatAge(s.ageMs)}
+                    </td>
+                    <td className="py-2.5 px-3 text-right">
+                      <span className="font-semibold tabular-nums">{s.requestCount}</span>
+                    </td>
+                    <td className="py-2.5 px-3">
+                      {s.connectionId ? (
+                        <span className="text-xs font-mono text-cyan-400" title={s.connectionId}>
+                          {(leaseBacked && s.connectionName) || s.connectionId.slice(0, 10)}
+                        </span>
+                      ) : (
+                        <span className="text-text-muted/40">{t("notAvailableSymbol")}</span>
+                      )}
+                    </td>
+                  </tr>
+                );
+              })}
             </tbody>
           </table>
         </div>

src/app/api/sessions/route.ts

@@ -5,13 +5,44 @@ import {
   getAllActiveSessionCountsByKey,
 } from "@omniroute/open-sse/services/sessionManager.ts";
 import { sanitizeErrorMessage } from "@omniroute/open-sse/utils/error";
+import { getExclusiveLeaseConnectionIds } from "@/lib/db/apiKeys";
+import { getExclusiveLeaseOccupancy } from "@/lib/db/exclusiveConnectionLeases";
+import { getProviderConnectionDisplayMetadata } from "@/lib/db/providers";
+import { getAccountDisplayName } from "@/lib/display/names";
+import { getPendingRequests } from "@/lib/usage/usageHistory";
+import { buildExclusiveDashboardSessions } from "@/lib/sessionObservability";
 
 export async function GET() {
   try {
     const sessions = getActiveSessions();
     const count = getActiveSessionCount();
     const byApiKey = getAllActiveSessionCountsByKey();
-    return NextResponse.json({ count, sessions, byApiKey });
+
+    // Reuse the hard-lease authority added by #10362. The API-key policy derives
+    // the managed candidate set; SQLite occupancy is the source of truth for
+    // which of those connections are actually leased right now.
+    const managedConnectionIds = Array.from(await getExclusiveLeaseConnectionIds());
+    const occupancy = getExclusiveLeaseOccupancy(managedConnectionIds);
+    const leasedConnectionIds = new Set(occupancy.keys());
+    const connectionNames = new Map(
+      getProviderConnectionDisplayMetadata([...leasedConnectionIds]).map((connection) => [
+        connection.id,
+        getAccountDisplayName(connection),
+      ])
+    );
+    const exclusiveSessions = buildExclusiveDashboardSessions(
+      leasedConnectionIds,
+      getPendingRequests().byAccount,
+      sessions,
+      connectionNames
+    );
+
+    return NextResponse.json({
+      count,
+      sessions,
+      byApiKey,
+      exclusiveSessions,
+    });
   } catch (error) {
     return NextResponse.json({ error: sanitizeErrorMessage(error) }, { status: 500 });
   }