feat: add support for self-signed TLS certificates

src/app/page.tsx

@@ -220,6 +220,7 @@ const AgentStudioPage = () => {
     gatewayUrl,
     draftGatewayUrl,
     token,
+    allowSelfSignedCerts,
     localGatewayDefaults,
     localGatewayDefaultsHasToken,
     hasStoredToken,
@@ -237,6 +238,7 @@ const AgentStudioPage = () => {
     useLocalGatewayDefaults,
     setGatewayUrl,
     setToken,
+    setAllowSelfSignedCerts,
     applyRuntimeStatusEvent,
   } = useStudioGatewaySettings(settingsCoordinator);
   const gatewayStatus: GatewayStatus = status;
@@ -1424,6 +1426,7 @@ const AgentStudioPage = () => {
               savedGatewayUrl={gatewayUrl}
               draftGatewayUrl={draftGatewayUrl}
               token={token}
+              allowSelfSignedCerts={allowSelfSignedCerts}
               localGatewayDefaults={localGatewayDefaults}
               localGatewayDefaultsHasToken={localGatewayDefaultsHasToken}
               hasStoredToken={hasStoredToken}
@@ -1438,6 +1441,7 @@ const AgentStudioPage = () => {
               disconnecting={gatewayDisconnecting}
               onGatewayUrlChange={setGatewayUrl}
               onTokenChange={setToken}
+              onAllowSelfSignedCertsChange={setAllowSelfSignedCerts}
               onUseLocalDefaults={useLocalGatewayDefaults}
               onSaveSettings={() => void saveSettings()}
               onTestConnection={() => void testConnection()}
@@ -1491,6 +1495,7 @@ const AgentStudioPage = () => {
                     savedGatewayUrl={gatewayUrl}
                     draftGatewayUrl={draftGatewayUrl}
                     token={token}
+                    allowSelfSignedCerts={allowSelfSignedCerts}
                     hasStoredToken={hasStoredToken}
                     localGatewayDefaultsHasToken={localGatewayDefaultsHasToken}
                     hasUnsavedChanges={hasUnsavedChanges}
@@ -1503,6 +1508,7 @@ const AgentStudioPage = () => {
                     disconnecting={gatewayDisconnecting}
                     onGatewayUrlChange={setGatewayUrl}
                     onTokenChange={setToken}
+                    onAllowSelfSignedCertsChange={setAllowSelfSignedCerts}
                     onSaveSettings={() => void saveSettings()}
                     onTestConnection={() => void testConnection()}
                     onDisconnect={() => void disconnect()}

src/features/agents/components/ConnectionPanel.tsx

@@ -6,6 +6,7 @@ type ConnectionPanelProps = {
   savedGatewayUrl: string;
   draftGatewayUrl: string;
   token: string;
+  allowSelfSignedCerts: boolean;
   hasStoredToken: boolean;
   localGatewayDefaultsHasToken: boolean;
   hasUnsavedChanges: boolean;
@@ -23,6 +24,7 @@ type ConnectionPanelProps = {
   disconnecting: boolean;
   onGatewayUrlChange: (value: string) => void;
   onTokenChange: (value: string) => void;
+  onAllowSelfSignedCertsChange: (value: boolean) => void;
   onSaveSettings: () => void;
   onTestConnection: () => void;
   onDisconnect: () => void;
@@ -33,6 +35,7 @@ export const ConnectionPanel = ({
   savedGatewayUrl,
   draftGatewayUrl,
   token,
+  allowSelfSignedCerts,
   hasStoredToken,
   localGatewayDefaultsHasToken,
   hasUnsavedChanges,
@@ -45,6 +48,7 @@ export const ConnectionPanel = ({
   disconnecting,
   onGatewayUrlChange,
   onTokenChange,
+  onAllowSelfSignedCertsChange,
   onSaveSettings,
   onTestConnection,
   onDisconnect,
@@ -131,6 +135,29 @@ export const ConnectionPanel = ({
           />
         </label>
       </div>
+
+      {/* Allow self-signed certificates checkbox */}
+      <div className="flex items-center gap-2">
+        <label className="flex cursor-pointer items-center gap-2 text-xs text-foreground/80">
+          <input
+            type="checkbox"
+            checked={allowSelfSignedCerts}
+            onChange={(event) => onAllowSelfSignedCertsChange(event.target.checked)}
+            className="h-4 w-4 rounded border-border text-primary focus:ring-2 focus:ring-primary/30 focus:ring-offset-0"
+          />
+          Allow self-signed certificates
+        </label>
+      </div>
+
+      {allowSelfSignedCerts && (
+        <div className="ui-alert-danger rounded-md px-3 py-2 text-xs">
+          <div className="flex items-center gap-1.5">
+            <span className="text-sm">⚠️</span>
+            <span>Self-signed certificates are enabled. Do not use in production.</span>
+          </div>
+        </div>
+      )}
+
       <p className="text-xs text-muted-foreground">{tokenHelper}</p>
       {hasUnsavedChanges ? (
         <p className="font-mono text-[10px] font-semibold tracking-[0.06em] text-muted-foreground">

src/features/agents/components/GatewayConnectScreen.tsx

@@ -16,6 +16,7 @@ type GatewayConnectScreenProps = {
   savedGatewayUrl: string;
   draftGatewayUrl: string;
   token: string;
+  allowSelfSignedCerts: boolean;
   localGatewayDefaults: StudioGatewaySettings | null;
   localGatewayDefaultsHasToken: boolean;
   hasStoredToken: boolean;
@@ -35,6 +36,7 @@ type GatewayConnectScreenProps = {
   disconnecting: boolean;
   onGatewayUrlChange: (value: string) => void;
   onTokenChange: (value: string) => void;
+  onAllowSelfSignedCertsChange: (value: boolean) => void;
   onUseLocalDefaults: () => void;
   onSaveSettings: () => void;
   onTestConnection: () => void;
@@ -54,6 +56,7 @@ export const GatewayConnectScreen = ({
   savedGatewayUrl,
   draftGatewayUrl,
   token,
+  allowSelfSignedCerts,
   localGatewayDefaults,
   localGatewayDefaultsHasToken,
   hasStoredToken,
@@ -68,6 +71,7 @@ export const GatewayConnectScreen = ({
   disconnecting,
   onGatewayUrlChange,
   onTokenChange,
+  onAllowSelfSignedCertsChange,
   onUseLocalDefaults,
   onSaveSettings,
   onTestConnection,
@@ -308,6 +312,28 @@ export const GatewayConnectScreen = ({
 
       <p className="mt-2 text-xs leading-snug text-muted-foreground">{tokenHelper}</p>
 
+      {/* Allow self-signed certificates checkbox */}
+      <div className="mt-3 flex items-center gap-2">
+        <label className="flex cursor-pointer items-center gap-2 text-xs text-foreground/80">
+          <input
+            type="checkbox"
+            checked={allowSelfSignedCerts}
+            onChange={(event) => onAllowSelfSignedCertsChange(event.target.checked)}
+            className="h-4 w-4 rounded border-border text-primary focus:ring-2 focus:ring-primary/30 focus:ring-offset-0"
+          />
+          Allow self-signed certificates
+        </label>
+      </div>
+
+      {allowSelfSignedCerts && (
+        <div className="ui-alert-danger mt-2 rounded-md px-3 py-2 text-xs">
+          <div className="flex items-center gap-1.5">
+            <span className="text-sm">⚠️</span>
+            <span>Self-signed certificates are enabled. Do not use in production.</span>
+          </div>
+        </div>
+      )}
+
       {hasUnsavedChanges ? (
         <p className="mt-2 font-mono text-[10px] font-semibold tracking-[0.06em] text-muted-foreground">
           Unsaved changes

src/lib/controlplane/contracts.ts

@@ -45,6 +45,7 @@ export type GatewayResponseFrame = {
 export type ControlPlaneGatewaySettings = {
   url: string;
   token: string;
+  allowSelfSignedCerts?: boolean;
 };
 
 export type ControlPlaneRuntimeSnapshot = {

src/lib/controlplane/gateway-connect-profile.ts

@@ -2,6 +2,7 @@ export type GatewayConnectProfileId = "backend-local" | "legacy-control-ui";
 
 export type GatewaySocketOptions = {
   origin?: string;
+  rejectUnauthorized?: boolean;
 };
 
 export type GatewayConnectProfile = {
@@ -74,6 +75,7 @@ export function buildGatewayConnectProfile(args: {
   token: string;
   protocol: number;
   capabilities: string[];
+  rejectUnauthorized?: boolean;
 }): GatewayConnectProfile {
   const baseParams = {
     minProtocol: args.protocol,
@@ -84,10 +86,20 @@ export function buildGatewayConnectProfile(args: {
     auth: { token: args.token },
   };
 
+  const socketOptions: GatewaySocketOptions = {};
+
+  if (args.profileId === "legacy-control-ui") {
+    socketOptions.origin = resolveOriginForUpstream(args.upstreamUrl);
+  }
+
+  if (args.rejectUnauthorized === false) {
+    socketOptions.rejectUnauthorized = false;
+  }
+
   if (args.profileId === "legacy-control-ui") {
     return {
       id: args.profileId,
-      socketOptions: { origin: resolveOriginForUpstream(args.upstreamUrl) },
+      socketOptions,
       connectParams: {
         ...baseParams,
         client: {
@@ -102,7 +114,7 @@ export function buildGatewayConnectProfile(args: {
 
   return {
     id: args.profileId,
-    socketOptions: {},
+    socketOptions,
     connectParams: {
       ...baseParams,
       client: {

src/lib/controlplane/openclaw-adapter.ts

@@ -172,13 +172,14 @@ const loadGatewaySettings = (): ControlPlaneGatewaySettings => {
   const gateway = settings.gateway;
   const url = typeof gateway?.url === "string" ? gateway.url.trim() : "";
   const token = typeof gateway?.token === "string" ? gateway.token.trim() : "";
+  const allowSelfSignedCerts = gateway?.allowSelfSignedCerts === true;
   if (!url) {
     throw new Error("Control-plane start failed: Studio gateway URL is not configured.");
   }
   if (!token) {
     throw new Error("Control-plane start failed: Studio gateway token is not configured.");
   }
-  return { url, token };
+  return { url, token, allowSelfSignedCerts };
 };
 
 export type OpenClawAdapterOptions = {
@@ -211,7 +212,16 @@ export class OpenClawGatewayAdapter {
 
   constructor(options?: OpenClawAdapterOptions) {
     this.loadSettings = options?.loadSettings ?? loadGatewaySettings;
-    this.createWebSocket = options?.createWebSocket ?? ((url, opts) => new WebSocket(url, opts));
+    this.createWebSocket = options?.createWebSocket ?? ((url, opts) => {
+      const wsOptions: any = {};
+      if (opts.origin) {
+        wsOptions.origin = opts.origin;
+      }
+      if (opts.rejectUnauthorized === false) {
+        wsOptions.rejectUnauthorized = false;
+      }
+      return new WebSocket(url, wsOptions);
+    });
     this.methodAllowlist = options?.methodAllowlist ?? DEFAULT_METHOD_ALLOWLIST;
     this.onDomainEvent = options?.onDomainEvent;
   }
@@ -325,6 +335,7 @@ export class OpenClawGatewayAdapter {
       token: settings.token,
       protocol: CONNECT_PROTOCOL,
       capabilities: CONNECT_CAPABILITIES,
+      rejectUnauthorized: settings.allowSelfSignedCerts ? false : undefined,
     });
     this.connectionEpoch = randomUUID();
     const ws = this.createWebSocket(settings.url, profile.socketOptions);

src/lib/studio/settings.ts

@@ -1,11 +1,13 @@
 export type StudioGatewaySettings = {
   url: string;
   token: string;
+  allowSelfSignedCerts?: boolean;
 };
 
 type StudioGatewaySettingsPatch = {
   url?: string | null;
   token?: string | null;
+  allowSelfSignedCerts?: boolean | null;
 };
 
 type FocusFilter = "all" | "running" | "approvals";
@@ -128,7 +130,8 @@ const normalizeGatewaySettings = (value: unknown): StudioGatewaySettings | null
   const url = normalizeGatewayUrl(value.url);
   if (!url) return null;
   const token = coerceString(value.token);
-  return { url, token };
+  const allowSelfSignedCerts = typeof value.allowSelfSignedCerts === "boolean" ? value.allowSelfSignedCerts : false;
+  return { url, token, allowSelfSignedCerts };
 };
 
 const hasOwn = (value: Record<string, unknown>, key: string) =>
@@ -144,8 +147,11 @@ const mergeGatewaySettings = (
 
   const nextUrl = hasOwn(patch, "url") ? normalizeGatewayUrl(patch.url) : current?.url ?? "";
   const nextToken = hasOwn(patch, "token") ? coerceString(patch.token) : current?.token ?? "";
+  const nextAllowSelfSignedCerts = hasOwn(patch, "allowSelfSignedCerts") ? 
+    (typeof patch.allowSelfSignedCerts === "boolean" ? patch.allowSelfSignedCerts : false) : 
+    current?.allowSelfSignedCerts ?? false;
   if (!nextUrl) return null;
-  return { url: nextUrl, token: nextToken };
+  return { url: nextUrl, token: nextToken, allowSelfSignedCerts: nextAllowSelfSignedCerts };
 };
 
 const normalizeFocused = (value: unknown): Record<string, StudioFocusedPreference> => {