@activecollab/components 2.0.400 → 2.0.402

package/dist/cjs/components/ConfirmDialog/ConfirmDialog.js

@@ -7,10 +7,19 @@ exports.ConfirmDialog = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _Button = require("../Button/Button");
+var _Checkbox = require("../Checkbox");
 var _Dialog = require("../Dialog");
+var _Styles = require("./Styles");
 var _Body = require("../Typography/Variants/Body2");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var CONFIRMATION_CHECKBOX_ID = "confirm-dialog-confirmation";
 var ConfirmDialog = exports.ConfirmDialog = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$open = _ref.open,
     open = _ref$open === void 0 ? false : _ref$open,
@@ -28,10 +37,24 @@ var ConfirmDialog = exports.ConfirmDialog = /*#__PURE__*/(0, _react.forwardRef)(
     _ref$shouldShowCancel = _ref.shouldShowCancelButton,
     shouldShowCancelButton = _ref$shouldShowCancel === void 0 ? true : _ref$shouldShowCancel,
     _ref$isLoading = _ref.isLoading,
-    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    confirmationLabel = _ref.confirmationLabel;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    confirmed = _useState2[0],
+    setConfirmed = _useState2[1];
+  var isConfirmBlocked = Boolean(confirmationLabel) && !confirmed;
+  var handleToggleConfirmed = (0, _react.useCallback)(function (event) {
+    return setConfirmed(event.target.checked);
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (!open) {
+      setConfirmed(false);
+    }
+  }, [open]);
   (0, _react.useEffect)(function () {
     var handleKeyDown = function handleKeyDown(event) {
-      if (event.key === "Enter" && onConfirm) {
+      if (event.key === "Enter" && onConfirm && !isConfirmBlocked) {
         event.preventDefault();
         onConfirm();
       }
@@ -42,7 +65,7 @@ var ConfirmDialog = exports.ConfirmDialog = /*#__PURE__*/(0, _react.forwardRef)(
     return function () {
       window.removeEventListener("keydown", handleKeyDown);
     };
-  }, [open, onConfirm]);
+  }, [open, onConfirm, isConfirmBlocked]);
   return /*#__PURE__*/_react.default.createElement(_Dialog.Dialog, {
     ref: ref,
     open: open,
@@ -53,13 +76,24 @@ var ConfirmDialog = exports.ConfirmDialog = /*#__PURE__*/(0, _react.forwardRef)(
     lineHeight: "loose",
     color: "secondary",
     whitespace: "pre-line"
-  }, dialogContent)), /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.ContentDivider, null), /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.Actions, null, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+  }, dialogContent), confirmationLabel ? /*#__PURE__*/_react.default.createElement(_Styles.StyledConfirmation, {
+    className: "c-confirm-dialog--confirmation"
+  }, /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
+    id: CONFIRMATION_CHECKBOX_ID,
+    checked: confirmed,
+    onChange: handleToggleConfirmed,
+    disabled: isLoading
+  }), /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: CONFIRMATION_CHECKBOX_ID
+  }, /*#__PURE__*/_react.default.createElement(_Body.Body2, {
+    color: "secondary"
+  }, confirmationLabel))) : null), /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.ContentDivider, null), /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.Actions, null, /*#__PURE__*/_react.default.createElement(_Button.Button, {
     variant: "primary",
     style: {
       marginRight: "12px"
     },
     onClick: onConfirm,
-    disabled: isLoading
+    disabled: isLoading || isConfirmBlocked
   }, confirmBtnText), shouldShowCancelButton ? /*#__PURE__*/_react.default.createElement(_Button.Button, {
     variant: "secondary",
     "data-action": "cancel",

package/dist/cjs/components/ConfirmDialog/ConfirmDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmDialog.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_Button","_Dialog","_Body","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ConfirmDialog","exports","forwardRef","_ref","ref","_ref$open","open","onCancel","onConfirm","className","_ref$dialogTitle","dialogTitle","_ref$dialogContent","dialogContent","_ref$confirmBtnText","confirmBtnText","_ref$cancelBtnText","cancelBtnText","_ref$shouldShowCancel","shouldShowCancelButton","_ref$isLoading","isLoading","useEffect","handleKeyDown","event","key","preventDefault","window","addEventListener","removeEventListener","createElement","Dialog","onClose","classnames","disableCloseOnEsc","Title","ContentDivider","Content","Body2","lineHeight","color","whitespace","Actions","Button","variant","style","marginRight","onClick","disabled","type","displayName"],"sources":["../../../../src/components/ConfirmDialog/ConfirmDialog.tsx"],"sourcesContent":["import React, { forwardRef, useEffect } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { Button } from \"../Button/Button\";\nimport { Dialog } from \"../Dialog\";\nimport { Body2 } from \"../Typography/Variants/Body2\";\n\nexport interface ConfirmDialogProps {\n  open?: boolean;\n  onCancel?: () => void;\n  onConfirm?: () => void;\n  className?: string;\n  dialogTitle?: string;\n  dialogContent?: string;\n  confirmBtnText?: string;\n  cancelBtnText?: string;\n  shouldShowCancelButton?: boolean;\n  isLoading?: boolean;\n}\n\nexport const ConfirmDialog = forwardRef<HTMLDivElement, ConfirmDialogProps>(\n  (\n    {\n      open = false,\n      onCancel,\n      onConfirm,\n      className,\n      dialogTitle = \"Discard changes?\",\n      dialogContent = \"All unsaved changes will be lost.\",\n      confirmBtnText = \"OK\",\n      cancelBtnText = \"Cancel\",\n      shouldShowCancelButton = true,\n      isLoading = false,\n    },\n    ref\n  ) => {\n    useEffect(() => {\n      const handleKeyDown = (event: KeyboardEvent) => {\n        if (event.key === \"Enter\" && onConfirm) {\n          event.preventDefault();\n          onConfirm();\n        }\n      };\n\n      if (open) {\n        window.addEventListener(\"keydown\", handleKeyDown);\n      }\n\n      return () => {\n        window.removeEventListener(\"keydown\", handleKeyDown);\n      };\n    }, [open, onConfirm]);\n\n    return (\n      <Dialog\n        ref={ref}\n        open={open}\n        onClose={onCancel}\n        className={classnames(\"c-confirm-dialog\", className)}\n        disableCloseOnEsc={isLoading}\n      >\n        <Dialog.Title>{dialogTitle}</Dialog.Title>\n        <Dialog.ContentDivider />\n        <Dialog.Content>\n          <Body2 lineHeight=\"loose\" color=\"secondary\" whitespace=\"pre-line\">\n            {dialogContent}\n          </Body2>\n        </Dialog.Content>\n        <Dialog.ContentDivider />\n        <Dialog.Actions>\n          <Button\n            variant=\"primary\"\n            style={{ marginRight: \"12px\" }}\n            onClick={onConfirm}\n            disabled={isLoading}\n          >\n            {confirmBtnText}\n          </Button>\n          {shouldShowCancelButton ? (\n            <Button\n              variant=\"secondary\"\n              data-action=\"cancel\"\n              onClick={onCancel}\n              type=\"button\"\n              disabled={isLoading}\n            >\n              {cancelBtnText}\n            </Button>\n          ) : null}\n        </Dialog.Actions>\n      </Dialog>\n    );\n  }\n);\n\nConfirmDialog.displayName = \"ConfirmDialog\";\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ConfirmDialog.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_Button","_Checkbox","_Dialog","_Styles","_Body","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_slicedToArray","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","a","_arrayLikeToArray","toString","slice","constructor","name","Array","from","test","length","l","Symbol","iterator","u","next","done","push","value","return","isArray","CONFIRMATION_CHECKBOX_ID","ConfirmDialog","exports","forwardRef","_ref","ref","_ref$open","open","onCancel","onConfirm","className","_ref$dialogTitle","dialogTitle","_ref$dialogContent","dialogContent","_ref$confirmBtnText","confirmBtnText","_ref$cancelBtnText","cancelBtnText","_ref$shouldShowCancel","shouldShowCancelButton","_ref$isLoading","isLoading","confirmationLabel","_useState","useState","_useState2","confirmed","setConfirmed","isConfirmBlocked","Boolean","handleToggleConfirmed","useCallback","event","target","checked","useEffect","handleKeyDown","key","preventDefault","window","addEventListener","removeEventListener","createElement","Dialog","onClose","classnames","disableCloseOnEsc","Title","ContentDivider","Content","Body2","lineHeight","color","whitespace","StyledConfirmation","Checkbox","id","onChange","disabled","htmlFor","Actions","Button","variant","style","marginRight","onClick","type","displayName"],"sources":["../../../../src/components/ConfirmDialog/ConfirmDialog.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useState } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { Button } from \"../Button/Button\";\nimport { Checkbox } from \"../Checkbox\";\nimport { Dialog } from \"../Dialog\";\nimport { StyledConfirmation } from \"./Styles\";\nimport { Body2 } from \"../Typography/Variants/Body2\";\n\nconst CONFIRMATION_CHECKBOX_ID = \"confirm-dialog-confirmation\";\n\nexport interface ConfirmDialogProps {\n  open?: boolean;\n  onCancel?: () => void;\n  onConfirm?: () => void;\n  className?: string;\n  dialogTitle?: string;\n  dialogContent?: React.ReactNode;\n  confirmBtnText?: string;\n  cancelBtnText?: string;\n  shouldShowCancelButton?: boolean;\n  isLoading?: boolean;\n  confirmationLabel?: string;\n}\n\nexport const ConfirmDialog = forwardRef<HTMLDivElement, ConfirmDialogProps>(\n  (\n    {\n      open = false,\n      onCancel,\n      onConfirm,\n      className,\n      dialogTitle = \"Discard changes?\",\n      dialogContent = \"All unsaved changes will be lost.\",\n      confirmBtnText = \"OK\",\n      cancelBtnText = \"Cancel\",\n      shouldShowCancelButton = true,\n      isLoading = false,\n      confirmationLabel,\n    },\n    ref\n  ) => {\n    const [confirmed, setConfirmed] = useState(false);\n    const isConfirmBlocked = Boolean(confirmationLabel) && !confirmed;\n\n    const handleToggleConfirmed = useCallback(\n      (event: React.ChangeEvent<HTMLInputElement>) =>\n        setConfirmed(event.target.checked),\n      []\n    );\n\n    useEffect(() => {\n      if (!open) {\n        setConfirmed(false);\n      }\n    }, [open]);\n\n    useEffect(() => {\n      const handleKeyDown = (event: KeyboardEvent) => {\n        if (event.key === \"Enter\" && onConfirm && !isConfirmBlocked) {\n          event.preventDefault();\n          onConfirm();\n        }\n      };\n\n      if (open) {\n        window.addEventListener(\"keydown\", handleKeyDown);\n      }\n\n      return () => {\n        window.removeEventListener(\"keydown\", handleKeyDown);\n      };\n    }, [open, onConfirm, isConfirmBlocked]);\n\n    return (\n      <Dialog\n        ref={ref}\n        open={open}\n        onClose={onCancel}\n        className={classnames(\"c-confirm-dialog\", className)}\n        disableCloseOnEsc={isLoading}\n      >\n        <Dialog.Title>{dialogTitle}</Dialog.Title>\n        <Dialog.ContentDivider />\n        <Dialog.Content>\n          <Body2 lineHeight=\"loose\" color=\"secondary\" whitespace=\"pre-line\">\n            {dialogContent}\n          </Body2>\n          {confirmationLabel ? (\n            <StyledConfirmation className=\"c-confirm-dialog--confirmation\">\n              <Checkbox\n                id={CONFIRMATION_CHECKBOX_ID}\n                checked={confirmed}\n                onChange={handleToggleConfirmed}\n                disabled={isLoading}\n              />\n              <label htmlFor={CONFIRMATION_CHECKBOX_ID}>\n                <Body2 color=\"secondary\">{confirmationLabel}</Body2>\n              </label>\n            </StyledConfirmation>\n          ) : null}\n        </Dialog.Content>\n        <Dialog.ContentDivider />\n        <Dialog.Actions>\n          <Button\n            variant=\"primary\"\n            style={{ marginRight: \"12px\" }}\n            onClick={onConfirm}\n            disabled={isLoading || isConfirmBlocked}\n          >\n            {confirmBtnText}\n          </Button>\n          {shouldShowCancelButton ? (\n            <Button\n              variant=\"secondary\"\n              data-action=\"cancel\"\n              onClick={onCancel}\n              type=\"button\"\n              disabled={isLoading}\n            >\n              {cancelBtnText}\n            </Button>\n          ) : null}\n        </Dialog.Actions>\n      </Dialog>\n    );\n  }\n);\n\nConfirmDialog.displayName = \"ConfirmDialog\";\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/ConfirmDialog/Styles.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledConfirmation = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var StyledConfirmation = exports.StyledConfirmation = _styledComponents.default.div.withConfig({
+  displayName: "Styles__StyledConfirmation",
+  componentId: "sc-1hepb1k-0"
+})(["display:flex;align-items:center;gap:8px;margin-top:16px;label{cursor:pointer;}"]);
+StyledConfirmation.displayName = "StyledConfirmation";
+//# sourceMappingURL=Styles.js.map

package/dist/cjs/components/ConfirmDialog/Styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledConfirmation","exports","styled","div","withConfig","displayName","componentId"],"sources":["../../../../src/components/ConfirmDialog/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nexport const StyledConfirmation = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 16px;\n\n  label {\n    cursor: pointer;\n  }\n`;\n\nStyledConfirmation.displayName = \"StyledConfirmation\";\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,IAAMG,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sFAS3C;AAEDN,kBAAkB,CAACK,WAAW,GAAG,oBAAoB","ignoreList":[]}

package/dist/cjs/presentation/shared/WebhookLogsDialog.js

@@ -6,12 +6,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.WebhookLogsDialog = exports.WEBHOOK_REPOSITORIES = exports.WEBHOOK_CONNECTIONS = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _RoundAvatar = require("./RoundAvatar");
+var _tokens = require("./tokens");
 var _Button = require("../../components/Button");
 var _Chip = require("../../components/Chip");
+var _CompleteCheckbox = require("../../components/CompleteCheckbox");
 var _Dialog = require("../../components/Dialog");
 var _Filter = require("../../components/Filter");
 var _IconButton = require("../../components/IconButton");
 var _Icons = require("../../components/Icons");
+var _Label = require("../../components/Label");
+var _SelectTrigger = require("../../components/SelectTrigger");
+var _Sheet = require("../../components/Sheet");
+var _Tooltip = require("../../components/Tooltip");
 var _Typography = require("../../components/Typography");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -46,9 +53,18 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 
 /**
  * Normalized event kind. The processor layer maps each provider's raw event
- * header (GitHub `issues`, GitLab `Issue Hook`, …) onto one provider-agnostic
- * kind, so the same logical event reads — and filters — identically across
- * connections instead of appearing once per provider.
+ * header (GitHub `issues` / GitLab `Issue Hook`, GitHub `pull_request` / GitLab
+ * `Merge Request Hook`, …) onto one provider-agnostic kind, so the same logical
+ * event reads — and filters — identically across connections instead of
+ * appearing once per provider. The set below mirrors the app's
+ * `EVENT_TYPE_OPTIONS` constant.
+ */
+
+/**
+ * The task an outcome created or referenced. In the app each
+ * `vcs_webhook_outcomes` row carries a nullable `task_id`; when it is set the
+ * outcome offers an "Open Task" link that opens the task in a sheet on top of
+ * the log dialog.
  */
 
 var WEBHOOK_CONNECTIONS = exports.WEBHOOK_CONNECTIONS = [{
@@ -117,12 +133,38 @@ var WEBHOOK_REPOSITORIES = exports.WEBHOOK_REPOSITORIES = [{
   connectionId: "gl-acme-ce"
 }];
 var EVENT_KIND_LABELS = {
-  issue: "Issue",
   push: "Push",
-  merge_request: "Merge request",
+  issue: "Issue",
+  pull_request: "Pull Request",
+  pull_request_review: "Pull Request Review",
   repository: "Repository",
-  ping: "Ping"
+  other: "Other"
 };
+
+/**
+ * Fixed Event Type filter options, mirroring the app's `EVENT_TYPE_OPTIONS`.
+ * The app offers the full list regardless of which kinds are present in the
+ * current result set, so we do the same instead of deriving it from the logs.
+ */
+var EVENT_TYPE_OPTIONS = [{
+  id: "push",
+  label: "Push"
+}, {
+  id: "issue",
+  label: "Issue"
+}, {
+  id: "pull_request",
+  label: "Pull Request"
+}, {
+  id: "pull_request_review",
+  label: "Pull Request Review"
+}, {
+  id: "repository",
+  label: "Repository"
+}, {
+  id: "other",
+  label: "Other"
+}];
 var STATUS_LABELS = {
   received: "Received",
   unhandled: "Unhandled",
@@ -188,9 +230,6 @@ var StatusChip = function StatusChip(_ref) {
     typographyProps: {
       variant: "Caption 1",
       weight: "medium"
-    },
-    style: {
-      borderRadius: 6
     }
   });
 };
@@ -269,7 +308,15 @@ var WEBHOOK_LOGS = [{
   eventKind: "issue",
   status: "processed",
   deliveryIdentifier: "d3b07384-d9a0-4c9b-8f1e-2a6f1b9c4e21",
-  outcomes: ["Created task #1842 from issue #42"],
+  outcomes: [{
+    summary: "Created task #1842 from issue #42",
+    task: {
+      id: 1842,
+      name: "Webhook delivery retries are not logged",
+      projectName: "Feather",
+      description: "Retries are not written to the webhook log, so a delivery that only succeeds on a retry still shows as failed. Log each attempt with its outcome."
+    }
+  }],
   payload: PAYLOAD_ISSUE_OPENED,
   receivedOn: "Jun 29, 2026 · 14:32",
   receivedAt: 1751207520
@@ -277,10 +324,12 @@ var WEBHOOK_LOGS = [{
   id: "log-6",
   connectionId: "gl-content",
   repositoryId: "co-handbook",
-  eventKind: "merge_request",
+  eventKind: "pull_request",
   status: "skipped",
   deliveryIdentifier: "b1946ac9-2f3a-4c0d-9b7e-1d2c3e4f5a6b",
-  outcomes: ["Skipped: merge request has no linked issue"],
+  outcomes: [{
+    summary: "Skipped: merge request has no linked issue"
+  }],
   payload: PAYLOAD_MERGE_REQUEST,
   receivedOn: "Jun 29, 2026 · 11:08",
   receivedAt: 1751195280
@@ -291,7 +340,9 @@ var WEBHOOK_LOGS = [{
   eventKind: "issue",
   status: "failed",
   deliveryIdentifier: "9c1185a5-c5e9-4e3f-8a1b-7d6e5f4c3b2a",
-  outcomes: ["Failed at task creation: project not found"],
+  outcomes: [{
+    summary: "Failed at task creation: project not found"
+  }],
   payload: PAYLOAD_ISSUE_OPENED,
   receivedOn: "Jun 28, 2026 · 18:54",
   receivedAt: 1751136840
@@ -302,7 +353,23 @@ var WEBHOOK_LOGS = [{
   eventKind: "push",
   status: "processed",
   deliveryIdentifier: "f7c3bc1d-8c5a-4b2e-9f0a-1b2c3d4e5f60",
-  outcomes: ["Created task #1839 from issue #311", "Created task #1840 from issue #312"],
+  outcomes: [{
+    summary: "Created task #1839 from issue #311",
+    task: {
+      id: 1839,
+      name: "Refresh the onboarding handbook",
+      projectName: "Handbook",
+      description: "The onboarding handbook is out of date. Review each section and update the steps that changed in the last release."
+    }
+  }, {
+    summary: "Created task #1840 from issue #312",
+    task: {
+      id: 1840,
+      name: "Document webhook scopes",
+      projectName: "Handbook",
+      description: "Explain the connection and repository webhook scopes, and when each one applies."
+    }
+  }],
   payload: PAYLOAD_PUSH,
   receivedOn: "Jun 28, 2026 · 09:21",
   receivedAt: 1751102460
@@ -310,7 +377,7 @@ var WEBHOOK_LOGS = [{
   id: "log-3",
   connectionId: "gh-activecollab",
   repositoryId: "ac-feather",
-  eventKind: "ping",
+  eventKind: "other",
   status: "unhandled",
   deliveryIdentifier: "1574bddb-75c3-4b1e-8a9c-0d1e2f3a4b5c",
   outcomes: [],
@@ -337,7 +404,15 @@ var WEBHOOK_LOGS = [{
   eventKind: "issue",
   status: "processed",
   deliveryIdentifier: "fa3ebd6742c360b2d9652b7f78d9bd7d",
-  outcomes: ["Created task #1804 from issue #29"],
+  outcomes: [{
+    summary: "Created task #1804 from issue #29",
+    task: {
+      id: 1804,
+      name: "Restore missing repository icons",
+      projectName: "Feather",
+      description: "Provider icons are missing from the repository list. Restore the GitHub and GitLab glyphs."
+    }
+  }],
   payload: PAYLOAD_ISSUE_OPENED,
   receivedOn: "Jun 26, 2026 · 13:12",
   receivedAt: 1750943520
@@ -386,7 +461,7 @@ var PayloadPre = _styledComponents.default.pre.withConfig({
 var PayloadWrap = _styledComponents.default.div.withConfig({
   displayName: "WebhookLogsDialog__PayloadWrap",
   componentId: "sc-6ol7f6-1"
-})([".payload-toggle{display:flex;justify-content:flex-end;min-height:24px;margin-bottom:4px;}"]);
+})([".payload-header{display:flex;align-items:center;justify-content:space-between;min-height:24px;margin-bottom:4px;}"]);
 var PayloadBlock = function PayloadBlock(_ref3) {
   var payload = _ref3.payload;
   var _useState = (0, _react.useState)(true),
@@ -400,9 +475,12 @@ var PayloadBlock = function PayloadBlock(_ref3) {
     return highlightJson(payload);
   }, [payload]);
   var canToggle = lineCount > PAYLOAD_COLLAPSED_LINES;
-  return /*#__PURE__*/_react.default.createElement(PayloadWrap, null, canToggle ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "payload-toggle"
-  }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+  return /*#__PURE__*/_react.default.createElement(PayloadWrap, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "payload-header"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+    color: "secondary",
+    weight: "bold"
+  }, "Payload"), canToggle ? /*#__PURE__*/_react.default.createElement(_Button.Button, {
     variant: "text colored",
     size: "small",
     onClick: function onClick() {
@@ -410,7 +488,7 @@ var PayloadBlock = function PayloadBlock(_ref3) {
         return !value;
       });
     }
-  }, collapsed ? "Show More" : "Show Less")) : null, /*#__PURE__*/_react.default.createElement(PayloadPre, {
+  }, collapsed ? "Show More" : "Show Less") : null), /*#__PURE__*/_react.default.createElement(PayloadPre, {
     $collapsed: collapsed && canToggle,
     dangerouslySetInnerHTML: {
       __html: html
@@ -423,11 +501,12 @@ var PayloadBlock = function PayloadBlock(_ref3) {
 var LogRowWrap = _styledComponents.default.div.withConfig({
   displayName: "WebhookLogsDialog__LogRowWrap",
   componentId: "sc-6ol7f6-2"
-})(["border-top:1px solid var(--color-theme-300);.lr-summary{box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 8px 8px 12px;background:none;border:0;text-align:left;cursor:pointer;font-family:inherit;&:hover{background-color:var(--color-theme-200);}}.lr-expand{flex-shrink:0;color:var(--color-theme-600);transform:rotate(90deg);transition:transform 150ms ease;}.lr-expand.open{transform:rotate(180deg);}.lr-conn{display:flex;align-items:center;gap:8px;width:180px;min-width:0;flex-shrink:0;}.lr-conn svg{width:20px;height:20px;flex-shrink:0;}.lr-conn .lr-conn-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.lr-event{flex:1 1 0%;min-width:0;}.lr-status{flex-shrink:0;}.lr-outcomes{width:96px;flex-shrink:0;text-align:right;}.lr-detail{padding:4px 16px 20px 44px;display:flex;flex-direction:column;gap:16px;}.lr-field-label{display:block;margin-bottom:4px;}.lr-id{font-family:\"SFMono-Regular\",Consolas,\"Liberation Mono\",Menlo,monospace;word-break:break-all;}.lr-outcome-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;}"]);
+})(["border-top:1px solid var(--color-theme-300);.lr-summary{box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 8px 8px 12px;background:none;border:0;text-align:left;cursor:pointer;font-family:inherit;&:hover{background-color:var(--color-theme-200);}}.lr-expand{flex-shrink:0;fill:var(--color-theme-600);color:var(--color-theme-600);transform:rotate(180deg);transition:transform 200ms ease;}.lr-expand.open{transform:rotate(0deg);}.lr-conn{display:flex;align-items:center;gap:8px;width:180px;min-width:0;flex-shrink:0;}.lr-conn svg{width:20px;height:20px;flex-shrink:0;}.lr-conn .lr-conn-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.lr-event{flex:1 1 0%;min-width:0;}.lr-status{flex-shrink:0;}.lr-outcomes{width:96px;flex-shrink:0;text-align:right;}.lr-detail{padding:4px 16px 20px 44px;display:flex;flex-direction:column;gap:16px;}.lr-field-label{display:block;margin-bottom:4px;}.lr-id{font-family:\"SFMono-Regular\",Consolas,\"Liberation Mono\",Menlo,monospace;word-break:break-all;}.lr-outcome-list{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:6px;}.lr-outcome{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;}.lr-open-task{padding:0;border:0;background:none;font:inherit;font-size:13px;line-height:18px;color:var(--color-theme-600);text-decoration:underline;cursor:pointer;white-space:nowrap;}.lr-open-task:hover{color:var(--color-theme-800);}"]);
 var LogRow = function LogRow(_ref4) {
   var _connection$name;
   var log = _ref4.log,
-    connection = _ref4.connection;
+    connection = _ref4.connection,
+    onOpenTask = _ref4.onOpenTask;
   var _useState3 = (0, _react.useState)(false),
     _useState4 = _slicedToArray(_useState3, 2),
     open = _useState4[0],
@@ -468,27 +547,116 @@ var LogRow = function LogRow(_ref4) {
   }, "Webhook identifier"), /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
     className: "lr-id",
     color: "tertiary"
-  }, log.deliveryIdentifier)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+  }, log.deliveryIdentifier)), log.outcomes.length > 0 ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
     className: "lr-field-label",
     color: "secondary",
     weight: "bold"
-  }, "Outcomes"), log.outcomes.length > 0 ? /*#__PURE__*/_react.default.createElement("ul", {
+  }, "Outcomes"), /*#__PURE__*/_react.default.createElement("ul", {
     className: "lr-outcome-list"
   }, log.outcomes.map(function (outcome, index) {
     return /*#__PURE__*/_react.default.createElement("li", {
-      key: index
+      key: index,
+      className: "lr-outcome"
     }, /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
       color: "tertiary"
-    }, outcome));
-  })) : /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
-    color: "tertiary"
-  }, "No outcomes were recorded for this webhook.")), log.payload ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
-    className: "lr-field-label",
-    color: "secondary",
-    weight: "bold"
-  }, "Payload"), /*#__PURE__*/_react.default.createElement(PayloadBlock, {
+    }, outcome.summary), outcome.task ? /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+      title: "See the task without closing the log"
+    }, /*#__PURE__*/_react.default.createElement("button", {
+      type: "button",
+      className: "lr-open-task",
+      onClick: function onClick() {
+        return onOpenTask(outcome.task);
+      }
+    }, "Open Task")) : null);
+  }))) : null, log.payload ? /*#__PURE__*/_react.default.createElement(PayloadBlock, {
     payload: log.payload
-  })) : null) : null);
+  }) : null) : null);
+};
+
+/* --- Task preview sheet --------------------------------------------------- */
+/* Opens the outcome's task in a right-side sheet, on top of the (still open)    */
+/* log dialog. Uses the same Sheet setup as the Task sheet stories — position    */
+/* "right", stretch mode, and a Close control — so it reads as the real task     */
+/* sheet. The body is a representative stand-in for the app's full task sheet.   */
+
+var StyledTaskSheet = _styledComponents.default.div.withConfig({
+  displayName: "WebhookLogsDialog__StyledTaskSheet",
+  componentId: "sc-6ol7f6-3"
+})(["display:grid;min-height:100%;padding:8px;grid-template-columns:1fr;@media (min-width:", "){grid-template-columns:1fr 328px;}"], _tokens.LG);
+var StyledTaskMain = _styledComponents.default.div.withConfig({
+  displayName: "WebhookLogsDialog__StyledTaskMain",
+  componentId: "sc-6ol7f6-4"
+})(["padding:24px 24px 0;min-width:0;@media (min-width:", "){grid-column:1;}.task-header{display:flex;align-items:center;gap:8px;min-width:0;margin-bottom:8px;}.task-title{min-width:0;}.metadata{display:flex;flex-wrap:wrap;align-items:center;margin-bottom:24px;}.metadata .seg:not(:last-child){padding-right:12px;margin-right:12px;border-right:1px solid var(--border-primary);}.description{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--border-primary);}"], _tokens.LG);
+var StyledTaskProperties = _styledComponents.default.div.withConfig({
+  displayName: "WebhookLogsDialog__StyledTaskProperties",
+  componentId: "sc-6ol7f6-5"
+})(["padding:0 24px;@media (min-width:", "){grid-column:2;padding:24px;background-color:var(--color-theme-200);border-radius:8px;}.field{margin-bottom:24px;}.field:last-child{margin-bottom:0;}.field-label{display:flex;align-items:center;max-width:280px;margin-bottom:4px;}.field-control{width:100%;}.assignee-row{display:flex;align-items:center;gap:8px;}"], _tokens.LG);
+var SheetField = function SheetField(_ref5) {
+  var label = _ref5.label,
+    children = _ref5.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "field"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "field-label"
+  }, /*#__PURE__*/_react.default.createElement(_Label.Label, {
+    size: "small"
+  }, label)), children);
+};
+var TaskPreviewSheet = function TaskPreviewSheet(_ref6) {
+  var task = _ref6.task,
+    open = _ref6.open,
+    onClose = _ref6.onClose;
+  if (!task) {
+    return null;
+  }
+  var controls = [{
+    tooltip: "Close",
+    disabled: false,
+    onClick: onClose,
+    icon: /*#__PURE__*/_react.default.createElement(_Icons.CancelCrossIcon, null),
+    className: ""
+  }];
+  return /*#__PURE__*/_react.default.createElement(_Sheet.Sheet, {
+    open: open,
+    onClose: onClose,
+    controls: controls,
+    position: "right",
+    animation: "right",
+    mode: "stretch"
+  }, /*#__PURE__*/_react.default.createElement(StyledTaskSheet, null, /*#__PURE__*/_react.default.createElement(StyledTaskMain, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "task-header"
+  }, /*#__PURE__*/_react.default.createElement(_CompleteCheckbox.CompleteCheckbox, null), /*#__PURE__*/_react.default.createElement(_Typography.Header2, {
+    className: "task-title"
+  }, "#", task.id, ": ", task.name)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "metadata"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+    className: "seg",
+    color: "secondary"
+  }, task.projectName), /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+    className: "seg",
+    color: "secondary"
+  }, "Task #", task.id), /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+    className: "seg",
+    color: "secondary"
+  }, "Created from a webhook delivery")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "description"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.Body2, null, task.description))), /*#__PURE__*/_react.default.createElement(StyledTaskProperties, null, /*#__PURE__*/_react.default.createElement(SheetField, {
+    label: "Task List"
+  }, /*#__PURE__*/_react.default.createElement(_SelectTrigger.SelectTrigger, {
+    className: "field-control"
+  }, "Inbox")), /*#__PURE__*/_react.default.createElement(SheetField, {
+    label: "Assignees"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "assignee-row"
+  }, /*#__PURE__*/_react.default.createElement(_RoundAvatar.RoundAvatar, {
+    $bg: _tokens.AVATAR_COLORS.purple,
+    $size: 28,
+    $bordered: false
+  }, "IS"), /*#__PURE__*/_react.default.createElement(_Typography.Body2, null, "Ilija Studen"))), /*#__PURE__*/_react.default.createElement(SheetField, {
+    label: "Start and Due Date"
+  }, /*#__PURE__*/_react.default.createElement(_SelectTrigger.SelectTrigger, {
+    className: "field-control"
+  }, "Not set")))));
 };
 
 /* --- The dialog ---------------------------------------------------------- */
@@ -496,26 +664,26 @@ var LogRow = function LogRow(_ref4) {
 /** Wider than the default 540px dialog so the log columns have room. */
 var WebhookLogsDialogStyled = (0, _styledComponents.default)(_Dialog.Dialog).withConfig({
   displayName: "WebhookLogsDialog__WebhookLogsDialogStyled",
-  componentId: "sc-6ol7f6-3"
+  componentId: "sc-6ol7f6-6"
 })(["&&{width:calc(100vw - 64px);max-width:760px;}"]);
 var DialogTitleBar = _styledComponents.default.div.withConfig({
   displayName: "WebhookLogsDialog__DialogTitleBar",
-  componentId: "sc-6ol7f6-4"
+  componentId: "sc-6ol7f6-7"
 })(["display:flex;align-items:center;justify-content:space-between;gap:16px;.title-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}"]);
 var LogListHeader = _styledComponents.default.div.withConfig({
   displayName: "WebhookLogsDialog__LogListHeader",
-  componentId: "sc-6ol7f6-5"
-})(["box-sizing:border-box;display:flex;align-items:center;gap:12px;padding:0 8px 8px 44px;.lh-conn{width:180px;flex-shrink:0;}.lh-event{flex:1 1 0%;min-width:0;}.lh-status{width:96px;flex-shrink:0;}.lh-outcomes{width:96px;flex-shrink:0;text-align:right;}"]);
+  componentId: "sc-6ol7f6-8"
+})(["box-sizing:border-box;display:flex;align-items:center;gap:12px;padding:0 8px 8px 44px;.lh-conn{width:180px;flex-shrink:0;}.lh-event{flex:1 1 0%;min-width:0;}.lh-status{width:96px;flex-shrink:0;text-align:right;}.lh-outcomes{width:96px;flex-shrink:0;text-align:right;}"]);
 var EmptyLogs = _styledComponents.default.div.withConfig({
   displayName: "WebhookLogsDialog__EmptyLogs",
-  componentId: "sc-6ol7f6-6"
-})(["padding:40px 0;text-align:center;"]);
-var WebhookLogsDialog = exports.WebhookLogsDialog = function WebhookLogsDialog(_ref5) {
-  var open = _ref5.open,
-    onClose = _ref5.onClose,
-    initialConnectionId = _ref5.initialConnectionId,
-    connectionIds = _ref5.connectionIds,
-    repositoryIds = _ref5.repositoryIds;
+  componentId: "sc-6ol7f6-9"
+})(["display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 0;text-align:center;svg{fill:var(--color-theme-500);}"]);
+var WebhookLogsDialog = exports.WebhookLogsDialog = function WebhookLogsDialog(_ref7) {
+  var open = _ref7.open,
+    onClose = _ref7.onClose,
+    initialConnectionId = _ref7.initialConnectionId,
+    connectionIds = _ref7.connectionIds,
+    repositoryIds = _ref7.repositoryIds;
   var _useState5 = (0, _react.useState)(function () {
       var initial = {};
       if (connectionIds && connectionIds.length > 0) {
@@ -531,6 +699,18 @@ var WebhookLogsDialog = exports.WebhookLogsDialog = function WebhookLogsDialog(_
     _useState6 = _slicedToArray(_useState5, 2),
     filters = _useState6[0],
     setFilters = _useState6[1];
+
+  // The task opened from an outcome's "Open Task" link. The dialog stays open
+  // underneath; the sheet layers on top. `lastTask` keeps the content mounted
+  // through the sheet's slide-out so it does not blank out mid-animation.
+  var _useState7 = (0, _react.useState)(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    activeTask = _useState8[0],
+    setActiveTask = _useState8[1];
+  var lastTaskRef = (0, _react.useRef)(null);
+  if (activeTask) {
+    lastTaskRef.current = activeTask;
+  }
   var connectionsById = (0, _react.useMemo)(function () {
     var map = {};
     WEBHOOK_CONNECTIONS.forEach(function (connection) {
@@ -574,12 +754,12 @@ var WebhookLogsDialog = exports.WebhookLogsDialog = function WebhookLogsDialog(_
     }, {
       id: "event_type",
       title: "Event Type",
-      submenu: Array.from(new Set(WEBHOOK_LOGS.map(function (log) {
-        return log.eventKind;
-      }))).map(function (eventKind) {
+      submenu: EVENT_TYPE_OPTIONS.map(function (_ref8) {
+        var id = _ref8.id,
+          label = _ref8.label;
         return {
-          id: eventKind,
-          name: EVENT_KIND_LABELS[eventKind]
+          id,
+          name: label
         };
       })
     }, {
@@ -647,7 +827,7 @@ var WebhookLogsDialog = exports.WebhookLogsDialog = function WebhookLogsDialog(_
     }
     setFilters(next);
   }, []);
-  return /*#__PURE__*/_react.default.createElement(WebhookLogsDialogStyled, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(WebhookLogsDialogStyled, {
     open: open,
     onClose: onClose,
     enableBackgroundClick: true
@@ -686,10 +866,17 @@ var WebhookLogsDialog = exports.WebhookLogsDialog = function WebhookLogsDialog(_
     return /*#__PURE__*/_react.default.createElement(LogRow, {
       key: log.id,
       log: log,
-      connection: connectionsById[log.connectionId]
+      connection: connectionsById[log.connectionId],
+      onOpenTask: setActiveTask
     });
-  })) : /*#__PURE__*/_react.default.createElement(EmptyLogs, null, /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
+  })) : /*#__PURE__*/_react.default.createElement(EmptyLogs, null, /*#__PURE__*/_react.default.createElement(_Icons.AccessLogIcon, null), /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
     color: "tertiary"
-  }, "No webhook logs match the selected filters."))));
+  }, "No webhook logs match the selected filters.")))), /*#__PURE__*/_react.default.createElement(TaskPreviewSheet, {
+    task: activeTask !== null && activeTask !== void 0 ? activeTask : lastTaskRef.current,
+    open: Boolean(activeTask),
+    onClose: function onClose() {
+      return setActiveTask(null);
+    }
+  }));
 };
 //# sourceMappingURL=WebhookLogsDialog.js.map