Move local dev server to port 4200

.claude/skills/validate/SKILL.md

@@ -24,6 +24,6 @@ Run project validation and testing commands.
 
 ## Local Development Ports
 
-- **Frontend**: `localhost:3000` (default for `pnpm start`)
+- **Frontend**: `localhost:4200` (default for `pnpm start`)
 - **Backend API**: `localhost:8000`
 - **API Docs**: `localhost:8000/docs`

.cursor/skills/playwright-testing/SKILL.md

@@ -11,7 +11,7 @@ Guidance for writing and debugging Playwright E2E tests for the Pipeline Studio
 
 ### Environment
 
-- **Frontend**: `http://localhost:3000` (Vite dev server)
+- **Frontend**: `http://localhost:4200` (Vite dev server)
 - **Backend API**: `http://localhost:8000`
 - **Test Directory**: `tests/e2e/`
 - **Helpers**: `tests/e2e/helpers.ts`
@@ -31,10 +31,10 @@ Pipeline Studio is a React Flow-based ML pipeline editor with:
 
 ```bash
 # Open app with Playwright codegen for locator discovery
-pnpm exec playwright codegen http://localhost:3000
+pnpm exec playwright codegen http://localhost:4200
 
 # Record actions and generate test code
-pnpm exec playwright codegen http://localhost:3000 --output tests/e2e/recorded.spec.ts
+pnpm exec playwright codegen http://localhost:4200 --output tests/e2e/recorded.spec.ts
 ```
 
 ### Running Tests
@@ -53,7 +53,7 @@ pnpm exec playwright test --trace on          # Trace viewer on failure
 
 ```bash
 # Open Playwright Inspector to explore locators
-pnpm exec playwright open http://localhost:3000
+pnpm exec playwright open http://localhost:4200
 
 # In codegen: Click "Pick locator" → Click element → Copy locator
 ```
@@ -72,7 +72,7 @@ pnpm add -g @playwright/cli@latest
 
 ```bash
 # 1. Open browser and navigate (headed mode to see what's happening)
-playwright-cli open http://localhost:3000 --headed
+playwright-cli open http://localhost:4200 --headed
 
 # 2. Take snapshot to get element refs
 playwright-cli snapshot
@@ -100,7 +100,7 @@ Use sessions to keep browser state between commands:
 
 ```bash
 # Use named session for this project
-playwright-cli -s=tangle open http://localhost:3000 --headed
+playwright-cli -s=tangle open http://localhost:4200 --headed
 
 # All subsequent commands use same session
 playwright-cli -s=tangle snapshot
@@ -141,7 +141,7 @@ When a test fails, reproduce the failure interactively:
 
 ```bash
 # Start session
-playwright-cli -s=debug open http://localhost:3000 --headed
+playwright-cli -s=debug open http://localhost:4200 --headed
 
 # Follow the test steps manually
 playwright-cli -s=debug snapshot

.cursor/skills/playwright-testing/probing.md

@@ -144,7 +144,7 @@ After each command, `playwright-cli` outputs a snapshot with element refs:
 
 ```
 ### Page
-- Page URL: http://localhost:3000/
+- Page URL: http://localhost:4200/
 - Page Title: Pipeline Studio
 
 ### Snapshot
@@ -165,7 +165,7 @@ playwright-cli click e23
 
 ```bash
 # 1. Start debugging session
-playwright-cli -s=debug open http://localhost:3000 --headed
+playwright-cli -s=debug open http://localhost:4200 --headed
 
 # 2. Get initial state
 playwright-cli -s=debug snapshot

.cursorrules

@@ -469,7 +469,7 @@ Use these npm scripts for validation and testing:
 
 ### Local Development Ports
 
-- **Frontend**: `localhost:3000` (default for `npm start`)
+- **Frontend**: `localhost:4200` (default for `npm start`)
 - **Backend API**: `localhost:8000`
 - **API Docs**: `localhost:8000/docs`
 

package.json

@@ -28,7 +28,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "start": "vite --port 3000",
+    "start": "vite --port 4200",
     "build": "vite build && tsc",
     "build:ghpages": "VITE_BASE_URL=/tangle-ui/ VITE_GITHUB_PAGES=true vite build --config vite.config.ghpages.js && tsc",
     "build:hf": "VITE_REQUIRE_AUTHORIZATION=true VITE_HUGGING_FACE_AUTHORIZATION=true VITE_BASE_URL=/ VITE_GITHUB_PAGES=true vite build && tsc",

playwright.config.ci.ts

@@ -4,8 +4,8 @@ import { defineConfig, devices } from "@playwright/test";
  * CI Config
  * Use with: npm run test:e2e:ci
  *
- * This config uses CI settings (1 worker, no server reuse) but runs on port 3001
- * so it doesn't conflict with your dev server on port 3000
+ * This config uses CI settings (1 worker, no server reuse) but runs on port 4201
+ * so it doesn't conflict with your dev server on port 4200
  */
 export default defineConfig({
   testDir: "./tests/e2e",
@@ -20,7 +20,7 @@ export default defineConfig({
     timeout: 10_000,
   },
   use: {
-    baseURL: "http://localhost:3001",
+    baseURL: "http://localhost:4201",
     trace: "retain-on-failure",
     video: "retain-on-failure",
     screenshot: "only-on-failure",
@@ -42,9 +42,9 @@ export default defineConfig({
   ],
 
   webServer: {
-    command: "vite --port 3001",
+    command: "vite --port 4201",
     env: { VITE_REMOTE_PIPELINES: "false" },
-    url: "http://localhost:3001",
+    url: "http://localhost:4201",
     reuseExistingServer: false, // Force fresh server like CI
     timeout: 120 * 1000,
   },

playwright.config.ts

@@ -23,7 +23,7 @@ export default defineConfig({
   },
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: "http://localhost:3000",
+    baseURL: "http://localhost:4200",
 
     /* Collect trace on failure. See https://playwright.dev/docs/trace-viewer */
     trace: "retain-on-failure",
@@ -56,7 +56,7 @@ export default defineConfig({
   webServer: {
     command: "npm start",
     env: { VITE_REMOTE_PIPELINES: "false" },
-    url: "http://localhost:3000",
+    url: "http://localhost:4200",
     reuseExistingServer: !process.env.CI,
     timeout: 120 * 1000,
   },

src/components/PipelineRun/components/RerunPipelineButton.test.tsx

@@ -123,7 +123,7 @@ async function blockedReason(user: ReturnType<typeof userEvent.setup>) {
   return screen.findByRole("tooltip");
 }
 
-const testOrigin = import.meta.env.VITE_BASE_URL || "http://localhost:3000";
+const testOrigin = import.meta.env.VITE_BASE_URL || "http://localhost:4200";
 
 Object.defineProperty(window, "location", {
   value: {

vscode-extension/src/config.ts

@@ -8,7 +8,7 @@ const SECTION = "tangent";
 const PROXY_KEY_SECRET = "tangent.piProxyApiKey";
 const TANGLE_API_TOKEN_SECRET = "tangent.tangleApiToken";
 const DEFAULT_TANGLE_API_URL = "http://localhost:8000";
-const DEFAULT_TANGLE_UI_URL = "http://localhost:3000";
+const DEFAULT_TANGLE_UI_URL = "http://localhost:4200";
 const HOST_ID_KEY = "tangent.hostId";
 const ACTIVE_SESSION_KEY = "tangent.activeSessionId";
 const CURRENT_PROJECT_KEY = "tangle.currentProject";

vscode-extension/src/updateManifest.test.ts

@@ -48,7 +48,7 @@ test("resolveVsixUrl strips a cross-origin absolute url to the deployment origin
 
 test("isTrustedUpdateUrl allows https and loopback but refuses plain http", () => {
   assert.equal(isTrustedUpdateUrl("https://app.example.com/x.vsix"), true);
-  assert.equal(isTrustedUpdateUrl("http://localhost:3000/x.vsix"), true);
+  assert.equal(isTrustedUpdateUrl("http://localhost:4200/x.vsix"), true);
   assert.equal(isTrustedUpdateUrl("http://127.0.0.1:3000/x.vsix"), true);
   assert.equal(isTrustedUpdateUrl("http://app.example.com/x.vsix"), false);
 });