@nextclaw/ui 0.15.0 → 0.15.2

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();
+}

package/src/features/pwa/managers/__tests__/pwa-shell-theme.manager.test.ts

@@ -12,12 +12,12 @@ describe('PwaShellThemeManager', () => {
     document.body.style.backgroundColor = '';
   });
 
-  it('applies natural shell colors by default', () => {
+  it('applies default work shell colors when no theme is selected', () => {
     pwaShellThemeManager.syncCurrentTheme();
 
     const meta = document.querySelector('meta[name="theme-color"]');
-    expect(meta?.getAttribute('content')).toBe('#FAF9F7');
-    expect(document.body.style.backgroundColor).toBe('rgb(250, 249, 247)');
+    expect(meta?.getAttribute('content')).toBe('#FFFFFF');
+    expect(document.body.style.backgroundColor).toBe('rgb(255, 255, 255)');
   });
 
   it('applies natural shell colors explicitly', () => {
@@ -36,6 +36,14 @@ describe('PwaShellThemeManager', () => {
     expect(document.body.style.backgroundColor).toBe('rgb(255, 255, 255)');
   });
 
+  it('applies work shell colors explicitly', () => {
+    pwaShellThemeManager.syncTheme('work');
+
+    const meta = document.querySelector('meta[name="theme-color"]');
+    expect(meta?.getAttribute('content')).toBe('#FFFFFF');
+    expect(document.body.style.backgroundColor).toBe('rgb(255, 255, 255)');
+  });
+
   it('applies warm shell colors', () => {
     pwaShellThemeManager.syncTheme('warm');
 

package/src/features/pwa/managers/pwa-shell-theme.manager.ts

@@ -1,4 +1,5 @@
 import {
+  DEFAULT_UI_THEME,
   getThemeAppearance,
   normalizeTheme,
   type UiTheme,
@@ -6,6 +7,7 @@ import {
 
 const PWA_SHELL_THEME_COLORS: Record<UiTheme, string> = {
   natural: '#FAF9F7',
+  work: '#FFFFFF',
   minimal: '#FFFFFF',
   warm: '#FAF8F4',
   cool: '#F8FAFC',
@@ -33,7 +35,7 @@ export class PwaShellThemeManager {
     }
 
     const currentTheme = document.documentElement.getAttribute('data-theme');
-    this.syncTheme(normalizeTheme(currentTheme) ?? 'natural');
+    this.syncTheme(normalizeTheme(currentTheme) ?? DEFAULT_UI_THEME);
   };
 
   private updateThemeMeta = (themeColor: string) => {

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

@@ -7,6 +7,7 @@ import type {
 import {
   AlertTriangle,
   CheckCircle2,
+  ChevronDown,
   CircleDashed,
   LoaderCircle,
   MoreVertical,
@@ -53,6 +54,7 @@ export function ServiceAppsPanel({
   const [discoveredActionsByApp, setDiscoveredActionsByApp] = useState<
     Record<string, ServiceActionView[]>
   >({});
+  const [expandedActionsByApp, setExpandedActionsByApp] = useState<Record<string, boolean>>({});
 
   const refetch = () => {
     void serviceApps.refetch();
@@ -86,12 +88,16 @@ export function ServiceAppsPanel({
         ...current,
         [appId]: result.actions,
       }));
+      setExpandedActionsByApp((current) => ({
+        ...current,
+        [appId]: true,
+      }));
     });
   };
 
   return (
     <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 items-center justify-between gap-2 border-b border-border/60 px-4 py-3">
         <div className="flex min-w-0 items-center gap-2">
           {headerContent ?? (
             <>
@@ -110,20 +116,31 @@ export function ServiceAppsPanel({
       </div>
 
       {apps.length === 0 ? (
-        <div className="flex flex-1 items-center justify-center px-6 text-center text-sm text-muted-foreground">
-          {t('serviceAppsEmpty')}
+        <div className="flex flex-1 items-center justify-center px-6 py-8 text-center">
+          <div className="w-full max-w-xs">
+            <div className="mx-auto flex h-10 w-10 items-center justify-center rounded-xl bg-muted text-muted-foreground">
+              <Server className="h-5 w-5" />
+            </div>
+            <h2 className="mt-3 text-sm font-semibold text-foreground">{t('serviceAppsEmptyTitle')}</h2>
+            <p className="mt-1 text-xs leading-5 text-muted-foreground">{t('serviceAppsEmptyDescription')}</p>
+          </div>
         </div>
       ) : (
-        <div className="custom-scrollbar min-h-0 flex-1 overflow-y-auto p-3">
-          <div className="space-y-3">
+        <div className="custom-scrollbar min-h-0 flex-1 overflow-y-auto bg-muted/25 p-3">
+          <div className="space-y-2.5">
             {apps.map((app) => (
               <ServiceAppCard
                 key={app.id}
                 app={app}
                 actions={discoveredActionsByApp[app.id] ?? actions.filter((action) => action.appId === app.id)}
+                actionsOpen={Boolean(expandedActionsByApp[app.id])}
                 grants={grants}
                 deletePending={deleteServiceApp.isPending}
                 isDiscovering={discoverServiceAppActions.isPending}
+                onActionsOpenChange={(open) => setExpandedActionsByApp((current) => ({
+                  ...current,
+                  [app.id]: open,
+                }))}
                 onDiscover={discover}
                 onDelete={(appId) => void deleteServiceApp.mutate(appId)}
                 onRestart={(appId) => void restartServiceApp.mutate(appId)}
@@ -143,9 +160,11 @@ export function ServiceAppsPanel({
 function ServiceAppCard({
   app,
   actions,
+  actionsOpen,
   grants,
   deletePending,
   isDiscovering,
+  onActionsOpenChange,
   onDiscover,
   onDelete,
   onRestart,
@@ -153,9 +172,11 @@ function ServiceAppCard({
 }: {
   app: ServiceAppRecordView;
   actions: ServiceActionView[];
+  actionsOpen: boolean;
   grants: ServiceActionGrantView[];
   deletePending: boolean;
   isDiscovering: boolean;
+  onActionsOpenChange: (open: boolean) => void;
   onDiscover: (appId: string) => void;
   onDelete: (appId: string) => void;
   onRestart: (appId: string) => void;
@@ -172,21 +193,21 @@ function ServiceAppCard({
 
   return (
     <TooltipProvider delayDuration={250}>
-      <section className="rounded-lg border border-border bg-card p-3">
-        <div className="flex items-start justify-between gap-3">
-          <div className="min-w-0">
+      <section className="overflow-hidden rounded-xl border border-border/70 bg-card shadow-[0_1px_2px_rgba(30,20,10,0.03)]">
+        <div className="flex items-start gap-3 px-3 pt-3">
+          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+            <Server className="h-4 w-4" />
+          </div>
+          <div className="min-w-0 flex-1">
             <div className="flex items-center gap-2">
               <div className="truncate text-sm font-semibold text-foreground">{app.title}</div>
               <ServiceAppStatusBadge status={app.status} />
             </div>
             {app.description ? (
-              <div className="mt-1 line-clamp-2 text-xs text-muted-foreground">{app.description}</div>
-            ) : null}
-            {app.lastError ? (
-              <div className="mt-2 rounded bg-rose-50 px-2 py-1 text-xs text-rose-700">{app.lastError}</div>
+              <div className="mt-1 line-clamp-2 text-xs leading-5 text-muted-foreground">{app.description}</div>
             ) : null}
           </div>
-          <div className="flex shrink-0 items-center gap-1">
+          <div className="flex shrink-0 items-center gap-0.5">
             <ServiceAppIconButton
               disabled={isDiscovering || !canConnectAndDiscover}
               icon={Radar}
@@ -207,7 +228,7 @@ function ServiceAppCard({
                   <PopoverTrigger asChild>
                     <button
                       type="button"
-                      className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground disabled:opacity-50"
+                      className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50"
                       aria-label={t('serviceAppsMoreActions')}
                       disabled={deletePending}
                     >
@@ -229,17 +250,85 @@ function ServiceAppCard({
             </Popover>
           </div>
         </div>
+
+        {app.lastError ? (
+          <div className="mx-3 mt-3 rounded-lg border border-rose-200/70 bg-rose-50 px-2.5 py-1.5 text-xs text-rose-700">
+            {app.lastError}
+          </div>
+        ) : null}
+
         <ServiceAppDiagnostics app={app} />
-        <div className="mt-3 space-y-1">
-          {actions.map((action) => (
-            <ServiceActionRow
-              key={action.id}
-              action={action}
-              grants={grants.filter((grant) => grant.actionId === action.id)}
-              onRevoke={onRevoke}
+
+        <div className="mt-3 border-t border-border/50 bg-muted/30">
+          <button
+            type="button"
+            onClick={() => onActionsOpenChange(!actionsOpen)}
+            className="flex w-full items-start justify-between gap-2 px-3 py-2 text-left transition-colors hover:bg-muted/40"
+            aria-expanded={actionsOpen}
+          >
+            <div className="min-w-0 flex-1">
+              <div className="flex items-center gap-2">
+                <span className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground/80">
+                  {t('serviceAppsActionsSection')}
+                </span>
+                <span className="rounded-full bg-card px-1.5 py-0.5 text-[11px] tabular-nums text-muted-foreground/70">
+                  {actions.length}
+                </span>
+              </div>
+              {!actionsOpen ? (
+                actions.length === 0 ? (
+                  <div className="mt-1 text-[11px] text-muted-foreground">
+                    {t('serviceAppsActionsEmpty')}
+                  </div>
+                ) : (
+                  <div className="mt-1.5 flex flex-wrap gap-1">
+                    {actions.slice(0, 4).map((action) => (
+                      <span
+                        key={action.id}
+                        className="max-w-[9.5rem] truncate rounded-md border border-border/50 bg-card px-1.5 py-0.5 text-[11px] text-muted-foreground"
+                        title={action.title ?? action.name}
+                      >
+                        {action.title ?? action.name}
+                      </span>
+                    ))}
+                    {actions.length > 4 ? (
+                      <span className="rounded-md bg-card px-1.5 py-0.5 text-[11px] text-muted-foreground/70">
+                        +{actions.length - 4}
+                      </span>
+                    ) : null}
+                  </div>
+                )
+              ) : null}
+            </div>
+            <ChevronDown
+              className={cn(
+                'mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground/70 transition-transform',
+                actionsOpen && 'rotate-180',
+              )}
             />
-          ))}
+          </button>
+          {actionsOpen ? (
+            <div className="px-3 pb-2.5">
+              {actions.length === 0 ? (
+                <div className="rounded-lg border border-dashed border-border/70 bg-card/70 px-2.5 py-2 text-[11px] text-muted-foreground">
+                  {t('serviceAppsActionsEmpty')}
+                </div>
+              ) : (
+                <div className="space-y-1.5">
+                  {actions.map((action) => (
+                    <ServiceActionRow
+                      key={action.id}
+                      action={action}
+                      grants={grants.filter((grant) => grant.actionId === action.id)}
+                      onRevoke={onRevoke}
+                    />
+                  ))}
+                </div>
+              )}
+            </div>
+          ) : null}
         </div>
+
         <ConfirmDialog
           open={isDeleteDialogOpen}
           onOpenChange={setIsDeleteDialogOpen}
@@ -263,7 +352,7 @@ function ServiceAppStatusBadge({ status }: { status: ServiceAppStatus }) {
       <TooltipTrigger asChild>
         <span
           className={cn(
-            'inline-flex shrink-0 items-center gap-1 rounded px-1.5 py-0.5 text-[11px] font-medium',
+            'inline-flex shrink-0 items-center gap-1 rounded-full px-1.5 py-0.5 text-[11px] font-medium',
             view.className,
           )}
           aria-label={view.label}
@@ -345,7 +434,7 @@ function ServiceAppIconButton({
           type="button"
           onClick={onClick}
           disabled={disabled}
-          className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:text-muted-foreground/40 disabled:opacity-60 disabled:hover:bg-transparent"
+          className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:text-muted-foreground/40 disabled:opacity-60 disabled:hover:bg-transparent"
           aria-label={label}
         >
           <Icon className="h-3.5 w-3.5" />
@@ -386,6 +475,7 @@ function ServiceAppMenuItem({
 }
 
 function ServiceAppDiagnostics({ app }: { app: ServiceAppRecordView }) {
+  const [open, setOpen] = useState(false);
   const command = [app.command, ...(app.args ?? [])]
     .filter((value): value is string => Boolean(value?.trim()))
     .join(' ');
@@ -403,11 +493,29 @@ function ServiceAppDiagnostics({ app }: { app: ServiceAppRecordView }) {
   }
 
   return (
-    <dl className="mt-3 grid grid-cols-[4.5rem_minmax(0,1fr)] gap-x-2 gap-y-1 border-t border-border/70 pt-2 text-[11px]">
-      {rows.map((row) => (
-        <ServiceAppDiagnosticRow key={row.label} label={row.label} value={row.value} />
-      ))}
-    </dl>
+    <div className="mx-3 mt-3 overflow-hidden rounded-lg border border-border/50 bg-muted/35">
+      <button
+        type="button"
+        onClick={() => setOpen((value) => !value)}
+        className="flex w-full items-center justify-between gap-2 px-2.5 py-1.5 text-left transition-colors hover:bg-muted/50"
+        aria-expanded={open}
+      >
+        <span className="text-[11px] font-medium text-muted-foreground">{t('serviceAppsDetails')}</span>
+        <ChevronDown
+          className={cn(
+            'h-3.5 w-3.5 shrink-0 text-muted-foreground/70 transition-transform',
+            open && 'rotate-180',
+          )}
+        />
+      </button>
+      {open ? (
+        <dl className="grid grid-cols-[4.75rem_minmax(0,1fr)] gap-x-2 gap-y-1 border-t border-border/50 px-2.5 py-2 text-[11px]">
+          {rows.map((row) => (
+            <ServiceAppDiagnosticRow key={row.label} label={row.label} value={row.value} />
+          ))}
+        </dl>
+      ) : null}
+    </div>
   );
 }
 
@@ -438,10 +546,12 @@ function ServiceActionRow({
   onRevoke: (grant: ServiceActionGrantView) => void;
 }) {
   return (
-    <div className="rounded bg-muted/60 px-2 py-1.5">
+    <div className="rounded-lg border border-border/50 bg-card px-2.5 py-2">
       <div className="flex items-center justify-between gap-2">
         <div className="flex min-w-0 items-center gap-2">
-          <Wrench className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" />
+          <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
+            <Wrench className="h-3.5 w-3.5" />
+          </span>
           <div className="min-w-0">
             <div className="truncate text-xs font-medium text-foreground">{action.title ?? action.name}</div>
             {action.description ? (
@@ -451,15 +561,15 @@ function ServiceActionRow({
         </div>
         <div className="flex shrink-0 items-center gap-1">
           {action.runtimeState ? (
-            <span className="rounded bg-card px-1.5 py-0.5 text-[11px] text-muted-foreground">
+            <span className="rounded-full bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground">
               {t(`serviceAppsRuntimeState_${action.runtimeState}`)}
             </span>
           ) : null}
-          <span className="rounded bg-card px-1.5 py-0.5 text-[11px] text-muted-foreground">{action.risk}</span>
+          <span className="rounded-full bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground">{action.risk}</span>
         </div>
       </div>
       {grants.map((grant) => (
-        <div key={`${grant.caller.surface}:${grant.caller.appId}:${grant.actionId}`} className="mt-1 flex items-center justify-between gap-2 pl-5">
+        <div key={`${grant.caller.surface}:${grant.caller.appId}:${grant.actionId}`} className="mt-1.5 flex items-center justify-between gap-2 pl-8">
           <div className="flex min-w-0 items-center gap-1.5 text-[11px] text-muted-foreground">
             <ShieldCheck className="h-3 w-3 shrink-0 text-emerald-500" />
             <span className="truncate">{t('serviceAppsGrantedTo')} {grant.caller.appId}</span>
@@ -467,7 +577,7 @@ function ServiceActionRow({
           <button
             type="button"
             onClick={() => onRevoke(grant)}
-            className="rounded-md p-1 text-muted-foreground/70 transition-colors hover:bg-background hover:text-rose-600"
+            className="rounded-md p-1 text-muted-foreground/70 transition-colors hover:bg-muted hover:text-rose-600"
             title={t('serviceAppsRevokeGrant')}
             aria-label={t('serviceAppsRevokeGrant')}
           >

package/src/features/settings/components/config/provider-auth-section.tsx

@@ -28,7 +28,7 @@ export function ProviderAuthSection(props: ProviderAuthSectionProps) {
   if (providerAuth?.kind !== 'device_code') return null;
 
   return (
-    <div className="space-y-2 rounded-xl border border-primary/20 bg-primary-50/50 p-3">
+    <div className="space-y-2 rounded-xl border border-border/60 bg-muted/35 p-3">
       <Label className="text-sm font-medium text-foreground">
         {providerAuth.displayName || t('providerAuthSectionTitle')}
       </Label>

package/src/features/settings/components/config/provider-form.tsx

@@ -13,6 +13,7 @@ import { MaskedInput } from '@/shared/components/common/masked-input';
 import { Button } from '@/shared/components/ui/button';
 import { Input } from '@/shared/components/ui/input';
 import { Label } from '@/shared/components/ui/label';
+import { FormActions } from '@/shared/components/ui/actions/form-actions';
 import { getLanguage, t } from '@/shared/lib/i18n';
 import type { ThinkingLevel } from '@/shared/lib/api';
 import {
@@ -548,14 +549,16 @@ function ProviderFormDetailPane(props: ProviderFormDetailPaneProps) {
           />
         </ConfigSplitPaneBody>
 
-        <ConfigSplitPaneFooter className='flex items-center justify-between px-6 py-4'>
-          <Button type='button' variant='outline' size='sm' onClick={onTestConnection} disabled={isTestPending}>
-            <CircleDotDashed className='mr-1.5 h-4 w-4' />
-            {isTestPending ? t('providerTestingConnection') : t('providerTestConnection')}
-          </Button>
-          <Button type='submit' disabled={isUpdatePending || !hasChanges}>
-            {isUpdatePending ? t('saving') : hasChanges ? t('save') : t('unchanged')}
-          </Button>
+        <ConfigSplitPaneFooter>
+          <FormActions align="between">
+            <Button type='button' variant='outline' size='sm' onClick={onTestConnection} disabled={isTestPending}>
+              <CircleDotDashed className='mr-1.5 h-3.5 w-3.5' />
+              {isTestPending ? t('providerTestingConnection') : t('providerTestConnection')}
+            </Button>
+            <Button type='submit' size='sm' disabled={isUpdatePending || !hasChanges}>
+              {isUpdatePending ? t('saving') : hasChanges ? t('save') : t('unchanged')}
+            </Button>
+          </FormActions>
         </ConfigSplitPaneFooter>
       </form>
     </ConfigSplitDetailPane>