@goodandready/dsh-image-gen 0.10.33 → 0.10.34

package/lib/attachment-helper.js

@@ -80,3 +80,12 @@ export async function saveAndAttachResult(ctx, exec, cfg, {
     },
   })
 }
+
+export function renderToolOutput(value) {
+  const text = (value && value.summary) || (typeof value === "string" ? value : JSON.stringify(value || ""))
+  const blocks = [{ type: "text", text }]
+  if (value && value.attachment) {
+    blocks.push({ type: "image", attachment: value.attachment })
+  }
+  return blocks
+}

package/lib/client.js

@@ -100,6 +100,7 @@ window.__ModuleLoader__.load({
 .ig-btn:hover:not(:disabled){background:var(--dsw-alias-bg-layer-4, var(--dsw-alias-bg-layer-2));border-color:var(--dsw-alias-label-dimmed, var(--dsw-alias-border-l2))}
 .ig-btn-primary{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-3);border-color:transparent}
 .ig-btn-primary:hover:not(:disabled){opacity:0.9}
+.ig-btn-active{background:var(--dsw-alias-brand-primary, #3b82f6);color:#ffffff;border-color:transparent}
 .ig-btn-danger{color:var(--dsw-alias-state-error-primary);border-color:var(--dsw-alias-state-error-primary)}
 .ig-btn-danger:hover:not(:disabled){background:var(--dsw-alias-state-error-bg, color-mix(in srgb, var(--dsw-alias-state-error-primary) 12%, transparent));border-color:var(--dsw-alias-state-error-primary)}
 .ig-btn-disabled{opacity:0.5;cursor:not-allowed}
@@ -1603,6 +1604,7 @@ window.__ModuleLoader__.load({
       const canvasRef = react.useRef(null)
       const isDrawingRef = react.useRef(false)
       const [brushSize, setBrushSize] = react.useState(24)
+      const [toolMode, setToolMode] = react.useState('brush')
       const [inpaintPrompt, setInpaintPrompt] = react.useState('')
       const [copied, setCopied] = react.useState(false)
       const [hasStrokes, setHasStrokes] = react.useState(false)
@@ -1652,8 +1654,9 @@ window.__ModuleLoader__.load({
         ctx.lineWidth = brushSize
         ctx.lineCap = 'round'
         ctx.lineJoin = 'round'
-        ctx.strokeStyle = '#ffffff'
-        ctx.fillStyle = '#ffffff'
+        const color = toolMode === 'eraser' ? '#000000' : '#ffffff'
+        ctx.strokeStyle = color
+        ctx.fillStyle = color
 
         ctx.beginPath()
         ctx.arc(pos.x, pos.y, brushSize / 2, 0, Math.PI * 2)
@@ -1675,7 +1678,8 @@ window.__ModuleLoader__.load({
         ctx.lineWidth = brushSize
         ctx.lineCap = 'round'
         ctx.lineJoin = 'round'
-        ctx.strokeStyle = '#ffffff'
+        const color = toolMode === 'eraser' ? '#000000' : '#ffffff'
+        ctx.strokeStyle = color
         ctx.lineTo(pos.x, pos.y)
         ctx.stroke()
         setHasStrokes(true)
@@ -1711,6 +1715,27 @@ window.__ModuleLoader__.load({
         }
       }
 
+      function handleInvert() {
+        const canvas = canvasRef.current
+        if (!canvas) return
+        const ctx = canvas.getContext('2d')
+        if (!ctx) return
+        const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height)
+        const d = imgData.data
+        for (let i = 0; i < d.length; i += 4) {
+          d[i] = 255 - d[i]
+          d[i + 1] = 255 - d[i + 1]
+          d[i + 2] = 255 - d[i + 2]
+          d[i + 3] = 255
+        }
+        ctx.putImageData(imgData, 0, 0)
+        if (undoStackRef.current.length >= 15) {
+          undoStackRef.current.shift()
+        }
+        undoStackRef.current.push(ctx.getImageData(0, 0, canvas.width, canvas.height))
+        setHasStrokes(true)
+      }
+
       function handleClear() {
         initCanvas()
         setHasStrokes(false)
@@ -1762,8 +1787,38 @@ window.__ModuleLoader__.load({
             max: '64',
             value: brushSize,
             onChange: (e) => setBrushSize(parseInt(e.target.value, 10)),
-            style: { width: '120px', cursor: 'pointer' },
+            style: { width: '100px', cursor: 'pointer' },
           }),
+          react.createElement(
+            'button',
+            {
+              type: 'button',
+              className: 'ig-btn' + (toolMode === 'brush' ? ' ig-btn-active' : ''),
+              style: { padding: '3px 8px', fontSize: '11px' },
+              onClick: () => setToolMode('brush'),
+            },
+            '🖌️ ' + (t('inpaint.brush') || 'Brush')
+          ),
+          react.createElement(
+            'button',
+            {
+              type: 'button',
+              className: 'ig-btn' + (toolMode === 'eraser' ? ' ig-btn-active' : ''),
+              style: { padding: '3px 8px', fontSize: '11px' },
+              onClick: () => setToolMode('eraser'),
+            },
+            '🧹 ' + (t('inpaint.eraser') || 'Eraser')
+          ),
+          react.createElement(
+            'button',
+            {
+              type: 'button',
+              className: 'ig-btn',
+              style: { padding: '3px 8px', fontSize: '11px' },
+              onClick: handleInvert,
+            },
+            '🔄 ' + (t('inpaint.invert') || 'Invert')
+          ),
           react.createElement(
             'button',
             {
@@ -2015,7 +2070,10 @@ window.__ModuleLoader__.load({
       'card.actionRemoveBg': 'Remove background',
       'card.inpaint': 'Inpaint',
       'inpaint.title': 'Inpainting Canvas (Paint white mask over region to edit)',
-      'inpaint.brush_size': 'Brush',
+      'inpaint.brush_size': 'Size',
+      'inpaint.brush': 'Brush',
+      'inpaint.eraser': 'Eraser',
+      'inpaint.invert': 'Invert Mask',
       'inpaint.clear': 'Clear Mask',
       'inpaint.undo': 'Undo',
       'inpaint.apply': 'Apply Inpaint',
@@ -2236,7 +2294,10 @@ window.__ModuleLoader__.load({
       'card.actionRemoveBg': '移除背景',
       'card.inpaint': '局部重绘',
       'inpaint.title': '画布局部重绘（涂抹白色蒙版标记区域）',
-      'inpaint.brush_size': '画笔大小',
+      'inpaint.brush_size': '大小',
+      'inpaint.brush': '画笔',
+      'inpaint.eraser': '橡皮擦',
+      'inpaint.invert': '反转蒙版',
       'inpaint.clear': '清空蒙版',
       'inpaint.undo': '撤销',
       'inpaint.apply': '生成局部重绘',

package/lib/tools/editing.js

@@ -1,3 +1,4 @@
+import { renderToolOutput } from "../attachment-helper.js"
 // editing — image-gen tools (edit_image, vary_image). Extracted from apply() (#216).
 
 import { defineTool } from '@deepseek-ai/dsh-tools'
@@ -98,7 +99,8 @@ export function registerEditingTools(ctx, deps) {
           },
         },
         output: {
-          schema: {
+        render: (_args, value) => renderToolOutput(value),
+        schema: {
             type: 'object',
             additionalProperties: true,
             properties: {
@@ -231,7 +233,8 @@ export function registerEditingTools(ctx, deps) {
           },
         },
         output: {
-          schema: {
+        render: (_args, value) => renderToolOutput(value),
+        schema: {
             type: 'object',
             additionalProperties: true,
             properties: {
@@ -370,7 +373,8 @@ export function registerEditingTools(ctx, deps) {
           },
         },
         output: {
-          schema: {
+        render: (_args, value) => renderToolOutput(value),
+        schema: {
             type: 'object',
             additionalProperties: true,
             properties: {

package/lib/tools/frontend.js

@@ -1,3 +1,4 @@
+import { renderToolOutput } from "../attachment-helper.js"
 // frontend — image-gen tools (extract_design_tokens, image_to_css_gradient, check_image_contrast, optimize_vector_svg, generate_pwa_icon_suite). Extracted from apply() (#216).
 
 import { defineTool } from '@deepseek-ai/dsh-tools'
@@ -57,7 +58,8 @@ export function registerFrontendTools(ctx, deps) {
           prefix: { type: 'string', description: 'Token naming prefix (default: color).' },
         },
         output: {
-          schema: {
+        render: (_args, value) => renderToolOutput(value),
+        schema: {
             type: 'object',
             additionalProperties: true,
             properties: {
@@ -95,7 +97,8 @@ export function registerFrontendTools(ctx, deps) {
           type: { type: 'string', enum: ['mesh', 'linear', 'radial'], description: 'Gradient type: mesh, linear, or radial (default: mesh).' },
         },
         output: {
-          schema: {
+        render: (_args, value) => renderToolOutput(value),
+        schema: {
             type: 'object',
             additionalProperties: true,
             properties: {
@@ -134,7 +137,8 @@ export function registerFrontendTools(ctx, deps) {
           text_color: { type: 'string', description: 'Text hex color to test against (default: #ffffff).' },
         },
         output: {
-          schema: {
+        render: (_args, value) => renderToolOutput(value),
+        schema: {
             type: 'object',
             additionalProperties: true,
             properties: {
@@ -176,7 +180,8 @@ export function registerFrontendTools(ctx, deps) {
           component_name: { type: 'string', description: 'React component name for TSX export (default: VectorIcon).' },
         },
         output: {
-          schema: {
+        render: (_args, value) => renderToolOutput(value),
+        schema: {
             type: 'object',
             additionalProperties: true,
             properties: {
@@ -220,7 +225,8 @@ export function registerFrontendTools(ctx, deps) {
           icons_dir: { type: 'string', description: 'Directory for icons relative to webroot (default: icons).' },
         },
         output: {
-          schema: {
+        render: (_args, value) => renderToolOutput(value),
+        schema: {
             type: 'object',
             additionalProperties: true,
             properties: {

package/lib/tools/generation-pack.js

@@ -1,3 +1,4 @@
+import { renderToolOutput } from "../attachment-helper.js"
 import { defineTool } from '@deepseek-ai/dsh-tools'
 import { toLosslessJson } from '../providers.js'
 import { slugify } from '../index.js'
@@ -16,7 +17,8 @@ export function registerGenerationPackTool(ctx, deps) {
           output_name: { type: 'string', description: 'Base file name for the pack.' },
         },
         output: {
-          schema: {
+        render: (_args, value) => renderToolOutput(value),
+        schema: {
             type: 'object',
             additionalProperties: true,
             properties: {

package/lib/tools/inspect.js

@@ -1,3 +1,4 @@
+import { renderToolOutput } from "../attachment-helper.js"
 // inspect — image-gen tools (compare_images, inspect_image_quality). Extracted from apply() (#216).
 
 import { defineTool } from '@deepseek-ai/dsh-tools'
@@ -57,7 +58,8 @@ export function registerInspectTools(ctx, deps) {
           image_b: { type: 'string', required: true, description: 'Path or attachment id of the second image.' },
         },
         output: {
-          schema: {
+        render: (_args, value) => renderToolOutput(value),
+        schema: {
             type: 'object',
             additionalProperties: false,
             properties: {
@@ -84,7 +86,8 @@ export function registerInspectTools(ctx, deps) {
           expected_elements: { type: 'string', description: 'What elements should be present and verified.' },
         },
         output: {
-          schema: {
+        render: (_args, value) => renderToolOutput(value),
+        schema: {
             type: 'object',
             additionalProperties: false,
             properties: {

package/lib/tools/pattern.js

@@ -1,3 +1,4 @@
+import { renderToolOutput } from "../attachment-helper.js"
 // pattern — generate_seamless_pattern tool (#178)
 
 import { defineTool } from '@deepseek-ai/dsh-tools'
@@ -46,7 +47,8 @@ export function registerPatternTools(ctx, deps) {
           },
         },
         output: {
-          schema: {
+        render: (_args, value) => renderToolOutput(value),
+        schema: {
             type: 'object',
             additionalProperties: true,
             properties: {

package/lib/tools/processing-advanced.js

@@ -1,3 +1,4 @@
+import { renderToolOutput } from "../attachment-helper.js"
 // processing-basic — core image-gen tools (remove_background, upscale_image, vectorize_image, blend_images). Split from processing.js (#239).
 
 // processing — image-gen tools (remove_background, upscale_image, vectorize_image, blend_images). Extracted from apply() (#216).
@@ -80,7 +81,8 @@ export function registerProcessingAdvancedTools(ctx, deps) {
           },
         },
         output: {
-          schema: {
+        render: (_args, value) => renderToolOutput(value),
+        schema: {
             type: 'object',
             additionalProperties: true,
             properties: {
@@ -254,7 +256,8 @@ export function registerProcessingAdvancedTools(ctx, deps) {
           },
         },
         output: {
-          schema: {
+        render: (_args, value) => renderToolOutput(value),
+        schema: {
             type: 'object',
             additionalProperties: true,
             properties: {
@@ -420,7 +423,8 @@ export function registerProcessingAdvancedTools(ctx, deps) {
           },
         },
         output: {
-          schema: {
+        render: (_args, value) => renderToolOutput(value),
+        schema: {
             type: 'object',
             additionalProperties: true,
             properties: {

package/lib/tools/processing-basic.js

@@ -1,3 +1,4 @@
+import { renderToolOutput } from "../attachment-helper.js"
 // processing-basic — core image-gen tools (remove_background, upscale_image, vectorize_image, blend_images). Split from processing.js (#239).
 
 // processing — image-gen tools (remove_background, upscale_image, vectorize_image, blend_images). Extracted from apply() (#216).
@@ -59,7 +60,8 @@ export function registerProcessingTools(ctx, deps) {
           output_name: { type: 'string', description: 'Custom output file name without extension.' },
         },
         output: {
-          schema: {
+        render: (_args, value) => renderToolOutput(value),
+        schema: {
             type: 'object',
             additionalProperties: true,
             properties: {
@@ -127,7 +129,8 @@ export function registerProcessingTools(ctx, deps) {
           output_name: { type: 'string', description: 'Custom output file name.' },
         },
         output: {
-          schema: {
+        render: (_args, value) => renderToolOutput(value),
+        schema: {
             type: 'object',
             additionalProperties: true,
             properties: {
@@ -193,7 +196,8 @@ export function registerProcessingTools(ctx, deps) {
           output_name: { type: 'string', description: 'Custom output file name.' },
         },
         output: {
-          schema: {
+        render: (_args, value) => renderToolOutput(value),
+        schema: {
             type: 'object',
             additionalProperties: true,
             properties: {
@@ -256,7 +260,8 @@ export function registerProcessingTools(ctx, deps) {
           output_name: { type: 'string', description: 'Custom output file name.' },
         },
         output: {
-          schema: {
+        render: (_args, value) => renderToolOutput(value),
+        schema: {
             type: 'object',
             additionalProperties: true,
             properties: {

package/lib/tools/responsive.js

@@ -1,3 +1,4 @@
+import { renderToolOutput } from "../attachment-helper.js"
 // responsive — generate_responsive_mockups tool (#173)
 
 import { defineTool } from '@deepseek-ai/dsh-tools'
@@ -82,7 +83,8 @@ export function registerResponsiveTools(ctx, deps) {
           },
         },
         output: {
-          schema: {
+        render: (_args, value) => renderToolOutput(value),
+        schema: {
             type: 'object',
             additionalProperties: true,
             properties: {

package/lib/tools/sketch.js

@@ -1,3 +1,4 @@
+import { renderToolOutput } from "../attachment-helper.js"
 // sketch — sketch_to_image tool (#146)
 
 import { defineTool } from '@deepseek-ai/dsh-tools'
@@ -63,7 +64,8 @@ export function registerSketchTools(ctx, deps) {
           },
         },
         output: {
-          schema: {
+        render: (_args, value) => renderToolOutput(value),
+        schema: {
             type: 'object',
             additionalProperties: true,
             properties: {

package/lib/tools/spritesheet.js

@@ -1,3 +1,4 @@
+import { renderToolOutput } from "../attachment-helper.js"
 // spritesheet — generate_spritesheet tool (#177)
 
 import { defineTool } from '@deepseek-ai/dsh-tools'
@@ -53,7 +54,8 @@ export function registerSpritesheetTools(ctx, deps) {
           },
         },
         output: {
-          schema: {
+        render: (_args, value) => renderToolOutput(value),
+        schema: {
             type: 'object',
             additionalProperties: true,
             properties: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goodandready/dsh-image-gen",
-  "version": "0.10.33",
+  "version": "0.10.34",
   "description": "Image generation for DeepSeek Harness: a generate_image tool with pluggable providers — the FAL queue, any OpenAI-compatible images API, or a ChatGPT/Grok subscription with no API key at all. The picture is shown inline in the conversation; the model receives either a link (works with any chat model) or the image itself (needs dsh-vision-bridge or a vision-capable model).",
   "keywords": [
     "deepseek-harness",