fix(web-ui): align motion presence contracts

Author: bobleer

src/web-ui/src/app/startup/startupPerformanceContract.test.ts

@@ -688,25 +688,25 @@ describe('startup performance contract', () => {
     expect(appLayoutSource).not.toMatch(/import\s+\{\s*NewProjectDialog\s*\}\s+from/);
     expect(appLayoutSource).toContain('const NewProjectDialog = lazy');
     expect(appLayoutSource).toContain("import('../components/NewProjectDialog')");
-    expect(appLayoutSource).toContain('{showNewProjectDialog && (');
+    expect(appLayoutSource).toContain('<PresenceBoundary active={showNewProjectDialog}>');
 
     expect(workspaceItemSource).not.toMatch(/import\s+WorkspaceRelatedPathsDialog\s+from/);
     expect(workspaceItemSource).not.toMatch(/import\s+WorkspaceSessionBatchModal\s+from/);
     expect(workspaceItemSource).not.toMatch(/import\s+ScheduledJobsModal\s+from/);
     expect(workspaceItemSource).toContain("lazy(() => import('./WorkspaceRelatedPathsDialog'))");
     expect(workspaceItemSource).toContain("lazy(() => import('./WorkspaceSessionBatchModal'))");
     expect(workspaceItemSource).toContain("lazy(() => import('@/app/components/scheduled-jobs/ScheduledJobsModal'))");
-    expect(workspaceItemSource).toContain('{relatedPathsDialogOpen && (');
-    expect(workspaceItemSource).toContain('{sessionBatchModalOpen && (');
-    expect(workspaceItemSource).toContain('{scheduledJobsModalOpen && (');
+    expect(workspaceItemSource).toContain('<PresenceBoundary active={relatedPathsDialogOpen}>');
+    expect(workspaceItemSource).toContain('<PresenceBoundary active={sessionBatchModalOpen}>');
+    expect(workspaceItemSource).toContain('<PresenceBoundary active={scheduledJobsModalOpen}>');
 
     expect(sessionsSectionSource).not.toMatch(/import\s+ScheduledJobsModal\s+from/);
     expect(sessionsSectionSource).toContain("lazy(() => import('@/app/components/scheduled-jobs/ScheduledJobsModal'))");
-    expect(sessionsSectionSource).toContain('{scheduledJobsSession && (');
+    expect(sessionsSectionSource).toContain('<PresenceBoundary active={scheduledJobsSession != null}>');
 
     expect(footerActionsSource).not.toMatch(/import\s+\{\s*RemoteConnectDialog\s*\}\s+from/);
     expect(footerActionsSource).toContain("lazy(() => import('../../RemoteConnectDialog'))");
-    expect(footerActionsSource).toContain('{showRemoteConnect && (');
+    expect(footerActionsSource).toContain('<PresenceBoundary active={showRemoteConnect}>');
 
     expect(newProjectDialogSource).not.toMatch(/from\s+['"]@tauri-apps\/plugin-dialog['"]/);
     expect(newProjectDialogSource).not.toContain("await import('@tauri-apps/plugin-dialog')");

src/web-ui/src/infrastructure/appearance/builtins/appearancePresetOutput.test.ts

@@ -149,42 +149,42 @@ describe('builtin appearance preset output', () => {
     }))).toMatchInlineSnapshot(`
       [
         {
-          "hash": "b70ab1232690e55f3446d84c5c5d4459c508c6cd5f1e0bfe8565eba82e97ea6e",
+          "hash": "954317380f5baa31e8b0155564c72606a76ff6fa6d8a190615120668a8e3d388",
           "id": "bitfun-light",
           "type": "light",
         },
         {
-          "hash": "6c426dc8aacd8095fdf5a69ed80b4d42c0235cf72f61b20186fc14d5ebcb320b",
+          "hash": "89abef6e2224b6fb86ac8bb34578c0d7ef725172ec1f29b29818038288b5dae0",
           "id": "bitfun-slate",
           "type": "dark",
         },
         {
-          "hash": "db937836a31fb02d67f6035f1b3a036b8161f3833fdbe2634f37936ba7ef6357",
+          "hash": "953efa0aa939f0080429972c3c0a7c46131523e106e8135cf543ec073d2e9d70",
           "id": "bitfun-dark",
           "type": "dark",
         },
         {
-          "hash": "e1455a17d5891da49f584ac1da6740a04db152afd6cdd571a9406f86811e6c8b",
+          "hash": "6b3d5817b0bf0568739ddfe2bbc5a7287d3db58761eda61379814f321195b7ed",
           "id": "bitfun-midnight",
           "type": "dark",
         },
         {
-          "hash": "7944cb574fd2b30cd4ed766e1b25e86eabd4c90b4a0e054489231a68de5cc424",
+          "hash": "e2dff5cddb2442779ca59ba92280cc3f01384a732c010f2e3dab8c399402e487",
           "id": "bitfun-china-style",
           "type": "light",
         },
         {
-          "hash": "f66e855842633612ca3aed2c30ff8df057dd0768eeb47e89e049efab8968f227",
+          "hash": "4fb76f4da97bd97213e5f9f1d35dc2e369cffb0d85a076541edbacbec1d85166",
           "id": "bitfun-china-night",
           "type": "dark",
         },
         {
-          "hash": "b72278893e14c1b0cef86449facf7ba61b4f714f077c3923241ebb012a90e3c8",
+          "hash": "a443ee9e0d5fd27e35aaf42fae2de7ba2ebd96841b9380794159ce2306c2c8c6",
           "id": "bitfun-cyber",
           "type": "dark",
         },
         {
-          "hash": "abcd6c91fdc1c03ea66d7d460401351620d672130e4742cce6a8be7f04b22626",
+          "hash": "e6b73a7c2569ffc251d0223f1bc57dc0c750b4ffbc9b1225ac8715b9a1f8fc5d",
           "id": "bitfun-tokyo-night",
           "type": "dark",
         },

src/web-ui/src/infrastructure/config/components/ExternalMcpOverview.test.tsx

@@ -738,7 +738,11 @@ describe('ExternalMcpOverview', () => {
         record: {
           ...snapshot.sources[0].record,
           health: 'degraded',
-          diagnostics: [{ severity: 'warning', code: 'source_stale', message: 'details' }],
+          diagnostics: [{
+            severity: 'warning',
+            code: 'source_stale',
+            message: 'sensitive source diagnostic',
+          }],
         },
       }],
       mcpServers: snapshot.mcpServers,
@@ -752,7 +756,7 @@ describe('ExternalMcpOverview', () => {
 
     expect(container.textContent).toContain('external.status.degraded');
     expect(container.textContent).toContain('external.status.approvalRequired');
-    expect(container.textContent).not.toContain('details');
+    expect(container.textContent).not.toContain('sensitive source diagnostic');
   });
 
   it('summarizes top-level MCP diagnostics without exposing their raw message', async () => {

src/web-ui/src/infrastructure/config/components/common/ConfigCollectionItem.test.tsx

@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 
 import React, { act } from 'react';
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { createRoot, type Root } from 'react-dom/client';
 import ConfigCollectionItem from './ConfigCollectionItem';
 
@@ -18,9 +18,11 @@ describe('ConfigCollectionItem', () => {
   afterEach(() => {
     act(() => root.unmount());
     container.remove();
+    vi.useRealTimers();
   });
 
   it('uses an independent native button for expandable details', () => {
+    vi.useFakeTimers();
     act(() => {
       root.render(
         <ConfigCollectionItem
@@ -43,18 +45,29 @@ describe('ConfigCollectionItem', () => {
     act(() => {
       control?.click();
     });
-    const details = container.querySelector<HTMLElement>('.bitfun-collection-item__details-collapse');
-    expect(details?.dataset.open).toBe('false');
-    expect(details?.getAttribute('aria-hidden')).toBe('true');
+    expect(container.querySelector('.bitfun-collection-item__details-collapse')).toBeNull();
 
     act(() => {
       toggle?.click();
     });
 
+    const details = container.querySelector<HTMLElement>('.bitfun-collection-item__details-collapse');
     expect(toggle?.getAttribute('aria-expanded')).toBe('true');
     expect(container.textContent).toContain('Configuration location');
     expect(details?.dataset.open).toBe('true');
     expect(details?.getAttribute('aria-hidden')).toBe('false');
+
+    act(() => {
+      toggle?.click();
+    });
+    expect(details?.dataset.open).toBe('false');
+    expect(details?.getAttribute('aria-hidden')).toBe('true');
+    expect(details?.hasAttribute('inert')).toBe(true);
+
+    act(() => {
+      vi.advanceTimersByTime(180);
+    });
+    expect(container.querySelector('.bitfun-collection-item__details-collapse')).toBeNull();
   });
 
   it('does not expose disabled details as an interactive control', () => {
@@ -78,6 +91,6 @@ describe('ConfigCollectionItem', () => {
     });
 
     expect(toggle?.getAttribute('aria-expanded')).toBe('false');
-    expect(container.querySelector('.bitfun-collection-item__details-collapse')?.getAttribute('aria-hidden')).toBe('true');
+    expect(container.querySelector('.bitfun-collection-item__details-collapse')).toBeNull();
   });
 });

src/web-ui/src/infrastructure/config/components/common/ConfigCollectionItem.tsx

@@ -1,5 +1,6 @@
 import React, { useId, useState } from 'react';
 import { ChevronDown } from 'lucide-react';
+import { PresenceBoundary } from '@/component-library';
 import './ConfigCollectionItem.scss';
 
 export interface ConfigCollectionItemProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -91,15 +92,21 @@ export const ConfigCollectionItem: React.FC<ConfigCollectionItemProps> = ({
       </div>
 
       {details ? (
-        <div
-          id={detailsId}
-          className="bitfun-collection-item__details-collapse"
-          data-open={isExpanded ? 'true' : 'false'}
-          aria-hidden={!isExpanded}
-          {...(!isExpanded ? { inert: '' } : {})}
+        <PresenceBoundary
+          active={isExpanded}
+          exitDurationMs={180}
+          minimumExitDurationMs={180}
         >
-          <div className="bitfun-collection-item__details" data-bf-component="config" data-bf-part="collectionDetails">{details}</div>
-        </div>
+          <div
+            id={detailsId}
+            className="bitfun-collection-item__details-collapse"
+            data-open={isExpanded ? 'true' : 'false'}
+            aria-hidden={!isExpanded}
+            {...(!isExpanded ? { inert: '' } : {})}
+          >
+            <div className="bitfun-collection-item__details" data-bf-component="config" data-bf-part="collectionDetails">{details}</div>
+          </div>
+        </PresenceBoundary>
       ) : null}
     </div>
   );