fix(e2e): use correct page object sub-components in createGitConflict helper (#2604)

e2e-tests/git_collaboration.spec.ts

@@ -9,7 +9,7 @@ async function createGitConflict(po: PageObject) {
   await po.setUp({ disableNativeGit: false, autoApprove: true });
   await po.sendPrompt("tc=basic");
 
-  await po.getTitleBarAppNameButton().click();
+  await po.appManagement.getTitleBarAppNameButton().click();
   await po.githubConnector.connect();
 
   const repoName = "test-git-conflict-" + Date.now();
@@ -19,7 +19,7 @@ async function createGitConflict(po: PageObject) {
     timeout: Timeout.MEDIUM,
   });
 
-  const appPath = await po.getCurrentAppPath();
+  const appPath = await po.appManagement.getCurrentAppPath();
   if (!appPath) throw new Error("App path not found");
 
   // Setup conflict
@@ -53,8 +53,8 @@ async function createGitConflict(po: PageObject) {
   });
 
   // 4. Try to merge feature into main via UI
-  await po.goToChatTab();
-  await po.getTitleBarAppNameButton().click(); // Open Publish Panel
+  await po.navigation.goToChatTab();
+  await po.appManagement.getTitleBarAppNameButton().click(); // Open Publish Panel
 
   // Open branches accordion
   const branchesCard = po.page.getByTestId("branches-header");

rules/e2e-testing.md

@@ -24,6 +24,24 @@ To get additional debug logs when a test is failing, use:
 DEBUG=pw:browser PLAYWRIGHT_HTML_OPEN=never npm run e2e
 ```
 
+## PageObject sub-component pattern
+
+The `PageObject` (aliased as `po` in tests) delegates most methods to sub-component page objects. Don't call methods directly on `po` unless they are explicitly defined on `PageObject` itself:
+
+```ts
+// Wrong: methods don't exist on po directly
+await po.getTitleBarAppNameButton().click();
+await po.getCurrentAppPath();
+await po.goToChatTab();
+
+// Correct: use the appropriate sub-component
+await po.appManagement.getTitleBarAppNameButton().click();
+await po.appManagement.getCurrentAppPath();
+await po.navigation.goToChatTab();
+```
+
+Key sub-components: `po.appManagement`, `po.navigation`, `po.chatActions`, `po.previewPanel`, `po.codeEditor`, `po.githubConnector`, `po.toastNotifications`, `po.settings`, `po.securityReview`, `po.modelPicker`.
+
 ## Base UI Radio component selection in Playwright
 
 Base UI Radio components render a hidden native `<input type="radio">` with `aria-hidden="true"`. Both `getByRole('radio', { name: '...' })` and `getByLabel('...')` find this hidden input but can't click it (element is outside viewport). Use `getByText` to click the visible label text instead.