Add canonical facts system and factor component library

apps/longterm-next/src/app/internal/facts/page.tsx

@@ -25,7 +25,8 @@ export default function FactsPage() {
       <h1>Canonical Facts Dashboard</h1>
       <p className="text-muted-foreground">
         All canonical facts from the YAML fact store, used by the <code>&lt;F&gt;</code> component.
-        Facts are defined in <code>apps/longterm/src/data/facts/*.yaml</code>.
+        Facts are defined in <code>src/data/facts/*.yaml</code> and processed at build time
+        with support for numeric parsing and computed expressions.
       </p>
       <FactDashboard facts={facts} />
     </article>

apps/longterm-next/src/components/mdx-components.tsx

@@ -17,6 +17,12 @@ import { TransitionModelContent } from "@/components/wiki/TransitionModelContent
 import TransitionModelTable from "@/components/wiki/TransitionModelTable";
 import { TransitionModelInteractive } from "@/components/wiki/TransitionModelTable";
 import { FactorSubItemsList, AllFactorsSubItems } from "@/components/wiki/FactorSubItemsList";
+import { FactorKeyDebates } from "@/components/wiki/FactorKeyDebates";
+import { FactorRatings } from "@/components/wiki/FactorRatings";
+import { FactorScope } from "@/components/wiki/FactorScope";
+import { FactorRelatedContent } from "@/components/wiki/FactorRelatedContent";
+import { FactorRelationshipDiagram, FullModelDiagram } from "@/components/wiki/FactorRelationshipDiagram";
+import { FactorStatusBadge } from "@/components/wiki/FactorStatusCard";
 import CauseEffectGraph from "@/components/wiki/CauseEffectGraph";
 import { PageCauseEffectGraph } from "@/components/wiki/PageCauseEffectGraph";
 
@@ -40,8 +46,8 @@ const stubNames = [
   "Badge",
   "ConceptsDirectory", "Crux", "CruxList", "DataCrux", "DataEstimateBox",
   "DisagreementMap", "DualOutcomeChart", "EntityGraph", "EstimateBox",
-  "FactorAttributionMatrix", "FactorGauges", "FactorRelationshipDiagram",
-  "FullModelDiagram", "FullWidthLayout", "ImpactGrid",
+  "FactorAttributionMatrix", "FactorGauges",
+  "FullWidthLayout", "ImpactGrid",
   "ImpactList", "InsightGridExperiments", "InsightScoreMatrix", "InsightsTable",
   "KeyPeople", "KeyQuestions", "KnowledgeTreemap", "ModelsList",
   "OutcomesTable", "PageIndex", "PixelDensityMap",
@@ -95,6 +101,13 @@ export const mdxComponents: Record<string, React.ComponentType<any>> = {
   TransitionModelInteractive,
   FactorSubItemsList,
   AllFactorsSubItems,
+  FactorKeyDebates,
+  FactorRatings,
+  FactorScope,
+  FactorRelatedContent,
+  FactorRelationshipDiagram,
+  FullModelDiagram,
+  FactorStatusBadge,
 
   // Cause-Effect Graph components
   CauseEffectGraph,

apps/longterm-next/src/components/wiki/FactorKeyDebates.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import {
+  getSubItemDebates,
+  type KeyDebate,
+} from "@/data/parameter-graph-data";
+
+interface FactorKeyDebatesProps {
+  nodeId?: string;
+  subItemLabel?: string;
+  debates?: KeyDebate[];
+  title?: string;
+}
+
+export function FactorKeyDebates({
+  nodeId,
+  subItemLabel,
+  debates: directDebates,
+  title = "Key Debates",
+}: FactorKeyDebatesProps) {
+  const debates =
+    directDebates ||
+    (nodeId && subItemLabel ? getSubItemDebates(nodeId, subItemLabel) : []);
+
+  if (debates.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="rounded-lg border border-amber-500/30 bg-amber-500/5 overflow-hidden">
+      <div className="flex items-center gap-2 px-4 py-2 bg-amber-500/10 border-b border-amber-500/20">
+        <span className="font-semibold text-sm">{title}</span>
+        <span className="ml-auto text-xs text-amber-600/70 dark:text-amber-400/70">
+          from YAML
+        </span>
+      </div>
+      <div className="p-4">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b border-amber-500/20">
+              <th className="text-left py-2 pr-4 font-semibold">Debate</th>
+              <th className="text-left py-2 font-semibold">Core Question</th>
+            </tr>
+          </thead>
+          <tbody>
+            {debates.map((debate, i) => (
+              <tr
+                key={i}
+                className="border-b border-amber-500/10 last:border-0"
+              >
+                <td className="py-2 pr-4 font-medium">{debate.topic}</td>
+                <td className="py-2">{debate.description}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+export default FactorKeyDebates;

apps/longterm-next/src/components/wiki/FactorRatings.tsx

@@ -0,0 +1,110 @@
+import React from "react";
+import {
+  getSubItemRatings,
+  type SubItemRatings,
+} from "@/data/parameter-graph-data";
+
+function getInterpretation(
+  value: number,
+  metric: keyof SubItemRatings
+): string {
+  const interpretations: Record<
+    keyof SubItemRatings,
+    Record<string, string>
+  > = {
+    changeability: {
+      low: "Very difficult to change",
+      medium: "Moderately changeable",
+      high: "Relatively easy to influence",
+    },
+    xriskImpact: {
+      low: "Low direct existential impact",
+      medium: "Moderate existential impact",
+      high: "High direct existential impact",
+    },
+    trajectoryImpact: {
+      low: "Low long-term effects",
+      medium: "Moderate long-term effects",
+      high: "High long-term effects",
+    },
+    uncertainty: {
+      low: "Lower uncertainty",
+      medium: "Moderate uncertainty",
+      high: "High uncertainty",
+    },
+  };
+
+  const level = value <= 33 ? "low" : value <= 66 ? "medium" : "high";
+  return interpretations[metric][level];
+}
+
+interface FactorRatingsProps {
+  nodeId?: string;
+  subItemLabel?: string;
+  ratings?: SubItemRatings;
+  title?: string;
+}
+
+export function FactorRatings({
+  nodeId,
+  subItemLabel,
+  ratings: directRatings,
+  title = "Ratings",
+}: FactorRatingsProps) {
+  const ratings =
+    directRatings ||
+    (nodeId && subItemLabel
+      ? getSubItemRatings(nodeId, subItemLabel)
+      : undefined);
+
+  if (!ratings) {
+    return null;
+  }
+
+  const metrics: Array<{ key: keyof SubItemRatings; label: string }> = [
+    { key: "changeability", label: "Changeability" },
+    { key: "xriskImpact", label: "X-risk Impact" },
+    { key: "trajectoryImpact", label: "Trajectory Impact" },
+    { key: "uncertainty", label: "Uncertainty" },
+  ];
+
+  return (
+    <div className="rounded-lg border border-blue-500/30 bg-blue-500/5 overflow-hidden">
+      <div className="flex items-center gap-2 px-4 py-2 bg-blue-500/10 border-b border-blue-500/20">
+        <span className="font-semibold text-sm">{title}</span>
+        <span className="ml-auto text-xs text-blue-600/70 dark:text-blue-400/70">
+          from YAML
+        </span>
+      </div>
+      <div className="p-4">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b border-blue-500/20">
+              <th className="text-left py-2 pr-4 font-semibold">Metric</th>
+              <th className="text-left py-2 pr-4 font-semibold">Score</th>
+              <th className="text-left py-2 font-semibold">Interpretation</th>
+            </tr>
+          </thead>
+          <tbody>
+            {metrics.map(({ key, label }) => {
+              const value = ratings[key];
+              if (value === undefined) return null;
+              return (
+                <tr
+                  key={key}
+                  className="border-b border-blue-500/10 last:border-0"
+                >
+                  <td className="py-2 pr-4 font-medium">{label}</td>
+                  <td className="py-2 pr-4 tabular-nums">{value}/100</td>
+                  <td className="py-2">{getInterpretation(value, key)}</td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+export default FactorRatings;

apps/longterm-next/src/components/wiki/FactorRelatedContent.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import {
+  getSubItemRelatedContent,
+  type RelatedContent,
+  type RelatedContentLink,
+} from "@/data/parameter-graph-data";
+
+interface FactorRelatedContentProps {
+  nodeId?: string;
+  subItemLabel?: string;
+  relatedContent?: RelatedContent;
+  title?: string;
+}
+
+function LinkList({
+  links,
+  category,
+}: {
+  links: RelatedContentLink[];
+  category: string;
+}) {
+  if (links.length === 0) return null;
+
+  return (
+    <div className="mb-3 last:mb-0">
+      <h4 className="text-sm font-semibold mb-1.5">Related {category}</h4>
+      <ul className="list-disc list-inside space-y-1">
+        {links.map((link, i) => (
+          <li key={i}>
+            <a
+              href={link.path}
+              className="text-purple-600 dark:text-purple-400 hover:underline"
+            >
+              {link.title}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export function FactorRelatedContent({
+  nodeId,
+  subItemLabel,
+  relatedContent: directContent,
+  title = "Related Content",
+}: FactorRelatedContentProps) {
+  const content =
+    directContent ||
+    (nodeId && subItemLabel
+      ? getSubItemRelatedContent(nodeId, subItemLabel)
+      : undefined);
+
+  if (!content) {
+    return null;
+  }
+
+  const hasContent =
+    (content.risks?.length || 0) > 0 ||
+    (content.responses?.length || 0) > 0 ||
+    (content.models?.length || 0) > 0 ||
+    (content.cruxes?.length || 0) > 0;
+
+  if (!hasContent) {
+    return null;
+  }
+
+  return (
+    <div className="rounded-lg border border-purple-500/30 bg-purple-500/5 overflow-hidden">
+      <div className="flex items-center gap-2 px-4 py-2 bg-purple-500/10 border-b border-purple-500/20">
+        <span className="font-semibold text-sm">{title}</span>
+        <span className="ml-auto text-xs text-purple-600/70 dark:text-purple-400/70">
+          from YAML
+        </span>
+      </div>
+      <div className="p-4 text-sm">
+        {content.risks && <LinkList links={content.risks} category="Risks" />}
+        {content.responses && (
+          <LinkList links={content.responses} category="Responses" />
+        )}
+        {content.models && (
+          <LinkList links={content.models} category="Models" />
+        )}
+        {content.cruxes && (
+          <LinkList links={content.cruxes} category="Cruxes" />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default FactorRelatedContent;