coaia-visualizer 1.6.4 → 1.6.5

package/README.md

@@ -17,7 +17,8 @@ This tool allows users to upload their `coaia-narrative` memory files and gain c
 *   **Dynamic Structural Tension Display:** Clearly distinguishes and presents the core Desired Outcome and Current Reality observations, making the generative force of structural tension visible.
 *   **Action Step Tracking:** View all Action Steps for a selected chart, complete with their descriptions, completion status, and due dates, facilitating a clear understanding of strategic advancement.
 *   **Narrative Beat Integration:** Displays associated Narrative Beats, offering multi-universe perspectives (Engineer-World, Ceremony-World, Story-Engine-World) to enrich the context of your creative efforts.
-*   **Rich JSONL Metadata Projection:** Separates chart, action-step, and narrative-beat records; exposes nested `metadata.github`, RISE/spec fields, unknown extension metadata, and preservation warnings aligned with [`avadisabelle/coaia-narrative#35`](https://github.com/avadisabelle/coaia-narrative/issues/35).
+*   **Rich JSONL Metadata Projection:** Separates chart, action-step, and narrative-beat records; exposes nested `metadata.github`, RISE/spec fields, Asterion foundation/session-lineage projections, unknown extension metadata, and preservation warnings aligned with [`avadisabelle/coaia-narrative#35`](https://github.com/avadisabelle/coaia-narrative/issues/35).
+*   **Asterion Foundation & Lineage Cards:** Visualizes foundation packet metadata, artifact diffs, issue references, session branch maps, and beat-linked lineage without exposing raw Chronicle content by default.
 *   **Inter-Chart Relation Graph:** Visualizes the relationships between charts and entities, illustrating how different creative projects and their components are interconnected.
 *   **Data Statistics Overview:** Provides summary statistics of the loaded data, including total charts, entities, and relations, for quick comprehension of your creative landscape.
 

package/components/asterion-foundation-card.tsx

@@ -0,0 +1,175 @@
+"use client"
+
+import { AlertTriangle, CheckCircle2, ExternalLink, FileCheck2, FileX2, Github, Shield, UploadCloud } from "lucide-react"
+
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import type { FoundationProjection, ParsedIssueReference } from "@/lib/types"
+
+interface AsterionFoundationCardProps {
+  projection: FoundationProjection
+}
+
+const evaluationTone: Record<NonNullable<FoundationProjection["foundation"]["evaluationStatus"]>, string> = {
+  expected: "border-slate-500/40 bg-slate-500/10 text-slate-700 dark:text-slate-300",
+  delegated: "border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-300",
+  produced: "border-sky-500/40 bg-sky-500/10 text-sky-700 dark:text-sky-300",
+  evaluated: "border-emerald-500/40 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
+}
+
+const privacyTone: Record<NonNullable<FoundationProjection["foundation"]["privacyClass"]>, string> = {
+  "public-safe": "border-emerald-500/40 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
+  private: "border-destructive/40 bg-destructive/10 text-destructive",
+  mixed: "border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-300",
+}
+
+const publicationTone: Record<NonNullable<FoundationProjection["foundation"]["publicationStatus"]>, string> = {
+  planned: "border-slate-500/40 bg-slate-500/10 text-slate-700 dark:text-slate-300",
+  draft: "border-sky-500/40 bg-sky-500/10 text-sky-700 dark:text-sky-300",
+  reviewed: "border-violet-500/40 bg-violet-500/10 text-violet-700 dark:text-violet-300",
+  published: "border-emerald-500/40 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
+}
+
+export function AsterionFoundationCard({ projection }: AsterionFoundationCardProps) {
+  const foundation = projection.foundation
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-base">
+          <Shield className="h-5 w-5" />
+          Asterion Foundation
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {projection.warnings.length > 0 && (
+          <div className="space-y-2 rounded-md border border-amber-500/30 bg-amber-500/5 p-3">
+            {projection.warnings.map((warning, index) => (
+              <div key={`${warning.recordName || "foundation"}-${index}`} className="flex items-start gap-2 text-sm">
+                <AlertTriangle className="mt-0.5 h-4 w-4 text-amber-600" />
+                <span>{warning.message}</span>
+              </div>
+            ))}
+          </div>
+        )}
+
+        <div className="grid gap-3 md:grid-cols-2">
+          <MetaBlock label="Packet Root" value={foundation.packetRoot} />
+          <MetaBlock label="Foundation Type" value={foundation.foundationType} />
+        </div>
+
+        <div className="flex flex-wrap gap-2">
+          {foundation.evaluationStatus && (
+            <Badge variant="outline" className={evaluationTone[foundation.evaluationStatus]}>
+              evaluation: {foundation.evaluationStatus}
+            </Badge>
+          )}
+          {foundation.privacyClass && (
+            <Badge variant="outline" className={privacyTone[foundation.privacyClass]}>
+              privacy: {foundation.privacyClass}
+            </Badge>
+          )}
+          {foundation.publicationStatus && (
+            <Badge variant="outline" className={publicationTone[foundation.publicationStatus]}>
+              publication: {foundation.publicationStatus}
+            </Badge>
+          )}
+        </div>
+
+        {projection.issueRefs.length > 0 && (
+          <div>
+            <div className="mb-2 text-sm font-medium">Issue References</div>
+            <div className="flex flex-wrap gap-2">
+              {projection.issueRefs.map((issue) => (
+                <IssueBadge key={issue.key} issue={issue} />
+              ))}
+            </div>
+          </div>
+        )}
+
+        {projection.artifactDiff.length > 0 && (
+          <div>
+            <div className="mb-2 text-sm font-medium">Artifact Checklist</div>
+            <div className="space-y-2">
+              {projection.artifactDiff.map((artifact) => (
+                <div key={artifact.artifact} className="flex items-center justify-between rounded-md border p-3 text-sm">
+                  <div className="font-mono text-xs md:text-sm">{artifact.artifact}</div>
+                  <div className="flex items-center gap-2">
+                    {artifact.status === "matched" ? (
+                      <Badge variant="outline" className="gap-1 border-emerald-500/40 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300">
+                        <CheckCircle2 className="h-3 w-3" />
+                        matched
+                      </Badge>
+                    ) : artifact.status === "missing" ? (
+                      <Badge variant="outline" className="gap-1 border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-300">
+                        <FileX2 className="h-3 w-3" />
+                        expected only
+                      </Badge>
+                    ) : (
+                      <Badge variant="outline" className="gap-1 border-sky-500/40 bg-sky-500/10 text-sky-700 dark:text-sky-300">
+                        <UploadCloud className="h-3 w-3" />
+                        produced only
+                      </Badge>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {foundation.commitHandles && foundation.commitHandles.length > 0 && (
+          <div>
+            <div className="mb-2 text-sm font-medium">Commit Handles</div>
+            <div className="flex flex-wrap gap-2">
+              {foundation.commitHandles.map((handle) => (
+                <Badge key={handle} variant="secondary" className="font-mono text-xs">
+                  {handle}
+                </Badge>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {projection.sourceRecords.length > 0 && (
+          <div className="flex flex-wrap gap-2 text-xs text-muted-foreground">
+            <Badge variant="outline" className="gap-1">
+              <FileCheck2 className="h-3 w-3" />
+              {projection.sourceRecords.length} source record{projection.sourceRecords.length === 1 ? "" : "s"}
+            </Badge>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+function MetaBlock({ label, value }: { label: string; value?: string }) {
+  if (!value) return null
+
+  return (
+    <div className="rounded-md border p-3">
+      <div className="text-xs uppercase tracking-wide text-muted-foreground">{label}</div>
+      <div className="mt-1 text-sm font-medium">{value}</div>
+    </div>
+  )
+}
+
+function IssueBadge({ issue }: { issue: ParsedIssueReference }) {
+  const content = (
+    <Badge variant="outline" className="gap-1 text-xs">
+      <Github className="h-3 w-3" />
+      {issue.key}
+      <span className="font-normal text-muted-foreground">{issue.label}</span>
+      {issue.href && <ExternalLink className="h-3 w-3" />}
+    </Badge>
+  )
+
+  if (!issue.href) return content
+
+  return (
+    <a href={issue.href} target="_blank" rel="noreferrer">
+      {content}
+    </a>
+  )
+}

package/components/asterion-session-context-badge.tsx

@@ -0,0 +1,122 @@
+"use client"
+
+import { AlertTriangle, Clock, FileCheck2, Link2, MapPin, Mic, Monitor, ScrollText, Shield } from "lucide-react"
+
+import { Badge } from "@/components/ui/badge"
+import type { SessionContextProjection } from "@/lib/types"
+
+interface AsterionSessionContextBadgeProps {
+  projection: SessionContextProjection
+}
+
+const captureQualityTone: Record<NonNullable<SessionContextProjection["context"]["captureQuality"]>, string> = {
+  complete: "border-emerald-500/40 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
+  partial: "border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-300",
+  noisy: "border-orange-500/40 bg-orange-500/10 text-orange-700 dark:text-orange-300",
+  "transcript-only": "border-sky-500/40 bg-sky-500/10 text-sky-700 dark:text-sky-300",
+}
+
+const continuationKindTone: Record<NonNullable<SessionContextProjection["context"]["continuationKind"]>, string> = {
+  new: "border-slate-500/40 bg-slate-500/10 text-slate-700 dark:text-slate-300",
+  resumption: "border-sky-500/40 bg-sky-500/10 text-sky-700 dark:text-sky-300",
+  "branch-return": "border-violet-500/40 bg-violet-500/10 text-violet-700 dark:text-violet-300",
+  "daily-chronicle": "border-emerald-500/40 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
+}
+
+const modeIcon: Record<string, React.ElementType> = {
+  voice: Mic,
+  terminal: Monitor,
+  mixed: ScrollText,
+}
+
+const settingIcon: Record<string, React.ElementType> = {
+  outdoor: MapPin,
+  walking: MapPin,
+  "land-based": MapPin,
+  indoor: Monitor,
+  office: Monitor,
+}
+
+export function AsterionSessionContextBadge({ projection }: AsterionSessionContextBadgeProps) {
+  const context = projection.context
+
+  if (Object.keys(context).length === 0) {
+    return null
+  }
+
+  const hasWarnings = projection.warnings.length > 0
+  const captureWarnings = projection.warnings.filter(
+    (w) => w.message.includes("Capture quality") || w.message.includes("partial") || w.message.includes("noisy"),
+  )
+
+  const ModeIcon = context.mode ? modeIcon[context.mode.toLowerCase()] || Monitor : Monitor
+  const SettingIcon = context.setting ? settingIcon[context.setting.toLowerCase()] || MapPin : MapPin
+
+  return (
+    <div className="flex flex-wrap items-center gap-2 rounded-md border border-sky-500/30 bg-sky-500/5 p-2">
+      <Badge variant="outline" className="gap-1 border-sky-500/40 bg-sky-500/10 text-sky-700 dark:text-sky-300">
+        <Clock className="h-3 w-3" />
+        Session Context
+      </Badge>
+
+      {context.mode && (
+        <Badge variant="outline" className="gap-1">
+          <ModeIcon className="h-3 w-3" />
+          {context.mode}
+        </Badge>
+      )}
+
+      {context.setting && (
+        <Badge variant="outline" className="gap-1">
+          <SettingIcon className="h-3 w-3" />
+          {context.setting}
+        </Badge>
+      )}
+
+      {context.captureQuality && (
+        <Badge variant="outline" className={captureQualityTone[context.captureQuality]}>
+          <FileCheck2 className="h-3 w-3" />
+          capture: {context.captureQuality}
+        </Badge>
+      )}
+
+      {context.continuationKind && (
+        <Badge variant="outline" className={continuationKindTone[context.continuationKind]}>
+          {context.continuationKind}
+        </Badge>
+      )}
+
+      {context.publicSummaryAllowed !== undefined && (
+        <Badge variant="outline" className={context.publicSummaryAllowed ? "border-emerald-500/40" : "border-red-500/40"}>
+          <Shield className="h-3 w-3" />
+          {context.publicSummaryAllowed ? "public-safe" : "private"}
+        </Badge>
+      )}
+
+      {context.handle && (
+        <Badge variant="secondary" className="gap-1 font-mono text-xs">
+          <Link2 className="h-3 w-3" />
+          {context.handle}
+        </Badge>
+      )}
+
+      {captureWarnings.length > 0 && (
+        <Badge variant="outline" className="gap-1 border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-300">
+          <AlertTriangle className="h-3 w-3" />
+          quality note
+        </Badge>
+      )}
+
+      {hasWarnings && (
+        <div className="w-full space-y-1 pt-1 text-xs text-muted-foreground">
+          {projection.warnings.map((warning, index) => (
+            <div key={`${projection.beatName}-${index}`} className="flex items-start gap-1">
+              <AlertTriangle className="mt-0.5 h-3 w-3 flex-shrink-0 text-amber-600" />
+              <span>{warning.message}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/components/asterion-session-lineage-card.tsx

@@ -0,0 +1,119 @@
+"use client"
+
+import { AlertTriangle, ExternalLink, Github, GitBranch, Link2, Workflow } from "lucide-react"
+
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import type { SessionLineageProjection } from "@/lib/types"
+
+interface AsterionSessionLineageCardProps {
+  projection: SessionLineageProjection
+}
+
+const handoffTone: Record<NonNullable<SessionLineageProjection["branches"][number]["metadata"]["handoffState"]>, string> = {
+  "requirements-created": "border-slate-500/40 bg-slate-500/10 text-slate-700 dark:text-slate-300",
+  "implementation-ready": "border-sky-500/40 bg-sky-500/10 text-sky-700 dark:text-sky-300",
+  "returned-to-parent": "border-emerald-500/40 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
+}
+
+export function AsterionSessionLineageCard({ projection }: AsterionSessionLineageCardProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-base">
+          <Workflow className="h-5 w-5" />
+          Asterion Session Lineage
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {projection.warnings.length > 0 && (
+          <div className="space-y-2 rounded-md border border-amber-500/30 bg-amber-500/5 p-3">
+            {projection.warnings.map((warning, index) => (
+              <div key={`${warning.recordName || "lineage"}-${index}`} className="flex items-start gap-2 text-sm">
+                <AlertTriangle className="mt-0.5 h-4 w-4 text-amber-600" />
+                <span>{warning.message}</span>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {projection.groupedBranches.map((group) => (
+          <div key={group.sourceBeat} className="rounded-md border p-4">
+            <div className="mb-3 flex flex-wrap items-center gap-2">
+              <Badge variant="outline" className="gap-1">
+                <GitBranch className="h-3 w-3" />
+                {group.branches.length} branch{group.branches.length === 1 ? "" : "es"}
+              </Badge>
+              {group.sourceBeatExistsInChart && group.sourceBeatAnchor ? (
+                <a href={`#${group.sourceBeatAnchor}`} className="inline-flex items-center gap-1 text-sm font-medium underline">
+                  <Link2 className="h-3.5 w-3.5" />
+                  {group.sourceBeat}
+                </a>
+              ) : (
+                <div className="text-sm font-medium">{group.sourceBeat}</div>
+              )}
+            </div>
+
+            <div className="space-y-3">
+              {group.branches.map((branch) => (
+                <div key={`${branch.sourceRecordName || branch.metadata.branchSessionId}-${branch.metadata.branchIndex || 0}`} className="rounded-md border bg-muted/20 p-3">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <Badge variant="secondary">branch {branch.metadata.branchIndex ?? "?"}</Badge>
+                    {branch.metadata.handoffState && (
+                      <Badge variant="outline" className={handoffTone[branch.metadata.handoffState]}>
+                        {branch.metadata.handoffState}
+                      </Badge>
+                    )}
+                    {branch.metadata.platform && <Badge variant="outline">{branch.metadata.platform}</Badge>}
+                  </div>
+
+                  <div className="mt-3 grid gap-2 text-sm md:grid-cols-2">
+                    <Field label="Purpose" value={branch.metadata.branchPurpose} />
+                    <Field label="Copied Messages" value={branch.metadata.copiedMessageCount?.toString()} />
+                    <Field label="Parent Chart" value={branch.metadata.parentChartId} />
+                    <Field label="Original Session" value={branch.metadata.originalSessionId} mono />
+                    <Field label="Branch Session" value={branch.metadata.branchSessionId} mono />
+                    <Field label="Source Record" value={branch.sourceRecordName} mono />
+                  </div>
+
+                  {branch.relatedIssueRefs.length > 0 && (
+                    <div className="mt-3 flex flex-wrap gap-2">
+                      {branch.relatedIssueRefs.map((issue) => {
+                        const badge = (
+                          <Badge variant="outline" className="gap-1 text-xs">
+                            <Github className="h-3 w-3" />
+                            {issue.label}
+                            {issue.href && <ExternalLink className="h-3 w-3" />}
+                          </Badge>
+                        )
+
+                        return issue.href ? (
+                          <a key={`${issue.key}-${issue.label}`} href={issue.href} target="_blank" rel="noreferrer">
+                            {badge}
+                          </a>
+                        ) : (
+                          <span key={`${issue.key}-${issue.label}`}>{badge}</span>
+                        )
+                      })}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}
+
+function Field({ label, value, mono = false }: { label: string; value?: string; mono?: boolean }) {
+  if (!value) return null
+
+  return (
+    <div>
+      <div className="text-xs uppercase tracking-wide text-muted-foreground">{label}</div>
+      <div className={`mt-1 ${mono ? "font-mono text-xs" : "text-sm"}`}>{value}</div>
+    </div>
+  )
+}

package/components/chart-detail.tsx

@@ -7,6 +7,7 @@ import { Separator } from "@/components/ui/separator"
 import type { ParsedData, Chart, EntityRecord } from "@/lib/types"
 import { Target, MapPin, ListChecks, Network, BookOpen, Calendar, TrendingUp, CheckCircle2, Circle } from "lucide-react"
 import { NarrativeBeats } from "./narrative-beats"
+import { MetadataProjections } from "./metadata-projections"
 import { RelationGraph } from "./relation-graph"
 import { ActionStepIssueBadge, ProjectSourceBadge } from "./github-provenance"
 
@@ -142,6 +143,8 @@ export function ChartDetail({ chart, data }: ChartDetailProps) {
         </div>
       )}
 
+      <MetadataProjections chart={chart} data={data} />
+
       {/* Sub-charts */}
       {chart.subCharts.length > 0 && (
         <Card>

package/components/metadata-projections.tsx

@@ -1,9 +1,12 @@
 "use client"
 
 import { AlertTriangle, Blocks, FileJson, Github, ListChecks, Sparkles, Target } from "lucide-react"
+
+import { AsterionFoundationCard } from "@/components/asterion-foundation-card"
+import { AsterionSessionLineageCard } from "@/components/asterion-session-lineage-card"
 import { Badge } from "@/components/ui/badge"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import type { Chart, EntityRecord, ParsedData } from "@/lib/types"
+import type { Chart, EntityRecord, MetadataWarning, ParsedData } from "@/lib/types"
 
 interface MetadataProjectionsProps {
   chart: Chart
@@ -33,6 +36,17 @@ const KNOWN_METADATA_KEYS = new Set([
   "isTelescopedChart",
   "telescopedChartId",
   "github",
+  "asterion",
+  "asterionMetadata",
+  "asterionFoundation",
+  "foundation",
+  "foundationMetadata",
+  "sessionLineage",
+  "sessionLineageMetadata",
+  "sessionContext",
+  "sessionContextMetadata",
+  "livedContext",
+  "chronicle",
 ])
 
 function JsonBlock({ value }: { value: unknown }) {
@@ -83,6 +97,16 @@ function ProjectionRecord({ entity, label }: { entity?: EntityRecord; label: str
   )
 }
 
+function dedupeWarnings(warnings: MetadataWarning[]): MetadataWarning[] {
+  const seen = new Set<string>()
+  return warnings.filter((warning) => {
+    const key = `${warning.recordName || ""}|${warning.recordType || ""}|${warning.message}`
+    if (seen.has(key)) return false
+    seen.add(key)
+    return true
+  })
+}
+
 export function MetadataProjections({ chart, data }: MetadataProjectionsProps) {
   const riseSpec = (data.riseSpecs || []).find((spec) => spec.chartId === chart.id)
   const chartRecordNames = new Set(
@@ -94,9 +118,11 @@ export function MetadataProjections({ chart, data }: MetadataProjectionsProps) {
       ...chart.narrativeBeats.map((beat) => beat.name),
     ].filter(Boolean),
   )
-  const warnings = (data.preservationWarnings || []).filter(
-    (warning) => !warning.recordName || chartRecordNames.has(warning.recordName),
-  )
+  const warnings = dedupeWarnings([
+    ...(data.preservationWarnings || []).filter((warning) => !warning.recordName || chartRecordNames.has(warning.recordName)),
+    ...(chart.foundationProjection?.warnings || []),
+    ...(chart.sessionLineageProjection?.warnings || []),
+  ])
 
   return (
     <div className="space-y-6">
@@ -105,13 +131,13 @@ export function MetadataProjections({ chart, data }: MetadataProjectionsProps) {
           <CardHeader>
             <CardTitle className="flex items-center gap-2 text-base">
               <AlertTriangle className="h-5 w-5 text-amber-600" />
-              Preservation Warnings
+              Metadata Warnings
             </CardTitle>
           </CardHeader>
           <CardContent className="space-y-2">
             {warnings.map((warning, index) => (
               <div key={`${warning.recordName}-${index}`} className="rounded-md border border-amber-500/30 bg-amber-500/5 p-3 text-sm">
-                <div className="font-medium">{warning.recordName || warning.recordType || "JSONL record"}</div>
+                <div className="font-medium">{warning.recordName || warning.recordType || "Chart metadata"}</div>
                 <div className="text-muted-foreground">{warning.message}</div>
                 {warning.upstreamIssue && (
                   <a className="text-xs underline" href={warning.upstreamIssue} target="_blank" rel="noreferrer">
@@ -124,6 +150,9 @@ export function MetadataProjections({ chart, data }: MetadataProjectionsProps) {
         </Card>
       )}
 
+      {chart.foundationProjection && <AsterionFoundationCard projection={chart.foundationProjection} />}
+      {chart.sessionLineageProjection && <AsterionSessionLineageCard projection={chart.sessionLineageProjection} />}
+
       <Card>
         <CardHeader>
           <CardTitle className="flex items-center gap-2 text-base">
@@ -178,19 +207,24 @@ export function MetadataProjections({ chart, data }: MetadataProjectionsProps) {
         <CardHeader>
           <CardTitle className="flex items-center gap-2 text-base">
             <FileJson className="h-5 w-5" />
-            Rich Metadata Projection
+            Raw Metadata
           </CardTitle>
         </CardHeader>
         <CardContent className="space-y-3">
-          <ProjectionRecord label="Chart" entity={chart.chartEntity} />
-          <ProjectionRecord label="Desired Outcome" entity={chart.desiredOutcome} />
-          <ProjectionRecord label="Current Reality" entity={chart.currentReality} />
-          {chart.actions.map((action) => (
-            <ProjectionRecord key={action.name} label="Action Step" entity={action} />
-          ))}
-          {chart.narrativeBeats.map((beat) => (
-            <ProjectionRecord key={beat.name} label="Narrative Beat" entity={beat} />
-          ))}
+          <details>
+            <summary className="cursor-pointer text-sm font-medium">Show preserved JSONL metadata</summary>
+            <div className="mt-3 space-y-3">
+              <ProjectionRecord label="Chart" entity={chart.chartEntity} />
+              <ProjectionRecord label="Desired Outcome" entity={chart.desiredOutcome} />
+              <ProjectionRecord label="Current Reality" entity={chart.currentReality} />
+              {chart.actions.map((action) => (
+                <ProjectionRecord key={action.name} label="Action Step" entity={action} />
+              ))}
+              {chart.narrativeBeats.map((beat) => (
+                <ProjectionRecord key={beat.name} label="Narrative Beat" entity={beat} />
+              ))}
+            </div>
+          </details>
           <div className="flex flex-wrap gap-2 pt-1 text-sm text-muted-foreground">
             <Badge variant="outline" className="gap-1">
               <ListChecks className="h-3 w-3" />

package/components/narrative-beats.tsx

@@ -1,9 +1,12 @@
 "use client"
 
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Clock, Compass, Drama, Link2, Sparkles } from "lucide-react"
+
+import { AsterionSessionContextBadge } from "@/components/asterion-session-context-badge"
 import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { getNarrativeBeatAnchorId, parseSessionContextMetadata } from "@/lib/asterion-metadata"
 import type { EntityRecord } from "@/lib/types"
-import { Clock, Compass, Drama, Sparkles } from "lucide-react"
 
 interface NarrativeBeatsProps {
   beats: EntityRecord[]
@@ -29,8 +32,11 @@ export function NarrativeBeats({ beats }: NarrativeBeatsProps) {
         const universes = beat.metadata.universes || []
         const timestamp = beat.metadata.timestamp ? new Date(beat.metadata.timestamp).toLocaleString() : null
 
+        const anchorId = getNarrativeBeatAnchorId(beat, idx)
+        const sessionContextProjection = parseSessionContextMetadata(beat, idx)
+
         return (
-          <Card key={beat.name} className="border-l-4 border-l-chart-3">
+          <Card id={anchorId} key={beat.name} className="scroll-mt-24 border-l-4 border-l-chart-3">
             <CardHeader className="bg-chart-3/5">
               <div className="flex items-start justify-between gap-4">
                 <div className="flex-1">
@@ -42,6 +48,10 @@ export function NarrativeBeats({ beats }: NarrativeBeatsProps) {
                     <Badge variant="outline" className="border-chart-3 text-chart-3">
                       Beat {idx + 1}
                     </Badge>
+                    <a href={`#${anchorId}`} className="inline-flex items-center gap-1 text-xs text-muted-foreground underline">
+                      <Link2 className="h-3 w-3" />
+                      anchor
+                    </a>
                   </div>
                   {timestamp && (
                     <CardDescription className="flex items-center gap-1">
@@ -53,6 +63,9 @@ export function NarrativeBeats({ beats }: NarrativeBeatsProps) {
               </div>
             </CardHeader>
             <CardContent className="space-y-4 pt-4">
+              {/* Session Context Badge */}
+              {sessionContextProjection && <AsterionSessionContextBadge projection={sessionContextProjection} />}
+
               {/* Universes */}
               <div className="flex items-center gap-2 flex-wrap">
                 <Compass className="w-4 h-4 text-muted-foreground" />

package/index.tsx

@@ -3,15 +3,24 @@
 
 // Types
 export type {
+  ArtifactDiffEntry,
+  Chart,
   EntityRecord,
-  RelationRecord,
+  FoundationMetadata,
+  FoundationProjection,
   JSONLRecord,
-  Chart,
   ParsedData,
+  ParsedIssueReference,
+  RelationRecord,
+  SessionLineageBranchProjection,
+  SessionLineageGroupProjection,
+  SessionLineageMetadata,
+  SessionLineageProjection,
 } from "./lib/types"
 
 // JSONL Parser
 export { parseJSONL, organizeData, getChartSummary, getChartProgress } from "./lib/jsonl-parser"
+export { extractAsterionMetadata, getNarrativeBeatAnchorId, parseFoundationMetadata, parseSessionLineageMetadata } from "./lib/asterion-metadata"
 
 // GitHub provenance helpers
 export {
@@ -53,6 +62,8 @@ export { ChartDetail } from "./components/chart-detail"
 export { DataStats } from "./components/data-stats"
 export { CreateChartForm } from "./components/create-chart-form"
 export { NarrativeBeats } from "./components/narrative-beats"
+export { AsterionFoundationCard } from "./components/asterion-foundation-card"
+export { AsterionSessionLineageCard } from "./components/asterion-session-lineage-card"
 export { ActionStepIssueBadge, ProjectSourceBadge, SyncStatePill } from "./components/github-provenance"
 export { LiveIndicator } from "./components/live-indicator"
 export { ThemeToggle } from "./components/theme-toggle"