jamdesk 1.1.221 → 1.1.222

package/vendored/components/mdx/MermaidInner.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import mermaid from 'mermaid';
 import {
   CACHE_KEY_PREFIX,
@@ -10,6 +10,7 @@ import {
   readSvgHeight,
   type CachedDiagram,
 } from './mermaidCache';
+import { MermaidZoomModal, isZoomDisabled, withZoomIds } from './MermaidZoomModal';
 
 mermaid.initialize({
   startOnLoad: false,
@@ -35,6 +36,48 @@ interface MermaidInnerProps {
   className?: string;
   /** Minimum width for the SVG diagram (e.g., "700px", "100%") */
   minWidth?: string;
+  /** Turns off click to expand. All three spellings: see isZoomDisabled. */
+  noZoom?: boolean | string;
+  nozoom?: boolean | string;
+  'data-no-zoom'?: boolean | string;
+}
+
+// Same breakpoint as ZoomableImage (Tailwind `md`): below it the modal would
+// be no larger than the inline diagram.
+const ZOOM_MEDIA_QUERY = '(min-width: 768px)';
+const ZOOM_MIN_VIEWPORT_PX = 768;
+
+// The panel is 90vw, so without a cap a small pie or a narrow sequence diagram
+// is scaled several times over and has to be scrolled. 1.5x keeps a default
+// pie (about 570x450) fully visible in a 90vh panel on a 900px-tall screen,
+// where 2x did not. Wide diagrams still fit the panel width; tall ones scroll.
+const ZOOM_MAX_SCALE = 1.5;
+
+function isZoomViewport(): boolean {
+  return typeof window.matchMedia === 'function'
+    ? window.matchMedia(ZOOM_MEDIA_QUERY).matches
+    : window.innerWidth >= ZOOM_MIN_VIEWPORT_PX;
+}
+
+// Mermaid writes its render width as an inline px max-width (`useMaxWidth`);
+// the viewBox width is the same number when that is off.
+function naturalSvgWidth(svgEl: SVGSVGElement): number | null {
+  const maxWidth = svgEl.style.maxWidth;
+  if (maxWidth.endsWith('px') && parseFloat(maxWidth) > 0) return parseFloat(maxWidth);
+  const viewBoxWidth = Number(svgEl.getAttribute('viewBox')?.trim().split(/[\s,]+/)[2]);
+  return viewBoxWidth > 0 ? viewBoxWidth : null;
+}
+
+function setButtonSemantics(el: HTMLElement, on: boolean): void {
+  if (on) {
+    el.setAttribute('role', 'button');
+    el.setAttribute('tabindex', '0');
+    el.setAttribute('aria-label', 'Expand diagram');
+  } else {
+    el.removeAttribute('role');
+    el.removeAttribute('tabindex');
+    el.removeAttribute('aria-label');
+  }
 }
 
 interface ColorPalette {
@@ -96,10 +139,31 @@ const lightPalette: ColorPalette = {
   pieSliceStroke: '#ffffff', // white — crisp separation between slices on a light bg
 };
 
+// Mermaid marks author styles (`style`, `classDef`, subgraph `style`) as inline
+// `!important` and never marks its own defaults, so this is the stable signal for
+// "the author chose this". We never write `!important` ourselves, so the signal
+// survives re-theming on a dark-mode toggle.
+function isAuthored(el: Element, prop: string): boolean {
+  return (el as HTMLElement).style.getPropertyPriority(prop) === 'important';
+}
+
+function kebab(prop: string): string {
+  return prop.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+}
+
+// Writes a property unless the author set it; setProperty (not `style.x =`)
+// is used because plain assignment would also drop an authored `!important`.
+function setThemed(el: Element, prop: string, value: string): void {
+  if (isAuthored(el, prop)) return;
+  (el as HTMLElement).style.setProperty(prop, value);
+}
+
 // Styling helper utilities
 function styleElements(svgEl: SVGElement, selector: string, styles: Partial<CSSStyleDeclaration>): void {
   svgEl.querySelectorAll(selector).forEach((el) => {
-    Object.assign((el as SVGElement).style, styles);
+    for (const [prop, value] of Object.entries(styles)) {
+      setThemed(el, kebab(prop), String(value));
+    }
   });
 }
 
@@ -243,7 +307,8 @@ function applyCommonStyles(svgEl: SVGElement, palette: ColorPalette): void {
   // Cylinder/database shapes (paths with light fills)
   svgEl.querySelectorAll('.node path').forEach((path) => {
     if (isLightColor(window.getComputedStyle(path).fill)) {
-      Object.assign((path as SVGElement).style, { fill: palette.nodeFill, stroke: palette.nodeStroke });
+      setThemed(path, 'fill', palette.nodeFill);
+      setThemed(path, 'stroke', palette.nodeStroke);
     }
   });
 
@@ -271,7 +336,12 @@ function applyDarkModeInversions(svgEl: SVGElement, palette: ColorPalette): void
 
   // Invert text colors. text.slice (pie percentage labels) is excluded so the
   // white set in applyPieChartStyles stays legible on the colored slices.
-  styleElements(svgEl, 'text:not(.slice), .nodeLabel, .edgeLabel, .label, tspan', { fill: palette.text });
+  svgEl.querySelectorAll('text:not(.slice), .nodeLabel, .edgeLabel, .label, tspan').forEach((el) => {
+    const label = el.closest('.label');
+    if (isAuthored(el, 'fill') || isAuthored(el, 'color')) return;
+    if (label && (isAuthored(label, 'fill') || isAuthored(label, 'color'))) return;
+    setThemed(el, 'fill', palette.text);
+  });
   styleElements(svgEl, 'text.actor, .messageText, .labelText, .loopText, .noteText', { fill: palette.text });
 
   // Invert foreignObject text and clear light backgrounds
@@ -280,7 +350,7 @@ function applyDarkModeInversions(svgEl: SVGElement, palette: ColorPalette): void
     const computed = window.getComputedStyle(htmlEl);
 
     if (isDarkColor(computed.color)) {
-      htmlEl.style.color = palette.text;
+      setThemed(htmlEl, 'color', palette.text);
     }
     if (isLightColor(computed.backgroundColor)) {
       htmlEl.style.backgroundColor = 'transparent';
@@ -293,10 +363,10 @@ function applyDarkModeInversions(svgEl: SVGElement, palette: ColorPalette): void
     if ((el as Element).classList.contains('pieCircle')) return;
     const computed = window.getComputedStyle(el);
     if (computed.stroke && computed.stroke !== 'none') {
-      (el as SVGElement).style.stroke = palette.line;
+      setThemed(el, 'stroke', palette.line);
     }
     if (isLightColor(computed.fill)) {
-      (el as SVGElement).style.fill = 'transparent';
+      setThemed(el, 'fill', 'transparent');
     }
   });
 
@@ -306,9 +376,83 @@ function applyDarkModeInversions(svgEl: SVGElement, palette: ColorPalette): void
   // Circles (state diagram start/end states)
   svgEl.querySelectorAll('circle').forEach((circle) => {
     if (isDarkColor(window.getComputedStyle(circle).fill)) {
-      (circle as SVGElement).style.fill = palette.line;
+      setThemed(circle, 'fill', palette.line);
     }
-    (circle as SVGElement).style.stroke = palette.line;
+    setThemed(circle, 'stroke', palette.line);
+  });
+}
+
+// Common CSS names seen in mermaid docs; only a fallback for engines whose
+// computed style doesn't resolve a named color to rgb() (browsers do).
+const NAMED_COLORS: Record<string, string> = {
+  white: '255,255,255', black: '0,0,0', red: '255,0,0', green: '0,128,0', blue: '0,0,255',
+  yellow: '255,255,0', orange: '255,165,0', purple: '128,0,128', pink: '255,192,203',
+  gray: '128,128,128', grey: '128,128,128', lightblue: '173,216,230', lightgreen: '144,238,144',
+  lightgray: '211,211,211', lightgrey: '211,211,211', lightyellow: '255,255,224',
+  navy: '0,0,128', teal: '0,128,128', cyan: '0,255,255', magenta: '255,0,255',
+  brown: '165,42,42', gold: '255,215,0', silver: '192,192,192', darkblue: '0,0,139',
+  darkgreen: '0,100,0', darkred: '139,0,0',
+};
+
+function hslToRgb(value: string): string | null {
+  const m = value.match(/hsla?\(\s*([\d.]+)(?:deg)?\s*[, ]\s*([\d.]+)%\s*[, ]\s*([\d.]+)%/i);
+  if (!m) return null;
+  const h = (+m[1] % 360) / 360;
+  const sat = +m[2] / 100;
+  const l = +m[3] / 100;
+  const q = l < 0.5 ? l * (1 + sat) : l + sat - l * sat;
+  const p = 2 * l - q;
+  const channel = (t: number) => {
+    const x = (t + 1) % 1;
+    if (x < 1 / 6) return p + (q - p) * 6 * x;
+    if (x < 1 / 2) return q;
+    if (x < 2 / 3) return p + (q - p) * (2 / 3 - x) * 6;
+    return p;
+  };
+  return [channel(h + 1 / 3), channel(h), channel(h - 1 / 3)].map((c) => Math.round(c * 255)).join(',');
+}
+
+// Computed style first (browsers resolve names and hsl() to rgb()), then the
+// raw inline value parsed by hand for engines that don't.
+function resolveRgb(shape: Element): [number, number, number] | null {
+  const raw = (shape as HTMLElement).style.getPropertyValue('fill').trim().toLowerCase();
+  const parsed =
+    normalizeColor(window.getComputedStyle(shape).fill) ??
+    normalizeColor(raw) ??
+    hslToRgb(raw) ??
+    NAMED_COLORS[raw] ??
+    null;
+  return parsed ? (parsed.split(',').map(Number) as [number, number, number]) : null;
+}
+
+function relativeLuminance(rgb: [number, number, number]): number {
+  const [r, g, b] = rgb.map((v) => {
+    const c = v / 255;
+    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+// A node with an authored fill but no authored label color would get the
+// theme's text color, which can vanish against the author's fill (pale text on
+// a light classDef fill in dark mode). Pick black or white from the fill. Runs
+// last in both modes so the dark-mode inversions can't overwrite it.
+function applyAuthoredContrast(svgEl: SVGElement): void {
+  svgEl.querySelectorAll('.node').forEach((node) => {
+    const shape = Array.from(node.querySelectorAll('rect, polygon, path, circle, ellipse')).find((s) =>
+      isAuthored(s, 'fill'),
+    );
+    if (!shape) return;
+    const rgb = resolveRgb(shape);
+    if (!rgb) return;
+    const textColor = relativeLuminance(rgb) > 0.5 ? '#111827' : '#ffffff';
+
+    const labels = Array.from(node.querySelectorAll('.label, .nodeLabel, foreignObject div, foreignObject span, tspan'));
+    if (labels.some((l) => isAuthored(l, 'color') || isAuthored(l, 'fill'))) return;
+    labels.forEach((l) => {
+      (l as HTMLElement).style.setProperty('color', textColor);
+      if (l.tagName.toLowerCase() === 'tspan') (l as HTMLElement).style.setProperty('fill', textColor);
+    });
   });
 }
 
@@ -347,8 +491,17 @@ function applyLightModeCleanup(svgEl: SVGElement): void {
  *     A --> B --> C
  * </Mermaid>
  */
-export function MermaidInner({ children, className, minWidth }: MermaidInnerProps) {
+export function MermaidInner({
+  children,
+  className,
+  minWidth,
+  noZoom,
+  nozoom,
+  'data-no-zoom': dataNoZoom,
+}: MermaidInnerProps) {
   const containerRef = useRef<HTMLDivElement>(null);
+  const zoomEnabled = !isZoomDisabled(noZoom, nozoom, dataNoZoom);
+  const [zoom, setZoom] = useState<{ svgHtml: string; maxWidthPx?: number } | null>(null);
   const [svg, setSvg] = useState<string>(() => {
     if (typeof window === 'undefined') return '';
     return readCache(children)?.svg ?? '';
@@ -427,11 +580,13 @@ export function MermaidInner({ children, className, minWidth }: MermaidInnerProp
     const applyDarkModeStyles = () => {
       applyCommonStyles(svgEl, darkPalette);
       applyDarkModeInversions(svgEl, darkPalette);
+      applyAuthoredContrast(svgEl);
     };
 
     const applyLightModeStyles = () => {
       applyCommonStyles(svgEl, lightPalette);
       applyLightModeCleanup(svgEl);
+      applyAuthoredContrast(svgEl);
     };
 
     if (isDarkMode) {
@@ -461,6 +616,100 @@ export function MermaidInner({ children, className, minWidth }: MermaidInnerProp
     return () => observer.disconnect();
   }, [svg, minWidth]);
 
+  // Button semantics only where activation works: once the diagram exists and
+  // at >= 768px. Elsewhere (mobile, loading) screen readers get the SVG's own
+  // accessible text. Set imperatively: putting them in React state would
+  // re-render the container on every breakpoint crossing (see the memo note
+  // below), and React leaves attributes it doesn't own alone.
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el || !zoomEnabled || !svg) return;
+    const mq = typeof window.matchMedia === 'function' ? window.matchMedia(ZOOM_MEDIA_QUERY) : null;
+    const sync = () => setButtonSemantics(el, mq ? mq.matches : window.innerWidth >= ZOOM_MIN_VIEWPORT_PX);
+    sync();
+    mq?.addEventListener('change', sync);
+    return () => {
+      mq?.removeEventListener('change', sync);
+      setButtonSemantics(el, false);
+    };
+  }, [svg, zoomEnabled]);
+
+  // Width is checked again at open time, like ZoomableImage.
+  /** Returns whether the modal opened, so a click only claims itself then. */
+  const openZoom = useCallback((): boolean => {
+    const el = containerRef.current;
+    const svgEl = el?.querySelector('svg');
+    // No <svg> yet: the diagram is still rendering, and a snapshot would open
+    // an empty modal.
+    if (!el || !svgEl || !isZoomViewport()) return false;
+    const natural = naturalSvgWidth(svgEl);
+    // The container's DOM is already themed, so the copy keeps the active
+    // palette and author colors without re-running the style pass.
+    setZoom({
+      svgHtml: withZoomIds(el.innerHTML),
+      maxWidthPx: natural ? natural * ZOOM_MAX_SCALE : undefined,
+    });
+    return true;
+  }, []);
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      // A customer's delegated zoom script may run before or after this
+      // handler. Whoever goes second sees defaultPrevented and backs off, so
+      // the diagram never opens two modals.
+      if (e.defaultPrevented) return;
+      // A drag that selects label text also fires click; so does a link the
+      // author put in the diagram. Neither should open the modal.
+      if (window.getSelection()?.toString()) return;
+      if ((e.target as Element).closest('a')) return;
+      // Only claim the click when the modal really opens. Below 768px it does
+      // not, and a customer zoom script that honors defaultPrevented must
+      // still get its turn.
+      if (openZoom()) e.preventDefault();
+    },
+    [openZoom],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>) => {
+      // Keys from a focused link inside the diagram bubble here; leave them
+      // alone so Enter still follows the link.
+      if (e.target !== e.currentTarget) return;
+      if (e.key !== 'Enter' && e.key !== ' ') return;
+      e.preventDefault(); // Space would otherwise scroll the page
+      openZoom();
+    },
+    [openZoom],
+  );
+
+  const closeZoom = useCallback(() => {
+    setZoom(null);
+    containerRef.current?.focus();
+  }, []);
+
+  // Security: Mermaid's securityLevel: 'strict' sanitizes the SVG output,
+  // similar to how KaTeX sanitizes LaTeX in the Latex component.
+  // The dangerouslySetInnerHTML is safe here because mermaid.render()
+  // outputs sanitized SVG when securityLevel is 'strict'.
+  //
+  // Memoized so opening or closing the zoom modal (a state change here) does
+  // not re-render this element. A re-write of its innerHTML would throw away
+  // the imperative theming above, which only re-runs on [svg, minWidth]. React
+  // 19.3 skips the write while __html is unchanged; the memo keeps that from
+  // being the only guard. Same trap as the memoized element in Mermaid.tsx.
+  const zoomReady = zoomEnabled && svg !== '';
+  const diagram = useMemo(
+    () => (
+      <div
+        ref={containerRef}
+        className={`mermaid-container my-6 flex justify-center items-start overflow-x-auto ${zoomReady ? 'md:cursor-zoom-in' : ''} ${className || ''}`}
+        dangerouslySetInnerHTML={{ __html: svg }}
+        {...(zoomEnabled && { onClick: handleClick, onKeyDown: handleKeyDown })}
+      />
+    ),
+    [svg, className, zoomEnabled, zoomReady, handleClick, handleKeyDown],
+  );
+
   if (error) {
     return (
       <div className="my-4 p-4 rounded-lg bg-red-50 dark:bg-red-950 border border-red-200 dark:border-red-800">
@@ -470,15 +719,19 @@ export function MermaidInner({ children, className, minWidth }: MermaidInnerProp
     );
   }
 
-  // Security: Mermaid's securityLevel: 'strict' sanitizes the SVG output,
-  // similar to how KaTeX sanitizes LaTeX in the Latex component.
-  // The dangerouslySetInnerHTML is safe here because mermaid.render()
-  // outputs sanitized SVG when securityLevel is 'strict'.
+  // The modal is a portal into document.body, so it adds no DOM child here:
+  // Mermaid.tsx's firstElementChild height probe still sees the container.
   return (
-    <div
-      ref={containerRef}
-      className={`mermaid-container my-6 flex justify-center items-start overflow-x-auto ${className || ''}`}
-      dangerouslySetInnerHTML={{ __html: svg }}
-    />
+    <>
+      {diagram}
+      {zoom !== null && (
+        <MermaidZoomModal
+          svgHtml={zoom.svgHtml}
+          maxWidthPx={zoom.maxWidthPx}
+          label="Expanded diagram"
+          onClose={closeZoom}
+        />
+      )}
+    </>
   );
 }

package/vendored/components/mdx/MermaidZoomModal.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { useBodyScrollLock } from '../../hooks/useBodyScrollLock';
+
+type ZoomFlag = boolean | string | undefined;
+
+/**
+ * Mirrors the image opt-out in MDXComponents.tsx: preprocess-mdx turns a bare
+ * `noZoom` attribute into `data-no-zoom="true"`, and HTML-style parsing can
+ * lowercase it to `nozoom`.
+ */
+export function isZoomDisabled(...flags: ZoomFlag[]): boolean {
+  return flags.some((f) => f === true || f === 'true');
+}
+
+/**
+ * Mermaid scopes its `<style>` rules and marker references to the root svg id
+ * (`#X .node`, `url(#X_arrow)`), so a second copy with the same id would clash
+ * with the inline diagram. Rewrites every occurrence of the id. The ids are
+ * random (`mermaid-<9 chars>`), so a plain substring replace can't hit
+ * unrelated text.
+ */
+export function withZoomIds(svgHtml: string): string {
+  const id = svgHtml.match(/^\s*<svg\b[^>]*?\sid="([^"]+)"/)?.[1];
+  if (!id) return svgHtml;
+  return svgHtml.split(id).join(`${id}-zoom`);
+}
+
+interface MermaidZoomModalProps {
+  svgHtml: string;
+  label: string;
+  onClose: () => void;
+  /** Upper bound on the diagram's width; the panel width still applies. */
+  maxWidthPx?: number;
+}
+
+export function MermaidZoomModal({ svgHtml, label, onClose, maxWidthPx }: MermaidZoomModalProps) {
+  const closeRef = useRef<HTMLButtonElement>(null);
+
+  useBodyScrollLock(true);
+
+  useEffect(() => {
+    closeRef.current?.focus();
+  }, []);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [onClose]);
+
+  // Only a click on the backdrop itself closes: clicks inside the panel must
+  // not, so the reader can scroll and select within a large diagram.
+  const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.target === e.currentTarget) onClose();
+  };
+
+  // Security: the markup is a copy of the inline diagram's DOM, which mermaid
+  // produced with securityLevel 'strict' (see MermaidInner).
+  return createPortal(
+    <div className="image-zoom-modal" role="dialog" aria-modal="true" aria-label={label}>
+      <div className="image-zoom-backdrop" onClick={handleBackdropClick}>
+        <div className="mermaid-zoom-panel">
+          <button
+            ref={closeRef}
+            type="button"
+            className="mermaid-zoom-close"
+            aria-label="Close diagram"
+            onClick={onClose}
+          >
+            <i className="fa-solid fa-xmark" aria-hidden="true" />
+          </button>
+          <div
+            className="mermaid-zoom-content"
+            style={maxWidthPx ? { maxWidth: `${maxWidthPx}px` } : undefined}
+            dangerouslySetInnerHTML={{ __html: svgHtml }}
+          />
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}

package/vendored/components/mdx/ZoomableImage.tsx

@@ -32,9 +32,16 @@ export function ZoomableImage({
 
   useBodyScrollLock(isZoomed);
 
-  const handleClick = useCallback(() => {
+  const handleClick = useCallback((e: React.MouseEvent<HTMLImageElement>) => {
+    // A customer's delegated zoom script may run first; back off if it did,
+    // and mark the click handled so it backs off if we ran first.
+    if (e.defaultPrevented) return;
+    // An image inside a link must leave the link's navigation alone; before
+    // the defaultPrevented guard, the click bubbled to the anchor and followed it.
+    if ((e.target as Element).closest('a')) return;
     // Check mobile at click time — avoids per-image resize listeners
     if (!noZoom && window.innerWidth >= 768) {
+      e.preventDefault();
       setIsZoomed(true);
     }
   }, [noZoom]);

package/vendored/components/navigation/Header.tsx

@@ -18,6 +18,8 @@ import { resolveNavigation } from '@/lib/navigation-resolver';
 import { getIconClass } from '@/lib/icon-utils';
 import { useLinkPrefix } from '@/lib/link-prefix-context';
 import { useChatOpenHandler } from '@/hooks/useChatPanel';
+import { ChatBrandIcon } from '@/components/chat/ChatBrandIcon';
+import { useChatLabel } from '@/components/chat/useChatLabel';
 import { useSearchOpenHandler } from '@/hooks/useSearchOpenHandler';
 import { extractLanguageFromPath } from '@/lib/language-utils';
 import { getUiStrings } from '@/lib/ui-strings';
@@ -70,6 +72,7 @@ export function Header({ config, layout = 'header-logo', tabsPosition: tabsPosit
   const linkPrefix = useLinkPrefix();
   const currentLang = extractLanguageFromPath(pathname || '/');
   const ui = getUiStrings(currentLang);
+  const chatLabel = useChatLabel(ui.askAi);
 
   // In sidebar-logo layout, logo is in sidebar, not header
   const showLogoInHeader = layout === 'header-logo';
@@ -358,9 +361,11 @@ export function Header({ config, layout = 'header-logo', tabsPosition: tabsPosit
             // that the logo gives way.
             <div className="@container flex-1 flex justify-center lg:px-4 lg:min-w-[8rem]">
               <div className="hidden lg:flex items-center gap-2">
+                {/* shrink-0: a long custom chat label (up to 40 chars) must
+                    truncate itself, not squeeze "Search" down to "Se…". */}
                 <button
                   onClick={() => onSearchOpen()}
-                  className={`${BAR_BUTTON} text-[var(--color-text-muted)] text-sm hover:border-[var(--color-border-hover)] transition-colors cursor-pointer`}
+                  className={`${BAR_BUTTON} shrink-0 text-[var(--color-text-muted)] text-sm hover:border-[var(--color-border-hover)] transition-colors cursor-pointer`}
                   aria-label={ui.search}
                   title={`${ui.search} (⌘K)`}
                 >
@@ -375,11 +380,11 @@ export function Header({ config, layout = 'header-logo', tabsPosition: tabsPosit
                   <button
                     onClick={onChatOpen}
                     className={`${BAR_BUTTON} hover:border-[var(--color-border-hover)] cursor-pointer transition-colors text-sm text-[var(--color-text-muted)]`}
-                    aria-label={ui.askAi}
-                    title={`${ui.askAi} (⌘I)`}
+                    aria-label={chatLabel}
+                    title={`${chatLabel} (⌘I)`}
                   >
-                    <i className="fa-solid fa-sparkles text-[14px] text-[var(--color-accent)]" aria-hidden="true" />
-                    <span className={BAR_LABEL}>{ui.askAi}</span>
+                    <ChatBrandIcon className="text-[14px] text-[var(--color-accent)]" sizePx={14} />
+                    <span className={BAR_LABEL}>{chatLabel}</span>
                     <kbd className={`${BAR_HINT} items-center gap-[2px] px-2 py-0.5 text-xs text-[var(--color-text-muted)] bg-[var(--color-bg-primary)] border border-[var(--color-border)] rounded`}>
                       <span className="text-sm leading-none">⌘</span>
                       <span>I</span>
@@ -510,9 +515,9 @@ export function Header({ config, layout = 'header-logo', tabsPosition: tabsPosit
               <button
                 onClick={onChatOpen}
                 className={MOBILE_ICON_BUTTON}
-                aria-label={ui.askAi}
+                aria-label={chatLabel}
               >
-                <i className="fa-solid fa-sparkles text-[16px] text-[var(--color-accent)]" aria-hidden="true" />
+                <ChatBrandIcon className="text-[16px] text-[var(--color-accent)]" sizePx={16} />
               </button>
             )}
 
@@ -570,10 +575,10 @@ export function Header({ config, layout = 'header-logo', tabsPosition: tabsPosit
                   <button
                     onClick={onChatOpen}
                     className={`${COMPACT_ICON_BUTTON} text-[var(--color-accent)]`}
-                    aria-label={ui.askAi}
-                    title={`${ui.askAi} (⌘I)`}
+                    aria-label={chatLabel}
+                    title={`${chatLabel} (⌘I)`}
                   >
-                    <i className="fa-solid fa-sparkles text-[16px]" aria-hidden="true" />
+                    <ChatBrandIcon className="text-[16px]" sizePx={16} />
                   </button>
                 )}
               </>

package/vendored/components/navigation/Sidebar.tsx

@@ -20,6 +20,8 @@ import { getIconClass } from '@/lib/icon-utils';
 import { getTabsFromConfig } from '@/lib/navigation-utils';
 import { useLinkPrefix } from '@/lib/link-prefix-context';
 import { useChatOpenHandler } from '@/hooks/useChatPanel';
+import { ChatBrandIcon } from '@/components/chat/ChatBrandIcon';
+import { useChatLabel } from '@/components/chat/useChatLabel';
 import { useSearchOpenHandler } from '@/hooks/useSearchOpenHandler';
 import { useDelayedNavigationSpinner } from '@/hooks/useDelayedNavigationSpinner';
 
@@ -213,6 +215,7 @@ export function Sidebar({ config, layout = 'header-logo', tabsPosition: tabsPosi
   const pathname = usePathname() ?? '';
   const router = useRouter();
   const linkPrefix = useLinkPrefix();
+  const chatLabel = useChatLabel('Ask AI');
   // Seed both `expanded: true` groups and the current page's ancestor groups
   // synchronously so SSR HTML matches first client paint. A useEffect-only seed
   // (the previous approach) renders the sidebar collapsed on the server, then
@@ -938,10 +941,10 @@ export function Sidebar({ config, layout = 'header-logo', tabsPosition: tabsPosi
               <button
                 onClick={onChatOpen}
                 className="flex-shrink-0 flex items-center justify-center w-9 h-9 bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded-lg text-[var(--color-text-muted)] hover:border-[var(--color-border-hover)] hover:bg-[var(--color-bg-tertiary)] transition-colors cursor-pointer"
-                aria-label="Ask AI"
-                title="Ask AI (⌘I)"
+                aria-label={chatLabel}
+                title={`${chatLabel} (⌘I)`}
               >
-                <i className="fa-solid fa-sparkles text-[14px] text-[var(--color-accent)]" aria-hidden="true" />
+                <ChatBrandIcon className="text-[14px] text-[var(--color-accent)]" sizePx={14} />
               </button>
             )}
           </div>

package/vendored/components/navigation/TabsNav.tsx

@@ -4,13 +4,20 @@ import { useMemo } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 // Icons use Font Awesome CSS classes for lightweight rendering
-import type { DocsConfig, TabsPosition } from '@/lib/docs-types';
+import type { DocsConfig, TabsAlignment, TabsPosition } from '@/lib/docs-types';
 import { resolveNavigation } from '@/lib/navigation-resolver';
 import { getIconClass } from '@/lib/icon-utils';
 import { getTheme } from '@/themes';
 import { getTabsFromConfig } from '@/lib/navigation-utils';
 import { useLinkPrefix } from '@/lib/link-prefix-context';
 
+// Logical flex justification: under dir="rtl" `start` stays at the reading start.
+export function tabsJustifyClass(alignment: TabsAlignment | undefined): 'justify-start' | 'justify-center' | 'justify-end' {
+  if (alignment === 'center') return 'justify-center';
+  if (alignment === 'end') return 'justify-end';
+  return 'justify-start';
+}
+
 interface TabsNavProps {
   config: DocsConfig;
   className?: string;
@@ -114,7 +121,7 @@ export function TabsNav({ config, className = '' }: TabsNavProps) {
           would not flip under `dir="rtl"` and would invert the misalignment
           for Arabic/Hebrew docs sites with `tabsPosition: 'top'`. */}
       <div
-        className="flex flex-wrap items-center gap-x-2 gap-y-1 py-3"
+        className={`flex flex-wrap items-center gap-x-2 gap-y-1 py-3 ${tabsJustifyClass(config.tabsAlignment)}`}
         style={{ marginBlock: 0, marginInline: '12px 24px', borderBottom: '0.5px solid var(--color-border)' }}
       >
         {tabsWithPaths.map((tab) => {

package/vendored/components/search/SearchModal.tsx

@@ -11,6 +11,8 @@ import { useLinkPrefix } from '@/lib/link-prefix-context';
 import { useProjectSlug } from '@/lib/project-slug-context';
 import type { SearchResult, SearchGroup } from '@/lib/search-client';
 import { useChatPanelOptional } from '@/hooks/useChatPanel';
+import { ChatBrandIcon } from '@/components/chat/ChatBrandIcon';
+import { useChatLabel } from '@/components/chat/useChatLabel';
 import { modifierKeyLabel } from '@/lib/platform-keys';
 import { getIconString, type IconConfig } from '@/lib/docs-types';
 import { getIconClass } from '@/lib/icon-utils';
@@ -145,6 +147,7 @@ export function SearchModal({ isOpen, onClose, popularPages, onNavigate, placeho
   const linkPrefix = useLinkPrefix();
   const projectSlug = useProjectSlug();
   const chatPanel = useChatPanelOptional();
+  const chatLabel = useChatLabel('Ask AI');
   // Ask AI is offered only when the docs chrome (ChatPanelProvider) is present
   // AND chat is enabled. The 404 page renders SearchModal without the provider,
   // so chatPanel is null there and the affordance is hidden.
@@ -747,10 +750,10 @@ export function SearchModal({ isOpen, onClose, popularPages, onNavigate, placeho
                 type="button"
                 onClick={handleAskAi}
                 className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-[11px] font-medium text-[var(--color-accent)] hover:bg-[var(--color-bg-tertiary)] transition-colors cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-accent)]"
-                aria-label={`Ask AI about ${query.trim()}`}
+                aria-label={`${chatLabel} about ${query.trim()}`}
               >
-                <i className="fa-solid fa-sparkles text-[10px]" aria-hidden="true" />
-                <span>Ask AI</span>
+                <ChatBrandIcon className="text-[10px]" sizePx={10} />
+                <span>{chatLabel}</span>
                 {/* One keycap for the whole chord (⌘/Ctrl + ↵). Mouse-only:
                     hidden on touch (coarse pointer), where there's no shortcut
                     to press and the label tap suffices. */}