React

.dependency-cruiser.cjs

@@ -0,0 +1,82 @@
+/** @type {import('dependency-cruiser').IConfiguration} */
+module.exports = {
+  forbidden: [
+    // ─── Orphan detection ───
+    {
+      name: 'no-orphans',
+      comment: 'Files not reachable from any entry point are likely dead code',
+      severity: 'warn',
+      from: {
+        orphan: true,
+        pathNot: [
+          '\\.(test|spec)\\.tsx?$',  // test files
+          '__mocks__',               // mock files
+          '\\.d\\.ts$',              // type declaration files
+          'index\\.ts$',             // barrel files (may be entry points)
+        ],
+      },
+      to: {},
+    },
+
+    // ─── Path depth limits ───
+    {
+      name: 'no-deep-relative-imports',
+      comment: 'Prevent imports with more than 3 parent directory traversals (e.g., ../../../../)',
+      severity: 'error',
+      from: {},
+      to: {
+        // Match paths that have 4+ parent directory traversals
+        path: '^(\\.\\.[\\/]){4,}',
+      },
+    },
+
+    // ─── Circular dependencies (complementing madge) ───
+    {
+      name: 'no-circular',
+      comment: 'Circular dependencies are problematic for maintainability',
+      severity: 'error',
+      from: {},
+      to: {
+        circular: true,
+      },
+    },
+  ],
+  options: {
+    doNotFollow: {
+      path: ['node_modules'],
+    },
+    exclude: {
+      path: [
+        'out/',
+        'dist/',
+        'dist-dev/',
+        'legacy-backup/',
+        'labs/',
+        'dev/',
+        '\\.test\\.tsx?$',
+        '\\.spec\\.tsx?$',
+      ],
+    },
+    tsPreCompilationDeps: true,
+    tsConfig: {
+      fileName: 'tsconfig.json',
+    },
+    enhancedResolveOptions: {
+      exportsFields: ['exports'],
+      conditionNames: ['import', 'require', 'node', 'default'],
+    },
+    reporterOptions: {
+      dot: {
+        collapsePattern: 'node_modules/(@[^/]+/[^/]+|[^/]+)',
+        theme: {
+          graph: {
+            splines: 'ortho',
+          },
+        },
+      },
+      text: {
+        highlightFocused: true,
+      },
+    },
+  },
+};

.github/workflows/pr.yml

@@ -66,6 +66,38 @@ jobs:
             .npm/_logs/
           retention-days: 7
 
+  e2e-tests:
+    runs-on: ubuntu-latest
+    needs: build-and-test
+    timeout-minutes: 60
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright browsers and dependencies
+        run: npx playwright install --with-deps chromium
+
+      - name: Run E2E tests
+        run: npm run test:e2e
+
+      - name: Upload Playwright report
+        uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report-${{ github.run_number }}
+          path: playwright-report/
+          retention-days: 30
+
   # Optional: Add a job to test the packaged extension
   package-validation:
     runs-on: ubuntu-latest
@@ -113,16 +145,17 @@ jobs:
   # Summary job that depends on all other jobs
   pr-check-summary:
     runs-on: ubuntu-latest
-    needs: [build-and-test, package-validation]
+    needs: [build-and-test, package-validation, e2e-tests]
     if: always()
 
     steps:
       - name: Check results
         run: |
           echo "Build and Test: ${{ needs.build-and-test.result }}"
           echo "Package Validation: ${{ needs.package-validation.result }}"
+          echo "E2E Tests: ${{ needs.e2e-tests.result }}"
 
-          if [[ "${{ needs.build-and-test.result }}" == "success" && "${{ needs.package-validation.result }}" == "success" ]]; then
+          if [[ "${{ needs.build-and-test.result }}" == "success" && "${{ needs.package-validation.result }}" == "success" && "${{ needs.e2e-tests.result }}" == "success" ]]; then
             echo "✅ All checks passed!"
           else
             echo "❌ Some checks failed. Please review the artifacts and logs."

.gitignore

@@ -1,11 +1,14 @@
 out
 dist
+dist-dev
 node_modules
 .vscode-test/
 topoViewerData
 .vscode/*
 !.vscode/
 !.vscode/launch.json
+.jscpd/*
+.clab-icons/*
 
 package.json
 .DS_Store
@@ -14,9 +17,14 @@ package.json
 mochawesome-report/
 coverage/
 .nyc_output/
+test-results/
+playwright-report/
+playwright/.cache/
 clab-*/
 *.clab.yml*
 *.clab.yaml*
+!dev/topologies-original/**
+dev/topologies/
 CLAUDE.md
 AGENTS.md
 patch.sh

.jscpd.json

@@ -0,0 +1,24 @@
+{
+  "threshold": 3,
+  "minLines": 8,
+  "minTokens": 50,
+  "reporters": ["console", "json"],
+  "ignore": [
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "**/*.d.ts",
+    "**/out/**",
+    "**/dist/**",
+    "**/dist-dev/**",
+    "**/node_modules/**",
+    "**/legacy-backup/**",
+    "**/easter-eggs/**"
+  ],
+  "absolute": true,
+  "gitignore": true,
+  "blame": false,
+  "silent": false,
+  "output": ".jscpd",
+  "format": ["typescript", "tsx"],
+  "skipLocal": false
+}

.nvmrc

@@ -0,0 +1 @@
+24

.vscodeignore

@@ -5,9 +5,20 @@
 .eslintrc.json
 .eslintignore
 .yarnrc
+.nvmrc
 tsconfig.json
 eslint.config.mjs
+.dependency-cruiser.cjs
+.jscpd.json
+.jscpd/**
+scripts/**
 webpack.config.js
+esbuild.config.js
+postcss.config.js
+tailwind.config.js
+.mocharc.json
+.prettierignore
+.prettierrc
 Makefile
 vsc-extension-quickstart.md
 
@@ -24,8 +35,12 @@ out/**
 # Build artifacts
 **/*.map
 **/*.ts
+**/*.LICENSE.txt
 *.vsix
 
+# Resources only needed for marketplace (loaded from GitHub)
+resources/screenshot.png
+
 # Test files
 test.clab.yml
 **/*.test.js
@@ -37,11 +52,21 @@ clab-*/
 *.clab.yml*
 labs/
 
-#others
+# Development directories
+dev/**
+dist-dev/**
 .claude/**
 legacy-backup/**
+
+# Test and coverage output
+.nyc_output/**
+playwright-report/**
+test-results/**
+mochawesome-report/**
+test/**
+
+# Documentation and scripts
 AGENTS.md
 CLAUDE.md
-mochawesome-report/**
 patch.sh
 report/

CHANGELOG.md

@@ -1,4 +1,13 @@
 # Change Log
+## [0.22.0] - 2026-01-06
+- TopoViewer rewritten in React
+- TopoViewer/editor:
+  - Undo/Redo support (Ctrl+Z / Ctrl+Shift+Z)
+  - When custom icons are used in lab, they will be copied to lab folder.
+  - Per-link endpoint label offset overrides
+  - Global endpoint label offset setting
+- Fixes
+
 ## [0.21.0] - 2025-12-03
 - Events, with clab 0.72.0 the extension does not poll anymore, everything is streamed from clab
 - TopoViewer/editor:

dev/README.md

@@ -0,0 +1,103 @@
+# React TopoViewer Development Server
+
+This directory contains a standalone Vite dev server for rapid UI prototyping of the React TopoViewer without needing to run the full VS Code extension.
+
+## Quick Start
+
+```bash
+npm run dev
+```
+
+This opens `http://localhost:5173` in your browser with the React TopoViewer running in standalone mode.
+
+## Features
+
+- **Instant Updates**: Changes to React components are reflected immediately (full page reload, Fast Refresh disabled for stability)
+- **VS Code Theme Simulation**: CSS variables simulate the VS Code dark/light themes
+- **Mock VS Code API**: All `postMessage` calls are logged to browser console
+- **Sample Topology Data**: Pre-loaded spine-leaf topology for testing
+
+## Settings Panel
+
+Click the **⚙ gear button** (bottom-right) to open the settings panel:
+
+| Setting | Options | Description |
+|---------|---------|-------------|
+| **Topology** | Sample, Empty, Large (25), Large (100), Massive (1000) | Load different test topologies |
+| **Mode** | Edit, View | Switch between editor and viewer modes |
+| **Deployment State** | Deployed, Undeployed, Unknown | Simulate lab deployment status |
+| **Light Theme** | Toggle switch | Switch between dark/light themes |
+
+The panel closes when clicking outside of it.
+
+## Console Utilities
+
+The same utilities are also available in the browser console:
+
+```javascript
+__DEV__.loadTopology('sample')        // spine-leaf topology (6 nodes)
+__DEV__.loadTopology('empty')         // empty canvas
+__DEV__.loadTopology('large')         // 25-node grid
+__DEV__.loadTopology('large100')      // 100-node grid
+__DEV__.loadTopology('large1000')     // 1000-node grid
+
+__DEV__.setMode('edit')               // editor mode
+__DEV__.setMode('view')               // view-only mode
+
+__DEV__.setDeploymentState('deployed')
+__DEV__.setDeploymentState('undeployed')
+__DEV__.setDeploymentState('unknown')
+```
+
+## UI Indicators
+
+- **DEV MODE banner** (top-center): Confirms you're in development mode
+- **⚙ gear button** (bottom-right): Opens settings panel
+
+## File Structure
+
+```
+dev/
+├── vite.config.ts    # Vite configuration with path aliases
+├── tsconfig.json     # TypeScript config for the dev environment
+├── index.html        # Entry HTML with VS Code CSS variables
+├── main.tsx          # Bootstrap with mocked VS Code API
+├── mockData.ts       # Sample topology data and utilities
+└── README.md         # This file
+```
+
+## How It Works
+
+1. **Vite** serves the dev environment with hot module replacement
+2. **Path aliases** (`@webview/*`, `@shared/*`) point to the actual source files
+3. **Mock VS Code API** intercepts `postMessage` calls and logs them
+4. **CSS variables** simulate VS Code's theme system
+
+## Workflow
+
+1. Run `npm run dev`
+2. Make changes to components in `src/reactTopoViewer/webview/`
+3. Browser reloads automatically
+4. Test UI behavior with different topologies/states
+5. When ready, test in VS Code with `npm run package`
+
+## Troubleshooting
+
+### Blank screen with console errors
+Clear Vite cache and restart:
+```bash
+rm -rf node_modules/.vite
+npm run dev
+```
+
+### Styles not updating
+Hard refresh: `Ctrl+Shift+R` (or `Cmd+Shift+R` on Mac)
+
+### Mock API not receiving messages
+Check browser console - all `postMessage` calls are logged with green `[postMessage to Extension]` prefix.
+
+## Notes
+
+- Fast Refresh is disabled to avoid React hook order issues with the complex hook structure
+- The dev server runs independently of VS Code - no extension debugging needed
+- Changes to `src/reactTopoViewer/` files are picked up automatically