#!/usr/bin/env bash
# Run against an already paired, empty rich-text composer.
# Setup on each commit: T3CODE_DEV_SEED=0 vp run dev --no-seed;
# create a synthetic git repository and add it with:
# node apps/server/src/bin.ts project add <repository> --title 'List marker demo' --base-dir .t3
# In the browser: enable Rich text composer in Settings > Chat,
# select Replay (dev) > Showcase, and close the thread details panel.
set -euo pipefail
session="$1"
output="$2"
mkdir -p "$output"
ab() {
  if [[ -n "${AGENT_BROWSER_BIN:-}" ]]; then
    "$AGENT_BROWSER_BIN" --session "$session" "$@"
  else
    npx --yes agent-browser --session "$session" "$@"
  fi
}
ab set viewport 1280 800
ab set media light
ab wait '[data-composer-rich-text="true"]'
ab click '[contenteditable=true]'
ab press Control+a
ab press Backspace
ab get html '[contenteditable=true]'
for panel in 'Toggle thread details panel' 'Toggle main sidebar'; do
  selector="[aria-label=\"$panel\"]"
  if [[ "$(ab get attr "$selector" aria-pressed)" == "true" ]]; then
    ab eval "Array.from(document.querySelectorAll('$selector')).find(e => e.getBoundingClientRect().width > 0)?.click()"
  fi
done
ab record start "$output/interaction.mp4" --cursor --fps 10
ab click '[contenteditable=true]'
ab keyboard type '-get md'
ab press Shift+Enter
ab keyboard type 'second line'
ab press Control+Home
ab press ArrowRight
ab keyboard type ' '
ab click '[contenteditable=true] > p:last-child'
ab click 'h1'
ab mouse move 1200 700
ab record stop
# Compare two captures 500 ms apart before retaining the still.
ab screenshot "$output/stability-1.png"
sleep 0.5
ab screenshot "$output/stability-2.png"
ab eval 'document.querySelector("[contenteditable=true]").outerHTML' > "$output/composer.html.json"