@graphprotocol/hypergraph 0.4.1 → 0.5.0-alpha

package/src/cli/services/Utils.ts

@@ -1,8 +1,10 @@
+import { Doc } from '@effect/printer';
 import { Data, Effect, Array as EffectArray } from 'effect';
 import ts from 'typescript';
 
 import * as Mapping from '../../mapping/Mapping.js';
 import * as Utils from '../../mapping/Utils.js';
+import type * as Model from './Model.js';
 
 /**
  * Takes a parsed schema.ts file and maps it to a the Mapping.Schema type.
@@ -16,17 +18,17 @@ import * as Utils from '../../mapping/Utils.js';
 export const parseSchema = (
   sourceCode: string,
   mapping: Mapping.Mapping,
-): Effect.Effect<Mapping.Schema, SchemaParserFailure> =>
+): Effect.Effect<Model.TypesyncHypergraphSchema, SchemaParserFailure> =>
   Effect.try({
     try() {
       const sourceFile = ts.createSourceFile('schema.ts', sourceCode, ts.ScriptTarget.Latest, true);
 
-      const entities: Array<Mapping.SchemaType> = [];
+      const entities: Array<Model.TypesyncHypergraphSchemaType> = [];
 
       const visit = (node: ts.Node) => {
         if (ts.isClassDeclaration(node) && node.name) {
           const className = node.name.text;
-          const properties: Array<Mapping.SchemaTypePropertyPrimitive | Mapping.SchemaTypePropertyRelation> = [];
+          const properties: Array<Model.TypesyncHypergraphSchemaTypeProperty> = [];
 
           // Find the Entity.Class call
           if (node.heritageClauses) {
@@ -44,14 +46,29 @@ export const parseSchema = (
                           const propName = prop.name.text;
                           let dataType: Mapping.SchemaDataType = 'String';
                           let relationType: string | undefined;
+                          let isOptional = false;
 
                           const mappingEntry = mapping[className];
                           const camelCasePropName = Utils.toCamelCase(propName);
 
+                          // Check if the property is wrapped with Type.optional()
+                          let typeExpression = prop.initializer;
+                          if (
+                            ts.isCallExpression(typeExpression) &&
+                            ts.isPropertyAccessExpression(typeExpression.expression) &&
+                            typeExpression.expression.name.text === 'optional'
+                          ) {
+                            isOptional = true;
+                            // Unwrap the optional to get the actual type
+                            if (typeExpression.arguments.length > 0) {
+                              typeExpression = typeExpression.arguments[0];
+                            }
+                          }
+
                           // Extract the type
-                          if (ts.isPropertyAccessExpression(prop.initializer)) {
-                            // Simple types like Type.Text
-                            dataType = Mapping.getDataType(prop.initializer.name.text);
+                          if (ts.isPropertyAccessExpression(typeExpression)) {
+                            // Simple types like Type.String
+                            dataType = Mapping.getDataType(typeExpression.name.text);
 
                             // Look up the property's knowledgeGraphId from the mapping
                             const propKnowledgeGraphId = mappingEntry?.properties?.[camelCasePropName] || null;
@@ -61,10 +78,12 @@ export const parseSchema = (
                               name: propName,
                               dataType: dataType as Mapping.SchemaDataTypePrimitive,
                               knowledgeGraphId: propKnowledgeGraphId,
-                            } satisfies Mapping.SchemaTypePropertyPrimitive);
-                          } else if (ts.isCallExpression(prop.initializer)) {
+                              optional: isOptional || undefined,
+                              status: propKnowledgeGraphId != null ? 'published' : 'synced',
+                            } satisfies Model.TypesyncHypergraphSchemaTypeProperty);
+                          } else if (ts.isCallExpression(typeExpression)) {
                             // Relation types like Type.Relation(User)
-                            const callNode = prop.initializer;
+                            const callNode = typeExpression;
                             if (ts.isPropertyAccessExpression(callNode.expression)) {
                               const typeName = callNode.expression.name.text;
 
@@ -83,7 +102,9 @@ export const parseSchema = (
                                     dataType,
                                     relationType,
                                     knowledgeGraphId: relKnowledgeGraphId,
-                                  } satisfies Mapping.SchemaTypePropertyRelation);
+                                    optional: isOptional || undefined,
+                                    status: relKnowledgeGraphId != null ? 'published' : 'synced',
+                                  } satisfies Model.TypesyncHypergraphSchemaTypeProperty);
                                 }
                               }
                             }
@@ -101,7 +122,12 @@ export const parseSchema = (
           const mappingEntry = mapping[Utils.toPascalCase(className)];
           const typeKnowledgeGraphId = mappingEntry?.typeIds?.[0] ? mappingEntry.typeIds[0] : null;
 
-          entities.push({ name: className, knowledgeGraphId: typeKnowledgeGraphId, properties });
+          entities.push({
+            name: className,
+            knowledgeGraphId: typeKnowledgeGraphId,
+            properties,
+            status: typeKnowledgeGraphId != null ? 'published' : 'synced',
+          });
         }
 
         ts.forEachChild(node, visit);
@@ -185,3 +211,197 @@ export function parseHypergraphMapping(moduleExport: any): Mapping.Mapping {
   // If no preferred names found, use the first one
   return mappingCandidates[0][1] as Mapping.Mapping;
 }
+
+function fieldToEntityString({ name, dataType, optional = false }: Model.TypesyncHypergraphSchemaTypeProperty): string {
+  // Convert type to Entity type
+  const entityType = (() => {
+    switch (true) {
+      case dataType === 'String':
+        return 'Type.String';
+      case dataType === 'Number':
+        return 'Type.Number';
+      case dataType === 'Boolean':
+        return 'Type.Boolean';
+      case dataType === 'Date':
+        return 'Type.Date';
+      case dataType === 'Point':
+        return 'Type.Point';
+      case Mapping.isDataTypeRelation(dataType):
+        // renders the type as `Type.Relation(Entity)`
+        return `Type.${dataType}`;
+      default:
+        // how to handle complex types
+        return 'Type.String';
+    }
+  })();
+
+  if (optional === true) {
+    return `  ${Utils.toCamelCase(name)}: Type.optional(${entityType})`;
+  }
+
+  // adds a tab before the property
+  return `  ${Utils.toCamelCase(name)}: ${entityType}`;
+}
+
+function typeDefinitionToString(type: Model.TypesyncHypergraphSchemaType): string | null {
+  if (!type.name) {
+    return null;
+  }
+  const fields = type.properties.filter((_prop) => _prop.name != null && _prop.name.length > 0);
+  if (fields.length === 0) {
+    return null;
+  }
+
+  const fieldStrings = fields.map(fieldToEntityString);
+
+  const name = Utils.toPascalCase(type.name);
+  return `export class ${name} extends Entity.Class<${name}>('${name}')({
+${fieldStrings.join(',\n')}
+}) {}`;
+}
+
+/**
+ * Builds a string of the schema.ts file contents after parsing the schema into the correct format.
+ *
+ * @example
+ *
+ * ```typescript
+ * const schema = Model.TypesyncHypergraphSchema.make({
+ *   types: [
+ *     {
+ *       name: "User",
+ *       knowledgeGraphId: null,
+ *       status: null,
+ *       properties: [
+ *         {
+ *           name: "name",
+ *           dataType: "String",
+ *           knowledgeGraphId: null,
+ *           optional: null,
+ *           status: null
+ *         }
+ *       ]
+ *     }
+ *   ]
+ * })
+ * const schemaFile = buildSchemaFile(schema)
+ *
+ * expect(schemaFile).toEqual(`
+ * import { Entity, Type } from '@graphprotocol/hypergraph';
+ *
+ * export class User extends Entity.Class<User>('User')({
+ *   name: Type.String
+ * }) {}
+ * `)
+ * ```
+ */
+export function buildSchemaFile(schema: Model.TypesyncHypergraphSchema) {
+  const importStatement = `import { Entity, Type } from '@graphprotocol/hypergraph';`;
+
+  const typeDefinitions = schema.types
+    .map(typeDefinitionToString)
+    .filter((def) => def != null)
+    .join('\n\n');
+  return [importStatement, typeDefinitions].join('\n\n');
+}
+
+export function buildMappingFile(mapping: Mapping.Mapping | Model.TypesyncHypergraphMapping) {
+  // Import statements
+  const imports = Doc.vsep([
+    Doc.text("import type { Mapping } from '@graphprotocol/hypergraph/mapping';"),
+    Doc.text("import { Id } from '@graphprotocol/hypergraph';"),
+  ]);
+
+  // Generate the mapping object - build it line by line for exact formatting
+  const mappingLines = [Doc.text('export const mapping: Mapping = {')];
+
+  for (const [typeName, typeData] of Object.entries(mapping)) {
+    mappingLines.push(Doc.text(`  ${typeName}: {`));
+
+    // Type IDs
+    const typeIdsList = typeData.typeIds.map((id: string) => `Id("${id}")`).join(', ');
+    mappingLines.push(Doc.text(`    typeIds: [${typeIdsList}],`));
+
+    // Properties
+    const properties = Object.entries(typeData.properties ?? {});
+    if (EffectArray.isNonEmptyArray(properties)) {
+      mappingLines.push(Doc.text('    properties: {'));
+      properties.forEach(([propName, propId], index, entries) => {
+        const isLast = index === entries.length - 1;
+        const comma = isLast ? '' : ',';
+        mappingLines.push(Doc.text(`      ${propName}: Id("${propId}")${comma}`));
+      });
+      mappingLines.push(Doc.text('    },'));
+    }
+
+    // Relations
+    const relations = Object.entries(typeData.relations ?? {});
+    if (EffectArray.isNonEmptyArray(relations)) {
+      mappingLines.push(Doc.text('    relations: {'));
+      relations.forEach(([relationName, relationId], index, entries) => {
+        const isLast = index === entries.length - 1;
+        const comma = isLast ? '' : ',';
+        mappingLines.push(Doc.text(`      ${relationName}: Id("${relationId}")${comma}`));
+      });
+      mappingLines.push(Doc.text('    },'));
+    }
+
+    mappingLines.push(Doc.text('  },'));
+  }
+
+  mappingLines.push(Doc.rbrace);
+
+  const compiled = Doc.vcat([imports, Doc.empty, ...mappingLines]);
+
+  return Doc.render(compiled, {
+    style: 'pretty',
+    options: { lineWidth: 120 },
+  });
+}
+
+/**
+ * Builds a string of the mapping.ts file contents after parsing the schema into the correct mapping format.
+ *
+ * @example
+ *
+ * ```typescript
+ * const schema = Model.TypesyncHypergraphSchema.make({
+ *   types: [
+ *     {
+ *       name: "User",
+ *       knowledgeGraphId: "7f9562d4-034d-4385-bf5c-f02cdebba47a",
+ *       status: null,
+ *       properties: [
+ *         {
+ *           name: "name",
+ *           dataType: "String",
+ *           knowledgeGraphId: "a126ca53-0c8e-48d5-b888-82c734c38935",
+ *           optional: null,
+ *           status: null
+ *         }
+ *       ]
+ *     }
+ *   ]
+ * })
+ * const mappingFile = buildMappingFile(schema)
+ *
+ * expect(mappingFile).toEqual(`
+ * import type { Mapping } from '@graphprotocol/hypergraph/mapping';
+ * import { Id } from '@graphprotocol/hypergraph';
+ *
+ * export const mapping: Mapping = {
+ *   User: {
+ *     typeIds: [Id('7f9562d4-034d-4385-bf5c-f02cdebba47a')],
+ *     properties: {
+ *       name: Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
+ *     }
+ *   }
+ * }
+ * `)
+ * ```
+ */
+export function buildMappingFileFromSchema(schema: Model.TypesyncHypergraphSchema) {
+  const [mapping] = Mapping.generateMapping(schema);
+
+  return buildMappingFile(mapping);
+}

package/src/cli/subcommands/typesync.ts

@@ -1,6 +1,8 @@
 import { createServer } from 'node:http';
+import { fileURLToPath } from 'node:url';
 import { Command, Options } from '@effect/cli';
 import {
+  FileSystem,
   HttpApi,
   HttpApiBuilder,
   HttpApiEndpoint,
@@ -8,70 +10,258 @@ import {
   HttpApiGroup,
   HttpApiSchema,
   HttpMiddleware,
+  HttpRouter,
   HttpServer,
   HttpServerResponse,
+  Path,
 } from '@effect/platform';
 import { NodeHttpServer } from '@effect/platform-node';
 import { AnsiDoc } from '@effect/printer-ansi';
-import { Effect, Layer, Schema } from 'effect';
+import { Cause, Data, Effect, Layer, Option, Schema, Struct } from 'effect';
+import open, { type AppName, apps } from 'open';
+import * as Model from '../services/Model.js';
 import * as Typesync from '../services/Typesync.js';
 
-const hypergraphTypeSyncApi = HttpApi.make('HypergraphTypeSyncApi')
+class HypergraphTypesyncStudioApiRouter extends HttpApiGroup.make('HypergraphTypesyncStudioApiRouter')
   .add(
-    HttpApiGroup.make('SchemaStreamGroup')
-      .add(
-        // exposes an api endpoint at /api/vX/schema/events that is a stream of the current Schema parsed from the directory the hypergraph-cli tool is running in
-        HttpApiEndpoint.get('HypergraphSchemaEventStream')`/schema/events`
-          .addError(HttpApiError.InternalServerError)
-          .addSuccess(
-            Schema.String.pipe(
-              HttpApiSchema.withEncoding({
-                kind: 'Json',
-                contentType: 'text/event-stream',
-              }),
-            ),
-          ),
+    // exposes an api endpoint at /api/vX/schema/events that is a stream of the current Schema parsed from the directory the hypergraph-cli tool is running in
+    HttpApiEndpoint.get('HypergraphSchemaEventStream')`/schema/events`
+      .addError(HttpApiError.InternalServerError)
+      .addSuccess(
+        Schema.String.pipe(
+          HttpApiSchema.withEncoding({
+            kind: 'Json',
+            contentType: 'text/event-stream',
+          }),
+        ),
+      ),
+  )
+  .add(
+    HttpApiEndpoint.post('SyncHypergraphSchema')`/schema/sync`
+      .setPayload(Model.TypesyncHypergraphSchema)
+      .addSuccess(Model.TypesyncHypergraphSchema)
+      .addError(HttpApiError.InternalServerError)
+      .addError(HttpApiError.BadRequest),
+  )
+  .add(
+    HttpApiEndpoint.post('SyncHypergraphMapping')`/mapping/sync`
+      .setPayload(
+        Schema.Struct({
+          schema: Model.TypesyncHypergraphSchema,
+          mapping: Model.TypesyncHypergraphMapping,
+        }),
       )
-      .prefix('/v1'),
+      .addSuccess(Model.TypesyncHypergraphSchema)
+      .addError(HttpApiError.InternalServerError)
+      .addError(HttpApiError.BadRequest),
   )
-  .prefix('/api');
+  .prefix('/v1') {}
+class HypergraphTypesyncStudioApi extends HttpApi.make('HypergraphTypesyncStudioApi')
+  .add(HypergraphTypesyncStudioApiRouter)
+  .prefix('/api') {}
 
-const hypergraphTypeSyncApiLive = HttpApiBuilder.group(hypergraphTypeSyncApi, 'SchemaStreamGroup', (handlers) =>
-  handlers.handle('HypergraphSchemaEventStream', () =>
+const hypergraphTypeSyncApiLive = HttpApiBuilder.group(
+  HypergraphTypesyncStudioApi,
+  'HypergraphTypesyncStudioApiRouter',
+  (handlers) =>
     Effect.gen(function* () {
       const schemaStream = yield* Typesync.TypesyncSchemaStreamBuilder;
 
-      const stream = yield* schemaStream
-        .hypergraphSchemaStream()
-        .pipe(Effect.catchAll(() => new HttpApiError.InternalServerError()));
+      return handlers
+        .handle('HypergraphSchemaEventStream', () =>
+          Effect.gen(function* () {
+            const stream = yield* schemaStream.hypergraphSchemaStream().pipe(
+              Effect.tapErrorCause((cause) =>
+                Effect.logError(
+                  AnsiDoc.cat(
+                    AnsiDoc.text('Failure building Hypergraph events stream:'),
+                    AnsiDoc.text(Cause.pretty(cause)),
+                  ),
+                ),
+              ),
+              Effect.catchAll(() => new HttpApiError.InternalServerError()),
+            );
 
-      return yield* HttpServerResponse.stream(stream, { contentType: 'text/event-stream' }).pipe(
-        HttpServerResponse.setHeaders({
-          'Content-Type': 'text/event-stream',
-          'Cache-Control': 'no-cache',
-          Connection: 'keep-alive',
-        }),
-      );
+            return yield* HttpServerResponse.stream(stream, { contentType: 'text/event-stream' }).pipe(
+              HttpServerResponse.setHeaders({
+                'Content-Type': 'text/event-stream',
+                'Cache-Control': 'no-cache',
+                Connection: 'keep-alive',
+              }),
+            );
+          }),
+        )
+        .handle('SyncHypergraphSchema', ({ payload }) =>
+          schemaStream.syncSchema(payload).pipe(
+            Effect.tapErrorCause((cause) =>
+              Effect.logError(
+                AnsiDoc.cat(AnsiDoc.text('Failure syncing Hypergraph Schema:'), AnsiDoc.text(Cause.pretty(cause))),
+              ),
+            ),
+            Effect.catchAll(() => new HttpApiError.InternalServerError()),
+          ),
+        )
+        .handle('SyncHypergraphMapping', ({ payload }) =>
+          schemaStream.syncMapping(payload.schema, payload.mapping).pipe(
+            Effect.tapErrorCause((cause) =>
+              Effect.logError(
+                AnsiDoc.cat(AnsiDoc.text('Failure syncing Hypergraph mapping:'), AnsiDoc.text(Cause.pretty(cause))),
+              ),
+            ),
+            Effect.catchAll(() => new HttpApiError.InternalServerError()),
+          ),
+        );
     }),
-  ),
 );
 
-const HypergraphTypeSyncApiLive = HttpApiBuilder.api(hypergraphTypeSyncApi).pipe(
-  Layer.provide(hypergraphTypeSyncApiLive),
+const HypergraphTypeSyncApiLayer = HttpApiBuilder.middlewareCors({
+  allowedMethods: ['GET', 'POST', 'OPTIONS'],
+  allowedOrigins: ['http://localhost:3000', 'http://localhost:5173'],
+}).pipe(
+  Layer.provideMerge(HttpApiBuilder.api(HypergraphTypesyncStudioApi)),
   Layer.provide(Typesync.layer),
+  Layer.provide(hypergraphTypeSyncApiLive),
+);
+
+const HypergraphTypeSyncApiLive = HttpApiBuilder.httpApp.pipe(
+  Effect.provide(
+    Layer.mergeAll(HypergraphTypeSyncApiLayer, HttpApiBuilder.Router.Live, HttpApiBuilder.Middleware.layer),
+  ),
 );
 
-const HypergraphTypeSyncApiLayer = HttpApiBuilder.serve(HttpMiddleware.logger).pipe(
-  Layer.provide(HttpApiBuilder.middlewareCors()),
-  Layer.provide(HypergraphTypeSyncApiLive),
+const TypesyncStudioFileRouter = Effect.gen(function* () {
+  const fs = yield* FileSystem.FileSystem;
+  const path = yield* Path.Path;
+
+  const __filename = fileURLToPath(import.meta.url);
+  const __dirname = path.dirname(__filename);
+
+  // Try multiple possible locations for the dist directory
+  const possiblePaths = [
+    // npm published package (when this file is in node_modules/@graphprotocol/hypergraph/dist/cli/subcommands/)
+    path.resolve(__dirname, '..', '..', 'typesync-studio', 'dist'),
+    // Development mode (when this file is in packages/hypergraph/src/cli/subcommands/)
+    path.resolve(__dirname, '..', '..', '..', 'typesync-studio', 'dist'),
+  ];
+
+  const findTypesyncStudioDist = Effect.fnUntraced(function* () {
+    return yield* Effect.findFirst(possiblePaths, (_) => fs.exists(_).pipe(Effect.orElseSucceed(() => false)));
+  });
+
+  const typesyncStudioClientDist = yield* findTypesyncStudioDist().pipe(
+    // default to first path
+    Effect.map((maybe) => Option.getOrElse(maybe, () => possiblePaths[0])),
+  );
+
+  return HttpRouter.empty.pipe(
+    HttpRouter.get(
+      '/',
+      HttpServerResponse.file(path.join(typesyncStudioClientDist, 'index.html')).pipe(
+        Effect.orElse(() => HttpServerResponse.empty({ status: 404 })),
+      ),
+    ),
+    HttpRouter.get(
+      '/assets/:file',
+      Effect.gen(function* () {
+        const file = yield* HttpRouter.params.pipe(Effect.map(Struct.get('file')), Effect.map(Option.fromNullable));
+
+        if (Option.isNone(file)) {
+          return HttpServerResponse.empty({ status: 404 });
+        }
+
+        const assets = path.join(typesyncStudioClientDist, 'assets');
+        const normalized = path.normalize(path.join(assets, ...file.value.split('/')));
+        if (!normalized.startsWith(assets)) {
+          return HttpServerResponse.empty({ status: 404 });
+        }
+
+        return yield* HttpServerResponse.file(normalized);
+      }).pipe(Effect.orElse(() => HttpServerResponse.empty({ status: 404 }))),
+    ),
+  );
+});
+
+const Server = Effect.all({
+  api: HypergraphTypeSyncApiLive,
+  files: TypesyncStudioFileRouter,
+}).pipe(
+  Effect.map(({ api, files }) =>
+    HttpRouter.empty.pipe(HttpRouter.mount('/', files), HttpRouter.mountApp('/api', api, { includePrefix: true })),
+  ),
+  Effect.map((router) => HttpServer.serve(HttpMiddleware.logger)(router)),
+  Layer.unwrapEffect,
 );
 
+const openBrowser = (port: number, browser: AppName | 'arc' | 'safari' | 'browser' | 'browserPrivate') =>
+  Effect.async<void, OpenBrowserError>((resume) => {
+    const url = `http://localhost:${port}`;
+
+    const launch = (appOpts?: { name: string | ReadonlyArray<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 | ReadonlyArray<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);
+        if (mapped) {
+          launch({ name: mapped }).catch(() => launch());
+          break;
+        }
+        launch();
+        break;
+      }
+    }
+  });
+
+export class OpenBrowserError extends Data.TaggedError('Nozzle/cli/studio/errors/OpenBrowserError')<{
+  readonly cause: unknown;
+}> {}
+
 export const typesync = Command.make('typesync', {
   args: {
-    port: Options.integer('port').pipe(
-      Options.withAlias('p'),
-      Options.withDefault(3000),
-      Options.withDescription('The port to run the Hypergraph TypeSync studio server on. Default 3000'),
+    open: Options.boolean('open').pipe(
+      Options.withDescription('If true, opens the nozzle dataset studio in your browser'),
+      Options.withDefault(true),
+    ),
+    browser: Options.choice('browser', [
+      'chrome',
+      'firefox',
+      'edge',
+      'safari',
+      'arc',
+      'browser',
+      'browserPrivate',
+    ]).pipe(
+      Options.withAlias('b'),
+      Options.withDescription(
+        'Broweser to open the nozzle dataset studio app in. Default is your default selected browser',
+      ),
+      Options.withDefault('browser'),
     ),
   },
 }).pipe(
@@ -80,14 +270,33 @@ export const typesync = Command.make('typesync', {
   ),
   Command.withHandler(({ args }) =>
     Effect.gen(function* () {
-      yield* HypergraphTypeSyncApiLayer.pipe(
+      yield* Server.pipe(
         HttpServer.withLogAddress,
-        Layer.provide(NodeHttpServer.layer(createServer, { port: args.port })),
+        Layer.provide(NodeHttpServer.layer(createServer, { port: 3000 })),
+        Layer.tap(() =>
+          Effect.gen(function* () {
+            if (args.open) {
+              return yield* openBrowser(3000, args.browser).pipe(
+                Effect.tapErrorCause((cause) =>
+                  Effect.logWarning(
+                    AnsiDoc.text(
+                      'Failure opening nozzle dataset studio in your browser. Open at http://localhost:3000',
+                    ),
+                    AnsiDoc.text(Cause.pretty(cause)),
+                  ),
+                ),
+                Effect.orElseSucceed(() => Effect.void),
+              );
+            }
+            return Effect.void;
+          }),
+        ),
         Layer.tap(() =>
-          Effect.logInfo(AnsiDoc.text(`🎉 TypeSync studio started and running at http://localhost:${args.port}`)),
+          Effect.logInfo(AnsiDoc.text('🎉 TypeSync studio started and running at http://localhost:3000')),
         ),
         Layer.launch,
       );
     }),
   ),
+  Command.provide(Typesync.layer),
 );