epiq 1.2.2 → 1.3.0

package/dist/gui/main.js

@@ -1328,7 +1328,7 @@ var require_react_dom_development = __commonJS({
         return dispatcher;
       }
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React16 = require_react(), Internals = {
+      var React17 = require_react(), Internals = {
         d: {
           f: noop,
           r: function() {
@@ -1346,7 +1346,7 @@ var require_react_dom_development = __commonJS({
         },
         p: 0,
         findDOMNode: null
-      }, REACT_PORTAL_TYPE = Symbol.for("react.portal"), ReactSharedInternals = React16.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+      }, REACT_PORTAL_TYPE = Symbol.for("react.portal"), ReactSharedInternals = React17.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
       "function" === typeof Map && null != Map.prototype && "function" === typeof Map.prototype.forEach && "function" === typeof Set && null != Set.prototype && "function" === typeof Set.prototype.clear && "function" === typeof Set.prototype.forEach || console.error(
         "React depends on Map and Set built-in types. Make sure that you load a polyfill in older browsers. https://reactjs.org/link/react-polyfills"
       );
@@ -2881,7 +2881,7 @@ var require_react_dom_client_development = __commonJS({
         "number" === type && getActiveElement(node.ownerDocument) === node || node.defaultValue === "" + value || (node.defaultValue = "" + value);
       }
       function validateOptionProps(element, props) {
-        null == props.value && ("object" === typeof props.children && null !== props.children ? React16.Children.forEach(props.children, function(child) {
+        null == props.value && ("object" === typeof props.children && null !== props.children ? React17.Children.forEach(props.children, function(child) {
           null == child || "string" === typeof child || "number" === typeof child || "bigint" === typeof child || didWarnInvalidChild || (didWarnInvalidChild = true, console.error(
             "Cannot infer the option value of complex children. Pass a `value` prop or use a plain string as children to <option>."
           ));
@@ -18513,14 +18513,14 @@ var require_react_dom_client_development = __commonJS({
         ));
       }
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var Scheduler = require_scheduler(), React16 = require_react(), ReactDOM = require_react_dom(), assign = Object.assign, REACT_LEGACY_ELEMENT_TYPE = Symbol.for("react.element"), REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = Symbol.for("react.profiler"), REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy");
+      var Scheduler = require_scheduler(), React17 = require_react(), ReactDOM = require_react_dom(), assign = Object.assign, REACT_LEGACY_ELEMENT_TYPE = Symbol.for("react.element"), REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = Symbol.for("react.profiler"), REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy");
       Symbol.for("react.scope");
       var REACT_ACTIVITY_TYPE = Symbol.for("react.activity");
       Symbol.for("react.legacy_hidden");
       Symbol.for("react.tracing_marker");
       var REACT_MEMO_CACHE_SENTINEL = Symbol.for("react.memo_cache_sentinel");
       Symbol.for("react.view_transition");
-      var MAYBE_ITERATOR_SYMBOL = Symbol.iterator, REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"), isArrayImpl = Array.isArray, ReactSharedInternals = React16.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, ReactDOMSharedInternals = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, NotPending = Object.freeze({
+      var MAYBE_ITERATOR_SYMBOL = Symbol.iterator, REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"), isArrayImpl = Array.isArray, ReactSharedInternals = React17.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, ReactDOMSharedInternals = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, NotPending = Object.freeze({
         pending: false,
         data: null,
         method: null,
@@ -21308,7 +21308,7 @@ var require_react_dom_client_development = __commonJS({
         }
       };
       (function() {
-        var isomorphicReactPackageVersion = React16.version;
+        var isomorphicReactPackageVersion = React17.version;
         if ("19.2.6" !== isomorphicReactPackageVersion)
           throw Error(
             'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n  - react:      ' + (isomorphicReactPackageVersion + "\n  - react-dom:  19.2.6\nLearn more: https://react.dev/warnings/version-mismatch")
@@ -21662,18 +21662,18 @@ var require_react_jsx_runtime_development = __commonJS({
       function isValidElement2(object) {
         return "object" === typeof object && null !== object && object.$$typeof === REACT_ELEMENT_TYPE;
       }
-      var React16 = require_react(), REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = Symbol.for("react.profiler"), REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy"), REACT_ACTIVITY_TYPE = Symbol.for("react.activity"), REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"), ReactSharedInternals = React16.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, hasOwnProperty = Object.prototype.hasOwnProperty, isArrayImpl = Array.isArray, createTask = console.createTask ? console.createTask : function() {
+      var React17 = require_react(), REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = Symbol.for("react.profiler"), REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy"), REACT_ACTIVITY_TYPE = Symbol.for("react.activity"), REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"), ReactSharedInternals = React17.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, hasOwnProperty = Object.prototype.hasOwnProperty, isArrayImpl = Array.isArray, createTask = console.createTask ? console.createTask : function() {
         return null;
       };
-      React16 = {
+      React17 = {
         react_stack_bottom_frame: function(callStackForError) {
           return callStackForError();
         }
       };
       var specialPropKeyWarningShown;
       var didWarnAboutElementRef = {};
-      var unknownOwnerDebugStack = React16.react_stack_bottom_frame.bind(
-        React16,
+      var unknownOwnerDebugStack = React17.react_stack_bottom_frame.bind(
+        React17,
         UnknownOwner
       )();
       var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
@@ -24492,7 +24492,7 @@ function useViewTransitionState(to, { relative } = {}) {
 }
 
 // source/gui/client/App.tsx
-var import_react7 = __toESM(require_react(), 1);
+var import_react9 = __toESM(require_react(), 1);
 
 // source/gui/client/components/Button.tsx
 var import_react = __toESM(require_react(), 1);
@@ -24911,12 +24911,13 @@ var User = ({
 );
 
 // source/version.ts
-var EPIQ_VERSION = "1.2.2";
+var EPIQ_VERSION = "1.3.0";
 
 // source/gui/client/components/Header.tsx
 var import_jsx_runtime6 = __toESM(require_jsx_runtime(), 1);
 var Header = ({ state, connected, syncStatus }) => {
   const syncColor = syncStatus.status === "synced" ? GUI_THEME.green : syncStatus.status === "failed" ? GUI_THEME.red : GUI_THEME.accent;
+  const syncLabel = syncStatus.status === "failed" ? "-" : syncStatus.msg.toLowerCase();
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     Panel,
     {
@@ -24986,12 +24987,17 @@ var Header = ({ state, connected, syncStatus }) => {
                               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                                 "span",
                                 {
+                                  title: syncStatus.status === "failed" ? syncStatus.msg : void 0,
                                   style: {
                                     color: GUI_THEME.dim,
                                     minWidth: 72,
+                                    maxWidth: 220,
+                                    overflow: "hidden",
+                                    textOverflow: "ellipsis",
+                                    whiteSpace: "nowrap",
                                     textAlign: "right"
                                   },
-                                  children: connected ? syncStatus.msg.toLowerCase() : "-"
+                                  children: connected ? syncLabel : "-"
                                 }
                               ),
                               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -25042,7 +25048,7 @@ var Header = ({ state, connected, syncStatus }) => {
 };
 
 // source/gui/client/components/IssueDetails.tsx
-var import_react5 = __toESM(require_react(), 1);
+var import_react7 = __toESM(require_react(), 1);
 
 // source/gui/client/components/Aside.tsx
 var import_jsx_runtime7 = __toESM(require_jsx_runtime(), 1);
@@ -25062,9 +25068,60 @@ var Aside = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
   }
 );
 
-// source/gui/client/components/FormHeader.tsx
+// source/gui/client/components/CopyRef.tsx
+var import_react4 = __toESM(require_react(), 1);
 var import_jsx_runtime8 = __toESM(require_jsx_runtime(), 1);
-var FormHeader = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+var copyToClipboard = async (value) => {
+  try {
+    await navigator.clipboard.writeText(value);
+    return true;
+  } catch {
+    return false;
+  }
+};
+var CopyRef = ({ refValue }) => {
+  const [copied, setCopied] = (0, import_react4.useState)(false);
+  const resetTimer = (0, import_react4.useRef)(
+    void 0
+  );
+  (0, import_react4.useEffect)(() => () => clearTimeout(resetTimer.current), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "button",
+    {
+      type: "button",
+      title: `Copy ${refValue}`,
+      onClick: async (event) => {
+        event.stopPropagation();
+        if (await copyToClipboard(refValue)) {
+          setCopied(true);
+          clearTimeout(resetTimer.current);
+          resetTimer.current = setTimeout(() => setCopied(false), 1200);
+        }
+      },
+      style: {
+        fontFamily: "monospace",
+        fontSize: "inherit",
+        color: copied ? GUI_THEME.green : GUI_THEME.dim,
+        background: "transparent",
+        border: "none",
+        padding: 0,
+        cursor: "pointer",
+        transition: "color 120ms ease"
+      },
+      onMouseEnter: (event) => {
+        if (!copied) event.currentTarget.style.color = GUI_THEME.accent;
+      },
+      onMouseLeave: (event) => {
+        event.currentTarget.style.color = copied ? GUI_THEME.green : GUI_THEME.dim;
+      },
+      children: copied ? "copied!" : refValue
+    }
+  );
+};
+
+// source/gui/client/components/FormHeader.tsx
+var import_jsx_runtime9 = __toESM(require_jsx_runtime(), 1);
+var FormHeader = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
   "div",
   {
     style: {
@@ -25079,8 +25136,8 @@ var FormHeader = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
 );
 
 // source/gui/client/components/FormPrimitives.tsx
-var import_jsx_runtime9 = __toESM(require_jsx_runtime(), 1);
-var Input = (props) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+var import_jsx_runtime10 = __toESM(require_jsx_runtime(), 1);
+var Input = (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
   "input",
   {
     ...props,
@@ -25098,7 +25155,7 @@ var Input = (props) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     }
   }
 );
-var Textarea = (props) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+var Textarea = (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
   "textarea",
   {
     maxLength: props.maxLength ?? 1500,
@@ -25120,19 +25177,309 @@ var Textarea = (props) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     }
   }
 );
-var ActionRow = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+var ActionRow = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
   "div",
   {
     style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 8 },
     children
   }
 );
-var AddRow = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "flex", gap: 8, marginTop: 10 }, children });
-var ChipRow = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "flex", gap: 8, flexWrap: "wrap", marginTop: 10 }, children });
-var Empty = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { display: "inline-block", marginTop: 8, color: GUI_THEME.dim }, children });
+var AddRow = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { display: "flex", gap: 8, marginTop: 10 }, children });
+var ChipRow = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { display: "flex", gap: 8, flexWrap: "wrap", marginTop: 10 }, children });
+var Empty = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { display: "inline-block", marginTop: 8, color: GUI_THEME.dim }, children });
+
+// source/gui/client/components/IssueAttachments.tsx
+var import_react5 = __toESM(require_react(), 1);
+
+// source/gui/client/components/Section.tsx
+var import_jsx_runtime11 = __toESM(require_jsx_runtime(), 1);
+var Section = ({
+  title,
+  action,
+  children,
+  first = false
+}) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  "section",
+  {
+    style: {
+      padding: first ? "0px 0 14px 0" : "14px 0",
+      borderTop: first ? "none" : `1px solid ${GUI_THEME.line}`
+    },
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        "div",
+        {
+          style: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            gap: 12
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "span",
+              {
+                style: {
+                  color: GUI_THEME.secondary,
+                  fontSize: 10,
+                  textTransform: "uppercase",
+                  letterSpacing: "0.08em"
+                },
+                children: title
+              }
+            ),
+            action
+          ]
+        }
+      ),
+      children
+    ]
+  }
+);
+
+// source/gui/client/components/IssueAttachments.tsx
+var import_jsx_runtime12 = __toESM(require_jsx_runtime(), 1);
+var IssueAttachments = ({
+  issueId,
+  readonly,
+  attachments,
+  uploadStatus,
+  onUploadFiles,
+  onDeleteAttachment
+}) => {
+  const [dragging, setDragging] = (0, import_react5.useState)(false);
+  const [lightbox, setLightbox] = (0, import_react5.useState)(null);
+  const [broken, setBroken] = (0, import_react5.useState)({});
+  (0, import_react5.useEffect)(() => {
+    setLightbox(null);
+    setDragging(false);
+    setBroken({});
+  }, [issueId]);
+  (0, import_react5.useEffect)(() => {
+    if (!lightbox) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") setLightbox(null);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [lightbox]);
+  const canUpload = !readonly && Boolean(onUploadFiles);
+  const handleDrop = (event) => {
+    event.preventDefault();
+    setDragging(false);
+    if (!canUpload) return;
+    const files = Array.from(event.dataTransfer.files).filter(
+      (file) => file.type.startsWith("image/")
+    );
+    if (files.length > 0) onUploadFiles?.(issueId, files);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    Section,
+    {
+      title: `Attachments${attachments.length ? ` (${attachments.length})` : ""}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          "div",
+          {
+            onDragOver: (event) => {
+              if (!canUpload) return;
+              event.preventDefault();
+              setDragging(true);
+            },
+            onDragLeave: () => setDragging(false),
+            onDrop: handleDrop,
+            style: {
+              marginTop: 8,
+              padding: dragging ? 10 : 0,
+              border: dragging ? `1px dashed ${GUI_THEME.accent}` : "1px dashed transparent",
+              borderRadius: 4,
+              transition: "padding 0.12s ease, border-color 0.12s ease"
+            },
+            children: [
+              attachments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Empty, { children: canUpload ? "No attachments \u2014 drop an image here" : "No attachments" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexWrap: "wrap",
+                    gap: 8
+                  },
+                  children: attachments.map((attachment) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                    "div",
+                    {
+                      style: { position: "relative", width: 72, height: 72 },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                          "button",
+                          {
+                            type: "button",
+                            disabled: broken[attachment.id],
+                            onClick: () => setLightbox(attachment),
+                            title: `${attachment.name} (${Math.max(
+                              1,
+                              Math.round(attachment.bytes / 1024)
+                            )} KB)`,
+                            style: {
+                              padding: 0,
+                              border: `1px solid ${GUI_THEME.line}`,
+                              borderRadius: 4,
+                              background: GUI_THEME.panel2,
+                              cursor: broken[attachment.id] ? "default" : "zoom-in",
+                              overflow: "hidden",
+                              width: "100%",
+                              height: "100%"
+                            },
+                            children: broken[attachment.id] ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                              "span",
+                              {
+                                title: "Attachment unavailable (missing, corrupt, or over the size cap)",
+                                style: {
+                                  display: "flex",
+                                  alignItems: "center",
+                                  justifyContent: "center",
+                                  width: "100%",
+                                  height: "100%",
+                                  color: GUI_THEME.dim2,
+                                  fontSize: 9,
+                                  padding: 4,
+                                  textAlign: "center"
+                                },
+                                children: "unavailable"
+                              }
+                            ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                              "img",
+                              {
+                                src: `/media/${attachment.fileName}`,
+                                alt: attachment.name,
+                                loading: "lazy",
+                                onError: () => setBroken((prev) => ({ ...prev, [attachment.id]: true })),
+                                style: {
+                                  width: "100%",
+                                  height: "100%",
+                                  objectFit: "cover",
+                                  display: "block"
+                                }
+                              }
+                            )
+                          }
+                        ),
+                        attachment.canDelete && !readonly && onDeleteAttachment && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                          "button",
+                          {
+                            type: "button",
+                            title: "Delete attachment",
+                            onClick: () => onDeleteAttachment(issueId, attachment.id),
+                            style: {
+                              position: "absolute",
+                              top: 2,
+                              right: 2,
+                              width: 16,
+                              height: 16,
+                              lineHeight: "14px",
+                              padding: 0,
+                              border: `1px solid ${GUI_THEME.line}`,
+                              borderRadius: 3,
+                              background: "rgba(4, 5, 8, 0.75)",
+                              color: GUI_THEME.secondary,
+                              fontSize: 10,
+                              cursor: "pointer"
+                            },
+                            children: "\xD7"
+                          }
+                        )
+                      ]
+                    },
+                    attachment.id
+                  ))
+                }
+              ),
+              canUpload && attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "div",
+                {
+                  style: {
+                    marginTop: 8,
+                    color: GUI_THEME.dim2,
+                    fontSize: 10
+                  },
+                  children: "drop an image to attach"
+                }
+              ),
+              uploadStatus.state === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                "div",
+                {
+                  style: {
+                    marginTop: 8,
+                    color: GUI_THEME.secondary,
+                    fontSize: 11
+                  },
+                  children: [
+                    "uploading ",
+                    uploadStatus.name,
+                    "\u2026"
+                  ]
+                }
+              ),
+              uploadStatus.state === "error" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "div",
+                {
+                  style: {
+                    marginTop: 8,
+                    color: GUI_THEME.red,
+                    fontSize: 11
+                  },
+                  children: uploadStatus.message
+                }
+              )
+            ]
+          }
+        ),
+        lightbox && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          "div",
+          {
+            onClick: () => setLightbox(null),
+            style: {
+              position: "fixed",
+              inset: 0,
+              zIndex: 100,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexDirection: "column",
+              gap: 10,
+              background: "rgba(4, 5, 8, 0.88)",
+              cursor: "zoom-out"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "img",
+                {
+                  src: `/media/${lightbox.fileName}`,
+                  alt: lightbox.name,
+                  style: {
+                    maxWidth: "90vw",
+                    maxHeight: "85vh",
+                    borderRadius: 6,
+                    border: `1px solid ${GUI_THEME.line}`
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { color: GUI_THEME.secondary, fontSize: 11 }, children: [
+                lightbox.name,
+                " \xB7 ",
+                Math.max(1, Math.round(lightbox.bytes / 1024)),
+                " ",
+                "KB \xB7 esc to close"
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
 
 // source/gui/client/components/IssueComments.tsx
-var import_react4 = __toESM(require_react(), 1);
+var import_react6 = __toESM(require_react(), 1);
 
 // source/gui/client/lib/gui-format.helper.ts
 var timeAgo = (timestampMs) => {
@@ -25154,7 +25501,7 @@ var timeAgo = (timestampMs) => {
 };
 
 // source/gui/client/components/IssueComments.tsx
-var import_jsx_runtime10 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime13 = __toESM(require_jsx_runtime(), 1);
 var IssueComments = ({
   whoAmI,
   issueId,
@@ -25163,15 +25510,15 @@ var IssueComments = ({
   onAddComment,
   onDeleteComment
 }) => {
-  const [body, setBody] = (0, import_react4.useState)("");
+  const [body, setBody] = (0, import_react6.useState)("");
   const addComment = () => {
     const nextBody = body.trim();
     if (!nextBody) return;
     onAddComment?.(issueId, nextBody);
     setBody("");
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
-    comments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Empty, { children: "No comments" }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: comments.map((comment) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
+    comments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Empty, { children: "No comments" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: comments.map((comment) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "div",
       {
         style: {
@@ -25181,7 +25528,7 @@ var IssueComments = ({
           background: GUI_THEME.tertiary
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
             "div",
             {
               style: {
@@ -25191,15 +25538,15 @@ var IssueComments = ({
                 marginBottom: 8
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { color: GUI_THEME.secondary, fontSize: 10 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { color: GUI_THEME.secondary, fontSize: 10 }, children: [
                   comment.author.name ?? "unknown",
-                  comment.createdAt && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { style: { color: GUI_THEME.dim2 }, children: [
+                  comment.createdAt && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { style: { color: GUI_THEME.dim2 }, children: [
                     " ",
                     "\xB7 ",
                     timeAgo(comment.createdAt)
                   ] })
                 ] }),
-                comment.author.id === whoAmI.id && onDeleteComment && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                comment.author.id === whoAmI.id && onDeleteComment && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   Button,
                   {
                     variant: "ghost",
@@ -25214,7 +25561,7 @@ var IssueComments = ({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "div",
             {
               style: {
@@ -25229,8 +25576,8 @@ var IssueComments = ({
       },
       comment.id
     )) }),
-    !readonly && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { marginTop: 18 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    !readonly && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { marginTop: 18 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         Textarea,
         {
           maxLength: 120,
@@ -25245,64 +25592,18 @@ var IssueComments = ({
           style: { minHeight: 45 }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ActionRow, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Button, { onClick: addComment, children: "comment" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ActionRow, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { onClick: addComment, children: "comment" }) })
     ] })
   ] });
 };
 
-// source/gui/client/components/Section.tsx
-var import_jsx_runtime11 = __toESM(require_jsx_runtime(), 1);
-var Section = ({
-  title,
-  action,
-  children,
-  first = false
-}) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-  "section",
-  {
-    style: {
-      padding: first ? "0px 0 14px 0" : "14px 0",
-      borderTop: first ? "none" : `1px solid ${GUI_THEME.line}`
-    },
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-        "div",
-        {
-          style: {
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
-            gap: 12
-          },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-              "span",
-              {
-                style: {
-                  color: GUI_THEME.secondary,
-                  fontSize: 10,
-                  textTransform: "uppercase",
-                  letterSpacing: "0.08em"
-                },
-                children: title
-              }
-            ),
-            action
-          ]
-        }
-      ),
-      children
-    ]
-  }
-);
-
 // source/gui/client/components/Tabs.tsx
-var import_jsx_runtime12 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime14 = __toESM(require_jsx_runtime(), 1);
 var Tabs = ({
   activeTab,
   tabs,
   onChange
-}) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
   "div",
   {
     style: {
@@ -25313,7 +25614,7 @@ var Tabs = ({
     },
     children: tabs.map((tab) => {
       const active = tab.id === activeTab;
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
         "button",
         {
           type: "button",
@@ -25331,7 +25632,7 @@ var Tabs = ({
           },
           children: [
             tab.label,
-            typeof tab.count === "number" && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+            typeof tab.count === "number" && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
               "span",
               {
                 style: { color: tab.count ? GUI_THEME.secondary : GUI_THEME.dim },
@@ -25352,7 +25653,7 @@ var Tabs = ({
 );
 
 // source/gui/client/components/IssueDetails.tsx
-var import_jsx_runtime13 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime15 = __toESM(require_jsx_runtime(), 1);
 var IssueDetails = ({
   whoAmI,
   comments,
@@ -25370,18 +25671,22 @@ var IssueDetails = ({
   onReopenIssue,
   onAddComment,
   onDeleteComment,
+  attachments,
+  attachmentUploadStatus,
+  onUploadAttachments,
+  onDeleteAttachment,
   knownTags: tags,
   knownAssignees: assignees
 }) => {
-  const [title, setTitle] = (0, import_react5.useState)("");
-  const [description, setDescription] = (0, import_react5.useState)("");
-  const [tagName, setTagName] = (0, import_react5.useState)("");
-  const [assigneeName, setAssigneeName] = (0, import_react5.useState)("");
-  const [editingTitle, setEditingTitle] = (0, import_react5.useState)(false);
-  const [editingDescription, setEditingDescription] = (0, import_react5.useState)(false);
-  const [addingTag, setAddingTag] = (0, import_react5.useState)(false);
-  const [addingAssignee, setAddingAssignee] = (0, import_react5.useState)(false);
-  (0, import_react5.useEffect)(() => {
+  const [title, setTitle] = (0, import_react7.useState)("");
+  const [description, setDescription] = (0, import_react7.useState)("");
+  const [tagName, setTagName] = (0, import_react7.useState)("");
+  const [assigneeName, setAssigneeName] = (0, import_react7.useState)("");
+  const [editingTitle, setEditingTitle] = (0, import_react7.useState)(false);
+  const [editingDescription, setEditingDescription] = (0, import_react7.useState)(false);
+  const [addingTag, setAddingTag] = (0, import_react7.useState)(false);
+  const [addingAssignee, setAddingAssignee] = (0, import_react7.useState)(false);
+  (0, import_react7.useEffect)(() => {
     setTitle(issue?.title ?? "");
     setDescription(issue?.description ?? "");
     setTagName("");
@@ -25441,9 +25746,9 @@ var IssueDetails = ({
   const availableAssignees = assignees.filter(
     (assignee) => !issue?.assignees.some((issueAssignee) => issueAssignee.id === assignee.id)
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Aside, { children: issue ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(FormHeader, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Aside, { children: issue ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(FormHeader, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "span",
         {
           style: {
@@ -25452,19 +25757,19 @@ var IssueDetails = ({
             textTransform: "uppercase",
             letterSpacing: "0.08em"
           },
-          children: issue.ref && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { fontFamily: "monospace", color: GUI_THEME.dim }, children: "#" + issue.ref })
+          children: issue.ref && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CopyRef, { refValue: issue.ref })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { variant: "ghost", onClick: onClose, children: "\xD7" })
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { variant: "ghost", onClick: onClose, children: "\xD7" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Tabs, { tabs, activeTab, onChange: onChangeTab }),
-    activeTab === "overview" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Tabs, { tabs, activeTab, onChange: onChangeTab }),
+    activeTab === "overview" && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         Section,
         {
           first: true,
           title: "Title",
-          action: !issue.readonly && !editingTitle && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          action: !issue.readonly && !editingTitle && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             Button,
             {
               variant: "ghost",
@@ -25472,8 +25777,8 @@ var IssueDetails = ({
               children: "edit"
             }
           ),
-          children: editingTitle ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          children: editingTitle ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               Input,
               {
                 value: title,
@@ -25485,11 +25790,11 @@ var IssueDetails = ({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ActionRow, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { onClick: saveTitle, children: "save" }),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { variant: "ghost", onClick: cancelTitle, children: "cancel" })
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(ActionRow, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { onClick: saveTitle, children: "save" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { variant: "ghost", onClick: cancelTitle, children: "cancel" })
             ] })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "div",
             {
               style: {
@@ -25504,11 +25809,11 @@ var IssueDetails = ({
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         Section,
         {
           title: "Description",
-          action: !issue.readonly && !editingDescription && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          action: !issue.readonly && !editingDescription && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             Button,
             {
               variant: "ghost",
@@ -25516,8 +25821,8 @@ var IssueDetails = ({
               children: "edit"
             }
           ),
-          children: editingDescription ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          children: editingDescription ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               Textarea,
               {
                 value: description,
@@ -25532,31 +25837,34 @@ var IssueDetails = ({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ActionRow, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { onClick: saveDescription, children: "save" }),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { variant: "ghost", onClick: cancelDescription, children: "cancel" })
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(ActionRow, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { onClick: saveDescription, children: "save" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { variant: "ghost", onClick: cancelDescription, children: "cancel" })
             ] })
-          ] }) : issue.description ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          ] }) : issue.description ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "p",
             {
               style: {
                 lineHeight: 1.55,
                 whiteSpace: "pre-wrap",
                 margin: "8px 0 0",
+                padding: "12px 16px",
+                background: "rgba(0, 0, 0, 0.22)",
+                borderRadius: 8,
                 color: GUI_THEME.primary
               },
               children: issue.description
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Empty, { children: "No description" })
+          ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Empty, { children: "No description" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
         Section,
         {
           title: "Tags",
-          action: !issue.readonly && !addingTag && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { variant: "ghost", onClick: () => setAddingTag(true), children: "+" }) || addingTag && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { variant: "ghost", onClick: () => setAddingTag(false), children: "-" }),
+          action: !issue.readonly && !addingTag && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { variant: "ghost", onClick: () => setAddingTag(true), children: "+" }) || addingTag && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { variant: "ghost", onClick: () => setAddingTag(false), children: "-" }),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChipRow, { children: issue.tags.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Empty, { children: "No tags" }) : issue.tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChipRow, { children: issue.tags.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Empty, { children: "No tags" }) : issue.tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
               Button,
               {
                 variant: "chip",
@@ -25572,7 +25880,7 @@ var IssueDetails = ({
               },
               tag.id
             )) }),
-            addingTag && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChipRow, { children: availableTags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+            addingTag && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChipRow, { children: availableTags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
               Button,
               {
                 variant: "chip",
@@ -25587,8 +25895,8 @@ var IssueDetails = ({
               },
               tag.id
             )) }),
-            addingTag && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(AddRow, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            addingTag && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(AddRow, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                 Input,
                 {
                   value: tagName,
@@ -25604,23 +25912,23 @@ var IssueDetails = ({
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { onClick: addTag, children: "add" })
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { onClick: addTag, children: "add" })
             ] })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
         Section,
         {
           title: "Assignees",
-          action: !issue.readonly && !addingAssignee && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          action: !issue.readonly && !addingAssignee && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             Button,
             {
               variant: "ghost",
               onClick: () => setAddingAssignee(true),
               children: "+"
             }
-          ) || addingAssignee && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          ) || addingAssignee && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             Button,
             {
               variant: "ghost",
@@ -25629,7 +25937,7 @@ var IssueDetails = ({
             }
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChipRow, { children: issue.assignees.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Empty, { children: "No assignees" }) : issue.assignees.map((assignee) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChipRow, { children: issue.assignees.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Empty, { children: "No assignees" }) : issue.assignees.map((assignee) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
               Button,
               {
                 variant: "chip",
@@ -25646,7 +25954,7 @@ var IssueDetails = ({
               },
               assignee.id
             )) }),
-            addingAssignee && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChipRow, { children: availableAssignees.map((assignee) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+            addingAssignee && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChipRow, { children: availableAssignees.map((assignee) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
               Button,
               {
                 variant: "chip",
@@ -25661,8 +25969,8 @@ var IssueDetails = ({
               },
               assignee.id
             )) }),
-            addingAssignee && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(AddRow, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            addingAssignee && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(AddRow, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                 Input,
                 {
                   value: assigneeName,
@@ -25678,21 +25986,32 @@ var IssueDetails = ({
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { onClick: addAssignee, children: "add" })
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { onClick: addAssignee, children: "add" })
             ] })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        IssueAttachments,
+        {
+          issueId: issue.id,
+          readonly: Boolean(issue.readonly),
+          attachments,
+          uploadStatus: attachmentUploadStatus,
+          onUploadFiles: onUploadAttachments,
+          onDeleteAttachment
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         Section,
         {
           title: "Actions",
-          action: issue.isClosed ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { onClick: () => onReopenIssue(issue.id), children: "reopen issue" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { onClick: () => onCloseIssue(issue.id), children: "close issue" }),
+          action: issue.isClosed ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { onClick: () => onReopenIssue(issue.id), children: "reopen issue" }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { onClick: () => onCloseIssue(issue.id), children: "close issue" }),
           children: ""
         }
       )
     ] }),
-    activeTab === "comments" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    activeTab === "comments" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       IssueComments,
       {
         whoAmI,
@@ -25703,15 +26022,15 @@ var IssueDetails = ({
         onDeleteComment
       }
     )
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Empty, { children: "Select an issue" }) });
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Empty, { children: "Select an issue" }) });
 };
 
 // source/gui/client/components/SwimlaneColumn.tsx
-var import_react6 = __toESM(require_react(), 1);
+var import_react8 = __toESM(require_react(), 1);
 
 // source/gui/client/components/IconComment.tsx
-var import_jsx_runtime14 = __toESM(require_jsx_runtime(), 1);
-var IconComment = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+var import_jsx_runtime16 = __toESM(require_jsx_runtime(), 1);
+var IconComment = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
   "svg",
   {
     width: size,
@@ -25719,7 +26038,7 @@ var IconComment = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime14.js
     viewBox: "0 0 16 16",
     fill: "none",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "path",
       {
         d: "M3.9 2.6h5.2a2.4 2.4 0 0 1 2.4 2.4v2.5a2.4 2.4 0 0 1-2.4 2.4H6.6l-1.8 2.1.2-2.1H3.9a2.4 2.4 0 0 1-2.4-2.4V5a2.4 2.4 0 0 1 2.4-2.4Z",
@@ -25734,7 +26053,7 @@ var IconComment = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime14.js
 );
 
 // source/gui/client/components/TicketCard.tsx
-var import_jsx_runtime15 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime17 = __toESM(require_jsx_runtime(), 1);
 var TicketCard = ({
   ticket,
   index,
@@ -25747,7 +26066,7 @@ var TicketCard = ({
   onDropIssueAt
 }) => {
   const getVisualTargetIndex = (isAfterMiddle) => index + (isAfterMiddle ? 1 : 0);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "div",
     {
       draggable: !ticket.readonly,
@@ -25788,7 +26107,7 @@ var TicketCard = ({
         border: `1px solid ${isSelected ? GUI_THEME.accent : "transparent"}`
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "div",
           {
             style: {
@@ -25801,7 +26120,7 @@ var TicketCard = ({
             children: isSelected ? "\u276F" : index + 1
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
           "div",
           {
             style: {
@@ -25812,7 +26131,7 @@ var TicketCard = ({
               gap: 12
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
                 "div",
                 {
                   style: {
@@ -25823,7 +26142,7 @@ var TicketCard = ({
                     flex: 1
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                       "div",
                       {
                         style: {
@@ -25833,23 +26152,10 @@ var TicketCard = ({
                           fontWeight: 500,
                           fontSize: 12
                         },
-                        children: ticket.ref && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-                          "span",
-                          {
-                            style: {
-                              fontFamily: "monospace",
-                              marginRight: 6,
-                              color: GUI_THEME.dim
-                            },
-                            children: [
-                              "#",
-                              ticket.ref
-                            ]
-                          }
-                        )
+                        children: ticket.ref && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { marginRight: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CopyRef, { refValue: ticket.ref }) })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                       "div",
                       {
                         style: {
@@ -25862,7 +26168,7 @@ var TicketCard = ({
                         children: ticket.title
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                       "div",
                       {
                         style: {
@@ -25871,7 +26177,7 @@ var TicketCard = ({
                           gap: 6,
                           alignItems: "center"
                         },
-                        children: ticket.tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                        children: ticket.tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                           "span",
                           {
                             style: {
@@ -25891,7 +26197,7 @@ var TicketCard = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                 "div",
                 {
                   style: {
@@ -25901,7 +26207,7 @@ var TicketCard = ({
                     flexShrink: 0,
                     paddingTop: 2
                   },
-                  children: commentCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+                  children: commentCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
                     "button",
                     {
                       type: "button",
@@ -25939,14 +26245,14 @@ var TicketCard = ({
                         event.currentTarget.style.transform = "translateY(0)";
                       },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconComment, {}),
-                        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: commentCount })
+                        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconComment, {}),
+                        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: commentCount })
                       ]
                     }
                   )
                 }
               ),
-              ticket.assignees.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              ticket.assignees.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                 "div",
                 {
                   style: {
@@ -25956,7 +26262,7 @@ var TicketCard = ({
                     paddingTop: 2,
                     marginTop: "-4px"
                   },
-                  children: ticket.assignees.map((assignee, idx) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(User, { user: assignee, index: idx, isFocus: isSelected }))
+                  children: ticket.assignees.map((assignee, idx) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(User, { user: assignee, index: idx, isFocus: isSelected }))
                 }
               )
             ]
@@ -25968,7 +26274,7 @@ var TicketCard = ({
 };
 
 // source/gui/client/components/SwimlaneColumn.tsx
-var import_jsx_runtime16 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime18 = __toESM(require_jsx_runtime(), 1);
 var SwimlaneColumn = ({
   swimlane,
   selected,
@@ -25984,7 +26290,7 @@ var SwimlaneColumn = ({
   onDragOverIssue,
   onDragLeave
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     Panel,
     {
       as: "section",
@@ -26024,7 +26330,7 @@ var SwimlaneColumn = ({
         onDragLeave();
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
           "header",
           {
             style: {
@@ -26035,7 +26341,7 @@ var SwimlaneColumn = ({
               alignItems: "center"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
                 "div",
                 {
                   style: {
@@ -26044,30 +26350,30 @@ var SwimlaneColumn = ({
                     gap: 8
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                       "span",
                       {
                         style: { color: selected ? GUI_THEME.accent : GUI_THEME.secondary },
                         children: selected ? "\u276F" : " "
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                       "strong",
                       {
                         style: { color: selected ? GUI_THEME.accent : GUI_THEME.primary },
                         children: swimlane.title
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { style: { color: GUI_THEME.dim }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { style: { color: GUI_THEME.dim }, children: [
                       "(",
                       swimlane.issues.length,
                       ")"
                     ] }),
-                    swimlane.readonly && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "\u{1F512}" })
+                    swimlane.readonly && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: "\u{1F512}" })
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                 Button,
                 {
                   variant: "ghost",
@@ -26080,9 +26386,9 @@ var SwimlaneColumn = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { overflow: "auto", paddingTop: 4, flex: 1 }, children: swimlane.issues.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-          dropIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DropIndicator, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { overflow: "auto", paddingTop: 4, flex: 1 }, children: swimlane.issues.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+          dropIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DropIndicator, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "div",
             {
               style: {
@@ -26094,10 +26400,10 @@ var SwimlaneColumn = ({
               children: "Drop issue here"
             }
           )
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-          swimlane.issues.map((ticket, index) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react6.default.Fragment, { children: [
-            dropIndex === index && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DropIndicator, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+          swimlane.issues.map((ticket, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react8.default.Fragment, { children: [
+            dropIndex === index && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DropIndicator, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               TicketCard,
               {
                 ticket,
@@ -26115,7 +26421,7 @@ var SwimlaneColumn = ({
               }
             )
           ] }, ticket.id)),
-          dropIndex === swimlane.issues.length && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DropIndicator, {})
+          dropIndex === swimlane.issues.length && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DropIndicator, {})
         ] }) })
       ]
     }
@@ -26253,9 +26559,73 @@ var updateIssueInGuiState = (state, issueId, updateIssue) => ({
   }))
 });
 
+// source/gui/client/lib/compress-image.ts
+var MAX_LONG_EDGE = 1600;
+var DEFAULT_MAX_KB = 500;
+var QUALITY_STEPS = [0.8, 0.7, 0.6, 0.5, 0.4];
+var toBlob = (canvas, type, quality) => new Promise((resolve) => canvas.toBlob(resolve, type, quality));
+var replaceExtension = (name, ext) => {
+  const base = name.replace(/\.[a-z0-9]+$/i, "");
+  return `${base || "image"}.${ext}`;
+};
+var compressImage = async (file, maxKb = DEFAULT_MAX_KB) => {
+  const maxBytes = maxKb * 1024;
+  if (file.type === "image/gif") {
+    if (file.size <= maxBytes) {
+      return { blob: file, name: file.name };
+    }
+    return {
+      error: `GIFs are attached as-is and this one exceeds ${maxKb} KB`
+    };
+  }
+  let bitmap;
+  try {
+    bitmap = await createImageBitmap(file);
+  } catch {
+    return { error: "Not a supported image" };
+  }
+  const scale = Math.min(
+    1,
+    MAX_LONG_EDGE / Math.max(bitmap.width, bitmap.height)
+  );
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.max(1, Math.round(bitmap.width * scale));
+  canvas.height = Math.max(1, Math.round(bitmap.height * scale));
+  const context = canvas.getContext("2d");
+  if (!context) {
+    bitmap.close();
+    return { error: "Unable to process image" };
+  }
+  context.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
+  bitmap.close();
+  for (const quality of QUALITY_STEPS) {
+    const blob = await toBlob(canvas, "image/webp", quality);
+    if (blob && blob.size <= maxBytes) {
+      return { blob, name: replaceExtension(file.name, "webp") };
+    }
+  }
+  return {
+    error: `Unable to compress image under ${maxKb} KB`
+  };
+};
+var blobToBase64 = (blob) => new Promise((resolve, reject) => {
+  const reader = new FileReader();
+  reader.onload = () => {
+    const dataUrl = String(reader.result ?? "");
+    const base64 = dataUrl.split(",")[1];
+    if (!base64) {
+      reject(new Error("Unable to encode image"));
+      return;
+    }
+    resolve(base64);
+  };
+  reader.onerror = () => reject(new Error("Unable to read image"));
+  reader.readAsDataURL(blob);
+});
+
 // source/gui/client/App.tsx
-var import_jsx_runtime17 = __toESM(require_jsx_runtime(), 1);
-var DropIndicator = () => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+var import_jsx_runtime19 = __toESM(require_jsx_runtime(), 1);
+var DropIndicator = () => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
   "div",
   {
     style: {
@@ -26270,34 +26640,51 @@ var DropIndicator = () => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
 var App = () => {
   const { boardId, issueId } = useParams();
   const [searchParams, setSearchParams] = useSearchParams();
-  const [connected, setConnected] = (0, import_react7.useState)(false);
-  const [syncStatus, setSyncStatus] = (0, import_react7.useState)({
+  const [connected, setConnected] = (0, import_react9.useState)(false);
+  const [syncStatus, setSyncStatus] = (0, import_react9.useState)({
     status: "synced",
     msg: "idle"
   });
-  const [state, setState] = (0, import_react7.useState)(null);
-  const [dragOverSwimlaneId, setDragOverSwimlaneId] = (0, import_react7.useState)(
+  const [state, setState] = (0, import_react9.useState)(null);
+  const [dragOverSwimlaneId, setDragOverSwimlaneId] = (0, import_react9.useState)(
     null
   );
-  const [dropTarget, setDropTarget] = (0, import_react7.useState)(null);
-  const [boardMenuOpen, setBoardMenuOpen] = (0, import_react7.useState)(false);
-  const [createIssueModal, setCreateIssueModal] = (0, import_react7.useState)(null);
-  const boardMenuRef = (0, import_react7.useRef)(null);
-  const socketRef = (0, import_react7.useRef)(null);
+  const [dropTarget, setDropTarget] = (0, import_react9.useState)(null);
+  const [boardMenuOpen, setBoardMenuOpen] = (0, import_react9.useState)(false);
+  const [createIssueModal, setCreateIssueModal] = (0, import_react9.useState)(null);
+  const boardMenuRef = (0, import_react9.useRef)(null);
+  const socketRef = (0, import_react9.useRef)(null);
   const selectedTab = searchParams.get("tab") === "comments" ? "comments" : "overview";
   const navigate = useNavigate();
   const selectedBoard = (state && boardId ? findBoard(state, boardId) : null) ?? state?.boards[0] ?? null;
   const boardSlug = selectedBoard?.ref ?? boardId;
   const selectedIssue = state && issueId ? findIssue(state, issueId) : null;
+  (0, import_react9.useEffect)(() => {
+    const onPaste = (event) => {
+      if (!selectedIssue || selectedIssue.readonly) return;
+      const target = event.target;
+      if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable)) {
+        return;
+      }
+      const files = Array.from(event.clipboardData?.items ?? []).filter((item) => item.kind === "file" && item.type.startsWith("image/")).map((item) => item.getAsFile()).filter((file) => Boolean(file));
+      if (files.length === 0) return;
+      event.preventDefault();
+      void uploadIssueAttachments(selectedIssue.id, files);
+    };
+    window.addEventListener("paste", onPaste);
+    return () => window.removeEventListener("paste", onPaste);
+  });
   const closeIssueDetails = () => {
     if (!boardSlug) return;
     void navigate(`/board/${boardSlug}`);
   };
   const commentsByIssueId = state?.commentsByIssueId ?? {};
+  const attachmentsByIssueId = state?.attachmentsByIssueId ?? {};
+  const [attachmentUploadStatus, setAttachmentUploadStatus] = (0, import_react9.useState)({ state: "idle" });
   const requestState = () => {
     socketRef.current?.send(JSON.stringify({ type: "state:get" }));
   };
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const socket = new WebSocket(
       `ws://${window.location.host}/ws${boardId ? `?boardId=${boardId}` : ""}`
     );
@@ -26341,12 +26728,12 @@ var App = () => {
       socket.close();
     };
   }, [boardId, navigate]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!boardId && state?.boards[0]) {
       void navigate(`/board/${state.boards[0].ref}`, { replace: true });
     }
   }, [boardId, state, navigate]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const close = (event) => {
       if (boardMenuRef.current && !boardMenuRef.current.contains(event.target)) {
         setBoardMenuOpen(false);
@@ -26531,6 +26918,68 @@ var App = () => {
     });
     send("issue:comment:add", { issueId: issueId2, body });
   };
+  const uploadIssueAttachments = async (issueId2, files) => {
+    for (const file of files) {
+      setAttachmentUploadStatus({ state: "uploading", name: file.name });
+      const compressed = await compressImage(file, state?.attachmentMaxKb);
+      if ("error" in compressed) {
+        setAttachmentUploadStatus({ state: "error", message: compressed.error });
+        return;
+      }
+      try {
+        const dataBase64 = await blobToBase64(compressed.blob);
+        const response = await fetch("/api/attachments", {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({
+            issueId: issueId2,
+            name: compressed.name,
+            dataBase64
+          })
+        });
+        const payload = await response.json();
+        if (!response.ok) {
+          setAttachmentUploadStatus({
+            state: "error",
+            message: payload?.message ?? "Upload failed"
+          });
+          return;
+        }
+        const nextState = getResultValue(payload);
+        if (nextState) setState(nextState);
+      } catch (error) {
+        setAttachmentUploadStatus({
+          state: "error",
+          message: error instanceof Error ? error.message : "Upload failed"
+        });
+        return;
+      }
+    }
+    setAttachmentUploadStatus({ state: "idle" });
+  };
+  const deleteIssueAttachment = async (_issueId, attachmentId) => {
+    try {
+      const response = await fetch(
+        `/api/attachments/${encodeURIComponent(attachmentId)}`,
+        { method: "DELETE" }
+      );
+      const payload = await response.json();
+      if (!response.ok) {
+        setAttachmentUploadStatus({
+          state: "error",
+          message: payload?.message ?? "Unable to delete attachment"
+        });
+        return;
+      }
+      const nextState = getResultValue(payload);
+      if (nextState) setState(nextState);
+    } catch (error) {
+      setAttachmentUploadStatus({
+        state: "error",
+        message: error instanceof Error ? error.message : "Unable to delete attachment"
+      });
+    }
+  };
   const deleteIssueComment = (_issueId, commentId) => {
     setState((prev) => {
       if (!prev) return prev;
@@ -26548,7 +26997,7 @@ var App = () => {
     });
     send("issue:comment:delete", { commentId });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
     {
       style: {
@@ -26560,8 +27009,8 @@ var App = () => {
         flexDirection: "column"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Header, { state, connected, syncStatus }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Header, { state, connected, syncStatus }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
           "div",
           {
             style: {
@@ -26570,8 +27019,8 @@ var App = () => {
               overflow: "hidden"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("main", { style: { padding: "0 30px 30px 30px", overflow: "auto", flex: 1 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { padding: "20px 10px" }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("main", { style: { padding: "0 30px 30px 30px", overflow: "auto", flex: 1 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { padding: "20px 10px" }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                   Dropdown,
                   {
                     label: "Board:",
@@ -26587,7 +27036,7 @@ var App = () => {
                     onSelect: selectBoard
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { display: "flex", gap: 8 }, children: selectedBoard?.swimlanes.map((swimlane) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { display: "flex", gap: 8 }, children: selectedBoard?.swimlanes.map((swimlane) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                   SwimlaneColumn,
                   {
                     swimlane,
@@ -26607,7 +27056,7 @@ var App = () => {
                   swimlane.id
                 )) })
               ] }),
-              selectedIssue && state?.user && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              selectedIssue && state?.user && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 IssueDetails,
                 {
                   whoAmI: state.user,
@@ -26624,6 +27073,10 @@ var App = () => {
                   onRemoveAssignee: removeIssueAssignee,
                   onAddComment: addIssueComment,
                   onDeleteComment: deleteIssueComment,
+                  attachments: attachmentsByIssueId[selectedIssue.id] ?? [],
+                  attachmentUploadStatus,
+                  onUploadAttachments: uploadIssueAttachments,
+                  onDeleteAttachment: deleteIssueAttachment,
                   onReopenIssue: reopenIssue,
                   onCloseIssue: closeIssue,
                   knownTags: state.tags ?? [],
@@ -26633,7 +27086,7 @@ var App = () => {
             ]
           }
         ),
-        createIssueModal && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        createIssueModal && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           CreateIssueModal,
           {
             title: createIssueModal.title,
@@ -26648,14 +27101,14 @@ var App = () => {
 };
 
 // source/gui/client/main.tsx
-var import_jsx_runtime18 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime20 = __toESM(require_jsx_runtime(), 1);
 (0, import_client.createRoot)(document.getElementById("root")).render(
-  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BrowserRouter, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Routes, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Route, { path: "/", element: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(App, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Route, { path: "/board/:boardId", element: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(App, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Route, { path: "/board/:boardId/issue/:issueId", element: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(App, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Route, { path: "/board/:boardId/:issueId", element: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(App, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Route, { path: "*", element: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Navigate, { to: "/", replace: true }) })
+  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BrowserRouter, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Routes, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Route, { path: "/", element: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(App, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Route, { path: "/board/:boardId", element: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(App, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Route, { path: "/board/:boardId/issue/:issueId", element: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(App, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Route, { path: "/board/:boardId/:issueId", element: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(App, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Route, { path: "*", element: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Navigate, { to: "/", replace: true }) })
   ] }) })
 );
 /*! Bundled license information: