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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reshotdev/screenshot",
-  "version": "0.0.1-beta.15",
+  "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/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"));