@almadar/std 2.1.1 → 2.4.1

package/dist/behaviors/infrastructure.js

@@ -1,4 +1,251 @@
 // behaviors/infrastructure.ts
+var INFRA_THEME = {
+  name: "infra-stone",
+  tokens: {
+    colors: {
+      primary: "#57534e",
+      "primary-hover": "#44403c",
+      "primary-foreground": "#ffffff",
+      accent: "#78716c",
+      "accent-foreground": "#ffffff",
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#ef4444"
+    }
+  }
+};
+var circuitBreakerMainView = ["render-ui", "main", {
+  type: "stack",
+  direction: "vertical",
+  gap: "lg",
+  children: [
+    { type: "stack", direction: "horizontal", justify: "space-between", children: [
+      { type: "stack", direction: "horizontal", gap: "sm", children: [
+        { type: "icon", name: "shield-check", size: "lg" },
+        { type: "typography", content: "Circuit Breaker", variant: "h2" }
+      ] },
+      { type: "badge", label: "@entity.circuitState", icon: "circle-dot", variant: "success" }
+    ] },
+    { type: "divider" },
+    { type: "progress-bar", value: "@entity.errorCount", max: "@entity.errorThreshold", label: "Error Rate" },
+    { type: "stack", direction: "horizontal", gap: "md", children: [
+      { type: "stat-card", label: "Errors", value: "@entity.errorCount", icon: "x-circle" },
+      { type: "stat-card", label: "Successes", value: "@entity.successCount", icon: "check-circle" },
+      { type: "stat-card", label: "Total", value: "@entity.totalCount", icon: "hash" },
+      { type: "stat-card", label: "Threshold", value: "@entity.errorThreshold", icon: "alert-triangle" }
+    ] },
+    { type: "divider" },
+    { type: "stack", direction: "horizontal", gap: "sm", children: [
+      { type: "button", label: "Simulate Success", action: "SUCCESS", icon: "check", variant: "primary" },
+      { type: "button", label: "Simulate Failure", action: "FAILURE", icon: "x", variant: "secondary" },
+      { type: "button", label: "Reset", action: "RESET", icon: "refresh-cw", variant: "secondary" }
+    ] }
+  ]
+}];
+var circuitBreakerOpenView = ["render-ui", "main", {
+  type: "stack",
+  direction: "vertical",
+  gap: "lg",
+  children: [
+    { type: "stack", direction: "horizontal", justify: "space-between", children: [
+      { type: "stack", direction: "horizontal", gap: "sm", children: [
+        { type: "icon", name: "shield-alert", size: "lg" },
+        { type: "typography", content: "Circuit Breaker - OPEN", variant: "h2" }
+      ] },
+      { type: "badge", label: "OPEN", icon: "alert-circle", variant: "danger" }
+    ] },
+    { type: "divider" },
+    { type: "progress-bar", value: "@entity.errorCount", max: "@entity.errorThreshold", label: "Errors" },
+    { type: "stack", direction: "horizontal", gap: "md", children: [
+      { type: "stat-card", label: "Errors", value: "@entity.errorCount", icon: "x-circle" },
+      { type: "stat-card", label: "Successes", value: "@entity.successCount", icon: "check-circle" },
+      { type: "stat-card", label: "Total", value: "@entity.totalCount", icon: "hash" },
+      { type: "stat-card", label: "Error Rate", value: "@entity.errorRate", icon: "percent" }
+    ] },
+    { type: "divider" },
+    { type: "stack", direction: "horizontal", gap: "sm", children: [
+      { type: "button", label: "Try Half-Open", action: "HALF_OPEN", icon: "shield-question", variant: "primary" },
+      { type: "button", label: "Reset", action: "RESET", icon: "refresh-cw", variant: "secondary" }
+    ] }
+  ]
+}];
+var circuitBreakerHalfOpenView = ["render-ui", "main", {
+  type: "stack",
+  direction: "vertical",
+  gap: "lg",
+  children: [
+    { type: "stack", direction: "horizontal", justify: "space-between", children: [
+      { type: "stack", direction: "horizontal", gap: "sm", children: [
+        { type: "icon", name: "shield-question", size: "lg" },
+        { type: "typography", content: "Circuit Breaker - Half Open", variant: "h2" }
+      ] },
+      { type: "badge", label: "HALF-OPEN", icon: "alert-triangle", variant: "warning" }
+    ] },
+    { type: "divider" },
+    { type: "stack", direction: "horizontal", gap: "md", children: [
+      { type: "stat-card", label: "Errors", value: "@entity.errorCount", icon: "x-circle" },
+      { type: "stat-card", label: "Successes", value: "@entity.successCount", icon: "check-circle" },
+      { type: "stat-card", label: "Attempts", value: "@entity.halfOpenAttempts", icon: "rotate-cw" },
+      { type: "stat-card", label: "Error Rate", value: "@entity.errorRate", icon: "percent" }
+    ] },
+    { type: "divider" },
+    { type: "stack", direction: "horizontal", gap: "sm", children: [
+      { type: "button", label: "Test Success", action: "SUCCESS", icon: "check", variant: "primary" },
+      { type: "button", label: "Test Failure", action: "FAILURE", icon: "x", variant: "secondary" }
+    ] }
+  ]
+}];
+var healthCheckView = (title, statusVariant) => ["render-ui", "main", {
+  type: "stack",
+  direction: "vertical",
+  gap: "lg",
+  children: [
+    { type: "stack", direction: "horizontal", justify: "space-between", children: [
+      { type: "stack", direction: "horizontal", gap: "sm", children: [
+        { type: "icon", name: "activity", size: "lg" },
+        { type: "typography", content: title, variant: "h2" }
+      ] },
+      { type: "badge", label: "@entity.healthStatus", icon: "heart-pulse", variant: statusVariant }
+    ] },
+    { type: "divider" },
+    { type: "progress-bar", value: "@entity.consecutiveFailures", max: "@entity.unhealthyThreshold", label: "Failure Threshold" },
+    { type: "stack", direction: "horizontal", gap: "md", children: [
+      { type: "stat-card", label: "Failures", value: "@entity.consecutiveFailures", icon: "x-circle" },
+      { type: "stat-card", label: "Successes", value: "@entity.consecutiveSuccesses", icon: "check-circle" },
+      { type: "stat-card", label: "Total Checks", value: "@entity.totalChecks", icon: "clipboard-check" },
+      { type: "stat-card", label: "Total Failures", value: "@entity.totalFailures", icon: "alert-triangle" }
+    ] },
+    { type: "divider" },
+    { type: "stack", direction: "horizontal", gap: "sm", children: [
+      { type: "button", label: "Check Success", action: "CHECK_SUCCESS", icon: "check", variant: "primary" },
+      { type: "button", label: "Check Failure", action: "CHECK_FAILURE", icon: "x", variant: "secondary" },
+      { type: "button", label: "Reset", action: "RESET", icon: "refresh-cw", variant: "secondary" }
+    ] }
+  ]
+}];
+var rateLimiterView = (title) => ["render-ui", "main", {
+  type: "stack",
+  direction: "vertical",
+  gap: "lg",
+  children: [
+    { type: "stack", direction: "horizontal", justify: "space-between", children: [
+      { type: "stack", direction: "horizontal", gap: "sm", children: [
+        { type: "icon", name: "gauge", size: "lg" },
+        { type: "typography", content: title, variant: "h2" }
+      ] }
+    ] },
+    { type: "divider" },
+    { type: "progress-bar", value: "@entity.requestCount", max: "@entity.rateLimit", label: "Rate Usage" },
+    { type: "stack", direction: "horizontal", gap: "md", children: [
+      { type: "stat-card", label: "Requests", value: "@entity.requestCount", icon: "arrow-up-right" },
+      { type: "stat-card", label: "Limit", value: "@entity.rateLimit", icon: "shield" },
+      { type: "stat-card", label: "Total", value: "@entity.totalRequests", icon: "hash" },
+      { type: "stat-card", label: "Rejected", value: "@entity.rejectedRequests", icon: "ban" }
+    ] },
+    { type: "divider" },
+    { type: "stack", direction: "horizontal", gap: "sm", children: [
+      { type: "button", label: "Send Request", action: "REQUEST", icon: "send", variant: "primary" },
+      { type: "button", label: "Reset Window", action: "RESET_WINDOW", icon: "refresh-cw", variant: "secondary" }
+    ] }
+  ]
+}];
+var cacheStatsView = (title) => ["render-ui", "main", {
+  type: "stack",
+  direction: "vertical",
+  gap: "lg",
+  children: [
+    { type: "stack", direction: "horizontal", justify: "space-between", children: [
+      { type: "stack", direction: "horizontal", gap: "sm", children: [
+        { type: "icon", name: "database", size: "lg" },
+        { type: "typography", content: title, variant: "h2" }
+      ] },
+      { type: "badge", label: "@entity.isFresh", icon: "check-circle", variant: "outline" }
+    ] },
+    { type: "divider" },
+    { type: "stack", direction: "horizontal", gap: "md", children: [
+      { type: "stat-card", label: "Key", value: "@entity.cacheKey", icon: "key" },
+      { type: "stat-card", label: "Hits", value: "@entity.cacheHits", icon: "check" },
+      { type: "stat-card", label: "Misses", value: "@entity.cacheMisses", icon: "x" },
+      { type: "stat-card", label: "TTL (ms)", value: "@entity.ttlMs", icon: "clock" }
+    ] },
+    { type: "divider" },
+    { type: "stack", direction: "horizontal", gap: "sm", children: [
+      { type: "button", label: "Get", action: "GET", icon: "download", variant: "primary" },
+      { type: "button", label: "Invalidate", action: "INVALIDATE", icon: "trash-2", variant: "secondary" }
+    ] }
+  ]
+}];
+var cacheEmptyView = (title) => ["render-ui", "main", {
+  type: "stack",
+  direction: "vertical",
+  gap: "lg",
+  children: [
+    { type: "stack", direction: "horizontal", gap: "sm", children: [
+      { type: "icon", name: "database", size: "lg" },
+      { type: "typography", content: title, variant: "h2" }
+    ] },
+    { type: "divider" },
+    { type: "empty-state", icon: "inbox", title: "Cache is empty", description: "No cached data available" },
+    { type: "stack", direction: "horizontal", gap: "md", children: [
+      { type: "stat-card", label: "Hits", value: "@entity.cacheHits", icon: "check" },
+      { type: "stat-card", label: "Misses", value: "@entity.cacheMisses", icon: "x" }
+    ] },
+    { type: "divider" },
+    { type: "button", label: "Fetch Data", action: "SET", icon: "download", variant: "primary" }
+  ]
+}];
+var sagaView = (title) => ["render-ui", "main", {
+  type: "stack",
+  direction: "vertical",
+  gap: "lg",
+  children: [
+    { type: "stack", direction: "horizontal", justify: "space-between", children: [
+      { type: "stack", direction: "horizontal", gap: "sm", children: [
+        { type: "icon", name: "workflow", size: "lg" },
+        { type: "typography", content: title, variant: "h2" }
+      ] },
+      { type: "badge", label: "@entity.sagaStatus", icon: "flag", variant: "outline" }
+    ] },
+    { type: "divider" },
+    { type: "progress-bar", value: "@entity.currentStep", max: "@entity.totalSteps", label: "Progress" },
+    { type: "stack", direction: "horizontal", gap: "md", children: [
+      { type: "stat-card", label: "Current Step", value: "@entity.currentStep", icon: "footprints" },
+      { type: "stat-card", label: "Total Steps", value: "@entity.totalSteps", icon: "list-ordered" },
+      { type: "stat-card", label: "Failed Step", value: "@entity.failedStep", icon: "alert-circle" },
+      { type: "stat-card", label: "Status", value: "@entity.sagaStatus", icon: "flag" }
+    ] },
+    { type: "divider" },
+    { type: "stack", direction: "horizontal", gap: "sm", children: [
+      { type: "button", label: "Execute", action: "EXECUTE", icon: "play", variant: "primary" },
+      { type: "button", label: "Compensate", action: "COMPENSATE", icon: "undo-2", variant: "secondary" },
+      { type: "button", label: "Reset", action: "RESET", icon: "refresh-cw", variant: "secondary" }
+    ] }
+  ]
+}];
+var metricsView = (title) => ["render-ui", "main", {
+  type: "stack",
+  direction: "vertical",
+  gap: "lg",
+  children: [
+    { type: "stack", direction: "horizontal", justify: "space-between", children: [
+      { type: "stack", direction: "horizontal", gap: "sm", children: [
+        { type: "icon", name: "bar-chart-3", size: "lg" },
+        { type: "typography", content: title, variant: "h2" }
+      ] }
+    ] },
+    { type: "divider" },
+    { type: "stack", direction: "horizontal", gap: "md", children: [
+      { type: "stat-card", label: "Recorded", value: "@entity.totalRecorded", icon: "database" },
+      { type: "stat-card", label: "Flushes", value: "@entity.totalFlushes", icon: "upload" },
+      { type: "stat-card", label: "Last Flush", value: "@entity.lastFlush", icon: "clock" }
+    ] },
+    { type: "divider" },
+    { type: "stack", direction: "horizontal", gap: "sm", children: [
+      { type: "button", label: "Record", action: "RECORD", icon: "plus", variant: "primary" },
+      { type: "button", label: "Flush", action: "FLUSH", icon: "upload", variant: "secondary" }
+    ] }
+  ]
+}];
 var CIRCUIT_BREAKER_BEHAVIOR = {
   name: "std-circuit-breaker",
   version: "1.0.0",
@@ -6,6 +253,7 @@ var CIRCUIT_BREAKER_BEHAVIOR = {
   orbitals: [
     {
       name: "CircuitBreakerOrbital",
+      theme: INFRA_THEME,
       entity: {
         name: "CircuitBreakerState",
         persistence: "runtime",
@@ -16,8 +264,8 @@ var CIRCUIT_BREAKER_BEHAVIOR = {
           { name: "errorRate", type: "number", default: 0 },
           { name: "successCount", type: "number", default: 0 },
           { name: "totalCount", type: "number", default: 0 },
-          { name: "lastFailure", type: "number", default: null },
-          { name: "lastSuccess", type: "number", default: null },
+          { name: "lastFailure", type: "number", default: 0 },
+          { name: "lastSuccess", type: "number", default: 0 },
           { name: "errorThreshold", type: "number", default: 5 },
           { name: "errorRateThreshold", type: "number", default: 0.5 },
           { name: "resetAfterMs", type: "number", default: 6e4 },
@@ -29,12 +277,7 @@ var CIRCUIT_BREAKER_BEHAVIOR = {
         {
           name: "CircuitBreaker",
           linkedEntity: "CircuitBreakerState",
-          category: "lifecycle",
-          emits: [
-            { event: "CIRCUIT_OPENED", scope: "external" },
-            { event: "CIRCUIT_CLOSED", scope: "external" },
-            { event: "CIRCUIT_HALF_OPEN", scope: "external" }
-          ],
+          category: "interaction",
           stateMachine: {
             states: [
               { name: "Closed", isInitial: true },
@@ -42,22 +285,35 @@ var CIRCUIT_BREAKER_BEHAVIOR = {
               { name: "HalfOpen" }
             ],
             events: [
+              { key: "INIT", name: "Initialize" },
               { key: "RECORD_SUCCESS", name: "Record Success" },
               { key: "RECORD_FAILURE", name: "Record Failure" },
               { key: "PROBE", name: "Probe" },
               { key: "RESET", name: "Reset" }
             ],
             transitions: [
+              // INIT: render dashboard
+              {
+                from: "Closed",
+                to: "Closed",
+                event: "INIT",
+                effects: [
+                  ["fetch", "CircuitBreakerState"],
+                  circuitBreakerMainView
+                ]
+              },
               // Closed: record success
               {
                 from: "Closed",
                 to: "Closed",
                 event: "RECORD_SUCCESS",
                 effects: [
+                  ["fetch", "CircuitBreakerState"],
                   ["set", "@entity.successCount", ["+", "@entity.successCount", 1]],
                   ["set", "@entity.totalCount", ["+", "@entity.totalCount", 1]],
                   ["set", "@entity.lastSuccess", ["time/now"]],
-                  ["set", "@entity.errorRate", ["/", "@entity.errorCount", ["math/max", "@entity.totalCount", 1]]]
+                  ["set", "@entity.errorRate", ["/", "@entity.errorCount", ["math/max", "@entity.totalCount", 1]]],
+                  circuitBreakerMainView
                 ]
               },
               // Closed: record failure, stay closed if under threshold
@@ -67,10 +323,12 @@ var CIRCUIT_BREAKER_BEHAVIOR = {
                 event: "RECORD_FAILURE",
                 guard: ["<", ["+", "@entity.errorCount", 1], "@entity.errorThreshold"],
                 effects: [
+                  ["fetch", "CircuitBreakerState"],
                   ["set", "@entity.errorCount", ["+", "@entity.errorCount", 1]],
                   ["set", "@entity.totalCount", ["+", "@entity.totalCount", 1]],
                   ["set", "@entity.lastFailure", ["time/now"]],
-                  ["set", "@entity.errorRate", ["/", ["+", "@entity.errorCount", 1], ["math/max", "@entity.totalCount", 1]]]
+                  ["set", "@entity.errorRate", ["/", ["+", "@entity.errorCount", 1], ["math/max", "@entity.totalCount", 1]]],
+                  circuitBreakerMainView
                 ]
               },
               // Closed -> Open: threshold exceeded
@@ -80,11 +338,13 @@ var CIRCUIT_BREAKER_BEHAVIOR = {
                 event: "RECORD_FAILURE",
                 guard: [">=", ["+", "@entity.errorCount", 1], "@entity.errorThreshold"],
                 effects: [
+                  ["fetch", "CircuitBreakerState"],
                   ["set", "@entity.errorCount", ["+", "@entity.errorCount", 1]],
                   ["set", "@entity.totalCount", ["+", "@entity.totalCount", 1]],
                   ["set", "@entity.lastFailure", ["time/now"]],
                   ["set", "@entity.errorRate", ["/", ["+", "@entity.errorCount", 1], ["math/max", "@entity.totalCount", 1]]],
-                  ["emit", "CIRCUIT_OPENED", { errorCount: "@entity.errorCount", errorRate: "@entity.errorRate" }]
+                  ["set", "@entity.circuitState", "open"],
+                  circuitBreakerOpenView
                 ]
               },
               // Open -> HalfOpen: probe after reset timeout
@@ -94,8 +354,10 @@ var CIRCUIT_BREAKER_BEHAVIOR = {
                 event: "PROBE",
                 guard: [">", ["-", ["time/now"], "@entity.lastFailure"], "@entity.resetAfterMs"],
                 effects: [
+                  ["fetch", "CircuitBreakerState"],
                   ["set", "@entity.halfOpenAttempts", 0],
-                  ["emit", "CIRCUIT_HALF_OPEN", {}]
+                  ["set", "@entity.circuitState", "halfOpen"],
+                  circuitBreakerHalfOpenView
                 ]
               },
               // HalfOpen: success -> close
@@ -104,12 +366,14 @@ var CIRCUIT_BREAKER_BEHAVIOR = {
                 to: "Closed",
                 event: "RECORD_SUCCESS",
                 effects: [
+                  ["fetch", "CircuitBreakerState"],
                   ["set", "@entity.errorCount", 0],
                   ["set", "@entity.errorRate", 0],
                   ["set", "@entity.halfOpenAttempts", 0],
                   ["set", "@entity.successCount", ["+", "@entity.successCount", 1]],
                   ["set", "@entity.lastSuccess", ["time/now"]],
-                  ["emit", "CIRCUIT_CLOSED", {}]
+                  ["set", "@entity.circuitState", "closed"],
+                  circuitBreakerMainView
                 ]
               },
               // HalfOpen: failure -> back to open
@@ -118,23 +382,59 @@ var CIRCUIT_BREAKER_BEHAVIOR = {
                 to: "Open",
                 event: "RECORD_FAILURE",
                 effects: [
+                  ["fetch", "CircuitBreakerState"],
                   ["set", "@entity.errorCount", ["+", "@entity.errorCount", 1]],
                   ["set", "@entity.lastFailure", ["time/now"]],
-                  ["emit", "CIRCUIT_OPENED", { errorCount: "@entity.errorCount" }]
+                  ["set", "@entity.circuitState", "open"],
+                  circuitBreakerOpenView
                 ]
               },
-              // Reset from any state
+              // Reset from Closed
               {
-                from: ["Closed", "Open", "HalfOpen"],
+                from: "Closed",
+                to: "Closed",
+                event: "RESET",
+                effects: [
+                  ["fetch", "CircuitBreakerState"],
+                  ["set", "@entity.errorCount", 0],
+                  ["set", "@entity.successCount", 0],
+                  ["set", "@entity.totalCount", 0],
+                  ["set", "@entity.errorRate", 0],
+                  ["set", "@entity.halfOpenAttempts", 0],
+                  ["set", "@entity.circuitState", "closed"],
+                  circuitBreakerMainView
+                ]
+              },
+              // Reset from Open
+              {
+                from: "Open",
                 to: "Closed",
                 event: "RESET",
                 effects: [
+                  ["fetch", "CircuitBreakerState"],
                   ["set", "@entity.errorCount", 0],
                   ["set", "@entity.successCount", 0],
                   ["set", "@entity.totalCount", 0],
                   ["set", "@entity.errorRate", 0],
                   ["set", "@entity.halfOpenAttempts", 0],
-                  ["set", "@entity.circuitState", "closed"]
+                  ["set", "@entity.circuitState", "closed"],
+                  circuitBreakerMainView
+                ]
+              },
+              // Reset from HalfOpen
+              {
+                from: "HalfOpen",
+                to: "Closed",
+                event: "RESET",
+                effects: [
+                  ["fetch", "CircuitBreakerState"],
+                  ["set", "@entity.errorCount", 0],
+                  ["set", "@entity.successCount", 0],
+                  ["set", "@entity.totalCount", 0],
+                  ["set", "@entity.errorRate", 0],
+                  ["set", "@entity.halfOpenAttempts", 0],
+                  ["set", "@entity.circuitState", "closed"],
+                  circuitBreakerMainView
                 ]
               }
             ]
@@ -142,15 +442,14 @@ var CIRCUIT_BREAKER_BEHAVIOR = {
           ticks: [
             {
               name: "probe_half_open",
-              interval: "30000",
+              interval: 3e4,
               guard: ["=", "@entity.circuitState", "open"],
-              effects: [["emit", "PROBE"]],
-              description: "Periodically probe to transition from Open to HalfOpen"
+              effects: []
             }
           ]
         }
       ],
-      pages: []
+      pages: [{ name: "CircuitBreakerPage", path: "/circuit-breaker", isInitial: true, traits: [{ ref: "CircuitBreaker" }] }]
     }
   ]
 };
@@ -161,17 +460,17 @@ var HEALTH_CHECK_BEHAVIOR = {
   orbitals: [
     {
       name: "HealthCheckOrbital",
+      theme: INFRA_THEME,
       entity: {
         name: "HealthCheckState",
         persistence: "runtime",
         fields: [
           { name: "id", type: "string", required: true },
           { name: "healthStatus", type: "string", default: "unknown" },
-          { name: "lastCheck", type: "number", default: null },
-          { name: "lastHealthy", type: "number", default: null },
+          { name: "lastCheck", type: "number", default: 0 },
+          { name: "lastHealthy", type: "number", default: 0 },
           { name: "consecutiveFailures", type: "number", default: 0 },
           { name: "consecutiveSuccesses", type: "number", default: 0 },
-          { name: "checkIntervalMs", type: "number", default: 3e4 },
           { name: "degradedThreshold", type: "number", default: 2 },
           { name: "unhealthyThreshold", type: "number", default: 5 },
           { name: "recoveryThreshold", type: "number", default: 3 },
@@ -183,12 +482,7 @@ var HEALTH_CHECK_BEHAVIOR = {
         {
           name: "HealthCheck",
           linkedEntity: "HealthCheckState",
-          category: "lifecycle",
-          emits: [
-            { event: "SERVICE_HEALTHY", scope: "external" },
-            { event: "SERVICE_DEGRADED", scope: "external" },
-            { event: "SERVICE_UNHEALTHY", scope: "external" }
-          ],
+          category: "interaction",
           stateMachine: {
             states: [
               { name: "Unknown", isInitial: true },
@@ -197,25 +491,36 @@ var HEALTH_CHECK_BEHAVIOR = {
               { name: "Unhealthy" }
             ],
             events: [
+              { key: "INIT", name: "Initialize" },
               { key: "CHECK_SUCCESS", name: "Check Success" },
               { key: "CHECK_FAILURE", name: "Check Failure" },
-              { key: "HEALTH_TICK", name: "Health Tick" },
               { key: "RESET", name: "Reset" }
             ],
             transitions: [
+              // INIT
+              {
+                from: "Unknown",
+                to: "Unknown",
+                event: "INIT",
+                effects: [
+                  ["fetch", "HealthCheckState"],
+                  healthCheckView("Health Check", "outline")
+                ]
+              },
               // Unknown -> Healthy on first success
               {
                 from: "Unknown",
                 to: "Healthy",
                 event: "CHECK_SUCCESS",
                 effects: [
+                  ["fetch", "HealthCheckState"],
                   ["set", "@entity.healthStatus", "healthy"],
                   ["set", "@entity.consecutiveSuccesses", 1],
                   ["set", "@entity.consecutiveFailures", 0],
                   ["set", "@entity.lastCheck", ["time/now"]],
                   ["set", "@entity.lastHealthy", ["time/now"]],
                   ["set", "@entity.totalChecks", ["+", "@entity.totalChecks", 1]],
-                  ["emit", "SERVICE_HEALTHY", {}]
+                  healthCheckView("Health Check - Healthy", "success")
                 ]
               },
               // Unknown -> Degraded on first failure
@@ -224,13 +529,14 @@ var HEALTH_CHECK_BEHAVIOR = {
                 to: "Degraded",
                 event: "CHECK_FAILURE",
                 effects: [
+                  ["fetch", "HealthCheckState"],
                   ["set", "@entity.healthStatus", "degraded"],
                   ["set", "@entity.consecutiveFailures", 1],
                   ["set", "@entity.consecutiveSuccesses", 0],
                   ["set", "@entity.lastCheck", ["time/now"]],
                   ["set", "@entity.totalChecks", ["+", "@entity.totalChecks", 1]],
                   ["set", "@entity.totalFailures", ["+", "@entity.totalFailures", 1]],
-                  ["emit", "SERVICE_DEGRADED", { consecutiveFailures: 1 }]
+                  healthCheckView("Health Check - Degraded", "warning")
                 ]
               },
               // Healthy: stay healthy on success
@@ -239,11 +545,13 @@ var HEALTH_CHECK_BEHAVIOR = {
                 to: "Healthy",
                 event: "CHECK_SUCCESS",
                 effects: [
+                  ["fetch", "HealthCheckState"],
                   ["set", "@entity.consecutiveSuccesses", ["+", "@entity.consecutiveSuccesses", 1]],
                   ["set", "@entity.consecutiveFailures", 0],
                   ["set", "@entity.lastCheck", ["time/now"]],
                   ["set", "@entity.lastHealthy", ["time/now"]],
-                  ["set", "@entity.totalChecks", ["+", "@entity.totalChecks", 1]]
+                  ["set", "@entity.totalChecks", ["+", "@entity.totalChecks", 1]],
+                  healthCheckView("Health Check - Healthy", "success")
                 ]
               },
               // Healthy -> Degraded on failure
@@ -252,13 +560,14 @@ var HEALTH_CHECK_BEHAVIOR = {
                 to: "Degraded",
                 event: "CHECK_FAILURE",
                 effects: [
+                  ["fetch", "HealthCheckState"],
                   ["set", "@entity.healthStatus", "degraded"],
                   ["set", "@entity.consecutiveFailures", 1],
                   ["set", "@entity.consecutiveSuccesses", 0],
                   ["set", "@entity.lastCheck", ["time/now"]],
                   ["set", "@entity.totalChecks", ["+", "@entity.totalChecks", 1]],
                   ["set", "@entity.totalFailures", ["+", "@entity.totalFailures", 1]],
-                  ["emit", "SERVICE_DEGRADED", { consecutiveFailures: 1 }]
+                  healthCheckView("Health Check - Degraded", "warning")
                 ]
               },
               // Degraded: stay degraded on failure (below unhealthy threshold)
@@ -268,11 +577,13 @@ var HEALTH_CHECK_BEHAVIOR = {
                 event: "CHECK_FAILURE",
                 guard: ["<", ["+", "@entity.consecutiveFailures", 1], "@entity.unhealthyThreshold"],
                 effects: [
+                  ["fetch", "HealthCheckState"],
                   ["set", "@entity.consecutiveFailures", ["+", "@entity.consecutiveFailures", 1]],
                   ["set", "@entity.consecutiveSuccesses", 0],
                   ["set", "@entity.lastCheck", ["time/now"]],
                   ["set", "@entity.totalChecks", ["+", "@entity.totalChecks", 1]],
-                  ["set", "@entity.totalFailures", ["+", "@entity.totalFailures", 1]]
+                  ["set", "@entity.totalFailures", ["+", "@entity.totalFailures", 1]],
+                  healthCheckView("Health Check - Degraded", "warning")
                 ]
               },
               // Degraded -> Unhealthy when threshold exceeded
@@ -282,12 +593,13 @@ var HEALTH_CHECK_BEHAVIOR = {
                 event: "CHECK_FAILURE",
                 guard: [">=", ["+", "@entity.consecutiveFailures", 1], "@entity.unhealthyThreshold"],
                 effects: [
+                  ["fetch", "HealthCheckState"],
                   ["set", "@entity.healthStatus", "unhealthy"],
                   ["set", "@entity.consecutiveFailures", ["+", "@entity.consecutiveFailures", 1]],
                   ["set", "@entity.lastCheck", ["time/now"]],
                   ["set", "@entity.totalChecks", ["+", "@entity.totalChecks", 1]],
                   ["set", "@entity.totalFailures", ["+", "@entity.totalFailures", 1]],
-                  ["emit", "SERVICE_UNHEALTHY", { consecutiveFailures: ["+", "@entity.consecutiveFailures", 1] }]
+                  healthCheckView("Health Check - Unhealthy", "danger")
                 ]
               },
               // Degraded -> Healthy on enough successes
@@ -297,13 +609,14 @@ var HEALTH_CHECK_BEHAVIOR = {
                 event: "CHECK_SUCCESS",
                 guard: [">=", ["+", "@entity.consecutiveSuccesses", 1], "@entity.recoveryThreshold"],
                 effects: [
+                  ["fetch", "HealthCheckState"],
                   ["set", "@entity.healthStatus", "healthy"],
                   ["set", "@entity.consecutiveSuccesses", ["+", "@entity.consecutiveSuccesses", 1]],
                   ["set", "@entity.consecutiveFailures", 0],
                   ["set", "@entity.lastCheck", ["time/now"]],
                   ["set", "@entity.lastHealthy", ["time/now"]],
                   ["set", "@entity.totalChecks", ["+", "@entity.totalChecks", 1]],
-                  ["emit", "SERVICE_HEALTHY", {}]
+                  healthCheckView("Health Check - Healthy", "success")
                 ]
               },
               // Degraded: stay degraded on success (not enough to recover)
@@ -313,10 +626,12 @@ var HEALTH_CHECK_BEHAVIOR = {
                 event: "CHECK_SUCCESS",
                 guard: ["<", ["+", "@entity.consecutiveSuccesses", 1], "@entity.recoveryThreshold"],
                 effects: [
+                  ["fetch", "HealthCheckState"],
                   ["set", "@entity.consecutiveSuccesses", ["+", "@entity.consecutiveSuccesses", 1]],
                   ["set", "@entity.consecutiveFailures", 0],
                   ["set", "@entity.lastCheck", ["time/now"]],
-                  ["set", "@entity.totalChecks", ["+", "@entity.totalChecks", 1]]
+                  ["set", "@entity.totalChecks", ["+", "@entity.totalChecks", 1]],
+                  healthCheckView("Health Check - Degraded", "warning")
                 ]
               },
               // Unhealthy: stay unhealthy on failure
@@ -325,10 +640,12 @@ var HEALTH_CHECK_BEHAVIOR = {
                 to: "Unhealthy",
                 event: "CHECK_FAILURE",
                 effects: [
+                  ["fetch", "HealthCheckState"],
                   ["set", "@entity.consecutiveFailures", ["+", "@entity.consecutiveFailures", 1]],
                   ["set", "@entity.lastCheck", ["time/now"]],
                   ["set", "@entity.totalChecks", ["+", "@entity.totalChecks", 1]],
-                  ["set", "@entity.totalFailures", ["+", "@entity.totalFailures", 1]]
+                  ["set", "@entity.totalFailures", ["+", "@entity.totalFailures", 1]],
+                  healthCheckView("Health Check - Unhealthy", "danger")
                 ]
               },
               // Unhealthy -> Degraded on first success (recovery begins)
@@ -337,25 +654,73 @@ var HEALTH_CHECK_BEHAVIOR = {
                 to: "Degraded",
                 event: "CHECK_SUCCESS",
                 effects: [
+                  ["fetch", "HealthCheckState"],
                   ["set", "@entity.healthStatus", "degraded"],
                   ["set", "@entity.consecutiveSuccesses", 1],
                   ["set", "@entity.consecutiveFailures", 0],
                   ["set", "@entity.lastCheck", ["time/now"]],
                   ["set", "@entity.totalChecks", ["+", "@entity.totalChecks", 1]],
-                  ["emit", "SERVICE_DEGRADED", { recovering: true }]
+                  healthCheckView("Health Check - Degraded", "warning")
+                ]
+              },
+              // Reset from Unknown
+              {
+                from: "Unknown",
+                to: "Unknown",
+                event: "RESET",
+                effects: [
+                  ["fetch", "HealthCheckState"],
+                  ["set", "@entity.healthStatus", "unknown"],
+                  ["set", "@entity.consecutiveFailures", 0],
+                  ["set", "@entity.consecutiveSuccesses", 0],
+                  ["set", "@entity.totalChecks", 0],
+                  ["set", "@entity.totalFailures", 0],
+                  healthCheckView("Health Check", "outline")
+                ]
+              },
+              // Reset from Healthy
+              {
+                from: "Healthy",
+                to: "Unknown",
+                event: "RESET",
+                effects: [
+                  ["fetch", "HealthCheckState"],
+                  ["set", "@entity.healthStatus", "unknown"],
+                  ["set", "@entity.consecutiveFailures", 0],
+                  ["set", "@entity.consecutiveSuccesses", 0],
+                  ["set", "@entity.totalChecks", 0],
+                  ["set", "@entity.totalFailures", 0],
+                  healthCheckView("Health Check", "outline")
+                ]
+              },
+              // Reset from Degraded
+              {
+                from: "Degraded",
+                to: "Unknown",
+                event: "RESET",
+                effects: [
+                  ["fetch", "HealthCheckState"],
+                  ["set", "@entity.healthStatus", "unknown"],
+                  ["set", "@entity.consecutiveFailures", 0],
+                  ["set", "@entity.consecutiveSuccesses", 0],
+                  ["set", "@entity.totalChecks", 0],
+                  ["set", "@entity.totalFailures", 0],
+                  healthCheckView("Health Check", "outline")
                 ]
               },
-              // Reset from any state
+              // Reset from Unhealthy
               {
-                from: ["Unknown", "Healthy", "Degraded", "Unhealthy"],
+                from: "Unhealthy",
                 to: "Unknown",
                 event: "RESET",
                 effects: [
+                  ["fetch", "HealthCheckState"],
                   ["set", "@entity.healthStatus", "unknown"],
                   ["set", "@entity.consecutiveFailures", 0],
                   ["set", "@entity.consecutiveSuccesses", 0],
                   ["set", "@entity.totalChecks", 0],
-                  ["set", "@entity.totalFailures", 0]
+                  ["set", "@entity.totalFailures", 0],
+                  healthCheckView("Health Check", "outline")
                 ]
               }
             ]
@@ -363,14 +728,13 @@ var HEALTH_CHECK_BEHAVIOR = {
           ticks: [
             {
               name: "periodic_health_check",
-              interval: "@entity.checkIntervalMs",
-              effects: [["emit", "HEALTH_TICK"]],
-              description: "Periodically trigger health check"
+              interval: 3e4,
+              effects: []
             }
           ]
         }
       ],
-      pages: []
+      pages: [{ name: "HealthCheckPage", path: "/health-check", isInitial: true, traits: [{ ref: "HealthCheck" }] }]
     }
   ]
 };
@@ -381,6 +745,7 @@ var RATE_LIMITER_BEHAVIOR = {
   orbitals: [
     {
       name: "RateLimiterOrbital",
+      theme: INFRA_THEME,
       entity: {
         name: "RateLimiterState",
         persistence: "runtime",
@@ -398,21 +763,28 @@ var RATE_LIMITER_BEHAVIOR = {
         {
           name: "RateLimiter",
           linkedEntity: "RateLimiterState",
-          category: "lifecycle",
-          emits: [
-            { event: "RATE_LIMIT_EXCEEDED", scope: "external" }
-          ],
+          category: "interaction",
           stateMachine: {
             states: [
               { name: "Active", isInitial: true }
             ],
             events: [
+              { key: "INIT", name: "Initialize" },
               { key: "REQUEST", name: "Record Request" },
-              { key: "REQUEST_REJECTED", name: "Request Rejected" },
               { key: "WINDOW_RESET", name: "Window Reset" },
               { key: "RESET", name: "Full Reset" }
             ],
             transitions: [
+              // INIT
+              {
+                from: "Active",
+                to: "Active",
+                event: "INIT",
+                effects: [
+                  ["fetch", "RateLimiterState"],
+                  rateLimiterView("Rate Limiter")
+                ]
+              },
               // Request allowed
               {
                 from: "Active",
@@ -420,22 +792,22 @@ var RATE_LIMITER_BEHAVIOR = {
                 event: "REQUEST",
                 guard: ["<", "@entity.requestCount", "@entity.rateLimit"],
                 effects: [
+                  ["fetch", "RateLimiterState"],
                   ["set", "@entity.requestCount", ["+", "@entity.requestCount", 1]],
-                  ["set", "@entity.totalRequests", ["+", "@entity.totalRequests", 1]]
+                  ["set", "@entity.totalRequests", ["+", "@entity.totalRequests", 1]],
+                  rateLimiterView("Rate Limiter")
                 ]
               },
-              // Request rejected — over limit
+              // Request rejected
               {
                 from: "Active",
                 to: "Active",
                 event: "REQUEST",
                 guard: [">=", "@entity.requestCount", "@entity.rateLimit"],
                 effects: [
+                  ["fetch", "RateLimiterState"],
                   ["set", "@entity.rejectedRequests", ["+", "@entity.rejectedRequests", 1]],
-                  ["emit", "RATE_LIMIT_EXCEEDED", {
-                    requestCount: "@entity.requestCount",
-                    rateLimit: "@entity.rateLimit"
-                  }]
+                  rateLimiterView("Rate Limiter - Limit Exceeded")
                 ]
               },
               // Sliding window reset
@@ -444,8 +816,10 @@ var RATE_LIMITER_BEHAVIOR = {
                 to: "Active",
                 event: "WINDOW_RESET",
                 effects: [
+                  ["fetch", "RateLimiterState"],
                   ["set", "@entity.requestCount", 0],
-                  ["set", "@entity.windowStart", ["time/now"]]
+                  ["set", "@entity.windowStart", ["time/now"]],
+                  rateLimiterView("Rate Limiter")
                 ]
               },
               // Full counter reset
@@ -454,10 +828,12 @@ var RATE_LIMITER_BEHAVIOR = {
                 to: "Active",
                 event: "RESET",
                 effects: [
+                  ["fetch", "RateLimiterState"],
                   ["set", "@entity.requestCount", 0],
                   ["set", "@entity.totalRequests", 0],
                   ["set", "@entity.rejectedRequests", 0],
-                  ["set", "@entity.windowStart", ["time/now"]]
+                  ["set", "@entity.windowStart", ["time/now"]],
+                  rateLimiterView("Rate Limiter")
                 ]
               }
             ]
@@ -465,14 +841,13 @@ var RATE_LIMITER_BEHAVIOR = {
           ticks: [
             {
               name: "window_reset",
-              interval: "@entity.windowMs",
-              effects: [["emit", "WINDOW_RESET"]],
-              description: "Reset request counter on sliding window expiry"
+              interval: 6e4,
+              effects: []
             }
           ]
         }
       ],
-      pages: []
+      pages: [{ name: "RateLimiterPage", path: "/rate-limiter", isInitial: true, traits: [{ ref: "RateLimiter" }] }]
     }
   ]
 };
@@ -483,13 +858,14 @@ var CACHE_ASIDE_BEHAVIOR = {
   orbitals: [
     {
       name: "CacheAsideOrbital",
+      theme: INFRA_THEME,
       entity: {
         name: "CacheEntry",
         persistence: "runtime",
         fields: [
           { name: "id", type: "string", required: true },
           { name: "cacheKey", type: "string", default: "" },
-          { name: "cachedValue", type: "object", default: null },
+          { name: "cachedValue", type: "string", default: "" },
           { name: "cachedAt", type: "number", default: 0 },
           { name: "ttlMs", type: "number", default: 3e5 },
           { name: "cacheHits", type: "number", default: 0 },
@@ -502,12 +878,7 @@ var CACHE_ASIDE_BEHAVIOR = {
         {
           name: "CacheAside",
           linkedEntity: "CacheEntry",
-          category: "lifecycle",
-          emits: [
-            { event: "CACHE_HIT", scope: "internal" },
-            { event: "CACHE_MISS", scope: "internal" },
-            { event: "CACHE_EVICTED", scope: "internal" }
-          ],
+          category: "interaction",
           stateMachine: {
             states: [
               { name: "Empty", isInitial: true },
@@ -515,34 +886,50 @@ var CACHE_ASIDE_BEHAVIOR = {
               { name: "Stale" }
             ],
             events: [
+              { key: "INIT", name: "Initialize" },
               { key: "LOOKUP", name: "Cache Lookup" },
-              { key: "POPULATE", name: "Populate Cache" },
+              { key: "POPULATE", name: "Populate Cache", payloadSchema: [
+                { name: "value", type: "string", required: true },
+                { name: "key", type: "string", required: true }
+              ] },
               { key: "INVALIDATE", name: "Invalidate" },
-              { key: "EVICT", name: "Evict" },
-              { key: "EVICTION_TICK", name: "Eviction Tick" }
+              { key: "EVICT", name: "Evict" }
             ],
             transitions: [
+              // INIT
+              {
+                from: "Empty",
+                to: "Empty",
+                event: "INIT",
+                effects: [
+                  ["fetch", "CacheEntry"],
+                  cacheEmptyView("Cache")
+                ]
+              },
               // Empty: lookup is a miss
               {
                 from: "Empty",
                 to: "Empty",
                 event: "LOOKUP",
                 effects: [
+                  ["fetch", "CacheEntry"],
                   ["set", "@entity.cacheMisses", ["+", "@entity.cacheMisses", 1]],
                   ["set", "@entity.lastAccessed", ["time/now"]],
-                  ["emit", "CACHE_MISS", { key: "@entity.cacheKey" }]
+                  cacheEmptyView("Cache - Miss")
                 ]
               },
-              // Empty → Fresh: populate after fetch
+              // Empty -> Fresh: populate after fetch
               {
                 from: "Empty",
                 to: "Fresh",
                 event: "POPULATE",
                 effects: [
+                  ["fetch", "CacheEntry"],
                   ["set", "@entity.cachedValue", "@payload.value"],
                   ["set", "@entity.cacheKey", "@payload.key"],
                   ["set", "@entity.cachedAt", ["time/now"]],
-                  ["set", "@entity.isFresh", true]
+                  ["set", "@entity.isFresh", true],
+                  cacheStatsView("Cache - Fresh")
                 ]
               },
               // Fresh: lookup is a hit
@@ -552,22 +939,36 @@ var CACHE_ASIDE_BEHAVIOR = {
                 event: "LOOKUP",
                 guard: ["<", ["-", ["time/now"], "@entity.cachedAt"], "@entity.ttlMs"],
                 effects: [
+                  ["fetch", "CacheEntry"],
                   ["set", "@entity.cacheHits", ["+", "@entity.cacheHits", 1]],
                   ["set", "@entity.lastAccessed", ["time/now"]],
-                  ["emit", "CACHE_HIT", { key: "@entity.cacheKey" }]
+                  cacheStatsView("Cache - Hit")
                 ]
               },
-              // Fresh → Stale: TTL expired on lookup
+              // Fresh -> Stale: TTL expired on lookup
               {
                 from: "Fresh",
                 to: "Stale",
                 event: "LOOKUP",
                 guard: [">=", ["-", ["time/now"], "@entity.cachedAt"], "@entity.ttlMs"],
                 effects: [
+                  ["fetch", "CacheEntry"],
                   ["set", "@entity.isFresh", false],
                   ["set", "@entity.cacheMisses", ["+", "@entity.cacheMisses", 1]],
                   ["set", "@entity.lastAccessed", ["time/now"]],
-                  ["emit", "CACHE_MISS", { key: "@entity.cacheKey", reason: "ttl_expired" }]
+                  cacheStatsView("Cache - Stale")
+                ]
+              },
+              // Fresh -> Fresh: update cache
+              {
+                from: "Fresh",
+                to: "Fresh",
+                event: "POPULATE",
+                effects: [
+                  ["fetch", "CacheEntry"],
+                  ["set", "@entity.cachedValue", "@payload.value"],
+                  ["set", "@entity.cachedAt", ["time/now"]],
+                  cacheStatsView("Cache - Fresh")
                 ]
               },
               // Stale: lookup is a miss
@@ -576,65 +977,75 @@ var CACHE_ASIDE_BEHAVIOR = {
                 to: "Stale",
                 event: "LOOKUP",
                 effects: [
+                  ["fetch", "CacheEntry"],
                   ["set", "@entity.cacheMisses", ["+", "@entity.cacheMisses", 1]],
                   ["set", "@entity.lastAccessed", ["time/now"]],
-                  ["emit", "CACHE_MISS", { key: "@entity.cacheKey", reason: "stale" }]
+                  cacheStatsView("Cache - Stale")
                 ]
               },
-              // Stale → Fresh: re-populate
+              // Stale -> Fresh: re-populate
               {
                 from: "Stale",
                 to: "Fresh",
                 event: "POPULATE",
                 effects: [
+                  ["fetch", "CacheEntry"],
                   ["set", "@entity.cachedValue", "@payload.value"],
                   ["set", "@entity.cachedAt", ["time/now"]],
-                  ["set", "@entity.isFresh", true]
+                  ["set", "@entity.isFresh", true],
+                  cacheStatsView("Cache - Fresh")
                 ]
               },
-              // Fresh → Fresh: update cache
+              // Invalidate from Fresh
               {
                 from: "Fresh",
-                to: "Fresh",
-                event: "POPULATE",
+                to: "Empty",
+                event: "INVALIDATE",
                 effects: [
-                  ["set", "@entity.cachedValue", "@payload.value"],
-                  ["set", "@entity.cachedAt", ["time/now"]]
+                  ["fetch", "CacheEntry"],
+                  ["set", "@entity.cachedValue", ""],
+                  ["set", "@entity.isFresh", false],
+                  ["set", "@entity.cachedAt", 0],
+                  cacheEmptyView("Cache")
                 ]
               },
-              // Invalidate from any cached state
+              // Invalidate from Stale
               {
-                from: ["Fresh", "Stale"],
+                from: "Stale",
                 to: "Empty",
                 event: "INVALIDATE",
                 effects: [
-                  ["set", "@entity.cachedValue", null],
+                  ["fetch", "CacheEntry"],
+                  ["set", "@entity.cachedValue", ""],
                   ["set", "@entity.isFresh", false],
-                  ["set", "@entity.cachedAt", 0]
+                  ["set", "@entity.cachedAt", 0],
+                  cacheEmptyView("Cache")
                 ]
               },
-              // Evict (with event)
+              // Evict from Fresh
               {
-                from: ["Fresh", "Stale"],
+                from: "Fresh",
                 to: "Empty",
                 event: "EVICT",
                 effects: [
-                  ["set", "@entity.cachedValue", null],
+                  ["fetch", "CacheEntry"],
+                  ["set", "@entity.cachedValue", ""],
                   ["set", "@entity.isFresh", false],
                   ["set", "@entity.cachedAt", 0],
-                  ["emit", "CACHE_EVICTED", { key: "@entity.cacheKey" }]
+                  cacheEmptyView("Cache")
                 ]
               },
-              // Eviction tick: evict if stale
+              // Evict from Stale
               {
                 from: "Stale",
                 to: "Empty",
-                event: "EVICTION_TICK",
+                event: "EVICT",
                 effects: [
-                  ["set", "@entity.cachedValue", null],
+                  ["fetch", "CacheEntry"],
+                  ["set", "@entity.cachedValue", ""],
                   ["set", "@entity.isFresh", false],
                   ["set", "@entity.cachedAt", 0],
-                  ["emit", "CACHE_EVICTED", { key: "@entity.cacheKey", reason: "ttl_eviction" }]
+                  cacheEmptyView("Cache")
                 ]
               }
             ]
@@ -642,15 +1053,14 @@ var CACHE_ASIDE_BEHAVIOR = {
           ticks: [
             {
               name: "eviction_sweep",
-              interval: "60000",
+              interval: 6e4,
               guard: ["and", ["!=", "@entity.cachedAt", 0], [">=", ["-", ["time/now"], "@entity.cachedAt"], "@entity.ttlMs"]],
-              effects: [["emit", "EVICTION_TICK"]],
-              description: "Periodically evict stale cache entries"
+              effects: []
             }
           ]
         }
       ],
-      pages: []
+      pages: [{ name: "CachePage", path: "/cache", isInitial: true, traits: [{ ref: "CacheAside" }] }]
     }
   ]
 };
@@ -661,6 +1071,7 @@ var SAGA_BEHAVIOR = {
   orbitals: [
     {
       name: "SagaOrbital",
+      theme: INFRA_THEME,
       entity: {
         name: "SagaState",
         persistence: "runtime",
@@ -670,8 +1081,6 @@ var SAGA_BEHAVIOR = {
           { name: "currentStep", type: "number", default: 0 },
           { name: "totalSteps", type: "number", default: 0 },
           { name: "sagaStatus", type: "string", default: "idle" },
-          { name: "completedSteps", type: "array", default: [] },
-          { name: "compensatedSteps", type: "array", default: [] },
           { name: "failedStep", type: "number", default: -1 },
           { name: "failureReason", type: "string", default: "" },
           { name: "startedAt", type: "number", default: 0 },
@@ -682,15 +1091,7 @@ var SAGA_BEHAVIOR = {
         {
           name: "Saga",
           linkedEntity: "SagaState",
-          category: "lifecycle",
-          emits: [
-            { event: "SAGA_STARTED", scope: "external" },
-            { event: "SAGA_STEP_COMPLETED", scope: "external" },
-            { event: "SAGA_COMPLETED", scope: "external" },
-            { event: "SAGA_COMPENSATING", scope: "external" },
-            { event: "SAGA_COMPENSATION_DONE", scope: "external" },
-            { event: "SAGA_FAILED", scope: "external" }
-          ],
+          category: "interaction",
           stateMachine: {
             states: [
               { name: "Idle", isInitial: true },
@@ -700,6 +1101,7 @@ var SAGA_BEHAVIOR = {
               { name: "Failed" }
             ],
             events: [
+              { key: "INIT", name: "Initialize" },
               { key: "START_SAGA", name: "Start Saga" },
               { key: "STEP_SUCCESS", name: "Step Success" },
               { key: "STEP_FAILURE", name: "Step Failure" },
@@ -708,20 +1110,29 @@ var SAGA_BEHAVIOR = {
               { key: "RESET", name: "Reset" }
             ],
             transitions: [
-              // Idle → Running: start the saga
+              // INIT
+              {
+                from: "Idle",
+                to: "Idle",
+                event: "INIT",
+                effects: [
+                  ["fetch", "SagaState"],
+                  sagaView("Saga")
+                ]
+              },
+              // Idle -> Running: start the saga
               {
                 from: "Idle",
                 to: "Running",
                 event: "START_SAGA",
                 effects: [
+                  ["fetch", "SagaState"],
                   ["set", "@entity.sagaStatus", "running"],
                   ["set", "@entity.currentStep", 0],
-                  ["set", "@entity.completedSteps", []],
-                  ["set", "@entity.compensatedSteps", []],
                   ["set", "@entity.failedStep", -1],
                   ["set", "@entity.failureReason", ""],
                   ["set", "@entity.startedAt", ["time/now"]],
-                  ["emit", "SAGA_STARTED", { sagaName: "@entity.sagaName" }]
+                  sagaView("Saga - Running")
                 ]
               },
               // Running: step success, more steps remaining
@@ -731,37 +1142,34 @@ var SAGA_BEHAVIOR = {
                 event: "STEP_SUCCESS",
                 guard: ["<", ["+", "@entity.currentStep", 1], "@entity.totalSteps"],
                 effects: [
+                  ["fetch", "SagaState"],
                   ["set", "@entity.currentStep", ["+", "@entity.currentStep", 1]],
-                  ["emit", "SAGA_STEP_COMPLETED", {
-                    step: "@entity.currentStep",
-                    totalSteps: "@entity.totalSteps"
-                  }]
+                  sagaView("Saga - Running")
                 ]
               },
-              // Running → Completed: last step succeeded
+              // Running -> Completed: last step succeeded
               {
                 from: "Running",
                 to: "Completed",
                 event: "STEP_SUCCESS",
                 guard: [">=", ["+", "@entity.currentStep", 1], "@entity.totalSteps"],
                 effects: [
+                  ["fetch", "SagaState"],
                   ["set", "@entity.sagaStatus", "completed"],
                   ["set", "@entity.completedAt", ["time/now"]],
-                  ["emit", "SAGA_COMPLETED", { sagaName: "@entity.sagaName" }]
+                  sagaView("Saga - Completed")
                 ]
               },
-              // Running → Compensating: a step failed
+              // Running -> Compensating: a step failed
               {
                 from: "Running",
                 to: "Compensating",
                 event: "STEP_FAILURE",
                 effects: [
+                  ["fetch", "SagaState"],
                   ["set", "@entity.sagaStatus", "compensating"],
                   ["set", "@entity.failedStep", "@entity.currentStep"],
-                  ["emit", "SAGA_COMPENSATING", {
-                    failedStep: "@entity.currentStep",
-                    sagaName: "@entity.sagaName"
-                  }]
+                  sagaView("Saga - Compensating")
                 ]
               },
               // Compensating: compensation step succeeded, more to undo
@@ -771,47 +1179,62 @@ var SAGA_BEHAVIOR = {
                 event: "COMPENSATE_SUCCESS",
                 guard: [">", "@entity.currentStep", 0],
                 effects: [
-                  ["set", "@entity.currentStep", ["-", "@entity.currentStep", 1]]
+                  ["fetch", "SagaState"],
+                  ["set", "@entity.currentStep", ["-", "@entity.currentStep", 1]],
+                  sagaView("Saga - Compensating")
                 ]
               },
-              // Compensating → Failed: all compensations done (reached step 0)
+              // Compensating -> Failed: all compensations done (reached step 0)
               {
                 from: "Compensating",
                 to: "Failed",
                 event: "COMPENSATE_SUCCESS",
                 guard: ["<=", "@entity.currentStep", 0],
                 effects: [
+                  ["fetch", "SagaState"],
                   ["set", "@entity.sagaStatus", "failed"],
                   ["set", "@entity.completedAt", ["time/now"]],
-                  ["emit", "SAGA_COMPENSATION_DONE", { sagaName: "@entity.sagaName" }]
+                  sagaView("Saga - Failed")
                 ]
               },
-              // Compensating → Failed: compensation itself failed
+              // Compensating -> Failed: compensation itself failed
               {
                 from: "Compensating",
                 to: "Failed",
                 event: "COMPENSATE_FAILURE",
                 effects: [
+                  ["fetch", "SagaState"],
                   ["set", "@entity.sagaStatus", "failed"],
                   ["set", "@entity.completedAt", ["time/now"]],
-                  ["emit", "SAGA_FAILED", {
-                    sagaName: "@entity.sagaName",
-                    reason: "Compensation failed"
-                  }]
+                  sagaView("Saga - Failed")
                 ]
               },
-              // Reset from terminal states
+              // Reset from Completed
               {
-                from: ["Completed", "Failed"],
+                from: "Completed",
                 to: "Idle",
                 event: "RESET",
                 effects: [
+                  ["fetch", "SagaState"],
                   ["set", "@entity.sagaStatus", "idle"],
                   ["set", "@entity.currentStep", 0],
-                  ["set", "@entity.completedSteps", []],
-                  ["set", "@entity.compensatedSteps", []],
                   ["set", "@entity.failedStep", -1],
-                  ["set", "@entity.failureReason", ""]
+                  ["set", "@entity.failureReason", ""],
+                  sagaView("Saga")
+                ]
+              },
+              // Reset from Failed
+              {
+                from: "Failed",
+                to: "Idle",
+                event: "RESET",
+                effects: [
+                  ["fetch", "SagaState"],
+                  ["set", "@entity.sagaStatus", "idle"],
+                  ["set", "@entity.currentStep", 0],
+                  ["set", "@entity.failedStep", -1],
+                  ["set", "@entity.failureReason", ""],
+                  sagaView("Saga")
                 ]
               }
             ]
@@ -819,7 +1242,7 @@ var SAGA_BEHAVIOR = {
           ticks: []
         }
       ],
-      pages: []
+      pages: [{ name: "SagaPage", path: "/saga", isInitial: true, traits: [{ ref: "Saga" }] }]
     }
   ]
 };
@@ -830,15 +1253,13 @@ var METRICS_COLLECTOR_BEHAVIOR = {
   orbitals: [
     {
       name: "MetricsCollectorOrbital",
+      theme: INFRA_THEME,
       entity: {
         name: "MetricsState",
         persistence: "runtime",
         fields: [
           { name: "id", type: "string", required: true },
-          { name: "counters", type: "object", default: {} },
-          { name: "gauges", type: "object", default: {} },
           { name: "lastFlush", type: "number", default: 0 },
-          { name: "flushIntervalMs", type: "number", default: 6e4 },
           { name: "totalFlushes", type: "number", default: 0 },
           { name: "totalRecorded", type: "number", default: 0 }
         ]
@@ -847,28 +1268,38 @@ var METRICS_COLLECTOR_BEHAVIOR = {
         {
           name: "MetricsCollector",
           linkedEntity: "MetricsState",
-          category: "lifecycle",
-          emits: [
-            { event: "METRICS_REPORT", scope: "external" }
-          ],
+          category: "interaction",
           stateMachine: {
             states: [
               { name: "Collecting", isInitial: true }
             ],
             events: [
+              { key: "INIT", name: "Initialize" },
               { key: "RECORD_COUNTER", name: "Record Counter" },
               { key: "RECORD_GAUGE", name: "Record Gauge" },
               { key: "FLUSH", name: "Flush Metrics" },
               { key: "RESET", name: "Reset All" }
             ],
             transitions: [
+              // INIT
+              {
+                from: "Collecting",
+                to: "Collecting",
+                event: "INIT",
+                effects: [
+                  ["fetch", "MetricsState"],
+                  metricsView("Metrics Collector")
+                ]
+              },
               // Record a counter increment
               {
                 from: "Collecting",
                 to: "Collecting",
                 event: "RECORD_COUNTER",
                 effects: [
-                  ["set", "@entity.totalRecorded", ["+", "@entity.totalRecorded", 1]]
+                  ["fetch", "MetricsState"],
+                  ["set", "@entity.totalRecorded", ["+", "@entity.totalRecorded", 1]],
+                  metricsView("Metrics Collector")
                 ]
               },
               // Record a gauge value
@@ -877,23 +1308,21 @@ var METRICS_COLLECTOR_BEHAVIOR = {
                 to: "Collecting",
                 event: "RECORD_GAUGE",
                 effects: [
-                  ["set", "@entity.totalRecorded", ["+", "@entity.totalRecorded", 1]]
+                  ["fetch", "MetricsState"],
+                  ["set", "@entity.totalRecorded", ["+", "@entity.totalRecorded", 1]],
+                  metricsView("Metrics Collector")
                 ]
               },
-              // Flush: emit report and reset counters
+              // Flush: reset counters
               {
                 from: "Collecting",
                 to: "Collecting",
                 event: "FLUSH",
                 effects: [
-                  ["emit", "METRICS_REPORT", {
-                    counters: "@entity.counters",
-                    gauges: "@entity.gauges",
-                    totalRecorded: "@entity.totalRecorded"
-                  }],
-                  ["set", "@entity.counters", {}],
+                  ["fetch", "MetricsState"],
                   ["set", "@entity.lastFlush", ["time/now"]],
-                  ["set", "@entity.totalFlushes", ["+", "@entity.totalFlushes", 1]]
+                  ["set", "@entity.totalFlushes", ["+", "@entity.totalFlushes", 1]],
+                  metricsView("Metrics Collector")
                 ]
               },
               // Full reset
@@ -902,11 +1331,11 @@ var METRICS_COLLECTOR_BEHAVIOR = {
                 to: "Collecting",
                 event: "RESET",
                 effects: [
-                  ["set", "@entity.counters", {}],
-                  ["set", "@entity.gauges", {}],
+                  ["fetch", "MetricsState"],
                   ["set", "@entity.totalRecorded", 0],
                   ["set", "@entity.totalFlushes", 0],
-                  ["set", "@entity.lastFlush", 0]
+                  ["set", "@entity.lastFlush", 0],
+                  metricsView("Metrics Collector")
                 ]
               }
             ]
@@ -914,15 +1343,14 @@ var METRICS_COLLECTOR_BEHAVIOR = {
           ticks: [
             {
               name: "periodic_flush",
-              interval: "@entity.flushIntervalMs",
+              interval: 6e4,
               guard: [">", "@entity.totalRecorded", 0],
-              effects: [["emit", "FLUSH"]],
-              description: "Periodically flush accumulated metrics"
+              effects: []
             }
           ]
         }
       ],
-      pages: []
+      pages: [{ name: "MetricsPage", path: "/metrics", isInitial: true, traits: [{ ref: "MetricsCollector" }] }]
     }
   ]
 };