Add Proton Mail/VPN, Secure Notepad, ROS Checks and DarkNet Ops desktop apps

src/OSDashboard.jsx

@@ -4,23 +4,19 @@ import { Terminal, Cpu, Settings, X, Minus, Square, Code, Activity, Wifi, Batter
 import { SYSTEM_THEME, APPS } from './utils/constants.js';
 
 // Import all app components
-import BrowserApp from './components/BrowserApp.jsx';
-import LimeQuizApp from './components/LimeQuizApp.jsx';
-import AIAssistantApp from './components/AIAssistantApp.jsx';
-import TerminalApp from './components/TerminalApp.jsx';
-import RustGuideApp from './components/RustGuideApp.jsx';
-import DashboardApp from './components/DashboardApp.jsx';
-import SettingsApp from './components/SettingsApp.jsx';
+import ProtonMailApp from './components/ProtonMailApp.jsx';
+import ProtonVPNApp from './components/ProtonVPNApp.jsx';
+import SecureNotepadApp from './components/SecureNotepadApp.jsx';
+import ROSChecksApp from './components/ROSChecksApp.jsx';
+import DarkNetOpsApp from './components/DarkNetOpsApp.jsx';
 
 // Component mapping
 const COMPONENT_MAP = {
-  BrowserApp,
-  LimeQuizApp,
-  AIAssistantApp,
-  TerminalApp,
-  RustGuideApp,
-  DashboardApp,
-  SettingsApp,
+  ProtonMailApp,
+  ProtonVPNApp,
+  SecureNotepadApp,
+  ROSChecksApp,
+  DarkNetOpsApp,
 };
 
 // --- MAIN OS COMPONENT ---
@@ -299,4 +295,4 @@ export default function App() {
     </div>
     </>
   );
-}
+}

src/components/DarkNetOpsApp.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Radar, Server, Code2 } from 'lucide-react';
+
+const DarkNetOpsApp = () => {
+  return (
+    <div className="h-full p-4 grid grid-cols-1 gap-4 text-slate-100">
+      <div className="bg-slate-900/60 border border-slate-700 rounded-lg p-4 flex items-center gap-3">
+        <div className="h-10 w-10 rounded-full bg-purple-500/20 flex items-center justify-center">
+          <Radar className="text-purple-300" size={20} />
+        </div>
+        <div>
+          <h3 className="text-lg font-semibold text-purple-200">DarkNet Operations Monitoring</h3>
+          <p className="text-sm text-slate-300">ROS-OS use-case briefing and future tooling.</p>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="bg-slate-900/50 border border-slate-700 rounded-lg p-4">
+          <h4 className="text-sm font-semibold text-purple-200 mb-3 flex items-center gap-2">
+            <Code2 size={16} className="text-purple-300" />
+            Build Direction
+          </h4>
+          <ul className="text-sm text-slate-300 space-y-2">
+            <li>Language: Python.</li>
+            <li>Web interface with DownDetection visibility.</li>
+            <li>See all bullets in ROS Checks before execution.</li>
+          </ul>
+        </div>
+        <div className="bg-slate-900/50 border border-slate-700 rounded-lg p-4">
+          <h4 className="text-sm font-semibold text-purple-200 mb-3 flex items-center gap-2">
+            <Server size={16} className="text-purple-300" />
+            Infrastructure Notes
+          </h4>
+          <ul className="text-sm text-slate-300 space-y-2">
+            <li>TomCat use-case for cloud ops and IPsec: not there yet.</li>
+            <li>Fallback-only posture while SGX is out of scope.</li>
+            <li>Local use only for now.</li>
+          </ul>
+        </div>
+      </div>
+
+      <div className="bg-slate-900/50 border border-slate-700 rounded-lg p-4">
+        <h4 className="text-sm font-semibold text-purple-200 mb-2">Resource Question</h4>
+        <p className="text-sm text-slate-300">
+          What if I can not afford the proper Dark Lab Materials Sheet? Capture constraints before planning.
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default DarkNetOpsApp;

src/components/ProtonMailApp.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Mail, ShieldCheck, Inbox, Lock } from 'lucide-react';
+
+const ProtonMailApp = () => {
+  return (
+    <div className="h-full p-4 grid grid-cols-1 gap-4 text-slate-100">
+      <div className="bg-slate-900/60 border border-slate-700 rounded-lg p-4 flex items-center gap-3">
+        <div className="h-10 w-10 rounded-full bg-lime-500/20 flex items-center justify-center">
+          <Mail className="text-lime-400" size={20} />
+        </div>
+        <div>
+          <h3 className="text-lg font-semibold text-lime-300">Proton Mail Status</h3>
+          <p className="text-sm text-slate-300">Encrypted inbox overview for secure operations.</p>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div className="bg-slate-900/50 border border-slate-700 rounded-lg p-4">
+          <div className="flex items-center gap-2 text-sm text-slate-300 mb-2">
+            <Inbox size={16} className="text-blue-400" />
+            Inbox Snapshot
+          </div>
+          <p className="text-2xl font-semibold text-white">0 New</p>
+          <p className="text-xs text-slate-400">Awaiting secure sync.</p>
+        </div>
+        <div className="bg-slate-900/50 border border-slate-700 rounded-lg p-4">
+          <div className="flex items-center gap-2 text-sm text-slate-300 mb-2">
+            <Lock size={16} className="text-lime-400" />
+            Encryption
+          </div>
+          <p className="text-sm text-slate-200">End-to-end encryption enforced.</p>
+          <p className="text-xs text-slate-400">No plaintext storage detected.</p>
+        </div>
+        <div className="bg-slate-900/50 border border-slate-700 rounded-lg p-4">
+          <div className="flex items-center gap-2 text-sm text-slate-300 mb-2">
+            <ShieldCheck size={16} className="text-emerald-400" />
+            Safety Check
+          </div>
+          <p className="text-sm text-slate-200">Use Proton when handling sensitive comms.</p>
+          <p className="text-xs text-slate-400">PII checks run before sending.</p>
+        </div>
+      </div>
+
+      <div className="bg-slate-900/50 border border-slate-700 rounded-lg p-4">
+        <h4 className="text-sm font-semibold text-lime-300 mb-3">Secure Messaging Guardrails</h4>
+        <ul className="text-sm text-slate-300 space-y-2">
+          <li className="flex items-start gap-2">
+            <span className="text-lime-400">•</span>
+            Verify VPN status prior to sending encrypted mail.
+          </li>
+          <li className="flex items-start gap-2">
+            <span className="text-lime-400">•</span>
+            Confirm no external accounts are logged in before composing sensitive drafts.
+          </li>
+          <li className="flex items-start gap-2">
+            <span className="text-lime-400">•</span>
+            Keep message metadata minimal: no unnecessary identifiers.
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default ProtonMailApp;

src/components/ProtonVPNApp.jsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Shield, Wifi, Globe, Router, Activity } from 'lucide-react';
+
+const ProtonVPNApp = () => {
+  return (
+    <div className="h-full p-4 grid grid-cols-1 gap-4 text-slate-100">
+      <div className="bg-slate-900/60 border border-slate-700 rounded-lg p-4 flex items-center gap-3">
+        <div className="h-10 w-10 rounded-full bg-blue-500/20 flex items-center justify-center">
+          <Shield className="text-blue-300" size={20} />
+        </div>
+        <div>
+          <h3 className="text-lg font-semibold text-blue-200">Proton VPN Control</h3>
+          <p className="text-sm text-slate-300">Monitor tunnel, DNS, and routing safety.</p>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="bg-slate-900/50 border border-slate-700 rounded-lg p-4 space-y-3">
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-slate-300 flex items-center gap-2">
+              <Wifi size={16} className="text-lime-400" /> VPN Tunnel
+            </span>
+            <span className="text-xs text-amber-300 bg-amber-400/10 px-2 py-1 rounded">Awaiting check</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-slate-300 flex items-center gap-2">
+              <Router size={16} className="text-sky-400" /> NAT IP
+            </span>
+            <span className="text-sm text-slate-200">Pending detection</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-slate-300 flex items-center gap-2">
+              <Globe size={16} className="text-blue-400" /> IPv6
+            </span>
+            <span className="text-sm text-slate-200">Unknown</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-slate-300 flex items-center gap-2">
+              <Activity size={16} className="text-rose-400" /> Dropped Packets
+            </span>
+            <span className="text-sm text-slate-200">Monitoring</span>
+          </div>
+        </div>
+
+        <div className="bg-slate-900/50 border border-slate-700 rounded-lg p-4">
+          <h4 className="text-sm font-semibold text-blue-200 mb-3">DNS & Leak Tests</h4>
+          <ul className="text-sm text-slate-300 space-y-2">
+            <li className="flex items-start gap-2">
+              <span className="text-blue-300">•</span>
+              Active ping against DNS while tunnel is live.
+            </li>
+            <li className="flex items-start gap-2">
+              <span className="text-blue-300">•</span>
+              Run DNS leak test suite and record results.
+            </li>
+            <li className="flex items-start gap-2">
+              <span className="text-blue-300">•</span>
+              Confirm DNSCrypt status checks before proceeding.
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div className="bg-slate-900/50 border border-slate-700 rounded-lg p-4">
+        <h4 className="text-sm font-semibold text-blue-200 mb-3">Safety Checklist</h4>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm text-slate-300">
+          <div className="bg-slate-950/40 border border-slate-800 rounded p-3">
+            Ensure VPN is running before any outbound activity.
+          </div>
+          <div className="bg-slate-950/40 border border-slate-800 rounded p-3">
+            Confirm Proton usage for sensitive workflows only.
+          </div>
+          <div className="bg-slate-950/40 border border-slate-800 rounded p-3">
+            Monitor for dropped packets and log any anomalies.
+          </div>
+          <div className="bg-slate-950/40 border border-slate-800 rounded p-3">
+            Verify external Tor/I2P status outside the tunnel.
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProtonVPNApp;

src/components/ROSChecksApp.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { CheckCircle2, AlertTriangle } from 'lucide-react';
+
+const CHECKLIST = [
+  'Ensure VPN is running.',
+  'Active ping against DNS.',
+  'DNS leak tests.',
+  'DNSCrypt status checks.',
+  'Notice of any dropped packets.',
+  'Safety check to use Proton.',
+  'PII checks: "HEY DIPSHIT - You Left Google Logged In Your VPN".',
+  'Follow TLDR files for SGX security — leave SGX out for now; use fallback only.',
+  'Display NAT IP.',
+  'IPv6 valid or not.',
+  'I2P status external to Proton.',
+  'Tor status external to Proton.',
+  'Port checks on 9050, 9051 and I2P router status.',
+  'TomCat use-case for cloud ops and IPsec — not there yet.',
+  'Local use only for now.',
+  'ROS-checks.',
+  'ROS-OS use-case: "DarkNet Operations Monitoring".',
+];
+
+const ROSChecksApp = () => {
+  return (
+    <div className="h-full p-4 flex flex-col gap-4 text-slate-100">
+      <div className="bg-slate-900/60 border border-slate-700 rounded-lg p-4 flex items-center gap-3">
+        <div className="h-10 w-10 rounded-full bg-emerald-400/20 flex items-center justify-center">
+          <CheckCircle2 className="text-emerald-300" size={20} />
+        </div>
+        <div>
+          <h3 className="text-lg font-semibold text-emerald-200">ROS Checks</h3>
+          <p className="text-sm text-slate-300">Operational checklist for secure monitoring.</p>
+        </div>
+      </div>
+
+      <div className="bg-slate-900/50 border border-slate-700 rounded-lg p-4 flex-1 overflow-auto">
+        <ul className="space-y-3 text-sm text-slate-300">
+          {CHECKLIST.map((item, index) => (
+            <li key={item} className="flex items-start gap-3">
+              <span className="mt-1 text-emerald-400">{index + 1}.</span>
+              <span>{item}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <div className="bg-slate-900/50 border border-slate-700 rounded-lg p-4 flex items-start gap-3">
+        <AlertTriangle className="text-amber-300 mt-1" size={18} />
+        <p className="text-sm text-slate-300">
+          Status indicators are placeholders until a live Python web interface with DownDetection is wired in.
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default ROSChecksApp;

src/components/SecureNotepadApp.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { NotebookPen, ShieldAlert } from 'lucide-react';
+
+const SecureNotepadApp = () => {
+  return (
+    <div className="h-full p-4 flex flex-col gap-4 text-slate-100">
+      <div className="bg-slate-900/60 border border-slate-700 rounded-lg p-4 flex items-center gap-3">
+        <div className="h-10 w-10 rounded-full bg-amber-400/20 flex items-center justify-center">
+          <NotebookPen className="text-amber-300" size={20} />
+        </div>
+        <div>
+          <h3 className="text-lg font-semibold text-amber-200">Secure Notepad</h3>
+          <p className="text-sm text-slate-300">"Sell me this pen."</p>
+        </div>
+      </div>
+
+      <div className="bg-slate-900/50 border border-slate-700 rounded-lg p-4">
+        <h4 className="text-sm font-semibold text-amber-200 mb-3">Mission Notes</h4>
+        <div className="text-sm text-slate-300 space-y-2">
+          <p><span className="text-amber-300">•</span> Number one focus: secure notepad workflow and clear briefing.</p>
+          <p><span className="text-amber-300">•</span> What if I can not afford the proper Dark Lab Materials Sheet?</p>
+          <p><span className="text-amber-300">•</span> Local use only for now; keep anything cloud-bound out of scope.</p>
+        </div>
+      </div>
+
+      <div className="bg-slate-900/50 border border-slate-700 rounded-lg p-4">
+        <div className="flex items-start gap-3">
+          <ShieldAlert className="text-rose-400 mt-1" size={18} />
+          <div>
+            <h4 className="text-sm font-semibold text-rose-300 mb-2">PII Guardrail</h4>
+            <p className="text-sm text-slate-300">
+              "HEY DIPSHIT - You Left Google Logged In Your VPN"
+            </p>
+            <p className="text-xs text-slate-400 mt-2">Treat as a reminder to audit active sessions.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SecureNotepadApp;