coaia-visualizer 1.6.1 → 1.6.3

package/README.md

@@ -17,6 +17,7 @@ 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).
 *   **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.
 
@@ -113,4 +114,3 @@ Continue building your app on:
 ## Alternative
 * You can run it locally
 
-

package/app/page.tsx

@@ -8,6 +8,7 @@ import { DataStats } from "@/components/data-stats"
 import { CreateChartForm } from "@/components/create-chart-form"
 import type { ParsedData, Chart } from "@/lib/types"
 import { parseJSONL, organizeData } from "@/lib/jsonl-parser"
+import { serializeParsedData } from "@/lib/jsonl-preservation"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { Download, Upload, RefreshCw, Save, Edit3, Plus } from "lucide-react"
 import { Button } from "@/components/ui/button"
@@ -120,20 +121,10 @@ export default function Page() {
 
     setIsLoading(true)
     try {
-      const jsonlLines: string[] = []
-
-      for (const entity of data.entities.values()) {
-        jsonlLines.push(JSON.stringify(entity))
-      }
-
-      for (const relation of data.relations) {
-        jsonlLines.push(JSON.stringify(relation))
-      }
-
       const response = await fetch("/api/jsonl", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ content: jsonlLines.join("\n") + "\n" }),
+        body: JSON.stringify({ content: serializeParsedData(data) }),
       })
 
       if (response.ok) {
@@ -160,17 +151,7 @@ export default function Page() {
   const handleExportData = () => {
     if (!data) return
 
-    const jsonlLines: string[] = []
-
-    for (const entity of data.entities.values()) {
-      jsonlLines.push(JSON.stringify(entity))
-    }
-
-    for (const relation of data.relations) {
-      jsonlLines.push(JSON.stringify(relation))
-    }
-
-    const blob = new Blob([jsonlLines.join("\n") + "\n"], { type: "application/jsonl" })
+    const blob = new Blob([serializeParsedData(data)], { type: "application/jsonl" })
     const url = URL.createObjectURL(blob)
     const a = document.createElement("a")
     a.href = url
@@ -206,7 +187,7 @@ export default function Page() {
       const previousChartId = newStack.pop()!.id
       setChartNavigationStack(newStack)
       // Find the refreshed parent chart from current data (with populated subCharts)
-      const refreshedParent = data.charts.find((c) => c.id === previousChartId)
+      const refreshedParent = data?.charts.find((c) => c.id === previousChartId)
       if (refreshedParent) {
         setSelectedChart(refreshedParent)
       }

package/components/chart-detail-editable.tsx

@@ -9,6 +9,7 @@ import { Separator } from "@/components/ui/separator"
 import type { ParsedData, Chart } from "@/lib/types"
 import { Target, MapPin, ListChecks, Network, BookOpen, TrendingUp, ArrowLeft } from "lucide-react"
 import { NarrativeBeats } from "@/components/narrative-beats"
+import { MetadataProjections } from "@/components/metadata-projections"
 import { RelationGraph } from "@/components/relation-graph"
 import { EditDesiredOutcome } from "./edit-desired-outcome"
 import { EditCurrentReality } from "./edit-current-reality"
@@ -218,6 +219,8 @@ export function ChartDetailEditable({
         </div>
       )}
 
+      <MetadataProjections chart={chart} data={data} />
+
       {/* Sub-charts */}
       {chart.subCharts.length > 0 && (
         <Card>

package/components/metadata-projections.tsx

@@ -0,0 +1,208 @@
+"use client"
+
+import { AlertTriangle, Blocks, FileJson, Github, ListChecks, Sparkles, Target } from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import type { Chart, EntityRecord, ParsedData } from "@/lib/types"
+
+interface MetadataProjectionsProps {
+  chart: Chart
+  data: ParsedData
+}
+
+const KNOWN_METADATA_KEYS = new Set([
+  "dueDate",
+  "chartId",
+  "phase",
+  "completionStatus",
+  "completedAt",
+  "parentChart",
+  "parentActionStep",
+  "level",
+  "createdAt",
+  "updatedAt",
+  "act",
+  "type_dramatic",
+  "universes",
+  "timestamp",
+  "elementsOfPerformance",
+  "mmotEvaluations",
+  "relationalAlignment",
+  "fourDirections",
+  "narrative",
+  "isTelescopedChart",
+  "telescopedChartId",
+  "github",
+])
+
+function JsonBlock({ value }: { value: unknown }) {
+  return (
+    <pre className="max-h-64 overflow-auto rounded-md border bg-muted/40 p-3 text-xs leading-relaxed">
+      {JSON.stringify(value, null, 2)}
+    </pre>
+  )
+}
+
+function ProjectionRecord({ entity, label }: { entity?: EntityRecord; label: string }) {
+  if (!entity) return null
+
+  const metadata = entity.metadata || {}
+  const unknownKeys = Object.keys(metadata).filter((key) => !KNOWN_METADATA_KEYS.has(key))
+
+  return (
+    <div className="rounded-md border p-3">
+      <div className="flex flex-wrap items-center gap-2">
+        <Badge variant="outline">{label}</Badge>
+        <span className="font-mono text-xs text-muted-foreground">{entity.name}</span>
+        {metadata.github && (
+          <Badge variant="secondary" className="gap-1">
+            <Github className="h-3 w-3" />
+            GitHub
+          </Badge>
+        )}
+        {unknownKeys.length > 0 && <Badge variant="secondary">{unknownKeys.length} extensions</Badge>}
+      </div>
+
+      {metadata.github && (
+        <div className="mt-3">
+          <div className="mb-1 flex items-center gap-2 text-sm font-medium">
+            <Github className="h-4 w-4" />
+            GitHub Provenance
+          </div>
+          <JsonBlock value={metadata.github} />
+        </div>
+      )}
+
+      <details className="mt-3">
+        <summary className="cursor-pointer text-sm font-medium">Full Metadata</summary>
+        <div className="mt-2">
+          <JsonBlock value={metadata} />
+        </div>
+      </details>
+    </div>
+  )
+}
+
+export function MetadataProjections({ chart, data }: MetadataProjectionsProps) {
+  const riseSpec = (data.riseSpecs || []).find((spec) => spec.chartId === chart.id)
+  const chartRecordNames = new Set(
+    [
+      chart.chartEntity.name,
+      chart.desiredOutcome?.name,
+      chart.currentReality?.name,
+      ...chart.actions.map((action) => action.name),
+      ...chart.narrativeBeats.map((beat) => beat.name),
+    ].filter(Boolean),
+  )
+  const warnings = (data.preservationWarnings || []).filter(
+    (warning) => !warning.recordName || chartRecordNames.has(warning.recordName),
+  )
+
+  return (
+    <div className="space-y-6">
+      {warnings.length > 0 && (
+        <Card className="border-amber-500/40">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-base">
+              <AlertTriangle className="h-5 w-5 text-amber-600" />
+              Preservation 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="text-muted-foreground">{warning.message}</div>
+                {warning.upstreamIssue && (
+                  <a className="text-xs underline" href={warning.upstreamIssue} target="_blank" rel="noreferrer">
+                    avadisabelle/coaia-narrative#35
+                  </a>
+                )}
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      )}
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-base">
+            <Blocks className="h-5 w-5" />
+            RISE Projection
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="grid gap-4 md:grid-cols-2">
+          <div>
+            <div className="mb-1 flex items-center gap-2 text-sm font-medium">
+              <Target className="h-4 w-4" />
+              Desired Outcome
+            </div>
+            <p className="text-sm text-muted-foreground">{riseSpec?.desiredOutcome || "No desired outcome"}</p>
+          </div>
+          <div>
+            <div className="mb-1 text-sm font-medium">Current Reality</div>
+            <ul className="space-y-1 text-sm text-muted-foreground">
+              {(riseSpec?.currentReality.length ? riseSpec.currentReality : ["No current reality"]).map((item, index) => (
+                <li key={index}>{item}</li>
+              ))}
+            </ul>
+          </div>
+          <div>
+            <div className="mb-1 text-sm font-medium">Natural Progression</div>
+            <ul className="space-y-1 text-sm text-muted-foreground">
+              {(riseSpec?.naturalProgression.length ? riseSpec.naturalProgression : ["No projected progression"]).map((item, index) => (
+                <li key={index}>{item}</li>
+              ))}
+            </ul>
+          </div>
+          <div>
+            <div className="mb-1 text-sm font-medium">Remaining Blockers</div>
+            <ul className="space-y-1 text-sm text-muted-foreground">
+              {(riseSpec?.remainingBlockers.length ? riseSpec.remainingBlockers : ["No blockers recorded"]).map((item, index) => (
+                <li key={index}>{item}</li>
+              ))}
+            </ul>
+          </div>
+          <div className="md:col-span-2">
+            <div className="mb-1 text-sm font-medium">Next Chart Operations</div>
+            <ul className="space-y-1 text-sm text-muted-foreground">
+              {(riseSpec?.nextOperations.length ? riseSpec.nextOperations : ["No next operations recorded"]).map((item, index) => (
+                <li key={index}>{item}</li>
+              ))}
+            </ul>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-base">
+            <FileJson className="h-5 w-5" />
+            Rich Metadata Projection
+          </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} />
+          ))}
+          <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" />
+              {data.projections?.actionStepRecords.length || 0} actions
+            </Badge>
+            <Badge variant="outline" className="gap-1">
+              <Sparkles className="h-3 w-3" />
+              {data.projections?.narrativeBeatRecords.length || 0} beats
+            </Badge>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/lib/chart-editor.ts

@@ -1,6 +1,8 @@
 // lib/chart-editor.ts - Chart editing logic
 
 import type { EntityRecord, RelationRecord, ParsedData } from "./types"
+import { buildMetadataWarnings, buildRecordProjections, serializeParsedData } from "./jsonl-preservation"
+import { buildRiseSpecs } from "./jsonl-parser"
 
 export interface ChartUpdate {
   type:
@@ -20,11 +22,13 @@ export interface ChartUpdate {
 export class ChartEditor {
   private entities: Map<string, EntityRecord>
   private relations: RelationRecord[]
+  private rawRecords: NonNullable<ParsedData["rawRecords"]>
 
   constructor(parsedData: ParsedData) {
     // Clone data to avoid mutations
     this.entities = new Map(parsedData.entities)
     this.relations = [...parsedData.relations]
+    this.rawRecords = [...(parsedData.rawRecords || [])]
   }
 
   private resolveStructuralChart(chartRef: string): { entityName: string; chartId: string; entity: EntityRecord } | null {
@@ -520,19 +524,11 @@ export class ChartEditor {
   }
 
   exportToJSONL(): string {
-    const lines: string[] = []
-
-    // Export entities
-    for (const entity of this.entities.values()) {
-      lines.push(JSON.stringify(entity))
-    }
-
-    // Export relations
-    for (const relation of this.relations) {
-      lines.push(JSON.stringify(relation))
-    }
-
-    return lines.join("\n") + "\n"
+    return serializeParsedData({
+      entities: this.entities,
+      relations: this.relations,
+      rawRecords: this.rawRecords,
+    })
   }
 
   getUpdatedData(): ParsedData {
@@ -615,6 +611,10 @@ export class ChartEditor {
       relations: this.relations,
       charts: chartsArray,
       rootCharts: rootCharts,
+      rawRecords: this.rawRecords,
+      projections: buildRecordProjections(this.entities),
+      preservationWarnings: buildMetadataWarnings(this.rawRecords),
+      riseSpecs: buildRiseSpecs(chartsArray),
     }
   }
 }

package/lib/jsonl-parser.ts

@@ -1,8 +1,9 @@
-import type { EntityRecord, RelationRecord, JSONLRecord, Chart, ParsedData } from "./types"
+import type { Chart, EntityRecord, JSONLRecord, ParsedData, RawJSONLRecord, RelationRecord, RiseSpecProjection } from "./types"
+import { buildMetadataWarnings, buildRecordProjections, normalizeJsonlRecord } from "./jsonl-preservation"
 
-export function parseJSONL(content: string): JSONLRecord[] {
+export function parseJSONL(content: string): RawJSONLRecord[] {
   const lines = content.trim().split("\n")
-  const records: JSONLRecord[] = []
+  const records: RawJSONLRecord[] = []
 
   for (const line of lines) {
     if (!line.trim()) continue
@@ -17,7 +18,44 @@ export function parseJSONL(content: string): JSONLRecord[] {
   return records
 }
 
-export function organizeData(records: JSONLRecord[]): ParsedData {
+function firstObservation(entity?: EntityRecord): string {
+  return entity?.observations?.[0] || ""
+}
+
+function asStringList(value: unknown): string[] {
+  if (Array.isArray(value)) {
+    return value.map((item) => typeof item === "string" ? item : JSON.stringify(item))
+  }
+  if (typeof value === "string" && value.trim()) {
+    return [value]
+  }
+  return []
+}
+
+export function buildRiseSpecs(charts: Chart[]): RiseSpecProjection[] {
+  return charts.map((chart) => {
+    const metadata = chart.chartEntity.metadata || {}
+    const rise = metadata.rise || metadata.riseSpec || metadata.spec || {}
+    const incompleteActions = chart.actions.filter((action) => action.metadata?.completionStatus !== true)
+
+    return {
+      chartId: chart.id,
+      desiredOutcome: firstObservation(chart.desiredOutcome),
+      currentReality: chart.currentReality?.observations || [],
+      naturalProgression: [
+        ...asStringList(rise.naturalProgression || metadata.naturalProgression),
+        ...incompleteActions.slice(0, 3).map((action) => action.observations?.[0]).filter(Boolean),
+      ],
+      remainingBlockers: asStringList(rise.remainingBlockers || rise.blockers || metadata.remainingBlockers || metadata.blockers),
+      nextOperations: [
+        ...asStringList(rise.nextOperations || metadata.nextOperations),
+        ...incompleteActions.slice(0, 5).map((action) => action.observations?.[0]).filter(Boolean),
+      ],
+    }
+  })
+}
+
+export function organizeData(records: RawJSONLRecord[]): ParsedData {
   const entities = new Map<string, EntityRecord>()
   const relations: RelationRecord[] = []
   const charts = new Map<string, Chart>()
@@ -26,10 +64,15 @@ export function organizeData(records: JSONLRecord[]): ParsedData {
 
   // First pass: separate entities and relations
   for (const record of records) {
-    if (record.type === "entity") {
-      entities.set(record.name, record)
-    } else if (record.type === "relation") {
-      relations.push(record)
+    const normalized = normalizeJsonlRecord(record)
+    if (!normalized) {
+      continue
+    }
+
+    if (normalized.type === "entity") {
+      entities.set(normalized.name, normalized)
+    } else if (normalized.type === "relation") {
+      relations.push(normalized)
     }
   }
 
@@ -163,6 +206,10 @@ export function organizeData(records: JSONLRecord[]): ParsedData {
     entities,
     relations,
     rootCharts,
+    rawRecords: records,
+    projections: buildRecordProjections(entities),
+    preservationWarnings: buildMetadataWarnings(records),
+    riseSpecs: buildRiseSpecs(Array.from(charts.values())),
   }
 }