Add combobox component for package and integration pickers

[kentcdodds]

Summary

• adapt Remix’s first-party accessible combobox into a reusable Kody design-system field
• replace raw allowed-package IDs with searchable, named package selection and readable approval details
• add searchable integration filtering plus focused unit and Playwright coverage

Testing

• pre-push validation, including the full Playwright suite

System recap — extends an existing primitive (medium risk)

Mode: recap · Base: main @ aca4cf8 · Head: 186f322

Classification: extends — the browser app gains a reusable Remix combobox adapter and new account-page picker/filter behavior; no system primitive is added.

Primitives touched

Primitive	Group	Impact
app-ui	surfaces	extends — shared combobox plus package and integration picker UX

System map

The browser app presents existing user-scoped package, secret, and integration data through searchable, name-first controls.

Legend: green = composes (wiring only) · amber = extended by this PR · red = new primitive · gray = context (unchanged, included only when an edge crosses it).

flowchart LR
	appUi["app-ui<br/>Browser app (Remix 3)"]:::extended
	savedPackages["saved-packages<br/>Saved packages"]:::untouched
	secrets["secrets<br/>Secret references"]:::untouched
	values["values<br/>Values"]:::untouched
	savedPackages -->|"name + UUID picker options"| appUi
	secrets -->|"allowed-package grants and approval state"| appUi
	values -->|"saved integration cards"| appUi
	classDef touched fill:#1a7f37,color:#fff
	classDef extended fill:#9a6700,color:#fff
	classDef added fill:#cf222e,color:#fff
	classDef untouched fill:#57606a,color:#fff

Loading

Before / after

Area	Before	After
Allowed packages	editable UUID text rows	searchable kody-id picker with UUID secondary text
Approval request	raw package UUID	package kody id with UUID as secondary detail
Integrations	unfiltered card grid	tokenized search across names, hosts, scopes, endpoints, and stored names

  

Summary by CodeRabbit

• New Features

  • Added integration search with match counts and a no-results message.
  • Improved secret package selection with searchable pickers, clearer labels, and easier add/remove controls.
  • Added support for searching integrations by names, identifiers, URLs, hosts, and scopes.

• Bug Fixes

  • Improved package and integration naming consistency across approval and search screens.

• Tests

  • Added automated coverage for integration and secret search behavior.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 4d9fa4a3-8790-412a-866a-af64de92c73c

📥 Commits

Reviewing files that changed from the base of the PR and between aca4cf8 and 186f322.

📒 Files selected for processing (11)

• e2e/account-pickers.spec.ts
• e2e/d1-utils.ts
• packages/worker/client/combobox.tsx
• packages/worker/client/routes/account-integrations.tsx
• packages/worker/client/routes/account-secrets.tsx
• packages/worker/client/routes/integration-filter.node.test.ts
• packages/worker/client/routes/integration-filter.ts
• packages/worker/client/routes/secret-editor-fields.tsx
• packages/worker/client/search-filter.node.test.ts
• packages/worker/client/search-filter.ts
• packages/worker/client/typeahead-combobox.tsx

💤 Files with no reviewable changes (2)

• packages/worker/client/typeahead-combobox.tsx
• packages/worker/client/routes/secret-editor-fields.tsx

---

📝 Walkthrough

Walkthrough

The PR adds a reusable combobox and token-based search helpers, migrates secret package selection to package-id arrays with metadata labels, adds searchable integration listings, and covers the flows with seeded Playwright E2E tests.

Changes

Account picker and search improvements

Layer / File(s)	Summary
Shared search and combobox controls packages/worker/client/search-filter.ts, packages/worker/client/combobox.tsx, packages/worker/client/*test.ts	Adds token-based search matching, a Remix combobox adapter, and unit coverage for search behavior.
Secret package selection and display packages/worker/client/routes/account-secrets.tsx, packages/worker/client/routes/secret-editor-fields.tsx	Migrates allowed packages to string IDs, updates filtering and approval labels, replaces typeahead controls, and adds metadata-based package management UI.
Integration filtering packages/worker/client/routes/integration-filter.ts, packages/worker/client/routes/integration-filter.node.test.ts, packages/worker/client/routes/account-integrations.tsx	Adds multi-field integration filtering, matching tests, search input handling, filtered results, counts, and an empty state.
Seeded end-to-end coverage e2e/d1-utils.ts, e2e/account-pickers.spec.ts	Adds D1 seed helpers and tests secret approval, package selection, and integration search.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant E2ETest
  participant D1Database
  participant AccountSecrets
  participant Combobox
  participant AccountIntegrations
  E2ETest->>D1Database: Seed packages and integrations
  E2ETest->>AccountSecrets: Create and approve secret
  AccountSecrets->>Combobox: Select package filters and allowed package
  E2ETest->>AccountIntegrations: Search for Spotify playback
  AccountIntegrations-->>E2ETest: Show one matching integration

Loading

Possibly related PRs

• kentcdodds/kody#311: Modifies the related secret editor allowed-packages UI.
• kentcdodds/kody#550: Introduces the integrations page extended here with search filtering.
• kentcdodds/kody#694: Overlaps with package-scope and package-ID handling in account secrets.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: adding a reusable combobox for package and integration pickers.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch cursor/kody-combobox-pickers-eb6d

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

🔎 Preview deployed: https://kody-pr-799.kody-a99.workers.dev

Worker: kody-pr-799
D1: kody-pr-799-db
KV: kody-pr-799-oauth-kv

Mocks:

• cloudflare: https://kody-pr-799-mock-cloudflare.kody-a99.workers.dev/__mocks (kody-pr-799-mock-cloudflare)