Merge pull request 'feat: add host ping endpoint and automatic reconnection UI for disconnected terminals' (#22 ) from v1.2.2 into main

Reviewed-on: http://git.jdbnet.co.uk/jamie/ssh/pulls/22
feat: add host ping endpoint and automatic reconnection UI for disconnected terminals
2026-07-09 20:58:02 +01:00 · 2026-07-09 20:57:52 +01:00 · 2026-06-26 18:41:31 +01:00 · 2026-06-26 18:40:25 +01:00 · 2026-06-26 18:36:04 +01:00 · 2026-06-19 20:03:17 +01:00
18 changed files with 1860 additions and 185 deletions
@@ -1,5 +1,10 @@
 FROM mcr.microsoft.com/devcontainers/python:3.14

+RUN curl -fsSL https://deb.nodesource.com/setup_22.x | bash - \
+    && apt-get install -y nodejs \
+    && apt-get clean \
+    && rm -rf /var/lib/apt/lists/*
+
 WORKDIR /workspace

 CMD ["sleep", "infinity"]
@@ -26,4 +26,7 @@ MYSQL_POOL_SIZE=5
 MAX_CONCURRENT_SSH=32

 # Paramiko SSH keepalive interval (seconds); set 0 to disable.
-SSH_KEEPALIVE_INTERVAL=30
+SSH_KEEPALIVE_INTERVAL=15
+
+# WebSocket keepalive interval (seconds); server sends traffic to avoid proxy idle timeouts.
+WS_KEEPALIVE_INTERVAL=25
@@ -20,11 +20,11 @@ jobs:
        id: get_version
        run: echo "VERSION=${{ github.head_ref }}" >> $GITHUB_OUTPUT

-      # - name: Generate Changelog
-      #   id: changelog
-      #   uses: https://github.com/metcalfc/changelog-generator@v4.6.2
-      #   with:
-      #     myToken: ${{ secrets.GITHUB_TOKEN }}
+      - name: Generate Changelog
+        id: changelog
+        uses: https://github.com/metcalfc/changelog-generator@v4.6.2
+        with:
+          myToken: ${{ secrets.GITHUB_TOKEN }}

      - name: Build and push Docker image
        run: |
@@ -2,3 +2,4 @@ __pycache__/
 .env
 frontend/node_modules/
 static/dist/
+venv/
@@ -30,7 +30,6 @@ services:
    ports:
      - "5000:5000"
    environment:
-      GEVENT_MONKEY_PATCH: "1"
      MYSQL_HOST: "<YOUR_MYSQL_HOST>"
      MYSQL_DATABASE: "<YOUR_MYSQL_DATABASE>"
      MYSQL_USER: "<YOUR_MYSQL_USER>"
@@ -8,15 +8,15 @@
      href="https://assets.jdbnet.co.uk/projects/ssh.png"
    />
    <link rel="manifest" href="/manifest.webmanifest" />
-    <meta name="theme-color" content="#0f1419" />
+    <meta name="theme-color" content="#0d1117" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap"
      rel="stylesheet"
    />
-    <title>JDB-NET SSH</title>
+    <title>SSH</title>
  </head>
  <body class="bg-surface text-slate-200 antialiased">
    <div id="app"></div>
@@ -1,15 +1,20 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
-import { Folder, Pencil, Trash2 } from "lucide-vue-next";
+import { onMounted, onUnmounted, ref } from "vue";
+import { Folder, Pencil, Trash2, Radio, ChevronDown } from "lucide-vue-next";
 import {
  api,
  type HostRow,
  type IdentityRow,
  type FolderRow,
  type ConnectionAuditRow,
+  type ApiKeyRow,
+  type ApiKeyScopeDef,
+  type SnippetRow,
 } from "@/api";
 import LoginForm from "@/components/LoginForm.vue";
 import TabContent from "@/components/TabContent.vue";
+import TagInput from "@/components/TagInput.vue";
+import SnippetForm from "@/components/SnippetForm.vue";

 interface TabItem {
  id: string;
@@ -20,17 +25,142 @@ interface TabItem {
 const loggedIn = ref(false);
 const checking = ref(true);
 const appVersion = ref("unknown");
+const auditLogEnabled = ref(true);
 const identities = ref<IdentityRow[]>([]);
 const allHosts = ref<HostRow[]>([]);
 const allFolders = ref<FolderRow[]>([]);
+const allTags = ref<string[]>([]);
 const browseFolders = ref<FolderRow[]>([]);
 const browseHosts = ref<HostRow[]>([]);
 const breadcrumb = ref<{ id: number; label: string }[]>([]);
 const searchActive = ref(false);
 const currentFolderId = ref<number | null>(null);
 const searchQuery = ref("");
-const tabs = ref<TabItem[]>([]);
-const activeTabId = ref<string | null>(null);
+const tabs = ref<{ id: string; hostId: number; label: string }[]>([]);
+const activePanes = ref<string[]>([]);
+const draggedTabId = ref<string | null>(null);
+
+const broadcastMode = ref(false);
+const tabRefs = ref<Record<string, any>>({});
+function setTabRef(el: any, id: string) {
+  if (el) tabRefs.value[id] = el;
+  else delete tabRefs.value[id];
+}
+
+function handleBroadcast(data: string, sourceId: string) {
+  if (!broadcastMode.value) return;
+  for (const paneId of activePanes.value) {
+    if (paneId !== sourceId && tabRefs.value[paneId]) {
+      tabRefs.value[paneId].sendData(data);
+    }
+  }
+}
+
+const snippets = ref<SnippetRow[]>([]);
+const showSnippetsMenu = ref(false);
+const showSnippetForm = ref(false);
+const editingSnippet = ref<SnippetRow | null>(null);
+const snippetsButtonRef = ref<HTMLElement | null>(null);
+const snippetsMenuRef = ref<HTMLElement | null>(null);
+
+function closeSnippetsMenu(e: MouseEvent) {
+  if (
+    showSnippetsMenu.value &&
+    !snippetsButtonRef.value?.contains(e.target as Node) &&
+    !snippetsMenuRef.value?.contains(e.target as Node)
+  ) {
+    showSnippetsMenu.value = false;
+  }
+}
+
+onMounted(() => {
+  document.addEventListener("click", closeSnippetsMenu);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("click", closeSnippetsMenu);
+});
+
+async function loadSnippets() {
+  try {
+    snippets.value = await api.listSnippets();
+  } catch (err: any) {
+    loadErr.value = err.message;
+  }
+}
+
+function runSnippet(command: string) {
+  showSnippetsMenu.value = false;
+  const targetPanes = broadcastMode.value ? activePanes.value : [activePanes.value[0]];
+  for (const paneId of targetPanes) {
+    if (paneId && tabRefs.value[paneId]) {
+      tabRefs.value[paneId].sendData(command + "\r");
+    }
+  }
+}
+
+async function saveSnippet(data: { label: string; command: string }) {
+  try {
+    if (editingSnippet.value) {
+      await api.updateSnippet(editingSnippet.value.id, data);
+    } else {
+      await api.createSnippet(data);
+    }
+    showSnippetForm.value = false;
+    await loadSnippets();
+  } catch (err: any) {
+    alert(err.message);
+  }
+}
+
+async function deleteSnippet(id: number) {
+  if (!confirm("Are you sure you want to delete this snippet?")) return;
+  try {
+    await api.deleteSnippet(id);
+    await loadSnippets();
+  } catch (err: any) {
+    alert(err.message);
+  }
+}
+
+function openEditSnippet(s?: SnippetRow) {
+  showSnippetsMenu.value = false;
+  editingSnippet.value = s || null;
+  showSnippetForm.value = true;
+}
+
+function onTabDragStart(id: string) {
+  draggedTabId.value = id;
+}
+
+function onTabDrop(targetId: string) {
+  if (!draggedTabId.value || draggedTabId.value === targetId) return;
+  const from = tabs.value.findIndex((t) => t.id === draggedTabId.value);
+  const to = tabs.value.findIndex((t) => t.id === targetId);
+  if (from === -1 || to === -1) return;
+  const [t] = tabs.value.splice(from, 1);
+  tabs.value.splice(to, 0, t);
+  draggedTabId.value = null;
+}
+
+function onTabDragEnd() {
+  draggedTabId.value = null;
+}
+
+function onSplitDrop() {
+  if (!draggedTabId.value || activePanes.value.includes(draggedTabId.value)) {
+    draggedTabId.value = null;
+    return;
+  }
+  if (activePanes.value.length >= 2) {
+    activePanes.value = [activePanes.value[0], draggedTabId.value];
+  } else if (activePanes.value.length === 1) {
+    activePanes.value.push(draggedTabId.value);
+  } else {
+    activePanes.value = [draggedTabId.value];
+  }
+  draggedTabId.value = null;
+}
 const loadErr = ref("");
 const hostSortOrder = ref<"name" | "last_connected">("name");
 /** Narrow viewports: slide-over hosts panel; md+ sidebar stays visible */
@@ -44,10 +174,27 @@ const showHostForm = ref(false);
 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[]>([]);
 const auditShowAll = ref(false);
+const apiKeysLoading = ref(false);
+const apiKeysErr = ref("");
+const apiKeyRows = ref<ApiKeyRow[]>([]);
+const apiKeyScopes = ref<ApiKeyScopeDef[]>([]);
+const apiKeyForm = ref({
+  label: "",
+  scopes: [] as string[],
+  expires_at: "",
+});
+const apiKeyCreating = ref(false);
+const apiKeyCreateErr = ref("");
+const createdApiKey = ref("");
 const deleteIdentityErr = ref("");
 const deleteIdentityErrId = ref<number | null>(null);
 const newFolderLabel = ref("");
@@ -78,6 +225,7 @@ const hostForm = ref({
  label: "",
  hostname: "",
  port: 22,
+  tags: "",
  use_inline_identity: false,
  identity_id: 0 as number,
  auth_type: "password" as "password" | "publickey",
@@ -92,6 +240,7 @@ const editHostForm = ref({
  label: "",
  hostname: "",
  port: 22,
+  tags: "",
  use_inline_identity: false,
  identity_id: 0,
  auth_type: "password" as "password" | "publickey",
@@ -119,6 +268,18 @@ function folderOptionLabel(id: number | null): string {
  return parts.join(" / ") || `#${id}`;
 }

+function parseTagsInput(raw: string): string[] {
+  const seen = new Set<string>();
+  const tags: string[] = [];
+  for (const part of raw.split(",")) {
+    const name = part.trim().toLowerCase().replace(/\s+/g, "");
+    if (!name || seen.has(name)) continue;
+    seen.add(name);
+    tags.push(name);
+  }
+  return tags.sort();
+}
+
 function getSortedBrowseHosts(): HostRow[] {
  const hosts = [...browseHosts.value];
  if (hostSortOrder.value === "last_connected") {
@@ -158,12 +319,19 @@ function goToFolder(id: number | null) {
  void refreshBrowse();
 }

+function searchByTag(tag: string) {
+  searchQuery.value = `tag:${tag}`;
+  void refreshBrowse();
+}
+
 async function refreshData() {
  loadErr.value = "";
  try {
    identities.value = await api.listIdentities();
    allHosts.value = await api.listHosts();
    allFolders.value = await api.listFoldersFlat();
+    allTags.value = await api.listTags();
+    await loadSnippets();
    if (!hostForm.value.identity_id && identities.value.length) {
      hostForm.value.identity_id = identities.value[0].id;
    }
@@ -180,6 +348,9 @@ onMounted(async () => {
    if (m.app_version) {
      appVersion.value = m.app_version;
    }
+    if (m.audit_log_enabled !== undefined) {
+      auditLogEnabled.value = m.audit_log_enabled;
+    }
    if (loggedIn.value) await refreshData();
  } catch {
    loggedIn.value = false;
@@ -195,9 +366,10 @@ async function onLoggedIn() {

 async function logout() {
  await api.logout();
-  tabs.value = [];
-  activeTabId.value = null;
-  loggedIn.value = false;
+    tabs.value = [];
+    activePanes.value = [];
+    allHosts.value = [];
+    loggedIn.value = false;
 }

 function fmtDate(ts: string | null): string {
@@ -244,10 +416,125 @@ async function loadAllAuditLog() {
  }
 }

+function resetApiKeyForm() {
+  apiKeyForm.value = {
+    label: "",
+    scopes: apiKeyScopes.value.some((s) => s.id === "read:hosts")
+      ? ["read:hosts"]
+      : [],
+    expires_at: "",
+  };
+  apiKeyCreateErr.value = "";
+  createdApiKey.value = "";
+}
+
+function toggleApiKeyScope(scopeId: string) {
+  const scopes = apiKeyForm.value.scopes;
+  const idx = scopes.indexOf(scopeId);
+  if (idx >= 0) {
+    apiKeyForm.value.scopes = scopes.filter((s) => s !== scopeId);
+  } else {
+    apiKeyForm.value.scopes = [...scopes, scopeId];
+  }
+}
+
+async function openApiKeys() {
+  showApiKeys.value = true;
+  apiKeysLoading.value = true;
+  apiKeysErr.value = "";
+  resetApiKeyForm();
+  try {
+    if (!apiKeyScopes.value.length) {
+      apiKeyScopes.value = await api.listApiKeyScopes();
+      resetApiKeyForm();
+    }
+    apiKeyRows.value = await api.listApiKeys();
+  } catch (e) {
+    apiKeysErr.value = e instanceof Error ? e.message : "Failed to load API keys";
+  } finally {
+    apiKeysLoading.value = false;
+  }
+}
+
+async function refreshApiKeys() {
+  apiKeysLoading.value = true;
+  apiKeysErr.value = "";
+  try {
+    apiKeyRows.value = await api.listApiKeys();
+  } catch (e) {
+    apiKeysErr.value = e instanceof Error ? e.message : "Failed to load API keys";
+  } finally {
+    apiKeysLoading.value = false;
+  }
+}
+
+async function submitApiKey() {
+  apiKeyCreating.value = true;
+  apiKeyCreateErr.value = "";
+  createdApiKey.value = "";
+  try {
+    const body: {
+      label: string;
+      scopes: string[];
+      expires_at?: string | null;
+    } = {
+      label: apiKeyForm.value.label.trim(),
+      scopes: apiKeyForm.value.scopes,
+    };
+    if (apiKeyForm.value.expires_at) {
+      body.expires_at = new Date(apiKeyForm.value.expires_at).toISOString();
+    }
+    const created = await api.createApiKey(body);
+    createdApiKey.value = created.key;
+    apiKeyForm.value = {
+      label: "",
+      scopes: apiKeyScopes.value.some((s) => s.id === "read:hosts")
+        ? ["read:hosts"]
+        : [],
+      expires_at: "",
+    };
+    await refreshApiKeys();
+  } catch (e) {
+    apiKeyCreateErr.value = e instanceof Error ? e.message : "Failed to create API key";
+  } finally {
+    apiKeyCreating.value = false;
+  }
+}
+
+async function deleteApiKey(id: number, label: string) {
+  if (!confirm(`Delete API key "${label}"? This cannot be undone.`)) return;
+  apiKeysErr.value = "";
+  try {
+    await api.deleteApiKey(id);
+    await refreshApiKeys();
+  } catch (e) {
+    apiKeysErr.value = e instanceof Error ? e.message : "Failed to delete API key";
+  }
+}
+
+async function copyCreatedApiKey() {
+  if (!createdApiKey.value) return;
+  try {
+    await navigator.clipboard.writeText(createdApiKey.value);
+  } catch {
+    /* clipboard may be unavailable */
+  }
+}
+
+function apiKeyStatus(row: ApiKeyRow): string {
+  if (row.revoked_at) return "Revoked";
+  if (row.expired) return "Expired";
+  return "Active";
+}
+
+function fmtScopes(scopes: string[]): string {
+  return scopes.join(", ");
+}
+
 function openTab(h: HostRow) {
  const id = crypto.randomUUID();
  tabs.value.push({ id, hostId: h.id, label: h.label });
-  activeTabId.value = id;
+  activePanes.value = [id];
  if (window.matchMedia("(max-width: 767px)").matches) {
    sidebarOpen.value = false;
  }
@@ -259,8 +546,9 @@ function toggleSidebar() {

 function closeTab(id: string) {
  tabs.value = tabs.value.filter((t) => t.id !== id);
-  if (activeTabId.value === id) {
-    activeTabId.value = tabs.value.length ? tabs.value[tabs.value.length - 1].id : null;
+  activePanes.value = activePanes.value.filter((p) => p !== id);
+  if (activePanes.value.length === 0 && tabs.value.length) {
+    activePanes.value = [tabs.value[tabs.value.length - 1].id];
  }
 }

@@ -359,12 +647,18 @@ async function submitHost() {
    body.identity_id = f.identity_id;
  }

+  const tags = parseTagsInput(f.tags);
+  if (tags.length) {
+    body.tags = tags;
+  }
+  
  await api.createHost(body);
  showHostForm.value = false;
  hostForm.value = {
    label: "",
    hostname: "",
    port: 22,
+    tags: "",
    use_inline_identity: false,
    identity_id: hostForm.value.identity_id,
    auth_type: "password",
@@ -412,6 +706,7 @@ function openEditHost(h: HostRow) {
    label: h.label,
    hostname: h.hostname,
    port: h.port,
+    tags: (h.tags || []).join(", "),
    use_inline_identity: hasInlineIdentity,
    identity_id: h.identity_id || 0,
    auth_type: (h.identity_auth_type as "password" | "publickey") || "password",
@@ -451,6 +746,8 @@ async function submitEditHost() {
    body.identity_id = f.identity_id;
  }

+  body.tags = parseTagsInput(f.tags);
+  
  await api.patchHost(f.id, body);
  showEditHost.value = false;
  allHosts.value = await api.listHosts();
@@ -476,10 +773,9 @@ async function deleteHostRow(id: number) {
  await api.deleteHost(id);
  allHosts.value = allHosts.value.filter((h) => h.id !== id);
  tabs.value = tabs.value.filter((t) => t.hostId !== id);
-  if (!tabs.value.some((t) => t.id === activeTabId.value)) {
-    activeTabId.value = tabs.value.length
-      ? tabs.value[tabs.value.length - 1].id
-      : null;
+  activePanes.value = activePanes.value.filter(p => tabs.value.some(t => t.id === p));
+  if (activePanes.value.length === 0 && tabs.value.length) {
+    activePanes.value = [tabs.value[tabs.value.length - 1].id];
  }
  await refreshBrowse();
 }
@@ -531,20 +827,104 @@ async function deleteIdentityRow(id: number) {
            />
          </svg>
        </button>
-        <a 
-          href="https://git.jdbnet.co.uk/jamie/ssh" 
-          target="_blank" 
-          rel="noopener noreferrer"
-          class="flex items-center gap-2 truncate"
-        >
-          <span class="truncate text-sm font-semibold text-white">JDB-NET SSH</span>
-          <span class="truncate text-xs text-slate-400 hover:text-slate-300">{{ appVersion }}</span>
-        </a>
+        <div class="flex items-center gap-2 truncate">
+          <span class="truncate text-sm font-semibold text-white">SSH</span>
+          <a
+            href="https://git.jdbnet.co.uk/jamie/ssh"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="truncate text-xs text-slate-400 hover:text-slate-300"
+          >
+            {{ appVersion }}
+          </a>
+        </div>
      </div>
      <div class="flex items-center gap-2">
        <button
+          v-if="activePanes.length > 1"
          type="button"
-          class="rounded-lg px-3 py-1.5 text-xs text-slate-400 hover:bg-slate-800 hover:text-white"
+          class="hidden rounded-lg px-3 py-1.5 text-xs md:inline-flex border transition-colors"
+          :class="broadcastMode ? 'border-accent bg-accent/10 text-accent' : 'border-slate-800 text-slate-400 hover:border-slate-700 hover:text-white'"
+          @click="broadcastMode = !broadcastMode"
+          title="Broadcast input to all visible terminals"
+        >
+          <span class="flex items-center gap-2">
+            <Radio class="h-3.5 w-3.5" />
+            Broadcast
+          </span>
+        </button>
+        <div class="relative hidden md:block">
+          <button
+            ref="snippetsButtonRef"
+            type="button"
+            class="rounded-lg px-3 py-1.5 text-xs text-slate-400 hover:bg-slate-800 hover:text-white inline-flex items-center gap-1"
+            @click="showSnippetsMenu = !showSnippetsMenu"
+          >
+            Snippets
+            <ChevronDown class="h-3 w-3" />
+          </button>
+          <div
+            v-if="showSnippetsMenu"
+            ref="snippetsMenuRef"
+            class="absolute right-0 top-full mt-2 w-64 rounded-xl border border-slate-700 bg-surface shadow-xl z-50 overflow-hidden"
+          >
+            <div class="max-h-64 overflow-y-auto p-1">
+              <div v-if="snippets.length === 0" class="p-3 text-center text-xs text-slate-500">
+                No snippets saved.
+              </div>
+              <div
+                v-for="s in snippets"
+                :key="s.id"
+                class="flex items-center justify-between group rounded-lg px-2 py-1.5 hover:bg-slate-800"
+              >
+                <button
+                  type="button"
+                  class="flex-1 text-left text-sm text-white truncate"
+                  @click="runSnippet(s.command)"
+                  :title="s.command"
+                >
+                  {{ s.label }}
+                </button>
+                <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                  <button type="button" class="text-slate-400 hover:text-white p-1" @click="openEditSnippet(s)">
+                    <Pencil class="h-3 w-3" />
+                  </button>
+                  <button type="button" class="text-red-400 hover:text-red-300 p-1" @click="deleteSnippet(s.id)">
+                    <Trash2 class="h-3 w-3" />
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div class="border-t border-slate-700 p-1">
+              <button
+                type="button"
+                class="w-full rounded-lg px-2 py-1.5 text-left text-xs text-slate-400 hover:bg-slate-800 hover:text-white"
+                @click="openEditSnippet()"
+              >
+                + Add new snippet...
+              </button>
+            </div>
+          </div>
+        </div>
+        <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"
+          @click="openApiKeys"
+        >
+          API keys
+        </button>
+        <button
+          v-if="auditLogEnabled"
+          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"
          @click="openAuditLog"
        >
          Connection audit
@@ -581,7 +961,7 @@ async function deleteIdentityRow(id: number) {
          <input
            v-model="searchQuery"
            type="search"
-            placeholder="Search in this folder…"
+            placeholder="Search…"
            class="mt-2 w-full rounded-lg border border-slate-700 bg-surface-overlay px-2 py-1.5 text-xs text-white placeholder:text-slate-500 focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent"
            @input="onSearchInput"
          >
@@ -591,9 +971,11 @@ async function deleteIdentityRow(id: number) {
          >
            Matches in
            {{
-              currentFolderId == null
-                ? "all folders"
-                : "this folder and below"
+              searchQuery.trim().toLowerCase().startsWith("tag:")
+                ? "all folders (tag search)"
+                : currentFolderId == null
+                  ? "all folders"
+                  : "this folder and below"
            }}
          </p>
          <nav class="mt-2 flex flex-wrap items-center gap-1 text-[11px] text-slate-400">
@@ -709,6 +1091,21 @@ async function deleteIdentityRow(id: number) {
              >
                via {{ h.jump_host_label || `#${h.jump_host_id}` }}
              </p>
+              <div
+                v-if="h.tags?.length"
+                class="mt-1 flex flex-wrap gap-1"
+              >
+                <button
+                  v-for="tag in h.tags"
+                  :key="tag"
+                  type="button"
+                  class="rounded bg-slate-800 px-1.5 py-0.5 text-[10px] text-slate-400 hover:bg-slate-700 hover:text-accent"
+                  :title="`Search tag:${tag}`"
+                  @click.stop="searchByTag(tag)"
+                >
+                  {{ tag }}
+                </button>
+              </div>
              <p
                v-if="searchActive"
                class="mt-0.5 truncate text-[10px] text-slate-600"
@@ -804,13 +1201,19 @@ async function deleteIdentityRow(id: number) {
              v-for="t in tabs"
              :key="t.id"
              type="button"
-              class="flex items-center gap-2 rounded-t-lg border border-b-0 px-3 py-2 text-sm"
-              :class="
-                t.id === activeTabId
+              draggable="true"
+              @dragstart="onTabDragStart(t.id)"
+              @dragover.prevent
+              @drop="onTabDrop(t.id)"
+              @dragend="onTabDragEnd"
+              class="flex items-center gap-2 rounded-t-lg border border-b-0 px-3 py-2 text-sm transition-colors"
+              :class="[
+                activePanes.includes(t.id)
                  ? 'border-slate-700 bg-surface text-white'
-                  : 'border-transparent bg-transparent text-slate-400 hover:text-white'
-              "
-              @click="activeTabId = t.id"
+                  : 'border-transparent bg-transparent text-slate-400 hover:text-white',
+                draggedTabId && draggedTabId !== t.id ? 'hover:bg-slate-800/50' : ''
+              ]"
+              @click="activePanes = [t.id]"
            >
              {{ t.label }}
              <span
@@ -819,23 +1222,179 @@ async function deleteIdentityRow(id: number) {
              >×</span>
            </button>
          </div>
-          <div class="min-h-0 flex-1 p-2 md:p-3">
+          <div class="relative min-h-0 flex-1 flex flex-row gap-2 p-2 md:p-3">
            <div
              v-for="t in tabs"
-              v-show="t.id === activeTabId"
+              v-show="activePanes.includes(t.id)"
              :key="t.id"
-              class="h-full min-h-0"
+              class="flex-1 min-w-0 h-full"
            >
              <TabContent
+                :ref="(el) => setTabRef(el, t.id)"
                :host-id="t.hostId"
-                :visible="t.id === activeTabId"
+                :visible="activePanes.includes(t.id)"
+                :show-sftp="showSftpPanel"
+                @broadcast-data="(data: string) => handleBroadcast(data, t.id)"
              />
            </div>
+            
+            <div 
+              v-if="draggedTabId && activePanes.length === 1 && !activePanes.includes(draggedTabId)"
+              class="absolute inset-y-2 right-2 md:inset-y-3 md:right-3 w-[calc(50%-0.25rem)] z-50 flex items-center justify-center rounded-lg border-2 border-dashed border-accent bg-accent/10 backdrop-blur-[2px] transition-all"
+              @dragover.prevent
+              @drop="onSplitDrop"
+            >
+              <span class="font-medium text-accent">Drop to split side-by-side</span>
+            </div>
          </div>
        </template>
      </main>
    </div>

+    <SnippetForm
+      v-if="showSnippetForm"
+      :snippet="editingSnippet"
+      @save="saveSnippet"
+      @cancel="showSnippetForm = false"
+    />
+
+    <div
+      v-if="showApiKeys"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4"
+    >
+      <div
+        class="max-h-[90vh] w-full max-w-4xl overflow-auto rounded-xl border border-slate-800 bg-surface-raised p-6 shadow-xl"
+      >
+        <div class="flex items-center justify-between gap-3">
+          <h2 class="text-lg font-semibold text-white">API keys</h2>
+          <button
+            type="button"
+            class="rounded-lg px-3 py-1.5 text-xs text-slate-400 hover:bg-slate-800 hover:text-white"
+            @click="showApiKeys = false"
+          >
+            Close
+          </button>
+        </div>
+        <p class="mt-1 text-xs text-slate-500">
+          Create keys for external systems. Send
+          <code class="text-slate-400">Authorization: Bearer &lt;key&gt;</code>
+          on API requests. For WebSocket terminals, append
+          <code class="text-slate-400">?token=&lt;key&gt;</code>.
+        </p>
+
+        <form class="mt-5 rounded-lg border border-slate-800 bg-surface-overlay/40 p-4" @submit.prevent="submitApiKey">
+          <h3 class="text-sm font-medium text-white">Create key</h3>
+          <label class="mt-3 block text-xs uppercase text-slate-500">Label</label>
+          <input
+            v-model="apiKeyForm.label"
+            required
+            maxlength="255"
+            placeholder="CI deploy, monitoring, …"
+            class="mt-1 w-full rounded border border-slate-700 bg-surface-overlay px-2 py-1.5 text-sm"
+          />
+          <p class="mt-3 text-xs uppercase text-slate-500">Scopes</p>
+          <div class="mt-2 space-y-2">
+            <label
+              v-for="scope in apiKeyScopes"
+              :key="scope.id"
+              class="flex cursor-pointer items-start gap-2 rounded border border-slate-800 px-3 py-2 hover:border-slate-700"
+            >
+              <input
+                type="checkbox"
+                class="mt-0.5"
+                :checked="apiKeyForm.scopes.includes(scope.id)"
+                @change="toggleApiKeyScope(scope.id)"
+              />
+              <span>
+                <span class="block text-sm text-slate-200">{{ scope.label }}</span>
+                <span class="block text-xs text-slate-500">{{ scope.description }}</span>
+              </span>
+            </label>
+          </div>
+          <label class="mt-3 block text-xs uppercase text-slate-500">Expiry (optional)</label>
+          <input
+            v-model="apiKeyForm.expires_at"
+            type="datetime-local"
+            class="mt-1 w-full rounded border border-slate-700 bg-surface-overlay px-2 py-1.5 text-sm"
+          />
+          <p v-if="apiKeyCreateErr" class="mt-3 text-xs text-red-400">{{ apiKeyCreateErr }}</p>
+          <div
+            v-if="createdApiKey"
+            class="mt-3 rounded border border-amber-900/60 bg-amber-950/30 p-3"
+          >
+            <p class="text-xs text-amber-200">
+              Copy this key now — it will not be shown again.
+            </p>
+            <div class="mt-2 flex items-center gap-2">
+              <code class="min-w-0 flex-1 break-all rounded bg-surface-overlay px-2 py-1 text-[11px] text-slate-200">
+                {{ createdApiKey }}
+              </code>
+              <button
+                type="button"
+                class="shrink-0 rounded bg-slate-800 px-2 py-1 text-xs hover:bg-slate-700"
+                @click="copyCreatedApiKey"
+              >
+                Copy
+              </button>
+            </div>
+          </div>
+          <button
+            type="submit"
+            class="mt-4 rounded-lg bg-accent px-3 py-1.5 text-xs font-medium text-slate-950 hover:bg-sky-400 disabled:opacity-50"
+            :disabled="apiKeyCreating || !apiKeyForm.scopes.length"
+          >
+            {{ apiKeyCreating ? "Creating…" : "Create key" }}
+          </button>
+        </form>
+
+        <p v-if="apiKeysErr" class="mt-4 text-xs text-red-400">{{ apiKeysErr }}</p>
+        <p v-else-if="apiKeysLoading" class="mt-4 text-xs text-slate-400">Loading…</p>
+        <div v-else class="mt-4 overflow-x-auto">
+          <table class="min-w-full text-left text-xs">
+            <thead class="text-slate-500">
+              <tr class="border-b border-slate-800">
+                <th class="px-2 py-2 font-medium">Label</th>
+                <th class="px-2 py-2 font-medium">Prefix</th>
+                <th class="px-2 py-2 font-medium">Scopes</th>
+                <th class="px-2 py-2 font-medium">Expires</th>
+                <th class="px-2 py-2 font-medium">Last used</th>
+                <th class="px-2 py-2 font-medium">Status</th>
+                <th class="px-2 py-2 font-medium"></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="row in apiKeyRows"
+                :key="row.id"
+                class="border-b border-slate-900/80 text-slate-300"
+              >
+                <td class="px-2 py-2">{{ row.label }}</td>
+                <td class="px-2 py-2 font-mono text-[11px]">{{ row.key_prefix }}…</td>
+                <td class="px-2 py-2">{{ fmtScopes(row.scopes) }}</td>
+                <td class="px-2 py-2">{{ row.expires_at ? fmtDate(row.expires_at) : "Never" }}</td>
+                <td class="px-2 py-2">{{ row.last_used_at ? fmtDate(row.last_used_at) : "Never" }}</td>
+                <td class="px-2 py-2">{{ apiKeyStatus(row) }}</td>
+                <td class="px-2 py-2 text-right">
+                  <button
+                    type="button"
+                    class="rounded px-2 py-1 text-red-400 hover:bg-slate-800"
+                    @click="deleteApiKey(row.id, row.label)"
+                  >
+                    Delete
+                  </button>
+                </td>
+              </tr>
+              <tr v-if="!apiKeyRows.length">
+                <td class="px-2 py-4 text-center text-slate-500" colspan="7">
+                  No API keys yet.
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
    <div
      v-if="showAuditLog"
      class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4"
@@ -1088,6 +1647,12 @@ async function deleteIdentityRow(id: number) {
          max="65535"
          class="mt-1 w-full rounded border border-slate-700 bg-surface-overlay px-2 py-1.5 text-sm"
        />
+        <label class="mt-3 block text-xs uppercase text-slate-500">Tags</label>
+        <TagInput v-model="hostForm.tags" :suggestions="allTags" />
+        <p class="mt-1 text-[10px] text-slate-500">
+          Comma-separated. Search with
+          <code class="text-slate-400">tag:name</code>.
+        </p>
        <label class="mt-3 block text-xs uppercase text-slate-500">Credentials</label>
        <div class="mt-1 flex gap-2">
          <label class="flex items-center gap-2 cursor-pointer">
@@ -1299,6 +1864,12 @@ async function deleteIdentityRow(id: number) {
          max="65535"
          class="mt-1 w-full rounded border border-slate-700 bg-surface-overlay px-2 py-1.5 text-sm"
        >
+        <label class="mt-3 block text-xs uppercase text-slate-500">Tags</label>
+        <TagInput v-model="editHostForm.tags" :suggestions="allTags" />
+        <p class="mt-1 text-[10px] text-slate-500">
+          Comma-separated. Search with
+          <code class="text-slate-400">tag:name</code>.
+        </p>
        <label class="mt-3 block text-xs uppercase text-slate-500">Folder</label>
        <select
          class="mt-1 w-full rounded border border-slate-700 bg-surface-overlay px-2 py-1.5 text-sm"
@@ -21,7 +21,7 @@ function browseParams(folderId: number | null, q: string): string {
 }

 export const api = {
-  async me(): Promise<{ logged_in: boolean; app_version?: string }> {
+  async me(): Promise<{ logged_in: boolean; app_version?: string; audit_log_enabled?: boolean }> {
    const res = await fetch("/api/me", { credentials: "include" });
    return handle(res);
  },
@@ -65,6 +65,17 @@ export const api = {
    return d.items;
  },

+  async pingHost(id: number): Promise<{ up: boolean }> {
+    const res = await fetch(`/api/hosts/${id}/ping`, { credentials: "include" });
+    return handle<{ up: boolean }>(res);
+  },
+
+  async listTags(): Promise<string[]> {
+    const res = await fetch("/api/tags", { credentials: "include" });
+    const d = await handle<{ items: string[] }>(res);
+    return d.items;
+  },
+
  async listFoldersFlat(): Promise<FolderRow[]> {
    const res = await fetch("/api/folders", { credentials: "include" });
    const d = await handle<{ items: FolderRow[] }>(res);
@@ -182,6 +193,43 @@ export const api = {
    await handle(res);
  },

+  async listSnippets(): Promise<SnippetRow[]> {
+    const res = await fetch("/api/snippets", { credentials: "include" });
+    const d = await handle<{ items: SnippetRow[] }>(res);
+    return d.items;
+  },
+
+  async createSnippet(body: Record<string, unknown>): Promise<{ id: number }> {
+    const res = await fetch("/api/snippets", {
+      method: "POST",
+      credentials: "include",
+      headers: jsonHeaders,
+      body: JSON.stringify(body),
+    });
+    return handle(res);
+  },
+
+  async updateSnippet(
+    id: number,
+    body: Partial<{ label: string; command: string }>,
+  ): Promise<void> {
+    const res = await fetch(`/api/snippets/${id}`, {
+      method: "PATCH",
+      credentials: "include",
+      headers: jsonHeaders,
+      body: JSON.stringify(body),
+    });
+    await handle(res);
+  },
+
+  async deleteSnippet(id: number): Promise<void> {
+    const res = await fetch(`/api/snippets/${id}`, {
+      method: "DELETE",
+      credentials: "include",
+    });
+    await handle(res);
+  },
+
  async listConnectionAudit(limit = 200, daysBack?: number): Promise<ConnectionAuditRow[]> {
    const q = new URLSearchParams({ limit: String(limit) });
    if (daysBack !== undefined) {
@@ -194,6 +242,40 @@ export const api = {
    return d.items;
  },

+  async listApiKeyScopes(): Promise<ApiKeyScopeDef[]> {
+    const res = await fetch("/api/api-keys/scopes", { credentials: "include" });
+    const d = await handle<{ items: ApiKeyScopeDef[] }>(res);
+    return d.items;
+  },
+
+  async listApiKeys(): Promise<ApiKeyRow[]> {
+    const res = await fetch("/api/api-keys", { credentials: "include" });
+    const d = await handle<{ items: ApiKeyRow[] }>(res);
+    return d.items;
+  },
+
+  async createApiKey(body: {
+    label: string;
+    scopes: string[];
+    expires_at?: string | null;
+  }): Promise<CreateApiKeyResponse> {
+    const res = await fetch("/api/api-keys", {
+      method: "POST",
+      credentials: "include",
+      headers: jsonHeaders,
+      body: JSON.stringify(body),
+    });
+    return handle(res);
+  },
+
+  async deleteApiKey(id: number): Promise<void> {
+    const res = await fetch(`/api/api-keys/${id}`, {
+      method: "DELETE",
+      credentials: "include",
+    });
+    await handle(res);
+  },
+
  async sftpList(
    connId: string,
    path: string,
@@ -241,16 +323,41 @@ export const api = {
    await handle(res);
  },

-  async sftpUpload(connId: string, path: string, file: File): Promise<void> {
+  async sftpUpload(
+    connId: string,
+    path: string,
+    file: File,
+    onProgress?: (loaded: number, total: number) => void
+  ): Promise<void> {
    const fd = new FormData();
    fd.set("path", path);
    fd.set("file", file);
-    const res = await fetch(`/api/sftp/${connId}/upload`, {
-      method: "POST",
-      credentials: "include",
-      body: fd,
+    return new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest();
+      xhr.open("POST", `/api/sftp/${connId}/upload`);
+      xhr.withCredentials = true;
+      if (onProgress) {
+        xhr.upload.onprogress = (e) => {
+          if (e.lengthComputable) {
+            onProgress(e.loaded, e.total);
+          }
+        };
+      }
+      xhr.onload = () => {
+        if (xhr.status === 401) return reject(new Error("unauthorized"));
+        let data: any = {};
+        try {
+          data = JSON.parse(xhr.responseText);
+        } catch (e) {}
+        if (xhr.status >= 200 && xhr.status < 300) {
+          resolve();
+        } else {
+          reject(new Error(data.error || xhr.statusText));
+        }
+      };
+      xhr.onerror = () => reject(new Error("Network Error"));
+      xhr.send(fd);
    });
-    await handle(res);
  },

  sftpDownloadUrl(connId: string, path: string): string {
@@ -278,6 +385,7 @@ export interface HostRow {
  identity_auth_type: string;
  folder_label?: string | null;
  last_connected_at?: string | null;
+  tags?: string[];
 }

 export interface IdentityRow {
@@ -286,6 +394,12 @@ export interface IdentityRow {
  auth_type: string;
 }

+export interface SnippetRow {
+  id: number;
+  label: string;
+  command: string;
+}
+
 export interface SftpEntry {
  filename: string;
  st_mode: number;
@@ -304,3 +418,31 @@ export interface ConnectionAuditRow {
  ended_at: string | null;
  duration_seconds: number | null;
 }
+
+export interface ApiKeyScopeDef {
+  id: string;
+  label: string;
+  description: string;
+}
+
+export interface ApiKeyRow {
+  id: number;
+  label: string;
+  key_prefix: string;
+  scopes: string[];
+  expires_at: string | null;
+  last_used_at: string | null;
+  revoked_at: string | null;
+  created_at: string;
+  expired: boolean;
+  active: boolean;
+}
+
+export interface CreateApiKeyResponse {
+  id: number;
+  label: string;
+  key_prefix: string;
+  scopes: string[];
+  expires_at: string | null;
+  key: string;
+}
@@ -31,7 +31,7 @@ async function submit() {
      class="w-full max-w-md rounded-xl border border-slate-800 bg-surface-raised p-8 shadow-xl"
    >
      <h1 class="font-sans text-2xl font-semibold tracking-tight text-white">
-        JDB-NET SSH
+        SSH
      </h1>
      <p class="mt-1 text-sm text-slate-400">
        Sign in to manage connections and open terminals.
@@ -11,6 +11,7 @@ const err = ref("");
 const busy = ref(false);
 const renameTarget = ref<SftpEntry | null>(null);
 const newName = ref("");
+const uploadProgress = ref<number | null>(null);

 function isDir(m: number): boolean {
  return (m & 0o170000) === 0o040000;
@@ -66,11 +67,16 @@ async function onUpload(ev: Event) {
  input.value = "";
  if (!file) return;
  err.value = "";
+  uploadProgress.value = 0;
  try {
-    await api.sftpUpload(props.connId, path.value, file);
+    await api.sftpUpload(props.connId, path.value, file, (loaded, total) => {
+      uploadProgress.value = Math.round((loaded / total) * 100);
+    });
    await load();
  } catch (e) {
    err.value = e instanceof Error ? e.message : "Upload failed";
+  } finally {
+    uploadProgress.value = null;
  }
 }

@@ -186,7 +192,19 @@ function fmtSize(n: number): string {
    </div>
    <div class="min-h-0 flex-1 overflow-auto p-2">
      <p v-if="err" class="mb-2 text-xs text-red-400">{{ err }}</p>
-      <p v-if="busy" class="text-xs text-slate-500">Loading…</p>
+      <div v-if="uploadProgress !== null" class="mb-2 space-y-1">
+        <div class="flex justify-between text-[10px] text-slate-400">
+          <span>Uploading...</span>
+          <span>{{ uploadProgress }}%</span>
+        </div>
+        <div class="h-1.5 w-full overflow-hidden rounded-full bg-slate-800">
+          <div
+            class="h-full bg-accent transition-all duration-200"
+            :style="{ width: uploadProgress + '%' }"
+          ></div>
+        </div>
+      </div>
+      <p v-else-if="busy" class="text-xs text-slate-500">Loading…</p>
      <ul v-else class="space-y-0.5">
        <li
          v-for="e in entries"
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import type { SnippetRow } from "@/api";
+
+const props = defineProps<{
+  snippet?: SnippetRow | null;
+}>();
+
+const emit = defineEmits<{
+  (e: "save", data: { label: string; command: string }): void;
+  (e: "cancel"): void;
+}>();
+
+const label = ref(props.snippet?.label || "");
+const command = ref(props.snippet?.command || "");
+
+function submit() {
+  if (!label.value.trim() || !command.value.trim()) return;
+  emit("save", {
+    label: label.value.trim(),
+    command: command.value.trim(),
+  });
+}
+</script>
+
+<template>
+  <div
+    class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm"
+  >
+    <div
+      class="w-full max-w-md rounded-xl border border-slate-700 bg-surface shadow-2xl"
+    >
+      <div class="flex items-center justify-between border-b border-slate-800 p-4">
+        <h2 class="text-lg font-semibold text-white">
+          {{ snippet ? "Edit snippet" : "Add snippet" }}
+        </h2>
+        <button
+          type="button"
+          class="text-slate-400 hover:text-white"
+          @click="emit('cancel')"
+        >
+          &times;
+        </button>
+      </div>
+      <form class="space-y-4 p-4" @submit.prevent="submit">
+        <div>
+          <label class="mb-1 block text-sm font-medium text-slate-300">
+            Label
+          </label>
+          <input
+            v-model="label"
+            type="text"
+            required
+            class="w-full rounded-lg border border-slate-700 bg-surface-overlay px-3 py-2 text-sm text-white placeholder:text-slate-500 focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent"
+            placeholder="e.g. Docker logs"
+            autocomplete="off"
+          />
+        </div>
+        <div>
+          <label class="mb-1 block text-sm font-medium text-slate-300">
+            Command
+          </label>
+          <textarea
+            v-model="command"
+            required
+            rows="3"
+            class="w-full rounded-lg border border-slate-700 bg-surface-overlay px-3 py-2 text-sm font-mono text-white placeholder:text-slate-500 focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent"
+            placeholder="docker compose logs -f"
+          />
+        </div>
+        <div class="flex justify-end gap-2 pt-2">
+          <button
+            type="button"
+            class="rounded-lg px-4 py-2 text-sm font-medium text-slate-300 hover:text-white"
+            @click="emit('cancel')"
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            class="rounded-lg bg-accent px-4 py-2 text-sm font-medium text-black hover:bg-[#16966b]"
+          >
+            Save snippet
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
@@ -6,6 +6,7 @@ import {
  watch,
  nextTick,
 } from "vue";
+import { api } from "@/api";
 import { Terminal } from "@xterm/xterm";
 import { FitAddon } from "@xterm/addon-fit";
 import "@xterm/xterm/css/xterm.css";
@@ -14,17 +15,32 @@ import SftpPanel from "./SftpPanel.vue";
 const props = defineProps<{
  hostId: number;
  visible: boolean;
+  showSftp: boolean;
 }>();

+const emit = defineEmits<{
+  (e: 'broadcast-data', data: string): void;
+}>();
+
+defineExpose({
+  sendData: (data: string) => {
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      ws.send(new TextEncoder().encode(data));
+    }
+  }
+});
+
 const termEl = ref<HTMLElement | null>(null);
 const status = ref("Connecting…");
 const connId = ref<string | null>(null);
+const serverBackOnline = ref(false);

 let ws: WebSocket | null = null;
 let term: Terminal | null = null;
 let fit: FitAddon | null = null;
 let ro: ResizeObserver | null = null;
-let pingInterval: NodeJS.Timeout | null = null;
+let visibilityHandler: (() => void) | null = null;
+let pingInterval: number | null = null;

 function wsUrl(hostId: number): string {
  const proto = location.protocol === "https:" ? "wss:" : "ws:";
@@ -37,6 +53,12 @@ function sendResize() {
  ws.send(JSON.stringify({ type: "resize", ...dims }));
 }

+function sendPing() {
+  if (ws && ws.readyState === WebSocket.OPEN) {
+    ws.send(JSON.stringify({ type: "ping" }));
+  }
+}
+
 function fitAndResize() {
  if (!fit || !term || !props.visible) return;
  try {
@@ -47,39 +69,34 @@ function fitAndResize() {
  }
 }

-onMounted(async () => {
-  await nextTick();
-  if (!termEl.value) return;
-
-  term = new Terminal({
-    cursorBlink: true,
-    fontFamily: "IBM Plex Mono, monospace",
-    fontSize: 14,
-    theme: {
-      background: "#0a0e12",
-      foreground: "#e2e8f0",
-      cursor: "#3d9aed",
-    },
-  });
-  fit = new FitAddon();
-  term.loadAddon(fit);
-  term.open(termEl.value);
-  fit.fit();
-
-  term.onData((data) => {
-    if (ws && ws.readyState === WebSocket.OPEN) {
-      ws.send(new TextEncoder().encode(data));
+function isControlMessage(raw: string): boolean {
+  try {
+    const o = JSON.parse(raw) as { type?: string; conn_id?: string };
+    if (o.type === "ready" && o.conn_id) {
+      connId.value = o.conn_id;
+      status.value = "";
+      fitAndResize();
+      term?.focus();
+      return true;
    }
-  });
-
-  term.onResize(({ cols, rows }) => {
-    if (ws && ws.readyState === WebSocket.OPEN) {
-      ws.send(JSON.stringify({ type: "resize", cols, rows }));
+    if (o.type === "keepalive" || o.type === "pong") {
+      return true;
    }
-  });
+  } catch {
+    /* not JSON control traffic */
+  }
+  return false;
+}

-  ro = new ResizeObserver(() => fitAndResize());
-  ro.observe(termEl.value);
+function connectWs() {
+  serverBackOnline.value = false;
+  if (pingInterval) {
+    clearInterval(pingInterval);
+    pingInterval = null;
+  }
+  if (ws) {
+    ws.close();
+  }

  ws = new WebSocket(wsUrl(props.hostId));
  ws.binaryType = "arraybuffer";
@@ -87,29 +104,12 @@ onMounted(async () => {
  ws.onopen = () => {
    status.value = "Handshaking…";
    sendResize();
-    // Send ping every 60 seconds to keep connection alive
-    pingInterval = setInterval(() => {
-      if (ws && ws.readyState === WebSocket.OPEN) {
-        ws.send(JSON.stringify({ type: "ping" }));
-      }
-    }, 60000);
  };

  ws.onmessage = (ev) => {
    if (!term) return;
    if (typeof ev.data === "string") {
-      try {
-        const o = JSON.parse(ev.data) as { type?: string; conn_id?: string };
-        if (o.type === "ready" && o.conn_id) {
-          connId.value = o.conn_id;
-          status.value = "";
-          fitAndResize();
-          term.focus();
-          return;
-        }
-      } catch {
-        /* fall through */
-      }
+      if (isControlMessage(ev.data)) return;
      term.write(ev.data);
      return;
    }
@@ -122,16 +122,82 @@ onMounted(async () => {
  };

  ws.onclose = () => {
-    if (pingInterval) {
-      clearInterval(pingInterval);
-      pingInterval = null;
-    }
    if (!connId.value) {
      status.value = "Disconnected";
    } else {
      status.value = "Session ended";
    }
+    
+    pingInterval = window.setInterval(async () => {
+      try {
+        const { up } = await api.pingHost(props.hostId);
+        if (up) {
+          if (pingInterval) {
+            clearInterval(pingInterval);
+            pingInterval = null;
+          }
+          serverBackOnline.value = true;
+        }
+      } catch (err) {
+        // ignore
+      }
+    }, 5000);
  };
+}
+
+function reconnect() {
+  term?.clear();
+  term?.focus();
+  connId.value = null;
+  status.value = "Connecting…";
+  connectWs();
+}
+
+onMounted(async () => {
+  await nextTick();
+  if (!termEl.value) return;
+
+  term = new Terminal({
+    cursorBlink: true,
+    fontFamily: "DM Mono, ui-monospace, monospace",
+    fontSize: 14,
+    theme: {
+      background: "#0d1117",
+      foreground: "#e6edf3",
+      cursor: "#1ebe8a",
+      selectionBackground: "rgba(30, 190, 138, 0.3)",
+    },
+  });
+  fit = new FitAddon();
+  term.loadAddon(fit);
+  term.open(termEl.value);
+  fit.fit();
+
+  term.onData((data) => {
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      ws.send(new TextEncoder().encode(data));
+    }
+    emit("broadcast-data", data);
+  });
+
+  term.onResize(({ cols, rows }) => {
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify({ type: "resize", cols, rows }));
+    }
+  });
+
+  ro = new ResizeObserver(() => fitAndResize());
+  ro.observe(termEl.value);
+
+  connectWs();
+
+  visibilityHandler = () => {
+    if (document.visibilityState === "visible") {
+      sendPing();
+      fitAndResize();
+    }
+  };
+  document.addEventListener("visibilitychange", visibilityHandler);
 });

 onUnmounted(() => {
@@ -139,6 +205,10 @@ onUnmounted(() => {
    clearInterval(pingInterval);
    pingInterval = null;
  }
+  if (visibilityHandler) {
+    document.removeEventListener("visibilitychange", visibilityHandler);
+    visibilityHandler = null;
+  }
  ro?.disconnect();
  ro = null;
  ws?.close();
@@ -155,6 +225,7 @@ watch(
      await nextTick();
      fitAndResize();
      term?.focus();
+      sendPing();
    }
  },
 );
@@ -169,22 +240,36 @@ watch(
      >
        {{ status }}
      </div>
+      <div
+        v-if="serverBackOnline"
+        class="absolute bottom-4 right-4 z-20 flex items-center gap-3 rounded bg-slate-800 px-4 py-3 text-sm shadow-lg border border-slate-700"
+      >
+        <span class="text-slate-200">Server is back online</span>
+        <button
+          @click="reconnect"
+          class="rounded bg-emerald-600 px-3 py-1.5 font-medium text-white hover:bg-emerald-500 transition-colors"
+        >
+          Reconnect
+        </button>
+      </div>
      <div
        ref="termEl"
-        class="h-full min-h-[320px] rounded-lg border border-slate-800 bg-[#0a0e12] p-1"
+        class="h-full min-h-[320px] rounded-lg border border-slate-800 bg-[#0d1117] p-1"
      />
    </div>
-    <div
-      v-if="connId"
-      class="hidden w-80 shrink-0 flex-col border-l border-slate-800 md:flex"
-    >
-      <SftpPanel :conn-id="connId" />
-    </div>
-    <div
-      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>
+    <template v-if="showSftp">
+      <div
+        v-if="connId"
+        class="hidden w-80 shrink-0 flex-col border-l border-slate-800 md:flex"
+      >
+        <SftpPanel :conn-id="connId" />
+      </div>
+      <div
+        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>
+    </template>
  </div>
 </template>
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+const props = defineProps<{
+  modelValue: string;
+  suggestions: string[];
+}>();
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string];
+}>();
+
+const focused = ref(false);
+
+function normalizeTag(raw: string): string {
+  return raw.trim().toLowerCase().replace(/\s+/g, "");
+}
+
+function selectedTags(): Set<string> {
+  return new Set(parseTagsInput(props.modelValue));
+}
+
+function parseTagsInput(raw: string): string[] {
+  const seen = new Set<string>();
+  const tags: string[] = [];
+  for (const part of raw.split(",")) {
+    const name = normalizeTag(part);
+    if (!name || seen.has(name)) continue;
+    seen.add(name);
+    tags.push(name);
+  }
+  return tags;
+}
+
+function currentPartial(): string {
+  const val = props.modelValue;
+  const idx = val.lastIndexOf(",");
+  return normalizeTag(idx >= 0 ? val.slice(idx + 1) : val);
+}
+
+const filteredSuggestions = computed(() => {
+  const partial = currentPartial();
+  const selected = selectedTags();
+  return props.suggestions
+    .filter((tag) => {
+      if (selected.has(tag)) return false;
+      if (!partial) return true;
+      return tag.includes(partial);
+    })
+    .slice(0, 8);
+});
+
+const showSuggestions = computed(
+  () => focused.value && filteredSuggestions.value.length > 0,
+);
+
+function applySuggestion(tag: string) {
+  const val = props.modelValue;
+  const idx = val.lastIndexOf(",");
+  const prefix = idx >= 0 ? `${val.slice(0, idx + 1)} ` : "";
+  emit("update:modelValue", `${prefix}${tag}, `);
+}
+
+function onBlur() {
+  window.setTimeout(() => {
+    focused.value = false;
+  }, 150);
+}
+</script>
+
+<template>
+  <div class="relative">
+    <input
+      :value="modelValue"
+      placeholder="buildagents, prod"
+      autocomplete="off"
+      class="mt-1 w-full rounded border border-slate-700 bg-surface-overlay px-2 py-1.5 text-sm"
+      @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+      @focus="focused = true"
+      @blur="onBlur"
+    />
+    <ul
+      v-if="showSuggestions"
+      class="absolute z-20 mt-1 max-h-40 w-full overflow-auto rounded-lg border border-slate-700 bg-surface-raised py-1 shadow-lg"
+    >
+      <li v-for="tag in filteredSuggestions" :key="tag">
+        <button
+          type="button"
+          class="block w-full px-3 py-1.5 text-left text-sm text-slate-200 hover:bg-slate-800"
+          @mousedown.prevent="applySuggestion(tag)"
+        >
+          {{ tag }}
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
@@ -5,18 +5,28 @@ export default {
    extend: {
      colors: {
        surface: {
-          DEFAULT: "#0f1419",
-          raised: "#151c24",
-          overlay: "#1a232e",
+          DEFAULT: "#0d1117",
+          raised: "#161b22",
+          overlay: "#21262d",
        },
        accent: {
-          DEFAULT: "#3d9aed",
-          muted: "#2a6fa3",
+          DEFAULT: "#1ebe8a",
+          muted: "#16966b",
+        },
+        slate: {
+          200: "#e6edf3",
+          300: "#c9d1d9",
+          400: "#8b949e",
+          500: "#6e7681",
+          600: "#484f58",
+          700: "#30363d",
+          800: "#21262d",
+          900: "#161b22",
        },
      },
      fontFamily: {
-        sans: ["IBM Plex Sans", "system-ui", "sans-serif"],
-        mono: ["IBM Plex Mono", "ui-monospace", "monospace"],
+        sans: ["Space Grotesk", "system-ui", "sans-serif"],
+        mono: ["DM Mono", "ui-monospace", "monospace"],
      },
    },
  },
@@ -1,6 +0,0 @@
-{
-  "name": "ssh",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {}
-}
@@ -0,0 +1,25 @@
+#!/bin/bash
+
+if [ ! -d "venv" ]; then
+    echo "Creating virtual environment in 'venv'..."
+    python3 -m venv venv
+    source venv/bin/activate
+    if [ -f "requirements.txt" ]; then
+        echo "Installing requirements..."
+        pip install -r requirements.txt
+    fi
+else
+    source venv/bin/activate
+fi
+
+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
Author	SHA1	Message	Date
jamie	9050986364	Merge pull request 'feat: add host ping endpoint and automatic reconnection UI for disconnected terminals' (#22 ) from v1.2.2 into main Reviewed-on: http://git.jdbnet.co.uk/jamie/ssh/pulls/22	2026-07-09 20:58:02 +01:00
jamie	d625c3903d	feat: add host ping endpoint and automatic reconnection UI for disconnected terminals Release / release (pull_request) Successful in 23s Details	2026-07-09 20:57:52 +01:00
jamie	c487a4e949	Merge pull request 'V1.2.1' (#20 ) from v1.2.1 into main Reviewed-on: http://git.jdbnet.co.uk/jamie/ssh/pulls/20	2026-06-26 18:41:31 +01:00
jamie	b4f31aa0ab	feat: add toggleable audit log functionality based on server environment variable Release / release (pull_request) Successful in 22s Details	2026-06-26 18:40:25 +01:00
jamie	0d98e16f29	feat: implement SFTP file upload progress tracking using XHR in API and UI components	2026-06-26 18:36:04 +01:00
jamie	db33658ffa	Merge pull request 'V1.2.0' (#17 ) from v1.2.0 into main Reviewed-on: http://git.jdbnet.co.uk/jamie/ssh/pulls/17	2026-06-19 20:03:17 +01:00
jamie	a38e3488e4	feat: add support for managing and executing reusable command snippets Release / release (pull_request) Successful in 23s Details	2026-06-19 20:02:07 +01:00
jamie	6539a7f2c4	feat: implement terminal input broadcasting across multiple active panes	2026-06-19 19:54:31 +01:00
jamie	790cfc581a	style: update design system with new color palette and typography fonts	2026-06-19 19:48:56 +01:00
jamie	053c9e8431	feat: add tab dragging and multi-pane split view support to App layout	2026-06-19 19:42:59 +01:00
jamie	59d216f697	chore: rename application title from JDB-NET SSH to SSH across UI components	2026-06-19 19:34:58 +01:00
jamie	d81136fe5e	feat: add toggleable SFTP panel	2026-06-19 19:29:44 +01:00
jamie	e43c4a7f2a	feat: automate virtual environment setup and use exec for gunicorn process management	2026-06-19 19:12:53 +01:00
jamie	07c9da8a80	Merge pull request 'refactor: 🎨 remove package-lock.json from root' (#16 ) from v1.1.1 into main Reviewed-on: http://git.jdbnet.co.uk/jamie/ssh/pulls/16	2026-06-02 23:25:43 +01:00
jamie	4bdd4c1d8a	fix: 🐛 only have version number clickable instead of title Release / release (pull_request) Successful in 21s Details	2026-06-02 22:25:15 +00:00
jamie	336334c7f5	style: 🎨 hide extra nav items on mobile	2026-06-02 22:23:47 +00:00
jamie	a502ae2687	fix: 🐛 ability to delete expired api keys	2026-06-02 22:20:56 +00:00
jamie	782d8446d9	build: 🚀 add run.sh for testing locally	2026-06-02 22:19:22 +00:00
jamie	5b79f5fb4b	feat: ✨ ability to delete api keys	2026-06-02 22:16:49 +00:00
jamie	a0f84ec78e	refactor: 🎨 remove package-lock.json from root	2026-06-02 22:13:21 +00:00
jamie	da996705c9	Merge pull request 'feat: ✨ added api key support' (#13 ) from v1.1.0 into main Reviewed-on: http://git.jdbnet.co.uk/jamie/ssh/pulls/13	2026-05-23 16:42:43 +01:00
jamie	6d341309f1	docs: 📝 remove unrequired variable from example Release / release (pull_request) Successful in 24s Details	2026-05-23 15:42:22 +00:00
jamie	187a3c7882	fix: 🐛 client timeouts	2026-05-23 15:40:13 +00:00
jamie	c7ffdf81c2	feat: ✨ add tags	2026-05-23 15:36:46 +00:00
jamie	0664d8763d	feat: ✨ added api key support	2026-05-23 15:24:35 +00:00
jamie	853e06456e	test: remove dummy project	2026-05-15 07:05:02 +00:00