@goodandready/dsh-image-gen 0.11.25 → 0.11.27

package/lib/attachment-helper.js

@@ -112,3 +112,28 @@ export function renderToolOutput(value) {
   }
   return blocks
 }
+
+export function buildPresentationMeta(value) {
+  if (!value || typeof value !== 'object') return null
+  const meta = {
+    url: value.url,
+    path: value.path,
+    width: value.width,
+    height: value.height,
+    seed: value.seed,
+    prompt: value.prompt,
+    provider: value.provider,
+    model: value.model,
+    attachment: value.attachment,
+    attachmentId: value.attachment?.attachmentId || value.attachmentId,
+  }
+  if (value.images) meta.images = value.images
+  if (value.cells) meta.cells = value.cells
+  if (value.base_prompt) meta.base_prompt = value.base_prompt
+  if (value.blind_mode !== undefined) meta.blind_mode = value.blind_mode
+  if (value.light) meta.light = value.light
+  if (value.dark) meta.dark = value.dark
+  if (value.html_snippet) meta.html_snippet = value.html_snippet
+  if (value.css_snippet) meta.css_snippet = value.css_snippet
+  return meta
+}

package/lib/client.js

@@ -145,11 +145,15 @@ window.__ModuleLoader__.load({
 .ig-progress-meta{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--dsw-alias-label-secondary);font-weight:500}
 .ig-progress-track{height:6px;width:100%;background:var(--dsw-alias-bg-layer-1);border-radius:3px;overflow:hidden;position:relative}
 .ig-progress-fill{height:100%;background:var(--dsw-alias-state-brand);border-radius:3px;transition:width 0.25s ease-in-out}
+.ig-progress-indeterminate{width:40%;animation:ig-indeterminate-slide 1.5s infinite ease-in-out}
+@keyframes ig-indeterminate-slide{0%{transform:translateX(-100%)}50%{transform:translateX(150%)}100%{transform:translateX(300%)}}
 
 .ig-draft-overlay{position:absolute;bottom:8px;left:8px;padding:3px 8px;border-radius:4px;background:color-mix(in srgb, var(--dsw-alias-bg-layer-1) 80%, transparent);font-size:11px;font-weight:600;color:var(--dsw-alias-label-primary);display:flex;align-items:center;gap:6px;backdrop-filter:blur(4px)}
 
 @media (prefers-reduced-motion: reduce){
   .ig-draft-img,.ig-final-img{transition:none !important}
+  .ig-progress-fill{transition:none !important;animation:none !important}
+  .ig-progress-indeterminate{animation:none !important;width:100%;opacity:0.6}
 }
 
 /* Asset Vault & Studio (#158, #159) */
@@ -1369,17 +1373,53 @@ window.__ModuleLoader__.load({
     }
 
     // -------------------------------------------------------------- Toolview Component
-    const IMAGE_URL_RE = /https?:\/\/[^\s)]+\.(png|jpg|jpeg|webp|gif)(\?[^\s)]*)?/i
+    const HTTP_IMAGE_URL_RE = /https?:\/\/[^\s)]+\.(png|jpg|jpeg|webp|gif)(\?[^\s)]*)?/i
+    const RELATIVE_IMAGE_URL_RE = /(\/dsh-image-gen\/image\?[^\s)"'<>]+)/i
+    const MARKDOWN_IMAGE_RE = /!\[.*?\]\(((\/|https?:\/\/)[^\s)]+)\)/i
+    const MARKDOWN_LINK_RE = /\[.*?\]\(((\/|https?:\/\/)[^\s)]+)\)/i
 
     function readResult(block) {
       if (!block) return { text: '', url: '', attachment: null }
       const text = block.output || block.text || ''
-      const attachment = block.attachment || (block.attachments && block.attachments[0]) || null
-      const linked = text.match(IMAGE_URL_RE)
+      const meta = block.presentationMeta || block.meta || block.data || block.result || null
+
+      let attachment = block.attachment
+        || (Array.isArray(block.attachments) && block.attachments[0])
+        || meta?.attachment
+        || null
+
+      let url = meta?.url || block.url || ''
+
+      if (!url && attachment) {
+        url = attachmentImageUrl(attachment)
+      }
+
+      let cleanText = text
+      if (!url && text) {
+        const mdImg = text.match(MARKDOWN_IMAGE_RE)
+        const relUrl = text.match(RELATIVE_IMAGE_URL_RE)
+        const httpUrl = text.match(HTTP_IMAGE_URL_RE)
+        const mdLink = text.match(MARKDOWN_LINK_RE)
+
+        if (mdImg) {
+          url = mdImg[1]
+          cleanText = text.replace(mdImg[0], '').trim()
+        } else if (relUrl) {
+          url = relUrl[1]
+          cleanText = text.replace(relUrl[0], '').trim()
+        } else if (httpUrl) {
+          url = httpUrl[0]
+          cleanText = text.replace(httpUrl[0], '').trim()
+        } else if (mdLink) {
+          url = mdLink[1]
+          cleanText = text.replace(mdLink[0], '').trim()
+        }
+      }
+
       return {
         attachment,
-        url: linked ? linked[0] : '',
-        text: linked ? text.replace(linked[0], '').trim() : text,
+        url,
+        text: cleanText,
       }
     }
 
@@ -1586,6 +1626,7 @@ window.__ModuleLoader__.load({
         const draftSrc = block && (block.draftUrl || block.previewUrl || '')
         body.push(react.createElement(ProgressiveImagePreview, {
           key: 'prog-img',
+          callId: block && (block.id || block.callId || block.toolCallId || ''),
           src: displaySrc,
           draftSrc,
           isRunning: running,
@@ -1694,8 +1735,9 @@ window.__ModuleLoader__.load({
         react,
         t,
         parsed,
-        imgUrl: parsed.imageUrl || parsed.url || parsed.attachment?.url,
-        targetRef: parsed.attachmentId || parsed.attachment?.attachmentId || parsed.imageUrl || parsed.url,
+        imgUrl: parsed.url || (parsed.attachment ? attachmentImageUrl(parsed.attachment) : ''),
+        targetRef: (parsed.attachment && (parsed.attachment.attachmentId || parsed.attachment.id)) || parsed.url || 'latest',
+        sendActionPrompt,
         onClose: () => setInpaintOpen(false),
       }) : null
 
@@ -1761,23 +1803,76 @@ window.__ModuleLoader__.load({
           current.seed !== undefined ? `seed: ${current.seed}` : (current.timestamp ? new Date(current.timestamp).toLocaleTimeString() : '')
         )
       )
-    }    // -------------------------------------------------------------- Progressive Draft & Live Progress Preview (#147, #329)
+    }    // -------------------------------------------------------------- Progressive Draft & Live Progress Preview (#147, #329, #379)
     function ProgressiveImagePreview(props) {
       const src = props.src
-      const draftSrc = props.draftSrc
       const isRunning = props.isRunning
-      const progress = typeof props.progress === 'number' ? Math.min(100, Math.max(0, props.progress)) : undefined
-      const step = props.step
-      const stage = props.stage || (progress !== undefined && progress < 100 ? 'Rendering...' : 'Complete')
+      const callId = props.callId
       const alt = props.alt || 'Generated image'
       const t = props.t || ((k) => k)
 
       const [loaded, setLoaded] = react.useState(false)
+      const [liveState, setLiveState] = react.useState({
+        progress: undefined,
+        step: undefined,
+        stage: undefined,
+        draftSrc: '',
+      })
 
       react.useEffect(() => {
         setLoaded(false)
       }, [src])
 
+      // Subscribe to live events transport when running and callId is present (#379)
+      react.useEffect(() => {
+        const EventSourceImpl = typeof window !== 'undefined' ? window.EventSource : undefined
+        if (!isRunning || !callId || !EventSourceImpl) {
+          return
+        }
+        let es
+        try {
+          es = new EventSourceImpl('/dsh-image-gen/live-events?callId=' + encodeURIComponent(callId))
+          es.onmessage = (e) => {
+            try {
+              const data = JSON.parse(e.data)
+              if (!data) return
+              setLiveState((prev) => ({
+                progress: typeof data.progress === 'number' ? Math.min(100, Math.max(0, data.progress)) : prev.progress,
+                step: data.step !== undefined ? data.step : prev.step,
+                stage: data.stage !== undefined ? data.stage : prev.stage,
+                draftSrc: data.draftUrl || prev.draftSrc,
+              }))
+            } catch (_err) {
+              // Ignore event parsing errors
+            }
+          }
+          es.onerror = () => {
+            // EventSource handles retries or terminates on close
+          }
+        } catch (_err) {
+          // Ignore EventSource creation errors
+        }
+
+        return () => {
+          if (es) {
+            try {
+              es.close()
+            } catch (_err) {
+              // Ignore EventSource close errors
+            }
+          }
+        }
+      }, [isRunning, callId])
+
+      const draftSrc = liveState.draftSrc || props.draftSrc
+      const progress = liveState.progress !== undefined
+        ? liveState.progress
+        : (typeof props.progress === 'number' ? Math.min(100, Math.max(0, props.progress)) : undefined)
+      const step = liveState.step !== undefined ? liveState.step : props.step
+      const stage = liveState.stage
+        || props.stage
+        || (progress !== undefined && progress < 100 ? (t('card.rendering') || 'Rendering...') : (isRunning ? (t('card.generating') || 'Generating...') : 'Complete'))
+
       const showProgress = isRunning || (progress !== undefined && progress < 100)
 
       const progressElement = showProgress ? react.createElement(
@@ -1793,8 +1888,8 @@ window.__ModuleLoader__.load({
           'div',
           { className: 'ig-progress-track' },
           react.createElement('div', {
-            className: 'ig-progress-fill',
-            style: { width: (progress !== undefined ? progress : 45) + '%' },
+            className: 'ig-progress-fill' + (progress === undefined ? ' ig-progress-indeterminate' : ''),
+            style: progress !== undefined ? { width: progress + '%' } : undefined,
           })
         )
       ) : null
@@ -1842,10 +1937,17 @@ window.__ModuleLoader__.load({
         progressElement
       )
     }
-// 105-inpaint-canvas.js — Interactive in-chat canvas drawing overlay for inpainting (#285, #301, #328).
+// 105-inpaint-canvas.js — Interactive in-chat canvas drawing overlay for inpainting (#285, #301, #328, #380).
+
+    function buildEditInstruction(opts) {
+      const p = (opts && opts.prompt ? opts.prompt.trim() : '') || 'inpaint masked region'
+      const img = (opts && opts.image) || 'latest'
+      const m = (opts && opts.mask) || ''
+      return 'Use edit_image with prompt: "' + p + '", image: "' + img + '", mask: "' + m + '"'
+    }
 
     function InpaintCanvas(props) {
-      const { imgUrl, targetRef, parsed, onClose, t } = props
+      const { imgUrl, targetRef, parsed, onClose, sendActionPrompt, t } = props
       const canvasRef = react.useRef(null)
       const isDrawingRef = react.useRef(false)
       const undoStackRef = react.useRef([])
@@ -1856,8 +1958,12 @@ window.__ModuleLoader__.load({
       const [inpaintPrompt, setInpaintPrompt] = react.useState('')
       const [canvasDims, setCanvasDims] = react.useState({ width: 512, height: 512, ratio: '1/1' })
 
-      const effectiveImgUrl = imgUrl || parsed?.imageUrl || parsed?.url || parsed?.attachment?.url || ''
-      const effectiveTargetRef = targetRef || parsed?.attachmentId || parsed?.attachment?.attachmentId || parsed?.imageUrl || parsed?.url || 'current image'
+      const effectiveImgUrl = imgUrl || (parsed?.attachment ? attachmentImageUrl(parsed.attachment) : (parsed?.url || ''))
+      const effectiveTargetRef = targetRef
+        || (parsed?.attachment && (parsed.attachment.attachmentId || parsed.attachment.id))
+        || parsed?.attachmentId
+        || parsed?.url
+        || 'latest'
 
       const initCanvas = react.useCallback(() => {
         const canvas = canvasRef.current
@@ -1877,11 +1983,8 @@ window.__ModuleLoader__.load({
         if (e.target && e.target.naturalWidth && e.target.naturalHeight) {
           const nw = e.target.naturalWidth
           const nh = e.target.naturalHeight
-          // Scale dimensions down to manageable working canvas size (max 768)
-          const scale = Math.min(1, 768 / Math.max(nw, nh))
-          const cw = Math.round(nw * scale)
-          const ch = Math.round(nh * scale)
-          setCanvasDims({ width: cw, height: ch, ratio: `${cw}/${ch}` })
+          // Preserve 1:1 intrinsic source dimensions for accurate mask generation (#380)
+          setCanvasDims({ width: nw, height: nh, ratio: `${nw}/${nh}` })
         }
       }
 
@@ -1889,11 +1992,12 @@ window.__ModuleLoader__.load({
         const rect = canvas.getBoundingClientRect()
         const clientX = e.touches ? e.touches[0].clientX : e.clientX
         const clientY = e.touches ? e.touches[0].clientY : e.clientY
-        const scaleX = canvas.width / rect.width
-        const scaleY = canvas.height / rect.height
+        const scaleX = canvas.width / (rect.width || canvas.width)
+        const scaleY = canvas.height / (rect.height || canvas.height)
         return {
           x: (clientX - rect.left) * scaleX,
           y: (clientY - rect.top) * scaleY,
+          scale: (scaleX + scaleY) / 2,
         }
       }
 
@@ -1905,16 +2009,17 @@ window.__ModuleLoader__.load({
         if (!ctx) return
         isDrawingRef.current = true
         const pos = getPos(e, canvas)
+        const actualBrush = brushSize * (pos.scale || 1)
         ctx.beginPath()
         ctx.moveTo(pos.x, pos.y)
-        ctx.lineWidth = brushSize
+        ctx.lineWidth = actualBrush
         ctx.lineCap = 'round'
         ctx.lineJoin = 'round'
         const color = toolMode === 'eraser' ? 'black' : 'white'
         ctx.strokeStyle = color
         ctx.fillStyle = color
 
-        ctx.arc(pos.x, pos.y, brushSize / 2, 0, Math.PI * 2)
+        ctx.arc(pos.x, pos.y, actualBrush / 2, 0, Math.PI * 2)
         ctx.fill()
         ctx.beginPath()
         ctx.moveTo(pos.x, pos.y)
@@ -1929,25 +2034,26 @@ window.__ModuleLoader__.load({
         const ctx = canvas.getContext('2d')
         if (!ctx) return
         const pos = getPos(e, canvas)
-        ctx.lineWidth = brushSize
+        const actualBrush = brushSize * (pos.scale || 1)
+        ctx.lineWidth = actualBrush
         ctx.lineCap = 'round'
         ctx.lineJoin = 'round'
         const color = toolMode === 'eraser' ? 'black' : 'white'
         ctx.strokeStyle = color
         ctx.lineTo(pos.x, pos.y)
         ctx.stroke()
-        setHasStrokes(true)
+        ctx.beginPath()
+        ctx.moveTo(pos.x, pos.y)
       }
 
-      function stopDraw(e) {
+      function stopDraw() {
         if (!isDrawingRef.current) return
         isDrawingRef.current = false
         const canvas = canvasRef.current
         if (!canvas) return
         const ctx = canvas.getContext('2d')
         if (!ctx) return
-        ctx.closePath()
-
+        ctx.beginPath()
         if (undoStackRef.current.length >= 15) {
           undoStackRef.current.shift()
         }
@@ -2000,7 +2106,15 @@ window.__ModuleLoader__.load({
         if (!canvas) return
         const maskDataUrl = canvas.toDataURL('image/png')
         const promptText = inpaintPrompt.trim() || 'inpaint masked region'
-        const instruction = 'Use edit_image with prompt: "' + promptText + '", source_image: "' + effectiveTargetRef + '", mask: "' + maskDataUrl + '"'
+        const instruction = buildEditInstruction({
+          prompt: promptText,
+          image: effectiveTargetRef,
+          mask: maskDataUrl,
+        })
+
+        if (typeof sendActionPrompt === 'function') {
+          sendActionPrompt(instruction)
+        }
 
         if (typeof navigator !== 'undefined' && navigator.clipboard) {
           navigator.clipboard.writeText(instruction)
@@ -2188,7 +2302,18 @@ window.__ModuleLoader__.load({
       const t = props.t || ((k) => k)
       const block = props.block || {}
       const parsed = react.useMemo(() => {
+        const meta = block.presentationMeta || block.meta || block.data || block.result
+        if (meta && Array.isArray(meta.cells) && meta.cells.length) {
+          return meta
+        }
         const raw = block.output || block.text || ''
+        const tagMatch = raw.match(/<dsh-image-gen-matrix>([\s\S]*?)<\/dsh-image-gen-matrix>/)
+        if (tagMatch) {
+          const fromTag = tryParseJsonObject(tagMatch[1])
+          if (fromTag && Array.isArray(fromTag.cells) && fromTag.cells.length) {
+            return fromTag
+          }
+        }
         const obj = tryParseJsonObject(raw)
         return obj || { base_prompt: '', blind_mode: false, cells: [] }
       }, [block])
@@ -2307,12 +2432,27 @@ window.__ModuleLoader__.load({
       let args = {}
       try { if (raw) args = JSON.parse(raw) } catch (_) { /* invalid json */ }
 
-      let data = {}
-      try {
-        const out = block && (block.output || block.result || block.text || '')
-        if (typeof out === 'object') data = out
-        else if (typeof out === 'string') data = JSON.parse(out)
-      } catch (_) { /* invalid json */ }
+      let data = block && (block.presentationMeta || block.meta || block.data || block.result)
+      if (!data || (!data.light && !data.dark)) {
+        const out = block && (block.output || block.text || '')
+        const tagMatch = typeof out === 'string' ? out.match(/<dsh-image-gen-theme-pair>([\s\S]*?)<\/dsh-image-gen-theme-pair>/) : null
+        if (tagMatch) {
+          try {
+            data = JSON.parse(tagMatch[1])
+          } catch (_err) {
+            // Malformed XML payload
+          }
+        }
+        if (!data || (!data.light && !data.dark)) {
+          try {
+            if (typeof out === 'object') data = out
+            else if (typeof out === 'string') data = JSON.parse(out)
+          } catch (_err) {
+            // Malformed fallback output
+          }
+        }
+      }
+      data = data || {}
 
       const light = data.light || {}
       const dark = data.dark || {}