@startsimpli/ui 0.4.101 → 0.4.102

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.101",
+  "version": "0.4.102",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -44,9 +44,9 @@
     "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@startsimpli/api": "^0.5.56",
     "@startsimpli/auth": "^0.4.35",
-    "@startsimpli/i18n": "^0.1.3"
+    "@startsimpli/i18n": "^0.1.3",
+    "@startsimpli/api": "^0.5.56"
   },
   "peerDependenciesMeta": {
     "@startsimpli/api": {
@@ -120,8 +120,8 @@
     "tailwindcss": "^3.4.19",
     "tsup": "^8.5.1",
     "typescript": "^6.0.3",
-    "@startsimpli/i18n": "0.1.3",
-    "@startsimpli/realtime": "0.0.2"
+    "@startsimpli/realtime": "0.0.2",
+    "@startsimpli/i18n": "0.1.3"
   },
   "keywords": [
     "ui",

package/src/components/health/SourceFreshness.tsx

@@ -20,6 +20,18 @@ export interface SourceFreshnessProps {
   staleAfterHours?: number
   /** Compare against this instant (injectable for tests); defaults to Date.now(). */
   now?: number
+  /**
+   * Cap how many rows are LISTED. The roll-up (tone, "N stale") still counts every
+   * source, so capping hides rows, never facts.
+   *
+   * This card is the one health block that used to have no cap, and it got handed
+   * the one unbounded list: a tenant with 55 declared sources rendered 55 rows,
+   * and in a `DashboardGrid` (CSS grid, `align-items: stretch` by default) that one
+   * very tall card silently set the row height for every card beside it — the
+   * short neighbour then padded the difference with blank space. Capping the list
+   * is the cheap half of that fix; a grid that does not stretch is the other half.
+   */
+  limit?: number
   emptyMessage?: string
   className?: string
 }
@@ -46,6 +58,7 @@ export function SourceFreshness({
   sources,
   staleAfterHours = 48,
   now,
+  limit,
   emptyMessage = 'No sources configured.',
   className,
 }: SourceFreshnessProps) {
@@ -54,6 +67,10 @@ export function SourceFreshness({
   const staleCount = rows.filter((r) => r.resolved === 'warn' || r.resolved === 'critical').length
   const status = worstStatus(rows.map((r) => r.resolved))
   const statusLabel = sources.length === 0 ? undefined : staleCount > 0 ? `${staleCount} stale` : 'All fresh'
+  // Cap the LIST only — staleCount/status above are computed over every source, so
+  // a stale feed below the cut still pulls the card's tone and its badge count.
+  const listed = limit ? rows.slice(0, limit) : rows
+  const hidden = rows.length - listed.length
 
   return (
     <HealthCard
@@ -66,7 +83,7 @@ export function SourceFreshness({
       className={className}
     >
       <ul className="space-y-2" aria-label={`${title} sources`}>
-        {rows.map((row) => (
+        {listed.map((row) => (
           <li key={row.name} className="flex items-center justify-between gap-3 text-sm">
             <span className="flex items-center gap-2 min-w-0">
               <HealthDot status={row.resolved} />
@@ -83,6 +100,11 @@ export function SourceFreshness({
           </li>
         ))}
       </ul>
+      {hidden > 0 && (
+        <p className="text-xs text-gray-500">
+          +{hidden} more source{hidden === 1 ? '' : 's'} not shown
+        </p>
+      )}
     </HealthCard>
   )
 }

package/src/components/health/__tests__/health.test.tsx

@@ -96,6 +96,68 @@ describe('SourceFreshness', () => {
     expect(screen.getByText('2 stale')).toBeInTheDocument()
     expect(screen.getByText('never')).toBeInTheDocument()
   })
+  it('caps the listed rows at `limit` and says how many are hidden', () => {
+    render(
+      <SourceFreshness
+        now={NOW}
+        limit={2}
+        sources={[
+          { name: 'RSS A', lastUpdated: hoursAgo(1) },
+          { name: 'RSS B', lastUpdated: hoursAgo(2) },
+          { name: 'RSS C', lastUpdated: hoursAgo(3) },
+          { name: 'RSS D', lastUpdated: hoursAgo(4) },
+        ]}
+      />,
+    )
+    expect(screen.getByText('RSS A')).toBeInTheDocument()
+    expect(screen.getByText('RSS B')).toBeInTheDocument()
+    expect(screen.queryByText('RSS C')).not.toBeInTheDocument()
+    expect(screen.getByText('+2 more sources not shown')).toBeInTheDocument()
+  })
+  it('rolls up tone and the stale count over EVERY source, not just the listed ones', () => {
+    render(
+      <SourceFreshness
+        now={NOW}
+        staleAfterHours={48}
+        limit={1}
+        sources={[
+          { name: 'RSS A', lastUpdated: hoursAgo(1) },
+          { name: 'RSS B', lastUpdated: hoursAgo(200) },
+          { name: 'RSS C', lastUpdated: null },
+        ]}
+      />,
+    )
+    // B and C are below the cut; hiding a row must never hide the fact.
+    expect(screen.getByText('2 stale')).toBeInTheDocument()
+    expect(screen.queryByText('RSS B')).not.toBeInTheDocument()
+    expect(screen.getByText('+2 more sources not shown')).toBeInTheDocument()
+  })
+  it('lists everything, with no hidden-count line, when no limit is given', () => {
+    render(
+      <SourceFreshness
+        now={NOW}
+        sources={[
+          { name: 'RSS A', lastUpdated: hoursAgo(1) },
+          { name: 'RSS B', lastUpdated: hoursAgo(2) },
+        ]}
+      />,
+    )
+    expect(screen.getByText('RSS B')).toBeInTheDocument()
+    expect(screen.queryByText(/more sources? not shown/)).not.toBeInTheDocument()
+  })
+  it('says "source" (singular) when exactly one row is hidden', () => {
+    render(
+      <SourceFreshness
+        now={NOW}
+        limit={1}
+        sources={[
+          { name: 'RSS A', lastUpdated: hoursAgo(1) },
+          { name: 'RSS B', lastUpdated: hoursAgo(2) },
+        ]}
+      />,
+    )
+    expect(screen.getByText('+1 more source not shown')).toBeInTheDocument()
+  })
 })
 
 describe('DeliveryHealth', () => {