@nextclaw/ui 0.20.3 → 0.22.0

package/src/features/desktop-capabilities/components/desktop-authorization-dialog.tsx

@@ -0,0 +1,161 @@
+import { useEffect, useState } from "react";
+import { ShieldAlert } from "lucide-react";
+import { toast } from "sonner";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/components/ui/dialog";
+import { Button } from "@/shared/components/ui/button";
+import { appQueryClient } from "@/app-query-client";
+import { nextclawClient } from "@/shared/lib/api/managers/client.manager";
+import { t } from "@/shared/lib/i18n";
+import { desktopCapabilityManager } from "../managers/desktop-capability.manager";
+import {
+  type DesktopAuthorizationRequest,
+  useDesktopAuthorizationStore,
+} from "../stores/desktop-authorization.store";
+
+const AUTHORIZATION_EVENT_TYPE = "desktop.authorization.required";
+
+export function DesktopAuthorizationDialog() {
+  const pending = useDesktopAuthorizationStore((state) => state.pending);
+  const present = useDesktopAuthorizationStore((state) => state.present);
+  const clear = useDesktopAuthorizationStore((state) => state.clear);
+  const [isGranting, setIsGranting] = useState(false);
+
+  useEffect(() => nextclawClient.eventBus.subscribeAll((event) => {
+    if (event.type !== AUTHORIZATION_EVENT_TYPE) return;
+    const request = readAuthorizationRequest(event.payload);
+    if (request) present(request);
+  }), [present]);
+
+  const allow = async () => {
+    if (!pending || isGranting) return;
+    setIsGranting(true);
+    try {
+      await desktopCapabilityManager.grantAccess(pending.request);
+      await appQueryClient.invalidateQueries({
+        queryKey: ["desktop-capability", "grants"],
+      });
+      clear();
+      toast.success(t("desktopAuthorizationAllowed"));
+    } catch (error) {
+      toast.error(
+        error instanceof Error
+          ? error.message
+          : t("desktopAuthorizationFailed"),
+      );
+    } finally {
+      setIsGranting(false);
+    }
+  };
+
+  return (
+    <Dialog
+      open={Boolean(pending)}
+      onOpenChange={(open) => {
+        if (!open && !isGranting) clear();
+      }}
+    >
+      <DialogContent className="[&>:last-child]:hidden">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <ShieldAlert className="h-4 w-4 text-amber-600" />
+            {t("desktopAuthorizationTitle")}
+          </DialogTitle>
+          <DialogDescription>
+            {t("desktopAuthorizationDescription")}
+          </DialogDescription>
+        </DialogHeader>
+        {pending ? (
+          <div className="space-y-3 rounded-xl bg-muted/55 p-4 text-sm">
+            <AuthorizationField
+              label={t("desktopAuthorizationCaller")}
+              value={formatSubject(pending)}
+            />
+            <AuthorizationField
+              label={t("desktopAuthorizationApplication")}
+              value={pending.applicationId}
+            />
+            <AuthorizationField
+              label={t("desktopAuthorizationAccess")}
+              value={pending.request.access.map(formatAccess).join(", ")}
+            />
+            <p className="text-xs leading-5 text-muted-foreground">
+              {formatRisk(pending.request.access)}
+            </p>
+          </div>
+        ) : null}
+        <DialogFooter className="gap-2 sm:gap-0">
+          <Button
+            type="button"
+            variant="outline"
+            disabled={isGranting}
+            onClick={clear}
+          >
+            {t("desktopAuthorizationReject")}
+          </Button>
+          <Button type="button" disabled={isGranting} onClick={() => void allow()}>
+            {isGranting ? t("desktopAuthorizationAllowing") : t("desktopAuthorizationAllow")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function AuthorizationField({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="grid grid-cols-[5rem_minmax(0,1fr)] gap-3">
+      <div className="text-xs font-medium text-muted-foreground">{label}</div>
+      <div className="min-w-0 break-words text-xs text-foreground">{value}</div>
+    </div>
+  );
+}
+
+function readAuthorizationRequest(value: unknown): DesktopAuthorizationRequest | null {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+  const payload = value as Record<string, unknown>;
+  const { request } = payload;
+  if (!request || typeof request !== "object" || Array.isArray(request)) return null;
+  const candidate = request as Record<string, unknown>;
+  if (
+    typeof payload.applicationId !== "string" ||
+    !candidate.subject ||
+    !candidate.resource ||
+    !Array.isArray(candidate.access) ||
+    typeof candidate.declarationFingerprint !== "string"
+  ) return null;
+  return {
+    applicationId: payload.applicationId,
+    request: candidate as DesktopAuthorizationRequest["request"],
+  };
+}
+
+function formatSubject(pending: DesktopAuthorizationRequest): string {
+  const { subject } = pending.request;
+  const label = subject.type === "agent"
+    ? t("desktopCapabilitiesAgent")
+    : t("desktopCapabilitiesExtension");
+  return `${label} · ${subject.id}`;
+}
+
+function formatAccess(access: string): string {
+  if (access === "ui.read") return t("desktopAuthorizationRead");
+  if (access === "ui.observe") return t("desktopAuthorizationObserve");
+  if (access === "ui.write") return t("desktopAuthorizationWrite");
+  if (access === "screen.capture-window") return t("desktopAuthorizationScreenCapture");
+  if (access === "input.pointer") return t("desktopAuthorizationPointerInput");
+  return access;
+}
+
+function formatRisk(access: string[]): string {
+  if (access.includes("ui.write")) return t("desktopAuthorizationWriteRisk");
+  if (access.includes("screen.capture-window")) return t("desktopAuthorizationScreenCaptureRisk");
+  if (access.includes("input.pointer")) return t("desktopAuthorizationPointerInputRisk");
+  return t("desktopAuthorizationReadRisk");
+}

package/src/features/desktop-capabilities/hooks/use-desktop-capabilities.test.ts

@@ -0,0 +1,10 @@
+import { describe, expect, it } from "vitest";
+import { isDesktopAutomationAvailable } from "./use-desktop-capabilities";
+
+describe("isDesktopAutomationAvailable", () => {
+  it("uses only the backend product feature-control value", () => {
+    expect(isDesktopAutomationAvailable({ desktopAutomation: { available: true } })).toBe(true);
+    expect(isDesktopAutomationAvailable({ desktopAutomation: { available: false } })).toBe(false);
+    expect(isDesktopAutomationAvailable(undefined)).toBe(false);
+  });
+});

package/src/features/desktop-capabilities/hooks/use-desktop-capabilities.ts

@@ -0,0 +1,55 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { CapabilityGrantView, ProductFeatureControlsView } from "@nextclaw/client-sdk";
+import { useFeatureControls } from "@/app/hooks/use-feature-controls";
+import { desktopCapabilityManager } from "../managers/desktop-capability.manager";
+
+const STATUS_QUERY_KEY = ["desktop-capability", "status"] as const;
+const GRANTS_QUERY_KEY = ["desktop-capability", "grants"] as const;
+
+export function useDesktopCapabilityStatus() {
+  return useQuery({
+    queryKey: STATUS_QUERY_KEY,
+    queryFn: desktopCapabilityManager.getStatus,
+  });
+}
+
+export function useDesktopCapabilityAvailability(): boolean {
+  const featureControls = useFeatureControls();
+  return isDesktopAutomationAvailable(featureControls.data);
+}
+
+export function isDesktopAutomationAvailable(controls: ProductFeatureControlsView | undefined): boolean {
+  return controls?.desktopAutomation.available === true;
+}
+
+export function useDesktopCapabilityGrants() {
+  return useQuery({
+    queryKey: GRANTS_QUERY_KEY,
+    queryFn: desktopCapabilityManager.listGrants,
+  });
+}
+
+export function useRequestDesktopSystemPermission() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: desktopCapabilityManager.requestSystemPermission,
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: STATUS_QUERY_KEY });
+    },
+  });
+}
+
+export function useOpenDesktopSystemSettings() {
+  return useMutation({ mutationFn: desktopCapabilityManager.openSystemSettings });
+}
+
+export function useRevokeDesktopGrant() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (grant: CapabilityGrantView) =>
+      await desktopCapabilityManager.revokeGrant(grant),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: GRANTS_QUERY_KEY });
+    },
+  });
+}

package/src/features/desktop-capabilities/index.ts

@@ -0,0 +1 @@
+export { DesktopAuthorizationDialog } from "./components/desktop-authorization-dialog";

package/src/features/desktop-capabilities/managers/desktop-capability.manager.ts

@@ -0,0 +1,25 @@
+import type {
+  CapabilityGrantRequestView,
+  CapabilityGrantView,
+} from "@nextclaw/client-sdk";
+import { nextclawClient } from "@/shared/lib/api/managers/client.manager";
+
+export class DesktopCapabilityManager {
+  getStatus = async () => await nextclawClient.capabilityAccess.getDesktopStatus();
+
+  listGrants = async () => await nextclawClient.capabilityAccess.listDesktopGrants();
+
+  grantAccess = async (request: CapabilityGrantRequestView) =>
+    await nextclawClient.capabilityAccess.grantDesktopAccess(request);
+
+  requestSystemPermission = async () =>
+    await nextclawClient.capabilityAccess.requestDesktopPermissions();
+
+  openSystemSettings = async () =>
+    await nextclawClient.capabilityAccess.openDesktopPermissionSettings();
+
+  revokeGrant = async (grant: CapabilityGrantView) =>
+    await nextclawClient.capabilityAccess.revokeDesktopAccess(grant);
+}
+
+export const desktopCapabilityManager = new DesktopCapabilityManager();

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/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/pwa/managers/__tests__/pwa-shell-theme.manager.test.ts

@@ -100,6 +100,15 @@ describe('PwaShellThemeManager', () => {
     expect(document.documentElement.style.colorScheme).toBe('dark');
   });
 
+  it('applies island shell colors and light color scheme', () => {
+    pwaShellThemeManager.syncTheme('island');
+
+    const meta = document.querySelector('meta[name="theme-color"]');
+    expect(meta?.getAttribute('content')).toBe('#FBF8ED');
+    expect(document.body.style.backgroundColor).toBe('rgb(251, 248, 237)');
+    expect(document.documentElement.style.colorScheme).toBe('light');
+  });
+
   it('maps the legacy leaf theme to warm shell colors', () => {
     document.documentElement.setAttribute('data-theme', 'leaf');
 

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

@@ -15,6 +15,7 @@ const PWA_SHELL_THEME_COLORS: Record<UiTheme, string> = {
   graphite: '#F8F8F7',
   night: '#101318',
   charcoal: '#1C1C1C',
+  island: '#FBF8ED',
   probe: '#FEFCF6',
 };