feat: implement terminal input broadcasting across multiple active panes

style: update design system with new color palette and typography fonts
feat: add tab dragging and multi-pane split view support to App layout
2026-06-19 19:54:31 +01:00 · 2026-06-19 19:48:56 +01:00 · 2026-06-19 19:42:59 +01:00 · 2026-06-19 19:34:58 +01:00 · 2026-06-19 19:29:44 +01:00 · 2026-06-19 19:12:53 +01:00
10 changed files with 222 additions and 81 deletions
@@ -2,3 +2,4 @@ __pycache__/
 .env
 frontend/node_modules/
 static/dist/
 venv/
@@ -1743,13 +1743,12 @@ def update_api_key(kid: int):
@app.route("/api/api-keys/<int:kid>", methods=["DELETE"])
@require_login
-def revoke_api_key(kid: int):
+def delete_api_key(kid: int):
    with db_cursor() as (_, cur):
        cur.execute(
            """
-            UPDATE api_keys
+            DELETE FROM api_keys
-            SET revoked_at = CURRENT_TIMESTAMP
+            WHERE id = %s
            WHERE id = %s AND revoked_at IS NULL
            """,
            (kid,),
        )
@@ -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,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
-import { Folder, Pencil, Trash2 } from "lucide-vue-next";
+import { Folder, Pencil, Trash2, Radio } from "lucide-vue-next";
 import {
  api,
  type HostRow,
@@ -33,8 +33,58 @@ 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 tabs = ref<{ id: string; hostId: number; label: string }[]>([]);
-const activeTabId = ref<string | null>(null);
+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);
    }
  }
 }
 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 */
@@ -49,6 +99,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[]>([]);
@@ -232,9 +286,10 @@ async function onLoggedIn() {
 async function logout() {
  await api.logout();
-  tabs.value = [];
+    tabs.value = [];
-  activeTabId.value = null;
+    activePanes.value = [];
-  loggedIn.value = false;
+    allHosts.value = [];
    loggedIn.value = false;
 }
 function fmtDate(ts: string | null): string {
@@ -366,14 +421,14 @@ async function submitApiKey() {
  }
 }
-async function revokeApiKey(id: number, label: string) {
+async function deleteApiKey(id: number, label: string) {
-  if (!confirm(`Revoke API key "${label}"? This cannot be undone.`)) return;
+  if (!confirm(`Delete API key "${label}"? This cannot be undone.`)) return;
  apiKeysErr.value = "";
  try {
-    await api.revokeApiKey(id);
+    await api.deleteApiKey(id);
    await refreshApiKeys();
  } catch (e) {
-    apiKeysErr.value = e instanceof Error ? e.message : "Failed to revoke API key";
+    apiKeysErr.value = e instanceof Error ? e.message : "Failed to delete API key";
  }
 }
@@ -399,7 +454,7 @@ function fmtScopes(scopes: string[]): string {
 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;
  }
@@ -411,8 +466,9 @@ function toggleSidebar() {
 function closeTab(id: string) {
  tabs.value = tabs.value.filter((t) => t.id !== id);
-  if (activeTabId.value === id) {
+  activePanes.value = activePanes.value.filter((p) => p !== id);
-    activeTabId.value = tabs.value.length ? tabs.value[tabs.value.length - 1].id : null;
+  if (activePanes.value.length === 0 && tabs.value.length) {
    activePanes.value = [tabs.value[tabs.value.length - 1].id];
  }
 }
@@ -637,10 +693,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)) {
+  activePanes.value = activePanes.value.filter(p => tabs.value.some(t => t.id === p));
-    activeTabId.value = tabs.value.length
+  if (activePanes.value.length === 0 && tabs.value.length) {
-      ? tabs.value[tabs.value.length - 1].id
+    activePanes.value = [tabs.value[tabs.value.length - 1].id];
      : null;
  }
  await refreshBrowse();
 }
@@ -692,27 +747,50 @@ async function deleteIdentityRow(id: number) {
            />
          </svg>
        </button>
-        <a 
+        <div class="flex items-center gap-2 truncate">
-          href="https://git.jdbnet.co.uk/jamie/ssh" 
+          <span class="truncate text-sm font-semibold text-white">SSH</span>
-          target="_blank" 
+          <a
-          rel="noopener noreferrer"
+            href="https://git.jdbnet.co.uk/jamie/ssh"
-          class="flex items-center gap-2 truncate"
+            target="_blank"
-        >
+            rel="noopener noreferrer"
-          <span class="truncate text-sm font-semibold text-white">JDB-NET SSH</span>
+            class="truncate text-xs text-slate-400 hover:text-slate-300"
-          <span class="truncate text-xs text-slate-400 hover:text-slate-300">{{ appVersion }}</span>
+          >
-        </a>
+            {{ 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>
        <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
          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 text-slate-400 hover:bg-slate-800 hover:text-white md:inline-flex"
          @click="openAuditLog"
        >
          Connection audit
@@ -989,13 +1067,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"
+              draggable="true"
-              :class="
+              @dragstart="onTabDragStart(t.id)"
-                t.id === activeTabId
+              @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'
+                  : 'border-transparent bg-transparent text-slate-400 hover:text-white',
-              "
+                draggedTabId && draggedTabId !== t.id ? 'hover:bg-slate-800/50' : ''
-              @click="activeTabId = t.id"
+              ]"
              @click="activePanes = [t.id]"
            >
              {{ t.label }}
              <span
@@ -1004,18 +1088,30 @@ 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>
@@ -1139,12 +1235,11 @@ async function deleteIdentityRow(id: number) {
                <td class="px-2 py-2">{{ apiKeyStatus(row) }}</td>
                <td class="px-2 py-2 text-right">
                  <button
                    v-if="row.active"
                    type="button"
                    class="rounded px-2 py-1 text-red-400 hover:bg-slate-800"
-                    @click="revokeApiKey(row.id, row.label)"
+                    @click="deleteApiKey(row.id, row.label)"
                  >
-                    Revoke
+                    Delete
                  </button>
                </td>
              </tr>
@@ -226,7 +226,7 @@ export const api = {
    return handle(res);
  },
-  async revokeApiKey(id: number): Promise<void> {
+  async deleteApiKey(id: number): Promise<void> {
    const res = await fetch(`/api/api-keys/${id}`, {
      method: "DELETE",
      credentials: "include",
@@ -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.
@@ -14,8 +14,21 @@ 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);
@@ -78,12 +91,13 @@ onMounted(async () => {
  term = new Terminal({
    cursorBlink: true,
-    fontFamily: "IBM Plex Mono, monospace",
+    fontFamily: "DM Mono, ui-monospace, monospace",
    fontSize: 14,
    theme: {
-      background: "#0a0e12",
+      background: "#0d1117",
-      foreground: "#e2e8f0",
+      foreground: "#e6edf3",
-      cursor: "#3d9aed",
+      cursor: "#1ebe8a",
      selectionBackground: "rgba(30, 190, 138, 0.3)",
    },
  });
  fit = new FitAddon();
@@ -95,6 +109,7 @@ onMounted(async () => {
    if (ws && ws.readyState === WebSocket.OPEN) {
      ws.send(new TextEncoder().encode(data));
    }
    emit("broadcast-data", data);
  });
  term.onResize(({ cols, rows }) => {
@@ -184,20 +199,22 @@ watch(
      </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
+    <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>
@@ -5,18 +5,28 @@ export default {
    extend: {
      colors: {
        surface: {
-          DEFAULT: "#0f1419",
+          DEFAULT: "#0d1117",
-          raised: "#151c24",
+          raised: "#161b22",
-          overlay: "#1a232e",
+          overlay: "#21262d",
        },
        accent: {
-          DEFAULT: "#3d9aed",
+          DEFAULT: "#1ebe8a",
-          muted: "#2a6fa3",
+          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"],
+        sans: ["Space Grotesk", "system-ui", "sans-serif"],
-        mono: ["IBM Plex Mono", "ui-monospace", "monospace"],
+        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	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