@nextclaw/ui 0.20.2 → 0.21.0

package/src/features/desktop-capabilities/pages/desktop-capabilities-page.test.tsx

@@ -0,0 +1,44 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { DesktopCapabilitiesPage } from "./desktop-capabilities-page";
+
+const mocks = vi.hoisted(() => ({ refetch: vi.fn(), revoke: vi.fn() }));
+
+vi.mock("../hooks/use-desktop-capabilities", () => ({
+  useDesktopCapabilityStatus: () => ({
+    data: {
+      online: true,
+      permissions: { accessibility: "granted", screenCapture: "not_supported" },
+    },
+    isLoading: false,
+    isFetching: false,
+    refetch: mocks.refetch,
+  }),
+  useDesktopCapabilityGrants: () => ({
+    data: [
+      {
+        subject: { type: "agent", id: "main" },
+        resource: { type: "desktop.application", target: { applicationId: "wechat" } },
+        access: ["ui.read"],
+        declarationFingerprint: "fingerprint",
+        grantedAt: "2026-08-26T00:00:00.000Z",
+      },
+    ],
+    isLoading: false,
+  }),
+  useRequestDesktopSystemPermission: () => ({ isPending: false, mutate: vi.fn() }),
+  useOpenDesktopSystemSettings: () => ({ isPending: false, mutate: vi.fn() }),
+  useRevokeDesktopGrant: () => ({ isPending: false, mutate: mocks.revoke }),
+}));
+
+describe("DesktopCapabilitiesPage", () => {
+  it("shows system permission and Agent grants with reachable actions", () => {
+    render(<DesktopCapabilitiesPage />);
+
+    expect(screen.getByText("Desktop Access")).toBeTruthy();
+    expect(screen.getByText("AI · main")).toBeTruthy();
+    expect(screen.getByText("wechat · ui.read")).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: "Check again" }));
+    expect(mocks.refetch).toHaveBeenCalledOnce();
+  });
+});

package/src/features/desktop-capabilities/pages/desktop-capabilities-page.tsx

@@ -0,0 +1,171 @@
+import type { CapabilityGrantView } from "@nextclaw/client-sdk";
+import { Button } from "@/shared/components/ui/button";
+import { SettingsPage } from "@/shared/components/settings/settings-page";
+import {
+  SettingRow,
+  SettingsGroup,
+  SettingsSection,
+} from "@/shared/components/settings/setting-row";
+import { t } from "@/shared/lib/i18n";
+import {
+  useDesktopCapabilityGrants,
+  useDesktopCapabilityStatus,
+  useOpenDesktopSystemSettings,
+  useRequestDesktopSystemPermission,
+  useRevokeDesktopGrant,
+} from "../hooks/use-desktop-capabilities";
+
+export function DesktopCapabilitiesPage() {
+  const statusQuery = useDesktopCapabilityStatus();
+  const grantsQuery = useDesktopCapabilityGrants();
+  const requestPermission = useRequestDesktopSystemPermission();
+  const openSettings = useOpenDesktopSystemSettings();
+  const revokeGrant = useRevokeDesktopGrant();
+  const status = statusQuery.data;
+  const busy = requestPermission.isPending || openSettings.isPending;
+
+  return (
+    <SettingsPage
+      title={t("desktopCapabilitiesPageTitle")}
+      description={t("desktopCapabilitiesPageDescription")}
+    >
+      <SettingsSection
+        title={t("desktopCapabilitiesSystemTitle")}
+        description={t("desktopCapabilitiesSystemDescription")}
+      >
+        <SettingsGroup>
+          <SettingRow
+            title={t("desktopCapabilitiesHostStatus")}
+            description={
+              statusQuery.isLoading
+                ? t("loading")
+                : status?.online
+                  ? t("desktopCapabilitiesHostOnline")
+                  : t("desktopCapabilitiesHostOffline")
+            }
+            control={(
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                disabled={statusQuery.isFetching}
+                onClick={() => void statusQuery.refetch()}
+              >
+                {t("desktopCapabilitiesRecheck")}
+              </Button>
+            )}
+          />
+          <SettingRow
+            title={t("desktopCapabilitiesAccessibility")}
+            description={formatPermission(status?.permissions.accessibility)}
+            control={(
+              <div className="flex flex-wrap justify-end gap-2">
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  disabled={busy}
+                  onClick={() => openSettings.mutate()}
+                >
+                  {t("desktopCapabilitiesOpenSettings")}
+                </Button>
+                <Button
+                  type="button"
+                  size="sm"
+                  disabled={busy}
+                  onClick={() => requestPermission.mutate()}
+                >
+                  {t("desktopCapabilitiesRequestPermission")}
+                </Button>
+              </div>
+            )}
+          />
+        </SettingsGroup>
+      </SettingsSection>
+
+      <SettingsSection
+        title={t("desktopCapabilitiesGrantsTitle")}
+        description={t("desktopCapabilitiesGrantsDescription")}
+      >
+        <SettingsGroup>
+          {grantsQuery.isLoading ? (
+            <SettingRow title={t("loading")} />
+          ) : grantsQuery.data?.length ? (
+            grantsQuery.data.map((grant) => (
+              <DesktopGrantRow
+                key={grantKey(grant)}
+                grant={grant}
+                disabled={revokeGrant.isPending}
+                onRevoke={() => revokeGrant.mutate(grant)}
+              />
+            ))
+          ) : (
+            <SettingRow
+              title={t("desktopCapabilitiesNoGrants")}
+              description={t("desktopCapabilitiesNoGrantsDescription")}
+            />
+          )}
+        </SettingsGroup>
+      </SettingsSection>
+    </SettingsPage>
+  );
+}
+
+function DesktopGrantRow({
+  disabled,
+  grant,
+  onRevoke,
+}: {
+  disabled: boolean;
+  grant: CapabilityGrantView;
+  onRevoke: () => void;
+}) {
+  const target = readApplicationId(grant.resource.target);
+  const subject = grant.subject.type === "agent"
+    ? `${t("desktopCapabilitiesAgent")} · ${grant.subject.id}`
+    : `${t("desktopCapabilitiesExtension")} · ${grant.subject.id}`;
+  return (
+    <SettingRow
+      title={subject}
+      description={`${target} · ${grant.access.join(", ")}`}
+      control={(
+        <Button
+          type="button"
+          variant="destructive"
+          size="sm"
+          disabled={disabled}
+          onClick={onRevoke}
+        >
+          {t("desktopCapabilitiesRevoke")}
+        </Button>
+      )}
+    />
+  );
+}
+
+function readApplicationId(target: unknown): string {
+  if (!target || typeof target !== "object" || Array.isArray(target)) {
+    return t("desktopCapabilitiesUnknownApplication");
+  }
+  const { applicationId } = target as { applicationId?: unknown };
+  return typeof applicationId === "string" && applicationId.trim()
+    ? applicationId.trim()
+    : t("desktopCapabilitiesUnknownApplication");
+}
+
+function formatPermission(value: string | undefined): string {
+  switch (value) {
+    case "granted":
+      return t("desktopCapabilitiesPermissionGranted");
+    case "not_granted":
+      return t("desktopCapabilitiesPermissionNotGranted");
+    case "not_supported":
+      return t("desktopCapabilitiesPermissionNotSupported");
+    default:
+      return t("desktopCapabilitiesPermissionUnknown");
+  }
+}
+
+function grantKey(grant: CapabilityGrantView): string {
+  return `${grant.subject.type}:${grant.subject.id}:${JSON.stringify(grant.resource.target)}:${grant.access.join(",")}`;
+}

package/src/features/desktop-capabilities/stores/desktop-authorization.store.ts

@@ -0,0 +1,21 @@
+import { create } from "zustand";
+import type { CapabilityGrantRequestView } from "@nextclaw/client-sdk";
+
+export type DesktopAuthorizationRequest = {
+  applicationId: string;
+  request: CapabilityGrantRequestView;
+};
+
+type DesktopAuthorizationState = {
+  pending: DesktopAuthorizationRequest | null;
+  present: (request: DesktopAuthorizationRequest) => void;
+  clear: () => void;
+};
+
+export const useDesktopAuthorizationStore = create<DesktopAuthorizationState>(
+  (set) => ({
+    pending: null,
+    present: (pending) => set({ pending }),
+    clear: () => set({ pending: null }),
+  }),
+);

package/src/features/inbox/pages/inbox-page.tsx

@@ -12,6 +12,7 @@ import { Button } from "@/shared/components/ui/button";
 import { useConfirmDialog } from "@/shared/hooks/use-confirm-dialog";
 import { formatDateShort, formatDateTime, t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
+import { useScrollRestoration } from "@/shared/hooks/use-scroll-restoration";
 
 type InboxFilter = "unread" | "all" | "archived";
 
@@ -64,6 +65,10 @@ function InboxListPane({
   filter: InboxFilter;
   onFilterChange: (filter: InboxFilter) => void;
 }) {
+  const scrollRestoration = useScrollRestoration<HTMLDivElement>({
+    restorationKey: "inbox:list",
+  });
+  const { onScroll, scrollRef } = scrollRestoration;
   const filterItems: Array<{ id: InboxFilter; label: string; count: number }> = [
     {
       id: "unread",
@@ -100,7 +105,11 @@ function InboxListPane({
           </button>
         ))}
       </div>
-      <div className="custom-scrollbar min-h-0 flex-1 overflow-y-auto p-2">
+      <div
+        ref={scrollRef}
+        onScroll={onScroll}
+        className="custom-scrollbar min-h-0 flex-1 overflow-y-auto p-2"
+      >
         {filteredDeliveries.length > 0 ? (
           <ul className="space-y-0.5">
             {filteredDeliveries.map((delivery) => (
@@ -166,6 +175,10 @@ function InboxDetailPane({
   onDelete: () => void;
   onReadToggle: () => void;
 }) {
+  const scrollRestoration = useScrollRestoration<HTMLDivElement>({
+    restorationKey: delivery ? `inbox:delivery:${delivery.id}` : null,
+  });
+  const { onScroll, scrollRef } = scrollRestoration;
   if (!delivery) {
     return <main className="flex min-h-0 flex-col"><InboxEmptyState selection /></main>;
   }
@@ -204,7 +217,10 @@ function InboxDetailPane({
         isHtml
           ? "p-3 sm:p-4"
           : "custom-scrollbar overflow-y-auto px-5 py-5 sm:px-6 sm:py-6",
-      )}>
+      )}
+      ref={scrollRef}
+      onScroll={onScroll}
+      >
         <div className={cn("mx-auto max-w-5xl", isHtml && "h-full")}>
           <InboxDeliveryContent
             className={isHtml ? "h-full" : undefined}

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

@@ -30,6 +30,7 @@ import { PageLayout } from "@/app/components/layout/page-layout";
 import { useEffect, useMemo, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { useInfiniteScrollLoader } from "@/shared/hooks/use-infinite-scroll-loader";
+import { useScrollRestoration } from "@/shared/hooks/use-scroll-restoration";
 import { Tabs, TabsList, TabsTrigger } from "@/shared/components/ui/tabs";
 
 const PAGE_SIZE = 20;
@@ -95,6 +96,11 @@ export function MarketplacePage({
     onLoadMore: () => itemsQuery.fetchNextPage(),
     watchValue: `${typeFilter}:${scope}:${query}:${sceneParam ?? ""}:${sort}:${itemsQuery.data?.loadedItems ?? 0}:${itemsQuery.data?.loadedPages ?? 0}`,
   });
+  const scrollRestoration = useScrollRestoration({
+    restorationKey: `marketplace:${forcedType ?? "all"}`,
+    scrollRef: listContainerRef,
+  });
+  const { onScroll: onScrollPositionSave } = scrollRestoration;
 
   useEffect(() => {
     const container = listContainerRef.current;
@@ -177,6 +183,7 @@ export function MarketplacePage({
       <section className="flex min-h-0 flex-1 flex-col">
         <div
           ref={listContainerRef}
+          onScroll={onScrollPositionSave}
           className="min-h-0 flex-1 overflow-y-auto custom-scrollbar pr-1"
           aria-busy={listModel.showListSkeleton || itemsQuery.isFetchingNextPage}
         >

package/src/features/marketplace/components/mcp/__tests__/mcp-connection-dialog.test.tsx

@@ -0,0 +1,23 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { McpConnectionDialog } from "../mcp-connection-dialog";
+
+describe("McpConnectionDialog", () => {
+  it("requires a successful test before saving a stdio connection", async () => {
+    const onTest = vi.fn(async () => ({ name: "local-tools", transport: "stdio" as const, accessible: true, toolCount: 2 }));
+    const onSave = vi.fn(async () => undefined);
+    render(<McpConnectionDialog open testing={false} saving={false} onOpenChange={vi.fn()} onTest={onTest} onSave={onSave} />);
+
+    const saveButton = screen.getByRole("button", { name: "Save connection" });
+    expect(saveButton.hasAttribute("disabled")).toBe(true);
+    fireEvent.change(screen.getByLabelText("Name"), { target: { value: "local-tools" } });
+    fireEvent.change(screen.getByLabelText("Command"), { target: { value: "node" } });
+    fireEvent.click(screen.getByRole("button", { name: "Test connection" }));
+
+    await waitFor(() => expect(onTest).toHaveBeenCalledOnce());
+    expect(await screen.findByText("Connected. Found 2 tools.")).not.toBeNull();
+    expect(saveButton.hasAttribute("disabled")).toBe(false);
+    fireEvent.click(saveButton);
+    await waitFor(() => expect(onSave).toHaveBeenCalledOnce());
+  });
+});

package/src/features/marketplace/components/mcp/mcp-connection-dialog.tsx

@@ -0,0 +1,35 @@
+import { useMemo, useState, type ReactNode } from "react";
+import type { McpConnectionRequest, McpConnectionTestResult } from "@nextclaw/client-sdk";
+import { Button } from "@/shared/components/ui/button";
+import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from "@/shared/components/ui/overlays/sheet";
+import { Input } from "@/shared/components/ui/input";
+import { Textarea } from "@/shared/components/ui/textarea";
+import { Switch } from "@/shared/components/ui/switch";
+import { t } from "@/shared/lib/i18n";
+
+type Transport = "stdio" | "http" | "sse";
+
+export function McpConnectionDialog({ open, testing, saving, onOpenChange, onTest, onSave }: {
+  open: boolean; testing: boolean; saving: boolean; onOpenChange: (open: boolean) => void;
+  onTest: (request: McpConnectionRequest) => Promise<McpConnectionTestResult>; onSave: (request: McpConnectionRequest) => Promise<void>;
+}) {
+  const [transport, setTransport] = useState<Transport>("stdio");
+  const [name, setName] = useState(""); const [command, setCommand] = useState(""); const [args, setArgs] = useState("");
+  const [cwd, setCwd] = useState(""); const [env, setEnv] = useState(""); const [url, setUrl] = useState("");
+  const [headers, setHeaders] = useState(""); const [timeout, setTimeout] = useState("15000"); const [verifyTls, setVerifyTls] = useState(true);
+  const [result, setResult] = useState<McpConnectionTestResult | null>(null); const [error, setError] = useState<string | null>(null);
+  const request = useMemo(() => buildRequest({ transport, name, command, args, cwd, env, url, headers, timeout, verifyTls }), [args, command, cwd, env, headers, name, timeout, transport, url, verifyTls]);
+  const dirty = () => { setResult(null); setError(null); };
+  const test = async () => { if (request instanceof Error) return setError(request.message); dirty(); try { const next = await onTest(request); setResult(next); if (!next.accessible) setError(next.error ?? t("mcpConnectionTestFailed")); } catch (cause) { setError(cause instanceof Error ? cause.message : String(cause)); } };
+  const save = async () => { if (request instanceof Error || !result?.accessible) return; try { await onSave(request); onOpenChange(false); dirty(); } catch (cause) { setError(cause instanceof Error ? cause.message : String(cause)); } };
+  return <Sheet open={open} onOpenChange={onOpenChange}><SheetContent side="right" closeLabel={t("cancel")} className="flex h-full w-full flex-col overflow-hidden p-0 sm:max-w-[560px]"><SheetHeader className="shrink-0 border-b border-border/60 px-5 pb-5 pt-6 pr-14 sm:px-7 sm:pt-7"><SheetTitle>{t("mcpConnectionTitle")}</SheetTitle><SheetDescription>{t("mcpConnectionDescription")}</SheetDescription></SheetHeader><div className="min-h-0 flex-1 space-y-4 overflow-y-auto px-5 py-6 sm:px-7">
+    <Field label={t("mcpConnectionTransport")}><select className="flex h-10 w-full rounded-xl border border-border/75 bg-card px-3 text-sm" value={transport} onChange={(e) => { setTransport(e.target.value as Transport); dirty(); }}><option value="stdio">{t("mcpConnectionStdio")}</option><option value="http">HTTP</option><option value="sse">SSE</option></select></Field>
+    <Field label={t("mcpConnectionName")}><Input value={name} onChange={(e) => { setName(e.target.value); dirty(); }} placeholder="my-mcp" /></Field>
+    {transport === "stdio" ? <><Field label={t("mcpConnectionCommand")}><Input value={command} onChange={(e) => { setCommand(e.target.value); dirty(); }} placeholder="npx" /></Field><Field label={t("mcpConnectionArgs")} hint={t("mcpConnectionArgsHint")}><Input value={args} onChange={(e) => { setArgs(e.target.value); dirty(); }} placeholder="-y @example/mcp-server" /></Field><Field label={t("mcpConnectionCwd")}><Input value={cwd} onChange={(e) => { setCwd(e.target.value); dirty(); }} /></Field><Field label={t("mcpConnectionEnv")} hint={t("mcpConnectionPairsHint")}><Textarea className="min-h-20 font-mono" value={env} onChange={(e) => { setEnv(e.target.value); dirty(); }} placeholder="API_KEY=..." /></Field><p className="rounded-xl bg-amber-500/10 px-3 py-2 text-sm text-amber-900 dark:text-amber-100">{t("mcpConnectionLocalWarning")}</p></> : <><Field label={t("mcpConnectionUrl")}><Input type="url" value={url} onChange={(e) => { setUrl(e.target.value); dirty(); }} placeholder="https://example.com/mcp" /></Field><Field label={t("mcpConnectionHeaders")} hint={t("mcpConnectionPairsHint")}><Textarea className="min-h-20 font-mono" value={headers} onChange={(e) => { setHeaders(e.target.value); dirty(); }} placeholder="Authorization=Bearer ..." /></Field><Field label={t("mcpConnectionTimeout")}><Input type="number" min="1" value={timeout} onChange={(e) => { setTimeout(e.target.value); dirty(); }} /></Field><div className="flex items-center justify-between rounded-xl bg-muted/60 px-3 py-3"><span className="text-sm">{t("mcpConnectionVerifyTls")}</span><Switch checked={verifyTls} onCheckedChange={(value) => { setVerifyTls(value); dirty(); }} /></div><p className="rounded-xl bg-muted px-3 py-2 text-sm text-muted-foreground">{t("mcpConnectionRemoteWarning")}</p></>}
+    {result?.accessible ? <p className="rounded-xl bg-emerald-500/10 px-3 py-2 text-sm text-emerald-800 dark:text-emerald-100">{t("mcpConnectionTestSuccess").replace("{count}", String(result.toolCount))}</p> : null}{error ? <p role="alert" className="rounded-xl bg-destructive/10 px-3 py-2 text-sm text-destructive">{error}</p> : null}
+  </div><SheetFooter className="shrink-0 border-t border-border/60 bg-background px-5 py-4 sm:px-7"><Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={testing || saving}>{t("cancel")}</Button><Button type="button" variant="outline" onClick={() => void test()} disabled={testing || saving}>{testing ? t("mcpConnectionTesting") : t("mcpConnectionTest")}</Button><Button type="button" onClick={() => void save()} disabled={!result?.accessible || testing || saving}>{saving ? t("saving") : t("mcpConnectionSave")}</Button></SheetFooter></SheetContent></Sheet>;
+}
+
+function Field({ label, hint, children }: { label: string; hint?: string; children: ReactNode }) { return <label className="block space-y-1.5"><span className="text-sm font-medium">{label}</span>{hint ? <span className="block text-xs text-muted-foreground">{hint}</span> : null}{children}</label>; }
+function buildRequest(input: { transport: Transport; name: string; command: string; args: string; cwd: string; env: string; url: string; headers: string; timeout: string; verifyTls: boolean }): McpConnectionRequest | Error { try { const name = input.name.trim(); if (!name) throw new Error(t("mcpConnectionNameRequired")); if (input.transport === "stdio") { const command = input.command.trim(); if (!command) throw new Error(t("mcpConnectionCommandRequired")); return { name, definition: { enabled: true, transport: { type: "stdio", command, args: input.args.trim() ? input.args.trim().split(/\s+/) : [], cwd: input.cwd.trim(), env: pairs(input.env), stderr: "pipe" }, scope: { allAgents: true, agents: [] }, policy: { trust: "explicit", start: "eager" } } }; } const url = input.url.trim(); if (!url) throw new Error(t("mcpConnectionUrlRequired")); const timeoutMs = Number(input.timeout); if (!Number.isFinite(timeoutMs) || timeoutMs <= 0) throw new Error(t("mcpConnectionTimeoutInvalid")); const common = { url, headers: pairs(input.headers), timeoutMs: Math.trunc(timeoutMs), verifyTls: input.verifyTls }; return { name, definition: { enabled: true, transport: input.transport === "http" ? { type: "http", ...common } : { type: "sse", ...common, reconnect: { enabled: true, initialDelayMs: 1000, maxDelayMs: 30000 } }, scope: { allAgents: true, agents: [] }, policy: { trust: "explicit", start: "eager" } } }; } catch (error) { return error instanceof Error ? error : new Error(String(error)); } }
+function pairs(value: string): Record<string, string> { return Object.fromEntries(value.split("\n").filter(Boolean).map((line) => { const index = line.indexOf("="); if (index <= 0) throw new Error(t("mcpConnectionPairsInvalid")); return [line.slice(0, index).trim(), line.slice(index + 1)]; })); }

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

@@ -9,7 +9,9 @@ import type {
 } from "@/shared/lib/api";
 import {
   fetchMcpMarketplaceContent,
+  createMcpConnection,
   doctorMcpMarketplaceItem,
+  testMcpConnection,
 } from "@/shared/lib/api";
 import { SettingsPage } from "@/shared/components/settings/settings-page";
 import {
@@ -19,6 +21,7 @@ import {
 } from "@/features/marketplace/components/marketplace-page-parts";
 import { buildLocaleFallbacks } from "@/features/marketplace/components/marketplace-localization";
 import { McpMarketplaceCard } from "@/features/marketplace/components/mcp/mcp-marketplace-card";
+import { McpConnectionDialog } from "@/features/marketplace/components/mcp/mcp-connection-dialog";
 import {
   buildInstalledRecordLookup,
   findInstalledRecordForItem,
@@ -46,6 +49,7 @@ import { t } from "@/shared/lib/i18n";
 import { useInfiniteScrollLoader } from "@/shared/hooks/use-infinite-scroll-loader";
 import { cn } from "@/shared/lib/utils";
 import { Sparkles, PackageCheck } from "lucide-react";
+import { Button } from "@/shared/components/ui/button";
 
 type ScopeType = "catalog" | "installed";
 
@@ -61,6 +65,7 @@ export function McpMarketplacePage() {
   const [doctorTarget, setDoctorTarget] = useState<string | null>(null);
   const [doctorResult, setDoctorResult] =
     useState<MarketplaceMcpDoctorResult | null>(null);
+  const [connectionOpen, setConnectionOpen] = useState(false);
   const { language } = useI18n();
   const docBrowser = useDocBrowser();
   const { confirm, ConfirmDialog } = useConfirmDialog();
@@ -110,6 +115,8 @@ export function McpMarketplacePage() {
       setDoctorResult(result);
     },
   });
+  const testConnectionMutation = useMutation({ mutationFn: testMcpConnection });
+  const createConnectionMutation = useMutation({ mutationFn: createMcpConnection });
 
   const installedRecordLookup = useMemo(() => {
     return buildInstalledRecordLookup(installedQuery.data?.records ?? []);
@@ -325,6 +332,9 @@ export function McpMarketplacePage() {
                   : (installedQuery.data?.total ?? 0)}
               </span>
             </h3>
+            <Button type="button" size="sm" onClick={() => setConnectionOpen(true)}>
+              {t("mcpConnectionOpen")}
+            </Button>
           </div>
 
           <div
@@ -441,13 +451,21 @@ export function McpMarketplacePage() {
           </div>
         </section>
 
-      <InstallDialog
+        <InstallDialog
         item={installingItem}
         open={Boolean(installingItem)}
         pending={installMutation.isPending}
         onOpenChange={(open) => !open && setInstallingItem(null)}
         onSubmit={handleInstall}
-      />
+        />
+        <McpConnectionDialog
+          open={connectionOpen}
+          testing={testConnectionMutation.isPending}
+          saving={createConnectionMutation.isPending}
+          onOpenChange={setConnectionOpen}
+          onTest={(request) => testConnectionMutation.mutateAsync(request)}
+          onSave={async (request) => { await createConnectionMutation.mutateAsync(request); }}
+        />
       <DoctorDialog
         open={Boolean(doctorTarget)}
         targetName={doctorTarget}

package/src/features/panel-apps/pages/panel-app-main-page.tsx

@@ -12,6 +12,7 @@ import {
 } from "@/features/panel-apps/utils/panel-app-iframe.utils";
 import { openApps } from "@/features/panel-apps/utils/panel-app-doc-browser.utils";
 import { useDocBrowser } from "@/shared/components/doc-browser";
+import { usePanelAppScrollRestoration } from "@/shared/hooks/use-panel-app-scroll-restoration";
 import { t } from "@/shared/lib/i18n";
 
 export function PanelAppMainPage() {
@@ -25,6 +26,12 @@ export function PanelAppMainPage() {
     [appId, panelApps.data?.entries],
   );
   const runtime = usePanelAppMainRuntime(entry);
+  const restoreScroll = usePanelAppScrollRestoration({
+    currentUrl: entry?.contentPath ?? null,
+    iframeRef,
+    isEnabled: Boolean(entry),
+    restorationKey: entry ? `panel-app:main:${entry.appId}` : null,
+  });
 
   useEffect(() => {
     const handleMessage = (event: MessageEvent) => {
@@ -88,6 +95,7 @@ export function PanelAppMainPage() {
         title={entry.title}
         sandbox={PANEL_APP_IFRAME_SANDBOX}
         className="block h-full w-full border-0 bg-background"
+        onLoad={restoreScroll}
         onPointerOver={(event) => focusPanelAppIframe(event.currentTarget)}
       />
     </div>

package/src/platforms/desktop/components/desktop-app-shell.tsx

@@ -14,6 +14,7 @@ import type { DocBrowserTabMenuGroupsResolver } from "@/shared/components/doc-br
 import { cn } from "@/shared/lib/utils";
 import { useViewportLayoutStore } from "@/app/stores/viewport-layout.store";
 import { SIDEBAR_RAIL_WIDTH_PX } from "@/app/components/layout/sidebar-rail.styles";
+import { useScrollRestoration } from "@/shared/hooks/use-scroll-restoration";
 
 const DocBrowser = lazy(async () => ({
   default: (await import("@/shared/components/doc-browser/doc-browser"))
@@ -55,6 +56,10 @@ export function DesktopAppShell({
     : isMainRoute
       ? "280px"
       : "240px";
+  const settingsScroll = useScrollRestoration<HTMLElement>({
+    restorationKey: isMainRoute ? null : `settings-page:${pathname}`,
+  });
+  const { onScroll: onSettingsScroll, scrollRef: settingsScrollRef } = settingsScroll;
 
   return (
     <div
@@ -82,7 +87,11 @@ export function DesktopAppShell({
             {isMainRoute ? (
               <div className="flex-1 h-full overflow-hidden">{children}</div>
             ) : (
-              <main className="flex-1 overflow-auto p-8 pb-16 custom-scrollbar">
+              <main
+                ref={settingsScrollRef}
+                onScroll={onSettingsScroll}
+                className="flex-1 overflow-auto p-8 pb-16 custom-scrollbar"
+              >
                 <div className="mx-auto h-full max-w-6xl animate-fade-in">
                   {children}
                 </div>

package/src/platforms/mobile/components/mobile-settings-shell.tsx

@@ -2,9 +2,13 @@ import { NavLink } from "react-router-dom";
 import { getSettingsNavItems } from "@/app/configs/app-navigation.config";
 import { t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
+import { useDesktopCapabilityAvailability } from "@/features/desktop-capabilities/hooks/use-desktop-capabilities";
 
 export function MobileSettingsShell() {
-  const settingsNavItems = getSettingsNavItems(t);
+  const desktopCapabilityAvailable = useDesktopCapabilityAvailability();
+  const settingsNavItems = getSettingsNavItems(t, {
+    includeDesktopCapabilities: desktopCapabilityAvailable,
+  });
 
   return (
     <div

package/src/shared/components/doc-browser/doc-browser.tsx

@@ -215,7 +215,6 @@ export function DocBrowser({
     currentTab,
     iframeRef,
     isEnabled: supportsScrollRestoration,
-    tabs,
   });
   const { handleUrlSubmit, setUrlInput, urlInput } = useDocBrowserAddressBar({
     activeTabId,