feat: comprehensive BDD test suite with scoped UI interactions

- Add 113 BDD scenarios (5 backend, 108 frontend) covering channels,
  threads, tasks, worktrees, chat, git panel, settings, and WebSocket
  events
- Split tests into TestBDDBackendFeatures and TestBDDFrontendFeatures
  with per-scenario Chrome tabs and 120s timeouts
- Scope click steps to UI regions via data-testid (sidebar, tasks panel,
  global tasks panel, context menu, branch picker) using XPath +
  chromedp.WaitVisible for reliable, unambiguous element targeting
- Add data-testid to all React panel components, sidebar, context menu,
  and branch picker
- Use test-runner container image in CI with auto-build on Dockerfile change
- Fix Git panel branches/commits not loading due to null worktrees
- Fix Chromium in-process execution for Docker component test infra

Author: radutopala

.github/workflows/ci.yaml

@@ -9,6 +9,7 @@ on:
 
 permissions:
   contents: read
+  packages: write
 
 jobs:
   test:
@@ -73,15 +74,50 @@ jobs:
       - name: Run Windows terminal tests
         run: go test -race -count=1 -v ./internal/terminal/
 
-  perf:
+  ensure-test-runner:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-go@v5
+      - name: Log in to GitHub Container Registry
+        uses: docker/login-action@v3
         with:
-          go-version: "1.26"
-      - name: Run component performance tests
-        run: make test-component
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Pull or build test-runner image
+        run: |
+          IMAGE=ghcr.io/radutopala/loop/test-runner
+          HASH=$(sha256sum scripts/test-runner.Dockerfile | cut -c1-12)
+          TAG="df-${HASH}"
+          if docker pull "${IMAGE}:${TAG}" 2>/dev/null; then
+            echo "Image up-to-date (${TAG})"
+          else
+            echo "Dockerfile changed or image missing, building..."
+            docker build -t "${IMAGE}:${TAG}" -t "${IMAGE}:latest" \
+              -f scripts/test-runner.Dockerfile scripts/
+            docker push "${IMAGE}:${TAG}"
+            docker push "${IMAGE}:latest"
+          fi
+
+  component-bdd:
+    needs: ensure-test-runner
+    runs-on: ubuntu-latest
+    container:
+      image: ghcr.io/radutopala/loop/test-runner:latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Run BDD component tests
+        run: make test-component-bdd
+
+  component-perf:
+    needs: ensure-test-runner
+    runs-on: ubuntu-latest
+    container:
+      image: ghcr.io/radutopala/loop/test-runner:latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Run API performance tests
+        run: make test-component-perf
 
   electron-typecheck:
     runs-on: ubuntu-latest

.gitignore

@@ -48,3 +48,6 @@ memory/
 !internal/memory/
 tickets/
 .worktrees/
+
+# Component test artifacts
+test/component/screenshots/

Makefile

@@ -1,4 +1,4 @@
-.PHONY: help build install test test-integration test-component lint coverage coverage-check docker-build run clean restart docker-shell docker-snapshot app-dev app-dev-docker app-install app-build-binary app-dist-linux app-icons
+.PHONY: help build install test test-integration test-component test-runner-build test-runner-push lint coverage coverage-check docker-build run clean restart docker-shell docker-snapshot app-dev app-dev-docker app-install app-build-binary app-dist-linux app-icons
 .DEFAULT_GOAL := help
 
 help: ## Show available targets
@@ -25,13 +25,40 @@ test: ## Run all tests
 test-integration: ## Run integration tests (requires tokens in ~/.loop/config.integration.json)
 	go test -v -tags integration -race -count=1 -timeout 10m ./internal/slack/ ./internal/discord/
 
-test-component: ## Run component performance tests (via Docker on host, natively in CI)
-	@if [ "$$CI" = "true" ] || [ -f /.dockerenv ]; then \
-		bash scripts/test-component.sh; \
+test-component-bdd: ## Run BDD component tests (via Docker on host, natively in CI)
+	@if [ "$$CI" = "true" ] || ([ -f /.dockerenv ] && command -v apt-get >/dev/null 2>&1); then \
+		TEST_RUN=$${TEST_RUN:-"TestBDDBackendFeatures|TestBDDFrontendFeatures"} bash scripts/test-component.sh; \
+	else \
+		docker rm -f loop-bdd 2>/dev/null; \
+		docker run --name loop-bdd -v "$$(pwd)":/app -w /app \
+			-v loop-gomod:/go/pkg/mod -v loop-gocache:/root/.cache/go-build \
+			-e TEST_RUN="$${TEST_RUN:-TestBDDBackendFeatures|TestBDDFrontendFeatures}" \
+			$(if $(GODOG_TAGS),-e GODOG_TAGS="$(GODOG_TAGS)") \
+			$(if $(GODOG_CONCURRENCY),-e GODOG_CONCURRENCY="$(GODOG_CONCURRENCY)") \
+			ghcr.io/radutopala/loop/test-runner:latest bash scripts/test-component.sh; \
+	fi
+
+test-component-perf: ## Run API performance tests (via Docker on host, natively in CI)
+	@if [ "$$CI" = "true" ] || ([ -f /.dockerenv ] && command -v apt-get >/dev/null 2>&1); then \
+		TEST_RUN=TestAPIPerfTestSuite bash scripts/test-component.sh; \
 	else \
-		docker run --rm -v "$$(pwd)":/app -w /app golang:1.26 bash scripts/test-component.sh; \
+		docker run --rm -v "$$(pwd)":/app -w /app \
+			-v loop-gomod:/go/pkg/mod -v loop-gocache:/root/.cache/go-build \
+			-e TEST_RUN=TestAPIPerfTestSuite \
+			ghcr.io/radutopala/loop/test-runner:latest bash scripts/test-component.sh; \
 	fi
 
+test-component-bdd-host: ## Run frontend BDD tests against host Chrome browser (no Docker)
+	CHROME_CDP_URL=$${CHROME_CDP_URL:-auto} TEST_RUN=$${TEST_RUN:-TestBDDFrontendFeatures} GODOG_CONCURRENCY=1 bash scripts/test-component.sh
+
+TEST_RUNNER_IMAGE := ghcr.io/radutopala/loop/test-runner:latest
+
+test-runner-build: ## Build the test-runner Docker image
+	docker build -t $(TEST_RUNNER_IMAGE) -f scripts/test-runner.Dockerfile scripts/
+
+test-runner-push: test-runner-build ## Build and push the test-runner Docker image
+	docker push $(TEST_RUNNER_IMAGE)
+
 lint: ## Run golangci-lint (with auto-fix)
 	docker run --rm --name loop-lint -v "$$(pwd)":/app -v /app/app/node_modules -w /app golangci/golangci-lint:v2.11.4 golangci-lint run -v --fix ./...
 

app/src/api/api.ts

@@ -1,10 +1,14 @@
 let apiUrl = "http://localhost:8222";
 
-// When running in a browser (not Electron), probe host.docker.internal first
-// so the app works from Docker container browsers, then fall back to localhost.
+// When running in a browser (not Electron), probe for the API server.
+// Try same-origin first (works when Vite proxies /api), then external URLs.
 async function probeApiUrl(): Promise<void> {
   if (typeof window === "undefined") return;
-  const candidates = ["http://host.docker.internal:8222", "http://localhost:8222"];
+  const candidates = [
+    window.location.origin, // same-origin (Vite proxy or co-located server)
+    "http://host.docker.internal:8222",
+    "http://localhost:8222",
+  ];
   for (const url of candidates) {
     try {
       const res = await fetch(`${url}/api/health`, { signal: AbortSignal.timeout(1000) });

app/src/components/layout/HeaderBranchPicker.tsx

@@ -61,6 +61,7 @@ export function HeaderBranchPicker({ channelId, branch, onBranchChanged, onCreat
     <div ref={ref} style={{ position: "relative", display: "flex", alignItems: "center" }}>
       <button
         onClick={handleOpen}
+        title="Branch"
         style={{
           display: "flex",
           alignItems: "center",
@@ -91,6 +92,7 @@ export function HeaderBranchPicker({ channelId, branch, onBranchChanged, onCreat
       </button>
       {open && (
         <div
+          data-testid="branch-picker"
           style={{
             position: "absolute",
             top: "100%",

app/src/components/panels/BrowserPanel.tsx

@@ -184,6 +184,7 @@ export function BrowserPanel({ channelId, fixedMode }: BrowserPanelProps) {
 
   return (
     <div
+      data-testid="browser-panel"
       style={{
         flex: 1,
         display: "flex",

app/src/components/panels/ContainersPanel.tsx

@@ -133,6 +133,7 @@ export const ContainersPanel = forwardRef<ContainersPanelHandle, ContainersPanel
 
   return (
     <div
+      data-testid="containers-panel"
       style={{
         flex: 1,
         backgroundColor: colors.sidebar,

app/src/components/panels/EditorPanel.tsx

@@ -541,7 +541,7 @@ export function EditorPanel({ channelId, dirPath, branch, embedded, tabsStorageK
   }, []);
 
   return (
-    <FilePanel title="Editor" dirPath={dirPath} branch={branch} noPadding embedded={embedded} {...panelProps}>
+    <FilePanel title="Editor" dirPath={dirPath} branch={branch} noPadding embedded={embedded} dataTestId="editor-panel" {...panelProps}>
       <div style={{ display: "flex", height: "100%", userSelect: treeResizing ? "none" : undefined }}>
         {/* File tree */}
         <div

app/src/components/panels/FilePanel.tsx

@@ -48,14 +48,15 @@ interface FilePanelProps {
   noPadding?: boolean;
   /** When true, suppress outer chrome (resize, drag region, header) and render only children. */
   embedded?: boolean;
+  dataTestId?: string;
   onToggleSidebar?: () => void;
   onOpenPalette?: () => void;
   onToggleMaximize?: () => void;
   onClose: () => void;
   children: ReactNode;
 }
 
-export function FilePanel({ title, dirPath, branch, maximized, sidebarOpen, noPadding, embedded, onToggleSidebar, onOpenPalette, onToggleMaximize, onClose, children }: FilePanelProps) {
+export function FilePanel({ title, dirPath, branch, maximized, sidebarOpen, noPadding, embedded, dataTestId, onToggleSidebar, onOpenPalette, onToggleMaximize, onClose, children }: FilePanelProps) {
   const { colors, fontSizes } = useTheme();
   const [width, setWidth] = useState(loadWidth);
   const [resizing, setResizing] = useState(false);
@@ -72,7 +73,7 @@ export function FilePanel({ title, dirPath, branch, maximized, sidebarOpen, noPa
 
   if (embedded) {
     return (
-      <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden", backgroundColor: colors.sidebar, zoom: fontSizes.panels / 12, borderRadius: colors.islandRadius, boxShadow: colors.islandShadow, border: colors.islandBorder }}>
+      <div data-testid={dataTestId} style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden", backgroundColor: colors.sidebar, zoom: fontSizes.panels / 12, borderRadius: colors.islandRadius, boxShadow: colors.islandShadow, border: colors.islandBorder }}>
         <div style={{ flex: 1, overflow: "auto", padding: noPadding ? 0 : "12px 16px" }}>
           {children}
         </div>
@@ -110,6 +111,7 @@ export function FilePanel({ title, dirPath, branch, maximized, sidebarOpen, noPa
 
   return (
     <div
+      data-testid={dataTestId}
       style={{
         width: maximized ? "100%" : width,
         minWidth: maximized ? 0 : MIN_WIDTH,
@@ -354,7 +356,7 @@ export function MarkdownFilePanel({ dirPath, branch, ...props }: MarkdownFilePan
   }, [content]);
 
   return (
-    <FilePanel title="README" dirPath={dirPath} branch={branch} {...props}>
+    <FilePanel title="README" dirPath={dirPath} branch={branch} dataTestId="file-panel" {...props}>
       {error && (
         <div style={{ color: colors.error, fontSize: 13 }}>{error}</div>
       )}

app/src/components/panels/GitPanel.tsx

@@ -100,7 +100,7 @@ export function GitPanel({ channelId, dirPath, branch, maximized, sidebarOpen, t
         const all = new Set(info.branches);
         if (info.current) all.add(info.current);
         // Also include worktree branches.
-        for (const wt of info.worktrees) {
+        for (const wt of info.worktrees ?? []) {
           if (wt.branch) all.add(wt.branch);
         }
         const sorted = [...all].sort();
@@ -404,7 +404,7 @@ export function GitPanel({ channelId, dirPath, branch, maximized, sidebarOpen, t
 
   if (embedded) {
     return (
-      <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden", backgroundColor: colors.sidebar, zoom: fontSizes.panels / 12 }}>
+      <div data-testid="git-panel" style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden", backgroundColor: colors.sidebar, zoom: fontSizes.panels / 12 }}>
         {gitToolbar}
         {gitMode === "commits" ? commitsContent : diffContent}
         {contextMenuOverlay}
@@ -414,6 +414,7 @@ export function GitPanel({ channelId, dirPath, branch, maximized, sidebarOpen, t
 
   return (
     <div
+      data-testid="git-panel"
       ref={panelRef}
       style={{
         width: maximized ? "100%" : width,