@neat.is/web 0.2.10

package/app/incidents/page.tsx

@@ -0,0 +1,145 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import Link from 'next/link'
+
+interface Incident {
+  nodeId: string
+  timestamp: string
+  type: string
+  message: string
+  stacktrace?: string
+}
+
+interface IncidentsResponse {
+  count: number
+  total: number
+  events: Incident[]
+}
+
+function formatTs(iso: string): string {
+  try {
+    const d = new Date(iso)
+    return d.toLocaleDateString() + ' ' + d.toTimeString().slice(0, 8)
+  } catch {
+    return iso
+  }
+}
+
+export default function IncidentsPage() {
+  const [data, setData] = useState<IncidentsResponse | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [openRow, setOpenRow] = useState<string | null>(null)
+
+  // ADR-057 #2 — page reads project from URL (deep-linkable) or localStorage,
+  // matching AppShell's resolution chain so the incidents view stays in sync
+  // with whichever project the operator last selected on the graph view.
+  const [project, setProject] = useState<string>('default')
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+    const fromUrl = new URLSearchParams(window.location.search).get('project')
+    let stored: string | null = null
+    try { stored = window.localStorage.getItem('neat:lastProject') } catch { /* noop */ }
+    setProject(fromUrl || stored || 'default')
+  }, [])
+
+  // ADR-057 #3 — re-fetch when project changes.
+  useEffect(() => {
+    setLoading(true)
+    fetch(`/api/incidents?limit=100&project=${encodeURIComponent(project)}`)
+      .then((r) => r.json())
+      .then((d: IncidentsResponse) => {
+        setData(d)
+        setLoading(false)
+      })
+      .catch((e: Error) => {
+        setError(e.message)
+        setLoading(false)
+      })
+  }, [project])
+
+  return (
+    <div style={{ background: 'var(--ink-0)', minHeight: '100vh' }}>
+      <header className="topbar">
+        <div className="brand" title="NEAT">N</div>
+        <div className="crumbs">
+          <Link href="/" className="incidents-nav-link">graph view</Link>
+          <span className="sep">/</span>
+          <span className="here">incidents</span>
+        </div>
+      </header>
+
+      <div className="incidents-page" style={{ marginTop: 44 }}>
+        <h1>Incidents</h1>
+        <div className="subtitle">
+          {data ? `${data.total} total events — showing ${data.events.length}` : 'loading…'}
+        </div>
+
+        {loading && (
+          <div className="incidents-empty">loading…</div>
+        )}
+
+        {error && (
+          <div className="incidents-empty" style={{ color: '#e87a7a' }}>
+            failed to load: {error}
+          </div>
+        )}
+
+        {!loading && !error && data && data.events.length === 0 && (
+          <div className="incidents-empty">no incidents recorded</div>
+        )}
+
+        {!loading && !error && data && data.events.length > 0 && (
+          <table className="incidents-table">
+            <thead>
+              <tr>
+                <th>Node</th>
+                <th>Time</th>
+                <th>Type</th>
+                <th>Message</th>
+              </tr>
+            </thead>
+            <tbody>
+              {data.events.map((evt, i) => {
+                const rowKey = `${i}-${evt.nodeId}`
+                const isOpen = openRow === rowKey
+                return (
+                  <>
+                    <tr
+                      key={rowKey}
+                      style={{ cursor: evt.stacktrace ? 'pointer' : undefined }}
+                      onClick={() => evt.stacktrace && setOpenRow(isOpen ? null : rowKey)}
+                      title={evt.stacktrace ? (isOpen ? 'Collapse stacktrace' : 'Expand stacktrace') : undefined}
+                    >
+                      <td className="td-node">
+                        <Link href={`/?node=${encodeURIComponent(evt.nodeId)}&project=${encodeURIComponent(project)}`} className="incidents-node-link">
+                          {evt.nodeId}
+                        </Link>
+                      </td>
+                      <td className="td-time">{formatTs(evt.timestamp)}</td>
+                      <td className="td-type">{evt.type}</td>
+                      <td className="td-msg">
+                        {evt.message}
+                        {evt.stacktrace && (
+                          <span className="stack-toggle">{isOpen ? ' ▲' : ' ▼'}</span>
+                        )}
+                      </td>
+                    </tr>
+                    {isOpen && evt.stacktrace && (
+                      <tr key={`${rowKey}-stack`}>
+                        <td colSpan={4} className="td-stacktrace">
+                          <pre className="stacktrace-pre">{evt.stacktrace}</pre>
+                        </td>
+                      </tr>
+                    )}
+                  </>
+                )
+              })}
+            </tbody>
+          </table>
+        )}
+      </div>
+    </div>
+  )
+}

package/app/layout.tsx

@@ -0,0 +1,27 @@
+import type { Metadata } from 'next'
+import './globals.css'
+
+export const metadata: Metadata = {
+  title: 'NEAT',
+  description: 'Live semantic graph of your software systems.',
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en">
+      <head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600&display=swap"
+          rel="stylesheet"
+        />
+      </head>
+      <body>{children}</body>
+    </html>
+  )
+}

package/app/page.tsx

@@ -0,0 +1,5 @@
+import { AppShell } from './components/AppShell'
+
+export default function Home(): JSX.Element {
+  return <AppShell />
+}

package/lib/fixtures.ts

@@ -0,0 +1,94 @@
+// Fixture data returned when NEAT_DEMO=1 and core is unreachable.
+// Represents a realistic microservices graph for standalone frontend dev.
+
+export const FIXTURE_GRAPH = {
+  nodes: [
+    { id: 'service:checkout', type: 'ServiceNode', name: 'checkout', language: 'TypeScript', version: '2.4.1' },
+    { id: 'service:payments', type: 'ServiceNode', name: 'payments', language: 'Go', version: '1.2.0' },
+    { id: 'service:auth', type: 'ServiceNode', name: 'auth', language: 'TypeScript', version: '3.0.0' },
+    { id: 'service:api-gateway', type: 'ServiceNode', name: 'api/gateway', language: 'TypeScript', version: '1.0.5' },
+    { id: 'service:notifications', type: 'ServiceNode', name: 'notifications', language: 'Python', version: '1.1.0' },
+    { id: 'database:payments-db.internal', type: 'DatabaseNode', name: 'payments-db', host: 'payments-db.internal', port: '5432', engine: 'postgresql', engineVersion: '15.2' },
+    { id: 'database:auth-db.internal', type: 'DatabaseNode', name: 'auth-db', host: 'auth-db.internal', port: '5432', engine: 'postgresql', engineVersion: '14.8' },
+    { id: 'infra:redis:cache.internal', type: 'InfraNode', name: 'cache', kind: 'cache', host: 'cache.internal', port: '6379' },
+  ],
+  edges: [
+    { id: 'CALLS:OBSERVED:service:api-gateway->service:checkout', source: 'service:api-gateway', target: 'service:checkout', type: 'CALLS', provenance: 'OBSERVED', confidence: 1.0, callCount: 42891 },
+    { id: 'CALLS:OBSERVED:service:api-gateway->service:auth', source: 'service:api-gateway', target: 'service:auth', type: 'CALLS', provenance: 'OBSERVED', confidence: 1.0, callCount: 18204 },
+    { id: 'CALLS:OBSERVED:service:checkout->service:payments', source: 'service:checkout', target: 'service:payments', type: 'CALLS', provenance: 'OBSERVED', confidence: 1.0, callCount: 9341 },
+    { id: 'CALLS:EXTRACTED:service:checkout->service:notifications', source: 'service:checkout', target: 'service:notifications', type: 'CALLS', provenance: 'EXTRACTED', confidence: 0.9 },
+    { id: 'CONNECTS_TO:OBSERVED:service:payments->database:payments-db.internal', source: 'service:payments', target: 'database:payments-db.internal', type: 'CONNECTS_TO', provenance: 'OBSERVED', confidence: 1.0 },
+    { id: 'CONNECTS_TO:EXTRACTED:service:auth->database:auth-db.internal', source: 'service:auth', target: 'database:auth-db.internal', type: 'CONNECTS_TO', provenance: 'EXTRACTED', confidence: 0.95 },
+    { id: 'CONNECTS_TO:INFERRED:service:checkout->infra:redis:cache.internal', source: 'service:checkout', target: 'infra:redis:cache.internal', type: 'CONNECTS_TO', provenance: 'INFERRED', confidence: 0.6 },
+    { id: 'CONNECTS_TO:INFERRED:service:auth->infra:redis:cache.internal', source: 'service:auth', target: 'infra:redis:cache.internal', type: 'CONNECTS_TO', provenance: 'INFERRED', confidence: 0.6 },
+  ],
+}
+
+export const FIXTURE_INCIDENTS = {
+  count: 3,
+  total: 3,
+  events: [
+    {
+      nodeId: 'service:payments',
+      timestamp: new Date(Date.now() - 1000 * 60 * 14).toISOString(),
+      type: 'ERR_VERSION_MISMATCH',
+      message: 'pg driver 7.4.0 incompatible with PostgreSQL 15 — connection failed',
+      stacktrace: 'Error: connect ECONNREFUSED\n    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1187:16)\n    at pg.Client.connect (/app/node_modules/pg/lib/client.js:54:9)',
+    },
+    {
+      nodeId: 'service:checkout',
+      timestamp: new Date(Date.now() - 1000 * 60 * 38).toISOString(),
+      type: 'ERR_TIMEOUT',
+      message: 'upstream payments service exceeded 5s timeout on /charge',
+    },
+    {
+      nodeId: 'service:auth',
+      timestamp: new Date(Date.now() - 1000 * 60 * 91).toISOString(),
+      type: 'ERR_RATE_LIMIT',
+      message: 'Redis rate-limit key expired — 429 burst on /token',
+    },
+  ],
+}
+
+export const FIXTURE_HEALTH = { ok: true, project: 'demo' }
+
+export const FIXTURE_PROJECTS = [
+  { name: 'demo', path: '/workspace/demo', status: 'active' as const },
+]
+
+export const FIXTURE_VIOLATIONS = { violations: [] }
+
+export function fixtureSearch(q: string) {
+  const lower = q.toLowerCase()
+  const results = FIXTURE_GRAPH.nodes
+    .filter((n) => n.name.toLowerCase().includes(lower) || n.id.toLowerCase().includes(lower))
+    .map((n) => ({ node: { id: n.id, type: n.type, name: n.name }, score: 0.95 }))
+  return { results }
+}
+
+export function fixtureNodeDetail(id: string) {
+  const node = FIXTURE_GRAPH.nodes.find((n) => n.id === id)
+  if (!node) return { error: 'not found' }
+  return { node }
+}
+
+export function fixtureRootCause(id: string) {
+  if (id === 'service:payments') {
+    return {
+      origin: id,
+      rootCauseNode: 'database:payments-db.internal',
+      reason: 'pg driver 7.4.0 is incompatible with PostgreSQL 15 — protocol mismatch causes connection failure',
+      fixRecommendation: 'upgrade pg to ^8.x (supports PostgreSQL 15 protocol)',
+      confidence: 0.87,
+      traversalPath: [id, 'database:payments-db.internal'],
+    }
+  }
+  return { origin: id, rootCauseNode: null, reason: '', fixRecommendation: null, confidence: 0, traversalPath: [] }
+}
+
+export function fixtureBlastRadius(id: string) {
+  const downstream = FIXTURE_GRAPH.edges
+    .filter((e) => e.source === id)
+    .map((e) => ({ nodeId: e.target, distance: 1, confidence: e.confidence, path: [id, e.target] }))
+  return { origin: id, affectedNodes: downstream, violationCount: 0 }
+}

package/lib/proxy.ts

@@ -0,0 +1,16 @@
+export const CORE_URL = process.env.NEAT_CORE_URL ?? 'http://localhost:8080'
+export const DEMO = process.env.NEAT_DEMO === '1'
+
+export async function proxyGet(url: string, fallback: () => Response): Promise<Response> {
+  try {
+    const upstream = await fetch(url, { cache: 'no-store' })
+    const body = await upstream.text()
+    return new Response(body, {
+      status: upstream.status,
+      headers: { 'content-type': upstream.headers.get('content-type') ?? 'application/json' },
+    })
+  } catch {
+    if (DEMO) return fallback()
+    return Response.json({ error: 'failed to reach neat-core', coreUrl: CORE_URL }, { status: 502 })
+  }
+}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@neat.is/web",
+  "version": "0.2.10",
+  "description": "NEAT web shell — minimal Next.js app fronting the core API",
+  "license": "BUSL-1.1",
+  "homepage": "https://neat.is",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/NEAT-Technologies/Neat.git",
+    "directory": "packages/web"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "files": [
+    "app",
+    "lib",
+    "public",
+    "next.config.js",
+    "tsconfig.json",
+    "postcss.config.js",
+    "tailwind.config.js",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint app",
+    "test": "vitest run --passWithNoTests",
+    "clean": "rm -rf .next .turbo"
+  },
+  "dependencies": {
+    "@neat.is/types": "^0.2.10",
+    "cytoscape": "^3.33.3",
+    "next": "14.2.35",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@types/cytoscape": "^3.21.9",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5",
+    "vitest": "^2.1.0"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}