refactor(cyvest-vis): simplify graph API around observables

README.md

@@ -676,7 +676,7 @@ uv run --group docs mkdocs build --strict
 The repo includes a PNPM workspace under `js/` with three packages:
 
 - `@cyvest/cyvest-js`: TypeScript types, schema validation, and helpers for Cyvest investigations.
-- `@cyvest/cyvest-vis`: React components for graph visualization (Cytoscape + ELK/Dagre, depends on `@cyvest/cyvest-js`).
+- `@cyvest/cyvest-vis`: React component for the force-directed observable graph (Cytoscape + `d3-force`).
 - `@cyvest/cyvest-app`: Vite demo that bundles the JS packages with sample investigations.
 
 The JS packages track the generated schema; serialized investigations should include fields like

docs/index.md

@@ -103,7 +103,7 @@ Cyvest (facade + fluent proxies)
 ## JavaScript Packages
 
 - `@cyvest/cyvest-js`: TypeScript types, schema validation, and graph helpers for Cyvest investigations.
-- `@cyvest/cyvest-vis`: React components (Cytoscape + ELK/Dagre) to visualize investigations.
+- `@cyvest/cyvest-vis`: React component (Cytoscape + `d3-force`) for observable relationship graphs.
 - `@cyvest/cyvest-app`: Vite demo bundling the JS packages with sample investigations.
 
 [See JavaScript packages guide](js-packages.md) for install and workspace commands.

docs/js-packages.md

@@ -15,12 +15,11 @@ recorded as an `INVESTIGATION_STARTED` event in the `audit_log`.
 
 ## @cyvest/cyvest-vis
 
-Interactive graph visualization for Cyvest investigations with a clean v2 API.
+Interactive visualization of Cyvest observable relationships.
 
 ### Features
 
-- **Observables Graph**: force-directed observable and relationship view centered on the root
-- **Investigation Graph**: radial force-directed view of root, tags, Findings, and Evidence
+- **Observable Graph**: force-directed observable and relationship view centered on the root
 - **Restrained visual language**: neutral surfaces, compact SVG nodes, thin edges, and level color used only as a contour
 - **Interactive focus**: pan/zoom, fit, deterministic layout replay, selection, and neighborhood focus on hover
 
@@ -33,7 +32,6 @@ import "@cyvest/cyvest-vis/styles.css";
 <CyvestGraph
   investigation={investigation}
   height={600}
-  showViewToggle
   onNodeSelect={(event) => console.log(event.nodeId, event.label)}
 />
 ```
@@ -42,11 +40,10 @@ import "@cyvest/cyvest-vis/styles.css";
 
 | Component | Description |
 |-----------|-------------|
-| `CyvestGraph` | Combined view with toggle between Observables and Investigation |
+| `CyvestGraph` | Main force-directed graph of observables and relationships |
 | `CyvestObservablesView` | Force-directed graph of observables and relationships |
-| `CyvestInvestigationView` | Force-directed graph of root, tags, Findings, and Evidence |
 
-See `js/packages/cyvest-vis/README.md` for full v2 API and theming details.
+See `js/packages/cyvest-vis/README.md` for the full v6 API and theming details.
 
 ## Workspace commands
 

js/packages/cyvest-app/README.md

@@ -1,11 +1,11 @@
 # @cyvest/cyvest-app
 
-Vite demo application for the `@cyvest/cyvest-vis` Cytoscape visualization library (ELK for observables, Dagre for investigation view).
+Vite demo application for the `@cyvest/cyvest-vis` force-directed observable graph.
 
 ## What it does
 
 - Loads bundled investigations (`src/investigations/*.json`) and validates them with `@cyvest/cyvest-js`
-- Renders both observables and investigation views with `CyvestGraph`
+- Renders the observable relationship graph with `CyvestGraph`
 - Demonstrates node selection events and basic layout customization
 
 ## Run locally

js/packages/cyvest-app/src/App.tsx

@@ -66,7 +66,7 @@ export const App: React.FC = () => {
       <header className="app-header">
         <div>
           <div className="app-eyebrow">CYVEST</div>
-          <h1>Investigation graph</h1>
+          <h1>Observable graph</h1>
         </div>
         <div className="app-header__controls">
           <button
@@ -142,16 +142,11 @@ export const App: React.FC = () => {
                 height="100%"
                 theme={darkMode ? DARK_CYVEST_THEME : undefined}
                 onNodeSelect={setSelectedNode}
-                showViewToggle
                 showToolbar
-                observablesLayout={{
+                layout={{
                   linkDistance: 116,
                   radialStep: 126,
                 }}
-                investigationLayout={{
-                  linkDistance: 132,
-                  radialStep: 142,
-                }}
               />
             </div>
 

js/packages/cyvest-vis/README.md

@@ -1,30 +1,12 @@
 # @cyvest/cyvest-vis
 
-React components for exploring Cyvest investigations with Cytoscape and a
-deterministic `d3-force` layout.
+React components for exploring the observable relationship graph of a Cyvest
+investigation with Cytoscape and `d3-force`.
 
 The default design uses a neutral canvas, compact nodes, thin edges, and a
-restrained level palette. Color is limited to security-level contours; node
-shape communicates the object category.
+restrained level palette. Color is limited to security-level contours.
 
-## Views
-
-`CyvestGraph` provides two related views:
-
-- **Observables**: observables and their directed relationships.
-- **Investigation**: root, tag hierarchy, Findings, and Evidence links.
-
-Both views place the root at the center and use radial depth, link attraction,
-repulsion, and collision forces. Hovering a node isolates its immediate
-neighborhood. Clicking a node or edge emits a typed selection event.
-
-## Install
-
-```bash
-pnpm add @cyvest/cyvest-vis
-```
-
-Import the package stylesheet once:
+## Usage
 
 ```tsx
 import { CyvestGraph } from "@cyvest/cyvest-vis";
@@ -33,41 +15,40 @@ import "@cyvest/cyvest-vis/styles.css";
 <CyvestGraph
   investigation={investigation}
   height={620}
-  initialView="observables"
   onNodeSelect={(event) => {
-    console.log(event.nodeId, event.label, event.nodeType);
+    console.log(event.nodeId, event.label);
   }}
 />
 ```
 
-## Force layout
+`CyvestGraph` and `CyvestObservablesView` render the same observable graph.
+`CyvestGraph` is the concise public entry point.
 
-The force simulation runs to completion before Cytoscape renders the graph, so
-the same investigation produces stable positions.
+Hovering a node isolates its immediate neighborhood. The initial placement is
+deterministic; a live force simulation then settles the graph and is reheated
+while nodes are dragged.
+
+## Force layout
 
 ```tsx
 <CyvestGraph
   investigation={investigation}
-  observablesLayout={{
+  layout={{
     linkDistance: 116,
     chargeStrength: -420,
     collisionPadding: 30,
     radialStep: 126,
   }}
-  investigationLayout={{
-    linkDistance: 132,
-    radialStep: 142,
-  }}
 />
 ```
 
-Available layout settings include `linkDistance`, `linkStrength`,
-`chargeStrength`, `collisionPadding`, `radialStep`, `radialStrength`,
-`centerStrength`, `iterations`, `padding`, and animation options.
+Set `physics={false}` to keep only the deterministic initial placement.
 
-## Theming
+Available settings include `linkDistance`, `linkStrength`, `chargeStrength`,
+`collisionPadding`, `radialStep`, `radialStrength`, `centerStrength`,
+`iterations`, `padding`, and animation options.
 
-Use the `theme` prop to override typed theme tokens:
+## Theming
 
 ```tsx
 <CyvestGraph
@@ -81,17 +62,16 @@ Use the `theme` prop to override typed theme tokens:
 />
 ```
 
-The CSS controls use the same tokens through `--cyvest-*` custom properties.
+Use `DARK_CYVEST_THEME` for the built-in dark theme.
 
 ## Exports
 
 - `CyvestGraph`
 - `CyvestObservablesView`
-- `CyvestInvestigationView`
 - `computeForcePositions`
 - `createForceLayout`
-- `getDefaultForceOptions`
-- icon, label, color, event, theme, and graph data types
+- `startForceSimulation`
+- theme, event, icon, label, color, and observable graph data types
 
 ## Development