Response collapse

ResponseCollapse.tsxThe control counts what it hides. The fold is hidden until-found, so browser find opens it and the control follows.Copy

import { useEffect, useRef, useState, type ReactNode } from "react";
import { ChevronDown, ChevronUp } from "lucide-react";
import { Button } from "@/components/ui/button";

type Section = { heading: string; body: string };

type Props = {
  /** Written to stand alone. Ask the model for one, rather than hoping the
   *  first lines happen to serve. */
  lead: string;
  /** Everything after the lead, cut on structure rather than on a line count. */
  sections: Section[];
  render?: (body: string) => ReactNode;
};

const words = (s: string) => s.trim().split(/\s+/).length;

export function ResponseCollapse({ lead, sections, render = (b) => <p>{b}</p> }: Props) {
  const [open, setOpen] = useState(false);
  const fold = useRef<HTMLDivElement>(null);
  const hidden = sections.reduce((n, s) => n + words(s.heading) + words(s.body), 0);

  // The fold stays in the DOM, hidden until found. Browser find then reaches
  // the conclusion, and beforematch tells us it did so the control agrees.
  // `hidden={!open}` in the JSX is what the server renders, so the fold
  // arrives closed; the effect then upgrades the attribute to until-found,
  // which React only knows how to set as a string via the DOM.
  useEffect(() => {
    const el = fold.current;
    if (!el) return;
    if (!open) el.setAttribute("hidden", "until-found");
    const onMatch = () => setOpen(true);
    el.addEventListener("beforematch", onMatch);
    return () => el.removeEventListener("beforematch", onMatch);
  }, [open]);

  return (
    <div className="text-sm leading-relaxed text-card-foreground">
      <p>{lead}</p>

      <Button variant="outline" size="sm" className="mt-3 border-chart-1 text-chart-1" onClick={() => setOpen(!open)} aria-expanded={open}>
        {open ? <ChevronUp className="size-4" /> : <ChevronDown className="size-4" />}
        {open ? "Show less" : `Show ${sections.length} more sections, ${hidden.toLocaleString()} words`}
      </Button>

      <div ref={fold} hidden={!open} className="mt-4 flex flex-col gap-4">
        {sections.map((s) => (
          <section key={s.heading}>
            <h4 className="font-medium">{s.heading}</h4>
            {render(s.body)}
          </section>
        ))}
      </div>
    </div>
  );
}

demo.tsxHow it is called: the lead and the sections as props. This is what the preview mounts.Copy

import { ResponseCollapse } from "./ResponseCollapse";

/** The lead was asked for; the sections are the answer cut on its own headings. */
export default function Demo() {
  return (
    <div className="rounded-lg border bg-card p-4">
      <ResponseCollapse
        lead="The build is slow because the type-check runs twice and the image pipeline never hits its cache. Fixing those two takes it from four minutes to about ninety seconds."
        sections={[
          {
            heading: "The double type-check",
            body: "Both the lint script and the build script call tsc, and neither passes --incremental, so the whole project is checked twice from cold on every run. Run it once as its own step and let the build consume the emitted declarations.",
          },
          {
            heading: "The image cache key",
            body: "The pipeline keys its cache on the file's modified time, which the checkout step resets on every run, so every asset is re-encoded every time. Key on a content hash instead and the step drops from seventy seconds to under five.",
          },
          {
            heading: "The test step on the critical path",
            body: "Tests run before the bundle is produced, but nothing in the bundle depends on them. Move them into a parallel job that gates the deploy rather than the build.",
          },
          {
            heading: "What to change first",
            body: "The type-check, because it is a one-line change and it is the biggest single saving. Do the cache key second. Leave the test step until the other two are in, since it is a workflow change rather than a config one.",
          },
        ]}
      />
    </div>
  );
}