sfcc-dev-mcp 1.0.15 → 1.0.19

package/docs-site/App.tsx

@@ -1,103 +0,0 @@
-import React from 'react';
-import type { RouteRecord } from 'vite-react-ssg';
-import { Navigate } from 'react-router-dom';
-import Layout from './components/Layout';
-import HomePage from './pages/HomePage';
-import ConfigurationPage from './pages/ConfigurationPage';
-import AIInterfacesPage from './pages/AIInterfacesPage';
-import FeaturesPage from './pages/FeaturesPage';
-import ToolsPage from './pages/ToolsPage';
-import ExamplesPage from './pages/ExamplesPage';
-import SecurityPage from './pages/SecurityPage';
-import DevelopmentPage from './pages/DevelopmentPage';
-import TroubleshootingPage from './pages/TroubleshootingPage';
-
-export const routes: RouteRecord[] = [
-  {
-    path: '/',
-    element: <Layout />,
-    children: [
-      {
-        index: true,
-        element: <HomePage />,
-      },
-      // Routes with trailing slashes
-      {
-        path: 'configuration/',
-        element: <ConfigurationPage />,
-      },
-      {
-        path: 'ai-interfaces/',
-        element: <AIInterfacesPage />,
-      },
-      {
-        path: 'features/',
-        element: <FeaturesPage />,
-      },
-      {
-        path: 'tools/',
-        element: <ToolsPage />,
-      },
-      {
-        path: 'examples/',
-        element: <ExamplesPage />,
-      },
-      {
-        path: 'security/',
-        element: <SecurityPage />,
-      },
-      {
-        path: 'development/',
-        element: <DevelopmentPage />,
-      },
-      {
-        path: 'troubleshooting/',
-        element: <TroubleshootingPage />,
-      },
-      // Redirects from non-trailing slash URLs to trailing slash URLs
-      {
-        path: 'configuration',
-        element: <Navigate to="/configuration/" replace />,
-      },
-      {
-        path: 'ai-interfaces',
-        element: <Navigate to="/ai-interfaces/" replace />,
-      },
-      {
-        path: 'features',
-        element: <Navigate to="/features/" replace />,
-      },
-      {
-        path: 'tools',
-        element: <Navigate to="/tools/" replace />,
-      },
-      {
-        path: 'examples',
-        element: <Navigate to="/examples/" replace />,
-      },
-      {
-        path: 'security',
-        element: <Navigate to="/security/" replace />,
-      },
-      {
-        path: 'development',
-        element: <Navigate to="/development/" replace />,
-      },
-      {
-        path: 'troubleshooting',
-        element: <Navigate to="/troubleshooting/" replace />,
-      },
-      // Redirect old installation path to AI interfaces
-      {
-        path: 'installation',
-        element: <Navigate to="/ai-interfaces/" replace />,
-      },
-      {
-        path: 'installation/',
-        element: <Navigate to="/ai-interfaces/" replace />,
-      },
-    ],
-  },
-];
-
-export default routes;

package/docs-site/README.md

@@ -1,113 +0,0 @@
-# SFCC Development MCP Server Documentation Site
-
-A modern React-based documentation site for the SFCC Development MCP Server built with Vite and TailwindCSS.
-
-## Features
-
-- **React 19** with TypeScript
-- **Vite** for fast development and building
-- **TailwindCSS** for styling (locally configured)
-- **React Router** with Hash routing for GitHub Pages compatibility
-- **Responsive design** with mobile-first approach
-
-## Development
-
-### Prerequisites
-
-- Node.js 18+
-- npm
-
-### Setup
-
-1. Install dependencies:
-   ```bash
-   npm install
-   ```
-
-2. Start development server:
-   ```bash
-   npm run dev
-   ```
-
-The site will be available at `http://localhost:5173/`
-
-### Building for Production
-
-```bash
-npm run build
-```
-
-This will:
-1. Generate optimized TailwindCSS from used classes
-2. Build the React application with Vite
-3. Output production files to `dist/`
-
-### TailwindCSS Configuration
-
-TailwindCSS is configured locally with:
-
-- **Config**: `tailwind.config.js`
-- **PostCSS**: `postcss.config.js`  
-- **Input CSS**: `src/styles/input.css`
-- **Output CSS**: `public/index.css` (generated)
-
-### Available Scripts
-
-- `npm run dev` - Start development server with CSS generation
-- `npm run build` - Build for production (includes CSS generation)
-- `npm run preview` - Preview production build
-- `npm run build:css` - Generate TailwindCSS once
-- `npm run build:css:watch` - Generate TailwindCSS in watch mode
-
-### File Structure
-
-```
-docs-site-v2/
-├── public/
-│   └── index.css          # Generated TailwindCSS (gitignored)
-├── src/
-│   └── styles/
-│       └── input.css      # TailwindCSS source
-├── components/            # React components
-├── pages/                 # Page components
-├── index.html            # Main HTML template
-├── index.tsx             # React application entry
-├── tailwind.config.js    # TailwindCSS configuration
-├── postcss.config.js     # PostCSS configuration
-├── vite.config.ts        # Vite configuration
-└── package.json          # Dependencies and scripts
-```
-
-## Deployment
-
-### GitHub Pages
-
-The site is automatically deployed to GitHub Pages when changes are pushed to the `main` branch in the `docs-site-v2/` directory.
-
-**Deployment Process:**
-1. GitHub Actions workflow triggers on push to `main`
-2. Node.js 18 environment is set up
-3. Dependencies are installed with `npm ci`
-4. Site is built with `NODE_ENV=production npm run build`
-5. Generated `dist/` folder is deployed to GitHub Pages
-
-**Configuration:**
-- Base path: `/` (configured for subdomain deployment)
-- Build artifacts: `dist/` directory
-- Workflow: `.github/workflows/deploy-docs.yml`
-
-### Manual Deployment
-
-For other static hosting services, use:
-
-```bash
-npm run build
-```
-
-The `dist/` folder contains all files needed for deployment to any static hosting service.
-
-## Notes
-
-- The generated CSS file (`public/index.css`) is excluded from version control
-- TailwindCSS is configured to only include classes actually used in the project
-- CSS is automatically generated before development and build processes

package/docs-site/components/Badge.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-
-interface BadgeProps {
-  children: React.ReactNode;
-  variant?: 'success' | 'warning' | 'error' | 'info' | 'default';
-  size?: 'sm' | 'md';
-  className?: string;
-}
-
-const variantStyles = {
-  success: 'bg-green-100 text-green-800 border-green-200',
-  warning: 'bg-yellow-100 text-yellow-800 border-yellow-200',
-  error: 'bg-red-100 text-red-800 border-red-200',
-  info: 'bg-blue-100 text-blue-800 border-blue-200',
-  default: 'bg-gray-100 text-gray-800 border-gray-200'
-};
-
-const sizeStyles = {
-  sm: 'text-xs px-2 py-1',
-  md: 'text-sm px-3 py-1'
-};
-
-export const Badge: React.FC<BadgeProps> = ({ 
-  children, 
-  variant = 'default', 
-  size = 'md',
-  className = ''
-}) => {
-  return (
-    <span 
-      className={`inline-flex items-center font-medium rounded-full border ${variantStyles[variant]} ${sizeStyles[size]} ${className}`}
-    >
-      {children}
-    </span>
-  );
-};
-
-export default Badge;

package/docs-site/components/BreadcrumbSchema.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-
-interface BreadcrumbItem {
-  name: string;
-  url: string;
-}
-
-interface BreadcrumbSchemaProps {
-  items: BreadcrumbItem[];
-}
-
-const BreadcrumbSchema: React.FC<BreadcrumbSchemaProps> = ({ items }) => {
-  const baseUrl = 'https://sfcc-mcp-dev.rhino-inquisitor.com';
-  
-  const breadcrumbList = {
-    "@context": "https://schema.org",
-    "@type": "BreadcrumbList",
-    "itemListElement": items.map((item, index) => ({
-      "@type": "ListItem",
-      "position": index + 1,
-      "name": item.name,
-      "item": item.url.startsWith('http') ? item.url : `${baseUrl}${item.url}`
-    }))
-  };
-
-  return (
-    <script 
-      type="application/ld+json" 
-      dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbList) }} 
-    />
-  );
-};
-
-export default BreadcrumbSchema;

package/docs-site/components/CodeBlock.tsx

@@ -1,132 +0,0 @@
-
-import React, { useState, useEffect, useRef } from 'react';
-import { CopyIcon, CheckIcon } from './icons';
-
-// Dynamic Prism import to prevent SSR issues
-let Prism: any = null;
-
-interface CodeBlockProps {
-  code: string;
-  language: string;
-}
-
-const CodeBlock: React.FC<CodeBlockProps> = ({ code, language }) => {
-  const [copied, setCopied] = useState(false);
-  const [isMounted, setIsMounted] = useState(false);
-  const codeRef = useRef<HTMLElement>(null);
-
-  const handleCopy = () => {
-    if (typeof window !== 'undefined' && navigator.clipboard) {
-      navigator.clipboard.writeText(code.trim());
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    }
-  };
-
-  // Map common language aliases to Prism language identifiers
-  const getPrismLanguage = (lang: string): string => {
-    const langMap: { [key: string]: string } = {
-      'js': 'javascript',
-      'ts': 'typescript',
-      'jsx': 'jsx',
-      'tsx': 'tsx',
-      'json': 'json',
-      'yml': 'yaml',
-      'yaml': 'yaml',
-      'sh': 'bash',
-      'shell': 'bash',
-      'bash': 'bash',
-      'zsh': 'bash',
-      'md': 'markdown',
-      'markdown': 'markdown',
-      'css': 'css',
-      'scss': 'scss',
-      'sass': 'scss',
-    };
-    return langMap[lang.toLowerCase()] || lang.toLowerCase();
-  };
-
-  const prismLanguage = getPrismLanguage(language);
-
-  // Apply syntax highlighting after component mounts (client-side only)
-  useEffect(() => {
-    setIsMounted(true);
-    
-    // Load Prism dynamically on client side only
-    const loadPrismAndHighlight = async () => {
-      if (typeof window !== 'undefined' && !Prism) {
-        try {
-          // Dynamically import Prism and language components
-          const prismModule = await import('prismjs');
-          await import('prismjs/components/prism-javascript');
-          await import('prismjs/components/prism-typescript');
-          await import('prismjs/components/prism-jsx');
-          await import('prismjs/components/prism-tsx');
-          await import('prismjs/components/prism-json');
-          await import('prismjs/components/prism-yaml');
-          await import('prismjs/components/prism-bash');
-          await import('prismjs/components/prism-shell-session');
-          await import('prismjs/components/prism-markdown');
-          await import('prismjs/components/prism-css');
-          await import('prismjs/components/prism-scss');
-          
-          Prism = prismModule.default;
-        } catch (error) {
-          console.warn('Failed to load Prism:', error);
-          return;
-        }
-      }
-      
-      // Apply highlighting after a small delay to ensure hydration is complete
-      setTimeout(() => {
-        if (Prism && codeRef.current && Prism.languages[prismLanguage]) {
-          const highlighted = Prism.highlight(code.trim(), Prism.languages[prismLanguage], prismLanguage);
-          codeRef.current.innerHTML = highlighted;
-        }
-      }, 100);
-    };
-
-    loadPrismAndHighlight();
-  }, [code, language, prismLanguage]);
-
-  return (
-    <div className="my-6 rounded-xl border border-slate-200 bg-slate-50 not-prose overflow-hidden max-w-full">
-      <div className="flex justify-between items-center px-3 sm:px-4 py-2 border-b border-slate-200">
-        <span className="text-xs font-semibold text-slate-500 uppercase truncate">{language}</span>
-        <button
-          onClick={handleCopy}
-          className="flex items-center gap-1 sm:gap-1.5 text-xs sm:text-sm text-slate-500 hover:text-slate-800 transition-colors flex-shrink-0 ml-2"
-        >
-          {copied ? (
-            <>
-              <CheckIcon className="w-4 h-4 text-green-500" />
-              <span className="hidden xs:inline">Copied!</span>
-            </>
-          ) : (
-            <>
-              <CopyIcon className="w-4 h-4" />
-              <span className="hidden xs:inline">Copy</span>
-            </>
-          )}
-        </button>
-      </div>
-      <div className="overflow-x-auto max-w-full">
-        <pre className="p-3 sm:p-4 text-xs sm:text-sm min-w-0 m-0">
-          <code 
-            ref={codeRef}
-            className={`block whitespace-pre language-${prismLanguage}`}
-          >
-            {code.trim()}
-          </code>
-        </pre>
-      </div>
-    </div>
-  );
-};
-
-export const InlineCode: React.FC<{children: React.ReactNode}> = ({ children }) => (
-    <code className="text-sm font-mono bg-rose-100 text-rose-800 rounded-md px-1 py-0.5">{children}</code>
-);
-
-
-export default CodeBlock;

package/docs-site/components/Collapsible.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-
-interface CollapsibleProps {
-  title: string;
-  defaultOpen?: boolean;
-  children: React.ReactNode;
-  intent?: 'info' | 'warn' | 'danger' | 'plain';
-  id?: string;
-  className?: string;
-}
-
-const intentStyles: Record<string,string> = {
-  info: 'border-blue-200 bg-blue-50',
-  warn: 'border-yellow-200 bg-yellow-50',
-  danger: 'border-red-200 bg-red-50',
-  plain: 'border-gray-200 bg-white'
-};
-
-export const Collapsible: React.FC<CollapsibleProps> = ({ title, defaultOpen=false, children, intent='plain', id, className = '' }) => {
-  const [open, setOpen] = React.useState(defaultOpen);
-  return (
-    <div id={id} className={`rounded-xl border ${intentStyles[intent]} overflow-hidden ${className}`}> 
-      <button
-        onClick={() => setOpen(o=>!o)}
-        className="w-full flex items-center justify-between px-5 py-3 text-left text-sm font-semibold text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
-        aria-expanded={open}
-      >
-        <span>{title}</span>
-        <span className="ml-4 text-gray-500">{open ? '−' : '+'}</span>
-      </button>
-      {open && (
-        <div className="px-5 pb-5 pt-1 text-sm text-gray-700 space-y-4 animate-fade-in">
-          {children}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default Collapsible;

package/docs-site/components/ConfigBuilder.tsx

@@ -1,118 +0,0 @@
-import React from 'react';
-import CodeBlock from './CodeBlock';
-
-interface FieldState {
-  hostname: string;
-  username: string;
-  password: string;
-  clientId: string;
-  clientSecret: string;
-  codeVersion: string;
-  siteId: string;
-  minimal: boolean;
-}
-
-const initial: FieldState = {
-  hostname: 'dev01-sandbox.us01.dx.commercecloud.salesforce.com',
-  username: 'your-username',
-  password: 'your-password',
-  clientId: '',
-  clientSecret: '',
-  codeVersion: 'version1',
-  siteId: 'RefArch',
-  minimal: true
-};
-
-const labelCls = 'block text-xs font-semibold uppercase tracking-wide text-gray-600 mb-1';
-const inputCls = 'w-full rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 px-3 py-2 text-sm bg-white';
-
-const pillBase = 'px-3 py-1.5 rounded-full text-xs font-medium transition border flex items-center gap-1';
-
-export const ConfigBuilder: React.FC = () => {
-  const [state, setState] = React.useState<FieldState>(initial);
-
-  const toggleMinimal = () => setState(s => ({ ...s, minimal: !s.minimal }));
-
-  const json = React.useMemo(() => {
-    const base: Record<string, string> = {
-      hostname: state.hostname,
-      username: state.username,
-      password: state.password
-    };
-    if (!state.minimal) {
-      if (state.clientId) base['client-id'] = state.clientId;
-      if (state.clientSecret) base['client-secret'] = state.clientSecret;
-      if (state.codeVersion) base['code-version'] = state.codeVersion;
-      if (state.siteId) base['site-id'] = state.siteId;
-    }
-    return JSON.stringify(base, null, 2);
-  }, [state]);
-
-  const update = (k: keyof FieldState) => (e: React.ChangeEvent<HTMLInputElement>) => setState(s => ({ ...s, [k]: e.target.value }));
-
-  return (
-    <div className="space-y-6">
-      <div className="flex flex-wrap gap-3 items-center">
-        <button onClick={toggleMinimal} className={`${pillBase} ${state.minimal ? 'bg-blue-600 text-white border-blue-600 shadow' : 'bg-white text-gray-700 border-gray-200 hover:border-blue-400'}`}
-          aria-pressed={state.minimal}>
-          {state.minimal ? 'Minimal Config' : 'Show Minimal'}
-        </button>
-        <button onClick={toggleMinimal} className={`${pillBase} ${!state.minimal ? 'bg-purple-600 text-white border-purple-600 shadow' : 'bg-white text-gray-700 border-gray-200 hover:border-purple-400'}`}
-          aria-pressed={!state.minimal}>
-          {!state.minimal ? 'Advanced Config' : 'Show Advanced'}
-        </button>
-        <span className="text-xs text-gray-500">Toggle to include OAuth + code/site fields</span>
-      </div>
-
-      <div className="grid md:grid-cols-2 gap-6">
-        <div className="space-y-4">
-          <div>
-            <label className={labelCls}>Hostname *</label>
-            <input value={state.hostname} onChange={update('hostname')} className={inputCls} />
-          </div>
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <label className={labelCls}>Username *</label>
-              <input value={state.username} onChange={update('username')} className={inputCls} />
-            </div>
-            <div>
-              <label className={labelCls}>Password *</label>
-              <input type="password" value={state.password} onChange={update('password')} className={inputCls} />
-            </div>
-          </div>
-          {!state.minimal && (
-            <>
-              <div className="grid grid-cols-2 gap-4">
-                <div>
-                  <label className={labelCls}>Client ID</label>
-                  <input value={state.clientId} onChange={update('clientId')} className={inputCls} />
-                </div>
-                <div>
-                  <label className={labelCls}>Client Secret</label>
-                  <input type="password" value={state.clientSecret} onChange={update('clientSecret')} className={inputCls} />
-                </div>
-              </div>
-              <div className="grid grid-cols-2 gap-4">
-                <div>
-                  <label className={labelCls}>Code Version</label>
-                  <input value={state.codeVersion} onChange={update('codeVersion')} className={inputCls} />
-                </div>
-                <div>
-                  <label className={labelCls}>Site ID</label>
-                  <input value={state.siteId} onChange={update('siteId')} className={inputCls} />
-                </div>
-              </div>
-            </>
-          )}
-          <p className="text-[11px] text-gray-500">* Required for WebDAV + log tools. Client credentials unlock Data API features.</p>
-        </div>
-        <div>
-          <CodeBlock language="json" code={json} />
-          <p className="text-xs text-gray-500 -mt-4">Copy & save as <code className="font-mono">dw.json</code> then run with <code className="font-mono">--dw-json ./dw.json</code></p>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ConfigBuilder;

package/docs-site/components/ConfigHero.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { H1, PageSubtitle } from './Typography';
-
-export const ConfigHero: React.FC = () => {
-  return (
-    <div className="text-center mb-14">
-      <div className="inline-flex items-center gap-2 bg-gradient-to-r from-blue-600 to-purple-600 text-white px-4 py-2 rounded-full text-sm font-medium mb-6">
-        <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fillRule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clipRule="evenodd"/></svg>
-        Configuration Guide
-      </div>
-      <H1 id="configuration" className="text-5xl md:text-6xl font-extrabold bg-gradient-to-r from-gray-900 via-blue-900 to-purple-900 bg-clip-text text-transparent mb-6">Configure in Minutes</H1>
-      <PageSubtitle className="text-xl md:text-2xl text-gray-600 max-w-4xl mx-auto leading-relaxed">
-        Start zero-config. Add credentials only when you need log analysis, system object exploration & code version control.
-      </PageSubtitle>
-    </div>
-  );
-};
-
-export default ConfigHero;

package/docs-site/components/ConfigModeTabs.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import CodeBlock, { InlineCode } from './CodeBlock';
-
-export const ConfigModeTabs: React.FC = () => {
-  const [active, setActive] = React.useState<'docs' | 'full' | 'env'>('docs');
-  const tabBase = 'px-5 py-2 rounded-full text-xs md:text-sm font-medium transition border';
-  return (
-    <div>
-      <div role="tablist" aria-label="Configuration modes" className="flex flex-wrap gap-3 mb-8">
-        <button aria-selected={active==='docs'} onClick={()=>setActive('docs')} className={`${tabBase} ${active==='docs' ? 'bg-green-600 text-white border-green-600 shadow' : 'bg-white text-gray-700 border-gray-200 hover:border-green-400 hover:text-green-600'}`}>Docs Only</button>
-        <button aria-selected={active==='full'} onClick={()=>setActive('full')} className={`${tabBase} ${active==='full' ? 'bg-blue-600 text-white border-blue-600 shadow' : 'bg-white text-gray-700 border-gray-200 hover:border-blue-400 hover:text-blue-600'}`}>Full Mode</button>
-        <button aria-selected={active==='env'} onClick={()=>setActive('env')} className={`${tabBase} ${active==='env' ? 'bg-purple-600 text-white border-purple-600 shadow' : 'bg-white text-gray-700 border-gray-200 hover:border-purple-400 hover:text-purple-600'}`}>Env Vars</button>
-      </div>
-      {active==='docs' && (
-        <div role="tabpanel" className="space-y-4 animate-fade-in">
-          <p className="text-sm text-gray-600">No credentials required. Add the server to your AI client:</p>
-          <CodeBlock language="json" code={`{\n  \"mcpServers\": {\n    \"sfcc-dev\": {\n      \"command\": \"npx\",\n      \"args\": [\"sfcc-dev-mcp\"]\n    }\n  }\n}`} />
-          <ul className="text-xs text-gray-600 list-disc pl-5 space-y-1">
-            <li>Enables documentation, best practices & cartridge generation</li>
-            <li>Upgrade anytime by adding <InlineCode>--dw-json</InlineCode></li>
-          </ul>
-        </div>
-      )}
-      {active==='full' && (
-        <div role="tabpanel" className="space-y-4 animate-fade-in">
-          <p className="text-sm text-gray-600">Provide a <InlineCode>dw.json</InlineCode> file to unlock logs, system objects & code versions.</p>
-          <CodeBlock language="json" code={`{\n  \"mcpServers\": {\n    \"sfcc-dev\": {\n      \"command\": \"npx\",\n      \"args\": [\"sfcc-dev-mcp\", \"--dw-json\", \"/path/to/dw.json\"]\n    }\n  }\n}`} />
-          <p className="text-xs text-gray-500">Add <InlineCode>--debug true</InlineCode> temporarily when diagnosing configuration issues.</p>
-        </div>
-      )}
-      {active==='env' && (
-        <div role="tabpanel" className="space-y-4 animate-fade-in">
-          <p className="text-sm text-gray-600">Use environment variables in CI or container setups. No file needed.</p>
-          <CodeBlock language="bash" code={`export SFCC_HOSTNAME=\"your-instance.sandbox.us01.dx.commercecloud.salesforce.com\"\nexport SFCC_USERNAME=\"your-username\"\nexport SFCC_PASSWORD=\"your-password\"\nexport SFCC_CLIENT_ID=\"your-client-id\"\nexport SFCC_CLIENT_SECRET=\"your-client-secret\"\n\nnpx sfcc-dev-mcp`} />
-          <p className="text-xs text-gray-500">Command-line <InlineCode>--dw-json</InlineCode> always overrides env vars.</p>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default ConfigModeTabs;