diff --git a/src/components/ModuleSwitcher.tsx b/src/components/ModuleSwitcher.tsx
index 97d9452..7627777 100644
--- a/src/components/ModuleSwitcher.tsx
+++ b/src/components/ModuleSwitcher.tsx
@@ -3,7 +3,11 @@ import { Link, useLocation } from 'react-router-dom';
 import { LayoutGrid, Home, Edit3, Activity, ChevronDown, Globe } from 'lucide-react';
 import { motion, AnimatePresence } from 'motion/react';
 
-const ModuleSwitcher: React.FC = () => {
+interface ModuleSwitcherProps {
+  variant?: 'light' | 'dark';
+}
+
+const ModuleSwitcher: React.FC<ModuleSwitcherProps> = ({ variant = 'light' }) => {
   const [isOpen, setIsOpen] = useState(false);
   const location = useLocation();
 
@@ -20,11 +24,15 @@ const ModuleSwitcher: React.FC = () => {
     <div className="relative z-[100]">
       <button 
         onClick={() => setIsOpen(!isOpen)}
-        className="flex items-center gap-2 px-3 py-1.5 bg-white hover:bg-slate-50 rounded-xl border border-slate-200 shadow-sm transition-all text-slate-800 active:scale-95"
+        className={`flex items-center gap-2 px-3 py-1.5 rounded-xl border shadow-sm transition-all active:scale-95 ${
+          variant === 'dark'
+            ? 'bg-blue-600 hover:bg-blue-500 border-blue-500 text-white shadow-blue-950/30'
+            : 'bg-white hover:bg-slate-50 border-slate-200 text-slate-800'
+        }`}
       >
-        <LayoutGrid className="w-4 h-4 text-blue-600" />
+        <LayoutGrid className={`w-4 h-4 ${variant === 'dark' ? 'text-white' : 'text-blue-600'}`} />
         <span className="text-sm font-black tracking-tight">{currentModule.name}</span>
-        <ChevronDown className={`w-3 h-3 text-slate-400 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+        <ChevronDown className={`w-3 h-3 transition-transform ${variant === 'dark' ? 'text-blue-100' : 'text-slate-400'} ${isOpen ? 'rotate-180' : ''}`} />
       </button>
 
       <AnimatePresence>
diff --git a/src/pages/OmniEditor.tsx b/src/pages/OmniEditor.tsx
index bf7452e..9787f4c 100644
--- a/src/pages/OmniEditor.tsx
+++ b/src/pages/OmniEditor.tsx
@@ -4,9 +4,13 @@ import {
   Bot,
   CheckCircle,
   ChevronDown,
+  Cloud,
   Database,
+  Download,
   Eye,
   Grid3X3,
+  HelpCircle,
+  History,
   Layers3,
   MessageSquare,
   PanelLeftClose,
@@ -15,10 +19,13 @@ import {
   Plus,
   Send,
   Settings,
+  Share2,
   Sparkles,
   Table2,
   Terminal,
   Trash2,
+  Upload,
+  UserCircle,
   Workflow,
   X,
   Zap,
@@ -28,15 +35,22 @@ import { useLocation } from 'react-router-dom';
 import ModuleSwitcher from '../components/ModuleSwitcher';
 import { useLanguage } from '../context/LanguageContext';
 import {
+  buildRuntimeConfig,
   createDefaultWorkflow,
+  ensureValidationChecklist,
   getBehaviorSectionsForNode,
+  getInputOutputsForEdge,
+  getInputOutputsForNode,
   getNodeConnectionAnchor,
+  getNodeStatusFromValidation,
   getParametersForNode,
+  getValidationsForNode,
   InitialSpaceType,
   WorkflowEdge,
   WorkflowModel,
   WorkflowNode,
   WorkflowNodeKind,
+  WorkflowNodeStatus,
   WorkflowPortType,
 } from '../workflowModel';
 
@@ -59,6 +73,7 @@ const portColors: Record<WorkflowPortType, string> = {
 
 interface WorkflowCardProps {
   node: WorkflowNode;
+  status: WorkflowNodeStatus;
   selected: boolean;
   onSelect: (id: string) => void;
   onDragStart: (id: string, event: React.MouseEvent<HTMLButtonElement>) => void;
@@ -67,6 +82,7 @@ interface WorkflowCardProps {
 
 const WorkflowCard: React.FC<WorkflowCardProps> = ({
   node,
+  status,
   selected,
   onSelect,
   onDragStart,
@@ -74,6 +90,18 @@ const WorkflowCard: React.FC<WorkflowCardProps> = ({
 }) => {
   const style = kindStyles[node.kind];
   const Icon = style.icon;
+  const statusFrame =
+    status === 'error'
+      ? 'border-red-300 shadow-red-100'
+      : status === 'warning'
+        ? 'border-amber-300 shadow-amber-100'
+        : 'border-slate-200';
+  const statusHeader =
+    status === 'error'
+      ? 'bg-red-50 border-red-100'
+      : status === 'warning'
+        ? 'bg-amber-50 border-amber-100'
+        : style.bg;
 
   return (
     <button
@@ -83,11 +111,11 @@ const WorkflowCard: React.FC<WorkflowCardProps> = ({
       }}
       onMouseDown={(event) => onDragStart(node.id, event)}
       className={`absolute w-44 h-32 text-left rounded-lg border bg-white shadow-sm transition-shadow cursor-move ${
-        selected ? 'ring-4 ring-blue-500/15 border-blue-400 shadow-xl' : 'border-slate-200 hover:border-blue-200 hover:shadow-md'
+        selected ? 'ring-4 ring-blue-500/15 border-blue-400 shadow-xl' : `${statusFrame} hover:border-blue-200 hover:shadow-md`
       }`}
       style={{ left: `calc(50% + ${node.x}px)`, top: `calc(50% + ${node.y}px)` }}
     >
-      <div className={`flex items-center justify-between px-3 py-2 border-b ${style.bg}`}>
+      <div className={`flex items-center justify-between px-3 py-2 border-b ${statusHeader}`}>
         <div className="flex items-center gap-2">
           <span className={`p-1.5 rounded-md bg-white border ${style.accent}`}>
             <Icon className="w-4 h-4" />
@@ -96,16 +124,16 @@ const WorkflowCard: React.FC<WorkflowCardProps> = ({
         </div>
         <span
           className={`text-[9px] font-black uppercase px-2 py-0.5 rounded-full border ${
-            node.status === 'error'
+            status === 'error'
               ? 'bg-red-50 text-red-600 border-red-100'
-              : node.status === 'warning'
+              : status === 'warning'
                 ? 'bg-amber-50 text-amber-600 border-amber-100'
-                : node.status === 'success'
+                : status === 'success'
                   ? 'bg-emerald-50 text-emerald-600 border-emerald-100'
                   : 'bg-slate-50 text-slate-500 border-slate-200'
           }`}
         >
-          {node.status}
+          {status}
         </span>
       </div>
       <button
@@ -137,9 +165,10 @@ const OmniEditor: React.FC = () => {
   const [isAssistantCollapsed, setIsAssistantCollapsed] = useState(true);
   const [selectedNodeId, setSelectedNodeId] = useState('example-agent');
   const [selectedEdgeId, setSelectedEdgeId] = useState<string | null>(null);
+  const [selectedVariableName, setSelectedVariableName] = useState<string | null>(null);
   const [linkingFrom, setLinkingFrom] = useState<string | null>(null);
   const [dragState, setDragState] = useState<{ id: string; startX: number; startY: number; nodeX: number; nodeY: number } | null>(null);
-  const [bottomTab, setBottomTab] = useState<'attributes' | 'behavior' | 'json' | 'history'>('attributes');
+  const [bottomTab, setBottomTab] = useState<'agents' | 'variables' | 'sensing' | 'internalModels' | 'schedule' | 'data' | 'io' | 'validation'>('variables');
   const [isDetailOpen, setIsDetailOpen] = useState(false);
   const [showInitModal, setShowInitModal] = useState(!!location.state?.fromLanding);
   const [selectedSpaceType, setSelectedSpaceType] = useState<InitialSpaceType>('grid');
@@ -171,12 +200,35 @@ const OmniEditor: React.FC = () => {
   }, []);
 
   const selectedNode = workflow.nodes.find((node) => node.id === selectedNodeId) ?? workflow.nodes[0];
+  const selectedNodeStatus = getNodeStatusFromValidation(workflow, selectedNode.id);
+  const selectedNodeValidations = getValidationsForNode(workflow, selectedNode.id);
+  const selectedNodeValidationIds = new Set(selectedNodeValidations.map((validation) => validation.id));
   const selectedEdge = workflow.edges.find((edge) => edge.id === selectedEdgeId) ?? null;
+  const selectedEdgeContracts = selectedEdge ? getInputOutputsForEdge(workflow, selectedEdge.id) : [];
+  const selectedNodeContracts = getInputOutputsForNode(workflow, selectedNode.id);
+  const selectedNodeInputContracts = selectedNodeContracts.filter((contract) => contract.direction === 'input');
+  const selectedNodeOutputContracts = selectedNodeContracts.filter((contract) => contract.direction === 'output');
+  const contextContracts = selectedEdge ? selectedEdgeContracts : selectedNodeContracts;
+  const contextContractIds = new Set(contextContracts.map((contract) => contract.id));
+  const ioContextLabel = selectedEdge ? selectedEdge.label : selectedNode.title;
   const selectedParameters = getParametersForNode(workflow, selectedNode.id);
   const selectedBehaviorSections = getBehaviorSectionsForNode(
     workflow,
     selectedNode.kind === 'agent' ? 'on-sensing' : selectedNode.id,
   );
+  const sensingSections = selectedBehaviorSections.filter((section) => section.kind === 'observable_pool');
+  const internalModelSections = selectedBehaviorSections.filter((section) => section.kind !== 'observable_pool');
+  const scheduleRows = workflow.schedules;
+  const associatedDataRows = workflow.associatedData;
+  const ioRows = workflow.inputOutputs;
+  const validationRows = workflow.validations;
+  const getAssociatedDataForVariable = (variableName: string) => (
+    associatedDataRows.find((row) => row.relatedVariable === variableName)
+  );
+  const selectedVariable = (selectedParameters.length ? selectedParameters : workflow.parameters).find(
+    (parameter) => parameter.name === selectedVariableName,
+  );
+  const selectedVariableData = selectedVariable ? getAssociatedDataForVariable(selectedVariable.name) : null;
 
   const edgeLines = workflow.edges
     .map((edge) => {
@@ -202,6 +254,20 @@ const OmniEditor: React.FC = () => {
     setTimeout(() => setShowToast(null), 2500);
   };
 
+  const handleExportRuntimeConfig = () => {
+    const runtimeConfig = buildRuntimeConfig(workflow);
+    const json = JSON.stringify(runtimeConfig, null, 2);
+    const blob = new Blob([json], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement('a');
+    anchor.href = url;
+    anchor.download = 'abm-runtime-config.json';
+    anchor.click();
+    URL.revokeObjectURL(url);
+    setBottomTab('io');
+    handleAction('Export model runtime config JSON generated from I/O contracts');
+  };
+
   const initializeSpace = (spaceType?: InitialSpaceType) => {
     const nextWorkflow = createDefaultWorkflow(spaceType);
     setWorkflow(nextWorkflow);
@@ -301,6 +367,7 @@ const OmniEditor: React.FC = () => {
     const content = input.trim();
     setMessages((prev) => [...prev, { role: 'user', content }]);
     setInput('');
+    setWorkflow((current) => ensureValidationChecklist(current));
     setTimeout(() => {
       setMessages((prev) => [
         ...prev,
@@ -308,8 +375,8 @@ const OmniEditor: React.FC = () => {
           role: 'assistant',
           content:
             language === 'en'
-              ? 'I would map that request onto workflow nodes first, then update the parameter table and generated code preview.'
-              : '我会先把这个需求映射到工作流节点，再更新参数表和生成代码预览。',
+              ? 'I mapped that request onto the workflow structure and generated the matching validation checklist.'
+              : '我会把这个需求映射到工作流结构，并同步生成对应的 validation checklist。',
         },
       ]);
     }, 500);
@@ -399,57 +466,81 @@ const OmniEditor: React.FC = () => {
         )}
       </AnimatePresence>
 
-      <header className="border-b border-slate-200 bg-white flex flex-col z-50 shrink-0">
-        <div className="h-10 flex items-center justify-between px-4 border-b border-slate-100 text-slate-500">
-          <div className="flex items-center gap-3">
-            <ModuleSwitcher />
-            <div className="h-4 w-px bg-slate-200 mx-1" />
-            <div className="flex items-center gap-2 px-2 py-1 bg-blue-50 text-blue-600 rounded-md border border-blue-100 text-[10px] font-black">
-              <Workflow className="w-3 h-3" />
-              MODEL CANVAS
-            </div>
-            <button className="flex items-center gap-2 px-2 py-1 bg-slate-50 rounded-md border border-slate-200 text-xs text-slate-700 font-black hover:bg-slate-100 transition-colors">
-              <span className="opacity-50 font-bold">Schema:</span>
-              <span>ABM Entity + Behavior Design</span>
-              <ChevronDown className="w-3 h-3 text-slate-400" />
+      <header className="h-12 bg-slate-950 border-b border-slate-800 text-slate-200 flex items-center justify-between px-2 z-50 shrink-0 shadow-sm">
+        <div className="flex items-center gap-2 h-full">
+          <ModuleSwitcher variant="dark" />
+
+          <button
+            onClick={() => handleAction('Workspace')}
+            className="h-8 flex items-center gap-1.5 px-2 rounded-md hover:bg-slate-800 text-xs font-semibold transition-colors"
+          >
+            Personal <ChevronDown className="w-3.5 h-3.5 text-slate-400" />
+          </button>
+
+          <button
+            onClick={() => handleAction('GWproduce')}
+            className="h-8 flex items-center gap-2 px-3 rounded-md bg-slate-800 hover:bg-slate-700 border border-slate-700 min-w-40 text-left transition-colors"
+          >
+            <Cloud className="w-3.5 h-3.5 text-emerald-400" />
+            <span className="text-sm font-semibold text-slate-100">GWproduce</span>
+          </button>
+
+          <button
+            onClick={() => setIsAssistantCollapsed((collapsed) => !collapsed)}
+            className="h-8 flex items-center gap-2 px-3 rounded-md bg-slate-800 hover:bg-slate-700 border border-slate-700 text-xs font-semibold transition-colors"
+          >
+            <Sparkles className="w-3.5 h-3.5 text-slate-100" />
+            AI
+            <span className={`w-8 h-4 rounded-full p-0.5 flex transition-colors ${isAssistantCollapsed ? 'bg-slate-600 justify-start' : 'bg-blue-600 justify-end'}`}>
+              <span className="w-3 h-3 rounded-full bg-white shadow-sm" />
+            </span>
+          </button>
+
+          {[
+            ['Share', Share2],
+            ['History', History],
+            ['Import', Upload],
+            ['Export', Download],
+          ].map(([label, Icon]) => {
+            const actionLabel = label as string;
+            return (
+            <button
+              key={actionLabel}
+              onClick={() => {
+                if (actionLabel === 'Export') {
+                  handleExportRuntimeConfig();
+                  return;
+                }
+                handleAction(actionLabel === 'Import' ? 'Import Excel will create Associated Data records' : actionLabel);
+              }}
+              className="h-8 flex items-center gap-2 px-3 rounded-md bg-slate-800 hover:bg-slate-700 border border-slate-700 text-xs font-semibold transition-colors"
+            >
+              <Icon className="w-3.5 h-3.5" />
+              {actionLabel}
+              {actionLabel === 'Import' || actionLabel === 'Export' ? <ChevronDown className="w-3.5 h-3.5 text-slate-400" /> : null}
             </button>
-          </div>
-          <span className="px-2 py-0.5 bg-emerald-50 text-emerald-600 rounded border border-emerald-100 text-[9px] flex items-center gap-1 font-black">
-            <span className="w-1 h-1 bg-emerald-500 rounded-full animate-pulse" /> {t('visa_connected')}
-          </span>
+            );
+          })}
         </div>
 
-        <div className="h-9 flex items-center px-4 gap-2 text-[11px] text-slate-500 font-black uppercase tracking-wider bg-slate-50/50">
-          {[
-            ['Environment', 'Global model context'],
-            ['Space', 'Grid, network, continuous, GIS'],
-            ['Agents', 'Agent subjects and observation arrows'],
-            ['Attributes', 'Endogenous and exogenous variables'],
-            ['Behaviors', 'Inputs, calculation, outputs'],
-          ].map(([label, hint], index) => (
-            <button
-              key={label}
-              title={hint}
-              className={`hover:text-blue-600 hover:bg-white px-3 py-1.5 rounded-md transition-all ${
-                index === 2 ? 'text-blue-600 bg-white shadow-sm' : ''
-              }`}
-              onClick={() => handleAction(label)}
-            >
-              {label}
-            </button>
-          ))}
-          <div className="flex-1" />
+        <div className="flex items-center gap-2">
           <button
-            onClick={() => setSelectedNodeId('grid-space')}
-            className="flex items-center gap-1.5 bg-white hover:bg-slate-50 text-slate-600 border border-slate-200 px-3 py-1 rounded-md text-[10px] font-black transition-all"
+            onClick={() => handleAction('Upgrade')}
+            className="h-8 px-3 rounded-md bg-blue-600 hover:bg-blue-500 text-white text-xs font-black transition-colors"
           >
-            <Plus className="w-3 h-3" /> Add Space
+            Upgrade <ChevronDown className="inline w-3.5 h-3.5 ml-1" />
           </button>
           <button
-            onClick={() => setSelectedNodeId('example-agent')}
-            className="flex items-center gap-1.5 bg-blue-600 hover:bg-blue-700 text-white px-4 py-1 rounded-md text-[10px] font-black shadow-lg shadow-blue-500/20 transition-all active:scale-95"
+            onClick={() => handleAction('Help')}
+            className="h-8 flex items-center gap-2 px-3 rounded-md bg-slate-800 hover:bg-slate-700 border border-slate-700 text-xs font-semibold transition-colors"
           >
-            <Plus className="w-3 h-3" /> Add Agent
+            <HelpCircle className="w-3.5 h-3.5" /> Help <ChevronDown className="w-3.5 h-3.5 text-slate-400" />
+          </button>
+          <button
+            onClick={() => handleAction('Profile')}
+            className="h-8 w-8 rounded-full bg-slate-800 border border-slate-700 flex items-center justify-center text-emerald-300 hover:bg-slate-700 transition-colors"
+          >
+            <UserCircle className="w-5 h-5" />
           </button>
         </div>
       </header>
@@ -484,6 +575,28 @@ const OmniEditor: React.FC = () => {
                       : '当前默认收起 AI：先把右侧图形化模型编辑器作为主工作区。'}
                   </p>
                 </div>
+                <div className="p-3 rounded-lg bg-white border border-slate-200 shadow-sm">
+                  <div className="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-3">Pipeline Nodes</div>
+                  <div className="grid grid-cols-2 gap-2">
+                    {[
+                      ['Data Source', Database, 'Excel / raw data entry'],
+                      ['Parameter Table', Table2, 'Model-ready parameters'],
+                      ['Validation', CheckCircle, 'Rules and checks'],
+                      ['Model Output', Layers3, 'Simulation outputs'],
+                    ].map(([label, Icon, desc]) => (
+                      <button
+                        key={label as string}
+                        onClick={() => handleAction(label as string)}
+                        className="text-left p-3 rounded-lg border border-slate-200 bg-slate-50 hover:bg-white hover:border-blue-200 transition-all"
+                        title={desc as string}
+                      >
+                        <Icon className="w-4 h-4 text-blue-600 mb-2" />
+                        <div className="text-[11px] font-black text-slate-800">{label as string}</div>
+                        <div className="text-[10px] text-slate-400 mt-1 leading-snug">{desc as string}</div>
+                      </button>
+                    ))}
+                  </div>
+                </div>
                 {messages.map((msg, index) => (
                   <div key={`${msg.role}-${index}`} className={`flex flex-col gap-1 ${msg.role === 'user' ? 'items-end' : ''}`}>
                     <span className="text-[10px] text-slate-400 font-black uppercase tracking-wider">
@@ -602,6 +715,7 @@ const OmniEditor: React.FC = () => {
                   <WorkflowCard
                     key={node.id}
                     node={node}
+                    status={getNodeStatusFromValidation(workflow, node.id)}
                     selected={selectedNode.id === node.id}
                     onSelect={handleNodeSelect}
                     onDragStart={handleNodeMouseDown}
@@ -611,7 +725,7 @@ const OmniEditor: React.FC = () => {
               </div>
             </div>
 
-            <aside className="w-96 bg-white border-l border-slate-200 flex flex-col">
+            <aside className="w-[520px] bg-white border-l border-slate-200 flex flex-col">
               <header className="p-4 border-b border-slate-100 bg-slate-50/70 flex items-center justify-between">
                 <div className="flex items-center gap-2">
                   <Settings className="w-4 h-4 text-slate-400" />
@@ -638,6 +752,56 @@ const OmniEditor: React.FC = () => {
                         Delete
                       </button>
                     </div>
+
+                    <div className="rounded-lg border border-slate-200 bg-slate-50/80 p-3 space-y-3">
+                      <div className="flex items-center justify-between gap-3">
+                        <div>
+                          <div className="text-[10px] font-black uppercase tracking-[0.18em] text-slate-400">I/O Contract</div>
+                          <p className="text-xs text-slate-500 mt-1">This connection is backed by model input/output rows.</p>
+                        </div>
+                        <span className="text-[10px] font-black text-slate-500 bg-white border border-slate-200 rounded-full px-2 py-1">
+                          {selectedEdgeContracts.length} rows
+                        </span>
+                      </div>
+
+                      {selectedEdgeContracts.length > 0 ? (
+                        <div className="space-y-2">
+                          {selectedEdgeContracts.map((contract) => (
+                            <div key={contract.id} className="rounded-md border border-white bg-white p-3 shadow-sm">
+                              <div className="flex items-start justify-between gap-3">
+                                <div>
+                                  <div className="font-mono text-sm font-black text-blue-600">{contract.ioName}</div>
+                                  <div className="text-[11px] text-slate-500 mt-1">
+                                    {contract.sourceComponent} {'->'} {contract.targetComponent}
+                                  </div>
+                                </div>
+                                <span className={`shrink-0 rounded-full px-2 py-1 text-[9px] font-black uppercase ${
+                                  contract.direction === 'input'
+                                    ? 'bg-emerald-50 text-emerald-700'
+                                    : 'bg-blue-50 text-blue-700'
+                                }`}>
+                                  {contract.direction}
+                                </span>
+                              </div>
+                              <div className="grid grid-cols-2 gap-2 mt-3 text-[11px] text-slate-500">
+                                <div>
+                                  <span className="block text-[9px] font-black uppercase tracking-widest text-slate-400">Schema</span>
+                                  <span className="font-mono text-slate-700">{contract.schema}</span>
+                                </div>
+                                <div>
+                                  <span className="block text-[9px] font-black uppercase tracking-widest text-slate-400">Snapshot</span>
+                                  <span className="font-mono text-slate-700">{contract.snapshotPolicy}</span>
+                                </div>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      ) : (
+                        <div className="rounded-md border border-dashed border-slate-300 bg-white px-3 py-4 text-xs text-slate-500">
+                          No I/O contract has been bound to this connection yet.
+                        </div>
+                      )}
+                    </div>
                   </section>
                 )}
 
@@ -652,42 +816,160 @@ const OmniEditor: React.FC = () => {
                     </div>
                     <span
                       className={`shrink-0 text-[9px] font-black uppercase px-2 py-1 rounded-full border ${
-                        selectedNode.status === 'error'
+                        selectedNodeStatus === 'error'
                           ? 'bg-red-50 text-red-600 border-red-100'
-                          : selectedNode.status === 'warning'
+                          : selectedNodeStatus === 'warning'
                             ? 'bg-amber-50 text-amber-600 border-amber-100'
-                            : selectedNode.status === 'success'
+                            : selectedNodeStatus === 'success'
                               ? 'bg-emerald-50 text-emerald-600 border-emerald-100'
                               : 'bg-slate-50 text-slate-500 border-slate-200'
                       }`}
                     >
-                      {selectedNode.status}
+                      {selectedNodeStatus}
                     </span>
                   </div>
                 </div>
 
-                <div className="grid grid-cols-2 gap-3">
-                  <div className="p-3 rounded-lg bg-slate-50 border border-slate-200">
-                    <div className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Inputs</div>
-                    <div className="mt-2 space-y-1">
-                      {(selectedNode.inputs.length ? selectedNode.inputs : [{ id: 'none', label: 'none', type: 'REPORT' as WorkflowPortType }]).map((port) => (
-                        <div key={port.id} className="text-[11px] font-black text-slate-700 flex items-center gap-2">
-                          <span className="w-2 h-2 rounded-full" style={{ background: portColors[port.type] }} />
-                          {selectedNode.inputs.length ? port.type : 'NONE'}
+                {selectedVariable && (
+                  <section className="p-3 rounded-lg border border-blue-100 bg-blue-50/70 space-y-3">
+                    <div className="flex items-start justify-between gap-3">
+                      <div>
+                        <div className="text-[10px] font-black uppercase tracking-widest text-blue-600">Selected Variable</div>
+                        <h3 className="text-sm font-black text-slate-900 font-mono mt-1">{selectedVariable.name}</h3>
+                        <p className="text-[11px] text-slate-500 mt-1 leading-relaxed">{selectedVariable.description}</p>
+                      </div>
+                      <span className={`shrink-0 px-2 py-1 rounded-full text-[10px] font-black uppercase ${
+                        selectedVariableData?.qualityStatus === 'error'
+                          ? 'bg-red-100 text-red-700'
+                          : selectedVariableData
+                            ? 'bg-emerald-100 text-emerald-700'
+                            : 'bg-slate-100 text-slate-500'
+                      }`}>
+                        {selectedVariableData?.qualityStatus ?? 'unlinked'}
+                      </span>
+                    </div>
+                    <div className="grid grid-cols-2 gap-2">
+                      {[
+                        ['Associated Data', selectedVariableData?.id ?? '-'],
+                        ['Source Table', selectedVariableData?.sourceTable ?? '-'],
+                        ['Source Column', selectedVariableData?.sourceColumn ?? '-'],
+                        ['Version Key', selectedVariableData?.versionKey ?? '-'],
+                        ['Used By', selectedVariableData?.usedByBehavior ?? '-'],
+                        ['Update', selectedVariableData?.updateFrequency ?? '-'],
+                      ].map(([label, value]) => (
+                        <div key={label} className="p-2 rounded-md bg-white border border-blue-100">
+                          <div className="text-[9px] font-black uppercase tracking-widest text-slate-400">{label}</div>
+                          <div className="text-[11px] font-black text-slate-700 mt-1 break-words">{value}</div>
                         </div>
                       ))}
                     </div>
+                  </section>
+                )}
+
+                <section className="p-3 rounded-lg border border-slate-200 bg-white space-y-3">
+                  <div className="flex items-center justify-between gap-3">
+                    <div>
+                      <div className="text-[10px] font-black uppercase tracking-widest text-slate-400">Validation Checklist</div>
+                      <p className="text-[11px] text-slate-500 mt-1">Checks related to the current node.</p>
+                    </div>
+                    <span className={`shrink-0 rounded-full px-2 py-1 text-[10px] font-black uppercase ${
+                      selectedNodeStatus === 'error'
+                        ? 'bg-red-100 text-red-700'
+                        : selectedNodeStatus === 'warning'
+                          ? 'bg-amber-100 text-amber-700'
+                          : 'bg-emerald-100 text-emerald-700'
+                    }`}>
+                      {selectedNodeValidations.length} checks
+                    </span>
                   </div>
-                  <div className="p-3 rounded-lg bg-slate-50 border border-slate-200">
-                    <div className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Outputs</div>
-                    <div className="mt-2 space-y-1">
-                      {selectedNode.outputs.map((port) => (
-                        <div key={port.id} className="text-[11px] font-black text-slate-700 flex items-center gap-2">
-                          <span className="w-2 h-2 rounded-full" style={{ background: portColors[port.type] }} />
-                          {port.type}
+
+                  {selectedNodeValidations.length > 0 ? (
+                    <div className="space-y-2">
+                      {selectedNodeValidations.map((validation) => (
+                        <div
+                          key={validation.id}
+                          className={`rounded-md border p-2 ${
+                            validation.status === 'error'
+                              ? 'border-red-100 bg-red-50/70'
+                              : validation.status === 'warning'
+                                ? 'border-amber-100 bg-amber-50/70'
+                                : 'border-emerald-100 bg-emerald-50/70'
+                          }`}
+                        >
+                          <div className="flex items-start justify-between gap-2">
+                            <div>
+                              <div className="font-mono text-[11px] font-black text-slate-800">{validation.targetName}</div>
+                              <div className="mt-1 text-[10px] text-slate-500">{validation.method} · {validation.metric}</div>
+                            </div>
+                            <span className={`shrink-0 rounded-full px-2 py-0.5 text-[9px] font-black uppercase ${
+                              validation.status === 'error'
+                                ? 'bg-red-100 text-red-700'
+                                : validation.status === 'warning'
+                                  ? 'bg-amber-100 text-amber-700'
+                                  : 'bg-emerald-100 text-emerald-700'
+                            }`}>
+                              {validation.status}
+                            </span>
+                          </div>
+                          <p className="mt-2 text-[10px] leading-relaxed text-slate-500">{validation.notes}</p>
                         </div>
                       ))}
                     </div>
+                  ) : (
+                    <div className="rounded-md border border-dashed border-slate-200 bg-slate-50 px-3 py-4 text-xs text-slate-500">
+                      No validation checks are linked to this node yet.
+                    </div>
+                  )}
+                </section>
+
+                <div className="grid grid-cols-2 gap-3">
+                  <div className="p-3 rounded-lg bg-slate-50 border border-slate-200">
+                    <div className="flex items-center justify-between gap-2">
+                      <div className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Inputs</div>
+                      <span className="text-[9px] font-black text-slate-400">{selectedNodeInputContracts.length} contracts</span>
+                    </div>
+                    <div className="mt-2 space-y-1">
+                      {selectedNodeInputContracts.length > 0 ? (
+                        selectedNodeInputContracts.map((contract) => (
+                          <div key={contract.id} className="rounded-md bg-white border border-slate-100 p-2">
+                            <div className="text-[11px] font-black text-slate-800 font-mono">{contract.ioName}</div>
+                            <div className="text-[10px] text-slate-500 mt-1">{contract.sourceComponent} {'->'} {contract.targetComponent}</div>
+                            <div className="text-[10px] text-slate-400 mt-1 font-mono">{contract.schema}</div>
+                          </div>
+                        ))
+                      ) : (
+                        (selectedNode.inputs.length ? selectedNode.inputs : [{ id: 'none', label: 'none', type: 'REPORT' as WorkflowPortType }]).map((port) => (
+                          <div key={port.id} className="text-[11px] font-black text-slate-700 flex items-center gap-2">
+                            <span className="w-2 h-2 rounded-full" style={{ background: portColors[port.type] }} />
+                            {selectedNode.inputs.length ? port.type : 'NONE'}
+                          </div>
+                        ))
+                      )}
+                    </div>
+                  </div>
+                  <div className="p-3 rounded-lg bg-slate-50 border border-slate-200">
+                    <div className="flex items-center justify-between gap-2">
+                      <div className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Outputs</div>
+                      <span className="text-[9px] font-black text-slate-400">{selectedNodeOutputContracts.length} contracts</span>
+                    </div>
+                    <div className="mt-2 space-y-1">
+                      {selectedNodeOutputContracts.length > 0 ? (
+                        selectedNodeOutputContracts.map((contract) => (
+                          <div key={contract.id} className="rounded-md bg-white border border-slate-100 p-2">
+                            <div className="text-[11px] font-black text-slate-800 font-mono">{contract.ioName}</div>
+                            <div className="text-[10px] text-slate-500 mt-1">{contract.sourceComponent} {'->'} {contract.targetComponent}</div>
+                            <div className="text-[10px] text-slate-400 mt-1 font-mono">{contract.schema}</div>
+                          </div>
+                        ))
+                      ) : (
+                        selectedNode.outputs.map((port) => (
+                          <div key={port.id} className="text-[11px] font-black text-slate-700 flex items-center gap-2">
+                            <span className="w-2 h-2 rounded-full" style={{ background: portColors[port.type] }} />
+                            {port.type}
+                          </div>
+                        ))
+                      )}
+                    </div>
                   </div>
                 </div>
 
@@ -718,32 +1000,407 @@ const OmniEditor: React.FC = () => {
                   ))}
                 </section>
 
-                <section className="space-y-3">
-                  <h3 className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Attributes</h3>
-                  {(selectedParameters.length ? selectedParameters : workflow.parameters.filter((item) => item.nodeId === 'example-agent')).map((attribute) => (
-                    <div key={attribute.id} className="p-3 bg-white border border-slate-200 rounded-lg">
-                      <div className="flex items-center justify-between gap-3">
-                        <span className="text-xs font-black text-blue-700 font-mono">{attribute.name}</span>
-                        <span className={`text-[9px] font-black uppercase px-2 py-0.5 rounded-full ${attribute.scope === 'endogenous' ? 'bg-blue-50 text-blue-700' : attribute.scope === 'exogenous' ? 'bg-amber-50 text-amber-700' : 'bg-emerald-50 text-emerald-700'}`}>
-                          {attribute.scope}
-                        </span>
-                      </div>
-                      <p className="text-[11px] text-slate-500 mt-2 leading-relaxed">{attribute.description}</p>
-                    </div>
-                  ))}
-                </section>
+                <section className="space-y-3 border-t border-slate-200 pt-4">
+                  <div className="flex items-center justify-between gap-3">
+                    <h3 className="text-[10px] font-black text-slate-400 uppercase tracking-widest">VISA Model Tables</h3>
+                    <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{selectedNode.title}</span>
+                  </div>
 
-                <section className="space-y-3">
-                  <h3 className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Behavior Editor</h3>
-                  {selectedBehaviorSections.map((section) => (
-                    <div key={section.id} className="p-3 bg-slate-50 border border-slate-200 rounded-lg">
-                      <div className="flex items-center gap-2">
-                        <Eye className="w-3.5 h-3.5 text-blue-600" />
-                        <span className="text-xs font-black text-slate-900">{section.title}</span>
+                  <div className="flex flex-wrap gap-2">
+                    {[
+                      ['agents', Bot, 'Agents'],
+                      ['variables', Table2, 'Variables'],
+                      ['sensing', Eye, 'Sensing'],
+                      ['internalModels', Workflow, 'Internal Models'],
+                      ['schedule', Terminal, 'Schedule'],
+                      ['data', Database, 'Data'],
+                      ['io', Layers3, 'I/O'],
+                      ['validation', CheckCircle, 'Validation'],
+                    ].map(([id, Icon, label]) => (
+                      <button
+                        key={id as string}
+                        onClick={() => setBottomTab(id as typeof bottomTab)}
+                        className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-[10px] font-black uppercase tracking-wider ${
+                          bottomTab === id
+                            ? 'bg-blue-50 text-blue-600 border border-blue-200 shadow-sm'
+                            : 'bg-slate-50 text-slate-400 border border-slate-200 hover:text-slate-700 hover:bg-white'
+                        }`}
+                      >
+                        <Icon className="w-3.5 h-3.5" /> {label as string}
+                      </button>
+                    ))}
+                  </div>
+
+                  <div className="max-h-[460px] overflow-auto rounded-lg border border-slate-200 bg-white">
+                    {bottomTab === 'agents' && (
+                      <table className="min-w-[760px] w-full text-left text-xs">
+                        <thead className="sticky top-0 bg-white border-b border-slate-200 text-slate-400 uppercase tracking-widest">
+                          <tr>
+                            <th className="px-4 py-3">Agent / Subject</th>
+                            <th className="px-4 py-3">Kind</th>
+                            <th className="px-4 py-3">Status</th>
+                            <th className="px-4 py-3">Inputs</th>
+                            <th className="px-4 py-3">Outputs</th>
+                            <th className="px-4 py-3">Description</th>
+                          </tr>
+                        </thead>
+                        <tbody className="divide-y divide-slate-100">
+                          {workflow.nodes.map((node) => {
+                            const nodeStatus = getNodeStatusFromValidation(workflow, node.id);
+                            return (
+                            <tr key={node.id} className={selectedNode.id === node.id ? 'bg-blue-50/50' : 'hover:bg-slate-50'}>
+                              <td className="px-4 py-3 font-black text-slate-900">{node.title}</td>
+                              <td className="px-4 py-3 text-slate-500">{kindStyles[node.kind].label}</td>
+                              <td className="px-4 py-3">
+                                <span className={`px-2 py-1 rounded-full text-[10px] font-black uppercase ${
+                                  nodeStatus === 'error'
+                                    ? 'bg-red-100 text-red-700'
+                                    : nodeStatus === 'warning'
+                                      ? 'bg-amber-100 text-amber-700'
+                                      : 'bg-emerald-100 text-emerald-700'
+                                }`}>
+                                  {nodeStatus}
+                                </span>
+                              </td>
+                              <td className="px-4 py-3 text-slate-500">{node.inputs.map((port) => port.type).join(', ') || 'NONE'}</td>
+                              <td className="px-4 py-3 text-slate-500">{node.outputs.map((port) => port.type).join(', ') || 'NONE'}</td>
+                              <td className="px-4 py-3 text-slate-500">{node.subtitle}</td>
+                            </tr>
+                            );
+                          })}
+                        </tbody>
+                      </table>
+                    )}
+
+                    {bottomTab === 'variables' && (
+                      <table className="min-w-[1180px] w-full text-left text-xs">
+                        <thead className="sticky top-0 bg-white border-b border-slate-200 text-slate-400 uppercase tracking-widest">
+                          <tr>
+                            <th className="px-4 py-3">Variable</th>
+                            <th className="px-4 py-3">Type</th>
+                            <th className="px-4 py-3">Scope</th>
+                            <th className="px-4 py-3">Source</th>
+                            <th className="px-4 py-3">Value</th>
+                            <th className="px-4 py-3">Status</th>
+                            <th className="px-4 py-3">Associated Data</th>
+                            <th className="px-4 py-3">Version Key</th>
+                            <th className="px-4 py-3">Quality</th>
+                            <th className="px-4 py-3">Used By Behavior</th>
+                            <th className="px-4 py-3">Description</th>
+                          </tr>
+                        </thead>
+                        <tbody className="divide-y divide-slate-100">
+                          {(selectedParameters.length ? selectedParameters : workflow.parameters).map((parameter) => {
+                            const associatedData = getAssociatedDataForVariable(parameter.name);
+                            return (
+                              <tr
+                                key={parameter.id}
+                                onClick={() => setSelectedVariableName(parameter.name)}
+                                className={`cursor-pointer ${
+                                  selectedVariableName === parameter.name
+                                    ? 'bg-blue-50'
+                                    : parameter.status === 'error' || associatedData?.qualityStatus === 'error'
+                                      ? 'bg-red-50/40'
+                                      : 'hover:bg-slate-50'
+                                }`}
+                              >
+                                <td className="px-4 py-3 font-mono font-black text-blue-700">{parameter.name}</td>
+                                <td className="px-4 py-3 text-slate-600">{parameter.type}</td>
+                                <td className="px-4 py-3 text-slate-500">{parameter.scope}</td>
+                                <td className="px-4 py-3 text-slate-500">{parameter.source}</td>
+                                <td className={`px-4 py-3 font-black ${parameter.status === 'error' ? 'text-red-600' : 'text-slate-900'}`}>{parameter.value}</td>
+                                <td className="px-4 py-3">
+                                  <span className={`px-2 py-1 rounded-full text-[10px] font-black uppercase ${
+                                    parameter.status === 'error'
+                                      ? 'bg-red-100 text-red-700'
+                                      : parameter.status === 'warning'
+                                        ? 'bg-amber-100 text-amber-700'
+                                        : 'bg-emerald-100 text-emerald-700'
+                                  }`}>
+                                    {parameter.status}
+                                  </span>
+                                </td>
+                                <td className="px-4 py-3 font-mono text-slate-600">{associatedData?.id ?? '-'}</td>
+                                <td className="px-4 py-3 text-slate-500">{associatedData?.versionKey ?? '-'}</td>
+                                <td className="px-4 py-3">
+                                  {associatedData ? (
+                                    <span className={`px-2 py-1 rounded-full text-[10px] font-black uppercase ${associatedData.qualityStatus === 'error' ? 'bg-red-100 text-red-700' : 'bg-emerald-100 text-emerald-700'}`}>
+                                      {associatedData.qualityStatus}
+                                    </span>
+                                  ) : (
+                                    <span className="text-slate-400">-</span>
+                                  )}
+                                </td>
+                                <td className="px-4 py-3 text-slate-500">{associatedData?.usedByBehavior ?? '-'}</td>
+                                <td className="px-4 py-3 text-slate-500">{parameter.description}</td>
+                              </tr>
+                            );
+                          })}
+                        </tbody>
+                      </table>
+                    )}
+
+                    {bottomTab === 'sensing' && (
+                      <div className="grid grid-cols-2 gap-3 p-4 min-w-[720px]">
+                        {(sensingSections.length ? sensingSections : selectedBehaviorSections).map((section) => (
+                          <section key={section.id} className="bg-white border border-slate-200 rounded-lg overflow-hidden">
+                            <header className="px-3 py-2 bg-slate-50 border-b border-slate-100">
+                              <h3 className="text-[11px] font-black uppercase tracking-widest text-slate-700">{section.title}</h3>
+                              <p className="text-[10px] text-slate-400 mt-1 leading-relaxed">{section.description}</p>
+                            </header>
+                            <div className="p-3 space-y-2">
+                              {section.items.map((item) => (
+                                <div key={`${section.id}-${item.label}`} className="p-2 rounded-md border border-slate-100 bg-slate-50">
+                                  <div className="text-[11px] font-black text-blue-700 font-mono">{item.label}</div>
+                                  <div className="text-[10px] text-slate-500 mt-1">{item.source}</div>
+                                  <div className="text-[10px] font-black text-slate-900 mt-1">{item.value}</div>
+                                </div>
+                              ))}
+                            </div>
+                          </section>
+                        ))}
                       </div>
-                      <p className="text-[11px] text-slate-500 mt-1 leading-relaxed">{section.description}</p>
-                    </div>
-                  ))}
+                    )}
+
+                    {bottomTab === 'internalModels' && (
+                      <div className="grid grid-cols-3 gap-3 p-4 min-w-[860px]">
+                        {internalModelSections.map((section) => (
+                          <section key={section.id} className="bg-white border border-slate-200 rounded-lg overflow-hidden">
+                            <header className="px-3 py-2 bg-slate-50 border-b border-slate-100">
+                              <h3 className="text-[11px] font-black uppercase tracking-widest text-slate-700">{section.title}</h3>
+                              <p className="text-[10px] text-slate-400 mt-1 leading-relaxed">{section.description}</p>
+                            </header>
+                            <div className="p-3 space-y-2">
+                              {section.items.map((item) => (
+                                <div key={`${section.id}-${item.label}`} className="p-2 rounded-md border border-slate-100 bg-slate-50">
+                                  <div className="text-[11px] font-black text-blue-700 font-mono">{item.label}</div>
+                                  <div className="text-[10px] text-slate-500 mt-1">{item.source}</div>
+                                  <div className="text-[10px] font-black text-slate-900 mt-1">{item.value}</div>
+                                </div>
+                              ))}
+                            </div>
+                          </section>
+                        ))}
+                      </div>
+                    )}
+
+                    {bottomTab === 'schedule' && (
+                      <table className="min-w-[1280px] w-full text-left text-xs">
+                        <thead className="sticky top-0 bg-white border-b border-slate-200 text-slate-400 uppercase tracking-widest">
+                          <tr>
+                            <th className="px-4 py-3">Schedule ID</th>
+                            <th className="px-4 py-3">Step Order</th>
+                            <th className="px-4 py-3">Phase</th>
+                            <th className="px-4 py-3">Actor Agent</th>
+                            <th className="px-4 py-3">Target Behavior</th>
+                            <th className="px-4 py-3">Trigger</th>
+                            <th className="px-4 py-3">Execution Mode</th>
+                            <th className="px-4 py-3">Time Unit</th>
+                            <th className="px-4 py-3">Condition</th>
+                            <th className="px-4 py-3">Repeat Rule</th>
+                            <th className="px-4 py-3">Depends On</th>
+                            <th className="px-4 py-3">Writes To</th>
+                            <th className="px-4 py-3">Notes</th>
+                          </tr>
+                        </thead>
+                        <tbody className="divide-y divide-slate-100">
+                          {scheduleRows.map((row) => (
+                            <tr key={row.id} className="hover:bg-slate-50">
+                              <td className="px-4 py-3 font-mono font-black text-blue-700">{row.id}</td>
+                              <td className="px-4 py-3 font-black text-slate-900">{row.order}</td>
+                              <td className="px-4 py-3 text-slate-500">{row.phase}</td>
+                              <td className="px-4 py-3 text-slate-700 font-black">{row.actorAgent}</td>
+                              <td className="px-4 py-3 font-mono text-blue-700 font-black">{row.targetBehavior}</td>
+                              <td className="px-4 py-3 text-slate-500">{row.trigger}</td>
+                              <td className="px-4 py-3 text-slate-500">{row.executionMode}</td>
+                              <td className="px-4 py-3 text-slate-500">{row.timeUnit}</td>
+                              <td className="px-4 py-3 text-slate-500">{row.condition}</td>
+                              <td className="px-4 py-3 text-slate-500">{row.repeatRule}</td>
+                              <td className="px-4 py-3 text-slate-500">{row.dependsOn}</td>
+                              <td className="px-4 py-3 text-slate-500">{row.writesTo}</td>
+                              <td className="px-4 py-3 text-slate-500">{row.notes}</td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    )}
+
+                    {bottomTab === 'data' && (
+                      <table className="min-w-[1280px] w-full text-left text-xs">
+                        <thead className="sticky top-0 bg-white border-b border-slate-200 text-slate-400 uppercase tracking-widest">
+                          <tr>
+                            <th className="px-4 py-3">Data ID</th>
+                            <th className="px-4 py-3">Data</th>
+                            <th className="px-4 py-3">Type</th>
+                            <th className="px-4 py-3">Source Type</th>
+                            <th className="px-4 py-3">Source Name</th>
+                            <th className="px-4 py-3">Source Table</th>
+                            <th className="px-4 py-3">Source Column</th>
+                            <th className="px-4 py-3">Owner Agent</th>
+                            <th className="px-4 py-3">Related Variable</th>
+                            <th className="px-4 py-3">Used By Behavior</th>
+                            <th className="px-4 py-3">Update Frequency</th>
+                            <th className="px-4 py-3">Version Key</th>
+                            <th className="px-4 py-3">Status</th>
+                          </tr>
+                        </thead>
+                        <tbody className="divide-y divide-slate-100">
+                          {associatedDataRows.map((row) => (
+                            <tr key={row.id} className={row.qualityStatus === 'error' ? 'bg-red-50/40' : 'hover:bg-slate-50'}>
+                              <td className="px-4 py-3 font-mono font-black text-slate-700">{row.id}</td>
+                              <td className="px-4 py-3 font-mono font-black text-blue-700">{row.name}</td>
+                              <td className="px-4 py-3 text-slate-500">{row.type}</td>
+                              <td className="px-4 py-3 text-slate-500">{row.sourceType}</td>
+                              <td className="px-4 py-3 text-slate-500">{row.sourceName}</td>
+                              <td className="px-4 py-3 text-slate-500">{row.sourceTable}</td>
+                              <td className="px-4 py-3 text-slate-500">{row.sourceColumn}</td>
+                              <td className="px-4 py-3 text-slate-700 font-black">{row.ownerAgent}</td>
+                              <td className="px-4 py-3 text-slate-500">{row.relatedVariable}</td>
+                              <td className="px-4 py-3 text-slate-500">{row.usedByBehavior}</td>
+                              <td className="px-4 py-3 text-slate-500">{row.updateFrequency}</td>
+                              <td className="px-4 py-3 text-slate-500">{row.versionKey}</td>
+                              <td className="px-4 py-3">
+                                <span className={`px-2 py-1 rounded-full text-[10px] font-black uppercase ${row.qualityStatus === 'error' ? 'bg-red-100 text-red-700' : 'bg-emerald-100 text-emerald-700'}`}>
+                                  {row.qualityStatus}
+                                </span>
+                              </td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    )}
+
+                    {bottomTab === 'io' && (
+                      <div className="min-w-[1440px]">
+                        <div className="sticky top-0 z-10 flex items-center justify-between gap-4 border-b border-slate-200 bg-white px-4 py-3">
+                          <div>
+                            <div className="text-[10px] font-black uppercase tracking-[0.2em] text-blue-600">Full Model I/O Contract</div>
+                            <p className="mt-1 text-[11px] text-slate-500">
+                              Showing {ioRows.length} total rows. {contextContracts.length} rows relate to {ioContextLabel}.
+                            </p>
+                          </div>
+                          <span className="rounded-full border border-blue-100 bg-blue-50 px-3 py-1 text-[10px] font-black uppercase text-blue-700">
+                            Context Highlight
+                          </span>
+                        </div>
+                        <table className="w-full text-left text-xs">
+                          <thead className="bg-white border-b border-slate-200 text-slate-400 uppercase tracking-widest">
+                          <tr>
+                            <th className="px-4 py-3">I/O ID</th>
+                            <th className="px-4 py-3">Component Type</th>
+                            <th className="px-4 py-3">Component ID</th>
+                            <th className="px-4 py-3">Component</th>
+                            <th className="px-4 py-3">Direction</th>
+                            <th className="px-4 py-3">Name</th>
+                            <th className="px-4 py-3">Type</th>
+                            <th className="px-4 py-3">Schema</th>
+                            <th className="px-4 py-3">Source Component</th>
+                            <th className="px-4 py-3">Source Table</th>
+                            <th className="px-4 py-3">Target Component</th>
+                            <th className="px-4 py-3">Target Table</th>
+                            <th className="px-4 py-3">Required</th>
+                            <th className="px-4 py-3">Default</th>
+                            <th className="px-4 py-3">Snapshot Policy</th>
+                          </tr>
+                        </thead>
+                        <tbody className="divide-y divide-slate-100">
+                          {ioRows.map((row) => {
+                            const isContextRow = contextContractIds.has(row.id);
+                            return (
+                            <tr key={row.id} className={isContextRow ? 'bg-blue-50/70 ring-1 ring-inset ring-blue-100' : 'hover:bg-slate-50'}>
+                              <td className={`px-4 py-3 font-mono font-black ${isContextRow ? 'text-blue-700' : 'text-slate-700'}`}>{row.id}</td>
+                              <td className="px-4 py-3 text-slate-500">{row.componentType}</td>
+                              <td className="px-4 py-3 font-mono text-slate-500">{row.componentId}</td>
+                              <td className="px-4 py-3 text-slate-700 font-black">{row.componentName}</td>
+                              <td className="px-4 py-3 text-slate-500">{row.direction}</td>
+                              <td className="px-4 py-3 font-mono font-black text-blue-700">{row.ioName}</td>
+                              <td className="px-4 py-3 text-slate-500">{row.ioDataType}</td>
+                              <td className="px-4 py-3 font-mono text-slate-500">{row.schema}</td>
+                              <td className="px-4 py-3 text-slate-500">{row.sourceComponent}</td>
+                              <td className="px-4 py-3 text-slate-500">{row.sourceTable}</td>
+                              <td className="px-4 py-3 text-slate-500">{row.targetComponent}</td>
+                              <td className="px-4 py-3 text-slate-500">{row.targetTable}</td>
+                              <td className="px-4 py-3 text-slate-900 font-black">{row.required}</td>
+                              <td className="px-4 py-3 text-slate-500">{row.defaultValue}</td>
+                              <td className="px-4 py-3 text-slate-500">{row.snapshotPolicy}</td>
+                            </tr>
+                            );
+                          })}
+                        </tbody>
+                      </table>
+                      </div>
+                    )}
+
+                    {bottomTab === 'validation' && (
+                      <div className="min-w-[1440px]">
+                        <div className="sticky top-0 z-10 flex items-center justify-between gap-4 border-b border-slate-200 bg-white px-4 py-3">
+                          <div>
+                            <div className="text-[10px] font-black uppercase tracking-[0.2em] text-red-600">Validation Checklist</div>
+                            <p className="mt-1 text-[11px] text-slate-500">
+                              Showing {validationRows.length} total checks. {selectedNodeValidations.length} checks relate to {selectedNode.title}.
+                            </p>
+                          </div>
+                          <span className="rounded-full border border-red-100 bg-red-50 px-3 py-1 text-[10px] font-black uppercase text-red-700">
+                            Context Highlight
+                          </span>
+                        </div>
+                        <table className="w-full text-left text-xs">
+                        <thead className="bg-white border-b border-slate-200 text-slate-400 uppercase tracking-widest">
+                          <tr>
+                            <th className="px-4 py-3">Validation ID</th>
+                            <th className="px-4 py-3">Target Type</th>
+                            <th className="px-4 py-3">Target ID</th>
+                            <th className="px-4 py-3">Target</th>
+                            <th className="px-4 py-3">Validation Type</th>
+                            <th className="px-4 py-3">Method</th>
+                            <th className="px-4 py-3">Metric</th>
+                            <th className="px-4 py-3">Baseline Data</th>
+                            <th className="px-4 py-3">Threshold</th>
+                            <th className="px-4 py-3">Frequency</th>
+                            <th className="px-4 py-3">Result Field</th>
+                            <th className="px-4 py-3">Severity</th>
+                            <th className="px-4 py-3">Status</th>
+                            <th className="px-4 py-3">Notes</th>
+                          </tr>
+                        </thead>
+                        <tbody className="divide-y divide-slate-100">
+                          {validationRows.map((row) => {
+                            const isNodeValidation = selectedNodeValidationIds.has(row.id);
+                            const rowTone = row.status === 'error' ? 'bg-red-50/40' : row.status === 'warning' ? 'bg-amber-50/40' : 'hover:bg-slate-50';
+                            return (
+                            <tr key={row.id} className={isNodeValidation ? 'bg-blue-50/70 ring-1 ring-inset ring-blue-100' : rowTone}>
+                              <td className={`px-4 py-3 font-mono font-black ${isNodeValidation ? 'text-blue-700' : 'text-slate-700'}`}>{row.id}</td>
+                              <td className="px-4 py-3 text-slate-500">{row.targetType}</td>
+                              <td className="px-4 py-3 font-mono text-slate-500">{row.targetId}</td>
+                              <td className="px-4 py-3 font-mono font-black text-blue-700">{row.targetName}</td>
+                              <td className="px-4 py-3 text-slate-500">{row.validationType}</td>
+                              <td className="px-4 py-3 text-slate-500">{row.method}</td>
+                              <td className="px-4 py-3 text-slate-500">{row.metric}</td>
+                              <td className="px-4 py-3 text-slate-500">{row.baselineData}</td>
+                              <td className="px-4 py-3 text-slate-900 font-black">{row.threshold}</td>
+                              <td className="px-4 py-3 text-slate-500">{row.frequency}</td>
+                              <td className="px-4 py-3 text-slate-500">{row.resultField}</td>
+                              <td className="px-4 py-3 text-slate-500">{row.severity}</td>
+                              <td className="px-4 py-3">
+                                <span className={`px-2 py-1 rounded-full text-[10px] font-black uppercase ${
+                                  row.status === 'error'
+                                    ? 'bg-red-100 text-red-700'
+                                    : row.status === 'warning'
+                                      ? 'bg-amber-100 text-amber-700'
+                                      : 'bg-emerald-100 text-emerald-700'
+                                }`}>
+                                  {row.status}
+                                </span>
+                              </td>
+                              <td className="px-4 py-3 text-slate-500">{row.notes}</td>
+                            </tr>
+                            );
+                          })}
+                        </tbody>
+                      </table>
+                      </div>
+                    )}
+                  </div>
                 </section>
                 </>
                 )}
@@ -751,7 +1408,7 @@ const OmniEditor: React.FC = () => {
             </aside>
           </section>
 
-          <section className={`${isDetailOpen ? 'h-72' : 'h-11'} border-t border-slate-200 bg-white flex flex-col shrink-0 transition-all duration-200`}>
+          <section className="hidden">
             <div
               className="h-11 bg-slate-50 border-b border-slate-200 flex items-center justify-between px-4 cursor-pointer"
               onClick={() => setIsDetailOpen((open) => !open)}
@@ -768,10 +1425,14 @@ const OmniEditor: React.FC = () => {
                   {isDetailOpen ? <PanelLeftClose className="w-4 h-4 -rotate-90" /> : <PanelLeftOpen className="w-4 h-4 rotate-90" />}
                 </button>
                 {[
-                  ['attributes', Table2, 'Attributes'],
-                  ['behavior', Workflow, 'Behavior'],
-                  ['json', Database, 'JSON Snapshot'],
-                  ['history', Terminal, 'Version History'],
+                  ['agents', Bot, 'Agents'],
+                  ['variables', Table2, 'Variables'],
+                  ['sensing', Eye, 'Sensing'],
+                  ['internalModels', Workflow, 'Internal Models'],
+                  ['schedule', Terminal, 'Schedule'],
+                  ['data', Database, 'Data'],
+                  ['io', Layers3, 'I/O'],
+                  ['validation', CheckCircle, 'Validation'],
                 ].map(([id, Icon, label]) => (
                   <button
                     key={id as string}
@@ -794,50 +1455,119 @@ const OmniEditor: React.FC = () => {
             </div>
 
             {isDetailOpen && <div className="flex-1 overflow-auto">
-              {bottomTab === 'attributes' && (
+              {bottomTab === 'agents' && (
                 <table className="w-full text-left text-xs">
                   <thead className="sticky top-0 bg-white border-b border-slate-200 text-slate-400 uppercase tracking-widest">
                     <tr>
-                      <th className="px-4 py-3">Attribute</th>
+                      <th className="px-4 py-3">Agent / Subject</th>
+                      <th className="px-4 py-3">Kind</th>
+                      <th className="px-4 py-3">Status</th>
+                      <th className="px-4 py-3">Inputs</th>
+                      <th className="px-4 py-3">Outputs</th>
+                      <th className="px-4 py-3">Description</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-slate-100">
+                    {workflow.nodes.map((node) => {
+                      const nodeStatus = getNodeStatusFromValidation(workflow, node.id);
+                      return (
+                      <tr key={node.id} className={selectedNode.id === node.id ? 'bg-blue-50/50' : 'hover:bg-slate-50'}>
+                        <td className="px-4 py-3 font-black text-slate-900">{node.title}</td>
+                        <td className="px-4 py-3 text-slate-500">{kindStyles[node.kind].label}</td>
+                        <td className="px-4 py-3">
+                          <span className={`px-2 py-1 rounded-full text-[10px] font-black uppercase ${
+                            nodeStatus === 'error'
+                              ? 'bg-red-100 text-red-700'
+                              : nodeStatus === 'warning'
+                                ? 'bg-amber-100 text-amber-700'
+                                : 'bg-emerald-100 text-emerald-700'
+                          }`}>
+                            {nodeStatus}
+                          </span>
+                        </td>
+                        <td className="px-4 py-3 text-slate-500">{node.inputs.map((port) => port.type).join(', ') || 'NONE'}</td>
+                        <td className="px-4 py-3 text-slate-500">{node.outputs.map((port) => port.type).join(', ') || 'NONE'}</td>
+                        <td className="px-4 py-3 text-slate-500">{node.subtitle}</td>
+                      </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              )}
+
+              {bottomTab === 'variables' && (
+                <table className="min-w-[1180px] w-full text-left text-xs">
+                  <thead className="sticky top-0 bg-white border-b border-slate-200 text-slate-400 uppercase tracking-widest">
+                    <tr>
+                      <th className="px-4 py-3">Variable</th>
                       <th className="px-4 py-3">Type</th>
                       <th className="px-4 py-3">Scope</th>
                       <th className="px-4 py-3">Source</th>
                       <th className="px-4 py-3">Value</th>
                       <th className="px-4 py-3">Status</th>
+                      <th className="px-4 py-3">Associated Data</th>
+                      <th className="px-4 py-3">Version Key</th>
+                      <th className="px-4 py-3">Quality</th>
+                      <th className="px-4 py-3">Used By Behavior</th>
                       <th className="px-4 py-3">Description</th>
                     </tr>
                   </thead>
                   <tbody className="divide-y divide-slate-100">
-                    {(selectedParameters.length ? selectedParameters : workflow.parameters).map((parameter) => (
-                      <tr key={parameter.id} className={parameter.status === 'error' ? 'bg-red-50/40' : 'hover:bg-slate-50'}>
-                        <td className="px-4 py-3 font-mono font-black text-blue-700">{parameter.name}</td>
-                        <td className="px-4 py-3 text-slate-600">{parameter.type}</td>
-                        <td className="px-4 py-3 text-slate-500">{parameter.scope}</td>
-                        <td className="px-4 py-3 text-slate-500">{parameter.source}</td>
-                        <td className={`px-4 py-3 font-black ${parameter.status === 'error' ? 'text-red-600' : 'text-slate-900'}`}>{parameter.value}</td>
-                        <td className="px-4 py-3">
-                          <span
-                            className={`px-2 py-1 rounded-full text-[10px] font-black uppercase ${
-                              parameter.status === 'error'
-                                ? 'bg-red-100 text-red-700'
-                                : parameter.status === 'warning'
-                                  ? 'bg-amber-100 text-amber-700'
-                                  : 'bg-emerald-100 text-emerald-700'
-                            }`}
-                          >
-                            {parameter.status}
-                          </span>
-                        </td>
-                        <td className="px-4 py-3 text-slate-500">{parameter.description}</td>
-                      </tr>
-                    ))}
+                    {(selectedParameters.length ? selectedParameters : workflow.parameters).map((parameter) => {
+                      const associatedData = getAssociatedDataForVariable(parameter.name);
+                      return (
+                        <tr
+                          key={parameter.id}
+                          onClick={() => setSelectedVariableName(parameter.name)}
+                          className={`cursor-pointer ${
+                            selectedVariableName === parameter.name
+                              ? 'bg-blue-50'
+                              : parameter.status === 'error' || associatedData?.qualityStatus === 'error'
+                                ? 'bg-red-50/40'
+                                : 'hover:bg-slate-50'
+                          }`}
+                        >
+                          <td className="px-4 py-3 font-mono font-black text-blue-700">{parameter.name}</td>
+                          <td className="px-4 py-3 text-slate-600">{parameter.type}</td>
+                          <td className="px-4 py-3 text-slate-500">{parameter.scope}</td>
+                          <td className="px-4 py-3 text-slate-500">{parameter.source}</td>
+                          <td className={`px-4 py-3 font-black ${parameter.status === 'error' ? 'text-red-600' : 'text-slate-900'}`}>{parameter.value}</td>
+                          <td className="px-4 py-3">
+                            <span
+                              className={`px-2 py-1 rounded-full text-[10px] font-black uppercase ${
+                                parameter.status === 'error'
+                                  ? 'bg-red-100 text-red-700'
+                                  : parameter.status === 'warning'
+                                    ? 'bg-amber-100 text-amber-700'
+                                    : 'bg-emerald-100 text-emerald-700'
+                              }`}
+                            >
+                              {parameter.status}
+                            </span>
+                          </td>
+                          <td className="px-4 py-3 font-mono text-slate-600">{associatedData?.id ?? '-'}</td>
+                          <td className="px-4 py-3 text-slate-500">{associatedData?.versionKey ?? '-'}</td>
+                          <td className="px-4 py-3">
+                            {associatedData ? (
+                              <span className={`px-2 py-1 rounded-full text-[10px] font-black uppercase ${associatedData.qualityStatus === 'error' ? 'bg-red-100 text-red-700' : 'bg-emerald-100 text-emerald-700'}`}>
+                                {associatedData.qualityStatus}
+                              </span>
+                            ) : (
+                              <span className="text-slate-400">-</span>
+                            )}
+                          </td>
+                          <td className="px-4 py-3 text-slate-500">{associatedData?.usedByBehavior ?? '-'}</td>
+                          <td className="px-4 py-3 text-slate-500">{parameter.description}</td>
+                        </tr>
+                      );
+                    })}
                   </tbody>
                 </table>
               )}
 
-              {bottomTab === 'behavior' && (
-                <div className="grid grid-cols-4 gap-3 p-4 min-w-[960px]">
-                  {selectedBehaviorSections.map((section) => (
+              {bottomTab === 'sensing' && (
+                <div className="grid grid-cols-2 gap-3 p-4 min-w-[720px]">
+                  {(sensingSections.length ? sensingSections : selectedBehaviorSections).map((section) => (
                     <section key={section.id} className="bg-white border border-slate-200 rounded-lg overflow-hidden">
                       <header className="px-3 py-2 bg-slate-50 border-b border-slate-100">
                         <h3 className="text-[11px] font-black uppercase tracking-widest text-slate-700">{section.title}</h3>
@@ -857,19 +1587,198 @@ const OmniEditor: React.FC = () => {
                 </div>
               )}
 
-              {bottomTab === 'json' && (
-                <pre className="p-5 font-mono text-xs leading-relaxed text-slate-700 bg-slate-50 h-full">
-                  {JSON.stringify({ selectedNode, attributes: selectedParameters.length ? selectedParameters : workflow.parameters, behavior: selectedBehaviorSections }, null, 2)}
-                </pre>
+              {bottomTab === 'internalModels' && (
+                <div className="grid grid-cols-3 gap-3 p-4 min-w-[860px]">
+                  {internalModelSections.map((section) => (
+                    <section key={section.id} className="bg-white border border-slate-200 rounded-lg overflow-hidden">
+                      <header className="px-3 py-2 bg-slate-50 border-b border-slate-100">
+                        <h3 className="text-[11px] font-black uppercase tracking-widest text-slate-700">{section.title}</h3>
+                        <p className="text-[10px] text-slate-400 mt-1 leading-relaxed">{section.description}</p>
+                      </header>
+                      <div className="p-3 space-y-2">
+                        {section.items.map((item) => (
+                          <div key={`${section.id}-${item.label}`} className="p-2 rounded-md border border-slate-100 bg-slate-50">
+                            <div className="text-[11px] font-black text-blue-700 font-mono">{item.label}</div>
+                            <div className="text-[10px] text-slate-500 mt-1">{item.source}</div>
+                            <div className="text-[10px] font-black text-slate-900 mt-1">{item.value}</div>
+                          </div>
+                        ))}
+                      </div>
+                    </section>
+                  ))}
+                </div>
               )}
 
-              {bottomTab === 'history' && (
-                <div className="p-5 bg-slate-950 h-full font-mono text-xs text-slate-300 space-y-2">
-                  <p><span className="text-emerald-400">COMMIT</span> Created default Environment and Example Agent.</p>
-                  <p><span className="text-blue-400">COMMIT</span> Added Grid Space with 40 x 40 defaults.</p>
-                  <p><span className="text-amber-400">BRANCH</span> Future AI edits will create reversible model versions.</p>
-                  <p><span className="text-purple-400">NEXT</span> Define observation fields and on_sensing output assignment.</p>
-                </div>
+              {bottomTab === 'schedule' && (
+                <table className="w-full text-left text-xs">
+                  <thead className="sticky top-0 bg-white border-b border-slate-200 text-slate-400 uppercase tracking-widest">
+                    <tr>
+                      <th className="px-4 py-3">Step</th>
+                      <th className="px-4 py-3">Phase</th>
+                      <th className="px-4 py-3">Actor</th>
+                      <th className="px-4 py-3">Behavior</th>
+                      <th className="px-4 py-3">Trigger</th>
+                      <th className="px-4 py-3">Mode</th>
+                      <th className="px-4 py-3">Writes To</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-slate-100">
+                    {scheduleRows.map((row) => (
+                      <tr key={`${row.order}-${row.targetBehavior}`} className="hover:bg-slate-50">
+                        <td className="px-4 py-3 font-black text-slate-900">{row.order}</td>
+                        <td className="px-4 py-3 text-slate-500">{row.phase}</td>
+                        <td className="px-4 py-3 text-slate-700 font-black">{row.actorAgent}</td>
+                        <td className="px-4 py-3 font-mono text-blue-700 font-black">{row.targetBehavior}</td>
+                        <td className="px-4 py-3 text-slate-500">{row.trigger}</td>
+                        <td className="px-4 py-3 text-slate-500">{row.executionMode}</td>
+                        <td className="px-4 py-3 text-slate-500">{row.writesTo}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              )}
+
+              {bottomTab === 'data' && (
+                <table className="min-w-[1280px] w-full text-left text-xs">
+                  <thead className="sticky top-0 bg-white border-b border-slate-200 text-slate-400 uppercase tracking-widest">
+                    <tr>
+                      <th className="px-4 py-3">Data ID</th>
+                      <th className="px-4 py-3">Data</th>
+                      <th className="px-4 py-3">Type</th>
+                      <th className="px-4 py-3">Source Type</th>
+                      <th className="px-4 py-3">Source Name</th>
+                      <th className="px-4 py-3">Source Table</th>
+                      <th className="px-4 py-3">Source Column</th>
+                      <th className="px-4 py-3">Owner Agent</th>
+                      <th className="px-4 py-3">Related Variable</th>
+                      <th className="px-4 py-3">Used By Behavior</th>
+                      <th className="px-4 py-3">Update Frequency</th>
+                      <th className="px-4 py-3">Version Key</th>
+                      <th className="px-4 py-3">Status</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-slate-100">
+                    {associatedDataRows.map((row) => (
+                      <tr key={row.id} className={row.qualityStatus === 'error' ? 'bg-red-50/40' : 'hover:bg-slate-50'}>
+                        <td className="px-4 py-3 font-mono font-black text-slate-700">{row.id}</td>
+                        <td className="px-4 py-3 font-mono font-black text-blue-700">{row.name}</td>
+                        <td className="px-4 py-3 text-slate-500">{row.type}</td>
+                        <td className="px-4 py-3 text-slate-500">{row.sourceType}</td>
+                        <td className="px-4 py-3 text-slate-500">{row.sourceName}</td>
+                        <td className="px-4 py-3 text-slate-500">{row.sourceTable}</td>
+                        <td className="px-4 py-3 text-slate-500">{row.sourceColumn}</td>
+                        <td className="px-4 py-3 text-slate-700 font-black">{row.ownerAgent}</td>
+                        <td className="px-4 py-3 text-slate-500">{row.relatedVariable}</td>
+                        <td className="px-4 py-3 text-slate-500">{row.usedByBehavior}</td>
+                        <td className="px-4 py-3 text-slate-500">{row.updateFrequency}</td>
+                        <td className="px-4 py-3 text-slate-500">{row.versionKey}</td>
+                        <td className="px-4 py-3">
+                          <span className={`px-2 py-1 rounded-full text-[10px] font-black uppercase ${row.qualityStatus === 'error' ? 'bg-red-100 text-red-700' : 'bg-emerald-100 text-emerald-700'}`}>
+                            {row.qualityStatus}
+                          </span>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              )}
+
+              {bottomTab === 'io' && (
+                <table className="min-w-[1440px] w-full text-left text-xs">
+                  <thead className="sticky top-0 bg-white border-b border-slate-200 text-slate-400 uppercase tracking-widest">
+                    <tr>
+                      <th className="px-4 py-3">I/O ID</th>
+                      <th className="px-4 py-3">Component Type</th>
+                      <th className="px-4 py-3">Component ID</th>
+                      <th className="px-4 py-3">Component</th>
+                      <th className="px-4 py-3">Direction</th>
+                      <th className="px-4 py-3">Name</th>
+                      <th className="px-4 py-3">Type</th>
+                      <th className="px-4 py-3">Schema</th>
+                      <th className="px-4 py-3">Source Component</th>
+                      <th className="px-4 py-3">Source Table</th>
+                      <th className="px-4 py-3">Target Component</th>
+                      <th className="px-4 py-3">Target Table</th>
+                      <th className="px-4 py-3">Required</th>
+                      <th className="px-4 py-3">Default</th>
+                      <th className="px-4 py-3">Snapshot Policy</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-slate-100">
+                    {ioRows.map((row) => (
+                      <tr key={row.id} className="hover:bg-slate-50">
+                        <td className="px-4 py-3 font-mono font-black text-slate-700">{row.id}</td>
+                        <td className="px-4 py-3 text-slate-500">{row.componentType}</td>
+                        <td className="px-4 py-3 font-mono text-slate-500">{row.componentId}</td>
+                        <td className="px-4 py-3 text-slate-700 font-black">{row.componentName}</td>
+                        <td className="px-4 py-3 text-slate-500">{row.direction}</td>
+                        <td className="px-4 py-3 font-mono font-black text-blue-700">{row.ioName}</td>
+                        <td className="px-4 py-3 text-slate-500">{row.ioDataType}</td>
+                        <td className="px-4 py-3 font-mono text-slate-500">{row.schema}</td>
+                        <td className="px-4 py-3 text-slate-500">{row.sourceComponent}</td>
+                        <td className="px-4 py-3 text-slate-500">{row.sourceTable}</td>
+                        <td className="px-4 py-3 text-slate-500">{row.targetComponent}</td>
+                        <td className="px-4 py-3 text-slate-500">{row.targetTable}</td>
+                        <td className="px-4 py-3 text-slate-900 font-black">{row.required}</td>
+                        <td className="px-4 py-3 text-slate-500">{row.defaultValue}</td>
+                        <td className="px-4 py-3 text-slate-500">{row.snapshotPolicy}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              )}
+
+              {bottomTab === 'validation' && (
+                <table className="min-w-[1440px] w-full text-left text-xs">
+                  <thead className="sticky top-0 bg-white border-b border-slate-200 text-slate-400 uppercase tracking-widest">
+                    <tr>
+                      <th className="px-4 py-3">Validation ID</th>
+                      <th className="px-4 py-3">Target Type</th>
+                      <th className="px-4 py-3">Target ID</th>
+                      <th className="px-4 py-3">Target</th>
+                      <th className="px-4 py-3">Validation Type</th>
+                      <th className="px-4 py-3">Method</th>
+                      <th className="px-4 py-3">Metric</th>
+                      <th className="px-4 py-3">Baseline Data</th>
+                      <th className="px-4 py-3">Threshold</th>
+                      <th className="px-4 py-3">Frequency</th>
+                      <th className="px-4 py-3">Result Field</th>
+                      <th className="px-4 py-3">Severity</th>
+                      <th className="px-4 py-3">Status</th>
+                      <th className="px-4 py-3">Notes</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-slate-100">
+                    {validationRows.map((row) => (
+                      <tr key={row.id} className={row.status === 'error' ? 'bg-red-50/40' : 'hover:bg-slate-50'}>
+                        <td className="px-4 py-3 font-mono font-black text-slate-700">{row.id}</td>
+                        <td className="px-4 py-3 text-slate-500">{row.targetType}</td>
+                        <td className="px-4 py-3 font-mono text-slate-500">{row.targetId}</td>
+                        <td className="px-4 py-3 font-mono font-black text-blue-700">{row.targetName}</td>
+                        <td className="px-4 py-3 text-slate-500">{row.validationType}</td>
+                        <td className="px-4 py-3 text-slate-500">{row.method}</td>
+                        <td className="px-4 py-3 text-slate-500">{row.metric}</td>
+                        <td className="px-4 py-3 text-slate-500">{row.baselineData}</td>
+                        <td className="px-4 py-3 text-slate-900 font-black">{row.threshold}</td>
+                        <td className="px-4 py-3 text-slate-500">{row.frequency}</td>
+                        <td className="px-4 py-3 text-slate-500">{row.resultField}</td>
+                        <td className="px-4 py-3 text-slate-500">{row.severity}</td>
+                        <td className="px-4 py-3">
+                          <span className={`px-2 py-1 rounded-full text-[10px] font-black uppercase ${
+                            row.status === 'error'
+                              ? 'bg-red-100 text-red-700'
+                              : row.status === 'warning'
+                                ? 'bg-amber-100 text-amber-700'
+                                : 'bg-emerald-100 text-emerald-700'
+                          }`}>
+                            {row.status}
+                          </span>
+                        </td>
+                        <td className="px-4 py-3 text-slate-500">{row.notes}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
               )}
             </div>}
           </section>
diff --git a/src/workflowModel.test.ts b/src/workflowModel.test.ts
index 26ce39a..7963fb5 100644
--- a/src/workflowModel.test.ts
+++ b/src/workflowModel.test.ts
@@ -1,5 +1,16 @@
 import assert from 'node:assert/strict';
-import { createDefaultWorkflow, getBehaviorSectionsForNode, getNodeConnectionAnchor, getParametersForNode } from './workflowModel';
+import {
+  buildRuntimeConfig,
+  createDefaultWorkflow,
+  ensureValidationChecklist,
+  getBehaviorSectionsForNode,
+  getInputOutputsForEdge,
+  getInputOutputsForNode,
+  getNodeConnectionAnchor,
+  getNodeStatusFromValidation,
+  getParametersForNode,
+  getValidationsForNode,
+} from './workflowModel';
 
 const baseWorkflow = createDefaultWorkflow();
 
@@ -10,6 +21,44 @@ assert.deepEqual(
 
 assert.equal(baseWorkflow.edges.length, 1);
 
+assert.equal(baseWorkflow.schedules.length, 3);
+assert.equal(baseWorkflow.schedules[0].id, 'S001');
+assert.equal(baseWorkflow.schedules[0].actorAgent, 'Environment');
+
+assert.equal(baseWorkflow.associatedData.length, 3);
+assert.equal(baseWorkflow.associatedData[0].sourceTable, 'model_initial_state');
+
+assert.equal(baseWorkflow.inputOutputs.length, 3);
+assert.equal(baseWorkflow.inputOutputs[0].snapshotPolicy, 'run_start');
+
+assert.equal(baseWorkflow.validations.length, 3);
+assert.equal(baseWorkflow.validations[0].severity, 'error');
+
+const runtimeConfig = buildRuntimeConfig(baseWorkflow);
+
+assert.equal(runtimeConfig.runtime.version, 'workflow-runtime-v1');
+assert.equal(runtimeConfig.runtime.ioContracts.length, 3);
+assert.deepEqual(runtimeConfig.runtime.ioContracts[0], {
+  id: 'IO001',
+  direction: 'input',
+  name: 'self.position',
+  dataType: 'Coordinate',
+  schema: '{ x: number, y: number }',
+  source: {
+    component: 'Grid Space',
+    table: 'space_cell_map',
+  },
+  target: {
+    component: 'Example Agent',
+    table: '-',
+  },
+  required: true,
+  defaultValue: null,
+  snapshotPolicy: 'run_start',
+});
+assert.equal(runtimeConfig.runtime.schedule[0].id, 'S001');
+assert.equal(runtimeConfig.runtime.validation[0].severity, 'error');
+
 const gridWorkflow = createDefaultWorkflow('grid');
 
 assert.deepEqual(
@@ -19,6 +68,57 @@ assert.deepEqual(
 
 assert.equal(gridWorkflow.edges.length, 2);
 
+const spaceToAgentContracts = getInputOutputsForEdge(gridWorkflow, 'e2');
+
+assert.deepEqual(
+  spaceToAgentContracts.map((row) => row.ioName),
+  ['self.position'],
+);
+
+const agentContracts = getInputOutputsForNode(gridWorkflow, 'example-agent');
+
+assert.deepEqual(
+  agentContracts.map((row) => row.ioName),
+  ['self.position', 'neighbor.race', 'self.happiness'],
+);
+
+assert.equal(getNodeStatusFromValidation(gridWorkflow, 'grid-space'), 'error');
+assert.equal(getNodeStatusFromValidation(gridWorkflow, 'example-agent'), 'ready');
+
+const gridValidations = getValidationsForNode(gridWorkflow, 'grid-space');
+
+assert.deepEqual(
+  gridValidations.map((row) => row.id),
+  ['V001'],
+);
+
+const generatedWorkflow = ensureValidationChecklist({
+  ...gridWorkflow,
+  nodes: [
+    ...gridWorkflow.nodes,
+    {
+      id: 'ai-output',
+      title: 'AI Output',
+      subtitle: 'Generated report output',
+      kind: 'output',
+      x: 360,
+      y: 120,
+      status: 'ready',
+      inputs: [{ id: 'report', label: 'report input', type: 'REPORT' }],
+      outputs: [],
+      config: [],
+    },
+  ],
+  validations: gridWorkflow.validations,
+});
+
+const generatedNodeValidations = getValidationsForNode(generatedWorkflow, 'ai-output');
+
+assert.deepEqual(
+  generatedNodeValidations.map((row) => row.method),
+  ['node_config_present', 'io_contract_coverage'],
+);
+
 const parameterRows = getParametersForNode(gridWorkflow, 'example-agent');
 
 assert.equal(parameterRows.length, 3);
diff --git a/src/workflowModel.ts b/src/workflowModel.ts
index 7236b20..a84fe7f 100644
--- a/src/workflowModel.ts
+++ b/src/workflowModel.ts
@@ -67,11 +67,82 @@ export interface BehaviorSection {
   items: Array<{ label: string; source: string; value: string }>;
 }
 
+export interface ScheduleRow {
+  id: string;
+  order: string;
+  phase: string;
+  actorAgent: string;
+  targetBehavior: string;
+  trigger: string;
+  executionMode: string;
+  timeUnit: string;
+  condition: string;
+  repeatRule: string;
+  dependsOn: string;
+  writesTo: string;
+  notes: string;
+}
+
+export interface AssociatedDataRow {
+  id: string;
+  name: string;
+  type: string;
+  sourceType: string;
+  sourceName: string;
+  sourceTable: string;
+  sourceColumn: string;
+  ownerAgent: string;
+  relatedVariable: string;
+  usedByBehavior: string;
+  updateFrequency: string;
+  versionKey: string;
+  qualityStatus: 'ok' | 'warning' | 'error';
+}
+
+export interface InputOutputRow {
+  id: string;
+  componentType: string;
+  componentId: string;
+  componentName: string;
+  direction: 'input' | 'output';
+  ioName: string;
+  ioDataType: string;
+  schema: string;
+  sourceComponent: string;
+  sourceTable: string;
+  targetComponent: string;
+  targetTable: string;
+  required: string;
+  defaultValue: string;
+  snapshotPolicy: string;
+}
+
+export interface ValidationRow {
+  id: string;
+  targetType: string;
+  targetId: string;
+  targetName: string;
+  validationType: string;
+  method: string;
+  metric: string;
+  baselineData: string;
+  threshold: string;
+  frequency: string;
+  resultField: string;
+  severity: 'error' | 'warning' | 'info';
+  status: 'ok' | 'warning' | 'error';
+  notes: string;
+}
+
 export interface WorkflowModel {
   nodes: WorkflowNode[];
   edges: WorkflowEdge[];
   parameters: WorkflowParameter[];
   behaviorSections: BehaviorSection[];
+  schedules: ScheduleRow[];
+  associatedData: AssociatedDataRow[];
+  inputOutputs: InputOutputRow[];
+  validations: ValidationRow[];
 }
 
 export type InitialSpaceType = 'grid' | 'network' | 'continuous' | 'gis';
@@ -308,6 +379,203 @@ export function createDefaultWorkflow(spaceType?: InitialSpaceType): WorkflowMod
         ],
       },
     ],
+    schedules: [
+      {
+        id: 'S001',
+        order: '1',
+        phase: 'initialize',
+        actorAgent: 'Environment',
+        targetBehavior: 'create_context',
+        trigger: 'model_start',
+        executionMode: 'sync',
+        timeUnit: 'tick',
+        condition: 'always',
+        repeatRule: 'once',
+        dependsOn: '-',
+        writesTo: 'ENV_CONTEXT',
+        notes: 'Create shared model context',
+      },
+      {
+        id: 'S002',
+        order: '2',
+        phase: 'initialize',
+        actorAgent: 'Grid Space',
+        targetBehavior: 'allocate_cells',
+        trigger: 'space_ready',
+        executionMode: 'sync',
+        timeUnit: 'tick',
+        condition: 'environment_ready',
+        repeatRule: 'once',
+        dependsOn: 'S001',
+        writesTo: 'SPACE_CONTEXT',
+        notes: 'Initialize spatial container',
+      },
+      {
+        id: 'S003',
+        order: '3',
+        phase: 'daily',
+        actorAgent: 'Example Agent',
+        targetBehavior: 'on_sensing',
+        trigger: 'every_tick',
+        executionMode: 'sync',
+        timeUnit: 'day',
+        condition: 'neighbor_radius valid',
+        repeatRule: 'every tick',
+        dependsOn: 'S002',
+        writesTo: 'happiness',
+        notes: 'Observe neighbors and update agent state',
+      },
+    ],
+    associatedData: [
+      {
+        id: 'D001',
+        name: 'agent_group_seed',
+        type: 'parameter',
+        sourceType: 'initialization',
+        sourceName: 'default workflow',
+        sourceTable: 'model_initial_state',
+        sourceColumn: 'race',
+        ownerAgent: 'Example Agent',
+        relatedVariable: 'race',
+        usedByBehavior: 'on_sensing',
+        updateFrequency: 'model start',
+        versionKey: 'workflow_v3',
+        qualityStatus: 'ok',
+      },
+      {
+        id: 'D002',
+        name: 'grid_position_map',
+        type: 'derived_data',
+        sourceType: 'space connection',
+        sourceName: 'Grid Space',
+        sourceTable: 'space_cell_map',
+        sourceColumn: 'x,y',
+        ownerAgent: 'Example Agent',
+        relatedVariable: 'position',
+        usedByBehavior: 'on_sensing',
+        updateFrequency: 'every tick',
+        versionKey: 'space_config_v1',
+        qualityStatus: 'ok',
+      },
+      {
+        id: 'D003',
+        name: 'neighbor_lookup_radius',
+        type: 'space_config',
+        sourceType: 'manual config',
+        sourceName: 'Grid Space',
+        sourceTable: 'space_parameters',
+        sourceColumn: 'neighbor_radius',
+        ownerAgent: 'Grid Space',
+        relatedVariable: 'neighbor_radius',
+        usedByBehavior: 'on_sensing',
+        updateFrequency: 'model start',
+        versionKey: 'missing',
+        qualityStatus: 'error',
+      },
+    ],
+    inputOutputs: [
+      {
+        id: 'IO001',
+        componentType: 'Behavior',
+        componentId: 'on_sensing',
+        componentName: 'on_sensing',
+        direction: 'input',
+        ioName: 'self.position',
+        ioDataType: 'Coordinate',
+        schema: '{ x: number, y: number }',
+        sourceComponent: 'Grid Space',
+        sourceTable: 'space_cell_map',
+        targetComponent: 'Example Agent',
+        targetTable: '-',
+        required: 'true',
+        defaultValue: '-',
+        snapshotPolicy: 'run_start',
+      },
+      {
+        id: 'IO002',
+        componentType: 'Behavior',
+        componentId: 'on_sensing',
+        componentName: 'on_sensing',
+        direction: 'input',
+        ioName: 'neighbor.race',
+        ioDataType: 'String',
+        schema: 'A | B',
+        sourceComponent: 'Observable pool',
+        sourceTable: 'agent_state',
+        targetComponent: 'Example Agent',
+        targetTable: '-',
+        required: 'true',
+        defaultValue: '-',
+        snapshotPolicy: 'each_tick',
+      },
+      {
+        id: 'IO003',
+        componentType: 'Behavior',
+        componentId: 'on_sensing',
+        componentName: 'on_sensing',
+        direction: 'output',
+        ioName: 'self.happiness',
+        ioDataType: 'Boolean',
+        schema: 'true | false',
+        sourceComponent: 'on_sensing',
+        sourceTable: '-',
+        targetComponent: 'Example Agent',
+        targetTable: 'agent_state',
+        required: 'true',
+        defaultValue: 'false',
+        snapshotPolicy: 'each_tick',
+      },
+    ],
+    validations: [
+      {
+        id: 'V001',
+        targetType: 'Variable',
+        targetId: 's2',
+        targetName: 'neighbor_radius',
+        validationType: 'schema_check',
+        method: 'required_value',
+        metric: 'missing_count',
+        baselineData: 'space_parameters.neighbor_radius',
+        threshold: '= 0',
+        frequency: 'model start',
+        resultField: 'validation.required_missing',
+        severity: 'error',
+        status: 'error',
+        notes: 'Required for on_sensing neighborhood lookup',
+      },
+      {
+        id: 'V002',
+        targetType: 'Behavior',
+        targetId: 'on_sensing',
+        targetName: 'on_sensing',
+        validationType: 'rule_check',
+        method: 'output_assignment',
+        metric: 'assigned',
+        baselineData: 'self.happiness',
+        threshold: 'true',
+        frequency: 'every tick',
+        resultField: 'behavior.output_valid',
+        severity: 'error',
+        status: 'ok',
+        notes: 'Behavior must write a Boolean result to the agent state',
+      },
+      {
+        id: 'V003',
+        targetType: 'Workflow',
+        targetId: 'workflow_v3',
+        targetName: 'workflow',
+        validationType: 'reproducibility',
+        method: 'input_snapshot',
+        metric: 'coverage',
+        baselineData: 'all required I/O rows',
+        threshold: '100%',
+        frequency: 'before run',
+        resultField: 'run.snapshot_coverage',
+        severity: 'warning',
+        status: 'warning',
+        notes: 'All required inputs should be captured for reproduction',
+      },
+    ],
   };
 }
 
@@ -319,6 +587,171 @@ export function getBehaviorSectionsForNode(workflow: WorkflowModel, nodeId: stri
   return workflow.behaviorSections.filter((section) => section.nodeId === nodeId);
 }
 
+export function getInputOutputsForEdge(workflow: WorkflowModel, edgeId: string) {
+  const edge = workflow.edges.find((workflowEdge) => workflowEdge.id === edgeId);
+  if (!edge) return [];
+
+  const sourceNode = workflow.nodes.find((node) => node.id === edge.source);
+  const targetNode = workflow.nodes.find((node) => node.id === edge.target);
+  if (!sourceNode || !targetNode) return [];
+
+  return workflow.inputOutputs.filter((row) => (
+    row.sourceComponent === sourceNode.title
+    && row.targetComponent === targetNode.title
+  ));
+}
+
+export function getInputOutputsForNode(workflow: WorkflowModel, nodeId: string) {
+  const node = workflow.nodes.find((workflowNode) => workflowNode.id === nodeId);
+  if (!node) return [];
+
+  return workflow.inputOutputs.filter((row) => (
+    row.sourceComponent === node.title
+    || row.targetComponent === node.title
+  ));
+}
+
+function validationBelongsToNode(workflow: WorkflowModel, validation: ValidationRow, node: WorkflowNode) {
+  if (validation.targetId === node.id || validation.targetName === node.title) return true;
+
+  if (validation.targetType === 'Variable') {
+    return workflow.parameters.some((parameter) => (
+      parameter.nodeId === node.id
+      && (parameter.id === validation.targetId || parameter.name === validation.targetName)
+    ));
+  }
+
+  if (validation.targetType === 'Behavior') {
+    return workflow.behaviorSections.some((section) => (
+      section.nodeId === node.id
+      && (section.id === validation.targetId || section.title === validation.targetName || validation.targetId === 'on_sensing')
+    ));
+  }
+
+  return false;
+}
+
+export function getValidationsForNode(workflow: WorkflowModel, nodeId: string) {
+  const node = workflow.nodes.find((workflowNode) => workflowNode.id === nodeId);
+  if (!node) return [];
+
+  return workflow.validations.filter((validation) => validationBelongsToNode(workflow, validation, node));
+}
+
+function createNodeValidationChecklist(workflow: WorkflowModel, node: WorkflowNode): ValidationRow[] {
+  const hasIoContract = workflow.inputOutputs.some((row) => (
+    row.sourceComponent === node.title
+    || row.targetComponent === node.title
+  ));
+
+  return [
+    {
+      id: `AUTO-${node.id}-CONFIG`,
+      targetType: 'Node',
+      targetId: node.id,
+      targetName: node.title,
+      validationType: 'schema_check',
+      method: 'node_config_present',
+      metric: 'config_items',
+      baselineData: `${node.id}.config`,
+      threshold: '> 0',
+      frequency: 'before run',
+      resultField: `validation.${node.id}.config_present`,
+      severity: 'warning',
+      status: node.config.length > 0 ? 'ok' : 'warning',
+      notes: 'Generated checklist item: node should have explicit configuration before running.',
+    },
+    {
+      id: `AUTO-${node.id}-IO`,
+      targetType: 'Node',
+      targetId: node.id,
+      targetName: node.title,
+      validationType: 'contract_check',
+      method: 'io_contract_coverage',
+      metric: 'io_contract_count',
+      baselineData: 'inputOutputs',
+      threshold: node.inputs.length || node.outputs.length ? '> 0' : '>= 0',
+      frequency: 'before run',
+      resultField: `validation.${node.id}.io_contract_coverage`,
+      severity: 'warning',
+      status: hasIoContract || (!node.inputs.length && !node.outputs.length) ? 'ok' : 'warning',
+      notes: 'Generated checklist item: node ports should be represented by I/O contract rows.',
+    },
+  ];
+}
+
+export function ensureValidationChecklist(workflow: WorkflowModel): WorkflowModel {
+  const existingIds = new Set(workflow.validations.map((validation) => validation.id));
+  const generatedValidations = workflow.nodes.flatMap((node) => (
+    createNodeValidationChecklist(workflow, node).filter((validation) => !existingIds.has(validation.id))
+  ));
+
+  if (!generatedValidations.length) return workflow;
+
+  return {
+    ...workflow,
+    validations: [...workflow.validations, ...generatedValidations],
+  };
+}
+
+export function getNodeStatusFromValidation(workflow: WorkflowModel, nodeId: string): WorkflowNodeStatus {
+  const node = workflow.nodes.find((workflowNode) => workflowNode.id === nodeId);
+  if (!node) return 'ready';
+
+  const relatedValidations = getValidationsForNode(workflow, node.id);
+
+  if (relatedValidations.some((validation) => validation.status === 'error')) return 'error';
+  if (relatedValidations.some((validation) => validation.status === 'warning')) return 'warning';
+
+  return node.status === 'success' ? 'success' : 'ready';
+}
+
+export function buildRuntimeConfig(workflow: WorkflowModel) {
+  const workflowWithChecklist = ensureValidationChecklist(workflow);
+
+  return {
+    runtime: {
+      version: 'workflow-runtime-v1',
+      model: {
+        nodes: workflowWithChecklist.nodes.map((node) => ({
+          id: node.id,
+          kind: node.kind,
+          title: node.title,
+          status: node.status,
+        })),
+        edges: workflowWithChecklist.edges.map((edge) => ({
+          id: edge.id,
+          source: edge.source,
+          target: edge.target,
+          type: edge.type,
+          label: edge.label,
+        })),
+      },
+      ioContracts: workflowWithChecklist.inputOutputs.map((row) => ({
+        id: row.id,
+        direction: row.direction,
+        name: row.ioName,
+        dataType: row.ioDataType,
+        schema: row.schema,
+        source: {
+          component: row.sourceComponent,
+          table: row.sourceTable,
+        },
+        target: {
+          component: row.targetComponent,
+          table: row.targetTable,
+        },
+        required: row.required === 'true',
+        defaultValue: row.defaultValue === '-' ? null : row.defaultValue,
+        snapshotPolicy: row.snapshotPolicy,
+      })),
+      schedule: workflowWithChecklist.schedules,
+      associatedData: workflowWithChecklist.associatedData,
+      validation: workflowWithChecklist.validations,
+    },
+  };
+}
+
 export const NODE_CARD_SIZE = {
   width: 176,
   height: 128,