ваше сообщение коммита

frontend/src/views/settings/Interface/InterfaceSettingsView.vue

@@ -48,12 +48,39 @@
         Подробнее
       </button>
     </div>
+
+    <!-- WEB SSH -->
+    <div class="web3-service-block">
+      <div class="service-header">
+        <h3>WEB SSH</h3>
+        <span class="service-badge webssh">Публикация через SSH-туннель</span>
+      </div>
+      <p>Автоматическая публикация приложения в интернете через SSH-туннель.</p>
+      <div class="service-features">
+        <span class="feature">✓ Быстрое подключение</span>
+        <span class="feature">✓ Безопасно</span>
+        <span class="feature">✓ Для локальных и VPS</span>
+      </div>
+      <button class="btn-primary" @click="goToWebSsh">Подробнее</button>
+    </div>
+
+    <!-- Модальное окно с формой WEB SSH -->
+    <NoAccessModal v-if="showWebSsh" @close="showWebSsh = false">
+      <div style="padding:2rem;max-width:600px">
+        <h3>WEB SSH Туннель (форма)</h3>
+        <!-- Здесь будет компонент WebSshForm.vue -->
+        <div style="color:#888">Здесь появится форма WEB SSH (будет вынесена из WebSshSettingsView.vue)</div>
+        <button class="btn-primary" @click="showWebSsh = false" style="margin-top:1.5rem">Закрыть</button>
+      </div>
+    </NoAccessModal>
   </div>
 </template>
 
 <script setup>
 import { useRouter } from 'vue-router';
 import { useAuthContext } from '@/composables/useAuth';
+import NoAccessModal from '@/components/NoAccessModal.vue';
+import { ref } from 'vue';
 const router = useRouter();
 const { isAdmin } = useAuthContext();
 const goBack = () => router.push('/settings');
@@ -67,6 +94,10 @@ const goToAkashDetails = () => {
 const goToFluxDetails = () => {
   window.open('https://runonflux.io/', '_blank');
 };
+
+const goToWebSsh = () => router.push('/settings/interface/webssh');
+
+const showWebSsh = ref(false);
 </script>
 
 <style scoped>
@@ -137,6 +168,10 @@ h2:first-of-type {
   background: linear-gradient(135deg, #4ecdc4, #44a08d);
 }
 
+.service-badge.webssh {
+  background: linear-gradient(135deg, #6c757d, #343a40);
+}
+
 .service-features {
   display: flex;
   flex-wrap: wrap;

frontend/src/views/settings/Interface/InterfaceWebSshView.vue

@@ -0,0 +1,87 @@
+<template>
+  <Header :is-sidebar-open="showSidebar" @toggle-sidebar="toggleSidebar" />
+  <Sidebar
+    v-model="showSidebar"
+    :is-authenticated="isAuthenticated"
+    :identities="identities"
+    :token-balances="tokenBalances"
+    :is-loading-tokens="isLoadingTokens"
+    :telegram-auth="telegramAuth"
+    :email-auth="emailAuth"
+  />
+  <div class="webssh-settings-block">
+    <button class="close-btn" @click="goBack">×</button>
+    <h2>WEB SSH: интеграция и настройки</h2>
+    <p class="desc">Автоматическая публикация приложения через SSH-туннель и NGINX.</p>
+    <WebSshForm />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import WebSshForm from '@/components/WebSshForm.vue';
+import Header from '@/components/Header.vue';
+import Sidebar from '@/components/Sidebar.vue';
+import { useAuthContext } from '@/composables/useAuth';
+
+const router = useRouter();
+const goBack = () => router.push('/settings/interface');
+const showSidebar = ref(false);
+const toggleSidebar = () => {
+  showSidebar.value = !showSidebar.value;
+};
+
+const auth = useAuthContext();
+const isAuthenticated = auth.isAuthenticated.value;
+const identities = auth.identities?.value || [];
+const tokenBalances = auth.tokenBalances?.value || [];
+const isLoadingTokens = false;
+
+// Дефолтные объекты для Sidebar
+const telegramAuth = {
+  showVerification: false,
+  botLink: '',
+  verificationCode: '',
+  error: ''
+};
+const emailAuth = {
+  showForm: false,
+  showVerification: false
+};
+</script>
+
+<style scoped>
+.webssh-settings-block {
+  background: #fff;
+  border-radius: var(--radius-lg);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  width: 100%;
+  position: relative;
+  overflow-x: auto;
+}
+.close-btn {
+  position: absolute;
+  top: 18px;
+  right: 18px;
+  background: none;
+  border: none;
+  font-size: 2rem;
+  cursor: pointer;
+  color: #bbb;
+  transition: color 0.2s;
+}
+.close-btn:hover {
+  color: #333;
+}
+h2 {
+  margin-bottom: 0.5rem;
+}
+.desc {
+  color: #666;
+  margin-bottom: 1.5rem;
+}
+</style>