@neat.is/web 0.2.10

package/app/components/Inspector.tsx

@@ -0,0 +1,329 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+import type { GraphNode, GraphEdge } from '@neat.is/types'
+import type { GraphData } from './AppShell'
+
+interface RootCauseResult {
+  origin: string
+  rootCauseNode: string | null
+  reason: string
+  fixRecommendation: string | null
+  confidence: number
+  traversalPath: string[]
+}
+
+function escapeHtml(s: string): string {
+  return s.replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c] ?? c))
+}
+
+function visualProv(provenance: string): 'STATIC' | 'OBSERVED' | 'INFERRED' {
+  if (provenance === 'OBSERVED') return 'OBSERVED'
+  if (provenance === 'INFERRED') return 'INFERRED'
+  return 'STATIC'
+}
+
+function nodeName(node: GraphNode): string {
+  return (node as unknown as { name?: string }).name ?? node.id
+}
+
+function nodeProps(node: GraphNode): [string, string][] {
+  const props: [string, string][] = []
+  const n = node as Record<string, unknown>
+  if (n.language) props.push(['language', String(n.language)])
+  if (n.version) props.push(['version', String(n.version)])
+  if (n.engine) props.push(['engine', String(n.engine)])
+  if (n.engineVersion) props.push(['engine version', String(n.engineVersion)])
+  if (n.provider) props.push(['provider', String(n.provider)])
+  if (n.region) props.push(['region', String(n.region)])
+  if (n.kind) props.push(['kind', String(n.kind)])
+  if (n.host) props.push(['host', String(n.host)])
+  if (n.port) props.push(['port', String(n.port)])
+  if (n.fileType) props.push(['file type', String(n.fileType)])
+  if (n.path) props.push(['path', String(n.path)])
+  if (n.firstObserved) props.push(['first seen', String(n.firstObserved)])
+  if (n.lastObserved) props.push(['last seen', String(n.lastObserved)])
+  return props
+}
+
+interface EdgeRow {
+  verb: string
+  target: string
+  prov: 'STATIC' | 'OBSERVED' | 'INFERRED'
+  conf?: number
+}
+
+interface InspectorProps {
+  project: string
+  selectedNodeId: string | null
+  graphData: GraphData | null
+}
+
+export function Inspector({ project, selectedNodeId, graphData }: InspectorProps) {
+  const [node, setNode] = useState<GraphNode | null>(null)
+  const [rootCause, setRootCause] = useState<RootCauseResult | null>(null)
+  const [activeTab, setActiveTab] = useState<'inspect' | 'edges'>('inspect')
+
+  // Stable synthetic metrics — re-randomised per node, not per render
+  const metrics = useMemo(() => ({
+    rps: Math.round(40 + Math.random() * 200),
+    p99: (38 + Math.random() * 64).toFixed(1),
+    err: (Math.random() * 0.7).toFixed(2),
+    rpsDelta: (Math.random() * 4).toFixed(1),
+    p99Delta: (Math.random() * 8).toFixed(1),
+    errDelta: (Math.random() * 0.3).toFixed(2),
+  }), [selectedNodeId])
+
+  // ADR-057 #3 — re-fetch when project or selection changes.
+  useEffect(() => {
+    if (!selectedNodeId) {
+      setNode(null)
+      setRootCause(null)
+      return
+    }
+    const proj = `?project=${encodeURIComponent(project)}`
+    fetch(`/api/graph/node/${encodeURIComponent(selectedNodeId)}${proj}`)
+      .then((r) => r.json())
+      .then((d: { node: GraphNode }) => setNode(d.node))
+      .catch(() => {})
+
+    fetch(`/api/graph/root-cause/${encodeURIComponent(selectedNodeId)}${proj}`)
+      .then((r) => r.json())
+      .then((d: RootCauseResult) => setRootCause(d.rootCauseNode ? d : null))
+      .catch(() => {})
+  }, [selectedNodeId, project])
+
+  if (!selectedNodeId || !node) {
+    return (
+      <aside className="inspect" id="inspect">
+        <div className="inspect-tabs" role="tablist">
+          <div className="inspect-tab on" role="tab" aria-selected={true}>Inspect</div>
+          <div className="inspect-tab" role="tab" aria-selected={false}>Edges</div>
+          <div className="inspect-tab" role="tab" aria-selected={false}>Owners</div>
+          <div className="inspect-tab" role="tab" aria-selected={false}>History</div>
+        </div>
+        <div className="insp-section" style={{ paddingTop: 32 }}>
+          <div style={{ fontFamily: 'Spectral, serif', fontStyle: 'italic', color: 'var(--paper-3)', textAlign: 'center' }}>
+            select a node to inspect
+          </div>
+        </div>
+      </aside>
+    )
+  }
+
+  // Derive edges from graphData (avoids extra fetch)
+  const outEdges: EdgeRow[] = graphData
+    ? graphData.edges
+        .filter((e: GraphEdge) => e.source === node.id)
+        .map((e: GraphEdge) => {
+          const targetNode = graphData.nodes.find((n: GraphNode) => n.id === e.target)
+          return {
+            verb: e.type.toLowerCase().replace(/_/g, ' '),
+            target: targetNode ? nodeName(targetNode) : e.target,
+            prov: visualProv(e.provenance),
+            conf: e.confidence,
+          }
+        })
+    : []
+
+  const inEdges: EdgeRow[] = graphData
+    ? graphData.edges
+        .filter((e: GraphEdge) => e.target === node.id)
+        .map((e: GraphEdge) => {
+          const srcNode = graphData.nodes.find((n: GraphNode) => n.id === e.source)
+          return {
+            verb: e.type.toLowerCase().replace(/_/g, ' '),
+            target: srcNode ? nodeName(srcNode) : e.source,
+            prov: visualProv(e.provenance),
+            conf: e.confidence,
+          }
+        })
+    : []
+
+  const allEdges = [...outEdges, ...inEdges]
+  const edgeCount = allEdges.length
+  const props = nodeProps(node)
+  const name = nodeName(node)
+  const labelParts = name.split('/')
+  const stem = labelParts.length > 1 ? labelParts[0] + '/' : ''
+  const rest = labelParts.length > 1 ? labelParts.slice(1).join('/') : name
+
+  const provCounts: Record<string, number> = { STATIC: 0, OBSERVED: 0, INFERRED: 0 }
+  allEdges.forEach((e) => { provCounts[e.prov] = (provCounts[e.prov] ?? 0) + 1 })
+  const total = allEdges.length || 1
+
+  const typeLabel = node.type.replace('Node', '').toUpperCase()
+  const showMetrics = !['ConfigNode', 'FrontierNode'].includes(node.type)
+  const p99Num = parseFloat(metrics.p99)
+  const errNum = parseFloat(metrics.err)
+
+  return (
+    <aside className="inspect" id="inspect">
+      <div className="inspect-tabs" role="tablist">
+        <div
+          className={`inspect-tab${activeTab === 'inspect' ? ' on' : ''}`}
+          role="tab"
+          aria-selected={activeTab === 'inspect'}
+          onClick={() => setActiveTab('inspect')}
+        >
+          Inspect
+        </div>
+        <div
+          className={`inspect-tab${activeTab === 'edges' ? ' on' : ''}`}
+          role="tab"
+          aria-selected={activeTab === 'edges'}
+          onClick={() => setActiveTab('edges')}
+        >
+          Edges<span className="ct">{edgeCount}</span>
+        </div>
+        <div className="inspect-tab" role="tab" aria-selected={false}>Owners</div>
+        <div className="inspect-tab" role="tab" aria-selected={false}>History</div>
+      </div>
+
+      <div id="inspect-body">
+        {activeTab === 'inspect' && (
+          <>
+            <section className="insp-section">
+              <div className="insp-eyebrow">{escapeHtml(typeLabel)}</div>
+              <div className="insp-title">
+                {stem && <span className="stem">{escapeHtml(stem)}</span>}
+                {escapeHtml(rest)}
+              </div>
+              <div className="insp-sub">{escapeHtml(node.id)}</div>
+              <div className="insp-tags">
+                {(node as { language?: string }).language && (
+                  <span className="tag">{escapeHtml((node as { language: string }).language)}</span>
+                )}
+                {(node as { engine?: string }).engine && (
+                  <span className="tag">{escapeHtml((node as { engine: string }).engine)}</span>
+                )}
+                {(node as { kind?: string }).kind && (
+                  <span className="tag">{escapeHtml((node as { kind: string }).kind)}</span>
+                )}
+                {props.length === 0 && <span className="tag">{escapeHtml(typeLabel.toLowerCase())}</span>}
+              </div>
+            </section>
+
+            {showMetrics && (
+              <section className="insp-section">
+                <div className="metrics">
+                  <div className="metric">
+                    <div className="lbl">req/s</div>
+                    <div className="val">{metrics.rps.toLocaleString()}</div>
+                    <div className="delta">+{metrics.rpsDelta}%</div>
+                  </div>
+                  <div className="metric">
+                    <div className="lbl">p99 ms</div>
+                    <div className="val">{metrics.p99}</div>
+                    <div className={`delta${p99Num > 80 ? ' bad' : ''}`}>{p99Num > 80 ? '+' : '−'}{metrics.p99Delta}%</div>
+                  </div>
+                  <div className="metric">
+                    <div className="lbl">err %</div>
+                    <div className="val">{metrics.err}</div>
+                    <div className={`delta${errNum > 0.4 ? ' bad' : ''}`}>{errNum > 0.4 ? '+' : '−'}{metrics.errDelta}</div>
+                  </div>
+                </div>
+              </section>
+            )}
+
+            {rootCause && (
+              <section className="insp-section">
+                <div className="insp-h">Root cause</div>
+                <div className="root-cause-block">
+                  <div className="rc-label">divergence detected</div>
+                  <div className="rc-node">{escapeHtml(rootCause.rootCauseNode ?? '')}</div>
+                  <div className="rc-reason">{escapeHtml(rootCause.reason)}</div>
+                  {rootCause.fixRecommendation && (
+                    <div className="rc-fix">{escapeHtml(rootCause.fixRecommendation)}</div>
+                  )}
+                </div>
+              </section>
+            )}
+
+            {props.length > 0 && (
+              <section className="insp-section">
+                <div className="insp-h">Properties <span className="ct">{props.length}</span></div>
+                <dl className="kv">
+                  {props.map(([k, v]) => (
+                    <>
+                      <dt key={`k-${k}`}>{escapeHtml(k)}</dt>
+                      <dd key={`v-${k}`}>{escapeHtml(v)}</dd>
+                    </>
+                  ))}
+                </dl>
+              </section>
+            )}
+
+            <section className="insp-section">
+              <div className="insp-h">Outgoing <span className="ct">{outEdges.length}</span></div>
+              <ul className="edge-list">
+                {outEdges.length ? outEdges.map((e, i) => (
+                  <li key={i}>
+                    <span className={`pdot ${e.prov}`} />
+                    <span className="verb">{escapeHtml(e.verb)}</span>
+                    <span className="target">{escapeHtml(e.target)}</span>
+                    <span className="conf">{typeof e.conf === 'number' ? e.conf.toFixed(2) : '—'}</span>
+                  </li>
+                )) : (
+                  <li><span className="verb">—</span><span className="target" style={{ color: 'var(--paper-3)' }}>no outgoing edges</span></li>
+                )}
+              </ul>
+            </section>
+
+            <section className="insp-section">
+              <div className="insp-h">Incoming <span className="ct">{inEdges.length}</span></div>
+              <ul className="edge-list">
+                {inEdges.length ? inEdges.map((e, i) => (
+                  <li key={i}>
+                    <span className={`pdot ${e.prov}`} />
+                    <span className="verb">{escapeHtml(e.verb)}</span>
+                    <span className="target">{escapeHtml(e.target)}</span>
+                    <span className="conf">{typeof e.conf === 'number' ? e.conf.toFixed(2) : '—'}</span>
+                  </li>
+                )) : (
+                  <li><span className="verb">—</span><span className="target" style={{ color: 'var(--paper-3)' }}>no incoming edges</span></li>
+                )}
+              </ul>
+            </section>
+
+            <section className="insp-section">
+              <div className="insp-h">Provenance <span className="ct">{edgeCount}</span></div>
+              {(['STATIC', 'OBSERVED', 'INFERRED'] as const).map((k) => {
+                const pct = (provCounts[k] / total) * 100
+                return (
+                  <div key={k} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: '11.5px', margin: '5px 0' }}>
+                    <span className={`pdot ${k}`} style={{ width: 7, height: 7, borderRadius: '50%', background: `var(--prov-${k.toLowerCase()})`, flexShrink: 0 }} />
+                    <span style={{ fontStyle: 'italic', width: 70, color: 'var(--paper-2)', fontFamily: 'Spectral, serif' }}>{k.toLowerCase()}</span>
+                    <div style={{ flex: 1, height: 4, background: 'var(--ink-3)', borderRadius: 2, overflow: 'hidden' }}>
+                      <div style={{ width: `${pct}%`, height: '100%', background: `var(--prov-${k.toLowerCase()})` }} />
+                    </div>
+                    <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: '10.5px', color: 'var(--paper-3)', width: 34, textAlign: 'right' }}>{provCounts[k]}</span>
+                  </div>
+                )
+              })}
+            </section>
+          </>
+        )}
+
+        {activeTab === 'edges' && (
+          <section className="insp-section">
+            <div className="insp-h">All edges <span className="ct">{edgeCount}</span></div>
+            <ul className="edge-list">
+              {allEdges.length ? allEdges.map((e, i) => (
+                <li key={i}>
+                  <span className={`pdot ${e.prov}`} />
+                  <span className="verb">{escapeHtml(e.verb)}</span>
+                  <span className="target">{escapeHtml(e.target)}</span>
+                  <span className="conf">{typeof e.conf === 'number' ? e.conf.toFixed(2) : '—'}</span>
+                </li>
+              )) : (
+                <li><span style={{ color: 'var(--paper-3)', fontStyle: 'italic', fontFamily: 'Spectral, serif' }}>no edges</span></li>
+              )}
+            </ul>
+          </section>
+        )}
+
+      </div>
+    </aside>
+  )
+}

package/app/components/Rail.tsx

@@ -0,0 +1,124 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import Link from 'next/link'
+
+interface RailProps {
+  project: string
+}
+
+export function Rail({ project }: RailProps) {
+  const [blastBadge, setBlastBadge] = useState(0)
+  const [incidentBadge, setIncidentBadge] = useState(0)
+
+  // ADR-057 #3 — re-fetch on project change.
+  useEffect(() => {
+    const proj = `?project=${encodeURIComponent(project)}`
+    fetch(`/api/policies/violations${proj}`)
+      .then((r) => r.json())
+      .then((d: { violations: unknown[] }) => {
+        if (Array.isArray(d.violations)) {
+          setBlastBadge(Math.min(d.violations.length, 9))
+        }
+      })
+      .catch(() => {})
+
+    fetch(`/api/incidents?limit=1&project=${encodeURIComponent(project)}`)
+      .then((r) => r.json())
+      .then((d: { total: number }) => {
+        if (typeof d.total === 'number') setIncidentBadge(Math.min(d.total, 9))
+      })
+      .catch(() => {})
+  }, [project])
+
+  return (
+    <nav className="rail">
+      <div className="rail-group">
+        <button className="rail-btn active" aria-label="Graph view">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <circle cx="6" cy="6" r="2.5" /><circle cx="18" cy="6" r="2.5" />
+            <circle cx="6" cy="18" r="2.5" /><circle cx="18" cy="18" r="2.5" />
+            <path d="M8 6h8M6 8v8M18 8v8M8 18h8" />
+          </svg>
+          <span className="rail-tip">Graph<span className="k">G</span></span>
+        </button>
+        <button className="rail-btn" aria-label="Layers view">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <path d="M4 7h16M4 12h10M4 17h16" />
+          </svg>
+          <span className="rail-tip">Layers<span className="k">L</span></span>
+        </button>
+        <button className="rail-btn" aria-label="Find node">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <circle cx="11" cy="11" r="6" /><path d="m20 20-4-4" />
+          </svg>
+          <span className="rail-tip">Find<span className="k">F</span></span>
+        </button>
+      </div>
+
+      <div className="rail-group">
+        <button className="rail-btn" aria-label="NeatScript editor">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z" />
+          </svg>
+          <span className="rail-tip">NeatScript<span className="k">N</span></span>
+        </button>
+        <button className="rail-btn" aria-label="Time travel">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" />
+          </svg>
+          <span className="rail-tip">Time travel<span className="k">T</span></span>
+        </button>
+        <button className="rail-btn" aria-label="Blast radius analysis">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <circle cx="12" cy="12" r="3" /><circle cx="12" cy="12" r="7" />
+            <path d="M12 3v2M12 19v2M3 12h2M19 12h2" />
+          </svg>
+          <span className="rail-tip">Blast radius<span className="k">B</span></span>
+          {blastBadge > 0 && <span className="badge">{blastBadge}</span>}
+        </button>
+        <button className="rail-btn" aria-label="Graph diff">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <path d="M8 4 4 8l4 4M16 12l4 4-4 4M14 4l-4 16" />
+          </svg>
+          <span className="rail-tip">Diff<span className="k">D</span></span>
+        </button>
+      </div>
+
+      <div className="rail-group">
+        <button className="rail-btn" aria-label="Comments">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <path d="M4 6c0-1 1-2 2-2h12c1 0 2 1 2 2v9c0 1-1 2-2 2h-7l-4 4v-4H6c-1 0-2-1-2-2z" />
+          </svg>
+          <span className="rail-tip">Comments<span className="k">C</span></span>
+        </button>
+        <Link href="/incidents" className="rail-btn" aria-label="Incidents log" style={{ textDecoration: 'none' }}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <path d="M12 9v4M12 17h.01" /><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+          </svg>
+          <span className="rail-tip">Incidents</span>
+          {incidentBadge > 0 && <span className="badge">{incidentBadge}</span>}
+        </Link>
+        <button className="rail-btn" aria-label="Agent control panel">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <path d="M12 3v3M12 18v3M5 12H2M22 12h-3M6 6l2 2M16 16l2 2M6 18l2-2M16 8l2-2" />
+            <circle cx="12" cy="12" r="3" />
+          </svg>
+          <span className="rail-tip">Agents<span className="k">A</span></span>
+        </button>
+      </div>
+
+      <div className="rail-spacer" />
+
+      <div className="rail-group" style={{ borderTop: '1px solid var(--rule)' }}>
+        <button className="rail-btn" aria-label="Settings">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <circle cx="12" cy="12" r="3" />
+            <path d="M19 12a7 7 0 0 1-.4 2.3l2 1.5-2 3.4-2.3-1a7 7 0 0 1-4 2.3l-.4 2.5h-4l-.4-2.5a7 7 0 0 1-4-2.3l-2.3 1-2-3.4 2-1.5A7 7 0 0 1 5 12a7 7 0 0 1 .4-2.3l-2-1.5 2-3.4 2.3 1a7 7 0 0 1 4-2.3L12 1h4l.4 2.5a7 7 0 0 1 4 2.3l2.3-1 2 3.4-2 1.5" />
+          </svg>
+          <span className="rail-tip">Settings</span>
+        </button>
+      </div>
+    </nav>
+  )
+}

package/app/components/StatusBar.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import type { GraphData } from './AppShell'
+
+interface StatusBarProps {
+  project: string
+  graphData: GraphData | null
+}
+
+function formatTime(d: Date): string {
+  return d.toTimeString().slice(0, 8) + ' ' + d.toTimeString().slice(9, 12)
+}
+
+export function StatusBar({ project, graphData }: StatusBarProps) {
+  const [now, setNow] = useState(() => formatTime(new Date()))
+  const [healthy, setHealthy] = useState<boolean | null>(null)
+
+  useEffect(() => {
+    const id = setInterval(() => setNow(formatTime(new Date())), 1000)
+    return () => clearInterval(id)
+  }, [])
+
+  // ADR-057 #3 — re-check health when project changes so the indicator
+  // reflects the active project's daemon state.
+  useEffect(() => {
+    const check = () =>
+      fetch(`/api/health?project=${encodeURIComponent(project)}`)
+        .then((r) => r.json())
+        .then((d: { ok: boolean }) => setHealthy(d.ok === true))
+        .catch(() => setHealthy(false))
+    check()
+    const id = setInterval(check, 15_000)
+    return () => clearInterval(id)
+  }, [project])
+
+  const nodeCount = graphData?.nodes.length ?? '—'
+  const edgeCount = graphData?.edges.length ?? '—'
+
+  return (
+    <footer className="status">
+      <div className={`st-item${healthy ? ' live' : ' live-dead'}`}>
+        <span className="k">neat</span>
+        <span className="v">{project}</span>
+      </div>
+      <div className="st-item">
+        <span className="k">nodes</span>
+        <span className="v" id="st-nodes">{nodeCount}</span>
+      </div>
+      <div className="st-item">
+        <span className="k">edges</span>
+        <span className="v" id="st-edges">{edgeCount}</span>
+      </div>
+      {healthy === false && (
+        <div className="st-item">
+          <span className="k" style={{ color: '#e87a7a' }}>core offline</span>
+        </div>
+      )}
+
+      <div className="st-spacer" />
+
+      <div className="scrub">
+        <span className="k">t</span>
+        <div className="bar">
+          <div className="fill" />
+          <div className="head" />
+        </div>
+        <span className="now">now ⌐ {now}</span>
+      </div>
+    </footer>
+  )
+}