Integrations & Teams

qdash's /teams and /integrations pages need a design pass. Exploration found neither page matches its name — /teams is a per-person fleet rollup (observed telemetry identities ranked by risk/spend; no team entity, roles, or invites) and /integrations is a capability inventory (live vs projected connectors; no connect flows or status). Both carry qdash's honesty stance ("binds 127.0.0.1 — nothing leaves unless you export it"). This work feeds the design team's own explorations.

Research current enterprise-SaaS patterns for teams/members and integrations pages, rank the jobs-to-be-done per page, and deliver multiple design options as design-site mocks. Layer extractions and product-ready code follow in a second iteration.

In:

• Trend research + screengrabs (cycles/c61.integrations-teams/research.md + research/ images)
• JTBD analysis for each page
• Multiple idea pages on the design site (app/pages/pages/teams-ideas.vue, app/pages/pages/integrations-ideas*.vue; 3–4 concepts spanning today's-data-model → aspirational)
• Layer extractions (IntegrationCard, IntegrationLogo) and product shipping (qcontrol feat/control-center)
• Taxonomy alignment across both catalogs
• page-registry entries for both ideas pages

Out:

• Any qcontrol/qdash code changes to main — features land only on feat/control-center (blocked until product is ready)

• Research (2026-08-08): research.md — current-state read of both qdash pages, ranked JTBD per page (grounded in c55 personas), qdash punch list (drift-report items, not fixed here), and a comparable-trends digest. Companion docs research-teams.md + research-integrations.md cover ~20 products across dev-infra / security-observability / enterprise-IT tiers; 15 verified screengrabs in research/ with source attribution. Standout findings: Okta/Linear JIT provisioning + Snyk's auth-method column as the mental model for invite-less observed identities; Datadog's Detected/Missing-Data states and the near-universal absence of a test-send affordance on the integrations side.
• teams-ideas (2026-08-08): /pages/teams-ideas — four concepts: (1) one risk story per row (8 cols → 5, verb deep-links), (2) teams as the unit (cards + promoted unassigned bucket), (3) the mapping workspace (queue/evidence/suggestions/bulk assign, SCIM-projected banner), (4) SCIM-day members & roles (projected). Meridian numbers extended: $1,034/30d attributed + $306 unattributed (23%), priya 2.4× user spend median, Payments 2.7× team token median.
• integrations-ideas (2026-08-08): /pages/integrations-ideas — four concepts: (1) honest directory + loopback ledger ("0 bytes — verified, not promised"; kills the PagerDuty/Slack live-and-projected contradiction), (2) connector shelf (filterable grid, request tile), (3) severity-major routing console (test-send, disable path, replayed "would have fired" strip), (4) projected→live connect flow (credentials → scope → verify, health states, projected · dry-run · live lifecycle ribbon).
• integrations-ideas-v2 through v9 (2026-08-13): Five successive refinement iterations exploring JTBD-first reframing, capability-first middle grounds, compact and scalable catalog layouts, and affordance matrices. v2 (operator truth table + ledger framing), v3 (operating outcomes lead), v4 (affordance pass), v5 (simplified four-intent setup), v6 (capability-first), v8 (compact with modal), v9 (scalable catalog with sources/enrichment separated, five-to-six vendor categories, search modal, request path, local SVG marks for branded connectors). v7 discarded (responsive rail collapse at intermediate widths).
• Layer extractions (2026-08-13): Published @qpoint-io/q-nuxt-layer v0.9.10 with IntegrationCard (components/integration/Card.vue) and IntegrationLogo (components/integration/Logo.vue — id-resolved brand logos rendered as , immune to gradient-id collisions and recoloring). 20 third-party logo SVGs migrated into layer assets/svgs/third-party-logos/. New semantic tokens: surface-logo (white chip background for brand logos, both modes) and surface-sunken-deeper realigned (grey-200 light / grey-800 dark). Gear icon added to layer. Both components documented in design site component registry (new Integration group) with interactive demos.
• Shipped to product (2026-08-13): Replaced "Projected outbound connectors" section of qcontrol qdash /integrations (branch feat/control-center) with v10 treatment. Typed connector catalog (app/lib/integrations.ts, 11 connectors incl. new generic Custom webhook + S3-compatible storage). Per-connector detail/config pages at /integrations/ with live severity routing for channel-backed connectors via /api/channels. Channel-backed connectors flip to active stat cards only when a routing row is genuinely authored.
• integrations-ideas-v10 (2026-08-13): /pages/integrations-ideas-v10 — visual treatment refinement applied to v9 catalog. Heavy-rule category sections (title + 3px rule). Active connectors promoted to primary-bordered stat cards (logo cell / name + "active" / value-label stats / gear config rail). Available connectors as recessed add-rows with dashed borders + buttons. View-all expands in place (browse modal removed). Collapsed sections show fixed count (COLLAPSED_ITEM_COUNT=3) with actives always shown, inactives filling remaining slots. Request link always visible.
• integrations-ideas-v11 (2026-08-13): /pages/integrations-ideas-v11 — same visual treatment as v10 with each category contained in a bordered bg-surface card instead of heavy-rule headings. Tested for alternative container framing.
• Taxonomy convergence (2026-08-13): Both qdash and design-site catalogs now share five capability headers replacing outbound routing: Sources & enrichment (inbound; Okta/Entra reframed from outbound "map to IdP" to inbound enrichment), Security & observability, Notifications & response, Remediation tracking, Evidence & compliance. Practitioner keywords (SIEM, GRC) moved into why-lines for each capability.
• Registry: new admin page group + both entries in app/data/page-registry.ts. All ideas pages verified rendering clean (SSR 200, no console/server warnings).

Teams stream split to c67 (2026-08-14) — c61 closes with integrations shipped and teams at research + ideas-v1; refinement, composition, and shipping of the teams page continue in c67.teams.

Research and design complete; moved into product implementation. Design site now contains nine (v1–v6, v8–v11) fully-rendered design concepts as a decision artifact for future evaluation by the design team and product. IntegrationCard and IntegrationLogo extracted to the layer and documented with interactive demos on the design site. qdash /integrations shipped with v10 catalog treatment and typed connector system (11 connectors, live-only vs projected, per-connector config pages) on the feat/control-center branch. Both qdash and design catalogs aligned to five capability headers grounded in operator outcomes (inbound enrichment, security observability, notifications, remediation tracking, compliance evidence).

Gotchas documented for future reference: Layer type scale bottoms out at text-11 (text-10/9 silently render 16px); design site dark mode is inline-CSS-var based so Tailwind dark: variants never fire; new component files require dev-server restart for Tailwind JIT scanning.

Commits: design main e25d6c8, layer v0.9.10 (16df214), qcontrol feat/control-center 40a0eb06.