GCWing · GCWing · Mar 25, 2026 · Mar 25, 2026
diff --git a/src/web-ui/src/app/hooks/useGallerySceneAutoRefresh.ts b/src/web-ui/src/app/hooks/useGallerySceneAutoRefresh.ts
@@ -0,0 +1,65 @@
+import { useEffect, useRef } from 'react';
+import type { SceneTabId } from '@/app/components/SceneBar/types';
+import { useSceneManager } from './useSceneManager';
+
+export interface UseGallerySceneAutoRefreshOptions {
+  /** Tab id from SceneBar (e.g. skills, agents, miniapps). */
+  sceneId: SceneTabId;
+  /** Reload lists; may be async. */
+  refetch: () => void | Promise<void>;
+  enabled?: boolean;
+}
+
+/**
+ * Gallery scenes stay mounted while inactive (SceneViewport). Refresh when:
+ * 1. User switches back to this tab (inactive → active).
+ * 2. The window regains visibility while this tab is active (e.g. external edits).
+ *
+ * Initial load remains the responsibility of each feature hook (workspacePath,
+ * search query, etc.); this hook only covers re-entry and focus.
+ */
+export function useGallerySceneAutoRefresh({
+  sceneId,
+  refetch,
+  enabled = true,
+}: UseGallerySceneAutoRefreshOptions): void {
+  const { activeTabId } = useSceneManager();
+  const isActive = activeTabId === sceneId;
+  const refetchRef = useRef(refetch);
+  refetchRef.current = refetch;
+
+  /** null = not yet synced (skip first tick to avoid duplicating hook mount loads). */
+  const wasActiveRef = useRef<boolean | null>(null);
+
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    if (wasActiveRef.current === null) {
+      wasActiveRef.current = isActive;
+      return;
+    }
+    if (isActive && !wasActiveRef.current) {
+      void Promise.resolve(refetchRef.current());
+    }
+    wasActiveRef.current = isActive;
+  }, [enabled, isActive]);
+
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    const onVisibility = () => {
+      if (document.visibilityState !== 'visible') {
+        return;
+      }
+      if (activeTabId !== sceneId) {
+        return;
+      }
+      void Promise.resolve(refetchRef.current());
+    };
+
+    document.addEventListener('visibilitychange', onVisibility);
+    return () => document.removeEventListener('visibilitychange', onVisibility);
+  }, [enabled, activeTabId, sceneId]);
+}
diff --git a/src/web-ui/src/app/scenes/SceneViewport.scss b/src/web-ui/src/app/scenes/SceneViewport.scss
@@ -64,6 +64,25 @@
     margin: 0;
   }
 
+  // ── Lazy chunk loading (matches flow_chat ProcessingIndicator dots) ──
+
+  &__lazy-fallback {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    z-index: 1;
+
+    .processing-indicator {
+      max-width: none;
+      width: auto;
+      margin: 0;
+      padding: 0;
+    }
+  }
+
   // ── Scene slot ────────────────────────────────────────
 
   &__scene {

diff --git a/src/web-ui/src/app/scenes/SceneViewport.tsx b/src/web-ui/src/app/scenes/SceneViewport.tsx
@@ -13,6 +13,7 @@ import type { SceneTabId } from '../components/SceneBar/types';
 import { useSceneManager } from '../hooks/useSceneManager';
 import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
 import { useDialogCompletionNotify } from '../hooks/useDialogCompletionNotify';
+import { ProcessingIndicator } from '@/flow_chat/components/modern/ProcessingIndicator';
 import './SceneViewport.scss';
 
 const SessionScene    = lazy(() => import('./session/SessionScene'));
@@ -56,7 +57,18 @@ const SceneViewport: React.FC<SceneViewportProps> = ({ workspacePath, isEntering
   return (
     <div className="bitfun-scene-viewport">
       <div className="bitfun-scene-viewport__clip">
-        <Suspense fallback={null}>
+        <Suspense
+          fallback={(
+            <div
+              className="bitfun-scene-viewport__lazy-fallback"
+              role="status"
+              aria-busy="true"
+              aria-label={t('loading.scenes')}
+            >
+              <ProcessingIndicator visible />
+            </div>
+          )}
+        >
           {openTabs.map(tab => (
             <div
               key={tab.id}

diff --git a/src/web-ui/src/app/scenes/agents/AgentsScene.tsx b/src/web-ui/src/app/scenes/agents/AgentsScene.tsx
@@ -32,6 +32,7 @@ import { getCardGradient } from '@/shared/utils/cardGradients';
 import { getAgentBadge } from './utils';
 import './AgentsView.scss';
 import './AgentsScene.scss';
+import { useGallerySceneAutoRefresh } from '@/app/hooks/useGallerySceneAutoRefresh';
 
 const HIDDEN_AGENT_IDS = new Set(['Claw']);
 
@@ -77,6 +78,11 @@ const AgentsHomeView: React.FC = () => {
     t,
   });
 
+  useGallerySceneAutoRefresh({
+    sceneId: 'agents',
+    refetch: () => void loadAgents(),
+  });
+
   const coreAgentMeta = useMemo((): Record<string, CoreAgentMeta> => ({
     agentic: {
       role: t('coreAgentsZone.modes.agentic.role'),
@@ -190,19 +196,6 @@ const AgentsHomeView: React.FC = () => {
                 </button>
               )}
             />
-            <button
-              type="button"
-              className="gallery-action-btn"
-              onClick={() => void loadAgents()}
-              disabled={loading}
-              aria-label={t('page.refresh')}
-              title={t('page.refresh')}
-            >
-              <RefreshCw
-                size={15}
-                className={loading ? 'gallery-spinning' : undefined}
-              />
-            </button>
           </>
         )}
       />

diff --git a/src/web-ui/src/app/scenes/assistant/AssistantScene.scss b/src/web-ui/src/app/scenes/assistant/AssistantScene.scss
@@ -7,5 +7,16 @@
   &__loading {
     width: 100%;
     height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+
+    .processing-indicator {
+      max-width: none;
+      width: auto;
+      margin: 0;
+      padding: 0;
+    }
   }
 }
diff --git a/src/web-ui/src/app/scenes/assistant/AssistantScene.tsx b/src/web-ui/src/app/scenes/assistant/AssistantScene.tsx
@@ -1,6 +1,8 @@
 import React, { Suspense, lazy, useMemo, useEffect } from 'react';
 import { useWorkspaceContext } from '@/infrastructure/contexts/WorkspaceContext';
+import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
 import { WorkspaceKind } from '@/shared/types';
+import { ProcessingIndicator } from '@/flow_chat/components/modern/ProcessingIndicator';
 import { useMyAgentStore } from '../my-agent/myAgentStore';
 import './AssistantScene.scss';
 
@@ -11,6 +13,7 @@ interface AssistantSceneProps {
 }
 
 const AssistantScene: React.FC<AssistantSceneProps> = ({ workspacePath }) => {
+  const { t } = useI18n('common');
   const selectedAssistantWorkspaceId = useMyAgentStore((s) => s.selectedAssistantWorkspaceId);
   const setSelectedAssistantWorkspaceId = useMyAgentStore((s) => s.setSelectedAssistantWorkspaceId);
   const { currentWorkspace, assistantWorkspacesList } = useWorkspaceContext();
@@ -67,7 +70,18 @@ const AssistantScene: React.FC<AssistantSceneProps> = ({ workspacePath }) => {
 
   return (
     <div className="bitfun-assistant-scene">
-      <Suspense fallback={<div className="bitfun-assistant-scene__loading" />}>
+      <Suspense
+        fallback={(
+          <div
+            className="bitfun-assistant-scene__loading"
+            role="status"
+            aria-busy="true"
+            aria-label={t('loading.scenes')}
+          >
+            <ProcessingIndicator visible />
+          </div>
+        )}
+      >
         <ProfileScene
           key={resolvedAssistantWorkspace?.id ?? 'default-assistant-workspace'}
           workspacePath={resolvedAssistantWorkspace?.rootPath ?? workspacePath}

diff --git a/src/web-ui/src/app/scenes/miniapps/views/MiniAppGalleryView.tsx b/src/web-ui/src/app/scenes/miniapps/views/MiniAppGalleryView.tsx
@@ -4,7 +4,6 @@ import {
   FolderPlus,
   LayoutGrid,
   Play,
-  RefreshCw,
   Sparkles,
   Square,
   Tag,
@@ -31,6 +30,7 @@ import { getMiniAppIconGradient, renderMiniAppIcon } from '../utils/miniAppIcons
 import { useCurrentWorkspace } from '@/infrastructure/contexts/WorkspaceContext';
 import { useMiniAppStore } from '../miniAppStore';
 import { useI18n } from '@/infrastructure/i18n';
+import { useGallerySceneAutoRefresh } from '@/app/hooks/useGallerySceneAutoRefresh';
 import './MiniAppGalleryView.scss';
 
 const log = createLogger('MiniAppGalleryView');
@@ -41,6 +41,7 @@ const MiniAppGalleryView: React.FC = () => {
   const runningWorkerIds = useMiniAppStore((state) => state.runningWorkerIds);
   const setApps = useMiniAppStore((state) => state.setApps);
   const setLoading = useMiniAppStore((state) => state.setLoading);
+  const setRunningWorkerIds = useMiniAppStore((state) => state.setRunningWorkerIds);
   const markWorkerStopped = useMiniAppStore((state) => state.markWorkerStopped);
   const { workspacePath } = useCurrentWorkspace();
   const { openScene, activateScene, closeScene, openTabs } = useSceneManager();
@@ -134,15 +135,26 @@ const MiniAppGalleryView: React.FC = () => {
     }
   };
 
-  const handleRefresh = async () => {
+  const refetchMiniAppGallery = useCallback(async () => {
     setLoading(true);
     try {
-      const refreshed = await miniAppAPI.listMiniApps();
+      const [refreshed, running] = await Promise.all([
+        miniAppAPI.listMiniApps(),
+        miniAppAPI.workerListRunning(),
+      ]);
       setApps(refreshed);
+      setRunningWorkerIds(running);
+    } catch (error) {
+      log.error('Failed to refresh miniapp gallery', error);
     } finally {
       setLoading(false);
     }
-  };
+  }, [setApps, setLoading, setRunningWorkerIds]);
+
+  useGallerySceneAutoRefresh({
+    sceneId: 'miniapps',
+    refetch: refetchMiniAppGallery,
+  });
 
   const handleAddFromFolder = async () => {
     try {
@@ -219,18 +231,6 @@ const MiniAppGalleryView: React.FC = () => {
             >
               <FolderPlus size={15} />
             </button>
-            <button
-              type="button"
-              className="gallery-action-btn"
-              onClick={handleRefresh}
-              disabled={loading}
-              title={t('refreshList')}
-            >
-              <RefreshCw
-                size={15}
-                className={loading ? 'gallery-spinning' : undefined}
-              />
-            </button>
           </>
         )}
       />

diff --git a/src/web-ui/src/app/scenes/profile/views/AssistantConfigPage.tsx b/src/web-ui/src/app/scenes/profile/views/AssistantConfigPage.tsx
@@ -12,7 +12,6 @@ import {
 } from 'lucide-react';
 import {
   Button,
-  ConfirmDialog,
   IconButton,
   Input,
 } from '@/component-library';
@@ -93,7 +92,6 @@ const AssistantConfigPage: React.FC = () => {
   const {
     document: identityDocument,
     updateField: updateIdentityField,
-    resetPersonaFiles,
     reload: reloadIdentityDocument,
   } = useAgentIdentityDocument(workspacePath);
 
@@ -111,8 +109,6 @@ const AssistantConfigPage: React.FC = () => {
   const [editValue, setEditValue] = useState('');
   const nameInputRef = useRef<HTMLInputElement>(null);
   const metaInputRef = useRef<HTMLInputElement>(null);
-  const [isResetDialogOpen, setIsResetDialogOpen] = useState(false);
-
   const [rightView, setRightView] = useState<RightPanelView>('info');
   const [personaDoc, setPersonaDoc] = useState<PersonaDocState | null>(null);
   const personaSaveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -450,16 +446,6 @@ const AssistantConfigPage: React.FC = () => {
                 )}
               </div>
             </div>
-            <IconButton
-              type="button"
-              size="xs"
-              className="acp-left-header__reset"
-              aria-label={t('identity.resetTooltip')}
-              tooltip={t('identity.resetTooltip')}
-              onClick={() => setIsResetDialogOpen(true)}
-            >
-              <RefreshCw size={13} />
-            </IconButton>
           </div>
 
           <AssistantQuickInput
@@ -468,6 +454,7 @@ const AssistantConfigPage: React.FC = () => {
             assistantName={identityName}
           />
           <div className="acp-sessions-area">
+            <h2 className="acp-sessions-area__title">{t('nursery.assistant.sessionsSectionTitle')}</h2>
             <SessionsSection
               workspaceId={workspace?.id}
               workspacePath={workspacePath}
@@ -483,23 +470,6 @@ const AssistantConfigPage: React.FC = () => {
           {rightView === 'personaDoc' ? renderPersonaDocPanel() : renderInfoPanel()}
         </div>
       </div>
-
-      <ConfirmDialog
-        isOpen={isResetDialogOpen}
-        title={t('identity.resetConfirmTitle')}
-        message={t('identity.resetConfirmMessage')}
-        confirmText={t('identity.resetConfirmAction')}
-        cancelText={t('identity.resetCancel')}
-        confirmDanger
-        onClose={() => setIsResetDialogOpen(false)}
-        onConfirm={() => {
-          setIsResetDialogOpen(false);
-          resetPersonaFiles()
-            .then(() => notificationService.success(t('identity.resetSuccess')))
-            .catch(() => notificationService.error(t('identity.resetFailed')));
-        }}
-        onCancel={() => setIsResetDialogOpen(false)}
-      />
     </div>
   );
 };