.gitignore

@@ -1,4 +1,5 @@
 __pycache__/
 .env
 frontend/node_modules/
-static/dist/
+static/dist/
+venv/

frontend/src/App.vue

@@ -49,6 +49,10 @@ const showFolderForm = ref(false);
 const showEditHost = ref(false);
 const showAuditLog = ref(false);
 const showApiKeys = ref(false);
+const showSftpPanel = ref(false);
+function toggleSftp() {
+  showSftpPanel.value = !showSftpPanel.value;
+}
 const auditLoading = ref(false);
 const auditErr = ref("");
 const auditRows = ref<ConnectionAuditRow[]>([]);
@@ -705,6 +709,14 @@ async function deleteIdentityRow(id: number) {
         </div>
       </div>
       <div class="flex items-center gap-2">
+        <button
+          type="button"
+          class="hidden rounded-lg px-3 py-1.5 text-xs md:inline-flex"
+          :class="showSftpPanel ? 'bg-slate-800 text-white' : 'text-slate-400 hover:bg-slate-800 hover:text-white'"
+          @click="toggleSftp"
+        >
+          SFTP
+        </button>
         <button
           type="button"
           class="hidden rounded-lg px-3 py-1.5 text-xs text-slate-400 hover:bg-slate-800 hover:text-white md:inline-flex"
@@ -1016,6 +1028,7 @@ async function deleteIdentityRow(id: number) {
               <TabContent
                 :host-id="t.hostId"
                 :visible="t.id === activeTabId"
+                :show-sftp="showSftpPanel"
               />
             </div>
           </div>

frontend/src/components/TabContent.vue

@@ -14,6 +14,7 @@ import SftpPanel from "./SftpPanel.vue";
 const props = defineProps<{
   hostId: number;
   visible: boolean;
+  showSftp: boolean;
 }>();
 
 const termEl = ref<HTMLElement | null>(null);
@@ -187,17 +188,19 @@ watch(
         class="h-full min-h-[320px] rounded-lg border border-slate-800 bg-[#0a0e12] p-1"
       />
     </div>
-    <div
+    <template v-if="showSftp">
-      v-if="connId"
+      <div
-      class="hidden w-80 shrink-0 flex-col border-l border-slate-800 md:flex"
+        v-if="connId"
-    >
+        class="hidden w-80 shrink-0 flex-col border-l border-slate-800 md:flex"
-      <SftpPanel :conn-id="connId" />
+      >
-    </div>
+        <SftpPanel :conn-id="connId" />
-    <div
+      </div>
-      v-else
+      <div
-      class="hidden w-72 shrink-0 items-center justify-center border-l border-slate-800 bg-surface-raised text-xs text-slate-500 md:flex"
+        v-else
-    >
+        class="hidden w-72 shrink-0 items-center justify-center border-l border-slate-800 bg-surface-raised text-xs text-slate-500 md:flex"
-      SFTP unlocks when the shell session is ready.
+      >
-    </div>
+        SFTP unlocks when the shell session is ready.
+      </div>
+    </template>
   </div>
 </template>

run.sh

@@ -12,5 +12,14 @@ else
     source venv/bin/activate
 fi
 
-cd frontend && npm run build && cd ..
+echo "Building frontend..."
+(
+    cd frontend
+    if [ ! -d "node_modules" ]; then
+        echo "Installing frontend dependencies..."
+        npm install
+    fi
+    npm run build
+)
+
 exec gunicorn --bind 0.0.0.0:5000 --workers 1 --worker-class geventwebsocket.gunicorn.workers.GeventWebSocketWorker app:app --log-level info