coaia-visualizer 1.6.3 → 1.6.5

package/Dockerfile

@@ -0,0 +1,61 @@
+# =============================================================================
+# COAIA Visualizer — Docker Image
+# jgwill/coaia:visualizer
+#
+# Usage:
+#   docker run --rm -p 4321:4321 \
+#     -v /abs/path/to/file.jsonl:/data/memory.jsonl \
+#     jgwill/coaia:visualizer
+# =============================================================================
+
+# ---- Build stage ----
+FROM node:22-alpine AS builder
+
+WORKDIR /app
+
+# Install pnpm
+RUN corepack enable && corepack prepare pnpm@latest --activate
+
+# Copy lockfile + manifests first (layer cache)
+COPY package.json pnpm-lock.yaml ./
+
+# Install all deps — skip prepare hook (cli.ts not copied yet)
+RUN pnpm install --no-frozen-lockfile --ignore-scripts
+
+# Copy source
+COPY . .
+
+# Build CLI + Next.js
+RUN pnpm run prepare && pnpm build
+
+# ---- Runner stage ----
+FROM node:22-alpine AS runner
+
+WORKDIR /app
+
+RUN corepack enable && corepack prepare pnpm@latest --activate
+
+# Copy manifests + node_modules from builder, then prune dev deps
+COPY package.json pnpm-lock.yaml ./
+COPY --from=builder /app/node_modules ./node_modules
+RUN pnpm prune --prod 2>/dev/null || true
+
+# Copy built assets from builder
+COPY --from=builder /app/.next            ./.next
+COPY --from=builder /app/public           ./public
+COPY --from=builder /app/next.config.mjs  ./next.config.mjs
+
+# Entrypoint script
+COPY docker-entrypoint.sh /usr/local/bin/docker-entrypoint.sh
+RUN chmod +x /usr/local/bin/docker-entrypoint.sh
+
+# Volume for user JSONL files
+VOLUME ["/data"]
+
+ENV NODE_ENV=production
+ENV PORT=4321
+ENV COAIAV_MEMORY_PATH=/data/memory.jsonl
+
+EXPOSE 4321
+
+ENTRYPOINT ["/usr/local/bin/docker-entrypoint.sh"]

package/Dockerfile.app

@@ -0,0 +1,50 @@
+# Build stage
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# Copy package files
+COPY package.json pnpm-lock.yaml ./
+
+# Install pnpm and dependencies
+RUN npm install -g pnpm@latest && \
+  pnpm install --frozen-lockfile
+
+# Copy application code
+COPY . .
+
+# Build Next.js application
+RUN pnpm build
+
+# Production stage
+FROM node:20-alpine AS runner
+
+WORKDIR /app
+
+# Install pnpm
+RUN npm install -g pnpm@latest
+
+# Copy package files
+COPY package.json pnpm-lock.yaml ./
+
+# Install production dependencies only, skip prepare hook
+RUN pnpm install --prod --frozen-lockfile --ignore-scripts
+
+# Copy built application from builder
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/next.config.mjs ./
+COPY --from=builder /app/app ./app
+COPY --from=builder /app/components ./components
+COPY --from=builder /app/lib ./lib
+COPY --from=builder /app/dist ./dist
+
+# Create data directories
+RUN mkdir -p /app/samples /app/test-data
+
+ENV NODE_ENV=production
+ENV PORT=4321
+
+EXPOSE 4321
+
+CMD ["pnpm", "start"]

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/cli.ts

@@ -88,7 +88,7 @@ function loadConfig(args: minimist.ParsedArgs): Config {
   if (args['port'] || args['p']) {
     config.port = args['port'] || args['p'];
   }
-  if (args['no-open']) {
+  if (args['no-open'] || args.open === false) {
     config.noOpen = true;
   }
   if (args['live']) {
@@ -242,11 +242,14 @@ EXAMPLES:
       }, 4000);
     }
 
-    process.on('SIGINT', () => {
+    const shutdownDocker = () => {
       console.log('\n👋 Shutting down visualizer...');
       dockerProcess.kill();
       process.exit(0);
-    });
+    };
+
+    process.on('SIGINT', shutdownDocker);
+    process.on('SIGTERM', shutdownDocker);
 
     dockerProcess.on('exit', (code) => { process.exit(code || 0); });
     return;
@@ -295,11 +298,14 @@ EXAMPLES:
   }
 
   // Handle shutdown
-  process.on('SIGINT', () => {
+  const shutdownLocal = () => {
     console.log('\n👋 Shutting down visualizer...');
     nextProcess.kill();
     process.exit(0);
-  });
+  };
+
+  process.on('SIGINT', shutdownLocal);
+  process.on('SIGTERM', shutdownLocal);
 
   nextProcess.on('exit', (code) => {
     process.exit(code || 0);

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-editable.tsx

@@ -17,6 +17,7 @@ import { EditActionStep } from "./edit-action-step"
 import { AddActionStep } from "./add-action-step"
 import { EditChartDueDate } from "./edit-chart-due-date"
 import { ChartEditor } from "@/lib/chart-editor"
+import { ProjectSourceBadge } from "./github-provenance"
 
 interface ChartDetailEditableProps {
   chart: Chart
@@ -89,6 +90,7 @@ export function ChartDetailEditable({
               <div className="flex items-center gap-4 text-sm text-muted-foreground">
                 <span>Created {createdDate}</span>
               </div>
+              <ProjectSourceBadge entity={chart.chartEntity} className="mt-3" />
             </div>
             <div>
               <EditChartDueDate

package/components/chart-detail.tsx

@@ -7,7 +7,9 @@ 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"
 
 interface ChartDetailProps {
   chart: Chart
@@ -41,6 +43,7 @@ export function ChartDetail({ chart, data }: ChartDetailProps) {
                   </div>
                 )}
               </div>
+              <ProjectSourceBadge entity={chart.chartEntity} className="mt-3" />
             </div>
           </div>
         </CardHeader>
@@ -140,6 +143,8 @@ export function ChartDetail({ chart, data }: ChartDetailProps) {
         </div>
       )}
 
+      <MetadataProjections chart={chart} data={data} />
+
       {/* Sub-charts */}
       {chart.subCharts.length > 0 && (
         <Card>
@@ -194,7 +199,10 @@ function ActionItem({ action, index }: ActionItemProps) {
       </div>
       <div className="flex-1 min-w-0">
         <div className="flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between sm:gap-2 mb-1">
-          <span className="text-xs md:text-sm font-medium">Action {index}</span>
+          <div className="flex flex-wrap items-center gap-2">
+            <span className="text-xs md:text-sm font-medium">Action {index}</span>
+            <ActionStepIssueBadge action={action} />
+          </div>
           {dueDate && (
             <div className="flex items-center gap-1 text-xs text-muted-foreground">
               <Calendar className="w-3 h-3" />

package/components/edit-action-step.tsx

@@ -8,6 +8,7 @@ import { Calendar } from "@/components/ui/calendar"
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
 import { format } from "date-fns"
 import type { EntityRecord } from "@/lib/types"
+import { ActionStepIssueBadge } from "@/components/github-provenance"
 
 interface EditActionStepProps {
   action: EntityRecord
@@ -113,6 +114,7 @@ export function EditActionStep({
         <div className="flex items-start justify-between gap-2">
           <div className="flex items-center gap-2 flex-wrap">
             <span className="text-sm font-medium">Action {index}</span>
+            <ActionStepIssueBadge action={action} />
             {isTelescopedChart && (
               <span className="text-xs bg-primary text-primary-foreground px-2.5 py-1 rounded-md font-semibold shadow-sm">
                 📊 Chart