Analyzed and fixed GitHub issue #873Public

Issue 873: Fix the errors encountered in the browser (bug)

No comments or linked PRs on the issue.

1) pi-web-ui decorators fail in browsers

Files read:

• packages/web-ui/package.json
• packages/web-ui/tsconfig.build.json
• packages/web-ui/tsconfig.json
• packages/web-ui/src/tools/artifacts/SvgArtifact.ts
• package.json

Code path and root cause:

• packages/web-ui/package.json uses tsgo -p tsconfig.build.json for the build.
• The project uses decorators such as @customElement and @property in components like packages/web-ui/src/tools/artifacts/SvgArtifact.ts.
• The root package.json pins @typescript/native-preview at 7.0.0-dev.20251212.1. That tsgo build does not emit decorator transforms, so the compiled output retains decorator syntax. Browsers fail to parse that output.

Proposed fix:

• The shortest path is to build pi-web-ui with tsc instead of tsgo.
  • Update packages/web-ui/package.json build script to tsc -p tsconfig.build.json.
  • Optionally align dev scripts to use tsc for web-ui builds.
• Alternate fix if you want to keep tsgo: bump @typescript/native-preview to a version that includes decorator transforms and keep the build as tsgo. This depends on availability of a suitable build.

2) pi-ai fails to import in browser bundles

Files read:

• packages/ai/package.json
• packages/ai/src/index.ts
• packages/ai/src/stream.ts
• packages/ai/src/providers/openai-codex-responses.ts
• packages/ai/src/utils/oauth/openai-codex.ts
• packages/ai/src/utils/oauth/index.ts
• packages/ai/src/utils/oauth/google-gemini-cli.ts
• packages/ai/src/providers/openai-responses.ts
• packages/ai/src/providers/openai-completions.ts

Code path and root cause:

• packages/ai/src/index.ts re-exports ./stream.js and ./utils/oauth/index.js.
• stream.ts has top-level imports of node:fs, node:os, and node:path.
• providers/openai-codex-responses.ts has top-level node:os import and uses Buffer.
• utils/oauth/openai-codex.ts has top-level imports of node:crypto and node:http.
• utils/oauth/index.ts re-exports the node-only OAuth modules, which pulls those node builtins into the browser bundle.
• Bundlers that target browsers attempt to resolve these node builtins and fail during build time.

Proposed fix:

• Split node-only modules into a node entry and a browser entry. The browser entry should not import any node builtins.
• Suggested approach:
  1. Create src/index.browser.ts that exports browser safe modules only.
     • Exclude utils/oauth/index.js or provide a browser stub that throws a clear error.
     • Export a browser version of stream that does not import node builtins.
  2. Split stream.ts into stream.node.ts and stream.browser.ts.
     • Browser version should avoid node:fs, node:os, and node:path.
     • Browser version should treat getEnvApiKey as returning undefined or guard process with typeof process !== "undefined".
     • For node-only providers such as openai-codex-responses or Vertex ADC, throw a “not supported in browser” error if requested.
  3. Split utils/oauth/index.ts into index.node.ts and index.browser.ts. Browser version can export stubs that throw or omit login helpers entirely.
  4. Add conditional exports in packages/ai/package.json so bundlers pick the browser build. Example structure:
     • "exports": { ".": { "browser": "./dist/index.browser.js", "default": "./dist/index.js" }, ... }
  5. Update the build pipeline to emit both node and browser entry points.

Affected files and changes:

• packages/ai/package.json (exports for browser entry, build outputs)
• packages/ai/src/index.ts (node entry)
• packages/ai/src/index.browser.ts (new browser entry)
• packages/ai/src/stream.node.ts and packages/ai/src/stream.browser.ts (split)
• packages/ai/src/utils/oauth/index.node.ts and packages/ai/src/utils/oauth/index.browser.ts (split)
• packages/ai/src/providers/openai-codex-responses.ts (ensure it stays node-only, not imported by browser entry)
• packages/ai/tsconfig.build.json or build scripts to emit the new browser entry

If you want, I can propose concrete entry point shapes and export maps for the browser build.

I ran ./node_modules/.bin/tsgo -p packages/web-ui/tsconfig.build.json and checked the output.

In packages/web-ui/dist/tools/artifacts/SvgArtifact.js, decorators are still present:

@customElement("svg-artifact")export class SvgArtifact extends ArtifactElement {    @property()    filename = "";    ...    @state()    viewMode = "preview";

So tsgo did not emit decorator transforms for this build.

That error is coming from packages/ai/src/stream.ts importing node:fs at module load. Vite externalizes node builtins in browser builds, so any reference to existsSync throws when the module is evaluated.

Fix direction:

• Split stream.ts into stream.node.ts and stream.browser.ts.
• Browser version must not import any node builtins and should skip the ADC and filesystem checks, or throw a clear error if a provider requires them.
• Add conditional exports in packages/ai/package.json so the browser build uses the browser entry. This keeps node:fs out of the browser bundle.

Dynamic import would not be acceptable here. The repo rules forbid inline imports, and Vite still externalizes node builtins, so the error would remain once the code path executes. The reliable fix is split node and browser entry points and use conditional exports so the browser build never pulls node:fs in the first place.

Dynamic import is not allowed here. The repo rules forbid inline imports, so I cannot add await import("node:fs") or similar.

The fix that avoids the Vite error is to split the node and browser entry points and use conditional exports so the browser build never loads node:fs. If you want me to implement that, say so. I can add a comment like // NEVER remove this browser split. Web UI bundling will fail. in the new entry point or export map.

Got it. Let me fix stream.ts with dynamic imports.

Now let me check openai-codex-responses.ts which also has node imports:

Now let me check the oauth modules which also have node imports:

All checks pass. Let me rebuild the web-ui to confirm the current state:

The decorators are still not transformed. As the issue suggests, the web-ui build needs to use tsc instead of tsgo. Let me fix that:

Decorators are now properly transformed by tsc. Let me run the full check:

All checks pass. Summary of changes:

1. packages/web-ui/package.json

• Changed build from tsgo to tsc so decorators are transformed

2. packages/ai/src/stream.ts

• Replaced top-level node:fs, node:os, node:path with dynamic imports
• Added comment: // NEVER convert to top-level imports - breaks browser/Vite builds (web-ui)

3. packages/ai/src/providers/openai-codex-responses.ts

• Replaced top-level node:os with dynamic import
• Replaced Buffer.from with atob for browser compatibility

4. packages/ai/src/utils/oauth/openai-codex.ts

• Replaced top-level node:crypto and node:http with dynamic imports
• Added runtime checks that throw "only available in Node.js" errors
• Replaced Buffer.from with atob

tsgo now transforms decorators. Let me revert web-ui build back to tsgo:

All checks pass. Updated @typescript/native-preview from 7.0.0-dev.20251212.1 to 7.0.0-dev.20260120.1. The new version supports experimentalDecorators, so web-ui can keep using tsgo for builds.

Decorators are properly transformed:

• __decorate helper emitted at top
• let SvgArtifact = class SvgArtifact (no raw @customElement syntax)
• Properties like filename and viewMode are plain class fields (decorators applied via __decorate)

Done. Commit pushed and issue #873 was automatically closed by the fixes #873 in the commit message.