@ddd-ts/event-tree-viewer 0.0.0-eventviz.10

package/src/cli.ts

@@ -0,0 +1,29 @@
+#!/usr/bin/env node
+
+import path from "node:path"
+import { styleText } from "node:util"
+import { createServer } from "vite"
+
+const dirname =
+  typeof __dirname === "undefined"
+    ? path.dirname(new URL(import.meta.url).pathname)
+    : __dirname
+
+const vite = await createServer({
+  root: path.resolve(dirname, "../"),
+  configFile: path.resolve(dirname, "../vite.config.ts"),
+  logLevel: "error",
+})
+
+const server = await vite.listen(20031)
+
+const SCAN_ROOT = path.resolve(process.env.EVENTVIZ_SCAN_ROOT ?? process.cwd())
+
+console.log(styleText(["bold", "underline"], "Event Tree Viewer"))
+console.log(`  Status  ${styleText("green", "running")}`)
+console.log(
+  `  URL     ${styleText("cyan", server.resolvedUrls?.local[0] ?? "unknown")}`
+)
+console.log(`  Root    ${styleText("yellow", SCAN_ROOT)}`)
+console.log()
+console.log(styleText("dim", "Press Ctrl+C to stop the server"))

package/src/components/direction-toggle.tsx

@@ -0,0 +1,28 @@
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+import type { Direction } from "@/domain/direction"
+import type { DirectionApi } from "@/application/use-direction"
+
+const OPTIONS: { value: Direction; label: string }[] = [
+  { value: "forward", label: "Forward" },
+  { value: "reverse", label: "Reverse" },
+]
+
+export function DirectionToggle({ direction }: { direction: DirectionApi }) {
+  return (
+    <ToggleGroup
+      value={[direction.direction]}
+      onValueChange={(next) => {
+        const picked = next[0] as Direction | undefined
+        if (picked) direction.setDirection(picked)
+      }}
+      variant="outline"
+      size="sm"
+    >
+      {OPTIONS.map((opt) => (
+        <ToggleGroupItem key={opt.value} value={opt.value}>
+          {opt.label}
+        </ToggleGroupItem>
+      ))}
+    </ToggleGroup>
+  )
+}

package/src/components/domain-header.tsx

@@ -0,0 +1,44 @@
+import type { ReactNode } from "react"
+import { CaretRightIcon } from "@phosphor-icons/react"
+import { cn } from "@/lib/utils"
+
+interface DomainHeaderProps {
+  label: string
+  expanded: boolean
+  onToggle: () => void
+  meta?: ReactNode
+  className?: string
+}
+
+export function DomainHeader({
+  label,
+  expanded,
+  onToggle,
+  meta,
+  className,
+}: DomainHeaderProps) {
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      className={cn(
+        "flex h-full min-h-9 w-full items-center gap-2 px-1 py-2 text-left transition-colors hover:bg-muted/30",
+        className
+      )}
+    >
+      <CaretRightIcon
+        className={`size-3 shrink-0 text-muted-foreground transition-transform ${
+          expanded ? "rotate-90" : ""
+        }`}
+      />
+      <span className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
+        {label}
+      </span>
+      {meta && (
+        <span className="font-mono text-xs font-normal text-muted-foreground">
+          {meta}
+        </span>
+      )}
+    </button>
+  )
+}

package/src/components/export-dialog.tsx

@@ -0,0 +1,164 @@
+import { useMemo, useState } from "react"
+import {
+  CheckIcon,
+  CopyIcon,
+  DownloadIcon,
+  ExportIcon,
+} from "@phosphor-icons/react"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import {
+  exportGraphToCypher,
+  subgraphFromVisible,
+} from "@/domain/cypher-export"
+import type { GraphIndex } from "@/domain/graph"
+import type { Node } from "@/domain/node"
+
+type Format = "cypher"
+
+const FORMATS: { value: Format; label: string; ext: string }[] = [
+  { value: "cypher", label: "Cypher", ext: "cypher" },
+]
+
+interface ExportDialogProps {
+  index: GraphIndex
+  visibleNodes: Node[]
+}
+
+export function ExportDialog({ index, visibleNodes }: ExportDialogProps) {
+  const [open, setOpen] = useState(false)
+  const [format, setFormat] = useState<Format>("cypher")
+  const [followFilters, setFollowFilters] = useState(true)
+  const [copied, setCopied] = useState(false)
+
+  const output = useMemo(() => {
+    if (!open) return ""
+    const graph = followFilters
+      ? subgraphFromVisible(index.graph, visibleNodes)
+      : index.graph
+    return exportGraphToCypher(graph)
+  }, [open, followFilters, index, visibleNodes])
+
+  const counts = useMemo(() => {
+    if (!open) return { nodes: 0, edges: 0 }
+    const graph = followFilters
+      ? subgraphFromVisible(index.graph, visibleNodes)
+      : index.graph
+    return { nodes: graph.nodes.length, edges: graph.edges.length }
+  }, [open, followFilters, index, visibleNodes])
+
+  const formatMeta = FORMATS.find((f) => f.value === format) ?? FORMATS[0]
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(output)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1500)
+    } catch {
+      // ignore
+    }
+  }
+
+  const download = () => {
+    const blob = new Blob([output], { type: "text/plain;charset=utf-8" })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement("a")
+    a.href = url
+    a.download = `event-graph.${formatMeta.ext}`
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger
+        render={
+          <Button variant="ghost" size="icon-sm" aria-label="Export graph">
+            <ExportIcon />
+          </Button>
+        }
+      />
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>Export graph</DialogTitle>
+          <DialogDescription>
+            Export the graph in a format designed for graph databases.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-4">
+          <div className="flex items-center justify-between gap-2">
+            <span className="text-sm">Format</span>
+            <Select<Format>
+              value={format}
+              onValueChange={(value) => {
+                if (value) setFormat(value)
+              }}
+            >
+              <SelectTrigger className="w-40">
+                <SelectValue>
+                  {(value) =>
+                    FORMATS.find((f) => f.value === value)?.label ?? ""
+                  }
+                </SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                {FORMATS.map((f) => (
+                  <SelectItem key={f.value} value={f.value}>
+                    {f.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <label className="flex cursor-pointer items-center gap-2 text-sm">
+            <Checkbox
+              checked={followFilters}
+              onCheckedChange={(checked) => setFollowFilters(checked === true)}
+            />
+            <span>Follow current filters</span>
+          </label>
+
+          <div className="flex flex-col gap-1">
+            <span className="self-end font-mono text-xs text-muted-foreground">
+              {counts.nodes} nodes · {counts.edges} edges
+            </span>
+            <pre className="max-h-72 overflow-auto bg-muted p-3 font-mono text-xs whitespace-pre-wrap text-foreground">
+              {output}
+            </pre>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" size="sm" onClick={copy}>
+            {copied ? <CheckIcon /> : <CopyIcon />}
+            {copied ? "Copied" : "Copy"}
+          </Button>
+          <Button variant="default" size="sm" onClick={download}>
+            <DownloadIcon />
+            Download
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/filter-bar.tsx

@@ -0,0 +1,17 @@
+import { Input } from "@/components/ui/input"
+import { KindFilter } from "@/components/kind-filter"
+import type { FiltersApi } from "@/application/use-filters"
+
+export function FilterBar({ filters }: { filters: FiltersApi }) {
+  return (
+    <div className="flex items-center gap-3 border-b px-6 py-3">
+      <Input
+        placeholder="Search nodes…"
+        value={filters.filter.search}
+        onChange={(e) => filters.setSearch(e.target.value)}
+        className="max-w-xs"
+      />
+      <KindFilter filters={filters} />
+    </div>
+  )
+}

package/src/components/header.tsx

@@ -0,0 +1,37 @@
+import { ExportDialog } from "@/components/export-dialog"
+import { SettingsMenu } from "@/components/settings-menu"
+import type { GraphIndex } from "@/domain/graph"
+import type { Node } from "@/domain/node"
+import type { SettingsApi } from "@/application/use-settings"
+
+export function Header({
+  index,
+  visibleNodes,
+  settings,
+}: {
+  index: GraphIndex
+  visibleNodes: Node[]
+  settings: SettingsApi
+}) {
+  const { graph } = index
+  return (
+    <header className="flex items-center justify-between border-b px-6 py-3">
+      <div className="flex items-baseline gap-3">
+        <span className="font-display text-base font-bold tracking-tight text-foreground">
+          DDD-TS
+        </span>
+        <span className="text-muted-foreground/70">·</span>
+        <h1 className="text-sm font-medium tracking-tight text-muted-foreground">
+          Event Tree Viewer
+        </h1>
+      </div>
+      <div className="flex items-center gap-3">
+        <span className="font-mono text-xs tracking-wide text-muted-foreground">
+          {graph.nodes.length} nodes · {graph.edges.length} edges
+        </span>
+        <ExportDialog index={index} visibleNodes={visibleNodes} />
+        <SettingsMenu settings={settings} />
+      </div>
+    </header>
+  )
+}

package/src/components/inspector.tsx

@@ -0,0 +1,183 @@
+import { useMemo } from "react"
+import { ArrowSquareOutIcon } from "@phosphor-icons/react"
+import { Separator } from "@/components/ui/separator"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Button } from "@/components/ui/button"
+import { NodeBadge } from "@/components/node-badge"
+import { nodeId, type GraphIndex, type NodeId } from "@/domain/graph"
+import type { Node } from "@/domain/node"
+import { edgeKind, type Edge } from "@/domain/edge"
+import { trpc } from "@/application/trpc-client"
+
+async function openInEditor(source: { file: string; start: number }) {
+  try {
+    await trpc.editor.open.mutate({ file: source.file, offset: source.start })
+  } catch (error) {
+    console.warn(`[open-in-editor] ${(error as Error).message}`)
+  }
+}
+
+interface InspectorProps {
+  index: GraphIndex
+  selectedId: NodeId
+  onSelect: (id: NodeId) => void
+  onClose: () => void
+}
+
+export function Inspector({
+  index,
+  selectedId,
+  onSelect,
+  onClose,
+}: InspectorProps) {
+  const node = index.nodesById.get(selectedId)
+  const outgoing = useMemo(
+    () => index.outgoing.get(selectedId) ?? [],
+    [index, selectedId]
+  )
+  const incoming = useMemo(
+    () => index.incoming.get(selectedId) ?? [],
+    [index, selectedId]
+  )
+
+  if (!node) return null
+
+  return (
+    <aside className="surface-elevated flex h-full w-96 shrink-0 flex-col border-l bg-card">
+      <header className="flex shrink-0 items-center justify-between gap-2 border-b px-5 py-3">
+        <div className="flex min-w-0 items-center gap-2">
+          <NodeBadge kind={node.type} />
+          <span className="truncate text-sm font-semibold">{node.name}</span>
+        </div>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onClose}
+          className="shrink-0"
+        >
+          Close
+        </Button>
+      </header>
+
+      <ScrollArea className="min-h-0 flex-1">
+        <div className="flex flex-col gap-4 px-5 py-4">
+          <Meta node={node} />
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => openInEditor(node.source)}
+            className="w-full justify-start gap-2"
+          >
+            <ArrowSquareOutIcon />
+            Open in editor
+          </Button>
+          <Separator />
+          <Section
+            title={`Incoming (${incoming.length})`}
+            edges={incoming}
+            direction="in"
+            onSelect={onSelect}
+          />
+          <Separator />
+          <Section
+            title={`Outgoing (${outgoing.length})`}
+            edges={outgoing}
+            direction="out"
+            onSelect={onSelect}
+          />
+        </div>
+      </ScrollArea>
+    </aside>
+  )
+}
+
+function Meta({ node }: { node: Node }) {
+  return (
+    <dl className="grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1.5 text-sm">
+      <dt className="text-muted-foreground">Name</dt>
+      <dd className="font-mono break-all">{node.name}</dd>
+      {"meta" in node && "alias" in node.meta && (
+        <>
+          <dt className="text-muted-foreground">Alias</dt>
+          <dd className="font-mono break-all">{node.meta.alias}</dd>
+        </>
+      )}
+      {"meta" in node && "base" in node.meta && (
+        <>
+          <dt className="text-muted-foreground">Base</dt>
+          <dd className="font-mono break-all">{node.meta.base}</dd>
+        </>
+      )}
+      <dt className="text-muted-foreground">File</dt>
+      <dd className="font-mono text-xs break-all">{node.source.file}</dd>
+    </dl>
+  )
+}
+
+function Section({
+  title,
+  edges,
+  direction,
+  onSelect,
+}: {
+  title: string
+  edges: Edge[]
+  direction: "in" | "out"
+  onSelect: (id: NodeId) => void
+}) {
+  return (
+    <section className="flex flex-col gap-2">
+      <h3 className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
+        {title}
+      </h3>
+      {edges.length === 0 && (
+        <p className="text-sm text-muted-foreground">None</p>
+      )}
+      <ul className="flex flex-col gap-1">
+        {edges.map((edge, idx) => (
+          <li key={idx}>
+            <EdgeRow edge={edge} direction={direction} onSelect={onSelect} />
+          </li>
+        ))}
+      </ul>
+    </section>
+  )
+}
+
+function EdgeRow({
+  edge,
+  direction,
+  onSelect,
+}: {
+  edge: Edge
+  direction: "in" | "out"
+  onSelect: (id: NodeId) => void
+}) {
+  const peer = direction === "in" ? edge.from : edge.to
+  const peerId = nodeId(peer.type, peer.name)
+  const dotIdx = peer.name.indexOf(".")
+  const head = dotIdx >= 0 ? peer.name.slice(0, dotIdx) : peer.name
+  const tail = dotIdx >= 0 ? peer.name.slice(dotIdx) : ""
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      onClick={() => onSelect(peerId)}
+      className="h-auto w-full justify-start gap-2 overflow-hidden px-2 py-1.5 text-sm font-normal"
+    >
+      <span className="shrink-0 font-mono text-xs text-muted-foreground">
+        {edgeKind(edge)}
+      </span>
+      <NodeBadge kind={peer.type} />
+      <span className="min-w-0 truncate">
+        <span className="font-medium">{head}</span>
+        {tail && (
+          <span className="font-mono text-xs text-muted-foreground">
+            {tail}
+          </span>
+        )}
+      </span>
+    </Button>
+  )
+}

package/src/components/kind-filter.tsx

@@ -0,0 +1,70 @@
+import { CaretDownIcon } from "@phosphor-icons/react"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import { NodeBadge } from "@/components/node-badge"
+import { NODE_KINDS, type NodeKind } from "@/domain/node"
+import type { FiltersApi } from "@/application/use-filters"
+
+export function KindFilter({ filters }: { filters: FiltersApi }) {
+  const selected = filters.filter.kinds
+  const label = buildLabel(selected)
+
+  return (
+    <Popover>
+      <PopoverTrigger
+        render={
+          <Button variant="outline" size="sm">
+            <span>{label}</span>
+            <CaretDownIcon data-icon="inline-end" />
+          </Button>
+        }
+      />
+      <PopoverContent align="start" className="w-56 p-1">
+        <ul className="flex flex-col">
+          {NODE_KINDS.map((kind) => (
+            <li key={kind}>
+              <KindOption
+                kind={kind}
+                checked={selected.has(kind)}
+                onToggle={() => filters.toggleKind(kind)}
+              />
+            </li>
+          ))}
+        </ul>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+function KindOption({
+  kind,
+  checked,
+  onToggle,
+}: {
+  kind: NodeKind
+  checked: boolean
+  onToggle: () => void
+}) {
+  return (
+    <label className="flex cursor-pointer items-center gap-2 px-2 py-1.5 text-sm transition-colors hover:bg-muted hover:text-foreground">
+      <Checkbox checked={checked} onCheckedChange={onToggle} />
+      <NodeBadge kind={kind} />
+      <span className="capitalize">{kind}</span>
+    </label>
+  )
+}
+
+function buildLabel(selected: ReadonlySet<NodeKind>): string {
+  if (selected.size === NODE_KINDS.length) return "All kinds"
+  if (selected.size === 0) return "No kinds"
+  if (selected.size === 1) {
+    const only = [...selected][0]
+    return only[0].toUpperCase() + only.slice(1)
+  }
+  return `${selected.size} kinds`
+}

package/src/components/node-badge.tsx

@@ -0,0 +1,19 @@
+import { Badge } from "@/components/ui/badge"
+import type { NodeKind } from "@/domain/node"
+
+const STYLES: Record<NodeKind, string> = {
+  event: "bg-amber-100 text-amber-900 dark:bg-amber-950 dark:text-amber-200",
+  command: "bg-sky-100 text-sky-900 dark:bg-sky-950 dark:text-sky-200",
+  saga: "bg-violet-100 text-violet-900 dark:bg-violet-950 dark:text-violet-200",
+  aggregate:
+    "bg-emerald-100 text-emerald-900 dark:bg-emerald-950 dark:text-emerald-200",
+  projection: "bg-rose-100 text-rose-900 dark:bg-rose-950 dark:text-rose-200",
+}
+
+export function NodeBadge({ kind }: { kind: NodeKind }) {
+  return (
+    <Badge variant="secondary" className={STYLES[kind]}>
+      {kind}
+    </Badge>
+  )
+}

package/src/components/node-name.tsx

@@ -0,0 +1,66 @@
+import { DotsThreeIcon } from "@phosphor-icons/react"
+import { isJustKind, stripDomainAffix } from "@/domain/domain-grouping"
+
+interface NodeNameProps {
+  name: string
+  kind: string
+  domainPrefix: string
+  hide: boolean
+  allowEmpty?: boolean
+  metaClass?: string
+}
+
+export function NodeName({
+  name,
+  kind,
+  domainPrefix,
+  hide,
+  allowEmpty = false,
+  metaClass = "text-xs",
+}: NodeNameProps) {
+  const dotIdx = name.indexOf(".")
+  const head = dotIdx >= 0 ? name.slice(0, dotIdx) : name
+  const tail = dotIdx >= 0 ? name.slice(dotIdx) : ""
+  const methodTag = tail ? (
+    <span className={`font-mono ${metaClass} text-muted-foreground`}>
+      {tail}
+    </span>
+  ) : null
+
+  if (!hide) {
+    return (
+      <span className="font-medium">
+        {head}
+        {methodTag}
+      </span>
+    )
+  }
+  const { stripped, position } = stripDomainAffix(
+    head,
+    domainPrefix,
+    allowEmpty || tail !== ""
+  )
+  if (position === null) {
+    return (
+      <span className="font-medium">
+        {head}
+        {methodTag}
+      </span>
+    )
+  }
+  const visible = isJustKind(stripped, kind) ? "" : stripped
+  const ellipsis = (
+    <DotsThreeIcon
+      className="inline size-3 align-middle text-muted-foreground"
+      aria-label={name}
+    />
+  )
+  return (
+    <span className="font-medium" title={name}>
+      {position === "prefix" && ellipsis}
+      {visible}
+      {position === "suffix" && ellipsis}
+      {methodTag}
+    </span>
+  )
+}