bmad-elsabro 1.0.0

package/eslint.config.mjs

@@ -0,0 +1,152 @@
+import js from '@eslint/js';
+import eslintConfigPrettier from 'eslint-config-prettier/flat';
+import nodePlugin from 'eslint-plugin-n';
+import unicorn from 'eslint-plugin-unicorn';
+import yml from 'eslint-plugin-yml';
+
+export default [
+  // Global ignores for files/folders that should not be linted
+  {
+    ignores: [
+      'dist/**',
+      'coverage/**',
+      '**/*.min.js',
+      'test/template-test-generator/**',
+      'test/template-test-generator/**/*.js',
+      'test/template-test-generator/**/*.md',
+      'test/fixtures/**',
+      'test/fixtures/**/*.yaml',
+      '_bmad/**',
+      '_bmad*/**',
+      // Build output
+      'build/**',
+      // Website uses ESM/Astro - separate linting ecosystem
+      'website/**',
+      // Gitignored patterns
+      'z*/**', // z-samples, z1, z2, etc.
+      '.claude/**',
+      '.codex/**',
+      '.github/chatmodes/**',
+      '.agent/**',
+      '.agentvibes/**',
+      '.kiro/**',
+      '.roo/**',
+      'test-project-install/**',
+      'sample-project/**',
+      'tools/template-test-generator/test-scenarios/**',
+      'src/modules/*/sub-modules/**',
+      '.bundler-temp/**',
+    ],
+  },
+
+  // Base JavaScript recommended rules
+  js.configs.recommended,
+
+  // Node.js rules
+  ...nodePlugin.configs['flat/mixed-esm-and-cjs'],
+
+  // Unicorn rules (modern best practices)
+  unicorn.configs.recommended,
+
+  // YAML linting
+  ...yml.configs['flat/recommended'],
+
+  // Place Prettier last to disable conflicting stylistic rules
+  eslintConfigPrettier,
+
+  // Project-specific tweaks
+  {
+    rules: {
+      // Allow console for CLI tools in this repo
+      'no-console': 'off',
+      // Enforce .yaml file extension for consistency
+      'yml/file-extension': [
+        'error',
+        {
+          extension: 'yaml',
+          caseSensitive: true,
+        },
+      ],
+      // Prefer double quotes in YAML wherever quoting is used, but allow the other to avoid escapes
+      'yml/quotes': [
+        'error',
+        {
+          prefer: 'double',
+          avoidEscape: true,
+        },
+      ],
+      // Relax some Unicorn rules that are too opinionated for this codebase
+      'unicorn/prevent-abbreviations': 'off',
+      'unicorn/no-null': 'off',
+    },
+  },
+
+  // CLI scripts under tools/** and test/**
+  {
+    files: ['tools/**/*.js', 'tools/**/*.mjs', 'test/**/*.js'],
+    rules: {
+      // Allow CommonJS patterns for Node CLI scripts
+      'unicorn/prefer-module': 'off',
+      'unicorn/import-style': 'off',
+      'unicorn/no-process-exit': 'off',
+      'n/no-process-exit': 'off',
+      'unicorn/no-await-expression-member': 'off',
+      'unicorn/prefer-top-level-await': 'off',
+      // Avoid failing CI on incidental unused vars in internal scripts
+      'no-unused-vars': 'off',
+      // Reduce style-only churn in internal tools
+      'unicorn/prefer-ternary': 'off',
+      'unicorn/filename-case': 'off',
+      'unicorn/no-array-reduce': 'off',
+      'unicorn/no-array-callback-reference': 'off',
+      'unicorn/consistent-function-scoping': 'off',
+      'n/no-extraneous-require': 'off',
+      'n/no-extraneous-import': 'off',
+      'n/no-unpublished-require': 'off',
+      'n/no-unpublished-import': 'off',
+      // Some scripts intentionally use globals provided at runtime
+      'no-undef': 'off',
+      // Additional relaxed rules for legacy/internal scripts
+      'no-useless-catch': 'off',
+      'unicorn/prefer-number-properties': 'off',
+      'no-unreachable': 'off',
+      'unicorn/text-encoding-identifier-case': 'off',
+    },
+  },
+
+  // Module installer scripts use CommonJS for compatibility
+  {
+    files: ['**/_module-installer/**/*.js'],
+    rules: {
+      // Allow CommonJS patterns for installer scripts
+      'unicorn/prefer-module': 'off',
+      'n/no-missing-require': 'off',
+      'n/no-unpublished-require': 'off',
+    },
+  },
+
+  // ESLint config file should not be checked for publish-related Node rules
+  {
+    files: ['eslint.config.mjs'],
+    rules: {
+      'n/no-unpublished-import': 'off',
+    },
+  },
+
+  // GitHub workflow files in this repo may use empty mapping values
+  {
+    files: ['.github/workflows/**/*.yaml'],
+    rules: {
+      'yml/no-empty-mapping-value': 'off',
+    },
+  },
+
+  // Other GitHub YAML files may intentionally use empty values and reserved filenames
+  {
+    files: ['.github/**/*.yaml'],
+    rules: {
+      'yml/no-empty-mapping-value': 'off',
+      'unicorn/filename-case': 'off',
+    },
+  },
+];

package/package.json

@@ -0,0 +1,162 @@
+{
+  "$schema": "https://json.schemastore.org/package.json",
+  "name": "bmad-elsabro",
+  "version": "1.0.0",
+  "description": "BMAD-ElSabro: Enhanced AI-driven agile development with Guided Mode, Auto-Parallelization, YOLO Mode, and Brownfield support",
+  "keywords": [
+    "agile",
+    "ai",
+    "orchestrator",
+    "development",
+    "methodology",
+    "agents",
+    "bmad",
+    "elsabro",
+    "guided-mode",
+    "parallel",
+    "yolo"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/goat1990/BMAD-elsabro.git"
+  },
+  "license": "MIT",
+  "author": "goat1990 (based on BMad Method by Brian Madison)",
+  "main": "tools/cli/bmad-cli.js",
+  "bin": {
+    "bmad": "tools/bmad-npx-wrapper.js",
+    "bmad-method": "tools/bmad-npx-wrapper.js",
+    "bmad-elsabro": "tools/bmad-npx-wrapper.js"
+  },
+  "scripts": {
+    "bmad:install": "node tools/cli/bmad-cli.js install",
+    "build:electron": "tsc -p electron/tsconfig.json",
+    "build:electron:watch": "tsc -p electron/tsconfig.json --watch",
+    "build:linux": "npm run build:renderer && npm run build:electron && electron-builder --linux",
+    "build:mac": "npm run build:renderer && npm run build:electron && electron-builder --mac",
+    "build:renderer": "vite build",
+    "build:win": "npm run build:renderer && npm run build:electron && electron-builder --win",
+    "bundle": "node tools/cli/bundlers/bundle-web.js all",
+    "electron:build": "npm run build:renderer && npm run build:electron && electron-builder",
+    "electron:dev": "concurrently -k \"cross-env NODE_ENV=development npm run build:electron:watch\" \"cross-env NODE_ENV=development vite\" \"wait-on http://localhost:5173 dist/electron/main.js && cross-env NODE_ENV=development electron .\"",
+    "electron:start": "cross-env NODE_ENV=development electron .",
+    "docs:build": "node tools/build-docs.js",
+    "docs:dev": "astro dev --root website",
+    "docs:fix-links": "node tools/fix-doc-links.js",
+    "docs:preview": "astro preview --root website",
+    "docs:validate-links": "node tools/validate-doc-links.js",
+    "flatten": "node tools/flattener/main.js",
+    "format:check": "prettier --check \"**/*.{js,cjs,mjs,json,yaml}\"",
+    "format:fix": "prettier --write \"**/*.{js,cjs,mjs,json,yaml}\"",
+    "format:fix:staged": "prettier --write",
+    "install:bmad": "node tools/cli/bmad-cli.js install",
+    "lint": "eslint . --ext .js,.cjs,.mjs,.yaml --max-warnings=0",
+    "lint:fix": "eslint . --ext .js,.cjs,.mjs,.yaml --fix",
+    "lint:md": "markdownlint-cli2 \"**/*.md\"",
+    "prepare": "husky",
+    "rebundle": "node tools/cli/bundlers/bundle-web.js rebundle",
+    "release:major": "gh workflow run \"Manual Release\" -f version_bump=major",
+    "release:minor": "gh workflow run \"Manual Release\" -f version_bump=minor",
+    "release:patch": "gh workflow run \"Manual Release\" -f version_bump=patch",
+    "release:watch": "gh run watch",
+    "test": "jest && npm run validate:schemas && npm run lint && npm run lint:md && npm run format:check",
+    "test:coverage": "jest --coverage",
+    "test:e2e": "playwright test",
+    "test:e2e:headed": "playwright test --headed",
+    "test:e2e:debug": "playwright test --debug",
+    "test:e2e:ui": "playwright test --ui",
+    "test:install": "jest test/test-installation-components",
+    "test:schemas": "jest test/test-agent-schema",
+    "validate:schemas": "node tools/validate-agent-schema.js"
+  },
+  "lint-staged": {
+    "*.{js,cjs,mjs}": [
+      "npm run lint:fix",
+      "npm run format:fix:staged"
+    ],
+    "*.yaml": [
+      "eslint --fix",
+      "npm run format:fix:staged"
+    ],
+    "*.json": [
+      "npm run format:fix:staged"
+    ],
+    "*.md": [
+      "markdownlint-cli2"
+    ]
+  },
+  "dependencies": {
+    "@clack/prompts": "^0.11.0",
+    "@kayvan/markdown-tree-parser": "^1.6.1",
+    "@monaco-editor/react": "^4.6.0",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "better-sqlite3": "^11.8.1",
+    "boxen": "^5.1.2",
+    "chalk": "^4.1.2",
+    "cli-table3": "^0.6.5",
+    "commander": "^14.0.0",
+    "csv-parse": "^6.1.0",
+    "figlet": "^1.8.0",
+    "fs-extra": "^11.3.0",
+    "glob": "^11.0.3",
+    "ignore": "^7.0.5",
+    "js-yaml": "^4.1.0",
+    "monaco-editor": "^0.55.1",
+    "ora": "^5.4.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "reactflow": "^11.11.4",
+    "semver": "^7.6.3",
+    "wrap-ansi": "^7.0.0",
+    "xml2js": "^0.6.2",
+    "yaml": "^2.7.0"
+  },
+  "devDependencies": {
+    "@astrojs/sitemap": "^3.6.0",
+    "@astrojs/starlight": "^0.37.0",
+    "@eslint/js": "^9.33.0",
+    "@playwright/test": "^1.58.0",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/better-sqlite3": "^7.6.12",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.10.5",
+    "@vitejs/plugin-react": "^5.1.2",
+    "archiver": "^7.0.1",
+    "astro": "^5.16.0",
+    "autoprefixer": "^10.4.23",
+    "c8": "^10.1.3",
+    "concurrently": "^9.2.1",
+    "cross-env": "^10.1.0",
+    "electron": "^33.3.1",
+    "electron-builder": "^25.1.8",
+    "eslint": "^9.33.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-n": "^17.21.3",
+    "eslint-plugin-unicorn": "^60.0.0",
+    "eslint-plugin-yml": "^1.18.0",
+    "husky": "^9.1.7",
+    "jest": "^30.0.4",
+    "lint-staged": "^16.1.1",
+    "markdownlint-cli2": "^0.19.1",
+    "playwright": "^1.58.0",
+    "postcss": "^8.5.6",
+    "prettier": "^3.7.4",
+    "prettier-plugin-packagejson": "^2.5.19",
+    "sharp": "^0.33.5",
+    "tailwindcss": "^4.1.18",
+    "ts-jest": "^29.2.5",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.7.3",
+    "vite": "^7.3.1",
+    "wait-on": "^9.0.3",
+    "yaml-eslint-parser": "^1.2.3",
+    "yaml-lint": "^1.7.0"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/prettier.config.mjs

@@ -0,0 +1,32 @@
+export default {
+  $schema: 'https://json.schemastore.org/prettierrc',
+  printWidth: 140,
+  tabWidth: 2,
+  useTabs: false,
+  semi: true,
+  singleQuote: true,
+  trailingComma: 'all',
+  bracketSpacing: true,
+  arrowParens: 'always',
+  endOfLine: 'lf',
+  proseWrap: 'preserve',
+  overrides: [
+    {
+      files: ['*.md'],
+      options: { proseWrap: 'preserve' },
+    },
+    {
+      files: ['*.yaml'],
+      options: { singleQuote: false },
+    },
+    {
+      files: ['*.json', '*.jsonc'],
+      options: { singleQuote: false },
+    },
+    {
+      files: ['*.cjs'],
+      options: { parser: 'babel' },
+    },
+  ],
+  plugins: ['prettier-plugin-packagejson'],
+};

package/public/monaco-workers/index.js

@@ -0,0 +1,21 @@
+/**
+ * Monaco Editor Worker Loader for Electron
+ *
+ * This file provides a fallback worker loading mechanism for Monaco Editor
+ * in Electron environments. It helps resolve worker files from the local
+ * file system instead of relying on CDN or web workers.
+ *
+ * Usage:
+ * - Workers are loaded from local node_modules during build
+ * - Vite will copy Monaco worker files to the dist directory
+ * - This file ensures proper path resolution in Electron's file:// protocol
+ */
+
+// This file serves as a placeholder for Monaco worker configuration
+// The actual worker loading is handled by monaco-loader.ts via MonacoEnvironment.getWorkerUrl
+// and Vite's build configuration which copies worker files from node_modules
+
+export default {
+  initialized: true,
+  message: 'Monaco workers configured for offline Electron usage',
+};

package/renderer/App.tsx

@@ -0,0 +1,311 @@
+import React, { useState, useEffect } from 'react';
+import Sidebar from './components/Sidebar';
+import { ThemeProvider, useThemeContext } from './context/ThemeContext';
+import NotificationCenter from './components/NotificationCenter';
+import { useNotifications } from './hooks/useNotifications';
+import TokenMonitor from './components/TokenMonitor';
+import { useTokenTracking } from './hooks/useTokenTracking';
+import OnboardingWizard, { OnboardingData } from './components/OnboardingWizard';
+
+/**
+ * AppContent Component
+ *
+ * Main application content that uses theme context.
+ * Separated from App to allow ThemeProvider to wrap it.
+ */
+const AppContent: React.FC = () => {
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [showOnboarding, setShowOnboarding] = useState(false);
+  const [isCheckingOnboarding, setIsCheckingOnboarding] = useState(true);
+  const { theme, toggleTheme, setTheme } = useThemeContext();
+  const { notifications, success, error, warning, info, dismiss } = useNotifications();
+  const { trackUsage, startSession, endSession, session } = useTokenTracking();
+
+  /**
+   * Check if user has completed onboarding
+   */
+  useEffect(() => {
+    const hasCompletedOnboarding = localStorage.getItem('bmad-onboarding-completed');
+    if (!hasCompletedOnboarding) {
+      setShowOnboarding(true);
+    }
+    setIsCheckingOnboarding(false);
+  }, []);
+
+  /**
+   * Handle onboarding completion
+   */
+  const handleOnboardingComplete = (data: OnboardingData) => {
+    // Apply user preferences
+    if (data.preferences.theme !== 'system') {
+      setTheme(data.preferences.theme);
+    }
+
+    // Save preferences to localStorage
+    localStorage.setItem('bmad-preferences', JSON.stringify(data.preferences));
+
+    // If project was created, save it (in a real app, this would create the project)
+    if (data.project) {
+      success(`Project "${data.project.name}" created successfully!`, {
+        description: 'You can now start working on your project.',
+      });
+    } else {
+      success('Welcome to BMAD Studio!', {
+        description: 'Explore the dashboard to get started.',
+      });
+    }
+
+    // Mark onboarding as completed
+    localStorage.setItem('bmad-onboarding-completed', 'true');
+    setShowOnboarding(false);
+  };
+
+  // Show loading state while checking onboarding status
+  if (isCheckingOnboarding) {
+    return (
+      <div className="min-h-screen bg-white dark:bg-gray-900 flex items-center justify-center">
+        <div className="text-gray-600 dark:text-gray-400">Loading...</div>
+      </div>
+    );
+  }
+
+  // Show onboarding wizard on first launch
+  if (showOnboarding) {
+    return <OnboardingWizard onComplete={handleOnboardingComplete} />;
+  }
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
+      {/* Sidebar Navigation */}
+      <Sidebar
+        defaultCollapsed={false}
+        onCollapseChange={setSidebarCollapsed}
+        theme={theme}
+      />
+
+      {/* Main Content Area - Shifts based on sidebar state */}
+      <div
+        className="transition-all duration-300"
+        style={{
+          marginLeft: sidebarCollapsed ? '64px' : '240px',
+        }}
+      >
+        <div className="container mx-auto px-4 py-8">
+          <header className="mb-8 flex justify-between items-start">
+            <div>
+              <h1 className="text-4xl font-bold mb-2">BMAD Studio</h1>
+              <p className="text-gray-600 dark:text-gray-400">
+                Breakthrough Method of Agile AI-driven Development
+              </p>
+            </div>
+
+            {/* Theme Toggle Button */}
+            <button
+              onClick={toggleTheme}
+              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-900 dark:text-white rounded-md transition-colors flex items-center gap-2"
+              aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
+              title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
+            >
+              <span role="img" aria-hidden="true">
+                {theme === 'dark' ? '☀️' : '🌙'}
+              </span>
+              <span className="hidden sm:inline">
+                {theme === 'dark' ? 'Light' : 'Dark'} Mode
+              </span>
+            </button>
+          </header>
+
+          <main>
+            <div className="bg-gray-100 dark:bg-gray-800 rounded-lg p-6 shadow-md">
+              <h2 className="text-2xl font-semibold mb-4">Welcome to BMAD Studio</h2>
+              <p className="mb-4">
+                Your professional desktop application for AI-driven development workflows.
+              </p>
+              <div className="flex gap-4">
+                <button className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors">
+                  Get Started
+                </button>
+                <button className="px-4 py-2 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-900 dark:text-white rounded-md transition-colors">
+                  Learn More
+                </button>
+              </div>
+            </div>
+
+            {/* Notification Demo Section */}
+            <div className="mt-8 bg-gray-100 dark:bg-gray-800 rounded-lg p-6 shadow-md">
+              <h2 className="text-2xl font-semibold mb-4">Notification System Demo</h2>
+              <p className="mb-4 text-gray-600 dark:text-gray-400">
+                Test the notification system with different types of notifications:
+              </p>
+              <div className="flex flex-wrap gap-3">
+                <button
+                  onClick={() => success('Operation completed successfully!')}
+                  className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md transition-colors"
+                >
+                  ✓ Success
+                </button>
+                <button
+                  onClick={() => error('An error occurred. Please try again.', {
+                    description: 'This error will not auto-dismiss.'
+                  })}
+                  className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-md transition-colors"
+                >
+                  ✕ Error
+                </button>
+                <button
+                  onClick={() => warning('This action cannot be undone!', {
+                    description: 'Please confirm before proceeding.'
+                  })}
+                  className="px-4 py-2 bg-yellow-600 hover:bg-yellow-700 text-white rounded-md transition-colors"
+                >
+                  ⚠ Warning
+                </button>
+                <button
+                  onClick={() => info('New update available', {
+                    description: 'Version 1.1.0 is ready to install.',
+                    action: {
+                      label: 'Update Now',
+                      onClick: () => {
+                        success('Update started!');
+                      }
+                    }
+                  })}
+                  className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors"
+                >
+                  ℹ Info with Action
+                </button>
+                <button
+                  onClick={() => {
+                    success('First notification');
+                    setTimeout(() => warning('Second notification'), 200);
+                    setTimeout(() => info('Third notification'), 400);
+                  }}
+                  className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-md transition-colors"
+                >
+                  🔔 Multiple Notifications
+                </button>
+              </div>
+            </div>
+
+            {/* Token Tracking Demo Section */}
+            <div className="mt-8 bg-gray-100 dark:bg-gray-800 rounded-lg p-6 shadow-md">
+              <h2 className="text-2xl font-semibold mb-4">Token Tracking Demo</h2>
+              <p className="mb-4 text-gray-600 dark:text-gray-400">
+                Test the token tracking system with simulated AI interactions:
+              </p>
+              <div className="flex flex-wrap gap-3">
+                <button
+                  onClick={async () => {
+                    if (!session) {
+                      await startSession('demo-workflow');
+                      success('Session started!');
+                    } else {
+                      success('Session already active');
+                    }
+                  }}
+                  className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md transition-colors"
+                >
+                  ▶️ Start Session
+                </button>
+                <button
+                  onClick={async () => {
+                    await trackUsage({
+                      tokensUsed: 150,
+                      operationType: 'chat',
+                      agentName: 'demo-agent',
+                      model: 'claude-3-sonnet',
+                      inputTokens: 100,
+                      outputTokens: 50,
+                    });
+                    info('Tracked 150 tokens');
+                  }}
+                  className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors"
+                >
+                  💬 Chat (150 tokens)
+                </button>
+                <button
+                  onClick={async () => {
+                    await trackUsage({
+                      tokensUsed: 500,
+                      operationType: 'code-generation',
+                      agentName: 'demo-agent',
+                      model: 'claude-3-sonnet',
+                      inputTokens: 200,
+                      outputTokens: 300,
+                    });
+                    info('Tracked 500 tokens');
+                  }}
+                  className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-md transition-colors"
+                >
+                  ⚙️ Code Gen (500 tokens)
+                </button>
+                <button
+                  onClick={async () => {
+                    await trackUsage({
+                      tokensUsed: 1000,
+                      operationType: 'analysis',
+                      agentName: 'demo-agent',
+                      model: 'claude-3-opus',
+                      inputTokens: 600,
+                      outputTokens: 400,
+                    });
+                    warning('Tracked 1000 tokens - large operation');
+                  }}
+                  className="px-4 py-2 bg-orange-600 hover:bg-orange-700 text-white rounded-md transition-colors"
+                >
+                  📊 Analysis (1000 tokens)
+                </button>
+                <button
+                  onClick={async () => {
+                    const result = await endSession();
+                    if (result) {
+                      success(`Session ended! Total: ${result.totalTokens} tokens`);
+                    } else {
+                      warning('No active session to end');
+                    }
+                  }}
+                  className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-md transition-colors"
+                >
+                  ⏹️ End Session
+                </button>
+              </div>
+              {session && (
+                <div className="mt-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded border border-blue-200 dark:border-blue-800">
+                  <p className="text-sm text-blue-800 dark:text-blue-200">
+                    <strong>Active Session:</strong> {session.sessionId} · {session.totalTokens} tokens
+                  </p>
+                </div>
+              )}
+            </div>
+          </main>
+        </div>
+      </div>
+
+      {/* Notification Center - Fixed Position */}
+      <NotificationCenter
+        notifications={notifications}
+        onDismiss={dismiss}
+        position="top-right"
+      />
+
+      {/* Token Monitor - Fixed Position */}
+      <TokenMonitor position="bottom-right" />
+    </div>
+  );
+};
+
+/**
+ * App Component
+ *
+ * Root application component with ThemeProvider wrapper.
+ * Provides theme context to all child components.
+ */
+const App: React.FC = () => {
+  return (
+    <ThemeProvider>
+      <AppContent />
+    </ThemeProvider>
+  );
+};
+
+export default App;