k8s-av 1.0.6 → 1.0.7

package/dist/cli/start.js

@@ -44,7 +44,7 @@ const exec = util.promisify(child_process_1.exec);
 const ROOT = path.resolve(__dirname, '..', '..');
 const UI_DIR = path.join(ROOT, 'ui');
 const BACKEND_URL = 'http://localhost:3001';
-const FRONTEND_URL = 'http://localhost:5173';
+const DEFAULT_FRONTEND_URL = 'http://localhost:5174';
 const log = (msg) => console.log(`  ${msg}`);
 const warn = (msg) => console.log(`  ! ${msg}`);
 function waitFor(url, timeoutMs = 30000) {
@@ -87,6 +87,10 @@ function openBrowser(url) {
             ['xdg-open', [url]];
     (0, child_process_1.spawn)(cmd, args, { shell: false, detached: true, stdio: 'ignore' }).unref();
 }
+function extractFrontendUrl(line) {
+    const match = line.match(/https?:\/\/(?:localhost|127\.0\.0\.1|\[[^\]]+\]):\d+/i);
+    return match?.[0] ?? null;
+}
 async function ensureUiDeps() {
     const nmDir = path.join(UI_DIR, 'node_modules');
     const requiredPackages = [
@@ -114,6 +118,7 @@ async function runStart(opts) {
     console.log('  Kubernetes Attack Path Visualizer');
     console.log('  ' + (opts.source === 'mock' ? 'Demo mode (mock data)' : 'Live cluster mode'));
     console.log('='.repeat(62));
+    let frontendUrl = DEFAULT_FRONTEND_URL;
     if (opts.source === 'mock') {
         console.log('\n  Info: Mock mode - skipping Docker and Neo4j preflight.');
     }
@@ -132,7 +137,7 @@ async function runStart(opts) {
         cwd: ROOT,
         stdio: ['ignore', 'pipe', 'pipe'],
         shell: false,
-        env: { ...process.env, CORS_ORIGIN: FRONTEND_URL },
+        env: { ...process.env, CORS_ORIGIN: frontendUrl },
     });
     let backendExited = false;
     backend.stdout?.on('data', (d) => {
@@ -192,28 +197,36 @@ async function runStart(opts) {
     });
     frontend.stdout?.on('data', (d) => {
         const line = d.toString().trim();
-        if (line)
-            process.stdout.write(`     [ui] ${line}\n`);
+        if (!line)
+            return;
+        const detectedUrl = extractFrontendUrl(line);
+        if (detectedUrl)
+            frontendUrl = detectedUrl;
+        process.stdout.write(`     [ui] ${line}\n`);
     });
     frontend.stderr?.on('data', (d) => {
         const line = d.toString().trim();
-        if (line)
-            process.stderr.write(`     [ui] ${line}\n`);
+        if (!line)
+            return;
+        const detectedUrl = extractFrontendUrl(line);
+        if (detectedUrl)
+            frontendUrl = detectedUrl;
+        process.stderr.write(`     [ui] ${line}\n`);
     });
     try {
-        await waitFor(FRONTEND_URL, 45000);
+        await waitFor(frontendUrl, 45000);
     }
     catch {
         warn('Vite did not respond in time - opening browser anyway.');
     }
     if (!opts.skipBrowser) {
         log('Opening browser...');
-        openBrowser(FRONTEND_URL);
+        openBrowser(frontendUrl);
     }
     console.log('\n  ' + '-'.repeat(58));
     console.log('  System ready');
     console.log(`     Backend  ->  ${BACKEND_URL}`);
-    console.log(`     UI       ->  ${FRONTEND_URL}`);
+    console.log(`     UI       ->  ${frontendUrl}`);
     console.log('  ' + '-'.repeat(58));
     console.log('\n  Press Ctrl+C to stop.\n');
     const shutdown = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "k8s-av",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Kubernetes RBAC Attack Path Visualizer — scan your cluster, detect attack paths, visualize in a local UI",
   "keywords": [
     "kubernetes",

package/ui/package-lock.json

@@ -13,6 +13,7 @@
         "jspdf": "^4.2.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "vite": "^5.2.11",
         "zustand": "^4.5.2"
       },
       "devDependencies": {
@@ -3025,15 +3026,6 @@
         "browserslist": ">= 4.21.0"
       }
     },
-    "node_modules/use-sync-external-store": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
-      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -3145,6 +3137,15 @@
           "optional": true
         }
       }
+    },
+    "node_modules/zustand/node_modules/use-sync-external-store": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
+      "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
     }
   }
 }

package/ui/package.json

@@ -27,5 +27,8 @@
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5",
     "vite": "^5.2.11"
+  },
+  "overrides": {
+    "use-sync-external-store": "1.2.2"
   }
 }

package/ui/src/store/useAppStore.ts

@@ -1,4 +1,5 @@
-import { create } from 'zustand';
+import { useSyncExternalStore } from 'react';
+import { createStore } from 'zustand/vanilla';
 import {
   api,
   GraphNode, GraphEdge,
@@ -53,14 +54,20 @@ interface AppState {
   simulate:             (nodeId: string) => Promise<void>;
 }
 
-function setLoading(set: (fn: (s: AppState) => Partial<AppState>) => void, key: string, val: boolean) {
+type StoreSet = (
+  partial: Partial<AppState> | ((state: AppState) => Partial<AppState>),
+) => void;
+
+const identity = <T,>(value: T) => value;
+
+function setLoading(set: StoreSet, key: string, val: boolean) {
   set((s) => ({ loading: { ...s.loading, [key]: val } }));
 }
-function setError(set: (fn: (s: AppState) => Partial<AppState>) => void, key: string, msg: string | null) {
+function setError(set: StoreSet, key: string, msg: string | null) {
   set((s) => ({ errors: { ...s.errors, [key]: msg } }));
 }
 
-export const useAppStore = create<AppState>((set, get) => ({
+const appStore = createStore<AppState>((set, get) => ({
   graphNodes:      [],
   graphEdges:      [],
   graphMeta:       null,
@@ -173,3 +180,15 @@ export const useAppStore = create<AppState>((set, get) => ({
     }
   },
 }));
+
+export function useAppStore(): AppState;
+export function useAppStore<T>(selector: (state: AppState) => T): T;
+export function useAppStore<T>(selector?: (state: AppState) => T): T | AppState {
+  const select = selector ?? identity<AppState>;
+
+  return useSyncExternalStore(
+    appStore.subscribe,
+    () => select(appStore.getState()),
+    () => select(appStore.getInitialState()),
+  );
+}