fix(node-ui): keep context graph primitives neutral

Author: Jurij Skornik

packages/node-ui/src/ui/components/ActivityFeed.tsx

@@ -24,7 +24,7 @@ import {
 } from '../hooks/useProjectActivity.js';
 import { useAgentsContext } from '../hooks/useAgents.js';
 import { useProjectProfileContext } from '../hooks/useProjectProfile.js';
-import { EmptyState } from '../views/project/primitives.js';
+import { EmptyState } from './ContextGraphPrimitives.js';
 import { AgentChip } from './AgentChip.js';
 
 const LAYER_COLOR: Record<TrustLevel, string> = {

…e-ui/src/ui/views/project/primitives.tsx …ui/components/ContextGraphPrimitives.tsxpackages/node-ui/src/ui/views/project/primitives.tsx renamed to packages/node-ui/src/ui/components/ContextGraphPrimitives.tsx packages/node-ui/src/ui/views/project/primitives.tsx renamed to packages/node-ui/src/ui/components/ContextGraphPrimitives.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import type { ReactNode } from 'react';
-import { LAYER_CONFIG } from './helpers.js';
 
-export type EmptyStateTone = 'neutral' | 'wm' | 'swm' | 'vm' | 'danger' | 'query';
+type ContextGraphLayer = 'wm' | 'swm' | 'vm';
+
+export type EmptyStateTone = 'neutral' | ContextGraphLayer | 'danger' | 'query';
 
 type EmptyStateAction = {
   label: string;
@@ -12,14 +13,14 @@ type EmptyStateAction = {
 
 const EMPTY_STATE_ACCENTS: Record<EmptyStateTone, string> = {
   neutral: 'var(--border-strong)',
-  wm: LAYER_CONFIG.wm.color,
-  swm: LAYER_CONFIG.swm.color,
-  vm: LAYER_CONFIG.vm.color,
+  wm: 'var(--layer-working, #64748b)',
+  swm: 'var(--layer-shared, #f59e0b)',
+  vm: 'var(--layer-verified, #22c55e)',
   danger: 'var(--text-danger)',
   query: '#38bdf8',
 };
 
-export function toneForLayer(layer: 'wm' | 'swm' | 'vm'): EmptyStateTone {
+export function toneForLayer(layer: ContextGraphLayer): EmptyStateTone {
   return layer;
 }
 
@@ -94,12 +95,12 @@ export function StatStrip({
   className = '',
 }: {
   items: StatStripItem[];
-  layer?: 'wm' | 'swm' | 'vm';
+  layer?: ContextGraphLayer;
   compact?: boolean;
   className?: string;
 }) {
   const style = layer
-    ? ({ '--v10-stat-accent': LAYER_CONFIG[layer].color } as React.CSSProperties)
+    ? ({ '--v10-stat-accent': EMPTY_STATE_ACCENTS[layer] } as React.CSSProperties)
     : undefined;
 
   return (

packages/node-ui/src/ui/styles.css

@@ -4148,9 +4148,10 @@ body.light .v10-vm-hero {
 .v10-vm-hero-empty {
   gap: 16px;
 }
-.v10-vm-empty-state {
+.v10-empty-state.v10-vm-empty-state {
   display: flex;
   align-items: flex-start;
+  justify-content: flex-start;
   gap: 12px;
   padding: 16px;
   background: var(--v10-vm-surface);
@@ -5928,7 +5929,7 @@ body.light .v10-me-graph-legend { background: rgba(255,255,255,0.8); }
   text-transform: uppercase; letter-spacing: 0.06em;
   color: var(--text-tertiary);
 }
-.v10-activity-feed-empty-state { min-height: 96px; }
+.v10-empty-state.v10-activity-feed-empty-state { min-height: 96px; }
 .v10-overview-activity.v10-activity-feed-empty {
   min-height: 140px;
 }

packages/node-ui/src/ui/views/project/components.tsx

@@ -57,7 +57,7 @@ import {
   type LayerView, type LayerContentTab, type KAPane,
   type SubGraphTab, type SubGraphEntitySort,
 } from './helpers.js';
-import { EmptyState, StatStrip, toneForLayer } from './primitives.js';
+import { EmptyState, StatStrip, toneForLayer } from '../../components/ContextGraphPrimitives.js';
 
 export const RdfGraph = lazy(() =>
   import('@origintrail-official/dkg-graph-viz/react').then(m => ({ default: m.RdfGraph }))

packages/node-ui/test/context-graph-empty-stat-components.test.ts

@@ -26,7 +26,7 @@ vi.mock('../src/ui/api.js', () => ({
 const {
   EmptyState,
   StatStrip,
-} = await import('../src/ui/views/project/primitives.js');
+} = await import('../src/ui/components/ContextGraphPrimitives.js');
 
 const {
   AssertionsList,