fix: ui state sync, curl escaping, SSR theme hydration, error boundary reset

ui/components/AnchorErrorBoundary.tsx

@@ -17,11 +17,14 @@ export interface AnchorErrorBoundaryProps {
   onError?: (error: AnchorKitError, errorInfo: React.ErrorInfo) => void;
   /** Optional label shown in the default fallback (e.g. "Anchor Feed", "Price Widget") */
   componentLabel?: string;
+  /** When any value in this array changes, the error state is automatically reset */
+  resetKeys?: unknown[];
 }
 
 interface State {
   hasError: boolean;
   error: AnchorKitError | null;
+  prevResetKeys: unknown[] | undefined;
 }
 
 // ─── Normalise any thrown value into an AnchorKitError ────────────────────────
@@ -225,11 +228,29 @@ export class AnchorErrorBoundary extends Component<
 > {
   constructor(props: AnchorErrorBoundaryProps) {
     super(props);
-    this.state = { hasError: false, error: null };
+    this.state = { hasError: false, error: null, prevResetKeys: props.resetKeys };
     this.reset = this.reset.bind(this);
   }
 
-  static getDerivedStateFromError(raw: unknown): State {
+  static getDerivedStateFromProps(
+    props: AnchorErrorBoundaryProps,
+    state: State,
+  ): Partial<State> | null {
+    if (
+      state.hasError &&
+      props.resetKeys !== undefined &&
+      state.prevResetKeys !== undefined &&
+      props.resetKeys.some((key, i) => !Object.is(key, state.prevResetKeys![i]))
+    ) {
+      return { hasError: false, error: null, prevResetKeys: props.resetKeys };
+    }
+    if (props.resetKeys !== state.prevResetKeys) {
+      return { prevResetKeys: props.resetKeys };
+    }
+    return null;
+  }
+
+  static getDerivedStateFromError(raw: unknown): Partial<State> {
     return { hasError: true, error: normaliseError(raw) };
   }
 

ui/components/ApiRequestPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import './ApiRequestPanel.css';
 
 export interface ApiRequestPanelProps {
@@ -35,6 +35,11 @@ export const ApiRequestPanel: React.FC<ApiRequestPanelProps> = ({
   );
   const [jsonError, setJsonError] = useState<string | null>(null);
 
+  useEffect(() => {
+    setEditableBody(requestBody ? formatJson(requestBody) : '');
+    setJsonError(null);
+  }, [requestBody]);
+
   const validateJson = (value: string): boolean => {
     if (!value.trim()) {
       setJsonError(null);
@@ -74,7 +79,8 @@ export const ApiRequestPanel: React.FC<ApiRequestPanelProps> = ({
 
   const generateCurl = (): string => {
     const headerFlags = Object.entries(headers)
-      .map(([key, value]) => `-H "${key}: ${value}"`)
+      .map(([key, value]) => `-H "${key}: ${value.replace(/"/g, '\\"')}"`)
+
       .join(' \\\n  ');
 
     let curl = `curl -X ${method} \\\n  "${endpoint}"`;

ui/hooks/useTheme.ts

@@ -10,15 +10,13 @@ import { useEffect, useState } from "react";
  * element to enable CSS custom property theming.
  */
 export function useTheme(override?: boolean): boolean {
-  const [sysDark, setSysDark] = useState<boolean>(() => {
-    if (typeof window === "undefined") return false;
-    return window.matchMedia("(prefers-color-scheme: dark)").matches;
-  });
+  const [sysDark, setSysDark] = useState<boolean>(false);
 
   const isDark = override !== undefined ? override : sysDark;
 
   useEffect(() => {
     const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    setSysDark(mq.matches);
     const handler = (e: MediaQueryListEvent) => setSysDark(e.matches);
     mq.addEventListener("change", handler);
     return () => mq.removeEventListener("change", handler);