@jackwener/opencli 1.7.8 → 1.7.10

package/clis/twitter/post.test.js

@@ -1,6 +1,7 @@
 import { describe, expect, it, vi } from 'vitest';
 import { getRegistry } from '@jackwener/opencli/registry';
 import './post.js';
+
 vi.mock('node:fs', async (importOriginal) => {
     const actual = await importOriginal();
     return {
@@ -12,6 +13,7 @@ vi.mock('node:fs', async (importOriginal) => {
         }),
     };
 });
+
 vi.mock('node:path', async (importOriginal) => {
     const actual = await importOriginal();
     return {
@@ -23,92 +25,170 @@ vi.mock('node:path', async (importOriginal) => {
         }),
     };
 });
-function makePage(overrides = {}) {
+
+function makePage(evaluateResults = [], overrides = {}) {
+    const evaluate = vi.fn();
+    for (const result of evaluateResults) {
+        evaluate.mockResolvedValueOnce(result);
+    }
+    evaluate.mockResolvedValue({ ok: true });
+
     return {
         goto: vi.fn().mockResolvedValue(undefined),
         wait: vi.fn().mockResolvedValue(undefined),
-        evaluate: vi.fn().mockResolvedValue({ ok: true }),
+        evaluate,
         setFileInput: vi.fn().mockResolvedValue(undefined),
+        insertText: vi.fn().mockResolvedValue(undefined),
         ...overrides,
     };
 }
+
 describe('twitter post command', () => {
     const getCommand = () => getRegistry().get('twitter/post');
-    it('posts text-only tweet successfully', async () => {
+
+    it('posts text-only tweet successfully through the current compose route', async () => {
         const command = getCommand();
-        const page = makePage({
-            evaluate: vi.fn()
-                .mockResolvedValueOnce({ ok: true })
-                .mockResolvedValueOnce({ ok: true, message: 'Tweet posted successfully.' }),
-        });
+        const page = makePage([
+            { ok: true }, // focus composer
+            { ok: true }, // verify native insertText
+            { ok: true }, // click post
+            { ok: true, message: 'Tweet posted successfully.' }, // verify submit completed
+        ]);
+
         const result = await command.func(page, { text: 'hello world' });
+
         expect(result).toEqual([{ status: 'success', message: 'Tweet posted successfully.', text: 'hello world' }]);
-        expect(page.goto).toHaveBeenCalledWith('https://x.com/compose/tweet');
+        expect(page.goto).toHaveBeenCalledWith('https://x.com/compose/post', { waitUntil: 'load', settleMs: 2500 });
+        expect(page.wait).toHaveBeenNthCalledWith(1, { selector: '[data-testid="tweetTextarea_0"]', timeout: 15 });
+        expect(page.insertText).toHaveBeenCalledWith('hello world');
     });
+
     it('returns failed when text area not found', async () => {
         const command = getCommand();
-        const page = makePage({
-            evaluate: vi.fn()
-                .mockResolvedValueOnce({ ok: false, message: 'Could not find the tweet composer text area.' }),
-        });
+        const page = makePage([
+            { ok: false, message: 'Could not find the tweet composer text area. Are you logged in?' },
+        ]);
+
         const result = await command.func(page, { text: 'hello' });
-        expect(result).toEqual([{ status: 'failed', message: 'Could not find the tweet composer text area.', text: 'hello' }]);
+
+        expect(result).toEqual([{ status: 'failed', message: 'Could not find the tweet composer text area. Are you logged in?', text: 'hello' }]);
+        expect(page.insertText).not.toHaveBeenCalled();
     });
+
     it('throws when more than 4 images', async () => {
         const command = getCommand();
         const page = makePage();
         await expect(command.func(page, { text: 'hi', images: 'a.png,b.png,c.png,d.png,e.png' })).rejects.toThrow('Too many images: 5 (max 4)');
     });
+
     it('throws when image file does not exist', async () => {
         const command = getCommand();
         const page = makePage();
         await expect(command.func(page, { text: 'hi', images: 'missing.png' })).rejects.toThrow('Not a valid file');
     });
+
     it('throws on unsupported image format', async () => {
         const command = getCommand();
         const page = makePage();
         await expect(command.func(page, { text: 'hi', images: 'photo.bmp' })).rejects.toThrow('Unsupported image format');
     });
+
     it('throws when page.setFileInput is not available', async () => {
         const command = getCommand();
-        const page = makePage({
-            evaluate: vi.fn().mockResolvedValueOnce({ ok: true }),
-            setFileInput: undefined,
-        });
+        const page = makePage([], { setFileInput: undefined });
         await expect(command.func(page, { text: 'hi', images: 'a.png' })).rejects.toThrow('Browser extension does not support file upload');
     });
-    it('posts with images when upload completes', async () => {
+
+    it('uploads images before inserting text so media re-renders cannot erase the tweet text', async () => {
         const command = getCommand();
-        const page = makePage({
-            evaluate: vi.fn()
-                .mockResolvedValueOnce({ ok: true }) // type text
-                .mockResolvedValueOnce(true) // upload polling returns true
-                .mockResolvedValueOnce({ ok: true, message: 'Tweet posted successfully.' }), // click post
-        });
+        const page = makePage([
+            { ok: true, previewCount: 2 }, // upload polling returns true
+            { ok: true }, // focus composer
+            { ok: true }, // verify native insertText
+            { ok: true }, // click post
+            { ok: true, message: 'Tweet posted successfully.' }, // verify submit completed
+        ]);
+
         const result = await command.func(page, { text: 'with images', images: 'a.png,b.png' });
+
         expect(result).toEqual([{ status: 'success', message: 'Tweet posted successfully.', text: 'with images' }]);
-        expect(page.setFileInput).toHaveBeenCalled();
-        const uploadScript = page.evaluate.mock.calls[1][0];
+        expect(page.wait).toHaveBeenNthCalledWith(2, { selector: 'input[type="file"][data-testid="fileInput"]', timeout: 20 });
+        expect(page.setFileInput).toHaveBeenCalledWith(['/abs/a.png', '/abs/b.png'], 'input[type="file"][data-testid="fileInput"]');
+        expect(page.insertText).toHaveBeenCalledWith('with images');
+        expect(page.setFileInput.mock.invocationCallOrder[0]).toBeLessThan(page.insertText.mock.invocationCallOrder[0]);
+
+        const uploadScript = page.evaluate.mock.calls[0][0];
         expect(uploadScript).toContain('[data-testid="attachments"]');
-        expect(uploadScript).toContain('[role="group"]');
+        expect(uploadScript).toContain('buttonReady');
     });
+
+    it('prefers nativeType when available because bridge insert-text can miss Draft.js after media upload', async () => {
+        const command = getCommand();
+        const nativeType = vi.fn().mockResolvedValue(undefined);
+        const page = makePage([
+            { ok: true }, // focus composer
+            { ok: true }, // verify nativeType
+            { ok: true }, // click post
+            { ok: true, message: 'Tweet posted successfully.' },
+        ], { nativeType });
+
+        const result = await command.func(page, { text: 'native type' });
+
+        expect(result).toEqual([{ status: 'success', message: 'Tweet posted successfully.', text: 'native type' }]);
+        expect(nativeType).toHaveBeenCalledWith('native type');
+        expect(page.insertText).not.toHaveBeenCalled();
+    });
+
+    it('treats X success toast as completed even if stale composer nodes remain', async () => {
+        const command = getCommand();
+        const page = makePage([
+            { ok: true }, // focus composer
+            { ok: true }, // verify native insertText
+            { ok: true }, // click post
+            { ok: true, message: 'Tweet posted successfully.' }, // verify submit completed
+        ]);
+
+        await command.func(page, { text: 'toast success' });
+
+        const submitScript = page.evaluate.mock.calls[3][0];
+        expect(submitScript).toContain('successToast');
+        expect(submitScript).toContain('your post was sent');
+    });
+
     it('returns failed when image upload times out', async () => {
         const command = getCommand();
-        const page = makePage({
-            evaluate: vi.fn()
-                .mockResolvedValueOnce({ ok: true })
-                .mockResolvedValueOnce(false),
-        });
+        const page = makePage([
+            { ok: false, message: 'Image upload timed out (30s).' },
+        ]);
+
         const result = await command.func(page, { text: 'timeout', images: 'a.png' });
+
         expect(result).toEqual([{ status: 'failed', message: 'Image upload timed out (30s).', text: 'timeout' }]);
+        expect(page.insertText).not.toHaveBeenCalled();
+    });
+
+    it('falls back to DOM insertion when native insertText is unavailable', async () => {
+        const command = getCommand();
+        const page = makePage([
+            { ok: true }, // focus composer
+            { ok: true }, // fallback DOM insertion
+            { ok: true }, // click post
+            { ok: true, message: 'Tweet posted successfully.' },
+        ], { insertText: undefined });
+
+        const result = await command.func(page, { text: 'fallback text' });
+
+        expect(result).toEqual([{ status: 'success', message: 'Tweet posted successfully.', text: 'fallback text' }]);
+        expect(page.evaluate.mock.calls[1][0]).toContain("execCommand('insertText'");
     });
+
     it('validates images before navigating to compose page', async () => {
         const command = getCommand();
         const page = makePage();
         await expect(command.func(page, { text: 'hi', images: 'missing.png' })).rejects.toThrow('Not a valid file');
-        // Should NOT have navigated since validation happens first
         expect(page.goto).not.toHaveBeenCalled();
     });
+
     it('throws when no browser session', async () => {
         const command = getCommand();
         await expect(command.func(null, { text: 'hi' })).rejects.toThrow('Browser session required for twitter post');

package/clis/uiverse/_shared.js

@@ -273,13 +273,52 @@ export function parseHtmlRootSignature(html) {
   };
 }
 
+export function getPreviewFallbackTags(signature) {
+  const tag = String(signature?.tag || '').toLowerCase();
+  if (!tag) return ['label', 'button', 'a', 'div'];
+  if (tag === 'input') return ['input', 'label', 'button', 'a', 'div'];
+  return [tag];
+}
+
 export async function locatePreviewElement(page, html) {
   const signature = parseHtmlRootSignature(html);
   const raw = await page.evaluate(`(async () => {
     const sig = ${JSON.stringify(signature)};
     const viewportWidth = window.innerWidth;
     const viewportHeight = window.innerHeight;
-    const fallbackTags = sig.tag ? [sig.tag] : ['label', 'button', 'a', 'div'];
+    const fallbackTags = ${JSON.stringify(getPreviewFallbackTags(signature))};
+
+    const getSearchRoots = () => {
+      const roots = [document];
+      const seen = new Set([document]);
+      for (let index = 0; index < roots.length; index += 1) {
+        const root = roots[index];
+        const nodes = root.querySelectorAll ? Array.from(root.querySelectorAll('*')) : [];
+        for (const node of nodes) {
+          const shadowRoot = node.shadowRoot;
+          if (shadowRoot && !seen.has(shadowRoot)) {
+            seen.add(shadowRoot);
+            roots.push(shadowRoot);
+          }
+        }
+      }
+      return roots;
+    };
+
+    const queryAcrossRoots = (selector, limit = 200) => {
+      const results = [];
+      const seen = new Set();
+      for (const root of getSearchRoots()) {
+        const matches = root.querySelectorAll ? Array.from(root.querySelectorAll(selector)) : [];
+        for (const match of matches) {
+          if (seen.has(match)) continue;
+          seen.add(match);
+          results.push(match);
+          if (results.length >= limit) return results;
+        }
+      }
+      return results;
+    };
 
     const isVisible = (element) => {
       if (!element || !(element instanceof Element)) return false;
@@ -292,6 +331,7 @@ export async function locatePreviewElement(page, html) {
 
     const scoreCandidate = (element, source) => {
       const rect = element.getBoundingClientRect();
+      const style = window.getComputedStyle(element);
       const centerX = rect.x + rect.width / 2;
       const centerY = rect.y + rect.height / 2;
       const area = rect.width * rect.height;
@@ -299,10 +339,15 @@ export async function locatePreviewElement(page, html) {
       if (sig.tag && element.tagName.toLowerCase() === sig.tag) score += 30;
       if (sig.id && element.id === sig.id) score += 120;
       if (sig.classes.length && sig.classes.every((className) => element.classList.contains(className))) score += 120;
+      if (sig.tag === 'input' && source === 'shadow-host') score += 220;
+      if (sig.tag === 'input' && element.tagName.toLowerCase() === 'label') score += 80;
+      if (element.id && element.id.includes('shadow-root')) score += 80;
       if (centerX <= viewportWidth * 0.65) score += 40;
       if (centerY <= viewportHeight * 0.6) score += 40;
       if (area <= viewportWidth * viewportHeight * 0.2) score += 30;
       if (area <= viewportWidth * viewportHeight * 0.05) score += 20;
+      if (style.position === 'fixed') score -= 180;
+      if (rect.height <= 24 && rect.width >= viewportWidth * 0.8) score -= 120;
       return {
         source,
         tag: element.tagName.toLowerCase(),
@@ -327,11 +372,25 @@ export async function locatePreviewElement(page, html) {
       candidates.push(scoreCandidate(element, source));
     };
 
-    if (sig.id) collect(document.getElementById(sig.id), 'id');
-    if (sig.classes.length) collect(document.querySelector('.' + sig.classes.join('.')), 'classes');
+    if (sig.id) {
+      for (const element of queryAcrossRoots('#' + CSS.escape(sig.id), 20)) {
+        collect(element, 'id');
+      }
+    }
+    if (sig.classes.length) {
+      const classSelector = '.' + sig.classes.map((className) => CSS.escape(className)).join('.');
+      for (const element of queryAcrossRoots(classSelector, 20)) {
+        collect(element, 'classes');
+      }
+    }
+    if (sig.tag === 'input') {
+      for (const element of queryAcrossRoots('#shadow-root-div-ready,[id*="shadow-root"]', 20)) {
+        collect(element, 'shadow-host');
+      }
+    }
 
     for (const tagName of fallbackTags) {
-      const tagNodes = Array.from(document.querySelectorAll(tagName));
+      const tagNodes = queryAcrossRoots(tagName, 200);
       for (const node of tagNodes.slice(0, 200)) {
         collect(node, 'tag:' + tagName);
       }

package/clis/uiverse/_shared.test.js

@@ -3,6 +3,7 @@ import {
   UIVERSE_BASE_URL,
   parseComponentInput,
   parseHtmlRootSignature,
+  getPreviewFallbackTags,
   inferLanguage,
   getCodeLength,
 } from './_shared.js';
@@ -39,6 +40,12 @@ describe('uiverse shared helpers', () => {
     expect(parseHtmlRootSignature('')).toEqual({ tag: null, id: null, classes: [] });
   });
 
+  it('uses broader preview fallback tags for input roots', () => {
+    expect(getPreviewFallbackTags({ tag: 'input' })).toEqual(['input', 'label', 'button', 'a', 'div']);
+    expect(getPreviewFallbackTags({ tag: 'label' })).toEqual(['label']);
+    expect(getPreviewFallbackTags({ tag: null })).toEqual(['label', 'button', 'a', 'div']);
+  });
+
   it('infers the language from target and metadata', () => {
     expect(inferLanguage('react', {})).toBe('tsx');
     expect(inferLanguage('vue', {})).toBe('vue');

package/clis/uiverse/code.js

@@ -14,6 +14,7 @@ cli({
   domain: 'uiverse.io',
   strategy: Strategy.PUBLIC,
   browser: true,
+  navigateBefore: 'https://uiverse.io',
   args: [
     { name: 'input', type: 'str', required: true, positional: true, help: 'Uiverse URL or author/slug identifier' },
     { name: 'target', type: 'str', required: true, choices: ['html', 'css', 'react', 'vue'], help: 'Code target to export' },

package/clis/uiverse/navigation.test.js

@@ -0,0 +1,12 @@
+import { describe, expect, it } from 'vitest';
+import { getRegistry } from '@jackwener/opencli/registry';
+import './code.js';
+import './preview.js';
+
+describe('uiverse navigateBefore hardening', () => {
+  it.each(['uiverse/code', 'uiverse/preview'])('%s starts from uiverse home instead of about:blank', (name) => {
+    const cmd = getRegistry().get(name);
+    expect(cmd).toBeDefined();
+    expect(cmd.navigateBefore).toBe('https://uiverse.io');
+  });
+});

package/clis/uiverse/preview.js

@@ -14,6 +14,7 @@ cli({
   domain: 'uiverse.io',
   strategy: Strategy.PUBLIC,
   browser: true,
+  navigateBefore: 'https://uiverse.io',
   args: [
     { name: 'input', type: 'str', required: true, positional: true, help: 'Uiverse URL or author/slug identifier' },
     { name: 'output', type: 'str', required: false, help: 'Output image path (defaults to a temp file)' },