@reshotdev/screenshot 0.0.1-beta.14 → 0.0.1-beta.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reshotdev/screenshot",
-  "version": "0.0.1-beta.14",
+  "version": "0.0.1-beta.16",
   "description": "Screenshot and video capture CLI",
   "author": "Reshot <hello@reshot.dev>",
   "license": "MIT",

package/src/commands/auth.js

@@ -150,11 +150,12 @@ async function waitForCompletion(
 }
 
 async function verifyApiKey(apiBaseUrl, apiKey, httpClient = axios) {
-  await httpClient.get(`${apiBaseUrl}/auth/cli/verify`, {
+  const response = await httpClient.get(`${apiBaseUrl}/auth/cli/verify`, {
     headers: {
       Authorization: `Bearer ${apiKey}`,
     },
   });
+  return response?.data || null;
 }
 
 async function authCommand(options = {}) {
@@ -172,19 +173,33 @@ async function authCommand(options = {}) {
   const timeoutMs = Number(options.timeoutMs || DEFAULT_AUTH_TIMEOUT_MS);
   if (envApiKey && envProjectId) {
     const platformUrl = process.env.RESHOT_PLATFORM_URL || "https://reshot.dev";
+    // Best-effort resolve the project name so settings + the setup report
+    // don't record `projectName: null` on this non-interactive path.
+    let projectName = null;
+    try {
+      const apiBaseUrl = options.apiBaseUrl || getApiBaseUrl();
+      const verified = await verifyApiKeyFn(apiBaseUrl, envApiKey, httpClient);
+      projectName = verified?.project?.name || null;
+    } catch {
+      // Verification is best-effort here; keep going without the name.
+    }
     writeSettingsFn({
       projectId: envProjectId,
+      projectName,
       apiKey: envApiKey,
       platformUrl,
       linkedAt: new Date().toISOString(),
       cliVersion: pkg.version,
     });
     console.log(chalk.green("✔ Authenticated via environment variables"));
-    console.log(chalk.gray(`  Project: ${envProjectId}`));
+    console.log(
+      chalk.gray(`  Project: ${projectName || envProjectId}`),
+    );
     console.log(chalk.gray(`  Platform: ${platformUrl}`));
     return {
       mode: "cloud-connected",
       projectId: envProjectId,
+      projectName,
       platformUrl,
     };
   }

package/src/commands/publish.js

@@ -629,6 +629,24 @@ function buildPublishMetadata({
   };
 }
 
+/**
+ * Read pixel dimensions from a captured image so the platform can store and
+ * expose them (used by `reshot pull` for CLS-safe `<img width height>`
+ * embedding). Returns nulls for non-images or on any error — never throws.
+ */
+async function getImageDimensions(filePath, contentType) {
+  if (!filePath || !(contentType || "").startsWith("image/")) {
+    return { width: null, height: null };
+  }
+  try {
+    const sharp = require("sharp");
+    const meta = await sharp(filePath).metadata();
+    return { width: meta.width ?? null, height: meta.height ?? null };
+  } catch {
+    return { width: null, height: null };
+  }
+}
+
 /**
  * Publish using transactional flow (direct R2 upload with presigned URLs)
  */
@@ -915,12 +933,18 @@ async function publishWithTransactionalFlow(
         assets: [],
       });
     }
+    const dimensions = await getImageDimensions(
+      result.file.path,
+      result.file.contentType,
+    );
     groupMap.get(groupKey).assets.push({
       key: result.file.key,
       s3Path: result.s3Path,
       hash: result.file.hash,
       visualKey: result.file.visualKey,
       size: result.file.size,
+      width: dimensions.width,
+      height: dimensions.height,
       contentType: result.file.contentType,
       // Include diff data from CLI analysis
       diffPercentage: result.file.diffData?.diffPercentage ?? null,
@@ -1014,7 +1038,15 @@ async function publishWithTransactionalFlow(
         viewUrl = batchResult.viewUrl;
       }
     } catch (error) {
-      console.log(chalk.red(`     ✖ Batch request failed: ${error.message}`));
+      // Surface the server's descriptive error body (e.g. a validation
+      // message) instead of just axios's opaque "Request failed with status
+      // code 400" — otherwise a 1-line fix turns into a support ticket.
+      const serverMsg =
+        error.response?.data?.error || error.response?.data?.message;
+      const detail = serverMsg
+        ? `${error.message} — ${serverMsg}`
+        : error.message;
+      console.log(chalk.red(`     ✖ Batch request failed: ${detail}`));
       failCount += chunk.length;
     }
   }

package/src/commands/pull.js

@@ -109,6 +109,23 @@ function normalizeAssetMap(assets) {
   return { assets: normalized, repairs };
 }
 
+/**
+ * Pick a real {group, visualKey, context} from a normalized asset map so the
+ * printed usage example is copy-pasteable for THIS project (prefers the
+ * "default" context). Returns null if the map is empty.
+ */
+function deriveUsageSample(assets) {
+  for (const group of Object.keys(assets || {})) {
+    for (const visualKey of Object.keys(assets[group] || {})) {
+      const contexts = Object.keys(assets[group][visualKey] || {});
+      if (contexts.length === 0) continue;
+      const context = contexts.includes("default") ? "default" : contexts[0];
+      return { group, visualKey, context };
+    }
+  }
+  return null;
+}
+
 function validateHostedAssetUrl(urlString) {
   if (!urlString || typeof urlString !== "string") {
     return;
@@ -456,6 +473,13 @@ async function pullCommand(options = {}) {
     console.log(chalk.green(`✓ Generated ${contentType} file: ${outputPath}`));
     console.log(chalk.gray(`  ${assetCount} visuals exported\n`));
 
+    // Derive a REAL key path from the pulled map so the printed usage example
+    // is copy-pasteable (was hardcoded to a non-existent `dashboard.mainView`).
+    const sample = deriveUsageSample(normalizedAssets);
+    const sGroup = sample?.group ?? "dashboard";
+    const sVisual = sample?.visualKey ?? "mainView";
+    const sCtx = sample?.context ?? "default";
+
     // Show format-specific usage instructions
     if (format === "ts") {
       console.log(chalk.blue("━━━ TypeScript Usage ━━━\n"));
@@ -463,10 +487,9 @@ async function pullCommand(options = {}) {
       console.log(chalk.cyan('  import { ReshotVisuals } from "./visuals";\n'));
       console.log(chalk.white("Use with full autocomplete support:\n"));
       console.log(chalk.cyan("  // Single context (flattened)"));
-      console.log(chalk.cyan("  <img src={ReshotVisuals.dashboard.mainView} />\n"));
+      console.log(chalk.cyan(`  <img src={ReshotVisuals.${sGroup}.${sVisual}} />\n`));
       console.log(chalk.cyan("  // Multiple contexts (dark mode, locales)"));
-      console.log(chalk.cyan("  <img src={ReshotVisuals.dashboard.mainView.default} />"));
-      console.log(chalk.cyan("  <img src={ReshotVisuals.dashboard.mainView.dark} />\n"));
+      console.log(chalk.cyan(`  <img src={ReshotVisuals.${sGroup}.${sVisual}.${sCtx}} />\n`));
       if (!full) {
         console.log(chalk.gray("  Tip: Use --full flag to include width, height, and alt text\n"));
       }
@@ -476,10 +499,10 @@ async function pullCommand(options = {}) {
       console.log(chalk.cyan('  import assets from "./reshot-assets.json";\n'));
       console.log(chalk.white("Access assets with dot notation:\n"));
       console.log(chalk.cyan("  <img"));
-      console.log(chalk.cyan("    src={assets.assets.dashboard.mainView.default.src}"));
-      console.log(chalk.cyan("    width={assets.assets.dashboard.mainView.default.width}"));
-      console.log(chalk.cyan("    height={assets.assets.dashboard.mainView.default.height}"));
-      console.log(chalk.cyan("    alt={assets.assets.dashboard.mainView.default.alt}"));
+      console.log(chalk.cyan(`    src={assets.assets.${sGroup}.${sVisual}.${sCtx}.src}`));
+      console.log(chalk.cyan(`    width={assets.assets.${sGroup}.${sVisual}.${sCtx}.width}`));
+      console.log(chalk.cyan(`    height={assets.assets.${sGroup}.${sVisual}.${sCtx}.height}`));
+      console.log(chalk.cyan(`    alt={assets.assets.${sGroup}.${sVisual}.${sCtx}.alt}`));
       console.log(chalk.cyan("  />\n"));
     } else if (format === "csv") {
       console.log(chalk.blue("━━━ CSV Usage ━━━\n"));