diff --git a/app/src/App.tsx b/app/src/App.tsx
index b4b993fdf..31bb56172 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -8,6 +8,7 @@ import BottomTabBar from './components/BottomTabBar';
 import ServiceBlockingGate from './components/daemon/ServiceBlockingGate';
 import ErrorFallbackScreen from './components/ErrorFallbackScreen';
 import LocalAIDownloadSnackbar from './components/LocalAIDownloadSnackbar';
+import MeshGradient from './components/MeshGradient';
 import OnboardingOverlay from './components/OnboardingOverlay';
 import CoreStateProvider from './providers/CoreStateProvider';
 import SocketProvider from './providers/SocketProvider';
@@ -29,11 +30,14 @@ function App() {
             <SocketProvider>
               <Router>
                 <ServiceBlockingGate>
-                  <div className="app-dotted-canvas relative h-screen flex flex-col overflow-hidden">
-                    <div className="flex-1 overflow-y-auto pb-16">
-                      <AppRoutes />
+                  <div className="relative h-screen flex flex-col overflow-hidden">
+                    <MeshGradient />
+                    <div className="app-dotted-canvas relative z-10 flex-1 flex flex-col overflow-hidden">
+                      <div className="flex-1 overflow-y-auto pb-16">
+                        <AppRoutes />
+                      </div>
+                      <BottomTabBar />
                     </div>
-                    <BottomTabBar />
                   </div>
                   <OnboardingOverlay />
                   <LocalAIDownloadSnackbar />
diff --git a/app/src/components/MeshGradient.tsx b/app/src/components/MeshGradient.tsx
new file mode 100644
index 000000000..db380c278
--- /dev/null
+++ b/app/src/components/MeshGradient.tsx
@@ -0,0 +1,45 @@
+import { useEffect, useRef } from 'react';
+
+import { Gradient } from '../lib/meshGradient';
+
+/**
+ * Animated WebGL mesh gradient background (Stripe-style).
+ * Renders behind the dotted-canvas overlay so dots remain visible on top.
+ */
+export default function MeshGradient() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const gradient = new Gradient();
+    gradient.initGradient('#mesh-gradient');
+
+    return () => {
+      gradient.disconnect();
+      gradient.pause();
+      if (canvas) {
+        const gl = canvas.getContext('webgl') || canvas.getContext('webgl2');
+        if (gl) {
+          gl.getExtension('WEBGL_lose_context')?.loseContext();
+        }
+      }
+    };
+  }, []);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      id="mesh-gradient"
+      data-transition-in
+      className="absolute inset-0 w-full h-full opacity-10"
+      style={
+        {
+          '--gradient-color-1': '#0019d9',
+          '--gradient-color-2': '#b5d5ff', // primary-50
+          '--gradient-color-3': '#ffffff', // primary-100
+          '--gradient-color-4': '#4fa4ff', // primary-200
+        } as React.CSSProperties
+      }
+    />
+  );
+}
diff --git a/app/src/components/OnboardingOverlay.tsx b/app/src/components/OnboardingOverlay.tsx
index e2ab9f937..3c0ce9343 100644
--- a/app/src/components/OnboardingOverlay.tsx
+++ b/app/src/components/OnboardingOverlay.tsx
@@ -53,7 +53,7 @@ const OnboardingOverlay = () => {
   if (!shouldShow) return null;
 
   return createPortal(
-    <div className="fixed inset-0 z-[9999] bg-white/95 backdrop-blur-md flex items-center justify-center">
+    <div className="fixed inset-0 z-[9999] bg-white/50 backdrop-blur-md flex items-center justify-center">
       <Onboarding onComplete={handleDone} onDefer={handleDone} />
     </div>,
     document.body
diff --git a/app/src/components/settings/SettingsHome.tsx b/app/src/components/settings/SettingsHome.tsx
index f1f5c38a2..f4f0dcc15 100644
--- a/app/src/components/settings/SettingsHome.tsx
+++ b/app/src/components/settings/SettingsHome.tsx
@@ -180,10 +180,10 @@ const SettingsHome = () => {
   ];
 
   return (
-    <div className="overflow-hidden h-full flex flex-col z-10 relative">
+    <div className="z-10 relative">
       <SettingsHeader />
 
-      <div className="flex-1 overflow-y-auto">
+      <div>
         {/* Grouped Settings */}
         {groupedMenuItems.map((item, index) => (
           <SettingsMenuItem
@@ -238,14 +238,16 @@ const SettingsHome = () => {
             </div>
 
             <div className="mb-6">
-              <p className="text-stone-700 text-sm leading-relaxed">
-                This will sign you out and permanently delete local app data including: • App
-                settings and conversations • Email data from Gmail • Chat history from Telegram •
-                Cached files from Notion • All other skills data
-                <br />
-                <br />
-                This action cannot be undone and may take a few moments to complete.
-              </p>
+              <div className="text-stone-700 text-sm leading-relaxed">
+                <p>This will sign you out and permanently delete local app data including:</p>
+                <ul className="list-disc pl-5 mt-2 space-y-1">
+                  <li>App settings and conversations</li>
+                  <li>All skills data</li>
+                  <li>Workspace data</li>
+                  <li>All other local data</li>
+                </ul>
+                <p className="mt-3">This action cannot be undone.</p>
+              </div>
 
               {error && (
                 <div className="mt-3 p-3 rounded-lg bg-coral-100 border border-coral-500/20">
diff --git a/app/src/components/settings/SettingsSectionPage.tsx b/app/src/components/settings/SettingsSectionPage.tsx
index af90c1709..5830f2a65 100644
--- a/app/src/components/settings/SettingsSectionPage.tsx
+++ b/app/src/components/settings/SettingsSectionPage.tsx
@@ -22,26 +22,24 @@ const SettingsSectionPage = ({ title, description, items }: SettingsSectionPageP
   const { navigateBack, navigateToSettings } = useSettingsNavigation();
 
   return (
-    <div className="overflow-hidden h-full flex flex-col z-10 relative">
+    <div className="z-10 relative">
       <SettingsHeader title={title} showBackButton={true} onBack={navigateBack} />
 
-      <div className="flex-1 overflow-y-auto">
-        <div className="p-4 space-y-4">
-          {description && <p className="text-sm text-stone-500 px-1">{description}</p>}
+      <div>
+        {description && <p className="mt-1 text-xs text-stone-500 px-5 pb-3">{description}</p>}
 
-          <div>
-            {items.map((item, index) => (
-              <SettingsMenuItem
-                key={item.id}
-                icon={item.icon}
-                title={item.title}
-                description={item.description}
-                onClick={() => navigateToSettings(item.route)}
-                isFirst={index === 0}
-                isLast={index === items.length - 1}
-              />
-            ))}
-          </div>
+        <div>
+          {items.map((item, index) => (
+            <SettingsMenuItem
+              key={item.id}
+              icon={item.icon}
+              title={item.title}
+              description={item.description}
+              onClick={() => navigateToSettings(item.route)}
+              isFirst={index === 0}
+              isLast={index === items.length - 1}
+            />
+          ))}
         </div>
       </div>
     </div>
diff --git a/app/src/components/settings/components/SettingsBackButton.tsx b/app/src/components/settings/components/SettingsBackButton.tsx
index 80f6289e3..5a424b09e 100644
--- a/app/src/components/settings/components/SettingsBackButton.tsx
+++ b/app/src/components/settings/components/SettingsBackButton.tsx
@@ -10,15 +10,19 @@ const SettingsBackButton = ({
   className = '',
 }: SettingsBackButtonProps) => {
   return (
-    <div className={`bg-stone-50 border-b border-stone-200 p-6 ${className}`}>
+    <div className={`px-5 pt-5 pb-3 ${className}`}>
       <button
         onClick={onClick}
-        className="flex items-center space-x-3 text-stone-900 hover:text-stone-700 transition-colors duration-150"
+        className="flex items-center space-x-2 text-stone-900 hover:text-stone-700 transition-colors duration-150"
         aria-label="Go back">
-        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg
+          className="w-4 h-4 text-stone-500"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
         </svg>
-        <span className="text-lg font-semibold">{title}</span>
+        <span className="text-sm font-semibold">{title}</span>
       </button>
     </div>
   );
diff --git a/app/src/components/settings/components/SettingsHeader.tsx b/app/src/components/settings/components/SettingsHeader.tsx
index a272ed2e8..513eb2013 100644
--- a/app/src/components/settings/components/SettingsHeader.tsx
+++ b/app/src/components/settings/components/SettingsHeader.tsx
@@ -12,16 +12,16 @@ const SettingsHeader = ({
   onBack,
 }: SettingsHeaderProps) => {
   return (
-    <div className={`bg-stone-50 border-b border-stone-200 p-3 relative ${className}`}>
+    <div className={`px-5 pt-5 pb-3 ${className}`}>
       <div className="flex items-center">
         {/* Back button */}
         {showBackButton && onBack && (
           <button
             onClick={onBack}
-            className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-stone-200 transition-colors mr-3"
+            className="w-6 h-6 flex items-center justify-center rounded-full hover:bg-stone-100 transition-colors mr-2"
             aria-label="Go back">
             <svg
-              className="w-5 h-5 opacity-70"
+              className="w-4 h-4 text-stone-500"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24">
@@ -36,7 +36,7 @@ const SettingsHeader = ({
         )}
 
         {/* Title */}
-        <h2 className="text-lg font-semibold text-stone-900">{title}</h2>
+        <h2 className="text-sm font-semibold text-stone-900">{title}</h2>
       </div>
     </div>
   );
diff --git a/app/src/components/settings/components/SettingsPanelLayout.tsx b/app/src/components/settings/components/SettingsPanelLayout.tsx
index 5e52a4833..c406d1ae2 100644
--- a/app/src/components/settings/components/SettingsPanelLayout.tsx
+++ b/app/src/components/settings/components/SettingsPanelLayout.tsx
@@ -16,9 +16,9 @@ const SettingsPanelLayout = ({
   className = '',
 }: SettingsPanelLayoutProps) => {
   return (
-    <div className={`glass rounded-3xl overflow-hidden h-[600px] flex flex-col ${className}`}>
+    <div className={`glass rounded-3xl overflow-hidden ${className}`}>
       <SettingsBackButton onClick={onBack} title={title} />
-      <div className="flex-1 overflow-y-auto">{children}</div>
+      <div>{children}</div>
     </div>
   );
 };
diff --git a/app/src/components/settings/hooks/useSettingsNavigation.ts b/app/src/components/settings/hooks/useSettingsNavigation.ts
index 96831c700..ac742399d 100644
--- a/app/src/components/settings/hooks/useSettingsNavigation.ts
+++ b/app/src/components/settings/hooks/useSettingsNavigation.ts
@@ -23,7 +23,6 @@ export type SettingsRoute =
   | 'skills'
   | 'ai'
   | 'local-model'
-  | 'tauri-commands'
   | 'memory-debug'
   | 'recovery-phrase'
   | 'webhooks-debug'
@@ -81,7 +80,6 @@ export const useSettingsNavigation = (): SettingsNavigationHook => {
     if (path.includes('/settings/skills')) return 'skills';
     if (path.includes('/settings/ai')) return 'ai';
     if (path.includes('/settings/local-model')) return 'local-model';
-    if (path.includes('/settings/tauri-commands')) return 'tauri-commands';
     if (path.includes('/settings/memory-debug')) return 'memory-debug';
     if (path.includes('/settings/webhooks-debug')) return 'webhooks-debug';
     if (path.includes('/settings/recovery-phrase')) return 'recovery-phrase';
diff --git a/app/src/components/settings/panels/AIPanel.tsx b/app/src/components/settings/panels/AIPanel.tsx
index 3501d0ac1..7712dd998 100644
--- a/app/src/components/settings/panels/AIPanel.tsx
+++ b/app/src/components/settings/panels/AIPanel.tsx
@@ -74,12 +74,12 @@ const AIPanel = () => {
   };
 
   return (
-    <div className="h-full flex flex-col">
+    <div>
       <SettingsHeader title="AI Configuration" showBackButton={true} onBack={navigateBack} />
 
-      <div className="flex-1 overflow-y-auto px-6 pb-10 space-y-6">
+      <div className="p-4 space-y-4">
         <section className="space-y-4">
-          <h3 className="text-lg font-semibold text-stone-900">AI System Overview</h3>
+          <h3 className="text-sm font-semibold text-stone-900">AI System Overview</h3>
           <p className="text-sm text-stone-500">
             Prompt and markdown orchestration is handled in Rust runtime.
           </p>
@@ -110,7 +110,7 @@ const AIPanel = () => {
 
         <section className="space-y-4">
           <div className="flex items-center justify-between">
-            <h3 className="text-lg font-semibold text-stone-900">Local Model Runtime</h3>
+            <h3 className="text-sm font-semibold text-stone-900">Local Model Runtime</h3>
             <div className="flex items-center gap-4">
               <button
                 onClick={() => navigateToSettings('local-model')}
@@ -153,7 +153,7 @@ const AIPanel = () => {
 
         <section className="space-y-4">
           <div className="flex items-center justify-between">
-            <h3 className="text-lg font-semibold text-stone-900">SOUL Persona Configuration</h3>
+            <h3 className="text-sm font-semibold text-stone-900">SOUL Persona Configuration</h3>
             <button
               onClick={() => refreshConfig('soul')}
               className="text-sm text-primary-500 hover:text-primary-600 transition-colors disabled:opacity-50"
@@ -218,7 +218,7 @@ const AIPanel = () => {
 
         <section className="space-y-4">
           <div className="flex items-center justify-between">
-            <h3 className="text-lg font-semibold text-stone-900">TOOLS Configuration</h3>
+            <h3 className="text-sm font-semibold text-stone-900">TOOLS Configuration</h3>
             <button
               onClick={() => refreshConfig('tools')}
               className="text-sm text-primary-500 hover:text-primary-600 transition-colors disabled:opacity-50"
diff --git a/app/src/components/settings/panels/AccessibilityPanel.tsx b/app/src/components/settings/panels/AccessibilityPanel.tsx
index 6b58ab7e4..bf3a66c24 100644
--- a/app/src/components/settings/panels/AccessibilityPanel.tsx
+++ b/app/src/components/settings/panels/AccessibilityPanel.tsx
@@ -108,15 +108,15 @@ const AccessibilityPanel = () => {
   const stopDisabled = isStoppingSession || !status?.session.active;
 
   return (
-    <div className="overflow-hidden h-full flex flex-col z-10 relative">
+    <div className="z-10 relative">
       <SettingsHeader
         title="Accessibility Automation"
         showBackButton={true}
         onBack={navigateBack}
       />
 
-      <div className="flex-1 overflow-y-auto max-w-2xl mx-auto w-full p-4 space-y-4">
-        <section className="rounded-2xl border border-stone-200 bg-white p-4 space-y-3">
+      <div className="max-w-2xl mx-auto w-full p-4 space-y-4">
+        <section className="space-y-3">
           <h3 className="text-sm font-semibold text-stone-900">Permissions</h3>
           <PermissionBadge
             label="Accessibility"
@@ -183,7 +183,7 @@ const AccessibilityPanel = () => {
           )}
         </section>
 
-        <section className="rounded-2xl border border-stone-200 bg-white p-4 space-y-3">
+        <section className="space-y-3">
           <h3 className="text-sm font-semibold text-stone-900">Features</h3>
 
           <label className="flex items-center justify-between rounded-xl border border-stone-200 bg-stone-50 px-3 py-2">
@@ -229,7 +229,7 @@ const AccessibilityPanel = () => {
           </label>
         </section>
 
-        <section className="rounded-2xl border border-stone-200 bg-white p-4 space-y-3">
+        <section className="space-y-3">
           <h3 className="text-sm font-semibold text-stone-900">Session</h3>
           <div className="text-sm text-stone-700 space-y-1">
             <div>Status: {status?.session.active ? 'Active' : 'Stopped'}</div>
@@ -281,7 +281,7 @@ const AccessibilityPanel = () => {
           </div>
         </section>
 
-        <section className="rounded-2xl border border-stone-200 bg-white p-4 space-y-3">
+        <section className="space-y-3">
           <div className="flex items-center justify-between">
             <h3 className="text-sm font-semibold text-stone-900">Vision Summaries</h3>
             <button
diff --git a/app/src/components/settings/panels/AdvancedPanel.tsx b/app/src/components/settings/panels/AdvancedPanel.tsx
index cd1a82c7b..8d5a7018c 100644
--- a/app/src/components/settings/panels/AdvancedPanel.tsx
+++ b/app/src/components/settings/panels/AdvancedPanel.tsx
@@ -5,42 +5,32 @@ const AdvancedPanel = () => {
   const { navigateBack } = useSettingsNavigation();
 
   return (
-    <div className="overflow-hidden h-full flex flex-col">
+    <div className="z-10 relative">
       <SettingsHeader title="Advanced" showBackButton={true} onBack={navigateBack} />
 
-      <div className="flex-1 overflow-y-auto">
-        <div className="p-4 h-full flex items-center justify-center">
-          <div className="text-center">
-            <div className="w-16 h-16 mx-auto mb-4 bg-stone-100 rounded-full flex items-center justify-center">
-              <svg
-                className="w-8 h-8 text-stone-500"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24">
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
-                />
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                />
-              </svg>
-            </div>
-            <h3 className="text-lg font-medium text-stone-900 mb-2">Advanced Settings</h3>
-            <p className="text-stone-500 text-sm max-w-sm mx-auto">
-              Configure advanced features, developer options, and system-level settings.
-            </p>
-            <div className="mt-6">
-              <span className="px-4 py-2 text-sm font-medium rounded-full border bg-stone-100 text-stone-600 border-stone-200">
-                Coming Soon
-              </span>
-            </div>
+      <div className="py-10 flex items-center justify-center">
+        <div className="text-center">
+          <div className="w-12 h-12 mx-auto mb-3 bg-stone-100 rounded-full flex items-center justify-center">
+            <svg
+              className="w-6 h-6 text-stone-400"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+              />
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+              />
+            </svg>
           </div>
+          <p className="text-xs text-stone-500">Coming soon</p>
         </div>
       </div>
     </div>
diff --git a/app/src/components/settings/panels/AgentChatPanel.tsx b/app/src/components/settings/panels/AgentChatPanel.tsx
index c5ef89602..ef7ad8bed 100644
--- a/app/src/components/settings/panels/AgentChatPanel.tsx
+++ b/app/src/components/settings/panels/AgentChatPanel.tsx
@@ -72,12 +72,12 @@ const AgentChatPanel = () => {
   };
 
   return (
-    <div className="h-full flex flex-col">
+    <div>
       <SettingsHeader title="Agent Chat" showBackButton={true} onBack={navigateBack} />
 
-      <div className="flex-1 overflow-y-auto px-6 pb-10 space-y-6">
+      <div className="p-4 space-y-4">
         <section className="space-y-3">
-          <h3 className="text-lg font-semibold text-stone-900">Overrides</h3>
+          <h3 className="text-sm font-semibold text-stone-900">Overrides</h3>
           <p className="text-sm text-stone-400">
             Inference uses your OpenHuman backend (config API URL and session). Optional model and
             temperature override the defaults for this panel only.
@@ -105,7 +105,7 @@ const AgentChatPanel = () => {
         </section>
 
         <section className="space-y-3">
-          <h3 className="text-lg font-semibold text-stone-900">Conversation</h3>
+          <h3 className="text-sm font-semibold text-stone-900">Conversation</h3>
           {error && (
             <div className="rounded-lg border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-700">
               {error}
diff --git a/app/src/components/settings/panels/AutocompletePanel.tsx b/app/src/components/settings/panels/AutocompletePanel.tsx
index 907e13a9e..ee4eb6572 100644
--- a/app/src/components/settings/panels/AutocompletePanel.tsx
+++ b/app/src/components/settings/panels/AutocompletePanel.tsx
@@ -323,10 +323,10 @@ const AutocompletePanel = () => {
   }, []);
 
   return (
-    <div className="overflow-hidden h-full flex flex-col z-10 relative">
+    <div className="z-10 relative">
       <SettingsHeader title="Inline Autocomplete" showBackButton={true} onBack={navigateBack} />
 
-      <div className="flex-1 overflow-y-auto max-w-2xl mx-auto w-full p-4 space-y-4">
+      <div className="max-w-2xl mx-auto w-full p-4 space-y-4">
         <section className="rounded-2xl border border-stone-200 bg-white p-4 space-y-3">
           <h3 className="text-sm font-semibold text-stone-900">Runtime</h3>
           <div className="text-sm text-stone-700 space-y-1">
diff --git a/app/src/components/settings/panels/BillingPanel.tsx b/app/src/components/settings/panels/BillingPanel.tsx
index 0e9595b1e..cb9e4db7f 100644
--- a/app/src/components/settings/panels/BillingPanel.tsx
+++ b/app/src/components/settings/panels/BillingPanel.tsx
@@ -388,7 +388,7 @@ const BillingPanel = () => {
 
   // ── JSX ─────────────────────────────────────────────────────────────
   return (
-    <div className="overflow-hidden flex flex-col">
+    <div>
       <SettingsHeader
         title={teamName ? `Billing — ${teamName}` : 'Billing & Subscription'}
         showBackButton={true}
diff --git a/app/src/components/settings/panels/ConnectionsPanel.tsx b/app/src/components/settings/panels/ConnectionsPanel.tsx
index e2e6ab4c2..d71240273 100644
--- a/app/src/components/settings/panels/ConnectionsPanel.tsx
+++ b/app/src/components/settings/panels/ConnectionsPanel.tsx
@@ -188,11 +188,11 @@ const ConnectionsPanel = () => {
   };
 
   return (
-    <div className="overflow-hidden h-full flex flex-col">
+    <div>
       <SettingsHeader title="Connections" showBackButton={true} onBack={navigateBack} />
 
-      <div className="flex-1 overflow-y-auto">
-        <div className="p-4 space-y-6">
+      <div>
+        <div className="p-4 space-y-4">
           {/* Connection Options */}
           <div>
             {connectOptions.map((option, index) => (
diff --git a/app/src/components/settings/panels/CronJobsPanel.tsx b/app/src/components/settings/panels/CronJobsPanel.tsx
index 191a66d06..73e930fce 100644
--- a/app/src/components/settings/panels/CronJobsPanel.tsx
+++ b/app/src/components/settings/panels/CronJobsPanel.tsx
@@ -304,12 +304,12 @@ const CronJobsPanel = () => {
   };
 
   return (
-    <div className="h-full flex flex-col">
+    <div>
       <SettingsHeader title="Cron Jobs" showBackButton={true} onBack={navigateBack} />
 
-      <div className="flex-1 overflow-y-auto px-6 pb-10 space-y-6">
-        <section className="rounded-xl border border-stone-200 bg-white p-4 space-y-2">
-          <h3 className="text-lg font-semibold text-stone-900">Scheduled Jobs</h3>
+      <div className="p-4 space-y-4">
+        <section className="space-y-1">
+          <h3 className="text-sm font-semibold text-stone-900">Scheduled Jobs</h3>
           <p className="text-xs text-stone-400">
             Manage cron jobs from both the core scheduler and runtime skills.
           </p>
diff --git a/app/src/components/settings/panels/DeveloperOptionsPanel.tsx b/app/src/components/settings/panels/DeveloperOptionsPanel.tsx
index 96c3555a2..0343d1d01 100644
--- a/app/src/components/settings/panels/DeveloperOptionsPanel.tsx
+++ b/app/src/components/settings/panels/DeveloperOptionsPanel.tsx
@@ -35,22 +35,6 @@ const developerItems = [
       </svg>
     ),
   },
-  {
-    id: 'tauri-commands',
-    title: 'Tauri Command Console',
-    description: 'Run OpenHuman Tauri commands for quick testing',
-    route: 'tauri-commands',
-    icon: (
-      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={2}
-          d="M9 12h6m2 8H7a2 2 0 01-2-2V6a2 2 0 012-2h6l6 6v8a2 2 0 01-2 2z"
-        />
-      </svg>
-    ),
-  },
   {
     id: 'webhooks-debug',
     title: 'Webhooks',
@@ -89,25 +73,21 @@ const DeveloperOptionsPanel = () => {
   const { navigateToSettings, navigateBack } = useSettingsNavigation();
 
   return (
-    <div className="overflow-hidden h-full flex flex-col z-10 relative">
+    <div className="z-10 relative">
       <SettingsHeader title="Developer Options" showBackButton={true} onBack={navigateBack} />
 
-      <div className="flex-1 overflow-y-auto max-w-md mx-auto">
-        <div className="p-4">
-          <div>
-            {developerItems.map((item, index) => (
-              <SettingsMenuItem
-                key={item.id}
-                icon={item.icon}
-                title={item.title}
-                description={item.description}
-                onClick={() => navigateToSettings(item.route)}
-                isFirst={index === 0}
-                isLast={index === developerItems.length - 1}
-              />
-            ))}
-          </div>
-        </div>
+      <div>
+        {developerItems.map((item, index) => (
+          <SettingsMenuItem
+            key={item.id}
+            icon={item.icon}
+            title={item.title}
+            description={item.description}
+            onClick={() => navigateToSettings(item.route)}
+            isFirst={index === 0}
+            isLast={index === developerItems.length - 1}
+          />
+        ))}
       </div>
     </div>
   );
diff --git a/app/src/components/settings/panels/LocalModelPanel.tsx b/app/src/components/settings/panels/LocalModelPanel.tsx
index 19f146647..9f409dede 100644
--- a/app/src/components/settings/panels/LocalModelPanel.tsx
+++ b/app/src/components/settings/panels/LocalModelPanel.tsx
@@ -367,13 +367,13 @@ const LocalModelPanel = () => {
   };
 
   return (
-    <div className="h-full flex flex-col">
+    <div>
       <SettingsHeader title="Local Model" showBackButton={true} onBack={navigateBack} />
 
-      <div className="flex-1 overflow-y-auto px-6 pb-10 space-y-6">
+      <div className="p-4 space-y-4">
         {/* --- Model Tier Selection --- */}
         <section className="space-y-3">
-          <h3 className="text-lg font-semibold text-stone-900">Model Tier</h3>
+          <h3 className="text-sm font-semibold text-stone-900">Model Tier</h3>
 
           {/* Loading / error states */}
           {presetsLoading && !presetsData && (
@@ -497,7 +497,7 @@ const LocalModelPanel = () => {
           <>
             <section className="space-y-3">
               <div className="flex items-center justify-between">
-                <h3 className="text-lg font-semibold text-stone-900">Runtime Status</h3>
+                <h3 className="text-sm font-semibold text-stone-900">Runtime Status</h3>
                 <button
                   onClick={() => void loadStatus()}
                   className="text-sm text-primary-500 hover:text-primary-600 transition-colors">
@@ -688,7 +688,7 @@ const LocalModelPanel = () => {
 
             <section className="space-y-3">
               <div className="flex items-center justify-between">
-                <h3 className="text-lg font-semibold text-stone-900">Ollama Diagnostics</h3>
+                <h3 className="text-sm font-semibold text-stone-900">Ollama Diagnostics</h3>
                 <button
                   onClick={async () => {
                     setIsDiagnosticsLoading(true);
@@ -848,7 +848,7 @@ const LocalModelPanel = () => {
             </section>
 
             <section className="space-y-3">
-              <h3 className="text-lg font-semibold text-stone-900">Capability Assets</h3>
+              <h3 className="text-sm font-semibold text-stone-900">Capability Assets</h3>
               <div className="bg-stone-50 rounded-lg border border-stone-200 p-4 space-y-3">
                 <div className="text-xs text-stone-500">
                   Quantization preference: {assets?.quantization ?? 'q4'}
@@ -883,7 +883,7 @@ const LocalModelPanel = () => {
             </section>
 
             <section className="space-y-3">
-              <h3 className="text-lg font-semibold text-stone-900">Test Summarization</h3>
+              <h3 className="text-sm font-semibold text-stone-900">Test Summarization</h3>
               <div className="bg-stone-50 rounded-lg border border-stone-200 p-4 space-y-3">
                 <textarea
                   value={summaryInput}
@@ -911,7 +911,7 @@ const LocalModelPanel = () => {
             </section>
 
             <section className="space-y-3">
-              <h3 className="text-lg font-semibold text-stone-900">Test Suggested Prompts</h3>
+              <h3 className="text-sm font-semibold text-stone-900">Test Suggested Prompts</h3>
               <div className="bg-stone-50 rounded-lg border border-stone-200 p-4 space-y-3">
                 <textarea
                   value={suggestInput}
@@ -949,7 +949,7 @@ const LocalModelPanel = () => {
             </section>
 
             <section className="space-y-3">
-              <h3 className="text-lg font-semibold text-stone-900">Test Custom Prompt</h3>
+              <h3 className="text-sm font-semibold text-stone-900">Test Custom Prompt</h3>
               <div className="bg-stone-50 rounded-lg border border-stone-200 p-4 space-y-3">
                 <textarea
                   value={promptInput}
@@ -994,7 +994,7 @@ const LocalModelPanel = () => {
             </section>
 
             <section className="space-y-3">
-              <h3 className="text-lg font-semibold text-stone-900">Test Vision Prompt</h3>
+              <h3 className="text-sm font-semibold text-stone-900">Test Vision Prompt</h3>
               <div className="bg-stone-50 rounded-lg border border-stone-200 p-4 space-y-3">
                 <textarea
                   value={visionPromptInput}
@@ -1025,7 +1025,7 @@ const LocalModelPanel = () => {
             </section>
 
             <section className="space-y-3">
-              <h3 className="text-lg font-semibold text-stone-900">Test Embeddings</h3>
+              <h3 className="text-sm font-semibold text-stone-900">Test Embeddings</h3>
               <div className="bg-stone-50 rounded-lg border border-stone-200 p-4 space-y-3">
                 <textarea
                   value={embeddingInput}
@@ -1050,7 +1050,7 @@ const LocalModelPanel = () => {
             </section>
 
             <section className="space-y-3">
-              <h3 className="text-lg font-semibold text-stone-900">Test Voice Input (STT)</h3>
+              <h3 className="text-sm font-semibold text-stone-900">Test Voice Input (STT)</h3>
               <div className="bg-stone-50 rounded-lg border border-stone-200 p-4 space-y-3">
                 <input
                   value={audioPathInput}
@@ -1077,7 +1077,7 @@ const LocalModelPanel = () => {
             </section>
 
             <section className="space-y-3">
-              <h3 className="text-lg font-semibold text-stone-900">Test Voice Output (TTS)</h3>
+              <h3 className="text-sm font-semibold text-stone-900">Test Voice Output (TTS)</h3>
               <div className="bg-stone-50 rounded-lg border border-stone-200 p-4 space-y-3">
                 <textarea
                   value={ttsInput}
diff --git a/app/src/components/settings/panels/MemoryDebugPanel.tsx b/app/src/components/settings/panels/MemoryDebugPanel.tsx
index 88e9fa164..af69cd009 100644
--- a/app/src/components/settings/panels/MemoryDebugPanel.tsx
+++ b/app/src/components/settings/panels/MemoryDebugPanel.tsx
@@ -13,8 +13,6 @@ import {
 import { MemoryTextWithEntities } from '../../intelligence/MemoryTextWithEntities';
 import SettingsHeader from '../components/SettingsHeader';
 import { useSettingsNavigation } from '../hooks/useSettingsNavigation';
-import { PrimaryButton } from './components/ActionPanel';
-import SectionCard from './components/SectionCard';
 import { normalizeMemoryDocuments } from './memoryDebugUtils';
 
 const MemoryDebugPanel = () => {
@@ -149,7 +147,7 @@ const MemoryDebugPanel = () => {
     if (!ns) return;
 
     const confirmed = window.confirm(
-      `This will permanently delete ALL documents in namespace "${ns}". This action cannot be undone.\n\nContinue?`
+      `This will permanently delete ALL documents in namespace "${ns}". Continue?`
     );
     if (!confirmed) return;
 
@@ -159,9 +157,9 @@ const MemoryDebugPanel = () => {
     try {
       const result = await memoryClearNamespace(ns);
       if (result.cleared) {
-        setClearSuccess(`Namespace "${result.namespace}" cleared successfully.`);
+        setClearSuccess(`Namespace "${result.namespace}" cleared.`);
       } else {
-        setClearSuccess(`Clear request completed for "${result.namespace}" (nothing to clear).`);
+        setClearSuccess(`Nothing to clear in "${result.namespace}".`);
       }
       await refreshAll();
     } catch (error) {
@@ -172,261 +170,205 @@ const MemoryDebugPanel = () => {
   }, [clearNamespaceInput, refreshAll]);
 
   return (
-    <div className="overflow-hidden h-full flex flex-col">
+    <div>
       <SettingsHeader title="Memory Debug" showBackButton={true} onBack={navigateBack} />
 
-      <div className="flex-1 overflow-y-auto p-4 space-y-4">
-        <SectionCard
-          title="Documents"
-          priority="tools"
-          icon={
-            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M9 12h6m2 8H7a2 2 0 01-2-2V6a2 2 0 012-2h6l6 6v8a2 2 0 01-2 2z"
-              />
-            </svg>
-          }>
-          <div className="space-y-3">
-            <PrimaryButton onClick={() => void loadDocuments()} loading={documentsLoading}>
-              Refresh Documents
-            </PrimaryButton>
-            <label className="block text-xs text-stone-300">
-              Namespace Filter (optional)
-              <input
-                value={documentsNamespaceFilter}
-                onChange={e => setDocumentsNamespaceFilter(e.target.value)}
-                className="mt-1 w-full rounded border border-stone-600 bg-black/30 px-3 py-2 text-sm text-white"
-                placeholder="e.g. conversations"
-              />
-            </label>
-            {documentsError && (
-              <div className="text-xs text-coral-300 border border-coral-500/30 bg-coral-500/10 rounded p-2">
-                {documentsError}
-              </div>
-            )}
-            {documents.length === 0 && !documentsLoading ? (
-              <div className="text-xs text-stone-400">
-                No structured documents found. Raw response is shown below.
-              </div>
-            ) : (
-              <div className="space-y-2">
-                {documents.map(doc => (
-                  <div
-                    key={`${doc.namespace}:${doc.documentId}`}
-                    className="rounded border border-stone-700 bg-black/20 p-2">
-                    <div className="text-xs text-white break-all">ID: {doc.documentId}</div>
-                    <div className="text-xs text-stone-300 break-all">
-                      Namespace: {doc.namespace}
-                    </div>
-                    {doc.title ? (
-                      <div className="text-xs text-stone-400">Title: {doc.title}</div>
-                    ) : null}
-                    <div className="pt-2">
-                      <PrimaryButton
-                        variant="outline"
-                        loading={deleteLoadingId === doc.documentId}
-                        disabled={Boolean(deleteLoadingId)}
-                        onClick={() => void handleDelete(doc)}
-                        className="px-3 py-1.5 text-xs">
-                        Delete
-                      </PrimaryButton>
+      <div className="p-4 space-y-5">
+        {/* Documents */}
+        <section className="space-y-2">
+          <h3 className="text-sm font-semibold text-stone-900">Documents</h3>
+          <div className="flex gap-2">
+            <input
+              value={documentsNamespaceFilter}
+              onChange={e => setDocumentsNamespaceFilter(e.target.value)}
+              className="flex-1 rounded-lg border border-stone-200 bg-stone-50 px-3 py-1.5 text-xs text-stone-700 placeholder:text-stone-400"
+              placeholder="Filter by namespace..."
+            />
+            <button
+              type="button"
+              onClick={() => void loadDocuments()}
+              disabled={documentsLoading}
+              className="rounded-lg border border-stone-200 bg-stone-50 px-3 py-1.5 text-xs font-medium text-stone-700 hover:bg-stone-100 disabled:opacity-50">
+              {documentsLoading ? '...' : 'Refresh'}
+            </button>
+          </div>
+          {documentsError && (
+            <div className="rounded-lg border border-coral-200 bg-coral-50 px-3 py-2 text-xs text-coral-700">
+              {documentsError}
+            </div>
+          )}
+          {documents.length === 0 && !documentsLoading ? (
+            <p className="text-xs text-stone-400">No documents found.</p>
+          ) : (
+            <div className="space-y-1">
+              {documents.map(doc => (
+                <div
+                  key={`${doc.namespace}:${doc.documentId}`}
+                  className="flex items-start justify-between gap-2 rounded-lg border border-stone-200 bg-stone-50 p-2">
+                  <div className="min-w-0">
+                    <div className="text-xs font-medium text-stone-900 break-all">
+                      {doc.documentId}
                     </div>
+                    <div className="text-[11px] text-stone-500 break-all">{doc.namespace}</div>
+                    {doc.title && <div className="text-[11px] text-stone-400">{doc.title}</div>}
                   </div>
-                ))}
-              </div>
-            )}
-            <details className="text-xs">
-              <summary className="cursor-pointer text-stone-300">Raw documents response</summary>
-              <pre className="mt-2 rounded border border-stone-700 bg-black/20 p-2 overflow-auto text-[11px] leading-5">
-                {JSON.stringify(documentsRaw, null, 2)}
-              </pre>
-            </details>
-          </div>
-        </SectionCard>
-
-        <SectionCard
-          title="Namespaces"
-          priority="tools"
-          icon={
-            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M4 7h16M4 12h16M4 17h16"
-              />
-            </svg>
-          }>
-          <div className="space-y-3">
-            <PrimaryButton onClick={() => void loadNamespaces()} loading={namespacesLoading}>
-              Refresh Namespaces
-            </PrimaryButton>
-            {namespacesError && (
-              <div className="text-xs text-coral-300 border border-coral-500/30 bg-coral-500/10 rounded p-2">
-                {namespacesError}
-              </div>
-            )}
-            <div className="rounded border border-stone-700 bg-black/20 p-2 text-xs">
-              {namespaces.length > 0 ? namespaces.join('\n') : 'No namespaces found.'}
+                  <button
+                    type="button"
+                    disabled={Boolean(deleteLoadingId)}
+                    onClick={() => void handleDelete(doc)}
+                    className="shrink-0 rounded border border-stone-200 px-2 py-1 text-[10px] text-stone-500 hover:bg-stone-100 disabled:opacity-50">
+                    {deleteLoadingId === doc.documentId ? '...' : 'Delete'}
+                  </button>
+                </div>
+              ))}
             </div>
+          )}
+          <details className="text-xs">
+            <summary className="cursor-pointer text-stone-400">Raw response</summary>
+            <pre className="mt-1 max-h-32 overflow-auto rounded-lg border border-stone-200 bg-stone-950 p-2 text-[11px] text-stone-100 whitespace-pre-wrap break-words">
+              {JSON.stringify(documentsRaw, null, 2)}
+            </pre>
+          </details>
+        </section>
+
+        {/* Namespaces */}
+        <section className="space-y-2">
+          <div className="flex items-center justify-between">
+            <h3 className="text-sm font-semibold text-stone-900">Namespaces</h3>
+            <button
+              type="button"
+              onClick={() => void loadNamespaces()}
+              disabled={namespacesLoading}
+              className="rounded-lg border border-stone-200 bg-stone-50 px-3 py-1 text-[11px] font-medium text-stone-600 hover:bg-stone-100 disabled:opacity-50">
+              {namespacesLoading ? '...' : 'Refresh'}
+            </button>
           </div>
-        </SectionCard>
-
-        <SectionCard
-          title="Clear Namespace"
-          priority="tools"
-          icon={
-            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-              />
-            </svg>
-          }>
-          <div className="space-y-3">
-            <p className="text-xs text-stone-400">
-              Delete all documents within a namespace. This is a destructive operation and cannot be
-              undone.
-            </p>
-
-            <label className="block text-xs text-stone-300">
-              Namespace
-              {namespaces.length > 0 ? (
-                <select
-                  value={clearNamespaceInput}
-                  onChange={e => setClearNamespaceInput(e.target.value)}
-                  className="mt-1 w-full rounded border border-stone-600 bg-black/30 px-3 py-2 text-sm text-white">
-                  <option value="">-- select a namespace --</option>
-                  {namespaces.map(ns => (
-                    <option key={ns} value={ns}>
-                      {ns}
-                    </option>
-                  ))}
-                </select>
-              ) : (
-                <input
-                  value={clearNamespaceInput}
-                  onChange={e => setClearNamespaceInput(e.target.value)}
-                  className="mt-1 w-full rounded border border-stone-600 bg-black/30 px-3 py-2 text-sm text-white"
-                  placeholder="e.g. skill:gmail:user@example.com"
-                />
-              )}
-            </label>
-
-            <PrimaryButton
-              variant="outline"
-              onClick={() => void handleClearNamespace()}
-              loading={clearLoading}
-              disabled={!clearNamespaceInput.trim()}
-              className="border-coral-500/50 text-coral-300 hover:bg-coral-500/10">
-              Clear Namespace
-            </PrimaryButton>
-
-            {clearSuccess && (
-              <div className="text-xs text-sage-300 border border-sage-500/30 bg-sage-500/10 rounded p-2">
-                {clearSuccess}
-              </div>
-            )}
-            {clearError && (
-              <div className="text-xs text-coral-300 border border-coral-500/30 bg-coral-500/10 rounded p-2">
-                {clearError}
-              </div>
-            )}
-          </div>
-        </SectionCard>
-
-        <SectionCard
-          title="Query & Recall"
-          priority="tools"
-          icon={
-            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M8 10h.01M12 10h.01M16 10h.01M9 16h6M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
-              />
-            </svg>
-          }>
-          <div className="space-y-3">
-            <label className="block text-xs text-stone-300">
-              Namespace
-              <input
-                value={namespaceInput}
-                onChange={e => setNamespaceInput(e.target.value)}
-                className="mt-1 w-full rounded border border-stone-600 bg-black/30 px-3 py-2 text-sm text-white"
-                placeholder="e.g. conversations"
-              />
-            </label>
-
-            <label className="block text-xs text-stone-300">
-              Query
-              <textarea
-                value={queryInput}
-                onChange={e => setQueryInput(e.target.value)}
-                className="mt-1 w-full rounded border border-stone-600 bg-black/30 px-3 py-2 text-sm text-white"
-                rows={3}
-                placeholder="What do I remember about..."
-              />
-            </label>
-
-            <label className="block text-xs text-stone-300">
-              Max Chunks
-              <input
-                value={maxChunksInput}
-                onChange={e => setMaxChunksInput(e.target.value)}
-                className="mt-1 w-full rounded border border-stone-600 bg-black/30 px-3 py-2 text-sm text-white"
-              />
-            </label>
-
-            <div className="flex flex-wrap gap-2">
-              <PrimaryButton
-                onClick={() => void handleQuery()}
-                loading={queryLoading}
-                disabled={!namespaceInput.trim() || !queryInput.trim()}>
-                Run Query
-              </PrimaryButton>
-              <PrimaryButton
-                variant="secondary"
-                onClick={() => void handleRecall()}
-                loading={recallLoading}
-                disabled={!namespaceInput.trim()}>
-                Run Recall
-              </PrimaryButton>
+          {namespacesError && (
+            <div className="rounded-lg border border-coral-200 bg-coral-50 px-3 py-2 text-xs text-coral-700">
+              {namespacesError}
             </div>
+          )}
+          {namespaces.length > 0 ? (
+            <div className="flex flex-wrap gap-1">
+              {namespaces.map(ns => (
+                <span
+                  key={ns}
+                  className="rounded-full bg-stone-100 px-2 py-0.5 text-[11px] text-stone-600">
+                  {ns}
+                </span>
+              ))}
+            </div>
+          ) : (
+            <p className="text-xs text-stone-400">No namespaces found.</p>
+          )}
+        </section>
 
-            {queryError && (
-              <div className="text-xs text-coral-300 border border-coral-500/30 bg-coral-500/10 rounded p-2">
-                Query error: {queryError}
-              </div>
-            )}
-            {recallError && (
-              <div className="text-xs text-coral-300 border border-coral-500/30 bg-coral-500/10 rounded p-2">
-                Recall error: {recallError}
-              </div>
-            )}
-
+        {/* Query & Recall */}
+        <section className="space-y-2">
+          <h3 className="text-sm font-semibold text-stone-900">Query & Recall</h3>
+          <input
+            value={namespaceInput}
+            onChange={e => setNamespaceInput(e.target.value)}
+            className="w-full rounded-lg border border-stone-200 bg-stone-50 px-3 py-1.5 text-xs text-stone-700 placeholder:text-stone-400"
+            placeholder="Namespace"
+          />
+          <textarea
+            value={queryInput}
+            onChange={e => setQueryInput(e.target.value)}
+            className="w-full rounded-lg border border-stone-200 bg-stone-50 px-3 py-1.5 text-xs text-stone-700 placeholder:text-stone-400"
+            rows={2}
+            placeholder="Query text..."
+          />
+          <div className="flex items-center gap-2">
+            <input
+              value={maxChunksInput}
+              onChange={e => setMaxChunksInput(e.target.value)}
+              className="w-16 rounded-lg border border-stone-200 bg-stone-50 px-2 py-1.5 text-xs text-stone-700"
+              placeholder="10"
+            />
+            <span className="text-[11px] text-stone-400">max chunks</span>
+            <div className="flex-1" />
+            <button
+              type="button"
+              onClick={() => void handleQuery()}
+              disabled={queryLoading || !namespaceInput.trim() || !queryInput.trim()}
+              className="rounded-lg border border-stone-200 bg-stone-50 px-3 py-1.5 text-xs font-medium text-stone-700 hover:bg-stone-100 disabled:opacity-50">
+              {queryLoading ? '...' : 'Query'}
+            </button>
+            <button
+              type="button"
+              onClick={() => void handleRecall()}
+              disabled={recallLoading || !namespaceInput.trim()}
+              className="rounded-lg border border-stone-200 bg-stone-50 px-3 py-1.5 text-xs font-medium text-stone-700 hover:bg-stone-100 disabled:opacity-50">
+              {recallLoading ? '...' : 'Recall'}
+            </button>
+          </div>
+          {queryError && <div className="text-xs text-coral-600">Query: {queryError}</div>}
+          {recallError && <div className="text-xs text-coral-600">Recall: {recallError}</div>}
+          {(queryResult || recallResult) && (
             <div className="space-y-2">
-              <div className="text-xs text-stone-400">Query response</div>
-              <MemoryTextWithEntities
-                text={queryResult?.text ?? ''}
-                entities={queryResult?.entities}
-                className="rounded border border-stone-700 bg-black/20 p-2 overflow-auto text-[11px] leading-5 min-h-16 whitespace-pre-wrap"
-              />
-              <div className="text-xs text-stone-400">Recall response</div>
-              <MemoryTextWithEntities
-                text={recallResult?.text ?? ''}
-                entities={recallResult?.entities}
-                className="rounded border border-stone-700 bg-black/20 p-2 overflow-auto text-[11px] leading-5 min-h-16 whitespace-pre-wrap"
-              />
+              {queryResult && (
+                <div>
+                  <div className="text-[11px] font-medium text-stone-500 mb-1">Query result</div>
+                  <MemoryTextWithEntities
+                    text={queryResult.text ?? ''}
+                    entities={queryResult.entities}
+                    className="rounded-lg border border-stone-200 bg-stone-50 p-2 text-[11px] leading-5 min-h-12 whitespace-pre-wrap"
+                  />
+                </div>
+              )}
+              {recallResult && (
+                <div>
+                  <div className="text-[11px] font-medium text-stone-500 mb-1">Recall result</div>
+                  <MemoryTextWithEntities
+                    text={recallResult.text ?? ''}
+                    entities={recallResult.entities}
+                    className="rounded-lg border border-stone-200 bg-stone-50 p-2 text-[11px] leading-5 min-h-12 whitespace-pre-wrap"
+                  />
+                </div>
+              )}
             </div>
+          )}
+        </section>
+
+        {/* Clear Namespace */}
+        <section className="space-y-2">
+          <h3 className="text-sm font-semibold text-stone-900">Clear Namespace</h3>
+          <p className="text-xs text-stone-400">
+            Permanently delete all documents within a namespace.
+          </p>
+          <div className="flex gap-2">
+            {namespaces.length > 0 ? (
+              <select
+                value={clearNamespaceInput}
+                onChange={e => setClearNamespaceInput(e.target.value)}
+                className="flex-1 rounded-lg border border-stone-200 bg-stone-50 px-3 py-1.5 text-xs text-stone-700">
+                <option value="">Select namespace...</option>
+                {namespaces.map(ns => (
+                  <option key={ns} value={ns}>
+                    {ns}
+                  </option>
+                ))}
+              </select>
+            ) : (
+              <input
+                value={clearNamespaceInput}
+                onChange={e => setClearNamespaceInput(e.target.value)}
+                className="flex-1 rounded-lg border border-stone-200 bg-stone-50 px-3 py-1.5 text-xs text-stone-700 placeholder:text-stone-400"
+                placeholder="e.g. skill:gmail:user@example.com"
+              />
+            )}
+            <button
+              type="button"
+              onClick={() => void handleClearNamespace()}
+              disabled={clearLoading || !clearNamespaceInput.trim()}
+              className="rounded-lg border border-coral-200 bg-coral-50 px-3 py-1.5 text-xs font-medium text-coral-600 hover:bg-coral-100 disabled:opacity-50">
+              {clearLoading ? '...' : 'Clear'}
+            </button>
           </div>
-        </SectionCard>
+          {clearSuccess && <div className="text-xs text-sage-600">{clearSuccess}</div>}
+          {clearError && <div className="text-xs text-coral-600">{clearError}</div>}
+        </section>
       </div>
     </div>
   );
diff --git a/app/src/components/settings/panels/MessagingPanel.tsx b/app/src/components/settings/panels/MessagingPanel.tsx
index 4cc857eec..727b3c121 100644
--- a/app/src/components/settings/panels/MessagingPanel.tsx
+++ b/app/src/components/settings/panels/MessagingPanel.tsx
@@ -257,10 +257,10 @@ const MessagingPanel = () => {
   const displayError = error || loadError;
 
   return (
-    <div className="overflow-hidden h-full flex flex-col">
+    <div>
       <SettingsHeader title="Messaging" showBackButton={true} onBack={navigateBack} />
 
-      <div className="flex-1 overflow-y-auto p-4 space-y-4">
+      <div className="p-4 space-y-4">
         {/* Default channel selector */}
         <section className="rounded-xl border border-stone-200 bg-white p-4 space-y-3">
           <h3 className="text-sm font-semibold text-stone-900">Default Messaging Channel</h3>
diff --git a/app/src/components/settings/panels/PrivacyPanel.tsx b/app/src/components/settings/panels/PrivacyPanel.tsx
index 8c9cdab1d..a549264ec 100644
--- a/app/src/components/settings/panels/PrivacyPanel.tsx
+++ b/app/src/components/settings/panels/PrivacyPanel.tsx
@@ -17,11 +17,11 @@ const PrivacyPanel = () => {
   };
 
   return (
-    <div className="overflow-hidden h-full flex flex-col">
+    <div>
       <SettingsHeader title="Privacy & Security" showBackButton={true} onBack={navigateBack} />
 
-      <div className="flex-1 overflow-y-auto">
-        <div className="p-4 space-y-6">
+      <div>
+        <div className="p-4 space-y-4">
           {/* Analytics Section */}
           <div>
             <h3 className="text-xs font-semibold uppercase tracking-wider text-stone-400 mb-3 px-1">
diff --git a/app/src/components/settings/panels/ProfilePanel.tsx b/app/src/components/settings/panels/ProfilePanel.tsx
index 968c1e5bc..e253345ae 100644
--- a/app/src/components/settings/panels/ProfilePanel.tsx
+++ b/app/src/components/settings/panels/ProfilePanel.tsx
@@ -5,36 +5,26 @@ const ProfilePanel = () => {
   const { navigateBack } = useSettingsNavigation();
 
   return (
-    <div className="overflow-hidden h-full flex flex-col">
+    <div>
       <SettingsHeader title="Profile" showBackButton={true} onBack={navigateBack} />
 
-      <div className="flex-1 overflow-y-auto">
-        <div className="p-4 h-full flex items-center justify-center">
-          <div className="text-center">
-            <div className="w-16 h-16 mx-auto mb-4 bg-stone-100 rounded-full flex items-center justify-center">
-              <svg
-                className="w-8 h-8 text-stone-400"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24">
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-                />
-              </svg>
-            </div>
-            <h3 className="text-lg font-medium text-stone-900 mb-2">Profile Settings</h3>
-            <p className="text-stone-500 text-sm max-w-sm mx-auto">
-              Update your profile information, avatar, and personal preferences.
-            </p>
-            <div className="mt-6">
-              <span className="px-4 py-2 text-sm font-medium rounded-full border bg-stone-100 text-stone-600 border-stone-200">
-                Coming Soon
-              </span>
-            </div>
+      <div className="py-10 flex items-center justify-center">
+        <div className="text-center">
+          <div className="w-12 h-12 mx-auto mb-3 bg-stone-100 rounded-full flex items-center justify-center">
+            <svg
+              className="w-6 h-6 text-stone-400"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+              />
+            </svg>
           </div>
+          <p className="text-xs text-stone-500">Coming soon</p>
         </div>
       </div>
     </div>
diff --git a/app/src/components/settings/panels/RecoveryPhrasePanel.tsx b/app/src/components/settings/panels/RecoveryPhrasePanel.tsx
index b1422c462..6131064c7 100644
--- a/app/src/components/settings/panels/RecoveryPhrasePanel.tsx
+++ b/app/src/components/settings/panels/RecoveryPhrasePanel.tsx
@@ -200,10 +200,10 @@ const RecoveryPhrasePanel = () => {
   const canSave = mode === 'generate' ? confirmed : isImportComplete;
 
   return (
-    <div className="overflow-hidden h-full flex flex-col">
+    <div>
       <SettingsHeader title="Recovery Phrase" showBackButton onBack={navigateBack} />
 
-      <div className="flex-1 overflow-y-auto">
+      <div>
         <div className="p-4 max-w-md mx-auto">
           {success ? (
             <div className="flex flex-col items-center justify-center gap-3 py-12">
diff --git a/app/src/components/settings/panels/ScreenIntelligencePanel.tsx b/app/src/components/settings/panels/ScreenIntelligencePanel.tsx
index 058db06b8..686751c03 100644
--- a/app/src/components/settings/panels/ScreenIntelligencePanel.tsx
+++ b/app/src/components/settings/panels/ScreenIntelligencePanel.tsx
@@ -161,11 +161,11 @@ const ScreenIntelligencePanel = () => {
   };
 
   return (
-    <div className="overflow-hidden h-full flex flex-col z-10 relative">
+    <div className="z-10 relative">
       <SettingsHeader title="Screen Intelligence" showBackButton={true} onBack={navigateBack} />
 
-      <div className="flex-1 overflow-y-auto max-w-2xl mx-auto w-full p-4 space-y-4">
-        <section className="rounded-2xl border border-stone-200 bg-white p-4 space-y-3">
+      <div className="max-w-2xl mx-auto w-full p-4 space-y-4">
+        <section className="space-y-3">
           <h3 className="text-sm font-semibold text-stone-900">Permissions</h3>
           <PermissionBadge
             label="Screen Recording"
@@ -237,7 +237,7 @@ const ScreenIntelligencePanel = () => {
           )}
         </section>
 
-        <section className="rounded-2xl border border-stone-200 bg-white p-4 space-y-3">
+        <section className="space-y-3">
           <h3 className="text-sm font-semibold text-stone-900">Screen Intelligence Policy</h3>
 
           <label className="flex items-center justify-between rounded-xl border border-stone-200 bg-stone-50 px-3 py-2">
@@ -351,7 +351,7 @@ const ScreenIntelligencePanel = () => {
           </label>
         </section>
 
-        <section className="rounded-2xl border border-stone-200 bg-white p-4 space-y-3">
+        <section className="space-y-3">
           <h3 className="text-sm font-semibold text-stone-900">Session</h3>
           <div className="text-sm text-stone-600 space-y-1">
             <div>Status: {status?.session.active ? 'Active' : 'Stopped'}</div>
@@ -403,7 +403,7 @@ const ScreenIntelligencePanel = () => {
           </div>
         </section>
 
-        <section className="rounded-2xl border border-stone-200 bg-white p-4 space-y-3">
+        <section className="space-y-3">
           <div className="flex items-center justify-between">
             <h3 className="text-sm font-semibold text-stone-900">Vision Summaries</h3>
             <button
@@ -457,7 +457,7 @@ const DebugSection = () => {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
-    <section className="rounded-2xl border border-stone-200 bg-white p-4 space-y-3">
+    <section className="space-y-3">
       <button
         type="button"
         onClick={() => setIsOpen(prev => !prev)}
diff --git a/app/src/components/settings/panels/SkillsPanel.tsx b/app/src/components/settings/panels/SkillsPanel.tsx
index 77bdb6e3e..80b97842f 100644
--- a/app/src/components/settings/panels/SkillsPanel.tsx
+++ b/app/src/components/settings/panels/SkillsPanel.tsx
@@ -68,13 +68,13 @@ const SkillsPanel = () => {
   }, [integrations]);
 
   return (
-    <div className="h-full flex flex-col">
+    <div>
       <SettingsHeader title="Skills" showBackButton={true} onBack={navigateBack} />
 
-      <div className="flex-1 overflow-y-auto px-6 pb-10 space-y-6">
-        <section className="rounded-xl border border-stone-200 bg-white p-4 space-y-3">
+      <div className="p-4 space-y-4">
+        <section className="space-y-3">
           <div>
-            <h3 className="text-lg font-semibold text-stone-900">Browser Access</h3>
+            <h3 className="text-sm font-semibold text-stone-900">Browser Access</h3>
             <p className="text-xs text-stone-400">
               Allow the browser tool to visit any public domain (private and file URLs are still
               blocked).
diff --git a/app/src/components/settings/panels/TauriCommandsPanel.tsx b/app/src/components/settings/panels/TauriCommandsPanel.tsx
index a9cbe05c5..904453358 100644
--- a/app/src/components/settings/panels/TauriCommandsPanel.tsx
+++ b/app/src/components/settings/panels/TauriCommandsPanel.tsx
@@ -538,10 +538,10 @@ const TauriCommandsPanel = () => {
   // };
 
   return (
-    <div className="h-full flex flex-col">
+    <div>
       <SettingsHeader title="Tauri Command Console" showBackButton={true} onBack={navigateBack} />
 
-      <div className="flex-1 overflow-y-auto px-6 pb-12 space-y-10">
+      <div className="p-4 space-y-4">
         {!tauriAvailable && (
           <div className="rounded-lg border border-amber-500/40 bg-amber-500/10 px-4 py-3 text-sm text-amber-200">
             Tauri runtime not detected. Commands will fail in browser mode.
diff --git a/app/src/components/settings/panels/TeamInvitesPanel.tsx b/app/src/components/settings/panels/TeamInvitesPanel.tsx
index 27266ad11..fba80f5cb 100644
--- a/app/src/components/settings/panels/TeamInvitesPanel.tsx
+++ b/app/src/components/settings/panels/TeamInvitesPanel.tsx
@@ -101,10 +101,10 @@ const TeamInvitesPanel = () => {
   };
 
   return (
-    <div className="overflow-hidden flex flex-col h-full">
+    <div>
       <SettingsHeader title="Invites" showBackButton={true} onBack={navigateBack} />
 
-      <div className="flex-1 overflow-y-auto">
+      <div>
         <div className="max-w-md mx-auto p-4 space-y-4">
           {error && (
             <div className="rounded-xl bg-coral-500/10 border border-coral-500/20 p-3">
@@ -333,7 +333,7 @@ const TeamInvitesPanel = () => {
           {inviteToRevoke && (
             <div className="fixed inset-0 bg-stone-900/50 flex items-center justify-center z-50 p-4">
               <div className="bg-white rounded-2xl p-6 w-full max-w-md border border-stone-200">
-                <h3 className="text-lg font-semibold text-stone-900 mb-4">Revoke Invite Code</h3>
+                <h3 className="text-sm font-semibold text-stone-900 mb-4">Revoke Invite Code</h3>
 
                 {error && (
                   <div className="rounded-xl bg-coral-500/10 border border-coral-500/20 p-3 mb-4">
diff --git a/app/src/components/settings/panels/TeamManagementPanel.tsx b/app/src/components/settings/panels/TeamManagementPanel.tsx
index 68b9c1ce4..2ea7ac5b1 100644
--- a/app/src/components/settings/panels/TeamManagementPanel.tsx
+++ b/app/src/components/settings/panels/TeamManagementPanel.tsx
@@ -88,7 +88,7 @@ const TeamManagementPanel = () => {
 
   if (!teamEntry) {
     return (
-      <div className="overflow-hidden flex flex-col h-full">
+      <div className="">
         <SettingsHeader title="Team Management" showBackButton={true} onBack={navigateBack} />
         <div className="flex-1 flex items-center justify-center">
           <p className="text-sm text-stone-500">Team not found</p>
@@ -99,7 +99,7 @@ const TeamManagementPanel = () => {
 
   if (!isAdmin) {
     return (
-      <div className="overflow-hidden flex flex-col h-full">
+      <div className="">
         <SettingsHeader title="Team Management" showBackButton={true} onBack={navigateBack} />
         <div className="flex-1 flex items-center justify-center">
           <p className="text-sm text-stone-500">Access denied</p>
@@ -111,10 +111,10 @@ const TeamManagementPanel = () => {
   const { team } = teamEntry;
 
   return (
-    <div className="overflow-hidden flex flex-col h-full">
+    <div className="">
       <SettingsHeader title={`Manage ${team.name}`} showBackButton={true} onBack={navigateBack} />
 
-      <div className="flex-1 overflow-y-auto">
+      <div>
         <div className="max-w-md mx-auto p-4 space-y-4">
           {/* Team Info */}
           <div className="rounded-xl border border-stone-200 bg-stone-50 p-4">
@@ -125,7 +125,7 @@ const TeamManagementPanel = () => {
                 </span>
               </div>
               <div>
-                <h3 className="text-lg font-semibold text-stone-900">{team.name}</h3>
+                <h3 className="text-sm font-semibold text-stone-900">{team.name}</h3>
                 <p className="text-xs text-stone-500">
                   {team.subscription.plan} Plan • Created{' '}
                   {new Date(team.createdAt).toLocaleDateString()}
@@ -291,7 +291,7 @@ const TeamManagementPanel = () => {
           {isEditModalOpen && (
             <div className="fixed inset-0 bg-stone-900/40 flex items-center justify-center z-50 p-4">
               <div className="bg-white rounded-2xl p-6 w-full max-w-md border border-stone-200">
-                <h3 className="text-lg font-semibold text-stone-900 mb-4">Edit Team Settings</h3>
+                <h3 className="text-sm font-semibold text-stone-900 mb-4">Edit Team Settings</h3>
 
                 {error && (
                   <div className="rounded-xl bg-coral-500/10 border border-coral-500/20 p-3 mb-4">
@@ -337,7 +337,7 @@ const TeamManagementPanel = () => {
           {isDeleteModalOpen && (
             <div className="fixed inset-0 bg-stone-900/40 flex items-center justify-center z-50 p-4">
               <div className="bg-white rounded-2xl p-6 w-full max-w-md border border-stone-200">
-                <h3 className="text-lg font-semibold text-stone-900 mb-4">Delete Team</h3>
+                <h3 className="text-sm font-semibold text-stone-900 mb-4">Delete Team</h3>
 
                 {error && (
                   <div className="rounded-xl bg-coral-500/10 border border-coral-500/20 p-3 mb-4">
diff --git a/app/src/components/settings/panels/TeamMembersPanel.tsx b/app/src/components/settings/panels/TeamMembersPanel.tsx
index 2d4c7b7f0..8b11285c1 100644
--- a/app/src/components/settings/panels/TeamMembersPanel.tsx
+++ b/app/src/components/settings/panels/TeamMembersPanel.tsx
@@ -113,10 +113,10 @@ const TeamMembersPanel = () => {
   };
 
   return (
-    <div className="overflow-hidden flex flex-col h-full">
+    <div>
       <SettingsHeader title="Members" showBackButton={true} onBack={navigateBack} />
 
-      <div className="flex-1 overflow-y-auto">
+      <div>
         <div className="max-w-md mx-auto p-4 space-y-3">
           {error && (
             <div className="rounded-xl bg-coral-500/10 border border-coral-500/20 p-3">
@@ -257,7 +257,7 @@ const TeamMembersPanel = () => {
           {memberToRemove && (
             <div className="fixed inset-0 bg-stone-900/50 flex items-center justify-center z-50 p-4">
               <div className="bg-white rounded-2xl p-6 w-full max-w-md border border-stone-200">
-                <h3 className="text-lg font-semibold text-stone-900 mb-4">Remove Team Member</h3>
+                <h3 className="text-sm font-semibold text-stone-900 mb-4">Remove Team Member</h3>
 
                 {error && (
                   <div className="rounded-xl bg-coral-500/10 border border-coral-500/20 p-3 mb-4">
@@ -300,7 +300,7 @@ const TeamMembersPanel = () => {
           {roleChangeConfirmation && (
             <div className="fixed inset-0 bg-stone-900/50 flex items-center justify-center z-50 p-4">
               <div className="bg-white rounded-2xl p-6 w-full max-w-md border border-stone-200">
-                <h3 className="text-lg font-semibold text-stone-900 mb-4">Change Member Role</h3>
+                <h3 className="text-sm font-semibold text-stone-900 mb-4">Change Member Role</h3>
 
                 {error && (
                   <div className="rounded-xl bg-coral-500/10 border border-coral-500/20 p-3 mb-4">
diff --git a/app/src/components/settings/panels/TeamPanel.tsx b/app/src/components/settings/panels/TeamPanel.tsx
index e0175d9c8..90c7536e4 100644
--- a/app/src/components/settings/panels/TeamPanel.tsx
+++ b/app/src/components/settings/panels/TeamPanel.tsx
@@ -231,10 +231,10 @@ const TeamPanel = () => {
   };
 
   return (
-    <div className="overflow-hidden flex flex-col h-full">
+    <div>
       <SettingsHeader title="Team" showBackButton={true} onBack={navigateBack} />
 
-      <div className="flex-1 overflow-y-auto">
+      <div>
         <div className="max-w-md mx-auto p-4 space-y-4">
           {/* Error banner */}
           {error && (
@@ -331,7 +331,7 @@ const TeamPanel = () => {
           {teamToLeave && (
             <div className="fixed inset-0 bg-stone-900/50 flex items-center justify-center z-50 p-4">
               <div className="bg-white rounded-2xl p-6 w-full max-w-md border border-stone-200">
-                <h3 className="text-lg font-semibold text-stone-900 mb-4">Leave Team</h3>
+                <h3 className="text-sm font-semibold text-stone-900 mb-4">Leave Team</h3>
 
                 {error && (
                   <div className="rounded-xl bg-coral-500/10 border border-coral-500/20 p-3 mb-4">
diff --git a/app/src/components/settings/panels/WebhooksDebugPanel.tsx b/app/src/components/settings/panels/WebhooksDebugPanel.tsx
index 88d32afe8..3f626273e 100644
--- a/app/src/components/settings/panels/WebhooksDebugPanel.tsx
+++ b/app/src/components/settings/panels/WebhooksDebugPanel.tsx
@@ -13,8 +13,6 @@ import {
 } from '../../../utils/tauriCommands';
 import SettingsHeader from '../components/SettingsHeader';
 import { useSettingsNavigation } from '../hooks/useSettingsNavigation';
-import { PrimaryButton } from './components/ActionPanel';
-import SectionCard from './components/SectionCard';
 
 const LOG_LIMIT = 100;
 
@@ -141,215 +139,135 @@ const WebhooksDebugPanel = () => {
   }, [loadData]);
 
   return (
-    <div className="overflow-hidden h-full flex flex-col">
+    <div>
       <SettingsHeader title="Webhooks Debug" showBackButton={true} onBack={navigateBack} />
 
-      <div className="flex-1 overflow-y-auto p-4 space-y-4">
-        <SectionCard
-          title="Overview"
-          priority="development"
-          icon={
-            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M8 9l4-4 4 4m0 6l-4 4-4-4M3 12h18"
-              />
-            </svg>
-          }>
-          <div className="flex flex-wrap items-center gap-3">
-            <PrimaryButton onClick={() => void loadData()} loading={loading} variant="secondary">
-              Refresh
-            </PrimaryButton>
-            <PrimaryButton
-              onClick={() => void handleClearLogs()}
-              loading={clearing}
-              disabled={logs.length === 0}
-              variant="outline">
-              Clear Logs
-            </PrimaryButton>
-            <div className="rounded-lg border border-stone-200 bg-white px-3 py-2 text-sm text-stone-700">
-              Registered:{' '}
-              <span className="font-semibold text-stone-900">{registrations.length}</span>
-            </div>
-            <div className="rounded-lg border border-stone-200 bg-white px-3 py-2 text-sm text-stone-700">
-              Captured: <span className="font-semibold text-stone-900">{logs.length}</span>
-            </div>
-            <div className="rounded-lg border border-stone-200 bg-white px-3 py-2 text-sm text-stone-700">
-              Live:{' '}
-              <span
-                className={isLive ? 'font-semibold text-sage-700' : 'font-semibold text-stone-500'}>
-                {isLive ? 'connected' : 'disconnected'}
-              </span>
-            </div>
+      <div className="p-4 space-y-5">
+        {/* Status bar */}
+        <div className="flex flex-wrap items-center gap-2 text-xs">
+          <button
+            type="button"
+            onClick={() => void loadData()}
+            disabled={loading}
+            className="rounded-lg border border-stone-200 bg-stone-50 px-3 py-1.5 font-medium text-stone-700 hover:bg-stone-100 disabled:opacity-50">
+            {loading ? 'Loading...' : 'Refresh'}
+          </button>
+          <button
+            type="button"
+            onClick={() => void handleClearLogs()}
+            disabled={clearing || logs.length === 0}
+            className="rounded-lg border border-stone-200 bg-stone-50 px-3 py-1.5 font-medium text-stone-700 hover:bg-stone-100 disabled:opacity-50">
+            {clearing ? 'Clearing...' : 'Clear Logs'}
+          </button>
+          <span className="text-stone-500">
+            {registrations.length} registered &middot; {logs.length} captured &middot;{' '}
+            <span className={isLive ? 'text-sage-600' : 'text-stone-400'}>
+              {isLive ? 'live' : 'disconnected'}
+            </span>
+          </span>
+        </div>
+
+        {error && (
+          <div className="rounded-lg border border-coral-200 bg-coral-50 px-3 py-2 text-xs text-coral-700">
+            {error}
           </div>
+        )}
 
-          {lastEvent && (
-            <div className="rounded-lg border border-stone-200 bg-white px-3 py-2 text-xs text-stone-600">
-              Last event: <span className="font-medium text-stone-900">{lastEvent.event_type}</span>{' '}
-              at {formatDateTime(lastEvent.timestamp)}
-            </div>
-          )}
+        {lastEvent && (
+          <div className="text-xs text-stone-500">
+            Last event: <span className="font-medium text-stone-700">{lastEvent.event_type}</span>{' '}
+            at {formatDateTime(lastEvent.timestamp)}
+          </div>
+        )}
 
-          {error && (
-            <div className="rounded-lg border border-coral-500/40 bg-coral-50 px-3 py-2 text-sm text-coral-700">
-              {error}
-            </div>
-          )}
-        </SectionCard>
-
-        <SectionCard
-          title="Registered Webhooks"
-          priority="tools"
-          icon={
-            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M13.828 10.172a4 4 0 010 5.656l-2 2a4 4 0 01-5.656-5.656l1-1m5-5a4 4 0 015.656 5.656l-1 1m-5 5l5-5"
-              />
-            </svg>
-          }>
+        {/* Registrations */}
+        <section className="space-y-2">
+          <h3 className="text-sm font-semibold text-stone-900">Registered Webhooks</h3>
           {registrations.length === 0 ? (
-            <div className="rounded-lg border border-dashed border-stone-300 bg-white px-4 py-6 text-sm text-stone-500">
-              No webhook registrations are active in the runtime.
-            </div>
+            <p className="text-xs text-stone-400">No active registrations.</p>
           ) : (
-            <div className="space-y-3">
+            <div className="space-y-2">
               {registrations.map(registration => (
                 <div
                   key={registration.tunnel_uuid}
-                  className="rounded-xl border border-stone-200 bg-white p-4">
+                  className="rounded-xl border border-stone-200 bg-stone-50 p-3">
                   <div className="flex flex-wrap items-center justify-between gap-2">
-                    <div>
-                      <div className="text-sm font-semibold text-stone-900">
-                        {registration.tunnel_name || registration.tunnel_uuid}
-                      </div>
-                      <div className="text-xs text-stone-500">{registration.tunnel_uuid}</div>
-                    </div>
-                    <div className="flex flex-wrap gap-2 text-xs">
-                      <span className="rounded-full bg-stone-100 px-3 py-1 font-medium text-stone-700">
+                    <span className="text-xs font-semibold text-stone-900">
+                      {registration.tunnel_name || registration.tunnel_uuid}
+                    </span>
+                    <div className="flex gap-1 text-[10px]">
+                      <span className="rounded-full bg-stone-200 px-2 py-0.5 text-stone-600">
                         {registration.target_kind}
                       </span>
-                      <span className="rounded-full bg-stone-100 px-3 py-1 font-medium text-stone-700">
+                      <span className="rounded-full bg-stone-200 px-2 py-0.5 text-stone-600">
                         {registration.skill_id}
                       </span>
                     </div>
                   </div>
-                  <div className="mt-3 grid gap-2 text-xs text-stone-600">
-                    <div>
-                      Target URL:{' '}
-                      <span className="font-mono text-stone-900">
-                        {tunnelsApi.ingressUrl(fallbackBackendUrl, registration.tunnel_uuid)}
-                      </span>
-                    </div>
-                    {registration.backend_tunnel_id && (
-                      <div>
-                        Backend tunnel ID:{' '}
-                        <span className="font-mono text-stone-900">
-                          {registration.backend_tunnel_id}
-                        </span>
-                      </div>
-                    )}
+                  <div className="mt-1 text-[11px] text-stone-500 font-mono break-all">
+                    {tunnelsApi.ingressUrl(fallbackBackendUrl, registration.tunnel_uuid)}
                   </div>
                 </div>
               ))}
             </div>
           )}
-        </SectionCard>
+        </section>
 
-        <SectionCard
-          title="Captured Requests"
-          priority="development"
-          icon={
-            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-              />
-            </svg>
-          }>
+        {/* Captured Requests */}
+        <section className="space-y-2">
+          <h3 className="text-sm font-semibold text-stone-900">Captured Requests</h3>
           {logs.length === 0 ? (
-            <div className="rounded-lg border border-dashed border-stone-300 bg-white px-4 py-6 text-sm text-stone-500">
-              No webhook requests captured yet.
-            </div>
+            <p className="text-xs text-stone-400">No webhook requests captured yet.</p>
           ) : (
-            <div className="grid gap-4 lg:grid-cols-[minmax(0,0.95fr)_minmax(0,1.25fr)]">
-              <div className="space-y-2">
-                {logs.map(entry => (
-                  <button
-                    key={entry.correlation_id}
-                    type="button"
-                    onClick={() => setSelectedCorrelationId(entry.correlation_id)}
-                    className={`w-full rounded-xl border p-3 text-left transition-colors ${
-                      selectedLog?.correlation_id === entry.correlation_id
-                        ? 'border-primary-300 bg-primary-50'
-                        : 'border-stone-200 bg-white hover:bg-stone-50'
-                    }`}>
-                    <div className="flex items-center justify-between gap-2">
-                      <div className="text-sm font-semibold text-stone-900">
-                        {entry.method} {entry.path}
-                      </div>
-                      <div className="text-xs font-medium text-stone-500">
-                        {entry.status_code ?? '...'}
-                      </div>
-                    </div>
-                    <div className="mt-1 text-xs text-stone-500">
-                      {entry.tunnel_name} {entry.skill_id ? `• ${entry.skill_id}` : '• unrouted'}
-                    </div>
-                    <div className="mt-1 text-xs text-stone-500">
-                      {formatDateTime(entry.updated_at)}
-                    </div>
-                  </button>
-                ))}
-              </div>
+            <div className="space-y-2">
+              {logs.map(entry => (
+                <button
+                  key={entry.correlation_id}
+                  type="button"
+                  onClick={() => setSelectedCorrelationId(entry.correlation_id)}
+                  className={`w-full rounded-xl border p-3 text-left transition-colors ${
+                    selectedLog?.correlation_id === entry.correlation_id
+                      ? 'border-primary-300 bg-primary-50'
+                      : 'border-stone-200 bg-stone-50 hover:bg-stone-100'
+                  }`}>
+                  <div className="flex items-center justify-between gap-2">
+                    <span className="text-xs font-semibold text-stone-900">
+                      {entry.method} {entry.path}
+                    </span>
+                    <span className="text-[10px] text-stone-500">{entry.status_code ?? '...'}</span>
+                  </div>
+                  <div className="mt-1 text-[11px] text-stone-500">
+                    {entry.tunnel_name} {entry.skill_id ? `· ${entry.skill_id}` : '· unrouted'} ·{' '}
+                    {formatDateTime(entry.updated_at)}
+                  </div>
+                </button>
+              ))}
 
               {selectedLog && (
-                <div className="rounded-xl border border-stone-200 bg-white p-4 space-y-4">
-                  <div className="flex flex-wrap items-start justify-between gap-3">
-                    <div>
-                      <div className="text-lg font-semibold text-stone-900">
-                        {selectedLog.method} {selectedLog.path}
-                      </div>
-                      <div className="text-xs text-stone-500">{selectedLog.correlation_id}</div>
+                <div className="rounded-xl border border-stone-200 bg-stone-50 p-3 space-y-3">
+                  <div>
+                    <div className="text-xs font-semibold text-stone-900">
+                      {selectedLog.method} {selectedLog.path}
                     </div>
-                    <div className="flex flex-wrap gap-2 text-xs">
-                      <span className="rounded-full bg-stone-100 px-3 py-1 font-medium text-stone-700">
-                        stage: {selectedLog.stage}
-                      </span>
-                      <span className="rounded-full bg-stone-100 px-3 py-1 font-medium text-stone-700">
-                        status: {selectedLog.status_code ?? 'pending'}
-                      </span>
+                    <div className="text-[10px] text-stone-400 font-mono">
+                      {selectedLog.correlation_id}
                     </div>
                   </div>
 
-                  <div className="grid gap-2 text-sm text-stone-700">
-                    <div>
-                      Tunnel:{' '}
-                      <span className="font-medium text-stone-900">{selectedLog.tunnel_name}</span>
-                    </div>
-                    <div>
-                      Tunnel UUID:{' '}
-                      <span className="font-mono text-xs text-stone-900">
-                        {selectedLog.tunnel_uuid}
-                      </span>
-                    </div>
-                    <div>
-                      Skill:{' '}
-                      <span className="font-medium text-stone-900">
-                        {selectedLog.skill_id || 'unrouted'}
-                      </span>
-                    </div>
-                    <div>Received: {formatDateTime(selectedLog.timestamp)}</div>
-                    <div>Updated: {formatDateTime(selectedLog.updated_at)}</div>
+                  <div className="flex flex-wrap gap-1 text-[10px]">
+                    <span className="rounded-full bg-stone-200 px-2 py-0.5 text-stone-600">
+                      {selectedLog.stage}
+                    </span>
+                    <span className="rounded-full bg-stone-200 px-2 py-0.5 text-stone-600">
+                      {selectedLog.status_code ?? 'pending'}
+                    </span>
+                    <span className="rounded-full bg-stone-200 px-2 py-0.5 text-stone-600">
+                      {selectedLog.skill_id || 'unrouted'}
+                    </span>
                   </div>
 
                   {selectedLog.error_message && (
-                    <div className="rounded-lg border border-coral-500/40 bg-coral-50 px-3 py-2 text-sm text-coral-700">
+                    <div className="rounded-lg border border-coral-200 bg-coral-50 px-3 py-2 text-xs text-coral-700">
                       {selectedLog.error_message}
                     </div>
                   )}
@@ -381,7 +299,7 @@ const WebhooksDebugPanel = () => {
               )}
             </div>
           )}
-        </SectionCard>
+        </section>
       </div>
     </div>
   );
@@ -389,14 +307,14 @@ const WebhooksDebugPanel = () => {
 
 function PayloadBlock({ title, value }: { title: string; value: string }) {
   return (
-    <div>
-      <div className="mb-1 text-xs font-semibold uppercase tracking-wide text-stone-500">
+    <details className="text-xs">
+      <summary className="cursor-pointer font-semibold text-stone-500 uppercase tracking-wide text-[10px]">
         {title}
-      </div>
-      <pre className="max-h-56 overflow-auto rounded-lg border border-stone-200 bg-stone-950 p-3 text-xs text-stone-100 whitespace-pre-wrap break-words">
+      </summary>
+      <pre className="mt-1 max-h-40 overflow-auto rounded-lg border border-stone-200 bg-stone-950 p-2 text-[11px] text-stone-100 whitespace-pre-wrap break-words">
         {value}
       </pre>
-    </div>
+    </details>
   );
 }
 
diff --git a/app/src/components/skills/SkillSetupWizard.tsx b/app/src/components/skills/SkillSetupWizard.tsx
index e20453154..17bbe589a 100644
--- a/app/src/components/skills/SkillSetupWizard.tsx
+++ b/app/src/components/skills/SkillSetupWizard.tsx
@@ -15,7 +15,7 @@
 import { useState, useEffect, useCallback } from "react";
 import { useSkillSnapshot } from "../../lib/skills/hooks.ts";
 import { skillManager } from "../../lib/skills/manager.ts";
-import { getSkillSnapshot, listAvailable, setSetupComplete, startSkill } from "../../lib/skills/skillsApi.ts";
+import { getSkillSnapshot, installSkill, listAvailable, setSetupComplete, startSkill } from "../../lib/skills/skillsApi.ts";
 import { callCoreRpc } from "../../services/coreRpcClient.ts";
 import { apiClient } from "../../services/apiClient.ts";
 import { openUrl } from "../../utils/openUrl.ts";
@@ -664,32 +664,32 @@ function OAuthLoginView({
   onCancel,
   waiting,
   skillId,
-  onManualComplete,
+  onManualComplete: _onManualComplete,
 }: OAuthLoginViewProps) {
   const providerName = formatProviderName(provider);
   const [devIntegrationId, setDevIntegrationId] = useState("");
+  const [devEncryptionKey, setDevEncryptionKey] = useState("");
   const [devSubmitting, setDevSubmitting] = useState(false);
   const [devError, setDevError] = useState("");
 
   const handleDevManualComplete = useCallback(async () => {
     const id = devIntegrationId.trim();
+    const encKey = devEncryptionKey.trim();
     if (!id || !skillId) return;
+    if (!encKey) { setDevError("Encryption key is required"); return; }
+    if (/["\\]/.test(encKey) || encKey !== encKey.replace(/[^\x20-\x7e]/g, "")) { setDevError("Encryption key contains invalid characters"); return; }
     setDevSubmitting(true);
     setDevError("");
     try {
-      // 1. Fetch client key share (one-time handoff)
-      let clientKeyShare: string | undefined;
-      try {
-        const result = await callCoreRpc<{ result: { clientKey: string } }>({
-          method: "openhuman.auth.oauth_fetch_client_key",
-          params: { integrationId: id },
-        });
-        clientKeyShare = result?.result?.clientKey;
-      } catch {
-        // May be plaintext OAuth — continue without key
-      }
+      // 1. Use the manually-provided client-side encryption key
+      const clientKeyShare: string | undefined = encKey || undefined;
 
-      // 2. Start skill runtime
+      // 2. Ensure skill is installed, then start the runtime
+      try {
+        await installSkill(skillId);
+      } catch {
+        // May already be installed
+      }
       try {
         await startSkill(skillId);
       } catch (startErr) {
@@ -710,19 +710,17 @@ function OAuthLoginView({
       }
       if (!running) throw new Error("Skill did not reach running state within timeout");
 
-      // 4. Notify skill of OAuth completion
+      // 4. Notify skill of OAuth completion — the snapshot effect will
+      //    detect the connected state and transition to setup automatically.
       await skillManager.notifyOAuthComplete(skillId, id, provider, {
         clientKeyShare,
       });
-
-      // 5. Advance wizard
-      onManualComplete?.();
     } catch (err) {
       setDevError(err instanceof Error ? err.message : String(err));
     } finally {
       setDevSubmitting(false);
     }
-  }, [devIntegrationId, skillId, provider, onManualComplete]);
+  }, [devIntegrationId, devEncryptionKey, skillId, provider]);
 
   return (
     <div className="py-6">
@@ -781,26 +779,35 @@ function OAuthLoginView({
             Open login page again
           </button>
 
-          {/* Dev-mode: manual integration ID entry */}
+          {/* Dev-mode: manual integration ID + encryption key entry */}
           {IS_DEV && skillId && (
             <div className="mt-4 pt-4 border-t border-stone-700/50">
               <p className="text-[10px] text-stone-500 uppercase tracking-wider mb-2">Dev mode</p>
-              <div className="flex gap-2">
+              <div className="flex flex-col gap-2">
                 <input
                   type="text"
                   placeholder="Integration ID (24-char hex)"
                   value={devIntegrationId}
                   onChange={(e) => setDevIntegrationId(e.target.value)}
-                  onKeyDown={(e) => { if (e.key === "Enter") handleDevManualComplete(); }}
-                  className="flex-1 px-3 py-1.5 text-xs bg-stone-800 border border-stone-700 rounded-lg text-white placeholder:text-stone-500 focus:outline-none focus:border-primary-500"
+                  className="w-full px-3 py-1.5 text-xs bg-stone-800 border border-stone-700 rounded-lg text-white placeholder:text-stone-500 focus:outline-none focus:border-primary-500"
                 />
-                <button
-                  onClick={handleDevManualComplete}
-                  disabled={devSubmitting || !devIntegrationId.trim()}
-                  className="px-3 py-1.5 text-xs font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-500 disabled:opacity-40 transition-colors"
-                >
-                  {devSubmitting ? "..." : "Go"}
-                </button>
+                <div className="flex gap-2">
+                  <input
+                    type="password"
+                    placeholder="Client-side encryption key"
+                    value={devEncryptionKey}
+                    onChange={(e) => setDevEncryptionKey(e.target.value)}
+                    onKeyDown={(e) => { if (e.key === "Enter") handleDevManualComplete(); }}
+                    className="flex-1 px-3 py-1.5 text-xs bg-stone-800 border border-stone-700 rounded-lg text-white placeholder:text-stone-500 focus:outline-none focus:border-primary-500"
+                  />
+                  <button
+                    onClick={handleDevManualComplete}
+                    disabled={devSubmitting || !devIntegrationId.trim() || !devEncryptionKey.trim()}
+                    className="px-3 py-1.5 text-xs font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-500 disabled:opacity-40 transition-colors"
+                  >
+                    {devSubmitting ? "..." : "Go"}
+                  </button>
+                </div>
               </div>
               {devError && (
                 <p className="mt-1.5 text-[11px] text-coral-400">{devError}</p>
diff --git a/app/src/index.css b/app/src/index.css
index eb08ae786..ca9da5efb 100644
--- a/app/src/index.css
+++ b/app/src/index.css
@@ -153,8 +153,8 @@
   }
 
   .app-dotted-canvas {
-    background-color: #f8f7f2;
-    background-image: radial-gradient(circle at center, #cdcdcd 1px, transparent 1px);
+    background-color: transparent;
+    background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.2) 1px, transparent 1px);
     background-size: 18px 18px;
     background-position: 0 0;
   }
diff --git a/app/src/lib/meshGradient.d.ts b/app/src/lib/meshGradient.d.ts
new file mode 100644
index 000000000..c53c0b70f
--- /dev/null
+++ b/app/src/lib/meshGradient.d.ts
@@ -0,0 +1,14 @@
+export interface GradientConfig {
+  playing: boolean;
+}
+
+export class Gradient {
+  el?: HTMLCanvasElement;
+  conf?: GradientConfig;
+  play(): void;
+  pause(): void;
+  disconnect(): void;
+  initGradient(selector: string): this;
+  toggleColor(index: number): void;
+  updateFrequency(freq: number): void;
+}
diff --git a/app/src/lib/meshGradient.js b/app/src/lib/meshGradient.js
new file mode 100644
index 000000000..50e635766
--- /dev/null
+++ b/app/src/lib/meshGradient.js
@@ -0,0 +1,686 @@
+/* eslint-disable no-undef, no-unused-vars */
+/*
+ *   Stripe WebGl Gradient Animation
+ *   All Credits to Stripe.com
+ *   ScrollObserver functionality to disable animation when not scrolled into view has been disabled and
+ *   commented out for now.
+ *   https://kevinhufnagl.com
+ */
+
+//Converting colors to proper format
+function normalizeColor(hexCode) {
+  return [((hexCode >> 16) & 255) / 255, ((hexCode >> 8) & 255) / 255, (255 & hexCode) / 255];
+}
+['SCREEN', 'LINEAR_LIGHT'].reduce((hexCode, t, n) => Object.assign(hexCode, { [t]: n }), {});
+
+//Essential functionality of WebGl
+//t = width
+//n = height
+class MiniGl {
+  constructor(canvas, width, height, debug = false) {
+    const _miniGl = this,
+      debug_output = -1 !== document.location.search.toLowerCase().indexOf('debug=webgl');
+    ((_miniGl.canvas = canvas),
+      (_miniGl.gl = _miniGl.canvas.getContext('webgl', { antialias: true })),
+      (_miniGl.meshes = []));
+    const context = _miniGl.gl;
+    (width && height && this.setSize(width, height),
+      _miniGl.lastDebugMsg,
+      (_miniGl.debug =
+        debug && debug_output
+          ? function (e) {
+              const t = new Date();
+              (t - _miniGl.lastDebugMsg > 1e3 && console.log('---'),
+                console.log(
+                  t.toLocaleTimeString() + Array(Math.max(0, 32 - e.length)).join(' ') + e + ': ',
+                  ...Array.from(arguments).slice(1)
+                ),
+                (_miniGl.lastDebugMsg = t));
+            }
+          : () => {}),
+      Object.defineProperties(_miniGl, {
+        Material: {
+          enumerable: false,
+          value: class {
+            constructor(vertexShaders, fragments, uniforms = {}) {
+              const material = this;
+              function getShaderByType(type, source) {
+                const shader = context.createShader(type);
+                return (
+                  context.shaderSource(shader, source),
+                  context.compileShader(shader),
+                  context.getShaderParameter(shader, context.COMPILE_STATUS) ||
+                    console.error(context.getShaderInfoLog(shader)),
+                  _miniGl.debug('Material.compileShaderSource', { source: source }),
+                  shader
+                );
+              }
+              function getUniformVariableDeclarations(uniforms, type) {
+                return Object.entries(uniforms)
+                  .map(([uniform, value]) => value.getDeclaration(uniform, type))
+                  .join('\n');
+              }
+              ((material.uniforms = uniforms), (material.uniformInstances = []));
+
+              const prefix = '\n              precision highp float;\n            ';
+              ((material.vertexSource = `\n              ${prefix}\n              attribute vec4 position;\n              attribute vec2 uv;\n              attribute vec2 uvNorm;\n              ${getUniformVariableDeclarations(_miniGl.commonUniforms, 'vertex')}\n              ${getUniformVariableDeclarations(uniforms, 'vertex')}\n              ${vertexShaders}\n            `),
+                (material.Source = `\n              ${prefix}\n              ${getUniformVariableDeclarations(_miniGl.commonUniforms, 'fragment')}\n              ${getUniformVariableDeclarations(uniforms, 'fragment')}\n              ${fragments}\n            `),
+                (material.vertexShader = getShaderByType(
+                  context.VERTEX_SHADER,
+                  material.vertexSource
+                )),
+                (material.fragmentShader = getShaderByType(
+                  context.FRAGMENT_SHADER,
+                  material.Source
+                )),
+                (material.program = context.createProgram()),
+                context.attachShader(material.program, material.vertexShader),
+                context.attachShader(material.program, material.fragmentShader),
+                context.linkProgram(material.program),
+                context.getProgramParameter(material.program, context.LINK_STATUS) ||
+                  console.error(context.getProgramInfoLog(material.program)),
+                context.useProgram(material.program),
+                material.attachUniforms(void 0, _miniGl.commonUniforms),
+                material.attachUniforms(void 0, material.uniforms));
+            }
+            //t = uniform
+            attachUniforms(name, uniforms) {
+              //n  = material
+              const material = this;
+              void 0 === name
+                ? Object.entries(uniforms).forEach(([name, uniform]) => {
+                    material.attachUniforms(name, uniform);
+                  })
+                : 'array' == uniforms.type
+                  ? uniforms.value.forEach((uniform, i) =>
+                      material.attachUniforms(`${name}[${i}]`, uniform)
+                    )
+                  : 'struct' == uniforms.type
+                    ? Object.entries(uniforms.value).forEach(([uniform, i]) =>
+                        material.attachUniforms(`${name}.${uniform}`, i)
+                      )
+                    : (_miniGl.debug('Material.attachUniforms', { name: name, uniform: uniforms }),
+                      material.uniformInstances.push({
+                        uniform: uniforms,
+                        location: context.getUniformLocation(material.program, name),
+                      }));
+            }
+          },
+        },
+        Uniform: {
+          enumerable: !1,
+          value: class {
+            constructor(e) {
+              ((this.type = 'float'), Object.assign(this, e));
+              ((this.typeFn =
+                {
+                  float: '1f',
+                  int: '1i',
+                  vec2: '2fv',
+                  vec3: '3fv',
+                  vec4: '4fv',
+                  mat4: 'Matrix4fv',
+                }[this.type] || '1f'),
+                this.update());
+            }
+            update(value) {
+              void 0 !== this.value &&
+                context[`uniform${this.typeFn}`](
+                  value,
+                  0 === this.typeFn.indexOf('Matrix') ? this.transpose : this.value,
+                  0 === this.typeFn.indexOf('Matrix') ? this.value : null
+                );
+            }
+            //e - name
+            //t - type
+            //n - length
+            getDeclaration(name, type, length) {
+              const uniform = this;
+              if (uniform.excludeFrom !== type) {
+                if ('array' === uniform.type)
+                  return (
+                    uniform.value[0].getDeclaration(name, type, uniform.value.length) +
+                    `\nconst int ${name}_length = ${uniform.value.length};`
+                  );
+                if ('struct' === uniform.type) {
+                  let name_no_prefix = name.replace('u_', '');
+                  return (
+                    (name_no_prefix =
+                      name_no_prefix.charAt(0).toUpperCase() + name_no_prefix.slice(1)),
+                    `uniform struct ${name_no_prefix} 
+                                {\n` +
+                      Object.entries(uniform.value)
+                        .map(([name, uniform]) =>
+                          uniform.getDeclaration(name, type).replace(/^uniform/, '')
+                        )
+                        .join('') +
+                      `\n} ${name}${length > 0 ? `[${length}]` : ''};`
+                  );
+                }
+                return `uniform ${uniform.type} ${name}${length > 0 ? `[${length}]` : ''};`;
+              }
+            }
+          },
+        },
+        PlaneGeometry: {
+          enumerable: !1,
+          value: class {
+            constructor(width, height, n, i, orientation) {
+              (context.createBuffer(),
+                (this.attributes = {
+                  position: new _miniGl.Attribute({ target: context.ARRAY_BUFFER, size: 3 }),
+                  uv: new _miniGl.Attribute({ target: context.ARRAY_BUFFER, size: 2 }),
+                  uvNorm: new _miniGl.Attribute({ target: context.ARRAY_BUFFER, size: 2 }),
+                  index: new _miniGl.Attribute({
+                    target: context.ELEMENT_ARRAY_BUFFER,
+                    size: 3,
+                    type: context.UNSIGNED_SHORT,
+                  }),
+                }),
+                this.setTopology(n, i),
+                this.setSize(width, height, orientation));
+            }
+            setTopology(e = 1, t = 1) {
+              const n = this;
+              ((n.xSegCount = e),
+                (n.ySegCount = t),
+                (n.vertexCount = (n.xSegCount + 1) * (n.ySegCount + 1)),
+                (n.quadCount = n.xSegCount * n.ySegCount * 2),
+                (n.attributes.uv.values = new Float32Array(2 * n.vertexCount)),
+                (n.attributes.uvNorm.values = new Float32Array(2 * n.vertexCount)),
+                (n.attributes.index.values = new Uint16Array(3 * n.quadCount)));
+              for (let e = 0; e <= n.ySegCount; e++)
+                for (let t = 0; t <= n.xSegCount; t++) {
+                  const i = e * (n.xSegCount + 1) + t;
+                  if (
+                    ((n.attributes.uv.values[2 * i] = t / n.xSegCount),
+                    (n.attributes.uv.values[2 * i + 1] = 1 - e / n.ySegCount),
+                    (n.attributes.uvNorm.values[2 * i] = (t / n.xSegCount) * 2 - 1),
+                    (n.attributes.uvNorm.values[2 * i + 1] = 1 - (e / n.ySegCount) * 2),
+                    t < n.xSegCount && e < n.ySegCount)
+                  ) {
+                    const s = e * n.xSegCount + t;
+                    ((n.attributes.index.values[6 * s] = i),
+                      (n.attributes.index.values[6 * s + 1] = i + 1 + n.xSegCount),
+                      (n.attributes.index.values[6 * s + 2] = i + 1),
+                      (n.attributes.index.values[6 * s + 3] = i + 1),
+                      (n.attributes.index.values[6 * s + 4] = i + 1 + n.xSegCount),
+                      (n.attributes.index.values[6 * s + 5] = i + 2 + n.xSegCount));
+                  }
+                }
+              (n.attributes.uv.update(),
+                n.attributes.uvNorm.update(),
+                n.attributes.index.update(),
+                _miniGl.debug('Geometry.setTopology', {
+                  uv: n.attributes.uv,
+                  uvNorm: n.attributes.uvNorm,
+                  index: n.attributes.index,
+                }));
+            }
+            setSize(width = 1, height = 1, orientation = 'xz') {
+              const geometry = this;
+              ((geometry.width = width),
+                (geometry.height = height),
+                (geometry.orientation = orientation),
+                (geometry.attributes.position.values &&
+                  geometry.attributes.position.values.length === 3 * geometry.vertexCount) ||
+                  (geometry.attributes.position.values = new Float32Array(
+                    3 * geometry.vertexCount
+                  )));
+              const o = width / -2,
+                r = height / -2,
+                segment_width = width / geometry.xSegCount,
+                segment_height = height / geometry.ySegCount;
+              for (let yIndex = 0; yIndex <= geometry.ySegCount; yIndex++) {
+                const t = r + yIndex * segment_height;
+                for (let xIndex = 0; xIndex <= geometry.xSegCount; xIndex++) {
+                  const r = o + xIndex * segment_width,
+                    l = yIndex * (geometry.xSegCount + 1) + xIndex;
+                  ((geometry.attributes.position.values[3 * l + 'xyz'.indexOf(orientation[0])] = r),
+                    (geometry.attributes.position.values[3 * l + 'xyz'.indexOf(orientation[1])] =
+                      -t));
+                }
+              }
+              (geometry.attributes.position.update(),
+                _miniGl.debug('Geometry.setSize', { position: geometry.attributes.position }));
+            }
+          },
+        },
+        Mesh: {
+          enumerable: !1,
+          value: class {
+            constructor(geometry, material) {
+              const mesh = this;
+              ((mesh.geometry = geometry),
+                (mesh.material = material),
+                (mesh.wireframe = !1),
+                (mesh.attributeInstances = []),
+                Object.entries(mesh.geometry.attributes).forEach(([e, attribute]) => {
+                  mesh.attributeInstances.push({
+                    attribute: attribute,
+                    location: attribute.attach(e, mesh.material.program),
+                  });
+                }),
+                _miniGl.meshes.push(mesh),
+                _miniGl.debug('Mesh.constructor', { mesh: mesh }));
+            }
+            draw() {
+              (context.useProgram(this.material.program),
+                this.material.uniformInstances.forEach(({ uniform: e, location: t }) =>
+                  e.update(t)
+                ),
+                this.attributeInstances.forEach(({ attribute: e, location: t }) => e.use(t)),
+                context.drawElements(
+                  this.wireframe ? context.LINES : context.TRIANGLES,
+                  this.geometry.attributes.index.values.length,
+                  context.UNSIGNED_SHORT,
+                  0
+                ));
+            }
+            remove() {
+              _miniGl.meshes = _miniGl.meshes.filter(e => e != this);
+            }
+          },
+        },
+        Attribute: {
+          enumerable: !1,
+          value: class {
+            constructor(e) {
+              ((this.type = context.FLOAT),
+                (this.normalized = !1),
+                (this.buffer = context.createBuffer()),
+                Object.assign(this, e),
+                this.update());
+            }
+            update() {
+              void 0 !== this.values &&
+                (context.bindBuffer(this.target, this.buffer),
+                context.bufferData(this.target, this.values, context.STATIC_DRAW));
+            }
+            attach(e, t) {
+              const n = context.getAttribLocation(t, e);
+              return (
+                this.target === context.ARRAY_BUFFER &&
+                  (context.enableVertexAttribArray(n),
+                  context.vertexAttribPointer(n, this.size, this.type, this.normalized, 0, 0)),
+                n
+              );
+            }
+            use(e) {
+              (context.bindBuffer(this.target, this.buffer),
+                this.target === context.ARRAY_BUFFER &&
+                  (context.enableVertexAttribArray(e),
+                  context.vertexAttribPointer(e, this.size, this.type, this.normalized, 0, 0)));
+            }
+          },
+        },
+      }));
+    const a = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
+    _miniGl.commonUniforms = {
+      projectionMatrix: new _miniGl.Uniform({ type: 'mat4', value: a }),
+      modelViewMatrix: new _miniGl.Uniform({ type: 'mat4', value: a }),
+      resolution: new _miniGl.Uniform({ type: 'vec2', value: [1, 1] }),
+      aspectRatio: new _miniGl.Uniform({ type: 'float', value: 1 }),
+    };
+  }
+  setSize(e = 640, t = 480) {
+    ((this.width = e),
+      (this.height = t),
+      (this.canvas.width = e),
+      (this.canvas.height = t),
+      this.gl.viewport(0, 0, e, t),
+      (this.commonUniforms.resolution.value = [e, t]),
+      (this.commonUniforms.aspectRatio.value = e / t),
+      this.debug('MiniGL.setSize', { width: e, height: t }));
+  }
+  //left, right, top, bottom, near, far
+  setOrthographicCamera(e = 0, t = 0, n = 0, i = -2e3, s = 2e3) {
+    ((this.commonUniforms.projectionMatrix.value = [
+      2 / this.width,
+      0,
+      0,
+      0,
+      0,
+      2 / this.height,
+      0,
+      0,
+      0,
+      0,
+      2 / (i - s),
+      0,
+      e,
+      t,
+      n,
+      1,
+    ]),
+      this.debug('setOrthographicCamera', this.commonUniforms.projectionMatrix.value));
+  }
+  render() {
+    (this.gl.clearColor(0, 0, 0, 0), this.gl.clearDepth(1), this.meshes.forEach(e => e.draw()));
+  }
+}
+
+//Sets initial properties
+function e(object, propertyName, val) {
+  return (
+    propertyName in object
+      ? Object.defineProperty(object, propertyName, {
+          value: val,
+          enumerable: !0,
+          configurable: !0,
+          writable: !0,
+        })
+      : (object[propertyName] = val),
+    object
+  );
+}
+
+//Gradient object
+class Gradient {
+  constructor(...t) {
+    (e(this, 'el', void 0),
+      e(this, 'cssVarRetries', 0),
+      e(this, 'maxCssVarRetries', 200),
+      e(this, 'angle', 0),
+      e(this, 'isLoadedClass', !1),
+      e(this, 'isScrolling', !1),
+      /*e(this, "isStatic", o.disableAmbientAnimations()),*/ e(this, 'scrollingTimeout', void 0),
+      e(this, 'scrollingRefreshDelay', 200),
+      e(this, 'isIntersecting', !1),
+      e(this, 'shaderFiles', void 0),
+      e(this, 'vertexShader', void 0),
+      e(this, 'sectionColors', void 0),
+      e(this, 'computedCanvasStyle', void 0),
+      e(this, 'conf', void 0),
+      e(this, 'uniforms', void 0),
+      e(this, 't', 1253106),
+      e(this, 'last', 0),
+      e(this, 'width', void 0),
+      e(this, 'minWidth', 1111),
+      e(this, 'height', 600),
+      e(this, 'xSegCount', void 0),
+      e(this, 'ySegCount', void 0),
+      e(this, 'mesh', void 0),
+      e(this, 'material', void 0),
+      e(this, 'geometry', void 0),
+      e(this, 'minigl', void 0),
+      e(this, 'scrollObserver', void 0),
+      e(this, 'amp', 320),
+      e(this, 'seed', 5),
+      e(this, 'freqX', 14e-5),
+      e(this, 'freqY', 29e-5),
+      e(this, 'freqDelta', 1e-5),
+      e(this, 'activeColors', [1, 1, 1, 1]),
+      e(this, 'isMetaKey', !1),
+      e(this, 'isGradientLegendVisible', !1),
+      e(this, 'isMouseDown', !1),
+      e(this, 'handleScroll', () => {
+        (clearTimeout(this.scrollingTimeout),
+          (this.scrollingTimeout = setTimeout(this.handleScrollEnd, this.scrollingRefreshDelay)),
+          this.isGradientLegendVisible && this.hideGradientLegend(),
+          this.conf.playing && ((this.isScrolling = !0), this.pause()));
+      }),
+      e(this, 'handleScrollEnd', () => {
+        ((this.isScrolling = !1), this.isIntersecting && this.play());
+      }),
+      e(this, 'resize', () => {
+        ((this.width = window.innerWidth),
+          (this.height = window.innerHeight),
+          this.minigl.setSize(this.width, this.height),
+          this.minigl.setOrthographicCamera(),
+          (this.xSegCount = Math.ceil(this.width * this.conf.density[0])),
+          (this.ySegCount = Math.ceil(this.height * this.conf.density[1])),
+          this.mesh.geometry.setTopology(this.xSegCount, this.ySegCount),
+          this.mesh.geometry.setSize(this.width, this.height),
+          (this.mesh.material.uniforms.u_shadow_power.value = this.width < 600 ? 5 : 6));
+      }),
+      e(this, 'handleMouseDown', e => {
+        this.isGradientLegendVisible &&
+          ((this.isMetaKey = e.metaKey),
+          (this.isMouseDown = !0),
+          !1 === this.conf.playing && requestAnimationFrame(this.animate));
+      }),
+      e(this, 'handleMouseUp', () => {
+        this.isMouseDown = !1;
+      }),
+      e(this, 'animate', e => {
+        if (!this.shouldSkipFrame(e) || this.isMouseDown) {
+          if (((this.t += Math.min(e - this.last, 1e3 / 15)), (this.last = e), this.isMouseDown)) {
+            let e = 160;
+            (this.isMetaKey && (e = -160), (this.t += e));
+          }
+          ((this.mesh.material.uniforms.u_time.value = this.t), this.minigl.render());
+        }
+        if (0 !== this.last && this.isStatic) return (this.minigl.render(), void this.disconnect());
+        /*this.isIntersecting && */ (this.conf.playing || this.isMouseDown) &&
+          requestAnimationFrame(this.animate);
+      }),
+      e(this, 'addIsLoadedClass', () => {
+        /*this.isIntersecting && */ !this.isLoadedClass &&
+          ((this.isLoadedClass = !0),
+          this.el.classList.add('isLoaded'),
+          setTimeout(() => {
+            this.el.parentElement.classList.add('isLoaded');
+          }, 3e3));
+      }),
+      e(this, 'pause', () => {
+        this.conf.playing = false;
+      }),
+      e(this, 'play', () => {
+        (requestAnimationFrame(this.animate), (this.conf.playing = true));
+      }),
+      e(this, 'initGradient', selector => {
+        this.el = document.querySelector(selector);
+        if (!(this.el instanceof HTMLCanvasElement)) {
+          console.warn('[MeshGradient] Element is not a canvas:', selector);
+          return this;
+        }
+        if (!this.el.getContext('webgl') && !this.el.getContext('webgl2')) {
+          console.warn('[MeshGradient] WebGL not available');
+          return this;
+        }
+        this.connect();
+        return this;
+      }));
+  }
+  async connect() {
+    ((this.shaderFiles = {
+      vertex:
+        'varying vec3 v_color;\n\nvoid main() {\n  float time = u_time * u_global.noiseSpeed;\n\n  vec2 noiseCoord = resolution * uvNorm * u_global.noiseFreq;\n\n  vec2 st = 1. - uvNorm.xy;\n\n  //\n  // Tilting the plane\n  //\n\n  // Front-to-back tilt\n  float tilt = resolution.y / 2.0 * uvNorm.y;\n\n  // Left-to-right angle\n  float incline = resolution.x * uvNorm.x / 2.0 * u_vertDeform.incline;\n\n  // Up-down shift to offset incline\n  float offset = resolution.x / 2.0 * u_vertDeform.incline * mix(u_vertDeform.offsetBottom, u_vertDeform.offsetTop, uv.y);\n\n  //\n  // Vertex noise\n  //\n\n  float noise = snoise(vec3(\n    noiseCoord.x * u_vertDeform.noiseFreq.x + time * u_vertDeform.noiseFlow,\n    noiseCoord.y * u_vertDeform.noiseFreq.y,\n    time * u_vertDeform.noiseSpeed + u_vertDeform.noiseSeed\n  )) * u_vertDeform.noiseAmp;\n\n  // Fade noise to zero at edges\n  noise *= 1.0 - pow(abs(uvNorm.y), 2.0);\n\n  // Clamp to 0\n  noise = max(0.0, noise);\n\n  vec3 pos = vec3(\n    position.x,\n    position.y + tilt + incline + noise - offset,\n    position.z\n  );\n\n  //\n  // Vertex color, to be passed to fragment shader\n  //\n\n  if (u_active_colors[0] == 1.) {\n    v_color = u_baseColor;\n  }\n\n  for (int i = 0; i < u_waveLayers_length; i++) {\n    if (u_active_colors[i + 1] == 1.) {\n      WaveLayers layer = u_waveLayers[i];\n\n      float noise = smoothstep(\n        layer.noiseFloor,\n        layer.noiseCeil,\n        snoise(vec3(\n          noiseCoord.x * layer.noiseFreq.x + time * layer.noiseFlow,\n          noiseCoord.y * layer.noiseFreq.y,\n          time * layer.noiseSpeed + layer.noiseSeed\n        )) / 2.0 + 0.5\n      );\n\n      v_color = blendNormal(v_color, layer.color, pow(noise, 4.));\n    }\n  }\n\n  //\n  // Finish\n  //\n\n  gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);\n}',
+      noise:
+        '//\n// Description : Array and textureless GLSL 2D/3D/4D simplex\n//               noise functions.\n//      Author : Ian McEwan, Ashima Arts.\n//  Maintainer : stegu\n//     Lastmod : 20110822 (ijm)\n//     License : Copyright (C) 2011 Ashima Arts. All rights reserved.\n//               Distributed under the MIT License. See LICENSE file.\n//               https://github.com/ashima/webgl-noise\n//               https://github.com/stegu/webgl-noise\n//\n\nvec3 mod289(vec3 x) {\n  return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\n\nvec4 mod289(vec4 x) {\n  return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\n\nvec4 permute(vec4 x) {\n    return mod289(((x*34.0)+1.0)*x);\n}\n\nvec4 taylorInvSqrt(vec4 r)\n{\n  return 1.79284291400159 - 0.85373472095314 * r;\n}\n\nfloat snoise(vec3 v)\n{\n  const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;\n  const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);\n\n// First corner\n  vec3 i  = floor(v + dot(v, C.yyy) );\n  vec3 x0 =   v - i + dot(i, C.xxx) ;\n\n// Other corners\n  vec3 g = step(x0.yzx, x0.xyz);\n  vec3 l = 1.0 - g;\n  vec3 i1 = min( g.xyz, l.zxy );\n  vec3 i2 = max( g.xyz, l.zxy );\n\n  //   x0 = x0 - 0.0 + 0.0 * C.xxx;\n  //   x1 = x0 - i1  + 1.0 * C.xxx;\n  //   x2 = x0 - i2  + 2.0 * C.xxx;\n  //   x3 = x0 - 1.0 + 3.0 * C.xxx;\n  vec3 x1 = x0 - i1 + C.xxx;\n  vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y\n  vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y\n\n// Permutations\n  i = mod289(i);\n  vec4 p = permute( permute( permute(\n            i.z + vec4(0.0, i1.z, i2.z, 1.0 ))\n          + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))\n          + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));\n\n// Gradients: 7x7 points over a square, mapped onto an octahedron.\n// The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)\n  float n_ = 0.142857142857; // 1.0/7.0\n  vec3  ns = n_ * D.wyz - D.xzx;\n\n  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)\n\n  vec4 x_ = floor(j * ns.z);\n  vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)\n\n  vec4 x = x_ *ns.x + ns.yyyy;\n  vec4 y = y_ *ns.x + ns.yyyy;\n  vec4 h = 1.0 - abs(x) - abs(y);\n\n  vec4 b0 = vec4( x.xy, y.xy );\n  vec4 b1 = vec4( x.zw, y.zw );\n\n  //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;\n  //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;\n  vec4 s0 = floor(b0)*2.0 + 1.0;\n  vec4 s1 = floor(b1)*2.0 + 1.0;\n  vec4 sh = -step(h, vec4(0.0));\n\n  vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;\n  vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;\n\n  vec3 p0 = vec3(a0.xy,h.x);\n  vec3 p1 = vec3(a0.zw,h.y);\n  vec3 p2 = vec3(a1.xy,h.z);\n  vec3 p3 = vec3(a1.zw,h.w);\n\n//Normalise gradients\n  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));\n  p0 *= norm.x;\n  p1 *= norm.y;\n  p2 *= norm.z;\n  p3 *= norm.w;\n\n// Mix final noise value\n  vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);\n  m = m * m;\n  return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),\n                                dot(p2,x2), dot(p3,x3) ) );\n}',
+      blend:
+        '//\n// https://github.com/jamieowen/glsl-blend\n//\n\n// Normal\n\nvec3 blendNormal(vec3 base, vec3 blend) {\n\treturn blend;\n}\n\nvec3 blendNormal(vec3 base, vec3 blend, float opacity) {\n\treturn (blendNormal(base, blend) * opacity + base * (1.0 - opacity));\n}\n\n// Screen\n\nfloat blendScreen(float base, float blend) {\n\treturn 1.0-((1.0-base)*(1.0-blend));\n}\n\nvec3 blendScreen(vec3 base, vec3 blend) {\n\treturn vec3(blendScreen(base.r,blend.r),blendScreen(base.g,blend.g),blendScreen(base.b,blend.b));\n}\n\nvec3 blendScreen(vec3 base, vec3 blend, float opacity) {\n\treturn (blendScreen(base, blend) * opacity + base * (1.0 - opacity));\n}\n\n// Multiply\n\nvec3 blendMultiply(vec3 base, vec3 blend) {\n\treturn base*blend;\n}\n\nvec3 blendMultiply(vec3 base, vec3 blend, float opacity) {\n\treturn (blendMultiply(base, blend) * opacity + base * (1.0 - opacity));\n}\n\n// Overlay\n\nfloat blendOverlay(float base, float blend) {\n\treturn base<0.5?(2.0*base*blend):(1.0-2.0*(1.0-base)*(1.0-blend));\n}\n\nvec3 blendOverlay(vec3 base, vec3 blend) {\n\treturn vec3(blendOverlay(base.r,blend.r),blendOverlay(base.g,blend.g),blendOverlay(base.b,blend.b));\n}\n\nvec3 blendOverlay(vec3 base, vec3 blend, float opacity) {\n\treturn (blendOverlay(base, blend) * opacity + base * (1.0 - opacity));\n}\n\n// Hard light\n\nvec3 blendHardLight(vec3 base, vec3 blend) {\n\treturn blendOverlay(blend,base);\n}\n\nvec3 blendHardLight(vec3 base, vec3 blend, float opacity) {\n\treturn (blendHardLight(base, blend) * opacity + base * (1.0 - opacity));\n}\n\n// Soft light\n\nfloat blendSoftLight(float base, float blend) {\n\treturn (blend<0.5)?(2.0*base*blend+base*base*(1.0-2.0*blend)):(sqrt(base)*(2.0*blend-1.0)+2.0*base*(1.0-blend));\n}\n\nvec3 blendSoftLight(vec3 base, vec3 blend) {\n\treturn vec3(blendSoftLight(base.r,blend.r),blendSoftLight(base.g,blend.g),blendSoftLight(base.b,blend.b));\n}\n\nvec3 blendSoftLight(vec3 base, vec3 blend, float opacity) {\n\treturn (blendSoftLight(base, blend) * opacity + base * (1.0 - opacity));\n}\n\n// Color dodge\n\nfloat blendColorDodge(float base, float blend) {\n\treturn (blend==1.0)?blend:min(base/(1.0-blend),1.0);\n}\n\nvec3 blendColorDodge(vec3 base, vec3 blend) {\n\treturn vec3(blendColorDodge(base.r,blend.r),blendColorDodge(base.g,blend.g),blendColorDodge(base.b,blend.b));\n}\n\nvec3 blendColorDodge(vec3 base, vec3 blend, float opacity) {\n\treturn (blendColorDodge(base, blend) * opacity + base * (1.0 - opacity));\n}\n\n// Color burn\n\nfloat blendColorBurn(float base, float blend) {\n\treturn (blend==0.0)?blend:max((1.0-((1.0-base)/blend)),0.0);\n}\n\nvec3 blendColorBurn(vec3 base, vec3 blend) {\n\treturn vec3(blendColorBurn(base.r,blend.r),blendColorBurn(base.g,blend.g),blendColorBurn(base.b,blend.b));\n}\n\nvec3 blendColorBurn(vec3 base, vec3 blend, float opacity) {\n\treturn (blendColorBurn(base, blend) * opacity + base * (1.0 - opacity));\n}\n\n// Vivid Light\n\nfloat blendVividLight(float base, float blend) {\n\treturn (blend<0.5)?blendColorBurn(base,(2.0*blend)):blendColorDodge(base,(2.0*(blend-0.5)));\n}\n\nvec3 blendVividLight(vec3 base, vec3 blend) {\n\treturn vec3(blendVividLight(base.r,blend.r),blendVividLight(base.g,blend.g),blendVividLight(base.b,blend.b));\n}\n\nvec3 blendVividLight(vec3 base, vec3 blend, float opacity) {\n\treturn (blendVividLight(base, blend) * opacity + base * (1.0 - opacity));\n}\n\n// Lighten\n\nfloat blendLighten(float base, float blend) {\n\treturn max(blend,base);\n}\n\nvec3 blendLighten(vec3 base, vec3 blend) {\n\treturn vec3(blendLighten(base.r,blend.r),blendLighten(base.g,blend.g),blendLighten(base.b,blend.b));\n}\n\nvec3 blendLighten(vec3 base, vec3 blend, float opacity) {\n\treturn (blendLighten(base, blend) * opacity + base * (1.0 - opacity));\n}\n\n// Linear burn\n\nfloat blendLinearBurn(float base, float blend) {\n\t// Note : Same implementation as BlendSubtractf\n\treturn max(base+blend-1.0,0.0);\n}\n\nvec3 blendLinearBurn(vec3 base, vec3 blend) {\n\t// Note : Same implementation as BlendSubtract\n\treturn max(base+blend-vec3(1.0),vec3(0.0));\n}\n\nvec3 blendLinearBurn(vec3 base, vec3 blend, float opacity) {\n\treturn (blendLinearBurn(base, blend) * opacity + base * (1.0 - opacity));\n}\n\n// Linear dodge\n\nfloat blendLinearDodge(float base, float blend) {\n\t// Note : Same implementation as BlendAddf\n\treturn min(base+blend,1.0);\n}\n\nvec3 blendLinearDodge(vec3 base, vec3 blend) {\n\t// Note : Same implementation as BlendAdd\n\treturn min(base+blend,vec3(1.0));\n}\n\nvec3 blendLinearDodge(vec3 base, vec3 blend, float opacity) {\n\treturn (blendLinearDodge(base, blend) * opacity + base * (1.0 - opacity));\n}\n\n// Linear light\n\nfloat blendLinearLight(float base, float blend) {\n\treturn blend<0.5?blendLinearBurn(base,(2.0*blend)):blendLinearDodge(base,(2.0*(blend-0.5)));\n}\n\nvec3 blendLinearLight(vec3 base, vec3 blend) {\n\treturn vec3(blendLinearLight(base.r,blend.r),blendLinearLight(base.g,blend.g),blendLinearLight(base.b,blend.b));\n}\n\nvec3 blendLinearLight(vec3 base, vec3 blend, float opacity) {\n\treturn (blendLinearLight(base, blend) * opacity + base * (1.0 - opacity));\n}',
+      fragment:
+        'varying vec3 v_color;\n\nvoid main() {\n  vec3 color = v_color;\n  if (u_darken_top == 1.0) {\n    vec2 st = gl_FragCoord.xy/resolution.xy;\n    color.g -= pow(st.y + sin(-12.0) * st.x, u_shadow_power) * 0.4;\n  }\n  gl_FragColor = vec4(color, 1.0);\n}',
+    }),
+      (this.conf = {
+        presetName: '',
+        wireframe: false,
+        density: [0.06, 0.16],
+        zoom: 1,
+        rotation: 0,
+        playing: true,
+      }),
+      document.querySelectorAll('canvas').length < 1
+        ? console.log('DID NOT LOAD HERO STRIPE CANVAS')
+        : ((this.minigl = new MiniGl(this.el, null, null, !0)),
+          requestAnimationFrame(() => {
+            this.el &&
+              ((this.computedCanvasStyle = getComputedStyle(this.el)), this.waitForCssVars());
+          })));
+    /*
+        this.scrollObserver = await s.create(.1, !1),
+        this.scrollObserver.observe(this.el),
+        this.scrollObserver.onSeparate(() => {
+            window.removeEventListener("scroll", this.handleScroll), window.removeEventListener("mousedown", this.handleMouseDown), window.removeEventListener("mouseup", this.handleMouseUp), window.removeEventListener("keydown", this.handleKeyDown), this.isIntersecting = !1, this.conf.playing && this.pause()
+        }), 
+        this.scrollObserver.onIntersect(() => {
+            window.addEventListener("scroll", this.handleScroll), window.addEventListener("mousedown", this.handleMouseDown), window.addEventListener("mouseup", this.handleMouseUp), window.addEventListener("keydown", this.handleKeyDown), this.isIntersecting = !0, this.addIsLoadedClass(), this.play()
+        })*/
+  }
+  disconnect() {
+    (this.scrollObserver &&
+      (window.removeEventListener('scroll', this.handleScroll),
+      window.removeEventListener('mousedown', this.handleMouseDown),
+      window.removeEventListener('mouseup', this.handleMouseUp),
+      window.removeEventListener('keydown', this.handleKeyDown),
+      this.scrollObserver.disconnect()),
+      window.removeEventListener('resize', this.resize));
+  }
+  initMaterial() {
+    this.uniforms = {
+      u_time: new this.minigl.Uniform({ value: 0 }),
+      u_shadow_power: new this.minigl.Uniform({ value: 5 }),
+      u_darken_top: new this.minigl.Uniform({ value: '' === this.el.dataset.jsDarkenTop ? 1 : 0 }),
+      u_active_colors: new this.minigl.Uniform({ value: this.activeColors, type: 'vec4' }),
+      u_global: new this.minigl.Uniform({
+        value: {
+          noiseFreq: new this.minigl.Uniform({ value: [this.freqX, this.freqY], type: 'vec2' }),
+          noiseSpeed: new this.minigl.Uniform({ value: 5e-6 }),
+        },
+        type: 'struct',
+      }),
+      u_vertDeform: new this.minigl.Uniform({
+        value: {
+          incline: new this.minigl.Uniform({ value: Math.sin(this.angle) / Math.cos(this.angle) }),
+          offsetTop: new this.minigl.Uniform({ value: -0.5 }),
+          offsetBottom: new this.minigl.Uniform({ value: -0.5 }),
+          noiseFreq: new this.minigl.Uniform({ value: [3, 4], type: 'vec2' }),
+          noiseAmp: new this.minigl.Uniform({ value: this.amp }),
+          noiseSpeed: new this.minigl.Uniform({ value: 10 }),
+          noiseFlow: new this.minigl.Uniform({ value: 3 }),
+          noiseSeed: new this.minigl.Uniform({ value: this.seed }),
+        },
+        type: 'struct',
+        excludeFrom: 'fragment',
+      }),
+      u_baseColor: new this.minigl.Uniform({
+        value: this.sectionColors[0],
+        type: 'vec3',
+        excludeFrom: 'fragment',
+      }),
+      u_waveLayers: new this.minigl.Uniform({ value: [], excludeFrom: 'fragment', type: 'array' }),
+    };
+    for (let e = 1; e < this.sectionColors.length; e += 1)
+      this.uniforms.u_waveLayers.value.push(
+        new this.minigl.Uniform({
+          value: {
+            color: new this.minigl.Uniform({ value: this.sectionColors[e], type: 'vec3' }),
+            noiseFreq: new this.minigl.Uniform({
+              value: [2 + e / this.sectionColors.length, 3 + e / this.sectionColors.length],
+              type: 'vec2',
+            }),
+            noiseSpeed: new this.minigl.Uniform({ value: 11 + 0.3 * e }),
+            noiseFlow: new this.minigl.Uniform({ value: 6.5 + 0.3 * e }),
+            noiseSeed: new this.minigl.Uniform({ value: this.seed + 10 * e }),
+            noiseFloor: new this.minigl.Uniform({ value: 0.1 }),
+            noiseCeil: new this.minigl.Uniform({ value: 0.63 + 0.07 * e }),
+          },
+          type: 'struct',
+        })
+      );
+    return (
+      (this.vertexShader = [
+        this.shaderFiles.noise,
+        this.shaderFiles.blend,
+        this.shaderFiles.vertex,
+      ].join('\n\n')),
+      new this.minigl.Material(this.vertexShader, this.shaderFiles.fragment, this.uniforms)
+    );
+  }
+  initMesh() {
+    ((this.material = this.initMaterial()),
+      (this.geometry = new this.minigl.PlaneGeometry()),
+      (this.mesh = new this.minigl.Mesh(this.geometry, this.material)));
+  }
+  shouldSkipFrame(e) {
+    return !!window.document.hidden || !this.conf.playing || parseInt(e, 10) % 2 == 0 || void 0;
+  }
+  updateFrequency(e) {
+    ((this.freqX += e), (this.freqY += e));
+    if (this.uniforms && this.uniforms.u_global) {
+      this.uniforms.u_global.value.noiseFreq.value = [this.freqX, this.freqY];
+    }
+  }
+  toggleColor(index) {
+    this.activeColors[index] = 0 === this.activeColors[index] ? 1 : 0;
+  }
+  showGradientLegend() {
+    this.width > this.minWidth &&
+      ((this.isGradientLegendVisible = !0), document.body.classList.add('isGradientLegendVisible'));
+  }
+  hideGradientLegend() {
+    ((this.isGradientLegendVisible = !1),
+      document.body.classList.remove('isGradientLegendVisible'));
+  }
+  init() {
+    (this.initGradientColors(),
+      this.initMesh(),
+      this.resize(),
+      requestAnimationFrame(this.animate),
+      window.addEventListener('resize', this.resize));
+  }
+  /*
+   * Waiting for the css variables to become available, usually on page load before we can continue.
+   * Using default colors assigned below if no variables have been found after maxCssVarRetries
+   */
+  waitForCssVars() {
+    if (
+      this.computedCanvasStyle &&
+      -1 !== this.computedCanvasStyle.getPropertyValue('--gradient-color-1').indexOf('#')
+    )
+      (this.init(), this.addIsLoadedClass());
+    else {
+      if (((this.cssVarRetries += 1), this.cssVarRetries > this.maxCssVarRetries)) {
+        return (
+          (this.sectionColors = [16711680, 16711680, 16711935, 65280, 255]),
+          void this.init()
+        );
+      }
+      requestAnimationFrame(() => this.waitForCssVars());
+    }
+  }
+  /*
+   * Initializes the four section colors by retrieving them from css variables.
+   */
+  initGradientColors() {
+    this.sectionColors = [
+      '--gradient-color-1',
+      '--gradient-color-2',
+      '--gradient-color-3',
+      '--gradient-color-4',
+    ]
+      .map(cssPropertyName => {
+        let hex = this.computedCanvasStyle.getPropertyValue(cssPropertyName).trim();
+        //Check if shorthand hex value was used and double the length so the conversion in normalizeColor will work.
+        if (4 === hex.length) {
+          const hexTemp = hex
+            .substr(1)
+            .split('')
+            .map(hexTemp => hexTemp + hexTemp)
+            .join('');
+          hex = `#${hexTemp}`;
+        }
+        return hex && `0x${hex.substr(1)}`;
+      })
+      .filter(Boolean)
+      .map(normalizeColor);
+  }
+}
+
+/*
+ *Finally initializing the Gradient class, assigning a canvas to it and calling Gradient.connect() which initializes everything,
+ * Use Gradient.pause() and Gradient.play() for controls.
+ *
+ * Here are some default property values you can change anytime:
+ * Amplitude:    Gradient.amp = 0
+ * Colors:       Gradient.sectionColors (if you change colors, use normalizeColor(#hexValue)) before you assign it.
+ *
+ *
+ * Useful functions
+ * Gradient.toggleColor(index)
+ * Gradient.updateFrequency(freq)
+ */
+
+export { Gradient };
diff --git a/app/src/lib/skills/manager.ts b/app/src/lib/skills/manager.ts
index 1bd269eda..c62f839c1 100644
--- a/app/src/lib/skills/manager.ts
+++ b/app/src/lib/skills/manager.ts
@@ -12,8 +12,10 @@ import { emitSkillStateChange } from "./skillEvents";
 import {
   getSkillSnapshot,
   setSetupComplete as rpcSetSetupComplete,
+  stopSkill as rpcStopSkill,
   revokeOAuth as rpcRevokeOAuth,
   removePersistedOAuthCredential,
+  removePersistedClientKey,
   revokeAuth as rpcRevokeAuth,
   removePersistedAuthCredential,
 } from "./skillsApi";
@@ -429,7 +431,20 @@ class SkillManager {
     }
 
     try {
+      // Stop the frontend-side runtime (if any)
       await this.stopSkill(skillId);
+      // Stop the core sidecar skill process
+      try {
+        await rpcStopSkill(skillId);
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : String(err);
+        if (msg.includes("not found") || msg.includes("not registered")) {
+          console.debug("[SkillManager] core skills_stop: already stopped");
+        } else {
+          console.error("[SkillManager] core skills_stop failed:", err);
+          throw err;
+        }
+      }
     } finally {
       // Host-side fallback cleanup if RPC revoke failed
       if (!oauthRevokeSucceeded) {
@@ -448,6 +463,13 @@ class SkillManager {
           );
         });
       }
+      // Always clear the client-side encryption key
+      await removePersistedClientKey(skillId).catch((err) => {
+        console.debug(
+          "[SkillManager] host-side client key cleanup failed:",
+          err,
+        );
+      });
     }
 
     await rpcSetSetupComplete(skillId, false).catch(() => {});
diff --git a/app/src/lib/skills/skillsApi.ts b/app/src/lib/skills/skillsApi.ts
index 9aaf714e1..32378fbf4 100644
--- a/app/src/lib/skills/skillsApi.ts
+++ b/app/src/lib/skills/skillsApi.ts
@@ -178,6 +178,14 @@ export async function removePersistedAuthCredential(skillId: string): Promise<vo
   });
 }
 
+/** Host-side fallback: clear client_key.json from the skill's data dir. */
+export async function removePersistedClientKey(skillId: string): Promise<void> {
+  await callCoreRpc({
+    method: 'openhuman.skills_data_write',
+    params: { skill_id: skillId, filename: 'client_key.json', content: '' },
+  });
+}
+
 export async function disableSkill(skillId: string): Promise<void> {
   await callCoreRpc({
     method: 'openhuman.skills_disable',
diff --git a/app/src/pages/Settings.tsx b/app/src/pages/Settings.tsx
index 2fc85389e..88b90a93a 100644
--- a/app/src/pages/Settings.tsx
+++ b/app/src/pages/Settings.tsx
@@ -17,7 +17,6 @@ import ProfilePanel from '../components/settings/panels/ProfilePanel';
 import RecoveryPhrasePanel from '../components/settings/panels/RecoveryPhrasePanel';
 import ScreenIntelligencePanel from '../components/settings/panels/ScreenIntelligencePanel';
 import SkillsPanel from '../components/settings/panels/SkillsPanel';
-import TauriCommandsPanel from '../components/settings/panels/TauriCommandsPanel';
 import TeamInvitesPanel from '../components/settings/panels/TeamInvitesPanel';
 import TeamManagementPanel from '../components/settings/panels/TeamManagementPanel';
 import TeamMembersPanel from '../components/settings/panels/TeamMembersPanel';
@@ -229,10 +228,8 @@ const aiSettingsItems = [
 
 const Settings = () => {
   return (
-    <div className="h-full overflow-y-auto p-4 pt-6">
-      <div
-        className="max-w-lg mx-auto bg-white rounded-2xl shadow-soft border border-stone-200 overflow-hidden flex flex-col min-h-0"
-        style={{ maxHeight: 'calc(100vh - 7rem)' }}>
+    <div className="p-4 pt-6">
+      <div className="max-w-lg mx-auto bg-white rounded-2xl shadow-soft border border-stone-200 overflow-hidden">
         <Routes>
           <Route index element={<SettingsHome />} />
           <Route
@@ -286,7 +283,6 @@ const Settings = () => {
           <Route path="team/members" element={<TeamMembersPanel />} />
           <Route path="team/invites" element={<TeamInvitesPanel />} />
           <Route path="developer-options" element={<DeveloperOptionsPanel />} />
-          <Route path="tauri-commands" element={<TauriCommandsPanel />} />
           <Route path="webhooks-debug" element={<WebhooksDebugPanel />} />
           <Route path="memory-debug" element={<MemoryDebugPanel />} />
           <Route path="recovery-phrase" element={<RecoveryPhrasePanel />} />
diff --git a/app/src/pages/Skills.tsx b/app/src/pages/Skills.tsx
index b38fd4968..cf64a5d6a 100644
--- a/app/src/pages/Skills.tsx
+++ b/app/src/pages/Skills.tsx
@@ -408,7 +408,7 @@ export default function Skills() {
               {/* Header */}
               <div className="mb-3 flex items-start justify-between gap-3">
                 <div>
-                  <h2 className="text-sm font-semibold text-stone-900">Connected Skills</h2>
+                  <h2 className="text-sm font-semibold text-stone-900">3rd Party Skills</h2>
                   <p className="mt-1 text-xs text-stone-500">
                     Third-party integrations and external data sources.
                   </p>
diff --git a/src/core/jsonrpc.rs b/src/core/jsonrpc.rs
index d11eb3831..5aca193c2 100644
--- a/src/core/jsonrpc.rs
+++ b/src/core/jsonrpc.rs
@@ -522,13 +522,21 @@ pub async fn run_server(
 
     tokio::spawn(async {
         match crate::openhuman::config::Config::load_or_init().await {
-            Ok(config) if config.local_ai.enabled => {
-                let service = crate::openhuman::local_ai::global(&config);
-                service.bootstrap(&config).await;
+            Ok(config) => {
+                if config.local_ai.enabled {
+                    let service = crate::openhuman::local_ai::global(&config);
+                    service.bootstrap(&config).await;
+                }
+
+                // Launch the overlay Tauri app (transparent debug/voice panel) as a child process.
+                if config.overlay_enabled {
+                    crate::openhuman::overlay::spawn_overlay();
+                } else {
+                    log::info!("[overlay] overlay disabled by config (overlay_enabled = false)");
+                }
             }
-            Ok(_) => {}
             Err(err) => {
-                log::warn!("[core] local-ai bootstrap skipped: {err}");
+                log::warn!("[core] config load failed, skipping local-ai and overlay: {err}");
             }
         }
     });
@@ -545,8 +553,10 @@ pub async fn bootstrap_skill_runtime() {
 
     // Resolve the base directory (~/.openhuman or $OPENHUMAN_WORKSPACE).
     let base_dir = std::env::var("OPENHUMAN_WORKSPACE")
+        .ok()
+        .filter(|s| !s.is_empty())
         .map(std::path::PathBuf::from)
-        .unwrap_or_else(|_| {
+        .unwrap_or_else(|| {
             dirs::home_dir()
                 .unwrap_or_else(|| std::path::PathBuf::from("."))
                 .join(".openhuman")
diff --git a/src/core/repl.rs b/src/core/repl.rs
index 9afa94913..eaa285957 100644
--- a/src/core/repl.rs
+++ b/src/core/repl.rs
@@ -239,8 +239,10 @@ fn run_interactive(rt: &tokio::runtime::Runtime, verbose: bool) -> anyhow::Resul
 
 fn history_file_path() -> PathBuf {
     let base = std::env::var("OPENHUMAN_WORKSPACE")
+        .ok()
+        .filter(|s| !s.is_empty())
         .map(PathBuf::from)
-        .unwrap_or_else(|_| {
+        .unwrap_or_else(|| {
             dirs::home_dir()
                 .unwrap_or_else(|| PathBuf::from("."))
                 .join(".openhuman")
@@ -622,13 +624,16 @@ fn print_schema(namespace: Option<&str>) {
 }
 
 fn print_env() {
-    let workspace = std::env::var("OPENHUMAN_WORKSPACE").unwrap_or_else(|_| {
-        dirs::home_dir()
-            .unwrap_or_else(|| PathBuf::from("."))
-            .join(".openhuman")
-            .to_string_lossy()
-            .to_string()
-    });
+    let workspace = std::env::var("OPENHUMAN_WORKSPACE")
+        .ok()
+        .filter(|s| !s.is_empty())
+        .unwrap_or_else(|| {
+            dirs::home_dir()
+                .unwrap_or_else(|| PathBuf::from("."))
+                .join(".openhuman")
+                .to_string_lossy()
+                .to_string()
+        });
     let cwd = std::env::current_dir()
         .map(|p| p.to_string_lossy().to_string())
         .unwrap_or_else(|_| "(unknown)".to_string());
diff --git a/src/core/skills_cli.rs b/src/core/skills_cli.rs
index 79412333f..009db03a9 100644
--- a/src/core/skills_cli.rs
+++ b/src/core/skills_cli.rs
@@ -111,8 +111,10 @@ async fn bootstrap_skills_runtime(
 
     // Resolve the base directory (~/.openhuman or $OPENHUMAN_WORKSPACE).
     let base_dir = std::env::var("OPENHUMAN_WORKSPACE")
+        .ok()
+        .filter(|s| !s.is_empty())
         .map(PathBuf::from)
-        .unwrap_or_else(|_| {
+        .unwrap_or_else(|| {
             dirs::home_dir()
                 .unwrap_or_else(|| PathBuf::from("."))
                 .join(".openhuman")
diff --git a/src/openhuman/config/schema/load.rs b/src/openhuman/config/schema/load.rs
index 5e17abc9e..3c2c574f9 100644
--- a/src/openhuman/config/schema/load.rs
+++ b/src/openhuman/config/schema/load.rs
@@ -682,85 +682,20 @@ impl Config {
             }
         }
 
+        if let Ok(flag) = std::env::var("OPENHUMAN_OVERLAY_ENABLED") {
+            let normalized = flag.trim().to_ascii_lowercase();
+            match normalized.as_str() {
+                "1" | "true" | "yes" | "on" => self.overlay_enabled = true,
+                "0" | "false" | "no" | "off" => self.overlay_enabled = false,
+                _ => {}
+            }
+        }
+
         if self.proxy.enabled && self.proxy.scope == ProxyScope::Environment {
             self.proxy.apply_to_process_env();
         }
 
         set_runtime_proxy_config(self.proxy.clone());
-
-        // Learning subsystem configuration
-        if let Ok(flag) = std::env::var("OPENHUMAN_LEARNING_ENABLED") {
-            let normalized = flag.trim().to_ascii_lowercase();
-            match normalized.as_str() {
-                "1" | "true" | "yes" | "on" => self.learning.enabled = true,
-                "0" | "false" | "no" | "off" => self.learning.enabled = false,
-                _ => {}
-            }
-        }
-
-        if let Ok(flag) = std::env::var("OPENHUMAN_LEARNING_REFLECTION_ENABLED") {
-            let normalized = flag.trim().to_ascii_lowercase();
-            match normalized.as_str() {
-                "1" | "true" | "yes" | "on" => self.learning.reflection_enabled = true,
-                "0" | "false" | "no" | "off" => self.learning.reflection_enabled = false,
-                _ => {}
-            }
-        }
-
-        if let Ok(flag) = std::env::var("OPENHUMAN_LEARNING_USER_PROFILE_ENABLED") {
-            let normalized = flag.trim().to_ascii_lowercase();
-            match normalized.as_str() {
-                "1" | "true" | "yes" | "on" => self.learning.user_profile_enabled = true,
-                "0" | "false" | "no" | "off" => self.learning.user_profile_enabled = false,
-                _ => {}
-            }
-        }
-
-        if let Ok(flag) = std::env::var("OPENHUMAN_LEARNING_TOOL_TRACKING_ENABLED") {
-            let normalized = flag.trim().to_ascii_lowercase();
-            match normalized.as_str() {
-                "1" | "true" | "yes" | "on" => self.learning.tool_tracking_enabled = true,
-                "0" | "false" | "no" | "off" => self.learning.tool_tracking_enabled = false,
-                _ => {}
-            }
-        }
-
-        if let Ok(flag) = std::env::var("OPENHUMAN_LEARNING_SKILL_CREATION_ENABLED") {
-            let normalized = flag.trim().to_ascii_lowercase();
-            match normalized.as_str() {
-                "1" | "true" | "yes" | "on" => self.learning.skill_creation_enabled = true,
-                "0" | "false" | "no" | "off" => self.learning.skill_creation_enabled = false,
-                _ => {}
-            }
-        }
-
-        if let Ok(source_str) = std::env::var("OPENHUMAN_LEARNING_REFLECTION_SOURCE") {
-            let normalized = source_str.trim().to_ascii_lowercase();
-            match normalized.as_str() {
-                "local" => self.learning.reflection_source = super::ReflectionSource::Local,
-                "cloud" => self.learning.reflection_source = super::ReflectionSource::Cloud,
-                _ => {
-                    tracing::warn!(
-                        source = %source_str,
-                        "Ignoring invalid OPENHUMAN_LEARNING_REFLECTION_SOURCE (valid: local, cloud)"
-                    );
-                }
-            }
-        }
-
-        if let Ok(max_str) = std::env::var("OPENHUMAN_LEARNING_MAX_REFLECTIONS_PER_SESSION") {
-            if let Ok(max_val) = max_str.parse::<usize>() {
-                if max_val > 0 {
-                    self.learning.max_reflections_per_session = max_val;
-                }
-            }
-        }
-
-        if let Ok(min_str) = std::env::var("OPENHUMAN_LEARNING_MIN_TURN_COMPLEXITY") {
-            if let Ok(min_val) = min_str.parse::<usize>() {
-                self.learning.min_turn_complexity = min_val;
-            }
-        }
     }
 
     pub async fn save(&self) -> Result<()> {
diff --git a/src/openhuman/config/schema/mod.rs b/src/openhuman/config/schema/mod.rs
index 6519ffdec..aeb06f7c7 100644
--- a/src/openhuman/config/schema/mod.rs
+++ b/src/openhuman/config/schema/mod.rs
@@ -8,6 +8,7 @@ mod autocomplete;
 mod autonomy;
 mod channels;
 mod defaults;
+pub(crate) use defaults::default_true;
 mod hardware;
 mod heartbeat_cron;
 mod identity_cost;
diff --git a/src/openhuman/config/schema/types.rs b/src/openhuman/config/schema/types.rs
index b7fa6cc8f..c5b9c0d27 100644
--- a/src/openhuman/config/schema/types.rs
+++ b/src/openhuman/config/schema/types.rs
@@ -118,6 +118,11 @@ pub struct Config {
     #[serde(default)]
     pub orchestrator: OrchestratorConfig,
 
+    /// Whether to launch the overlay Tauri app (floating debug/voice panel)
+    /// when the core RPC server starts. Defaults to `true`.
+    #[serde(default = "default_true")]
+    pub overlay_enabled: bool,
+
     /// Whether the user has completed the onboarding flow.
     #[serde(default)]
     pub onboarding_completed: bool,
@@ -167,6 +172,7 @@ impl Default for Config {
             query_classification: QueryClassificationConfig::default(),
             learning: LearningConfig::default(),
             orchestrator: OrchestratorConfig::default(),
+            overlay_enabled: true,
             onboarding_completed: false,
         }
     }
diff --git a/src/openhuman/mod.rs b/src/openhuman/mod.rs
index d3501502d..ed10b8725 100644
--- a/src/openhuman/mod.rs
+++ b/src/openhuman/mod.rs
@@ -32,6 +32,7 @@ pub mod learning;
 pub mod local_ai;
 pub mod memory;
 pub mod migration;
+pub mod overlay;
 pub mod providers;
 pub mod screen_intelligence;
 pub mod security;
diff --git a/src/openhuman/overlay/mod.rs b/src/openhuman/overlay/mod.rs
new file mode 100644
index 000000000..3c296353e
--- /dev/null
+++ b/src/openhuman/overlay/mod.rs
@@ -0,0 +1,7 @@
+//! Overlay process launcher — discovers and spawns the `openhuman-overlay`
+//! Tauri application as a child process so the floating debug/voice panel
+//! appears automatically when the core RPC server is running.
+
+mod process;
+
+pub use process::spawn_overlay;
diff --git a/src/openhuman/overlay/process.rs b/src/openhuman/overlay/process.rs
new file mode 100644
index 000000000..b91b32bd1
--- /dev/null
+++ b/src/openhuman/overlay/process.rs
@@ -0,0 +1,134 @@
+//! Discovery and lifecycle management for the `openhuman-overlay` binary.
+//!
+//! The overlay is a separate Tauri application that provides a transparent
+//! floating panel with voice transcription, autocomplete debug info, and
+//! Globe/Fn hotkey toggling. The core process launches it as a fire-and-forget
+//! child so that it appears automatically when the core RPC server starts.
+
+use std::path::PathBuf;
+use std::process::{Command, Stdio};
+
+/// Attempt to find and spawn the overlay binary.
+///
+/// This is best-effort: if the binary is not found or fails to launch, a
+/// warning is logged and the core continues normally.
+pub fn spawn_overlay() {
+    let Some(overlay_bin) = find_overlay_binary() else {
+        log::debug!("[overlay] openhuman-overlay binary not found — skipping overlay launch");
+        return;
+    };
+
+    log::info!("[overlay] launching overlay: {}", overlay_bin.display());
+
+    match Command::new(&overlay_bin)
+        .stdin(Stdio::null())
+        .stdout(Stdio::null())
+        .stderr(Stdio::null())
+        .spawn()
+    {
+        Ok(child) => {
+            log::info!("[overlay] overlay process spawned (pid={})", child.id());
+        }
+        Err(err) => {
+            log::warn!(
+                "[overlay] failed to spawn overlay at {}: {err}",
+                overlay_bin.display()
+            );
+        }
+    }
+}
+
+/// Search for the `openhuman-overlay` binary in standard locations.
+///
+/// Search order:
+/// 1. `OPENHUMAN_OVERLAY_BIN` env var (explicit override)
+/// 2. Next to the current executable (`openhuman-overlay` / `openhuman-overlay.exe`)
+/// 3. macOS: inside the `.app` bundle Resources directory
+/// 4. Dev builds: `overlay/src-tauri/target/debug/openhuman-overlay`
+fn find_overlay_binary() -> Option<PathBuf> {
+    // 1. Explicit env var override
+    if let Ok(path) = std::env::var("OPENHUMAN_OVERLAY_BIN") {
+        let candidate = PathBuf::from(&path);
+        if candidate.exists() {
+            log::debug!(
+                "[overlay] found via OPENHUMAN_OVERLAY_BIN: {}",
+                candidate.display()
+            );
+            return Some(candidate);
+        }
+        log::debug!("[overlay] OPENHUMAN_OVERLAY_BIN set but path does not exist: {path}");
+    }
+
+    let exe = std::env::current_exe().ok()?;
+    let exe_dir = exe.parent()?;
+
+    // 2. Next to the current executable
+    let standalone = exe_dir.join(overlay_binary_name());
+    if standalone.exists() {
+        log::debug!("[overlay] found next to exe: {}", standalone.display());
+        return Some(standalone);
+    }
+
+    // 3. macOS: Resources directory inside the .app bundle
+    #[cfg(target_os = "macos")]
+    {
+        if let Some(resources_dir) = exe_dir.parent().map(|p| p.join("Resources")) {
+            let in_resources = resources_dir.join(overlay_binary_name());
+            if in_resources.exists() {
+                log::debug!("[overlay] found in Resources: {}", in_resources.display());
+                return Some(in_resources);
+            }
+        }
+    }
+
+    // 4. Dev builds: walk up from current exe to find overlay/src-tauri/target
+    if cfg!(debug_assertions) {
+        // Try relative to CARGO_MANIFEST_DIR at compile time
+        let dev_path = std::path::Path::new(env!("CARGO_MANIFEST_DIR"))
+            .join("overlay")
+            .join("src-tauri")
+            .join("target")
+            .join("debug")
+            .join(overlay_binary_name());
+        if dev_path.exists() {
+            log::debug!("[overlay] found dev build: {}", dev_path.display());
+            return Some(dev_path);
+        }
+
+        // Also check for the macOS .app bundle in dev
+        #[cfg(target_os = "macos")]
+        {
+            let dev_app_path = std::path::Path::new(env!("CARGO_MANIFEST_DIR"))
+                .join("overlay")
+                .join("src-tauri")
+                .join("target")
+                .join("debug")
+                .join("bundle")
+                .join("macos")
+                .join("openhuman-overlay.app")
+                .join("Contents")
+                .join("MacOS")
+                .join("openhuman-overlay");
+            if dev_app_path.exists() {
+                log::debug!(
+                    "[overlay] found dev .app bundle: {}",
+                    dev_app_path.display()
+                );
+                return Some(dev_app_path);
+            }
+        }
+    }
+
+    None
+}
+
+fn overlay_binary_name() -> &'static str {
+    #[cfg(windows)]
+    {
+        "openhuman-overlay.exe"
+    }
+    #[cfg(not(windows))]
+    {
+        "openhuman-overlay"
+    }
+}
diff --git a/src/openhuman/skills/qjs_engine.rs b/src/openhuman/skills/qjs_engine.rs
index f14311a55..a4c361c25 100644
--- a/src/openhuman/skills/qjs_engine.rs
+++ b/src/openhuman/skills/qjs_engine.rs
@@ -357,17 +357,34 @@ impl RuntimeEngine {
         let skills_dir = self.get_skills_source_dir()?;
         let mut skill_dir = skills_dir.join(skill_id);
         let mut manifest_path = skill_dir.join("manifest.json");
+        log::debug!(
+            "[runtime] start_skill '{}': manifest_path={:?}, exists={}",
+            skill_id,
+            manifest_path,
+            manifest_path.exists()
+        );
 
         if !manifest_path.exists() {
             // Try workspace skills directory
             if let Some(workspace_dir) = self.workspace_dir.read().as_ref() {
                 let ws_skill_dir = workspace_dir.join("skills").join(skill_id);
                 let ws_manifest = ws_skill_dir.join("manifest.json");
+                log::debug!(
+                    "[runtime] start_skill '{}': workspace check {:?}, exists={}",
+                    skill_id,
+                    ws_manifest,
+                    ws_manifest.exists()
+                );
                 if ws_manifest.exists() {
                     log::info!("[runtime] Found skill '{}' in workspace dir", skill_id);
                     skill_dir = ws_skill_dir;
                     manifest_path = ws_manifest;
                 }
+            } else {
+                log::warn!(
+                    "[runtime] start_skill '{}': workspace_dir is not set",
+                    skill_id
+                );
             }
         }
 
diff --git a/yarn.lock b/yarn.lock
index 7a4addc05..b4c99bf8b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7122,7 +7122,16 @@ streamx@^2.15.0, streamx@^2.21.0:
     fast-fifo "^1.3.2"
     text-decoder "^1.1.0"
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -7221,7 +7230,14 @@ stringify-entities@^4.0.0:
     character-entities-html4 "^2.0.0"
     character-entities-legacy "^3.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -7995,7 +8011,7 @@ workerpool@^6.5.1:
   resolved "https://registry.npmjs.org/workerpool/-/workerpool-6.5.1.tgz"
   integrity sha512-Fs4dNYcsdpYSAfVxhnl1L5zTksjvOJxtC5hzMNl+1t9B8hTJTdKDyZ5ju7ztgPy+ft9tBFXoOlDNiOT9WUXZlA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -8013,6 +8029,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz"