@nextclaw/ui 0.14.1 → 0.14.3

package/src/features/chat/pages/ncp-chat-page.tsx

@@ -11,41 +11,14 @@ import {
 } from "@/features/chat/components/layout/chat-page-shell";
 import { parseSessionKeyFromRoute } from "@/features/chat/features/session/utils/chat-session-route.utils";
 import { ChatPresenter } from "@/features/chat/presenters/chat.presenter";
-import {
-  isNcpAgentStartupUnavailableErrorMessage,
-  useNcpSessionConversation,
-} from "@/features/chat/features/ncp/hooks/use-ncp-session-conversation";
-import {
-  useNcpChatSelectedSession,
-} from "@/features/chat/features/ncp/hooks/use-ncp-chat-derived-state";
 import { useChatQueryStoreSync } from "@/features/chat/features/ncp/hooks/use-ncp-chat-query-store-sync";
 import {
   ChatPresenterProvider,
   usePresenter,
 } from "@/features/chat/components/providers/chat-presenter.provider";
 import { useConfirmDialog } from "@/shared/hooks/use-confirm-dialog";
-import { useSystemStatus } from "@/features/system-status";
 import { useAppPresenter } from "@/app/components/app-presenter-provider";
-import { isNcpChatRuntimeBlocked, resolveNcpChatSendErrorMessage } from "@/features/chat/features/runtime/utils/ncp-chat-runtime-availability.utils";
 import { useUiShowContentEvent } from "@/features/chat/features/ncp/hooks/use-ui-show-content-event";
-import { readNcpContextWindowValue } from "@/features/chat/features/session/utils/ncp-session-context-metadata.utils";
-
-function useChatDraftIntentConsumer() {
-  const appPresenter = useAppPresenter();
-  const presenter = usePresenter();
-  useEffect(() => {
-    const applyIntent = (intent: { id: number; prompt: string }) => {
-      presenter.startAgentCreationDraft(intent.prompt);
-      appPresenter.chatDraftIntentManager.markConsumed(intent.id);
-    };
-    const unsubscribe = appPresenter.chatDraftIntentManager.subscribe(applyIntent);
-    const pendingIntent = appPresenter.chatDraftIntentManager.consumePending();
-    if (pendingIntent) {
-      applyIntent(pendingIntent);
-    }
-    return unsubscribe;
-  }, [appPresenter, presenter]);
-}
 
 function useNcpChatRouteSelection() {
   const { sessionId: routeSessionIdParam } = useParams<{ sessionId?: string }>();
@@ -59,31 +32,6 @@ function useNcpChatRouteSelection() {
   };
 }
 
-type NcpChatConversation = ReturnType<typeof useNcpSessionConversation>;
-
-function useChatRunRuntimeConnection(params: {
-  agent: NcpChatConversation;
-  sessionKey: string | undefined;
-}) {
-  const presenter = usePresenter();
-  const { agent, sessionKey } = params;
-  useEffect(() => {
-    presenter.chatRunManager.setActiveRuntime({
-      sessionKey: sessionKey ?? null,
-      sendEnvelope: (envelope) => agent.send(envelope),
-      abortCurrentRun: () => agent.abort(),
-      resumeCurrentSessionRun: () => agent.streamRun(),
-    });
-    return () => {
-      presenter.chatRunManager.setActiveRuntime(null);
-    };
-  }, [
-    agent,
-    presenter,
-    sessionKey,
-  ]);
-}
-
 function useNcpChatUiBindings() {
   const presenter = usePresenter();
   const { confirm, ConfirmDialog } = useConfirmDialog();
@@ -101,42 +49,6 @@ function useNcpChatUiBindings() {
   return <ConfirmDialog />;
 }
 
-function useChatRunSnapshotSync(params: {
-  agent: NcpChatConversation;
-  isSending: boolean;
-  isRunning: boolean;
-  lastSendError: string | null;
-  routeSessionKey: string | null;
-}) {
-  const presenter = usePresenter();
-  const { agent, isRunning, isSending, lastSendError, routeSessionKey } = params;
-  useEffect(() => {
-    presenter.chatRunManager.applyRunSnapshot({
-      routeSessionKey,
-      isHydrating: agent.isHydrating,
-      isSending,
-      isRunning,
-      visibleMessages: agent.visibleMessages,
-      contextWindow: readNcpContextWindowValue(agent.snapshot.contextWindow),
-      sendErrorMessage: lastSendError,
-      materializedSessionKey:
-        agent.snapshot.activeRun?.sessionId ??
-        agent.visibleMessages.find((message) => message.sessionId.trim())?.sessionId ??
-        null,
-    });
-  }, [
-    agent.isHydrating,
-    agent.snapshot.activeRun?.sessionId,
-    agent.snapshot.contextWindow,
-    agent.visibleMessages,
-    isRunning,
-    isSending,
-    lastSendError,
-    presenter,
-    routeSessionKey,
-  ]);
-}
-
 export function NcpChatPage({ view }: ChatPageProps) {
   const appPresenter = useAppPresenter();
   const [presenter] = useState(() => new ChatPresenter(appPresenter));
@@ -149,52 +61,18 @@ export function NcpChatPage({ view }: ChatPageProps) {
 
 function NcpChatPageContent({ view }: ChatPageProps) {
   const presenter = usePresenter();
-  const systemStatus = useSystemStatus();
-  const isRuntimeBlocked = isNcpChatRuntimeBlocked(systemStatus);
   const confirmDialog = useNcpChatUiBindings();
   const routeSelection = useNcpChatRouteSelection();
   const { routeSessionKey, sessionKey } = routeSelection;
   useChatQueryStoreSync({
     sessionKey: sessionKey ?? null,
   });
-  const selectedSession = useNcpChatSelectedSession(sessionKey ?? null);
-  const agent = useNcpSessionConversation(sessionKey);
-  const rawLastSendError =
-    agent.hydrateError?.message ?? agent.snapshot.error?.message ?? null;
-  const filteredLastSendError =
-    systemStatus.phase === "ready" &&
-    isNcpAgentStartupUnavailableErrorMessage(rawLastSendError)
-      ? null
-      : rawLastSendError;
-  const currentSessionRunning = agent.isRunning || selectedSession?.status === "running";
-  const isSending = agent.isSending || currentSessionRunning;
-  const lastSendError =
-    isRuntimeBlocked
-      ? null
-      : systemStatus.phase === "ready"
-      ? filteredLastSendError
-      : resolveNcpChatSendErrorMessage({
-          message: filteredLastSendError,
-          status: systemStatus,
-        });
-  useChatRunRuntimeConnection({
-    agent,
-    sessionKey,
-  });
   useChatSessionSync({
     view,
     routeSessionKey,
     syncRouteSessionSelection:
       presenter.chatSessionListManager.syncRouteSessionSelection,
   });
-  useChatDraftIntentConsumer();
   useUiShowContentEvent();
-  useChatRunSnapshotSync({
-    agent,
-    isRunning: currentSessionRunning,
-    routeSessionKey,
-    lastSendError,
-    isSending,
-  });
   return <ChatPageLayout view={view} confirmDialog={confirmDialog} />;
 }

package/src/features/chat/presenters/chat.presenter.ts

@@ -1,39 +1,22 @@
 import { ChatSessionListManager } from '@/features/chat/managers/chat-session-list.manager';
-import { ChatRunManager } from '@/features/chat/managers/chat-run.manager';
 import { ChatUiManager } from '@/features/chat/managers/chat-ui.manager';
-import { ChatInputManager } from '@/features/chat/managers/chat-input.manager';
 import { ChatQueryManager } from '@/features/chat/managers/chat-query.manager';
 import { ChatThreadManager } from '@/features/chat/managers/chat-thread.manager';
 import type { AppPresenter } from '@/app/presenters/app.presenter';
 
 export class ChatPresenter {
   readonly chatUiManager: ChatUiManager;
-  readonly chatRunManager: ChatRunManager;
   readonly chatSessionListManager: ChatSessionListManager;
-  readonly chatInputManager: ChatInputManager;
   readonly chatQueryManager: ChatQueryManager;
   readonly chatThreadManager: ChatThreadManager;
 
   constructor(appPresenter: AppPresenter) {
     this.chatUiManager = new ChatUiManager(appPresenter.docBrowserManager);
-    this.chatRunManager = new ChatRunManager(this.chatUiManager);
-    this.chatSessionListManager = new ChatSessionListManager(this.chatUiManager, this.chatRunManager);
+    this.chatSessionListManager = new ChatSessionListManager(this.chatUiManager);
     this.chatQueryManager = new ChatQueryManager();
-    this.chatInputManager = new ChatInputManager(
-      this.chatRunManager,
-      this.chatSessionListManager
-    );
     this.chatThreadManager = new ChatThreadManager(
       this.chatUiManager,
-      this.chatSessionListManager,
-      this.chatRunManager
+      this.chatSessionListManager
     );
   }
-
-  startAgentCreationDraft = (prompt: string) => {
-    this.chatSessionListManager.createSession();
-    this.chatSessionListManager.setSelectedAgentId('main');
-    this.chatInputManager.setDraft(prompt);
-    this.chatInputManager.requestComposerFocusAtEnd();
-  };
 }

package/src/features/chat/stores/__tests__/chat-thread.store.test.ts

@@ -22,6 +22,7 @@ function resetChatThreadStore() {
       activeWorkspacePanelKind: null,
       childSessionTabs: [],
       activeChildSessionKey: null,
+      activeSideChatDraft: null,
       workspaceFileTabs: [],
       activeWorkspaceFileKey: null,
       workspaceNavigationHistory: [],
@@ -85,6 +86,36 @@ describe('chat thread workspace panel persistence', () => {
     expect(persisted.state.snapshot.workspaceFileTabs[0].fullLines).toBeUndefined();
   });
 
+  it('does not persist an unmaterialized side chat draft', () => {
+    useChatThreadStore.getState().setSnapshot({
+      workspacePanelParentKey: 'session-1',
+      activeWorkspacePanelKind: 'side-chat-draft',
+      activeSideChatDraft: {
+        draftKey: 'draft-1',
+        parentSessionKey: 'session-1',
+      },
+      workspaceNavigationHistory: [
+        { kind: 'child-session', key: 'child-session-1' },
+        { kind: 'side-chat-draft', key: 'draft-1' },
+      ],
+      workspaceNavigationHistoryIndex: 1,
+    });
+
+    const persisted = JSON.parse(
+      window.localStorage.getItem(chatThreadWorkspaceStorageKey) ?? '{}',
+    );
+
+    expect(persisted.state.snapshot).toMatchObject({
+      workspacePanelParentKey: 'session-1',
+      activeWorkspacePanelKind: null,
+      workspaceNavigationHistory: [
+        { kind: 'child-session', key: 'child-session-1' },
+      ],
+      workspaceNavigationHistoryIndex: 0,
+    });
+    expect(persisted.state.snapshot.activeSideChatDraft).toBeUndefined();
+  });
+
   it('hydrates the workspace panel state and repairs stale active file keys', async () => {
     window.localStorage.setItem(
       chatThreadWorkspaceStorageKey,

package/src/features/chat/stores/chat-thread.store.ts

@@ -14,6 +14,11 @@ export type ChatChildSessionTab = {
   agentId?: string | null;
 };
 
+export type ChatWorkspaceSideChatDraft = {
+  draftKey: string;
+  parentSessionKey: string;
+};
+
 export type ChatWorkspaceFileTab = {
   key: string;
   parentSessionKey: string | null;
@@ -32,17 +37,10 @@ export type ChatWorkspaceFileTab = {
 };
 
 export type ChatWorkspaceNavigationEntry =
-  | {
-      kind: 'child-session';
-      key: string;
-    }
-  | {
-      kind: 'file';
-      key: string;
-    }
-  | {
-      kind: 'cron';
-    };
+  | { kind: 'child-session'; key: string }
+  | { kind: 'side-chat-draft'; key: string }
+  | { kind: 'file'; key: string }
+  | { kind: 'cron' };
 
 export type ChatThreadSnapshot = {
   sessionTypeLabel?: string | null;
@@ -63,9 +61,10 @@ export type ChatThreadSnapshot = {
   parentSessionKey?: string | null;
   parentSessionLabel?: string | null;
   workspacePanelParentKey?: string | null;
-  activeWorkspacePanelKind?: "child-session" | "file" | "cron" | null;
+  activeWorkspacePanelKind?: "child-session" | "side-chat-draft" | "file" | "cron" | null;
   childSessionTabs: ChatChildSessionTab[];
   activeChildSessionKey?: string | null;
+  activeSideChatDraft?: ChatWorkspaceSideChatDraft | null;
   workspaceFileTabs: ChatWorkspaceFileTab[];
   activeWorkspaceFileKey?: string | null;
   workspaceNavigationHistory: ChatWorkspaceNavigationEntry[];
@@ -105,6 +104,8 @@ type PersistedChatWorkspaceSnapshot = Pick<
   | 'workspaceNavigationHistoryIndex'
 >;
 
+type PersistedWorkspacePanelKind = 'child-session' | 'file' | 'cron';
+
 const initialSnapshot: ChatThreadSnapshot = {
   sessionTypeLabel: null,
   sessionTypeIcon: null,
@@ -127,6 +128,7 @@ const initialSnapshot: ChatThreadSnapshot = {
   activeWorkspacePanelKind: null,
   childSessionTabs: [],
   activeChildSessionKey: null,
+  activeSideChatDraft: null,
   workspaceFileTabs: [],
   activeWorkspaceFileKey: null,
   workspaceNavigationHistory: [],
@@ -158,7 +160,7 @@ function normalizeHistoryIndex(value: unknown, maxIndex: number): number {
 
 function isWorkspacePanelKind(
   value: unknown,
-): value is NonNullable<ChatThreadSnapshot['activeWorkspacePanelKind']> {
+): value is PersistedWorkspacePanelKind {
   return value === 'child-session' || value === 'file' || value === 'cron';
 }
 
@@ -344,19 +346,33 @@ export const useChatThreadStore = create<ChatThreadStore>()(
       name: CHAT_THREAD_WORKSPACE_STORAGE_KEY,
       version: CHAT_THREAD_WORKSPACE_STORAGE_VERSION,
       storage: createJSONStorage(() => window.localStorage),
-      partialize: (state): PersistedChatThreadStore => ({
-        snapshot: {
-          workspacePanelParentKey: state.snapshot.workspacePanelParentKey,
-          activeWorkspacePanelKind: state.snapshot.activeWorkspacePanelKind,
-          activeChildSessionKey: state.snapshot.activeChildSessionKey,
-          workspaceFileTabs: state.snapshot.workspaceFileTabs
-            .slice(-CHAT_THREAD_MAX_PERSISTED_WORKSPACE_FILE_TABS)
-            .map(toPersistedWorkspaceFileTab),
-          activeWorkspaceFileKey: state.snapshot.activeWorkspaceFileKey,
-          workspaceNavigationHistory: state.snapshot.workspaceNavigationHistory,
-          workspaceNavigationHistoryIndex: state.snapshot.workspaceNavigationHistoryIndex,
-        }
-      }),
+      partialize: (state): PersistedChatThreadStore => {
+        const workspaceNavigationHistory = state.snapshot.workspaceNavigationHistory
+          .filter((entry) => entry.kind !== 'side-chat-draft');
+        const workspaceNavigationHistoryIndex =
+          workspaceNavigationHistory.length > 0
+            ? Math.min(
+              state.snapshot.workspaceNavigationHistoryIndex,
+              workspaceNavigationHistory.length - 1,
+            )
+            : 0;
+        return {
+          snapshot: {
+            workspacePanelParentKey: state.snapshot.workspacePanelParentKey,
+            activeWorkspacePanelKind:
+              state.snapshot.activeWorkspacePanelKind === 'side-chat-draft'
+                ? null
+                : state.snapshot.activeWorkspacePanelKind,
+            activeChildSessionKey: state.snapshot.activeChildSessionKey,
+            workspaceFileTabs: state.snapshot.workspaceFileTabs
+              .slice(-CHAT_THREAD_MAX_PERSISTED_WORKSPACE_FILE_TABS)
+              .map(toPersistedWorkspaceFileTab),
+            activeWorkspaceFileKey: state.snapshot.activeWorkspaceFileKey,
+            workspaceNavigationHistory,
+            workspaceNavigationHistoryIndex,
+          }
+        };
+      },
       merge: (persistedState, currentState) => {
         const persistedSnapshot = isRecord(persistedState)
           ? persistedState.snapshot

package/src/features/panel-apps/components/panel-app-list-item.tsx

@@ -38,26 +38,26 @@ export function PanelAppListItem({
   };
 
   return (
-    <div className="group w-full min-w-0 rounded-lg border border-gray-200 bg-white px-2.5 py-2.5 transition-colors hover:border-amber-200 hover:bg-amber-50/50">
+    <div className="group w-full min-w-0 rounded-lg border border-border bg-card px-2.5 py-2.5 transition-colors hover:border-primary/35 hover:bg-accent/60">
       <div className="flex min-w-0 items-start gap-2">
         <button type="button" onClick={onOpen} className="min-w-0 flex-1 text-left">
           <span className="flex min-w-0 items-center gap-2">
-            <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-amber-50 text-base text-amber-700">
+            <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-accent text-base text-accent-foreground">
               <PanelAppIcon icon={entry.icon} title={entry.title} />
             </span>
-            <span className="block min-w-0 flex-1 truncate text-sm font-medium text-gray-900">{entry.title}</span>
+            <span className="block min-w-0 flex-1 truncate text-sm font-medium text-foreground">{entry.title}</span>
           </span>
           {entry.description ? (
-            <span className="mt-1.5 block truncate text-xs leading-5 text-gray-600">{entry.description}</span>
+            <span className="mt-1.5 block truncate text-xs leading-5 text-muted-foreground">{entry.description}</span>
           ) : null}
-          <span className="mt-0.5 block truncate text-[11px] leading-4 text-gray-400">{secondary}</span>
+          <span className="mt-0.5 block truncate text-[11px] leading-4 text-muted-foreground/70">{secondary}</span>
         </button>
         <div className="flex shrink-0 items-center gap-1">
           <button
             type="button"
             onClick={handleFavorite}
             disabled={favoritePending}
-            className="rounded-md p-1.5 text-gray-400 transition-colors hover:bg-white hover:text-amber-500 disabled:opacity-50"
+            className="rounded-md p-1.5 text-muted-foreground/70 transition-colors hover:bg-background hover:text-amber-500 disabled:opacity-50"
             title={favoriteLabel}
             aria-label={favoriteLabel}
           >
@@ -67,7 +67,7 @@ export function PanelAppListItem({
             <PopoverTrigger asChild>
               <button
                 type="button"
-                className="rounded-md p-1.5 text-gray-400 transition-colors hover:bg-white hover:text-gray-700"
+                className="rounded-md p-1.5 text-muted-foreground/70 transition-colors hover:bg-background hover:text-foreground"
                 aria-label={t('panelAppsMoreActions')}
                 disabled={deletePending}
               >
@@ -118,7 +118,7 @@ function PanelAppMenuItem({
       type="button"
       className={cn(
         'flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50',
-        destructive ? 'text-destructive hover:bg-destructive/10' : 'text-gray-700 hover:bg-gray-100',
+        destructive ? 'text-destructive hover:bg-destructive/10' : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
       )}
       disabled={disabled}
       onClick={onClick}

package/src/features/panel-apps/components/panel-app-toolbar.tsx

@@ -13,18 +13,18 @@ export function PanelAppToolbar({
   onRefresh,
 }: PanelAppToolbarProps) {
   return (
-    <div className="flex items-center justify-between gap-2 px-3.5 py-2 bg-white border-b border-gray-100 shrink-0">
+    <div className="flex items-center justify-between gap-2 border-b border-border/70 bg-card px-3.5 py-2 shrink-0">
       <button
         type="button"
         onClick={onOpenApps}
-        className="inline-flex shrink-0 items-center rounded-md p-1.5 text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
+        className="inline-flex shrink-0 items-center rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
         title={t('appsTitle')}
         aria-label={t('appsTitle')}
       >
         <ArrowLeft className="h-3.5 w-3.5" />
       </button>
       <span
-        className="min-w-0 flex-1 truncate text-xs font-medium text-gray-600"
+        className="min-w-0 flex-1 truncate text-xs font-medium text-muted-foreground"
         title={appTitle}
       >
         {appTitle}
@@ -32,7 +32,7 @@ export function PanelAppToolbar({
       <button
         type="button"
         onClick={onRefresh}
-        className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-800"
+        className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
         title={t('panelAppsRefreshCurrent')}
         aria-label={t('panelAppsRefreshCurrent')}
       >

package/src/features/panel-apps/components/panel-apps-list.tsx

@@ -83,7 +83,7 @@ export function PanelAppsList({
 
   if (panelApps.isLoading) {
     return (
-      <div className="flex h-full items-center justify-center text-sm text-gray-500">{t('panelAppsLoading')}</div>
+      <div className="flex h-full items-center justify-center text-sm text-muted-foreground">{t('panelAppsLoading')}</div>
     );
   }
 
@@ -94,17 +94,17 @@ export function PanelAppsList({
   }
 
   return (
-    <div className="flex h-full min-h-0 flex-col bg-white">
-      <div className="flex items-center justify-between gap-2 border-b border-gray-100 px-4 py-3">
+    <div className="flex h-full min-h-0 flex-col bg-card text-card-foreground">
+      <div className="flex items-center justify-between gap-2 border-b border-border/70 px-4 py-3">
         <div className="flex min-w-0 items-center gap-1.5">
           {headerContent ?? (
-            <div className="truncate text-sm font-semibold text-gray-900">{t('panelAppsTitle')}</div>
+            <div className="truncate text-sm font-semibold text-foreground">{t('panelAppsTitle')}</div>
           )}
           {panelApps.data?.panelsPath ? (
             <TooltipProvider delayDuration={250}>
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <button type="button" className="rounded p-0.5 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-700" aria-label={t('panelAppsTitle')}><HelpCircle className="h-3.5 w-3.5" /></button>
+                  <button type="button" className="rounded p-0.5 text-muted-foreground/70 transition-colors hover:bg-accent hover:text-accent-foreground" aria-label={t('panelAppsTitle')}><HelpCircle className="h-3.5 w-3.5" /></button>
                 </TooltipTrigger>
                 <TooltipContent side="bottom" className="max-w-[320px] break-all font-mono text-xs">{panelApps.data.panelsPath}</TooltipContent>
               </Tooltip>
@@ -114,16 +114,16 @@ export function PanelAppsList({
         <button
           type="button"
           onClick={() => void panelApps.refetch()}
-          className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-800"
+          className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
           title={t('panelAppsRefresh')}
           aria-label={t('panelAppsRefresh')}
         >
           <RefreshCw className="h-3.5 w-3.5" />
         </button>
       </div>
-      <div className="border-b border-gray-100 px-3 py-2">
+      <div className="border-b border-border/70 px-3 py-2">
         <Tabs value={viewMode} onValueChange={(value) => setViewMode(value as PanelAppViewMode)}>
-          <TabsList className="grid h-auto w-full grid-cols-5 rounded-lg bg-gray-100/70 p-0.5">
+          <TabsList className="grid h-auto w-full grid-cols-5 rounded-lg bg-muted/70 p-0.5">
             <TabsTrigger value="smart" className="px-2 py-1 text-xs">{t('panelAppsSortSmart')}</TabsTrigger>
             <TabsTrigger value="favorites" className="px-2 py-1 text-xs">{t('panelAppsFavorites')}</TabsTrigger>
             <TabsTrigger value="recent-open" className="px-2 py-1 text-xs">{t('panelAppsSortRecentOpen')}</TabsTrigger>
@@ -139,7 +139,7 @@ export function PanelAppsList({
           onRefresh={() => void panelApps.refetch()}
         />
       ) : entries.length === 0 ? (
-        <div className="flex flex-1 items-center justify-center px-6 text-center text-sm text-gray-500">{t('panelAppsEmptyFiltered')}</div>
+        <div className="flex flex-1 items-center justify-center px-6 text-center text-sm text-muted-foreground">{t('panelAppsEmptyFiltered')}</div>
       ) : (
         <div className="custom-scrollbar min-h-0 flex-1 overflow-y-auto p-3">
           <div className="space-y-1.5">
@@ -176,8 +176,8 @@ function PanelAppsEmptyGuide({
         <div className="mx-auto flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary">
           <AppWindow className="h-5 w-5" />
         </div>
-        <h2 className="mt-3 text-sm font-semibold text-gray-900">{t('panelAppsEmptyTitle')}</h2>
-        <p className="mt-1 text-xs leading-5 text-gray-500">{t('panelAppsEmptyDescription')}</p>
+        <h2 className="mt-3 text-sm font-semibold text-foreground">{t('panelAppsEmptyTitle')}</h2>
+        <p className="mt-1 text-xs leading-5 text-muted-foreground">{t('panelAppsEmptyDescription')}</p>
 
         <div className="mt-4 space-y-2 text-left">
           <PanelAppsEmptyGuideStep
@@ -195,16 +195,16 @@ function PanelAppsEmptyGuide({
         </div>
 
         {panelsPath ? (
-          <div className="mt-4 rounded-md bg-gray-50 px-3 py-2 text-left">
-            <div className="text-[11px] font-medium uppercase text-gray-400">{t('panelAppsPanelsPath')}</div>
-            <code className="mt-1 block break-all text-xs text-gray-600">{panelsPath}</code>
+          <div className="mt-4 rounded-md bg-muted/60 px-3 py-2 text-left">
+            <div className="text-[11px] font-medium uppercase text-muted-foreground/70">{t('panelAppsPanelsPath')}</div>
+            <code className="mt-1 block break-all text-xs text-muted-foreground">{panelsPath}</code>
           </div>
         ) : null}
 
         <button
           type="button"
           onClick={onRefresh}
-          className="mt-4 inline-flex items-center justify-center gap-1.5 rounded-md border border-gray-200 px-3 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
+          className="mt-4 inline-flex items-center justify-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
         >
           <RefreshCw className="h-3.5 w-3.5" />
           {t('panelAppsRefresh')}
@@ -229,10 +229,10 @@ function PanelAppsEmptyGuideStep({
 }) {
   const content = (
     <>
-      <div className="mt-0.5 text-gray-500">{icon}</div>
+      <div className="mt-0.5 text-muted-foreground">{icon}</div>
       <div className="min-w-0">
-        <div className="text-xs font-medium text-gray-800">{title}</div>
-        <div className="mt-0.5 text-xs leading-5 text-gray-500">{description}</div>
+        <div className="text-xs font-medium text-foreground">{title}</div>
+        <div className="mt-0.5 text-xs leading-5 text-muted-foreground">{description}</div>
         {actionLabel ? (
           <div className="mt-2 text-xs font-medium text-primary">{actionLabel}</div>
         ) : null}
@@ -245,7 +245,7 @@ function PanelAppsEmptyGuideStep({
       <button
         type="button"
         onClick={onAction}
-        className="flex w-full gap-2 rounded-md bg-gray-50 px-3 py-2.5 text-left transition-colors hover:bg-primary/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
+        className="flex w-full gap-2 rounded-md bg-muted/60 px-3 py-2.5 text-left transition-colors hover:bg-accent/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
       >
         {content}
       </button>
@@ -253,7 +253,7 @@ function PanelAppsEmptyGuideStep({
   }
 
   return (
-    <div className="flex gap-2 rounded-md bg-gray-50 px-3 py-2.5">
+    <div className="flex gap-2 rounded-md bg-muted/60 px-3 py-2.5">
       {content}
     </div>
   );

package/src/features/panel-apps/hooks/use-panel-apps.ts

@@ -4,10 +4,11 @@ import type { PanelAppPreferencesUpdateView } from '@/shared/lib/api';
 
 const PANEL_APPS_QUERY_KEY = ['panel-apps'] as const;
 
-export function usePanelApps() {
+export function usePanelApps(options: { enabled?: boolean } = {}) {
   return useQuery({
     queryKey: PANEL_APPS_QUERY_KEY,
     queryFn: () => nextclawClient.panelApps.listPanelApps(),
+    enabled: options.enabled ?? true,
     staleTime: 0,
   });
 }