Waitpoint tokens page, wait.listTokens() and wait.retrieveToken()

.gitignore

@@ -60,3 +60,6 @@ apps/**/public/build
 /packages/cli-v3/src/package.json
 .husky
 /packages/react-hooks/src/package.json
+/packages/core/src/package.json
+/packages/trigger-sdk/src/package.json
+/packages/python/src/package.json

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

@@ -0,0 +1,9 @@
+import { cn } from "~/utils/cn";
+
+export function StatusIcon({ className }: { className?: string }) {
+  return (
+    <div className={cn("grid place-items-center", className)}>
+      <div className="size-[75%] rounded-full border-2 border-text-dimmed" />
+    </div>
+  );
+}

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

@@ -0,0 +1,5 @@
+import { BoltIcon } from "@heroicons/react/20/solid";
+
+export function TriggerIcon({ className }: { className?: string }) {
+  return <BoltIcon className={className} />;
+}

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

@@ -0,0 +1,12 @@
+export function WaitpointTokenIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.71193 3.50338C6.89005 3.1921 7.22123 3.00004 7.57987 3.00003L16.4201 3C16.7787 3 17.1099 3.19206 17.288 3.50334L21.8658 11.5034C22.0419 11.8111 22.0419 12.189 21.8658 12.4967L17.288 20.4967C17.1099 20.8079 16.7787 21 16.4201 21H7.57987C7.22123 21 6.89005 20.8079 6.71193 20.4967L2.1342 12.4967C1.95813 12.189 1.95813 11.8111 2.1342 11.5034L6.71193 3.50338ZM8.5 9.00011C8.5 8.44783 8.94771 8.00011 9.5 8.00011H10C10.5523 8.00011 11 8.44783 11 9.00011V15.0001C11 15.5524 10.5523 16.0001 10 16.0001H9.5C8.94771 16.0001 8.5 15.5524 8.5 15.0001V9.00011ZM14 8.00006C13.4477 8.00006 13 8.44777 13 9.00006V15.0001C13 15.5523 13.4477 16.0001 14 16.0001H14.5C15.0523 16.0001 15.5 15.5523 15.5 15.0001V9.00006C15.5 8.44777 15.0523 8.00006 14.5 8.00006H14Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

apps/webapp/app/components/BlankStatePanels.tsx

@@ -35,6 +35,7 @@ import { StepNumber } from "./primitives/StepNumber";
 import { TextLink } from "./primitives/TextLink";
 import { InitCommandV3, PackageManagerProvider, TriggerDevStepV3 } from "./SetupCommands";
 import { StepContentContainer } from "./StepContentContainer";
+import { WaitpointTokenIcon } from "~/assets/icons/WaitpointTokenIcon";
 
 export function HasNoTasksDev() {
   return (
@@ -412,6 +413,30 @@ export function QueuesHasNoTasks() {
   );
 }
 
+export function NoWaitpointTokens() {
+  return (
+    <InfoPanel
+      title="You don't have any waitpoint tokens"
+      icon={WaitpointTokenIcon}
+      iconClassName="text-sky-500"
+      panelClassName="max-w-md"
+      accessory={
+        <LinkButton to={docsPath("wait")} variant="docs/small" LeadingIcon={BookOpenIcon}>
+          Waitpoint docs
+        </LinkButton>
+      }
+    >
+      <Paragraph spacing variant="small">
+        Waitpoint tokens are used to pause runs until you complete the token so the run can
+        continue.
+      </Paragraph>
+      <Paragraph spacing variant="small">
+        You can build approval workflows using them, as well as other use cases.
+      </Paragraph>
+    </InfoPanel>
+  );
+}
+
 function SwitcherPanel() {
   const organization = useOrganization();
   const project = useProject();

apps/webapp/app/components/code/CodeBlock.tsx

@@ -2,7 +2,7 @@ import { ArrowsPointingOutIcon } from "@heroicons/react/20/solid";
 import { Clipboard, ClipboardCheck } from "lucide-react";
 import type { Language, PrismTheme } from "prism-react-renderer";
 import { Highlight, Prism } from "prism-react-renderer";
-import { forwardRef, ReactNode, useCallback, useState } from "react";
+import { forwardRef, ReactNode, useCallback, useEffect, useState } from "react";
 import { cn } from "~/utils/cn";
 import { Button } from "../primitives/Buttons";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../primitives/Dialog";
@@ -422,6 +422,32 @@ function HighlightCode({
   className,
   preClassName,
 }: HighlightCodeProps) {
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  useEffect(() => {
+    // This ensures the language definitions are loaded
+    Promise.all([
+      //@ts-ignore
+      import("prismjs/components/prism-json"),
+      //@ts-ignore
+      import("prismjs/components/prism-typescript"),
+    ]).then(() => setIsLoaded(true));
+  }, []);
+
+  if (!isLoaded) {
+    return (
+      <div
+        dir="ltr"
+        className={cn(
+          "overflow-auto px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600",
+          className
+        )}
+      >
+        <pre className={cn("relative mr-2 font-mono leading-relaxed", preClassName)}>{code}</pre>
+      </div>
+    );
+  }
+
   return (
     <Highlight theme={theme} code={code} language={language}>
       {({

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

@@ -54,6 +54,7 @@ import {
   v3SchedulesPath,
   v3TestPath,
   v3UsagePath,
+  v3WaitpointTokensPath,
 } from "~/utils/pathBuilder";
 import connectedImage from "../../assets/images/cli-connected.png";
 import disconnectedImage from "../../assets/images/cli-disconnected.png";
@@ -80,6 +81,7 @@ import { HelpAndFeedback } from "./HelpAndFeedbackPopover";
 import { SideMenuHeader } from "./SideMenuHeader";
 import { SideMenuItem } from "./SideMenuItem";
 import { SideMenuSection } from "./SideMenuSection";
+import { WaitpointTokenIcon } from "~/assets/icons/WaitpointTokenIcon";
 
 type SideMenuUser = Pick<User, "email" | "admin"> & { isImpersonating: boolean };
 export type SideMenuProject = Pick<
@@ -211,6 +213,15 @@ export function SideMenu({
             />
           </div>
 
+          <SideMenuSection title="Waitpoints">
+            <SideMenuItem
+              name="Tokens"
+              icon={WaitpointTokenIcon}
+              activeIconColor="text-sky-500"
+              to={v3WaitpointTokensPath(organization, project, environment)}
+            />
+          </SideMenuSection>
+
           <SideMenuSection title="Manage">
             <SideMenuItem
               name="API keys"

apps/webapp/app/components/primitives/AnimatedNumber.tsx

@@ -1,13 +1,16 @@
-import { motion, useSpring, useTransform } from "framer-motion";
+import { motion, useSpring, useTransform, useMotionValue, animate } from "framer-motion";
 import { useEffect } from "react";
 
 export function AnimatedNumber({ value }: { value: number }) {
-  let spring = useSpring(value, { mass: 0.8, stiffness: 75, damping: 15 });
-  let display = useTransform(spring, (current) => Math.round(current).toLocaleString());
+  const motionValue = useMotionValue(value);
+  let display = useTransform(motionValue, (current) => Math.round(current).toLocaleString());
 
   useEffect(() => {
-    spring.set(value);
-  }, [spring, value]);
+    animate(motionValue, value, {
+      duration: 0.5,
+      ease: "easeInOut",
+    });
+  }, [value]);
 
   return <motion.span>{display}</motion.span>;
 }

apps/webapp/app/components/primitives/CopyableText.tsx

@@ -0,0 +1,61 @@
+import { useCallback, useState } from "react";
+import { SimpleTooltip } from "~/components/primitives/Tooltip";
+import { ClipboardCheckIcon, ClipboardIcon } from "lucide-react";
+import { cn } from "~/utils/cn";
+
+export function CopyableText({ value, className }: { value: string; className?: string }) {
+  const [isHovered, setIsHovered] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  const copy = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      navigator.clipboard.writeText(value);
+      setCopied(true);
+      setTimeout(() => {
+        setCopied(false);
+      }, 1500);
+    },
+    [value]
+  );
+
+  return (
+    <span
+      className={cn("group relative inline-flex h-6 items-center", className)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <span onMouseEnter={() => setIsHovered(true)}>{value}</span>
+      <span
+        onClick={copy}
+        onMouseDown={(e) => e.stopPropagation()}
+        className={cn(
+          "absolute -right-6 top-0 z-10 size-6 font-sans",
+          isHovered ? "flex" : "hidden"
+        )}
+      >
+        <SimpleTooltip
+          button={
+            <span
+              className={cn(
+                "ml-1 flex size-6 items-center justify-center rounded border border-charcoal-650 bg-charcoal-750",
+                copied
+                  ? "text-green-500"
+                  : "text-text-dimmed hover:border-charcoal-600 hover:bg-charcoal-700 hover:text-text-bright"
+              )}
+            >
+              {copied ? (
+                <ClipboardCheckIcon className="size-3.5" />
+              ) : (
+                <ClipboardIcon className="size-3.5" />
+              )}
+            </span>
+          }
+          content={copied ? "Copied!" : "Copy text"}
+          className="font-sans"
+          disableHoverableContent
+        />
+      </span>
+    </span>
+  );
+}

apps/webapp/app/components/runs/v3/PacketDisplay.tsx

@@ -0,0 +1,51 @@
+import { CloudArrowDownIcon } from "@heroicons/react/20/solid";
+import { CodeBlock } from "~/components/code/CodeBlock";
+import { LinkButton } from "~/components/primitives/Buttons";
+import { Paragraph } from "~/components/primitives/Paragraph";
+
+export function PacketDisplay({
+  data,
+  dataType,
+  title,
+}: {
+  data: string;
+  dataType: string;
+  title: string;
+}) {
+  switch (dataType) {
+    case "application/store": {
+      return (
+        <div className="flex flex-col">
+          <Paragraph variant="base/bright" className="w-full border-b border-grid-dimmed py-2.5">
+            {title}
+          </Paragraph>
+          <LinkButton LeadingIcon={CloudArrowDownIcon} to={data} variant="tertiary/medium" download>
+            Download
+          </LinkButton>
+        </div>
+      );
+    }
+    case "text/plain": {
+      return (
+        <CodeBlock
+          language="markdown"
+          rowTitle={title}
+          code={data}
+          maxLines={20}
+          showLineNumbers={false}
+        />
+      );
+    }
+    default: {
+      return (
+        <CodeBlock
+          language="json"
+          rowTitle={title}
+          code={data}
+          maxLines={20}
+          showLineNumbers={false}
+        />
+      );
+    }
+  }
+}

apps/webapp/app/components/runs/v3/RunFilters.tsx

@@ -61,6 +61,7 @@ import {
   TaskRunStatusCombo,
 } from "./TaskRunStatus";
 import { TaskTriggerSourceIcon } from "./TaskTriggerSource";
+import { StatusIcon } from "~/assets/icons/StatusIcon";
 
 export const TaskAttemptStatus = z.enum(allTaskRunStatuses);
 
@@ -148,11 +149,7 @@ const filterTypes = [
   {
     name: "statuses",
     title: "Status",
-    icon: (
-      <div className="flex size-4 items-center justify-center">
-        <div className="size-3 rounded-full border-2 border-text-dimmed" />
-      </div>
-    ),
+    icon: <StatusIcon className="size-4" />,
   },
   { name: "tasks", title: "Tasks", icon: <TaskIcon className="size-4" /> },
   { name: "tags", title: "Tags", icon: <TagIcon className="size-4" /> },

apps/webapp/app/components/runs/v3/RunIcon.tsx

@@ -13,6 +13,7 @@ import { tablerIcons } from "~/utils/tablerIcons";
 import tablerSpritePath from "~/components/primitives/tabler-sprite.svg";
 import { TaskCachedIcon } from "~/assets/icons/TaskCachedIcon";
 import { PauseIcon } from "~/assets/icons/PauseIcon";
+import { TriggerIcon } from "~/assets/icons/TriggerIcon";
 
 type TaskIconProps = {
   name: string | undefined;
@@ -65,6 +66,8 @@ export function RunIcon({ name, className, spanName }: TaskIconProps) {
       return <TagIcon className={cn(className, "text-text-dimmed")} />;
     case "queue":
       return <RectangleStackIcon className={cn(className, "text-purple-500")} />;
+    case "trigger":
+      return <TriggerIcon className={cn(className, "text-orange-500")} />;
     //log levels
     case "debug":
     case "log":