@nextclaw/ui 0.15.21 → 0.15.22

package/src/features/chat/features/welcome/components/chat-welcome-project-picker.tsx

@@ -11,7 +11,6 @@ import { t } from '@/shared/lib/i18n';
 import { getSessionProjectName } from '@/shared/lib/session-project';
 
 type ChatWelcomeProjectPickerProps = {
-  defaultProjectRoot?: string | null;
   isSaving: boolean;
   projectOptions: readonly ChatWelcomeProjectOption[];
   projectRoot: string | null;
@@ -23,7 +22,6 @@ type ChatWelcomeProjectPickerProps = {
 const PROJECT_PICKER_MAX_HEIGHT = createPopoverAvailableHeightLimit('20rem');
 
 export function ChatWelcomeProjectPicker({
-  defaultProjectRoot,
   isSaving,
   projectOptions,
   projectRoot,
@@ -34,10 +32,6 @@ export function ChatWelcomeProjectPicker({
   const [isOpen, setIsOpen] = useState(false);
   const projectLabel =
     getSessionProjectName(projectRoot) ?? t('chatWelcomeProjectPickerPlaceholder');
-  const isDefaultProject =
-    defaultProjectRoot !== null &&
-    defaultProjectRoot !== undefined &&
-    projectRoot === defaultProjectRoot;
 
   const selectProjectRoot = async (nextProjectRoot: string) => {
     setIsOpen(false);
@@ -49,18 +43,13 @@ export function ChatWelcomeProjectPicker({
       <PopoverTrigger asChild>
         <button
           type="button"
-          className="inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+          className="inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left font-medium text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
           title={projectRoot ?? undefined}
           aria-label={t('chatWelcomeProjectPickerLabel')}
           disabled={!selectable || isSaving}
         >
           <FolderOpen className="h-4 w-4 shrink-0" />
           <span className="truncate">{projectLabel}</span>
-          {isDefaultProject ? (
-            <span className="shrink-0 text-xs font-normal text-muted-foreground/70">
-              {t('chatWelcomeProjectDefaultBadge')}
-            </span>
-          ) : null}
           <ChevronDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" />
         </button>
       </PopoverTrigger>
@@ -78,7 +67,7 @@ export function ChatWelcomeProjectPicker({
               <button
                 key={option.projectRoot}
                 type="button"
-                className="flex w-full min-w-0 items-start gap-2 rounded-xl px-2 py-2 text-left transition-colors hover:bg-accent"
+                className="flex w-full min-w-0 items-start gap-2 rounded-xl px-2 py-2 text-left transition-colors hover:bg-[var(--interaction-hover)]"
                 title={option.projectRoot}
                 onClick={() => {
                   void selectProjectRoot(option.projectRoot);
@@ -111,7 +100,7 @@ export function ChatWelcomeProjectPicker({
         <div className="shrink-0 border-t border-border p-1.5">
           <button
             type="button"
-            className="flex w-full items-center gap-2 rounded-xl px-2.5 py-2 text-left text-[13px] font-semibold text-foreground transition-colors hover:bg-accent"
+            className="flex w-full items-center gap-2 rounded-xl px-2.5 py-2 text-left text-[13px] font-semibold text-foreground transition-colors hover:bg-[var(--interaction-hover)]"
             onClick={() => {
               setIsOpen(false);
               onOpenProjectDialog();

package/src/features/chat/features/welcome/components/chat-welcome-prompt-suggestions.tsx

@@ -0,0 +1,37 @@
+import { t } from '@/shared/lib/i18n';
+
+const WELCOME_PROMPT_SUGGESTIONS = [
+  {
+    labelKey: 'chatWelcomeSuggestion1Label' as const,
+    promptKey: 'chatWelcomeSuggestion1Prompt' as const,
+  },
+  {
+    labelKey: 'chatWelcomeSuggestion2Label' as const,
+    promptKey: 'chatWelcomeSuggestion2Prompt' as const,
+  },
+  {
+    labelKey: 'chatWelcomeSuggestion3Label' as const,
+    promptKey: 'chatWelcomeSuggestion3Prompt' as const,
+  },
+];
+
+export function ChatWelcomePromptSuggestions({
+  onSelectPrompt,
+}: {
+  onSelectPrompt: (prompt: string) => void;
+}) {
+  return (
+    <div className="mt-5 flex flex-wrap justify-center gap-2">
+      {WELCOME_PROMPT_SUGGESTIONS.map((suggestion) => (
+        <button
+          key={suggestion.labelKey}
+          type="button"
+          onClick={() => onSelectPrompt(t(suggestion.promptKey))}
+          className="rounded-full bg-muted/55 px-3.5 py-2 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+        >
+          {t(suggestion.labelKey)}
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/features/chat/features/welcome/components/chat-welcome-session-type-picker.tsx

@@ -39,7 +39,7 @@ export function ChatWelcomeSessionTypePicker({
       <PopoverTrigger asChild>
         <button
           type="button"
-          className="inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+          className="inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left font-medium text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
           aria-label={t('chatWelcomeSessionTypePickerLabel')}
         >
           {selectedOption.icon?.src ? (

package/src/features/chat/features/welcome/components/chat-welcome.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import { useState } from 'react';
 import { ChatSessionProjectDialog } from '@/features/chat/features/session/components/session-header/chat-session-project-dialog';
 import { ChatWelcomeAgentPicker } from '@/features/chat/features/welcome/components/chat-welcome-agent-picker';
-import { ChatWelcomeCapabilityGrid } from '@/features/chat/features/welcome/components/chat-welcome-capability-grid';
+import { ChatWelcomePromptSuggestions } from '@/features/chat/features/welcome/components/chat-welcome-prompt-suggestions';
 import { ChatWelcomeProjectPicker } from '@/features/chat/features/welcome/components/chat-welcome-project-picker';
 import { ChatWelcomeSessionTypePicker } from '@/features/chat/features/welcome/components/chat-welcome-session-type-picker';
 import type { ChatWelcomeProjectOption } from '@/features/chat/features/welcome/utils/chat-welcome-project-options.utils';
@@ -61,45 +61,47 @@ export function ChatWelcome({
   const selectableProjectRoot = Boolean(onSelectProjectRoot);
 
   return (
-    <div className="flex min-h-full items-center justify-center px-4 py-8 sm:p-8">
-      <div className="min-w-0 w-full max-w-[min(760px,100%)]">
+    <div className="flex min-h-full items-center justify-center px-4 py-10 sm:p-8">
+      <div className="w-full min-w-0 max-w-[min(680px,100%)]">
         <div className="text-center">
-          <h2 className="text-2xl font-semibold text-foreground sm:text-3xl">
+          <h2 className="text-2xl font-semibold leading-tight text-foreground sm:text-[2rem]">
             {t('chatWelcomeTitle')}
           </h2>
-          <p className="mt-3 text-sm font-medium text-muted-foreground sm:text-base">
-            {t('chatWelcomeSubtitle')}
-          </p>
         </div>
 
-        {inputSlot ? <div className="mt-8">{inputSlot}</div> : null}
+        {inputSlot ? <div className="mt-6">{inputSlot}</div> : null}
 
-        <div className="mt-3 flex flex-wrap items-center gap-2 px-1 text-sm text-muted-foreground">
-          {onSelectProjectRoot ? (
-            <ChatWelcomeProjectPicker
-              defaultProjectRoot={defaultProjectRoot}
-              isSaving={isProjectSaving}
-              projectOptions={projectOptions}
-              projectRoot={resolvedProjectRoot}
-              selectable={selectableProjectRoot}
-              onOpenProjectDialog={() => setIsProjectDialogOpen(true)}
-              onSelectProjectRoot={saveProjectRoot}
+        <div className="mt-2 flex justify-center px-1">
+          <div
+            role="group"
+            aria-label={t('chatWelcomeContextLabel')}
+            className="flex min-w-0 max-w-full flex-wrap items-center justify-center gap-0.5 rounded-xl bg-muted/40 p-1 text-sm text-muted-foreground"
+          >
+            {onSelectProjectRoot ? (
+              <ChatWelcomeProjectPicker
+                isSaving={isProjectSaving}
+                projectOptions={projectOptions}
+                projectRoot={resolvedProjectRoot}
+                selectable={selectableProjectRoot}
+                onOpenProjectDialog={() => setIsProjectDialogOpen(true)}
+                onSelectProjectRoot={saveProjectRoot}
+              />
+            ) : null}
+            <ChatWelcomeAgentPicker
+              agents={agents}
+              selectedAgent={selectedAgent}
+              selectedAgentId={selectedAgentId}
+              onSelectAgent={onSelectAgent}
             />
-          ) : null}
-          <ChatWelcomeAgentPicker
-            agents={agents}
-            selectedAgent={selectedAgent}
-            selectedAgentId={selectedAgentId}
-            onSelectAgent={onSelectAgent}
-          />
-          <ChatWelcomeSessionTypePicker
-            options={sessionTypeOptions}
-            selectedSessionType={selectedSessionType}
-            onSelectSessionType={onSelectSessionType}
-          />
+            <ChatWelcomeSessionTypePicker
+              options={sessionTypeOptions}
+              selectedSessionType={selectedSessionType}
+              onSelectSessionType={onSelectSessionType}
+            />
+          </div>
         </div>
 
-        <ChatWelcomeCapabilityGrid onSelectPrompt={onSelectPrompt} />
+        <ChatWelcomePromptSuggestions onSelectPrompt={onSelectPrompt} />
       </div>
 
       {onSelectProjectRoot ? (

package/src/features/chat/features/workspace/components/__tests__/chat-session-workspace-panel-content.test.tsx

@@ -113,7 +113,7 @@ it("shows all session workspace entries in the overview", async () => {
     name: /Child sessions/,
   });
   const cronJobsButton = screen.getByRole("button", {
-    name: /Session cron jobs/,
+    name: /Scheduled tasks/,
   });
 
   expect((childSessionsButton as HTMLButtonElement).disabled).toBe(false);

package/src/features/chat/features/workspace/components/__tests__/chat-session-workspace-panel.test.tsx

@@ -96,7 +96,7 @@ describe("ChatSessionWorkspacePanel", () => {
     await user.click(screen.getByRole("button", { name: "Refresh preview" }));
 
     expect(mocks.invalidateQueries).toHaveBeenCalledWith({
-      queryKey: ["server-path-read", "README.md", null],
+      queryKey: ["server-path-read", "README.md", null, null],
     });
     expect(mocks.invalidateQueries).toHaveBeenCalledWith({
       queryKey: ["server-path-browse", "README.md", "", true],

package/src/features/chat/managers/__tests__/chat-session-list.manager.test.ts

@@ -70,6 +70,18 @@ function resetChatSessionListManagerState() {
 describe("ChatSessionListManager draft and selection flow", () => {
   beforeEach(resetChatSessionListManagerState);
 
+  it("clears the route-derived session selection outside session routes", () => {
+    const manager = new ChatSessionListManager(
+      {} as ConstructorParameters<typeof ChatSessionListManager>[0],
+    );
+
+    manager.syncRouteSessionSelection(null);
+
+    expect(
+      useChatSessionListStore.getState().snapshot.selectedSessionKey,
+    ).toBeNull();
+  });
+
   it("applies the requested session type when creating a session", () => {
     const uiManager = {
       goToChatRoot: vi.fn(),
@@ -93,7 +105,7 @@ describe("ChatSessionListManager draft and selection flow", () => {
     });
     expect(
       useChatSessionListStore.getState().snapshot.selectedSessionKey,
-    ).toBeNull();
+    ).toBe("session-1");
     expect(useChatThreadStore.getState().snapshot.sessionKey).toBeNull();
     expect(
       useChatThreadStore.getState().snapshot.hasSubmittedDraftMessage,
@@ -126,7 +138,7 @@ describe("ChatSessionListManager draft and selection flow", () => {
     );
     expect(
       useChatSessionListStore.getState().snapshot.selectedSessionKey,
-    ).toBeNull();
+    ).toBe("session-1");
     expect(useChatThreadStore.getState().snapshot.sessionKey).toBeNull();
     expect(
       useChatThreadStore.getState().snapshot.hasSubmittedDraftMessage,
@@ -198,7 +210,7 @@ describe("ChatSessionListManager draft and selection flow", () => {
 
     expect(
       useChatSessionListStore.getState().snapshot.selectedSessionKey,
-    ).toBeNull();
+    ).toBe("session-1");
     expect(uiManager.navigateTo).toHaveBeenCalledWith(
       "/chat/draft",
       expect.any(Object),

package/src/features/chat/managers/__tests__/chat-thread.manager.test.ts

@@ -836,7 +836,7 @@ describe('ChatThreadManager visible workspace selection', () => {
 });
 
 describe('ChatThreadManager deletion', () => {
-  it('clears the selected thread state after deleting the current session', async () => {
+  it('clears thread state while leaving route-derived selection to navigation', async () => {
     const removeQueries = vi.spyOn(appQueryClient, 'removeQueries').mockImplementation(async () => undefined);
     const uiManager = {
       goToSession: vi.fn(),
@@ -844,13 +844,7 @@ describe('ChatThreadManager deletion', () => {
       goToProviders: vi.fn(),
       confirm: vi.fn(async () => true),
     } as unknown as ConstructorParameters<typeof ChatThreadManager>[0];
-    const sessionListManager = {
-      setSelectedSessionKey: vi.fn((value: string | null) => {
-        useChatSessionListStore.getState().setSnapshot({
-          selectedSessionKey: value,
-        });
-      }),
-    } as unknown as ConstructorParameters<typeof ChatThreadManager>[1];
+    const sessionListManager = {} as ConstructorParameters<typeof ChatThreadManager>[1];
     const manager = new ChatThreadManager(
       uiManager,
       sessionListManager,
@@ -858,8 +852,7 @@ describe('ChatThreadManager deletion', () => {
 
     await manager.deleteSession();
 
-    expect(sessionListManager.setSelectedSessionKey).toHaveBeenCalledWith(null);
-    expect(useChatSessionListStore.getState().snapshot.selectedSessionKey).toBeNull();
+    expect(useChatSessionListStore.getState().snapshot.selectedSessionKey).toBe('parent-session-1');
     expect(useChatThreadStore.getState().snapshot).toMatchObject({
       sessionKey: null,
       canDeleteSession: false,

package/src/features/chat/managers/chat-session-list.manager.ts

@@ -100,9 +100,8 @@ export class ChatSessionListManager {
     this.setSelectedAgentId(normalizedAgentId);
   };
 
-  setSelectedSessionKey = (next: SetStateAction<string | null>) => {
+  private setSelectedSessionKey = (value: string | null) => {
     const prev = useChatSessionListStore.getState().snapshot.selectedSessionKey;
-    const value = this.resolveUpdateValue(prev, next);
     if (value === prev) {
       return;
     }
@@ -111,24 +110,8 @@ export class ChatSessionListManager {
       .setSnapshot({ selectedSessionKey: value });
   };
 
-  syncRouteSessionSelection = (params: {
-    isChatView: boolean;
-    routeSessionKey: string | null;
-  }) => {
-    const { isChatView, routeSessionKey } = params;
-    if (!isChatView) {
-      return;
-    }
-    const { selectedSessionKey } = useChatSessionListStore.getState().snapshot;
-    if (routeSessionKey) {
-      if (selectedSessionKey !== routeSessionKey) {
-        this.setSelectedSessionKey(routeSessionKey);
-      }
-      return;
-    }
-    if (selectedSessionKey !== null) {
-      this.setSelectedSessionKey(null);
-    }
+  syncRouteSessionSelection = (routeSessionKey: string | null) => {
+    this.setSelectedSessionKey(routeSessionKey);
   };
 
   setListMode = (next: SetStateAction<"time-first" | "project-first">) => {
@@ -207,9 +190,6 @@ export class ChatSessionListManager {
     );
     const normalizedProjectRoot = normalizeSessionProjectRootValue(projectRoot);
     const normalizedPrompt = prompt?.trim() || null;
-    useChatSessionListStore.getState().setSnapshot({
-      selectedSessionKey: null,
-    });
     this.syncDraftThreadState();
     this.uiManager.navigateTo(CHAT_DRAFT_SESSION_PATH, {
       replace: this.uiManager.isAtChatRoot(),

package/src/features/chat/managers/chat-thread.manager.ts

@@ -75,10 +75,7 @@ export class ChatThreadManager {
     useChatThreadStore.getState().setSnapshot(patch);
   };
 
-  private clearDeletedSessionState = (sessionKey: string) => {
-    if (useChatSessionListStore.getState().snapshot.selectedSessionKey === sessionKey) {
-      this.sessionListManager.setSelectedSessionKey(null);
-    }
+  private clearDeletedSessionState = () => {
     useChatThreadStore.getState().setSnapshot({
       sessionKey: null,
       sessionTypeLabel: null,
@@ -569,7 +566,7 @@ export class ChatThreadManager {
       await deleteNcpSessionApi(selectedSessionKey);
       deleteNcpSessionSummaryInQueryClient(appQueryClient, selectedSessionKey);
       appQueryClient.removeQueries({ queryKey: ['ncp-session-messages', selectedSessionKey] });
-      this.clearDeletedSessionState(selectedSessionKey);
+      this.clearDeletedSessionState();
       this.uiManager.goToChatRoot({ replace: true });
     } finally {
       useChatThreadStore.getState().setSnapshot({ isDeletePending: false });

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

@@ -39,17 +39,11 @@ vi.mock('@/shared/hooks/use-confirm-dialog', () => ({
 vi.mock('@/features/chat/components/layout/chat-page-shell', () => ({
   ChatPageLayout: () => <div data-testid="chat-page-layout" />,
   useChatSessionSync: (params: {
-    syncRouteSessionSelection: (value: {
-      isChatView: boolean;
-      routeSessionKey: string | null;
-    }) => void;
+    routeSessionKey: string | null;
+    syncRouteSessionSelection: (routeSessionKey: string | null) => void;
   }) => {
     mocks.useChatSessionSync(params);
-    const { syncRouteSessionSelection } = params;
-    syncRouteSessionSelection({
-      isChatView: true,
-      routeSessionKey: null,
-    });
+    params.syncRouteSessionSelection(params.routeSessionKey);
   },
 }));
 

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

@@ -76,7 +76,6 @@ function NcpChatPageContent({ view }: ChatPageProps) {
     sessionKey: sessionKey ?? null,
   });
   useChatSessionSync({
-    view,
     routeSessionKey,
     syncRouteSessionSelection:
       presenter.chatSessionListManager.syncRouteSessionSelection,

package/src/features/chat/types/chat-input-bar.types.ts

@@ -44,6 +44,7 @@ export type ChatInputBarAdapterTexts = {
   modelSearchEmptyLabel: string;
   favoriteModelLabel: string;
   unfavoriteModelLabel: string;
+  manageModelsLabel: string;
   thinkingLabels: Record<ChatThinkingLevel, string>;
   noModelOptionsLabel: string;
   configureProviderLabel: string;

package/src/features/cron/components/cron-task-discovery.tsx

@@ -94,7 +94,7 @@ export const CronTaskComposer = forwardRef<
         ref={ref}
         value={value}
         onChange={(event) => onChange(event.target.value)}
-        className="pl-9 pr-11 focus:border-border/75"
+        className="pl-9 pr-11"
         placeholder={t("cronComposerPlaceholder")}
         aria-label={t("cronComposerLabel")}
       />

package/src/features/marketplace/components/marketplace-page-parts.tsx

@@ -37,7 +37,7 @@ export function FilterPanel({
             value={searchText}
             onChange={(event) => onSearchTextChange(event.target.value)}
             placeholder={searchPlaceholder}
-            className="h-9 w-full rounded-xl border border-border/75 bg-card pl-9 pr-9 text-sm transition-colors focus:outline-none focus:ring-0 focus:border-border"
+            className="h-9 w-full rounded-xl border border-border/75 bg-card pl-9 pr-9 text-sm transition-colors focus:outline-none focus:ring-0"
           />
           {isRefreshing && (
             <Loader2

package/src/features/notifications/components/__tests__/app-notification-toast.test.tsx

@@ -24,6 +24,9 @@ describe("AppNotificationToast", () => {
       name: "Open the background task reply",
     });
     expect(notification.getAttribute("href")).toBe("/chat/session-1");
+    expect(notification.className).not.toMatch(
+      /(?:hover|active):bg-\S*\/\d+/,
+    );
     expect(screen.getByText("Background task")).toBeTruthy();
     expect(screen.getByText("The requested summary is ready.")).toBeTruthy();
 

package/src/features/notifications/components/app-notification-toast.tsx

@@ -10,7 +10,7 @@ export type AppNotificationToastProps = {
 };
 
 const NOTIFICATION_CARD_CLASS =
-  "group ml-auto flex min-h-[74px] w-[320px] max-w-[calc(100vw-2rem)] items-center gap-3 rounded-[20px] border border-border/80 bg-background px-[18px] py-3 text-left text-foreground shadow-[0_8px_18px_rgba(0,0,0,0.12),0_2px_5px_rgba(0,0,0,0.06)] transition-colors duration-150 hover:bg-muted/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background active:bg-muted/20 motion-reduce:transition-none";
+  "group ml-auto flex min-h-[74px] w-[320px] max-w-[calc(100vw-2rem)] items-center gap-3 rounded-[20px] border border-border/80 bg-background px-[18px] py-3 text-left text-foreground shadow-[0_8px_18px_rgba(0,0,0,0.12),0_2px_5px_rgba(0,0,0,0.06)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background";
 
 function AppNotificationContent({
   title,

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

@@ -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-muted-foreground hover:bg-accent hover:text-accent-foreground',
+        destructive ? 'text-destructive hover:bg-destructive/10' : 'text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground',
       )}
       disabled={disabled}
       onClick={onClick}

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

@@ -17,7 +17,7 @@ export function PanelAppToolbar({
       <button
         type="button"
         onClick={onOpenApps}
-        className="inline-flex shrink-0 items-center rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+        className="inline-flex shrink-0 items-center rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground"
         title={t('appsTitle')}
         aria-label={t('appsTitle')}
       >
@@ -32,7 +32,7 @@ export function PanelAppToolbar({
       <button
         type="button"
         onClick={onRefresh}
-        className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+        className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground"
         title={t('panelAppsRefreshCurrent')}
         aria-label={t('panelAppsRefreshCurrent')}
       >

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

@@ -104,7 +104,7 @@ export function PanelAppsList({
             <TooltipProvider delayDuration={250}>
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <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>
+                  <button type="button" className="rounded p-0.5 text-muted-foreground/70 transition-colors hover:bg-[var(--interaction-hover)] 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,7 +114,7 @@ export function PanelAppsList({
         <button
           type="button"
           onClick={() => void panelApps.refetch()}
-          className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+          className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground"
           title={t('panelAppsRefresh')}
           aria-label={t('panelAppsRefresh')}
         >
@@ -204,7 +204,7 @@ function PanelAppsEmptyGuide({
         <button
           type="button"
           onClick={onRefresh}
-          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-1 focus-visible:ring-border"
+          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-[var(--interaction-hover)] hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
         >
           <RefreshCw className="h-3.5 w-3.5" />
           {t('panelAppsRefresh')}
@@ -245,7 +245,7 @@ function PanelAppsEmptyGuideStep({
       <button
         type="button"
         onClick={onAction}
-        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-1 focus-visible:ring-border"
+        className="flex w-full gap-2 rounded-md bg-muted/60 px-3 py-2.5 text-left transition-colors hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
       >
         {content}
       </button>

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

@@ -463,7 +463,7 @@ function ServiceAppMenuItem({
       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-muted-foreground hover:bg-accent hover:text-accent-foreground',
+        destructive ? 'text-destructive hover:bg-destructive/10' : 'text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground',
       )}
       disabled={disabled}
       onClick={onClick}