chore: standardize config and fix component test mocks

- Replace .eslintrc.json with .eslintrc.js (standard @headlamp-k8s/eslint-config)
- Create .prettierrc.js (standard Headlamp prettier config)
- Add .headlamp-plugin/, .env, .env.local, .eslintcache to .gitignore
- Remove .claude/settings.json and .claude/settings.local.json from .gitignore
- Create .claude/settings.local.json with enabled MCP servers
- Remove "Subagent guidance" section and hardcoded test count from CLAUDE.md
- Fix 8 component test files: replace require('./__mocks__/commonComponents.ts')
  with await import('./__mocks__/commonComponents') in vi.mock factories —
  require() cannot process TypeScript in hoisted mock context

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.claude/settings.local.json

@@ -0,0 +1,8 @@
+{
+  "enabledMcpjsonServers": [
+    "github",
+    "kubernetes",
+    "flux",
+    "playwright"
+  ]
+}

.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@headlamp-k8s/eslint-config'],
+};

.eslintrc.json

@@ -1,34 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es2021": true
-  },
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaFeatures": { "jsx": true },
-    "sourceType": "module"
-  },
-  "plugins": ["react", "react-hooks", "@typescript-eslint"],
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react/recommended",
-    "plugin:react-hooks/recommended"
-  ],
-  "settings": {
-    "react": { "version": "detect" }
-  },
-  "rules": {
-    "react/react-in-jsx-scope": "off",
-    "@typescript-eslint/no-explicit-any": "error",
-    "@typescript-eslint/no-unused-vars": "warn"
-  },
-  "overrides": [
-    {
-      "files": ["**/*.test.ts", "**/*.test.tsx"],
-      "rules": {
-        "@typescript-eslint/no-require-imports": "off"
-      }
-    }
-  ]
-}

.gitignore

@@ -1,5 +1,7 @@
 node_modules/
 dist/
+.headlamp-plugin/
 *.tar.gz
-.claude/settings.json
-.claude/settings.local.json
+.env
+.env.local
+.eslintcache

.prettierrc.js

@@ -0,0 +1 @@
+module.exports = require('@headlamp-k8s/eslint-config/prettier-config');

CLAUDE.md

@@ -63,36 +63,12 @@ src/
 - Context provider (`TnsCsiDataProvider`) wraps each route component in `index.tsx`
 - Tests: vitest + @testing-library/react, mock with `vi.mock('@kinvolk/headlamp-plugin/lib', ...)`
 
-## Subagent guidance
-
-When launching subagents for tasks in this repo:
-
-- **Research tasks** (reading files, searching code, exploring GitHub): use `subagent_type: Explore`
-  with tools: Read, Glob, Grep, Bash, WebFetch, GitHub MCP
-- **Implementation tasks** (writing/editing files): use `subagent_type: general-purpose`
-- **Debugging**: use `subagent_type: debugger`
-- **Avoid** launching background agents for open-ended research — do research in the main session
-  using Glob, Grep, Read, and GitHub MCP directly, then delegate scoped write tasks to agents
-- The main session has broader tool approvals than subagent sandboxes; use it for exploration
-
-### Local agents (`.claude/agents/`)
-
-Three meta-orchestration agents are installed for this project:
-
-| Agent | Model | Use when |
-|---|---|---|
-| `agent-organizer` | sonnet | Decomposing a large task into subtasks and selecting the right agent for each |
-| `multi-agent-coordinator` | opus | Running multiple concurrent agents that need to share state and synchronize |
-| `agent-installer` | haiku | Browsing or installing additional agents from awesome-claude-code-subagents |
-
-Use `agent-organizer` first when a task is large enough to require multiple agents. It will plan the team composition and hand off to `multi-agent-coordinator` for execution.
-
 ## Testing
 
 All tests must pass before committing:
 
 ```bash
-npm test        # 159 tests across 12 test files
+npm test
 npm run tsc     # must exit 0
 ```
 

package-lock.json

@@ -1,12 +1,12 @@
 {
-  "name": "headlamp-tns-csi-plugin",
-  "version": "0.1.0",
+  "name": "tns-csi",
+  "version": "0.2.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "headlamp-tns-csi-plugin",
-      "version": "0.1.0",
+      "name": "tns-csi",
+      "version": "0.2.4",
       "license": "Apache-2.0",
       "devDependencies": {
         "@kinvolk/headlamp-plugin": "^0.13.0"

src/components/BenchmarkPage.test.tsx

@@ -13,8 +13,8 @@ vi.mock('@kinvolk/headlamp-plugin/lib', () => ({
   },
 }));
 
-vi.mock('@kinvolk/headlamp-plugin/lib/CommonComponents', () =>
-  require('./__mocks__/commonComponents.ts')
+vi.mock('@kinvolk/headlamp-plugin/lib/CommonComponents', async () =>
+  await import('./__mocks__/commonComponents')
 );
 
 vi.mock('../api/TnsCsiDataContext');

src/components/DriverStatusCard.test.tsx

@@ -1,8 +1,8 @@
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
-vi.mock('@kinvolk/headlamp-plugin/lib/CommonComponents', () =>
-  require('./__mocks__/commonComponents.ts')
+vi.mock('@kinvolk/headlamp-plugin/lib/CommonComponents', async () =>
+  await import('./__mocks__/commonComponents')
 );
 
 import DriverStatusCard from './DriverStatusCard';

src/components/MetricsPage.test.tsx

@@ -1,8 +1,8 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { describe, expect, it, vi, beforeEach } from 'vitest';
 
-vi.mock('@kinvolk/headlamp-plugin/lib/CommonComponents', () =>
-  require('./__mocks__/commonComponents.ts')
+vi.mock('@kinvolk/headlamp-plugin/lib/CommonComponents', async () =>
+  await import('./__mocks__/commonComponents')
 );
 
 vi.mock('../api/TnsCsiDataContext');

src/components/OverviewPage.test.tsx

@@ -1,8 +1,8 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { describe, expect, it, vi, beforeEach } from 'vitest';
 
-vi.mock('@kinvolk/headlamp-plugin/lib/CommonComponents', () =>
-  require('./__mocks__/commonComponents.ts')
+vi.mock('@kinvolk/headlamp-plugin/lib/CommonComponents', async () =>
+  await import('./__mocks__/commonComponents')
 );
 
 vi.mock('../api/TnsCsiDataContext');

src/components/PVCDetailSection.test.tsx

@@ -1,8 +1,8 @@
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
-vi.mock('@kinvolk/headlamp-plugin/lib/CommonComponents', () =>
-  require('./__mocks__/commonComponents.ts')
+vi.mock('@kinvolk/headlamp-plugin/lib/CommonComponents', async () =>
+  await import('./__mocks__/commonComponents')
 );
 
 vi.mock('../api/TnsCsiDataContext');

src/components/SnapshotsPage.test.tsx

@@ -1,8 +1,8 @@
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
-vi.mock('@kinvolk/headlamp-plugin/lib/CommonComponents', () =>
-  require('./__mocks__/commonComponents.ts')
+vi.mock('@kinvolk/headlamp-plugin/lib/CommonComponents', async () =>
+  await import('./__mocks__/commonComponents')
 );
 
 vi.mock('../api/TnsCsiDataContext');

src/components/StorageClassesPage.test.tsx

@@ -1,8 +1,8 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi, beforeEach } from 'vitest';
 
-vi.mock('@kinvolk/headlamp-plugin/lib/CommonComponents', () =>
-  require('./__mocks__/commonComponents.ts')
+vi.mock('@kinvolk/headlamp-plugin/lib/CommonComponents', async () =>
+  await import('./__mocks__/commonComponents')
 );
 
 let mockHash = '';

src/components/VolumesPage.test.tsx

@@ -1,8 +1,8 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi, beforeEach } from 'vitest';
 
-vi.mock('@kinvolk/headlamp-plugin/lib/CommonComponents', () =>
-  require('./__mocks__/commonComponents.ts')
+vi.mock('@kinvolk/headlamp-plugin/lib/CommonComponents', async () =>
+  await import('./__mocks__/commonComponents')
 );
 
 let mockHash = '';