feat(app): add hosted session onboarding app

Author: jarrodwatts

app/.env.example

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_CHAIN_ENV=testnet
+NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=

app/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals"]
+}

app/README.md

@@ -0,0 +1,38 @@
+# AGW MCP Hosted Onboarding App
+
+This package hosts the browser-side onboarding flow for `agw-mcp init`.
+
+## Entry Point
+
+- Route: `/session/new`
+- File: `src/app/session/new/page.tsx`
+- Expected query parameters:
+  - `callback_url`: loopback callback URL (`http://localhost`, `http://127.0.0.1`, `http://[::1]`)
+  - `chain_id`: supported chains only (`11124`, `2741`)
+  - `signer`: session signer EVM address generated by the CLI
+
+If validation fails, the page renders a non-retryable parameter error and instructs the user to restart from CLI.
+
+## Callback Contract
+
+After successful session creation, the app redirects to `callback_url` with:
+
+- `session=<base64url(json-bundle)>`
+
+Bundle payload fields:
+
+- `accountAddress`
+- `chainId`
+- `expiresAt`
+- `sessionConfig`
+
+No signer private key or signer reference is ever returned in the redirect.
+
+## State Machine
+
+Wizard state is centralized in `src/stores/useSessionWizardStore.ts`:
+
+- `not_logged_in -> select_policy -> review_policy -> creating -> success`
+- Errors transition to `error` and retry goes back to `select_policy`.
+
+All transitions are invoked through explicit store actions (not direct step mutation in components).

app/global.d.ts

@@ -0,0 +1,17 @@
+declare module '*.svg' {
+  import * as React from 'react';
+  const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
+  export default ReactComponent;
+}
+
+declare global {
+  namespace NodeJS {
+    interface ProcessEnv {
+      NODE_ENV: string;
+      NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID?: string;
+      NEXT_PUBLIC_CHAIN_ENV?: string;
+    }
+  }
+}
+
+export {};

app/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

app/next.config.mjs

@@ -0,0 +1,78 @@
+/** @type {import('next').NextConfig} */
+import { dirname, relative } from 'path';
+import hash from 'string-hash';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const context = __dirname;
+
+const nextConfig = {
+  webpack(config) {
+    // Grab the existing rule that handles SVG imports
+    const fileLoaderRule = config.module.rules.find((rule) =>
+      rule.test?.test?.('.svg'),
+    );
+
+    // SVG Rules.
+    //
+    config.module.rules.push(
+      // Reapply the existing rule, but only for svg imports ending in ?url
+      {
+        ...fileLoaderRule,
+        test: /\.svg$/i,
+        resourceQuery: /url/, // *.svg?url
+      },
+      // Apply svgr to svgs and keep their IDs from clashing
+      {
+        test: /\.svg$/i,
+        issuer: {
+          and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
+        },
+        // fileLoaderRule.issuer,
+        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] },
+        use: ({ resource }) => ({
+          loader: '@svgr/webpack',
+          options: {
+            prettier: false,
+            svgo: true,
+            titleProp: true,
+            svgoConfig: {
+              plugins: [
+                {
+                  name: 'cleanupIds',
+                  params: {
+                    remove: true,
+                    minify: true,
+                  },
+                },
+                {
+                  name: 'prefixIds',
+                  params: {
+                    delim: '-',
+                    prefixClassNames: true,
+                    prefixIds: true,
+                    prefix: () => `svg${hash(relative(context, resource))}`,
+                  },
+                },
+                // {
+                //   name: 'preset-default',
+                //   params: {
+                //     overrides: { removeViewBox: false },
+                //   },
+                // },
+              ],
+            },
+          },
+        }),
+      },
+    );
+
+    // Modify the file loader rule to ignore *.svg, since we have it handled now.
+    fileLoaderRule.exclude = /\.svg$/i;
+
+    return config;
+  },
+};
+
+export default nextConfig;

app/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@abstract-foundation/agw-mcp-app",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev -p 3001",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "check-types": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "dependencies": {
+    "@abstract-foundation/agw-client": "1.10.0",
+    "@abstract-foundation/agw-react": "1.10.0",
+    "@tanstack/react-query": "^5.90.2",
+    "clsx": "^2.1.1",
+    "next": "14.2.13",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "sass": "^1.93.3",
+    "string-hash": "^1.1.3",
+    "viem": "^2.39.0",
+    "wagmi": "^2.19.4",
+    "zustand": "^4.5.7"
+  },
+  "devDependencies": {
+    "@svgr/webpack": "^8.1.0",
+    "@types/node": "^22.18.1",
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
+    "eslint": "^8.57.1",
+    "eslint-config-next": "14.2.13",
+    "typescript": "^5.9.2",
+    "vitest": "^3.2.4"
+  },
+  "packageManager": "pnpm@10.12.1"
+}