@@ -106,7 +106,7 @@ Notes:
 | W1 | Dead code and shared helpers | done |
 | W2 | CSS ownership: no class defined twice | open, needs the owner's go-ahead |
 | W3 | Break feature cycles; `features/content` and `index.ts` front doors | done |
-| W4 | Per-feature `api.ts` and hooks | open (not started) |
+| W4 | Per-feature `api.ts` and hooks | in progress: front doors done |
 | W5 | Giant components into sub-folders (composer, trail, sidebar, panels, settings, pulls, usage) | done |
 | W6 | Naming pass and `web/README.md` | `web/README.md` exists (W7a); the naming pass is open |
 | W7a | Product and generic tiers for shared web code (`product/`) | done |
@@ -220,6 +220,13 @@ The backend (B) and web (W) tracks can run in parallel.
   transport and its tests use and `source_control::git` only `is_git_repo`; the rest is
   `pub(crate)`, with no call site changed.
 
+- W4 (per-feature API doors): started. Every feature now has `api.ts`: it re-exports the
+  client pieces that feature uses, and 119 files import it instead of `api/`. Value imports
+  from `api/client`, `shell`, `pulls`, `sse`, `token` and `origin` in feature code went from
+  158 to 0; type-only imports of `api/types` stay, since they carry no call. Named
+  operations and hooks are next: the maintenance page, `BrowserPanel`, the terminal drawer
+  and the settings pages still call `request(...)` with endpoint paths through that door.
+
 - W7a (product and generic tiers): done for the shared folders; front-door helpers are open (see
   the audit below). `state/` became `product/state/`, and `lib/timeline` became `product/timeline`.
   The shared files that carry product vocabulary and have two or more feature users moved to
@@ -301,7 +308,7 @@ have no baseline.
 | Unit | Work | Size and notes |
 | --- | --- | --- |
 | W2 | CSS ownership: `styles/thread.css` (about 4,500 lines, mostly panels and onboarding rules), `pages.css`, `shell.css`, `base.css` move next to the components they style; shared pieces (`btn`, `dialog`, `pill`, `empty` and the like, defined in up to 10 files) are defined once in `ui/` | **Needs the owner's go-ahead.** The tests cannot see a changed cascade. Compare screenshots before and after in Light, Dark and Dim for every moved rule, and keep the CSS load order identical (compare the first-import order from `main.tsx`, as the W7a review did). |
-| W4 | Per-feature `api.ts` and hooks: components stop calling the API client directly (about 150 direct imports, for example Maintenance, BrowserPanel, the terminal drawer, the settings pages) | Web. Not started. |
+| W4 | Per-feature `api.ts` and hooks: named operations replace the raw `request(...)` calls the feature front doors still re-export | Web. Front doors are in (119 files). Next: Maintenance, `BrowserPanel`, the terminal drawer and the settings pages. |
 | W6 | Naming pass: Page is a route, Panel is a side-panel tab, Dialog is a modal, no "Pane" (`SurfacePane`, `SideChatPane`, `PullsPage` against `PullPage`); keep `web/README.md` in step | Do after W2 so files are renamed once. |
 | Front-door TODO rows | Hoist the helper exports in the audit table (one other feature uses each) to `product/` or `lib/` when a second feature needs them; hoist `copyText` to `lib/` | Opportunistic. |
 | Closeout | Turn any remaining baselined rule into a hard error, run a packaged-app build and walk-through (`cd desktop && npm run build -- --bundles app`), run the worktree cleanup report | The packaged-app check has not been run since the logo, tools, picker and tab strip merged into main. |
 
@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test, type Route } from "@playwright/test";
 import { execFileSync } from "node:child_process";
 import { writeFileSync } from "node:fs";
 import { join } from "node:path";
@@ -55,16 +55,28 @@ test("logical project settings resolve Mixed and reset explicit overrides throug
     await prefix.fill("one-only"); await prefix.press("Tab");
     await expect.poll(async () => (await pref(one.id, "branch_name_prefix"))?.value).toBe("one-only");
     expect((await pref(two.id, "branch_name_prefix"))?.value).toBe("shared");
-    const branchPreferences = page.waitForResponse(async (response) => {
-      if (response.request().method() !== "POST" || new URL(response.url()).pathname !== "/api/settings/preferences/query" || !response.ok()) return false;
-      const query = response.request().postDataJSON() as ScopedPreferencesQuery;
-      if (query.scope.selection !== undefined || !query.keys?.includes("branch_name_prefix")) return false;
-      const result = await response.json() as ScopedPreferencesResult;
-      const branch = result.rows.find((entry) => entry.key === "branch_name_prefix");
-      return result.catalog.selection.kind === "all_projects"
-        && [one.id, two.id].every((id) => branch?.overrides.some((entry) => entry.project_id === id));
-    }, { timeout: 10_000 });
-    await Promise.all([branchPreferences, page.goto(`${service.page}#/settings/worktrees`)]);
+    // Read the body in the route, not in a waitForResponse predicate: the navigation that
+    // triggers the query can evict the response body before the predicate can parse it.
+    const preferenceQuery = "**/api/settings/preferences/query";
+    let branchResult: ScopedPreferencesResult | undefined;
+    const captureBranchPreferences = async (route: Route) => {
+      const request = route.request();
+      const query = request.postDataJSON() as ScopedPreferencesQuery;
+      if (request.method() !== "POST" || query.scope.selection !== undefined || !query.keys?.includes("branch_name_prefix")) {
+        await route.continue();
+        return;
+      }
+      const response = await route.fetch();
+      const body = await response.text();
+      if (response.ok()) branchResult = JSON.parse(body) as ScopedPreferencesResult;
+      await route.fulfill({ response, body });
+    };
+    await page.route(preferenceQuery, captureBranchPreferences);
+    await page.goto(`${service.page}#/settings/worktrees`);
+    await expect.poll(() => branchResult?.catalog.selection.kind, { timeout: 10_000 }).toBe("all_projects");
+    await page.unroute(preferenceQuery, captureBranchPreferences);
+    const branch = branchResult!.rows.find((entry) => entry.key === "branch_name_prefix");
+    expect([one.id, two.id].every((id) => branch?.overrides.some((entry) => entry.project_id === id))).toBe(true);
     const row = page.locator("#worktrees-branch-prefix");
     await row.getByRole("button", { name: "Default", exact: true }).click();
     await expect(row.getByText("Overridden by", { exact: true })).toBeVisible();
 
@@ -0,0 +1,7 @@
+// The one door this feature uses to reach the API client. Named operations and
+// hooks move here as they are extracted; until then it re-exports what the feature
+// already calls, so no file in the feature imports `api/` directly.
+export { api } from "../../api/client";
+export { serviceUrl } from "../../api/origin";
+export { pullsApi } from "../../api/pulls";
+export { readToken } from "../../api/token";
@@ -1,5 +1,5 @@
 import { createContext, useContext, useEffect, useRef, useState, type MouseEvent, type ReactNode } from "react";
-import { api } from "../../../api/client";
+import { api } from "../api";
 import { navigate, parseRoute } from "../../../product/state/route";
 import { useUi } from "../../../product/state/ui";
 import { useWorkspace } from "../../../product/state/workspace";
 
@@ -16,7 +16,7 @@ import { createPortal } from "react-dom";
 import type { PullRequest } from "../../../api/types";
 import { compactAge } from "../../../lib/format";
 import { pullRepositoryLabel, samePullRequest } from "./pullLink";
-import { pullsApi } from "../../../api/pulls";
+import { pullsApi } from "../api";
 
 const CARD_WIDTH = 320;
 const CARD_HEIGHT = 150;
 
@@ -1,6 +1,6 @@
 import { mediaKind, rawUrl } from "../../../product/media/media";
-import { serviceUrl } from "../../../api/origin";
-import { readToken } from "../../../api/token";
+import { serviceUrl } from "../api";
+import { readToken } from "../api";
 
 /** A media element of a message, and everything the expanded view acts on. */
 export interface MediaItem {
 
@@ -3,7 +3,7 @@ import { useDraftModelDefaults } from "../useDraftModelDefaults";
 import { useDraftCheckout } from "../useDraftCheckout";
 import { ArrowUp, Bot, Folder, GitBranch, Paperclip, X } from "lucide-react";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { api } from "../../../api/client";
+import { api } from "../api";
 import { useCommand } from "../../../product/shell/shortcuts";
 import type { PermissionMode, Project } from "../../../api/types";
 import { slugify } from "../../../lib/format";
 
@@ -1,5 +1,5 @@
 import { useState, type FormEvent } from "react";
-import { api } from "../../api/client";
+import { api } from "./api";
 import { toFailure } from "../../lib/useAsync";
 import { Button, Field } from "../../ui/controls";
 
 
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { api } from "../../api/client";
+import { api } from "./api";
 import { toFailure } from "../../lib/useAsync";
 import { navigate, routeHref, type Route } from "../../product/state/route";
 import { useWorkspace } from "../../product/state/workspace";
 
@@ -1,6 +1,6 @@
 import { Check, Copy, RefreshCw } from "lucide-react";
 import { useEffect, useState } from "react";
-import { api, request } from "../../api/client";
+import { api, request } from "./api";
 import { toFailure, useAsync } from "../../lib/useAsync";
 import type { ScopedPreferencesResult } from "../../generated/ScopedPreferencesResult";
 import type { EngineStatus, PermissionMode, Project } from "../../api/types";