You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
chore(cli): repackage as single publishable ui-lineage bundle
Turn the CLI package into one self-contained npm package named `ui-lineage`
(the @CodeRadar scope is owned by another account and unusable). The internal
@coderadar/core and @coderadar/parser-react workspace packages are bundled into
the output via tsup, so consumers depend only on `ui-lineage` plus its three
external deps (ts-morph, yaml, commander).
- packages/cli → name "ui-lineage"; bin `ui-lineage`; library entry src/lib.ts
re-exports the core query API + the React scanner (main/exports/types → lib).
- tsup config: bundle @coderadar/* into JS *and* d.ts (dts.resolve), keep the
heavy deps external; preserves the CLI shebang; emits index (bin) + lib.
- Mark @coderadar/core and @coderadar/parser-react private (their code ships
inside ui-lineage; also prevents accidental publish to the taken scope).
- Rebrand CLI program name / help / default graph filename to ui-lineage.
- Add package README (npm listing) and prepublishOnly; ignore *.graph.json.
Verified: pnpm -r build/typecheck/test + eval all green (185 checks, precision/
recall 1.000). npm pack → npm install of the tarball into a clean project works:
the `ui-lineage` bin runs and `import { scanReact, journeys } from "ui-lineage"`
resolves with no @CodeRadar imports in the bundle. Not published — packaging only.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
**Map UI components to their data sources and user journeys** — trace any screenshot or ticket back to the code, APIs, state, and navigation behind it. Deterministic static analysis for React/TSX. No LLM, no network calls.
4
+
5
+
`ui-lineage` scans a React codebase into a **lineage graph** and lets you query it three ways:
6
+
7
+
-**match** — text seen on screen → the component(s) that render it
8
+
-**trace** — a component → every API, state slice, and event that feeds it (attributed *per instance*, so a shared `<DataTable>` on the Users page reports `/api/users` while the same component on Invoices reports `/api/invoices`)
9
+
-**journeys** — a page → the user-action paths leading out of it (click → navigate → click…), lazily expanded and cycle-safe
10
+
11
+
## Install
12
+
13
+
```bash
14
+
npm install -g ui-lineage # CLI
15
+
npm install ui-lineage # library
16
+
```
17
+
18
+
Requires Node ≥ 20.
19
+
20
+
## CLI
21
+
22
+
```bash
23
+
# 1. Scan a React app into a graph
24
+
ui-lineage scan ./src -o app.graph.json
25
+
26
+
# 2. Find a component from on-screen text
27
+
ui-lineage find "All invoices" -g app.graph.json
28
+
29
+
# 3. Trace a component (or an instance id) to its data
30
+
ui-lineage trace InvoicesPage -g app.graph.json
31
+
32
+
# 4. Walk the user journeys from a page or route
33
+
ui-lineage journeys /users -g app.graph.json
34
+
```
35
+
36
+
`journeys` output reads left-to-right, with `↩ cycle` where a list ⇄ detail loop closes:
Every query returns a `QueryResult` envelope — ranked `candidates` with evidence and confidence, or an honest `ambiguous` / `declined`.
56
+
57
+
## What it understands
58
+
59
+
Endpoints (constants, templates, API wrappers, react-query/SWR), i18n text, cross-file instance trees and per-instance prop-flow, Redux/Zustand stores, portals/modals/toasts, React Router & Next.js routes, and action effects (navigate / fetch / dispatch / setState) mined from event handlers.
60
+
61
+
## Status
62
+
63
+
Early (v0.1). The matching engine, screenshot adapter, and MCP server are on the roadmap. Output is deterministic and language-agnostic (plain JSON graph), designed to feed AI agents as a context provider — not to be one.
"description": "CodeRadar CLI — scan a React codebase into a lineage graph and query it.",
4
+
"description": "Map UI components to their data sources and user journeys — trace any screenshot back to the code, APIs, state, and navigation behind it. Deterministic static analysis for React/TSX.",
Copy file name to clipboardExpand all lines: packages/core/package.json
+2-1Lines changed: 2 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,8 @@
1
1
{
2
2
"name": "@coderadar/core",
3
3
"version": "0.1.0",
4
-
"description": "CodeRadar lineage graph schema — the language-agnostic contract every parser emits and every agent consumes.",
4
+
"private": true,
5
+
"description": "CodeRadar lineage graph schema — the language-agnostic contract every parser emits and every agent consumes. Bundled into the published `ui-lineage` package.",
Copy file name to clipboardExpand all lines: packages/parser-react/package.json
+2-1Lines changed: 2 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,8 @@
1
1
{
2
2
"name": "@coderadar/parser-react",
3
3
"version": "0.1.0",
4
-
"description": "React/TSX parser for CodeRadar — extracts components, hooks, data sources, state, and events into a lineage graph.",
4
+
"private": true,
5
+
"description": "React/TSX parser for CodeRadar — extracts components, hooks, data sources, state, and events into a lineage graph. Bundled into the published `ui-lineage` package.",
0 commit comments