@ramme-io/create-app 1.0.4 → 1.1.1

package/template/src/components/AIChatWidget.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { 
+  Card, 
+  Conversation, 
+  Message, 
+  PromptInput, 
+  Button,
+  Icon,
+} from '@ramme-io/ui';
+import { useMockChat } from '../hooks/useMockChat';
+
+interface AIChatWidgetProps {
+  onClose: () => void;
+}
+
+export const AIChatWidget: React.FC<AIChatWidgetProps> = ({ onClose }) => {
+  // 1. Use the shared "Brain"
+  const { messages, isLoading, sendMessage } = useMockChat();
+  const [input, setInput] = useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    sendMessage(input);
+    setInput('');
+  };
+
+  return (
+    <Card className="fixed bottom-24 right-6 w-96 h-[500px] shadow-2xl flex flex-col z-50 animate-in slide-in-from-bottom-5 border-border">
+      
+      {/* Header */}
+      <div className="p-4 border-b flex justify-between items-center bg-muted/50 rounded-t-lg">
+        <div className="flex items-center gap-2">
+          <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
+          <span className="font-semibold text-sm">Bodewell AI</span>
+        </div>
+        <Button variant="ghost" size="icon" onClick={onClose} className="h-6 w-6">
+          <Icon name="x" size={16} />
+        </Button>
+      </div>
+
+      {/* Chat History Area */}
+      <div className="flex-1 overflow-hidden p-0 bg-background">
+        <Conversation>
+          {messages.map((msg) => (
+            <Message
+              key={msg.id}
+              author={msg.author}
+              content={msg.content}
+              isUser={msg.isUser}
+              suggestions={msg.suggestions}
+              onSuggestionClick={(s) => sendMessage(s)}
+            />
+          ))}
+          {isLoading && <Message author="Bodewell AI" isUser={false} loading />}
+        </Conversation>
+      </div>
+
+      {/* Input Footer */}
+      <div className="p-4 border-t bg-card">
+        <PromptInput
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onSubmit={handleSubmit}
+          placeholder="Ask to adjust temperature..."
+        />
+      </div>
+    </Card>
+  );
+};

package/template/src/hooks/useMockChat.ts

@@ -0,0 +1,69 @@
+import { useState, useCallback } from 'react';
+import { useToast } from '@ramme-io/ui';
+
+export interface ChatMessage {
+  id: string;
+  author: string;
+  content: string;
+  isUser: boolean;
+  suggestions?: string[];
+  loading?: boolean;
+}
+
+export const useMockChat = () => {
+  // 1. FIX: Destructure 'addToast' (the correct name from your Provider)
+  const { addToast } = useToast(); 
+  
+  const [isLoading, setIsLoading] = useState(false);
+  const [messages, setMessages] = useState<ChatMessage[]>([
+    { 
+      id: '1', 
+      author: 'Bodewell AI', 
+      content: 'Hello! I am monitoring your 12 active devices. How can I help?', 
+      isUser: false, 
+      suggestions: ['Check System Status', 'Turn off Living Room AC']
+    }
+  ]);
+
+  const sendMessage = useCallback((content: string) => {
+    if (!content.trim()) return;
+
+    // Add User Message
+    const userMsg = { id: Date.now().toString(), author: 'You', content, isUser: true };
+    setMessages(prev => [...prev, userMsg]);
+    setIsLoading(true);
+
+    // Simulate AI Delay
+    setTimeout(() => {
+      setIsLoading(false);
+      
+      // Mock Response Logic
+      const aiMsg = {
+        id: (Date.now() + 1).toString(),
+        author: 'Bodewell AI',
+        content: `I received your command: "${content}". Executing protocol...`,
+        isUser: false,
+        suggestions: ['View Logs', 'Undo Action']
+      };
+      
+      setMessages(prev => [...prev, aiMsg]);
+      
+      // 2. FIX: Call addToast with separate arguments, not an object
+      // Signature: addToast(message, type, duration)
+      if (addToast) {
+        addToast(
+          `Successfully processed: ${content}`, // message
+          'success',                            // type
+          3000                                  // duration
+        );
+      }
+      
+    }, 1500);
+  }, [addToast]);
+
+  return {
+    messages,
+    isLoading,
+    sendMessage
+  };
+};

package/template/src/hooks/useSignal.ts

@@ -0,0 +1,73 @@
+import { useState, useEffect } from 'react';
+import type { Signal } from '../types/signal';
+
+/**
+ * Configuration for the Mock Generator.
+ * This allows us to simulate specific hardware constraints.
+ */
+interface SignalConfig<T> {
+  initialValue?: T;
+  min?: number;     // Prevent drifting too low
+  max?: number;     // Prevent drifting too high
+  interval?: number; // Update speed (ms)
+  unit?: string;     // e.g., "°F", "%", "RPM"
+}
+
+/**
+ * The "Universal Socket." 
+ * UI Components use this hook to subscribe to data.
+ * Currently running in "Synthetic Mode" (Mock) with bounded randomization.
+ */
+export function useSignal<T = any>(signalId: string, config: SignalConfig<T> = {}): Signal<T> {
+  // Defaults
+  const { 
+    initialValue, 
+    min = -Infinity, 
+    max = Infinity, 
+    interval = 2000, 
+    unit 
+  } = config;
+
+  // 1. Initialize
+  const [signal, setSignal] = useState<Signal<T>>({
+    id: signalId,
+    value: initialValue as T,
+    unit: unit,
+    timestamp: Date.now(),
+    status: 'fresh',
+  });
+
+  useEffect(() => {
+    // 2. SIMULATION: Generate synthetic data updates
+    const timer = setInterval(() => {
+      setSignal(prev => {
+        let newValue: any = prev.value;
+
+        // Only apply math if it's a number
+        if (typeof prev.value === 'number') {
+            // Generate drift
+            const variance = (Math.random() - 0.5) * 2; // +/- 1
+            let nextNum = prev.value + variance;
+
+            // 🛡️ CLAMPING: Apply the physical bounds
+            if (min !== undefined) nextNum = Math.max(min, nextNum);
+            if (max !== undefined) nextNum = Math.min(max, nextNum);
+
+            newValue = Number(nextNum.toFixed(1));
+        }
+
+        return {
+          ...prev,
+          value: newValue,
+          timestamp: Date.now(),
+          status: 'fresh',
+          unit: unit // Ensure unit persists
+        };
+      });
+    }, interval); 
+
+    return () => clearInterval(timer);
+  }, [signalId, min, max, interval, unit]);
+
+  return signal;
+}

package/template/src/pages/AiChat.tsx

@@ -1,74 +1,60 @@
-// src/pages/AiChat.tsx
-import React, { useState, useEffect } from 'react';
+// ramme-app-starter/template/src/pages/AiChat.tsx
+import React, { useState } from 'react';
 import {
   Card,
   PageHeader,
   Conversation,
   Message,
   PromptInput,
-  type MessageProps,
 } from '@ramme-io/ui';
-
-// The MessageData type now directly uses MessageProps from the library
-type MessageData = Omit<MessageProps, 'onSuggestionClick'>;
+import { useMockChat } from '../hooks/useMockChat'; // <--- The new brain
 
 const AiChat: React.FC = () => {
-  const [messages, setMessages] = useState<MessageData[]>([
-    { author: 'AI Assistant', content: 'Hello! How can I help you build your prototype today?' },
-  ]);
-  const [newMessage, setNewMessage] = useState('');
-
-  const addMessage = (message: MessageData) => {
-    setMessages(prev => [...prev, message]);
-  }
+  const { messages, isLoading, sendMessage } = useMockChat();
+  const [input, setInput] = useState('');
 
-  const handleSendMessage = (e: React.FormEvent) => {
+  const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    if (newMessage.trim() === '') return;
-    addMessage({ author: 'User', content: newMessage, isUser: true });
-    setNewMessage('');
+    sendMessage(input);
+    setInput('');
   };
 
-  const handleSuggestionClick = (suggestion: string) => {
-    addMessage({ author: 'User', content: suggestion, isUser: true });
-  }
-
-  useEffect(() => {
-    const lastMessage = messages[messages.length - 1];
-    if (lastMessage?.isUser) {
-      addMessage({ author: 'AI Assistant', loading: true });
-
-      setTimeout(() => {
-        setMessages(prev => {
-          const newMessages = [...prev];
-          newMessages[newMessages.length - 1] = {
-            author: 'AI Assistant',
-            content: "That's a great idea! I am a mock AI, but I can certainly help you plan that. What components should be on the dashboard?",
-            suggestions: ["Stat Cards", "A Bar Chart", "A Data Table"]
-          };
-          return newMessages;
-        });
-      }, 1500);
-    }
-  }, [messages]);
-
   return (
-    <div className="p-4 sm:p-6 lg:p-8 space-y-8">
+    <div className="p-4 sm:p-6 lg:p-8 space-y-8 h-[calc(100vh-64px)] flex flex-col">
       <PageHeader
         title="AI Assistant"
-        description="This is the foundational interface for the Ramme AI prototyping assistant."
+        description="Full-screen command center for Ramme AI."
       />
-      <Card className="flex flex-col h-[600px]">
-        <Conversation>
-          {messages.map((msg, index) => (
-            <Message key={index} {...msg} onSuggestionClick={handleSuggestionClick} />
-          ))}
-        </Conversation>
-        <PromptInput
-          value={newMessage}
-          onChange={(e) => setNewMessage(e.target.value)}
-          onSubmit={handleSendMessage}
-        />
+      
+      {/* 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">
+          <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)}
+              />
+            ))}
+            {isLoading && <Message author="Bodewell AI" 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>
       </Card>
     </div>
   );

package/template/src/pages/Dashboard.tsx

@@ -7,14 +7,23 @@ import {
   StatCard,
   DataTable,
   useDataFetch,
+  DeviceCard, // <-- NEW: Import DeviceCard
   type ColDef,
   type ValueFormatterParams,
 } from '@ramme-io/ui';
+import { useSignal } from '../hooks/useSignal'; // <-- NEW: Import the Engine
 import { mockTableData, mockChartData } from '../data/mockData';
 
 const Dashboard: React.FC = () => {
+  // 1. Existing Logic (SaaS Data)
   const { data: fetchedTableData } = useDataFetch(null, mockTableData);
 
+  // 2. New Logic (IoT Engine)
+  const temp = useSignal('living_room_ac', { initialValue: 72, min: 68, max: 76, unit: '°F' });
+  const hum = useSignal('living_room_hum', { initialValue: 45, min: 40, max: 60, unit: '%' });
+  const cpu = useSignal('server_01', { initialValue: 42, min: 10, max: 95, unit: '%' });
+
+  // 3. Table Config
   const columnDefs: ColDef[] = [
     { field: 'make', headerName: 'Make', sortable: true, filter: true },
     { field: 'model', headerName: 'Model', sortable: true, filter: true },
@@ -33,43 +42,79 @@ const Dashboard: React.FC = () => {
   return (
     <div className="space-y-8">
       <PageHeader
-        title="Dashboard Overview"
-        description="A summary of key metrics and recent activity."
+        title="Command Center"
+        description="Real-time device monitoring and business analytics."
       />
 
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <StatCard
-          title="Total Users"
-          value="1,234"
-          icon="users"
-          changeText="+10% from last month"
-          changeDirection="positive"
-        />
-        <StatCard
-          title="Sales Today"
-          value="$5,678"
-          icon="dollar-sign"
-          changeText="+5% from yesterday"
-          changeDirection="positive"
-        />
-        <StatCard
-          title="New Orders"
-          value="89"
-          icon="shopping-cart"
-          changeText="-2 since last hour"
-          changeDirection="negative"
-        />
-        <StatCard
-          title="Active Projects"
-          value="12"
-          icon="briefcase"
-          footerText="3 nearing completion"
-        />
+      {/* --- SECTION 1: LIVE IOT STATUS (The New Stuff) --- */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4 text-foreground">Live Device Status</h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <DeviceCard
+            title="Living Room AC"
+            description="Zone A • Floor 1"
+            icon="thermometer"
+            status="online"
+            value={`${temp.value}${temp.unit}`}
+            trend="Cooling to 70°"
+          />
+          <DeviceCard
+            title="Air Quality"
+            description="Sensor ID: #8842"
+            icon="droplets"
+            status="active"
+            value={`${hum.value}${hum.unit}`}
+            trend="Stable"
+          />
+          <DeviceCard
+            title="Main Server"
+            description="192.168.1.42"
+            icon="server"
+            status={cpu.value > 90 ? 'error' : 'online'}
+            value={`${cpu.value}${cpu.unit}`}
+            trend="CPU Load"
+          />
+        </div>
+      </div>
+
+      {/* --- SECTION 2: BUSINESS METRICS (The Old Stuff) --- */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4 text-foreground">Business Overview</h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+          <StatCard
+            title="Total Users"
+            value="1,234"
+            icon="users"
+            changeText="+10% from last month"
+            changeDirection="positive"
+          />
+          <StatCard
+            title="Sales Today"
+            value="$5,678"
+            icon="dollar-sign"
+            changeText="+5% from yesterday"
+            changeDirection="positive"
+          />
+          <StatCard
+            title="New Orders"
+            value="89"
+            icon="shopping-cart"
+            changeText="-2 since last hour"
+            changeDirection="negative"
+          />
+          <StatCard
+            title="Active Projects"
+            value="12"
+            icon="briefcase"
+            footerText="3 nearing completion"
+          />
+        </div>
       </div>
 
+      {/* --- SECTION 3: ANALYTICS CHARTS --- */}
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         <Card className="p-6">
-          <h3 className="text-lg font-semibold mb-4 text-text-foreground">Monthly Revenue</h3>
+          <h3 className="text-lg font-semibold mb-4 text-foreground">Monthly Revenue</h3>
           <div className="h-[350px] w-full">
             <BarChart
               data={mockChartData}
@@ -79,7 +124,7 @@ const Dashboard: React.FC = () => {
           </div>
         </Card>
         <Card className="p-6">
-          <h3 className="text-lg font-semibold mb-4 text-text-foreground">User Growth</h3>
+          <h3 className="text-lg font-semibold mb-4 text-foreground">User Growth</h3>
           <div className="h-[350px] w-full">
             <LineChart
               data={mockChartData}
@@ -90,8 +135,9 @@ const Dashboard: React.FC = () => {
         </Card>
       </div>
 
+      {/* --- SECTION 4: DATA TABLE --- */}
       <Card className="p-6">
-        <h3 className="text-2xl font-semibold mb-4 text-text">Recent Vehicle Data</h3>
+        <h3 className="text-2xl font-semibold mb-4 text-foreground">Recent Vehicle Data</h3>
         {fetchedTableData && (
           <DataTable
             rowData={fetchedTableData}

package/template/src/templates/dashboard/DashboardLayout.tsx

@@ -1,5 +1,4 @@
-// ramme-app-starter/template/src/templates/dashboard/DashboardLayout.tsx
-import React from 'react';
+import React, { useState } from 'react'; // <-- Added useState
 import { Outlet, NavLink } from 'react-router-dom';
 import {
   Sidebar,
@@ -12,11 +11,13 @@ import {
   useSidebar,
   Button,
   Icon,
+  ChatFAB, // <-- NEW: Import FAB
 } from '@ramme-io/ui';
 import { dashboardSitemap } from './dashboard.sitemap';
 import { SitemapProvider } from '../../contexts/SitemapContext';
 import PageTitleUpdater from '../../components/PageTitleUpdater';
 import AppHeader from '../../components/AppHeader';
+import { AIChatWidget } from '../../components/AIChatWidget'; // <-- NEW: Import Widget
 
 // NavLink wrapper - Correct
 const SidebarNavLink = React.forwardRef<HTMLAnchorElement, any>(
@@ -51,8 +52,6 @@ const AppSidebarContent: React.FC = () => {
               <SidebarMenuItem
                 as={SidebarNavLink}
                 href={item.path ? `/dashboard/${item.path}` : '/dashboard'}
-                // --- THIS IS THE FIX ---
-                // Force exact match for all parent links
                 end
                 icon={item.icon ? <Icon name={item.icon} /> : undefined}
                 tooltip={item.title}
@@ -66,12 +65,10 @@ const AppSidebarContent: React.FC = () => {
                     key={child.id}
                     as={SidebarNavLink}
                     href={`/dashboard/${item.path}/${child.path}`}
-                    // --- THIS IS THE FIX ---
-                    // 'end' was already here, which is correct
                     end
                     icon={child.icon ? <Icon name={child.icon} /> : undefined}
                     tooltip={child.title}
-                    className="pl-10" // Indent child items
+                    className="pl-10" 
                   >
                     {child.title}
                   </SidebarMenuItem>
@@ -88,11 +85,14 @@ const AppSidebarContent: React.FC = () => {
 
 // Main Layout Component
 const DashboardLayout: React.FC = () => {
+  // 1. STATE: Track if the chat window is open
+  const [isChatOpen, setIsChatOpen] = useState(false);
+
   return (
     <SitemapProvider value={dashboardSitemap}>
       <PageTitleUpdater />
       <SidebarProvider>
-        <div className="flex h-screen bg-background text-foreground">
+        <div className="flex h-screen bg-background text-foreground relative">
           <Sidebar>
             <AppSidebarContent />
           </Sidebar>
@@ -102,6 +102,22 @@ const DashboardLayout: React.FC = () => {
               <Outlet />
             </main>
           </div>
+
+          {/* --- AI COPILOT SECTION --- */}
+          
+          {/* 2. The Widget: Only renders when open */}
+          {isChatOpen && (
+            <AIChatWidget onClose={() => setIsChatOpen(false)} />
+          )}
+
+          {/* 3. The Button: Fixed to bottom-right */}
+          <div className="fixed bottom-6 right-6 z-50">
+            <ChatFAB 
+              onClick={() => setIsChatOpen(!isChatOpen)} 
+              tooltipContent={isChatOpen ? "Close Assistant" : "Open Bodewell AI"}
+            />
+          </div>
+
         </div>
       </SidebarProvider>
     </SitemapProvider>

package/template/src/types/schema.ts

@@ -0,0 +1,26 @@
+// src/types/schema.ts
+import { z } from 'zod';
+
+// 1. Define what a "Signal" looks like in the config (Static definition)
+export const SignalSchema = z.object({
+  id: z.string(),
+  label: z.string(),
+  kind: z.enum(['sensor', 'setpoint', 'state']),
+  unit: z.string().optional(),
+  min: z.number().optional(),
+  max: z.number().optional(),
+});
+
+// 2. Define the Application Specification
+export const AppSpecificationSchema = z.object({
+  name: z.string(),
+  description: z.string().optional(),
+  version: z.string().default("1.0.0"),
+  theme: z.enum(['light', 'dark', 'system']).default('system'),
+  // We will add 'pages' and 'navigation' here later
+  signals: z.array(SignalSchema).default([]),
+});
+
+// Export the Types
+export type SignalDef = z.infer<typeof SignalSchema>;
+export type AppSpecification = z.infer<typeof AppSpecificationSchema>;

package/template/src/types/signal.ts

@@ -0,0 +1,22 @@
+// src/types/signal.ts
+/**
+ * @file signal.d.ts
+ * @description Defines the universal contract for "Live Data" in the Ramme ecosystem.
+ *
+ * A "Signal" is a single data point that changes over time.
+ * unlike a "Record" (which is static database row), a Signal is ephemeral.
+ */
+
+export type SignalStatus = 'fresh' | 'stale' | 'disconnected' | 'error';
+
+export interface Signal<T = any> {
+  id: string;          // The unique ID (e.g., "temp_01")
+  value: T;            // The actual data (e.g., 24.5)
+  unit?: string;       // Optional unit (e.g., "°C")
+  timestamp: number;   // Unix timestamp of last update
+  status: SignalStatus;
+  meta?: Record<string, any>; // Extra metadata (e.g., limits)
+}
+
+// A simple map for looking up signals by ID
+export type SignalMap = Record<string, Signal>;