Replace Streamdown with a plugin-free markdown renderer

The assistant only ever renders prose, links and the odd list, but Streamdown's plugin set dragged in shiki, mermaid and katex — and streamdown core declares mermaid as a hard dependency, so dropping the plugins alone would have left it installed. Rendering now runs on the same unified pipeline Streamdown used internally, minus the plugin surface: remark-parse -> remark-gfm -> remark-rehype -> rehype-sanitize -> hast-util-to-jsx-runtime. GFM, streaming repair and the link-safety hook all survive; fenced code renders as plain <pre>. Net -264/+101 packages. remend now runs only while a part is still streaming. On settled text it reads `*$89*` as an unclosed italic — the `$` throws off its closing-delimiter scan — and appends a stray `*` that parses as an empty bullet. Italic prices are ordinary storefront copy, so that would have shown up in production. Route-relative links go through next/link in the same tab; sending a shopper to a product page in a new tab would strand the conversation behind it. Only external destinations get the confirmation dialog. code-block.tsx and tool.tsx were the sole users of shiki and had no importers, so both are gone. Also folded in two unrelated changes that were already in the tree: the loader move out of app/components/ui, and dropping the fade on the command palette so it opens instantly. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KuySwKLSF4uEPpZjHkdHBP
2026-08-02 09:43:55 -04:00
parent 526982691c
commit 64af00e702
18 changed files with 363 additions and 2475 deletions
@@ -1,562 +0,0 @@
 "use client";
 import { Button } from "@/components/ui/button";
 import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
 } from "@/components/ui/select";
 import { cn } from "@/lib/utils";
 import { CheckIcon, CopyIcon } from "lucide-react";
 import type { ComponentProps, CSSProperties, HTMLAttributes } from "react";
 import {
  createContext,
  memo,
  useCallback,
  useContext,
  useEffect,
  useMemo,
  useRef,
  useState,
 } from "react";
 import type {
  BundledLanguage,
  BundledTheme,
  HighlighterGeneric,
  ThemedToken,
 } from "shiki";
 import { createHighlighter } from "shiki";
 // Shiki uses bitflags for font styles: 1=italic, 2=bold, 4=underline
 // oxlint-disable-next-line eslint(no-bitwise)
 const isItalic = (fontStyle: number | undefined) => fontStyle && fontStyle & 1;
 // oxlint-disable-next-line eslint(no-bitwise)
 const isBold = (fontStyle: number | undefined) => fontStyle && fontStyle & 2;
 const isUnderline = (fontStyle: number | undefined) =>
  // oxlint-disable-next-line eslint(no-bitwise)
  fontStyle && fontStyle & 4;
 // Transform tokens to include pre-computed keys to avoid noArrayIndexKey lint
 interface KeyedToken {
  token: ThemedToken;
  key: string;
 }
 interface KeyedLine {
  tokens: KeyedToken[];
  key: string;
 }
 const addKeysToTokens = (lines: ThemedToken[][]): KeyedLine[] =>
  lines.map((line, lineIdx) => ({
    key: `line-${lineIdx}`,
    tokens: line.map((token, tokenIdx) => ({
      key: `line-${lineIdx}-${tokenIdx}`,
      token,
    })),
  }));
 // Token rendering component
 const TokenSpan = ({ token }: { token: ThemedToken }) => (
  <span
    className="dark:!bg-[var(--shiki-dark-bg)] dark:!text-[var(--shiki-dark)]"
    style={
      {
        backgroundColor: token.bgColor,
        color: token.color,
        fontStyle: isItalic(token.fontStyle) ? "italic" : undefined,
        fontWeight: isBold(token.fontStyle) ? "bold" : undefined,
        textDecoration: isUnderline(token.fontStyle) ? "underline" : undefined,
        ...token.htmlStyle,
      } as CSSProperties
    }
  >
    {token.content}
  </span>
 );
 // Line number styles using CSS counters
 const LINE_NUMBER_CLASSES = cn(
  "block",
  "before:content-[counter(line)]",
  "before:inline-block",
  "before:[counter-increment:line]",
  "before:w-8",
  "before:mr-4",
  "before:text-right",
  "before:text-muted-foreground/50",
  "before:font-mono",
  "before:select-none"
 );
 // Line rendering component
 const LineSpan = ({
  keyedLine,
  showLineNumbers,
 }: {
  keyedLine: KeyedLine;
  showLineNumbers: boolean;
 }) => (
  <span className={showLineNumbers ? LINE_NUMBER_CLASSES : "block"}>
    {keyedLine.tokens.length === 0
      ? "\n"
      : keyedLine.tokens.map(({ token, key }) => (
          <TokenSpan key={key} token={token} />
        ))}
  </span>
 );
 // Types
 type CodeBlockProps = HTMLAttributes<HTMLDivElement> & {
  code: string;
  language: BundledLanguage;
  showLineNumbers?: boolean;
 };
 interface TokenizedCode {
  tokens: ThemedToken[][];
  fg: string;
  bg: string;
 }
 interface CodeBlockContextType {
  code: string;
 }
 // Context
 const CodeBlockContext = createContext<CodeBlockContextType>({
  code: "",
 });
 // Highlighter cache (singleton per language)
 const highlighterCache = new Map<
  string,
  Promise<HighlighterGeneric<BundledLanguage, BundledTheme>>
 >();
 // Token cache
 const tokensCache = new Map<string, TokenizedCode>();
 // Subscribers for async token updates
 const subscribers = new Map<string, Set<(result: TokenizedCode) => void>>();
 const getTokensCacheKey = (code: string, language: BundledLanguage) => {
  const start = code.slice(0, 100);
  const end = code.length > 100 ? code.slice(-100) : "";
  return `${language}:${code.length}:${start}:${end}`;
 };
 const getHighlighter = (
  language: BundledLanguage
 ): Promise<HighlighterGeneric<BundledLanguage, BundledTheme>> => {
  const cached = highlighterCache.get(language);
  if (cached) {
    return cached;
  }
  const highlighterPromise = createHighlighter({
    langs: [language],
    themes: ["github-light", "github-dark"],
  });
  highlighterCache.set(language, highlighterPromise);
  return highlighterPromise;
 };
 // Create raw tokens for immediate display while highlighting loads
 const createRawTokens = (code: string): TokenizedCode => ({
  bg: "transparent",
  fg: "inherit",
  tokens: code.split("\n").map((line) =>
    line === ""
      ? []
      : [
          {
            color: "inherit",
            content: line,
          } as ThemedToken,
        ]
  ),
 });
 // Synchronous highlight with callback for async results
 export const highlightCode = (
  code: string,
  language: BundledLanguage,
  // oxlint-disable-next-line eslint-plugin-promise(prefer-await-to-callbacks)
  callback?: (result: TokenizedCode) => void
 ): TokenizedCode | null => {
  const tokensCacheKey = getTokensCacheKey(code, language);
  // Return cached result if available
  const cached = tokensCache.get(tokensCacheKey);
  if (cached) {
    return cached;
  }
  // Subscribe callback if provided
  if (callback) {
    if (!subscribers.has(tokensCacheKey)) {
      subscribers.set(tokensCacheKey, new Set());
    }
    subscribers.get(tokensCacheKey)?.add(callback);
  }
  // Start highlighting in background - fire-and-forget async pattern
  getHighlighter(language)
    // oxlint-disable-next-line eslint-plugin-promise(prefer-await-to-then)
    .then((highlighter) => {
      const availableLangs = highlighter.getLoadedLanguages();
      const langToUse = availableLangs.includes(language) ? language : "text";
      const result = highlighter.codeToTokens(code, {
        lang: langToUse,
        themes: {
          dark: "github-dark",
          light: "github-light",
        },
      });
      const tokenized: TokenizedCode = {
        bg: result.bg ?? "transparent",
        fg: result.fg ?? "inherit",
        tokens: result.tokens,
      };
      // Cache the result
      tokensCache.set(tokensCacheKey, tokenized);
      // Notify all subscribers
      const subs = subscribers.get(tokensCacheKey);
      if (subs) {
        for (const sub of subs) {
          sub(tokenized);
        }
        subscribers.delete(tokensCacheKey);
      }
    })
    // oxlint-disable-next-line eslint-plugin-promise(prefer-await-to-then), eslint-plugin-promise(prefer-await-to-callbacks)
    .catch((error) => {
      console.error("Failed to highlight code:", error);
      subscribers.delete(tokensCacheKey);
    });
  return null;
 };
 const CodeBlockBody = memo(
  ({
    tokenized,
    showLineNumbers,
    className,
  }: {
    tokenized: TokenizedCode;
    showLineNumbers: boolean;
    className?: string;
  }) => {
    const preStyle = useMemo(
      () => ({
        backgroundColor: tokenized.bg,
        color: tokenized.fg,
      }),
      [tokenized.bg, tokenized.fg]
    );
    const keyedLines = useMemo(
      () => addKeysToTokens(tokenized.tokens),
      [tokenized.tokens]
    );
    return (
      <pre
        className={cn(
          "dark:!bg-[var(--shiki-dark-bg)] dark:!text-[var(--shiki-dark)] m-0 p-4 text-sm",
          className
        )}
        style={preStyle}
      >
        <code
          className={cn(
            "font-mono text-sm",
            showLineNumbers && "[counter-increment:line_0] [counter-reset:line]"
          )}
        >
          {keyedLines.map((keyedLine) => (
            <LineSpan
              key={keyedLine.key}
              keyedLine={keyedLine}
              showLineNumbers={showLineNumbers}
            />
          ))}
        </code>
      </pre>
    );
  },
  (prevProps, nextProps) =>
    prevProps.tokenized === nextProps.tokenized &&
    prevProps.showLineNumbers === nextProps.showLineNumbers &&
    prevProps.className === nextProps.className
 );
 CodeBlockBody.displayName = "CodeBlockBody";
 export const CodeBlockContainer = ({
  className,
  language,
  style,
  ...props
 }: HTMLAttributes<HTMLDivElement> & { language: string }) => (
  <div
    className={cn(
      "group relative w-full overflow-hidden rounded-md border bg-background text-foreground",
      className
    )}
    data-language={language}
    style={{
      containIntrinsicSize: "auto 200px",
      contentVisibility: "auto",
      ...style,
    }}
    {...props}
  />
 );
 export const CodeBlockHeader = ({
  children,
  className,
  ...props
 }: HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex items-center justify-between border-b bg-muted/80 px-3 py-2 text-muted-foreground text-xs",
      className
    )}
    {...props}
  >
    {children}
  </div>
 );
 export const CodeBlockTitle = ({
  children,
  className,
  ...props
 }: HTMLAttributes<HTMLDivElement>) => (
  <div className={cn("flex items-center gap-2", className)} {...props}>
    {children}
  </div>
 );
 export const CodeBlockFilename = ({
  children,
  className,
  ...props
 }: HTMLAttributes<HTMLSpanElement>) => (
  <span className={cn("font-mono", className)} {...props}>
    {children}
  </span>
 );
 export const CodeBlockActions = ({
  children,
  className,
  ...props
 }: HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn("-my-1 -mr-1 flex items-center gap-2", className)}
    {...props}
  >
    {children}
  </div>
 );
 export const CodeBlockContent = ({
  code,
  language,
  showLineNumbers = false,
 }: {
  code: string;
  language: BundledLanguage;
  showLineNumbers?: boolean;
 }) => {
  // Memoized raw tokens for immediate display
  const rawTokens = useMemo(() => createRawTokens(code), [code]);
  // Synchronous cache lookup — avoids setState in effect for cached results
  const syncTokens = useMemo(
    () => highlightCode(code, language) ?? rawTokens,
    [code, language, rawTokens]
  );
  // Async highlighting result (populated after shiki loads)
  const [asyncTokens, setAsyncTokens] = useState<TokenizedCode | null>(null);
  const asyncKeyRef = useRef({ code, language });
  // Invalidate stale async tokens synchronously during render
  if (
    asyncKeyRef.current.code !== code ||
    asyncKeyRef.current.language !== language
  ) {
    asyncKeyRef.current = { code, language };
    setAsyncTokens(null);
  }
  useEffect(() => {
    let cancelled = false;
    highlightCode(code, language, (result) => {
      if (!cancelled) {
        setAsyncTokens(result);
      }
    });
    return () => {
      cancelled = true;
    };
  }, [code, language]);
  const tokenized = asyncTokens ?? syncTokens;
  return (
    <div className="relative overflow-auto">
      <CodeBlockBody showLineNumbers={showLineNumbers} tokenized={tokenized} />
    </div>
  );
 };
 export const CodeBlock = ({
  code,
  language,
  showLineNumbers = false,
  className,
  children,
  ...props
 }: CodeBlockProps) => {
  const contextValue = useMemo(() => ({ code }), [code]);
  return (
    <CodeBlockContext.Provider value={contextValue}>
      <CodeBlockContainer className={className} language={language} {...props}>
        {children}
        <CodeBlockContent
          code={code}
          language={language}
          showLineNumbers={showLineNumbers}
        />
      </CodeBlockContainer>
    </CodeBlockContext.Provider>
  );
 };
 export type CodeBlockCopyButtonProps = ComponentProps<typeof Button> & {
  onCopy?: () => void;
  onError?: (error: Error) => void;
  timeout?: number;
 };
 export const CodeBlockCopyButton = ({
  onCopy,
  onError,
  timeout = 2000,
  children,
  className,
  ...props
 }: CodeBlockCopyButtonProps) => {
  const [isCopied, setIsCopied] = useState(false);
  const timeoutRef = useRef<number>(0);
  const { code } = useContext(CodeBlockContext);
  const copyToClipboard = useCallback(async () => {
    if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
      onError?.(new Error("Clipboard API not available"));
      return;
    }
    try {
      if (!isCopied) {
        await navigator.clipboard.writeText(code);
        setIsCopied(true);
        onCopy?.();
        timeoutRef.current = window.setTimeout(
          () => setIsCopied(false),
          timeout
        );
      }
    } catch (error) {
      onError?.(error as Error);
    }
  }, [code, onCopy, onError, timeout, isCopied]);
  useEffect(
    () => () => {
      window.clearTimeout(timeoutRef.current);
    },
    []
  );
  const Icon = isCopied ? CheckIcon : CopyIcon;
  return (
    <Button
      className={cn("shrink-0", className)}
      onClick={copyToClipboard}
      size="icon"
      variant="ghost"
      {...props}
    >
      {children ?? <Icon size={14} />}
    </Button>
  );
 };
 export type CodeBlockLanguageSelectorProps = ComponentProps<typeof Select>;
 export const CodeBlockLanguageSelector = (
  props: CodeBlockLanguageSelectorProps
 ) => <Select {...props} />;
 export type CodeBlockLanguageSelectorTriggerProps = ComponentProps<
  typeof SelectTrigger
 >;
 export const CodeBlockLanguageSelectorTrigger = ({
  className,
  ...props
 }: CodeBlockLanguageSelectorTriggerProps) => (
  <SelectTrigger
    className={cn(
      "h-7 border-none bg-transparent px-2 text-xs shadow-none",
      className
    )}
    size="sm"
    {...props}
  />
 );
 export type CodeBlockLanguageSelectorValueProps = ComponentProps<
  typeof SelectValue
 >;
 export const CodeBlockLanguageSelectorValue = (
  props: CodeBlockLanguageSelectorValueProps
 ) => <SelectValue {...props} />;
 export type CodeBlockLanguageSelectorContentProps = ComponentProps<
  typeof SelectContent
 >;
 export const CodeBlockLanguageSelectorContent = ({
  align = "end",
  ...props
 }: CodeBlockLanguageSelectorContentProps) => (
  <SelectContent align={align} {...props} />
 );
 export type CodeBlockLanguageSelectorItemProps = ComponentProps<
  typeof SelectItem
 >;
 export const CodeBlockLanguageSelectorItem = (
  props: CodeBlockLanguageSelectorItemProps
 ) => <SelectItem {...props} />;
@@ -0,0 +1,295 @@
 "use client";
 import { Button } from "@/components/ui/button";
 import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
 } from "@/components/ui/dialog";
 import { cn } from "@/lib/utils";
 import Link from "next/link";
 import type { Nodes } from "hast";
 import { toJsxRuntime } from "hast-util-to-jsx-runtime";
 import type { Components } from "hast-util-to-jsx-runtime";
 import type { ComponentProps, HTMLAttributes, MouseEvent } from "react";
 import { Fragment, memo, useCallback, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
 import remarkGfm from "remark-gfm";
 import remarkParse from "remark-parse";
 import remarkRehype from "remark-rehype";
 import remend from "remend";
 import { unified } from "unified";
 // Raw HTML never reaches the tree: remark-rehype drops it (allowDangerousHtml
 // is off by default) and rehype-sanitize is the second line of defence, mainly
 // for its href protocol allow-list — that is what stops `javascript:` URLs.
 // Relative hrefs carry no protocol, so storefront links pass through untouched.
 const schema = {
  ...defaultSchema,
  attributes: {
    ...defaultSchema.attributes,
    // GFM task lists render as disabled checkboxes. The default schema allows
    // `type` and `disabled` but not `checked`, so every box would read unticked.
    input: [...(defaultSchema.attributes?.input ?? []), "checked"],
  },
 };
 const processor = unified()
  .use(remarkParse)
  .use(remarkGfm)
  .use(remarkRehype)
  .use(rehypeSanitize, schema);
 // `text-only` leaves a half-streamed `[label](htt` as plain text. remend's
 // default instead emits a `streamdown:incomplete-link` placeholder href, which
 // the sanitizer would strip anyway.
 const REMEND_OPTIONS = { linkMode: "text-only" } as const;
 // remend only ever runs on text that is still arriving. On finished text it can
 // do damage: it reads `*$89*` as an unclosed italic (the `$` throws off its
 // closing-delimiter scan) and appends a stray `*`, which then parses as an empty
 // bullet. Prices in italics are ordinary storefront copy, so settled messages
 // render verbatim and only the in-flight one gets repaired.
 const repair = (markdown: string, isStreaming: boolean) =>
  isStreaming ? remend(markdown, REMEND_OPTIONS) : markdown;
 export interface LinkSafetyConfig {
  enabled: boolean;
  /** Return true for links that may open without a confirmation step. */
  onLinkCheck?: (url: string) => boolean;
 }
 type AnchorProps = ComponentProps<"a"> & {
  linkSafety?: LinkSafetyConfig;
  onUntrusted: (url: string) => void;
 };
 const LINK_CLASS =
  "font-medium underline underline-offset-4 hover:text-foreground";
 // Route-relative hrefs are the storefront links the assistant emits. Deciding
 // this from the string alone keeps the server and client passes identical;
 // `linkSafety.onLinkCheck` does the origin-aware check later, at click time.
 const isRouteHref = (href: string) => /^[/#?]/.test(href);
 const MarkdownLink = ({
  href,
  linkSafety,
  onUntrusted,
  ...props
 }: AnchorProps) => {
  // Runs on click rather than on render so it can read `window.location`,
  // which is unavailable during the server pass.
  const handleClick = useCallback(
    (event: MouseEvent<HTMLAnchorElement>) => {
      if (!href || !linkSafety?.enabled || !linkSafety.onLinkCheck) return;
      if (linkSafety.onLinkCheck(href)) return;
      event.preventDefault();
      onUntrusted(href);
    },
    [href, linkSafety, onUntrusted]
  );
  // In-app destinations navigate client-side in the same tab; sending a shopper
  // to a product page in a new tab would strand the conversation behind it.
  if (href && isRouteHref(href)) {
    return <Link className={LINK_CLASS} href={href} {...props} />;
  }
  return (
    <a
      className={LINK_CLASS}
      href={href}
      onClick={handleClick}
      rel="noreferrer"
      target="_blank"
      {...props}
    />
  );
 };
 // Fenced code renders as plain preformatted text — no tokenizer, no themes.
 const buildComponents = (
  linkSafety: LinkSafetyConfig | undefined,
  onUntrusted: (url: string) => void
 ): Partial<Components> => ({
  a: (props: ComponentProps<"a">) => (
    <MarkdownLink {...props} linkSafety={linkSafety} onUntrusted={onUntrusted} />
  ),
  blockquote: (props: ComponentProps<"blockquote">) => (
    <blockquote
      className="my-3 border-border border-l-2 pl-3 text-muted-foreground"
      {...props}
    />
  ),
  code: ({ className, ...props }: ComponentProps<"code">) => {
    // Only fenced blocks carry a language class, and those already sit inside a
    // <pre>, so they must not get the inline pill treatment.
    const isBlock =
      typeof className === "string" && className.includes("language-");
    return (
      <code
        className={cn(
          isBlock
            ? "font-mono text-xs"
            : "rounded bg-muted px-1 py-0.5 font-mono text-[0.85em]",
          className
        )}
        {...props}
      />
    );
  },
  em: (props: ComponentProps<"em">) => <em className="italic" {...props} />,
  h1: (props: ComponentProps<"h1">) => (
    <h1 className="mt-4 mb-2 font-semibold text-base" {...props} />
  ),
  h2: (props: ComponentProps<"h2">) => (
    <h2 className="mt-4 mb-2 font-semibold text-base" {...props} />
  ),
  h3: (props: ComponentProps<"h3">) => (
    <h3 className="mt-3 mb-1.5 font-semibold text-sm" {...props} />
  ),
  h4: (props: ComponentProps<"h4">) => (
    <h4 className="mt-3 mb-1.5 font-semibold text-sm" {...props} />
  ),
  h5: (props: ComponentProps<"h5">) => (
    <h5 className="mt-3 mb-1.5 font-semibold text-sm" {...props} />
  ),
  h6: (props: ComponentProps<"h6">) => (
    <h6 className="mt-3 mb-1.5 font-semibold text-sm" {...props} />
  ),
  hr: (props: ComponentProps<"hr">) => (
    <hr className="my-4 border-border" {...props} />
  ),
  // GFM task-list boxes are display only; readOnly silences React's warning
  // about a `checked` input with no change handler.
  input: (props: ComponentProps<"input">) => (
    <input className="mr-1.5 align-middle" readOnly {...props} />
  ),
  img: ({ alt, ...props }: ComponentProps<"img">) => (
    // biome-ignore lint/nursery/noImgElement: model output, not a known asset
    <img alt={alt ?? ""} className="my-2 max-w-full rounded-md" {...props} />
  ),
  li: (props: ComponentProps<"li">) => <li className="my-0.5" {...props} />,
  ol: (props: ComponentProps<"ol">) => (
    <ol className="my-2 list-decimal space-y-0.5 pl-5" {...props} />
  ),
  p: (props: ComponentProps<"p">) => (
    <p className="my-2 leading-relaxed" {...props} />
  ),
  pre: (props: ComponentProps<"pre">) => (
    <pre
      className="my-2 overflow-x-auto rounded-md bg-muted p-3 text-xs"
      {...props}
    />
  ),
  strong: (props: ComponentProps<"strong">) => (
    <strong className="font-semibold" {...props} />
  ),
  table: (props: ComponentProps<"table">) => (
    <div className="my-3 overflow-x-auto">
      <table className="w-full border-collapse text-left text-xs" {...props} />
    </div>
  ),
  td: (props: ComponentProps<"td">) => (
    <td className="border border-border px-2 py-1" {...props} />
  ),
  th: (props: ComponentProps<"th">) => (
    <th
      className="border border-border bg-muted px-2 py-1 font-medium"
      {...props}
    />
  ),
  ul: (props: ComponentProps<"ul">) => (
    <ul className="my-2 list-disc space-y-0.5 pl-5" {...props} />
  ),
 });
 export type MarkdownProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
  children: string;
  /** True while tokens are still arriving; enables incomplete-syntax repair. */
  isAnimating?: boolean;
  linkSafety?: LinkSafetyConfig;
 };
 export const Markdown = memo(
  ({
    children,
    className,
    isAnimating,
    linkSafety,
    ...props
  }: MarkdownProps) => {
    const [pending, setPending] = useState<string | null>(null);
    const handleUntrusted = useCallback((url: string) => setPending(url), []);
    const content = useMemo(() => {
      // While streaming, close syntax the model has not finished emitting so a
      // partial `**bold` renders as bold rather than as literal asterisks.
      const source = repair(children ?? "", isAnimating === true);
      const tree = processor.runSync(processor.parse(source)) as Nodes;
      return toJsxRuntime(tree, {
        components: buildComponents(linkSafety, handleUntrusted),
        Fragment,
        jsx,
        jsxs,
      });
    }, [children, isAnimating, linkSafety, handleUntrusted]);
    return (
      <div
        className={cn(
          "size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
          className
        )}
        {...props}
      >
        {content}
        <Dialog
          onOpenChange={(open) => !open && setPending(null)}
          open={pending !== null}
        >
          <DialogContent className="sm:max-w-md">
            <DialogHeader>
              <DialogTitle>Leave this site?</DialogTitle>
              <DialogDescription>
                This link points somewhere outside the store. Continue only if
                you trust it.
              </DialogDescription>
            </DialogHeader>
            <p className="break-all rounded-md bg-muted px-3 py-2 font-mono text-xs">
              {pending}
            </p>
            <DialogFooter>
              <Button onClick={() => setPending(null)} variant="outline">
                Cancel
              </Button>
              <Button
                onClick={() => {
                  if (pending) {
                    window.open(pending, "_blank", "noopener,noreferrer");
                  }
                  setPending(null);
                }}
              >
                Continue
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>
    );
  },
  (prev, next) =>
    prev.children === next.children && prev.isAnimating === next.isAnimating
 );
 Markdown.displayName = "Markdown";
@@ -12,23 +12,19 @@ import {
  TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { cjk } from "@streamdown/cjk";
 import { code } from "@streamdown/code";
 import { math } from "@streamdown/math";
 import { mermaid } from "@streamdown/mermaid";
 import type { UIMessage } from "ai";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import type { ComponentProps, HTMLAttributes, ReactElement } from "react";
 import {
  createContext,
  memo,
  useCallback,
  useContext,
  useEffect,
  useMemo,
  useState,
 } from "react";
-import { Streamdown } from "streamdown";
+
 import { Markdown } from "./markdown";
 export type MessageProps = HTMLAttributes<HTMLDivElement> & {
  from: UIMessage["role"];
@@ -319,27 +315,10 @@ export const MessageBranchPage = ({
  );
 };
-export type MessageResponseProps = ComponentProps<typeof Streamdown>;
+export type MessageResponseProps = ComponentProps<typeof Markdown>;
-const streamdownPlugins = { cjk, code, math, mermaid };
+// Markdown already memoises on children/isAnimating.
-
+export const MessageResponse = Markdown;
 export const MessageResponse = memo(
  ({ className, ...props }: MessageResponseProps) => (
    <Streamdown
      className={cn(
        "size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
        className
      )}
      plugins={streamdownPlugins}
      {...props}
    />
  ),
  (prevProps, nextProps) =>
    prevProps.children === nextProps.children &&
    nextProps.isAnimating === prevProps.isAnimating
 );
 MessageResponse.displayName = "MessageResponse";
 export type MessageToolbarProps = ComponentProps<"div">;
@@ -7,10 +7,6 @@ import {
  CollapsibleTrigger,
 } from "@/components/ui/collapsible";
 import { cn } from "@/lib/utils";
 import { cjk } from "@streamdown/cjk";
 import { code } from "@streamdown/code";
 import { math } from "@streamdown/math";
 import { mermaid } from "@streamdown/mermaid";
 import { BrainIcon, ChevronDownIcon } from "lucide-react";
 import type { ComponentProps, ReactNode } from "react";
 import {
@@ -23,8 +19,8 @@ import {
  useRef,
  useState,
 } from "react";
 import { Streamdown } from "streamdown";
 import { Markdown } from "./markdown";
 import { Shimmer } from "./shimmer";
 interface ReasoningContextValue {
@@ -204,21 +200,23 @@ export type ReasoningContentProps = ComponentProps<
  children: string;
 };
 const streamdownPlugins = { cjk, code, math, mermaid };
 export const ReasoningContent = memo(
-  ({ className, children, ...props }: ReasoningContentProps) => (
+  ({ className, children, ...props }: ReasoningContentProps) => {
-    <CollapsibleContent
+    const { isStreaming } = useReasoning();
-      className={cn(
+
-        "mt-4 text-sm",
+    return (
-        "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+      <CollapsibleContent
-        className
+        className={cn(
-      )}
+          "mt-4 text-sm",
-      {...props}
+          "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
-    >
+          className
-      <Streamdown plugins={streamdownPlugins}>{children}</Streamdown>
+        )}
-    </CollapsibleContent>
+        {...props}
-  )
+      >
        <Markdown isAnimating={isStreaming}>{children}</Markdown>
      </CollapsibleContent>
    );
  }
 );
 Reasoning.displayName = "Reasoning";
@@ -1,173 +0,0 @@
 "use client";
 import { Badge } from "@/components/ui/badge";
 import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
 } from "@/components/ui/collapsible";
 import { cn } from "@/lib/utils";
 import type { DynamicToolUIPart, ToolUIPart } from "ai";
 import {
  CheckCircleIcon,
  ChevronDownIcon,
  CircleIcon,
  ClockIcon,
  WrenchIcon,
  XCircleIcon,
 } from "lucide-react";
 import type { ComponentProps, ReactNode } from "react";
 import { isValidElement } from "react";
 import { CodeBlock } from "./code-block";
 export type ToolProps = ComponentProps<typeof Collapsible>;
 export const Tool = ({ className, ...props }: ToolProps) => (
  <Collapsible
    className={cn("group not-prose mb-4 w-full rounded-md border", className)}
    {...props}
  />
 );
 export type ToolPart = ToolUIPart | DynamicToolUIPart;
 export type ToolHeaderProps = {
  title?: string;
  className?: string;
 } & (
  | { type: ToolUIPart["type"]; state: ToolUIPart["state"]; toolName?: never }
  | {
      type: DynamicToolUIPart["type"];
      state: DynamicToolUIPart["state"];
      toolName: string;
    }
 );
 const statusLabels: Record<ToolPart["state"], string> = {
  "approval-requested": "Awaiting Approval",
  "approval-responded": "Responded",
  "input-available": "Running",
  "input-streaming": "Pending",
  "output-available": "Completed",
  "output-denied": "Denied",
  "output-error": "Error",
 };
 const statusIcons: Record<ToolPart["state"], ReactNode> = {
  "approval-requested": <ClockIcon className="size-4 text-yellow-600" />,
  "approval-responded": <CheckCircleIcon className="size-4 text-blue-600" />,
  "input-available": <ClockIcon className="size-4 animate-pulse" />,
  "input-streaming": <CircleIcon className="size-4" />,
  "output-available": <CheckCircleIcon className="size-4 text-green-600" />,
  "output-denied": <XCircleIcon className="size-4 text-orange-600" />,
  "output-error": <XCircleIcon className="size-4 text-red-600" />,
 };
 export const getStatusBadge = (status: ToolPart["state"]) => (
  <Badge className="gap-1.5 rounded-full text-xs" variant="secondary">
    {statusIcons[status]}
    {statusLabels[status]}
  </Badge>
 );
 export const ToolHeader = ({
  className,
  title,
  type,
  state,
  toolName,
  ...props
 }: ToolHeaderProps) => {
  const derivedName =
    type === "dynamic-tool" ? toolName : type.split("-").slice(1).join("-");
  return (
    <CollapsibleTrigger
      className={cn(
        "flex w-full items-center justify-between gap-4 p-3",
        className
      )}
      {...props}
    >
      <div className="flex items-center gap-2">
        <WrenchIcon className="size-4 text-muted-foreground" />
        <span className="font-medium text-sm">{title ?? derivedName}</span>
        {getStatusBadge(state)}
      </div>
      <ChevronDownIcon className="size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
    </CollapsibleTrigger>
  );
 };
 export type ToolContentProps = ComponentProps<typeof CollapsibleContent>;
 export const ToolContent = ({ className, ...props }: ToolContentProps) => (
  <CollapsibleContent
    className={cn(
      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 space-y-4 p-4 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
      className
    )}
    {...props}
  />
 );
 export type ToolInputProps = ComponentProps<"div"> & {
  input: ToolPart["input"];
 };
 export const ToolInput = ({ className, input, ...props }: ToolInputProps) => (
  <div className={cn("space-y-2 overflow-hidden", className)} {...props}>
    <h4 className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
      Parameters
    </h4>
    <div className="rounded-md bg-muted/50">
      <CodeBlock code={JSON.stringify(input, null, 2)} language="json" />
    </div>
  </div>
 );
 export type ToolOutputProps = ComponentProps<"div"> & {
  output: ToolPart["output"];
  errorText: ToolPart["errorText"];
 };
 export const ToolOutput = ({
  className,
  output,
  errorText,
  ...props
 }: ToolOutputProps) => {
  if (!(output || errorText)) {
    return null;
  }
  let Output = <div>{output as ReactNode}</div>;
  if (typeof output === "object" && !isValidElement(output)) {
    Output = (
      <CodeBlock code={JSON.stringify(output, null, 2)} language="json" />
    );
  } else if (typeof output === "string") {
    Output = <CodeBlock code={output} language="json" />;
  }
  return (
    <div className={cn("space-y-2", className)} {...props}>
      <h4 className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
        {errorText ? "Error" : "Result"}
      </h4>
      <div
        className={cn(
          "overflow-x-auto rounded-md text-xs [&_table]:w-full",
          errorText
            ? "bg-destructive/10 text-destructive"
            : "bg-muted/50 text-foreground"
        )}
      >
        {errorText && <div>{errorText}</div>}
        {Output}
      </div>
    </div>
  );
 };
@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { Button } from '@/components/ui/button';
-import { Loader } from '@/app/components/ui/loader';
+import { Loader } from '@/components/ui/loader';
 export interface AccountFormField {
  name: string;
@@ -3,7 +3,7 @@
 import React, { useState } from 'react';
 import { useCartStore, redirectToCheckout } from '@/hooks/use-shopify-cart';
 import { Button } from '@/components/ui/button';
-import { Loader } from '@/app/components/ui/loader';
+import { Loader } from '@/components/ui/loader';
 import {
  Sheet,
  SheetContent,
@@ -6,7 +6,7 @@ import ProductCard from './product-card';
 import ProductFilters, { type ProductFilterFacet } from './product-filters';
 import ProductToolbar from './product-toolbar';
 import { Button } from '@/components/ui/button';
-import { Loader } from '@/app/components/ui/loader';
+import { Loader } from '@/components/ui/loader';
 import {
  getCollectionProductsPage,
  type CollectionSortKey,
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button } from '@/components/ui/button';
-import { Loader } from '@/app/components/ui/loader';
+import { Loader } from '@/components/ui/loader';
 import { RiSubtractLine, RiAddLine } from '@remixicon/react';
 import ShopPayButton from '@/components/shopify/shop-pay-button';
 import type { ProductOption, ProductOptionValue } from '@/hooks/use-shopify-products';
@@ -4,7 +4,7 @@ import React, { useState, useEffect } from 'react';
 import ProductCard from './product-card';
 import { getProductsPage } from '@/hooks/use-shopify-products';
 import { Button } from '@/components/ui/button';
-import { Loader } from '@/app/components/ui/loader';
+import { Loader } from '@/components/ui/loader';
 interface ProductImage {
  url: string;
@@ -11,7 +11,7 @@ import {
  CommandItem,
 } from '@/components/ui/command';
 import { Button } from '@/components/ui/button';
-import { Loader } from '@/app/components/ui/loader';
+import { Loader } from '@/components/ui/loader';
 import { RiSearchLine, RiImageLine, RiCloseLine } from '@remixicon/react';
 import {
  searchSuggestions,
@@ -111,7 +111,7 @@ const SearchDialog: React.FC = () => {
              if (event.key === 'Enter') goToSearchPage();
            }}
          />
-          <div className="absolute right-2 top-0 flex h-9 items-center gap-1">
+          <div className="absolute right-2 top-0 flex h-12 items-center gap-1">
            {hasQuery && (
              <Button
                onClick={() => setTerm('')}
@@ -6,7 +6,7 @@ import ProductCard from './product-card';
 import ProductFilters from './product-filters';
 import ProductToolbar from './product-toolbar';
 import { Button } from '@/components/ui/button';
-import { Loader } from '@/app/components/ui/loader';
+import { Loader } from '@/components/ui/loader';
 import {
  searchProducts,
  type SearchFilter,
@@ -3,7 +3,7 @@
 import React from 'react';
 import { SHOPIFY_STORE_DOMAIN } from '@/services/shopify/client';
 import ShopPayLogo from '@/components/shopify/shop-pay-logo';
-import { Loader } from '@/app/components/ui/loader';
+import { Loader } from '@/components/ui/loader';
 import { Button } from '@/components/ui/button';
 export interface ShopPayVariant {
@@ -393,6 +393,11 @@ const StoreAssistant: React.FC = () => {
                      return (
                        <MessageResponse
                          key={index}
                          // Only repair half-written markdown while it streams;
                          // settled text is rendered exactly as sent.
                          isAnimating={
                            status === 'streaming' && part.state === 'streaming'
                          }
                          linkSafety={{
                            enabled: true,
                            onLinkCheck: isInternalLink,
@@ -22,6 +22,7 @@ function Command({
      data-slot="command"
      className={cn(
        "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
        "transition-none animate-none",
        className
      )}
      {...props}
@@ -53,7 +54,13 @@ function CommandDialog({
        <DialogDescription>{description}</DialogDescription>
      </DialogHeader>
      <DialogContent
-        className={cn("overflow-hidden p-0", className)}
+        className={cn(
          "overflow-hidden p-0",
          // No fade/zoom on the command palette — it should appear instantly.
          "transition-none animate-none duration-0",
          "data-[state=closed]:animate-none data-[state=open]:animate-none",
          className
        )}
        showCloseButton={showCloseButton}
      >
        <Command shouldFilter={shouldFilter} className="**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
@@ -16,16 +16,13 @@
        "@radix-ui/react-use-controllable-state": "^1.2.6",
        "@remixicon/react": "^4.9.0",
        "@shopify/storefront-api-client": "^1.0.0",
        "@streamdown/cjk": "^1.0.3",
        "@streamdown/code": "^1.1.1",
        "@streamdown/math": "^1.0.2",
        "@streamdown/mermaid": "^1.0.2",
        "ai": "^7",
        "class-variance-authority": "0.7.1",
        "clsx": "^2.1.1",
        "cmdk": "^1.1.1",
        "embla-carousel-react": "^8.6.0",
        "framer-motion": "12.42.2",
        "hast-util-to-jsx-runtime": "^2.3.6",
        "input-otp": "^1.4.2",
        "lucide-react": "^0.562.0",
        "motion": "^12.23.26",
@@ -34,18 +31,23 @@
        "radix-ui": "^1.6.7",
        "react": "^19.0.0",
        "react-dom": "^19.0.0",
-        "shiki": "^3.19.0",
+        "rehype-sanitize": "^6.0.0",
        "remark-gfm": "^4.0.1",
        "remark-parse": "^11.0.0",
        "remark-rehype": "^11.1.2",
        "remend": "^1.3.0",
        "sonner": "^2.0.7",
        "streamdown": "^2.5.0",
        "tailwind-merge": "^3.4.0",
        "tailwindcss": "^4",
        "tw-animate-css": "1.4.0",
        "unified": "^11.0.5",
        "use-stick-to-bottom": "^1.1.6",
        "zod": "^4.4.3",
        "zustand": "^5.0.11"
    },
    "devDependencies": {
        "@tailwindcss/postcss": "^4",
        "@types/hast": "^3.0.5",
        "@types/node": "^22",
        "@types/react": "^19",
        "@types/react-dom": "^19",