Merge pull request 'V1.2.1' (#20) from v1.2.1 into main

Reviewed-on: http://git.jdbnet.co.uk/jamie/ssh/pulls/20

.devcontainer/Dockerfile

@@ -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"]

.dockerignore

@@ -4,3 +4,4 @@ __pycache__
 *.pyc
 .env
 frontend/node_modules
+img/

.env.example

@@ -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

.gitea/workflows/ci.yml

@@ -1,21 +0,0 @@
-name: CI
-
-on:
-  push:
-    branches: [ main ]
-  workflow_dispatch:
-
-jobs:
-  build-and-push:
-    name: Build and Push
-    runs-on: build-htz-01
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Build and push Docker image
-        run: |
-          docker build -t cr.jdbnet.co.uk/public/ssh:latest .
-          docker push cr.jdbnet.co.uk/public/ssh:latest

.gitea/workflows/dev.yml

@@ -0,0 +1,46 @@
+name: CI
+
+on:
+  workflow_dispatch:
+
+jobs:
+  build-and-push:
+    name: Build and Push
+    runs-on: build-htz-01
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Build and push Docker image
+        run: |
+          docker build -t cr.jdbnet.co.uk/public/ssh:dev .
+          docker push cr.jdbnet.co.uk/public/ssh:dev
+
+  sonarqube:
+    name: SonarQube
+    runs-on: build-htz-01
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Create Valid Project Key
+        id: sonar_setup
+        run: |
+          CLEAN_KEY=$(echo "${{ gitea.repository }}" | tr '/' ':')
+          echo "key=$CLEAN_KEY" >> $GITHUB_OUTPUT
+
+      - name: SonarQube Scan
+        uses: sonarsource/sonarqube-scan-action@master
+        continue-on-error: true
+        env:
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+          SONAR_HOST_URL: ${{ secrets.SONAR_HOST_URL }}
+        with:
+          args: >
+            -Dsonar.projectKey=${{ steps.sonar_setup.outputs.key }}
+            -Dsonar.projectName=${{ gitea.repository }}
+            -Dsonar.qualitygate.wait=true

.gitea/workflows/release.yml

@@ -0,0 +1,46 @@
+name: Release
+
+on:
+  pull_request:
+    branches:
+      - main
+    types: [closed]
+
+jobs:
+  release:
+    if: github.event.pull_request.merged == true && startsWith(github.head_ref, 'v')
+    runs-on: build-htz-01
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Extract Version
+        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: Build and push Docker image
+        run: |
+          VERSION=${{ steps.get_version.outputs.VERSION }}
+          docker build -t cr.jdbnet.co.uk/public/ssh:$VERSION \
+                       -t cr.jdbnet.co.uk/public/ssh:latest \
+                       --build-arg VERSION=$VERSION \
+                       .
+          docker push cr.jdbnet.co.uk/public/ssh:$VERSION
+          docker push cr.jdbnet.co.uk/public/ssh:latest
+
+      - name: Create Gitea Release
+        uses: https://gitea.com/actions/gitea-release-action@v1
+        with:
+          tag_name: ${{ steps.get_version.outputs.VERSION }}
+          name: ${{ steps.get_version.outputs.VERSION }}
+          body: ${{ steps.changelog.outputs.changelog }}
+          draft: false
+          prerelease: false

.gitignore

@@ -2,3 +2,4 @@ __pycache__/
 .env
 frontend/node_modules/
 static/dist/
+venv/

Dockerfile

@@ -8,6 +8,8 @@ RUN npm run build
 FROM python:3.14-slim
 LABEL org.opencontainers.image.vendor="JDB-NET"
 WORKDIR /app
+ARG VERSION=unknown
+ENV VERSION=${VERSION}
 COPY requirements.txt .
 RUN pip install --no-cache-dir -r requirements.txt
 COPY . /app

README.md

@@ -9,6 +9,8 @@ A modern, browser-based SSH workspace for managing remote access in one place.
 
 JDB-NET SSH gives you a clean web interface for opening secure shell sessions, organising hosts, and transferring files over SFTP without juggling multiple desktop tools. It is built for day-to-day server access with a fast tabbed terminal experience, reusable connection identities, and straightforward navigation for both occasional and frequent use.
 
+![Screenshot](img/screenshot.png)
+
 ## Features
 
 - Secure sign-in before accessing hosts and sessions
@@ -28,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>"

frontend/index.html

@@ -5,18 +5,18 @@
     <link
       rel="icon"
       type="image/png"
-      href="https://assets.jdbnet.co.uk/ssh.png"
+      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>

frontend/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@xterm/addon-fit": "^0.10.0",
         "@xterm/xterm": "^5.5.0",
+        "lucide-vue-next": "^1.0.0",
         "pinia": "^2.2.6",
         "vue": "^3.5.13"
       },
@@ -1609,6 +1610,14 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
+    "node_modules/lucide-vue-next": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-1.0.0.tgz",
+      "integrity": "sha512-V6SPvx1IHTj/UY+FrIYWV5faISsPSb8BnWSFDxAtezWKvWc9ZZ40PDrdu1/Qb5vg4lHWr1hs1BAMGVGm6V1Xdg==",
+      "peerDependencies": {
+        "vue": ">=3.0.1"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",

frontend/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@xterm/xterm": "^5.5.0",
     "@xterm/addon-fit": "^0.10.0",
+    "lucide-vue-next": "^1.0.0",
     "pinia": "^2.2.6",
     "vue": "^3.5.13"
   },

frontend/src/api.ts

@@ -21,7 +21,7 @@ function browseParams(folderId: number | null, q: string): string {
 }
 
 export const api = {
-  async me(): Promise<{ logged_in: boolean }> {
+  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,12 @@ export const api = {
     return d.items;
   },
 
+  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);
@@ -92,20 +98,29 @@ export const api = {
     await handle(res);
   },
 
+  async updateFolder(
+    id: number,
+    body: {
+      label?: string;
+      parent_id?: number | null;
+    },
+  ): Promise<void> {
+    const res = await fetch(`/api/folders/${id}`, {
+      method: "PATCH",
+      credentials: "include",
+      headers: jsonHeaders,
+      body: JSON.stringify(body),
+    });
+    await handle(res);
+  },
+
   async listIdentities(): Promise<IdentityRow[]> {
     const res = await fetch("/api/identities", { credentials: "include" });
     const d = await handle<{ items: IdentityRow[] }>(res);
     return d.items;
   },
 
-  async createHost(body: {
-    label: string;
-    hostname: string;
-    port?: number;
-    identity_id: number;
-    folder_id?: number | null;
-    jump_host_id?: number | null;
-  }): Promise<{ id: number }> {
+  async createHost(body: Record<string, unknown>): Promise<{ id: number }> {
     const res = await fetch("/api/hosts", {
       method: "POST",
       credentials: "include",
@@ -117,14 +132,7 @@ export const api = {
 
   async patchHost(
     id: number,
-    body: Partial<{
-      label: string;
-      hostname: string;
-      port: number;
-      identity_id: number;
-      folder_id: number | null;
-      jump_host_id: number | null;
-    }>,
+    body: Record<string, unknown>,
   ): Promise<void> {
     const res = await fetch(`/api/hosts/${id}`, {
       method: "PATCH",
@@ -153,6 +161,25 @@ export const api = {
     return handle(res);
   },
 
+  async updateIdentity(
+    id: number,
+    body: Partial<{
+      label: string;
+      ssh_username: string;
+      password: string;
+      private_key: string;
+      key_passphrase: string;
+    }>,
+  ): Promise<void> {
+    const res = await fetch(`/api/identities/${id}`, {
+      method: "PATCH",
+      credentials: "include",
+      headers: jsonHeaders,
+      body: JSON.stringify(body),
+    });
+    await handle(res);
+  },
+
   async deleteIdentity(id: number): Promise<void> {
     const res = await fetch(`/api/identities/${id}`, {
       method: "DELETE",
@@ -161,8 +188,48 @@ export const api = {
     await handle(res);
   },
 
-  async listConnectionAudit(limit = 200): Promise<ConnectionAuditRow[]> {
+  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) {
+      q.set("days_back", String(daysBack));
+    }
     const res = await fetch(`/api/audit/connections?${q.toString()}`, {
       credentials: "include",
     });
@@ -170,6 +237,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,
@@ -217,16 +318,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 {
@@ -253,6 +379,8 @@ export interface HostRow {
   identity_label: string;
   identity_auth_type: string;
   folder_label?: string | null;
+  last_connected_at?: string | null;
+  tags?: string[];
 }
 
 export interface IdentityRow {
@@ -261,6 +389,12 @@ export interface IdentityRow {
   auth_type: string;
 }
 
+export interface SnippetRow {
+  id: number;
+  label: string;
+  command: string;
+}
+
 export interface SftpEntry {
   filename: string;
   st_mode: number;
@@ -279,3 +413,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;
+}

frontend/src/components/LoginForm.vue

@@ -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.

frontend/src/components/SftpPanel.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
+import { File, Folder } from "lucide-vue-next";
 import { api, type SftpEntry } from "@/api";
 
 const props = defineProps<{ connId: string }>();
@@ -10,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;
@@ -65,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;
   }
 }
 
@@ -185,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"
@@ -198,7 +217,19 @@ function fmtSize(n: number): string {
             :class="isDir(e.st_mode) ? 'text-accent' : 'text-slate-200'"
             @click="enter(e)"
           >
-            {{ isDir(e.st_mode) ? "📁" : "📄" }} {{ e.filename }}
+            <span class="inline-flex items-center gap-1.5">
+              <Folder
+                v-if="isDir(e.st_mode)"
+                class="h-3.5 w-3.5 shrink-0"
+                aria-hidden="true"
+              />
+              <File
+                v-else
+                class="h-3.5 w-3.5 shrink-0"
+                aria-hidden="true"
+              />
+              <span>{{ e.filename }}</span>
+            </span>
           </button>
           <span class="shrink-0 text-[10px] text-slate-500">{{
             isDir(e.st_mode) ? "" : fmtSize(e.st_size)

frontend/src/components/SnippetForm.vue

@@ -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>

frontend/src/components/TabContent.vue

@@ -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);
@@ -24,6 +37,7 @@ let ws: WebSocket | null = null;
 let term: Terminal | null = null;
 let fit: FitAddon | null = null;
 let ro: ResizeObserver | null = null;
+let visibilityHandler: (() => void) | null = null;
 
 function wsUrl(hostId: number): string {
   const proto = location.protocol === "https:" ? "wss:" : "ws:";
@@ -36,6 +50,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 {
@@ -46,18 +66,38 @@ function fitAndResize() {
   }
 }
 
+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;
+    }
+    if (o.type === "keepalive" || o.type === "pong") {
+      return true;
+    }
+  } catch {
+    /* not JSON control traffic */
+  }
+  return false;
+}
+
 onMounted(async () => {
   await nextTick();
   if (!termEl.value) return;
 
   term = new Terminal({
     cursorBlink: true,
-    fontFamily: "IBM Plex Mono, monospace",
+    fontFamily: "DM Mono, ui-monospace, monospace",
     fontSize: 14,
     theme: {
-      background: "#0a0e12",
-      foreground: "#e2e8f0",
-      cursor: "#3d9aed",
+      background: "#0d1117",
+      foreground: "#e6edf3",
+      cursor: "#1ebe8a",
+      selectionBackground: "rgba(30, 190, 138, 0.3)",
     },
   });
   fit = new FitAddon();
@@ -69,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 }) => {
@@ -91,18 +132,7 @@ onMounted(async () => {
   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;
     }
@@ -121,9 +151,21 @@ onMounted(async () => {
       status.value = "Session ended";
     }
   };
+
+  visibilityHandler = () => {
+    if (document.visibilityState === "visible") {
+      sendPing();
+      fitAndResize();
+    }
+  };
+  document.addEventListener("visibilitychange", visibilityHandler);
 });
 
 onUnmounted(() => {
+  if (visibilityHandler) {
+    document.removeEventListener("visibilitychange", visibilityHandler);
+    visibilityHandler = null;
+  }
   ro?.disconnect();
   ro = null;
   ws?.close();
@@ -140,6 +182,7 @@ watch(
       await nextTick();
       fitAndResize();
       term?.focus();
+      sendPing();
     }
   },
 );
@@ -156,9 +199,10 @@ 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>
+    <template v-if="showSftp">
       <div
         v-if="connId"
         class="hidden w-80 shrink-0 flex-col border-l border-slate-800 md:flex"
@@ -171,5 +215,6 @@ watch(
       >
         SFTP unlocks when the shell session is ready.
       </div>
+    </template>
   </div>
 </template>

frontend/src/components/TagInput.vue

@@ -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>

frontend/tailwind.config.js

@@ -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"],
       },
     },
   },

run.sh

@@ -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