diff --git a/backend/src/database/migrations/20260730095417_create_metric_data_points.ts b/backend/src/database/migrations/20260730095417_create_metric_data_points.ts
new file mode 100644
index 00000000..845fddeb
--- /dev/null
+++ b/backend/src/database/migrations/20260730095417_create_metric_data_points.ts
@@ -0,0 +1,18 @@
+import type { Knex } from "knex";
+
+export async function up(knex: Knex): Promise<void> {
+  await knex.schema.createTable("metric_data_points", (table) => {
+    table.uuid("id").primary().defaultTo(knex.raw("gen_random_uuid()"));
+    table.string("metric_key", 120).notNullable();
+    table.decimal("value", 20, 6).notNullable();
+    table.jsonb("tags").notNullable().defaultTo("{}");
+    table.timestamp("recorded_at", { useTz: true }).notNullable().defaultTo(knex.fn.now());
+    table.timestamp("created_at", { useTz: true }).notNullable().defaultTo(knex.fn.now());
+    table.index(["metric_key", "recorded_at"], "idx_metric_points_key_time");
+    table.index(["recorded_at"], "idx_metric_points_recorded_at");
+  });
+}
+
+export async function down(knex: Knex): Promise<void> {
+  await knex.schema.dropTableIfExists("metric_data_points");
+}
diff --git a/backend/src/database/migrations/038_metrics_aggregation_pipeline.ts b/backend/src/database/migrations/20260730095418_create_metric_rollups.ts
similarity index 53%
rename from backend/src/database/migrations/038_metrics_aggregation_pipeline.ts
rename to backend/src/database/migrations/20260730095418_create_metric_rollups.ts
index e9a169c7..4bb9d8c1 100644
--- a/backend/src/database/migrations/038_metrics_aggregation_pipeline.ts
+++ b/backend/src/database/migrations/20260730095418_create_metric_rollups.ts
@@ -1,17 +1,6 @@
 import type { Knex } from "knex";
 
 export async function up(knex: Knex): Promise<void> {
-  await knex.schema.createTable("metric_data_points", (table) => {
-    table.uuid("id").primary().defaultTo(knex.raw("gen_random_uuid()"));
-    table.string("metric_key", 120).notNullable();
-    table.decimal("value", 20, 6).notNullable();
-    table.jsonb("tags").notNullable().defaultTo("{}");
-    table.timestamp("recorded_at", { useTz: true }).notNullable().defaultTo(knex.fn.now());
-    table.timestamp("created_at", { useTz: true }).notNullable().defaultTo(knex.fn.now());
-    table.index(["metric_key", "recorded_at"], "idx_metric_points_key_time");
-    table.index(["recorded_at"], "idx_metric_points_recorded_at");
-  });
-
   await knex.schema.createTable("metric_rollups", (table) => {
     table.uuid("id").primary().defaultTo(knex.raw("gen_random_uuid()"));
     table.string("metric_key", 120).notNullable();
@@ -32,26 +21,8 @@ export async function up(knex: Knex): Promise<void> {
     table.index(["metric_key", "granularity", "window_start"], "idx_metric_rollups_query");
     table.index(["granularity", "window_start"], "idx_metric_rollups_granularity_time");
   });
-
-  await knex.schema.createTable("metric_retention_policies", (table) => {
-    table.string("granularity", 20).primary();
-    table.integer("retention_days").notNullable();
-    table.timestamp("updated_at", { useTz: true }).notNullable().defaultTo(knex.fn.now());
-  });
-
-  await knex("metric_retention_policies")
-    .insert([
-      { granularity: "raw", retention_days: 7 },
-      { granularity: "hourly", retention_days: 90 },
-      { granularity: "daily", retention_days: 365 },
-      { granularity: "weekly", retention_days: 1825 },
-    ])
-    .onConflict("granularity")
-    .ignore();
 }
 
 export async function down(knex: Knex): Promise<void> {
-  await knex.schema.dropTableIfExists("metric_retention_policies");
   await knex.schema.dropTableIfExists("metric_rollups");
-  await knex.schema.dropTableIfExists("metric_data_points");
 }
diff --git a/backend/src/database/migrations/20260730095419_create_metric_retention_policies.ts b/backend/src/database/migrations/20260730095419_create_metric_retention_policies.ts
new file mode 100644
index 00000000..a7a83445
--- /dev/null
+++ b/backend/src/database/migrations/20260730095419_create_metric_retention_policies.ts
@@ -0,0 +1,23 @@
+import type { Knex } from "knex";
+
+export async function up(knex: Knex): Promise<void> {
+  await knex.schema.createTable("metric_retention_policies", (table) => {
+    table.string("granularity", 20).primary();
+    table.integer("retention_days").notNullable();
+    table.timestamp("updated_at", { useTz: true }).notNullable().defaultTo(knex.fn.now());
+  });
+
+  await knex("metric_retention_policies")
+    .insert([
+      { granularity: "raw", retention_days: 7 },
+      { granularity: "hourly", retention_days: 90 },
+      { granularity: "daily", retention_days: 365 },
+      { granularity: "weekly", retention_days: 1825 },
+    ])
+    .onConflict("granularity")
+    .ignore();
+}
+
+export async function down(knex: Knex): Promise<void> {
+  await knex.schema.dropTableIfExists("metric_retention_policies");
+}
diff --git a/backend/tests/services/providerAllowlist.service.test.ts b/backend/tests/services/providerAllowlist.service.test.ts
new file mode 100644
index 00000000..78cc0f7b
--- /dev/null
+++ b/backend/tests/services/providerAllowlist.service.test.ts
@@ -0,0 +1,365 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+/**
+ * Unit tests for ProviderAllowlistService.
+ *
+ * These exercise the real allow/deny/normalise/upsert/delete logic against a
+ * small in-memory fake of the knex query builder, so the assertions cover the
+ * service's behaviour rather than a set of pre-canned mock return values. The
+ * database connection, audit service and logger are all replaced so the suite
+ * runs without any external dependencies.
+ */
+
+type Row = Record<string, unknown>;
+
+/**
+ * Minimal in-memory stand-in for the subset of the knex query builder that
+ * ProviderAllowlistService relies on. A single fake owns one `provider_allowlist`
+ * table (an array of rows) and returns a fresh builder for every `db(table)` call.
+ */
+function createFakeDb(seedRows: Row[] = []) {
+  const rows: Row[] = seedRows.map((r) => ({ ...r }));
+
+  function builder() {
+    let filter: Row | null = null;
+
+    const matched = (): Row[] => {
+      if (!filter) return rows;
+      const conditions = filter;
+      return rows.filter((row) =>
+        Object.entries(conditions).every(([key, value]) => row[key] === value)
+      );
+    };
+
+    const api = {
+      select() {
+        return api;
+      },
+      where(condition: Row) {
+        filter = { ...(filter ?? {}), ...condition };
+        return api;
+      },
+      orderBy(column: string, direction: "asc" | "desc" = "asc") {
+        const sorted = [...matched()].sort((a, b) => {
+          const av = a[column] as string;
+          const bv = b[column] as string;
+          if (av < bv) return direction === "asc" ? -1 : 1;
+          if (av > bv) return direction === "asc" ? 1 : -1;
+          return 0;
+        });
+        return Promise.resolve(sorted.map((row) => ({ ...row })));
+      },
+      first() {
+        const [row] = matched();
+        return Promise.resolve(row ? { ...row } : undefined);
+      },
+      insert(data: Row) {
+        const inserted: Row = { ...data };
+        rows.push(inserted);
+        return {
+          returning: () => Promise.resolve([{ ...inserted }]),
+        };
+      },
+      update(patch: Row) {
+        const affected = matched();
+        affected.forEach((row) => Object.assign(row, patch));
+        return {
+          returning: () => Promise.resolve(affected.map((row) => ({ ...row }))),
+        };
+      },
+      delete() {
+        const affected = matched();
+        affected.forEach((row) => {
+          const index = rows.indexOf(row);
+          if (index >= 0) rows.splice(index, 1);
+        });
+        return Promise.resolve(affected.length);
+      },
+    };
+
+    return api;
+  }
+
+  const db = () => builder();
+  return { db, rows };
+}
+
+const hoisted = vi.hoisted(() => ({
+  currentDb: null as null | ((table: string) => unknown),
+  auditLog: vi.fn(),
+  warn: vi.fn(),
+}));
+
+vi.mock("../../src/database/connection.js", () => ({
+  getDatabase: vi.fn(() => (table: string) => {
+    if (!hoisted.currentDb) {
+      throw new Error("fake database not configured for this test");
+    }
+    return hoisted.currentDb(table);
+  }),
+}));
+
+vi.mock("../../src/services/audit.service.js", () => ({
+  auditService: { log: hoisted.auditLog },
+}));
+
+vi.mock("../../src/utils/logger.js", () => ({
+  logger: {
+    warn: hoisted.warn,
+    info: vi.fn(),
+    error: vi.fn(),
+    debug: vi.fn(),
+  },
+}));
+
+import { ProviderAllowlistService } from "../../src/services/providerAllowlist.service.js";
+
+function makeRow(overrides: Row = {}): Row {
+  const now = new Date("2024-01-01T00:00:00.000Z");
+  return {
+    provider_key: "circle",
+    display_name: "Circle",
+    category: "issuer",
+    allowed: true,
+    reason: null,
+    created_by: "seed",
+    created_at: now,
+    updated_by: "seed",
+    updated_at: now,
+    ...overrides,
+  };
+}
+
+/** Point the service at a freshly seeded fake table. */
+function useDb(seedRows: Row[] = []) {
+  const fake = createFakeDb(seedRows);
+  hoisted.currentDb = fake.db;
+  return fake;
+}
+
+describe("ProviderAllowlistService", () => {
+  let service: ProviderAllowlistService;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    hoisted.currentDb = null;
+    service = new ProviderAllowlistService();
+  });
+
+  describe("isAllowed", () => {
+    it("allows any provider when the allowlist is empty (allow-by-default)", async () => {
+      useDb([]);
+      await expect(service.isAllowed("circle")).resolves.toBe(true);
+    });
+
+    it("returns false for a blank provider key without touching the database", async () => {
+      useDb([makeRow()]);
+      await expect(service.isAllowed("   ")).resolves.toBe(false);
+    });
+
+    it("allows a provider whose entry is marked allowed", async () => {
+      useDb([makeRow({ provider_key: "circle", allowed: true })]);
+      await expect(service.isAllowed("circle")).resolves.toBe(true);
+    });
+
+    it("denies a provider whose entry is marked not allowed", async () => {
+      useDb([makeRow({ provider_key: "circle", allowed: false })]);
+      await expect(service.isAllowed("circle")).resolves.toBe(false);
+    });
+
+    it("denies a provider that is missing while the allowlist is populated", async () => {
+      useDb([makeRow({ provider_key: "circle", allowed: true })]);
+      await expect(service.isAllowed("tether")).resolves.toBe(false);
+    });
+
+    it("normalises the provider key (trim + lowercase) before matching", async () => {
+      useDb([makeRow({ provider_key: "circle", allowed: true })]);
+      await expect(service.isAllowed("  CIRCLE  ")).resolves.toBe(true);
+    });
+
+    it("fails open and logs a warning when the database throws", async () => {
+      hoisted.currentDb = () => {
+        throw new Error("connection refused");
+      };
+      await expect(service.isAllowed("circle")).resolves.toBe(true);
+      expect(hoisted.warn).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("getEntry", () => {
+    it("returns a mapped entry when the provider exists", async () => {
+      useDb([
+        makeRow({
+          provider_key: "circle",
+          display_name: "Circle",
+          category: "issuer",
+          allowed: true,
+          reason: "trusted",
+        }),
+      ]);
+
+      const entry = await service.getEntry("Circle");
+
+      expect(entry).not.toBeNull();
+      expect(entry).toMatchObject({
+        providerKey: "circle",
+        displayName: "Circle",
+        category: "issuer",
+        allowed: true,
+        reason: "trusted",
+      });
+      expect(entry?.createdAt).toBeInstanceOf(Date);
+    });
+
+    it("returns null when the provider is not on the allowlist", async () => {
+      useDb([makeRow({ provider_key: "circle" })]);
+      await expect(service.getEntry("unknown")).resolves.toBeNull();
+    });
+  });
+
+  describe("listEntries", () => {
+    it("returns every entry ordered by provider key ascending", async () => {
+      useDb([
+        makeRow({ provider_key: "tether" }),
+        makeRow({ provider_key: "anchorage" }),
+        makeRow({ provider_key: "circle" }),
+      ]);
+
+      const entries = await service.listEntries();
+
+      expect(entries.map((e) => e.providerKey)).toEqual([
+        "anchorage",
+        "circle",
+        "tether",
+      ]);
+    });
+
+    it("returns an empty array when there are no entries", async () => {
+      useDb([]);
+      await expect(service.listEntries()).resolves.toEqual([]);
+    });
+  });
+
+  describe("upsertEntry", () => {
+    it("inserts a new entry with sensible defaults and writes an audit log", async () => {
+      const fake = useDb([]);
+
+      const result = await service.upsertEntry({
+        providerKey: "  NewCo  ",
+        allowed: true,
+        actorId: "admin-1",
+      });
+
+      expect(result).toMatchObject({
+        providerKey: "newco",
+        displayName: "newco",
+        category: "unknown",
+        allowed: true,
+        createdBy: "admin-1",
+        updatedBy: "admin-1",
+      });
+      expect(fake.rows).toHaveLength(1);
+
+      expect(hoisted.auditLog).toHaveBeenCalledTimes(1);
+      const auditArg = hoisted.auditLog.mock.calls[0][0];
+      expect(auditArg).toMatchObject({
+        action: "admin.provider_allowlist_changed",
+        actorId: "admin-1",
+        actorType: "api_key",
+        resourceType: "provider_allowlist",
+        resourceId: "newco",
+      });
+      expect(auditArg.before).toBeUndefined();
+      expect(auditArg.after).toMatchObject({ providerKey: "newco" });
+    });
+
+    it("updates an existing entry and records before/after in the audit log", async () => {
+      const fake = useDb([
+        makeRow({
+          provider_key: "circle",
+          display_name: "Circle",
+          allowed: true,
+          reason: "trusted",
+        }),
+      ]);
+
+      const result = await service.upsertEntry({
+        providerKey: "circle",
+        allowed: false,
+        reason: "compliance review",
+        actorId: "admin-2",
+        actorType: "user",
+      });
+
+      expect(result).toMatchObject({
+        providerKey: "circle",
+        allowed: false,
+        reason: "compliance review",
+        updatedBy: "admin-2",
+      });
+      // No new row created — the existing one was updated in place.
+      expect(fake.rows).toHaveLength(1);
+      expect(fake.rows[0].allowed).toBe(false);
+
+      expect(hoisted.auditLog).toHaveBeenCalledTimes(1);
+      const auditArg = hoisted.auditLog.mock.calls[0][0];
+      expect(auditArg.actorType).toBe("user");
+      expect(auditArg.before).toMatchObject({ providerKey: "circle", allowed: true });
+      expect(auditArg.after).toMatchObject({ providerKey: "circle", allowed: false });
+    });
+
+    it("preserves existing display name and category when they are not supplied", async () => {
+      useDb([
+        makeRow({
+          provider_key: "circle",
+          display_name: "Circle Internet Financial",
+          category: "issuer",
+        }),
+      ]);
+
+      const result = await service.upsertEntry({
+        providerKey: "circle",
+        allowed: true,
+        actorId: "admin-3",
+      });
+
+      expect(result.displayName).toBe("Circle Internet Financial");
+      expect(result.category).toBe("issuer");
+    });
+  });
+
+  describe("deleteEntry", () => {
+    it("deletes an existing entry, returns true and writes an audit log", async () => {
+      const fake = useDb([makeRow({ provider_key: "circle" })]);
+
+      const result = await service.deleteEntry({
+        providerKey: "Circle",
+        actorId: "admin-9",
+      });
+
+      expect(result).toBe(true);
+      expect(fake.rows).toHaveLength(0);
+
+      expect(hoisted.auditLog).toHaveBeenCalledTimes(1);
+      const auditArg = hoisted.auditLog.mock.calls[0][0];
+      expect(auditArg).toMatchObject({
+        action: "admin.provider_allowlist_changed",
+        resourceId: "circle",
+      });
+      expect(auditArg.before).toMatchObject({ providerKey: "circle" });
+      expect(auditArg.after).toBeNull();
+    });
+
+    it("returns false and does not audit when the entry does not exist", async () => {
+      useDb([makeRow({ provider_key: "circle" })]);
+
+      const result = await service.deleteEntry({
+        providerKey: "missing",
+        actorId: "admin-9",
+      });
+
+      expect(result).toBe(false);
+      expect(hoisted.auditLog).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/frontend/src/components/MetricsSidebar/MetricsSidebar.tsx b/frontend/src/components/MetricsSidebar/MetricsSidebar.tsx
index 9e78deec..795c2fb6 100644
--- a/frontend/src/components/MetricsSidebar/MetricsSidebar.tsx
+++ b/frontend/src/components/MetricsSidebar/MetricsSidebar.tsx
@@ -68,7 +68,7 @@ function useLiveMetricValues() {
 }
 
 export default function MetricsSidebar() {
-  const { pinned, isCollapsed, unpinMetric, reorderMetrics, toggleCollapse } =
+  const { pinned, isCollapsed, collapsedIds, unpinMetric, reorderMetrics, toggleCollapse, toggleWidgetCollapse } =
     useMetricsSidebarStore();
 
   const liveValues = useLiveMetricValues();
@@ -138,6 +138,8 @@ export default function MetricsSidebar() {
                   metric={metric}
                   liveValue={liveValues[metric.id]}
                   onUnpin={unpinMetric}
+                  collapsed={collapsedIds.includes(metric.id)}
+                  onToggleCollapse={toggleWidgetCollapse}
                 />
               ))}
             </SortableContext>
diff --git a/frontend/src/components/MetricsSidebar/PinnedMetricCard.tsx b/frontend/src/components/MetricsSidebar/PinnedMetricCard.tsx
index fab1e083..953fdcbb 100644
--- a/frontend/src/components/MetricsSidebar/PinnedMetricCard.tsx
+++ b/frontend/src/components/MetricsSidebar/PinnedMetricCard.tsx
@@ -12,6 +12,8 @@ interface Props {
   metric: PinnedMetric;
   liveValue?: MetricValue;
   onUnpin: (id: string) => void;
+  collapsed?: boolean;
+  onToggleCollapse?: (id: string) => void;
 }
 
 function trendArrow(trend?: "up" | "down" | "flat") {
@@ -20,7 +22,13 @@ function trendArrow(trend?: "up" | "down" | "flat") {
   return null;
 }
 
-export default function PinnedMetricCard({ metric, liveValue, onUnpin }: Props) {
+export default function PinnedMetricCard({
+  metric,
+  liveValue,
+  onUnpin,
+  collapsed = false,
+  onToggleCollapse,
+}: Props) {
   const {
     attributes,
     listeners,
@@ -68,18 +76,43 @@ export default function PinnedMetricCard({ metric, liveValue, onUnpin }: Props)
       {/* Content */}
       <div className="flex-1 min-w-0">
         <p className="text-xs text-stellar-text-secondary truncate">{metric.label}</p>
-        <div className="flex items-baseline gap-1 mt-0.5">
-          <p className="text-base font-semibold text-white truncate">
-            {displayVal}
-          </p>
-          {liveValue?.unit && (
-            <span className="text-xs text-stellar-text-muted">{liveValue.unit}</span>
-          )}
-          {trendArrow(liveValue?.trend)}
-        </div>
-        <p className="text-xs text-stellar-text-muted capitalize mt-0.5">{metric.category}</p>
+        {!collapsed && (
+          <>
+            <div className="flex items-baseline gap-1 mt-0.5">
+              <p className="text-base font-semibold text-white truncate">
+                {displayVal}
+              </p>
+              {liveValue?.unit && (
+                <span className="text-xs text-stellar-text-muted">{liveValue.unit}</span>
+              )}
+              {trendArrow(liveValue?.trend)}
+            </div>
+            <p className="text-xs text-stellar-text-muted capitalize mt-0.5">{metric.category}</p>
+          </>
+        )}
       </div>
 
+      {/* Collapse / expand */}
+      {onToggleCollapse && (
+        <button
+          type="button"
+          onClick={() => onToggleCollapse(metric.id)}
+          className="flex-shrink-0 text-stellar-text-muted hover:text-white transition-colors rounded p-0.5 focus:outline-none"
+          aria-label={`${collapsed ? "Expand" : "Collapse"} ${metric.label}`}
+          aria-expanded={!collapsed}
+          title={collapsed ? "Expand" : "Collapse"}
+        >
+          <svg
+            className={`w-3.5 h-3.5 transition-transform duration-200 ${collapsed ? "-rotate-90" : ""}`}
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+          </svg>
+        </button>
+      )}
+
       {/* Unpin */}
       <button
         type="button"
diff --git a/frontend/src/hooks/useFreshness.test.tsx b/frontend/src/hooks/useFreshness.test.tsx
new file mode 100644
index 00000000..edfab119
--- /dev/null
+++ b/frontend/src/hooks/useFreshness.test.tsx
@@ -0,0 +1,143 @@
+/**
+ * Tests for the composite `useFreshness` hook — following the MSW v2 +
+ * renderHook convention used by the other hook tests.
+ *
+ * The central guarantee is referential stability: the object returned by
+ * `useFreshness` must keep the same identity across re-renders unless the
+ * underlying query data actually changes. That is what prevents the infinite
+ * re-render loops described in the bug report.
+ */
+import { describe, it, expect } from "vitest";
+import { renderHook, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { http, HttpResponse } from "msw";
+import { server } from "../test/mocks/server";
+import { useFreshness } from "./useFreshness";
+import type { ReactNode } from "react";
+
+function makeClient() {
+  return new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+}
+
+function createWrapper(client?: QueryClient) {
+  const queryClient = client ?? makeClient();
+  return ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}
+
+const snapshotPayload = {
+  sources: [
+    {
+      key: "stellar-horizon",
+      label: "Stellar Horizon",
+      status: "fresh",
+      lastUpdated: new Date().toISOString(),
+      expectedIntervalMs: 30000,
+      trend: "stable",
+    },
+    {
+      key: "circle-usdc",
+      label: "Circle USDC",
+      status: "stale",
+      lastUpdated: new Date().toISOString(),
+      expectedIntervalMs: 60000,
+      trend: "degrading",
+    },
+  ],
+  staleSources: 1,
+  freshSources: 1,
+  timestamp: new Date().toISOString(),
+};
+
+const alertsPayload = {
+  alerts: [
+    {
+      source: "circle-usdc",
+      label: "Circle USDC",
+      severity: "critical",
+      message: "No update in 10 minutes",
+      since: new Date().toISOString(),
+    },
+  ],
+  timestamp: new Date().toISOString(),
+};
+
+function stubFreshnessEndpoints() {
+  server.use(
+    http.get("/api/v1/freshness", () => HttpResponse.json(snapshotPayload)),
+    http.get("/api/v1/freshness/alerts", () => HttpResponse.json(alertsPayload))
+  );
+}
+
+describe("useFreshness", () => {
+  it("combines the snapshot and alerts queries into one view", async () => {
+    stubFreshnessEndpoints();
+
+    const { result } = renderHook(() => useFreshness(), { wrapper: createWrapper() });
+
+    await waitFor(() => expect(result.current.sources).toHaveLength(2));
+
+    expect(result.current.staleSources).toBe(1);
+    expect(result.current.freshSources).toBe(1);
+    expect(result.current.alerts).toHaveLength(1);
+    expect(result.current.isLoading).toBe(false);
+  });
+
+  it("derives critical source keys from critical alerts only", async () => {
+    stubFreshnessEndpoints();
+
+    const { result } = renderHook(() => useFreshness(), { wrapper: createWrapper() });
+
+    await waitFor(() => expect(result.current.alerts).toHaveLength(1));
+
+    expect(result.current.criticalSourceKeys.has("circle-usdc")).toBe(true);
+    expect(result.current.criticalSourceKeys.has("stellar-horizon")).toBe(false);
+  });
+
+  it("returns a referentially stable object across re-renders (no infinite loop)", async () => {
+    stubFreshnessEndpoints();
+
+    const { result, rerender } = renderHook(() => useFreshness(), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => expect(result.current.sources).toHaveLength(2));
+
+    const first = result.current;
+
+    // Re-render without any change to the underlying query data.
+    rerender();
+    rerender();
+
+    // The whole result object, its derived collections and the refetch
+    // callback must keep the same identity — this is the anti-regression guard.
+    expect(result.current).toBe(first);
+    expect(result.current.sources).toBe(first.sources);
+    expect(result.current.criticalSourceKeys).toBe(first.criticalSourceKeys);
+    expect(result.current.refetch).toBe(first.refetch);
+  });
+
+  it("exposes stable empty collections while loading", () => {
+    server.use(
+      http.get("/api/v1/freshness", () => new Promise(() => {})),
+      http.get("/api/v1/freshness/alerts", () => new Promise(() => {}))
+    );
+
+    const { result, rerender } = renderHook(() => useFreshness(), {
+      wrapper: createWrapper(),
+    });
+
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.sources).toEqual([]);
+    expect(result.current.alerts).toEqual([]);
+
+    const firstSources = result.current.sources;
+    rerender();
+    // Empty collections keep their identity too, so consumers can safely place
+    // them in dependency arrays even before data arrives.
+    expect(result.current.sources).toBe(firstSources);
+  });
+});
diff --git a/frontend/src/hooks/useFreshness.ts b/frontend/src/hooks/useFreshness.ts
index 6d6a22f7..2608c457 100644
--- a/frontend/src/hooks/useFreshness.ts
+++ b/frontend/src/hooks/useFreshness.ts
@@ -1,9 +1,12 @@
+import { useCallback, useMemo } from "react";
 import { useQuery } from "@tanstack/react-query";
 import {
   getFreshnessSnapshot,
   getFreshnessSource,
   getFreshnessSourceTrend,
   getFreshnessAlerts,
+  type FreshnessSourceStatus,
+  type FreshnessAlert,
 } from "../services/api";
 
 type QueryRefreshOptions = {
@@ -11,6 +14,11 @@ type QueryRefreshOptions = {
   refetchOnWindowFocus?: boolean;
 };
 
+// Stable references for the empty states so the memoized composite result
+// keeps the same identity while data is still loading.
+const EMPTY_SOURCES: FreshnessSourceStatus[] = [];
+const EMPTY_ALERTS: FreshnessAlert[] = [];
+
 export function useFreshnessSnapshot(options?: QueryRefreshOptions) {
   return useQuery({
     queryKey: ["freshness"],
@@ -46,3 +54,64 @@ export function useFreshnessAlerts() {
     queryFn: getFreshnessAlerts,
   });
 }
+
+export interface UseFreshnessResult {
+  sources: FreshnessSourceStatus[];
+  staleSources: number;
+  freshSources: number;
+  alerts: FreshnessAlert[];
+  criticalSourceKeys: Set<string>;
+  isLoading: boolean;
+  refetch: () => Promise<void>;
+}
+
+/**
+ * Composite freshness hook that combines the snapshot and alerts queries into a
+ * single, referentially-stable view for consumer components.
+ *
+ * Every derived value is memoized and the `refetch` callback is stabilized with
+ * `useCallback`, so the returned object keeps the same identity across renders
+ * unless the underlying query data actually changes. This prevents the infinite
+ * re-render loops that occur when a consumer places the hook's result in a
+ * `useEffect`/`useMemo` dependency array or forwards it into another hook.
+ */
+export function useFreshness(options?: QueryRefreshOptions): UseFreshnessResult {
+  const snapshot = useFreshnessSnapshot(options);
+  const alertsQuery = useFreshnessAlerts();
+
+  const snapshotRefetch = snapshot.refetch;
+  const alertsRefetch = alertsQuery.refetch;
+
+  const refetch = useCallback(async () => {
+    await Promise.all([snapshotRefetch(), alertsRefetch()]);
+  }, [snapshotRefetch, alertsRefetch]);
+
+  const sources = snapshot.data?.sources ?? EMPTY_SOURCES;
+  const alerts = alertsQuery.data?.alerts ?? EMPTY_ALERTS;
+  const staleSources = snapshot.data?.staleSources ?? 0;
+  const freshSources = snapshot.data?.freshSources ?? 0;
+  const isLoading = snapshot.isLoading;
+
+  const criticalSourceKeys = useMemo(() => {
+    const keys = new Set<string>();
+    for (const alert of alerts) {
+      if (alert.severity === "critical") {
+        keys.add(alert.source);
+      }
+    }
+    return keys;
+  }, [alerts]);
+
+  return useMemo(
+    () => ({
+      sources,
+      staleSources,
+      freshSources,
+      alerts,
+      criticalSourceKeys,
+      isLoading,
+      refetch,
+    }),
+    [sources, staleSources, freshSources, alerts, criticalSourceKeys, isLoading, refetch]
+  );
+}
diff --git a/frontend/src/pages/FreshnessMonitoring.test.tsx b/frontend/src/pages/FreshnessMonitoring.test.tsx
index 41052db2..d77c7157 100644
--- a/frontend/src/pages/FreshnessMonitoring.test.tsx
+++ b/frontend/src/pages/FreshnessMonitoring.test.tsx
@@ -5,47 +5,40 @@ import { MemoryRouter } from "react-router-dom";
 import FreshnessMonitoring from "./FreshnessMonitoring";
 
 vi.mock("../hooks/useFreshness", () => ({
-  useFreshnessSnapshot: () => ({
-    data: {
-      sources: [
-        {
-          key: "stellar-horizon",
-          label: "Stellar Horizon",
-          status: "fresh",
-          lastUpdated: new Date(Date.now() - 5000).toISOString(),
-          expectedIntervalMs: 30000,
-          trend: "stable",
-        },
-        {
-          key: "circle-usdc",
-          label: "Circle USDC",
-          status: "stale",
-          lastUpdated: new Date(Date.now() - 600000).toISOString(),
-          expectedIntervalMs: 60000,
-          trend: "degrading",
-        },
-      ],
-      staleSources: 1,
-      freshSources: 1,
-      timestamp: new Date().toISOString(),
-    },
+  useFreshness: () => ({
+    sources: [
+      {
+        key: "stellar-horizon",
+        label: "Stellar Horizon",
+        status: "fresh",
+        lastUpdated: new Date(Date.now() - 5000).toISOString(),
+        expectedIntervalMs: 30000,
+        trend: "stable",
+      },
+      {
+        key: "circle-usdc",
+        label: "Circle USDC",
+        status: "stale",
+        lastUpdated: new Date(Date.now() - 600000).toISOString(),
+        expectedIntervalMs: 60000,
+        trend: "degrading",
+      },
+    ],
+    staleSources: 1,
+    freshSources: 1,
+    alerts: [
+      {
+        source: "circle-usdc",
+        label: "Circle USDC",
+        severity: "warning",
+        message: "No update in 10 minutes",
+        since: new Date().toISOString(),
+      },
+    ],
+    criticalSourceKeys: new Set<string>(),
     isLoading: false,
     refetch: vi.fn(),
   }),
-  useFreshnessAlerts: () => ({
-    data: {
-      alerts: [
-        {
-          source: "circle-usdc",
-          label: "Circle USDC",
-          severity: "warning",
-          message: "No update in 10 minutes",
-          since: new Date().toISOString(),
-        },
-      ],
-      timestamp: new Date().toISOString(),
-    },
-  }),
 }));
 
 vi.mock("../hooks/useRefreshControls", () => ({
diff --git a/frontend/src/pages/FreshnessMonitoring.tsx b/frontend/src/pages/FreshnessMonitoring.tsx
index f587a0eb..1cadea7d 100644
--- a/frontend/src/pages/FreshnessMonitoring.tsx
+++ b/frontend/src/pages/FreshnessMonitoring.tsx
@@ -1,6 +1,6 @@
 import { useMemo, useState } from "react";
-import { useRefreshControls } from "../hooks/useRefreshControls";
-import { useFreshnessSnapshot, useFreshnessAlerts } from "../hooks/useFreshness";
+import { useRefreshControls, type RefreshTarget } from "../hooks/useRefreshControls";
+import { useFreshness } from "../hooks/useFreshness";
 import RefreshControls from "../components/RefreshControls";
 import { SkeletonCard } from "../components/Skeleton";
 
@@ -49,34 +49,31 @@ function formatAge(lastUpdated: string | null): string {
 export default function FreshnessMonitoring() {
   const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
 
+  // Memoized so useRefreshControls receives a stable array identity across
+  // renders instead of a fresh literal each time.
+  const refreshTargets = useMemo<RefreshTarget[]>(
+    () => [{ id: "freshness", label: "Freshness data", queryKey: ["freshness"] }],
+    []
+  );
+
   const refreshControls = useRefreshControls({
     viewId: "freshness",
-    targets: [{ id: "freshness", label: "Freshness data", queryKey: ["freshness"] }],
+    targets: refreshTargets,
     defaultIntervalMs: 30_000,
   });
 
-  const { data, isLoading, refetch } = useFreshnessSnapshot({
-    refetchInterval: refreshControls.preferences.autoRefreshEnabled
-      ? refreshControls.preferences.refreshIntervalMs
-      : false,
-    refetchOnWindowFocus: refreshControls.preferences.refreshOnFocus,
-  });
-
-  const { data: alertsData } = useFreshnessAlerts();
-
-  const sources = data?.sources ?? [];
-  const staleCount = data?.staleSources ?? 0;
-  const freshCount = data?.freshSources ?? 0;
-
-  const criticalSourceKeys = useMemo(() => {
-    const keys = new Set<string>();
-    alertsData?.alerts.forEach((alert) => {
-      if (alert.severity === "critical") {
-        keys.add(alert.source);
-      }
+  const { sources, staleSources: staleCount, freshSources: freshCount, alerts, criticalSourceKeys, isLoading, refetch } =
+    useFreshness({
+      refetchInterval: refreshControls.preferences.autoRefreshEnabled
+        ? refreshControls.preferences.refreshIntervalMs
+        : false,
+      refetchOnWindowFocus: refreshControls.preferences.refreshOnFocus,
     });
-    return keys;
-  }, [alertsData]);
+
+  const controlTargets = useMemo<RefreshTarget[]>(
+    () => [{ id: "freshness", label: "Freshness data", refetch }],
+    [refetch]
+  );
 
   const filteredSources = useMemo(() => {
     if (statusFilter === "all") return sources;
@@ -112,7 +109,7 @@ export default function FreshnessMonitoring() {
         onRefreshIntervalChange={refreshControls.setRefreshIntervalMs}
         refreshOnFocus={refreshControls.preferences.refreshOnFocus}
         onRefreshOnFocusChange={refreshControls.setRefreshOnFocus}
-        targets={[{ id: "freshness", label: "Freshness data", refetch }]}
+        targets={controlTargets}
         selectedTargetIds={refreshControls.preferences.selectedTargetIds}
         onSelectedTargetIdsChange={refreshControls.setSelectedTargetIds}
         onRefresh={refreshControls.refreshNow}
@@ -140,13 +137,13 @@ export default function FreshnessMonitoring() {
         </div>
       )}
 
-      {alertsData && alertsData.alerts.length > 0 && (
+      {alerts.length > 0 && (
         <div className="rounded-lg border border-amber-800/40 bg-amber-900/10 p-4">
           <h2 className="text-sm font-semibold text-amber-400 mb-2">
-            Freshness Alerts ({alertsData.alerts.length})
+            Freshness Alerts ({alerts.length})
           </h2>
           <ul className="space-y-1">
-            {alertsData.alerts.map((alert, i) => (
+            {alerts.map((alert, i) => (
               <li key={i} className="text-sm text-stellar-text-secondary">
                 <span className="font-medium text-amber-300">[{alert.severity.toUpperCase()}]</span>{" "}
                 {alert.label}: {alert.message}
diff --git a/frontend/src/stores/metricsSidebarStore.test.ts b/frontend/src/stores/metricsSidebarStore.test.ts
new file mode 100644
index 00000000..fcbaab17
--- /dev/null
+++ b/frontend/src/stores/metricsSidebarStore.test.ts
@@ -0,0 +1,159 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { useMetricsSidebarStore, type PinnedMetric } from "./metricsSidebarStore";
+
+function resetStoreState() {
+  const initialState = useMetricsSidebarStore.getInitialState();
+  useMetricsSidebarStore.setState(initialState, true);
+  localStorage.clear();
+}
+
+const sampleMetric: Omit<PinnedMetric, "order"> = {
+  id: "net-tvl-total",
+  label: "Total TVL",
+  category: "network",
+  metricKey: "totalTvl",
+};
+
+describe("metricsSidebarStore", () => {
+  beforeEach(() => {
+    resetStoreState();
+  });
+
+  it("initializes with default state", () => {
+    const state = useMetricsSidebarStore.getState();
+
+    expect(state.pinned).toEqual([]);
+    expect(state.isOpen).toBe(false);
+    expect(state.isCollapsed).toBe(false);
+    expect(state.collapsedIds).toEqual([]);
+  });
+
+  describe("pinMetric", () => {
+    it("pins a metric with an assigned order", () => {
+      useMetricsSidebarStore.getState().pinMetric(sampleMetric);
+
+      const { pinned } = useMetricsSidebarStore.getState();
+      expect(pinned).toHaveLength(1);
+      expect(pinned[0]).toEqual({ ...sampleMetric, order: 0 });
+    });
+
+    it("assigns incrementing order values", () => {
+      const store = useMetricsSidebarStore.getState();
+      store.pinMetric(sampleMetric);
+      store.pinMetric({ id: "net-bridges-total", label: "Total Bridges", category: "network", metricKey: "bridgeCount" });
+
+      const { pinned } = useMetricsSidebarStore.getState();
+      expect(pinned.map((p) => p.order)).toEqual([0, 1]);
+    });
+
+    it("does not pin a metric that is already pinned", () => {
+      const store = useMetricsSidebarStore.getState();
+      store.pinMetric(sampleMetric);
+      store.pinMetric(sampleMetric);
+
+      expect(useMetricsSidebarStore.getState().pinned).toHaveLength(1);
+    });
+  });
+
+  describe("unpinMetric", () => {
+    it("removes a pinned metric and re-indexes order", () => {
+      const store = useMetricsSidebarStore.getState();
+      store.pinMetric({ id: "a", label: "A", category: "network", metricKey: "a" });
+      store.pinMetric({ id: "b", label: "B", category: "network", metricKey: "b" });
+      store.pinMetric({ id: "c", label: "C", category: "network", metricKey: "c" });
+
+      useMetricsSidebarStore.getState().unpinMetric("b");
+
+      const { pinned } = useMetricsSidebarStore.getState();
+      expect(pinned.map((p) => p.id)).toEqual(["a", "c"]);
+      expect(pinned.map((p) => p.order)).toEqual([0, 1]);
+    });
+
+    it("clears any collapsed state for the removed metric", () => {
+      const store = useMetricsSidebarStore.getState();
+      store.pinMetric(sampleMetric);
+      store.toggleWidgetCollapse(sampleMetric.id);
+      expect(useMetricsSidebarStore.getState().collapsedIds).toContain(sampleMetric.id);
+
+      useMetricsSidebarStore.getState().unpinMetric(sampleMetric.id);
+
+      expect(useMetricsSidebarStore.getState().collapsedIds).not.toContain(sampleMetric.id);
+    });
+  });
+
+  describe("reorderMetrics", () => {
+    it("reorders pinned metrics by the provided id list", () => {
+      const store = useMetricsSidebarStore.getState();
+      store.pinMetric({ id: "a", label: "A", category: "network", metricKey: "a" });
+      store.pinMetric({ id: "b", label: "B", category: "network", metricKey: "b" });
+      store.pinMetric({ id: "c", label: "C", category: "network", metricKey: "c" });
+
+      useMetricsSidebarStore.getState().reorderMetrics(["c", "a", "b"]);
+
+      const { pinned } = useMetricsSidebarStore.getState();
+      expect(pinned.map((p) => p.id)).toEqual(["c", "a", "b"]);
+      expect(pinned.map((p) => p.order)).toEqual([0, 1, 2]);
+    });
+
+    it("ignores ids that are not currently pinned", () => {
+      const store = useMetricsSidebarStore.getState();
+      store.pinMetric({ id: "a", label: "A", category: "network", metricKey: "a" });
+
+      useMetricsSidebarStore.getState().reorderMetrics(["a", "missing"]);
+
+      expect(useMetricsSidebarStore.getState().pinned.map((p) => p.id)).toEqual(["a"]);
+    });
+  });
+
+  describe("open / collapse actions", () => {
+    it("toggles the open state", () => {
+      useMetricsSidebarStore.getState().toggleOpen();
+      expect(useMetricsSidebarStore.getState().isOpen).toBe(true);
+
+      useMetricsSidebarStore.getState().toggleOpen();
+      expect(useMetricsSidebarStore.getState().isOpen).toBe(false);
+    });
+
+    it("sets the open state explicitly", () => {
+      useMetricsSidebarStore.getState().setOpen(true);
+      expect(useMetricsSidebarStore.getState().isOpen).toBe(true);
+
+      useMetricsSidebarStore.getState().setOpen(false);
+      expect(useMetricsSidebarStore.getState().isOpen).toBe(false);
+    });
+
+    it("toggles the whole-sidebar collapsed state", () => {
+      useMetricsSidebarStore.getState().toggleCollapse();
+      expect(useMetricsSidebarStore.getState().isCollapsed).toBe(true);
+
+      useMetricsSidebarStore.getState().toggleCollapse();
+      expect(useMetricsSidebarStore.getState().isCollapsed).toBe(false);
+    });
+  });
+
+  describe("toggleWidgetCollapse", () => {
+    it("collapses a widget by adding its id", () => {
+      useMetricsSidebarStore.getState().toggleWidgetCollapse("net-tvl-total");
+
+      expect(useMetricsSidebarStore.getState().collapsedIds).toEqual(["net-tvl-total"]);
+    });
+
+    it("expands a collapsed widget by removing its id", () => {
+      const store = useMetricsSidebarStore.getState();
+      store.toggleWidgetCollapse("net-tvl-total");
+      store.toggleWidgetCollapse("net-tvl-total");
+
+      expect(useMetricsSidebarStore.getState().collapsedIds).toEqual([]);
+    });
+
+    it("tracks multiple collapsed widgets independently", () => {
+      const store = useMetricsSidebarStore.getState();
+      store.toggleWidgetCollapse("a");
+      store.toggleWidgetCollapse("b");
+      expect(useMetricsSidebarStore.getState().collapsedIds).toEqual(["a", "b"]);
+
+      useMetricsSidebarStore.getState().toggleWidgetCollapse("a");
+      expect(useMetricsSidebarStore.getState().collapsedIds).toEqual(["b"]);
+    });
+  });
+});
diff --git a/frontend/src/stores/metricsSidebarStore.ts b/frontend/src/stores/metricsSidebarStore.ts
index ad7e2580..03e44c42 100644
--- a/frontend/src/stores/metricsSidebarStore.ts
+++ b/frontend/src/stores/metricsSidebarStore.ts
@@ -14,11 +14,13 @@ interface MetricsSidebarState {
   pinned: PinnedMetric[];
   isOpen: boolean;
   isCollapsed: boolean;
+  collapsedIds: string[];
   pinMetric: (metric: Omit<PinnedMetric, "order">) => void;
   unpinMetric: (id: string) => void;
   reorderMetrics: (orderedIds: string[]) => void;
   toggleOpen: () => void;
   toggleCollapse: () => void;
+  toggleWidgetCollapse: (id: string) => void;
   setOpen: (open: boolean) => void;
 }
 
@@ -28,6 +30,7 @@ export const useMetricsSidebarStore = create<MetricsSidebarState>()(
       pinned: [],
       isOpen: false,
       isCollapsed: false,
+      collapsedIds: [],
 
       pinMetric(metric) {
         set((s) => {
@@ -43,6 +46,7 @@ export const useMetricsSidebarStore = create<MetricsSidebarState>()(
           pinned: s.pinned
             .filter((p) => p.id !== id)
             .map((p, i) => ({ ...p, order: i })),
+          collapsedIds: s.collapsedIds.filter((c) => c !== id),
         }));
       },
 
@@ -67,6 +71,14 @@ export const useMetricsSidebarStore = create<MetricsSidebarState>()(
         set((s) => ({ isCollapsed: !s.isCollapsed }));
       },
 
+      toggleWidgetCollapse(id) {
+        set((s) => ({
+          collapsedIds: s.collapsedIds.includes(id)
+            ? s.collapsedIds.filter((c) => c !== id)
+            : [...s.collapsedIds, id],
+        }));
+      },
+
       setOpen(open) {
         set({ isOpen: open });
       },