coaia-visualizer 1.6.4 → 1.6.6

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/app/api/charts/[id]/route.ts

@@ -71,7 +71,12 @@ export const POST = withAuth(async (
 
   try {
     const chartId = params.id
-    const body = await request.json()
+    let body: any
+    try {
+      body = await request.json()
+    } catch {
+      return errorResponse('Invalid JSON body', 400)
+    }
 
     // Read current data
     const content = await fs.readFile(memoryPath, 'utf-8')

package/app/api/charts/route.ts

@@ -74,7 +74,12 @@ export const POST = withAuth(async (request: NextRequest) => {
   }
 
   try {
-    const body = await request.json()
+    let body: any
+    try {
+      body = await request.json()
+    } catch {
+      return errorResponse('Invalid JSON body', 400)
+    }
     const { desiredOutcome, currentReality, dueDate, parentChartId } = body
 
     if (!desiredOutcome || !currentReality) {

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,148 @@
+"use client"
+
+import { AlertTriangle, Clock, FileCheck2, Headphones, Leaf, Link2, MapPin, Mic, Monitor, ScrollText, Shield, Wind } 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> = {
+  clear: "border-emerald-500/40 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
+  windy: "border-orange-500/40 bg-orange-500/10 text-orange-700 dark:text-orange-300",
+  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",
+  branch: "border-violet-500/40 bg-violet-500/10 text-violet-700 dark:text-violet-300",
+  "parent-return": "border-fuchsia-500/40 bg-fuchsia-500/10 text-fuchsia-700 dark:text-fuchsia-300",
+  "follow-up": "border-sky-500/40 bg-sky-500/10 text-sky-700 dark:text-sky-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.landBasedLearning && (
+        <Badge variant="outline" className="gap-1 border-emerald-500/40 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300">
+          <Leaf className="h-3 w-3" />
+          land-based
+        </Badge>
+      )}
+
+      {context.environmentNotes && context.environmentNotes.length > 0 && (
+        <Badge variant="outline" className="gap-1">
+          <Wind className="h-3 w-3" />
+          {context.environmentNotes.join(", ")}
+        </Badge>
+      )}
+
+      {context.listeningContext && (
+        <Badge variant="outline" className="gap-1">
+          <Headphones className="h-3 w-3" />
+          {context.listeningContext}
+        </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-editable.tsx

@@ -1,6 +1,7 @@
 // components/chart-detail-editable.tsx
 "use client"
 
+import { useState } from "react"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
@@ -35,12 +36,19 @@ export function ChartDetailEditable({
   onNavigateBack,
 }: ChartDetailEditableProps) {
   const createdDate = new Date(chart.chartEntity.metadata.createdAt).toLocaleDateString()
+  const [editError, setEditError] = useState<string | null>(null)
 
   const applyEdit = (editFn: (editor: ChartEditor) => void) => {
     const editor = new ChartEditor(data)
-    editFn(editor)
-    const updatedData = editor.getUpdatedData()
-    onUpdate(updatedData)
+    try {
+      editFn(editor)
+      const updatedData = editor.getUpdatedData()
+      onUpdate(updatedData)
+      setEditError(null)
+    } catch (error) {
+      console.error("[v0] Edit failed:", error)
+      setEditError(error instanceof Error ? error.message : "Edit failed. Your changes were not saved.")
+    }
   }
 
   const handleCreateTelescopedChart = (actionName: string) => {
@@ -69,6 +77,14 @@ export function ChartDetailEditable({
 
   return (
     <div className="space-y-6">
+      {editError && (
+        <div
+          role="alert"
+          className="rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-700 dark:text-red-300"
+        >
+          {editError}
+        </div>
+      )}
       {/* Back button for sub-charts */}
       {chart.parentChart && onNavigateBack && (
         <Button variant="ghost" size="sm" onClick={onNavigateBack} className="mb-2">

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>