AI dashboard widget + CLI AI generate fix suggestions

[matt-aitken]

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 2b74932c0ff9be061ef577e5a0795dcedb2572e7

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coderabbitai[bot]]

Walkthrough

This set of changes introduces AI-assisted help integration across both the web application and CLI tools. In the web app, new components, hooks, and context providers are added to enable an AI help widget, shortcut management, and context-aware keyboard shortcuts. The side menu now offers direct AI assistance, and shortcut sheets are refactored for modularity and auto-opening. On the CLI side, error handling is enhanced: build failures and worker errors now generate terminal links for AI-powered troubleshooting, with a new error class and event bus event for build failures. Several UI icons and layouts receive updates, and workspace dependency references are adjusted in a sample package.

Changes

Files/Paths	Change Summary
.changeset/red-chairs-begin.md	Added changelog: documents AI assistance link for build errors.
apps/webapp/app/assets/icons/AISparkleIcon.tsx	Updated SVG: increased size, replaced gradients with solid fills, simplified structure.
apps/webapp/app/assets/icons/KeyboardEnterIcon.tsx	New file: adds KeyboardEnterIcon React component.
apps/webapp/app/components/Shortcuts.tsx	Refactored: disables built-in shortcut, extracts content to ShortcutContent, adds ShortcutsAutoOpen, and includes new "Ask AI" shortcut.
apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx	Updated: adds disableShortcut prop, changes trigger icon, adjusts shortcut settings.
apps/webapp/app/components/navigation/SideMenu.tsx	Enhanced: adds AI help integration via HelpAndAI, uses useKapaWidget, updates footer UI and shortcut support.
apps/webapp/app/components/primitives/Buttons.tsx	Added: optional hideShortcutKey prop to button content; renders shortcut key conditionally.
apps/webapp/app/components/primitives/ShortcutKey.tsx	Updated: uses KeyboardEnterIcon for "enter" key on Mac, adjusts imports.
apps/webapp/app/components/primitives/ShortcutsProvider.tsx	New file: introduces ShortcutsProvider context and useShortcuts hook for managing global shortcut state.
apps/webapp/app/env.server.ts	Added: optional KAPA_AI_WEBSITE_ID to environment schema.
apps/webapp/app/hooks/useKapaWidget.tsx	New file: provides Kapa AI widget integration, config hook, and script injection component.
apps/webapp/app/hooks/useShortcutKeys.tsx	Enhanced: integrates global shortcut enablement, adds enabled prop to shortcuts, updates logic.
apps/webapp/app/root.tsx	Refactored: default export, adds Kapa AI scripts, wraps app in ShortcutsProvider, updates loader and styling.
apps/webapp/app/routes/projects.$projectRef.ai-help.ts	New route: loader validates user/project, redirects with query to AI help page.
apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.schedules.new.natural-language.tsx	UI tweaks: updates icon and container styling for cron field, no logic changes.
apps/webapp/app/routes/storybook.shortcuts/route.tsx	Added: DisableTester component for toggling shortcut state, updates storybook demo.
packages/cli-v3/src/build/bundle.ts	Added: BundleError class; throws on build failure with error details.
packages/cli-v3/src/cli/common.ts	Updated: handles BundleError in command wrapper, changes return type.
packages/cli-v3/src/commands/dev.ts	Updated: adds imports for new error classes.
packages/cli-v3/src/dev/devOutput.ts	Enhanced: adds build failure handler, generates AI help links for errors, updates error aggregation.
packages/cli-v3/src/dev/devSession.ts	Updated: wraps bundling in try-catch, emits build failure events.
packages/cli-v3/src/utilities/cliOutput.ts	Added: aiHelpLink function to print AI help URLs for errors.
packages/cli-v3/src/utilities/eventBus.ts	Added: buildFailed event type to event bus.
references/hello-world/package.json	Changed: dependency versions to workspace references.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant SideMenu
    participant HelpAndAI
    participant useKapaWidget
    participant KapaWidget

    User->>SideMenu: Clicks AI Help button or presses shortcut
    SideMenu->>HelpAndAI: Renders AI Help UI
    HelpAndAI->>useKapaWidget: Calls openKapa(query)
    useKapaWidget->>KapaWidget: Opens widget in AI mode with query
    KapaWidget-->>User: Displays AI assistance interface

sequenceDiagram
    participant CLI_User
    participant CLI
    participant Bundle
    participant EventBus
    participant aiHelpLink

    CLI_User->>CLI: Runs build/dev command
    CLI->>Bundle: Executes bundleWorker
    Bundle-->>CLI: Throws BundleError on failure
    CLI->>EventBus: Emits buildFailed event
    EventBus->>aiHelpLink: Calls with error details
    aiHelpLink-->>CLI_User: Prints AI help link in terminal

Possibly related PRs

• triggerdotdev/trigger.dev#1482: Refactors HelpAndFeedback component and its usage in the side menu, related to this PR's changes on the same components and integration of AI help.

Poem

🐇✨
A sparkle of AI in menu and shell,
Shortcuts now listen, and widgets as well.
When builds go awry, don’t fret or despair—
The rabbit has left you a help link to share!
With icons refreshed and context in tow,
Let’s hop to the future, together we go!
—Your code rabbit 🥕

✨ Finishing Touches

• [ ] 📝 Generate Docstrings

---

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

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.