Sync Ontology fields with CreateNodeModal and improve empty state UX

- Update Ontology page to show exact fields from CreateNodeModal in same order
- Set both graph panel and legend panel collapsed by default for cleaner startup
- Hide Create Node panel when graph is empty to focus on Transform Your Vision message
- Add dynamic panel positioning that adjusts when Create Node panel is hidden

Author: Patel230

packages/web/src/components/InteractiveGraphVisualization.tsx

@@ -140,8 +140,8 @@ export function InteractiveGraphVisualization() {
   const [selectedNode, setSelectedNode] = useState<WorkItem | null>(null);
   const [createNodePosition, setCreateNodePosition] = useState<{ x: number; y: number; z: number } | undefined>(undefined);
   const [currentTransform, setCurrentTransform] = useState({ x: 0, y: 0, scale: 1 });
-  const [showLegend, setShowLegend] = useState(true);
-  const [showGraphPanel, setShowGraphPanel] = useState(true);
+  const [showLegend, setShowLegend] = useState(false);
+  const [showGraphPanel, setShowGraphPanel] = useState(false);
 
   // Calculate dynamic positioning for panels and minimized buttons to avoid overlap
   const getPanelPosition = (panelType: 'graph' | 'legend' | 'create') => {
@@ -177,8 +177,10 @@ export function InteractiveGraphVisualization() {
         topOffset += buttonHeight + compactSpacing;
       }
 
-      // Add create button height (always a button)
-      topOffset += buttonHeight + compactSpacing;
+      // Add create button height (only if not in empty state)
+      if (!showEmptyStateOverlay) {
+        topOffset += buttonHeight + compactSpacing;
+      }
 
       return { top: `${topOffset}px` };
     }
@@ -2057,7 +2059,8 @@ export function InteractiveGraphVisualization() {
         </div>
       )}
 
-      {/* Create Node Button */}
+      {/* Create Node Button - Hide when no nodes exist */}
+      {!showEmptyStateOverlay && (
       <button
         onClick={() => setShowCreateNodeModal(true)}
         className="absolute left-4 z-40 backdrop-blur-sm border-0 rounded-lg shadow-xl px-4 py-3 text-white font-semibold transition-all duration-300 flex items-center space-x-2 transform hover:scale-105 w-40 h-12"
@@ -2083,6 +2086,7 @@ export function InteractiveGraphVisualization() {
           </div>
         </div>
       </button>
+      )}
 
       {/* Legend */}
       {showLegend ? (

packages/web/src/pages/Ontology.tsx

@@ -59,10 +59,16 @@ export function Ontology() {
     createdBy: 'system',
     createdAt: '2024-01-01',
     fields: [
-      { id: 'title', name: 'Title', type: 'text' as const, required: true },
-      { id: 'description', name: 'Description', type: 'text' as const, required: false },
-      { id: 'dueDate', name: 'Due Date', type: 'date' as const, required: false },
-      { id: 'priority', name: 'Priority', type: 'select' as const, required: true, options: ['Critical', 'High', 'Medium', 'Low', 'Minimal'] }
+      { id: 'title', name: 'title', type: 'text' as const, required: true },
+      { id: 'description', name: 'description', type: 'text' as const, required: false },
+      { id: 'type', name: 'type', type: 'text' as const, required: true },
+      { id: 'status', name: 'status', type: 'text' as const, required: true },
+      { id: 'priorityExec', name: 'priorityExec', type: 'number' as const, required: false },
+      { id: 'priorityIndiv', name: 'priorityIndiv', type: 'number' as const, required: false },
+      { id: 'priorityComm', name: 'priorityComm', type: 'number' as const, required: false },
+      { id: 'assignedTo', name: 'assignedTo', type: 'text' as const, required: false },
+      { id: 'dueDate', name: 'dueDate', type: 'text' as const, required: false },
+      { id: 'tags', name: 'tags', type: 'text' as const, required: false }
     ]
   }));