jamie/ssh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

Compare commits

base: jamie/ssh:v1.1.0
Branches Tags
jamie/ssh:main
jamie/ssh:v1.2.2 jamie/ssh:v1.2.1 jamie/ssh:v1.2.0 jamie/ssh:v1.1.1 jamie/ssh:v1.1.0 jamie/ssh:v1.0.0
...
compare: jamie/ssh:6539a7f2c4ab22f39249cc6d388e972f037ad51a
Branches Tags
jamie/ssh:main
jamie/ssh:v1.2.2 jamie/ssh:v1.2.1 jamie/ssh:v1.2.0 jamie/ssh:v1.1.1 jamie/ssh:v1.1.0 jamie/ssh:v1.0.0

13 Commits
v1.1.0 ... 6539a7f2c4

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
10 changed files with 222 additions and 81 deletions
Expand all files Collapse all files
.gitignore
+1
View File
@@ -2,3 +2,4 @@ __pycache__/
.env .env
frontend/node_modules/ frontend/node_modules/
static/dist/ static/dist/
venv/
app.py
+3 -4
View File
@@ -1743,13 +1743,12 @@ def update_api_key(kid: int):
@app.route("/api/api-keys/<int:kid>", methods=["DELETE"]) @app.route("/api/api-keys/<int:kid>", methods=["DELETE"])
@require_login @require_login
def revoke_api_key(kid: int): def delete_api_key(kid: int):
with db_cursor() as (_, cur): with db_cursor() as (_, cur):
cur.execute( 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,), (kid,),
) )
frontend/index.html
+3 -3
View File
@@ -8,15 +8,15 @@
href="https://assets.jdbnet.co.uk/projects/ssh.png" href="https://assets.jdbnet.co.uk/projects/ssh.png"
/> />
<link rel="manifest" href="/manifest.webmanifest" /> <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" /> <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.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link <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" rel="stylesheet"
/> />
<title>JDB-NET SSH</title> <title>SSH</title>
</head> </head>
<body class="bg-surface text-slate-200 antialiased"> <body class="bg-surface text-slate-200 antialiased">
<div id="app"></div> <div id="app"></div>
frontend/src/App.vue
+128 -33
View File
@@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref } from "vue"; import { onMounted, ref } from "vue";
import { Folder, Pencil, Trash2 } from "lucide-vue-next"; import { Folder, Pencil, Trash2, Radio } from "lucide-vue-next";
import { import {
api, api,
type HostRow, type HostRow,
@@ -33,8 +33,58 @@ const breadcrumb = ref<{ id: number; label: string }[]>([]);
const searchActive = ref(false); const searchActive = ref(false);
const currentFolderId = ref<number | null>(null); const currentFolderId = ref<number | null>(null);
const searchQuery = ref(""); 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 loadErr = ref("");
const hostSortOrder = ref<"name" | "last_connected">("name"); const hostSortOrder = ref<"name" | "last_connected">("name");
/** Narrow viewports: slide-over hosts panel; md+ sidebar stays visible */ /** Narrow viewports: slide-over hosts panel; md+ sidebar stays visible */
@@ -49,6 +99,10 @@ const showFolderForm = ref(false);
const showEditHost = ref(false); const showEditHost = ref(false);
const showAuditLog = ref(false); const showAuditLog = ref(false);
const showApiKeys = ref(false); const showApiKeys = ref(false);
const showSftpPanel = ref(false);
function toggleSftp() {
showSftpPanel.value = !showSftpPanel.value;
}
const auditLoading = ref(false); const auditLoading = ref(false);
const auditErr = ref(""); const auditErr = ref("");
const auditRows = ref<ConnectionAuditRow[]>([]); const auditRows = ref<ConnectionAuditRow[]>([]);
@@ -233,7 +287,8 @@ async function onLoggedIn() {
async function logout() { async function logout() {
await api.logout(); await api.logout();
tabs.value = []; tabs.value = [];
activeTabId.value = null; activePanes.value = [];
allHosts.value = [];
loggedIn.value = false; loggedIn.value = false;
} }
@@ -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 = ""; apiKeysErr.value = "";
try { try {
await api.revokeApiKey(id); await api.deleteApiKey(id);
await refreshApiKeys(); await refreshApiKeys();
} catch (e) { } 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) { function openTab(h: HostRow) {
const id = crypto.randomUUID(); const id = crypto.randomUUID();
tabs.value.push({ id, hostId: h.id, label: h.label }); tabs.value.push({ id, hostId: h.id, label: h.label });
activeTabId.value = id; activePanes.value = [id];
if (window.matchMedia("(max-width: 767px)").matches) { if (window.matchMedia("(max-width: 767px)").matches) {
sidebarOpen.value = false; sidebarOpen.value = false;
} }
@@ -411,8 +466,9 @@ function toggleSidebar() {
function closeTab(id: string) { function closeTab(id: string) {
tabs.value = tabs.value.filter((t) => t.id !== id); 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); await api.deleteHost(id);
allHosts.value = allHosts.value.filter((h) => h.id !== id); allHosts.value = allHosts.value.filter((h) => h.id !== id);
tabs.value = tabs.value.filter((t) => t.hostId !== 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(); await refreshBrowse();
} }
@@ -692,27 +747,50 @@ async function deleteIdentityRow(id: number) {
/> />
</svg> </svg>
</button> </button>
<div class="flex items-center gap-2 truncate">
<span class="truncate text-sm font-semibold text-white">SSH</span>
<a <a
href="https://git.jdbnet.co.uk/jamie/ssh" href="https://git.jdbnet.co.uk/jamie/ssh"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="flex items-center gap-2 truncate" class="truncate text-xs text-slate-400 hover:text-slate-300"
> >
<span class="truncate text-sm font-semibold text-white">JDB-NET SSH</span> {{ appVersion }}
<span class="truncate text-xs text-slate-400 hover:text-slate-300">{{ appVersion }}</span>
</a> </a>
</div> </div>
</div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<button <button
v-if="activePanes.length > 1"
type="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 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" @click="openApiKeys"
> >
API keys API keys
</button> </button>
<button <button
type="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" @click="openAuditLog"
> >
Connection audit Connection audit
@@ -989,13 +1067,19 @@ async function deleteIdentityRow(id: number) {
v-for="t in tabs" v-for="t in tabs"
:key="t.id" :key="t.id"
type="button" 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-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 }} {{ t.label }}
<span <span
@@ -1004,18 +1088,30 @@ async function deleteIdentityRow(id: number) {
>×</span> >×</span>
</button> </button>
</div> </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 <div
v-for="t in tabs" v-for="t in tabs"
v-show="t.id === activeTabId" v-show="activePanes.includes(t.id)"
:key="t.id" :key="t.id"
class="h-full min-h-0" class="flex-1 min-w-0 h-full"
> >
<TabContent <TabContent
:ref="(el) => setTabRef(el, t.id)"
:host-id="t.hostId" :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>
<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> </div>
</template> </template>
</main> </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">{{ apiKeyStatus(row) }}</td>
<td class="px-2 py-2 text-right"> <td class="px-2 py-2 text-right">
<button <button
v-if="row.active"
type="button" type="button"
class="rounded px-2 py-1 text-red-400 hover:bg-slate-800" 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> </button>
</td> </td>
</tr> </tr>
frontend/src/api.ts
+1 -1
View File
@@ -226,7 +226,7 @@ export const api = {
return handle(res); return handle(res);
}, },
async revokeApiKey(id: number): Promise<void> { async deleteApiKey(id: number): Promise<void> {
const res = await fetch(`/api/api-keys/${id}`, { const res = await fetch(`/api/api-keys/${id}`, {
method: "DELETE", method: "DELETE",
credentials: "include", credentials: "include",
frontend/src/components/LoginForm.vue
+1 -1
View File
@@ -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" 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"> <h1 class="font-sans text-2xl font-semibold tracking-tight text-white">
JDB-NET SSH SSH
</h1> </h1>
<p class="mt-1 text-sm text-slate-400"> <p class="mt-1 text-sm text-slate-400">
Sign in to manage connections and open terminals. Sign in to manage connections and open terminals.
frontend/src/components/TabContent.vue
+22 -5
View File
@@ -14,8 +14,21 @@ import SftpPanel from "./SftpPanel.vue";
const props = defineProps<{ const props = defineProps<{
hostId: number; hostId: number;
visible: boolean; 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 termEl = ref<HTMLElement | null>(null);
const status = ref("Connecting…"); const status = ref("Connecting…");
const connId = ref<string | null>(null); const connId = ref<string | null>(null);
@@ -78,12 +91,13 @@ onMounted(async () => {
term = new Terminal({ term = new Terminal({
cursorBlink: true, cursorBlink: true,
fontFamily: "IBM Plex Mono, monospace", fontFamily: "DM Mono, ui-monospace, monospace",
fontSize: 14, fontSize: 14,
theme: { theme: {
background: "#0a0e12", background: "#0d1117",
foreground: "#e2e8f0", foreground: "#e6edf3",
cursor: "#3d9aed", cursor: "#1ebe8a",
selectionBackground: "rgba(30, 190, 138, 0.3)",
}, },
}); });
fit = new FitAddon(); fit = new FitAddon();
@@ -95,6 +109,7 @@ onMounted(async () => {
if (ws && ws.readyState === WebSocket.OPEN) { if (ws && ws.readyState === WebSocket.OPEN) {
ws.send(new TextEncoder().encode(data)); ws.send(new TextEncoder().encode(data));
} }
emit("broadcast-data", data);
}); });
term.onResize(({ cols, rows }) => { term.onResize(({ cols, rows }) => {
@@ -184,9 +199,10 @@ watch(
</div> </div>
<div <div
ref="termEl" 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">
<div <div
v-if="connId" v-if="connId"
class="hidden w-80 shrink-0 flex-col border-l border-slate-800 md:flex" class="hidden w-80 shrink-0 flex-col border-l border-slate-800 md:flex"
@@ -199,5 +215,6 @@ watch(
> >
SFTP unlocks when the shell session is ready. SFTP unlocks when the shell session is ready.
</div> </div>
</template>
</div> </div>
</template> </template>
frontend/tailwind.config.js
+17 -7
View File
@@ -5,18 +5,28 @@ export default {
extend: { extend: {
colors: { colors: {
surface: { surface: {
DEFAULT: "#0f1419", DEFAULT: "#0d1117",
raised: "#151c24", raised: "#161b22",
overlay: "#1a232e", overlay: "#21262d",
}, },
accent: { 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: { 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"],
}, },
}, },
}, },
package-lock.json
Generated
-6
View File
@@ -1,6 +0,0 @@
{
"name": "ssh",
"lockfileVersion": 3,
"requires": true,
"packages": {}
}
run.sh
Executable
+25
View File
@@ -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