Ship UX — Shep reference audit¶

Reference clone: local/vendor/shep (gitignored, MIT, study only).

Shep web UI: src/presentation/web/ — Next.js + shadcn/ui + React Flow. Ship adapts patterns in vanilla HTML/CSS/JS.

Component mapping¶

Shep path	Ship implementation
`layouts/app-shell`, `app-sidebar`	`ship/public` app shell + `#sidebar`
`features/control-center`	Now view — `#hero-card`, ranked queue
`common/feature-list-item`	`.ticket-row` in All work
`common/feature-status-group`	Queue view grouped by `ui_label`
`common/feature-drawer`, `drawer-action-bar`	`#ticket-drawer` + `.drawer-cta-bar`
`common/feature-drawer-tabs`	Drawer tabs: Playbook · Detail · Receipts
`common/ci-status-badge`	`CiPill` on graph ticket nodes + slot pills on list rows
`features/features-canvas`	Graph tab — React Flow + Dagre (`ship/graph-ui/`, lazy `/graph/graph.js`)
`lib/derive-graph`	`ship/graph-ui/src/derive-ship-graph.ts`
`lib/layout-with-dagre`	`ship/graph-ui/src/layout-with-dagre.ts` (LR, ranksep 200, nodesep 48)
`common/repository-node`	`RepoNode` (416×140)
`common/feature-node`	`TicketNode` (388×140) + lifecycle phase badge
Writing topic queue	`TopicNode` (300×96) chained off `WRITING-DAILY` · `writing-context.js`
`common/empty-state`	`.empty-state` when queue clear