my-fleetbo-react-v1 1.0.5 → 1.0.6

package/data.schema.json

@@ -0,0 +1,14 @@
+{
+    "patchedAt": "2026-06-01T07:14:26Z",
+    "schemaVersion": 2,
+    "collections": {
+        "contacts": {
+            "type": "collection",
+            "fields": {
+                "name": "string",
+                "number": "string",
+                "avatar": "string"
+            }
+        }
+    }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
    "name": "my-fleetbo-react-v1",
    "private": false,
-   "version": "1.0.5",
+   "version": "1.0.6",
    "description": "React template optimized for the Fleetbo ecosystem.",
    "author": "Jean Aubain Noucti",
    "license": "MIT",
@@ -29,7 +29,6 @@
       "@types/react": "^19.2.14",
       "@types/react-dom": "^19.2.3",
       "@vitejs/plugin-react": "^6.0.0",
-      "cloudflared": "^0.7.1",
       "eslint": "^9.39.4",
       "eslint-plugin-react-hooks": "^7.0.1",
       "eslint-plugin-react-refresh": "^0.5.2",

package/src/App.jsx

@@ -12,6 +12,7 @@ import NotFound       from './app/core/NotFound';
 
 // FLEETBO_IMPORTS
 import Login          from "./app/mocks/login/Login";
+import LoginWeb       from "./app/mocks/login/LoginWeb";
 import SampleTab1     from './app/mocks/SampleTab1';
 import SampleTab2     from './app/mocks/SampleTab2';
 import SampleTab3     from './app/mocks/SampleTab3';
@@ -24,18 +25,18 @@ const TabRedirector = ({ children }) => {
     return children;
 };
 
-const InitializingScreen = ({ error }) => (
+const InitializingScreen = ({ error, isWeb }) => (
     <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh', flexDirection: 'column', padding: '20px', textAlign: 'center' }}>
         {error ? (
             <>
-                <i className="fa-solid fa-triangle-exclamation fa-3x text-danger mb-3"></i>
-                <h5 className="text-danger">System Halt</h5>
+                <i className={`fa-solid ${isWeb ? 'fa-circle-exclamation text-warning' : 'fa-triangle-exclamation text-danger'} fa-3x mb-3`}></i>
+                <h5 className={isWeb ? "text-dark" : "text-danger"}>{isWeb ? "Synchronisation Fleetbo Engine" : "System Halt"}</h5>
                 <p style={{ marginTop: '1rem', color: '#6c757d' }}>{error}</p>
-                <button className="btn btn-outline-secondary mt-3" onClick={() => window.location.reload()}>Reboot</button>
+                <button className="btn btn-outline-secondary mt-3" onClick={() => window.location.reload()}>{isWeb ? "Recharger" : "Reboot"}</button>
             </>
         ) : (
             <div className="spinner-border text-success" role="status">
-                <span className="visually-hidden">Booting OS...</span>
+                <span className="visually-hidden">Booting...</span>
             </div>
         )}
     </div>
@@ -44,6 +45,18 @@ const InitializingScreen = ({ error }) => (
 function App() {
     const { isEngineReady, isAuthenticated, sessionData, error } = useStartupEffect();
     const [iframeAuthOverride, setIframeAuthOverride] = useState(false);
+
+    const isWeb = process.env.FLEETBO_TARGET === 'web' 
+        || !window.location.href.includes('localhost')
+        || window.location.protocol === 'https:';
+
+    const isWebAuthError = isWeb && error && (
+        error.toLowerCase().includes("authentication") || 
+        error.toLowerCase().includes("outside of fleetbo") ||
+        error.toLowerCase().includes("required") ||
+        error.toLowerCase().includes("401") ||
+        error.toLowerCase().includes("unauthorized")
+    );
     
     const location = useLocation();
     const isNavbarRoute = location.pathname.includes('navbar') || location.hash.includes('navbar') || window.location.href.includes('navbar');
@@ -58,14 +71,14 @@ function App() {
         }
     }, [isNavbarRoute]);
 
-    if (error) return <InitializingScreen error={error} />;
+    if (error && !isWebAuthError) return <InitializingScreen error={error} isWeb={isWeb} />;
 
     const isSimulator = !!window.__FLEETBO_SIMULATOR 
         || window.location.hash.includes('simulator=1')
         || new URLSearchParams(window.location.search).get('simulator') === '1';
 
-    if (!isEngineReady && !isNavbarRoute && !isSimulator) {
-        return <InitializingScreen />;
+   if (!isEngineReady && !isNavbarRoute && !isWebAuthError) {
+        return <InitializingScreen isWeb={isWeb} />;
     }
 
     const isActuallyAuthenticated = isAuthenticated || iframeAuthOverride;

package/src/app/mocks/SampleTab1.jsx

@@ -57,4 +57,4 @@ export default function SampleTab() {
         </div>
     );
 }
-// ⚡ Forged by Alex on 2026-03-28 at 15:04:20
+// ⚡ Forged by Alex on 2026-03-28 at 15:04:20

package/src/app/mocks/login/LoginWeb.jsx

@@ -0,0 +1,369 @@
+import React, { useState, useEffect } from 'react';
+
+export default function LoginWeb() {
+    const [email, setEmail] = useState('');
+    const [otp, setOtp] = useState('');
+    const [step, setStep] = useState('email'); // 'email' | 'otp'
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
+    const [appInfo, setAppInfo] = useState({ name: 'Fleetbo App', description: 'Loading infrastructure...' });
+
+    useEffect(() => {
+        const checkStatus = async () => {
+            if (window.Fleetbo && typeof window.Fleetbo.checkAuthStatusAndRedirect === 'function') {
+                try {
+                    const res = await window.Fleetbo.checkAuthStatusAndRedirect();
+                    if (res && res.success) {
+                        setAppInfo({
+                            name: res.appName || 'Fleetbo App',
+                            description: res.description || 'DevTool Workspace'
+                        });
+                        if (res.isLoggedIn) {
+                            window.Fleetbo.openView('Tab1', true);
+                        }
+                    }
+                } catch (err) {
+                    console.error("Infrastructure connection error:", err);
+                }
+            }
+        };
+        checkStatus();
+    }, []);
+
+    const handleRequestOTP = async (e) => {
+        e.preventDefault();
+        if (!email) return setError('Email standard requis.');
+        setLoading(true);
+        setError('');
+
+        try {
+            setTimeout(() => {
+                setLoading(false);
+                setStep('otp');
+            }, 1000);
+        } catch (err) {
+            setLoading(false);
+            setError('Échec de transmission de la clé d\'accès.');
+        }
+    };
+
+    const handleVerifyLogin = async (e) => {
+        e.preventDefault();
+        if (!otp) return setError('Code OTP obligatoire.');
+        setLoading(true);
+        setError('');
+
+        if (window.Fleetbo && typeof window.Fleetbo.fleetboLog === 'function') {
+            try {
+                const res = await window.Fleetbo.fleetboLog();
+                if (res && res.success) {
+                    window.Fleetbo.openView('Tab1', true);
+                } else {
+                    throw new Error(res?.message || 'Access Denied.');
+                }
+            } catch (err) {
+                setLoading(false);
+                setError(err.message || 'Clé invalide ou environnement corrompu.');
+            }
+        } else {
+            setTimeout(() => {
+                setLoading(false);
+                alert('Mode Simulation : Connexion validée.');
+            }, 800);
+        }
+    };
+
+    return (
+        <div className="fleetbo-web-production devtool-container">
+            <style>{`
+                .fleetbo-web-production.devtool-container {
+                    background-color: #0B0F17;
+                    color: #E2E8F0;
+                    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+                    min-height: 100vh;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    padding: 40px;
+                    box-sizing: border-box;
+                    overflow-x: hidden;
+                    position: relative;
+                }
+
+                /* Background Glow Effects */
+                .fleetbo-web-production .grid-bg {
+                    position: absolute;
+                    top: 0; left: 0; right: 0; bottom: 0;
+                    background-image: linear-gradient(rgba(14, 144, 77, 0.04) 1px, transparent 1px),
+                                      linear-gradient(90deg, rgba(14, 144, 77, 0.04) 1px, transparent 1px);
+                    background-size: 32px 32px;
+                    z-index: 1;
+                }
+
+                .fleetbo-web-production .glow-orb {
+                    position: absolute;
+                    width: 500px; height: 500px;
+                    background: radial-gradient(circle, rgba(14, 144, 77, 0.08) 0%, transparent 70%);
+                    top: -100px; right: -100px;
+                    z-index: 1;
+                    pointer-events: none;
+                }
+
+                /* Split Workspace Layout */
+                .fleetbo-web-production .workspace {
+                    display: grid;
+                    grid-template-columns: 1.1fr 0.9fr;
+                    width: 100%;
+                    max-width: 1200px;
+                    background: rgba(17, 24, 39, 0.7);
+                    border: 1px solid rgba(255, 255, 255, 0.06);
+                    backdrop-filter: blur(20px);
+                    border-radius: 16px;
+                    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
+                    z-index: 10;
+                    overflow: hidden;
+                }
+
+                /* Left Side: Brand & Live Architecture Showcase */
+                .fleetbo-web-production .showcase-panel {
+                    padding: 60px;
+                    border-right: 1px solid rgba(255, 255, 255, 0.05);
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-between;
+                }
+
+                .fleetbo-web-production .brand-header {
+                    display: flex;
+                    align-items: center;
+                    gap: 12px;
+                }
+
+                .fleetbo-web-production .brand-logo {
+                    width: 32px; height: 32px;
+                    background: #0E904D;
+                    border-radius: 6px;
+                    box-shadow: 0 0 15px #0E904D;
+                }
+
+                .fleetbo-web-production .brand-title {
+                    font-size: 20px; font-weight: 700; letter-spacing: -0.5px;
+                    color: #FFF;
+                }
+
+                .fleetbo-web-production .hero-title {
+                    font-size: 38px; font-weight: 800; line-height: 1.2;
+                    letter-spacing: -1px; color: #FFF; margin: 40px 0 16px 0;
+                }
+
+                .fleetbo-web-production .hero-title span {
+                    color: #0E904D;
+                }
+
+                .fleetbo-web-production .hero-desc {
+                    color: #94A3B8; font-size: 16px; line-height: 1.5; margin-bottom: 30px;
+                }
+
+                /* Simulated Terminal Component */
+                .fleetbo-web-production .terminal-window {
+                    background: #070A0F;
+                    border: 1px solid rgba(255, 255, 255, 0.08);
+                    border-radius: 10px;
+                    font-family: 'Fira Code', 'Courier New', monospace;
+                    padding: 16px; font-size: 13px; box-shadow: inset 0 0 20px rgba(0,0,0,0.6);
+                }
+
+                .fleetbo-web-production .terminal-header {
+                    display: flex; gap: 6px; margin-bottom: 12px;
+                }
+
+                .fleetbo-web-production .dot {
+                    width: 8px; height: 8px; border-radius: 50%; background: #444;
+                }
+                .fleetbo-web-production .dot.red { background: #EF4444; }
+                .fleetbo-web-production .dot.yellow { background: #F59E0B; }
+                .fleetbo-web-production .dot.green { background: #10B981; }
+
+                .fleetbo-web-production .terminal-line {
+                    margin-bottom: 6px; line-height: 1.4;
+                }
+                .fleetbo-web-production .t-cyan { color: #38BDF8; }
+                .fleetbo-web-production .t-green { color: #0E904D; }
+                .fleetbo-web-production .t-gray { color: #475569; }
+
+                /* Right Side: Gatekeeper Security Login Form */
+                .fleetbo-web-production .gatekeeper-panel {
+                    padding: 60px;
+                    background: rgba(10, 14, 22, 0.4);
+                    display: flex; flex-direction: column; justify-content: center;
+                }
+
+                .fleetbo-web-production .form-box {
+                    width: 100%; max-width: 360px; margin: 0 auto;
+                }
+
+                .fleetbo-web-production .gatekeeper-title {
+                    font-size: 24px; font-weight: 700; color: #FFF; margin-bottom: 8px;
+                }
+
+                .fleetbo-web-production .gatekeeper-subtitle {
+                    color: #64748B; font-size: 14px; margin-bottom: 32px;
+                }
+
+                .fleetbo-web-production .input-group {
+                    margin-bottom: 20px; position: relative;
+                }
+
+                .fleetbo-web-production .input-label {
+                    display: block; font-size: 12px; font-weight: 600; color: #94A3B8;
+                    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;
+                }
+
+                .fleetbo-web-production .input-field {
+                    width: 100%; padding: 12px 16px; background: #070A0F;
+                    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px;
+                    color: #FFF; font-size: 14px; transition: all 0.2s; box-sizing: border-box;
+                }
+
+                .fleetbo-web-production .input-field:focus {
+                    outline: none; border-color: #0E904D; box-shadow: 0 0 10px rgba(14, 144, 77, 0.2);
+                }
+
+                .fleetbo-web-production .btn-propulsion {
+                    width: 100%; padding: 14px; background: #0E904D;
+                    color: white; border: none; border-radius: 8px; font-size: 14px;
+                    font-weight: 600; cursor: pointer; transition: all 0.2s;
+                    box-shadow: 0 4px 15px rgba(14, 144, 77, 0.3);
+                }
+
+                .fleetbo-web-production .btn-propulsion:hover {
+                    background: #11ab5c; box-shadow: 0 4px 20px rgba(14, 144, 77, 0.5);
+                }
+
+                .fleetbo-web-production .btn-propulsion:disabled {
+                    background: #1E293B; color: #64748B; cursor: not-allowed; box-shadow: none;
+                }
+
+                .fleetbo-web-production .error-banner {
+                    background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2);
+                    padding: 12px; border-radius: 8px; color: #FCA5A5; font-size: 13px; margin-bottom: 20px;
+                }
+
+                .fleetbo-web-production .back-link {
+                    display: block; text-align: center; font-size: 13px; color: #64748B;
+                    text-decoration: none; margin-top: 20px; cursor: pointer; transition: color 0.2s;
+                }
+                .fleetbo-web-production .back-link:hover { color: #0E904D; }
+
+                .fleetbo-web-production .footer-node {
+                    margin-top: 40px; font-size: 12px; color: #475569; text-align: center;
+                }
+
+                @media (max-width: 900px) {
+                    .fleetbo-web-production .workspace { grid-template-columns: 1fr; }
+                    .fleetbo-web-production .showcase-panel { display: none; }
+                    .fleetbo-web-production .gatekeeper-panel { padding: 40px; }
+                }
+            `}</style>
+
+            <div className="grid-bg"></div>
+            <div className="glow-orb"></div>
+
+            <div className="workspace">
+
+                <div className="showcase-panel">
+                    <div className="brand-header">
+                        <div className="brand-logo"></div>
+                        <div className="brand-title">Fleetbo Studio</div>
+                    </div>
+
+                    <div>
+                        <h1 className="hero-title">
+                            The Mobile Cloud OS. <br />
+                            Engineered for <span>Web & Native</span>.
+                        </h1>
+                        <p className="hero-desc">
+                            Forge complete applications at 120 FPS using only JavaScript. 
+                            Zero servers to configure, zero complex backend architecture, native deployment readiness.
+                        </p>
+
+                        <div className="terminal-window">
+                            <div className="terminal-header">
+                                <div className="dot red"></div>
+                                <div className="dot yellow"></div>
+                                <div className="dot green"></div>
+                            </div>
+                            <div className="terminal-line"><span className="t-gray">[system]</span> Initializing Ghost Memory Compilation...</div>
+                            <div className="terminal-line"><span className="t-cyan">✔ [Vite]</span> 67 modules successfully transformed in 502ms.</div>
+                            <div className="terminal-line"><span className="t-gray">[system]</span> Injecting sovereign Firebase and MongoDB data streams...</div>
+                            <div className="terminal-line"><span className="t-green">✔ [Uplink]</span> Environment secure. Linked onto {appInfo.name}.</div>
+                        </div>
+                    </div>
+
+                    <div className="t-gray" style={{ fontSize: '12px' }}>
+                        Fleetbo Engine v8.0.0 · Core System Production Link
+                    </div>
+                </div>
+
+                <div className="gatekeeper-panel">
+                    <div className="form-box">
+                        <h2 className="gatekeeper-title">Workspace Login</h2>
+                        <p className="gatekeeper-subtitle">
+                            Target Infrastructure: <span style={{ color: '#0E904D', fontWeight: '600' }}>{appInfo.name}</span>
+                        </p>
+
+                        {error && <div className="error-banner">✕ {error}</div>}
+
+                        {step === 'email' ? (
+                            <form onSubmit={handleRequestOTP}>
+                                <div className="input-group">
+                                    <label className="input-label">Developer Identity (Email)</label>
+                                    <input 
+                                        type="email" 
+                                        className="input-field" 
+                                        placeholder="pilot@fleetbo.io"
+                                        value={email}
+                                        onChange={(e) => setEmail(e.target.value)}
+                                        disabled={loading}
+                                        required
+                                    />
+                                </div>
+                                <button type="submit" className="btn-propulsion" disabled={loading}>
+                                    {loading ? 'Requesting Keys...' : 'Request Activation Code'}
+                                </button>
+                            </form>
+                        ) : (
+                            <form onSubmit={handleVerifyLogin}>
+                                <div className="input-group">
+                                    <label className="input-label">Security Activation Code (OTP)</label>
+                                    <input 
+                                        type="text" 
+                                        className="input-field" 
+                                        placeholder="000000"
+                                        maxLength={6}
+                                        value={otp}
+                                        onChange={(e) => setOtp(e.target.value)}
+                                        disabled={loading}
+                                        style={{ letterSpacing: '4px', textIndent: '4px', textAlign: 'center', fontSize: '18px', fontWeight: 'bold' }}
+                                        required
+                                    />
+                                </div>
+                                <button type="submit" className="btn-propulsion" disabled={loading}>
+                                    {loading ? 'Engaging Propulsion...' : 'Verify & Launch System'}
+                                </button>
+                                <span className="back-link" onClick={() => setStep('email')}>
+                                    ← Use a different account
+                                </span>
+                            </form>
+                        )}
+
+                        <div className="footer-node">
+                            Protected by Fleetbo WebGatekeeper Layer. <br />
+                            Unauthorized access attempts are audited globally.
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/app/tabs/Tab1.jsx

@@ -1,18 +1,5 @@
 /**
  * Tab1.jsx — Fleetbo JS in Action
- *
- * JS = Brain (orchestrates) | Native = Muscle (executes) | Alex = Architect (forges)
- *
- * Two patterns:
- *   Manager  → List + Create in one module. Fleetbo.openView('GuestManager', true)
- *   Atomic   → One action, closes. await Fleetbo.exec('Scanner', 'open', {})
- *
- * Alex (npm run alex):
- *    "Forge a guest manager with list and photo"  → Alex builds 
- *    "A guest manager with list and photo"        → Alex stays conversational
- * 
- *     Rule: use "forge", "patch" before prompt code generation.
- *
  * Quick ref:
  *   Fleetbo.openView('Module', true)       → Full Native view/tab (120 FPS)
  *   Fleetbo.exec('Module', 'action', {})   → Native overlay (Atomic)