@shipfox/client-triggers 0.2.0

package/dist/components/trigger-event-detail.js

@@ -0,0 +1,376 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge } from '@shipfox/react-ui/badge';
+import { Button } from '@shipfox/react-ui/button';
+import { Callout } from '@shipfox/react-ui/callout';
+import { CodeBlock, CodeBlockBody, CodeBlockContent, CodeBlockCopyButton, CodeBlockFilename, CodeBlockFiles, CodeBlockHeader, CodeBlockItem } from '@shipfox/react-ui/code-block';
+import { EmptyState } from '@shipfox/react-ui/empty-state';
+import { Icon } from '@shipfox/react-ui/icon';
+import { RelativeTime } from '@shipfox/react-ui/relative-time';
+import { Skeleton } from '@shipfox/react-ui/skeleton';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@shipfox/react-ui/tooltip';
+import { Code, Text } from '@shipfox/react-ui/typography';
+import { cn } from '@shipfox/react-ui/utils';
+import { Link } from '@tanstack/react-router';
+import { useMemo } from 'react';
+import { useTriggerEventQuery } from '#hooks/api/trigger-events.js';
+import { triggerEventResult } from './trigger-event-result.js';
+import { TriggerSourceIcon } from './trigger-source-icon.js';
+const PANEL_CLASS = 'min-h-0 rounded-8 border border-border-neutral-base bg-background-neutral-base';
+export function TriggerEventDetail({ workspaceId, eventId, onBack }) {
+    const query = useTriggerEventQuery(eventId);
+    if (!eventId) return /*#__PURE__*/ _jsx(TriggerEventDetailPlaceholder, {});
+    if (query.data) {
+        return /*#__PURE__*/ _jsx(TriggerEventDetailView, {
+            workspaceId: workspaceId,
+            event: query.data,
+            onBack: onBack
+        });
+    }
+    if (query.isError) return /*#__PURE__*/ _jsx(TriggerEventDetailError, {
+        onBack: onBack,
+        onRetry: ()=>query.refetch()
+    });
+    return /*#__PURE__*/ _jsx(TriggerEventDetailLoading, {
+        onBack: onBack
+    });
+}
+export function TriggerEventDetailView({ workspaceId, event, onBack }) {
+    const result = triggerEventResult(event);
+    const eventLabel = triggerEventDisplayLabel(event);
+    const fullEventLabel = triggerEventFullLabel(event);
+    const formattedPayload = useMemo(()=>JSON.stringify(event.payload ?? null, null, 2) ?? 'null', [
+        event.payload
+    ]);
+    return /*#__PURE__*/ _jsxs("aside", {
+        "aria-label": "Event details",
+        className: cn(PANEL_CLASS, 'flex min-h-0 flex-col overflow-hidden'),
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex shrink-0 flex-col gap-12 border-b border-border-neutral-base p-16",
+                children: [
+                    /*#__PURE__*/ _jsx(Button, {
+                        type: "button",
+                        variant: "transparentMuted",
+                        size: "sm",
+                        iconLeft: "arrowLeftLine",
+                        className: "self-start min-[900px]:hidden",
+                        onClick: onBack,
+                        children: "Back to events"
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex min-w-0 items-start justify-between gap-12",
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex min-w-0 flex-col gap-4",
+                                children: [
+                                    /*#__PURE__*/ _jsxs(Tooltip, {
+                                        children: [
+                                            /*#__PURE__*/ _jsx(TooltipTrigger, {
+                                                asChild: true,
+                                                children: /*#__PURE__*/ _jsxs("button", {
+                                                    type: "button",
+                                                    "aria-label": fullEventLabel,
+                                                    className: "flex min-w-0 items-center gap-6 rounded-6 border-0 bg-transparent p-0 text-left outline-none focus-visible:shadow-button-neutral-focus",
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx(TriggerSourceIcon, {
+                                                            provider: event.provider,
+                                                            source: event.source,
+                                                            "aria-hidden": "true",
+                                                            className: "size-16 shrink-0 text-foreground-neutral-muted"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(Code, {
+                                                            as: "span",
+                                                            variant: "label",
+                                                            className: "truncate text-foreground-neutral-base",
+                                                            children: eventLabel
+                                                        })
+                                                    ]
+                                                })
+                                            }),
+                                            /*#__PURE__*/ _jsx(TooltipContent, {
+                                                children: /*#__PURE__*/ _jsx(Code, {
+                                                    as: "span",
+                                                    variant: "label",
+                                                    className: "block max-w-[360px] break-words",
+                                                    children: fullEventLabel
+                                                })
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        size: "xs",
+                                        className: "truncate text-foreground-neutral-muted",
+                                        children: /*#__PURE__*/ _jsx(RelativeTime, {
+                                            value: event.received_at
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(Badge, {
+                                variant: result.badge,
+                                size: "xs",
+                                children: result.label
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex min-h-0 flex-1 flex-col gap-20 overflow-y-auto p-16 scrollbar",
+                children: [
+                    /*#__PURE__*/ _jsx(EventRuns, {
+                        workspaceId: workspaceId,
+                        event: event
+                    }),
+                    /*#__PURE__*/ _jsx(EventPayload, {
+                        payload: formattedPayload
+                    })
+                ]
+            })
+        ]
+    });
+}
+function triggerEventDisplayLabel(event) {
+    return event.event || event.source;
+}
+function triggerEventFullLabel(event) {
+    return [
+        event.source,
+        event.event
+    ].filter(Boolean).join(' · ');
+}
+function TriggerEventDetailPlaceholder() {
+    return /*#__PURE__*/ _jsx("aside", {
+        "aria-label": "Event details",
+        className: cn(PANEL_CLASS, 'hidden min-h-[240px] items-center justify-center p-24 min-[900px]:flex'),
+        children: /*#__PURE__*/ _jsx(EmptyState, {
+            icon: "pulseLine",
+            variant: "compact",
+            title: "No event selected"
+        })
+    });
+}
+function TriggerEventDetailLoading({ onBack }) {
+    return /*#__PURE__*/ _jsxs("aside", {
+        "aria-label": "Event details",
+        className: cn(PANEL_CLASS, 'flex min-h-[320px] flex-col gap-16 p-16'),
+        children: [
+            /*#__PURE__*/ _jsx(Button, {
+                type: "button",
+                variant: "transparentMuted",
+                size: "sm",
+                iconLeft: "arrowLeftLine",
+                className: "self-start min-[900px]:hidden",
+                onClick: onBack,
+                children: "Back to events"
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-col gap-8",
+                children: [
+                    /*#__PURE__*/ _jsx(Skeleton, {
+                        className: "h-16 w-160"
+                    }),
+                    /*#__PURE__*/ _jsx(Skeleton, {
+                        className: "h-12 w-120"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Skeleton, {
+                className: "h-96"
+            }),
+            /*#__PURE__*/ _jsx(Skeleton, {
+                className: "h-160"
+            })
+        ]
+    });
+}
+function TriggerEventDetailError({ onBack, onRetry }) {
+    return /*#__PURE__*/ _jsxs("aside", {
+        "aria-label": "Event details",
+        className: cn(PANEL_CLASS, 'flex flex-col gap-16 p-16'),
+        children: [
+            /*#__PURE__*/ _jsx(Button, {
+                type: "button",
+                variant: "transparentMuted",
+                size: "sm",
+                iconLeft: "arrowLeftLine",
+                className: "self-start min-[900px]:hidden",
+                onClick: onBack,
+                children: "Back to events"
+            }),
+            /*#__PURE__*/ _jsx(Callout, {
+                role: "alert",
+                type: "error",
+                children: /*#__PURE__*/ _jsxs("div", {
+                    className: "flex items-center justify-between gap-12",
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            size: "sm",
+                            children: "Event detail could not be loaded."
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            type: "button",
+                            variant: "secondary",
+                            size: "xs",
+                            onClick: onRetry,
+                            children: "Retry"
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+function EventRuns({ workspaceId, event }) {
+    if (event.decisions.length === 0) {
+        if (event.outcome === 'discarded') {
+            return /*#__PURE__*/ _jsx(Text, {
+                size: "sm",
+                className: "text-foreground-neutral-muted",
+                children: "No workflows are subscribed to this event."
+            });
+        }
+        return null;
+    }
+    return /*#__PURE__*/ _jsxs("section", {
+        "aria-labelledby": "trigger-event-runs-heading",
+        className: "flex flex-col gap-6",
+        children: [
+            /*#__PURE__*/ _jsx(Text, {
+                id: "trigger-event-runs-heading",
+                size: "sm",
+                bold: true,
+                children: "Matched workflows"
+            }),
+            /*#__PURE__*/ _jsx("ul", {
+                className: "-mx-8 flex flex-col gap-1",
+                children: event.decisions.map((decision)=>/*#__PURE__*/ _jsx(DecisionRow, {
+                        workspaceId: workspaceId,
+                        decision: decision
+                    }, decision.id))
+            })
+        ]
+    });
+}
+function DecisionRow({ workspaceId, decision }) {
+    if (decision.decision !== 'triggered' || !decision.run_id || !decision.run_name) {
+        return /*#__PURE__*/ _jsxs("li", {
+            className: "flex min-w-0 items-start gap-8 rounded-6 px-8 py-6",
+            children: [
+                /*#__PURE__*/ _jsx(Icon, {
+                    name: "cornerDownRightLine",
+                    className: "mt-2 size-14 shrink-0 text-foreground-neutral-disabled",
+                    "aria-hidden": "true"
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex min-w-0 flex-col gap-1",
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            size: "sm",
+                            className: "min-w-0 truncate text-foreground-neutral-base",
+                            children: decision.subscription_name
+                        }),
+                        decision.reason ? /*#__PURE__*/ _jsx(Text, {
+                            size: "xs",
+                            className: "text-foreground-highlight-error",
+                            children: decision.reason
+                        }) : /*#__PURE__*/ _jsx(Text, {
+                            size: "xs",
+                            className: "text-foreground-neutral-disabled",
+                            children: "No run created"
+                        })
+                    ]
+                })
+            ]
+        });
+    }
+    return /*#__PURE__*/ _jsx("li", {
+        children: /*#__PURE__*/ _jsxs(Link, {
+            to: "/workspaces/$wid/projects/$pid/runs/$workflowRunId",
+            params: {
+                wid: workspaceId,
+                pid: decision.project_id,
+                workflowRunId: decision.run_id
+            },
+            className: "flex min-w-0 items-start gap-8 rounded-6 px-8 py-6 transition-colors hover:bg-background-components-hover focus-visible:shadow-border-interactive-with-active focus-visible:outline-none",
+            children: [
+                /*#__PURE__*/ _jsx(Icon, {
+                    name: "cornerDownRightLine",
+                    className: "mt-3 size-14 shrink-0 text-foreground-neutral-muted",
+                    "aria-hidden": "true"
+                }),
+                /*#__PURE__*/ _jsxs("span", {
+                    className: "flex min-w-0 flex-col gap-1",
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            as: "span",
+                            size: "sm",
+                            className: "min-w-0 truncate text-foreground-neutral-base",
+                            children: decision.subscription_name
+                        }),
+                        /*#__PURE__*/ _jsx(Code, {
+                            as: "span",
+                            variant: "label",
+                            className: "truncate text-foreground-neutral-muted",
+                            children: decision.run_name
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+function EventPayload({ payload }) {
+    const data = [
+        {
+            language: 'json',
+            filename: 'payload.json',
+            code: payload
+        }
+    ];
+    return /*#__PURE__*/ _jsxs("section", {
+        "aria-labelledby": "trigger-event-payload-heading",
+        className: "flex flex-col gap-6",
+        children: [
+            /*#__PURE__*/ _jsx(Text, {
+                id: "trigger-event-payload-heading",
+                size: "sm",
+                bold: true,
+                children: "Payload"
+            }),
+            /*#__PURE__*/ _jsxs(CodeBlock, {
+                data: data,
+                className: "flex h-auto max-h-[min(360px,45vh)] flex-col rounded-8 bg-background-contrast-base shadow-none",
+                children: [
+                    /*#__PURE__*/ _jsxs(CodeBlockHeader, {
+                        className: "shrink-0 border-b border-border-contrast-base bg-background-contrast-base px-10 py-6",
+                        children: [
+                            /*#__PURE__*/ _jsx(CodeBlockFiles, {
+                                children: (item)=>/*#__PURE__*/ _jsx(CodeBlockFilename, {
+                                        value: item.filename,
+                                        children: item.filename
+                                    })
+                            }),
+                            /*#__PURE__*/ _jsx(CodeBlockCopyButton, {})
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(CodeBlockBody, {
+                        className: "min-h-0 overflow-auto scrollbar",
+                        children: (item)=>/*#__PURE__*/ _jsx(CodeBlockItem, {
+                                value: item.filename,
+                                lineNumbers: false,
+                                className: "px-0 pb-0 [&>div]:rounded-none [&>div]:border-0 [&>div]:bg-background-contrast-base [&>div]:dark:bg-background-contrast-base [&_code]:!text-foreground-neutral-on-color",
+                                children: /*#__PURE__*/ _jsx(CodeBlockContent, {
+                                    language: "json",
+                                    syntaxHighlighting: false,
+                                    children: item.code
+                                })
+                            })
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=trigger-event-detail.js.map

package/dist/components/trigger-event-detail.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/trigger-event-detail.tsx"],"sourcesContent":["import type {TriggerDecisionDto, TriggerEventDetailResponseDto} from '@shipfox/api-triggers-dto';\nimport {Badge} from '@shipfox/react-ui/badge';\nimport {Button} from '@shipfox/react-ui/button';\nimport {Callout} from '@shipfox/react-ui/callout';\nimport {\n  CodeBlock,\n  CodeBlockBody,\n  CodeBlockContent,\n  CodeBlockCopyButton,\n  CodeBlockFilename,\n  CodeBlockFiles,\n  CodeBlockHeader,\n  CodeBlockItem,\n} from '@shipfox/react-ui/code-block';\nimport {EmptyState} from '@shipfox/react-ui/empty-state';\nimport {Icon} from '@shipfox/react-ui/icon';\nimport {RelativeTime} from '@shipfox/react-ui/relative-time';\nimport {Skeleton} from '@shipfox/react-ui/skeleton';\nimport {Tooltip, TooltipContent, TooltipTrigger} from '@shipfox/react-ui/tooltip';\nimport {Code, Text} from '@shipfox/react-ui/typography';\nimport {cn} from '@shipfox/react-ui/utils';\nimport {Link} from '@tanstack/react-router';\nimport {useMemo} from 'react';\nimport {useTriggerEventQuery} from '#hooks/api/trigger-events.js';\nimport {triggerEventResult} from './trigger-event-result.js';\nimport {TriggerSourceIcon} from './trigger-source-icon.js';\n\nconst PANEL_CLASS =\n  'min-h-0 rounded-8 border border-border-neutral-base bg-background-neutral-base';\n\nexport interface TriggerEventDetailProps {\n  workspaceId: string;\n  eventId?: string | undefined;\n  onBack: () => void;\n}\n\nexport function TriggerEventDetail({workspaceId, eventId, onBack}: TriggerEventDetailProps) {\n  const query = useTriggerEventQuery(eventId);\n\n  if (!eventId) return <TriggerEventDetailPlaceholder />;\n  if (query.data) {\n    return <TriggerEventDetailView workspaceId={workspaceId} event={query.data} onBack={onBack} />;\n  }\n  if (query.isError)\n    return <TriggerEventDetailError onBack={onBack} onRetry={() => query.refetch()} />;\n  return <TriggerEventDetailLoading onBack={onBack} />;\n}\n\nexport function TriggerEventDetailView({\n  workspaceId,\n  event,\n  onBack,\n}: {\n  workspaceId: string;\n  event: TriggerEventDetailResponseDto;\n  onBack: () => void;\n}) {\n  const result = triggerEventResult(event);\n  const eventLabel = triggerEventDisplayLabel(event);\n  const fullEventLabel = triggerEventFullLabel(event);\n  const formattedPayload = useMemo(\n    () => JSON.stringify(event.payload ?? null, null, 2) ?? 'null',\n    [event.payload],\n  );\n\n  return (\n    <aside\n      aria-label=\"Event details\"\n      className={cn(PANEL_CLASS, 'flex min-h-0 flex-col overflow-hidden')}\n    >\n      <div className=\"flex shrink-0 flex-col gap-12 border-b border-border-neutral-base p-16\">\n        <Button\n          type=\"button\"\n          variant=\"transparentMuted\"\n          size=\"sm\"\n          iconLeft=\"arrowLeftLine\"\n          className=\"self-start min-[900px]:hidden\"\n          onClick={onBack}\n        >\n          Back to events\n        </Button>\n        <div className=\"flex min-w-0 items-start justify-between gap-12\">\n          <div className=\"flex min-w-0 flex-col gap-4\">\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <button\n                  type=\"button\"\n                  aria-label={fullEventLabel}\n                  className=\"flex min-w-0 items-center gap-6 rounded-6 border-0 bg-transparent p-0 text-left outline-none focus-visible:shadow-button-neutral-focus\"\n                >\n                  <TriggerSourceIcon\n                    provider={event.provider}\n                    source={event.source}\n                    aria-hidden=\"true\"\n                    className=\"size-16 shrink-0 text-foreground-neutral-muted\"\n                  />\n                  <Code as=\"span\" variant=\"label\" className=\"truncate text-foreground-neutral-base\">\n                    {eventLabel}\n                  </Code>\n                </button>\n              </TooltipTrigger>\n              <TooltipContent>\n                <Code as=\"span\" variant=\"label\" className=\"block max-w-[360px] break-words\">\n                  {fullEventLabel}\n                </Code>\n              </TooltipContent>\n            </Tooltip>\n            <Text size=\"xs\" className=\"truncate text-foreground-neutral-muted\">\n              <RelativeTime value={event.received_at} />\n            </Text>\n          </div>\n          <Badge variant={result.badge} size=\"xs\">\n            {result.label}\n          </Badge>\n        </div>\n      </div>\n\n      <div className=\"flex min-h-0 flex-1 flex-col gap-20 overflow-y-auto p-16 scrollbar\">\n        <EventRuns workspaceId={workspaceId} event={event} />\n        <EventPayload payload={formattedPayload} />\n      </div>\n    </aside>\n  );\n}\n\nfunction triggerEventDisplayLabel(event: Pick<TriggerEventDetailResponseDto, 'event' | 'source'>) {\n  return event.event || event.source;\n}\n\nfunction triggerEventFullLabel(event: Pick<TriggerEventDetailResponseDto, 'event' | 'source'>) {\n  return [event.source, event.event].filter(Boolean).join(' · ');\n}\n\nfunction TriggerEventDetailPlaceholder() {\n  return (\n    <aside\n      aria-label=\"Event details\"\n      className={cn(\n        PANEL_CLASS,\n        'hidden min-h-[240px] items-center justify-center p-24 min-[900px]:flex',\n      )}\n    >\n      <EmptyState icon=\"pulseLine\" variant=\"compact\" title=\"No event selected\" />\n    </aside>\n  );\n}\n\nfunction TriggerEventDetailLoading({onBack}: {onBack: () => void}) {\n  return (\n    <aside\n      aria-label=\"Event details\"\n      className={cn(PANEL_CLASS, 'flex min-h-[320px] flex-col gap-16 p-16')}\n    >\n      <Button\n        type=\"button\"\n        variant=\"transparentMuted\"\n        size=\"sm\"\n        iconLeft=\"arrowLeftLine\"\n        className=\"self-start min-[900px]:hidden\"\n        onClick={onBack}\n      >\n        Back to events\n      </Button>\n      <div className=\"flex flex-col gap-8\">\n        <Skeleton className=\"h-16 w-160\" />\n        <Skeleton className=\"h-12 w-120\" />\n      </div>\n      <Skeleton className=\"h-96\" />\n      <Skeleton className=\"h-160\" />\n    </aside>\n  );\n}\n\nfunction TriggerEventDetailError({onBack, onRetry}: {onBack: () => void; onRetry: () => void}) {\n  return (\n    <aside aria-label=\"Event details\" className={cn(PANEL_CLASS, 'flex flex-col gap-16 p-16')}>\n      <Button\n        type=\"button\"\n        variant=\"transparentMuted\"\n        size=\"sm\"\n        iconLeft=\"arrowLeftLine\"\n        className=\"self-start min-[900px]:hidden\"\n        onClick={onBack}\n      >\n        Back to events\n      </Button>\n      <Callout role=\"alert\" type=\"error\">\n        <div className=\"flex items-center justify-between gap-12\">\n          <Text size=\"sm\">Event detail could not be loaded.</Text>\n          <Button type=\"button\" variant=\"secondary\" size=\"xs\" onClick={onRetry}>\n            Retry\n          </Button>\n        </div>\n      </Callout>\n    </aside>\n  );\n}\n\nfunction EventRuns({\n  workspaceId,\n  event,\n}: {\n  workspaceId: string;\n  event: TriggerEventDetailResponseDto;\n}) {\n  if (event.decisions.length === 0) {\n    if (event.outcome === 'discarded') {\n      return (\n        <Text size=\"sm\" className=\"text-foreground-neutral-muted\">\n          No workflows are subscribed to this event.\n        </Text>\n      );\n    }\n    return null;\n  }\n\n  return (\n    <section aria-labelledby=\"trigger-event-runs-heading\" className=\"flex flex-col gap-6\">\n      <Text id=\"trigger-event-runs-heading\" size=\"sm\" bold>\n        Matched workflows\n      </Text>\n      <ul className=\"-mx-8 flex flex-col gap-1\">\n        {event.decisions.map((decision) => (\n          <DecisionRow key={decision.id} workspaceId={workspaceId} decision={decision} />\n        ))}\n      </ul>\n    </section>\n  );\n}\n\nfunction DecisionRow({workspaceId, decision}: {workspaceId: string; decision: TriggerDecisionDto}) {\n  if (decision.decision !== 'triggered' || !decision.run_id || !decision.run_name) {\n    return (\n      <li className=\"flex min-w-0 items-start gap-8 rounded-6 px-8 py-6\">\n        <Icon\n          name=\"cornerDownRightLine\"\n          className=\"mt-2 size-14 shrink-0 text-foreground-neutral-disabled\"\n          aria-hidden=\"true\"\n        />\n        <div className=\"flex min-w-0 flex-col gap-1\">\n          <Text size=\"sm\" className=\"min-w-0 truncate text-foreground-neutral-base\">\n            {decision.subscription_name}\n          </Text>\n          {decision.reason ? (\n            <Text size=\"xs\" className=\"text-foreground-highlight-error\">\n              {decision.reason}\n            </Text>\n          ) : (\n            <Text size=\"xs\" className=\"text-foreground-neutral-disabled\">\n              No run created\n            </Text>\n          )}\n        </div>\n      </li>\n    );\n  }\n\n  return (\n    <li>\n      <Link\n        to=\"/workspaces/$wid/projects/$pid/runs/$workflowRunId\"\n        params={{wid: workspaceId, pid: decision.project_id, workflowRunId: decision.run_id}}\n        className=\"flex min-w-0 items-start gap-8 rounded-6 px-8 py-6 transition-colors hover:bg-background-components-hover focus-visible:shadow-border-interactive-with-active focus-visible:outline-none\"\n      >\n        <Icon\n          name=\"cornerDownRightLine\"\n          className=\"mt-3 size-14 shrink-0 text-foreground-neutral-muted\"\n          aria-hidden=\"true\"\n        />\n        <span className=\"flex min-w-0 flex-col gap-1\">\n          <Text as=\"span\" size=\"sm\" className=\"min-w-0 truncate text-foreground-neutral-base\">\n            {decision.subscription_name}\n          </Text>\n          <Code as=\"span\" variant=\"label\" className=\"truncate text-foreground-neutral-muted\">\n            {decision.run_name}\n          </Code>\n        </span>\n      </Link>\n    </li>\n  );\n}\n\nfunction EventPayload({payload}: {payload: string}) {\n  const data = [{language: 'json', filename: 'payload.json', code: payload}];\n\n  return (\n    <section aria-labelledby=\"trigger-event-payload-heading\" className=\"flex flex-col gap-6\">\n      <Text id=\"trigger-event-payload-heading\" size=\"sm\" bold>\n        Payload\n      </Text>\n      <CodeBlock\n        data={data}\n        className=\"flex h-auto max-h-[min(360px,45vh)] flex-col rounded-8 bg-background-contrast-base shadow-none\"\n      >\n        <CodeBlockHeader className=\"shrink-0 border-b border-border-contrast-base bg-background-contrast-base px-10 py-6\">\n          <CodeBlockFiles>\n            {(item) => <CodeBlockFilename value={item.filename}>{item.filename}</CodeBlockFilename>}\n          </CodeBlockFiles>\n          <CodeBlockCopyButton />\n        </CodeBlockHeader>\n        <CodeBlockBody className=\"min-h-0 overflow-auto scrollbar\">\n          {(item) => (\n            <CodeBlockItem\n              value={item.filename}\n              lineNumbers={false}\n              className=\"px-0 pb-0 [&>div]:rounded-none [&>div]:border-0 [&>div]:bg-background-contrast-base [&>div]:dark:bg-background-contrast-base [&_code]:!text-foreground-neutral-on-color\"\n            >\n              <CodeBlockContent language=\"json\" syntaxHighlighting={false}>\n                {item.code}\n              </CodeBlockContent>\n            </CodeBlockItem>\n          )}\n        </CodeBlockBody>\n      </CodeBlock>\n    </section>\n  );\n}\n"],"names":["Badge","Button","Callout","CodeBlock","CodeBlockBody","CodeBlockContent","CodeBlockCopyButton","CodeBlockFilename","CodeBlockFiles","CodeBlockHeader","CodeBlockItem","EmptyState","Icon","RelativeTime","Skeleton","Tooltip","TooltipContent","TooltipTrigger","Code","Text","cn","Link","useMemo","useTriggerEventQuery","triggerEventResult","TriggerSourceIcon","PANEL_CLASS","TriggerEventDetail","workspaceId","eventId","onBack","query","TriggerEventDetailPlaceholder","data","TriggerEventDetailView","event","isError","TriggerEventDetailError","onRetry","refetch","TriggerEventDetailLoading","result","eventLabel","triggerEventDisplayLabel","fullEventLabel","triggerEventFullLabel","formattedPayload","JSON","stringify","payload","aside","aria-label","className","div","type","variant","size","iconLeft","onClick","asChild","button","provider","source","aria-hidden","as","value","received_at","badge","label","EventRuns","EventPayload","filter","Boolean","join","icon","title","role","decisions","length","outcome","section","aria-labelledby","id","bold","ul","map","decision","DecisionRow","run_id","run_name","li","name","subscription_name","reason","to","params","wid","pid","project_id","workflowRunId","span","language","filename","code","item","lineNumbers","syntaxHighlighting"],"mappings":";AACA,SAAQA,KAAK,QAAO,0BAA0B;AAC9C,SAAQC,MAAM,QAAO,2BAA2B;AAChD,SAAQC,OAAO,QAAO,4BAA4B;AAClD,SACEC,SAAS,EACTC,aAAa,EACbC,gBAAgB,EAChBC,mBAAmB,EACnBC,iBAAiB,EACjBC,cAAc,EACdC,eAAe,EACfC,aAAa,QACR,+BAA+B;AACtC,SAAQC,UAAU,QAAO,gCAAgC;AACzD,SAAQC,IAAI,QAAO,yBAAyB;AAC5C,SAAQC,YAAY,QAAO,kCAAkC;AAC7D,SAAQC,QAAQ,QAAO,6BAA6B;AACpD,SAAQC,OAAO,EAAEC,cAAc,EAAEC,cAAc,QAAO,4BAA4B;AAClF,SAAQC,IAAI,EAAEC,IAAI,QAAO,+BAA+B;AACxD,SAAQC,EAAE,QAAO,0BAA0B;AAC3C,SAAQC,IAAI,QAAO,yBAAyB;AAC5C,SAAQC,OAAO,QAAO,QAAQ;AAC9B,SAAQC,oBAAoB,QAAO,+BAA+B;AAClE,SAAQC,kBAAkB,QAAO,4BAA4B;AAC7D,SAAQC,iBAAiB,QAAO,2BAA2B;AAE3D,MAAMC,cACJ;AAQF,OAAO,SAASC,mBAAmB,EAACC,WAAW,EAAEC,OAAO,EAAEC,MAAM,EAA0B;IACxF,MAAMC,QAAQR,qBAAqBM;IAEnC,IAAI,CAACA,SAAS,qBAAO,KAACG;IACtB,IAAID,MAAME,IAAI,EAAE;QACd,qBAAO,KAACC;YAAuBN,aAAaA;YAAaO,OAAOJ,MAAME,IAAI;YAAEH,QAAQA;;IACtF;IACA,IAAIC,MAAMK,OAAO,EACf,qBAAO,KAACC;QAAwBP,QAAQA;QAAQQ,SAAS,IAAMP,MAAMQ,OAAO;;IAC9E,qBAAO,KAACC;QAA0BV,QAAQA;;AAC5C;AAEA,OAAO,SAASI,uBAAuB,EACrCN,WAAW,EACXO,KAAK,EACLL,MAAM,EAKP;IACC,MAAMW,SAASjB,mBAAmBW;IAClC,MAAMO,aAAaC,yBAAyBR;IAC5C,MAAMS,iBAAiBC,sBAAsBV;IAC7C,MAAMW,mBAAmBxB,QACvB,IAAMyB,KAAKC,SAAS,CAACb,MAAMc,OAAO,IAAI,MAAM,MAAM,MAAM,QACxD;QAACd,MAAMc,OAAO;KAAC;IAGjB,qBACE,MAACC;QACCC,cAAW;QACXC,WAAWhC,GAAGM,aAAa;;0BAE3B,MAAC2B;gBAAID,WAAU;;kCACb,KAACnD;wBACCqD,MAAK;wBACLC,SAAQ;wBACRC,MAAK;wBACLC,UAAS;wBACTL,WAAU;wBACVM,SAAS5B;kCACV;;kCAGD,MAACuB;wBAAID,WAAU;;0CACb,MAACC;gCAAID,WAAU;;kDACb,MAACrC;;0DACC,KAACE;gDAAe0C,OAAO;0DACrB,cAAA,MAACC;oDACCN,MAAK;oDACLH,cAAYP;oDACZQ,WAAU;;sEAEV,KAAC3B;4DACCoC,UAAU1B,MAAM0B,QAAQ;4DACxBC,QAAQ3B,MAAM2B,MAAM;4DACpBC,eAAY;4DACZX,WAAU;;sEAEZ,KAAClC;4DAAK8C,IAAG;4DAAOT,SAAQ;4DAAQH,WAAU;sEACvCV;;;;;0DAIP,KAAC1B;0DACC,cAAA,KAACE;oDAAK8C,IAAG;oDAAOT,SAAQ;oDAAQH,WAAU;8DACvCR;;;;;kDAIP,KAACzB;wCAAKqC,MAAK;wCAAKJ,WAAU;kDACxB,cAAA,KAACvC;4CAAaoD,OAAO9B,MAAM+B,WAAW;;;;;0CAG1C,KAAClE;gCAAMuD,SAASd,OAAO0B,KAAK;gCAAEX,MAAK;0CAChCf,OAAO2B,KAAK;;;;;;0BAKnB,MAACf;gBAAID,WAAU;;kCACb,KAACiB;wBAAUzC,aAAaA;wBAAaO,OAAOA;;kCAC5C,KAACmC;wBAAarB,SAASH;;;;;;AAI/B;AAEA,SAASH,yBAAyBR,KAA8D;IAC9F,OAAOA,MAAMA,KAAK,IAAIA,MAAM2B,MAAM;AACpC;AAEA,SAASjB,sBAAsBV,KAA8D;IAC3F,OAAO;QAACA,MAAM2B,MAAM;QAAE3B,MAAMA,KAAK;KAAC,CAACoC,MAAM,CAACC,SAASC,IAAI,CAAC;AAC1D;AAEA,SAASzC;IACP,qBACE,KAACkB;QACCC,cAAW;QACXC,WAAWhC,GACTM,aACA;kBAGF,cAAA,KAACf;YAAW+D,MAAK;YAAYnB,SAAQ;YAAUoB,OAAM;;;AAG3D;AAEA,SAASnC,0BAA0B,EAACV,MAAM,EAAuB;IAC/D,qBACE,MAACoB;QACCC,cAAW;QACXC,WAAWhC,GAAGM,aAAa;;0BAE3B,KAACzB;gBACCqD,MAAK;gBACLC,SAAQ;gBACRC,MAAK;gBACLC,UAAS;gBACTL,WAAU;gBACVM,SAAS5B;0BACV;;0BAGD,MAACuB;gBAAID,WAAU;;kCACb,KAACtC;wBAASsC,WAAU;;kCACpB,KAACtC;wBAASsC,WAAU;;;;0BAEtB,KAACtC;gBAASsC,WAAU;;0BACpB,KAACtC;gBAASsC,WAAU;;;;AAG1B;AAEA,SAASf,wBAAwB,EAACP,MAAM,EAAEQ,OAAO,EAA4C;IAC3F,qBACE,MAACY;QAAMC,cAAW;QAAgBC,WAAWhC,GAAGM,aAAa;;0BAC3D,KAACzB;gBACCqD,MAAK;gBACLC,SAAQ;gBACRC,MAAK;gBACLC,UAAS;gBACTL,WAAU;gBACVM,SAAS5B;0BACV;;0BAGD,KAAC5B;gBAAQ0E,MAAK;gBAAQtB,MAAK;0BACzB,cAAA,MAACD;oBAAID,WAAU;;sCACb,KAACjC;4BAAKqC,MAAK;sCAAK;;sCAChB,KAACvD;4BAAOqD,MAAK;4BAASC,SAAQ;4BAAYC,MAAK;4BAAKE,SAASpB;sCAAS;;;;;;;AAOhF;AAEA,SAAS+B,UAAU,EACjBzC,WAAW,EACXO,KAAK,EAIN;IACC,IAAIA,MAAM0C,SAAS,CAACC,MAAM,KAAK,GAAG;QAChC,IAAI3C,MAAM4C,OAAO,KAAK,aAAa;YACjC,qBACE,KAAC5D;gBAAKqC,MAAK;gBAAKJ,WAAU;0BAAgC;;QAI9D;QACA,OAAO;IACT;IAEA,qBACE,MAAC4B;QAAQC,mBAAgB;QAA6B7B,WAAU;;0BAC9D,KAACjC;gBAAK+D,IAAG;gBAA6B1B,MAAK;gBAAK2B,IAAI;0BAAC;;0BAGrD,KAACC;gBAAGhC,WAAU;0BACXjB,MAAM0C,SAAS,CAACQ,GAAG,CAAC,CAACC,yBACpB,KAACC;wBAA8B3D,aAAaA;wBAAa0D,UAAUA;uBAAjDA,SAASJ,EAAE;;;;AAKvC;AAEA,SAASK,YAAY,EAAC3D,WAAW,EAAE0D,QAAQ,EAAsD;IAC/F,IAAIA,SAASA,QAAQ,KAAK,eAAe,CAACA,SAASE,MAAM,IAAI,CAACF,SAASG,QAAQ,EAAE;QAC/E,qBACE,MAACC;YAAGtC,WAAU;;8BACZ,KAACxC;oBACC+E,MAAK;oBACLvC,WAAU;oBACVW,eAAY;;8BAEd,MAACV;oBAAID,WAAU;;sCACb,KAACjC;4BAAKqC,MAAK;4BAAKJ,WAAU;sCACvBkC,SAASM,iBAAiB;;wBAE5BN,SAASO,MAAM,iBACd,KAAC1E;4BAAKqC,MAAK;4BAAKJ,WAAU;sCACvBkC,SAASO,MAAM;2CAGlB,KAAC1E;4BAAKqC,MAAK;4BAAKJ,WAAU;sCAAmC;;;;;;IAOvE;IAEA,qBACE,KAACsC;kBACC,cAAA,MAACrE;YACCyE,IAAG;YACHC,QAAQ;gBAACC,KAAKpE;gBAAaqE,KAAKX,SAASY,UAAU;gBAAEC,eAAeb,SAASE,MAAM;YAAA;YACnFpC,WAAU;;8BAEV,KAACxC;oBACC+E,MAAK;oBACLvC,WAAU;oBACVW,eAAY;;8BAEd,MAACqC;oBAAKhD,WAAU;;sCACd,KAACjC;4BAAK6C,IAAG;4BAAOR,MAAK;4BAAKJ,WAAU;sCACjCkC,SAASM,iBAAiB;;sCAE7B,KAAC1E;4BAAK8C,IAAG;4BAAOT,SAAQ;4BAAQH,WAAU;sCACvCkC,SAASG,QAAQ;;;;;;;AAM9B;AAEA,SAASnB,aAAa,EAACrB,OAAO,EAAoB;IAChD,MAAMhB,OAAO;QAAC;YAACoE,UAAU;YAAQC,UAAU;YAAgBC,MAAMtD;QAAO;KAAE;IAE1E,qBACE,MAAC+B;QAAQC,mBAAgB;QAAgC7B,WAAU;;0BACjE,KAACjC;gBAAK+D,IAAG;gBAAgC1B,MAAK;gBAAK2B,IAAI;0BAAC;;0BAGxD,MAAChF;gBACC8B,MAAMA;gBACNmB,WAAU;;kCAEV,MAAC3C;wBAAgB2C,WAAU;;0CACzB,KAAC5C;0CACE,CAACgG,qBAAS,KAACjG;wCAAkB0D,OAAOuC,KAAKF,QAAQ;kDAAGE,KAAKF,QAAQ;;;0CAEpE,KAAChG;;;kCAEH,KAACF;wBAAcgD,WAAU;kCACtB,CAACoD,qBACA,KAAC9F;gCACCuD,OAAOuC,KAAKF,QAAQ;gCACpBG,aAAa;gCACbrD,WAAU;0CAEV,cAAA,KAAC/C;oCAAiBgG,UAAS;oCAAOK,oBAAoB;8CACnDF,KAAKD,IAAI;;;;;;;;AAQ1B"}

package/dist/components/trigger-event-detail.stories.d.ts

@@ -0,0 +1,65 @@
+import type { Decorator, StoryObj } from '@storybook/react';
+import { TriggerEventDetailView } from './trigger-event-detail.js';
+declare const meta: {
+    title: string;
+    component: typeof TriggerEventDetailView;
+    parameters: {
+        layout: string;
+        argos: {
+            modes: {
+                light: {
+                    theme: string;
+                };
+                dark: {
+                    theme: string;
+                };
+            };
+        };
+    };
+    decorators: Decorator[];
+    args: {
+        workspaceId: string;
+        event: {
+            id: string;
+            event_ref: string;
+            origin: "integration" | "manual" | "cron";
+            workspace_id: string;
+            provider: string | null;
+            source: string;
+            event: string;
+            delivery_id: string | null;
+            connection_id: string | null;
+            outcome: "received" | "routed" | "discarded" | "failed" | "errored";
+            matched_count: number;
+            received_at: string;
+            processed_at: string | null;
+            created_at: string;
+            connection_name: string | null;
+            payload: Record<string, unknown> | null;
+            decisions: {
+                id: string;
+                received_event_id: string;
+                subscription_kind: "trigger" | "listener";
+                subscription_id: string;
+                subscription_name: string;
+                workflow_definition_id: string | null;
+                project_id: string | null;
+                workflow_run_id: string | null;
+                job_id: string | null;
+                matcher_kind: "on" | "until" | null;
+                matcher_ordinal: number | null;
+                decision: "triggered" | "filter-error" | "dispatch-error";
+                run_id: string | null;
+                run_name: string | null;
+                reason: string | null;
+                created_at: string;
+            }[];
+        };
+        onBack: () => undefined;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Playground: Story;
+export declare const Discarded: Story;
+//# sourceMappingURL=trigger-event-detail.stories.d.ts.map

package/dist/components/trigger-event-detail.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"trigger-event-detail.stories.d.ts","sourceRoot":"","sources":["../../src/components/trigger-event-detail.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,SAAS,EAAQ,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAUhE,OAAO,EAAC,sBAAsB,EAAC,MAAM,2BAA2B,CAAC;AAoHjE,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBqC,CAAC;AAEhD,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAOnC,eAAO,MAAM,UAAU,EAAE,KAIxB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC"}

package/dist/components/trigger-event-detail.stories.js

@@ -0,0 +1,181 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { argosScreenshot } from '@argos-ci/storybook/vitest';
+import { RelativeTimeProvider } from '@shipfox/react-ui/relative-time';
+import { createMemoryHistory, createRootRoute, createRoute, createRouter, Outlet, RouterProvider } from '@tanstack/react-router';
+import { screen } from 'storybook/test';
+import { TriggerEventDetailView } from './trigger-event-detail.js';
+const WORKSPACE_ID = '11111111-1111-4111-8111-111111111111';
+const PROJECT_ID = '22222222-2222-4222-8222-222222222222';
+const RUN_ID = '33333333-3333-4333-8333-333333333333';
+function minutesAgo(minutes) {
+    return new Date(Date.now() - minutes * 60_000).toISOString();
+}
+const withRouter = (Story)=>{
+    function StoryRoute() {
+        return /*#__PURE__*/ _jsx(RelativeTimeProvider, {
+            children: /*#__PURE__*/ _jsx("div", {
+                className: "min-h-screen bg-background-subtle-base p-24",
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: "ml-auto w-[400px]",
+                    children: /*#__PURE__*/ _jsx(Story, {})
+                })
+            })
+        });
+    }
+    const rootRoute = createRootRoute({
+        component: Outlet
+    });
+    const storyRoute = createRoute({
+        getParentRoute: ()=>rootRoute,
+        path: '/',
+        component: StoryRoute
+    });
+    const runRoute = createRoute({
+        getParentRoute: ()=>rootRoute,
+        path: '/workspaces/$wid/projects/$pid/runs/$workflowRunId',
+        component: StoryRoute
+    });
+    const router = createRouter({
+        history: createMemoryHistory({
+            initialEntries: [
+                '/'
+            ]
+        }),
+        routeTree: rootRoute.addChildren([
+            storyRoute,
+            runRoute
+        ])
+    });
+    return /*#__PURE__*/ _jsx(RouterProvider, {
+        router: router
+    });
+};
+const routedEvent = {
+    id: '44444444-4444-4444-8444-444444444444',
+    event_ref: 'github:delivery-179:push',
+    origin: 'integration',
+    workspace_id: WORKSPACE_ID,
+    provider: 'github',
+    source: 'github_acme',
+    event: 'push',
+    delivery_id: 'delivery-179',
+    connection_id: '55555555-5555-4555-8555-555555555555',
+    connection_name: 'ShipfoxHQ Production',
+    outcome: 'routed',
+    matched_count: 2,
+    payload: {
+        ref: 'refs/heads/main',
+        repository: {
+            full_name: 'ShipfoxHQ/platform'
+        },
+        head_commit: {
+            id: '9f1a0f2c7a1b',
+            message: 'Deploy event detail'
+        }
+    },
+    received_at: minutesAgo(15),
+    processed_at: '2026-06-25T19:30:02.000Z',
+    created_at: '2026-06-25T19:30:00.000Z',
+    decisions: [
+        {
+            id: '66666666-6666-4666-8666-666666666666',
+            received_event_id: '44444444-4444-4444-8444-444444444444',
+            subscription_kind: 'trigger',
+            subscription_id: '77777777-7777-4777-8777-777777777777',
+            subscription_name: 'Deploy production',
+            workflow_definition_id: '88888888-8888-4888-8888-888888888888',
+            project_id: PROJECT_ID,
+            workflow_run_id: null,
+            job_id: null,
+            matcher_kind: null,
+            matcher_ordinal: null,
+            decision: 'triggered',
+            run_id: RUN_ID,
+            run_name: 'deploy-web #184',
+            reason: null,
+            created_at: '2026-06-25T19:30:02.000Z'
+        },
+        {
+            id: '99999999-9999-4999-8999-999999999999',
+            received_event_id: '44444444-4444-4444-8444-444444444444',
+            subscription_kind: 'trigger',
+            subscription_id: 'aaaaaaaa-aaaa-4aaa-8aaa-aaaaaaaaaaaa',
+            subscription_name: 'Mirror staging',
+            workflow_definition_id: 'bbbbbbbb-bbbb-4bbb-8bbb-bbbbbbbbbbbb',
+            project_id: PROJECT_ID,
+            workflow_run_id: null,
+            job_id: null,
+            matcher_kind: null,
+            matcher_ordinal: null,
+            decision: 'triggered',
+            run_id: 'cccccccc-cccc-4ccc-8ccc-cccccccccccc',
+            run_name: 'mirror-staging #51',
+            reason: null,
+            created_at: '2026-06-25T19:30:02.000Z'
+        }
+    ]
+};
+const discardedEvent = {
+    ...routedEvent,
+    id: 'dddddddd-dddd-4ddd-8ddd-dddddddddddd',
+    event_ref: 'github:delivery-180:issue_comment',
+    event: 'issue_comment',
+    delivery_id: 'delivery-180',
+    outcome: 'discarded',
+    matched_count: 0,
+    payload: {
+        action: 'created',
+        comment: {
+            body: '/preview'
+        }
+    },
+    processed_at: '2026-06-25T19:33:01.000Z',
+    decisions: []
+};
+const meta = {
+    title: 'Triggers/EventDetail',
+    component: TriggerEventDetailView,
+    parameters: {
+        layout: 'fullscreen',
+        argos: {
+            modes: {
+                light: {
+                    theme: 'light'
+                },
+                dark: {
+                    theme: 'dark'
+                }
+            }
+        }
+    },
+    decorators: [
+        withRouter
+    ],
+    args: {
+        workspaceId: WORKSPACE_ID,
+        event: routedEvent,
+        onBack: ()=>undefined
+    }
+};
+export default meta;
+async function captureDetail(ctx, name) {
+    await screen.findByRole('complementary', {
+        name: 'Event details'
+    });
+    await argosScreenshot(ctx, name);
+}
+export const Playground = {
+    play: async (ctx)=>{
+        await captureDetail(ctx, 'Trigger Event Detail Playground');
+    }
+};
+export const Discarded = {
+    args: {
+        event: discardedEvent
+    },
+    play: async (ctx)=>{
+        await captureDetail(ctx, 'Trigger Event Detail Discarded');
+    }
+};
+
+//# sourceMappingURL=trigger-event-detail.stories.js.map