@codefly-dev/ui: the kit elements a solution page needs — Chip, status tones, Card description, List/DescriptionList, Banner tone, EmptyState reference — and a standalone stylesheet so a solution can preview itself

Requirement (owner, 2 Oct 2026)

A solution page must be built from kit components, not hand-laid utilities. Building the proposals solution UI-first (obin-ai/core-solutions#326 → PR #331, #337) measured what @codefly-dev/ui@0.11.x / @codefly-dev/saas-ui@0.11.x lack: 23 raw <ul>/<p>/<span className=…> in one 332-line reader exist only because these pieces are missing, and the solution cannot be previewed or screenshotted without a running host. The owner's verdict on the line count: "insanely high" — about a third of the page is kit gaps.

Source of record: the consumer's gap list, obin-ai/core-solutions#326 issuecomment-5958873710 (seven items, screenshot paths in PR #331 under solutions/proposals/docs/evidence/). Related: #997 (DeclaredSourceCard) uses "default + dot" as the honest approximation for the missing status tone and defers the rest here.

Deliverable — `module/services/frontend/code/packages/codefly-ui` (`@codefly-dev/ui`, 0.11.4 on main)

Badge status tones: a tone prop — neutral | success | warning | danger | info — an optional leading status dot, and size. Set up / Connected / Error must read as three states.
Chip and ChipGroup: an interactive badge — link or button, optional leading icon, optional trailing meta slot ("· unread"), optional remove. For affects, scope, status and owner rows.
Card description, matching Section's, so a card's one-line purpose is not a muted <p> in its body.
List / ListItem and DescriptionList (term/value pairs): for diagnostics, relation lists and front-matter cards, where Table is too heavy for three fields.
Banner tone: information / warning / fault.
EmptyState reference slot (or documented guidance): "the card above says where this stands" is a reference, not an action.
A standalone, token-complete stylesheet (or a documented Tailwind preset + token layer) a solution may build against for preview only. The tarball ships only src/skin/type-slots.generated.css; every component emits utilities and token variables that exist only in the host's compiled stylesheet, so a solution (which authors no CSS, RD11/RD12) cannot render its own UI without a running host. The one gap with consequences beyond a page; say in the PR what the preview stylesheet may and may not be used for.

Tests beside the existing ones; ui-inventory.json and the peer-docs list updated for every new .tsx; the raw-type-primitives baseline honoured (a new kit file allows zero raw utilities); the kit README updated in the same PR. Then saas-ui's DatasourcesPanel / DeclaredSourceCard (#997) adopt the tones so the kit eats its own components.

Boundary

Kit additions only; no host service changes; nothing solution-specific. Classify in the PR body: fix (the kit lacked a primitive) vs hack.

Consumers waiting

obin-ai/core-solutions PR #331 and #337; #997's card. Traps recorded by the previous saas-starter agent (lazybox note, tags issue-997): never run biome check --write . here (rewrote 292 tracked files); kit-version.mjs only tells the truth after committing.

Two more from the owner's live run of the proposals solution (3 Oct 2026), both page code that belongs here:

Markdown emits source offsets. @codefly-dev/ui/content Markdown renders with no data-source-start / data-source-end, so @obin-ai/annotations-ui's AnchoredThreads cannot map a selection to the version's bytes — the solution had to write a 155-line offset-aware renderer. The kit's Markdown should take the source and emit data-source-start/end on every block and inline run, with data-source-exact="false" where Markdown rewrote the text (emphasis, links, bullets, code fences); plain runs byte-exact. Contract: module-annotations annotations-ui/src/anchors/source-map.ts.
Board. Columns by a field, cards, drag a card to a column with an onMove(item, column) the consumer confirms, search, counts, empty column text — the solution wrote its own 71-line board. Generic: no notion of status or proposal.

Item 8 (Markdown emitting source offsets), one more thing it must take, found on the proposals solution 3 Oct ("links don't work"): a handbook link is a repository-relative path (../decisions/x.md#why). The kit cannot know where that goes, so Markdown takes resolveLink?: (href: string) => { href: string; external: boolean }; the solution decides (a page of its corpus opens in place, anything else opens in the repository at the commit the bytes were read at, absolute URLs untouched). Reference implementation and tests: core-solutions solutions/proposals/services/fe-remote/src/markdown.tsx + Document.tsx linkResolver on the demo branch (lands with the solution's next PR).

Also item 9 (Board) and everything in this issue: the host compiles no stylesheet for a solution remote (globals.css @sources only codefly-ui and saas-ui). Any arbitrary-value utility in a kit or a remote (grid-cols-[…], h-[var(--x)]) exists in no CSS the page loads. Kit elements must carry their structure inline and take only colour from the tokens — module-annotations#23 hit this with AnchoredThreads' margin.

feat(ui): status tones, chips, lists and a preview stylesheet, so a s…

lazybox has finished working on this. claude (Opus 5.5) held it from 2026-10-07 15:49 UTC until 2026-10-07 21:34 UTC. The working label has been removed; this comment is the record.

claim detail

Lazybox-Claim-Device: effacd542b611010656e
Lazybox-Claim-Session: 99ecb8f98b
Lazybox-Claim-Workspace: github-codefly-dev-module-saas-starter-1001
Lazybox-Claim-Agent: claude
Lazybox-Claim-Model: Opus 5.5
Lazybox-Claim-Started: 2026-10-07T15:49:53Z
Lazybox-Claim-Heartbeat: 2026-10-07T21:34:25Z
Lazybox-Claim-Expires: 2026-10-07T18:34:25Z
Lazybox-Claim-Released: 2026-10-07T21:34:25Z

Delivered on main; closing.

Items 1–7 came in feat(ui): status tones, chips, lists and a preview stylesheet, so a solution page is built from the kit (Part of #1001) #1005 (56eaab203). That covers Badge tone/dot/size, Chip/ChipGroup, Card description, List/ListItem/DescriptionList, Banner tone and EmptyState reference. It also covers @codefly-dev/ui/preview.css, whose permitted uses are in the kit README. DatasourcesPanel and DeclaredSourceCard now use the tones. That PR said "Part of", which is why this issue stayed open.
Items 8–9 came in feat(ui): Markdown says which bytes it rendered, and a generic Board whose moves the consumer owns #1014 (0437b4416), which closed @codefly-dev/ui: Markdown emits source offsets and resolves links, and a generic Board — items 8 and 9 of #1001 #1010. That covers Markdown sourceOffsets and resolveLink returning { href, external }, and the generic Board.

Checked on main at b89af575a: the full @codefly-dev/ui suite (1364 tests), saas-ui's datasources tests (198) and the host's preview-stylesheet test (6) all pass.

Still open, deliberately: widening remote-safe-structure.test.ts from board/board.tsx to the whole kit waits on the handbook proposal "A module kit carries its own structure", as that test's header says.

Navigation Menu

Repository navigation

@codefly-dev/ui: the kit elements a solution page needs — Chip, status tones, Card description, List/DescriptionList, Banner tone, EmptyState reference — and a standalone stylesheet so a solution can preview itself #1001

Requirement (owner, 2 Oct 2026)

Deliverable — `module/services/frontend/code/packages/codefly-ui` (`@codefly-dev/ui`, 0.11.4 on main)

Boundary

Consumers waiting

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

@codefly-dev/ui: the kit elements a solution page needs — Chip, status tones, Card description, List/DescriptionList, Banner tone, EmptyState reference — and a standalone stylesheet so a solution can preview itself #1001

Description

Requirement (owner, 2 Oct 2026)

Deliverable — module/services/frontend/code/packages/codefly-ui (@codefly-dev/ui, 0.11.4 on main)

Boundary

Consumers waiting

Activity

antoinetoussaint-byte commented on Oct 3, 2026

antoinetoussaint-byte commented on Oct 3, 2026

antoinetoussaint-byte commented on Oct 7, 2026

antoinetoussaint-byte commented on Oct 7, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Deliverable — `module/services/frontend/code/packages/codefly-ui` (`@codefly-dev/ui`, 0.11.4 on main)