@nextclaw/ui 0.15.1 → 0.15.3

package/src/features/marketplace/hooks/use-marketplace-detail-doc-entry.ts

@@ -0,0 +1,84 @@
+import { useEffect } from 'react';
+import { fetchMarketplaceSkillContent } from '@/shared/lib/api';
+import { t } from '@/shared/lib/i18n';
+import {
+  setMarketplaceDetailDocEntry,
+  useMarketplaceDetailDocStore,
+} from '@/features/marketplace/stores/marketplace-detail-doc.store';
+
+function parseMarketplaceDetailScopeKey(
+  detailId: string,
+): { scope: string; key: string } | null {
+  const separator = detailId.indexOf(':');
+  if (separator <= 0 || separator >= detailId.length - 1) {
+    return null;
+  }
+  return {
+    scope: detailId.slice(0, separator),
+    key: detailId.slice(separator + 1),
+  };
+}
+
+function isRehydratableSkillScope(scope: string): boolean {
+  return scope === 'skill' || scope === 'skill-preview';
+}
+
+export function useMarketplaceDetailDocEntry(detailId: string | null) {
+  const entry = useMarketplaceDetailDocStore((state) =>
+    detailId ? state.entries[detailId] : undefined,
+  );
+
+  useEffect(() => {
+    if (!detailId || useMarketplaceDetailDocStore.getState().entries[detailId]) {
+      return;
+    }
+    const parsed = parseMarketplaceDetailScopeKey(detailId);
+    if (!parsed || !isRehydratableSkillScope(parsed.scope)) {
+      return;
+    }
+
+    let cancelled = false;
+    const title = parsed.key;
+    const typeLabel = t('marketplaceTypeSkill');
+
+    void fetchMarketplaceSkillContent(parsed.key)
+      .then((content) => {
+        if (cancelled) {
+          return;
+        }
+        setMarketplaceDetailDocEntry({
+          id: detailId,
+          title,
+          typeLabel,
+          spec: parsed.key,
+          status: 'ready',
+          summary: t('marketplaceInstalledLocalSummary'),
+          metadataRaw: content.metadataRaw,
+          contentRaw: content.bodyRaw || content.raw,
+          sourceUrl: content.sourceUrl,
+          sourceLabel: content.source ? `Source (${content.source})` : undefined,
+        });
+      })
+      .catch(() => {
+        if (cancelled) {
+          return;
+        }
+        setMarketplaceDetailDocEntry({
+          id: detailId,
+          title,
+          typeLabel,
+          spec: parsed.key,
+          status: 'error',
+          summary: t('marketplaceInstalledLocalSummary'),
+          metadataRaw: JSON.stringify({ skill: parsed.key }, null, 2),
+          contentRaw: t('marketplaceDetailUnavailableDescription'),
+        });
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [detailId]);
+
+  return entry;
+}

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/components/panel-apps-list.tsx

@@ -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-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-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-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-1 focus-visible:ring-border"
       >
         {content}
       </button>

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/right-panel-resources/components/right-panel-resource-home-page.tsx

@@ -80,7 +80,7 @@ export function RightPanelResourceHomePage({ open }: RightPanelResourceHomePageP
                 key={item.id}
                 type="button"
                 onClick={() => openTarget(item.target)}
-                className="group flex min-h-[68px] flex-col items-center gap-1.5 rounded-md px-1.5 py-1.5 text-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                className="group flex min-h-[68px] flex-col items-center gap-1.5 rounded-md px-1.5 py-1.5 text-center focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
               >
                 <span className={cn('flex h-10 w-10 shrink-0 items-center justify-center rounded-md transition-colors', view.accentClassName, view.hoverAccentClassName)}>
                   {view.icon}

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>