@nextclaw/ui 0.26.0 → 0.26.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/ui",
-  "version": "0.26.0",
+  "version": "0.26.2",
   "private": false,
   "type": "module",
   "license": "MIT",
@@ -35,13 +35,13 @@
     "zod": "^3.23.8",
     "zustand": "^5.0.2",
     "@nextclaw/agent-chat": "0.3.14",
-    "@nextclaw/client-sdk": "0.12.6",
-    "@nextclaw/agent-chat-ui": "0.10.0",
-    "@nextclaw/ncp": "0.11.0",
-    "@nextclaw/ncp-http-agent-client": "0.4.23",
-    "@nextclaw/ncp-react": "0.5.28",
-    "@nextclaw/ncp-toolkit": "0.6.25",
-    "@nextclaw/shared": "0.8.0"
+    "@nextclaw/client-sdk": "0.12.8",
+    "@nextclaw/agent-chat-ui": "0.10.1",
+    "@nextclaw/ncp": "0.11.2",
+    "@nextclaw/ncp-react": "0.5.30",
+    "@nextclaw/ncp-http-agent-client": "0.4.25",
+    "@nextclaw/ncp-toolkit": "0.6.27",
+    "@nextclaw/shared": "0.8.2"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",

package/src/app/components/layout/__tests__/app-layout.test.tsx

@@ -250,4 +250,3 @@ vi.mock("@/features/right-panel-resources/hooks/use-page-resource-actions", () =
 vi.mock("@/shared/components/doc-browser/use-doc-link-interceptor", () => ({ useDocLinkInterceptor: () => {} }));
 
 vi.mock("@/shared/components/doc-browser/doc-browser", () => ({ DocBrowser: () => null }));
-vi.mock("@/features/right-panel-resources/components/current-page-actions", () => ({ CurrentPageActions: () => null }));

package/src/app/components/layout/__tests__/sidebar.layout.test.tsx

@@ -2,6 +2,7 @@ import { render, screen, within } from "@testing-library/react";
 import { fireEvent } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 import { beforeEach, describe, expect, it, vi } from "vitest";
+import { MobileSettingsShell } from "@/platforms/mobile/components/mobile-settings-shell";
 import { Sidebar } from "@/app/components/layout/sidebar";
 import { viewportLayoutManager } from "@/app/managers/viewport-layout.manager";
 import type * as RemoteFeature from "@/features/remote";
@@ -19,6 +20,10 @@ const mocks = vi.hoisted(() => ({
   },
 }));
 
+vi.mock("@/app/hooks/use-feature-controls", () => ({
+  useFeatureControls: () => ({ data: { desktopAutomation: { available: false } } }),
+}));
+
 vi.mock("@/shared/components/doc-browser", () => ({
   useDocBrowser: () => ({
     open: mocks.docOpen,
@@ -102,7 +107,7 @@ describe("Sidebar", () => {
     expect(backLink).toBeTruthy();
     expect(header.className).not.toContain("bg-white");
     expect(header.className).not.toContain("rounded-2xl");
-    expect(backLink.className).toContain("hover:bg-gray-200/60");
+    expect(backLink.className).toContain("hover:bg-[hsl(var(--gray-200)/0.6)]");
   });
 
   it("keeps the settings navigation in the expected product order", () => {
@@ -127,9 +132,11 @@ describe("Sidebar", () => {
 
     expect(groupHeadings).toEqual([
       "Basic Configuration",
-      "Advanced Configuration",
+      "Common Settings",
+      "Security & Privacy",
+      "System & Extensions",
     ]);
-    expect(groups).toHaveLength(2);
+    expect(groups).toHaveLength(4);
     expect(
       within(groups[0] as HTMLElement)
         .getAllByRole("link")
@@ -140,32 +147,45 @@ describe("Sidebar", () => {
         .getAllByRole("link")
         .map((link) => link.textContent?.trim() || ""),
     ).toEqual([
-      "Extensions",
       "Appearance",
-      "Sign-in Management",
-      "Privacy & Analytics",
-      "Search Channels",
       "Updates",
-      "Remote Access",
-      "Routing & Runtime",
-      "Secrets",
-      "MCP",
+      "Search Channels",
+      "Keyboard shortcuts",
+    ]);
+    expect(within(groups[2] as HTMLElement).getAllByRole("link").map((link) => link.textContent)).toEqual([
+      "Sign-in Management", "Privacy & Analytics", "Secrets",
+    ]);
+    expect(within(groups[3] as HTMLElement).getAllByRole("link").map((link) => link.textContent)).toEqual([
+      "Remote Access", "Routing & Runtime", "MCP", "Extensions",
     ]);
     expect(linkTexts).toEqual([
       "Model",
       "Providers",
       "Channels",
-      "Extensions",
       "Appearance",
+      "Updates",
+      "Search Channels",
+      "Keyboard shortcuts",
       "Sign-in Management",
       "Privacy & Analytics",
-      "Search Channels",
-      "Updates",
+      "Secrets",
       "Remote Access",
       "Routing & Runtime",
-      "Secrets",
       "MCP",
+      "Extensions",
+    ]);
+  });
+
+  it("shares the grouped navigation with mobile while omitting desktop shortcuts", () => {
+    render(<MemoryRouter initialEntries={["/settings"]}><MobileSettingsShell /></MemoryRouter>);
+    expect(screen.getAllByRole("heading", { level: 2 }).map((heading) => heading.textContent)).toEqual([
+      "Basic Configuration", "Common Settings", "Security & Privacy", "System & Extensions",
     ]);
+    const links = screen.getAllByRole("link");
+    expect(links.slice(0, 3).map((link) => link.textContent?.trim())).toEqual(["Model", "Providers", "Channels"]);
+    expect(links.at(-1)?.textContent?.trim()).toBe("Extensions");
+    expect(screen.queryByRole("link", { name: "Keyboard shortcuts" })).toBeNull();
+    expect(new Set(links.map((link) => link.getAttribute("href"))).size).toBe(links.length);
   });
 
   it("keeps the footer utilities compact without changing the top header structure", () => {
@@ -187,7 +207,7 @@ describe("Sidebar", () => {
     expect(screen.queryByRole("combobox", { name: "Language" })).toBeNull();
     expect(accountEntry.className).toContain("py-2");
     expect(accountEntry.className).toContain("text-muted-foreground");
-    expect(accountEntry.className).toContain("hover:bg-gray-200/60");
+    expect(accountEntry.className).toContain("hover:bg-[hsl(var(--gray-200)/0.6)]");
     expect(navigationList?.className).toContain("space-y-0.5");
     expect(footer?.className).toContain("space-y-0.5");
     expect(footer?.firstElementChild?.textContent).toContain("Help Docs");

package/src/app/components/layout/sidebar-items.tsx

@@ -17,6 +17,7 @@ import {
   SIDEBAR_RAIL_CONTROL_CLASS,
   SIDEBAR_RAIL_ICON_CLASS,
   SIDEBAR_RAIL_SURFACE_CLASS,
+  SIDEBAR_ITEM_SURFACE_CLASS,
 } from "@/app/components/layout/sidebar-rail.styles";
 
 export type SidebarIcon = ComponentType<{ className?: string }>;
@@ -63,9 +64,12 @@ export function getSidebarItemStackClass(
   return getSidebarItemTone(density).stack;
 }
 
-function isSidebarRouteActive(pathname: string, target: string): boolean {
+function isSidebarRouteActive(pathname: string, search: string, target: string): boolean {
   const normalizedPathname = pathname.toLowerCase();
-  const normalizedTarget = target.toLowerCase();
+  const [targetPath, targetSearch] = target.split("?");
+  const normalizedTarget = targetPath.toLowerCase();
+  const currentParams = new URLSearchParams(search);
+  if ([...new URLSearchParams(targetSearch)].some(([key, value]) => currentParams.get(key) !== value)) return false;
   return (
     normalizedPathname === normalizedTarget ||
     normalizedPathname.startsWith(`${normalizedTarget}/`)
@@ -99,10 +103,11 @@ type SidebarNavLinkItemProps = {
   icon?: SidebarIcon;
   iconNode?: ReactNode;
   density?: SidebarItemDensity;
-  className?: string;
   collapsed?: boolean;
   indicator?: boolean;
   trailing?: ReactNode;
+  actions?: ReactNode;
+  onNavigate?: () => void;
 };
 
 function SidebarNavIcon({
@@ -149,32 +154,32 @@ export function SidebarNavLinkItem({
   icon: Icon,
   iconNode,
   density = "default",
-  className,
   collapsed = false,
   indicator = false,
   trailing,
+  actions,
+  onNavigate,
 }: SidebarNavLinkItemProps) {
   const tone = getSidebarItemTone(density);
-  const { pathname } = useLocation();
-  const isActive = isSidebarRouteActive(pathname, to);
+  const { pathname, search } = useLocation();
+  const isActive = isSidebarRouteActive(pathname, search, to);
   const link = (
+    <div
+      data-sidebar-item=""
+      data-active={isActive || undefined}
+      className={cn("group group/sidebar-item relative flex items-center", collapsed ? SIDEBAR_RAIL_CONTROL_CLASS : "w-full", SIDEBAR_ITEM_SURFACE_CLASS, isActive && SIDEBAR_RAIL_ACTIVE_SURFACE_CLASS)}
+    >
     <Link
       to={to}
+      onClick={onNavigate}
       aria-label={label}
       aria-current={isActive ? "page" : undefined}
       className={cn(
-        "group flex w-full items-center rounded-xl font-medium transition-colors duration-base focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
+        "flex min-w-0 flex-1 items-center rounded-xl font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
         collapsed
           ? cn(SIDEBAR_RAIL_CONTROL_CLASS, "justify-center px-0 py-0")
           : tone.row,
-        isActive
-          ? collapsed
-            ? SIDEBAR_RAIL_ACTIVE_SURFACE_CLASS
-            : "bg-gray-200/80 text-gray-900 shadow-sm"
-          : collapsed
-            ? SIDEBAR_RAIL_SURFACE_CLASS
-            : "text-muted-foreground hover:bg-gray-200/60 hover:text-gray-900",
-        className,
+        actions && !collapsed && "pr-9",
       )}
     >
       <SidebarNavIcon
@@ -185,7 +190,7 @@ export function SidebarNavLinkItem({
         isActive={isActive}
         tone={tone}
       />
-      <span className={collapsed ? "sr-only" : "min-w-0 flex-1 text-left"}>
+      <span className={collapsed ? "sr-only" : "min-w-0 flex-1 truncate text-left"}>
         {label}
       </span>
       {!collapsed && trailing ? (
@@ -194,6 +199,8 @@ export function SidebarNavLinkItem({
         </span>
       ) : null}
     </Link>
+    {!collapsed && actions ? <span className="absolute right-1 flex items-center">{actions}</span> : null}
+    </div>
   );
 
   return collapsed ? (
@@ -270,7 +277,8 @@ export function SidebarActionItem({
       onClick={onClick}
       aria-label={label}
       className={cn(
-        "group flex w-full items-center rounded-xl font-medium text-muted-foreground transition-colors duration-base hover:bg-gray-200/60 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
+        "group flex w-full items-center font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
+        SIDEBAR_ITEM_SURFACE_CLASS,
         collapsed
           ? cn(
               SIDEBAR_RAIL_CONTROL_CLASS,
@@ -344,7 +352,8 @@ export function SidebarSelectItem({
     <SelectTrigger
       aria-label={label}
       className={cn(
-        "group h-auto w-full rounded-xl border-0 bg-transparent font-medium text-muted-foreground shadow-none hover:bg-gray-200/60 hover:text-gray-900 focus:ring-0 focus-visible:ring-1 focus-visible:ring-border",
+        "group h-auto w-full border-0 bg-transparent font-medium shadow-none focus:ring-0 focus-visible:ring-1 focus-visible:ring-border",
+        SIDEBAR_ITEM_SURFACE_CLASS,
         collapsed
           ? cn(
               SIDEBAR_RAIL_CONTROL_CLASS,

package/src/app/components/layout/sidebar-rail.styles.ts

@@ -6,10 +6,19 @@ export const SIDEBAR_RAIL_ICON_CLASS = "h-4 w-4";
 export const SIDEBAR_RAIL_STACK_CLASS = "space-y-1";
 export const SIDEBAR_RAIL_ITEM_GAP_CLASS = "gap-1";
 
+// Shared by expanded navigation, compound rows and the collapsed rail.
+// Use theme neutral tokens directly so legacy gray utility overrides cannot
+// turn sidebar feedback into a content selection or accent surface.
+export const SIDEBAR_ITEM_SURFACE_CLASS =
+  "rounded-xl text-muted-foreground transition-colors duration-base hover:bg-[hsl(var(--gray-200)/0.6)] hover:text-foreground focus-within:bg-[hsl(var(--gray-200)/0.6)] has-[[data-context-menu-open]]:bg-[hsl(var(--gray-200)/0.6)]";
+
+export const SIDEBAR_ITEM_ACTIVE_SURFACE_CLASS =
+  "bg-[hsl(var(--gray-200)/0.8)] text-foreground hover:bg-[hsl(var(--gray-200)/0.8)] focus-within:bg-[hsl(var(--gray-200)/0.8)] has-[[data-context-menu-open]]:bg-[hsl(var(--gray-200)/0.8)]";
+
 export const SIDEBAR_RAIL_SURFACE_CLASS =
-  "text-muted-foreground transition-colors duration-base hover:bg-gray-200/60 hover:text-gray-900 active:bg-gray-200/80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border";
+  `${SIDEBAR_ITEM_SURFACE_CLASS} active:bg-[hsl(var(--gray-200)/0.8)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border`;
 
-export const SIDEBAR_RAIL_ACTIVE_SURFACE_CLASS = "bg-gray-200/80 text-gray-900";
+export const SIDEBAR_RAIL_ACTIVE_SURFACE_CLASS = SIDEBAR_ITEM_ACTIVE_SURFACE_CLASS;
 
 export const SIDEBAR_RAIL_PRIMARY_SURFACE_CLASS =
   "bg-primary/10 text-primary transition-colors duration-base hover:bg-primary/15 hover:text-primary-700 active:bg-primary/20 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border";

package/src/app/components/layout/sidebar.tsx

@@ -19,7 +19,7 @@ import { IconActionButton } from "@/shared/components/ui/actions/icon-action-but
 import { SCROLL_BOTTOM_EDGE_FADE_CLASS } from "@/shared/components/ui/scroll-area";
 import { useAppPresenter } from "@/app/components/app-presenter-provider";
 import { useRemoteStatus } from "@/features/remote";
-import { useDesktopCapabilityAvailability } from "@/features/desktop-capabilities/hooks/use-desktop-capabilities";
+import { useDesktopCapabilityAvailability } from "@/features/desktop-capabilities";
 import { getSettingsNavSections } from "@/app/configs/app-navigation.config";
 import { viewportLayoutManager } from "@/app/managers/viewport-layout.manager";
 import { useViewportLayoutStore } from "@/app/stores/viewport-layout.store";
@@ -89,7 +89,8 @@ function SettingsSidebarHeader({
           to="/chat"
           aria-label={t("backToMain")}
           className={cn(
-            "group inline-flex min-w-0 items-center rounded-lg text-[12px] font-medium text-muted-foreground transition-colors hover:bg-gray-200/60 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
+            "group inline-flex min-w-0 items-center text-[12px] font-medium",
+            SIDEBAR_RAIL_SURFACE_CLASS,
             isCollapsed
               ? cn(
                   SIDEBAR_RAIL_CONTROL_CLASS,

package/src/app/configs/app-navigation.config.ts

@@ -138,107 +138,60 @@ export function getMainSidebarNavItems(
   ];
 }
 
-export function getSettingsNavItems(
+export function getSettingsNavSections(
   translate: Translate,
   options: SettingsNavigationOptions = {},
-): AppNavigationItem[] {
-  const items = [
-    {
-      target: "/model",
-      label: translate("model"),
-      icon: Cpu,
-    },
-    {
-      target: "/providers",
-      label: translate("providers"),
-      icon: Sparkles,
-    },
-    {
-      target: "/channels",
-      label: translate("channels"),
-      icon: MessageSquare,
-    },
-    {
-      target: "/extensions",
-      label: translate("extensions"),
-      icon: Puzzle,
-    },
-    {
-      target: "/appearance",
-      label: translate("appearance"),
-      icon: Palette,
-    },
-    {
-      target: "/keyboard-shortcuts",
-      label: translate("keyboardShortcuts"),
-      icon: Keyboard,
-    },
-    {
-      target: "/security",
-      label: translate("security"),
-      icon: Shield,
-    },
-    {
-      target: "/privacy",
-      label: translate("privacy"),
-      icon: Activity,
-    },
-    {
-      target: "/desktop-capabilities",
-      label: translate("desktopCapabilities"),
-      icon: MonitorCog,
-    },
-    {
-      target: "/search",
-      label: translate("searchChannels"),
-      icon: Search,
-    },
-    {
-      target: "/updates",
-      label: translate("updates"),
-      icon: Download,
-    },
+): AppNavigationSection[] {
+  const sections = [
     {
-      target: "/remote",
-      label: translate("remote"),
-      icon: Wifi,
+      label: translate("settingsGroupBasic"),
+      items: [
+        { target: "/model", label: translate("model"), icon: Cpu },
+        { target: "/providers", label: translate("providers"), icon: Sparkles },
+        { target: "/channels", label: translate("channels"), icon: MessageSquare },
+      ],
     },
     {
-      target: "/runtime",
-      label: translate("runtime"),
-      icon: Cpu,
+      label: translate("settingsGroupCommon"),
+      items: [
+        { target: "/appearance", label: translate("appearance"), icon: Palette },
+        { target: "/updates", label: translate("updates"), icon: Download },
+        { target: "/search", label: translate("searchChannels"), icon: Search },
+        { target: "/keyboard-shortcuts", label: translate("keyboardShortcuts"), icon: Keyboard },
+      ],
     },
     {
-      target: "/secrets",
-      label: translate("secrets"),
-      icon: KeyRound,
+      label: translate("settingsGroupSecurity"),
+      items: [
+        { target: "/security", label: translate("security"), icon: Shield },
+        { target: "/privacy", label: translate("privacy"), icon: Activity },
+        { target: "/secrets", label: translate("secrets"), icon: KeyRound },
+        { target: "/desktop-capabilities", label: translate("desktopCapabilities"), icon: MonitorCog },
+      ],
     },
     {
-      target: "/marketplace/mcp",
-      label: translate("marketplaceFilterMcp"),
-      icon: Wrench,
+      label: translate("settingsGroupSystem"),
+      items: [
+        { target: "/remote", label: translate("remote"), icon: Wifi },
+        { target: "/runtime", label: translate("runtime"), icon: Cpu },
+        { target: "/marketplace/mcp", label: translate("marketplaceFilterMcp"), icon: Wrench },
+        { target: "/extensions", label: translate("extensions"), icon: Puzzle },
+      ],
     },
   ];
-  return items.filter((item) =>
-    (options.includeDesktopCapabilities !== false || item.target !== "/desktop-capabilities") &&
-    (options.includeKeyboardShortcuts !== false || item.target !== "/keyboard-shortcuts"));
+  return sections.map((section) => ({
+    ...section,
+    items: section.items.filter((item) =>
+      (options.includeDesktopCapabilities !== false || item.target !== "/desktop-capabilities") &&
+      (options.includeKeyboardShortcuts !== false || item.target !== "/keyboard-shortcuts")),
+  })).filter((section) => section.items.length > 0);
 }
 
-export function getSettingsNavSections(
+export function getSettingsNavItems(
   translate: Translate,
   options: SettingsNavigationOptions = {},
-): AppNavigationSection[] {
-  const items = getSettingsNavItems(translate, options);
-  return [
-    {
-      label: translate("settingsGroupBasic"),
-      items: items.slice(0, 3),
-    },
-    {
-      label: translate("settingsGroupAdvanced"),
-      items: items.slice(3),
-    },
-  ];
+): AppNavigationItem[] {
+  return getSettingsNavSections(translate, options).flatMap((section) => section.items);
 }
 
 export function isSettingsRoute(pathname: string): boolean {

package/src/features/agents/components/agent-details-dialog.tsx

@@ -75,22 +75,22 @@ export function AgentDetailsDialog({
       <DialogContent className="flex max-h-[calc(100vh-2rem)] flex-col overflow-hidden border-none bg-popover p-0 sm:max-h-[720px] sm:max-w-2xl">
         <div className="shrink-0 px-5 pb-3 pt-5">
           <DialogHeader className="text-left">
-            <div className="flex min-w-0 items-center gap-3">
+            <div className="flex min-w-0 items-center gap-3 pr-7">
               <AgentAvatar
                 agentId={agent.id}
                 displayName={agent.displayName}
                 avatarUrl={agent.avatarUrl}
                 className="h-10 w-10 shrink-0"
               />
-              <div className="min-w-0">
+              <div className="min-w-0 flex-1">
                 <DialogTitle className="truncate text-base">
                   {agent.displayName?.trim() || agent.id}
                 </DialogTitle>
-                <PageResourceActionsMenu page={pageResourceFromSystemObject('agent', agent.id, agent.displayName || agent.id)} />
                 <DialogDescription className="truncate text-xs">
                   @{agent.id}
                 </DialogDescription>
               </div>
+              <PageResourceActionsMenu page={pageResourceFromSystemObject('agent', agent.id, agent.displayName || agent.id)} />
             </div>
           </DialogHeader>
         </div>

package/src/features/agents/components/agents-page.tsx

@@ -133,6 +133,7 @@ function AgentListCard(props: {
     onEdit,
     onDelete,
   } = props;
+  const [menuOpen, setMenuOpen] = useState(false);
   const runtimeValue = agent.runtime?.trim() || agent.engine?.trim() || "";
   const runtimeLabel = runtimeValue
     ? (runtimeOptions.find(
@@ -181,7 +182,7 @@ function AgentListCard(props: {
           >
             <MessageCircle className="h-4 w-4" />
           </Button>
-          <Popover>
+          <Popover open={menuOpen} onOpenChange={setMenuOpen}>
             <PopoverTrigger asChild>
               <Button
                 type="button"
@@ -194,9 +195,7 @@ function AgentListCard(props: {
                 <MoreVertical className="h-4 w-4" />
               </Button>
             </PopoverTrigger>
-            <PopoverContent align="end" className="w-56 p-1.5">
-              <PageResourceActionItems page={pageResourceFromSystemObject('agent', agent.id, agent.displayName || agent.id)} />
-              <div className="my-1 border-t border-border" />
+            <PopoverContent align="end" variant="menu">
               <AgentActionMenuItem
                 icon={Eye}
                 label={t("agentsViewDetailsAction")}
@@ -217,6 +216,8 @@ function AgentListCard(props: {
                   destructive
                 />
               ) : null}
+                <div className="my-1 h-px bg-border" />
+              <PageResourceActionItems page={pageResourceFromSystemObject('agent', agent.id, agent.displayName || agent.id)} onSelect={() => setMenuOpen(false)} />
             </PopoverContent>
           </Popover>
         </div>

package/src/features/chat/components/layout/__tests__/chat-page-shell.test.tsx

@@ -102,5 +102,3 @@ describe("ChatPageLayout", () => {
     expect(screen.queryByTestId("chat-conversation-panel")).toBeNull();
   });
 });
-
-vi.mock("@/features/right-panel-resources/components/current-page-actions", () => ({ CurrentPageActions: () => null }));

package/src/features/chat/components/layout/chat-page-shell.tsx

@@ -1,4 +1,3 @@
-import { CurrentPageActions } from '@/features/right-panel-resources';
 import { ResourcePage } from '@/features/right-panel-resources';
 import { lazy, Suspense, useLayoutEffect } from "react";
 import { ChatSidebar } from "@/features/chat/components/layout/chat-sidebar";
@@ -73,7 +72,6 @@ export function ChatPageLayout({ view, confirmDialog }: ChatPageLayoutProps) {
     {!isMobile ? <ChatSidebar /> : null}
     {view === 'chat' ? (isMobile ? <ChatMobileShell /> : <ChatConversationPanel />) : (
       <section data-theme-surface="workspace" className={`${resolveManagementWorkspaceClass(view)} flex flex-col`}>
-        {view !== 'resource' && view !== 'panel-app' ? <CurrentPageActions /> : null}
         <div className="min-h-0 flex-1 overflow-hidden"><ManagementPageContent view={view} /></div>
       </section>
     )}

package/src/features/chat/components/layout/chat-sidebar-desktop-layout.tsx

@@ -137,7 +137,6 @@ export function ChatSidebarDesktopNav({
                       : unreadCount
                     : undefined
                 }
-                className={isCollapsed ? undefined : "rounded-lg px-2.5 py-1.5"}
               />
             </li>
           ))}

package/src/features/chat/features/conversation/components/chat-voice-input-panel.tsx

@@ -7,7 +7,7 @@ import { ChatVoiceShortcutControl } from './chat-voice-shortcut-control';
 import { voicePermissionInstructionKeys } from '@/features/chat/utils/chat-voice-permissions.utils';
 
 const ERROR_KEYS: Record<VoiceError, string> = {
-  unsupported: 'chatInputVoiceUnsupported', permission: 'chatInputVoicePermissionDenied',
+  'insecure-context': 'chatInputVoiceInsecureContext', unsupported: 'chatInputVoiceUnsupported', permission: 'chatInputVoicePermissionDenied',
   'service-denied': 'chatInputVoiceServiceDenied', 'no-device': 'chatInputVoiceNoDevice', 'device-busy': 'chatInputVoiceDeviceBusy',
   network: 'chatInputVoiceNetwork', 'audio-capture': 'chatInputVoiceDevice',
   'no-speech': 'chatInputVoiceNoSpeech', interrupted: 'chatInputVoiceInterrupted',
@@ -57,7 +57,8 @@ export function ChatVoiceInputPanel({ manager, snapshot, onStart, desktop }: {
       {phase === 'starting' ? <p className='sr-only'>{t('chatInputVoicePermissionPurpose')}</p> : null}
       {error ? <VoiceErrorDetails error={error} microphoneError={microphoneError} text={snapshot.text} /> : null}
       </div>
-      {error ? <Button className='mt-2 shrink-0 self-start' size='sm' disabled={error === 'unsupported'} onClick={onStart}>
+      {error ? <Button className='mt-2 shrink-0 self-start' size='sm'
+        disabled={error === 'unsupported' || error === 'insecure-context'} onClick={onStart}>
         {t(microphoneError ? 'chatInputVoiceCheckAndRetry' : 'chatInputVoiceRetry')}
       </Button> : null}
       {phase === 'error' ? <Button className='mt-2 shrink-0 self-start' variant='ghost' size='sm'

package/src/features/chat/features/conversation/hooks/__tests__/use-chat-voice-input.test.tsx

@@ -201,6 +201,10 @@ describe('dictation lifecycle', () => {
     expect(manager.getSnapshot().error).toBe('timeout');
   });
   it('handles unsupported APIs and thrown starts', async () => {
+    const insecure = new ChatVoiceInputManager(() => recognition, async () => null, () => false);
+    insecure.start('en', 'one', draft);
+    expect(insecure.getSnapshot().error).toBe('insecure-context');
+    expect(recognition.start).not.toHaveBeenCalled();
     const unsupported = new ChatVoiceInputManager(() => null);
     unsupported.start('en', 'one', draft);
     expect(unsupported.getSnapshot().error).toBe('unsupported');