Merge pull request 'V1.2.0' (#17) from v1.2.0 into main

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

app.py

@@ -164,6 +164,13 @@ def init_db():
       CONSTRAINT fk_host_tags_tag FOREIGN KEY (tag_id)
         REFERENCES ssh_tags(id) ON DELETE CASCADE
     );
+    CREATE TABLE IF NOT EXISTS ssh_snippets (
+      id INT AUTO_INCREMENT PRIMARY KEY,
+      label VARCHAR(255) NOT NULL,
+      command TEXT NOT NULL,
+      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+      updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+    );
     """
     with db_cursor() as (_, cur):
         for stmt in ddl.split(";"):
@@ -1103,6 +1110,80 @@ def delete_identity(iid: int):
     return jsonify({"ok": True})
 
 
+@app.route("/api/snippets", methods=["GET"])
+@require_auth("read:hosts")
+def list_snippets():
+    with db_cursor() as (_, cur):
+        cur.execute("SELECT id, label, command, created_at, updated_at FROM ssh_snippets ORDER BY label ASC")
+        rows = cur.fetchall()
+    return jsonify({"items": rows})
+
+
+@app.route("/api/snippets", methods=["POST"])
+@require_auth("write:hosts")
+def create_snippet():
+    req = request.get_json()
+    if not req:
+        return jsonify({"error": "invalid json"}), 400
+    label = (req.get("label") or "").strip()
+    command = req.get("command") or ""
+    if not label or not command:
+        return jsonify({"error": "label and command required"}), 400
+    with db_cursor() as (_, cur):
+        cur.execute(
+            "INSERT INTO ssh_snippets (label, command) VALUES (%s, %s)",
+            (label, command),
+        )
+        sid = cur.lastrowid
+    return jsonify({"id": sid}), 201
+
+
+@app.route("/api/snippets/<int:sid>", methods=["PATCH"])
+@require_auth("write:hosts")
+def update_snippet(sid: int):
+    req = request.get_json()
+    if not req:
+        return jsonify({"error": "invalid json"}), 400
+    
+    updates = []
+    args = []
+    if "label" in req:
+        label = (req["label"] or "").strip()
+        if not label:
+            return jsonify({"error": "label cannot be empty"}), 400
+        updates.append("label = %s")
+        args.append(label)
+    if "command" in req:
+        cmd = req["command"] or ""
+        if not cmd:
+            return jsonify({"error": "command cannot be empty"}), 400
+        updates.append("command = %s")
+        args.append(cmd)
+    
+    if not updates:
+        return jsonify({"ok": True})
+    
+    args.append(sid)
+    with db_cursor() as (_, cur):
+        cur.execute(
+            f"UPDATE ssh_snippets SET {', '.join(updates)} WHERE id = %s",
+            tuple(args),
+        )
+        if cur.rowcount == 0:
+            return jsonify({"error": "not found"}), 404
+    return jsonify({"ok": True})
+
+
+@app.route("/api/snippets/<int:sid>", methods=["DELETE"])
+@require_auth("write:hosts")
+def delete_snippet(sid: int):
+    with db_cursor() as (_, cur):
+        cur.execute("DELETE FROM ssh_snippets WHERE id = %s", (sid,))
+        if cur.rowcount == 0:
+            return jsonify({"error": "not found"}), 404
+    return jsonify({"ok": True})
+
+
 def _host_select_sql(extra_where: str = "") -> str:
     return f"""
             SELECT h.id, h.folder_id, h.label, h.hostname, h.port, h.identity_id, h.jump_host_id,

frontend/index.html

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

frontend/src/App.vue

@@ -1,6 +1,6 @@
 <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,
@@ -9,10 +9,12 @@ import {
   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;
@@ -33,8 +35,131 @@ 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 */
@@ -205,6 +330,7 @@ async function refreshData() {
     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;
     }
@@ -236,9 +362,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 {
@@ -403,7 +530,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;
   }
@@ -415,8 +542,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];
   }
 }
 
@@ -641,10 +769,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();
 }
@@ -697,7 +824,7 @@ async function deleteIdentityRow(id: number) {
           </svg>
         </button>
         <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
             href="https://git.jdbnet.co.uk/jamie/ssh"
             target="_blank"
@@ -709,6 +836,72 @@ async function deleteIdentityRow(id: number) {
         </div>
       </div>
       <div class="flex items-center gap-2">
+        <button
+          v-if="activePanes.length > 1"
+          type="button"
+          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"
@@ -1003,13 +1196,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
@@ -1018,24 +1217,42 @@ 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"

frontend/src/api.ts

@@ -188,6 +188,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) {
@@ -327,6 +364,12 @@ export interface IdentityRow {
   auth_type: string;
 }
 
+export interface SnippetRow {
+  id: number;
+  label: string;
+  command: string;
+}
+
 export interface SftpEntry {
   filename: string;
   st_mode: number;

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

@@ -17,6 +17,18 @@ const props = defineProps<{
   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);
@@ -79,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",
-      foreground: "#e2e8f0",
-      cursor: "#3d9aed",
+      background: "#0d1117",
+      foreground: "#e6edf3",
+      cursor: "#1ebe8a",
+      selectionBackground: "rgba(30, 190, 138, 0.3)",
     },
   });
   fit = new FitAddon();
@@ -96,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 }) => {
@@ -185,7 +199,7 @@ 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">

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