Consolidation Gaps

What the apps hand-roll today, next to what the layer offers — or a placeholder where nothing exists yet.

A visual companion to the c51 component gap audit. Left panes are working replicas (qdash) or static markup extractions (qglass) of what runs in the apps today. Right panes are the live layer components they map to. Every "New build" row is net-new pantry work; everything else is promotion, convergence, or adoption.

qdash — promote & reconcile

qdash's local components mostly wrap layer primitives already, so these left panes are pixel-accurate live copies. The work here is deciding what gets promoted into the layer and where overlapping APIs converge.

Panel

Promote→ no layer equivalent

Today · qdash

Top Destinations

last 24h

Any content composes inside — tables, charts, bar lists.

q-nuxt-layer

Nothing in the pantry yet

Promote as-is. The layer has no generic panel/section card — DataCard is metric-specific. The most-used surface in qdash (30+ instances).

Section card: white, rounded-12, grey-200 border, p-6, bold title + #badge slot. Tables, charts, and bar lists all sit on this surface.

PageHeader

Reconcile → UxPageTitle

Today · qdash

Agent Inventory

All agents observed across the fleet in the last 30 days.

q-nuxt-layer

Fleet

Agent Inventory

The layer ships an undocumented UxPageTitle (breadcrumbs, back link, right slots). Reconcile the two and document the winner.

StatTile

Reconcile → DataMetric_Card

Today · qdash

Requests

1.2

last 24 hours

Total Spend

$12.4k

this month

q-nuxt-layer

Requests

1240500

Overlaps DataMetric_Card / DataCard. Pick one KPI-tile API rather than adding a third — StatTile adds the sub-line, currency formatting, and shadow-box surface.

AttentionStrip / AttentionMessage

Promote → UxPill (partial)

Today · qdash

3critical findings →

12agents need updates →

✓ All clear

q-nuxt-layer

3 critical findings12 agents need updatesAll clear

Closest today: static pills — no counts, links, or actionable tones.

No layer equivalent — UxPill is static with no count + link + tone semantics, and no all-clear state. Promote the chip and the strip.

BarList

Promote → UxPercentBar (partial)

Today · qdash

api.anthropic.com

4.2k req

storage.googleapis.com

2.9k req

api.github.com

1.4k req

registry.npmjs.org

0.6k req

q-nuxt-layer

4.2k req

2.9k req

The bar primitive exists; the labeled list around it doesn't.

The layer has bar primitives (UxPercentBar, DataPercentBar, DataMetricPercentBar) but no label + bar + value list composition with an empty state. Promote the composition.

DataTable

Converge → UxTableList suite (partial)

Today · qdash

Agent	Requests	p95 Latency

agent-7f3a	8204	190
agent-22c1	3911	240
agent-c04d	732	88

q-nuxt-layer

Agent	Requests	p95 Latency
agent-7f3a	8,204	190 ms
agent-22c1	3,911	240 ms
agent-c04d	732	88 ms

UxTable covers static tables; UxTableList adds sort/search/expand. Neither is the full qdash pattern (black header rule, per-column slots).

Built on UxTableList + ColumnHeader + ExpandRow. The design site's PermissionTable (c50) is a sibling pattern on the same suite — unify into one layer-level table pattern.

MetricCell

App-local → DataMetricValue

Today · qdash

190

2.3

sec

req/s

q-nuxt-layer

190

2.3

sec

req/s

Same render — MetricCell only adds the duration-unit scaling.

Thin wrapper adding duration formatting (ms → ms/sec/min/h) to DataMetricValue. Fine to stay local, or a trivial layer addition.

AppSidebar

Promote → NavVertical + NavVerticalItem (partial)

Today · qdash

page content

q-nuxt-layer

FLEET

Fleet Overview

Agent Inventory

Cost Center

SECURITY

Findings

Security Posture

The nav groups exist; the shell around them doesn't.

The nav pieces exist in the layer but there's no app-shell rail (wordmark, grouped sections, footer stamp). Every consolidated page needs this chrome.

qdash pages — adopt, don't build

Patterns hand-rolled inline in qdash pages where the layer already has coverage. No new components — just swapping markup for the pantry equivalent during consolidation.

Filter pill rows (toggle + clear + "N of M")→UxFilterGroup

Near-verbatim duplicates in findings.vue and inventory.vue. The core is covered; needs the count/clear affordances.

Raw inline <table> sub-tables→UxTable

Seven pages hand-roll static sub-tables in details panes. UxTable (line/band variants) covers most.

Card grids + inline status badges→UxCardLink + UxPill / UxBoxTag

integrations.vue is almost entirely hand-built. Partial coverage today.

Clickable severity stat cards→DataMetric_Base

findings.vue — already optionally clickable via the `to` prop.

Hand-styled big-number figures→DataMetricValue

agent/[id].vue writes text-30 font-black by hand. Covered.

Status dot + label (running/stopped)→— micro-gap

Real gap: SecuritySeverity is severity-specific. Needs a tiny status-dot component — same build as the qglass live badge below.

Duplicated severity/posture class maps→— token gap

sevPill / postureClass maps copy-pasted across three pages. Belongs in the layer as semantic tokens or a shared helper.

qglass — where the new builds are

qglass is PrimeVue + hand-rolled Tailwind on a dark zinc/emerald palette. These left panes are static markup extractions — inert, but faithful to what the layer needs to cover. Absorbing qglass also means mapping its palette onto our subtle dark-mode tokens.

Tab bar with live counts

New build→ no layer equivalent

Today · qglass

q-nuxt-layer

Nothing in the pantry yet

No tabs component exists anywhere in the layer. Needed the moment any consolidated page has two views.

Tree multi-select filter

New build → UxSelect (partial)

Today · qglass

llm ✕ mcp.tool_call ✕▾

▾✓llm4,812

✓llm.request2,406

✓llm.response2,406

▾−mcp1,904

✓mcp.tool_call1,102

mcp.tool_result802

▾http3,266

http.request1,633

http.response1,633

q-nuxt-layer

Closest today: single-value native select. No hierarchy, no multi-select, no chips.

The biggest single build: hierarchical checkbox tree with chip display and per-node counts. qglass uses PrimeVue TreeSelect twice (agents, event families).

Virtualized event table

Extend → UxTableList (partial)

Today · qglass

Seq

Event

Agent

Summary

14:02:11.482

138

llm.request

agent-7f3a (run 4182)

model=claude-sonnet-5request_id=req_01H…

14:02:11.913

139

http.request

agent-7f3a (run 4182)

method=POSThost=api.anthropic.com

14:02:12.201

140

mcp.tool_call

agent-22c1 (run 4207)

tool=read_fileserver=fs

14:02:12.204

141

file.read

agent-22c1 (run 4207)

path=/etc/hosts

14:02:12.688

142

exec.spawn

agent-c04d (run 4211)

cmd=git status

14:02:13.020

143

llm.response

agent-7f3a (run 4182)

output_tokens=512stop=end_turn

⋯ 12,840 more rows (virtualized — only the visible window renders) ⋯

q-nuxt-layer

Partial coverage

UxTableList has scroll detection but no virtualization. Add a virtualization mode — qglass streams thousands of live rows at 44px each.

Resizable detail side panel

New build→ no layer equivalent

Today · qglass

[140]

mcp.tool_call

Context

Preview

tool	read_file
server	fs
path	/etc/hosts

1▾ {

2 "type": "mcp.tool_call"

3 "sequence": 140

4 ▾ "payload": {

5 "tool": "read_file"

6 "server": "fs"

7 ▾ "arguments": {

8 "path": "/etc/hosts"

9 }

10 }

11}

q-nuxt-layer

Nothing in the pantry yet

The layer only has UxModal. qglass's inspector is a pointer-resizable (360–920px) docked panel — a different pattern entirely.

The panel composes three sub-patterns: clickable context chips, a key/value preview table, and the JSON tree below.

Live/SSE status badge

New build→ no layer equivalent

Today · qglass

live

connecting

reconnecting

disconnected

q-nuxt-layer

Nothing in the pantry yet

Micro-component: status dot + label for live / connecting / reconnecting / disconnected. Pairs with the status-dot gap in qdash's inventory page.

Count/filter chips

Extend → UxFilterGroup (partial)

Today · qglass

Agents

Events

q-nuxt-layer

Selection works; counts and per-family tones don't exist.

UxFilterGroup covers the single/multiple selection core. Missing: per-chip counts, family-colored rings, and dimming of unselected chips.

JSON tree viewer

Reconcile → UxCodeBlock (partial)

Today · qglass

1▾ {

2 "type": "mcp.tool_call"

3 "sequence": 140

4 ▾ "payload": {

5 "tool": "read_file"

6 "server": "fs"

7 ▾ "arguments": {

8 "path": "/etc/hosts"

9 }

10 }

11}

q-nuxt-layer

event.json

{
  "type": "mcp.tool_call",
  "sequence": 140,
  "payload": {
    "tool": "read_file",
    "server": "fs",
    "arguments": { "path": "/etc/hosts" }
  }
}

Open decision: keep vue-json-pretty as a dep vs build a layer viewer. UxCodeBlock renders the text but has no tree collapse, line numbers, or value toning.

New components are consumed on the design site first.

Per the pantry convention, each "New build" and "Promote" row lands here as a documented demo with a registry entry before it ships in the layer. Source analysis: cycles/c51.app-consolidation/research/component-gaps.md.