> ## Documentation Index
> Fetch the complete documentation index at: https://docs.synapsebuilder.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Generations Dashboard

> Manage all your Shopify extensions and functions from a comprehensive dashboard

## Overview

The Generations Dashboard provides a centralized location to view, manage, and edit all your Shopify extensions and functions. It offers features similar to the Shopify Partner Dashboard with additional development tools.

## Accessing the Dashboard

<Steps>
  <Step title="Navigate to Generations">
    Click **Generations** in the main navigation menu or visit `/dashboard/generations`
  </Step>

  <Step title="View Your Apps">
    See all your generated extensions and functions in one place
  </Step>
</Steps>

## Features

### 📊 Overview Statistics

The dashboard displays key metrics at a glance:

* **Total Generations**: All extensions and functions you've created
* **Extensions**: UI extensions (checkout, post-purchase, etc.)
* **Functions**: Backend functions (discounts, shipping, etc.)
* **Deployed**: Successfully deployed generations

### 🔍 Filtering & Search

Filter generations by:

* **Type**: All, Extensions, or Functions
* **Status**: All, Deployed, or Failed

### 📦 Generation Cards

Each generation shows:

* Name and description
* Type badge (Extension or Function)
* Deployment status with color coding
* Creation timestamp
* GitHub branch information
* Validation attempt count

### 🛠️ Management Actions

#### Merchant App Management

At the top, manage your entire merchant app:

* **View Live**: Open deployed application
* **GitHub**: View repository
* **Edit in Codespace**: Open full app in VS Code browser editor

#### Individual Generation Actions

For each generation:

* **View Live**: Open deployment URL
* **Edit in Codespace**: Edit specific generation
* **View Details**: See full generation information

## Detail View

Click any generation to view comprehensive details:

### Status Section

* Real-time deployment status
* Current deployment step
* Visual status indicators

### Code Section

* View generated source code
* See file structure
* Review configuration

### Deployment Logs

* Timestamped log entries
* Log level indicators (info, warn, error)
* Detailed error messages

### Codespaces Management

Active Codespaces for the repository:

* **Current State**: Available, Starting, Shutdown
* **Machine Type**: CPU and memory allocation
* **Last Used**: Activity timestamp
* **Actions**:
  * Open Codespace in browser
  * Stop running Codespace
  * Delete Codespace (with confirmation)

### Version History

If a generation has been edited:

* View parent generation
* See all versions in the edit chain
* Navigate between versions

### Metadata Sidebar

* Creation date and time
* Repository information
* Branch name
* Validation attempt count

## Codespaces Integration

<Info>
  Codespaces provide a full VS Code environment in your browser with pre-installed tools.
</Info>

### Creating a Codespace

From the dashboard, click **Edit in Codespace**:

1. System checks for existing Codespaces
2. Creates new Codespace if needed (or reuses existing)
3. Opens VS Code in a new browser tab

### Pre-installed Tools

All Codespaces include:

* Node.js 20 with pnpm
* Shopify CLI
* Rust toolchain (for functions)
* VS Code extensions:
  * Shopify Liquid
  * Rust Analyzer
  * GraphQL
  * Prettier, ESLint
  * Tailwind CSS IntelliSense

### Managing Codespaces

<Accordion title="View Active Codespaces">
  Each generation's detail page shows all active Codespaces for that repository.

  **States:**

  * 🟢 **Available**: Ready to use
  * 🔵 **Starting/Stopping**: In transition
  * ⚫ **Shutdown**: Not running
</Accordion>

<Accordion title="Stop a Codespace">
  Click the stop icon to shut down a running Codespace. This frees up resources while preserving your work.

  Codespaces auto-shutdown after 30 minutes of inactivity.
</Accordion>

<Accordion title="Delete a Codespace">
  Click the delete icon and confirm to permanently remove a Codespace.

  <Warning>
    Deleting a Codespace removes the container but not your repository code. Any uncommitted changes will be lost.
  </Warning>
</Accordion>

## Workflow Examples

### Editing an Extension

<Steps>
  <Step title="Find Your Extension">
    Go to Generations dashboard and locate your extension
  </Step>

  <Step title="Open in Codespace">
    Click "Edit in Codespace" to launch VS Code
  </Step>

  <Step title="Make Changes">
    Edit code in the browser with full IDE features
  </Step>

  <Step title="Test & Deploy">
    Use the integrated terminal to run `shopify app dev` or `shopify app deploy`
  </Step>
</Steps>

### Debugging a Failed Deployment

<Steps>
  <Step title="Open Detail View">
    Click the failed generation card
  </Step>

  <Step title="Review Logs">
    Check deployment logs for error messages
  </Step>

  <Step title="Check Code">
    View the generated code for issues
  </Step>

  <Step title="Edit & Redeploy">
    Open in Codespace to fix issues and redeploy
  </Step>
</Steps>

### Managing Resources

<Steps>
  <Step title="View All Codespaces">
    Open any generation detail page
  </Step>

  <Step title="Stop Unused Codespaces">
    Stop Codespaces you're not actively using
  </Step>

  <Step title="Clean Up">
    Delete old Codespaces to free up quota
  </Step>
</Steps>

## API Access

All dashboard features are available via API:

```bash theme={null}
# List generations
GET /api/generate/list

# Get generation details
GET /api/generate/{id}/status

# List Codespaces for a repo
GET /api/codespaces/list?repoFullName=owner/repo

# Stop a Codespace
POST /api/codespaces/manage
{
  "codespaceName": "special-space-xyz",
  "action": "stop"
}

# Delete a Codespace
POST /api/codespaces/manage
{
  "codespaceName": "special-space-xyz",
  "action": "delete"
}
```

## Best Practices

<CardGroup cols={2}>
  <Card title="Regular Cleanup" icon="trash">
    Delete unused Codespaces to stay within GitHub free tier limits
  </Card>

  <Card title="Use Filters" icon="filter">
    Filter by status to quickly find failed deployments
  </Card>

  <Card title="Version Tracking" icon="code-branch">
    Use version history to track changes across edits
  </Card>

  <Card title="Monitor Logs" icon="list">
    Check deployment logs for warnings before they become errors
  </Card>
</CardGroup>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Codespace won't start">
    **Possible causes:**

    * GitHub API rate limit reached
    * Repository is private (requires GitHub Pro)
    * Invalid GitHub token permissions

    **Solutions:**

    * Wait for rate limit to reset
    * Make repository public or upgrade to GitHub Pro
    * Regenerate GitHub token with `codespace` scope
  </Accordion>

  <Accordion title="Can't see deployment logs">
    Logs are only available after deployment completes. Check back once the status shows "deployed" or "failed".
  </Accordion>

  <Accordion title="Generation missing from list">
    **Troubleshooting steps:**

    1. Check filters - you may have "Deployed" or "Functions" filter active
    2. Refresh the page
    3. Check your Projects page to ensure you're viewing the correct project
  </Accordion>

  <Accordion title="Delete button doesn't work">
    Currently, generations can only be viewed, not deleted from the dashboard. Contact support if you need to remove a generation.
  </Accordion>
</AccordionGroup>

## What's Next?

<CardGroup cols={2}>
  <Card title="Edit in Codespaces" icon="code" href="/essentials/codespaces">
    Learn more about using GitHub Codespaces for development
  </Card>

  <Card title="Deployment Pipeline" icon="rocket" href="/concepts/deployment-pipeline">
    Understand the automated deployment process
  </Card>

  <Card title="API Reference" icon="book" href="/api-reference/generations">
    Integrate generations management into your workflows
  </Card>

  <Card title="Best Practices" icon="star" href="/advanced/best-practices">
    Advanced tips for managing large numbers of extensions
  </Card>
</CardGroup>