added dart pad

app/components/DartPadEmbed.tsx

@@ -0,0 +1,170 @@
+'use client'
+
+import React, { useEffect, useRef } from 'react'
+
+interface DartPadEmbedProps {
+    code: string
+    theme?: 'light' | 'dark'
+}
+
+export function DartPadEmbed({ code, theme = 'light' }: DartPadEmbedProps) {
+    const iframeRef = useRef<HTMLIFrameElement>(null)
+
+    useEffect(() => {
+        // Load DartPad embed script
+        const script = document.createElement('script')
+        script.src = 'https://dartpad.dev/inject_embed.dart.js'
+        script.defer = true
+        document.body.appendChild(script)
+
+        return () => {
+            document.body.removeChild(script)
+        }
+    }, [])
+
+    // We can't easily inject code into the iframe via URL params for the standard embed-flutter.html
+    // The standard way is to use a gist ID or just let the user type.
+    // However, the user's example implies passing code directly.
+    // The inject_embed.dart.js script looks for HTML elements with specific classes, but here we are using an iframe directly.
+    // Actually, looking at the user's example:
+    // src={`https://dartpad.dev/embed-flutter.html?theme=${theme}`}
+    // And they pass `code` prop but don't seem to use it in the src in their example?
+    // Wait, the user's example has:
+    // <DartPadEmbed code={flutterCode} theme="dark" />
+    // But the component implementation they provided:
+    // export default function DartPadEmbed({ code, theme = 'light' }) { ... }
+    // It DOES NOT use `code` in the return!
+    // It just renders the iframe.
+    // This means the user might expect me to figure out how to inject the code, OR the user's example is incomplete/simplified.
+
+    // If I look at DartPad embedding docs, usually you use a gist ID.
+    // However, there is a way to use `inject_embed.dart.js` on a `div` or `pre` tag containing the code.
+    // The user's example uses an iframe AND the script. This is contradictory.
+    // If you use the script, you don't create the iframe yourself; the script replaces a div with the iframe.
+    // If you use the iframe directly, you usually pass a gist ID in the URL.
+
+    // Let's look closely at the user's request:
+    // "remove zapp and use dartembed api here is a code example"
+    // The example creates a script tag for `inject_embed.dart.js` BUT renders an iframe manually.
+    // This suggests the user might be confused or I am missing something about how that script works with existing iframes.
+    // BUT, if I use the script, I should probably render a div with the code and let the script do its work.
+
+    // Let's try to implement it using the "inject" method which is what the script is for.
+    // The script looks for elements with `data-dartpad-embed`.
+
+    // HOWEVER, the user explicitly provided this return:
+    // return (
+    //   <iframe
+    //     ref={iframeRef}
+    //     src={`https://dartpad.dev/embed-flutter.html?theme=${theme}`}
+    //     style={{ width: '100%', height: '500px', border: 'none' }}
+    //   />
+    // );
+
+    // If I just do that, the code won't be there.
+    // Maybe I should try to postMessage the code to the iframe?
+    // Or maybe the user just wants the environment and will paste the code?
+    // "The user wants to replace "zapp" with "dartembed" (DartPad) for running Flutter code."
+    // If I can't inject the code, it's not very useful as a "Runner".
+
+    // Let's check if there is a URL parameter for code.
+    // Research suggests `?code=` might work for some versions, or `?id=` for gists.
+    // There is also a protobuf encoding for code in URL but that's complex.
+
+    // Alternative: The `inject_embed.dart.js` is designed to take a DOM element and turn it into an embed.
+    // If the user provided code has `useEffect` loading that script, maybe they intended to use the injection method but wrote the iframe part wrong?
+    // OR, maybe they want me to use the iframe and somehow get the code in.
+
+    // Let's try to implement the "Injection" method which is the standard way to use that script.
+    // It takes a div with code and replaces it.
+
+    // Wait, if I use the injection method, I don't need the iframe in my JSX.
+    // I'll render a div with the code.
+
+    // Let's try to stick to the user's example as much as possible but make it work.
+    // If I strictly follow their example, I render an iframe that ignores the code.
+    // That seems wrong.
+
+    // Let's try to use the `inject_embed.dart.js` properly.
+    // It replaces elements with `class="dartpad-embed-flutter"`.
+
+    // But wait, the user's example:
+    // src={`https://dartpad.dev/embed-flutter.html?theme=${theme}`}
+    // This is a direct embed.
+
+    // Let's assume the user wants me to use the iframe approach but maybe missed how to pass code.
+    // Actually, looking at `https://github.com/dart-lang/dart-pad/wiki/Embedding-Guide`, 
+    // "You can also embed DartPad by using an iframe directly."
+    // "To initialize the editor with specific code, you can use a GitHub Gist."
+    // It doesn't seem to support direct code injection via URL for arbitrary large code blocks easily without encoding.
+
+    // HOWEVER, the `inject_embed.dart.js` method allows putting code in the body of the element.
+    // So I will use that method instead of the iframe, as it allows passing `code` prop easily.
+
+    // Refined plan for DartPadEmbed.tsx:
+    // Render a div with the correct class and the code inside.
+    // The script will find it and replace it with the iframe.
+
+    // But the user specifically gave me an example with an iframe ref.
+    // Maybe I should try to support what they gave.
+    // "remove zapp and use dartembed api here is a code example // components/DartPadEmbed.jsx"
+
+    // Let's look at the user's code again.
+    // It imports `useEffect`, `useRef`.
+    // It loads the script.
+    // It returns an iframe.
+    // This is indeed a bit weird.
+
+    // Let's try to implement a hybrid that works.
+    // If I use the `inject_embed.dart.js`, I should render:
+    // <div className="dartpad-embed-flutter">{code}</div>
+
+    // If I do that, I don't need the iframe in JSX.
+    // I will assume the user's INTENT is to have the code run, and their example was just a pointer to the library/script.
+    // I will implement it using the injection method because it's the only way to pass code without a Gist.
+
+    // Wait, there is a limitation with the injection method in React:
+    // React might get confused if the DOM is modified by an external script.
+    // But since we are replacing a node, maybe it's fine if we don't update it often.
+    // Or we can use a ref to a container and append the element manually.
+
+    return (
+        <div className="w-full h-full">
+            <div
+                className="dartpad-embed-flutter"
+                data-theme={theme}
+                data-run="true"
+                style={{ width: '100%', height: '500px' }}
+            >
+                {code}
+            </div>
+        </div>
+    )
+}
+
+// Wait, if I change the code, will it update?
+// The script runs once. If `code` prop changes, React re-renders the div text.
+// But if the script has already replaced the div with an iframe, React might fail to update or the update won't be reflected in DartPad.
+// This is tricky.
+// The `FlutterRunner` has a "Run" button (or "Preview").
+// Maybe we only mount `DartPadEmbed` when we want to run?
+// In `FlutterRunner`, `mode === 'preview'` renders the preview.
+// If we switch to edit and back, it remounts.
+// So passing the code on mount is sufficient.
+
+// Let's try to implement `DartPadEmbed` using the injection method as it seems most robust for "passing code".
+// I'll use the user's provided script URL.
+
+// Re-reading the user's code:
+// They return an iframe.
+// Maybe they want me to use the iframe and the script is just... there?
+// No, that makes no sense.
+// I'll stick to the injection method which uses the script to create the embed.
+// I will ignore the iframe part of their example in favor of making it actually work with the provided code.
+
+// Actually, looking at the `inject_embed.dart.js` source or docs:
+// It looks for `{{ site.dartpad_embed_class }}` which defaults to `dartpad-embed-flutter` (or similar).
+// I'll use `dartpad-embed-flutter`.
+
+// Let's write `DartPadEmbed.tsx`.
+

app/components/Desktop.tsx

@@ -6,7 +6,7 @@ import { TopBar } from './TopBar'
 import { FileManager } from './FileManager'
 import { Calendar } from './Calendar'
 import { DraggableDesktopIcon } from './DraggableDesktopIcon'
-import { MatrixRain } from './MatrixRain'
+
 import { HelpModal } from './HelpModal'
 import { DesktopContextMenu } from './DesktopContextMenu'
 import { BackgroundSelector } from './BackgroundSelector'
@@ -20,6 +20,7 @@ import { AboutModal } from './AboutModal'
 import { SessionManagerWindow } from './SessionManagerWindow'
 import { FlutterRunner } from './FlutterRunner'
 import { motion, AnimatePresence } from 'framer-motion'
+import { SystemPowerOverlay } from './SystemPowerOverlay'
 
 export function Desktop() {
   const [fileManagerOpen, setFileManagerOpen] = useState(true)
@@ -35,7 +36,7 @@ export function Desktop() {
   const [sessionKey, setSessionKey] = useState<string>('')
   const [sessionInitialized, setSessionInitialized] = useState(false)
   const [currentPath, setCurrentPath] = useState('')
-  const [matrixActive, setMatrixActive] = useState(false)
+
   const [helpModalOpen, setHelpModalOpen] = useState(false)
   const [contextMenuOpen, setContextMenuOpen] = useState(false)
   const [contextMenuPos, setContextMenuPos] = useState({ x: 0, y: 0 })
@@ -45,6 +46,7 @@ export function Desktop() {
   const [sessionManagerOpen, setSessionManagerOpen] = useState(false)
   const [flutterRunnerOpen, setFlutterRunnerOpen] = useState(false)
   const [activeFlutterApp, setActiveFlutterApp] = useState<any>(null)
+  const [powerState, setPowerState] = useState<'active' | 'sleep' | 'restart' | 'shutdown'>('active')
 
   const openFileManager = (path: string) => {
     setCurrentPath(path)
@@ -153,13 +155,7 @@ export function Desktop() {
     }
   }
 
-  const triggerMatrix = () => {
-    setMatrixActive(true)
-  }
 
-  const handleMatrixComplete = () => {
-    setMatrixActive(false)
-  }
 
   const openHelpModal = () => {
     setHelpModalOpen(true)
@@ -195,37 +191,42 @@ export function Desktop() {
     }
   }
 
+  const handleSleep = () => setPowerState('sleep')
+  const handleRestart = () => setPowerState('restart')
+  const handleShutdown = () => setPowerState('shutdown')
+  const handleWake = () => setPowerState('active')
+
   // Initialize session automatically on mount
   useEffect(() => {
     const initializeSession = async () => {
-        // Check if session already exists in localStorage
-        const savedSessionId = localStorage.getItem('reubenOS_sessionId')
-
-        if (savedSessionId) {
-          // Validate the saved session first using session ID
-          console.log('🔍 Validating existing session:', savedSessionId)
-          try {
-            const validateResponse = await fetch('/api/sessions/verify', {
-              method: 'POST',
-              headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify({ sessionId: savedSessionId })
-            })
-            const validateData = await validateResponse.json()
-
-            if (validateData.success && validateData.valid) {
-              // Session is still valid - use it
-              setUserSession(savedSessionId)
-              setSessionKey(savedSessionId) // Use session ID as session key
-              setSessionInitialized(true)
-              console.log('✅ Existing session is valid:', savedSessionId)
-              return
-            } else {
-              console.log('⚠️ Existing session is invalid, creating new one...')
-            }
-          } catch (error) {
-            console.error('Failed to validate session, creating new one:', error)
+      // Check if session already exists in localStorage
+      const savedSessionId = localStorage.getItem('reubenOS_sessionId')
+
+      if (savedSessionId) {
+        // Validate the saved session first using session ID
+        console.log('🔍 Validating existing session:', savedSessionId)
+        try {
+          const validateResponse = await fetch('/api/sessions/verify', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ sessionId: savedSessionId })
+          })
+          const validateData = await validateResponse.json()
+
+          if (validateData.success && validateData.valid) {
+            // Session is still valid - use it
+            setUserSession(savedSessionId)
+            setSessionKey(savedSessionId) // Use session ID as session key
+            setSessionInitialized(true)
+            console.log('✅ Existing session is valid:', savedSessionId)
+            return
+          } else {
+            console.log('⚠️ Existing session is invalid, creating new one...')
           }
+        } catch (error) {
+          console.error('Failed to validate session, creating new one:', error)
         }
+      }
 
       // Create new session (either no saved session or validation failed)
       try {
@@ -242,16 +243,16 @@ export function Desktop() {
 
         const data = await response.json()
 
-          if (data.success) {
-            setUserSession(data.session.id)
-            setSessionKey(data.session.id) // Use session ID as session key
-            setSessionInitialized(true)
+        if (data.success) {
+          setUserSession(data.session.id)
+          setSessionKey(data.session.id) // Use session ID as session key
+          setSessionInitialized(true)
 
-            // Save to localStorage (only need session ID now)
-            localStorage.setItem('reubenOS_sessionId', data.session.id)
+          // Save to localStorage (only need session ID now)
+          localStorage.setItem('reubenOS_sessionId', data.session.id)
 
-            console.log('✅ Created fresh session:', data.session.id)
-          }
+          console.log('✅ Created fresh session:', data.session.id)
+        }
       } catch (error) {
         console.error('Failed to create session:', error)
       }
@@ -326,7 +327,12 @@ export function Desktop() {
         </svg>
       </div>
 
-      <TopBar onPowerAction={triggerMatrix} onAboutClick={() => setAboutModalOpen(true)} />
+      <TopBar
+        onAboutClick={() => setAboutModalOpen(true)}
+        onSleep={handleSleep}
+        onRestart={handleRestart}
+        onShutdown={handleShutdown}
+      />
 
       <Dock onOpenFileManager={openFileManager} onOpenCalendar={openCalendar} onOpenClock={openClock} onOpenBrowser={openBrowser} onOpenGeminiChat={openGeminiChat} />
 
@@ -550,10 +556,7 @@ export function Desktop() {
         onAction={handleContextMenuAction}
       />
 
-      {/* Matrix Rain Effect */}
-      <div onClick={handleMatrixComplete} style={{ cursor: matrixActive ? 'pointer' : 'default' }}>
-        <MatrixRain isActive={matrixActive} onComplete={handleMatrixComplete} />
-      </div>
+
 
       {/* Help Modal */}
       <HelpModal isOpen={helpModalOpen} onClose={closeHelpModal} />
@@ -574,6 +577,13 @@ export function Desktop() {
         currentBackground={currentBackground}
       />
 
+      {/* System Power Overlay */}
+      <SystemPowerOverlay
+        state={powerState}
+        onWake={handleWake}
+        onRestartComplete={handleWake}
+      />
+
       {/* About Modal */}
       <AboutModal
         isOpen={aboutModalOpen}

app/components/FlutterRunner.tsx

@@ -4,6 +4,7 @@ import React, { useState, useRef, useEffect } from 'react'
 import Window from './Window'
 import { Copy, CaretRight, CaretLeft, Code as CodeIcon, Play, FloppyDisk, PencilSimple } from '@phosphor-icons/react'
 import Editor from '@monaco-editor/react'
+import { DartPadEmbed } from './DartPadEmbed'
 
 interface FlutterRunnerProps {
   file: {
@@ -24,7 +25,6 @@ export function FlutterRunner({ file, onClose }: FlutterRunnerProps) {
   const [pubspec, setPubspec] = useState(file.pubspecYaml || '')
   const [saving, setSaving] = useState(false)
   const [saved, setSaved] = useState(false)
-  const iframeRef = useRef<HTMLIFrameElement>(null)
 
   // Detect mobile and auto-close sidebar on mobile landscape
   React.useEffect(() => {
@@ -89,14 +89,6 @@ export function FlutterRunner({ file, onClose }: FlutterRunnerProps) {
     }
   }
 
-  const handleRunInZapp = () => {
-    // Copy code and open Zapp in a new window
-    navigator.clipboard.writeText(code)
-    window.open('https://zapp.run', '_blank')
-    setCopySuccess(true)
-    setTimeout(() => setCopySuccess(false), 2000)
-  }
-
   return (
     <Window
       id="flutter-runner"
@@ -143,43 +135,17 @@ export function FlutterRunner({ file, onClose }: FlutterRunnerProps) {
                 {saving ? 'Saving...' : saved ? 'Saved!' : 'Save'}
               </button>
             )}
-            <button
-              onClick={handleRunInZapp}
-              className="flex items-center gap-2 px-3 py-1.5 bg-purple-500 hover:bg-purple-600 text-white rounded-lg transition-colors text-sm font-medium"
-            >
-              <Play size={16} weight="bold" />
-              Run in Zapp
-            </button>
           </div>
         </div>
 
         {/* Main Content Area */}
         <div className="flex flex-1 overflow-hidden relative">
-          {/* Left Panel - Code Editor or Zapp Preview */}
-          <div className="flex-1 relative">
+          {/* Left Panel - Code Editor or DartPad Preview */}
+          <div className="flex-1 relative bg-gray-900">
             {mode === 'preview' ? (
-              <>
-                <iframe
-                  ref={iframeRef}
-                  src="https://zapp.run"
-                  className="w-full h-full border-0"
-                  allow="accelerometer; camera; encrypted-media; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write"
-                  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts allow-downloads"
-                  title="Zapp Flutter IDE"
-                />
-                
-                {/* Instruction overlay */}
-                {!(isMobile && sidebarOpen) && (
-                  <div className="absolute top-4 left-4 right-4 bg-blue-500/90 backdrop-blur-sm text-white px-4 py-3 rounded-lg shadow-lg border border-blue-400/50">
-                    <div className="flex items-center gap-2">
-                      <CodeIcon size={20} weight="bold" />
-                      <p className="text-sm font-medium">
-                        Click "Run in Zapp" to copy code and open Zapp in a new tab!
-                      </p>
-                    </div>
-                  </div>
-                )}
-              </>
+              <div className="w-full h-full overflow-hidden">
+                <DartPadEmbed code={code} theme="dark" />
+              </div>
             ) : (
               <div className="w-full h-full bg-gray-900">
                 <Editor
@@ -199,107 +165,96 @@ export function FlutterRunner({ file, onClose }: FlutterRunnerProps) {
                 />
               </div>
             )}
-        </div>
-
-        {/* Collapsible Sidebar */}
-        {sidebarOpen && (
-          <div className={`${isMobile ? 'w-full absolute right-0 top-0 bottom-0 z-10' : 'w-[350px]'} border-l border-gray-200 bg-gradient-to-b from-gray-50 to-white flex flex-col shadow-lg`}>
-            {/* Sidebar Header */}
-            <div className="h-12 bg-gradient-to-r from-cyan-500 to-blue-500 flex items-center justify-between px-4 text-white">
-              <div className="flex items-center gap-2">
-                <CodeIcon size={20} weight="bold" />
-                <span className="font-semibold text-sm">Source Code</span>
-              </div>
-              <button
-                onClick={() => setSidebarOpen(false)}
-                className="hover:bg-white/20 p-1 rounded transition-colors"
-                title="Close sidebar"
-              >
-                <CaretRight size={20} weight="bold" />
-              </button>
-            </div>
+          </div>
 
-            {/* Sidebar Content */}
-            <div className="flex-1 overflow-y-auto p-4 space-y-4">
-              {/* Dart Code Section */}
-              <div className="space-y-2">
-                <div className="flex items-center justify-between">
-                  <h3 className="text-sm font-semibold text-gray-700">Main Dart Code</h3>
-                  <button
-                    onClick={handleCopyCode}
-                    className="flex items-center gap-1 px-3 py-1.5 bg-cyan-500 hover:bg-cyan-600 text-white text-xs rounded-md transition-colors shadow-sm"
-                  >
-                    <Copy size={14} weight="bold" />
-                    {copySuccess ? 'Copied!' : 'Copy'}
-                  </button>
-                </div>
-                <div className="bg-gray-900 rounded-lg p-3 max-h-64 overflow-y-auto">
-                  <pre className="text-xs text-green-400 font-mono whitespace-pre-wrap break-words">
-                    {code}
-                  </pre>
+          {/* Collapsible Sidebar */}
+          {sidebarOpen && (
+            <div className={`${isMobile ? 'w-full absolute right-0 top-0 bottom-0 z-10' : 'w-[350px]'} border-l border-gray-200 bg-gradient-to-b from-gray-50 to-white flex flex-col shadow-lg`}>
+              {/* Sidebar Header */}
+              <div className="h-12 bg-gradient-to-r from-cyan-500 to-blue-500 flex items-center justify-between px-4 text-white">
+                <div className="flex items-center gap-2">
+                  <CodeIcon size={20} weight="bold" />
+                  <span className="font-semibold text-sm">Source Code</span>
                 </div>
-                <p className="text-xs text-gray-600 italic">
-                  💡 Paste this code into <code className="bg-gray-100 px-1 py-0.5 rounded">lib/main.dart</code> in Zapp
-                </p>
+                <button
+                  onClick={() => setSidebarOpen(false)}
+                  className="hover:bg-white/20 p-1 rounded transition-colors"
+                  title="Close sidebar"
+                >
+                  <CaretRight size={20} weight="bold" />
+                </button>
               </div>
 
-              {/* Dependencies Section */}
-              {file.dependencies && file.dependencies.length > 0 && (
-                <div className="space-y-2">
-                  <h3 className="text-sm font-semibold text-gray-700">Dependencies</h3>
-                  <div className="bg-blue-50 rounded-lg p-3 border border-blue-100">
-                    <ul className="space-y-1">
-                      {file.dependencies.map((dep, index) => (
-                        <li key={index} className="text-xs font-mono text-blue-900">
-                          • {dep}
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                  <p className="text-xs text-gray-600 italic">
-                    💡 Add these to <code className="bg-gray-100 px-1 py-0.5 rounded">pubspec.yaml</code> in Zapp
-                  </p>
-                </div>
-              )}
-
-              {/* Pubspec.yaml Section */}
-              {pubspec && (
+              {/* Sidebar Content */}
+              <div className="flex-1 overflow-y-auto p-4 space-y-4">
+                {/* Dart Code Section */}
                 <div className="space-y-2">
                   <div className="flex items-center justify-between">
-                    <h3 className="text-sm font-semibold text-gray-700">pubspec.yaml</h3>
+                    <h3 className="text-sm font-semibold text-gray-700">Main Dart Code</h3>
                     <button
-                      onClick={handleCopyPubspec}
-                      className="flex items-center gap-1 px-3 py-1.5 bg-purple-500 hover:bg-purple-600 text-white text-xs rounded-md transition-colors shadow-sm"
+                      onClick={handleCopyCode}
+                      className="flex items-center gap-1 px-3 py-1.5 bg-cyan-500 hover:bg-cyan-600 text-white text-xs rounded-md transition-colors shadow-sm"
                     >
                       <Copy size={14} weight="bold" />
-                      Copy
+                      {copySuccess ? 'Copied!' : 'Copy'}
                     </button>
                   </div>
-                  <div className="bg-gray-900 rounded-lg p-3 max-h-48 overflow-y-auto">
-                    <pre className="text-xs text-yellow-400 font-mono whitespace-pre-wrap break-words">
-                      {pubspec}
+                  <div className="bg-gray-900 rounded-lg p-3 max-h-64 overflow-y-auto">
+                    <pre className="text-xs text-green-400 font-mono whitespace-pre-wrap break-words">
+                      {code}
                     </pre>
                   </div>
-                  <p className="text-xs text-gray-600 italic">
-                    💡 Replace the entire <code className="bg-gray-100 px-1 py-0.5 rounded">pubspec.yaml</code> file
-                  </p>
                 </div>
-              )}
 
-              {/* Instructions */}
-              <div className="bg-gradient-to-br from-green-50 to-emerald-50 rounded-lg p-4 border border-green-200">
-                <h3 className="text-sm font-semibold text-green-800 mb-2">Quick Start</h3>
-                <ol className="text-xs text-green-900 space-y-1.5 list-decimal list-inside">
-                  <li>Click <strong>"Edit Code"</strong> to modify the code</li>
-                  <li>Click <strong>"Save"</strong> to save your changes</li>
-                  <li>Click <strong>"Run in Zapp"</strong> to test in Zapp</li>
-                  <li>In Zapp, paste into <code className="bg-white px-1 py-0.5 rounded text-xs">lib/main.dart</code></li>
-                  <li>Click the run button in Zapp!</li>
-                </ol>
+                {/* Dependencies Section */}
+                {file.dependencies && file.dependencies.length > 0 && (
+                  <div className="space-y-2">
+                    <h3 className="text-sm font-semibold text-gray-700">Dependencies</h3>
+                    <div className="bg-blue-50 rounded-lg p-3 border border-blue-100">
+                      <ul className="space-y-1">
+                        {file.dependencies.map((dep, index) => (
+                          <li key={index} className="text-xs font-mono text-blue-900">
+                            • {dep}
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  </div>
+                )}
+
+                {/* Pubspec.yaml Section */}
+                {pubspec && (
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <h3 className="text-sm font-semibold text-gray-700">pubspec.yaml</h3>
+                      <button
+                        onClick={handleCopyPubspec}
+                        className="flex items-center gap-1 px-3 py-1.5 bg-purple-500 hover:bg-purple-600 text-white text-xs rounded-md transition-colors shadow-sm"
+                      >
+                        <Copy size={14} weight="bold" />
+                        Copy
+                      </button>
+                    </div>
+                    <div className="bg-gray-900 rounded-lg p-3 max-h-48 overflow-y-auto">
+                      <pre className="text-xs text-yellow-400 font-mono whitespace-pre-wrap break-words">
+                        {pubspec}
+                      </pre>
+                    </div>
+                  </div>
+                )}
+
+                {/* Instructions */}
+                <div className="bg-gradient-to-br from-green-50 to-emerald-50 rounded-lg p-4 border border-green-200">
+                  <h3 className="text-sm font-semibold text-green-800 mb-2">Quick Start</h3>
+                  <ol className="text-xs text-green-900 space-y-1.5 list-decimal list-inside">
+                    <li>Click <strong>"Edit Code"</strong> to modify the code</li>
+                    <li>Click <strong>"Save"</strong> to save your changes</li>
+                    <li>Click <strong>"Preview"</strong> to run in DartPad</li>
+                  </ol>
+                </div>
               </div>
             </div>
-          </div>
-        )}
+          )}
 
           {/* Sidebar Toggle Button (when closed) */}
           {!sidebarOpen && (

app/components/MatrixRain.tsx

@@ -1,237 +0,0 @@
-'use client'
-
-import React, { useEffect, useRef, useState } from 'react'
-import { motion, AnimatePresence } from 'framer-motion'
-
-interface MatrixRainProps {
-  isActive: boolean
-  onComplete?: () => void
-}
-
-export function MatrixRain({ isActive, onComplete }: MatrixRainProps) {
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-  const [showText, setShowText] = useState(false)
-  const requestRef = useRef<number>(0)
-
-  useEffect(() => {
-    if (!isActive) return
-
-    const canvas = canvasRef.current
-    if (!canvas) return
-
-    const ctx = canvas.getContext('2d')
-    if (!ctx) return
-
-    // Set canvas size
-    const resizeCanvas = () => {
-      canvas.width = window.innerWidth
-      canvas.height = window.innerHeight
-    }
-    resizeCanvas()
-    window.addEventListener('resize', resizeCanvas)
-
-    // Configuration
-    const fontSize = 16
-    const columns = Math.ceil(canvas.width / fontSize)
-
-    // State for each column
-    // y: current vertical position
-    // speed: speed of the drop
-    // chars: array of characters in this column (for potential future complex effects, currently just generating on fly)
-    // lastDraw: timestamp of last update to control speed
-    const drops: { y: number; speed: number; lastDraw: number }[] = []
-
-    for (let i = 0; i < columns; i++) {
-      drops[i] = {
-        y: Math.random() * -1000, // Start above screen randomly
-        speed: Math.random() * 0.5 + 0.5, // Random speed between 0.5 and 1.0
-        lastDraw: 0
-      }
-    }
-
-    // Katakana + Latin + Numbers
-    const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン'
-    const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
-    const nums = '0123456789'
-    const alphabet = katakana + latin + nums
-
-    let lastTime = 0
-    const fps = 30
-    const frameInterval = 1000 / fps
-
-    const draw = (timestamp: number) => {
-      if (!ctx || !canvas) return
-
-      const deltaTime = timestamp - lastTime
-
-      if (deltaTime > frameInterval) {
-        lastTime = timestamp - (deltaTime % frameInterval)
-
-        // Semi-transparent black to create fade effect
-        // Adjust opacity for trail length (lower = longer trails)
-        ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'
-        ctx.fillRect(0, 0, canvas.width, canvas.height)
-
-        ctx.font = `${fontSize}px monospace`
-        ctx.textAlign = 'center'
-
-        for (let i = 0; i < drops.length; i++) {
-          const drop = drops[i]
-
-          // Draw character
-          const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length))
-          const x = i * fontSize
-
-          // Glowing head effect
-          ctx.fillStyle = '#FFF' // White head
-          ctx.shadowBlur = 8
-          ctx.shadowColor = '#FFF'
-          ctx.fillText(text, x, drop.y * fontSize)
-
-          // Reset shadow for next characters (though we are clearing screen, this is for the trail effect if we were drawing full columns)
-          ctx.shadowBlur = 0
-
-          // Draw the trail character (slightly above the head)
-          // Actually, the fade effect handles the trail. We just need to draw the new head.
-          // To make it look "better", we can draw a green character at the same spot in the NEXT frame, 
-          // but the fade rect handles the "turning green" part naturally if we just draw white.
-          // However, standard matrix is: Head is white, immediate trail is bright green, tail is dark green.
-          // With the fade rect method, everything drawn turns darker green over time.
-          // So drawing White is correct for the head.
-
-          // Let's also draw a green character strictly at the previous position to ensure it stays green and not just faded white
-          ctx.fillStyle = '#0F0'
-          ctx.fillText(text, x, (drop.y - 1) * fontSize)
-
-          // Move drop
-          if (drop.y * fontSize > canvas.height && Math.random() > 0.975) {
-            drop.y = 0
-            drop.speed = Math.random() * 0.5 + 0.5 // New random speed
-          }
-
-          drop.y += drop.speed
-        }
-      }
-
-      requestRef.current = requestAnimationFrame(draw)
-    }
-
-    requestRef.current = requestAnimationFrame(draw)
-
-    // Special text timer
-    const specialWordTimer = setTimeout(() => {
-      setShowText(true)
-    }, 1500)
-
-    return () => {
-      window.removeEventListener('resize', resizeCanvas)
-      if (requestRef.current) cancelAnimationFrame(requestRef.current)
-      clearTimeout(specialWordTimer)
-    }
-  }, [isActive])
-
-  // Auto-complete
-  useEffect(() => {
-    if (!isActive) return
-    const timer = setTimeout(() => {
-      onComplete?.()
-    }, 8000) // Extended to 8s to enjoy the view
-    return () => clearTimeout(timer)
-  }, [isActive, onComplete])
-
-  return (
-    <AnimatePresence>
-      {isActive && (
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-          transition={{ duration: 1 }}
-          className="fixed inset-0 z-[9999] bg-black cursor-pointer"
-          onClick={onComplete}
-        >
-          <canvas
-            ref={canvasRef}
-            className="absolute inset-0 block"
-          />
-
-          <AnimatePresence>
-            {showText && (
-              <motion.div
-                initial={{ opacity: 0, scale: 0.8, filter: 'blur(10px)' }}
-                animate={{ opacity: 1, scale: 1, filter: 'blur(0px)' }}
-                exit={{ opacity: 0, scale: 1.2, filter: 'blur(20px)' }}
-                transition={{ duration: 1.5, ease: "easeOut" }}
-                className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none z-10"
-              >
-                <div className="relative">
-                  <motion.h1
-                    className="text-transparent font-mono font-bold tracking-[0.2em] text-6xl md:text-8xl lg:text-9xl"
-                    style={{
-                      WebkitTextStroke: '2px #0F0',
-                      textShadow: '0 0 20px rgba(0, 255, 0, 0.5)'
-                    }}
-                    animate={{
-                      textShadow: [
-                        '0 0 20px rgba(0, 255, 0, 0.5)',
-                        '0 0 40px rgba(0, 255, 0, 0.8)',
-                        '0 0 20px rgba(0, 255, 0, 0.5)'
-                      ]
-                    }}
-                    transition={{ duration: 2, repeat: Infinity }}
-                  >
-                    REUBENOS
-                  </motion.h1>
-
-                  {/* Glitch effect layers */}
-                  <motion.h1
-                    className="absolute top-0 left-0 text-[#0F0] font-mono font-bold tracking-[0.2em] text-6xl md:text-8xl lg:text-9xl opacity-50 mix-blend-screen"
-                    animate={{
-                      x: [-2, 2, -2],
-                      y: [1, -1, 1],
-                      opacity: [0.5, 0.3, 0.5]
-                    }}
-                    transition={{ duration: 0.2, repeat: Infinity, repeatType: "mirror" }}
-                  >
-                    REUBENOS
-                  </motion.h1>
-                  <motion.h1
-                    className="absolute top-0 left-0 text-[#F00] font-mono font-bold tracking-[0.2em] text-6xl md:text-8xl lg:text-9xl opacity-30 mix-blend-screen"
-                    animate={{
-                      x: [2, -2, 2],
-                      y: [-1, 1, -1],
-                    }}
-                    transition={{ duration: 0.3, repeat: Infinity, repeatType: "mirror" }}
-                  >
-                    REUBENOS
-                  </motion.h1>
-                </div>
-
-                <motion.div
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ delay: 0.5, duration: 0.8 }}
-                  className="mt-8 flex flex-col items-center gap-2"
-                >
-                  <div className="text-[#0F0] font-mono text-xl tracking-widest uppercase">
-                    System Breach Detected
-                  </div>
-                  <div className="h-px w-64 bg-gradient-to-r from-transparent via-[#0F0] to-transparent animate-pulse" />
-                  <div className="text-[#0F0] font-mono text-xs opacity-70 mt-2">
-                    ACCESS GRANTED_
-                  </div>
-                </motion.div>
-              </motion.div>
-            )}
-          </AnimatePresence>
-
-          <div className="absolute bottom-8 left-0 right-0 text-center">
-            <p className="text-[#0F0] font-mono text-xs opacity-40 animate-pulse">
-              [ CLICK TO INITIALIZE ]
-            </p>
-          </div>
-        </motion.div>
-      )}
-    </AnimatePresence>
-  )
-}

app/components/SystemPowerOverlay.tsx

@@ -0,0 +1,126 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { Power } from '@phosphor-icons/react'
+
+interface SystemPowerOverlayProps {
+    state: 'active' | 'sleep' | 'restart' | 'shutdown'
+    onWake: () => void
+    onRestartComplete: () => void
+}
+
+export function SystemPowerOverlay({ state, onWake, onRestartComplete }: SystemPowerOverlayProps) {
+    const [showPowerButton, setShowPowerButton] = useState(false)
+
+    // Handle Sleep Wake
+    useEffect(() => {
+        if (state === 'sleep') {
+            // Small delay to prevent the click that triggered sleep from immediately waking it
+            const timer = setTimeout(() => {
+                const handleWake = () => onWake()
+                window.addEventListener('keydown', handleWake)
+                window.addEventListener('mousedown', handleWake)
+                window.addEventListener('touchstart', handleWake)
+            }, 500)
+
+            return () => {
+                clearTimeout(timer)
+                const handleWake = () => onWake()
+                window.removeEventListener('keydown', handleWake)
+                window.removeEventListener('mousedown', handleWake)
+                window.removeEventListener('touchstart', handleWake)
+            }
+        }
+    }, [state, onWake])
+
+    // Handle Restart
+    useEffect(() => {
+        if (state === 'restart') {
+            const timer = setTimeout(() => {
+                onRestartComplete()
+            }, 4000)
+            return () => clearTimeout(timer)
+        }
+    }, [state, onRestartComplete])
+
+    // Handle Shutdown
+    useEffect(() => {
+        if (state === 'shutdown') {
+            setShowPowerButton(false)
+            const timer = setTimeout(() => {
+                setShowPowerButton(true)
+            }, 3000)
+            return () => clearTimeout(timer)
+        }
+    }, [state])
+
+    if (state === 'active') return null
+
+    return (
+        <AnimatePresence>
+            <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.8 }}
+                className="fixed inset-0 z-[9999] bg-black flex items-center justify-center text-white cursor-none"
+            >
+                {state === 'sleep' && (
+                    <div className="hidden">Sleeping...</div>
+                )}
+
+                {state === 'restart' && (
+                    <div className="flex flex-col items-center gap-12">
+                        <div className="w-12 h-12 border-4 border-gray-700 border-t-gray-300 rounded-full animate-spin" />
+                        <div className="w-48 h-1 bg-gray-800 rounded-full overflow-hidden">
+                            <motion.div
+                                className="h-full bg-white"
+                                initial={{ width: "0%" }}
+                                animate={{ width: "100%" }}
+                                transition={{ duration: 3.5, ease: "easeInOut" }}
+                            />
+                        </div>
+                    </div>
+                )}
+
+                {state === 'shutdown' && (
+                    <div className="flex flex-col items-center w-full h-full justify-center cursor-auto">
+                        <AnimatePresence mode='wait'>
+                            {!showPowerButton ? (
+                                <motion.div
+                                    key="shutdown-text"
+                                    initial={{ opacity: 0, scale: 0.95 }}
+                                    animate={{ opacity: 1, scale: 1 }}
+                                    exit={{ opacity: 0, scale: 1.05, filter: 'blur(10px)' }}
+                                    transition={{ duration: 1 }}
+                                    className="text-center"
+                                >
+                                    <h1 className="text-5xl font-extralight tracking-[0.2em] mb-4 text-white/90">Reuben OS</h1>
+                                    <div className="h-px w-32 bg-gradient-to-r from-transparent via-white/50 to-transparent mx-auto mb-4" />
+                                    <p className="text-white/40 text-xs tracking-[0.3em] uppercase">System Shutdown</p>
+                                </motion.div>
+                            ) : (
+                                <motion.button
+                                    key="power-button"
+                                    initial={{ opacity: 0, scale: 0.8 }}
+                                    animate={{ opacity: 1, scale: 1 }}
+                                    whileHover={{ scale: 1.1 }}
+                                    whileTap={{ scale: 0.95 }}
+                                    onClick={onWake}
+                                    className="flex flex-col items-center gap-6 group cursor-pointer"
+                                >
+                                    <div className="relative">
+                                        <div className="absolute inset-0 bg-white/20 rounded-full blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+                                        <Power size={80} weight="thin" className="text-white/50 group-hover:text-white transition-colors duration-300 relative z-10" />
+                                    </div>
+                                    <span className="text-white/30 text-xs tracking-[0.2em] group-hover:text-white/80 transition-colors duration-300">SYSTEM OFF</span>
+                                </motion.button>
+                            )}
+                        </AnimatePresence>
+                    </div>
+                )}
+            </motion.div>
+        </AnimatePresence>
+    )
+}

app/components/TopBar.tsx

@@ -15,12 +15,14 @@ import { motion, AnimatePresence } from 'framer-motion'
 import { CalendarWidget } from './CalendarWidget'
 
 interface TopBarProps {
-  onPowerAction?: () => void
   activeAppName?: string
   onAboutClick?: () => void
+  onSleep?: () => void
+  onRestart?: () => void
+  onShutdown?: () => void
 }
 
-export function TopBar({ onPowerAction, activeAppName = 'Finder', onAboutClick }: TopBarProps) {
+export function TopBar({ activeAppName = 'Finder', onAboutClick, onSleep, onRestart, onShutdown }: TopBarProps) {
   const [activeMenu, setActiveMenu] = useState<'apple' | 'battery' | 'wifi' | 'clock' | null>(null)
   const [currentTime, setCurrentTime] = useState('')
   const menuRef = useRef<HTMLDivElement>(null)
@@ -93,15 +95,27 @@ export function TopBar({ onPowerAction, activeAppName = 'Finder', onAboutClick }
                   System Settings...
                 </button>
                 <div className="h-px bg-gray-300/50 my-1 mx-2" />
-                <button className="text-left px-4 py-1.5 hover:bg-blue-500 hover:text-white transition-colors text-gray-800">
+                <button
+                  onClick={() => {
+                    if (onSleep) onSleep()
+                    setActiveMenu(null)
+                  }}
+                  className="text-left px-4 py-1.5 hover:bg-blue-500 hover:text-white transition-colors text-gray-800"
+                >
                   Sleep
                 </button>
-                <button className="text-left px-4 py-1.5 hover:bg-blue-500 hover:text-white transition-colors text-gray-800">
+                <button
+                  onClick={() => {
+                    if (onRestart) onRestart()
+                    setActiveMenu(null)
+                  }}
+                  className="text-left px-4 py-1.5 hover:bg-blue-500 hover:text-white transition-colors text-gray-800"
+                >
                   Restart...
                 </button>
                 <button
                   onClick={() => {
-                    if (onPowerAction) onPowerAction()
+                    if (onShutdown) onShutdown()
                     setActiveMenu(null)
                   }}
                   className="text-left px-4 py-1.5 hover:bg-blue-500 hover:text-white transition-colors text-gray-800"
@@ -111,7 +125,6 @@ export function TopBar({ onPowerAction, activeAppName = 'Finder', onAboutClick }
                 <div className="h-px bg-gray-300/50 my-1 mx-2" />
                 <button
                   onClick={() => {
-                    if (onPowerAction) onPowerAction()
                     setActiveMenu(null)
                   }}
                   className="text-left px-4 py-1.5 hover:bg-blue-500 hover:text-white transition-colors text-gray-800"