fix(cli): add robust browser support for --open flag

apps/typesync/README.md

@@ -1,38 +1,40 @@
-# @graphprotocol/typesync
+# @graphprotocol/hypergraph-cli
 
-CLI toolchain to view existing types, select, pick, extend to create schemas and generate a [@graphprotocol/hypergraph](https://github.com/graphprotocol/hypergraph/tree/main/packages/hypergraph) schema.
+# Hypergraph command-line toolchain for scaffolding and working with Hypergraph applications.
 
 ## Installing
 
 ```bash
 # npm
-npm i -g @graphprotocol/typesync-cli
+npm i -g @graphprotocol/hypergraph-cli
 
 # yarn
-yarn global add @graphprotocol/typesync-cli
+yarn global add @graphprotocol/hypergraph-cli
 
 # pnpm
-pnpm install -g @graphprotocol/typesync-cli
+pnpm install -g @graphprotocol/hypergraph-cli
 ```
 
 ## Running
 
 ```bash
-typsync --help
+hypergraph --help
+hg --help   # short alias
 
-# opening typesync studio
-typesync studio
+# opening Hypergraph studio
+hypergraph studio
+hg studio
 
-# opening typesync studio in firefox automatically
-typesync studio --open --browser firefox
+# opening Hypergraph studio in firefox automatically
+hypergraph studio --open --browser firefox
 ```
 
 ## Commands
 
-- `studio` -> runs the `Typesync` api and client UI application for viewing created application schemas, browsing the Knowledge Graph, and creating new application schemas.
-  - running: `typesync studio`
+- `studio` -> runs the Hypergraph API and client UI application for viewing created application schemas, browsing the Knowledge Graph, and creating new application schemas.
+  - running: `hypergraph studio`
   - args:
     - `port` [OPTIONAL, default = 3000] port to run the application on
-      - example: `typesync studio --port 3001`
-    - `browser` [OPTION, default 'browser'] browser to open the app in, if the `--open` flag is passed
-      - example: `typesync studio --open --browser firefox`
+      - example: `hypergraph studio --port 3001`
+    - `browser` [OPTION, default 'browser'] browser to open the app in (`chrome | firefox | edge | safari | arc | browser | browserPrivate`)
+      - example: `hypergraph studio --open --browser chrome`

apps/typesync/package.json

@@ -15,7 +15,8 @@
     "linkDirectory": false
   },
   "bin": {
-    "typesync": "./dist/bin.cjs"
+    "hypergraph": "./dist/bin.cjs",
+    "hg": "./dist/bin.cjs"
   },
   "files": ["README.md", "dist"],
   "scripts": {
@@ -35,7 +36,7 @@
     "copy-db-migrations": "cp -rp ./src/migrations ./dist/migrations",
     "copy-client-dist": "mkdir -p ./dist/client && cp -rp ./client/dist ./dist/client/dist",
     "copy-all": "pnpm run copy-package-json && pnpm run copy-db-migrations && pnpm run copy-client-dist",
-    "typesync": "pnpx tsx ./src/bin.ts studio"
+    "hypergraph": "pnpx tsx ./src/bin.ts studio"
   },
   "devDependencies": {
     "@effect/cli": "latest",

apps/typesync/scripts/copy-package-json.ts

@@ -13,7 +13,10 @@ const program = Effect.gen(function* () {
     type: json.type,
     description: json.description,
     main: 'bin.cjs',
-    bin: 'bin.cjs',
+    bin: {
+      hypergraph: 'bin.cjs',
+      hg: 'bin.cjs',
+    },
     engines: json.engines,
     dependencies: json.dependencies,
     peerDependencies: json.peerDependencies,

apps/typesync/src/Cli.ts

@@ -2,14 +2,14 @@ import * as Command from '@effect/cli/Command';
 
 import { studio } from './subcommands/studio.js';
 
-const typesync = Command.make('typesync').pipe(
+const hypergraph = Command.make('hypergraph').pipe(
   Command.withDescription(
-    'Typesync command line interface for building and interacting with @graphprotocol/hypergraph schemas',
+    'Hypergraph command line interface for building and interacting with @graphprotocol/hypergraph schemas',
   ),
   Command.withSubcommands([studio]),
 );
 
-export const run = Command.run(typesync, {
-  name: 'typesync',
+export const run = Command.run(hypergraph, {
+  name: 'hypergraph',
   version: '0.0.0-alpha',
 });

apps/typesync/src/subcommands/studio.ts

@@ -7,7 +7,7 @@ import * as Console from 'effect/Console';
 import * as Data from 'effect/Data';
 import * as Effect from 'effect/Effect';
 import * as Layer from 'effect/Layer';
-import open, { type AppName } from 'open';
+import open, { type AppName, apps } from 'open';
 
 import * as Server from '../Server.js';
 
@@ -22,7 +22,15 @@ export const studio = Command.make('studio', {
       Options.withDescription('If true, opens the Typesync studio in your browser'),
       Options.withDefault(true),
     ),
-    browser: Options.choice('browser', ['chrome', 'firefox', 'edge', 'browser', 'browserPrivate']).pipe(
+    browser: Options.choice('browser', [
+      'chrome',
+      'firefox',
+      'edge',
+      'safari',
+      'arc',
+      'browser',
+      'browserPrivate',
+    ]).pipe(
       Options.withAlias('b'),
       Options.withDescription('Broweser to open the Typesync studio app in. Default is your default selected browser'),
       Options.withDefault('browser'),
@@ -60,19 +68,46 @@ export const studio = Command.make('studio', {
   ),
 );
 
-const openBrowser = (port: number, browser: AppName) =>
+const openBrowser = (port: number, browser: AppName | 'arc' | 'safari' | 'browser' | 'browserPrivate') =>
   Effect.async<void, OpenBrowserError>((resume) => {
-    open(`http://localhost:${port}`, {
-      app: { name: browser },
-    }).then((subprocess) => {
-      // wait for child process to start before succeeding
-      subprocess.on('spawn', () => {
-        resume(Effect.void);
-      });
-      subprocess.on('error', (err) => {
-        resume(Effect.fail(new OpenBrowserError({ cause: err })));
+    const url = `http://localhost:${port}`;
+
+    const launch = (appOpts?: { name: string | readonly string[] }) =>
+      open(url, appOpts ? { app: appOpts } : undefined).then((subprocess) => {
+        subprocess.on('spawn', () => resume(Effect.void));
+        subprocess.on('error', (err) => resume(Effect.fail(new OpenBrowserError({ cause: err }))));
       });
-    });
+
+    const mapBrowserName = (b: typeof browser): string | readonly string[] | undefined => {
+      switch (b) {
+        case 'chrome':
+          return apps.chrome; // cross-platform alias from open
+        case 'firefox':
+          return apps.firefox;
+        case 'edge':
+          return apps.edge;
+        case 'safari':
+          return 'Safari';
+        case 'arc':
+          return 'Arc';
+        default:
+          return undefined;
+      }
+    };
+
+    switch (browser) {
+      case 'browser':
+        launch();
+        break;
+      case 'browserPrivate':
+        launch({ name: apps.browserPrivate });
+        break;
+      default: {
+        const mapped = mapBrowserName(browser);
+        mapped ? launch({ name: mapped }).catch(() => launch()) : launch();
+        break;
+      }
+    }
   });
 
 export class OpenBrowserError extends Data.TaggedError('/typesync/errors/OpenBrowserError')<{