Refactor webview packages and improve build setup

- Rename packages/shared to packages/webview-shared
- Use @repo namespace for internal packages
- Move api.ts out of react folder (not React-specific)
- Move tsconfig.webview.json to packages folder for sharing
- Fix tsBuildInfoFile location to prevent stale build issues
- Add concurrently for watch:all command
- Add warnOnUnassignedImports to ESLint for CSS import ordering
- Remove unnecessary visibility handler from TasksPanel
- Add title parameter to getWebviewHtml
- Add index.css placeholder to tasks package
- Rename vite config helper to avoid Vitest detection

Author: EhabY

CONTRIBUTING.md

@@ -75,9 +75,9 @@ organized as a pnpm workspace in `packages/`.
 
 ```text
 packages/
-├── shared/          # Shared types, React hooks, and Vite config
+├── webview-shared/      # Shared types, React hooks, and Vite config
 │   └── extension.d.ts   # Types exposed to extension (excludes React)
-└── tasks/           # Example webview (copy this for new webviews)
+└── tasks/               # Example webview (copy this for new webviews)
 
 src/webviews/
 ├── util.ts          # getWebviewHtml() helper
@@ -86,16 +86,15 @@ src/webviews/
 
 Key patterns:
 
-- **Type sharing**: Extension imports types from `@coder/shared` via path mapping
-  to `extension.d.ts`. Webviews import directly from `@coder/shared/react`.
+- **Type sharing**: Extension imports types from `@repo/webview-shared` via path mapping
+  to `extension.d.ts`. Webviews import directly from `@repo/webview-shared/react`.
 - **Message passing**: Use `postMessage()`/`useMessage()` hooks for communication.
 - **Lifecycle**: Dispose event listeners properly (see `TasksPanel.ts` for example).
 
 ### Development
 
 ```bash
-pnpm watch         # Rebuild extension on changes
-pnpm dev:webviews  # Rebuild webviews on changes (run in separate terminal)
+pnpm watch:all  # Rebuild extension and webviews on changes
 ```
 
 Press F5 to launch the Extension Development Host. Use "Developer: Reload Webviews"

eslint.config.mjs

@@ -21,6 +21,7 @@ export default defineConfig(
 			"**/*.d.ts",
 			"vitest.config.ts",
 			"**/vite.config*.ts",
+			"**/createWebviewConfig.ts",
 			".vscode-test/**",
 		],
 	},
@@ -100,6 +101,7 @@ export default defineConfig(
 					"newlines-between": "always",
 					alphabetize: { order: "asc", caseInsensitive: true },
 					sortTypesGroup: true,
+					warnOnUnassignedImports: true,
 				},
 			],
 			"no-duplicate-imports": "off",
@@ -187,7 +189,7 @@ export default defineConfig(
 			},
 		},
 		rules: {
-			// Only add React-specific rules, TS rules already applied via **/*.ts config above
+			// TS rules already applied above; add React-specific rules
 			...reactPlugin.configs.recommended.rules,
 			...reactPlugin.configs["jsx-runtime"].rules, // React 17+ JSX transform
 			...reactHooksPlugin.configs.recommended.rules,

package.json

@@ -21,7 +21,6 @@
 		"build": "pnpm build:webviews && tsc --noEmit && node esbuild.mjs",
 		"build:production": "NODE_ENV=production pnpm build:webviews && tsc --noEmit && node esbuild.mjs --production",
 		"build:webviews": "pnpm -r --filter \"./packages/*\" build",
-		"dev:webviews": "pnpm -r --filter \"./packages/*\" --parallel dev",
 		"fmt": "prettier --write --cache --cache-strategy content .",
 		"fmt:check": "prettier --check --cache --cache-strategy content .",
 		"lint": "eslint --cache --cache-strategy content .",
@@ -33,7 +32,9 @@
 		"test:ci": "CI=true pnpm test",
 		"test:integration": "tsc -p test --outDir out && node esbuild.mjs && vscode-test",
 		"vscode:prepublish": "pnpm build:production",
-		"watch": "node esbuild.mjs --watch"
+		"watch:all": "concurrently -n extension,webviews \"pnpm watch:extension\" \"pnpm watch:webviews\"",
+		"watch:extension": "node esbuild.mjs --watch",
+		"watch:webviews": "pnpm -r --filter \"./packages/*\" --parallel dev"
 	},
 	"contributes": {
 		"configuration": {
@@ -466,6 +467,7 @@
 		"@vscode/vsce": "^3.7.1",
 		"bufferutil": "^4.1.0",
 		"coder": "github:coder/coder#main",
+		"concurrently": "^9.2.1",
 		"dayjs": "^1.11.19",
 		"electron": "^40.0.0",
 		"esbuild": "^0.27.2",

packages/shared/src/react/index.ts

@@ -1,5 +1,5 @@
 {
-	"name": "@coder/tasks-webview",
+	"name": "@repo/tasks",
 	"version": "1.0.0",
 	"description": "Coder Tasks webview panel",
 	"private": true,
@@ -9,7 +9,7 @@
 		"dev": "vite build --watch"
 	},
 	"dependencies": {
-		"@coder/shared": "workspace:*",
+		"@repo/webview-shared": "workspace:*",
 		"@vscode-elements/react-elements": "^2.4.0",
 		"react": "^19.0.0",
 		"react-dom": "^19.0.0"

packages/tasks/index.html

@@ -1,11 +1,11 @@
-import { postMessage, useMessage } from "@coder/shared/react";
+import { postMessage, useMessage } from "@repo/webview-shared/react";
 import {
 	VscodeButton,
 	VscodeProgressRing,
 } from "@vscode-elements/react-elements";
 import { useCallback, useEffect, useState } from "react";
 
-import type { WebviewMessage } from "@coder/shared";
+import type { WebviewMessage } from "@repo/webview-shared";
 
 export default function App() {
 	const [ready, setReady] = useState(false);

packages/tasks/package.json

@@ -0,0 +1 @@
+/* Webview styles */

packages/tasks/src/App.tsx

@@ -2,6 +2,7 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 
 import App from "./App";
+import "./index.css";
 
 const root = document.getElementById("root");
 if (root) {

packages/tasks/src/index.css

@@ -1,11 +1,10 @@
 {
-	"extends": "../shared/tsconfig.webview.json",
+	"extends": "../tsconfig.webview.json",
 	"compilerOptions": {
 		"paths": {
-			"@coder/shared": ["../shared/src"],
-			"@coder/shared/*": ["../shared/src/*"]
+			"@repo/webview-shared": ["../webview-shared/src"]
 		}
 	},
 	"include": ["src"],
-	"references": [{ "path": "../shared" }]
+	"references": [{ "path": "../webview-shared" }]
 }