@jackwener/opencli 1.6.0 → 1.6.2

package/src/clis/twitter/post.ts

@@ -1,7 +1,33 @@
+import * as fs from 'node:fs';
+import * as path from 'node:path';
 import { cli, Strategy } from '../../registry.js';
 import { CommandExecutionError } from '../../errors.js';
 import type { IPage } from '../../types.js';
 
+const MAX_IMAGES = 4;
+const UPLOAD_POLL_MS = 500;
+const UPLOAD_TIMEOUT_MS = 30_000;
+const SUPPORTED_EXTENSIONS = new Set(['.jpg', '.jpeg', '.png', '.gif', '.webp']);
+
+function validateImagePaths(raw: string): string[] {
+  const paths = raw.split(',').map(s => s.trim()).filter(Boolean);
+  if (paths.length > MAX_IMAGES) {
+    throw new CommandExecutionError(`Too many images: ${paths.length} (max ${MAX_IMAGES})`);
+  }
+  return paths.map(p => {
+    const absPath = path.resolve(p);
+    const ext = path.extname(absPath).toLowerCase();
+    if (!SUPPORTED_EXTENSIONS.has(ext)) {
+      throw new CommandExecutionError(`Unsupported image format "${ext}". Supported: jpg, png, gif, webp`);
+    }
+    const stat = fs.statSync(absPath, { throwIfNoEntry: false } as any);
+    if (!stat || !stat.isFile()) {
+      throw new CommandExecutionError(`Not a valid file: ${absPath}`);
+    }
+    return absPath;
+  });
+}
+
 cli({
   site: 'twitter',
   name: 'post',
@@ -11,66 +37,74 @@ cli({
   browser: true,
   args: [
     { name: 'text', type: 'string', required: true, positional: true, help: 'The text content of the tweet' },
+    { name: 'images', type: 'string', required: false, help: 'Image paths, comma-separated, max 4 (jpg/png/gif/webp)' },
   ],
   columns: ['status', 'message', 'text'],
   func: async (page: IPage | null, kwargs: any) => {
     if (!page) throw new CommandExecutionError('Browser session required for twitter post');
 
-    // 1. Navigate directly to the compose tweet modal
+    // Validate images upfront before any browser interaction
+    const absPaths = kwargs.images ? validateImagePaths(String(kwargs.images)) : [];
+
+    // 1. Navigate to compose modal
     await page.goto('https://x.com/compose/tweet');
-    await page.wait(3); // Wait for the modal and React app to hydrate
+    await page.wait(3);
 
-    // 2. Automate typing and clicking
-    const result = await page.evaluate(`(async () => {
+    // 2. Type the text via clipboard paste (handles newlines in Draft.js)
+    const typeResult = await page.evaluate(`(async () => {
         try {
-            // Find the active text area
             const box = document.querySelector('[data-testid="tweetTextarea_0"]');
-            if (box) {
-                box.focus();
-                // Simulate a paste event to properly handle newlines in Draft.js/React
-                const textToInsert = ${JSON.stringify(kwargs.text)};
-                const dataTransfer = new DataTransfer();
-                dataTransfer.setData('text/plain', textToInsert);
-                box.dispatchEvent(new ClipboardEvent('paste', {
-                    clipboardData: dataTransfer,
-                    bubbles: true,
-                    cancelable: true
-                }));
-            } else {
-                return { ok: false, message: 'Could not find the tweet composer text area.' };
-            }
-            
-            // Wait a brief moment for the button state to update
-            await new Promise(r => setTimeout(r, 1000));
-            
-            // Click the post button
-            const btn = document.querySelector('[data-testid="tweetButton"]');
-            if (btn && !btn.disabled) {
-                btn.click();
-                return { ok: true, message: 'Tweet posted successfully.' };
-            } else {
-                // Sometimes it's rendered inline depending on the viewport
-                const inlineBtn = document.querySelector('[data-testid="tweetButtonInline"]');
-                if (inlineBtn && !inlineBtn.disabled) {
-                    inlineBtn.click();
-                    return { ok: true, message: 'Tweet posted successfully.' };
-                }
-                return { ok: false, message: 'Tweet button is disabled or not found.' };
-            }
-        } catch (e) {
-            return { ok: false, message: e.toString() };
-        }
+            if (!box) return { ok: false, message: 'Could not find the tweet composer text area.' };
+            box.focus();
+            const dt = new DataTransfer();
+            dt.setData('text/plain', ${JSON.stringify(kwargs.text)});
+            box.dispatchEvent(new ClipboardEvent('paste', { clipboardData: dt, bubbles: true, cancelable: true }));
+            return { ok: true };
+        } catch (e) { return { ok: false, message: String(e) }; }
     })()`);
 
-    // 3. Wait a few seconds for the network request to finish sending
-    if (result.ok) {
-        await page.wait(3);
+    if (!typeResult.ok) {
+      return [{ status: 'failed', message: typeResult.message, text: kwargs.text }];
+    }
+
+    // 3. Attach images if provided
+    if (absPaths.length > 0) {
+      if (!page.setFileInput) {
+        throw new CommandExecutionError('Browser extension does not support file upload. Please update the extension.');
+      }
+      await page.setFileInput(absPaths, 'input[data-testid="fileInput"]');
+
+      // Poll until attachments render and tweet button is enabled
+      const pollIterations = Math.ceil(UPLOAD_TIMEOUT_MS / UPLOAD_POLL_MS);
+      const uploaded = await page.evaluate(`(async () => {
+          for (let i = 0; i < ${JSON.stringify(pollIterations)}; i++) {
+              await new Promise(r => setTimeout(r, ${JSON.stringify(UPLOAD_POLL_MS)}));
+              const container = document.querySelector('[data-testid="attachments"]');
+              if (!container) continue;
+              if (container.querySelectorAll('[role="group"]').length !== ${JSON.stringify(absPaths.length)}) continue;
+              const btn = document.querySelector('[data-testid="tweetButton"]') || document.querySelector('[data-testid="tweetButtonInline"]');
+              if (btn && !btn.disabled) return true;
+          }
+          return false;
+      })()`);
+
+      if (!uploaded) {
+        return [{ status: 'failed', message: `Image upload timed out (${UPLOAD_TIMEOUT_MS / 1000}s).`, text: kwargs.text }];
+      }
     }
 
-    return [{
-        status: result.ok ? 'success' : 'failed',
-        message: result.message,
-        text: kwargs.text
-    }];
+    // 4. Click the post button
+    await page.wait(1);
+    const result = await page.evaluate(`(async () => {
+        try {
+            const btn = document.querySelector('[data-testid="tweetButton"]') || document.querySelector('[data-testid="tweetButtonInline"]');
+            if (btn && !btn.disabled) { btn.click(); return { ok: true, message: 'Tweet posted successfully.' }; }
+            return { ok: false, message: 'Tweet button is disabled or not found.' };
+        } catch (e) { return { ok: false, message: String(e) }; }
+    })()`);
+
+    if (result.ok) await page.wait(3);
+
+    return [{ status: result.ok ? 'success' : 'failed', message: result.message, text: kwargs.text }];
   }
 });

package/src/clis/twitter/reply.test.ts

@@ -0,0 +1,177 @@
+import * as fs from 'node:fs';
+import * as os from 'node:os';
+import * as path from 'node:path';
+
+import { describe, expect, it, vi } from 'vitest';
+
+import { getRegistry } from '../../registry.js';
+import type { IPage } from '../../types.js';
+import { __test__ } from './reply.js';
+
+function createPageMock(evaluateResults: any[], overrides: Partial<IPage> = {}): IPage {
+  const evaluate = vi.fn();
+  for (const result of evaluateResults) {
+    evaluate.mockResolvedValueOnce(result);
+  }
+
+  return {
+    goto: vi.fn().mockResolvedValue(undefined),
+    evaluate,
+    snapshot: vi.fn().mockResolvedValue(undefined),
+    click: vi.fn().mockResolvedValue(undefined),
+    typeText: vi.fn().mockResolvedValue(undefined),
+    pressKey: vi.fn().mockResolvedValue(undefined),
+    scrollTo: vi.fn().mockResolvedValue(undefined),
+    getFormState: vi.fn().mockResolvedValue({ forms: [], orphanFields: [] }),
+    wait: vi.fn().mockResolvedValue(undefined),
+    tabs: vi.fn().mockResolvedValue([]),
+    selectTab: vi.fn().mockResolvedValue(undefined),
+    networkRequests: vi.fn().mockResolvedValue([]),
+    consoleMessages: vi.fn().mockResolvedValue([]),
+    scroll: vi.fn().mockResolvedValue(undefined),
+    autoScroll: vi.fn().mockResolvedValue(undefined),
+    installInterceptor: vi.fn().mockResolvedValue(undefined),
+    getInterceptedRequests: vi.fn().mockResolvedValue([]),
+    getCookies: vi.fn().mockResolvedValue([]),
+    screenshot: vi.fn().mockResolvedValue(''),
+    waitForCapture: vi.fn().mockResolvedValue(undefined),
+    ...overrides,
+  };
+}
+
+describe('twitter reply command', () => {
+  it('keeps the text-only reply flow working', async () => {
+    const cmd = getRegistry().get('twitter/reply');
+    expect(cmd?.func).toBeTypeOf('function');
+
+    const page = createPageMock([
+      { ok: true, message: 'Reply posted successfully.' },
+    ]);
+
+    const result = await cmd!.func!(page, {
+      url: 'https://x.com/_kop6/status/2040254679301718161?s=20',
+      text: 'text-only reply',
+    });
+
+    expect(page.goto).toHaveBeenCalledWith('https://x.com/_kop6/status/2040254679301718161?s=20');
+    expect(page.wait).toHaveBeenCalledWith({ selector: '[data-testid="primaryColumn"]' });
+    expect(result).toEqual([
+      {
+        status: 'success',
+        message: 'Reply posted successfully.',
+        text: 'text-only reply',
+      },
+    ]);
+  });
+
+  it('uploads a local image through the dedicated reply composer when --image is provided', async () => {
+    const cmd = getRegistry().get('twitter/reply');
+    expect(cmd?.func).toBeTypeOf('function');
+
+    const tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'opencli-twitter-reply-'));
+    const imagePath = path.join(tempDir, 'qr.png');
+    fs.writeFileSync(imagePath, Buffer.from([0x89, 0x50, 0x4e, 0x47]));
+
+    const setFileInput = vi.fn().mockResolvedValue(undefined);
+    const page = createPageMock([
+      { ok: true, previewCount: 1 },
+      { ok: true, message: 'Reply posted successfully.' },
+    ], {
+      setFileInput,
+    });
+
+    const result = await cmd!.func!(page, {
+      url: 'https://x.com/_kop6/status/2040254679301718161?s=20',
+      text: 'reply with image',
+      image: imagePath,
+    });
+
+    expect(page.goto).toHaveBeenCalledWith('https://x.com/compose/post?in_reply_to=2040254679301718161');
+    expect(page.wait).toHaveBeenNthCalledWith(1, { selector: '[data-testid="tweetTextarea_0"]' });
+    expect(page.wait).toHaveBeenNthCalledWith(2, { selector: 'input[type="file"][data-testid="fileInput"]', timeout: 20 });
+    expect(setFileInput).toHaveBeenCalledWith([imagePath], 'input[type="file"][data-testid="fileInput"]');
+    expect(result).toEqual([
+      {
+        status: 'success',
+        message: 'Reply posted successfully.',
+        text: 'reply with image',
+        image: imagePath,
+      },
+    ]);
+  });
+
+  it('downloads a remote image before uploading when --image-url is provided', async () => {
+    const cmd = getRegistry().get('twitter/reply');
+    expect(cmd?.func).toBeTypeOf('function');
+
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      headers: {
+        get: vi.fn().mockReturnValue('image/png'),
+      },
+      arrayBuffer: vi.fn().mockResolvedValue(Uint8Array.from([0x89, 0x50, 0x4e, 0x47]).buffer),
+    });
+    vi.stubGlobal('fetch', fetchMock);
+
+    const setFileInput = vi.fn().mockResolvedValue(undefined);
+    const page = createPageMock([
+      { ok: true, previewCount: 1 },
+      { ok: true, message: 'Reply posted successfully.' },
+    ], {
+      setFileInput,
+    });
+
+    const result = await cmd!.func!(page, {
+      url: 'https://x.com/_kop6/status/2040254679301718161?s=20',
+      text: 'reply with remote image',
+      'image-url': 'https://example.com/qr',
+    });
+
+    expect(fetchMock).toHaveBeenCalledWith('https://example.com/qr');
+    expect(setFileInput).toHaveBeenCalledTimes(1);
+    const uploadedPath = setFileInput.mock.calls[0][0][0];
+    expect(uploadedPath).toMatch(/opencli-twitter-reply-.*\/image\.png$/);
+    expect(fs.existsSync(uploadedPath)).toBe(false);
+    expect(result).toEqual([
+      {
+        status: 'success',
+        message: 'Reply posted successfully.',
+        text: 'reply with remote image',
+        'image-url': 'https://example.com/qr',
+      },
+    ]);
+
+    vi.unstubAllGlobals();
+  });
+
+  it('rejects invalid image paths early', async () => {
+    await expect(() => __test__.resolveImagePath('/tmp/does-not-exist.png'))
+      .toThrow('Image file not found');
+  });
+
+  it('rejects using --image and --image-url together', async () => {
+    const cmd = getRegistry().get('twitter/reply');
+    expect(cmd?.func).toBeTypeOf('function');
+
+    const page = createPageMock([]);
+
+    await expect(cmd!.func!(page, {
+      url: 'https://x.com/_kop6/status/2040254679301718161?s=20',
+      text: 'nope',
+      image: '/tmp/a.png',
+      'image-url': 'https://example.com/a.png',
+    })).rejects.toThrow('Use either --image or --image-url, not both.');
+  });
+
+  it('extracts tweet ids from both user and i/status URLs', () => {
+    expect(__test__.extractTweetId('https://x.com/_kop6/status/2040254679301718161?s=20')).toBe('2040254679301718161');
+    expect(__test__.extractTweetId('https://x.com/i/status/2040318731105313143')).toBe('2040318731105313143');
+    expect(__test__.buildReplyComposerUrl('https://x.com/i/status/2040318731105313143'))
+      .toBe('https://x.com/compose/post?in_reply_to=2040318731105313143');
+  });
+
+  it('prefers content-type when resolving remote image extensions', () => {
+    expect(__test__.resolveImageExtension('https://example.com/no-ext', 'image/webp')).toBe('.webp');
+    expect(__test__.resolveImageExtension('https://example.com/a.jpeg?x=1', null)).toBe('.jpeg');
+  });
+});

package/src/clis/twitter/reply.ts

@@ -1,63 +1,309 @@
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import * as os from 'node:os';
+
 import { CommandExecutionError } from '../../errors.js';
 import { cli, Strategy } from '../../registry.js';
 import type { IPage } from '../../types.js';
 
+const REPLY_FILE_INPUT_SELECTOR = 'input[type="file"][data-testid="fileInput"]';
+const SUPPORTED_IMAGE_EXTENSIONS = new Set([
+  '.jpg',
+  '.jpeg',
+  '.png',
+  '.gif',
+  '.webp',
+]);
+const MAX_IMAGE_SIZE_BYTES = 20 * 1024 * 1024; // 20 MB (Twitter allows 5MB images, 15MB GIFs)
+const CONTENT_TYPE_TO_EXTENSION: Record<string, string> = {
+  'image/jpeg': '.jpg',
+  'image/jpg': '.jpg',
+  'image/png': '.png',
+  'image/gif': '.gif',
+  'image/webp': '.webp',
+};
+
+function resolveImagePath(imagePath: string): string {
+  const absPath = path.resolve(imagePath);
+  if (!fs.existsSync(absPath)) {
+    throw new Error(`Image file not found: ${absPath}`);
+  }
+
+  const ext = path.extname(absPath).toLowerCase();
+  if (!SUPPORTED_IMAGE_EXTENSIONS.has(ext)) {
+    throw new Error(`Unsupported image format "${ext}". Supported: jpg, jpeg, png, gif, webp`);
+  }
+
+  const stat = fs.statSync(absPath);
+  if (stat.size > MAX_IMAGE_SIZE_BYTES) {
+    throw new Error(
+      `Image too large: ${(stat.size / 1024 / 1024).toFixed(1)} MB (max ${MAX_IMAGE_SIZE_BYTES / 1024 / 1024} MB)`
+    );
+  }
+
+  return absPath;
+}
+
+function extractTweetId(url: string): string {
+  let pathname = '';
+  try {
+    pathname = new URL(url).pathname;
+  } catch {
+    throw new Error(`Invalid tweet URL: ${url}`);
+  }
+
+  const match = pathname.match(/\/status\/(\d+)/);
+  if (!match?.[1]) {
+    throw new Error(`Could not extract tweet ID from URL: ${url}`);
+  }
+
+  return match[1];
+}
+
+function buildReplyComposerUrl(url: string): string {
+  return `https://x.com/compose/post?in_reply_to=${extractTweetId(url)}`;
+}
+
+function resolveImageExtension(url: string, contentType: string | null): string {
+  const normalizedContentType = (contentType || '').split(';')[0].trim().toLowerCase();
+  if (normalizedContentType && CONTENT_TYPE_TO_EXTENSION[normalizedContentType]) {
+    return CONTENT_TYPE_TO_EXTENSION[normalizedContentType];
+  }
+
+  try {
+    const pathname = new URL(url).pathname;
+    const ext = path.extname(pathname).toLowerCase();
+    if (SUPPORTED_IMAGE_EXTENSIONS.has(ext)) return ext;
+  } catch {
+    // Fall through to the final error below.
+  }
+
+  throw new Error(
+    `Unsupported remote image format "${normalizedContentType || 'unknown'}". ` +
+    'Supported: jpg, jpeg, png, gif, webp'
+  );
+}
+
+async function downloadRemoteImage(imageUrl: string): Promise<string> {
+  let parsed: URL;
+  try {
+    parsed = new URL(imageUrl);
+  } catch {
+    throw new Error(`Invalid image URL: ${imageUrl}`);
+  }
+
+  if (!/^https?:$/.test(parsed.protocol)) {
+    throw new Error(`Unsupported image URL protocol: ${parsed.protocol}`);
+  }
+
+  const response = await fetch(imageUrl);
+  if (!response.ok) {
+    throw new Error(`Image download failed: HTTP ${response.status}`);
+  }
+
+  const contentLength = Number(response.headers.get('content-length') || '0');
+  if (contentLength > MAX_IMAGE_SIZE_BYTES) {
+    throw new Error(`Image too large: ${(contentLength / 1024 / 1024).toFixed(1)} MB (max ${MAX_IMAGE_SIZE_BYTES / 1024 / 1024} MB)`);
+  }
+
+  const ext = resolveImageExtension(imageUrl, response.headers.get('content-type'));
+  const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'opencli-twitter-reply-'));
+  const tmpPath = path.join(tmpDir, `image${ext}`);
+  const buffer = Buffer.from(await response.arrayBuffer());
+  if (buffer.byteLength > MAX_IMAGE_SIZE_BYTES) {
+    fs.rmSync(tmpDir, { recursive: true, force: true });
+    throw new Error(`Image too large: ${(buffer.byteLength / 1024 / 1024).toFixed(1)} MB (max ${MAX_IMAGE_SIZE_BYTES / 1024 / 1024} MB)`);
+  }
+  fs.writeFileSync(tmpPath, buffer);
+  return tmpPath;
+}
+
+async function attachReplyImage(page: IPage, absImagePath: string): Promise<void> {
+  let uploaded = false;
+  if (page.setFileInput) {
+    try {
+      await page.setFileInput([absImagePath], REPLY_FILE_INPUT_SELECTOR);
+      uploaded = true;
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      if (!msg.includes('Unknown action') && !msg.includes('not supported')) {
+        throw new Error(`Image upload failed: ${msg}`);
+      }
+      // setFileInput not supported by extension — fall through to base64 fallback
+    }
+  }
+
+  if (!uploaded) {
+    const ext = path.extname(absImagePath).toLowerCase();
+    const mimeType = ext === '.png'
+      ? 'image/png'
+      : ext === '.gif'
+        ? 'image/gif'
+        : ext === '.webp'
+          ? 'image/webp'
+          : 'image/jpeg';
+    const base64 = fs.readFileSync(absImagePath).toString('base64');
+    if (base64.length > 500_000) {
+      console.warn(
+        `[warn] Image base64 payload is ${(base64.length / 1024 / 1024).toFixed(1)}MB. ` +
+        'This may fail with the browser bridge. Update the extension to v1.6+ for CDP-based upload, ' +
+        'or compress the image before attaching.'
+      );
+    }
+    const upload = await page.evaluate(`
+      (() => {
+        const input = document.querySelector(${JSON.stringify(REPLY_FILE_INPUT_SELECTOR)});
+        if (!input) return { ok: false, error: 'No file input found on page' };
+
+        const binary = atob(${JSON.stringify(base64)});
+        const bytes = new Uint8Array(binary.length);
+        for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+
+        const dt = new DataTransfer();
+        const blob = new Blob([bytes], { type: ${JSON.stringify(mimeType)} });
+        dt.items.add(new File([blob], ${JSON.stringify(path.basename(absImagePath))}, { type: ${JSON.stringify(mimeType)} }));
+
+        Object.defineProperty(input, 'files', { value: dt.files, writable: false });
+        input.dispatchEvent(new Event('change', { bubbles: true }));
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        return { ok: true };
+      })()
+    `);
+
+    if (!upload?.ok) {
+      throw new Error(`Image upload failed: ${upload?.error ?? 'unknown error'}`);
+    }
+  }
+
+  await page.wait(2);
+  const uploadState = await page.evaluate(`
+    (() => {
+      const previewCount = document.querySelectorAll(
+        '[data-testid="attachments"] img, [data-testid="attachments"] video, [data-testid="tweetPhoto"]'
+      ).length;
+      const hasMedia = previewCount > 0
+        || !!document.querySelector('[data-testid="attachments"]')
+        || !!Array.from(document.querySelectorAll('button,[role="button"]')).find((el) =>
+          /remove media|remove image|remove/i.test((el.getAttribute('aria-label') || '') + ' ' + (el.textContent || ''))
+        );
+      return { ok: hasMedia, previewCount };
+    })()
+  `);
+
+  if (!uploadState?.ok) {
+    throw new Error('Image upload failed: preview did not appear.');
+  }
+}
+
+async function submitReply(page: IPage, text: string): Promise<{ ok: boolean; message: string }> {
+  return page.evaluate(`(async () => {
+      try {
+          const visible = (el) => !!el && (el.offsetParent !== null || el.getClientRects().length > 0);
+          const boxes = Array.from(document.querySelectorAll('[data-testid="tweetTextarea_0"]'));
+          const box = boxes.find(visible) || boxes[0];
+          if (!box) {
+              return { ok: false, message: 'Could not find the reply text area. Are you logged in?' };
+          }
+
+          box.focus();
+          const textToInsert = ${JSON.stringify(text)};
+          // execCommand('insertText') is more reliable with Twitter's Draft.js editor
+          if (!document.execCommand('insertText', false, textToInsert)) {
+              // Fallback to paste event if execCommand fails
+              const dataTransfer = new DataTransfer();
+              dataTransfer.setData('text/plain', textToInsert);
+              box.dispatchEvent(new ClipboardEvent('paste', {
+                  clipboardData: dataTransfer,
+                  bubbles: true,
+                  cancelable: true
+              }));
+          }
+
+          await new Promise(r => setTimeout(r, 1000));
+
+          const buttons = Array.from(
+              document.querySelectorAll('[data-testid="tweetButton"], [data-testid="tweetButtonInline"]')
+          );
+          const btn = buttons.find((el) => visible(el) && !el.disabled);
+          if (!btn) {
+              return { ok: false, message: 'Reply button is disabled or not found.' };
+          }
+
+          btn.click();
+          return { ok: true, message: 'Reply posted successfully.' };
+      } catch (e) {
+          return { ok: false, message: e.toString() };
+      }
+  })()`);
+}
+
 cli({
   site: 'twitter',
   name: 'reply',
-  description: 'Reply to a specific tweet',
+  description: 'Reply to a specific tweet, optionally with a local or remote image',
   domain: 'x.com',
   strategy: Strategy.UI, // Uses the UI directly to input and click post
   browser: true,
   args: [
     { name: 'url', type: 'string', required: true, positional: true, help: 'The URL of the tweet to reply to' },
     { name: 'text', type: 'string', required: true, positional: true, help: 'The text content of your reply' },
+    { name: 'image', help: 'Optional local image path to attach to the reply' },
+    { name: 'image-url', help: 'Optional remote image URL to download and attach to the reply' },
   ],
   columns: ['status', 'message', 'text'],
   func: async (page: IPage | null, kwargs: any) => {
     if (!page) throw new CommandExecutionError('Browser session required for twitter reply');
+    if (kwargs.image && kwargs['image-url']) {
+      throw new Error('Use either --image or --image-url, not both.');
+    }
+
+    let localImagePath: string | undefined;
+    let cleanupDir: string | undefined;
+    try {
+      if (kwargs.image) {
+        localImagePath = resolveImagePath(kwargs.image);
+      } else if (kwargs['image-url']) {
+        localImagePath = await downloadRemoteImage(kwargs['image-url']);
+        cleanupDir = path.dirname(localImagePath);
+      }
+
+      // Dedicated composer is more reliable for image replies because the media
+      // toolbar and file input are consistently present there.
+      if (localImagePath) {
+        await page.goto(buildReplyComposerUrl(kwargs.url));
+        await page.wait({ selector: '[data-testid="tweetTextarea_0"]' });
+        await page.wait({ selector: REPLY_FILE_INPUT_SELECTOR, timeout: 20 });
+        await attachReplyImage(page, localImagePath);
+      } else {
+        await page.goto(kwargs.url);
+        await page.wait({ selector: '[data-testid="primaryColumn"]' });
+      }
+
+      const result = await submitReply(page, kwargs.text);
 
-    // 1. Navigate to the tweet page
-    await page.goto(kwargs.url);
-    await page.wait({ selector: '[data-testid="primaryColumn"]' });
-
-    // 2. Automate typing the reply and clicking reply
-    const result = await page.evaluate(`(async () => {
-        try {
-            // Find the reply text area on the tweet page. 
-            // The placeholder is usually "Post your reply"
-            const box = document.querySelector('[data-testid="tweetTextarea_0"]');
-            if (box) {
-                box.focus();
-                document.execCommand('insertText', false, ${JSON.stringify(kwargs.text)});
-            } else {
-                return { ok: false, message: 'Could not find the reply text area. Are you logged in?' };
-            }
-            
-            // Wait for React state to register the input and enable the button
-            await new Promise(r => setTimeout(r, 1000));
-            
-            // Find the Reply button. It usually shares the same test id tweetButtonInline in this context
-            const btn = document.querySelector('[data-testid="tweetButtonInline"]');
-            if (btn && !btn.disabled) {
-                btn.click();
-                return { ok: true, message: 'Reply posted successfully.' };
-            } else {
-                return { ok: false, message: 'Reply button is disabled or not found.' };
-            }
-        } catch (e) {
-            return { ok: false, message: e.toString() };
-        }
-    })()`);
-
-    if (result.ok) {
+      if (result.ok) {
         await page.wait(3); // Wait for network submission to complete
-    }
+      }
 
-    return [{
+      return [{
         status: result.ok ? 'success' : 'failed',
         message: result.message,
-        text: kwargs.text
-    }];
+        text: kwargs.text,
+        ...(kwargs.image ? { image: kwargs.image } : {}),
+        ...(kwargs['image-url'] ? { 'image-url': kwargs['image-url'] } : {}),
+      }];
+    } finally {
+      if (cleanupDir) {
+        fs.rmSync(cleanupDir, { recursive: true, force: true });
+      }
+    }
   }
 });
+
+export const __test__ = {
+  buildReplyComposerUrl,
+  downloadRemoteImage,
+  extractTweetId,
+  resolveImageExtension,
+  resolveImagePath,
+};