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

Compare commits

base: jamie/ssh:v1.1.1
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:053c9e8431489c3f3ef017b5c390a24790a07f90
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

4 Commits
v1.1.1 ... 053c9e8431

Author SHA1 Message Date
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
6 changed files with 128 additions and 40 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/
frontend/index.html
+1 -1
View File
@@ -16,7 +16,7 @@
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=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&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
+86 -23
View File
@@ -33,8 +33,42 @@ 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);
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 +83,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[]>([]);
@@ -232,9 +270,10 @@ async function onLoggedIn() {
async function logout() { async function logout() {
await api.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 { function fmtDate(ts: string | null): string {
@@ -399,7 +438,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 +450,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 +677,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();
} }
@@ -693,7 +732,7 @@ async function deleteIdentityRow(id: number) {
</svg> </svg>
</button> </button>
<div class="flex items-center gap-2 truncate"> <div class="flex items-center gap-2 truncate">
<span class="truncate text-sm font-semibold text-white">JDB-NET SSH</span> <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"
@@ -705,6 +744,14 @@ async function deleteIdentityRow(id: number) {
</div> </div>
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<button
type="button"
class="hidden rounded-lg px-3 py-1.5 text-xs md:inline-flex"
:class="showSftpPanel ? 'bg-slate-800 text-white' : 'text-slate-400 hover:bg-slate-800 hover:text-white'"
@click="toggleSftp"
>
SFTP
</button>
<button <button
type="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" class="hidden rounded-lg px-3 py-1.5 text-xs text-slate-400 hover:bg-slate-800 hover:text-white md:inline-flex"
@@ -991,13 +1038,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
@@ -1006,18 +1059,28 @@ 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
:host-id="t.hostId" :host-id="t.hostId"
:visible="t.id === activeTabId" :visible="activePanes.includes(t.id)"
:show-sftp="showSftpPanel"
/> />
</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>
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
+15 -12
View File
@@ -14,6 +14,7 @@ import SftpPanel from "./SftpPanel.vue";
const props = defineProps<{ const props = defineProps<{
hostId: number; hostId: number;
visible: boolean; visible: boolean;
showSftp: boolean;
}>(); }>();
const termEl = ref<HTMLElement | null>(null); const termEl = ref<HTMLElement | null>(null);
@@ -187,17 +188,19 @@ watch(
class="h-full min-h-[320px] rounded-lg border border-slate-800 bg-[#0a0e12] p-1" class="h-full min-h-[320px] rounded-lg border border-slate-800 bg-[#0a0e12] p-1"
/> />
</div> </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> </div>
</template> </template>
run.sh
+23 -2
View File
@@ -1,4 +1,25 @@
#!/bin/bash #!/bin/bash
cd frontend && npm run build && cd .. if [ ! -d "venv" ]; then
gunicorn --bind 0.0.0.0:5000 --workers 1 --worker-class geventwebsocket.gunicorn.workers.GeventWebSocketWorker app:app --log-level info 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