AI dashboard widget + CLI AI generate fix suggestions

apps/webapp/app/assets/icons/AISparkleIcon.tsx

@@ -1,53 +1,31 @@
 export function AISparkleIcon({ className }: { className?: string }) {
   return (
-    <svg className={className} viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <path
-        d="M14.9806 0.803884C14.8871 0.33646 14.4767 0 14 0C13.5233 0 13.1129 0.33646 13.0194 0.803884L12.7809 1.99644C12.7017 2.3923 12.3923 2.70174 11.9964 2.78091L10.8039 3.01942C10.3365 3.1129 10 3.52332 10 4C10 4.47668 10.3365 4.8871 10.8039 4.98058L11.9964 5.21909C12.3923 5.29826 12.7017 5.6077 12.7809 6.00356L13.0194 7.19612C13.1129 7.66354 13.5233 8 14 8C14.4767 8 14.8871 7.66354 14.9806 7.19612L15.2191 6.00356C15.2983 5.6077 15.6077 5.29826 16.0036 5.21909L17.1961 4.98058C17.6635 4.8871 18 4.47668 18 4C18 3.52332 17.6635 3.1129 17.1961 3.01942L16.0036 2.78091C15.6077 2.70174 15.2983 2.3923 15.2191 1.99644L14.9806 0.803884Z"
-        fill="url(#paint0_linear_11402_36656)"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.14286 4.85718C9.46177 4.85718 9.74205 5.06859 9.82966 5.37523L10.6041 8.08589C10.9431 9.27235 11.8705 10.1998 13.057 10.5388L15.7677 11.3132C16.0743 11.4008 16.2857 11.6811 16.2857 12C16.2857 12.319 16.0743 12.5992 15.7677 12.6868L13.057 13.4613C11.8705 13.8003 10.9431 14.7277 10.6041 15.9142L9.82966 18.6248C9.74205 18.9315 9.46177 19.1429 9.14286 19.1429C8.82394 19.1429 8.54367 18.9315 8.45605 18.6248L7.68158 15.9142C7.34259 14.7277 6.41517 13.8003 5.22871 13.4613L2.51806 12.6868C2.21141 12.5992 2 12.319 2 12C2 11.6811 2.21141 11.4008 2.51806 11.3132L5.22871 10.5388C6.41517 10.1998 7.34259 9.27235 7.68158 8.08589L8.45605 5.37523C8.54367 5.06859 8.82394 4.85718 9.14286 4.85718Z"
+        fill="#7655FD"
       />
       <path
-        d="M5.94868 4.68377C5.81257 4.27543 5.43043 4 5 4C4.56957 4 4.18743 4.27543 4.05132 4.68377L3.36754 6.73509C3.26801 7.03369 3.03369 7.26801 2.73509 7.36754L0.683772 8.05132C0.27543 8.18743 0 8.56957 0 9C0 9.43043 0.27543 9.81257 0.683772 9.94868L2.73509 10.6325C3.03369 10.732 3.26801 10.9663 3.36754 11.2649L4.05132 13.3162C4.18743 13.7246 4.56957 14 5 14C5.43043 14 5.81257 13.7246 5.94868 13.3162L6.63246 11.2649C6.73199 10.9663 6.96631 10.732 7.26491 10.6325L9.31623 9.94868C9.72457 9.81257 10 9.43043 10 9C10 8.56957 9.72457 8.18743 9.31623 8.05132L7.26491 7.36754C6.96631 7.26801 6.73199 7.03369 6.63246 6.73509L5.94868 4.68377Z"
-        fill="url(#paint1_linear_11402_36656)"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.7143 2C18.0421 2 18.3278 2.22307 18.4072 2.54105L18.6538 3.5272C18.8777 4.42291 19.5771 5.12229 20.4728 5.34622L21.459 5.59276C21.7769 5.67225 22 5.95795 22 6.28571C22 6.61348 21.7769 6.89918 21.459 6.97867L20.4728 7.22521C19.5771 7.44914 18.8777 8.14851 18.6538 9.04423L18.4072 10.0304C18.3278 10.3484 18.0421 10.5714 17.7143 10.5714C17.3865 10.5714 17.1008 10.3484 17.0213 10.0304L16.7748 9.04423C16.5509 8.14852 15.8515 7.44914 14.9558 7.22521L13.9696 6.97867C13.6516 6.89918 13.4286 6.61348 13.4286 6.28571C13.4286 5.95795 13.6516 5.67225 13.9696 5.59276L14.9558 5.34622C15.8515 5.12229 16.5509 4.42291 16.7748 3.5272L17.0213 2.54105C17.1008 2.22307 17.3865 2 17.7143 2Z"
+        fill="#D946EF"
       />
       <path
-        d="M12.9487 12.6838C12.8126 12.2754 12.4304 12 12 12C11.5696 12 11.1874 12.2754 11.0513 12.6838L10.8675 13.2351C10.768 13.5337 10.5337 13.768 10.2351 13.8675L9.68377 14.0513C9.27543 14.1874 9 14.5696 9 15C9 15.4304 9.27543 15.8126 9.68377 15.9487L10.2351 16.1325C10.5337 16.232 10.768 16.4663 10.8675 16.7649L11.0513 17.3162C11.1874 17.7246 11.5696 18 12 18C12.4304 18 12.8126 17.7246 12.9487 17.3162L13.1325 16.7649C13.232 16.4663 13.4663 16.232 13.7649 16.1325L14.3162 15.9487C14.7246 15.8126 15 15.4304 15 15C15 14.5696 14.7246 14.1874 14.3162 14.0513L13.7649 13.8675C13.4663 13.768 13.232 13.5337 13.1325 13.2351L12.9487 12.6838Z"
-        fill="url(#paint2_linear_11402_36656)"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.2857 14.8572C16.5932 14.8572 16.8661 15.0539 16.9633 15.3456L17.3388 16.472C17.481 16.8986 17.8157 17.2333 18.2423 17.3755L19.3687 17.751C19.6604 17.8482 19.8571 18.1212 19.8571 18.4286C19.8571 18.7361 19.6604 19.009 19.3687 19.1062L18.2423 19.4817C17.8157 19.6239 17.481 19.9586 17.3388 20.3852L16.9633 21.5116C16.8661 21.8033 16.5932 22 16.2857 22C15.9783 22 15.7053 21.8033 15.6081 21.5116L15.2326 20.3852C15.0904 19.9586 14.7557 19.6239 14.3291 19.4817L13.2027 19.1062C12.911 19.009 12.7143 18.7361 12.7143 18.4286C12.7143 18.1212 12.911 17.8482 13.2027 17.751L14.3291 17.3755C14.7557 17.2333 15.0904 16.8986 15.2326 16.472L15.6081 15.3456C15.7053 15.0539 15.9783 14.8572 16.2857 14.8572Z"
+        fill="#4F46E5"
       />
-      <defs>
-        <linearGradient
-          id="paint0_linear_11402_36656"
-          x1="9"
-          y1="0"
-          x2="9"
-          y2="18"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#E543FF" />
-          <stop offset="1" stopColor="#286399" />
-        </linearGradient>
-        <linearGradient
-          id="paint1_linear_11402_36656"
-          x1="9"
-          y1="0"
-          x2="9"
-          y2="18"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#E543FF" />
-          <stop offset="1" stopColor="#286399" />
-        </linearGradient>
-        <linearGradient
-          id="paint2_linear_11402_36656"
-          x1="9"
-          y1="0"
-          x2="9"
-          y2="18"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#E543FF" />
-          <stop offset="1" stopColor="#286399" />
-        </linearGradient>
-      </defs>
     </svg>
   );
 }

apps/webapp/app/assets/icons/KeyboardEnterIcon.tsx

@@ -0,0 +1,12 @@
+export function KeyboardEnterIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M12 5H18C19.6569 5 21 6.34315 21 8V13C21 14.6569 19.6569 16 18 16H8"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+      <path d="M2 16L8 12L8 20L2 16Z" fill="currentColor" />
+    </svg>
+  );
+}

apps/webapp/app/components/Shortcuts.tsx

@@ -11,6 +11,8 @@ import {
 } from "./primitives/SheetV3";
 import { ShortcutKey } from "./primitives/ShortcutKey";
 import { Button } from "./primitives/Buttons";
+import { useState } from "react";
+import { useShortcutKeys } from "~/hooks/useShortcutKeys";
 
 export function Shortcuts() {
   return (
@@ -23,121 +25,147 @@ export function Shortcuts() {
           data-action="shortcuts"
           fullWidth
           textAlignLeft
-          shortcut={{ modifiers: ["shift"], key: "?" }}
+          shortcut={{ modifiers: ["shift"], key: "?", enabled: false }}
           className="gap-x-0 pl-0.5"
           iconSpacing="gap-x-0.5"
         >
           Shortcuts
         </Button>
       </SheetTrigger>
-      <SheetContent>
-        <SheetHeader>
-          <SheetTitle>
-            <div className="flex items-center gap-x-2">
-              <Keyboard className="size-5 text-indigo-500" />
-              <span className="font-sans text-base font-medium text-text-bright">
-                Keyboard shortcuts
-              </span>
-            </div>
-          </SheetTitle>
-          <div className="space-y-6 px-4 pb-4 pt-2">
-            <div className="space-y-3">
-              <Header3>General</Header3>
-              <Shortcut name="Close">
-                <ShortcutKey shortcut={{ key: "esc" }} variant="medium/bright" />
-              </Shortcut>
-              <Shortcut name="Confirm">
-                <ShortcutKey shortcut={{ modifiers: ["mod"] }} variant="medium/bright" />
-                <ShortcutKey shortcut={{ key: "enter" }} variant="medium/bright" />
-              </Shortcut>
-              <Shortcut name="Filter">
-                <ShortcutKey shortcut={{ key: "f" }} variant="medium/bright" />
-              </Shortcut>
-              <Shortcut name="Select filter">
-                <ShortcutKey shortcut={{ key: "1" }} variant="medium/bright" />
-                <Paragraph variant="small" className="ml-1.5">
-                  to
-                </Paragraph>
-                <ShortcutKey shortcut={{ key: "9" }} variant="medium/bright" />
-              </Shortcut>
-              <Shortcut name="Previous page">
-                <ShortcutKey shortcut={{ key: "j" }} variant="medium/bright" />
-              </Shortcut>
-              <Shortcut name="Next page">
-                <ShortcutKey shortcut={{ key: "k" }} variant="medium/bright" />
-              </Shortcut>
-              <Shortcut name="Help & Feedback">
-                <ShortcutKey shortcut={{ key: "h" }} variant="medium/bright" />
-              </Shortcut>
-            </div>
-            <div className="space-y-3">
-              <Header3>Runs page</Header3>
-              <Shortcut name="Bulk action: Cancel runs">
-                <ShortcutKey shortcut={{ key: "c" }} variant="medium/bright" />
-              </Shortcut>
-              <Shortcut name="Bulk action: Replay runs">
-                <ShortcutKey shortcut={{ key: "r" }} variant="medium/bright" />
-              </Shortcut>
-              <Shortcut name="Bulk action: Clear selection">
-                <ShortcutKey shortcut={{ key: "esc" }} variant="medium/bright" />
-              </Shortcut>
-            </div>
-            <div className="space-y-3">
-              <Header3>Run page</Header3>
-              <Shortcut name="Replay run">
-                <ShortcutKey shortcut={{ key: "r" }} variant="medium/bright" />
-              </Shortcut>
-              <Shortcut name="Overview">
-                <ShortcutKey shortcut={{ key: "o" }} variant="medium/bright" />
-              </Shortcut>
-              <Shortcut name="Details">
-                <ShortcutKey shortcut={{ key: "d" }} variant="medium/bright" />
-              </Shortcut>
-              <Shortcut name="Context">
-                <ShortcutKey shortcut={{ key: "c" }} variant="medium/bright" />
-              </Shortcut>
-              <Shortcut name="Metadata">
-                <ShortcutKey shortcut={{ key: "m" }} variant="medium/bright" />
-              </Shortcut>
-              <Shortcut name="Navigate">
-                <ShortcutKey shortcut={{ key: "arrowup" }} variant="medium/bright" />
-                <ShortcutKey shortcut={{ key: "arrowdown" }} variant="medium/bright" />
-                <ShortcutKey shortcut={{ key: "arrowleft" }} variant="medium/bright" />
-                <ShortcutKey shortcut={{ key: "arrowright" }} variant="medium/bright" />
-              </Shortcut>
-              <Shortcut name="Expand all">
-                <ShortcutKey shortcut={{ key: "e" }} variant="medium/bright" />
-              </Shortcut>
-              <Shortcut name="Collapse all">
-                <ShortcutKey shortcut={{ key: "w" }} variant="medium/bright" />
-              </Shortcut>
-              <Shortcut name="Toggle level">
-                <ShortcutKey shortcut={{ key: "0" }} variant="medium/bright" />
-                <Paragraph variant="small" className="ml-1.5">
-                  to
-                </Paragraph>
-                <ShortcutKey shortcut={{ key: "9" }} variant="medium/bright" />
-              </Shortcut>
-            </div>
-            <div className="space-y-3">
-              <Header3>Schedules page</Header3>
-              <Shortcut name="New schedule">
-                <ShortcutKey shortcut={{ key: "n" }} variant="medium/bright" />
-              </Shortcut>
-            </div>
-            <div className="space-y-3">
-              <Header3>Alerts page</Header3>
-              <Shortcut name="New alert">
-                <ShortcutKey shortcut={{ key: "n" }} variant="medium/bright" />
-              </Shortcut>
-            </div>
-          </div>
-        </SheetHeader>
-      </SheetContent>
+      <ShortcutContent />
     </Sheet>
   );
 }
 
+export function ShortcutsAutoOpen() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  useShortcutKeys({
+    shortcut: { modifiers: ["shift"], key: "?" },
+    action: () => {
+      setIsOpen(true);
+    },
+  });
+
+  return (
+    <Sheet open={isOpen} onOpenChange={setIsOpen}>
+      <ShortcutContent />
+    </Sheet>
+  );
+}
+
+function ShortcutContent() {
+  return (
+    <SheetContent>
+      <SheetHeader>
+        <SheetTitle>
+          <div className="flex items-center gap-x-2">
+            <Keyboard className="size-5 text-indigo-500" />
+            <span className="font-sans text-base font-medium text-text-bright">
+              Keyboard shortcuts
+            </span>
+          </div>
+        </SheetTitle>
+        <div className="space-y-6 px-4 pb-4 pt-2">
+          <div className="space-y-3">
+            <Header3>General</Header3>
+            <Shortcut name="Close">
+              <ShortcutKey shortcut={{ key: "esc" }} variant="medium/bright" />
+            </Shortcut>
+            <Shortcut name="Confirm">
+              <ShortcutKey shortcut={{ modifiers: ["mod"] }} variant="medium/bright" />
+              <ShortcutKey shortcut={{ key: "enter" }} variant="medium/bright" />
+            </Shortcut>
+            <Shortcut name="Ask AI">
+              <ShortcutKey shortcut={{ modifiers: ["mod"], key: "/" }} variant="medium/bright" />
+            </Shortcut>
+            <Shortcut name="Filter">
+              <ShortcutKey shortcut={{ key: "f" }} variant="medium/bright" />
+            </Shortcut>
+            <Shortcut name="Select filter">
+              <ShortcutKey shortcut={{ key: "1" }} variant="medium/bright" />
+              <Paragraph variant="small" className="ml-1.5">
+                to
+              </Paragraph>
+              <ShortcutKey shortcut={{ key: "9" }} variant="medium/bright" />
+            </Shortcut>
+            <Shortcut name="Previous page">
+              <ShortcutKey shortcut={{ key: "j" }} variant="medium/bright" />
+            </Shortcut>
+            <Shortcut name="Next page">
+              <ShortcutKey shortcut={{ key: "k" }} variant="medium/bright" />
+            </Shortcut>
+            <Shortcut name="Help & Feedback">
+              <ShortcutKey shortcut={{ key: "h" }} variant="medium/bright" />
+            </Shortcut>
+          </div>
+          <div className="space-y-3">
+            <Header3>Runs page</Header3>
+            <Shortcut name="Bulk action: Cancel runs">
+              <ShortcutKey shortcut={{ key: "c" }} variant="medium/bright" />
+            </Shortcut>
+            <Shortcut name="Bulk action: Replay runs">
+              <ShortcutKey shortcut={{ key: "r" }} variant="medium/bright" />
+            </Shortcut>
+            <Shortcut name="Bulk action: Clear selection">
+              <ShortcutKey shortcut={{ key: "esc" }} variant="medium/bright" />
+            </Shortcut>
+          </div>
+          <div className="space-y-3">
+            <Header3>Run page</Header3>
+            <Shortcut name="Replay run">
+              <ShortcutKey shortcut={{ key: "r" }} variant="medium/bright" />
+            </Shortcut>
+            <Shortcut name="Overview">
+              <ShortcutKey shortcut={{ key: "o" }} variant="medium/bright" />
+            </Shortcut>
+            <Shortcut name="Details">
+              <ShortcutKey shortcut={{ key: "d" }} variant="medium/bright" />
+            </Shortcut>
+            <Shortcut name="Context">
+              <ShortcutKey shortcut={{ key: "c" }} variant="medium/bright" />
+            </Shortcut>
+            <Shortcut name="Metadata">
+              <ShortcutKey shortcut={{ key: "m" }} variant="medium/bright" />
+            </Shortcut>
+            <Shortcut name="Navigate">
+              <ShortcutKey shortcut={{ key: "arrowup" }} variant="medium/bright" />
+              <ShortcutKey shortcut={{ key: "arrowdown" }} variant="medium/bright" />
+              <ShortcutKey shortcut={{ key: "arrowleft" }} variant="medium/bright" />
+              <ShortcutKey shortcut={{ key: "arrowright" }} variant="medium/bright" />
+            </Shortcut>
+            <Shortcut name="Expand all">
+              <ShortcutKey shortcut={{ key: "e" }} variant="medium/bright" />
+            </Shortcut>
+            <Shortcut name="Collapse all">
+              <ShortcutKey shortcut={{ key: "w" }} variant="medium/bright" />
+            </Shortcut>
+            <Shortcut name="Toggle level">
+              <ShortcutKey shortcut={{ key: "0" }} variant="medium/bright" />
+              <Paragraph variant="small" className="ml-1.5">
+                to
+              </Paragraph>
+              <ShortcutKey shortcut={{ key: "9" }} variant="medium/bright" />
+            </Shortcut>
+          </div>
+          <div className="space-y-3">
+            <Header3>Schedules page</Header3>
+            <Shortcut name="New schedule">
+              <ShortcutKey shortcut={{ key: "n" }} variant="medium/bright" />
+            </Shortcut>
+          </div>
+          <div className="space-y-3">
+            <Header3>Alerts page</Header3>
+            <Shortcut name="New alert">
+              <ShortcutKey shortcut={{ key: "n" }} variant="medium/bright" />
+            </Shortcut>
+          </div>
+        </div>
+      </SheetHeader>
+    </SheetContent>
+  );
+}
+
 function Shortcut({ children, name }: { children: React.ReactNode; name: string }) {
   return (
     <div className="flex items-center justify-between gap-x-2">

apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx

@@ -2,16 +2,17 @@ import {
   ArrowUpRightIcon,
   BookOpenIcon,
   CalendarDaysIcon,
-  ChatBubbleLeftEllipsisIcon,
   EnvelopeIcon,
   LightBulbIcon,
+  QuestionMarkCircleIcon,
   SignalIcon,
   StarIcon,
 } from "@heroicons/react/20/solid";
 import { DiscordIcon, SlackIcon } from "@trigger.dev/companyicons";
 import { Fragment, useState } from "react";
 import { useCurrentPlan } from "~/routes/_app.orgs.$organizationSlug/route";
 import { Feedback } from "../Feedback";
+import { Shortcuts } from "../Shortcuts";
 import { StepContentContainer } from "../StepContentContainer";
 import { Button } from "../primitives/Buttons";
 import { ClipboardField } from "../primitives/ClipboardField";
@@ -21,16 +22,21 @@ import { Paragraph } from "../primitives/Paragraph";
 import { Popover, PopoverContent, PopoverSideMenuTrigger } from "../primitives/Popover";
 import { StepNumber } from "../primitives/StepNumber";
 import { MenuCount, SideMenuItem } from "./SideMenuItem";
-import { Shortcuts } from "../Shortcuts";
-export function HelpAndFeedback() {
+
+export function HelpAndFeedback({ disableShortcut = false }: { disableShortcut?: boolean }) {
   const [isHelpMenuOpen, setHelpMenuOpen] = useState(false);
   const currentPlan = useCurrentPlan();
 
   return (
     <Popover onOpenChange={(open) => setHelpMenuOpen(open)}>
-      <PopoverSideMenuTrigger isOpen={isHelpMenuOpen} shortcut={{ key: "h" }}>
+      <PopoverSideMenuTrigger
+        isOpen={isHelpMenuOpen}
+        shortcut={{ key: "h", enabledOnInputElements: false }}
+        className="grow pr-2"
+        disabled={disableShortcut}
+      >
         <div className="flex items-center gap-1.5">
-          <ChatBubbleLeftEllipsisIcon className="size-4 text-success" />
+          <QuestionMarkCircleIcon className="size-4 text-success" />
           Help & Feedback
         </div>
       </PopoverSideMenuTrigger>