Build importer UX primitives (codex)

[numnx]

🧩 Task: Build importer UX primitives

Automated task PR opened by Code UX for T01.

📋 Summary

Sprint: Sprint 140 · Importers - Improve UI & UX · Task: T01

Redesign the Jira, GitHub, and GitLab sprint importers into cleaner, progressive, provider-appropriate workflows that show less by default, sort and summarize results clearly, use inputs suited to each filter, preserve existing import behavior, and update focused dashboard coverage and docs.

📝 Full Task Prompt

## Objective
Create reusable dashboard importer primitives so GitHub, GitLab, and Jira import modals can show a cleaner default view with progressive advanced filters, consistent field presentation, and stable compact summaries.

## Scope
- Edit `dashboard/src/v2/lib/issue-import-view-models.ts`
- Edit `tests/dashboard/v2/lib/issue-import-view-models.test.ts`
- Edit or create shared components under `dashboard/src/v2/components/sprints/importer/`, especially `IssueImportShell.tsx`, `IssueImportIssueCard.tsx`, `IssueImportSummaryRail.tsx`, and any new shared field/filter primitives needed there
- Verify compatibility with existing consumers `dashboard/src/v2/components/sprints/SprintIssueImportModal.tsx` and `dashboard/src/v2/components/sprints/SprintJiraImportModal.tsx` without refactoring those modals in this task

## Implementation Requirements
1. Add shared view-model helpers for compact importer state, including filter summary chips, active filter counts, default sort labels, and selected-result count labels that remain provider-neutral.
2. Refactor shared importer presentation components to support a cleaner default layout: concise header, compact summary rail, responsive content width, clear result count/status area, and an optional advanced-filter region that can be collapsed by provider modals.
3. Add reusable field wrappers or filter-section primitives for importer forms so text, date, number, select, multi-select, and textarea controls have consistent labels, hints, focus rings, disabled states, and responsive sizing.
4. Preserve existing props and behavior for current modal consumers, or add backward-compatible optional props so this task can merge before the provider-specific modal refactors.
5. Extend focused view-model tests to cover active filter counts, summary chip ordering, selected count wording, invalid or empty metadata fallbacks, and provider metadata for GitHub, GitLab, and Jira.

## Constraints
- Do not change backend API calls, request payload shapes, or imported issue persistence contracts.
- Do not refactor the full GitHub/GitLab or Jira modal flows in this task; only add shared primitives and backward-compatible component capabilities.
- Keep dashboard styling aligned with `STYLEGUIDE.md`: Warm Void surfaces, signal for primary active states, status colors only for operational state, and lucide icons where icons are needed.
- Maintain keyboard accessibility, visible focus states, `aria-live` selected-count updates, and safe external URL handling through `getSafeUrl`.

## Verification
- Run `pnpm exec vitest run tests/dashboard/v2/lib/issue-import-view-models.test.ts`.
- Run `pnpm exec vitest run tests/dashboard/v2/components/sprints/SprintIssueImportModal.test.tsx tests/dashboard/v2/components/sprints/SprintJiraImportModal.test.tsx` to confirm the shared primitive changes are backward compatible.
- Run `pnpm run typecheck:dashboard` and confirm there are no TypeScript errors.

✅ QA Review

⏳ QA review runs after this PR is opened. Check the task card in the dashboard for the outcome once it lands.

🤖 Model & Provider

Provider	Codex CLI
Model	gpt-5.5

⏱️ Timing

Started	2026-07-06 11:03:25 UTC
Finished	2026-07-06 11:06:14 UTC
Duration	2m 49s

📊 Token Usage

Metric	Value
Input tokens	118,748
Cached input tokens	2,434,560
Output tokens	16,777
Total tokens	2,570,085
Invocations	3
Tool calls	56
Active time	8m 8s

Included usage estimate (subscription/local login): $2.31

🌿 Branch Info

Base: feature/CODUX-140-importers-improve-ui-ux
Head: task/feature-codux-140-importers-improve-ui-ux-t01-codex-mr93u5y3

---

🤖 Generated by Code UX