@nextclaw/ui 0.15.1 → 0.15.2

package/src/features/chat/features/workspace/components/chat-session-workspace-file-preview.tsx

@@ -4,12 +4,20 @@ import type {
   ChatFileOperationBlockViewModel,
   ChatFilePreviewViewer,
 } from "@nextclaw/agent-chat-ui";
-import { ChatMessageMarkdown, FileOperationCodeSurface } from "@nextclaw/agent-chat-ui";
+import {
+  ChatMessageMarkdown,
+  FileOperationCodeSurface,
+} from "@nextclaw/agent-chat-ui";
 import type { ChatWorkspaceFileTab } from "@/features/chat/stores/chat-thread.store";
+import { ChatSessionWorkspaceDirectoryBrowser } from "./chat-session-workspace-directory-browser";
 import { ChatSessionWorkspaceFileBreadcrumbs } from "./chat-session-workspace-file-breadcrumbs";
+import { useServerPathBrowse } from "@/shared/hooks/use-server-path-browse";
 import { useServerPathRead } from "@/shared/hooks/use-server-path-read";
 import { buildServerPathContentUrl } from "@/shared/lib/api";
-import { buildLineDiff, buildPreviewLines } from "@/features/chat/features/message/utils/file-operation/line-builder.utils";
+import {
+  buildLineDiff,
+  buildPreviewLines,
+} from "@/features/chat/features/message/utils/file-operation/line-builder.utils";
 import { t } from "@/shared/lib/i18n";
 import { buildWorkspaceFileBreadcrumb } from "@/shared/lib/session-project";
 import { cn } from "@/shared/lib/utils";
@@ -31,6 +39,13 @@ function resolveFilePreviewViewer(params: {
   return params.viewer === "rendered" && /\.html?$/i.test(params.path) ? "rendered" : "source";
 }
 
+function appendPreviewRefreshVersion(url: string, refreshVersion: number): string {
+  if (refreshVersion <= 0) {
+    return url;
+  }
+  return `${url}${url.includes("?") ? "&" : "?"}refresh=${refreshVersion}`;
+}
+
 function buildPreviewBlock(params: {
   path: string;
   text: string;
@@ -161,6 +176,7 @@ function WorkspaceHtmlRenderedPreview({
 }
 
 function WorkspacePreviewBody({
+  directoryQuery,
   onFileOpen,
   previewBlock,
   previewKind,
@@ -169,6 +185,7 @@ function WorkspacePreviewBody({
   previewUrl,
   previewViewer,
 }: {
+  directoryQuery: ReturnType<typeof useServerPathBrowse>;
   onFileOpen: (action: ChatFileOpenActionViewModel) => void;
   previewBlock: ChatFileOperationBlockViewModel | null;
   previewKind: "text" | "markdown" | "binary";
@@ -177,8 +194,26 @@ function WorkspacePreviewBody({
   previewUrl: string | null;
   previewViewer: "source" | "rendered";
 }) {
-  if (previewQuery.isLoading && !previewBlock) {
-    return <WorkspaceFilePreviewStatus text={t("chatWorkspaceLoadingFile")} />;
+  if (directoryQuery.data) {
+    return (
+      <ChatSessionWorkspaceDirectoryBrowser
+        browseQuery={directoryQuery}
+        onFileOpen={onFileOpen}
+        renderStatus={(params) => <WorkspaceFilePreviewStatus {...params} />}
+      />
+    );
+  }
+
+  if (directoryQuery.isLoading && previewQuery.error && !previewBlock) {
+    return (
+      <WorkspaceFilePreviewStatus text={t("chatWorkspaceLoadingDirectory")} />
+    );
+  }
+
+  if ((directoryQuery.isLoading || previewQuery.isLoading) && !previewBlock) {
+    return (
+      <WorkspaceFilePreviewStatus text={t("chatWorkspaceLoadingPreview")} />
+    );
   }
 
   if (previewQuery.data?.kind === "binary") {
@@ -229,6 +264,7 @@ function WorkspacePreviewBody({
 
 type ChatSessionWorkspaceFilePreviewProps = {
   file: ChatWorkspaceFileTab;
+  refreshVersion?: number;
   sessionProjectRoot: string | null;
   sessionWorkingDir: string | null;
   onFileOpen: (action: ChatFileOpenActionViewModel) => void;
@@ -236,6 +272,7 @@ type ChatSessionWorkspaceFilePreviewProps = {
 
 export function ChatSessionWorkspaceFilePreview({
   file,
+  refreshVersion = 0,
   sessionProjectRoot,
   sessionWorkingDir,
   onFileOpen,
@@ -246,6 +283,12 @@ export function ChatSessionWorkspaceFilePreview({
     basePath: sessionWorkingDir,
     enabled: isPreviewMode,
   });
+  const directoryQuery = useServerPathBrowse({
+    path: file.path,
+    basePath: sessionWorkingDir,
+    includeFiles: true,
+    enabled: isPreviewMode,
+  });
   const diffBlock = useMemo(
     () => (file.viewMode === "diff" ? buildDiffBlock(file) : null),
     [file],
@@ -256,14 +299,21 @@ export function ChatSessionWorkspaceFilePreview({
     path: previewQuery.data?.resolvedPath ?? file.path,
     serverKind: previewQuery.data?.kind,
   });
-  const resolvedPath = previewQuery.data?.resolvedPath ?? file.path;
+  const resolvedPath =
+    directoryQuery.data?.currentPath ??
+    previewQuery.data?.resolvedPath ??
+    file.path;
+  const previewPathKind = directoryQuery.data ? "directory" : "file";
   const previewViewer = resolveFilePreviewViewer({
     path: resolvedPath,
     viewer: file.previewViewer,
   });
   const previewUrl =
     previewViewer === "rendered" && previewQuery.data?.resolvedPath
-      ? buildServerPathContentUrl(previewQuery.data.resolvedPath)
+      ? appendPreviewRefreshVersion(
+          buildServerPathContentUrl(previewQuery.data.resolvedPath),
+          refreshVersion,
+        )
       : null;
   const previewBlock = useMemo(() => {
     if (!isPreviewMode || !previewText) {
@@ -289,12 +339,20 @@ export function ChatSessionWorkspaceFilePreview({
     () =>
       buildWorkspaceFileBreadcrumb({
         path: resolvedPath,
+        kind: previewPathKind,
         sessionProjectRoot: breadcrumbBasePath,
         line: file.line,
         column: file.column,
         truncated: isTruncated,
       }),
-    [breadcrumbBasePath, file.column, file.line, isTruncated, resolvedPath],
+    [
+      breadcrumbBasePath,
+      file.column,
+      file.line,
+      isTruncated,
+      previewPathKind,
+      resolvedPath,
+    ],
   );
 
   return (
@@ -309,6 +367,7 @@ export function ChatSessionWorkspaceFilePreview({
           <WorkspaceDiffBody diffBlock={diffBlock} />
         ) : (
           <WorkspacePreviewBody
+            directoryQuery={directoryQuery}
             onFileOpen={onFileOpen}
             previewBlock={previewBlock}
             previewKind={previewKind}

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

@@ -10,6 +10,7 @@ import { t } from "@/shared/lib/i18n";
 
 type ChatSessionWorkspacePanelContentProps = {
   activeSelection: WorkspaceSelection;
+  filePreviewRefreshVersion: number;
   sessionCronJobs: readonly CronJobView[];
   sessionProjectRoot: string | null;
   sessionWorkingDir: string | null;
@@ -67,6 +68,7 @@ function WorkspaceSideChatDraftHeader() {
 
 export function ChatSessionWorkspacePanelContent({
   activeSelection,
+  filePreviewRefreshVersion,
   sessionCronJobs,
   sessionProjectRoot,
   sessionWorkingDir,
@@ -113,6 +115,7 @@ export function ChatSessionWorkspacePanelContent({
     return (
       <ChatSessionWorkspaceFilePreview
         file={activeSelection.file}
+        refreshVersion={filePreviewRefreshVersion}
         sessionProjectRoot={sessionProjectRoot}
         sessionWorkingDir={sessionWorkingDir}
         onFileOpen={presenter.chatThreadManager.openFilePreview}

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

@@ -1,4 +1,15 @@
-import { AlarmClock, ArrowLeft, ArrowRight, FileCode2, MessageSquarePlus, MessageSquareText, X } from "lucide-react";
+import {
+  AlarmClock,
+  ArrowLeft,
+  ArrowRight,
+  FileCode2,
+  Maximize2,
+  MessageSquarePlus,
+  MessageSquareText,
+  Minimize2,
+  RefreshCw,
+  X,
+} from "lucide-react";
 import type { WorkspaceTabViewModel } from "@/features/chat/features/workspace/utils/chat-workspace-panel-view-model.utils";
 import { AgentIdentityAvatar } from "@/shared/components/common/agent-identity";
 import {
@@ -56,22 +67,54 @@ function buildCompactWorkspaceTabs(
 export function WorkspaceTabsBar({
   canGoBack,
   canGoForward,
+  isMaximized = false,
   onClose,
   onGoBack,
   onGoForward,
+  onRefreshFile,
+  onToggleMaximize,
   tabs,
 }: {
   canGoBack: boolean;
   canGoForward: boolean;
+  isMaximized?: boolean;
   onClose: () => void;
   onGoBack: () => void;
   onGoForward: () => void;
+  onRefreshFile?: () => void;
+  onToggleMaximize?: () => void;
   tabs: readonly WorkspaceTabViewModel[];
 }) {
   const compactTabs = buildCompactWorkspaceTabs(tabs);
   const actions: CompactTabStripAction[] = [
     { key: "back", icon: <ArrowLeft className="h-4 w-4" />, label: t("chatWorkspaceBack"), disabled: !canGoBack, onClick: onGoBack },
     { key: "forward", icon: <ArrowRight className="h-4 w-4" />, label: t("chatWorkspaceForward"), disabled: !canGoForward, onClick: onGoForward },
+    ...(onRefreshFile
+      ? [
+          {
+            key: "refresh-file",
+            icon: <RefreshCw className="h-4 w-4" />,
+            label: t("chatWorkspaceRefreshFile"),
+            onClick: onRefreshFile,
+          },
+        ]
+      : []),
+    ...(onToggleMaximize
+      ? [
+          {
+            key: "maximize",
+            icon: isMaximized ? (
+              <Minimize2 className="h-4 w-4" />
+            ) : (
+              <Maximize2 className="h-4 w-4" />
+            ),
+            label: isMaximized
+              ? t("chatWorkspaceRestorePanel")
+              : t("chatWorkspaceMaximizePanel"),
+            onClick: onToggleMaximize,
+          },
+        ]
+      : []),
     { key: "close", icon: <X className="h-4 w-4" />, label: t("chatWorkspaceClosePanel"), onClick: onClose },
   ];
 

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

@@ -1,4 +1,5 @@
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
 import type { CronJobView } from "@/shared/lib/api";
 import { useNcpChildSessionTabsView } from "@/features/chat/features/ncp/hooks/use-ncp-child-session-tabs-view";
 import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
@@ -22,6 +23,8 @@ import {
   canGoBackInNavigationHistory,
   canGoForwardInNavigationHistory,
 } from "@/shared/lib/navigation-history";
+import { buildServerPathBrowseQueryKey } from "@/shared/hooks/use-server-path-browse";
+import { buildServerPathReadQueryKey } from "@/shared/hooks/use-server-path-read";
 
 type ChatSessionWorkspacePanelProps = {
   sessionKey: string | null;
@@ -55,6 +58,9 @@ export function ChatSessionWorkspacePanel({
   displayMode = "docked",
 }: ChatSessionWorkspacePanelProps) {
   const presenter = usePresenter();
+  const queryClient = useQueryClient();
+  const [isMaximized, setIsMaximized] = useState(false);
+  const [filePreviewRefreshVersion, setFilePreviewRefreshVersion] = useState(0);
   const resolvedChildTabs = useNcpChildSessionTabsView(childSessionTabs);
   const optimisticReadAtBySessionKey = useChatSessionListStore(
     (state) => state.optimisticReadAtBySessionKey,
@@ -110,30 +116,66 @@ export function ChatSessionWorkspacePanel({
     return null;
   }
 
+  const isContainerMaximized = displayMode === "docked" && isMaximized;
+  const isOverlayPanel = displayMode === "overlay" || isContainerMaximized;
+  const activeFile =
+    activeSelection.kind === "file" && activeSelection.file.viewMode === "preview"
+      ? activeSelection.file
+      : null;
+  const refreshActiveFile = activeFile
+    ? () => {
+        void queryClient.invalidateQueries({
+          queryKey: buildServerPathReadQueryKey({
+            path: activeFile.path,
+            basePath: sessionWorkingDir,
+          }),
+        });
+        void queryClient.invalidateQueries({
+          queryKey: buildServerPathBrowseQueryKey({
+            path: activeFile.path,
+            basePath: sessionWorkingDir,
+            includeFiles: true,
+          }),
+        });
+        setFilePreviewRefreshVersion((value) => value + 1);
+      }
+    : undefined;
+
   return (
     <ResizableRightPanel
+      data-testid="chat-session-workspace-panel"
       className={cn(
-        displayMode === "overlay"
+        isOverlayPanel
           ? "bg-white"
           : "hidden border-gray-200/70 bg-white/95 backdrop-blur-sm md:flex",
+        isContainerMaximized ? "shadow-xl" : null,
       )}
       defaultWidth={480}
       minWidth={360}
       maxWidth={860}
-      overlay={displayMode === "overlay"}
+      overlay={isOverlayPanel}
+      overlayScope={isContainerMaximized ? "container" : "viewport"}
     >
       <WorkspaceTabsBar
         tabs={workspaceTabs}
         canGoBack={canGoBackInNavigationHistory(workspaceHistory)}
         canGoForward={canGoForwardInNavigationHistory(workspaceHistory)}
+        isMaximized={isContainerMaximized}
         onGoBack={presenter.chatThreadManager.goBackWorkspacePanel}
         onGoForward={presenter.chatThreadManager.goForwardWorkspacePanel}
+        onRefreshFile={refreshActiveFile}
+        onToggleMaximize={
+          displayMode === "docked"
+            ? () => setIsMaximized((value) => !value)
+            : undefined
+        }
         onClose={presenter.chatThreadManager.closeWorkspacePanel}
       />
 
       <div className="flex min-h-0 flex-1 flex-col bg-white">
         <ChatSessionWorkspacePanelContent
           activeSelection={activeSelection}
+          filePreviewRefreshVersion={filePreviewRefreshVersion}
           sessionCronJobs={sessionCronJobs}
           sessionProjectRoot={sessionProjectRoot}
           sessionWorkingDir={sessionWorkingDir}

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

@@ -42,7 +42,10 @@ function resetChatSessionListManagerState() {
     snapshot: {
       ...useChatSessionListStore.getState().snapshot,
       selectedSessionKey: 'session-1',
-      listMode: 'time-first'
+      listMode: 'time-first',
+      pinnedSessionKeys: [],
+      pinnedProjectRoots: [],
+      collapsedProjectRoots: [],
     }
   });
   useChatThreadStore.setState({
@@ -191,6 +194,31 @@ describe('ChatSessionListManager list preference and read state', () => {
     });
   });
 
+  it('persists session and project list preferences through the list owner', () => {
+    const manager = new ChatSessionListManager(
+      {} as ConstructorParameters<typeof ChatSessionListManager>[0]
+    );
+
+    manager.toggleSessionPinned('session-2');
+    manager.toggleProjectPinned('/tmp/project-alpha');
+    manager.toggleProjectCollapsed('/tmp/project-alpha');
+
+    expect(useChatSessionListStore.getState().snapshot).toMatchObject({
+      pinnedSessionKeys: ['session-2'],
+      pinnedProjectRoots: ['/tmp/project-alpha'],
+      collapsedProjectRoots: ['/tmp/project-alpha'],
+    });
+    expect(persistStorage.get(chatSessionListModeStorageKey)).toMatchObject({
+      state: {
+        snapshot: {
+          pinnedSessionKeys: ['session-2'],
+          pinnedProjectRoots: ['/tmp/project-alpha'],
+          collapsedProjectRoots: ['/tmp/project-alpha'],
+        },
+      },
+    });
+  });
+
   it('marks a session as read through the session list owner boundary', () => {
     const manager = new ChatSessionListManager(
       {} as ConstructorParameters<typeof ChatSessionListManager>[0]
@@ -266,7 +294,10 @@ describe('ChatSessionListStore persistence', () => {
     useChatSessionListStore.setState({
       snapshot: {
         ...useChatSessionListStore.getState().snapshot,
-        listMode: 'time-first'
+        listMode: 'time-first',
+        pinnedSessionKeys: [],
+        pinnedProjectRoots: [],
+        collapsedProjectRoots: [],
       }
     });
   });

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

@@ -13,6 +13,17 @@ type WorkspaceChildReadState = {
   readAt?: string | null;
   runStatus?: string | null;
 };
+
+function toggleListValue(values: string[], value: string): string[] {
+  const normalizedValue = value.trim();
+  if (!normalizedValue) {
+    return values;
+  }
+  return values.includes(normalizedValue)
+    ? values.filter((item) => item !== normalizedValue)
+    : [normalizedValue, ...values];
+}
+
 export class ChatSessionListManager {
   constructor(private uiManager: ChatUiManager) {}
 
@@ -110,6 +121,27 @@ export class ChatSessionListManager {
     useChatSessionListStore.getState().setSnapshot({ listMode: value });
   };
 
+  toggleSessionPinned = (sessionKey: string) => {
+    const { pinnedSessionKeys } = useChatSessionListStore.getState().snapshot;
+    useChatSessionListStore.getState().setSnapshot({
+      pinnedSessionKeys: toggleListValue(pinnedSessionKeys, sessionKey),
+    });
+  };
+
+  toggleProjectPinned = (projectRoot: string) => {
+    const { pinnedProjectRoots } = useChatSessionListStore.getState().snapshot;
+    useChatSessionListStore.getState().setSnapshot({
+      pinnedProjectRoots: toggleListValue(pinnedProjectRoots, projectRoot),
+    });
+  };
+
+  toggleProjectCollapsed = (projectRoot: string) => {
+    const { collapsedProjectRoots } = useChatSessionListStore.getState().snapshot;
+    useChatSessionListStore.getState().setSnapshot({
+      collapsedProjectRoots: toggleListValue(collapsedProjectRoots, projectRoot),
+    });
+  };
+
   markSessionRead = (
     sessionKey: string | null | undefined,
     readAt: string | null | undefined,

package/src/features/chat/stores/chat-session-list.store.ts

@@ -7,6 +7,9 @@ export type ChatSessionListSnapshot = {
   selectedAgentId: string;
   query: string;
   listMode: ChatSessionListMode;
+  pinnedSessionKeys: string[];
+  pinnedProjectRoots: string[];
+  collapsedProjectRoots: string[];
 };
 
 const CHAT_SESSION_LIST_MODE_STORAGE_KEY = 'nextclaw.chat.session-list.mode';
@@ -15,6 +18,9 @@ const CHAT_SESSION_LIST_DEFAULT_MODE: ChatSessionListMode = 'time-first';
 type PersistedChatSessionListStore = {
   snapshot?: {
     listMode?: unknown;
+    pinnedSessionKeys?: unknown;
+    pinnedProjectRoots?: unknown;
+    collapsedProjectRoots?: unknown;
   };
 };
 
@@ -22,6 +28,13 @@ function isChatSessionListMode(value: unknown): value is ChatSessionListMode {
   return value === 'time-first' || value === 'project-first';
 }
 
+function normalizePersistedStringList(value: unknown): string[] {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+  return [...new Set(value.filter((item): item is string => typeof item === 'string').map((item) => item.trim()).filter(Boolean))];
+}
+
 function resolvePersistedChatSessionListMode(persistedState: unknown): ChatSessionListMode | null {
   if (!persistedState || typeof persistedState !== 'object') {
     return null;
@@ -75,7 +88,10 @@ const initialSnapshot: ChatSessionListSnapshot = {
   selectedSessionKey: null,
   selectedAgentId: 'main',
   query: '',
-  listMode: CHAT_SESSION_LIST_DEFAULT_MODE
+  listMode: CHAT_SESSION_LIST_DEFAULT_MODE,
+  pinnedSessionKeys: [],
+  pinnedProjectRoots: [],
+  collapsedProjectRoots: [],
 };
 
 function createSetSnapshotAction(set: ChatSessionListStoreSet) {
@@ -123,19 +139,26 @@ export const useChatSessionListStore = create<ChatSessionListStore>()(
       storage: createJSONStorage(() => window.localStorage),
       partialize: (state): PersistedChatSessionListStore => ({
         snapshot: {
-          listMode: state.snapshot.listMode
+          listMode: state.snapshot.listMode,
+          pinnedSessionKeys: state.snapshot.pinnedSessionKeys,
+          pinnedProjectRoots: state.snapshot.pinnedProjectRoots,
+          collapsedProjectRoots: state.snapshot.collapsedProjectRoots,
         }
       }),
       merge: (persistedState, currentState) => {
-        const listMode = resolvePersistedChatSessionListMode(persistedState);
-        if (!listMode) {
+        if (!persistedState || typeof persistedState !== 'object') {
           return currentState;
         }
+        const { snapshot } = persistedState as PersistedChatSessionListStore;
+        const listMode = resolvePersistedChatSessionListMode(persistedState);
         return {
           ...currentState,
           snapshot: {
             ...currentState.snapshot,
-            listMode
+            ...(listMode ? { listMode } : {}),
+            pinnedSessionKeys: normalizePersistedStringList(snapshot?.pinnedSessionKeys),
+            pinnedProjectRoots: normalizePersistedStringList(snapshot?.pinnedProjectRoots),
+            collapsedProjectRoots: normalizePersistedStringList(snapshot?.collapsedProjectRoots),
           }
         };
       }

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

@@ -266,21 +266,14 @@ export function McpMarketplacePage() {
   return (
     <PageLayout className="flex h-full min-h-0 flex-col pb-0 px-0">
       <div className="flex flex-col gap-6 w-full max-w-[1400px] h-full min-h-0 mx-auto">
-        
-        {/* Modern App Store Hero for MCP */}
-        <div className="relative overflow-hidden rounded-[32px] bg-gradient-to-br from-[#0F172A] via-[#1E1B4B] to-[#312E81] px-10 py-14 text-white shadow-xl isolate">
-          <div className="absolute top-0 right-0 -m-32 opacity-30 pointer-events-none mix-blend-screen scale-150 transform-gpu">
-            <div className="w-[500px] h-[500px] rounded-full bg-gradient-to-tl from-fuchsia-500/40 via-purple-500/30 to-indigo-500/20 blur-[80px]"></div>
-          </div>
-          <div className="absolute bottom-0 left-0 -m-32 opacity-20 pointer-events-none mix-blend-screen transform-gpu">
-            <div className="w-[400px] h-[400px] rounded-full bg-gradient-to-tr from-blue-500/40 to-cyan-500/20 blur-[80px]"></div>
-          </div>
-          
+        <div className="relative isolate overflow-hidden rounded-[28px] border border-border bg-card px-10 py-12 text-card-foreground shadow-card">
+          <div className="absolute inset-y-0 left-0 w-1 bg-primary/80" />
+
           <div className="relative z-10 flex flex-col gap-3">
-            <h1 className="text-[38px] font-extrabold tracking-[-0.02em] leading-tight drop-shadow-sm text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white/70">
+            <h1 className="text-[38px] font-extrabold leading-tight text-foreground">
               {t("marketplaceMcpPageTitle")}
             </h1>
-            <p className="text-[17px] font-medium text-purple-100/70 max-w-2xl leading-relaxed tracking-wide">
+            <p className="max-w-2xl text-[17px] font-medium leading-relaxed text-muted-foreground">
               {t("marketplaceMcpPageDescription")}
             </p>
           </div>

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

@@ -38,11 +38,11 @@ export function PanelAppListItem({
   };
 
   return (
-    <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="group w-full min-w-0 rounded-lg border border-border/60 bg-card px-2.5 py-2.5 transition-colors hover:bg-muted/40">
       <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-accent text-base text-accent-foreground">
+            <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-muted text-base text-muted-foreground">
               <PanelAppIcon icon={entry.icon} title={entry.title} />
             </span>
             <span className="block min-w-0 flex-1 truncate text-sm font-medium text-foreground">{entry.title}</span>
@@ -52,22 +52,22 @@ export function PanelAppListItem({
           ) : null}
           <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">
+        <div className="flex shrink-0 items-center gap-0.5 opacity-70 transition-opacity group-hover:opacity-100">
           <button
             type="button"
             onClick={handleFavorite}
             disabled={favoritePending}
-            className="rounded-md p-1.5 text-muted-foreground/70 transition-colors hover:bg-background hover:text-amber-500 disabled:opacity-50"
+            className="rounded-md p-1.5 text-muted-foreground/70 transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50"
             title={favoriteLabel}
             aria-label={favoriteLabel}
           >
-            <Star className={entry.favorite ? 'h-4 w-4 fill-amber-400 text-amber-500' : 'h-4 w-4'} />
+            <Star className={entry.favorite ? 'h-4 w-4 fill-current text-foreground' : 'h-4 w-4'} />
           </button>
           <Popover open={isMenuOpen} onOpenChange={setIsMenuOpen}>
             <PopoverTrigger asChild>
               <button
                 type="button"
-                className="rounded-md p-1.5 text-muted-foreground/70 transition-colors hover:bg-background hover:text-foreground"
+                className="rounded-md p-1.5 text-muted-foreground/70 transition-colors hover:bg-muted hover:text-foreground"
                 aria-label={t('panelAppsMoreActions')}
                 disabled={deletePending}
               >

package/src/features/panel-apps/index.ts

@@ -2,6 +2,7 @@ export { PanelAppsList } from './components/panel-apps-list';
 export { usePanelApps } from './hooks/use-panel-apps';
 export { PanelAppBridgeManager } from './managers/panel-app-bridge.manager';
 export { findPanelAppEntryByDisplayId } from './utils/panel-app-entry-match.utils';
+export { PANEL_APP_IFRAME_SANDBOX, focusPanelAppIframe } from './utils/panel-app-iframe.utils';
 export {
   openApps,
   PANEL_APPS_DOC_BROWSER_RENDERERS,

package/src/features/panel-apps/utils/panel-app-doc-browser.utils.tsx

@@ -14,20 +14,11 @@ import {
   RightPanelResourceHomePage,
 } from '@/features/right-panel-resources';
 import { t } from '@/shared/lib/i18n';
+import { PANEL_APP_IFRAME_SANDBOX, focusPanelAppIframe } from './panel-app-iframe.utils';
 
 export const APPS_TAB_KIND = RIGHT_PANEL_APPS_TAB_KIND;
 export const PANEL_APP_TAB_KIND = RIGHT_PANEL_PANEL_APP_TAB_KIND;
 const DEFAULT_APPS_PANEL_TAB: AppsPanelTab = 'panel-apps';
-const PANEL_APP_IFRAME_SANDBOX = [
-  'allow-scripts',
-  'allow-forms',
-  'allow-modals',
-  'allow-popups',
-  'allow-popups-to-escape-sandbox',
-  'allow-downloads',
-  'allow-pointer-lock',
-  'allow-presentation',
-].join(' ');
 
 function isAppsPanelTab(value: unknown): value is AppsPanelTab {
   return value === 'panel-apps' || value === 'service-apps';
@@ -79,6 +70,7 @@ export const PANEL_APPS_DOC_BROWSER_RENDERERS: DocBrowserCustomTabRenderers = {
     getIframeSandbox: () => PANEL_APP_IFRAME_SANDBOX,
     getTitle: (tab) => tab.title || t('panelAppsTitle'),
     onIframeMessage: (params) => getPresenter().panelAppBridgeManager.handleIframeMessage(params),
+    onIframePointerOver: (event) => focusPanelAppIframe(event.currentTarget),
     renderIcon: () => <AppWindow className="w-4 h-4 text-primary shrink-0" />,
     renderToolbar: ({ open, refreshIframe, tab }) => (
       <PanelAppToolbar

package/src/features/panel-apps/utils/panel-app-iframe.utils.ts

@@ -0,0 +1,6 @@
+export const PANEL_APP_IFRAME_SANDBOX = 'allow-scripts allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-downloads allow-pointer-lock allow-presentation';
+
+export function focusPanelAppIframe(iframe: HTMLIFrameElement | null): void {
+  iframe?.focus({ preventScroll: true });
+  iframe?.contentWindow?.focus();
+}