@startsimpli/ui 0.4.100 → 0.4.102

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.100",
+  "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', () => {

package/src/components/validation/__tests__/checks.test.ts

@@ -128,6 +128,30 @@ describe('no-hype', () => {
 describe('approved sources', () => {
   const approvedHosts = ['example.com', 'gov.uk'];
 
+  it('accepts a SUBDOMAIN of an approved domain', () => {
+    // Same organisation, own subdomain. Exact-host matching rejected
+    // documents.worldbank.org while worldbank.org was approved — on the live
+    // OGMC corpus that was the last thing blocking approval on 3 drafts.
+    const c = find(
+      runContentChecks(
+        { sources: 'https://docs.example.com/a https://a.b.gov.uk/c' },
+        { approvedHosts },
+      ),
+      'approved-sources',
+    );
+    expect(c?.status).toBe('pass');
+  });
+
+  it('does NOT accept a domain that merely ENDS WITH an approved one', () => {
+    // The dot is load-bearing: `notexample.com` must not pass as `example.com`.
+    const c = find(
+      runContentChecks({ sources: 'https://notexample.com/a' }, { approvedHosts }),
+      'approved-sources',
+    );
+    expect(c?.status).toBe('fail');
+    expect(c?.detail).toContain('notexample.com');
+  });
+
   it('is skipped entirely when approvedHosts is omitted', () => {
     expect(find(runContentChecks({ sources: 'https://example.com/a' }), 'approved-sources')).toBeUndefined();
   });

package/src/components/validation/checks.ts

@@ -287,7 +287,22 @@ export function runContentChecks(fields: ContentFields, config: ContentChecksCon
 
   // Approved sources — only when the app supplied an allow-list.
   if (approvedHosts !== undefined) {
-    const approved = new Set(approvedHosts.map((h) => h.toLowerCase().replace(/^www\./, '')));
+    const approved = approvedHosts.map((h) => h.toLowerCase().replace(/^www\./, ''));
+    /**
+     * A host is approved when it IS an approved domain or is a SUBDOMAIN of one.
+     *
+     * Exact equality alone rejected `documents.worldbank.org` while
+     * `worldbank.org` was approved, and `eservices.misa.gov.sa` while
+     * `misa.gov.sa` was — the same organisation publishing on its own
+     * subdomain. On the live OGMC corpus that was the last thing blocking
+     * approval on 3 drafts after the source list itself was fixed.
+     *
+     * The dot in `.${domain}` is load-bearing: without it `notworldbank.org`
+     * would match `worldbank.org`, which is exactly the attack a naive
+     * `endsWith` invites.
+     */
+    const isApproved = (host: string): boolean =>
+      approved.some((domain) => host === domain || host.endsWith(`.${domain}`));
     const urls = extractUrls(fields.sources);
     const hosts = urls.map(hostOf).filter(Boolean);
     if (hosts.length === 0) {
@@ -299,7 +314,7 @@ export function runContentChecks(fields: ContentFields, config: ContentChecksCon
         locations: [{ field: 'sources' }],
       });
     } else {
-      const bad = Array.from(new Set(hosts.filter((h) => !approved.has(h) || FORUM_SOCIAL.test(h))));
+      const bad = Array.from(new Set(hosts.filter((h) => !isApproved(h) || FORUM_SOCIAL.test(h))));
       // Highlight the offending URLs as they appear in the sources text — the
       // reviewer pastes URLs, not bare hosts, so matching on the host alone
       // would highlight nothing.