Workingmans/add observability framework guides

fern/assets/styles.css

@@ -282,4 +282,72 @@ html.dark button[data-highlighted] .fern-api-property-meta {
 /* Fix: Make subtitle white on Simulations pages in dark mode */
 :is(.dark) [id*="simulations"] .prose-p\:text-\(color\:--grayscale-a11\) :where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
   color: var(--grayscale-12) !important;
+}
+
+/* Internal Note Styles */
+.internal-note {
+  display: inline-block;
+  background-color: rgb(209, 184, 213) !important;
+  color: #6a1b9a !important;
+  border-radius: 3px;
+  font-size: 0.9em;
+  padding: 2px 6px;
+  margin: 2px 0;
+}
+
+.internal-note::before {
+  content: "[INTERNAL NOTE] ";
+  font-weight: 600;
+}
+
+.internal-note.todo::before {
+  content: "[TODO] ";
+}
+
+.internal-note.assumption::before {
+  content: "[ASSUMPTION] ";
+}
+
+/* Dark mode: Keep same colors for visibility */
+:is(.dark) .internal-note {
+  background-color: rgb(209, 184, 213) !important;
+  color: #6a1b9a !important;
+}
+
+/* VAPI Validation Styles */
+.vapi-validation {
+  display: inline-block;
+  background-color: #deedab !important;
+  color: #341a04 !important;
+  border-radius: 3px;
+  font-size: 0.9em;
+  padding: 2px 6px;
+  margin: 2px 0;
+}
+
+.vapi-validation::before {
+  content: "[VAPI VALIDATION NEEDED] ";
+  font-weight: 600;
+}
+
+/* Claude Validation Styles */
+.claude-note {
+  display: inline-block;
+  background-color: #cdefc1 !important;
+  color: #1e0485 !important;
+  border-radius: 3px;
+  font-size: 0.9em;
+  padding: 2px 6px;
+  margin: 2px 0;
+}
+
+.claude-note::before {
+  content: "[NOTES FOR CLAUDE] ";
+  font-weight: 600;
+}
+
+/* Dark mode: Maintain legibility */
+:is(.dark) .vapi-validation {
+  background-color: #856404 !important;
+  color: #fff3cd !important;
 }

fern/docs.yml

@@ -285,6 +285,30 @@ navigation:
 
       - section: Observability
         contents:
+          - section: Guides
+            icon: fa-light fa-book
+            contents:
+              - page: Framework
+                path: observability/observability-framework.mdx
+                icon: fa-light fa-book-open
+              - page: Instrumentation
+                path: observability/instrumentation.mdx
+                icon: fa-light fa-wrench
+              - page: Testing strategies
+                path: observability/testing-strategies.mdx
+                icon: fa-light fa-vial
+              - page: Extraction patterns
+                path: observability/extraction-patterns.mdx
+                icon: fa-light fa-diagram-project
+              - page: Monitoring
+                path: observability/monitoring.mdx
+                icon: fa-light fa-chart-line
+              - page: Optimization workflows
+                path: observability/optimization-workflows.mdx
+                icon: fa-light fa-arrow-trend-up
+              - page: Production readiness
+                path: observability/production-readiness.mdx
+                icon: fa-light fa-check-circle
           - section: Evals
             icon: fa-light fa-clipboard-check
             contents: