Rework package token editor like secrets

[kentcdodds]

Summary

• Rework package invocation token management to behave more like the secrets UI: selected active tokens open directly in an editor form.
• Add optional write-only raw token replacement for editing/rotating token values while never displaying existing raw material or token hashes.
• Add browser-side Generate and Copy controls for create and rotate raw-token fields when the exact bearer value does not matter.
• Extract shared account management UI components and use them across secrets and package token pages.
• Keep revoked tokens read-only with un-revoke/delete actions, and keep permanent delete/revoke behavior intact.
• Update package invocation token setup docs to document write-only token rotation and generated token values.

Walkthrough

Testing

• npx vitest run packages/worker/src/app/handlers/account-package-invocation-tokens.node.test.ts packages/worker/src/mcp/capabilities/coding/kody-official-guide.node.test.ts
• npx vitest run packages/worker/src/app/handlers/account-package-invocation-tokens.node.test.ts
• npm run typecheck
• npm run format:check
• npm run lint (existing unrelated warnings only)
• npm run validate
• Manual browser verification of the secrets page shared layout, package token query-prefill/create/direct-editor/replace-token/delete flow, and Generate/Copy behavior for create and rotate raw-token fields.

  

Summary by CodeRabbit

• New Features
  • Rotate an account package invocation token by supplying a replacement raw value during update.
  • Token and secret pages now use a consistent shell/layout with a shared metadata grid.
• Bug Fixes
  • If no replacement raw value is provided, the stored token value/hash is preserved.
  • Revoked tokens are non-editable and show an empty editor.
  • Attempts to rotate to an already-used raw value now return a clearer “raw value already exists” error.
• Documentation
  • Contributor/setup guides updated to clarify the write-only, optional rotation field behavior and that neither raw token nor its hash is returned by list/detail views.

[coderabbitai]

📝 Walkthrough

Walkthrough

Docs, handler and repository logic, shared account-management components, and the account package invocation token and secrets routes were updated. Token updates can now optionally replace the stored token hash when a new raw token is provided.

Changes

Account management token rotation and shells

Layer / File(s)	Summary
Update semantics and persistence docs/contributing/package-invocation-api.md, docs/guides/account-package-invocation-token-setup.md, packages/worker/src/package-invocations/repo.ts	The package-invocation docs now describe optional raw-token replacement and write-only editing, and updatePackageInvocationToken preserves the stored hash when no new token hash is provided.
Update handler path packages/worker/src/app/handlers/account-package-invocation-tokens.ts, packages/worker/src/app/handlers/account-package-invocation-tokens.node.test.ts	handleUpdateAction now reads an optional raw token, hashes it when present, passes an optional token hash to the repository, and maps token-hash uniqueness conflicts to a 409 response; the node test covers ignored hash input and replacement updates.
Shared account-management components packages/worker/client/routes/account-management-components.tsx	The new shared component module adds the shell, header, message, layout, sidebar, list, list item button, panel, metadata grid, and notice-card styles.
Token route state and submit flow packages/worker/client/routes/account-package-invocation-tokens.tsx	The token route derives edit mode from revoked status, includes optional raw-token input in update payloads, and changes cancel and success handling around token replacement.
Token route editor and details packages/worker/client/routes/account-package-invocation-tokens.tsx	The token page now renders through the shared shell and layout, adds the write-only raw-token replacement field, uses inline revoke/delete confirmation states, and renders token details through MetadataGrid.
Secrets page refactor packages/worker/client/routes/account-secrets.tsx	The account secrets route now uses the shared shell, header, layout, sidebar, list, message, and metadata grid components while keeping its existing filters and secret list content.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

• kentcdodds/kody#275: Shares the package-invocation token hashing and storage path that this update flow now preserves or rotates.
• kentcdodds/kody#546: Touches the same account package invocation token management area and route flow.
• kentcdodds/kody#562: Also changes handleUpdateAction and updatePackageInvocationToken in the package-invocation token update path.

Poem

A bunny hopped through docs and code,
with token burrows finely strode 🐇
Leave the raw token blank? It stays.
Paste a new one? Fresh bearer blaze.
Soft paws, neat shells, and tidy rows.

🚥 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
Title check	✅ Passed	The title clearly reflects the main change: aligning the package token editor with the secrets UI.
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.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ 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 package-token-ui-edit-view

---

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-563.kentcdodds.workers.dev

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

Mocks:

• cloudflare: https://kody-pr-563-mock-cloudflare.kentcdodds.workers.dev/__mocks (kody-pr-563-mock-cloudflare)

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

packages/worker/src/app/handlers/account-package-invocation-tokens.ts (1)

345-358: 📐 Maintainability & Code Quality | 🔵 Trivial

Use getUniqueConstraintField() here instead of matching error text. This file uses the same message.includes('UNIQUE') || message.includes('token_hash') check in both the create and update paths, while auth.ts and account-profile.ts already rely on the shared parser.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/worker/src/app/handlers/account-package-invocation-tokens.ts` around
lines 345 - 358, Replace the ad hoc error-text matching in the token
create/update catch blocks with the shared unique-constraint parser used
elsewhere. In the relevant handler logic in
account-package-invocation-tokens.ts, call getUniqueConstraintField() on the
caught error and use that result to detect token_hash uniqueness conflicts,
matching the approach already used in auth.ts and account-profile.ts, then keep
returning the same 409 response for that specific case and rethrow everything
else.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/worker/client/routes/account-management-components.tsx`:
- Around line 99-104: AccountManagementMessage currently hardcodes role="alert"
for every message, which is too aggressive for non-error states. Update the
component to choose the live-region role based on handle.props.tone, keeping
alert for error tones and using a polite status-style role for success/info
messages. Adjust the render logic in AccountManagementMessage so routine
messages like saved confirmations do not interrupt screen-reader output.

In `@packages/worker/client/routes/account-secrets.tsx`:
- Around line 1085-1093: The New secret and secret-selection handlers in
account-secrets.tsx stay clickable while a save is in progress, which lets
editorState change before saveSecretChanges() finishes. Gate both the New secret
button and the secret row selection logic on isMutating so navigation/selection
is disabled during an in-flight mutation, and update saveSecretChanges() to
capture the submitted editor state before the first await so later success
messaging and follow-up navigation use the original state.

---

Nitpick comments:
In `@packages/worker/src/app/handlers/account-package-invocation-tokens.ts`:
- Around line 345-358: Replace the ad hoc error-text matching in the token
create/update catch blocks with the shared unique-constraint parser used
elsewhere. In the relevant handler logic in
account-package-invocation-tokens.ts, call getUniqueConstraintField() on the
caught error and use that result to detect token_hash uniqueness conflicts,
matching the approach already used in auth.ts and account-profile.ts, then keep
returning the same 409 response for that specific case and rethrow everything
else.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 95a8a80e-d8e8-4f3c-a7bf-b85d6fb6ee9e

📥 Commits

Reviewing files that changed from the base of the PR and between e741d18 and bdfd431.

📒 Files selected for processing (8)

• docs/contributing/package-invocation-api.md
• docs/guides/account-package-invocation-token-setup.md
• packages/worker/client/routes/account-management-components.tsx
• packages/worker/client/routes/account-package-invocation-tokens.tsx
• packages/worker/client/routes/account-secrets.tsx
• packages/worker/src/app/handlers/account-package-invocation-tokens.node.test.ts
• packages/worker/src/app/handlers/account-package-invocation-tokens.ts
• packages/worker/src/package-invocations/repo.ts

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/worker/client/routes/account-secrets.tsx (1)

1080-1088: 🩺 Stability & Availability | 🟠 Major | ⚡ Quick win

Guard the Remote connectors link during mutations.

New secret and list selection now respect isMutating, but this header link can still navigate away while a save/delete/approval request is in flight, potentially aborting the write or hiding its result. Prevent the click when isMutating is true and mark the link disabled.

Suggested patch

 							<a
 								href="/account/remote-connectors"
+								aria-disabled={isMutating}
 								mix={css({
 									...secondaryButtonCss,
 									textDecoration: 'none',
+									...(isMutating
+										? { pointerEvents: 'none', opacity: 0.6 }
+										: null),
 								})}
 							>

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/worker/client/routes/account-secrets.tsx` around lines 1080 - 1088,
Guard the Remote connectors header link in the account-secrets route so it
cannot be used while a mutation is in flight. Update the existing anchor element
near the Remote connectors label to respect isMutating the same way the New
secret action and list selection already do: prevent navigation when isMutating
is true, and apply a disabled state/style so the user can see it is unavailable
during save/delete/approval requests.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In `@packages/worker/client/routes/account-secrets.tsx`:
- Around line 1080-1088: Guard the Remote connectors header link in the
account-secrets route so it cannot be used while a mutation is in flight. Update
the existing anchor element near the Remote connectors label to respect
isMutating the same way the New secret action and list selection already do:
prevent navigation when isMutating is true, and apply a disabled state/style so
the user can see it is unavailable during save/delete/approval requests.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: e6c4bb0c-58aa-4377-bf29-ad8375ac0d43

📥 Commits

Reviewing files that changed from the base of the PR and between bdfd431 and 905b8cf.

📒 Files selected for processing (2)

• packages/worker/client/routes/account-management-components.tsx
• packages/worker/client/routes/account-secrets.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/worker/client/routes/account-management-components.tsx

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 768ed26. Configure here.}