@djangocfg/ui-tools 2.1.318 → 2.1.319

package/src/tools/OpenapiViewer/components/DocsLayout/EndpointDoc/Header/MetaActions.tsx

@@ -4,7 +4,6 @@ import {
     Check,
     ChevronsDownUp,
     ChevronsUpDown,
-    FileCode2,
     Link2,
 } from 'lucide-react';
 import React, { useCallback, useMemo, useState } from 'react';
@@ -23,7 +22,6 @@ import type { SectionId } from '../types';
 
 interface MetaActionsProps {
     anchor: string;
-    endpointMarkdown: string;
     /** Sections present on this endpoint — expand/collapse acts only
      *  on visible rows, never on catalogue items the card doesn't render. */
     presentSections: readonly SectionId[];
@@ -63,19 +61,22 @@ function IconButton({ label, onClick, children, active }: IconButtonProps) {
     );
 }
 
-/** Inline meta-row actions: copy link · copy markdown · expand/collapse
- *  all. Actions are always visible (corporate tool pattern) but sized
- *  down so the path on the next line stays the visual focal point. */
-export function MetaActions({ anchor, endpointMarkdown, presentSections }: MetaActionsProps) {
+/** Inline meta-row actions: copy link · expand/collapse all. Actions
+ *  are always visible (corporate tool pattern) but sized down so the
+ *  path on the next line stays the visual focal point. The
+ *  AI-friendly "AI Copy" used to live here as another icon — it was
+ *  invisible at that size, so it now sits next to "Try it" as a
+ *  proper labelled button. */
+export function MetaActions({ anchor, presentSections }: MetaActionsProps) {
     const { endpointId } = useEndpointDocContext();
     const expandAll = useEndpointDocStore((s) => s.expandAll);
     const collapseAll = useEndpointDocStore((s) => s.collapseAll);
     const openSections = useEndpointDocStore((s) => s.openSections);
 
-    const [justCopied, setJustCopied] = useState<'link' | 'md' | null>(null);
-    const flash = useCallback((which: 'link' | 'md') => {
-        setJustCopied(which);
-        setTimeout(() => setJustCopied(null), 1200);
+    const [linkCopied, setLinkCopied] = useState(false);
+    const flashLink = useCallback(() => {
+        setLinkCopied(true);
+        setTimeout(() => setLinkCopied(false), 1200);
     }, []);
 
     const mostlyOpen = useMemo(() => {
@@ -90,56 +91,40 @@ export function MetaActions({ anchor, endpointMarkdown, presentSections }: MetaA
     const copyLink = useCallback(() => {
         if (typeof window === 'undefined') return;
         const url = `${window.location.origin}${window.location.pathname}#${anchor}`;
-        void navigator.clipboard?.writeText(url).then(() => flash('link'));
-    }, [anchor, flash]);
-
-    const copyMarkdown = useCallback(() => {
-        if (typeof window === 'undefined') return;
-        void navigator.clipboard?.writeText(endpointMarkdown).then(() => flash('md'));
-    }, [endpointMarkdown, flash]);
+        void navigator.clipboard?.writeText(url).then(flashLink);
+    }, [anchor, flashLink]);
 
     const toggleAll = useCallback(() => {
         if (mostlyOpen) collapseAll(endpointId, presentSections);
         else expandAll(endpointId, presentSections);
     }, [mostlyOpen, collapseAll, expandAll, endpointId, presentSections]);
 
+    const linkLabel = linkCopied ? 'Copied!' : 'Copy link to endpoint';
+    const linkIcon = linkCopied ? (
+        <Check className="h-3.5 w-3.5" />
+    ) : (
+        <Link2 className="h-3.5 w-3.5" />
+    );
+    const showToggleAll = presentSections.length >= 2;
+    const toggleAllLabel = mostlyOpen ? 'Collapse all sections' : 'Expand all sections';
+    const toggleAllIcon = mostlyOpen ? (
+        <ChevronsDownUp className="h-3.5 w-3.5" />
+    ) : (
+        <ChevronsUpDown className="h-3.5 w-3.5" />
+    );
+    const toggleAllNode = showToggleAll ? (
+        <IconButton label={toggleAllLabel} onClick={toggleAll}>
+            {toggleAllIcon}
+        </IconButton>
+    ) : null;
+
     return (
         <SafeTooltipProvider delayDuration={200}>
             <div className="flex items-center gap-0.5">
-                <IconButton
-                    label={justCopied === 'link' ? 'Copied!' : 'Copy link to endpoint'}
-                    onClick={copyLink}
-                    active={justCopied === 'link'}
-                >
-                    {justCopied === 'link' ? (
-                        <Check className="h-3.5 w-3.5" />
-                    ) : (
-                        <Link2 className="h-3.5 w-3.5" />
-                    )}
-                </IconButton>
-                <IconButton
-                    label={justCopied === 'md' ? 'Copied!' : 'Copy as Markdown (for AI)'}
-                    onClick={copyMarkdown}
-                    active={justCopied === 'md'}
-                >
-                    {justCopied === 'md' ? (
-                        <Check className="h-3.5 w-3.5" />
-                    ) : (
-                        <FileCode2 className="h-3.5 w-3.5" />
-                    )}
+                <IconButton label={linkLabel} onClick={copyLink} active={linkCopied}>
+                    {linkIcon}
                 </IconButton>
-                {presentSections.length >= 2 && (
-                    <IconButton
-                        label={mostlyOpen ? 'Collapse all sections' : 'Expand all sections'}
-                        onClick={toggleAll}
-                    >
-                        {mostlyOpen ? (
-                            <ChevronsDownUp className="h-3.5 w-3.5" />
-                        ) : (
-                            <ChevronsUpDown className="h-3.5 w-3.5" />
-                        )}
-                    </IconButton>
-                )}
+                {toggleAllNode}
             </div>
         </SafeTooltipProvider>
     );

package/src/tools/OpenapiViewer/components/DocsLayout/EndpointDoc/Header/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { Play } from 'lucide-react';
-import React, { useMemo } from 'react';
+import { Check, Play, Sparkles } from 'lucide-react';
+import React, { useCallback, useMemo, useState } from 'react';
 
 import { Button } from '@djangocfg/ui-core/components';
 
@@ -43,29 +43,60 @@ export function EndpointHeader({
     // reference changes, not on unrelated re-renders of the subtree.
     const endpointMd = useMemo(() => endpointToMarkdown(endpoint), [endpoint]);
 
+    const [aiCopied, setAiCopied] = useState(false);
+    const onAiCopy = useCallback(() => {
+        if (typeof window === 'undefined') return;
+        void navigator.clipboard?.writeText(endpointMd).then(() => {
+            setAiCopied(true);
+            setTimeout(() => setAiCopied(false), 1200);
+        });
+    }, [endpointMd]);
+
+    const tryItLabel = isLoadedInPlayground ? 'Loaded' : 'Try it';
+    const aiCopyIcon = aiCopied ? (
+        <Check className="h-3 w-3" />
+    ) : (
+        <Sparkles className="h-3 w-3" />
+    );
+    const aiCopyLabel = aiCopied ? 'Copied' : 'AI Copy';
+    const descriptionNode = endpoint.description ? (
+        <div className="text-muted-foreground text-sm">
+            <MarkdownMessage content={endpoint.description} />
+        </div>
+    ) : null;
+
     return (
         <header className="space-y-3">
             {/* Row 1 — meta strip. Badge + inline icon actions on the
-                left, primary CTA on the right. Kept tight (24px tall)
+                left, primary CTAs on the right. Kept tight (24px tall)
                 so it doesn't visually compete with the path row below. */}
             <div className="flex items-center gap-3 flex-wrap">
                 <div className="flex items-center gap-2 min-w-0">
                     <MethodBadge method={endpoint.method} />
-                    <MetaActions
-                        anchor={anchor}
-                        endpointMarkdown={endpointMd}
-                        presentSections={presentSections}
-                    />
+                    <MetaActions anchor={anchor} presentSections={presentSections} />
+                </div>
+                <div className="ml-auto flex items-center gap-2">
+                    <Button
+                        size="sm"
+                        variant="secondary"
+                        onClick={onAiCopy}
+                        title="Copy endpoint as Markdown for AI"
+                        aria-label="Copy endpoint as Markdown for AI"
+                        className="h-7 text-xs gap-1.5 px-2.5"
+                    >
+                        {aiCopyIcon}
+                        {aiCopyLabel}
+                    </Button>
+                    <Button
+                        size="sm"
+                        variant={isLoadedInPlayground ? 'secondary' : 'default'}
+                        onClick={onTryIt}
+                        className="h-7 text-xs gap-1.5 px-2.5"
+                    >
+                        <Play className="h-3 w-3" />
+                        {tryItLabel}
+                    </Button>
                 </div>
-                <Button
-                    size="sm"
-                    variant={isLoadedInPlayground ? 'secondary' : 'default'}
-                    onClick={onTryIt}
-                    className="ml-auto h-7 text-xs gap-1.5 px-2.5"
-                >
-                    <Play className="h-3 w-3" />
-                    {isLoadedInPlayground ? 'Loaded' : 'Try it'}
-                </Button>
             </div>
 
             {/* Row 2 — path as the visual focal point. Larger and more
@@ -77,11 +108,7 @@ export function EndpointHeader({
 
             {/* Row 3 — description, aligned to the left edge under the
                 path. Text-sm so it reads as subtitle, not body copy. */}
-            {endpoint.description && (
-                <div className="text-muted-foreground text-sm">
-                    <MarkdownMessage content={endpoint.description} />
-                </div>
-            )}
+            {descriptionNode}
         </header>
     );
 }

package/src/tools/OpenapiViewer/components/DocsLayout/EndpointDoc/Section/index.tsx

@@ -37,7 +37,7 @@ export function Section({ id, title, badge, children }: SectionProps) {
                 title={title}
                 badge={badge}
                 open={open}
-                onToggle={() => toggleSection(endpointId, id)}
+                onToggle={() => toggleSection(endpointId, id, defaultOpen)}
             />
             {open && <div>{children}</div>}
         </div>

package/src/tools/OpenapiViewer/components/DocsLayout/EndpointDoc/store/index.ts

@@ -26,7 +26,13 @@ export interface EndpointDocState {
 }
 
 export interface EndpointDocActions {
-    toggleSection: (endpointId: string, sectionId: SectionId) => void;
+    /** Flip the section's open state. ``defaultOpen`` is the value the
+     *  ``Section`` component currently shows when the user has no
+     *  explicit override yet — passing it in lets the first click
+     *  always invert what's actually on screen, instead of always
+     *  setting ``false`` (which silently no-ops when the section was
+     *  closed by default). */
+    toggleSection: (endpointId: string, sectionId: SectionId, defaultOpen: boolean) => void;
     setSectionOpen: (endpointId: string, sectionId: SectionId, open: boolean) => void;
     setCodeTab: (endpointId: string, tab: CodeSampleTargetId) => void;
     /** Bulk ops — "expand all" / "collapse all" on a single endpoint.
@@ -51,22 +57,15 @@ export const useEndpointDocStore = create<EndpointDocStore>()(
         (set) => ({
             ...initialState,
 
-            toggleSection: (endpointId, sectionId) =>
+            toggleSection: (endpointId, sectionId, defaultOpen) =>
                 set((state) => {
                     const key = sectionKey(endpointId, sectionId);
                     const current = state.openSections[key];
+                    const visible = current === undefined ? defaultOpen : current;
                     return {
                         openSections: {
                             ...state.openSections,
-                            // If there's no explicit override yet, the user's
-                            // first click means "flip from the default". We
-                            // assume the default was ``true`` for the most
-                            // common case (bodies/responses) and ``false``
-                            // otherwise; the Section component tracks this
-                            // via its ``defaultOpen`` prop and never calls
-                            // toggle on sections whose defaults match the
-                            // next state.
-                            [key]: current === undefined ? false : !current,
+                            [key]: !visible,
                         },
                     };
                 }),

package/src/tools/OpenapiViewer/components/DocsLayout/SchemaCopyMenu.tsx

@@ -48,8 +48,14 @@ interface SchemaCopyMenuProps {
     /** Trigger appearance.
      *  - ``button`` (default) — labelled pill with icon + chevron.
      *  - ``icon`` — square ghost button, used in tight spots like the
-     *    sidebar header where there is no room for "Copy for AI". */
-    variant?: 'button' | 'icon';
+     *    sidebar header where there is no room for "Copy for AI".
+     *  - ``footer`` — full-width secondary CTA, designed to sit at the
+     *    bottom of the sidebar. Menu opens upward so it stays inside
+     *    the panel. */
+    variant?: 'button' | 'icon' | 'footer';
+    /** Where the dropdown content opens. Defaults to ``right`` for the
+     *  inline triggers; ``footer`` overrides to ``top``. */
+    side?: 'right' | 'top' | 'bottom' | 'left';
 }
 
 /**
@@ -58,7 +64,7 @@ interface SchemaCopyMenuProps {
  * dereferencing + stringifying a large schema can be non-trivial — sizes
  * are displayed after the first successful copy, via a tiny cache.
  */
-export function SchemaCopyMenu({ schema, endpoints, baseUrl, variant = 'button' }: SchemaCopyMenuProps) {
+export function SchemaCopyMenu({ schema, endpoints, baseUrl, variant = 'button', side }: SchemaCopyMenuProps) {
     const [sizeCache, setSizeCache] = useState<Partial<Record<Flavour, string>>>({});
     const [justCopied, setJustCopied] = useState<Flavour | null>(null);
     const [open, setOpen] = useState(false);
@@ -98,6 +104,9 @@ export function SchemaCopyMenu({ schema, endpoints, baseUrl, variant = 'button'
 
     const flavours = useMemo<Flavour[]>(() => ['markdown', 'compact', 'raw'], []);
 
+    const resolvedSide = side ?? (variant === 'footer' ? 'top' : 'right');
+    const resolvedAlign = variant === 'footer' ? 'center' : 'start';
+
     return (
         <DropdownMenu open={open} onOpenChange={setOpen}>
             <DropdownMenuTrigger asChild>
@@ -112,6 +121,17 @@ export function SchemaCopyMenu({ schema, endpoints, baseUrl, variant = 'button'
                     >
                         <Sparkles className="h-3.5 w-3.5" />
                     </Button>
+                ) : variant === 'footer' ? (
+                    <Button
+                        variant="secondary"
+                        size="sm"
+                        className="w-full justify-center gap-1.5 text-xs"
+                        disabled={!isReady}
+                    >
+                        <Sparkles className="h-3 w-3" />
+                        Copy schema for AI
+                        <ChevronDown className="h-3 w-3 opacity-60" />
+                    </Button>
                 ) : (
                     <Button variant="outline" size="sm" className="h-8 gap-1.5 text-xs" disabled={!isReady}>
                         <Sparkles className="h-3 w-3" />
@@ -121,8 +141,8 @@ export function SchemaCopyMenu({ schema, endpoints, baseUrl, variant = 'button'
                 )}
             </DropdownMenuTrigger>
             <DropdownMenuContent
-                side="right"
-                align="start"
+                side={resolvedSide}
+                align={resolvedAlign}
                 sideOffset={6}
                 collisionPadding={8}
                 className="w-60 max-w-[calc(100vw-16px)]"

package/src/tools/OpenapiViewer/components/DocsLayout/Sidebar/BrandHeader.tsx

@@ -1,48 +1,33 @@
 'use client';
 
-import type { ApiEndpoint, OpenApiInfo, OpenApiSchema } from '../../../types';
-import { SchemaCopyMenu } from '../SchemaCopyMenu';
+import type { OpenApiInfo } from '../../../types';
 
 interface BrandHeaderProps {
     info: OpenApiInfo | null;
-    /** Used only by ``SchemaCopyMenu`` — displayed label comes from ``info``. */
-    endpoints: ApiEndpoint[];
-    rawSchema?: OpenApiSchema | null;
-    resolvedBaseUrl?: string;
 }
 
 /** Topmost row of the sidebar: API title on the left, tiny version
- *  tag below it, and the Copy-for-AI menu on the right. The version
- *  used to sit inline with the title and fought it for space on narrow
- *  panels — stacking them vertically keeps the title at a readable
- *  size and the version as quiet metadata. */
-export function BrandHeader({ info, endpoints, rawSchema, resolvedBaseUrl }: BrandHeaderProps) {
+ *  tag below it. The Copy-for-AI menu used to live here as a cramped
+ *  icon button; it now sits as a full-width secondary CTA in the
+ *  sidebar footer where it's actually visible. */
+export function BrandHeader({ info }: BrandHeaderProps) {
     const apiTitle = info?.title ?? 'API Reference';
-    const copyReady = rawSchema !== null && rawSchema !== undefined && endpoints.length > 0;
+    const versionLabel = info?.version ? `v${info.version}` : null;
+    const versionNode = versionLabel ? (
+        <div className="font-mono text-[10px] text-muted-foreground/60 leading-tight mt-0.5">
+            {versionLabel}
+        </div>
+    ) : null;
 
     return (
-        <div className="shrink-0 border-b px-3 py-2.5 flex items-start gap-2">
-            <div className="flex-1 min-w-0">
-                <div
-                    className="text-[13px] font-semibold text-foreground leading-tight truncate"
-                    title={apiTitle}
-                >
-                    {apiTitle}
-                </div>
-                {info?.version && (
-                    <div className="font-mono text-[10px] text-muted-foreground/60 leading-tight mt-0.5">
-                        v{info.version}
-                    </div>
-                )}
+        <div className="shrink-0 border-b px-3 py-2.5">
+            <div
+                className="text-[13px] font-semibold text-foreground leading-tight truncate"
+                title={apiTitle}
+            >
+                {apiTitle}
             </div>
-            {copyReady && (
-                <SchemaCopyMenu
-                    schema={rawSchema ?? null}
-                    endpoints={endpoints}
-                    baseUrl={resolvedBaseUrl}
-                    variant="icon"
-                />
-            )}
+            {versionNode}
         </div>
     );
 }

package/src/tools/OpenapiViewer/components/DocsLayout/Sidebar/Toolbar.tsx

@@ -4,10 +4,9 @@ import React from 'react';
 
 import { Combobox } from '@djangocfg/ui-core/components';
 
-import type { SchemaSource } from '../../../types';
-import { MethodChips } from './MethodChips';
+import type { ApiEndpoint, OpenApiSchema, SchemaSource } from '../../../types';
+import { SchemaCopyMenu } from '../SchemaCopyMenu';
 import { SearchInput } from './SearchInput';
-import type { MethodFilter } from './types';
 
 interface ToolbarProps {
     schemas: SchemaSource[];
@@ -18,17 +17,21 @@ interface ToolbarProps {
     search: string;
     onSearchChange: (v: string) => void;
 
-    methodFilter: MethodFilter;
-    onMethodFilterChange: (v: MethodFilter) => void;
+    /** Active-schema endpoints + raw document — drive the Copy-for-AI
+     *  CTA that sits under the search input. ``null``/empty disables it. */
+    endpoints: ApiEndpoint[];
+    rawSchema?: OpenApiSchema | null;
+    resolvedBaseUrl?: string;
 }
 
 /** Filter / control panel of the sidebar. Groups the schema selector,
- *  search box, and HTTP method chips into a single visually cohesive
- *  block so they read as "one toolbar" rather than three separate
- *  affordances stacked on top of each other.
+ *  search box, and the Copy-for-AI CTA into a single visually cohesive
+ *  block so they read as "one toolbar" rather than separate affordances
+ *  stacked on top of each other.
  *
- *  Each row is optional in the sense that we only render the schema
- *  selector when there are multiple schemas to choose between. */
+ *  The Copy CTA sits directly under the search input — it's a quiet
+ *  secondary action, full-width, and previously hid behind a tiny
+ *  icon in the brand row where users couldn't see it. */
 export function Toolbar({
     schemas,
     currentSchemaId,
@@ -36,29 +39,42 @@ export function Toolbar({
     showSchemaSelector,
     search,
     onSearchChange,
-    methodFilter,
-    onMethodFilterChange,
+    endpoints,
+    rawSchema,
+    resolvedBaseUrl,
 }: ToolbarProps) {
     const schemaOptions = React.useMemo(
         () => schemas.map((s) => ({ value: s.id, label: s.name })),
         [schemas],
     );
 
+    const copyReady = rawSchema !== null && rawSchema !== undefined && endpoints.length > 0;
+    const schemaSelectorNode = showSchemaSelector ? (
+        <Combobox
+            options={schemaOptions}
+            value={currentSchemaId ?? ''}
+            onValueChange={(id) => id && onSchemaChange(id)}
+            placeholder="Select API"
+            searchPlaceholder="Search APIs…"
+            emptyText="No APIs found"
+            className="w-full h-8 text-xs"
+        />
+    ) : null;
+    const copyMenuNode = copyReady ? (
+        <SchemaCopyMenu
+            schema={rawSchema ?? null}
+            endpoints={endpoints}
+            baseUrl={resolvedBaseUrl}
+            variant="footer"
+            side="bottom"
+        />
+    ) : null;
+
     return (
         <div className="shrink-0 border-b px-3 py-2.5 space-y-2">
-            {showSchemaSelector && (
-                <Combobox
-                    options={schemaOptions}
-                    value={currentSchemaId ?? ''}
-                    onValueChange={(id) => id && onSchemaChange(id)}
-                    placeholder="Select API"
-                    searchPlaceholder="Search APIs…"
-                    emptyText="No APIs found"
-                    className="w-full h-8 text-xs"
-                />
-            )}
+            {schemaSelectorNode}
             <SearchInput value={search} onChange={onSearchChange} />
-            <MethodChips value={methodFilter} onChange={onMethodFilterChange} />
+            {copyMenuNode}
         </div>
     );
 }

package/src/tools/OpenapiViewer/components/DocsLayout/Sidebar/index.tsx

@@ -8,7 +8,7 @@ import { BrandHeader } from './BrandHeader';
 import { buildFlatVM, buildSectionsVM } from './buildVM';
 import { SidebarBody } from './SidebarBody';
 import { Toolbar } from './Toolbar';
-import type { MethodFilter, SidebarBodyVM } from './types';
+import type { SidebarBodyVM } from './types';
 import { useDebouncedValue } from './useDebouncedValue';
 
 export interface DocsSidebarProps {
@@ -28,7 +28,7 @@ export interface DocsSidebarProps {
      *  schema id. The sidebar renders them as two-level sections. */
     endpointsBySchema?: Record<string, ApiEndpoint[]>;
     /** Raw active schema + resolved base URL — used by the Copy-for-AI
-     *  dropdown in the brand row. ``null`` disables the button. */
+     *  CTA in the toolbar. ``null`` hides the button. */
     rawSchema?: OpenApiSchema | null;
     resolvedBaseUrl?: string;
 }
@@ -51,7 +51,6 @@ export function DocsSidebar({
     resolvedBaseUrl,
 }: DocsSidebarProps) {
     const [search, setSearch] = useState('');
-    const [methodFilter, setMethodFilter] = useState<MethodFilter>('ALL');
     const debouncedSearch = useDebouncedValue(search);
 
     const body = useMemo<SidebarBodyVM>(() => {
@@ -61,7 +60,7 @@ export function DocsSidebar({
                 endpointsBySchema ?? {},
                 selectedVersion,
                 debouncedSearch,
-                methodFilter,
+                'ALL',
                 activeEndpointId,
             );
         }
@@ -69,7 +68,7 @@ export function DocsSidebar({
             endpoints,
             selectedVersion,
             debouncedSearch,
-            methodFilter,
+            'ALL',
             activeEndpointId,
         );
     }, [
@@ -79,7 +78,6 @@ export function DocsSidebar({
         endpoints,
         selectedVersion,
         debouncedSearch,
-        methodFilter,
         activeEndpointId,
     ]);
 
@@ -88,12 +86,7 @@ export function DocsSidebar({
 
     return (
         <aside className="flex flex-col h-full min-h-0 border-r bg-muted/10">
-            <BrandHeader
-                info={info}
-                endpoints={endpoints}
-                rawSchema={rawSchema}
-                resolvedBaseUrl={resolvedBaseUrl}
-            />
+            <BrandHeader info={info} />
             <Toolbar
                 schemas={schemas}
                 currentSchemaId={currentSchemaId}
@@ -101,8 +94,9 @@ export function DocsSidebar({
                 showSchemaSelector={showSchemaSelector}
                 search={search}
                 onSearchChange={setSearch}
-                methodFilter={methodFilter}
-                onMethodFilterChange={setMethodFilter}
+                endpoints={endpoints}
+                rawSchema={rawSchema}
+                resolvedBaseUrl={resolvedBaseUrl}
             />
             <ScrollArea>
                 <SidebarBody body={body} onNavigate={onNavigate} />

package/src/tools/OpenapiViewer/components/DocsLayout/sidebarLabel.ts

@@ -1,4 +1,5 @@
 import type { ApiEndpoint } from '../../types';
+import { relativePath } from '../../utils/url';
 
 /**
  * Given a list of full endpoint paths, return the longest ``/``-aligned
@@ -50,10 +51,6 @@ export function sidebarLabel(ep: ApiEndpoint, groupCommonPrefix: string): string
     return relativePath(ep.path);
 }
 
-function relativePath(full: string): string {
-    try { return new URL(full).pathname; } catch { return full; }
-}
-
 /** Tooltip text: always the definitive ``METHOD relative/path``. */
 export function sidebarTooltip(ep: ApiEndpoint): string {
     return `${ep.method} ${relativePath(ep.path)}`;

package/src/tools/OpenapiViewer/utils/operationToHar.ts

@@ -64,7 +64,8 @@ function buildUrl(
 
     let path = endpoint.path;
     for (const name of pathParamNames) {
-        const value = parameters[name] ?? `{${name}}`;
+        const value = parameters[name];
+        if (value === undefined || value === '') continue;
         path = path.replaceAll(`{${name}}`, encodeURIComponent(value));
     }
 

package/src/tools/OpenapiViewer/utils/url.ts

@@ -118,9 +118,16 @@ export function resolveAbsolute(url: string): string {
     return url;
 }
 
-/** Pull just the path out of any URL (absolute or relative). */
+/** Pull just the path out of any URL (absolute or relative). The
+ *  ``URL`` parser percent-encodes path segments, which turns OpenAPI
+ *  template braces (``{id}``) into ``%7Bid%7D``. We restore those so
+ *  unfilled templates render as the readable form authors wrote. */
 export function relativePath(url: string): string {
-    try { return new URL(url).pathname; } catch { return url; }
+    try {
+        return new URL(url).pathname.replace(/%7B/gi, '{').replace(/%7D/gi, '}');
+    } catch {
+        return url;
+    }
 }
 
 /**