Act as an Expert Frontend & UI/UX Engineer. Create a production-ready, beautiful, dark-themed Next.js (App Router) interface for an "AI-Powered Super Terminal & Remote X11 Desktop GUI" using Tailwind CSS, Lucide Icons, and Shadcn UI components.

1. Architectural Guardrails (Zero-Error Rules for v0)

• Build strictly using Client Components ('use client').
• DO NOT import native C++ or heavy canvas packages directly (like node-pty or @novnc/novnc) to avoid build/compilation crashes. Instead, build fully interactive mock interfaces, canvas placeholders, and WebSocket connection adapter hooks ready to accept real backend data.
• Ensure 100% responsiveness on Mobile browsers (iPhone/Android) and Desktop screens.

2. Core UI Layout & Components

A. Top Header & Navigation:

• Brand identity: "SuperTerm AI".
• Real-time Status Badges: CPU, RAM, and Backend WebSocket connection indicators.
• Mode Switcher: Toggle between "Split Screen" (Desktop), "Terminal Only", "GUI Only", and "AI Workspace".

B. Mobile-Optimized Terminal Canvas (Xterm-style Interface):

• Realistic dark terminal prompt area supporting interactive text input, multi-tabs, and auto-scrolling terminal logs.
• STICKY MOBILE KEYBAR TOOLBAR (Renders directly above mobile keyboards on screens <768px):
  • Action buttons for critical modifier keys: Ctrl, Alt, Esc, Tab, Ctrl+C, Ctrl+Z, |, /, ~, and Directional Arrow Keys (▲, ▼, ◄, ►).

C. Integrated X11 Desktop GUI Viewer (Remote Canvas):

• Styled Remote Canvas container mimicking a Linux Desktop session (Openbox/XFCE style).
• Top Overlay Toolbar: Action buttons to "Launch Gedit", "Launch Firefox", "Launch Wireshark", "Take Screenshot", and "Toggle Touch Mode".
• On-screen Mobile Touch Controls overlay guide (Pinch-to-zoom, Tap-and-hold for Right Click).

D. AI Assistant Side Drawer (Termius / Warp-Style):

• Quick command input triggerable via Cmd+K / Ctrl+K.
• AI Command Confirmation Card Component: Displays generated shell commands with explicit action buttons:
  • "Run in Terminal" (Injects command into active terminal tab)
  • "Explain Command"
  • "Edit"
  • Safety Warning Badge (Highlighting destructive commands like rm -rf in bold red).
• "Diagnose Terminal Error" floating trigger button for quick system troubleshooting.

E. Responsive Layout Breakdown:

• Desktop (≥768px): 3-Column / Split Layout (Terminal on Left/Center, Desktop GUI on Right, AI Assistant in side drawer).
• Mobile (<768px): Single Viewport mode with a fixed Bottom Navigation Bar switching tabs between [Terminal], [Desktop GUI], and [AI Chat].

Generate the complete layout with full interactivity, state management for tabs/keybars, clean code structure, and dummy state handlers ready for backend integration.