sshler 0.3.2__py3-none-any.whl

sshler/static/term.js

@@ -0,0 +1,304 @@
+(function () {
+  function getToken() {
+    if (window.sshlerToken) {
+      return window.sshlerToken;
+    }
+    const tokenMeta = document.querySelector('meta[name="sshler-token"]');
+    return tokenMeta ? tokenMeta.getAttribute("content") || "" : "";
+  }
+
+  function setupCommandButtons(ws) {
+    const commandMap = {
+      "scroll-mode": { type: "send", payload: "\u0002[" },
+      escape: { type: "send", payload: "\u001b" },
+      "ctrl-t": { type: "send", payload: "\u0014" },
+      "ctrl-c": { type: "send", payload: "\u0003" },
+      "split-h": { type: "send", payload: "\u0002%" },
+      "split-v": { type: "send", payload: "\u0002\"" },
+      "new-window": { type: "send", payload: "\u0002c" },
+      "rename-window": { type: "operation", op: "rename-window" },
+      "kill-pane": { type: "send", payload: "\u0002x" },
+      next: { type: "send", payload: "\u0002n" },
+      prev: { type: "send", payload: "\u0002p" },
+      detach: { type: "send", payload: "\u0002d" },
+    };
+
+    document
+      .querySelectorAll(".term-toolbar [data-command]")
+      .forEach((button) => {
+        button.addEventListener("click", () => {
+          const command = button.dataset.command;
+          const config = commandMap[command];
+          if (!config) {
+            return;
+          }
+          if (config.type === "send") {
+            ws.send(
+              JSON.stringify({ op: "send", data: config.payload }),
+            );
+          } else if (config.type === "operation" && config.op === "rename-window") {
+            const newName = prompt("Rename window to:");
+            if (newName) {
+              ws.send(
+                JSON.stringify({ op: "rename-window", target: newName }),
+              );
+            }
+          }
+        });
+      });
+  }
+
+  document.addEventListener("DOMContentLoaded", () => {
+    const root = document.querySelector("[data-term-root]");
+    if (!root) {
+      return;
+    }
+
+    const dirLabel = root.dataset.dirLabel || "";
+    if (dirLabel) {
+      document.title = `${dirLabel} — sshler`;
+    }
+
+    document.body.classList.add("term-view");
+    if (typeof window.sshlerSetFavicon === "function") {
+      window.sshlerSetFavicon("terminal");
+    }
+    window.addEventListener("beforeunload", () => {
+      document.body.classList.remove("term-view");
+      if (typeof window.sshlerSetFavicon === "function") {
+        window.sshlerSetFavicon("default");
+      }
+    });
+
+    const term = new Terminal({
+      cursorBlink: true,
+      convertEol: true,
+      scrollback: 10000,
+      fastScrollModifier: "shift",
+      fastScrollSensitivity: 5,
+    });
+    const fitAddon = new FitAddon.FitAddon();
+    term.loadAddon(fitAddon);
+    term.open(document.getElementById("term"));
+
+    // Fit immediately to get proper dimensions before creating WebSocket
+    // Use triple requestAnimationFrame to ensure layout is fully settled
+    let ws;
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          // Now the layout should be fully calculated
+          fitAddon.fit();
+
+          const url = new URL(window.location.href);
+          const host = url.searchParams.get("host") || root.dataset.host || "";
+          const directory = url.searchParams.get("dir") || root.dataset.directory || "/";
+          const session =
+            url.searchParams.get("session") || root.dataset.session || "default";
+          const wsProto = location.protocol === "https:" ? "wss://" : "ws://";
+          const token = getToken();
+
+          // Now use the fitted dimensions
+          const wsUrl =
+            wsProto +
+            location.host +
+            `/ws/term?host=${encodeURIComponent(host)}&dir=${encodeURIComponent(directory)}&session=${encodeURIComponent(session)}&cols=${term.cols}&rows=${term.rows}&token=${encodeURIComponent(token)}`;
+
+          ws = new WebSocket(wsUrl);
+          ws.binaryType = "arraybuffer";
+
+          setupWebSocket(ws, term, fitAddon);
+        });
+      });
+    });
+
+    function setupWebSocket(ws, term, fitAddon) {
+      const encoder = new TextEncoder();
+      const termToolbar = document.getElementById("term-toolbar");
+      const termWrapper = document.getElementById("term-wrapper");
+      const filePanel = document.getElementById("file-panel");
+      const fileBrowser = document.getElementById("file-browser");
+      const tabsContainer = document.getElementById("tmux-tabs");
+
+      let filePanelActive = false;
+      let filePanelLoaded = false;
+      let fileTabButton = null;
+      let latestWindows = [];
+
+      function sendResize() {
+      // Use requestAnimationFrame to ensure DOM is updated before fitting
+      requestAnimationFrame(() => {
+        fitAddon.fit();
+        if (ws.readyState === WebSocket.OPEN) {
+          ws.send(
+            JSON.stringify({ op: "resize", cols: term.cols, rows: term.rows }),
+          );
+        }
+      });
+    }
+
+    function activateTerminalView() {
+      if (!filePanelActive) {
+        return;
+      }
+      filePanelActive = false;
+      termToolbar.classList.remove("hidden");
+      termWrapper.classList.remove("hidden");
+      filePanel.classList.add("hidden");
+      if (fileTabButton) {
+        fileTabButton.classList.remove("active");
+      }
+      // Ensure terminal refits after panel visibility changes
+      requestAnimationFrame(() => {
+        fitAddon.fit();
+      });
+    }
+
+    function activateFileView() {
+      if (filePanelActive) {
+        return;
+      }
+      filePanelActive = true;
+      termToolbar.classList.add("hidden");
+      termWrapper.classList.add("hidden");
+      filePanel.classList.remove("hidden");
+      if (!filePanelLoaded && window.htmx) {
+        window.htmx.trigger(fileBrowser, "revealed");
+        filePanelLoaded = true;
+      }
+      if (fileTabButton) {
+        fileTabButton.classList.add("active");
+      }
+    }
+
+    function renderTabs(windows) {
+      latestWindows = windows || [];
+      if (!tabsContainer) {
+        return;
+      }
+      tabsContainer.innerHTML = "";
+
+      latestWindows.forEach((windowInfo) => {
+        const tab = document.createElement("button");
+        const isActive = windowInfo.active && !filePanelActive;
+        tab.className = "tmux-tab" + (isActive ? " active" : "");
+        const name = windowInfo.name || `#${windowInfo.index}`;
+        tab.textContent = `${windowInfo.index}: ${name}`;
+        tab.addEventListener("click", () => {
+          activateTerminalView();
+          ws.send(
+            JSON.stringify({
+              op: "select-window",
+              target: windowInfo.index,
+            }),
+          );
+        });
+        tabsContainer.appendChild(tab);
+      });
+
+      const separator = document.createElement("span");
+      separator.className = "tmux-separator";
+      separator.textContent = "|";
+      tabsContainer.appendChild(separator);
+
+      fileTabButton = document.createElement("button");
+      fileTabButton.className = "tmux-tab" + (filePanelActive ? " active" : "");
+      fileTabButton.textContent = "Files";
+      fileTabButton.addEventListener("click", () => {
+        if (filePanelActive) {
+          activateTerminalView();
+        } else {
+          activateFileView();
+        }
+        renderTabs(latestWindows);
+      });
+      tabsContainer.appendChild(fileTabButton);
+    }
+
+    ws.onopen = () => {
+      term.focus();
+    };
+
+    ws.onmessage = (event) => {
+      if (typeof event.data === "string") {
+        try {
+          const message = JSON.parse(event.data);
+          if (message.op === "windows") {
+            renderTabs(message.windows);
+            return;
+          }
+        } catch (err) {
+          term.write(event.data);
+          return;
+        }
+        term.write(event.data);
+      } else if (event.data instanceof ArrayBuffer) {
+        term.write(new Uint8Array(event.data));
+      }
+    };
+
+    ws.onclose = () => {
+      term.write("\r\n\u001b[31m[Connection closed — refresh to reconnect]\u001b[0m\r\n");
+    };
+
+    term.onData((data) => {
+      ws.send(encoder.encode(data));
+    });
+
+    term.attachCustomKeyEventHandler((ev) => {
+      if (ev.ctrlKey && ev.key && ev.key.toLowerCase() === "t") {
+        ws.send(JSON.stringify({ op: "send", data: "\u0014" }));
+        return false;
+      }
+      return true;
+    });
+
+    window.addEventListener("resize", sendResize);
+    window.addEventListener("focus", () => term.focus());
+    document.addEventListener("visibilitychange", () => {
+      if (!document.hidden) {
+        sendResize();
+      }
+    });
+
+    document.addEventListener("keydown", (event) => {
+      if (event.ctrlKey && event.shiftKey && event.key.toLowerCase() === "b") {
+        event.preventDefault();
+        if (filePanelActive) {
+          activateTerminalView();
+        } else {
+          activateFileView();
+        }
+        renderTabs(latestWindows);
+      }
+    });
+
+    const termElement = document.getElementById("term");
+
+    termElement.addEventListener("contextmenu", async (event) => {
+      event.preventDefault();
+      const selection = term.getSelection();
+      if (selection) {
+        try {
+          await navigator.clipboard.writeText(selection);
+          term.clearSelection();
+        } catch (err) {
+          console.warn("Clipboard copy failed", err);
+        }
+        return;
+      }
+      try {
+        const text = await navigator.clipboard.readText();
+        if (text) {
+          ws.send(JSON.stringify({ op: "send", data: text }));
+        }
+      } catch (err) {
+        console.warn("Clipboard paste failed", err);
+      }
+    });
+
+      setupCommandButtons(ws);
+      renderTabs([]);
+    }
+  });
+})();

sshler/templates/base.html

@@ -0,0 +1,41 @@
+
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>sshler</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script src="https://unpkg.com/htmx.org@1.9.12"></script>
+    <meta name="sshler-token" content="{{ csrf_token }}">
+    <link rel="icon" type="image/svg+xml" href="/static/favicon.svg" id="favicon-link">
+    <link rel="stylesheet" href="/static/style.css">
+    <link rel="stylesheet" href="https://unpkg.com/prismjs/themes/prism-tomorrow.css" />
+    {% block head_extra %}{% endblock %}
+    <script defer src="https://unpkg.com/prismjs/prism.js"></script>
+    <script defer src="https://unpkg.com/prismjs/components/prism-python.min.js"></script>
+    <script defer src="https://unpkg.com/prismjs/components/prism-javascript.min.js"></script>
+    <script defer src="https://unpkg.com/prismjs/components/prism-json.min.js"></script>
+    <script defer src="https://unpkg.com/prismjs/components/prism-yaml.min.js"></script>
+    <script defer src="/static/base.js"></script>
+  </head>
+  <body>
+    <div id="toast-container"></div>
+    <header class="topbar">
+      <a class="brand" href="/boxes">sshler</a>
+      <span class="version-pill">{{ app_version }}</span>
+      <div class="spacer"></div>
+      <a class="link" href="/boxes" data-i18n="nav.boxes">Boxes</a>
+      <a class="link" href="/boxes/new" data-i18n="nav.addBox">Add Box</a>
+      <button id="docs-btn" class="link docs-btn" data-i18n="nav.docs">Docs</button>
+      <button id="lang-toggle" class="lang-toggle" title="Switch language / 言語を切り替え">
+        <span data-lang="en">EN</span>
+        <span data-lang="ja" class="hidden">JP</span>
+      </button>
+    </header>
+    <main class="container">
+      {% block content %}{% endblock %}
+    </main>
+    <div id="modal-container"></div>
+    {% block extra_scripts %}{% endblock %}
+  </body>
+</html>

sshler/templates/box.html

@@ -0,0 +1,53 @@
+
+{% extends "base.html" %}
+{% block content %}
+<h1>{{ box.name }}</h1>
+{% if box.source == 'local' %}
+<div class="muted small">Local workspace • {{ box.user }}@{{ box.display_host }}</div>
+{% elif box.source == 'ssh_config' %}
+<div class="muted small">{{ box.user }}@{{ box.display_host }} :{{ box.port }}{% if box.resolved_host and box.resolved_host != box.display_host %} • resolves to {{ box.resolved_host }}{% endif %}</div>
+<div class="muted tiny">Sourced from SSH config &mdash; overrides reset via Refresh.</div>
+<div class="actions">
+  <button class="btn secondary small"
+          hx-post="/box/{{ box.name }}/refresh"
+          hx-swap="none"
+          hx-on::after-request="window.location.reload()">Refresh from SSH config</button>
+</div>
+{% else %}
+<div class="muted small">{{ box.user }}@{{ box.display_host }} :{{ box.port }}</div>
+{% endif %}
+<div class="grid">
+  <div>
+    <h2>Favorites</h2>
+    {% if box.favorites %}
+      <details class="favlist">
+        <summary class="favorite-toggle">Show Favorites</summary>
+        <ul>
+          {% for f in box.favorites %}
+            <li>
+              <a href="/term?host={{ box.name }}&dir={{ f|urlencode }}" class="btn small" target="_blank" rel="noopener">Terminal here</a>
+              <span class="mono">{{ f }}</span>
+              <button class="icon-btn star active"
+                      hx-post="/box/{{ box.name }}/fav?path={{ f|urlencode }}"
+                      hx-swap="none"
+                      aria-label="Remove favorite">★</button>
+            </li>
+          {% endfor %}
+        </ul>
+      </details>
+    {% else %}
+      <p class="muted">No favorites yet.</p>
+    {% endif %}
+  </div>
+  <div>
+    <h2>Browse</h2>
+    <div id="browser"
+         hx-get="/box/{{ box.name }}/ls?path={{ base_directory|urlencode }}"
+         hx-trigger="load"
+         hx-target="#browser"
+         hx-swap="innerHTML">
+      Loading…
+    </div>
+  </div>
+</div>
+{% endblock %}

sshler/templates/docs.html

@@ -0,0 +1,40 @@
+<div id="docs-modal" class="modal">
+  <div class="modal-content">
+    <div class="modal-header">
+      <h2>sshler Quick Reference</h2>
+      <div class="modal-actions">
+        <button class="lang-btn" data-lang="en">English</button>
+        <button class="lang-btn" data-lang="ja">日本語</button>
+        <button class="modal-close">&times;</button>
+      </div>
+    </div>
+    <div class="modal-body">
+      <div class="lang-content" data-lang="en">
+        <ul>
+          <li><strong>Boxes:</strong> Imported from your SSH config or added manually. Refresh an SSH-config box to pick up alias changes.</li>
+          <li><strong>Favorites:</strong> Collapse/expand quick links to directories. They always open in a new terminal tab.</li>
+          <li><strong>Terminal:</strong> Toolbar on the left sends tmux shortcuts; click window tabs or the <em>Files</em> button to jump between tmux and the file explorer.</li>
+          <li><strong>File preview:</strong> Click <em>Preview</em> next to any file to open a read-only view with syntax highlighting.</li>
+          <li><strong>Edit:</strong> Click <em>Edit</em> for inline editing (files &lt; 256 KB). Press Save to write changes and return to preview mode.</li>
+          <li><strong>Delete:</strong> Delete button appears in file preview and directory listings. Confirmation required before deletion.</li>
+          <li><strong>Clipboard:</strong> Right-click the terminal to copy/paste; Ctrl+T is trapped and sent into tmux.</li>
+          <li><strong>Keyboard shortcuts:</strong> Ctrl+Shift+B toggles between terminal and file browser when in terminal view.</li>
+          <li><strong>Security:</strong> sshler binds to 127.0.0.1 by default. If you expose it beyond localhost, add TLS and authentication.</li>
+        </ul>
+      </div>
+      <div class="lang-content hidden" data-lang="ja">
+        <ul>
+          <li><strong>ボックス:</strong> SSH 設定から自動取り込み、または手動で追加できます。SSH 設定を変更した際は Refresh ボタンでエイリアスの変更を反映します。</li>
+          <li><strong>お気に入り:</strong> ディレクトリへのクイックリンクを折りたたみ表示。常に新しいターミナルタブで開きます。</li>
+          <li><strong>ターミナル:</strong> 左側のツールバーで tmux ショートカットを送信。ウィンドウタブまたは<em>Files</em>ボタンをクリックして tmux とファイルエクスプローラーを切り替えられます。</li>
+          <li><strong>ファイルプレビュー:</strong> <em>Preview</em>をクリックすると、シンタックスハイライト付きの読み取り専用ビューが開きます。</li>
+          <li><strong>編集:</strong> <em>Edit</em>をクリックすると、256 KB 未満のファイルをブラウザ内で編集できます。Save を押すと変更が書き込まれ、プレビューモードに戻ります。</li>
+          <li><strong>削除:</strong> ファイルプレビューとディレクトリ一覧に削除ボタンが表示されます。削除前に確認ダイアログが表示されます。</li>
+          <li><strong>クリップボード:</strong> ターミナル上で右クリックしてコピー/ペースト。Ctrl+T は tmux に送信されます。</li>
+          <li><strong>キーボードショートカット:</strong> ターミナル表示中に Ctrl+Shift+B でターミナルとファイルブラウザを切り替えられます。</li>
+          <li><strong>セキュリティ:</strong> デフォルトで 127.0.0.1 にバインドされます。localhost 以外に公開する場合は TLS と認証を追加してください。</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>

sshler/templates/file_edit.html

@@ -0,0 +1,30 @@
+{% extends "base.html" %}
+{% block head_extra %}
+<link rel="stylesheet" href="https://unpkg.com/prismjs/themes/prism-tomorrow.css" />
+<link rel="stylesheet" href="https://unpkg.com/codemirror@5.65.16/lib/codemirror.css" />
+<script src="https://unpkg.com/codemirror@5.65.16/lib/codemirror.js"></script>
+<script src="https://unpkg.com/codemirror@5.65.16/mode/python/python.js"></script>
+<script src="https://unpkg.com/codemirror@5.65.16/mode/javascript/javascript.js"></script>
+<script src="https://unpkg.com/codemirror@5.65.16/mode/css/css.js"></script>
+<script src="https://unpkg.com/codemirror@5.65.16/mode/xml/xml.js"></script>
+<script src="https://unpkg.com/codemirror@5.65.16/mode/markdown/markdown.js"></script>
+<script src="https://unpkg.com/codemirror@5.65.16/mode/shell/shell.js"></script>
+<script src="https://unpkg.com/codemirror@5.65.16/addon/display/placeholder.js"></script>
+{% endblock %}
+{% block content %}
+<div class="file-edit">
+  <div class="file-view__header">
+    <h1>{{ box.name }} — {{ path }}</h1>
+    <div class="actions">
+      <a class="btn secondary small" href="/box/{{ box.name }}">Back</a>
+      <button class="btn small" id="save-btn">Save</button>
+    </div>
+  </div>
+  <textarea id="editor" class="file-edit__textarea" data-path="{{ path }}">{{ content }}</textarea>
+  <div id="save-status" class="muted small"></div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script defer src="/static/file-edit.js"></script>
+{% endblock %}

sshler/templates/file_view.html

@@ -0,0 +1,31 @@
+{% extends "base.html" %}
+{% block content %}
+<div class="file-view">
+  <div class="file-view__header">
+    <h1>{{ box.name }} — {{ path }}</h1>
+    <div class="file-view__actions">
+      <button id="back-btn" class="btn secondary small">Back</button>
+      <a class="btn small" href="/box/{{ box.name }}/edit?path={{ path|urlencode }}">Edit</a>
+      <button id="delete-btn" class="btn small danger"
+              data-box="{{ box.name }}"
+              data-path="{{ path }}"
+              data-parentdir="{{ parent_directory }}"
+              data-filename="{{ path.split('/')[-1] if '/' in path else path }}">Delete</button>
+    </div>
+  </div>
+  {% if image_data %}
+  <div class="image-preview">
+    <img src="data:{{ image_mime }};base64,{{ image_data }}" alt="Preview of {{ path }}">
+  </div>
+  {% elif image_too_large %}
+  <div class="alert error">Image exceeds the {{ image_limit_kb }} KB preview limit.</div>
+  {% endif %}
+  {% if content %}
+  <pre class="file-view__content"><code class="language-{{ syntax_class or 'markup' }}">{{ content }}</code></pre>
+  {% endif %}
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script defer src="/static/file-view.js"></script>
+{% endblock %}

sshler/templates/index.html

@@ -0,0 +1,49 @@
+
+{% extends "base.html" %}
+{% block content %}
+<h1>Boxes</h1>
+<p>Pick a box to browse and open a terminal. Hosts are imported from your SSH config and any custom boxes you add here.</p>
+<ul class="cards">
+  {% for box in configuration.boxes %}
+  <li class="card {% if box.source == 'local' %}local-card{% elif box.source == 'ssh_config' %}ssh-card{% else %}custom-card{% endif %}">
+    <div class="title">{{ box.name }}</div>
+    {% if box.source == 'local' %}
+    <div class="mono">{{ box.user }}@{{ box.display_host }}</div>
+    <div class="muted small">Local workspace</div>
+    {% else %}
+    <div class="mono">{{ box.user }}@{{ box.display_host }} :{{ box.port }}</div>
+    <div class="muted small">{{ 'From SSH config' if box.source == 'ssh_config' else 'Custom box' }}</div>
+    {% endif %}
+    {% if box.resolved_host and box.resolved_host != box.display_host %}
+    <div class="muted tiny">resolves to {{ box.resolved_host }}</div>
+    {% endif %}
+    {% if box.favorites %}
+    <details class="favlist">
+      <summary class="favorite-toggle">Favorites</summary>
+      <ul>
+        {% for favorite in box.favorites %}
+        <li><a href="/term?host={{ box.name }}&dir={{ favorite|urlencode }}" target="_blank" rel="noopener">{{ favorite }}</a></li>
+        {% endfor %}
+      </ul>
+    </details>
+    {% endif %}
+    <div class="actions">
+      <a class="btn" href="/box/{{ box.name }}">Open</a>
+      {% if box.default_dir %}
+      <a class="btn secondary" href="/term?host={{ box.name }}&dir={{ box.default_dir|urlencode }}">Terminal</a>
+      {% endif %}
+      {% if box.source == 'ssh_config' %}
+      <button class="btn secondary small"
+              hx-post="/box/{{ box.name }}/refresh"
+              hx-swap="none"
+              hx-on::after-request="window.location.reload()">
+        Refresh
+      </button>
+      {% endif %}
+    </div>
+  </li>
+  {% endfor %}
+</ul>
+
+<div class="muted small">Config file: {{ configuration_path if configuration_path else "" }}</div>
+{% endblock %}

sshler/templates/new_box.html

@@ -0,0 +1,42 @@
+{% extends "base.html" %}
+{% block content %}
+<h1>Add Box</h1>
+<p>Define a custom box. Fields you leave blank will rely on SSH defaults.</p>
+<form method="post" class="form">
+  <label>Name
+    <input type="text" name="name" required>
+  </label>
+  <label>Host (hostname or IP)
+    <input type="text" name="host" placeholder="my-server.internal">
+  </label>
+  <label>User
+    <input type="text" name="user" placeholder="deploy">
+  </label>
+  <label>Port
+    <input type="number" name="port" value="22" min="1" max="65535">
+  </label>
+  <label>Key file
+    <input type="text" name="keyfile" placeholder="~/.ssh/id_ed25519">
+  </label>
+  <label>SSH alias (optional)
+    <input type="text" name="ssh_alias" placeholder="OpenSSH alias to resolve">
+  </label>
+  <label>Default directory
+    <input type="text" name="default_dir" placeholder="/home/user">
+  </label>
+  <label>Favorites (one per line)
+    <textarea name="favorites" rows="4" placeholder="/var/www
+/srv"></textarea>
+  </label>
+  <label>Known hosts override
+    <input type="text" name="known_hosts" placeholder="ignore or path">
+  </label>
+  <label class="checkbox">
+    <input type="checkbox" name="agent" value="1"> Use SSH agent
+  </label>
+  <div class="form-actions">
+    <button class="btn" type="submit">Save</button>
+    <a class="btn secondary" href="/boxes">Cancel</a>
+  </div>
+</form>
+{% endblock %}