feat: Add workbench actions

assets/design-system/package.json

@@ -69,6 +69,7 @@
     "mermaid": "11.16.0",
     "react-animate-height": "3.2.4",
     "react-aria": "3.50.0",
+    "react-diff-viewer-continued": "4.4.0",
     "react-markdown": "9.1.0",
     "react-merge-refs": "2.1.1",
     "react-stately": "3.48.0",

assets/design-system/src/components/ChipList.tsx

@@ -63,6 +63,8 @@ function ChipList<TValue = string>({
       {values.length > limit && (
         <Chip
           {...props}
+          closeButton={false}
+          clickable={false}
           tooltip={
             <Flex
               gap="xsmall"

assets/src/components/utils/DiffViewer.tsx → assets/design-system/src/components/DiffViewer.tsx

@@ -1,26 +1,36 @@
+import { useMemo } from 'react'
 import ReactDiffViewer, {
-  ReactDiffViewerProps,
+  DiffMethod,
+  type ReactDiffViewerProps,
 } from 'react-diff-viewer-continued'
-import { useTheme } from 'styled-components'
-import { Card, CardProps, WrapWithIf } from '@pluralsh/design-system'
+import { merge } from 'lodash-es'
 import chroma from 'chroma-js'
-import { merge } from 'lodash'
-import { useMemo } from 'react'
+import { useTheme } from 'styled-components'
+
+import Card, { type CardProps } from './Card'
+import WrapWithIf from './WrapWithIf'
+
+export { DiffMethod }
+export type { ReactDiffViewerProps }
+
+const opacity = (color: string, amount: number) =>
+  chroma(color).alpha(amount).hex()
 
-const opacity = (color: string, opacity: number) => {
-  return chroma(color).alpha(opacity).hex()
+export type DiffViewerProps = Omit<
+  ReactDiffViewerProps,
+  'leftTitle' | 'rightTitle'
+> & {
+  asCard?: boolean
+  cardProps?: CardProps
 }
 
-export default function DiffViewer({
+export function DiffViewer({
   styles,
   asCard = true,
   cardProps,
   hideSummary = true,
   ...props
-}: Omit<ReactDiffViewerProps, 'leftTitle' | 'rightTitle'> & {
-  asCard?: boolean
-  cardProps?: CardProps
-}) {
+}: DiffViewerProps) {
   const theme = useTheme()
 
   const mergedStyles = useMemo(() => {
@@ -29,6 +39,7 @@ export default function DiffViewer({
       gutterBackground: 'transparent',
       codeFoldGutterBackground: 'transparent',
     }
+
     return merge(
       {
         content: {
@@ -97,3 +108,5 @@ export default function DiffViewer({
     </WrapWithIf>
   )
 }
+
+export default DiffViewer

assets/design-system/src/components/icons/GoogleCloudRunIcon.tsx

@@ -0,0 +1,42 @@
+import createIcon from './createIcon'
+
+const icon =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAERElEQVR4AZxVW0xcVRRd+9x7y2OAMsC0QAtCLZq2iUCT1sTQShsf1JjAD1/GtDb+NtH0o/Jh5Mf0A43xmWjU6GdRY6IQf7S2VFpSE5uY2DagplKttjyEeTN37tnuMzPMiymoO2fdu++5e691zt7nziiUNKbBUbZ6h9n+NzCxAFMpqjUChvDQ6eje+enIx8qOTioncnFdSIyJPfBytNvkFosUCTBpK9hOmkeI8BSI90vCvnUhMSbWIR4xucU7KRB4bASVFqkjDPTiPxozDtlw+gxHfmpOYJhVLBG5F4QTUkwZ+WEb+5JAUN6JFIdwIWNZgV4s1ViMZwi0M/Puf9yowwaOPVKO6tXklMDgIFuWY3crwtHVF+Ze7gB1PoLMw1cGbK5M+1jHCDjqJcJdhtOEpQTm9oT8DPWcTPgF2bGlhvDwLgvtAUJbA+HwbgsdjQpGOBu01qmDwvOL3aFa80pB6mU5qo/BR8xEPhIesL2O8OgegvaS6NgKPNmlsLdNob6KIKcnPzznEz2hWT1uuNVBe3GbBk4SIAXJxRhvKcK4uchokrVoL4GZWyuIxBJornHxkHRq51ZCmRTdxObDcAlOHrZjTUrxpuPy0JkfsOrHXeD3BYZSCqZcS2EXC6Ekfv4zDn+li74HFHrut+CXPpXYTbdm75j0j44LoWjItcRYCGtEE4TWgI25oId7Ag4G9lehfYuDfTssPN2zScpmobZCvp7CfBJ7VoEQKpwvfiIQATJg7i0NDg7srsRBQbPfgdYe3EQcXiIG1kkUGCGumPlNmZR2yrXEaKgmOaKM2TkXzX47BRMWXdGYvBbFR2eX8cX3YSwGRcTNiciCNLN6W1kWfyoJE4I1wxzHlnqC52ncXpbySFk2+xRm512MXgzhw7NBXLgWx3JUwxSIPVd2Ek3thBnfeco7o74Zql4EaEQQRpGZ5rXIMb25kISsCI21Fqam4/jg62V8PhXGL7ddJJKGOpdoypR0o1HP069cGKqalx4Ql7mVk/Jr/kkuLO1ZxHI0Y/jqhwhkE7g8E8f7Qj55PY6/I7LqQu50klzZ8z5zoskJELGSZzwIhFnjHfH/EGTHnaDGxNUV3Ljj4ob04NxPMfxaYtXZBOMQbslu3+qp8KcOT0pgeJg0kpHrHvhdWZQMEwkkPEIwsQkgB9EVRih291UjY6z5PcspuzpsOGUuJSB3nHspEFG2MyrqV8xzGgRl2VBOOUjZ2Nj4isf6jOFajc0KmHrF/5qb1Yw35GXesaWMSMUGIpTUsF5H3P7NcCFjOQGZuPTa9jgs9zxAX6LASEQc2cndReR7GvM893yKAzkrEID8Cfeu1M6y9l7QGq+CMcbA+CrIcsaVXTYOqHEhTAM8BqaRBLunpsrbZg0H8qxIADDN+fbF6unAj75T9ff5Bho6fP35COyq62/s3Nbf1NWaRmfrQOPMpaHLp3fMINNY5Nk/AAAA///Eup1SAAAABklEQVQDAKtD2E0fWLTJAAAAAElFTkSuQmCC'
+
+export default createIcon(({ size, color, fullColor }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    {fullColor ? (
+      <image
+        href={icon}
+        width="24"
+        height="24"
+      />
+    ) : (
+      <>
+        <mask
+          id="google-cloud-run-icon-mask"
+          maskUnits="userSpaceOnUse"
+          style={{ maskType: 'alpha' }}
+        >
+          <image
+            href={icon}
+            width="24"
+            height="24"
+          />
+        </mask>
+        <rect
+          width="24"
+          height="24"
+          fill={color}
+          mask="url(#google-cloud-run-icon-mask)"
+        />
+      </>
+    )}
+  </svg>
+))

assets/design-system/src/components/icons/LambdaIcon.tsx

@@ -0,0 +1,42 @@
+import createIcon from './createIcon'
+
+const icon =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAYCAYAAAARfGZ1AAAD5UlEQVR4AYxVXWhcVRD+5tx79yfZ/DSbRJv0oSi1SvWhUAoRlEqeJKKVmqIgIhRa9MmiIKKWa4sW9EUQrQiCPvkHPolCRXwUIS+C0FJ8qKBttbtpm2x2s/fnjN/Zzf6km11zdubOOTNzvpk7d85Zg9vG6mt3TkWnijeiN4sJZdrhydX49fGH9TiC27b0XfaANz3FQMjoZmTV89/BzEyggGAbw2zDp+XicbI/RnQvvsa29vU4FcaTdab1s0DPE+wnQJeh/KEBmBOLR/DLrgxt/0s94KiV1vzZ0qJ/o/xEYOQwwT8nSkJ2ZBjneUyv5lQhTjGIe8AlhJUTiOUD1BFeX7M2/ZABVtogKnuiqlnACfhtXZ9JD3i3nxA1Su1N5nipS58x4j2O8clcl27L6UBwt2MkHlqnXGLVlRIMxJh4sBboKBVujn5jILjbXAlkiPU9gC4Y1n0q8PACwsE9PxD8ajiTz3jRiyKyH+iCV3G9/hzi4hQGjL7gGsLssPU5Y8xJ7s+SOyQukExExj7k/DqGzbMtwRsbKnfkPZU3WJICtwjZkbrHBjOgOXIZyNCnZd8wNcWW4DT5ST5+mXKOOXqUjiwfrmuc5BSeiMzvTsZmcbRxwJxuE/eAa4hMrToxrZCXCNy6pHiI9EKQ6rwC/xLBBRB26nBqglexD60EaOrQJnBlnSv1wliQM19CZIxuZqMFK8bSulIuEfBXMoPRCvEtdA7ZsWFd7A2wCRysc+BnF9lqB7m1ZXN3zaeeP/qdO7Ue9Auo1Gl3RB/ZG9eDu7Fvd+stnb7BNDYkmJdfL9R2eoK3AWk6KlIVlH1j35fwsjtM8IbN98z8LwCWDCh8tfgKuVtZBVgqtEcbHBgveGlwViGjbavoLVF9Cli+0tYtlapE+IzrZvZckHbGa+YehPA0hHElcrIBvsR/lyiWRyGyADS+vFImfJz72yv/JuFGllTKN0gjCK9iVLh0xNsZOVE5hGi6mNiJ+fi+4nEkxb2NKA/MTOwR432sAHvX+SPl+17KGH2X923U0HQ9hmreRdr/pCohAwJRg1OJl15QmG+5fC8xeszgwOSQWHmFDnkArjtSprKSpHqM5aiGYSdr2pt08J91EXOSi8Z3oHRUUJEdnBR4qHgfmUMmraQshTwDhbufLY1Vq/gkHywvSYhmZlR2kxxF6kv8O7Mnd1uIonxrQY1aa1S8Z6m6qoIrClxj1j9mvJG3+gFzU5PKNx2A6/mYQVzpqjSsCPCDGPtkPfEXTHC69FjmTOmu7OnSLvJscKZ8RMJm29G5PxUR21g+YmJ/0OkcO+PpwNj7/Yulw0G4fH7k7LXr/wEAAP//oYg0lgAAAAZJREFUAwB8uWLGeMjfdQAAAABJRU5ErkJggg=='
+
+export default createIcon(({ size, color, fullColor }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 23 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    {fullColor ? (
+      <image
+        href={icon}
+        width="23"
+        height="24"
+      />
+    ) : (
+      <>
+        <mask
+          id="lambda-icon-mask"
+          maskUnits="userSpaceOnUse"
+          style={{ maskType: 'alpha' }}
+        >
+          <image
+            href={icon}
+            width="23"
+            height="24"
+          />
+        </mask>
+        <rect
+          width="23"
+          height="24"
+          fill={color}
+          mask="url(#lambda-icon-mask)"
+        />
+      </>
+    )}
+  </svg>
+))

assets/design-system/src/components/icons/LightningIcon.tsx

@@ -3,21 +3,17 @@ import createIcon from './createIcon'
 export default createIcon(({ size, color }) => (
   <svg
     width={size}
+    height={size}
     viewBox="0 0 16 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M6.7002 15.5L11.2002 8.00005L8.3002 6.30005"
-      stroke={color}
-      strokeMiterlimit="10"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M9.2002 0.5L4.7002 8L7.6002 9.7"
-      stroke={color}
-      strokeMiterlimit="10"
-      strokeLinejoin="round"
+      d="M2.31845 13.9602C2.21613 13.917 2.1311 13.841 2.07677 13.7441C2.02245 13.6472 2.00193 13.535 2.01845 13.4252L2.92845 7.50018H0.513448C0.436885 7.50224 0.360872 7.48668 0.291275 7.45471C0.221677 7.42274 0.160355 7.3752 0.11204 7.31578C0.0637241 7.25635 0.0297068 7.18661 0.0126126 7.11196C-0.00448168 7.0373 -0.00419597 6.95971 0.0134475 6.88518L1.51345 0.385179C1.53984 0.273314 1.60397 0.173958 1.69504 0.103835C1.78611 0.0337133 1.89855 -0.00289298 2.01345 0.000178706H7.01345C7.08815 -7.52801e-05 7.16195 0.0164105 7.22944 0.0484249C7.29693 0.0804392 7.35639 0.127168 7.40345 0.185179C7.45117 0.243844 7.48497 0.312572 7.50229 0.386187C7.51961 0.459802 7.52001 0.536388 7.50345 0.610179L6.63845 4.50018H9.01345C9.10716 4.49999 9.19904 4.52614 9.2786 4.57565C9.35817 4.62516 9.42222 4.69603 9.46345 4.78018C9.49928 4.86095 9.51307 4.94977 9.5034 5.0376C9.49374 5.12543 9.46098 5.20913 9.40845 5.28018L2.90845 13.7802C2.86452 13.8453 2.80586 13.8992 2.73724 13.9374C2.66861 13.9756 2.59194 13.9971 2.51345 14.0002C2.44654 13.9989 2.38044 13.9854 2.31845 13.9602V13.9602ZM5.38845 5.50018L6.38845 1.00018H2.41345L1.14345 6.50018H4.09845L3.30345 11.6402L8.01345 5.50018H5.38845Z"
+      transform="translate(3.4864 1)"
+      fill={color}
+      fillRule="evenodd"
+      clipRule="evenodd"
     />
   </svg>
 ))

assets/design-system/src/components/icons/MicrosoftActionsIcon.tsx

@@ -0,0 +1,42 @@
+import createIcon from './createIcon'
+
+const icon =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAVCAYAAABc6S4mAAACP0lEQVR4AaSVsW4TQRCGZ9e5hiYpAuItkKCJkyI2JQWPAUKCltZ2QUUJEgqPQY1wIoGDQATBYyCEoEgi4rvd7Le6ueyd75KTYvnP7s78/z+j2fPFSs/P8setaf7z5jzi6+ZH92H9myI/2HzYZdO7gBGZiDcjYE6KHe/kLpDwWdv9/S4srd9eBZbfb48q9dKJgDLgBtms3LYuvQqYQTFRtTkudCt+YF5f1j3EzgLDt4v59t6naeye0cAGZffGytHa+O+zrTeHI7ik2rBSIAr2Ft54f7B4vDOtiU4uutfRfH4y3Ic7DBq0NX441ApAMNbPjfiZmtfHkweJrIwGLhq0eERS+acqQAICRATka+MpR0PcFP5p8X7dK/L5xis0aPHACx6IBZg1CQgQSYC0e1l6kcxKDYGkdxG2ghYPvPAkZtl4MRMSEAhWSC/3xkD8RlZBOXoXesYDLzzxtt6YXZIkWFN4kVmKKse4Aroe09TLHj7aHouRfR61dHaYZXd+TVMQA/wW0tEQS4EXnhSyJGKRsGF2zSIhHL/xwtmFR9UU7sje/3ePYxOY89iqZywAiQCz6yqiF26Oc2nOHT2N8VvAnM6JgaoABxKdRbjw0H3b3DGnMbR44KWoFSAIASIChMTieMKl2tM8vh6IKeDARYNW47quFCABEQF7EMdz6r50zd07M0YDt4nWApAQ8J6J3Z/5kTj7gngTcEAzrufOAkpg9bl7edVrGV4bri7w/+xBtvXneZu4T+zSAvyvvY45DZwDAAD//45G9PoAAAAGSURBVAMARbFYWb7haUoAAAAASUVORK5CYII='
+
+export default createIcon(({ size, color, fullColor }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 21"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    {fullColor ? (
+      <image
+        href={icon}
+        width="24"
+        height="21"
+      />
+    ) : (
+      <>
+        <mask
+          id="microsoft-actions-icon-mask"
+          maskUnits="userSpaceOnUse"
+          style={{ maskType: 'alpha' }}
+        >
+          <image
+            href={icon}
+            width="24"
+            height="21"
+          />
+        </mask>
+        <rect
+          width="24"
+          height="21"
+          fill={color}
+          mask="url(#microsoft-actions-icon-mask)"
+        />
+      </>
+    )}
+  </svg>
+))

assets/design-system/src/icons.ts

@@ -134,6 +134,7 @@ export { default as GitPullIcon } from './components/icons/GitPullIcon'
 export { default as GKEIcon } from './components/icons/GKEIcon'
 export { default as GlobeIcon } from './components/icons/GlobeIcon'
 export { default as GoogleCloudLogoIcon } from './components/icons/GoogleCloudLogoIcon'
+export { default as GoogleCloudRunIcon } from './components/icons/GoogleCloudRunIcon'
 export { default as GoogleLogoIcon } from './components/icons/GoogleLogoIcon'
 export { default as GrafanaLogoIcon } from './components/icons/GrafanaLogoIcon'
 export { default as GraphIcon } from './components/icons/GraphIcon'
@@ -161,6 +162,7 @@ export { default as KeyIcon } from './components/icons/KeyIcon'
 export { default as KeyPairIcon } from './components/icons/KeyPairIcon'
 export { default as KubernetesIcon } from './components/icons/Kubernetes'
 export { default as KubernetesAltIcon } from './components/icons/KubernetesAltIcon'
+export { default as LambdaIcon } from './components/icons/LambdaIcon'
 export { default as LifePreserverIcon } from './components/icons/LifePreserverIcon'
 export { default as LightningIcon } from './components/icons/LightningIcon'
 export { default as LinearLogoIcon } from './components/icons/LinearLogoIcon'
@@ -180,6 +182,7 @@ export { default as MarketPlusIcon } from './components/icons/MarketPlusIcon'
 export { default as McpLogoIcon } from './components/icons/McpLogoIcon'
 export { default as MegaphoneIcon } from './components/icons/MegaphoneIcon'
 export { default as MessagesIcon } from './components/icons/MessagesIcon'
+export { default as MicrosoftActionsIcon } from './components/icons/MicrosoftActionsIcon'
 export { default as MinusIcon } from './components/icons/MinusIcon'
 export { default as MinimizeIcon } from './components/icons/MinimizeIcon'
 export { default as MoonIcon } from './components/icons/MoonIcon'

assets/design-system/src/index.ts

@@ -51,6 +51,11 @@ export { default as CodeEditor } from './components/CodeEditor'
 export { default as Codeline } from './components/Codeline'
 export { ComboBox } from './components/ComboBox'
 export { default as Date } from './components/Date'
+export {
+  default as DiffViewer,
+  DiffMethod,
+  type DiffViewerProps,
+} from './components/DiffViewer'
 export { default as Divider } from './components/Divider'
 export { default as EmptyState } from './components/EmptyState'
 export { default as Flex } from './components/Flex'

assets/design-system/src/stories/DiffViewer.stories.tsx

@@ -0,0 +1,62 @@
+import { DiffMethod, DiffViewer } from '..'
+
+const OLD_VALUE = `apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: demo
+  namespace: default
+data:
+  feature: enabled
+`
+
+const NEW_VALUE = `apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: demo
+  namespace: default
+data:
+  feature: disabled
+  extra: true
+`
+
+export default {
+  title: 'DiffViewer',
+  component: DiffViewer,
+  argTypes: {
+    splitView: {
+      control: 'boolean',
+    },
+    asCard: {
+      control: 'boolean',
+    },
+    hideLineNumbers: {
+      control: 'boolean',
+    },
+  },
+}
+
+function Template(args: any) {
+  return (
+    <div style={{ maxWidth: 720 }}>
+      <DiffViewer {...args} />
+    </div>
+  )
+}
+
+export const Default = Template.bind({})
+Default.args = {
+  oldValue: OLD_VALUE,
+  newValue: NEW_VALUE,
+  splitView: false,
+  compareMethod: DiffMethod.LINES,
+  asCard: true,
+}
+
+export const DeletedFile = Template.bind({})
+DeletedFile.args = {
+  oldValue: OLD_VALUE,
+  newValue: '',
+  splitView: false,
+  compareMethod: DiffMethod.LINES,
+  asCard: true,
+}

assets/package.json

@@ -104,7 +104,6 @@
     "query-string": "8.2.0",
     "react": "19.2.7",
     "react-diff-view": "3.3.3",
-    "react-diff-viewer-continued": "4.4.0",
     "react-dom": "19.2.7",
     "react-dropzone": "14.4.1",
     "react-error-boundary": "4.1.2",

assets/src/components/ai/insights/PrEvidenceDetails.tsx

@@ -3,15 +3,15 @@ import {
   AccordionItem,
   CloseIcon,
   CaretDownIcon,
+  DiffMethod,
+  DiffViewer,
   FileIcon,
   Flex,
   IconFrame,
   PrOpenIcon,
 } from '@pluralsh/design-system'
-import DiffViewer from 'components/utils/DiffViewer'
 import { StackedText } from 'components/utils/table/StackedText'
 import { useMemo } from 'react'
-import { DiffMethod } from 'react-diff-viewer-continued'
 import styled from 'styled-components'
 import pluralize from 'pluralize'
 import { getURLPath } from 'utils/url'

assets/src/components/awaiting-review/AwaitingReviewAgentRunItem.tsx

@@ -82,6 +82,7 @@ export function AwaitingReviewAgentRunItem({
             workbenchId={workbench.id}
             workbenchName={workbench.name}
             workbenchJobId={workbenchJob.id}
+            jobInsertedAt={workbenchJob.insertedAt}
             onNavigate={onNavigate}
             css={{ flexShrink: 0 }}
           />

assets/src/components/awaiting-review/AwaitingReviewLauncher.tsx

@@ -47,7 +47,8 @@ export default function AwaitingReviewLauncher() {
     setOpen(false)
   })
 
-  const { stacks, agentRuns, count, loading, error } = useAwaitingReview()
+  const { stacks, agentRuns, activities, count, loading, error } =
+    useAwaitingReview()
 
   useLayoutEffect(() => {
     if (!open) return
@@ -95,6 +96,7 @@ export default function AwaitingReviewLauncher() {
                 <AwaitingReviewPanel
                   stacks={stacks}
                   agentRuns={agentRuns}
+                  activities={activities}
                   loading={loading}
                   error={error}
                   onClose={() => setOpen(false)}