sunpeak 0.7.11 → 0.8.4

package/bin/commands/push.mjs

@@ -11,7 +11,7 @@ const CREDENTIALS_FILE = join(CREDENTIALS_DIR, 'credentials.json');
 /**
  * Load credentials from disk
  */
-function loadCredentials() {
+function loadCredentialsImpl() {
   if (!existsSync(CREDENTIALS_FILE)) {
     return null;
   }
@@ -25,7 +25,7 @@ function loadCredentials() {
 /**
  * Get the current git repository name in owner/repo format
  */
-function getGitRepoName() {
+function getGitRepoNameImpl() {
   try {
     // Try to get the remote URL first
     const remoteUrl = execSync('git remote get-url origin 2>/dev/null', { encoding: 'utf-8' }).trim();
@@ -44,16 +44,33 @@ function getGitRepoName() {
   return null;
 }
 
+/**
+ * Default dependencies (real implementations)
+ */
+export const defaultDeps = {
+  fetch: globalThis.fetch,
+  loadCredentials: loadCredentialsImpl,
+  getGitRepoName: getGitRepoNameImpl,
+  existsSync,
+  readFileSync,
+  readdirSync,
+  console,
+  process,
+  apiUrl: SUNPEAK_API_URL,
+};
+
 /**
  * Find all resources in a directory
  * Returns array of { name, jsPath, metaPath, meta }
  */
-export function findResources(distDir) {
-  if (!existsSync(distDir)) {
+export function findResources(distDir, deps = defaultDeps) {
+  const d = { ...defaultDeps, ...deps };
+
+  if (!d.existsSync(distDir)) {
     return [];
   }
 
-  const files = readdirSync(distDir);
+  const files = d.readdirSync(distDir);
   const jsFiles = files.filter((f) => f.endsWith('.js'));
   const jsonFiles = new Set(files.filter((f) => f.endsWith('.json')));
 
@@ -70,9 +87,9 @@ export function findResources(distDir) {
 
       let meta = null;
       try {
-        meta = JSON.parse(readFileSync(metaPath, 'utf-8'));
+        meta = JSON.parse(d.readFileSync(metaPath, 'utf-8'));
       } catch {
-        console.warn(`Warning: Could not parse ${name}.json`);
+        d.console.warn(`Warning: Could not parse ${name}.json`);
       }
 
       return { name, jsPath, metaPath, meta };
@@ -83,10 +100,12 @@ export function findResources(distDir) {
  * Build a resource from a specific JS file path
  * Returns { name, jsPath, metaPath, meta }
  */
-function buildResourceFromFile(jsPath) {
-  if (!existsSync(jsPath)) {
-    console.error(`Error: File not found: ${jsPath}`);
-    process.exit(1);
+function buildResourceFromFile(jsPath, deps = defaultDeps) {
+  const d = { ...defaultDeps, ...deps };
+
+  if (!d.existsSync(jsPath)) {
+    d.console.error(`Error: File not found: ${jsPath}`);
+    d.process.exit(1);
   }
 
   // Extract name from filename (remove .js extension)
@@ -98,11 +117,11 @@ function buildResourceFromFile(jsPath) {
   const metaPath = join(dir, `${name}.json`);
 
   let meta = null;
-  if (existsSync(metaPath)) {
+  if (d.existsSync(metaPath)) {
     try {
-      meta = JSON.parse(readFileSync(metaPath, 'utf-8'));
+      meta = JSON.parse(d.readFileSync(metaPath, 'utf-8'));
     } catch {
-      console.warn(`Warning: Could not parse ${name}.json`);
+      d.console.warn(`Warning: Could not parse ${name}.json`);
     }
   }
 
@@ -112,12 +131,14 @@ function buildResourceFromFile(jsPath) {
 /**
  * Push a single resource to the API
  */
-async function pushResource(resource, repository, tags, accessToken) {
+async function pushResource(resource, repository, tags, accessToken, deps = defaultDeps) {
+  const d = { ...defaultDeps, ...deps };
+
   if (!resource.meta?.uri) {
     throw new Error('Resource is missing URI. Run "sunpeak build" to generate URIs.');
   }
 
-  const jsContent = readFileSync(resource.jsPath);
+  const jsContent = d.readFileSync(resource.jsPath);
   const jsBlob = new Blob([jsContent], { type: 'application/javascript' });
 
   // Build form data
@@ -168,7 +189,7 @@ async function pushResource(resource, repository, tags, accessToken) {
     });
   }
 
-  const response = await fetch(`${SUNPEAK_API_URL}/api/v1/resources`, {
+  const response = await d.fetch(`${d.apiUrl}/api/v1/resources`, {
     method: 'POST',
     headers: {
       Authorization: `Bearer ${accessToken}`,
@@ -195,11 +216,14 @@ async function pushResource(resource, repository, tags, accessToken) {
  * @param {string} options.repository - Repository name (optional, defaults to git repo name)
  * @param {string} options.file - Path to a specific resource JS file (optional)
  * @param {string[]} options.tags - Tags to assign to the pushed resources (optional)
+ * @param {Object} deps - Dependencies (for testing). Uses defaultDeps if not provided.
  */
-export async function push(projectRoot = process.cwd(), options = {}) {
+export async function push(projectRoot = process.cwd(), options = {}, deps = defaultDeps) {
+  const d = { ...defaultDeps, ...deps };
+
   // Handle help flag
   if (options.help) {
-    console.log(`
+    d.console.log(`
 sunpeak push - Push resources to the Sunpeak repository
 
 Usage:
@@ -219,76 +243,76 @@ Examples:
   sunpeak push dist/carousel.js      Push a single resource
   sunpeak push -r myorg/my-app       Push to "myorg/my-app" repository
   sunpeak push -t v1.0.0             Push with a version tag
-  sunpeak push -t v1.0.0 -t latest   Push with multiple tags
+  sunpeak push -t v1.0.0 -t prod     Push with multiple tags
 `);
     return;
   }
 
   // Check credentials
-  const credentials = loadCredentials();
+  const credentials = d.loadCredentials();
   if (!credentials?.access_token) {
-    console.error('Error: Not logged in. Run "sunpeak login" first.');
-    process.exit(1);
+    d.console.error('Error: Not logged in. Run "sunpeak login" first.');
+    d.process.exit(1);
   }
 
   // Determine repository name (owner/repo format)
-  const repository = options.repository || getGitRepoName();
+  const repository = options.repository || d.getGitRepoName();
   if (!repository) {
-    console.error('Error: Could not determine repository name.');
-    console.error('Please provide a repository name: sunpeak push --repository <owner/repo>');
-    console.error('Or run this command from within a git repository with a remote origin.');
-    process.exit(1);
+    d.console.error('Error: Could not determine repository name.');
+    d.console.error('Please provide a repository name: sunpeak push --repository <owner/repo>');
+    d.console.error('Or run this command from within a git repository with a remote origin.');
+    d.process.exit(1);
   }
 
   // Find resources - either a specific file or all from dist directory
   let resources;
   if (options.file) {
     // Push a single specific resource
-    resources = [buildResourceFromFile(options.file)];
+    resources = [buildResourceFromFile(options.file, d)];
   } else {
     // Default: find all resources in dist directory
     const distDir = join(projectRoot, 'dist');
-    if (!existsSync(distDir)) {
-      console.error(`Error: dist/ directory not found`);
-      console.error('Run "sunpeak build" first to build your resources.');
-      process.exit(1);
+    if (!d.existsSync(distDir)) {
+      d.console.error(`Error: dist/ directory not found`);
+      d.console.error('Run "sunpeak build" first to build your resources.');
+      d.process.exit(1);
     }
 
-    resources = findResources(distDir);
+    resources = findResources(distDir, d);
     if (resources.length === 0) {
-      console.error(`Error: No resources found in dist/`);
-      console.error('Run "sunpeak build" first to build your resources.');
-      process.exit(1);
+      d.console.error(`Error: No resources found in dist/`);
+      d.console.error('Run "sunpeak build" first to build your resources.');
+      d.process.exit(1);
     }
   }
 
-  console.log(`Pushing ${resources.length} resource(s) to repository "${repository}"...`);
+  d.console.log(`Pushing ${resources.length} resource(s) to repository "${repository}"...`);
   if (options.tags && options.tags.length > 0) {
-    console.log(`Tags: ${options.tags.join(', ')}`);
+    d.console.log(`Tags: ${options.tags.join(', ')}`);
   }
-  console.log();
+  d.console.log();
 
   // Push each resource
   let successCount = 0;
   for (const resource of resources) {
     try {
-      const result = await pushResource(resource, repository, options.tags, credentials.access_token);
-      console.log(`✓ Pushed ${resource.name} (id: ${result.id})`);
+      const result = await pushResource(resource, repository, options.tags, credentials.access_token, d);
+      d.console.log(`✓ Pushed ${resource.name} (id: ${result.id})`);
       if (result.tags?.length > 0) {
-        console.log(`  Tags: ${result.tags.join(', ')}`);
+        d.console.log(`  Tags: ${result.tags.join(', ')}`);
       }
       successCount++;
     } catch (error) {
-      console.error(`✗ Failed to push ${resource.name}: ${error.message}`);
+      d.console.error(`✗ Failed to push ${resource.name}: ${error.message}`);
     }
   }
 
-  console.log();
+  d.console.log();
   if (successCount === resources.length) {
-    console.log(`✓ Successfully pushed ${successCount} resource(s).`);
+    d.console.log(`✓ Successfully pushed ${successCount} resource(s).`);
   } else {
-    console.log(`Pushed ${successCount}/${resources.length} resource(s).`);
-    process.exit(1);
+    d.console.log(`Pushed ${successCount}/${resources.length} resource(s).`);
+    d.process.exit(1);
   }
 }
 
@@ -327,7 +351,7 @@ Examples:
   sunpeak push dist/carousel.js      Push a single resource
   sunpeak push -r myorg/my-app       Push to "myorg/my-app" repository
   sunpeak push -t v1.0.0             Push with a version tag
-  sunpeak push -t v1.0.0 -t latest   Push with multiple tags
+  sunpeak push -t v1.0.0 -t prod     Push with multiple tags
 `);
       process.exit(0);
     } else if (!arg.startsWith('-')) {

package/bin/commands/upgrade.mjs

@@ -0,0 +1,203 @@
+#!/usr/bin/env node
+import { execSync, spawn } from 'child_process';
+import { readFileSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+/**
+ * Get the current installed version from package.json
+ */
+function getCurrentVersionImpl() {
+  const pkgPath = join(__dirname, '..', '..', 'package.json');
+  const pkg = JSON.parse(readFileSync(pkgPath, 'utf-8'));
+  return pkg.version;
+}
+
+/**
+ * Fetch the latest version from npm registry
+ */
+async function fetchLatestVersionImpl(packageName = 'sunpeak') {
+  const response = await fetch(`https://registry.npmjs.org/${packageName}/latest`);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch latest version: ${response.status}`);
+  }
+  const data = await response.json();
+  return data.version;
+}
+
+/**
+ * Compare two semver versions
+ * Returns: -1 if a < b, 0 if a === b, 1 if a > b
+ */
+function compareVersions(a, b) {
+  const partsA = a.split('.').map(Number);
+  const partsB = b.split('.').map(Number);
+
+  for (let i = 0; i < 3; i++) {
+    const numA = partsA[i] || 0;
+    const numB = partsB[i] || 0;
+    if (numA < numB) return -1;
+    if (numA > numB) return 1;
+  }
+  return 0;
+}
+
+/**
+ * Detect which package manager is being used
+ */
+function detectPackageManagerImpl() {
+  // Check npm_config_user_agent first (set by npm/pnpm/yarn when running scripts)
+  const userAgent = process.env.npm_config_user_agent || '';
+  if (userAgent.includes('pnpm')) return 'pnpm';
+  if (userAgent.includes('yarn')) return 'yarn';
+  if (userAgent.includes('npm')) return 'npm';
+
+  // Fallback: check if commands exist
+  try {
+    execSync('pnpm --version', { stdio: 'ignore' });
+    return 'pnpm';
+  } catch {
+    // pnpm not available
+  }
+
+  try {
+    execSync('yarn --version', { stdio: 'ignore' });
+    return 'yarn';
+  } catch {
+    // yarn not available
+  }
+
+  return 'npm';
+}
+
+/**
+ * Run the upgrade command
+ */
+function runUpgradeImpl(packageManager, packageName = 'sunpeak') {
+  const commands = {
+    npm: ['npm', ['install', '-g', packageName]],
+    pnpm: ['pnpm', ['add', '-g', packageName]],
+    yarn: ['yarn', ['global', 'add', packageName]],
+  };
+
+  const [cmd, args] = commands[packageManager];
+
+  return new Promise((resolve, reject) => {
+    const child = spawn(cmd, args, {
+      stdio: 'inherit',
+      shell: process.platform === 'win32',
+    });
+
+    child.on('close', (code) => {
+      if (code === 0) {
+        resolve();
+      } else {
+        reject(new Error(`Upgrade failed with exit code ${code}`));
+      }
+    });
+
+    child.on('error', (err) => {
+      reject(err);
+    });
+  });
+}
+
+/**
+ * Default dependencies (real implementations)
+ */
+export const defaultDeps = {
+  getCurrentVersion: getCurrentVersionImpl,
+  fetchLatestVersion: fetchLatestVersionImpl,
+  detectPackageManager: detectPackageManagerImpl,
+  runUpgrade: runUpgradeImpl,
+  console,
+  process,
+};
+
+/**
+ * Main upgrade command
+ * @param {Object} options - Command options
+ * @param {Object} deps - Dependencies (for testing). Uses defaultDeps if not provided.
+ */
+export async function upgrade(options = {}, deps = defaultDeps) {
+  const d = { ...defaultDeps, ...deps };
+
+  // Show help if requested
+  if (options.help) {
+    d.console.log(`
+sunpeak upgrade - Upgrade sunpeak to the latest version
+
+Usage:
+  sunpeak upgrade [options]
+
+Options:
+  --check, -c     Check for updates without installing
+  --help, -h      Show this help message
+
+Examples:
+  sunpeak upgrade          # Upgrade to latest version
+  sunpeak upgrade --check  # Check if updates are available
+`);
+    return;
+  }
+
+  const currentVersion = d.getCurrentVersion();
+  d.console.log(`Current version: ${currentVersion}`);
+  d.console.log('Checking for updates...');
+
+  let latestVersion;
+  try {
+    latestVersion = await d.fetchLatestVersion();
+  } catch (error) {
+    d.console.error(`Error checking for updates: ${error.message}`);
+    d.process.exit(1);
+    return;
+  }
+
+  const comparison = compareVersions(currentVersion, latestVersion);
+
+  if (comparison >= 0) {
+    d.console.log(`\n✓ You are already on the latest version (${currentVersion})`);
+    return;
+  }
+
+  d.console.log(`\nNew version available: ${latestVersion}`);
+
+  // If --check flag, just report and exit
+  if (options.check) {
+    d.console.log(`\nRun "sunpeak upgrade" to upgrade.`);
+    return;
+  }
+
+  const packageManager = d.detectPackageManager();
+  d.console.log(`\nUpgrading using ${packageManager}...`);
+
+  try {
+    await d.runUpgrade(packageManager);
+    d.console.log(`\n✓ Successfully upgraded to sunpeak@${latestVersion}`);
+  } catch (error) {
+    d.console.error(`\nError upgrading: ${error.message}`);
+    d.console.log(`\nYou can manually upgrade by running:`);
+    d.console.log(`  ${packageManager} ${packageManager === 'yarn' ? 'global add' : packageManager === 'pnpm' ? 'add -g' : 'install -g'} sunpeak`);
+    d.process.exit(1);
+  }
+}
+
+// Export for testing
+export { compareVersions };
+
+// Allow running directly
+if (import.meta.url === `file://${process.argv[1]}`) {
+  const args = process.argv.slice(2);
+  const options = {
+    check: args.includes('--check') || args.includes('-c'),
+    help: args.includes('--help') || args.includes('-h'),
+  };
+
+  upgrade(options).catch((error) => {
+    console.error('Error:', error.message);
+    process.exit(1);
+  });
+}

package/bin/sunpeak.js

@@ -28,7 +28,7 @@ function checkPackageJson() {
 }
 
 function parseResourcesInput(input) {
-  const VALID_RESOURCES = ['albums', 'carousel', 'counter', 'map'];
+  const VALID_RESOURCES = ['albums', 'carousel', 'confirmation', 'counter', 'map'];
 
   // If no input, return all resources
   if (!input || input.trim() === '') {
@@ -57,10 +57,11 @@ function parseResourcesInput(input) {
 function updateIndexFiles(targetDir, selectedResources) {
   // Map resource names to their component/export names
   const resourceMap = {
-    albums: { component: 'album', resourceClass: 'AlbumsResource', simulation: 'albums' },
-    carousel: { component: 'carousel', resourceClass: 'CarouselResource', simulation: 'carousel' },
-    counter: { component: null, resourceClass: 'CounterResource', simulation: 'counter' },
-    map: { component: 'map', resourceClass: 'MapResource', simulation: 'map' },
+    albums: { component: 'album', resourceClass: 'AlbumsResource' },
+    carousel: { component: 'carousel', resourceClass: 'CarouselResource' },
+    confirmation: { component: null, resourceClass: 'ConfirmationResource' },
+    counter: { component: null, resourceClass: 'CounterResource' },
+    map: { component: 'map', resourceClass: 'MapResource' },
   };
 
   // Update components/index.ts
@@ -73,31 +74,47 @@ function updateIndexFiles(targetDir, selectedResources) {
     .join('\n');
   writeFileSync(componentsIndexPath, componentExports + '\n');
 
-  // Update resources/index.ts
+  // Update resources/index.ts - must have default export for dev.tsx
   const resourcesIndexPath = join(targetDir, 'src', 'resources', 'index.ts');
-  const resourceExports = selectedResources
-    .map((r) => `export { ${resourceMap[r].resourceClass} } from './${r}-resource';`)
+  const resourceImports = selectedResources
+    .map((r) => `import { ${resourceMap[r].resourceClass} } from './${r}-resource';`)
     .join('\n');
-  writeFileSync(resourcesIndexPath, resourceExports + '\n');
+  const resourceExportsObject = selectedResources
+    .map((r) => `  ${resourceMap[r].resourceClass},`)
+    .join('\n');
+  const resourcesContent = `${resourceImports}
+
+export default {
+${resourceExportsObject}
+};
+`;
+  writeFileSync(resourcesIndexPath, resourcesContent);
 
-  // Update simulations/index.ts
+  // Update simulations/index.ts - uses auto-discovery for JSON simulation files
   const simulationsIndexPath = join(targetDir, 'src', 'simulations', 'index.ts');
-  const simulationImports = selectedResources
-    .map((r) => `import { ${r}Simulation } from './${r}-simulation.js';`)
-    .join('\n');
-  const simulationExports = selectedResources.map((r) => `  ${r}: ${r}Simulation,`).join('\n');
   const simulationsContent = `/**
  * Server-safe simulation configurations
  *
- * This file contains only metadata and can be safely imported in Node.js contexts
- * (like MCP servers) without causing issues with CSS imports or React components.
+ * Auto-discovers all *-simulation.json files in this directory.
+ * File naming: {resource}-{tool}-simulation.json (e.g., albums-show-simulation.json)
+ *
+ * This file can be safely imported in Node.js contexts (like MCP servers)
+ * without causing issues with CSS imports or React components.
  */
 
-${simulationImports}
-
-export const SIMULATIONS = {
-${simulationExports}
-} as const;
+// Auto-discover all simulation JSON files
+const simulationModules = import.meta.glob('./*-simulation.json', { eager: true });
+
+// Build SIMULATIONS object from discovered files
+// Key is the full name without -simulation.json suffix (e.g., 'albums-show')
+export const SIMULATIONS = Object.fromEntries(
+  Object.entries(simulationModules).map(([path, module]) => {
+    // Extract simulation key from path: './albums-show-simulation.json' -> 'albums-show'
+    const match = path.match(/\\.\\/(.+)-simulation\\.json$/);
+    const key = match?.[1] ?? path;
+    return [key, (module as { default: unknown }).default];
+  })
+) as Record<string, unknown>;
 `;
   writeFileSync(simulationsIndexPath, simulationsContent);
 }
@@ -122,7 +139,7 @@ async function init(projectName, resourcesArg) {
     console.log(`☀️ 🏔️ Resources: ${resourcesArg}`);
   } else {
     resourcesInput = await prompt(
-      '☀️ 🏔️ Resources (UIs) to include [albums, carousel, counter, map]: '
+      '☀️ 🏔️ Resources (UIs) to include [albums, carousel, confirmation, counter, map]: '
     );
   }
   const selectedResources = parseResourcesInput(resourcesInput);
@@ -144,6 +161,7 @@ async function init(projectName, resourcesArg) {
   const resourceComponentMap = {
     albums: 'album',
     carousel: 'carousel',
+    confirmation: null, // Confirmation doesn't have a component directory
     counter: null, // Counter doesn't have a component directory
     map: 'map',
   };
@@ -159,16 +177,21 @@ async function init(projectName, resourcesArg) {
       }
 
       // Filter resource files based on selection
-      const VALID_RESOURCES = ['albums', 'carousel', 'counter', 'map'];
+      const VALID_RESOURCES = ['albums', 'carousel', 'confirmation', 'counter', 'map'];
       const excludedResources = VALID_RESOURCES.filter((r) => !selectedResources.includes(r));
 
       for (const resource of excludedResources) {
-        // Skip resource files
-        if (name === `${resource}-resource.tsx` || name === `${resource}-resource.test.tsx`) {
+        // Skip resource files (tsx, test, and json metadata)
+        if (
+          name === `${resource}-resource.tsx` ||
+          name === `${resource}-resource.test.tsx` ||
+          name === `${resource}-resource.json`
+        ) {
           return false;
         }
-        // Skip simulation files
-        if (name === `${resource}-simulation.ts`) {
+        // Skip simulation JSON files that start with the resource name
+        // e.g., albums-show-simulation.json, albums-edit-simulation.json
+        if (name.startsWith(`${resource}-`) && name.endsWith('-simulation.json')) {
           return false;
         }
         // Skip component directories (map resource name to component dir name)
@@ -217,13 +240,13 @@ Done! To get started:
 
   cd ${projectName}
   pnpm install
-  pnpm dev
+  sunpeak dev
 
 That's it! Your project commands:
 
-  pnpm dev          # Start development server
-  pnpm build        # Build for production
-  pnpm mcp          # Start MCP server
+  sunpeak dev       # Start development server
+  sunpeak build     # Build for production
+  sunpeak mcp       # Start MCP server
   pnpm test         # Run tests
 
 See README.md for more details.
@@ -291,6 +314,7 @@ function parseResourceArgs(args) {
     'push',
     'pull',
     'deploy',
+    'upgrade',
     'help',
     undefined,
   ];
@@ -360,6 +384,17 @@ function parseResourceArgs(args) {
       }
       break;
 
+    case 'upgrade':
+      {
+        const { upgrade } = await import(join(COMMANDS_DIR, 'upgrade.mjs'));
+        const options = {
+          check: args.includes('--check') || args.includes('-c'),
+          help: args.includes('--help') || args.includes('-h'),
+        };
+        await upgrade(options);
+      }
+      break;
+
     case 'help':
     case undefined:
       console.log(`
@@ -369,13 +404,10 @@ Usage:
   npx sunpeak new [name] [resources]   Create a new project (no install needed)
   pnpm dlx sunpeak new                  Alternative with pnpm
 
-  Resources: albums, carousel, counter, map (comma/space separated)
+  Resources: albums, carousel, confirmation, counter, map (comma/space separated)
   Example: npx sunpeak new my-app "albums,carousel"
 
 Inside your project, use npm scripts:
-  pnpm dev                 Start development server
-  pnpm build               Build for production
-  pnpm mcp                 Start MCP server
   pnpm test                Run tests
 
 Direct CLI commands (when sunpeak is installed):
@@ -388,6 +420,7 @@ Direct CLI commands (when sunpeak is installed):
   sunpeak push             Push resources to repository
   sunpeak pull             Pull resources from repository
   sunpeak deploy           Push resources with "prod" tag
+  sunpeak upgrade          Upgrade sunpeak to latest version
   sunpeak --version        Show version number
 
 For more information, visit: https://sunpeak.ai/

package/dist/chatgpt/chatgpt-simulator.d.ts

@@ -1,8 +1,9 @@
 import { Simulation } from '../types/simulation';
 import * as React from 'react';
+type SimulationWithResource = Simulation & Required<Pick<Simulation, 'resource'>>;
 interface ChatGPTSimulatorProps {
     children?: React.ReactNode;
-    simulations?: Simulation[];
+    simulations?: SimulationWithResource[];
     appName?: string;
     appIcon?: string;
 }