feat(ENG-12652): suspense mre and debug log

[adefreitas]

Summary by cubic

Adds a Suspense-based Relay MRE in the dev app to reproduce the OAuth regression (ENG-12652). Adds a debug flag, integrationId support, dev tab UI, and Relay tooling.

• New Features

  • New “Suspense MRE” tab mirroring the client’s Relay setup (Suspense, useLazyLoadQuery network-only, @required, startTransition).
  • Mocked Relay environment for providers/create-session/confirm-account, with a background poller and a “simulate token expiry” button.
  • Added debug prop across Hub → StackOneHub → Integration Picker; traces connection state transitions.
  • Dev app updates: tab bar UI, port 3001, integrationId input, and integration_id passed to session creation.
  • Integration Picker always rendered (removed hub_link_account_release flag).

• Dependencies

  • Added Relay toolchain and config: react-relay, relay-runtime, relay-compiler, babel-plugin-relay, vite-plugin-relay, graphql, and @babel/preset-typescript.

^{Written for commit fabe1cd. Summary will update on new commits.}

[claude]

Claude Code Review

This pull request is from a fork — automated review is disabled. A repository maintainer can comment @claude review to run a one-time review.

[Copilot]

Pull request overview

This PR adds a Relay + React Suspense minimal reproducible example (MRE) to the dev/ playground and introduces an optional debug flag that traces Integration Picker connection-state updates for easier OAuth troubleshooting.

Changes:

• Add Relay tooling/config (Relay compiler script, Relay config/schema, Vite Relay plugin, Babel config) and generated Relay artifacts for the MRE.
• Add a new SuspenseMRE dev tab and supporting Relay environment to reproduce/debug Suspense + token creation flows.
• Thread a new optional debug prop through StackOneHub → Hub → IntegrationPicker → useIntegrationPicker and trace setConnectionState calls when enabled.

Reviewed changes

Copilot reviewed 13 out of 17 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
vite.config.ts	Adds Relay Vite plugin and changes dev server port.
src/modules/integration-picker/hooks/useIntegrationPicker.ts	Adds debug prop and traces connection-state updates.
src/modules/integration-picker/IntegrationPicker.tsx	Adds debug prop wiring and removes feature-flag gating around content.
src/StackOneHub.tsx	Adds debug prop and forwards it into Hub.
src/Hub.tsx	Adds debug prop and forwards it into IntegrationPicker.
relay.config.json	Configures Relay compiler to use the dev/ schema and sources.
package.json	Adds Relay/Babel dependencies and a relay script.
package-lock.json	Locks newly added Relay/Babel dependencies.
dev/schema.graphql	Adds a local schema used by Relay compiler/MRE.
dev/main.tsx	Adds tab UI and Integration ID input; mounts SuspenseMRE.
dev/main.css	Adds styles for the new tab bar.
dev/SuspenseMRE.tsx	New Suspense + Relay MRE flow for reproducing OAuth issues.
dev/RelayEnvironment.ts	Adds a Relay environment with mocked provider query + real-ish session creation.
dev/__generated__/SuspenseMREProvidersQuery.graphql.ts	Relay generated artifact for the providers query.
dev/__generated__/SuspenseMRECreateSessionMutation.graphql.ts	Relay generated artifact for session creation mutation.
dev/__generated__/SuspenseMREConfirmAccountMutation.graphql.ts	Relay generated artifact for confirm-account mutation.
babel.config.json	Adds Babel preset config (supporting Relay transforms).

Files not reviewed (3)

• dev/generated/SuspenseMREConfirmAccountMutation.graphql.ts: Language not supported
• dev/generated/SuspenseMRECreateSessionMutation.graphql.ts: Language not supported
• dev/generated/SuspenseMREProvidersQuery.graphql.ts: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[cubic-dev-ai]

0 issues found across 10 files (changes from recent commits).

_{Requires human review: Large PR introducing Relay infrastructure and dev tools. Most importantly, it removes the 'hub_link_account_release' feature flag, which is a production logic change requiring human review.}

[cubic-dev-ai]

5 issues found across 17 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="dev/main.tsx">

<violation number="1" location="dev/main.tsx:52">
P2: `fetchToken` now uses `integrationId` but does not include it in `useCallback` dependencies, which can send stale `integration_id` values in token requests.</violation>
</file>

<file name="vite.config.ts">

<violation number="1" location="vite.config.ts:8">
P3: The default dev server port was changed to 3001, but repository docs still instruct developers to use localhost:3000. Keep the configured default aligned with docs or update the docs in the same PR.</violation>
</file>

<file name="package.json">

<violation number="1" location="package.json:53">
P2: Remove the self-dependency from `devDependencies`; a package should not depend on itself.</violation>
</file>

<file name="dev/RelayEnvironment.ts">

<violation number="1" location="dev/RelayEnvironment.ts:26">
P1: Custom agent: **Flag Security Vulnerabilities**

Enforce HTTPS for `VITE_API_URL` before making the request; current code allows insecure `http://` transport for session creation.</violation>

<violation number="2" location="dev/RelayEnvironment.ts:45">
P0: Custom agent: **Flag Security Vulnerabilities**

Do not use `VITE_*` client-side env vars for API keys. This exposes credentials in the browser and leaks secrets via Authorization headers; move this call behind a trusted backend.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P0: Custom agent: Flag Security Vulnerabilities

Do not use VITE_* client-side env vars for API keys. This exposes credentials in the browser and leaks secrets via Authorization headers; move this call behind a trusted backend.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At dev/RelayEnvironment.ts, line 45:

<comment>Do not use `VITE_*` client-side env vars for API keys. This exposes credentials in the browser and leaks secrets via Authorization headers; move this call behind a trusted backend.</comment>

<file context>
@@ -0,0 +1,87 @@
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                Authorization: `Basic ${encodedApiKey}`,
+            },
+            body: JSON.stringify(requestBody),
</file context>

[cubic-dev-ai]

P1: Custom agent: Flag Security Vulnerabilities

Enforce HTTPS for VITE_API_URL before making the request; current code allows insecure http:// transport for session creation.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At dev/RelayEnvironment.ts, line 26:

<comment>Enforce HTTPS for `VITE_API_URL` before making the request; current code allows insecure `http://` transport for session creation.</comment>

<file context>
@@ -0,0 +1,87 @@
+    }
+
+    if (operation.name === 'SuspenseMRECreateSessionMutation') {
+        const apiUrl = import.meta.env.VITE_API_URL ?? 'https://api.stackone.com';
+        const apiKey = import.meta.env.VITE_STACKONE_API_KEY ?? '';
+        const encodedApiKey = btoa(apiKey);
</file context>

[cubic-dev-ai]

P2: fetchToken now uses integrationId but does not include it in useCallback dependencies, which can send stale integration_id values in token requests.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At dev/main.tsx, line 52:

<comment>`fetchToken` now uses `integrationId` but does not include it in `useCallback` dependencies, which can send stale `integration_id` values in token requests.</comment>

<file context>
@@ -43,6 +49,7 @@ const HubWrapper: React.FC = () => {
                     origin_owner_name: originOwnerName,
                     origin_username: originUsername,
                     account_id: accountId !== '' && accountId != null ? accountId : undefined,
+                    integration_id: integrationId !== '' && integrationId != null ? integrationId : undefined,
                 },
             });
</file context>

[cubic-dev-ai]

P2: Remove the self-dependency from devDependencies; a package should not depend on itself.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At package.json, line 53:

<comment>Remove the self-dependency from `devDependencies`; a package should not depend on itself.</comment>

<file context>
@@ -42,23 +43,31 @@
         "@rollup/plugin-replace": "^6.0.2",
         "@rollup/plugin-terser": "^0.4.4",
         "@rollup/plugin-typescript": "^12.1.2",
+        "@stackone/hub": "^1.0.1",
         "@types/node": "^22.15.17",
         "@types/react": "^18.3.23",
</file context>

[cubic-dev-ai]

P3: The default dev server port was changed to 3001, but repository docs still instruct developers to use localhost:3000. Keep the configured default aligned with docs or update the docs in the same PR.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At vite.config.ts, line 8:

<comment>The default dev server port was changed to 3001, but repository docs still instruct developers to use localhost:3000. Keep the configured default aligned with docs or update the docs in the same PR.</comment>

<file context>
@@ -1,10 +1,11 @@
+    plugins: [relay, react()],
     server: {
-        port: 3000,
+        port: 3001,
         // hmr: true,
     },
</file context>