@djangocfg/ui-tools 2.1.284 → 2.1.286

package/src/tools/OpenapiViewer/components/{PlaygroundLayout → shared}/RequestPanel.tsx

@@ -1,13 +1,11 @@
 'use client';
 
-import { Key, Loader2, Send, Sparkles, Terminal } from 'lucide-react';
-import React, { useMemo } from 'react';
+import { Key, Send, Sparkles, Terminal } from 'lucide-react';
+import React, { useCallback, useMemo } from 'react';
 
 import {
-    Button,
     Combobox,
     type ComboboxOption,
-    CopyButton,
     Input,
     Textarea,
 } from '@djangocfg/ui-core/components';
@@ -16,13 +14,14 @@ import { cn } from '@djangocfg/ui-core/lib';
 import PrettyCode from '../../../PrettyCode';
 import { usePlaygroundContext } from '../../context/PlaygroundContext';
 import { findApiKeyById, isValidJson, parseRequestHeaders } from '../../utils';
+import { resolveAbsolute } from '../../utils/url';
+import { BodyFormEditor } from './BodyFormEditor';
+import { EndpointResetButton } from './EndpointResetButton';
 import {
     CollapsibleSection,
     EmptyState,
-    MethodBadge,
     ScrollArea,
     SectionLabel,
-    StatusBadge,
     relativePath,
 } from './ui';
 
@@ -107,13 +106,15 @@ export function RequestPanel() {
 
     const curlCommand = useMemo(() => {
         if (!state.requestUrl) return '';
+        // Resolve to an absolute URL so the snippet is runnable from a
+        // shell. The live ``fetch`` inside the playground resolves the
+        // relative form itself via the browser; copy-pasting to curl
+        // doesn't get that treatment.
+        const absoluteUrl = resolveAbsolute(state.requestUrl);
         const apiKey = state.selectedApiKey ? findApiKeyById(apiKeys, state.selectedApiKey) : null;
         const hdrs = parseRequestHeaders(state.requestHeaders);
-        // Use ``secret`` (the raw key) for the cURL header — matches
-        // what the playground sends over the wire. Fall back to
-        // ``id`` for legacy callers still on the old ApiKey shape.
         if (apiKey) hdrs['X-API-Key'] = apiKey.secret || apiKey.id;
-        let cmd = `curl -X ${state.requestMethod} "${state.requestUrl}"`;
+        let cmd = `curl -X ${state.requestMethod} "${absoluteUrl}"`;
         Object.entries(hdrs).forEach(([k, v]) => { cmd += ` \\\n  -H "${k}: ${v}"`; });
         if (state.requestBody && state.requestMethod !== 'GET' && isJsonValid) {
             cmd += ` \\\n  -d '${state.requestBody}'`;
@@ -132,14 +133,19 @@ export function RequestPanel() {
 
     // ── Derived ───────────────────────────────────────────────────────────────
     const isSendDisabled = state.loading || !state.requestUrl || !isJsonValid;
-    const displayUrl     = state.requestUrl || ep?.path || '';
+    // Show the absolute URL in the meta row so the user sees exactly
+    // what will go over the wire — same rewrite we do for cURL.
+    const displayUrl     = resolveAbsolute(state.requestUrl || ep?.path || '');
     const hasBody        = ep?.method !== 'GET';
     const bodyType       = ep?.requestBody?.type ?? '';
     const hasPathParams  = pathParams.length > 0;
     const hasQueryParams = queryParams.length > 0;
     const hasCurl        = Boolean(curlCommand);
     const epPath         = ep ? relativePath(ep.path) : '';
-    const urlChanged     = displayUrl !== epPath;
+    // Show the URL meta row only when it differs from the endpoint's
+    // template shape — i.e. the user has substituted path params or the
+    // URL host is worth showing explicitly.
+    const urlChanged     = displayUrl !== '' && displayUrl !== epPath;
 
     // ── Early return ──────────────────────────────────────────────────────────
     if (!ep) {
@@ -149,29 +155,25 @@ export function RequestPanel() {
     // ── Render ────────────────────────────────────────────────────────────────
     return (
         <>
-            {/* Endpoint header */}
-            <div className="shrink-0 border-b px-4 py-3 bg-muted/20 space-y-1.5">
-                <div className="flex items-center gap-2">
-                    <MethodBadge method={ep.method} />
-                    <span className="font-mono text-xs text-foreground/70 truncate min-w-0 flex-1">{epPath}</span>
-                    <Button
-                        onClick={sendRequest}
-                        disabled={isSendDisabled}
-                        size="sm"
-                        className="shrink-0 gap-1.5 h-7 text-xs px-3"
-                    >
-                        {state.loading
-                            ? <><Loader2 className="h-3 w-3 animate-spin" /> Sending…</>
-                            : <><Send className="h-3 w-3" /> Send</>
-                        }
-                    </Button>
+            {/* Inline meta row — shows the effective URL when it differs
+                from the endpoint's path template (e.g. after substituting
+                path parameters), plus the Reset action. We dropped the
+                full endpoint header because the containing surface (SidePanel
+                in docs layout, column header in classic layout) already
+                shows the method + path, and duplicating the Send button
+                next to a full-width Send at the bottom read as confusing. */}
+            {(urlChanged || ep) && (
+                <div className="shrink-0 border-b px-4 py-2 bg-muted/10 flex items-center gap-2 min-h-[28px]">
+                    {urlChanged ? (
+                        <span className="font-mono text-[10px] text-muted-foreground/60 break-all leading-snug truncate min-w-0 flex-1">
+                            {displayUrl}
+                        </span>
+                    ) : (
+                        <span className="flex-1" />
+                    )}
+                    <EndpointResetButton />
                 </div>
-                {urlChanged && (
-                    <div className="font-mono text-[10px] text-muted-foreground/50 break-all leading-snug pl-0.5">
-                        {displayUrl}
-                    </div>
-                )}
-            </div>
+            )}
 
             {/* Scrollable fields */}
             <ScrollArea className="px-4 py-3 space-y-3">
@@ -181,41 +183,14 @@ export function RequestPanel() {
 
                 {/* Body */}
                 {hasBody && (
-                    <div className="space-y-1.5">
-                        <div className="flex items-center justify-between gap-2">
-                            <div className="flex items-baseline gap-2">
-                                <SectionLabel>Body</SectionLabel>
-                                {bodyType && (
-                                    <span className="text-[10px] text-muted-foreground/40 font-mono">{bodyType}</span>
-                                )}
-                            </div>
-                            {isJsonValid && state.requestBody && (
-                                <button
-                                    type="button"
-                                    onClick={() => {
-                                        try {
-                                            setRequestBody(JSON.stringify(JSON.parse(state.requestBody), null, 2));
-                                        } catch {}
-                                    }}
-                                    className="inline-flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground transition-colors"
-                                >
-                                    <Sparkles className="h-2.5 w-2.5" />
-                                    Format
-                                </button>
-                            )}
-                        </div>
-                        <Textarea
-                            placeholder={'{\n  "key": "value"\n}'}
-                            value={state.requestBody}
-                            onChange={(e) => setRequestBody(e.target.value)}
-                            className={cn(
-                                'font-mono text-[11px] min-h-[90px] resize-y',
-                                !isJsonValid && 'border-destructive focus-visible:ring-destructive/30',
-                            )}
-                            rows={4}
-                        />
-                        {!isJsonValid && <p className="text-[10px] text-destructive">Invalid JSON</p>}
-                    </div>
+                    <BodySection
+                        schema={ep.requestBody?.schema}
+                        bodyType={bodyType}
+                        bodyDescription={ep.requestBody?.description}
+                        value={state.requestBody}
+                        onChange={setRequestBody}
+                        isJsonValid={isJsonValid}
+                    />
                 )}
 
                 {/* Auth & Headers — collapsed by default */}
@@ -273,7 +248,8 @@ export function RequestPanel() {
                     </div>
                 </CollapsibleSection>
 
-                {/* cURL — collapsed by default */}
+                {/* cURL — collapsed by default. PrettyCode has its own
+                    hover-toolbar with Copy, so no duplicate action here. */}
                 {hasCurl && (
                     <CollapsibleSection
                         label={
@@ -282,30 +258,141 @@ export function RequestPanel() {
                                 cURL
                             </span>
                         }
-                        action={
-                            <CopyButton value={curlCommand} variant="ghost" size="sm" className="h-5 px-2 text-[10px] text-muted-foreground">
-                                Copy
-                            </CopyButton>
-                        }
                     >
-                        <div className="rounded-md overflow-hidden mt-2">
-                            <PrettyCode data={curlCommand} language="bash" isCompact />
+                        <div className="mt-2">
+                            <PrettyCode
+                                data={curlCommand}
+                                language="bash"
+                                isCompact
+                                maxLines={50}
+                            />
                         </div>
                     </CollapsibleSection>
                 )}
 
-                <div className="h-1" />
+                {/* Bottom breathing room — the Send footer lives outside
+                    this component (in SlideInPlayground / TryItSheet),
+                    so we just leave a little space so the last section
+                    doesn't crash against the container edge. */}
+                <div className="h-4" />
             </ScrollArea>
+        </>
+    );
+}
 
-            {/* Send footer */}
-            <div className="shrink-0 border-t px-4 py-3 bg-background/95 backdrop-blur-sm">
-                <Button onClick={sendRequest} disabled={isSendDisabled} size="sm" className="w-full gap-2 h-9">
-                    {state.loading
-                        ? <><Loader2 className="h-3.5 w-3.5 animate-spin" /> Sending…</>
-                        : <><Send className="h-3.5 w-3.5" /> Send Request</>
-                    }
-                </Button>
+// ─── Body section ─────────────────────────────────────────────────────────────
+
+interface BodySectionProps {
+    schema: Record<string, unknown> | undefined;
+    bodyType: string;
+    bodyDescription?: string;
+    /** JSON-serialised body kept in context. Form edits are re-serialised
+     *  before being written back so one source of truth survives across
+     *  the two view modes. */
+    value: string;
+    onChange: (raw: string) => void;
+    isJsonValid: boolean;
+}
+
+type BodyViewMode = 'form' | 'json';
+
+function BodySection({ schema, bodyType, bodyDescription, value, onChange, isJsonValid }: BodySectionProps) {
+    // Default to form view when we have a schema to drive it. Fall back
+    // to raw JSON for schemaless endpoints (or binary bodies, etc.).
+    const hasSchema = !!schema;
+    const [mode, setMode] = React.useState<BodyViewMode>(hasSchema ? 'form' : 'json');
+
+    // Parse the context's JSON string once per value change so the form
+    // sees a structured object. Invalid JSON is tolerated — the form
+    // simply shows empty fields until the user fixes it.
+    const parsed = React.useMemo(() => {
+        if (!value) return null;
+        try { return JSON.parse(value); } catch { return null; }
+    }, [value]);
+
+    const handleFormChange = useCallback(
+        (next: unknown) => {
+            onChange(JSON.stringify(next, null, 2));
+        },
+        [onChange],
+    );
+
+    return (
+        <div className="space-y-2">
+            <div className="flex items-center justify-between gap-2 flex-wrap">
+                <div className="flex items-baseline gap-2 min-w-0">
+                    <SectionLabel>Body</SectionLabel>
+                    {bodyType && (
+                        <span className="text-[10px] text-muted-foreground/40 font-mono">{bodyType}</span>
+                    )}
+                    {bodyDescription && (
+                        <span className="text-[10px] text-muted-foreground/60 truncate">{bodyDescription}</span>
+                    )}
+                </div>
+                {hasSchema && (
+                    <div className="inline-flex rounded-md border overflow-hidden text-[10px]">
+                        <ModeButton active={mode === 'form'} onClick={() => setMode('form')}>Form</ModeButton>
+                        <ModeButton active={mode === 'json'} onClick={() => setMode('json')}>JSON</ModeButton>
+                    </div>
+                )}
+                {mode === 'json' && isJsonValid && value && (
+                    <button
+                        type="button"
+                        onClick={() => {
+                            try { onChange(JSON.stringify(JSON.parse(value), null, 2)); } catch { /* noop */ }
+                        }}
+                        className="inline-flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground transition-colors"
+                    >
+                        <Sparkles className="h-2.5 w-2.5" />
+                        Format
+                    </button>
+                )}
             </div>
-        </>
+
+            {mode === 'form' && hasSchema ? (
+                <BodyFormEditor
+                    schema={schema as Record<string, unknown>}
+                    value={parsed}
+                    onChange={handleFormChange}
+                />
+            ) : (
+                <>
+                    <Textarea
+                        placeholder={'{\n  "key": "value"\n}'}
+                        value={value}
+                        onChange={(e) => onChange(e.target.value)}
+                        className={cn(
+                            'font-mono text-[11px] min-h-[90px] resize-y',
+                            !isJsonValid && 'border-destructive focus-visible:ring-destructive/30',
+                        )}
+                        rows={4}
+                    />
+                    {!isJsonValid && <p className="text-[10px] text-destructive">Invalid JSON</p>}
+                </>
+            )}
+        </div>
+    );
+}
+
+function ModeButton({
+    active, onClick, children,
+}: {
+    active: boolean;
+    onClick: () => void;
+    children: React.ReactNode;
+}) {
+    return (
+        <button
+            type="button"
+            onClick={onClick}
+            className={cn(
+                'px-2 py-0.5 font-medium transition-colors',
+                active
+                    ? 'bg-primary/10 text-foreground'
+                    : 'text-muted-foreground hover:text-foreground',
+            )}
+        >
+            {children}
+        </button>
     );
 }

package/src/tools/OpenapiViewer/components/shared/SendButton.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { AlertCircle, Loader2, Send } from 'lucide-react';
+import React, { useMemo } from 'react';
+
+import { Button } from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { usePlaygroundContext } from '../../context/PlaygroundContext';
+import { isValidJson } from '../../utils';
+import { UrlBuilder } from '../../utils/url';
+
+interface SendButtonProps {
+    className?: string;
+}
+
+/**
+ * Standalone Send button that reads from and acts on the playground
+ * context. Disabled + explainer-banner when required inputs are missing.
+ *
+ * Validation rules (in order — first failure wins the banner text):
+ *   1. Required path/query parameters must be non-empty.
+ *   2. Path template must be fully substituted (no leftover ``{name}``).
+ *   3. Request body, when present, must be valid JSON.
+ *
+ * We validate on the client so the user isn't punished with a 404 from
+ * the server for a trivially detectable mistake (e.g. empty ``{petId}``).
+ */
+export function SendButton({ className }: SendButtonProps) {
+    const { state, sendRequest } = usePlaygroundContext();
+
+    const ep = state.selectedEndpoint;
+
+    // Single source of truth for URL-level validation lives in UrlBuilder.
+    // Recomputing every render is cheap (pure string work).
+    const builder = useMemo(
+        () => (ep ? new UrlBuilder(ep, state.parameters) : null),
+        [ep, state.parameters],
+    );
+    const missingRequired = builder?.missingRequired() ?? [];
+    const unsubstituted = builder?.unfilledPlaceholders() ?? [];
+
+    const isJsonValid = state.requestBody ? isValidJson(state.requestBody) : true;
+
+    const blockers: string[] = [];
+    if (missingRequired.length > 0) {
+        blockers.push(
+            `Fill required parameter${missingRequired.length > 1 ? 's' : ''}: ${missingRequired.join(', ')}`,
+        );
+    } else if (unsubstituted.length > 0) {
+        blockers.push(`URL still has unfilled placeholder${unsubstituted.length > 1 ? 's' : ''}: ${unsubstituted.map((n) => `{${n}}`).join(', ')}`);
+    }
+    if (!isJsonValid) blockers.push('Request body is not valid JSON');
+
+    const disabled =
+        state.loading ||
+        !state.requestUrl ||
+        blockers.length > 0;
+
+    const tooltip = blockers.length > 0 ? blockers.join('\n') : undefined;
+
+    return (
+        <div className={cn('space-y-2', className)}>
+            {blockers.length > 0 && (
+                <div className="flex items-start gap-2 rounded-md border border-amber-500/25 bg-amber-500/[0.06] px-3 py-2 text-[11px] text-amber-600 dark:text-amber-400">
+                    <AlertCircle className="h-3.5 w-3.5 shrink-0 mt-px" />
+                    <span className="leading-snug">{blockers[0]}</span>
+                </div>
+            )}
+            <Button
+                onClick={sendRequest}
+                disabled={disabled}
+                size="sm"
+                title={tooltip}
+                className="w-full gap-2 h-9"
+            >
+                {state.loading ? (
+                    <>
+                        <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                        Sending…
+                    </>
+                ) : (
+                    <>
+                        <Send className="h-3.5 w-3.5" />
+                        Send Request
+                    </>
+                )}
+            </Button>
+        </div>
+    );
+}

package/src/tools/OpenapiViewer/components/{PlaygroundLayout → shared}/ui.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 /**
- * Shared primitive UI components used across all PlaygroundLayout panels.
+ * Shared primitive UI components used by the playground panels
+ * (Request, Response) in both the slide-in and mobile-sheet surfaces.
  * Keep this file free of any business logic or context reads.
  */
 
@@ -33,9 +34,9 @@ export function getStatusStyle(status: number): string {
     return 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/25';
 }
 
-export function relativePath(full: string): string {
-    try { return new URL(full).pathname; } catch { return full; }
-}
+// ``relativePath`` lives in utils/url.ts now — re-exported here so every
+// component that used to import it from ``./ui`` keeps working.
+export { relativePath } from '../../utils/url';
 
 // ─── Atoms ────────────────────────────────────────────────────────────────────
 

package/src/tools/OpenapiViewer/context/PlaygroundContext.tsx

@@ -5,13 +5,21 @@ import React, {
     createContext, ReactNode, useCallback, useContext, useEffect, useReducer, useRef
 } from 'react';
 
+import { useSessionStorage } from '@djangocfg/ui-core/hooks';
+
 import type {
     ApiEndpoint, ApiResponse, PlaygroundConfig, PlaygroundContextType, PlaygroundState,
     PlaygroundStep
 } from '../types';
-import { parseRequestHeaders, substituteUrlParameters } from '../utils';
+import { parseRequestHeaders } from '../utils';
+import { UrlBuilder } from '../utils/url';
 import { getDefaultVersion } from '../utils/versionManager';
 
+// Session-scoped auth persistence. sessionStorage (not localStorage) so
+// the token dies when the browser tab closes — safer default for secrets.
+const AUTH_KEY_STORAGE = 'openapi-playground:auth:apiKeyId';
+const AUTH_BEARER_STORAGE = 'openapi-playground:auth:bearer';
+
 // ─── Initial state ────────────────────────────────────────────────────────────
 
 const createInitialState = (): PlaygroundState => ({
@@ -31,6 +39,7 @@ const createInitialState = (): PlaygroundState => ({
   response: null,
   loading: false,
   sidebarOpen: false,
+  activeSchemaId: null,
 });
 
 // ─── Actions ──────────────────────────────────────────────────────────────────
@@ -59,6 +68,7 @@ type Action =
   // Batched: set error response + loading=false atomically
   | { type: 'REQUEST_ERROR'; response: ApiResponse }
   | { type: 'SET_SIDEBAR'; open: boolean }
+  | { type: 'SET_ACTIVE_SCHEMA_ID'; id: string | null }
   | { type: 'SYNC_API_KEY_HEADER'; headers: string }
   | { type: 'CLEAR_API_KEY_SELECTION' }
   | { type: 'SYNC_URL'; url: string }
@@ -83,16 +93,34 @@ function reducer(state: PlaygroundState, action: Action): PlaygroundState {
       return i > 0 ? { ...state, currentStep: state.steps[i - 1]! } : state;
     }
 
-    case 'SELECT_ENDPOINT':
+    case 'SELECT_ENDPOINT': {
       if (!action.endpoint) return { ...state, selectedEndpoint: null };
+      // Guard: selecting the same endpoint is a no-op for response state.
+      // Without this, clicking "Try it" on the already-loaded endpoint
+      // would wipe its response for no reason.
+      const same =
+        state.selectedEndpoint?.method === action.endpoint.method &&
+        state.selectedEndpoint?.path === action.endpoint.path;
+      // Pre-fill request body from the OpenAPI example when available.
+      // For a brand-new endpoint selection, a realistic example is more
+      // useful than the {"key":"value"} placeholder. If the user already
+      // has a saved draft, EndpointDraftSync will overwrite this with the
+      // persisted value once it hydrates.
+      const exampleBody = action.endpoint.requestBody?.example ?? '';
       return {
         ...state,
         selectedEndpoint: action.endpoint,
         requestMethod: action.endpoint.method,
         requestUrl: action.endpoint.path,
-        parameters: {},
+        parameters: same ? state.parameters : {},
+        requestBody: same ? state.requestBody : exampleBody,
+        // Switching to a different endpoint: the previous response no
+        // longer belongs here. Clear it so the playground panel collapses
+        // back to single-column until the user sends a new request.
+        response: same ? state.response : null,
         currentStep: 'request',
       };
+    }
 
     case 'SET_CATEGORY':    return { ...state, selectedCategory: action.category };
     case 'SET_SEARCH':      return { ...state, searchTerm: action.term };
@@ -117,6 +145,7 @@ function reducer(state: PlaygroundState, action: Action): PlaygroundState {
       return { ...state, loading: false, response: action.response };
 
     case 'SET_SIDEBAR':          return { ...state, sidebarOpen: action.open };
+    case 'SET_ACTIVE_SCHEMA_ID': return { ...state, activeSchemaId: action.id };
     case 'SYNC_API_KEY_HEADER':  return { ...state, requestHeaders: action.headers };
     case 'CLEAR_API_KEY_SELECTION': return { ...state, selectedApiKey: null };
     case 'SYNC_URL':             return { ...state, requestUrl: action.url };
@@ -156,12 +185,52 @@ export const PlaygroundProvider: React.FC<PlaygroundProviderProps> = ({ children
   );
   const isLoadingApiKeys = config.apiKeysLoading ?? false;
 
-  // Auto-select first API key
+  // ── Auth persistence (session-scoped) ─────────────────────────────────────
+  // Use sessionStorage so the chosen API key / bearer token survive reload
+  // within the same tab but die when the tab closes. That matches how
+  // users expect auth sessions to work and keeps secrets out of localStorage.
+  const [storedApiKeyId, setStoredApiKeyId] = useSessionStorage<string | null>(
+    AUTH_KEY_STORAGE,
+    null,
+  );
+  const [storedBearer, setStoredBearer] = useSessionStorage<string>(
+    AUTH_BEARER_STORAGE,
+    '',
+  );
+  const hasHydratedAuthRef = useRef(false);
+
+  // Hydrate auth state from sessionStorage exactly once.
+  useEffect(() => {
+    if (hasHydratedAuthRef.current) return;
+    hasHydratedAuthRef.current = true;
+    if (storedApiKeyId) dispatch({ type: 'SET_API_KEY', apiKeyId: storedApiKeyId });
+    if (storedBearer) dispatch({ type: 'SET_MANUAL_TOKEN', token: storedBearer });
+    // We intentionally don't depend on the stored values — this effect
+    // runs once on mount; later changes are written out by the effects
+    // below, not re-hydrated.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Persist selection → sessionStorage as it changes.
+  useEffect(() => {
+    if (!hasHydratedAuthRef.current) return;
+    setStoredApiKeyId(state.selectedApiKey);
+  }, [state.selectedApiKey, setStoredApiKeyId]);
+
+  useEffect(() => {
+    if (!hasHydratedAuthRef.current) return;
+    setStoredBearer(state.manualApiToken);
+  }, [state.manualApiToken, setStoredBearer]);
+
+  // Auto-select first API key — only when there's no persisted selection
+  // to restore. Otherwise the first-render auto-pick would clobber a
+  // session that had a non-first key chosen.
   useEffect(() => {
-    if (!isLoadingApiKeys && apiKeys.length > 0 && !state.selectedApiKey) {
+    if (!hasHydratedAuthRef.current) return;
+    if (!isLoadingApiKeys && apiKeys.length > 0 && !state.selectedApiKey && !storedApiKeyId) {
       dispatch({ type: 'SET_API_KEY', apiKeyId: apiKeys[0]?.id || null });
     }
-  }, [apiKeys, isLoadingApiKeys, state.selectedApiKey]);
+  }, [apiKeys, isLoadingApiKeys, state.selectedApiKey, storedApiKeyId]);
 
   // Sync X-API-Key header when selected key changes
   useEffect(() => {
@@ -191,10 +260,13 @@ export const PlaygroundProvider: React.FC<PlaygroundProviderProps> = ({ children
     }
   }, [state.selectedApiKey, apiKeys]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  // Sync URL when path parameters change
+  // Sync URL when path parameters or query parameters change. UrlBuilder
+  // handles BOTH path substitution and query string assembly — the old
+  // implementation only did the former, which silently dropped every
+  // non-path parameter the user entered.
   useEffect(() => {
     if (!state.selectedEndpoint) return;
-    const updated = substituteUrlParameters(state.selectedEndpoint.path, state.parameters);
+    const updated = new UrlBuilder(state.selectedEndpoint, state.parameters).build();
     if (updated !== state.requestUrl) {
       dispatch({ type: 'SYNC_URL', url: updated });
     }
@@ -226,6 +298,7 @@ export const PlaygroundProvider: React.FC<PlaygroundProviderProps> = ({ children
     dispatch({ type: 'SET_RESPONSE', response }), []);
   const setLoading       = useCallback((loading: boolean) => dispatch({ type: 'SET_LOADING', loading }), []);
   const setSidebarOpen   = useCallback((open: boolean)   => dispatch({ type: 'SET_SIDEBAR', open }), []);
+  const setActiveSchemaId = useCallback((id: string | null) => dispatch({ type: 'SET_ACTIVE_SCHEMA_ID', id }), []);
   const clearAll         = useCallback(() => dispatch({ type: 'RESET' }), []);
 
   // ── Send request ──────────────────────────────────────────────────────────
@@ -327,6 +400,7 @@ export const PlaygroundProvider: React.FC<PlaygroundProviderProps> = ({ children
     setResponse,
     setLoading,
     setSidebarOpen,
+    setActiveSchemaId,
     clearAll,
     sendRequest,
   };