Option B — Separate row, icon-only
Flag spec chips are moved to a second, visually separated row
below the main spec chips, rendered as compact icon-only pills with no label text.
A hairline divider separates the two rows. The spec name appears as a native
browser tooltip on hover (via title attribute).
Normal spec chips are unchanged in the first row.
Project library panel
my-ml-service
file:///home/user/projects/my-ml-service
🌐 Global
🧩 python_library
🧩 git_repo
🧩 pixi
🧩 docker
also:
🤖
🌳
📓
data-pipeline
file:///home/user/projects/data-pipeline
🧩 python_library
🧩 git_repo
also:
📓
infra-config
file:///home/user/projects/infra-config
🌐 Global
🧩 git_repo
🧩 docker
Spec chip (main row — has contents/artifacts)
Flag chip (secondary row — icon + tooltip only)
Trade-offs
✓ Structural separation makes the distinction unambiguous
✓ Flag row is compact — minimal extra height when flags present
✓ Cards with no flags are unchanged
✗ Icon-only requires good icons and relies on tooltips for labels
✗ Native title tooltips have long delay and no styling
✗ Adds layout complexity (conditional second row) to all UIs
✗ "also:" prefix label is slightly awkward