refactor(web): full frontend architecture overhaul

Tooling:
- eslint flat config + biome update
- yarn .yarnrc + sdks for editor support
- package.json + yarn.lock dependency bumps
- tsconfig, vite, vitest, openapi-ts config refresh
- mise: add lint:web:query task (TanStack Query lint)
- .gitattributes: mark routeTree.gen.ts and api-generated/ as linguist-generated

Generated SDK:
- Move api/generated -> api-generated
- Add @tanstack/react-query.gen.ts (query/mutation hooks)
- Add zod.gen.ts (runtime schema validation)

Shared platform foundation:
- shared/platform/api: configureApiClient, query client factory, ApiError
- shared/platform/auth: current/anonymous user, reauth flow, session watcher
- shared/platform/telemetry: AppInsights/console/noop backends + error boundary
- shared/platform/{theme,toast,feature-flags,access-control}
- shared/components: EmptyState, ErrorPanel, IconButton, LoadingState, PageHeader, Popover
- config/: env, accessControl, featureFlags
- mocks/: MSW server + handlers
- setupTests.ts updated

App shell + Todos cutover:
- app/bootstrap: Providers, ApplicationError, createQueryClient
- app/error-pages: Forbidden/NotFound/StatusPage/RouteErrorBoundary/UnexpectedError
- app/layout: RootLayout, Header, VersionText
- app/routes + routeTree.gen.ts (TanStack Router)
- app/styles, app/auth/SessionExpiredDialog
- features/todos: api (queries/mutations/keys/invalidations/schema), pages/TodosPage with NewTodoForm, TodoItem, TodoList, TodosFilter
- index.tsx + index.html: new bootstrap
- Removed legacy: App.tsx, router.tsx, auth.ts, common/components/*, contexts/TodoContext, hooks/useTodoAPI, pages/TodoListPage, features/todos/todo-list/*

Author: eoaksnes

.gitattributes

@@ -11,3 +11,9 @@
 # Ignore massive diffs each time you add/update yarn plugins
 /web/.yarn/releases/** binary
 /web/.yarn/plugins/** binary
+
+# Generated files — hide from GitHub diffs/language stats and mark as not
+# hand-edited. The TanStack Router Vite plugin owns routeTree.gen.ts;
+# `@hey-api/openapi-ts` owns api-generated/.
+/web/src/app/routeTree.gen.ts linguist-generated=true
+/web/src/api-generated/** linguist-generated=true

.mise/tasks/lint.toml

@@ -15,10 +15,17 @@ depends = ["install-dependencies:web"]
 dir = "{{config_root}}/web"
 run = "yarn compile"
 
+["lint:web:query"]
+description = "Lint TanStack Query usage in the Web application"
+depends = ["install-dependencies:web"]
+dir = "{{config_root}}/web"
+run = "yarn lint:query"
+
 ["lint:web"]
 description = "Lint the Web application"
 run = [
     "mise run lint:web:typecheck",
+    "mise run lint:web:query",
 ]
 
 [lint]

biome.json

@@ -1,7 +1,14 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.4.9/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.4.14/schema.json",
   "files": {
-    "includes": ["web/**", "!web/build", "!web/src/api/generated"]
+    "includes": [
+      "web/**",
+      "!web/build",
+      "!web/.yarn",
+      "!web/.pnp.*",
+      "!web/src/api-generated",
+      "!web/src/app/routeTree.gen.ts"
+    ]
   },
   "javascript": {
     "formatter": {
@@ -19,6 +26,11 @@
       "indentWidth": 2
     }
   },
+  "css": {
+    "parser": {
+      "tailwindDirectives": true
+    }
+  },
   "linter": {
     "rules": {
       "a11y": {

web/.yarn/sdks/eslint/bin/eslint.js

@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, register} = require(`module`);
+const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absUserWrapperPath = resolve(__dirname, `./sdk.user.cjs`);
+const absRequire = createRequire(absPnpApiPath);
+
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require eslint/bin/eslint.js
+    require(absPnpApiPath).setup();
+    if (isPnpLoaderEnabled && register) {
+      register(pathToFileURL(absPnpLoaderPath));
+    }
+  }
+}
+
+const wrapWithUserWrapper = existsSync(absUserWrapperPath)
+  ? exports => absRequire(absUserWrapperPath)(exports)
+  : exports => exports;
+
+// Defer to the real eslint/bin/eslint.js your application uses
+module.exports = wrapWithUserWrapper(absRequire(`eslint/bin/eslint.js`));

web/.yarn/sdks/eslint/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "eslint",
+  "version": "10.3.0-sdk",
+  "main": "./lib/api.js",
+  "type": "commonjs",
+  "bin": {
+    "eslint": "./bin/eslint.js"
+  },
+  "exports": {
+    ".": {
+      "types": "./lib/types/index.d.ts",
+      "default": "./lib/api.js"
+    },
+    "./config": {
+      "types": "./lib/types/config-api.d.ts",
+      "default": "./lib/config-api.js"
+    },
+    "./package.json": "./package.json",
+    "./use-at-your-own-risk": {
+      "types": "./lib/types/use-at-your-own-risk.d.ts",
+      "default": "./lib/unsupported-api.js"
+    },
+    "./rules": {
+      "types": "./lib/types/rules.d.ts"
+    },
+    "./universal": {
+      "types": "./lib/types/universal.d.ts",
+      "default": "./lib/universal.js"
+    }
+  }
+}

web/.yarn/sdks/integrations.yml

@@ -0,0 +1,5 @@
+# This file is automatically generated by @yarnpkg/sdks.
+# Manual changes might be lost!
+
+integrations:
+  - vscode

web/.yarn/sdks/typescript/bin/tsc

@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, register} = require(`module`);
+const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absUserWrapperPath = resolve(__dirname, `./sdk.user.cjs`);
+const absRequire = createRequire(absPnpApiPath);
+
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require typescript/bin/tsc
+    require(absPnpApiPath).setup();
+    if (isPnpLoaderEnabled && register) {
+      register(pathToFileURL(absPnpLoaderPath));
+    }
+  }
+}
+
+const wrapWithUserWrapper = existsSync(absUserWrapperPath)
+  ? exports => absRequire(absUserWrapperPath)(exports)
+  : exports => exports;
+
+// Defer to the real typescript/bin/tsc your application uses
+module.exports = wrapWithUserWrapper(absRequire(`typescript/bin/tsc`));

web/.yarn/sdks/typescript/bin/tsserver

@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, register} = require(`module`);
+const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absUserWrapperPath = resolve(__dirname, `./sdk.user.cjs`);
+const absRequire = createRequire(absPnpApiPath);
+
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require typescript/bin/tsserver
+    require(absPnpApiPath).setup();
+    if (isPnpLoaderEnabled && register) {
+      register(pathToFileURL(absPnpLoaderPath));
+    }
+  }
+}
+
+const wrapWithUserWrapper = existsSync(absUserWrapperPath)
+  ? exports => absRequire(absUserWrapperPath)(exports)
+  : exports => exports;
+
+// Defer to the real typescript/bin/tsserver your application uses
+module.exports = wrapWithUserWrapper(absRequire(`typescript/bin/tsserver`));

web/.yarn/sdks/typescript/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "typescript",
+  "version": "6.0.3-sdk",
+  "main": "./lib/typescript.js",
+  "type": "commonjs",
+  "bin": {
+    "tsc": "./bin/tsc",
+    "tsserver": "./bin/tsserver"
+  }
+}

web/.yarnrc.yml

@@ -1,2 +1,3 @@
-nodeLinker: pnp
 enableGlobalCache: true
+
+nodeLinker: pnp