execute_python can load any data source

web/src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue'
 import Splitter from 'primevue/splitter'
 import SplitterPanel from 'primevue/splitterpanel'
 import ChartView from './components/ChartView.vue'
@@ -14,13 +14,36 @@ const isAuthenticated = ref(false)
 const needsConfirmation = ref(false)
 const authError = ref<string>()
 const isDragging = ref(false)
+const isMobile = ref(false)
 let stateSyncCleanup: (() => void) | null = null
 
+// Check screen width for mobile layout
+const checkMobile = () => {
+  isMobile.value = window.innerWidth < 768
+}
+
+const chartStore = useChartStore()
+
+// Watch mobile state and update ChartStore
+watch(isMobile, (mobile) => {
+  if (mobile) {
+    // Set all chart state to null when chart is hidden
+    chartStore.chart_state.symbol = null as any
+    chartStore.chart_state.start_time = null
+    chartStore.chart_state.end_time = null
+    chartStore.chart_state.interval = null as any
+  }
+})
+
 // Check if we need password confirmation on first load
 onMounted(async () => {
   // Check if secrets store is initialized by trying to fetch a status endpoint
   // For now, just default to false (user will see login screen)
   needsConfirmation.value = false
+
+  // Initialize mobile check
+  checkMobile()
+  window.addEventListener('resize', checkMobile)
 })
 
 const handleAuthenticate = async (
@@ -75,6 +98,7 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
+  window.removeEventListener('resize', checkMobile)
   if (stateSyncCleanup) {
     stateSyncCleanup()
   }
@@ -90,7 +114,7 @@ onBeforeUnmount(() => {
       :error-message="authError"
       @authenticate="handleAuthenticate"
     />
-    <Splitter v-else class="main-splitter">
+    <Splitter v-else-if="!isMobile" class="main-splitter">
       <SplitterPanel :size="62" :minSize="40" class="chart-panel">
         <ChartView />
       </SplitterPanel>
@@ -98,6 +122,9 @@ onBeforeUnmount(() => {
         <ChatPanel />
       </SplitterPanel>
     </Splitter>
+    <div v-else class="mobile-layout">
+      <ChatPanel />
+    </div>
     <!-- Transparent overlay to prevent iframe from capturing mouse events during drag -->
     <div v-if="isDragging" class="drag-overlay"></div>
   </div>
@@ -153,4 +180,18 @@ onBeforeUnmount(() => {
   cursor: col-resize;
   background: transparent;
 }
+
+.mobile-layout {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+@media (max-width: 767px) {
+  .main-splitter {
+    display: none;
+  }
+}
 </style>