yaak-mountain-loop/apps/yaak-proxy/harness/FlowPanesHarness.tsx

import { useSetAtom } from "jotai";
import { useLayoutEffect, useState } from "react";
import { FlowDetail } from "../components/FlowDetail";
import { FlowList } from "../components/FlowList";
import { selectedFlowAtom } from "../lib/atoms";
import { browserTabMemory, learnedTabKey, flowShape } from "../lib/defaultTab";
import { flowWindowAtom } from "../lib/store";
import { type FlowFixture, fixtures } from "./fixtures";

/**
 * Dev only: captured flows in the detail card, over fixtures. Open
 * `/harness.html?flow=0&theme=dark`; `&list` puts the flow list beside the card (its halves
 * stacked), `&below` puts it above (side by side), and `&tab=info` opens the response half on a
 * tab, as though it were chosen by hand for flows of that shape.
 */
export function FlowPanesHarness() {
  const params = new URLSearchParams(location.search);
  const [index, setIndex] = useState(Number(params.get("flow") ?? 0));
  const fixture = fixtures[index] ?? fixtures[0];
  if (fixture == null) return null;

  return (
    <div className="h-full w-full grid grid-rows-[auto_minmax(0,1fr)] gap-2 p-2 bg-surface">
      <div className="flex gap-2 text-sm">
        {fixtures.map((f, i) => (
          <button
            key={f.flow.id}
            type="button"
            className={i === index ? "text-text" : "text-text-subtle"}
            onClick={() => setIndex(i)}
          >
            {f.label}
          </button>
        ))}
      </div>
      <FixtureCard key={fixture.flow.id} fixture={fixture} />
    </div>
  );
}

function FixtureCard({ fixture }: { fixture: FlowFixture }) {
  const params = new URLSearchParams(location.search);
  const setSelected = useSetAtom(selectedFlowAtom);
  const setWindow = useSetAtom(flowWindowAtom);
  const [ready, setReady] = useState(false);
  useLayoutEffect(() => {
    const flows = fixtures.map((f, i) => ({ ...f.flow, number: 1401 + i }));
    const tab = params.get("tab");
    if (tab != null) {
      browserTabMemory()?.setItem(learnedTabKey("response", flowShape(fixture.flow)), tab);
    }
    setWindow({ flows, hasOlder: false, total: flows.length });
    setSelected(flows.find((f) => f.id === fixture.flow.id) ?? fixture.flow);
    setReady(true);
    // oxlint-disable-next-line react-hooks/exhaustive-deps -- once per fixture
  }, [fixture]);
  if (!ready) return null;

  if (params.has("list")) {
    return (
      <div className="h-full min-h-0 grid grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]">
        <FlowList className="min-h-0" />
        <FlowDetail sideBySide />
      </div>
    );
  }
  if (params.has("below")) {
    return (
      <div className="h-full min-h-0 grid grid-rows-[minmax(0,0.45fr)_minmax(0,0.55fr)]">
        <FlowList className="min-h-0" />
        <FlowDetail sideBySide={false} />
      </div>
    );
  }
  return <FlowDetail sideBySide={false} />;
}