npm - @ramme-io/create-app - Versions diffs - 2.0.0-alpha.4 → 2.0.1 - Mend

@ramme-io/create-app 2.0.0-alpha.4 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/README.md +2 -2
package/index.js +3 -3
package/package.json +1 -1
package/template/index.html +1 -1
package/template/package.json +15 -6
package/template/public/_redirects +1 -0
package/template/src/App.tsx +3 -2
package/template/src/components/AppHeader.tsx +5 -0
package/template/src/components/ScrollToTop.tsx +6 -6
package/template/src/features/ai/pages/AiChat.tsx +136 -37
package/template/src/features/auth/AuthContext.tsx +16 -6
package/template/src/features/config/AppConfigContext.tsx +2 -2
package/template/src/features/docs/pages/EdgeTelemetryDemo.tsx +149 -0
package/template/src/features/onboarding/pages/AboutRamme.tsx +12 -12
package/template/src/features/onboarding/pages/PrototypeGallery.tsx +8 -6
package/template/src/features/onboarding/pages/RammeFeatures.tsx +18 -17
package/template/src/features/onboarding/pages/RammeTutorial.tsx +20 -11
package/template/src/features/onboarding/pages/Welcome.tsx +6 -6
package/template/src/features/styleguide/sections/tables/TablesSection.tsx +25 -5
package/template/src/features/theme/pages/ThemeCustomizerPage.tsx +344 -256
package/template/src/features/theme/utils/ThemeGenerator.logic.ts +587 -0
package/template/src/hooks/__tests__/useStudioHotkeys.test.ts +100 -0
package/template/src/hooks/useStudioHotkeys.ts +36 -0
package/template/src/index.css +91 -1
package/template/src/main.tsx +44 -2
package/template/src/templates/dashboard/DashboardLayout.tsx +6 -1
package/template/src/templates/dashboard/dashboard.sitemap.ts +1 -1
package/template/src/templates/docs/docs.sitemap.ts +8 -0
package/template/src/templates/settings/SettingsLayout.tsx +13 -26
package/template/src/test/setup.ts +1 -0
package/template/tsconfig.app.json +1 -0
package/template/vite.config.ts +7 -0

package/README.md CHANGED Viewed

@@ -15,9 +15,9 @@ This CLI scaffolds a production-ready React application with:
 Get started in seconds. No global installation required.
 ```bash
-npm create @ramme-io/app@alpha my-app
+npm create @ramme-io/app my-app
 # or
-npx @ramme-io/create-app@alpha my-app
+npm create @ramme-io/app my-app
 ```
 You will be prompted to name your project.

package/index.js CHANGED Viewed

@@ -19,7 +19,7 @@ const projectName = process.argv[2];
 if (!projectName) {
   console.error('❌ Error: Please specify the project directory.');
   console.log('\n📖 Usage:');
-  console.log('  npm create @ramme-io/app@alpha <project-name>\n');
+  console.log('  npm create @ramme-io/app <project-name>\n');
   process.exit(1);
 }
@@ -27,7 +27,7 @@ const templatePath = path.resolve(__dirname, 'template');
 const destinationPath = path.resolve(process.cwd(), projectName);
 // THE STABILITY PACT: Hardcoded target versions for the public release
-const RELEASE_VERSION = "^2.0.0-alpha.4";
+const RELEASE_VERSION = "^2.0.0";
 try {
   console.log(`\n🚀 Creating new Ramme app in: ${destinationPath}`);
@@ -79,7 +79,7 @@ try {
   console.log('🎨 Happy Creating!\n');
   console.log('📚 Docs: https://ramme.io/docs');
-  console.log('� Discord: https://ramme.io/discord\n');
+  console.log('💬 Discord: https://ramme.io/discord\n');
 } catch (err) {
   console.error('\n❌ Critical Failure:', err.message);

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ramme-io/create-app",
-  "version": "2.0.0-alpha.4",
+  "version": "2.0.1",
   "description": "The official CLI to create Ramme applications.",
   "type": "module",
   "private": false,

package/template/index.html CHANGED Viewed

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/orange.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Ramme - App Starter</title>
+    <title>Ramme | The High-Fidelity Creator Framework</title>
   </head>
   <body>
     <div id="root"></div>

package/template/package.json CHANGED Viewed

@@ -1,20 +1,24 @@
 {
   "name": "ramme-starter",
   "private": true,
-  "version": "2.0.0-alpha.4",
+  "version": "2.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@ai-sdk/google": "^0.0.10",
     "@google/generative-ai": "^0.24.1",
     "@radix-ui/react-slot": "^1.2.4",
-    "@ramme-io/kernel": "^2.0.0-alpha.4",
-    "@ramme-io/ui": "^2.0.0-alpha.4",
+    "@ramme-io/kernel": "workspace:*",
+    "@ramme-io/shared": "workspace:*",
+    "@ramme-io/ui": "workspace:*",
+    "ably": "^2.21.0",
     "ag-charts-community": "^13.0.0",
     "ag-charts-react": "^13.0.0",
     "ag-grid-community": "^31.3.1",
@@ -30,8 +34,8 @@
     "react": "^18.3.1",
     "react-datepicker": "^7.3.0",
     "react-dom": "^18.3.1",
-    "react-router-dom": "6.22.3",
     "react-markdown": "^10.1.0",
+    "react-router-dom": "6.22.3",
     "react-select": "^5.8.0",
     "react-syntax-highlighter": "^16.1.0",
     "recharts": "^2.12.7",
@@ -41,14 +45,19 @@
     "zustand": "^5.0.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/ui": "^2",
     "autoprefixer": "^10.4.19",
+    "jsdom": "^29.0.0",
     "postcss": "^8.4.39",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.2.2",
-    "vite": "^5.3.1"
+    "vite": "^5.3.1",
+    "vitest": "^2.1.9"
   }
 }

package/template/public/_redirects ADDED Viewed

	@@ -0,0 +1 @@
1	+ /* /index.html 200

package/template/src/App.tsx CHANGED Viewed

@@ -15,8 +15,6 @@ import DashboardLayout from './templates/dashboard/DashboardLayout';
 import DocsLayout from './templates/docs/DocsLayout';
 import SettingsLayout from './templates/settings/SettingsLayout';
 // --- SITEMAPS ---
 import { dashboardSitemap } from './templates/dashboard/dashboard.sitemap';
 import { docsSitemap } from './templates/docs/docs.sitemap';
@@ -24,6 +22,7 @@ import { settingsSitemap } from './templates/settings/settings.sitemap';
 // --- UTILS ---
 import ProtectedRoute from './components/ProtectedRoute';
+import { useStudioHotkeys } from './hooks/useStudioHotkeys';
 import NotFound from './components/NotFound';
 import ScrollToTop from './components/ScrollToTop';
 import HashLinkScroll from './components/HashLinkScroll';
@@ -82,6 +81,7 @@ const generateRoutes = (items: any[]) => {
 };
 function App() {
+  useStudioHotkeys();
   const liveDashboardRoutes = useDynamicSitemap(dashboardSitemap);
   return (
@@ -120,6 +120,7 @@ function App() {
             {/* Settings */}
             <Route path="/settings/*" element={<SettingsLayout />}>
+              <Route index element={<Navigate to="general" replace />} />
               {generateRoutes(settingsSitemap)}
             </Route>

package/template/src/components/AppHeader.tsx CHANGED Viewed

@@ -77,6 +77,11 @@ const AppHeader: React.FC<AppHeaderProps> = ({
                 label="Documents"
                 onClick={() => navigate('/docs')}
               />
+              <ButtonItem
+                icon="cpu"
+                label="Bodewell"
+                onClick={() => navigate('/bodewell/fleet')}
+              />
               <ButtonItem
                 icon="refresh-cw"

package/template/src/components/ScrollToTop.tsx CHANGED Viewed

@@ -5,12 +5,12 @@ const ScrollToTop = () => {
   const { pathname } = useLocation();
   useEffect(() => {
-    // "instant" prevents the user from seeing the page scroll up
-    window.scrollTo({
-      top: 0,
-      left: 0,
-      behavior: 'instant',
-    });
+    const container = document.getElementById('main-scroll-container');
+    if (container) {
+      container.scrollTo({ top: 0, left: 0, behavior: 'instant' as ScrollBehavior });
+    } else {
+      window.scrollTo({ top: 0, left: 0, behavior: 'instant' as ScrollBehavior });
+    }
   }, [pathname]);
   return null;

package/template/src/features/ai/pages/AiChat.tsx CHANGED Viewed

@@ -1,61 +1,160 @@
-// ramme-app-starter/template/src/pages/AiChat.tsx
-import React, { useState } from 'react';
-import {
-  Card,
-  PageHeader,
-  Conversation,
-  Message,
-  PromptInput,
+import React, { useState, useEffect, useRef } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import {
+  Card, Conversation, Message, PromptInput, PageHeader, Icon,
 } from '@ramme-io/ui';
-import { useMockChat } from '../../assistant/useMockChat'; // <--- The new brain
+const systemInstruction = `
+  You are the Ramme OS Assistant, part of the internal dev team.
+  Ramme is a high-performance, browser-native modular web-OS (Kernel + UI).
+  It is NOT the Instagram wrapper by Niklas Higle.
+  Answer as a Senior Engineer helping with a monorepo project.
+  Use numbered lists for steps and code blocks for commands.
+`;
 const AiChat: React.FC = () => {
-  const { messages, isLoading, sendMessage } = useMockChat();
   const [input, setInput] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [apiHistory, setApiHistory] = useState<any[]>([]);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [messages, setMessages] = useState([
+    { id: 'init', author: 'AI Agent', content: 'Ramme OS Assistant online. How can I help you build today?', isUser: false }
+  ]);
+  useEffect(() => {
+    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+  }, [messages, isLoading]);
+  const handleSubmit = async (e?: React.FormEvent) => {
+    if (e) e.preventDefault();
+    if (!input.trim() || isLoading) return;
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    sendMessage(input);
+    const userText = input;
+    setMessages(prev => [...prev, { id: `u-${Date.now()}`, author: 'You', content: userText, isUser: true }]);
     setInput('');
+    setIsLoading(true);
+    try {
+      const apiKey = localStorage.getItem('ramme_vault_gemini_key');
+      if (!apiKey) {
+        setMessages(prev => [...prev, {
+          id: `err-${Date.now()}`,
+          author: 'System',
+          content: 'No API key found. Please configure your Gemini API key in Settings → Theme Engine.',
+          isUser: false
+        }]);
+        setIsLoading(false);
+        return;
+      }
+      const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          contents: [
+            { role: "user", parts: [{ text: `INSTRUCTION: ${systemInstruction}` }] },
+            { role: "model", parts: [{ text: "Understood." }] },
+            ...apiHistory,
+            { role: "user", parts: [{ text: userText }] }
+          ]
+        })
+      });
+      const data = await response.json();
+      const aiText = data.candidates?.[0]?.content?.parts?.[0]?.text || "No response.";
+      setMessages(prev => [...prev, { id: `ai-${Date.now()}`, author: 'AI Agent', content: aiText, isUser: false }]);
+      setApiHistory([...apiHistory, { role: "user", parts: [{ text: userText }] }, { role: "model", parts: [{ text: aiText }] }]);
+    } catch (err: any) {
+      setMessages(prev => [...prev, { id: `err-${Date.now()}`, author: 'System', content: `Error: ${err.message}`, isUser: false }]);
+    } finally {
+      setIsLoading(false);
+    }
   };
   return (
-    <div className="p-4 sm:p-6 lg:p-8 space-y-8 h-[calc(100vh-64px)] flex flex-col">
+    <div className="p-4 sm:p-6 lg:p-8 space-y-6 h-[calc(100vh-64px)] flex flex-col">
       <PageHeader
         title="AI Assistant"
         description="Full-screen command center for Ramme AI."
       />
-      {/* We use flex-1 on the Card to make it fill the remaining screen space
-         perfectly, creating that immersive "ChatGPT" feel.
-      */}
-      <Card className="flex-1 flex flex-col min-h-0 shadow-sm border-border/50">
-        <div className="flex-1 overflow-hidden">
+      <Card className="flex-1 flex flex-col min-h-0 shadow-sm border-border/50 overflow-hidden">
+        <div className="px-4 py-2 border-b flex justify-between items-center bg-muted/20">
+          <div className="flex items-center gap-2">
+            <div className={`w-2 h-2 rounded-full ${isLoading ? 'bg-amber-500 animate-pulse' : 'bg-emerald-500'}`} />
+            <span className="font-bold text-[10px] uppercase tracking-widest opacity-60">Ramme Assistant</span>
+          </div>
+        </div>
+        <div ref={scrollRef} className="flex-1 overflow-y-auto px-4 py-4 custom-scrollbar">
           <Conversation>
             {messages.map((msg) => (
-              <Message
-                key={msg.id}
-                author={msg.author}
-                content={msg.content}
-                isUser={msg.isUser}
-                loading={msg.loading}
-                suggestions={msg.suggestions}
-                onSuggestionClick={(s) => sendMessage(s)}
-              />
+              <div key={msg.id} className={`flex ${msg.isUser ? 'justify-end' : 'justify-start'} mb-3`}>
+                <div className="max-w-[98%] w-full">
+                  <Message
+                    author={msg.author}
+                    isUser={msg.isUser}
+                    // @ts-ignore
+                    content={
+                      <div className="prose prose-sm dark:prose-invert max-w-none text-foreground leading-relaxed">
+                        <ReactMarkdown
+                          remarkPlugins={[remarkGfm]}
+                          components={{
+                            p: ({children}) => <p className="mb-4 last:mb-0">{children}</p>,
+                            ol: ({children}) => <ol className="list-decimal pl-8 mb-4 space-y-2">{children}</ol>,
+                            ul: ({children}) => <ul className="list-disc pl-8 mb-4 space-y-2">{children}</ul>,
+                            li: ({children}) => <li className="pl-1">{children}</li>,
+                            code({ node, inline, className, children, ...props }: any) {
+                              const match = /language-(\w+)/.exec(className || '');
+                              return !inline && match ? (
+                                <div className="my-5 rounded-lg overflow-hidden border border-border bg-[#0d0d0d] shadow-xl">
+                                  <div className="px-3 py-1 bg-white/5 border-b border-white/10 flex justify-between">
+                                    <span className="text-[9px] text-muted-foreground uppercase">{match[1]}</span>
+                                  </div>
+                                  <SyntaxHighlighter
+                                    style={oneDark}
+                                    language={match[1]}
+                                    PreTag="div"
+                                    customStyle={{ margin: 0, padding: '1.2rem', fontSize: '0.8rem', background: 'transparent' }}
+                                    {...props}
+                                  >
+                                    {String(children).replace(/\n$/, '')}
+                                  </SyntaxHighlighter>
+                                </div>
+                              ) : (
+                                <code className="bg-muted px-1.5 py-0.5 rounded font-mono text-primary text-[0.9em]" {...props}>
+                                  {children}
+                                </code>
+                              );
+                            },
+                          }}
+                        >
+                          {msg.content}
+                        </ReactMarkdown>
+                      </div>
+                    }
+                  />
+                </div>
+              </div>
             ))}
-            {isLoading && <Message author="AI Agent" isUser={false} loading />}
           </Conversation>
         </div>
-        <div className="p-4 border-t bg-card">
-          <PromptInput
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            onSubmit={handleSubmit}
-            placeholder="Type a command or ask a question..."
-          />
+        <div className="p-4 border-t bg-card/40 backdrop-blur-sm">
+          <PromptInput value={input} onChange={(e) => setInput(e.target.value)} onSubmit={handleSubmit} placeholder="Ask about Ramme..." />
         </div>
       </Card>
+      <style dangerouslySetInnerHTML={{ __html: `
+        .custom-scrollbar::-webkit-scrollbar { width: 4px; }
+        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
+        .custom-scrollbar::-webkit-scrollbar-thumb { background: rgb(var(--app-primary-color), 0.2); border-radius: 10px; }
+        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgb(var(--app-primary-color), 0.5); }
+      `}} />
     </div>
   );
 };

package/template/src/features/auth/AuthContext.tsx CHANGED Viewed

@@ -7,6 +7,19 @@ const EMERGENCY_ADMIN: User = {
   id: 'usr_admin_force',
   name: 'Alex Admin (Recovery)',
   email: 'alex@example.com',
+  password: 'admin',
+  role: 'admin',
+  status: 'active',
+  joinedAt: new Date().toISOString(),
+  lastActive: new Date().toISOString()
+};
+// 🌐 DEFAULT GUEST: Auto-login for frictionless marketing site experience
+const DEFAULT_GUEST: User = {
+  id: 'usr_guest',
+  name: 'Guest Creator',
+  email: 'guest@ramme.io',
+  password: 'guest',
   role: 'admin',
   status: 'active',
   joinedAt: new Date().toISOString(),
@@ -27,10 +40,10 @@ interface AuthContextType {
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
 export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [user, setUser] = useState<User | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
+  const [user, setUser] = useState<User | null>(DEFAULT_GUEST);
+  const [isLoading, setIsLoading] = useState(false);
-  // 1. Mount: Check for existing session
+  // 1. Mount: Check for existing session, fall back to guest
   useEffect(() => {
     const storedUser = localStorage.getItem(SESSION_KEY);
     if (storedUser) {
@@ -38,15 +51,12 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
         const parsed = JSON.parse(storedUser);
         if (parsed && parsed.id) {
           setUser(parsed);
-        } else {
-          localStorage.removeItem(SESSION_KEY);
         }
       } catch (e) {
         console.error("Failed to parse session", e);
         localStorage.removeItem(SESSION_KEY);
       }
     }
-    setIsLoading(false);
   }, []);
   // 2. Action: Login

package/template/src/features/config/AppConfigContext.tsx CHANGED Viewed

@@ -14,8 +14,8 @@ export const AppConfigProvider = ({ children }: { children: ReactNode }) => {
   const [enableCRT, setEnableCRT] = useState(() => {
       const stored = localStorage.getItem('app_enable_crt');
-      // Default to true for that retro-first experience
-      return stored !== null ? JSON.parse(stored) : true;
+      // Default to false for clean marketing site clarity
+      return stored !== null ? JSON.parse(stored) : false;
   });
   useEffect(() => {

package/template/src/features/docs/pages/EdgeTelemetryDemo.tsx ADDED Viewed

@@ -0,0 +1,149 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useDevice } from '@ramme-io/kernel';
+import { CircularDial, WaterPumpControl, TelemetryLog } from '@ramme-io/ui';
+import type { TelemetryLogRow } from '@ramme-io/ui';
+import type { PumpMode } from '@ramme-io/ui';
+import { StandardPageLayout } from '../../../components/layout/StandardPageLayout';
+const EdgeTelemetryDemo: React.FC = () => {
+  const telemetry = useDevice();
+  const [fps, setFps] = useState(0);
+  const [pumpMode, setPumpMode] = useState<PumpMode>('AUTO');
+  const [targetMoisture, setTargetMoisture] = useState(40);
+  const [logData, setLogData] = useState<TelemetryLogRow[]>([]);
+  const logBuffer = useRef<TelemetryLogRow[]>([]);
+  const frameCount = useRef(0);
+  const rafId = useRef(0);
+  // Append incoming telemetry to the historical log buffer (capped at 100)
+  useEffect(() => {
+    if (!telemetry) return;
+    const row: TelemetryLogRow = {
+      timestamp: Date.now(),
+      soilMoisture: telemetry.soilMoisture,
+      ambientLight: telemetry.ambientLight,
+      temperature: telemetry.temperature,
+    };
+    logBuffer.current = [...logBuffer.current.slice(-99), row];
+    setLogData(logBuffer.current);
+  }, [telemetry]);
+  // Continuous RAF loop tallies frames; 1s interval reads & resets the tally
+  useEffect(() => {
+    const tick = () => {
+      frameCount.current += 1;
+      rafId.current = requestAnimationFrame(tick);
+    };
+    rafId.current = requestAnimationFrame(tick);
+    const interval = setInterval(() => {
+      setFps(frameCount.current);
+      frameCount.current = 0;
+    }, 1000);
+    return () => {
+      cancelAnimationFrame(rafId.current);
+      clearInterval(interval);
+    };
+  }, []);
+  return (
+    <StandardPageLayout
+      title="Edge Telemetry Engine"
+      description="Hardware-in-the-loop simulation testing 50Hz MQTT ingestion and Zero Jank UI rendering."
+    >
+      {/* Status Bar */}
+      <div className="flex items-center gap-4 p-4 rounded-2xl bg-card border border-border font-mono text-xs mb-8">
+        <div className="flex items-center gap-2">
+          <div className="h-2 w-2 rounded-full bg-green-500 animate-pulse" />
+          <span className="font-bold text-foreground uppercase tracking-widest">Kernel Link Active</span>
+        </div>
+        <div className="ml-auto flex items-center gap-4">
+          <span className={fps > 20 ? "text-red-500 font-bold" : "text-green-500 font-bold"}>
+            {fps} FPS
+          </span>
+          <span className="text-muted-foreground">
+            Target: ~15 FPS | Simulator: 50Hz
+          </span>
+        </div>
+      </div>
+      {/* Telemetry Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        {/* Soil Moisture Dial */}
+        <div className="flex flex-col items-center gap-4 p-8 rounded-3xl bg-card border border-border">
+          {telemetry ? (
+            <CircularDial
+              value={telemetry.soilMoisture ?? 0}
+              label="Soil Moisture"
+              unit="%"
+              size={180}
+            />
+          ) : (
+            <div className="text-muted-foreground text-sm">Awaiting telemetry...</div>
+          )}
+        </div>
+        {/* Ambient Light Dial */}
+        <div className="flex flex-col items-center gap-4 p-8 rounded-3xl bg-card border border-border">
+          {telemetry ? (
+            <CircularDial
+              value={telemetry.ambientLight ?? 0}
+              min={0}
+              max={100000}
+              label="Ambient Light"
+              unit=" lx"
+              size={180}
+            />
+          ) : (
+            <div className="text-muted-foreground text-sm">Awaiting telemetry...</div>
+          )}
+        </div>
+        {/* Temperature Dial */}
+        <div className="flex flex-col items-center gap-4 p-8 rounded-3xl bg-card border border-border">
+          {telemetry ? (
+            <CircularDial
+              value={telemetry.temperature ?? 0}
+              min={-40}
+              max={125}
+              label="Temperature"
+              unit="°C"
+              size={180}
+            />
+          ) : (
+            <div className="text-muted-foreground text-sm">Awaiting telemetry...</div>
+          )}
+        </div>
+      </div>
+      {/* Command: Water Pump Actuation */}
+      <div className="mt-8">
+        <WaterPumpControl
+          pumpMode={pumpMode}
+          targetMoisture={targetMoisture}
+          onCommand={(payload) => {
+            setPumpMode(payload.pumpMode);
+            setTargetMoisture(payload.targetMoisture);
+            console.log('[MQTT PUBLISH MOCK]', payload);
+          }}
+          className="max-w-md"
+        />
+      </div>
+      {/* Raw Payload Debug */}
+      <div className="mt-8 p-6 rounded-2xl bg-card border border-border">
+        <div className="font-mono text-[10px] uppercase tracking-[0.3em] text-muted-foreground mb-3 font-bold">Raw Smoothed Payload</div>
+        <pre className="font-mono text-sm text-foreground/80 leading-relaxed tabular-nums">
+          {JSON.stringify(telemetry, null, 2)}
+        </pre>
+      </div>
+      {/* Telemetry Log — AG Grid virtualized scroll */}
+      <div className="mt-8">
+        <TelemetryLog rowData={logData} maxRows={100} height="320px" />
+      </div>
+    </StandardPageLayout>
+  );
+};
+export default EdgeTelemetryDemo;