sshler 0.3.2__py3-none-any.whl

sshler/static/base.js

@@ -0,0 +1,305 @@
+(function () {
+  const FAVICONS = {
+    default: "/static/favicon.svg",
+    terminal: "/static/favicon-terminal.svg",
+  };
+  const LANG_KEY = "sshler-language";
+
+  const I18N = {
+    en: {
+      "nav.boxes": "Boxes",
+      "nav.addBox": "Add Box",
+      "nav.docs": "Docs",
+    },
+    ja: {
+      "nav.boxes": "ボックス",
+      "nav.addBox": "ボックスを追加",
+      "nav.docs": "ドキュメント",
+    },
+  };
+
+  function readToken() {
+    const tokenMeta = document.querySelector('meta[name="sshler-token"]');
+    const token = tokenMeta ? tokenMeta.getAttribute("content") : null;
+    return token || "";
+  }
+
+  function applyToken(token) {
+    if (!token) {
+      return;
+    }
+    window.sshlerToken = token;
+
+    // Configure htmx headers immediately if available
+    if (window.htmx) {
+      window.htmx.config.headers = window.htmx.config.headers || {};
+      window.htmx.config.headers["X-SSHLER-TOKEN"] = token;
+    }
+
+    // Also set up event listener to add header to all htmx requests
+    document.body.addEventListener("htmx:configRequest", (event) => {
+      event.detail.headers["X-SSHLER-TOKEN"] = token;
+    });
+  }
+
+  function setFavicon(mode) {
+    const faviconLink = document.getElementById("favicon-link");
+    if (!faviconLink) {
+      return;
+    }
+    const target = mode === "terminal" ? FAVICONS.terminal : FAVICONS.default;
+    if (faviconLink.getAttribute("href") !== target) {
+      faviconLink.setAttribute("href", target);
+    }
+  }
+
+  function showToast(message, type) {
+    if (!message) {
+      return;
+    }
+    const container = document.getElementById("toast-container");
+    if (!container) {
+      return;
+    }
+    const toast = document.createElement("div");
+    toast.className = `toast ${type || "info"}`;
+    toast.textContent = message;
+    container.appendChild(toast);
+    requestAnimationFrame(() => toast.classList.add("visible"));
+    setTimeout(() => {
+      toast.classList.remove("visible");
+      toast.addEventListener(
+        "transitionend",
+        () => toast.remove(),
+        { once: true },
+      );
+    }, 3600);
+  }
+
+  function getStoredLang() {
+    try {
+      return localStorage.getItem(LANG_KEY) || "en";
+    } catch (err) {
+      return "en";
+    }
+  }
+
+  function setStoredLang(lang) {
+    try {
+      localStorage.setItem(LANG_KEY, lang);
+    } catch (err) {
+      // Ignore if localStorage is unavailable
+    }
+  }
+
+  function translate(lang) {
+    const elements = document.querySelectorAll("[data-i18n]");
+    elements.forEach((el) => {
+      const key = el.dataset.i18n;
+      const text = I18N[lang]?.[key];
+      if (text) {
+        el.textContent = text;
+      }
+    });
+  }
+
+  function updateLangToggle(lang) {
+    const langToggle = document.getElementById("lang-toggle");
+    if (!langToggle) {
+      return;
+    }
+    const spans = langToggle.querySelectorAll("span");
+    spans.forEach((span) => {
+      if (span.dataset.lang === lang) {
+        span.classList.remove("hidden");
+      } else {
+        span.classList.add("hidden");
+      }
+    });
+  }
+
+  function switchLanguage(newLang) {
+    setStoredLang(newLang);
+    updateLangToggle(newLang);
+    translate(newLang);
+
+    // Update docs modal if it's open
+    const docsModal = document.querySelector("#modal-container .modal");
+    if (docsModal) {
+      switchDocsLanguage(newLang);
+    }
+  }
+
+  function switchDocsLanguage(lang) {
+    const modal = document.querySelector("#modal-container #docs-modal");
+    if (!modal) return;
+
+    const contents = modal.querySelectorAll(".lang-content");
+    const buttons = modal.querySelectorAll(".lang-btn");
+
+    contents.forEach((el) => {
+      if (el.dataset.lang === lang) {
+        el.classList.remove("hidden");
+      } else {
+        el.classList.add("hidden");
+      }
+    });
+
+    buttons.forEach((btn) => {
+      if (btn.dataset.lang === lang) {
+        btn.classList.add("active");
+      } else {
+        btn.classList.remove("active");
+      }
+    });
+  }
+
+  document.addEventListener("DOMContentLoaded", () => {
+    const token = readToken();
+    applyToken(token);
+    setFavicon("default");
+
+    // Initialize language toggle
+    const currentLang = getStoredLang();
+    updateLangToggle(currentLang);
+    translate(currentLang);
+
+    const langToggle = document.getElementById("lang-toggle");
+    if (langToggle) {
+      langToggle.addEventListener("click", () => {
+        const current = getStoredLang();
+        const newLang = current === "en" ? "ja" : "en";
+        switchLanguage(newLang);
+      });
+    }
+
+    // Docs button handler
+    const docsBtn = document.getElementById("docs-btn");
+    if (docsBtn) {
+      docsBtn.addEventListener("click", async () => {
+        const modalContainer = document.getElementById("modal-container");
+        if (!modalContainer) return;
+
+        try {
+          const response = await fetch("/docs");
+          if (!response.ok) throw new Error("Failed to load docs");
+          const html = await response.text();
+          modalContainer.innerHTML = html;
+
+          const modal = modalContainer.querySelector("#docs-modal");
+          if (!modal) return;
+
+          // Show modal
+          modal.classList.add("visible");
+
+          // Set initial language
+          switchDocsLanguage(currentLang);
+
+          // Language switcher in modal
+          const langButtons = modal.querySelectorAll(".lang-btn");
+          langButtons.forEach((btn) => {
+            btn.addEventListener("click", () => {
+              const newLang = btn.dataset.lang;
+              switchDocsLanguage(newLang);
+              setStoredLang(newLang);
+              updateLangToggle(newLang);
+              translate(newLang);
+            });
+          });
+
+          // Close button
+          const closeBtn = modal.querySelector(".modal-close");
+          if (closeBtn) {
+            closeBtn.addEventListener("click", () => {
+              modal.classList.remove("visible");
+              setTimeout(() => {
+                modalContainer.innerHTML = "";
+              }, 300);
+            });
+          }
+
+          // Close on outside click
+          modal.addEventListener("click", (event) => {
+            if (event.target === modal) {
+              modal.classList.remove("visible");
+              setTimeout(() => {
+                modalContainer.innerHTML = "";
+              }, 300);
+            }
+          });
+
+          // Close on Escape key
+          const escHandler = (event) => {
+            if (event.key === "Escape") {
+              modal.classList.remove("visible");
+              setTimeout(() => {
+                modalContainer.innerHTML = "";
+              }, 300);
+              document.removeEventListener("keydown", escHandler);
+            }
+          };
+          document.addEventListener("keydown", escHandler);
+        } catch (err) {
+          console.error("Failed to load docs:", err);
+          showToast("Failed to load documentation", "error");
+        }
+      });
+    }
+
+    document.body.addEventListener("dir-action", (event) => {
+      const payload = event.detail && event.detail.value;
+      if (!payload) {
+        return;
+      }
+      const status = payload.status === "error" ? "error" : "success";
+      showToast(payload.message, status);
+    });
+
+    // Event delegation for delete buttons
+    document.body.addEventListener("click", (event) => {
+      const deleteBtn = event.target.closest(".delete-file-btn");
+      if (!deleteBtn) {
+        return;
+      }
+      event.preventDefault();
+      const boxName = deleteBtn.dataset.box;
+      const filePath = deleteBtn.dataset.path;
+      const directory = deleteBtn.dataset.directory;
+      const target = deleteBtn.dataset.target;
+      const fileName = deleteBtn.dataset.filename;
+      deleteFile(boxName, filePath, directory, target, fileName);
+    });
+  });
+
+  function deleteFile(boxName, filePath, directory, target, fileName) {
+    if (!confirm(`Delete ${fileName}?`)) {
+      return;
+    }
+
+    const token = window.sshlerToken || readToken();
+    const xhr = new XMLHttpRequest();
+    xhr.open("POST", `/box/${boxName}/delete`);
+    xhr.setRequestHeader("X-SSHLER-TOKEN", token);
+    xhr.onload = function () {
+      const browserEl = document.getElementById(target);
+      if (browserEl && xhr.status === 200) {
+        browserEl.innerHTML = xhr.responseText;
+      } else {
+        showToast("Failed to delete file", "error");
+      }
+    };
+    xhr.onerror = function () {
+      showToast("Failed to delete file", "error");
+    };
+
+    const formData = new FormData();
+    formData.append("path", filePath);
+    formData.append("directory", directory);
+    formData.append("target", target);
+    xhr.send(formData);
+  }
+
+  window.sshlerShowToast = showToast;
+  window.sshlerSetFavicon = setFavicon;
+  window.sshlerDeleteFile = deleteFile;
+})();

sshler/static/favicon-terminal.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="6" fill="#0f0e0d"/>
+  <rect x="4" y="4" width="56" height="56" rx="4"
+        stroke="#e7c65f" stroke-width="3" fill="none"/>
+  <path d="M18 20l14 12-14 12" stroke="#d13f2c" stroke-width="5"
+        stroke-linecap="round" stroke-linejoin="round"/>
+  <rect x="38" y="40" width="10" height="4" fill="#d13f2c" rx="1"/>
+</svg>

sshler/static/favicon.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="6" fill="#0f0e0d"/>
+  <rect x="4" y="4" width="56" height="56" rx="4"
+        stroke="#d13f2c" stroke-width="3" fill="none"/>
+  <path d="M18 20l14 12-14 12" stroke="#e7c65f" stroke-width="5"
+        stroke-linecap="round" stroke-linejoin="round"/>
+  <rect x="38" y="40" width="10" height="4" fill="#e7c65f" rx="1"/>
+</svg>

sshler/static/file-edit.js

@@ -0,0 +1,81 @@
+(function () {
+  const MODE_MAP = {
+    ".py": "python",
+    ".js": "javascript",
+    ".ts": "javascript",
+    ".json": "application/json",
+    ".yaml": "yaml",
+    ".yml": "yaml",
+    ".md": "markdown",
+    ".sh": "shell",
+    ".bash": "shell",
+    ".css": "css",
+    ".html": "xml",
+  };
+
+  function resolveMode(path) {
+    const idx = path.lastIndexOf(".");
+    if (idx === -1) {
+      return "plaintext";
+    }
+    const ext = path.slice(idx).toLowerCase();
+    return MODE_MAP[ext] || "plaintext";
+  }
+
+  async function saveFile(cm, path, saveStatus) {
+    const payload = {
+      path,
+      content: cm.getValue(),
+    };
+    saveStatus.textContent = "Saving...";
+    try {
+      const response = await fetch(
+        window.location.pathname + window.location.search,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "X-SSHLER-TOKEN": window.sshlerToken || "",
+          },
+          body: JSON.stringify(payload),
+        },
+      );
+      if (!response.ok) {
+        const data = await response.json().catch(() => ({}));
+        throw new Error(data.detail || response.statusText);
+      }
+      saveStatus.textContent = "Saved ✓";
+      // Redirect to preview mode after successful save
+      setTimeout(() => {
+        const previewUrl = window.location.pathname.replace('/edit', '/cat') + window.location.search;
+        window.location.href = previewUrl;
+      }, 500);
+    } catch (error) {
+      console.error(error);
+      saveStatus.textContent = `Save failed: ${error.message}`;
+    }
+  }
+
+  document.addEventListener("DOMContentLoaded", () => {
+    const textarea = document.getElementById("editor");
+    if (!textarea) {
+      return;
+    }
+    const saveStatus = document.getElementById("save-status");
+    const path = textarea.dataset.path || "";
+    const cm = CodeMirror.fromTextArea(textarea, {
+      mode: resolveMode(path),
+      theme: "default",
+      lineNumbers: true,
+      lineWrapping: true,
+    });
+
+    const saveBtn = document.getElementById("save-btn");
+    if (saveBtn) {
+      saveBtn.addEventListener("click", (event) => {
+        event.preventDefault();
+        saveFile(cm, path, saveStatus);
+      });
+    }
+  });
+})();

sshler/static/file-view.js

@@ -0,0 +1,60 @@
+(function () {
+  function getToken() {
+    if (window.sshlerToken) {
+      return window.sshlerToken;
+    }
+    const tokenMeta = document.querySelector('meta[name="sshler-token"]');
+    return tokenMeta ? tokenMeta.getAttribute("content") || "" : "";
+  }
+
+  document.addEventListener("DOMContentLoaded", () => {
+    const backBtn = document.getElementById("back-btn");
+    const deleteBtn = document.getElementById("delete-btn");
+
+    if (backBtn) {
+      backBtn.addEventListener("click", (event) => {
+        event.preventDefault();
+        window.close();
+      });
+    }
+
+    if (deleteBtn) {
+      deleteBtn.addEventListener("click", async (event) => {
+        event.preventDefault();
+        const fileName = deleteBtn.dataset.filename || "this file";
+
+        if (!confirm(`Delete ${fileName}?`)) {
+          return;
+        }
+
+        const boxName = deleteBtn.dataset.box;
+        const filePath = deleteBtn.dataset.path;
+        const parentDir = deleteBtn.dataset.parentdir;
+
+        try {
+          const response = await fetch(`/box/${boxName}/delete`, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/x-www-form-urlencoded",
+              "X-SSHLER-TOKEN": getToken(),
+            },
+            body: new URLSearchParams({
+              path: filePath,
+              directory: parentDir,
+              target: "browser",
+            }),
+          });
+
+          if (response.ok) {
+            window.close();
+          } else {
+            alert("Failed to delete file");
+          }
+        } catch (err) {
+          console.error("Delete failed:", err);
+          alert("Failed to delete file");
+        }
+      });
+    }
+  });
+})();

sshler/static/style.css

@@ -0,0 +1,158 @@
+
+:root {
+  --bg: #0f1115;
+  --fg: #e6e6e6;
+  --muted: #9aa1a9;
+  --accent: #6aa6ff;
+  --card: #151823;
+  --btn: #1e2230;
+  --danger: #ff6a6a;
+  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
+}
+* { box-sizing: border-box; }
+body { margin: 0; font-family: var(--sans); background: var(--bg); color: var(--fg); }
+body.term-view { overflow: hidden; display: flex; flex-direction: column; height: 100vh; }
+body.term-view .container { width: 100%; max-width: none; margin: 0; padding: 16px 24px; flex: 1; display: flex; flex-direction: column; min-height: 0; }
+.hidden { display: none !important; }
+#toast-container { position: fixed; top: 18px; right: 18px; display: flex; flex-direction: column; gap: 10px; z-index: 2000; pointer-events: none; }
+.toast { background: #11141f; border-left: 3px solid #2f3649; border-radius: 8px; padding: 10px 14px; color: var(--fg); min-width: 200px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); opacity: 0; transform: translateY(-8px); transition: opacity 0.22s ease, transform 0.22s ease; pointer-events: auto; }
+.toast.success { border-left-color: #3ba86a; }
+.toast.error { border-left-color: var(--danger); color: #ffb2b2; }
+.toast.visible { opacity: 1; transform: translateY(0); }
+.topbar { display: flex; gap: 12px; padding: 8px 14px; background: #0b0d12; border-bottom: 1px solid #222635; align-items: center; flex-shrink: 0; }
+.brand { color: var(--fg); text-decoration: none; font-weight: 700;}
+.version-pill { color: var(--muted); border: 1px solid #2a2f3f; border-radius: 999px; padding: 2px 10px; font-size: 0.8em; }
+.link, a { color: var(--muted); text-decoration: none; }
+.link:hover, a:hover { color: var(--accent); }
+.link:visited, a:visited { color: var(--muted); }
+.spacer { flex: 1; }
+.docs-btn { background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; font-size: inherit; }
+.lang-toggle { background: transparent; border: 1px solid #2a2f3f; border-radius: 6px; color: var(--muted); padding: 4px 10px; cursor: pointer; font-size: 0.85em; font-weight: 600; }
+.lang-toggle:hover { border-color: var(--accent); color: var(--accent); }
+.container { padding: 20px; max-width: 1100px; margin: 0 auto; }
+
+h1, h2 { margin: 8px 0 12px; }
+.mono { font-family: var(--mono); font-size: 0.95em; }
+.muted { color: var(--muted); }
+.small { font-size: 0.9em; }
+.tiny { font-size: 0.75em; }
+
+.cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
+.card { background: var(--card); border: 1px solid #222635; border-radius: 10px; padding: 12px; }
+.card.ssh-card { border-color: #335dff; }
+.card.custom-card { border-color: #2a2f3f; }
+.card.local-card { border-color: #3ba86a; background: #14231b; }
+.card .title { font-weight: 700; margin-bottom: 6px; }
+.card .actions { display: flex; gap: 8px; margin-top: 10px; }
+.btn { background: var(--btn); color: var(--fg); border: 1px solid #30364a; padding: 6px 10px; border-radius: 8px; text-decoration: none; cursor: pointer;}
+.btn.secondary { background: transparent; }
+.btn.small { padding: 4px 8px; font-size: 0.9em; }
+.btn.danger { background: #3a1e22; border-color: #8b2a2a; color: #ffb2b2; }
+.alert { padding: 8px 10px; border-radius: 6px; margin-bottom: 12px; }
+.alert.error { background: #3a1e22; border: 1px solid #8b2a2a; color: #ffb2b2; }
+
+.grid { display: grid; grid-template-columns: 280px 1fr; gap: 16px; }
+.dir-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
+.dir-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
+.dir-tool { display: flex; gap: 6px; align-items: center; padding: 6px 8px; background: #11141f; border: 1px solid #2a2f3f; border-radius: 8px; }
+.dir-tool input[type="text"], .dir-tool input[type="file"] { background: #0d101a; border: 1px solid #2a2f3f; border-radius: 6px; padding: 6px 8px; color: var(--fg); font-family: var(--sans); font-size: 0.9em; }
+.dir-tool input[type="text"] { min-width: 160px; }
+.dir { width: 100%; border-collapse: collapse; }
+.dir th, .dir td { border-bottom: 1px solid #2a2f3f; padding: 6px 8px; vertical-align: middle; }
+.dir-table { font-size: 0.9em; }
+.dir-table thead th { text-align: left; color: var(--muted); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; }
+.dir-table tbody tr:hover { background: #161a24; }
+.actions-col { width: 220px; text-align: right; }
+.fs-row { line-height: 1.3; }
+.fs-name { font-family: var(--mono); max-width: 100%; }
+.fs-entry { display: inline-flex; align-items: center; gap: 8px; color: var(--fg); text-decoration: none; max-width: 100%; }
+.fs-entry.folder, .fs-entry.up { cursor: pointer; }
+.fs-entry.folder .fs-label { font-weight: 700; }
+.fs-entry:hover .fs-label { color: var(--accent); }
+.fs-entry.up { color: var(--muted); }
+.fs-icon { width: 14px; height: 12px; border-radius: 3px; position: relative; flex-shrink: 0; }
+.fs-icon.folder { background: #242a3a; border: 1px solid #2f3649; }
+.fs-icon.folder::before { content: ''; position: absolute; top: -3px; left: 1px; width: 8px; height: 4px; background: #31384d; border: 1px solid #2f3649; border-bottom: none; border-radius: 3px 3px 0 0; }
+.fs-icon.file { border: 1px solid #2f3649; background: #0f1115; }
+.fs-icon.file::after { content: ''; position: absolute; top: -1px; right: -1px; width: 6px; height: 6px; border-top: 1px solid #2f3649; border-right: 1px solid #2f3649; background: #0f1115; border-radius: 0 3px 0 0; }
+.fs-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fs-type { color: var(--muted); font-size: 0.8em; }
+.fs-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
+.action-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 4px 8px; border-radius: 6px; border: 1px solid #2a2f3f; background: #191d2a; color: var(--fg); font-size: 0.85em; text-decoration: none; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; }
+.action-btn:hover { border-color: var(--accent); color: var(--accent); }
+.action-btn:focus { outline: none; box-shadow: 0 0 0 2px rgba(106, 166, 255, 0.25); }
+.action-btn.danger-btn { border-color: #8b2a2a; color: #ffb2b2; }
+.action-btn.danger-btn:hover { border-color: var(--danger); color: var(--danger); background: #3a1e22; }
+
+.icon-btn { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 1.1em; padding: 2px 4px; border-radius: 4px; }
+.icon-btn:hover { color: var(--accent); }
+.icon-btn.star.active { color: #f5c542; }
+
+.favlist ul { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; }
+.favlist li { display: flex; align-items: center; gap: 8px; }
+.favorite-toggle { cursor: pointer; }
+.favorite-toggle::marker { content: ''; }
+.favorite-toggle { padding: 4px 8px; border: 1px solid #2a2f3f; border-radius: 6px; display: inline-flex; align-items: center; gap: 6px; background: #11141f; }
+.favorite-toggle::after { content: '▼'; font-size: 0.7em; }
+details[open] .favorite-toggle::after { content: '▲'; }
+
+.term { height: 100%; border: 1px solid #2a2f3f; border-radius: 8px; padding: 6px; }
+.term-wrapper .term { height: auto; }
+
+.form { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
+.form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.95em; }
+.form input, .form textarea { background: #11141f; border: 1px solid #2a2f3f; border-radius: 6px; padding: 6px 8px; color: var(--fg); font-family: var(--sans); }
+.form textarea { min-height: 80px; resize: vertical; }
+.form .checkbox { flex-direction: row; align-items: center; gap: 8px; }
+.form input[type="checkbox"] { width: auto; }
+.form-actions { display: flex; gap: 10px; }
+
+.file-view { display: flex; flex-direction: column; gap: 12px; }
+.file-view__header { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
+.file-view__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
+.file-view__content { background: #11141f; border: 1px solid #2a2f3f; border-radius: 8px; padding: 12px; overflow: auto; max-height: 70vh; white-space: pre-wrap; word-break: break-word; }
+.image-preview { background: #0d101a; border: 1px solid #2a2f3f; border-radius: 8px; padding: 12px; display: flex; justify-content: center; align-items: center; max-height: 70vh; overflow: auto; }
+.image-preview img { max-width: 100%; max-height: 100%; border-radius: 6px; }
+.file-edit { display: flex; flex-direction: column; gap: 12px; height: calc(100vh - 70px); }
+.file-edit__textarea { min-height: 60vh; }
+.CodeMirror { flex: 1; border: 1px solid #2a2f3f; border-radius: 8px; font-size: 0.95em; background: #11141f; color: var(--fg); }
+.CodeMirror-gutters { background: #0d101a; border-right: 1px solid #2a2f3f; }
+.CodeMirror-cursor { border-left: 1px solid #6aa6ff; }
+.file-edit .actions { display: flex; gap: 8px; }
+
+.term-page { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
+.term-header { display: flex; align-items: stretch; justify-content: center; }
+.term-banner { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 14px 20px; border: 1px solid #335dff; border-radius: 12px; background: #101320; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24); }
+.term-banner__host { order: 0; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.28em; color: #6aa6ff; }
+.term-banner__primary { order: 1; font-size: 1.4rem; font-weight: 700; color: var(--fg); min-width: 0; }
+.term-banner__meta { order: 2; font-size: 0.95rem; color: #f0d68a; min-width: 0; }
+.term-banner__path { order: 3; flex: 1 1 240px; min-width: 0; font-size: 0.8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.term-banner__actions { order: 4; margin-left: auto; }
+.term-banner__actions .btn { white-space: nowrap; }
+.tmux-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
+.tmux-tab { background: #191d2a; border: 1px solid #2a2f3f; border-radius: 6px; padding: 4px 8px; font-size: 0.85em; color: var(--muted); cursor: pointer; }
+.tmux-tab.active { background: #335dff1c; border-color: #335dff; color: var(--fg); }
+.tmux-separator { color: #2a2f3f; padding: 0 4px; }
+.term-shell { flex: 1; display: flex; gap: 10px; align-items: stretch; min-height: 0; }
+.term-toolbar { display: flex; flex-direction: column; gap: 8px; min-width: 160px; }
+.term-toolbar .btn { width: 160px; text-align: left; }
+.term-wrapper { flex: 1; display: flex; min-width: 0; min-height: 0; }
+.term-wrapper #term { flex: 1; border: 1px solid #2a2f3f; border-radius: 8px; padding: 0; height: 100%; }
+.file-panel { flex: 1; border: 1px solid #2a2f3f; border-radius: 8px; background: #11141f; padding: 10px; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
+.file-panel.hidden { display: none; }
+.file-browser-content { flex: 1; overflow: auto; min-height: 0; }
+
+.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: none; align-items: center; justify-content: center; z-index: 3000; }
+.modal.visible { display: flex; }
+.modal-content { background: var(--card); border: 1px solid #335dff; border-radius: 12px; max-width: 700px; width: 90%; max-height: 80vh; overflow: auto; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4); }
+.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid #2a2f3f; gap: 16px; flex-wrap: wrap; }
+.modal-header h2 { margin: 0; }
+.modal-actions { display: flex; gap: 8px; align-items: center; }
+.modal-close { background: transparent; border: none; color: var(--muted); font-size: 2em; cursor: pointer; line-height: 1; padding: 0 8px; }
+.modal-close:hover { color: var(--danger); }
+.modal-body { padding: 20px; }
+.lang-btn { background: var(--btn); color: var(--fg); border: 1px solid #30364a; padding: 4px 12px; border-radius: 6px; cursor: pointer; font-size: 0.9em; }
+.lang-btn:hover { border-color: var(--accent); color: var(--accent); }
+.lang-btn.active { background: #335dff1c; border-color: #335dff; color: var(--accent); }
+.lang-content.hidden { display: none; }