@upgraide/ui-notes-cli 0.1.1 → 0.1.3

package/commands/bulk-resolve.ts

@@ -0,0 +1,138 @@
+import type { Config } from '../config.js';
+import { apiFetch } from '../api.js';
+
+interface BulkResolveOptions {
+  project?: string;
+  message?: string;
+  dryRun?: boolean;
+  force?: boolean;
+  status?: 'resolved' | 'wontfix';
+}
+
+export async function resolveByComponent(
+  config: Config,
+  componentName: string,
+  opts: BulkResolveOptions,
+): Promise<void> {
+  await bulkResolve(config, 'component', componentName, opts);
+}
+
+export async function resolveBySelector(
+  config: Config,
+  selector: string,
+  opts: BulkResolveOptions,
+): Promise<void> {
+  await bulkResolve(config, 'selector', selector, opts);
+}
+
+async function bulkResolve(
+  config: Config,
+  filterBy: 'component' | 'selector',
+  filterValue: string,
+  opts: BulkResolveOptions,
+): Promise<void> {
+  const project = opts.project || config.defaultProject;
+  if (!project) {
+    console.error('No project specified. Use --project or set defaultProject in config.');
+    process.exit(1);
+  }
+
+  const status = opts.status || 'resolved';
+  const resolution = opts.message || `Bulk ${status} (${filterBy}: ${filterValue})`;
+
+  if (opts.dryRun) {
+    // Fetch matching notes to show what would be resolved
+    const response = await apiFetch(config, `/notes?status=open`, { project }) as any;
+    const notes = response.data?.notes || [];
+
+    const matching = notes.filter((n: any) => {
+      if (filterBy === 'component') {
+        return n.component?.toLowerCase() === filterValue.toLowerCase();
+      }
+      if (filterBy === 'selector') {
+        return n.selector?.includes(filterValue);
+      }
+      return false;
+    });
+
+    if (matching.length === 0) {
+      console.log('No matching open notes found.');
+      return;
+    }
+
+    console.log(`[DRY RUN] Would resolve ${matching.length} notes:`);
+    for (const note of matching) {
+      console.log(`  ${note.id} | ${note.type} | ${truncate(note.body, 60)}`);
+    }
+    return;
+  }
+
+  // If not forced, do a dry-run first to show count and confirm
+  if (!opts.force) {
+    const response = await apiFetch(config, `/notes?status=open`, { project }) as any;
+    const notes = response.data?.notes || [];
+
+    const matching = notes.filter((n: any) => {
+      if (filterBy === 'component') {
+        return n.component?.toLowerCase() === filterValue.toLowerCase();
+      }
+      if (filterBy === 'selector') {
+        return n.selector?.includes(filterValue);
+      }
+      return false;
+    });
+
+    if (matching.length === 0) {
+      console.log('No matching open notes found.');
+      return;
+    }
+
+    const label = filterBy === 'component' ? `Component=${filterValue}` : `Selector=${filterValue}`;
+    const answer = await confirm(`About to resolve ${matching.length} notes matching ${label}. Continue? y/n `);
+    if (!answer) {
+      console.log('Aborted.');
+      return;
+    }
+  }
+
+  // Call bulk endpoint
+  const response = await apiFetch(config, '/notes/bulk', {
+    method: 'PATCH',
+    body: {
+      filter: {
+        status: 'open',
+        ...(filterBy === 'component' ? { component: filterValue } : {}),
+        ...(filterBy === 'selector' ? { selector: filterValue } : {}),
+      },
+      update: {
+        status,
+        resolution,
+      },
+    },
+    project,
+  }) as any;
+
+  const count = response.data?.updated || 0;
+
+  if (count === 0) {
+    console.log('No matching open notes found.');
+  } else {
+    console.log(`Resolved ${count} notes.`);
+  }
+}
+
+async function confirm(question: string): Promise<boolean> {
+  const readline = await import('readline');
+  const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+
+  return new Promise((resolve) => {
+    rl.question(question, (answer) => {
+      rl.close();
+      resolve(answer.trim().toLowerCase() === 'y');
+    });
+  });
+}
+
+function truncate(s: string, max: number): string {
+  return s.length > max ? s.slice(0, max) + '...' : s;
+}

package/commands/comment.ts

@@ -0,0 +1,27 @@
+import type { Config } from '../config.js';
+import { apiFetch } from '../api.js';
+
+export async function comment(
+  config: Config,
+  noteId: string,
+  body: string,
+  project?: string,
+): Promise<void> {
+  const data = await apiFetch(config, `/notes/${noteId}/comments`, {
+    method: 'POST',
+    body: { body },
+    project,
+  });
+  console.log(JSON.stringify(data, null, 2));
+}
+
+export async function listComments(
+  config: Config,
+  noteId: string,
+  project?: string,
+): Promise<void> {
+  const data = await apiFetch(config, `/notes/${noteId}/comments`, {
+    project,
+  });
+  console.log(JSON.stringify(data, null, 2));
+}

package/commands/context.ts

@@ -0,0 +1,64 @@
+import type { Config } from '../config.js';
+import { apiFetch } from '../api.js';
+import { formatNotesForAI } from '../formatters/ai-context.js';
+import type { ResolvedNote } from '../resolvers/file-resolver.js';
+
+interface ContextOptions {
+  project?: string;
+  type?: string;
+  status?: string;
+  component?: string;
+  format?: 'markdown' | 'xml' | 'json';
+  limit?: string;
+  resolveFiles?: boolean;
+  rootDir?: string;
+}
+
+export async function context(config: Config, opts: ContextOptions): Promise<void> {
+  const params = new URLSearchParams();
+  params.set('status', opts.status || 'open');
+  if (opts.type) params.set('type', opts.type);
+  if (opts.limit) params.set('limit', opts.limit);
+
+  const qs = params.toString();
+  const path = `/notes${qs ? `?${qs}` : ''}`;
+
+  const response = await apiFetch(config, path, { project: opts.project }) as any;
+  const notes = response.data?.notes || [];
+
+  // Optionally resolve notes to source files
+  let resolvedMap: Map<string, ResolvedNote> | undefined;
+  if (opts.resolveFiles) {
+    const { resolveNoteToFiles } = await import('../resolvers/file-resolver.js');
+    const resolveConfig = config.resolve || {};
+    const rootDir = opts.rootDir || resolveConfig.rootDir || process.cwd();
+    resolvedMap = new Map();
+
+    for (const note of notes) {
+      const resolved = await resolveNoteToFiles(
+        {
+          id: note.id,
+          component: note.component || null,
+          selector: note.selector || null,
+          tag: note.tag || null,
+        },
+        {
+          rootDir,
+          extensions: resolveConfig.extensions,
+          excludeDirs: resolveConfig.excludeDirs,
+        },
+      );
+      resolvedMap.set(note.id, resolved);
+    }
+  }
+
+  const output = formatNotesForAI(notes, {
+    format: opts.format || 'markdown',
+    componentFilter: opts.component,
+    projectName: opts.project || config.defaultProject || 'unknown',
+    resolvedNotes: resolvedMap,
+  });
+
+  // Write to stdout -- pure pipeable output, no JSON wrapper, no logging
+  process.stdout.write(output);
+}

package/commands/pull.ts

@@ -6,6 +6,8 @@ interface PullOptions {
   status?: string;
   type?: string;
   limit?: string;
+  resolveFiles?: boolean;
+  rootDir?: string;
 }
 
 export async function pull(config: Config, opts: PullOptions): Promise<void> {
@@ -17,6 +19,31 @@ export async function pull(config: Config, opts: PullOptions): Promise<void> {
   const qs = params.toString();
   const path = `/notes${qs ? `?${qs}` : ''}`;
 
-  const data = await apiFetch(config, path, { project: opts.project });
+  const data = (await apiFetch(config, path, { project: opts.project })) as any;
+
+  if (opts.resolveFiles) {
+    const { resolveNoteToFiles } = await import('../resolvers/file-resolver.js');
+    const resolveConfig = config.resolve || {};
+    const rootDir = opts.rootDir || resolveConfig.rootDir || process.cwd();
+    const notes = data.data?.notes || data.notes || [];
+
+    for (const note of notes) {
+      const resolved = await resolveNoteToFiles(
+        {
+          id: note.id,
+          component: note.component || null,
+          selector: note.selector || null,
+          tag: note.tag || null,
+        },
+        {
+          rootDir,
+          extensions: resolveConfig.extensions,
+          excludeDirs: resolveConfig.excludeDirs,
+        },
+      );
+      note.resolved_files = resolved.files;
+    }
+  }
+
   console.log(JSON.stringify(data));
 }

package/commands/visual-diff.ts

@@ -0,0 +1,366 @@
+import type { Config } from '../config.js';
+import { apiFetch } from '../api.js';
+import { existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from 'fs';
+import { join } from 'path';
+import { createHash } from 'crypto';
+
+interface VisualDiffOptions {
+  project?: string;
+  url?: string;
+  compare?: boolean;
+  width?: number;
+  fullPage?: boolean;
+}
+
+const SNAPSHOT_DIR = '.uinotes-snapshots';
+
+function hashUrl(url: string): string {
+  return createHash('md5').update(url).digest('hex');
+}
+
+function ensureDir(dir: string): void {
+  if (!existsSync(dir)) {
+    mkdirSync(dir, { recursive: true });
+  }
+}
+
+async function loadPlaywright() {
+  try {
+    const pw = await import('playwright');
+    return pw;
+  } catch {
+    console.error('Playwright is not installed.');
+    console.error('Install it with: bun add playwright');
+    console.error('Then install the browser: bunx playwright install chromium');
+    process.exit(1);
+  }
+}
+
+export async function visualDiff(config: Config, opts: VisualDiffOptions): Promise<void> {
+  const project = opts.project || config.defaultProject;
+  if (!project) {
+    console.error('Error: --project is required (or set defaultProject in config)');
+    process.exit(1);
+  }
+
+  const width = opts.width || 1280;
+  const fullPage = opts.fullPage !== false;
+
+  // Step 1: Fetch open notes to collect URLs
+  console.log(`Fetching open notes for project "${project}"...`);
+  const data = (await apiFetch(config, '/notes?status=open&limit=500', { project })) as any;
+  const notes = data.data?.notes || [];
+
+  if (notes.length === 0) {
+    console.log('No open notes found. Nothing to capture.');
+    return;
+  }
+
+  // Step 2: Extract unique URLs
+  const urlSet = new Set<string>();
+  for (const note of notes) {
+    if (note.url) urlSet.add(note.url);
+  }
+
+  let urls = Array.from(urlSet);
+
+  // Filter to specific URL if provided
+  if (opts.url) {
+    urls = urls.filter((u) => u.includes(opts.url!));
+    if (urls.length === 0) {
+      console.log(`No notes found matching URL "${opts.url}".`);
+      return;
+    }
+  }
+
+  console.log(`Found ${urls.length} unique URL(s) across ${notes.length} open notes\n`);
+
+  if (opts.compare) {
+    await runComparison(config, project, notes, urls, width, fullPage);
+  } else {
+    await captureSnapshots(urls, width, fullPage);
+  }
+}
+
+async function captureSnapshots(urls: string[], width: number, fullPage: boolean): Promise<void> {
+  const pw = await loadPlaywright();
+
+  const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+  const snapshotDir = join(SNAPSHOT_DIR, timestamp);
+  ensureDir(snapshotDir);
+
+  let browser;
+  try {
+    browser = await pw.chromium.launch({ headless: true });
+  } catch {
+    console.error('Chromium browser not found.');
+    console.error('Run: bunx playwright install chromium');
+    process.exit(1);
+  }
+
+  try {
+    for (const url of urls) {
+      console.log(`Capturing: ${url}`);
+      try {
+        const context = await browser.newContext({ viewport: { width, height: 800 } });
+        const page = await context.newPage();
+        await page.goto(url, { waitUntil: 'networkidle', timeout: 30_000 });
+        await page.waitForTimeout(1000);
+
+        const filename = `${hashUrl(url)}.png`;
+        const filepath = join(snapshotDir, filename);
+        await page.screenshot({ fullPage, path: filepath, type: 'png' });
+        await context.close();
+
+        console.log(`  Saved: ${filepath}`);
+      } catch (err: any) {
+        console.error(`  Failed: ${err.message}`);
+      }
+    }
+  } finally {
+    await browser.close();
+  }
+
+  // Save a manifest mapping URL hashes to URLs
+  const manifest: Record<string, string> = {};
+  for (const url of urls) {
+    manifest[hashUrl(url)] = url;
+  }
+  writeFileSync(join(snapshotDir, 'manifest.json'), JSON.stringify(manifest, null, 2));
+
+  console.log(`\nSnapshots saved to ${snapshotDir}`);
+  console.log(`Run with --compare to diff against this snapshot set.`);
+}
+
+async function runComparison(
+  config: Config,
+  project: string,
+  notes: any[],
+  urls: string[],
+  width: number,
+  fullPage: boolean,
+): Promise<void> {
+  // Find the most recent previous snapshot set
+  if (!existsSync(SNAPSHOT_DIR)) {
+    console.error(`No previous snapshots found in ${SNAPSHOT_DIR}. Run without --compare first.`);
+    process.exit(1);
+  }
+
+  const snapshotDirs = readdirSync(SNAPSHOT_DIR)
+    .filter((d) => !d.startsWith('.'))
+    .sort()
+    .reverse();
+
+  if (snapshotDirs.length === 0) {
+    console.error(`No previous snapshots found in ${SNAPSHOT_DIR}. Run without --compare first.`);
+    process.exit(1);
+  }
+
+  const previousDir = join(SNAPSHOT_DIR, snapshotDirs[0]);
+  console.log(`Comparing against previous snapshot: ${snapshotDirs[0]}\n`);
+
+  // Load previous manifest
+  const manifestPath = join(previousDir, 'manifest.json');
+  if (!existsSync(manifestPath)) {
+    console.error(`No manifest.json found in ${previousDir}. Cannot compare.`);
+    process.exit(1);
+  }
+  const previousManifest: Record<string, string> = JSON.parse(readFileSync(manifestPath, 'utf-8'));
+
+  // Dynamically import pixelmatch and pngjs
+  let pixelmatch: any;
+  let PNG: any;
+  try {
+    pixelmatch = (await import('pixelmatch')).default;
+    PNG = (await import('pngjs')).PNG;
+  } catch {
+    console.error('pixelmatch or pngjs not installed.');
+    console.error('Install with: bun add pixelmatch pngjs');
+    process.exit(1);
+  }
+
+  // Capture current state
+  const pw = await loadPlaywright();
+  let browser;
+  try {
+    browser = await pw.chromium.launch({ headless: true });
+  } catch {
+    console.error('Chromium browser not found.');
+    console.error('Run: bunx playwright install chromium');
+    process.exit(1);
+  }
+
+  const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+  const currentDir = join(SNAPSHOT_DIR, timestamp);
+  const diffDir = join(SNAPSHOT_DIR, `${timestamp}-diffs`);
+  ensureDir(currentDir);
+  ensureDir(diffDir);
+
+  interface DiffResult {
+    url: string;
+    diffPercentage: number;
+    affectedNotes: number;
+    diffPath: string | null;
+    beforePath: string;
+    afterPath: string;
+  }
+
+  const results: DiffResult[] = [];
+
+  try {
+    for (const url of urls) {
+      const urlHash = hashUrl(url);
+      const previousScreenshot = join(previousDir, `${urlHash}.png`);
+
+      if (!existsSync(previousScreenshot)) {
+        console.log(`Skipping ${url} - no previous screenshot found`);
+        continue;
+      }
+
+      console.log(`Processing: ${url}`);
+
+      // Take current screenshot
+      let currentScreenshotPath: string;
+      try {
+        const context = await browser.newContext({ viewport: { width, height: 800 } });
+        const page = await context.newPage();
+        await page.goto(url, { waitUntil: 'networkidle', timeout: 30_000 });
+        await page.waitForTimeout(1000);
+
+        currentScreenshotPath = join(currentDir, `${urlHash}.png`);
+        await page.screenshot({ fullPage, path: currentScreenshotPath, type: 'png' });
+        await context.close();
+      } catch (err: any) {
+        console.error(`  Failed to capture: ${err.message}`);
+        continue;
+      }
+
+      // Run pixelmatch comparison
+      try {
+        const beforeBuf = readFileSync(previousScreenshot);
+        const afterBuf = readFileSync(currentScreenshotPath);
+
+        const beforePng = PNG.sync.read(beforeBuf);
+        const afterPng = PNG.sync.read(afterBuf);
+
+        // Ensure same dimensions - use the smaller of the two
+        const minWidth = Math.min(beforePng.width, afterPng.width);
+        const minHeight = Math.min(beforePng.height, afterPng.height);
+
+        // If dimensions differ, we need to crop to common area
+        let beforeData = beforePng.data;
+        let afterData = afterPng.data;
+
+        if (beforePng.width !== afterPng.width || beforePng.height !== afterPng.height) {
+          console.log(`  Note: Image sizes differ (before: ${beforePng.width}x${beforePng.height}, after: ${afterPng.width}x${afterPng.height})`);
+          console.log(`  Comparing common area: ${minWidth}x${minHeight}`);
+
+          // Crop both to the minimum dimensions
+          beforeData = cropImageData(beforePng.data, beforePng.width, minWidth, minHeight);
+          afterData = cropImageData(afterPng.data, afterPng.width, minWidth, minHeight);
+        }
+
+        const diffPng = new PNG({ width: minWidth, height: minHeight });
+
+        const numDiffPixels = pixelmatch(
+          beforeData,
+          afterData,
+          diffPng.data,
+          minWidth,
+          minHeight,
+          { threshold: 0.1 },
+        );
+
+        const totalPixels = minWidth * minHeight;
+        const diffPercentage = (numDiffPixels / totalPixels) * 100;
+
+        // Save diff image
+        const diffPath = join(diffDir, `${urlHash}-diff.png`);
+        writeFileSync(diffPath, PNG.sync.write(diffPng));
+
+        const affectedNotes = notes.filter((n: any) => n.url === url).length;
+
+        console.log(`  Diff: ${diffPercentage.toFixed(2)}% (${numDiffPixels} pixels changed)`);
+        console.log(`  Affected notes: ${affectedNotes}`);
+
+        results.push({
+          url,
+          diffPercentage,
+          affectedNotes,
+          diffPath,
+          beforePath: previousScreenshot,
+          afterPath: currentScreenshotPath,
+        });
+
+        // Upload diff records to API for each affected note
+        for (const note of notes.filter((n: any) => n.url === url)) {
+          try {
+            await apiFetch(config, `/notes/${note.id}/diffs`, {
+              method: 'POST',
+              project,
+              body: {
+                before_url: previousScreenshot,
+                after_url: currentScreenshotPath,
+                diff_url: diffPath,
+                diff_percentage: diffPercentage,
+              },
+            });
+          } catch (err: any) {
+            // Non-fatal: diff record upload failed
+            console.error(`  Warning: Could not save diff record for note ${note.id}: ${err.message}`);
+          }
+        }
+      } catch (err: any) {
+        console.error(`  Diff failed: ${err.message}`);
+      }
+    }
+  } finally {
+    await browser.close();
+  }
+
+  // Save manifest for current snapshot
+  const manifest: Record<string, string> = {};
+  for (const url of urls) {
+    manifest[hashUrl(url)] = url;
+  }
+  writeFileSync(join(currentDir, 'manifest.json'), JSON.stringify(manifest, null, 2));
+
+  // Print summary
+  console.log('\n--- Visual Diff Summary ---');
+  console.log(`URLs compared: ${results.length}`);
+
+  const changed = results.filter((r) => r.diffPercentage > 0);
+  if (changed.length === 0) {
+    console.log('No visual changes detected.');
+  } else {
+    console.log(`\nVisual changes on ${changed.length} URL(s):\n`);
+    console.log(padRight('URL', 50) + padRight('Notes', 8) + padRight('Change %', 12) + 'Status');
+    console.log('-'.repeat(80));
+    for (const r of results) {
+      const status = r.diffPercentage === 0 ? 'No change' : r.diffPercentage < 1 ? 'Minor' : r.diffPercentage < 5 ? 'Moderate' : 'Significant';
+      const urlDisplay = r.url.length > 48 ? r.url.slice(0, 45) + '...' : r.url;
+      console.log(
+        padRight(urlDisplay, 50) +
+        padRight(String(r.affectedNotes), 8) +
+        padRight(r.diffPercentage.toFixed(2) + '%', 12) +
+        status,
+      );
+    }
+  }
+
+  console.log(`\nDiff images saved to: ${diffDir}`);
+}
+
+function cropImageData(data: Uint8Array, srcWidth: number, targetWidth: number, targetHeight: number): Uint8Array {
+  const cropped = new Uint8Array(targetWidth * targetHeight * 4);
+  for (let y = 0; y < targetHeight; y++) {
+    const srcOffset = y * srcWidth * 4;
+    const dstOffset = y * targetWidth * 4;
+    cropped.set(data.subarray(srcOffset, srcOffset + targetWidth * 4), dstOffset);
+  }
+  return cropped;
+}
+
+function padRight(str: string, len: number): string {
+  return str.length >= len ? str : str + ' '.repeat(len - str.length);
+}

package/config.ts

@@ -2,10 +2,17 @@ import { existsSync, readFileSync, writeFileSync, mkdirSync } from 'fs';
 import { join, dirname } from 'path';
 import { homedir } from 'os';
 
+export interface ResolveConfig {
+  rootDir?: string;
+  extensions?: string[];
+  excludeDirs?: string[];
+}
+
 export interface Config {
   apiUrl: string;
   apiKey: string;
   defaultProject?: string;
+  resolve?: ResolveConfig;
 }
 
 const GLOBAL_PATH = join(homedir(), '.uinotes.json');