Shopify CLI Dashboard — User Guide

1) What this app does

• Run Shopify CLI from the browser. Execute a validated subset of CLI actions and see live STDOUT/ERR with ANSI colors.
• One-click actions. Hoverable sidebar groups: Auth, App, Theme, Hydrogen, Plugins, Config, Webhooks, Other.
• Device-auth helper. When the CLI requests device login, a modal shows the verification code and a button to open the login page.
• Profiles & paths. Pick Organization & App; the UI computes project, TOML, and profile paths automatically.
• Link & config flow. app config link followed by an automatic app config use -c <name> on success.
• Detected URLs list. The console output is parsed for links and surfaced separately.
• Optional viewers & diagnostics. Webhooks viewer and Doctor probe for the shopify binary.
• Versions browser. Fetches app versions list --json for your project path.

2) Quick Start

First-time sign-in

1. Visit /shopify-cli; unauthenticated users are redirected to the login page.
2. If no users exist, create the first admin on the First-time setup card.
3. Log in with email and password; you’ll be redirected to the dashboard.

Run your first action

1. Open the dashboard and (optionally) set Project Path and Extra Args (e.g., --json -c default).
2. Click an action like Auth → auth login and watch the console.
3. If device-auth is requested, the modal shows your code and a link to Shopify’s device login.
4. Use the Profile modal to select Organization/App and store defaults.

3) UI Walkthrough

Top bar

• Doctor probe to ensure the shopify binary is reachable.

Sidebar menus

Primary groups and examples:

Main content areas

• Selected action shows the command being executed.
• Detected Links displays clickable URLs parsed from the console.
• Console renders ANSI-colored output with optional raw view.
• Webhooks viewer (optional) for quick local inspection.

Modals

• Device Auth: verification code + “Open login page”.
• Profile: choose Organization & App, store defaults, view computed paths.
• Manage Versions: fetch and display app versions list --json.

4) How commands run (under the hood)

• Frontend posts /api/cli/commands with {'}}action, projectPath, extraArgs{{ '}.
• Server validates against an allow-list and spawns the shopify process.
• Output is streamed as Server-Sent Events from /api/cli/stream/:jobId.
• Client processes out, err, and meta (URLs, device-auth code/URL, profile prompt), then done.
• For successful app config link, the client auto-runs app config use -c <name>.

5) Authentication & first-user bootstrap

• /shopify-cli/login provides sign-in and (if no users exist) a first-user admin creation card.
• After login/registration, the session stores user info and redirects to the dashboard.
• /api/cli/allow-register drives the bootstrap card’s visibility.

6) Profiles & paths

Profiles persist organization/app defaults (org ID/name, client_id, store domain). The UI computes and displays:

• Project Root: <baseDir>/<Org>__o<id>/<App>__a<clientIdPrefix>/
• TOML Path: <ProjectRoot>/toml/
• Profile Path: <ProjectRoot>/profile/

7) Security & validation

• All work-performing routes require an authenticated session.
• Commands are allow-listed via explicit regex groups; risky actions are blocked.
• App-scoped actions verify the working directory exists and resembles a Shopify app.

8) Troubleshooting

• No output? Use Doctor to confirm the CLI is on the PATH and verify your session.
• Device-auth not showing? Ensure the CLI printed a standard “User verification code” line.
• Empty versions list? Ensure the correct project path and permissions.
• Webhooks viewer empty? Wire the backend to your data source.

9) Notes & Extensibility

• Extend the allow-list to support new commands safely.
• Swap the Org/App stubs with your Partners/GraphQL data.
• Easily theme with your site CSS; this page is standalone and framework-free.