zerg-ztc 0.1.0

package/src/ui/views/message_list.ts

@@ -0,0 +1,427 @@
+import { Message, MessageRole, ToolCall } from '../../types.js';
+import { box, text, LayoutNode } from '../core/index.js';
+
+function formatTime(date: Date): string {
+  return date.toLocaleTimeString('en-US', { 
+    hour: '2-digit', 
+    minute: '2-digit',
+    hour12: false 
+  });
+}
+
+function toDate(value?: Date | string): Date | null {
+  if (!value) return null;
+  if (value instanceof Date) return value;
+  const parsed = new Date(value);
+  if (Number.isNaN(parsed.getTime())) return null;
+  return parsed;
+}
+
+function truncate(str: string, maxLen: number): string {
+  if (str.length <= maxLen) return str;
+  return str.slice(0, maxLen - 3) + '...';
+}
+
+interface RoleConfig {
+  icon: string;
+  color: string;
+  label: string;
+}
+
+const roleConfigs: Record<MessageRole, RoleConfig> = {
+  user: { icon: '❯', color: 'blue', label: 'You' },
+  assistant: { icon: '◆', color: 'magenta', label: 'Zerg' },
+  tool: { icon: '⏺', color: 'yellow', label: 'Trace' },
+  system: { icon: '●', color: 'gray', label: 'System' }
+};
+
+function toolCallView(tool: ToolCall): LayoutNode {
+  const statusIcons = {
+    pending: '○',
+    running: '◐',
+    complete: '●',
+    error: '✗'
+  };
+  
+  const statusColors = {
+    pending: 'gray',
+    running: 'yellow',
+    complete: 'green',
+    error: 'red'
+  } as const;
+
+  const icon = statusIcons[tool.status];
+  const color = statusColors[tool.status];
+
+  let duration = '';
+  const started = toDate(tool.startedAt);
+  const completed = toDate(tool.completedAt);
+  if (started && completed) {
+    const ms = completed.getTime() - started.getTime();
+    duration = ms < 1000 ? `${ms}ms` : `${(ms / 1000).toFixed(1)}s`;
+  }
+
+  const extra = tool.result ? renderToolResult(tool) : null;
+
+  return box([
+    box([
+      text(`${icon} `, { color }),
+      text(tool.name, { color: 'cyan', bold: true }),
+      text(` (${tool.id.slice(0, 8)})`, { color: 'gray', dimColor: true }),
+      duration ? text(` [${duration}]`, { color: 'gray', dimColor: true }) : text('', {})
+    ], { flexDirection: 'row' }),
+    tool.result
+      ? extra || box([
+          text('→ ', { color: 'green' }),
+          text(truncate(tool.result, 80))
+        ], { flexDirection: 'row', marginLeft: 2 })
+      : box([], {}),
+    tool.error
+      ? box([
+          text('✗ ', { color: 'red' }),
+          text(truncate(tool.error, 80), { color: 'red' })
+        ], { flexDirection: 'row', marginLeft: 2 })
+      : box([], {})
+  ], { flexDirection: 'column', marginLeft: 2 });
+}
+
+function parseJson(raw?: string): Record<string, unknown> | null {
+  if (!raw) return null;
+  try {
+    const data = JSON.parse(raw) as Record<string, unknown>;
+    if (data && typeof data === 'object') return data;
+  } catch {
+    return null;
+  }
+  return null;
+}
+
+function renderDiffLines(diff: string, maxLines = 12): LayoutNode {
+  const lines = diff.split('\n').slice(0, maxLines);
+  return box(lines.map(line => {
+    if (line.startsWith('+')) {
+      return text(line, { color: 'green' });
+    }
+    if (line.startsWith('-')) {
+      return text(line, { color: 'red' });
+    }
+    return text(line, { color: 'gray', dimColor: true });
+  }), { flexDirection: 'column', marginLeft: 2 });
+}
+
+function renderToolResult(tool: ToolCall): LayoutNode | null {
+  const parsed = parseJson(tool.result);
+  if (!parsed) return null;
+
+  if (tool.name === 'read_file') {
+    const path = String(parsed.path || '');
+    const size = parsed.size ? `${parsed.size} bytes` : 'unknown size';
+    const content = String(parsed.content || '');
+    const truncatedFlag = parsed.truncated ? ' (truncated)' : '';
+    const previewLines = content.split('\n').slice(0, 6);
+    return box([
+      box([
+        text('→ ', { color: 'green' }),
+        text(`Read ${path} (${size})${truncatedFlag}`, { color: 'green' })
+      ], { flexDirection: 'row', marginLeft: 2 }),
+      box(previewLines.map(line => text(line, { color: 'gray' })), { flexDirection: 'column', marginLeft: 4 })
+    ], { flexDirection: 'column' });
+  }
+
+  if (tool.name === 'write_file') {
+    const path = String(parsed.path || '');
+    const action = String(parsed.action || 'written');
+    const diff = typeof parsed.diff === 'string' ? parsed.diff : '';
+    return box([
+      box([
+        text('→ ', { color: 'green' }),
+        text(`Wrote ${path} (${action})`, { color: 'green' })
+      ], { flexDirection: 'row', marginLeft: 2 }),
+      diff ? renderDiffLines(diff) : box([text('(no diff)', { color: 'gray', dimColor: true })], { marginLeft: 4 })
+    ], { flexDirection: 'column' });
+  }
+
+  if (tool.name === 'search') {
+    const path = String(parsed.path || '');
+    const count = Number(parsed.count || 0);
+    const matches = Array.isArray(parsed.matches) ? parsed.matches : [];
+    const preview = matches.slice(0, 6).map((entry: unknown) => {
+      if (entry && typeof entry === 'object') {
+        const row = entry as Record<string, unknown>;
+        const file = String(row.path || '');
+        const line = row.line ? `:${row.line}` : '';
+        const textValue = String(row.text || '');
+        return `${file}${line} ${textValue}`.trim();
+      }
+      return '';
+    }).filter(Boolean);
+    return box([
+      box([
+        text('→ ', { color: 'green' }),
+        text(`Found ${count} matches${path ? ` in ${path}` : ''}`, { color: 'green' })
+      ], { flexDirection: 'row', marginLeft: 2 }),
+      box(preview.map(line => text(line, { color: 'gray' })), { flexDirection: 'column', marginLeft: 4 })
+    ], { flexDirection: 'column' });
+  }
+
+  if (tool.name === 'list_directory') {
+    const path = String(parsed.path || '');
+    const entries = Array.isArray(parsed.entries) ? parsed.entries : [];
+    const names = entries
+      .map(entry => entry && typeof entry === 'object' && 'name' in entry ? String((entry as Record<string, unknown>).name) : '')
+      .filter(Boolean)
+      .slice(0, 8);
+    return box([
+      box([
+        text('→ ', { color: 'green' }),
+        text(`Listed ${path} (${entries.length} items)`, { color: 'green' })
+      ], { flexDirection: 'row', marginLeft: 2 }),
+      box(names.map(name => text(`- ${name}`, { color: 'gray' })), { flexDirection: 'column', marginLeft: 4 })
+    ], { flexDirection: 'column' });
+  }
+
+  return null;
+}
+
+function renderInlineMarkdown(line: string): LayoutNode {
+  const parts: Array<{ text: string; bold?: boolean; dim?: boolean }> = [];
+  let rest = line;
+  let matchedBold = false;
+
+  const pushPlain = (text: string) => {
+    if (text) parts.push({ text });
+  };
+
+  while (rest.length > 0) {
+    const boldStart = rest.indexOf('**');
+    if (boldStart === -1) {
+      pushPlain(rest);
+      break;
+    }
+    pushPlain(rest.slice(0, boldStart));
+    const afterStart = rest.slice(boldStart + 2);
+    const boldEnd = afterStart.indexOf('**');
+    if (boldEnd === -1) {
+      pushPlain(rest);
+      break;
+    }
+    const boldText = afterStart.slice(0, boldEnd);
+    if (boldText) {
+      matchedBold = true;
+      parts.push({ text: boldText, bold: true });
+    }
+    rest = afterStart.slice(boldEnd + 2);
+  }
+
+  if (!matchedBold && line.includes('**')) {
+    return text(line.replace(/\*\*/g, ''), {});
+  }
+
+  return box(
+    parts.map(part => text(part.text, { bold: part.bold, dimColor: part.dim })),
+    { flexDirection: 'row' }
+  );
+}
+
+function renderMarkdownLine(line: string): LayoutNode {
+  const trimmed = line.trimStart();
+  if (trimmed.startsWith('### ')) {
+    return text(trimmed.slice(4), { bold: true, color: 'cyan' });
+  }
+  if (trimmed.startsWith('## ')) {
+    return text(trimmed.slice(3), { bold: true, color: 'cyan' });
+  }
+  if (trimmed.startsWith('# ')) {
+    return text(trimmed.slice(2), { bold: true, color: 'cyan' });
+  }
+  return renderInlineMarkdown(line);
+}
+
+function isTableSeparator(line: string): boolean {
+  const trimmed = line.trim();
+  return trimmed.startsWith('|') && trimmed.endsWith('|') && /^[|\-\s:]+$/.test(trimmed);
+}
+
+function splitTableRow(line: string): string[] {
+  const trimmed = line.trim();
+  const parts = trimmed.replace(/^\|/, '').replace(/\|$/, '').split('|');
+  return parts.map(part => part.replace(/\*\*/g, '').trim());
+}
+
+function renderTable(lines: string[]): LayoutNode[] {
+  if (lines.length < 2) return [];
+  const header = splitTableRow(lines[0]);
+  const rows = lines.slice(2).map(splitTableRow);
+  const allRows = [header, ...rows];
+  const widths: number[] = [];
+  allRows.forEach(row => {
+    row.forEach((cell, idx) => {
+      const len = cell.length;
+      widths[idx] = Math.max(widths[idx] || 0, len);
+    });
+  });
+
+  const formatRow = (row: string[]) => {
+    const cells = row.map((cell, idx) => cell.padEnd(widths[idx] || 0));
+    return `| ${cells.join(' | ')} |`;
+  };
+
+  const rendered: LayoutNode[] = [];
+  rendered.push(text(formatRow(header), { bold: true }));
+  const sep = `| ${widths.map(w => '-'.repeat(Math.max(3, w))).join(' | ')} |`;
+  rendered.push(text(sep, { color: 'gray', dimColor: true }));
+  rows.forEach(row => {
+    rendered.push(text(formatRow(row), { color: 'gray' }));
+  });
+  return rendered;
+}
+
+function renderMarkdownLines(lines: string[]): LayoutNode[] {
+  const normalized: string[] = [];
+  lines.forEach(line => {
+    if (line.includes('||') && line.includes('|')) {
+      const segments = line.split('||').map(segment => segment.trim()).filter(Boolean);
+      segments.forEach(segment => {
+        let out = segment;
+        if (!out.startsWith('|')) out = `| ${out}`;
+        if (!out.endsWith('|')) out = `${out} |`;
+        normalized.push(out);
+      });
+    } else {
+      normalized.push(line);
+    }
+  });
+
+  const nodes: LayoutNode[] = [];
+  let i = 0;
+  while (i < normalized.length) {
+    const line = normalized[i];
+    const next = normalized[i + 1];
+    if (line && next && line.includes('|') && isTableSeparator(next)) {
+      const tableLines: string[] = [line, next];
+      let j = i + 2;
+      while (j < normalized.length && normalized[j].includes('|')) {
+        tableLines.push(normalized[j]);
+        j += 1;
+      }
+      nodes.push(...renderTable(tableLines));
+      i = j;
+      continue;
+    }
+    nodes.push(renderMarkdownLine(line));
+    i += 1;
+  }
+  return nodes;
+}
+
+function messageView(message: Message, expandToolOutputs = false): LayoutNode {
+  const config = roleConfigs[message.role];
+  const toolOutput = message.metadata && (message.metadata as Record<string, any>).toolOutput;
+  const content = toolOutput && expandToolOutputs && toolOutput.full
+    ? toolOutput.full
+    : toolOutput && toolOutput.preview
+      ? toolOutput.preview
+      : message.content;
+  const lines = content.split('\n');
+
+  return box([
+    box([
+      text(`${config.icon} ${config.label}`, { color: config.color, bold: true }),
+      text(` • ${formatTime(message.timestamp)}`, { color: 'gray', dimColor: true }),
+      message.isStreaming ? text(' ▌', { color: 'yellow', bold: true }) : text('', {})
+    ], { flexDirection: 'row' }),
+    box(renderMarkdownLines(lines), { flexDirection: 'column', marginLeft: 2 }),
+    message.toolCalls && message.toolCalls.length > 0
+      ? box(message.toolCalls.map(tool => toolCallView(tool)), { flexDirection: 'column' })
+      : box([], {})
+  ], { flexDirection: 'column', marginY: 1 });
+}
+
+function estimateMessageLines(message: Message): number {
+  const toolOutput = message.metadata && (message.metadata as Record<string, any>).toolOutput;
+  const content = toolOutput && toolOutput.preview ? toolOutput.preview : message.content;
+  const contentLines = content.split('\n').length;
+  const toolLines = message.toolCalls ? message.toolCalls.length * 3 : 0;
+  const headerLines = 1;
+  const margins = 2;
+  return headerLines + contentLines + toolLines + margins;
+}
+
+function clipMessage(message: Message, available: number): Message | null {
+  if (available <= 0) return null;
+  const headerLines = 1;
+  const margins = 2;
+  const remaining = available - headerLines - margins;
+  if (remaining <= 0) return null;
+
+  const toolOutput = message.metadata && (message.metadata as Record<string, any>).toolOutput;
+  const content = toolOutput && toolOutput.preview ? toolOutput.preview : message.content;
+  const lines = content.split('\n');
+  if (lines.length <= remaining) {
+    return message;
+  }
+  const clippedLines = lines.slice(-remaining);
+  if (clippedLines.length > 0) {
+    clippedLines[0] = `... ${clippedLines[0]}`;
+  }
+  return {
+    ...message,
+    content: clippedLines.join('\n'),
+    toolCalls: []
+  };
+}
+
+interface MessageListProps {
+  messages: Message[];
+  height: number;
+  maxMessages?: number;
+  debug?: boolean;
+  expandToolOutputs?: boolean;
+}
+
+export function buildMessageListView({
+  messages,
+  height,
+  maxMessages = 50,
+  debug = false,
+  expandToolOutputs = false
+}: MessageListProps): LayoutNode {
+  const recentMessages = messages.slice(-maxMessages);
+  const visibleMessages: Message[] = [];
+  let remaining = height;
+  for (let i = recentMessages.length - 1; i >= 0; i -= 1) {
+    const msg = recentMessages[i];
+    const estimate = estimateMessageLines(msg);
+    if (estimate <= remaining) {
+      visibleMessages.unshift(msg);
+      remaining -= estimate;
+      continue;
+    }
+    if (visibleMessages.length === 0) {
+      const clipped = clipMessage(msg, remaining);
+      if (clipped) {
+        visibleMessages.unshift(clipped);
+      }
+    }
+    break;
+  }
+
+  return box([
+    box([], { flexGrow: 1 }),
+    box(visibleMessages.map(msg => messageView(msg, expandToolOutputs)), { flexDirection: 'column' }),
+    messages.length === 0
+      ? box([text('No messages yet. Type something to begin.', { color: 'gray', dimColor: true })], {
+          flexGrow: 1,
+          alignItems: 'center',
+          justifyContent: 'center'
+        })
+      : box([], {})
+  ], {
+    flexDirection: 'column',
+    height,
+    paddingX: 1,
+    flexGrow: 1,
+    borderStyle: debug ? 'single' : undefined,
+    borderColor: debug ? 'gray' : undefined
+  });
+}

package/src/ui/views/status_bar.ts

@@ -0,0 +1,104 @@
+import { AgentState, AgentStatus } from '../../types.js';
+import { box, text, LayoutNode } from '../core/index.js';
+
+interface StatusBarProps {
+  state: AgentState;
+  sessionId?: string;
+  version?: string;
+  connectionStatus?: 'connected' | 'disconnected' | 'connecting';
+  contextLength?: number;
+  contextEstimated?: boolean;
+  provider?: string;
+  model?: string;
+  emulationId?: string;
+  toast?: string | null;
+  debug?: boolean;
+}
+
+function getStatusConfig(state: AgentState) {
+  const configs: Record<AgentStatus, { icon: string; color: string; label: string }> = {
+    idle: { icon: '●', color: 'green', label: 'Ready' },
+    thinking: { icon: '◐', color: 'yellow', label: 'Thinking' },
+    tool_use: { icon: '⚙', color: 'cyan', label: `Tool: ${state.currentTool || 'unknown'}` },
+    streaming: { icon: '▸', color: 'magenta', label: 'Streaming' },
+    error: { icon: '✗', color: 'red', label: 'Error' }
+  };
+  return configs[state.status];
+}
+
+export function buildStatusBarView({
+  state,
+  sessionId,
+  version = '0.1.0',
+  connectionStatus = 'connected',
+  contextLength,
+  contextEstimated,
+  provider,
+  model,
+  emulationId,
+  toast,
+  debug = false
+}: StatusBarProps): LayoutNode {
+  const config = getStatusConfig(state);
+  const isActive = state.status !== 'idle' && state.status !== 'error';
+
+  const connectionColors = {
+    connected: 'green',
+    disconnected: 'red',
+    connecting: 'yellow'
+  } as const;
+
+  const connectionIcons = {
+    connected: '◉',
+    disconnected: '◯',
+    connecting: '◐'
+  };
+
+  const contextLabel = contextLength !== undefined
+    ? `${contextEstimated ? '~' : ''}ctx ${contextLength.toLocaleString()}`
+    : '';
+  const toastLabel = toast ? (toast.length > 60 ? `${toast.slice(0, 59)}…` : toast) : '';
+
+  return box([
+    box([
+      text(isActive ? '⠋ ' : `${config.icon} `, { color: config.color }),
+      text(config.label, { color: config.color }),
+      state.error ? text(` - ${state.error}`, { color: 'red' }) : text('', {}),
+      toastLabel ? text(' • ', { color: 'gray', dimColor: true }) : text('', {}),
+      toastLabel ? text(toastLabel, { color: 'yellow' }) : text('', {})
+    ], { flexDirection: 'row' }),
+    box([
+      text(connectionIcons[connectionStatus], { color: connectionColors[connectionStatus] }),
+      text(' ', { color: 'gray', dimColor: true }),
+      state.authError ? text('auth error', { color: 'red' }) : text('', {}),
+      state.authError ? text(' • ', { color: 'gray', dimColor: true }) : text('', {}),
+      provider ? text(provider, { color: 'gray', dimColor: true }) : text('', {}),
+      provider && model ? text(' / ', { color: 'gray', dimColor: true }) : text('', {}),
+      model ? text(model, { color: 'gray', dimColor: true }) : text('', {}),
+      (provider || model) ? text(' • ', { color: 'gray', dimColor: true }) : text('', {}),
+      emulationId ? text(`emu:${emulationId}`, { color: 'gray', dimColor: true }) : text('', {}),
+      emulationId ? text(' • ', { color: 'gray', dimColor: true }) : text('', {}),
+      state.tokensUsed !== undefined && state.tokensUsed > 0
+        ? text(`${state.tokensUsed.toLocaleString()} tok`, { color: 'gray', dimColor: true })
+        : text('', {}),
+      state.tokensUsed !== undefined && state.tokensUsed > 0
+        ? text(' • ', { color: 'gray', dimColor: true })
+        : text('', {}),
+      contextLength !== undefined
+        ? text(contextLabel, { color: 'gray', dimColor: true })
+        : text('', {}),
+      contextLength !== undefined
+        ? text(' • ', { color: 'gray', dimColor: true })
+        : text('', {}),
+      text(`ZTC v${version}`, { color: 'gray', dimColor: true }),
+      sessionId ? text(' • ', { color: 'gray', dimColor: true }) : text('', {}),
+      sessionId ? text(sessionId.slice(0, 8), { color: 'gray', dimColor: true }) : text('', {})
+    ], { flexDirection: 'row' })
+  ], {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingX: 1,
+    borderStyle: debug ? 'single' : undefined,
+    borderColor: debug ? 'gray' : undefined
+  });
+}

package/src/ui/vue/index.ts

@@ -0,0 +1,53 @@
+import { LayoutNode, TextNode } from '../core/types.js';
+
+type VNodeFactory = (type: string, props: Record<string, unknown> | null, children?: unknown) => unknown;
+
+function toVueStyle(style?: Record<string, unknown>): Record<string, unknown> {
+  return style ? { ...style } : {};
+}
+
+function renderText(h: VNodeFactory, node: TextNode): unknown {
+  const style: Record<string, unknown> = {
+    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    fontSize: '14px',
+    lineHeight: '16px',
+    whiteSpace: 'pre'
+  };
+  if (node.style?.color) style.color = node.style.color;
+  if (node.style?.bold) style.fontWeight = 600;
+  if (node.style?.dimColor) style.opacity = 0.6;
+  if (node.style?.inverse) style.background = '#111';
+
+  return h('span', { style }, node.text);
+}
+
+export function renderToVue(h: VNodeFactory, node: LayoutNode): unknown {
+  if (node.type === 'text') {
+    return renderText(h, node);
+  }
+
+  const style = toVueStyle({
+    display: 'flex',
+    flexDirection: node.style?.flexDirection || 'column',
+    flexGrow: node.style?.flexGrow ?? 0,
+    flexShrink: node.style?.flexShrink ?? 0,
+    paddingLeft: node.style?.paddingX ?? node.style?.padding ?? 0,
+    paddingRight: node.style?.paddingX ?? node.style?.padding ?? 0,
+    paddingTop: node.style?.paddingY ?? node.style?.padding ?? 0,
+    paddingBottom: node.style?.paddingY ?? node.style?.padding ?? 0,
+    marginLeft: node.style?.marginX ?? node.style?.margin ?? 0,
+    marginRight: node.style?.marginX ?? node.style?.margin ?? 0,
+    marginTop: node.style?.marginY ?? node.style?.margin ?? 0,
+    marginBottom: node.style?.marginY ?? node.style?.margin ?? 0
+  });
+
+  if (node.style?.width !== undefined) style.width = `${node.style.width}px`;
+  if (node.style?.height !== undefined) style.height = `${node.style.height}px`;
+  if (node.style?.borderStyle) {
+    style.borderStyle = node.style.borderStyle;
+    style.borderWidth = '1px';
+    style.borderColor = node.style.borderColor || 'currentColor';
+  }
+
+  return h('div', { style }, node.children.map(child => renderToVue(h, child)));
+}

package/src/utils/clipboard.ts

@@ -0,0 +1,39 @@
+import { spawn } from 'child_process';
+
+function runPipe(command: string, args: string[], input: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const child = spawn(command, args, { stdio: ['pipe', 'ignore', 'pipe'] });
+    let err = '';
+    child.stderr.on('data', chunk => {
+      err += chunk.toString();
+    });
+    child.on('error', reject);
+    child.on('close', (code) => {
+      if (code === 0) resolve();
+      else reject(new Error(err || `Clipboard command failed (${command})`));
+    });
+    child.stdin.write(input);
+    child.stdin.end();
+  });
+}
+
+export async function writeClipboard(text: string): Promise<void> {
+  const platform = process.platform;
+  if (platform === 'darwin') {
+    await runPipe('pbcopy', [], text);
+    return;
+  }
+  if (platform === 'win32') {
+    await runPipe('clip', [], text);
+    return;
+  }
+
+  try {
+    await runPipe('wl-copy', [], text);
+    return;
+  } catch {
+    // fall through
+  }
+
+  await runPipe('xclip', ['-selection', 'clipboard'], text);
+}

package/src/utils/clipboard_image.ts

@@ -0,0 +1,40 @@
+import { execFile } from 'child_process';
+import { promisify } from 'util';
+import { mkdir } from 'fs/promises';
+import { homedir } from 'os';
+import { join } from 'path';
+import { randomUUID } from 'crypto';
+
+const execFileAsync = promisify(execFile);
+
+async function hasCommand(command: string): Promise<boolean> {
+  try {
+    await execFileAsync('which', [command]);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export async function saveClipboardImage(): Promise<string | null> {
+  if (process.platform !== 'darwin') {
+    return null;
+  }
+
+  const hasPngPaste = await hasCommand('pngpaste');
+  if (!hasPngPaste) {
+    return null;
+  }
+
+  const targetDir = join(homedir(), '.ztc', 'clipboard');
+  await mkdir(targetDir, { recursive: true });
+  const filename = `clipboard-${Date.now()}-${randomUUID().slice(0, 8)}.png`;
+  const targetPath = join(targetDir, filename);
+
+  try {
+    await execFileAsync('pngpaste', [targetPath]);
+    return targetPath;
+  } catch {
+    return null;
+  }
+}