coaia-visualizer 1.5.10 → 1.6.0

package/README.md

@@ -109,3 +109,8 @@ Continue building your app on:
 2.  Deploy your chats from the v0 interface.
 3.  Changes are automatically pushed to this repository.
 4.  Vercel deploys the latest version from this repository.
+
+## Alternative
+* You can run it locally
+
+

package/components/chart-detail-editable.tsx

@@ -16,6 +16,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
@@ -88,6 +89,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

@@ -8,6 +8,7 @@ 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 { RelationGraph } from "./relation-graph"
+import { ActionStepIssueBadge, ProjectSourceBadge } from "./github-provenance"
 
 interface ChartDetailProps {
   chart: Chart
@@ -41,6 +42,7 @@ export function ChartDetail({ chart, data }: ChartDetailProps) {
                   </div>
                 )}
               </div>
+              <ProjectSourceBadge entity={chart.chartEntity} className="mt-3" />
             </div>
           </div>
         </CardHeader>
@@ -194,7 +196,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

package/components/github-provenance.tsx

@@ -0,0 +1,226 @@
+"use client"
+
+import { useState } from "react"
+import type { LucideIcon } from "lucide-react"
+import { AlertTriangle, CheckCircle2, Cloud, ExternalLink, FolderOpen, Github, GitBranch, XCircle } from "lucide-react"
+
+import { Badge } from "@/components/ui/badge"
+import type { EntityRecord } from "@/lib/types"
+import {
+  formatGithubIssueRef,
+  formatProjectItemRef,
+  getGithubEntityProvenance,
+  getGithubIssueRef,
+  getGithubSyncState,
+  getProjectFieldEntries,
+  type GithubSyncState,
+} from "@/lib/github-provenance"
+import { cn } from "@/lib/utils"
+
+interface SyncStatePillProps {
+  syncState?: GithubSyncState
+  className?: string
+}
+
+const syncStateConfig: Record<GithubSyncState, { label: string; className: string; Icon: LucideIcon }> = {
+  synced: {
+    label: "synced",
+    className: "border-emerald-500/40 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
+    Icon: CheckCircle2,
+  },
+  diverged: {
+    label: "diverged",
+    className: "border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-300",
+    Icon: AlertTriangle,
+  },
+  conflict: {
+    label: "conflict",
+    className: "border-destructive/40 bg-destructive/10 text-destructive",
+    Icon: XCircle,
+  },
+  "project-only": {
+    label: "project-only",
+    className: "border-slate-500/40 bg-slate-500/10 text-slate-700 dark:text-slate-300",
+    Icon: Cloud,
+  },
+  "chart-only": {
+    label: "chart-only",
+    className: "border-slate-500/40 bg-slate-500/10 text-slate-700 dark:text-slate-300",
+    Icon: FolderOpen,
+  },
+}
+
+export function SyncStatePill({ syncState, className }: SyncStatePillProps) {
+  if (!syncState) return null
+
+  const { label, className: stateClassName, Icon } = syncStateConfig[syncState]
+
+  return (
+    <Badge variant="outline" className={cn("gap-1 text-xs", stateClassName, className)}>
+      <Icon className="w-3 h-3" />
+      {label}
+    </Badge>
+  )
+}
+
+interface ProjectSourceBadgeProps {
+  entity: EntityRecord
+  className?: string
+  compact?: boolean
+}
+
+export function ProjectSourceBadge({ entity, className, compact = false }: ProjectSourceBadgeProps) {
+  const [selectedLensIndex, setSelectedLensIndex] = useState(0)
+  const provenance = getGithubEntityProvenance(entity)
+
+  if (!provenance.hasGithubMetadata) return null
+
+  const projectItems = provenance.projectItems
+  const activeLensIndex = projectItems.length > 0 ? Math.min(selectedLensIndex, projectItems.length - 1) : 0
+  const activeProjectItem = projectItems[activeLensIndex]
+  const projectRef = formatProjectItemRef(activeProjectItem)
+  const issueRef = formatGithubIssueRef(provenance.issue)
+  const projectTitle = activeProjectItem?.projectTitle
+  const fieldEntries = getProjectFieldEntries(entity, activeProjectItem)
+  const sourceLabel = getSourceLabel(provenance.source?.system, provenance.source?.toolName, provenance.lastSyncedAt)
+  const projectTooltip = [
+    projectTitle,
+    activeProjectItem?.itemId && `item ${activeProjectItem.itemId}`,
+    activeProjectItem?.projectId && `project ${activeProjectItem.projectId}`,
+    activeProjectItem?.url,
+  ]
+    .filter(Boolean)
+    .join(" · ")
+
+  return (
+    <div
+      className={cn(
+        "rounded-md border border-indigo-500/20 bg-indigo-500/5 p-3 text-sm",
+        compact && "p-2",
+        className,
+      )}
+    >
+      <div className="flex flex-wrap items-center gap-2">
+        {activeProjectItem?.url ? (
+          <a href={activeProjectItem.url} target="_blank" rel="noreferrer" title={projectTooltip}>
+            <ProjectBadge label={projectRef ?? "Project bridge"} />
+          </a>
+        ) : (
+          <ProjectBadge label={projectRef ?? "Project bridge"} title={projectTooltip} />
+        )}
+
+        {provenance.issue &&
+          (provenance.issue.url ? (
+            <a href={provenance.issue.url} target="_blank" rel="noreferrer" title={issueRef}>
+              <Badge variant="outline" className="gap-1 text-xs">
+                <Github className="w-3 h-3" />#{provenance.issue.number}
+                <ExternalLink className="w-3 h-3" />
+              </Badge>
+            </a>
+          ) : (
+            <Badge variant="outline" className="gap-1 text-xs" title={issueRef}>
+              <Github className="w-3 h-3" />#{provenance.issue.number}
+            </Badge>
+          ))}
+
+        <SyncStatePill syncState={provenance.syncState} />
+
+        {projectItems.length > 1 && (
+          <select
+            aria-label="Active GitHub project lens"
+            value={activeLensIndex}
+            onChange={(event) => setSelectedLensIndex(Number(event.target.value))}
+            className="h-7 rounded-md border border-border bg-background px-2 text-xs text-foreground"
+          >
+            {projectItems.map((item, index) => (
+              <option key={`${formatProjectItemRef(item) ?? item.itemId ?? "project"}-${index}`} value={index}>
+                {item.projectTitle ?? formatProjectItemRef(item) ?? `Project ${index + 1}`}
+              </option>
+            ))}
+          </select>
+        )}
+      </div>
+
+      {!compact && (projectTitle || sourceLabel || fieldEntries.length > 0) && (
+        <div className="mt-2 space-y-2 text-xs text-muted-foreground">
+          {(projectTitle || sourceLabel) && (
+            <div className="flex flex-wrap items-center gap-2">
+              {projectTitle && <span className="font-medium text-foreground">{projectTitle}</span>}
+              {sourceLabel && <span>{sourceLabel}</span>}
+            </div>
+          )}
+
+          {fieldEntries.length > 0 && (
+            <div className="flex flex-wrap gap-1.5">
+              {fieldEntries.map((field) => (
+                <span
+                  key={field.key}
+                  className="inline-flex max-w-full items-center gap-1 rounded-md border border-border bg-background px-2 py-1"
+                  title={`${field.label}: ${field.value}`}
+                >
+                  <span className="font-medium text-foreground">{field.label}</span>
+                  <span className="max-w-[18rem] truncate">{field.value}</span>
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function ProjectBadge({ label, title }: { label: string; title?: string }) {
+  return (
+    <Badge className="gap-1 bg-indigo-600 text-white hover:bg-indigo-600/90" title={title}>
+      <GitBranch className="w-3 h-3" />
+      Project: {label}
+    </Badge>
+  )
+}
+
+interface ActionStepIssueBadgeProps {
+  action: EntityRecord
+  className?: string
+}
+
+export function ActionStepIssueBadge({ action, className }: ActionStepIssueBadgeProps) {
+  const issue = getGithubIssueRef(action)
+  const syncState = getGithubSyncState(action)
+  const issueRef = formatGithubIssueRef(issue)
+
+  if (!issue && !syncState) return null
+
+  return (
+    <span className={cn("inline-flex flex-wrap items-center gap-1", className)}>
+      {issue &&
+        (issue.url ? (
+          <a href={issue.url} target="_blank" rel="noreferrer" title={issueRef}>
+            <Badge variant="outline" className="gap-1 text-xs">
+              <Github className="w-3 h-3" />#{issue.number}
+              <ExternalLink className="w-3 h-3" />
+            </Badge>
+          </a>
+        ) : (
+          <Badge variant="outline" className="gap-1 text-xs" title={issueRef}>
+            <Github className="w-3 h-3" />#{issue.number}
+          </Badge>
+        ))}
+      <SyncStatePill syncState={syncState} />
+    </span>
+  )
+}
+
+function getSourceLabel(system?: string, toolName?: string, lastSyncedAt?: string): string | undefined {
+  const parts = [system, toolName, formatDateTime(lastSyncedAt)].filter(Boolean)
+  return parts.length > 0 ? parts.join(" · ") : undefined
+}
+
+function formatDateTime(value?: string): string | undefined {
+  if (!value) return undefined
+
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return value
+
+  return date.toLocaleString()
+}

package/components/relation-graph.tsx

@@ -2,8 +2,10 @@
 
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
-import type { ParsedData, Chart, RelationRecord } from "@/lib/types"
-import { ArrowRight } from "lucide-react"
+import type { ParsedData, Chart, EntityRecord, RelationRecord } from "@/lib/types"
+import { ArrowRight, Github } from "lucide-react"
+import { getGithubBridgeRelationType, getGithubSyncState } from "@/lib/github-provenance"
+import { SyncStatePill } from "./github-provenance"
 
 interface RelationGraphProps {
   chart: Chart
@@ -23,7 +25,10 @@ export function RelationGraph({ chart, data }: RelationGraphProps) {
     )
   }
 
-  const relationsByType = relations.reduce(
+  const githubBridgeRelations = relations.filter((relation) => getGithubBridgeRelationType(relation))
+  const standardRelations = relations.filter((relation) => !getGithubBridgeRelationType(relation))
+
+  const relationsByType = standardRelations.reduce(
     (acc, rel) => {
       if (!acc[rel.relationType]) {
         acc[rel.relationType] = []
@@ -41,6 +46,28 @@ export function RelationGraph({ chart, data }: RelationGraphProps) {
         <CardDescription>Connections between chart entities</CardDescription>
       </CardHeader>
       <CardContent className="space-y-6">
+        {githubBridgeRelations.length > 0 && (
+          <div>
+            <h3 className="text-sm font-semibold mb-3 flex items-center gap-2">
+              <Badge className="gap-1 bg-indigo-600 text-white">
+                <Github className="w-3 h-3" />
+                GitHub bridge
+              </Badge>
+              <span className="text-muted-foreground">({githubBridgeRelations.length})</span>
+            </h3>
+            <div className="space-y-2">
+              {githubBridgeRelations.map((rel, idx) => (
+                <RelationRow
+                  key={`github-${idx}`}
+                  relation={rel}
+                  data={data}
+                  bridgeLabel={getGithubBridgeRelationType(rel)}
+                />
+              ))}
+            </div>
+          </div>
+        )}
+
         {Object.entries(relationsByType).map(([type, rels]) => (
           <div key={type}>
             <h3 className="text-sm font-semibold mb-3 flex items-center gap-2">
@@ -48,30 +75,9 @@ export function RelationGraph({ chart, data }: RelationGraphProps) {
               <span className="text-muted-foreground">({rels.length})</span>
             </h3>
             <div className="space-y-2">
-              {rels.map((rel, idx) => {
-                const fromEntity = data.entities.get(rel.from)
-                const toEntity = data.entities.get(rel.to)
-
-                return (
-                  <div key={idx} className="flex items-center gap-3 p-3 bg-muted/30 rounded-lg text-sm">
-                    <div className="flex-1 min-w-0">
-                      <div className="font-mono text-xs text-muted-foreground mb-1">{rel.from}</div>
-                      {fromEntity && (
-                        <div className="text-xs line-clamp-1">
-                          {fromEntity.observations[0] || fromEntity.entityType}
-                        </div>
-                      )}
-                    </div>
-                    <ArrowRight className="w-4 h-4 text-muted-foreground flex-shrink-0" />
-                    <div className="flex-1 min-w-0">
-                      <div className="font-mono text-xs text-muted-foreground mb-1">{rel.to}</div>
-                      {toEntity && (
-                        <div className="text-xs line-clamp-1">{toEntity.observations[0] || toEntity.entityType}</div>
-                      )}
-                    </div>
-                  </div>
-                )
-              })}
+              {rels.map((rel, idx) => (
+                <RelationRow key={idx} relation={rel} data={data} />
+              ))}
             </div>
           </div>
         ))}
@@ -79,3 +85,61 @@ export function RelationGraph({ chart, data }: RelationGraphProps) {
     </Card>
   )
 }
+
+interface RelationRowProps {
+  relation: RelationRecord
+  data: ParsedData
+  bridgeLabel?: string
+}
+
+function RelationRow({ relation, data, bridgeLabel }: RelationRowProps) {
+  const fromEntity = data.entities.get(relation.from)
+  const toEntity = data.entities.get(relation.to)
+  const syncState = getGithubSyncState(relation.metadata)
+
+  return (
+    <div className="flex flex-col gap-2 p-3 bg-muted/30 rounded-lg text-sm sm:flex-row sm:items-center sm:gap-3">
+      <RelationEndpoint name={relation.from} entity={fromEntity} />
+
+      <div className="flex items-center gap-2 text-muted-foreground sm:flex-col">
+        <ArrowRight className="w-4 h-4 flex-shrink-0 rotate-90 sm:rotate-0" />
+        {(bridgeLabel || syncState) && (
+          <div className="flex flex-wrap justify-center gap-1">
+            {bridgeLabel && (
+              <Badge variant="outline" className="text-xs">
+                {bridgeLabel.replace(/_/g, " ")}
+              </Badge>
+            )}
+            <SyncStatePill syncState={syncState} />
+          </div>
+        )}
+      </div>
+
+      <RelationEndpoint name={relation.to} entity={toEntity} />
+    </div>
+  )
+}
+
+function RelationEndpoint({
+  name,
+  entity,
+}: {
+  name: string
+  entity?: EntityRecord
+}) {
+  const isGithubVirtualNode = name.startsWith("gh:")
+
+  return (
+    <div className="flex-1 min-w-0">
+      <div className="font-mono text-xs text-muted-foreground mb-1 break-all">{name}</div>
+      {entity ? (
+        <div className="text-xs line-clamp-1">{entity.observations[0] || entity.entityType}</div>
+      ) : isGithubVirtualNode ? (
+        <Badge variant="outline" className="gap-1 text-xs">
+          <Github className="w-3 h-3" />
+          GitHub issue
+        </Badge>
+      ) : null}
+    </div>
+  )
+}

package/index.tsx

@@ -13,6 +13,31 @@ export type {
 // JSONL Parser
 export { parseJSONL, organizeData, getChartSummary, getChartProgress } from "./lib/jsonl-parser"
 
+// GitHub provenance helpers
+export {
+  GITHUB_BRIDGE_RELATION_TYPES,
+  GITHUB_PROJECT_FIELD_KEYS,
+  GITHUB_SYNC_STATES,
+  formatGithubIssueRef,
+  formatProjectItemRef,
+  getGithubBridgeRelationType,
+  getGithubEntityProvenance,
+  getGithubIssueRef,
+  getGithubProjectItems,
+  getGithubSource,
+  getGithubSyncState,
+  getProjectFieldEntries,
+} from "./lib/github-provenance"
+export type {
+  GithubBridgeRelationType,
+  GithubEntityProvenance,
+  GithubIssueRef,
+  GithubProjectFieldEntry,
+  GithubProjectItemRef,
+  GithubSourceProvenance,
+  GithubSyncState,
+} from "./lib/github-provenance"
+
 // Utilities
 export { cn } from "./lib/utils"
 
@@ -28,6 +53,7 @@ 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 { ActionStepIssueBadge, ProjectSourceBadge, SyncStatePill } from "./components/github-provenance"
 export { LiveIndicator } from "./components/live-indicator"
 export { ThemeToggle } from "./components/theme-toggle"
 export { EditDesiredOutcome } from "./components/edit-desired-outcome"