fix(mobile): show the not-yet-synced status once on the Security Agent dashboard (#9378)

* fix(mobile): state the not-yet-synced status once on the Security Agent dashboard

A scope that has never synced repeated "Not yet synced" in every stat tile
and again in the Act first card, while the filter row under the repository
header already stated it. The screen said the same thing six times and the
repeated line pushed the tile labels apart.

The tiles now keep only their dash and their label: a detail line describes a
measurement, and there is none before the first sync. The Act first card keeps
its section and shows the same muted dash as every other unmeasured count,
instead of the status line and its clock icon.

* fix(mobile): keep the security dashboard tiles from moving on load

The sync-status read decides whether a stat tile carries a detail line, so
the tiles could be drawn in their measured shape and then shrink by a line
when the read resolved with "never synced", pushing everything below them.

The tiles now wait for that read, the same way they already wait for the
stats read, and the sections follow it too because the Act first card's body
depends on the same fact.

* fix(mobile): explain the empty Act first card on a never-synced scope

The card lost its body when the repeated status line came out of the stat
tiles, so a scope that has never synced showed a lone dash under its own
section title and read as a broken card.

The card now says what it will hold once the first sync finishes, which keeps
the sync status stated once under the repository filter and leaves the tiles
with their label and dash. The sentence is a new catalog entry, so en.json
gains it and all 86 other catalogs carry its translation.

The mounted test asserts the new body, that the status line does not return to
the card, and that the card still opens nothing.

* fix(mobile): describe the card's body in its test header

The mounted test's file header still said the priority card carries the
not-yet-synced line, which the card no longer does: it explains what it will
hold after the first sync. The comment now matches the assertions below it.

Author: iscekic

apps/mobile/src/components/security-agent/dashboard-screen.mounted.test.tsx

@@ -62,6 +62,7 @@ const dashboardStats = vi.hoisted(() => ({
 const lastSync = vi.hoisted(() => ({
   data: undefined as { lastSyncTime?: string | null } | undefined,
   isError: false,
+  isPending: false,
   refetch: vi.fn(),
 }));
 const repositories = vi.hoisted(() => ({
@@ -1041,13 +1042,10 @@ describe('buildLocalizedMetrics', () => {
     const metrics = buildLocalizedMetrics(data, true, true);
 
     // Zero counts and the line that read the zeros as a clean report both
-    // became a dash and the screen's own not-yet-synced state.
+    // became a dash; the filter row above the tiles states the not-yet-synced
+    // status once, so a tile keeps no detail line to repeat it.
     expect(metrics.map(metric => metric.value)).toEqual(['—', '—', '—']);
-    expect(metrics.map(metric => metric.detail)).toEqual([
-      i18n.t('securityAgent.dashboard.notYetSynced'),
-      i18n.t('securityAgent.dashboard.notYetSynced'),
-      i18n.t('securityAgent.dashboard.notYetSynced'),
-    ]);
+    expect(metrics.map(metric => metric.detail)).toEqual(['', '', '']);
     expect(metrics.every(metric => metric.tone === 'neutral')).toBe(true);
   });
 
@@ -1326,6 +1324,12 @@ describe('DashboardScreen pending stats', () => {
     },
   };
 
+  // Each case decides for itself whether the sync-status read has settled.
+  beforeEach(() => {
+    lastSync.isPending = false;
+    lastSync.data = undefined;
+  });
+
   it('paints the metric skeleton while a paused stats read is still pending', () => {
     // A NetInfo-paused read is pending without fetching, so `isLoading` is
     // false. The body must still show its loading state instead of an empty
@@ -1360,4 +1364,36 @@ describe('DashboardScreen pending stats', () => {
       i18n.t('securityAgent.dashboardMetrics.openFindings')
     );
   });
+
+  // `neverSynced` decides whether a tile carries a detail line, so a tile drawn
+  // before that read settles would shrink by a line the moment it resolves and
+  // move everything below it. The tiles wait for the read instead.
+  it('keeps the tiles in the skeleton state while the sync-status read is pending', () => {
+    dashboardStats.isPending = false;
+    dashboardStats.data = resolvedData;
+    lastSync.isPending = true;
+    lastSync.data = undefined;
+    sharedMetrics.build.mockReturnValue([dashboardMetric('openFindings')]);
+
+    const root = renderScreen();
+
+    expect(
+      root.root.findAll(n => typeof n.type === 'string' && (n.type as string) === 'Skeleton')
+    ).toHaveLength(4);
+    expect(renderedTexts(root.root)).not.toContain(
+      i18n.t('securityAgent.dashboardMetrics.openFindings')
+    );
+  });
+
+  it('renders the sections only after the sync-status read settles', () => {
+    dashboardStats.isPending = false;
+    dashboardStats.data = resolvedData;
+    lastSync.isPending = true;
+    lastSync.data = undefined;
+    sectionsProps.props = [];
+
+    renderScreen();
+
+    expect(sectionsProps.props).toHaveLength(0);
+  });
 });

apps/mobile/src/components/security-agent/dashboard-screen.tsx

@@ -186,15 +186,16 @@ export function buildLocalizedMetrics(
   // Before the first sync nothing has been measured, so every tile read a zero
   // count and, under it, a line that described the zeros as a clean report
   // ("All open findings tracked", "No findings have an SLA deadline yet").
-  // A dash in the numeric slot and the screen's own not-yet-synced line state
-  // the measurement is simply absent.
+  // The filter row above already states that nothing has synced, so a dash in
+  // the numeric slot carries the measurement's absence and the tile keeps no
+  // detail line to repeat the status.
   if (!neverSynced) {
     return localized;
   }
   return localized.map(metric =>
     Object.assign(metric, {
       value: UNMEASURED_VALUE,
-      detail: i18n.t('securityAgent.dashboard.notYetSynced'),
+      detail: '',
       tone: 'neutral' as const,
     })
   );
@@ -592,8 +593,11 @@ export function DashboardScreen({ scope }: Readonly<{ scope: string }>) {
 
         {/* `isPending` rather than `isLoading`: a NetInfo-paused read is pending
             without fetching, and it must show this skeleton instead of an empty
-            metrics row. */}
-        {dashboardStats.isPending ? (
+            metrics row. The sync-status read joins it because `neverSynced`
+            decides whether a tile carries a detail line: a tile that rendered
+            the measured shape first would shrink by a line the moment the read
+            resolved, which moves the whole dashboard. */}
+        {dashboardStats.isPending || lastSync.isPending ? (
           <View className="flex-row flex-wrap gap-3">
             <Skeleton className="h-24 w-[47%] rounded-lg" />
             <Skeleton className="h-24 w-[47%] rounded-lg" />
@@ -615,9 +619,11 @@ export function DashboardScreen({ scope }: Readonly<{ scope: string }>) {
                 >
                   {metric.value}
                 </Text>
-                <Text variant="muted" className="text-[11px]">
-                  {metric.detail}
-                </Text>
+                {metric.detail ? (
+                  <Text variant="muted" className="text-[11px]">
+                    {metric.detail}
+                  </Text>
+                ) : null}
               </View>
             ))}
           </View>
@@ -661,7 +667,10 @@ export function DashboardScreen({ scope }: Readonly<{ scope: string }>) {
           />
         ) : null}
 
-        {data ? (
+        {/* The Act first card's body depends on `neverSynced` too, so it waits
+            for the sync-status read rather than swapping one shape for the
+            other once the read resolves. */}
+        {data && !lastSync.isPending ? (
           <DashboardSections
             scope={scope}
             data={data}

apps/mobile/src/components/security-agent/dashboard-sections.mounted.test.tsx

@@ -2,8 +2,8 @@
 // "All repositories". Before the first sync nothing has been measured, so the
 // priority card must not report the empty result as a clean codebase: the
 // green check and the all-clear line gave a never-synced organization a
-// verified look. The neutral state carries the screen's own not-yet-synced
-// line instead, and opens nothing.
+// verified look. The card explains what it will hold instead, and opens
+// nothing.
 
 import { type ComponentProps } from 'react';
 import { act, TestRenderer } from '@/test/renderer';
@@ -148,9 +148,13 @@ describe('DashboardSections priority card', () => {
   it('reports no measurement while the scope has never synced', () => {
     const card = priorityCard(renderSections({ neverSynced: true }));
 
-    // The neutral state carries the screen's own not-yet-synced line; the
-    // all-clear copy and its green check belong to a measured report.
-    expect(copy(card)).toContain('securityAgent.dashboard.notYetSynced');
+    // The card is a content section, so it explains what it will hold instead
+    // of showing the lone dash a measurement row shows or repeating the status
+    // the filter above states. The all-clear copy and its green check belong to
+    // a measured report, and nothing here opens.
+    expect(copy(card)).toContain('securityAgent.dashboard.actFirst');
+    expect(copy(card)).toContain('securityAgent.dashboard.priorityFindingsPending');
+    expect(copy(card)).not.toContain('securityAgent.dashboard.notYetSynced');
     expect(copy(card)).not.toContain('securityAgent.dashboard.noOpenFindings');
     expect(card.findAllByType('ShieldCheck')).toHaveLength(0);
     expect(card.findAllByType('Pressable')).toHaveLength(0);

apps/mobile/src/components/security-agent/dashboard-sections.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable max-lines -- The dashboard sections share one data contract and navigation scope. */
 import { getAnalysisIncompleteCount } from '@kilocode/app-shared/security-agent';
 import { type Href } from 'expo-router';
-import { Clock, FolderGit2, ShieldCheck } from '@/components/ui/icons';
+import { FolderGit2, ShieldCheck } from '@/components/ui/icons';
 import { DirectionalArrowRight } from '@/components/ui/directional-icons';
 import { type ReactNode } from 'react';
 import { Pressable, View } from 'react-native';
@@ -102,15 +102,16 @@ function PriorityFindingSection({ scope, data, slaEnabled, neverSynced }: Sectio
 
   // A scope that has never synced has found nothing yet because nothing ran,
   // not because the codebase is clean: the green check and the all-clear line
-  // read as a verified result. The neutral row states the same not-yet-synced
-  // fact the filter above shows, and opens nothing.
+  // read as a verified result. The filter above already states that nothing
+  // has synced, so this card explains what it will hold instead of repeating
+  // the status, and it opens nothing: a lone dash left a content section
+  // looking broken.
   if (neverSynced) {
     return (
       <SectionCard title={t('securityAgent.dashboard.actFirst')}>
-        <View className="flex-row items-center gap-2 py-3">
-          <Clock size={16} color={colors.mutedForeground} />
+        <View className="py-3">
           <Text variant="muted" className="text-sm">
-            {t('securityAgent.dashboard.notYetSynced')}
+            {t('securityAgent.dashboard.priorityFindingsPending')}
           </Text>
         </View>
       </SectionCard>