ccoding 0.2.1__tar.gz → 0.2.2__tar.gz

{ccoding-0.2.1 → ccoding-0.2.2}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: ccoding
-Version: 0.2.1
+Version: 0.2.2
 Summary: Curses-based Claude Code launcher
 Project-URL: Homepage, https://github.com/8DE4732A/ccode
 Project-URL: Repository, https://github.com/8DE4732A/ccode
@@ -57,6 +57,11 @@ Description-Content-Type: text/markdown
 
 ![](screenshot.png)
 
+<p align="center">
+  <img src="screenshot_mobile1.jpeg" alt="Mobile remote terminal screenshot 1" width="45%" />
+  <img src="screenshot_mobile2.jpeg" alt="Mobile remote terminal screenshot 2" width="45%" />
+</p>
+
 ## 功能特点
 
 - 终端 curses UI，键盘全操作
@@ -127,6 +132,15 @@ ccode-remote     # 查看 remote hub / client connector 状态
 
 需要 Python >=3.10。基础 TUI 不再强制安装 remote 依赖。Remote/Web 模式需要额外依赖，并需要系统中已安装 `tmux` 和 `claude`；Windows 建议在 WSL 中使用 remote 模式。
 
+使用 Remote/Web 时，推荐在 `~/.tmux.conf` 中配置：
+
+```tmux
+set -g history-limit 50000
+set -g mouse on
+set -g default-terminal "screen-256color"
+set-option -ga terminal-overrides ",xterm-256color:Tc"
+```
+
 ```bash
 git clone https://github.com/8DE4732A/ccode
 cd ccode

{ccoding-0.2.1 → ccoding-0.2.2}/README.md

@@ -6,6 +6,11 @@
 
 ![](screenshot.png)
 
+<p align="center">
+  <img src="screenshot_mobile1.jpeg" alt="Mobile remote terminal screenshot 1" width="45%" />
+  <img src="screenshot_mobile2.jpeg" alt="Mobile remote terminal screenshot 2" width="45%" />
+</p>
+
 ## 功能特点
 
 - 终端 curses UI，键盘全操作
@@ -76,6 +81,15 @@ ccode-remote     # 查看 remote hub / client connector 状态
 
 需要 Python >=3.10。基础 TUI 不再强制安装 remote 依赖。Remote/Web 模式需要额外依赖，并需要系统中已安装 `tmux` 和 `claude`；Windows 建议在 WSL 中使用 remote 模式。
 
+使用 Remote/Web 时，推荐在 `~/.tmux.conf` 中配置：
+
+```tmux
+set -g history-limit 50000
+set -g mouse on
+set -g default-terminal "screen-256color"
+set-option -ga terminal-overrides ",xterm-256color:Tc"
+```
+
 ```bash
 git clone https://github.com/8DE4732A/ccode
 cd ccode

{ccoding-0.2.1 → ccoding-0.2.2}/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "ccoding"
-version = "0.2.1"
+version = "0.2.2"
 description = "Curses-based Claude Code launcher"
 readme = "README.md"
 license = { file = "LICENSE" }

{ccoding-0.2.1 → ccoding-0.2.2}/src/ccode/web/app.js

@@ -3,23 +3,127 @@ const sessionListEl = document.getElementById("session-list");
 const tokenFormEl = document.getElementById("token-form");
 const tokenInputEl = document.getElementById("token-input");
 const statusEl = document.getElementById("status");
+const actionsEl = document.getElementById("actions");
+const actionsToggleButton = document.getElementById("actions-toggle");
 const backButton = document.getElementById("back");
 const refreshButton = document.getElementById("refresh");
 const changeTokenButton = document.getElementById("change-token");
 const reconnectButton = document.getElementById("reconnect");
 const focusButton = document.getElementById("focus");
+const mobileKeybarEl = document.getElementById("mobile-keybar");
+
+const inputSequences = {
+  tab: "\t",
+  esc: "\x1b",
+  "ctrl-c": "\x03",
+  "ctrl-d": "\x04",
+  "ctrl-l": "\x0c",
+  enter: "\r",
+  backspace: "\x7f",
+  up: "\x1b[A",
+  down: "\x1b[B",
+  right: "\x1b[C",
+  left: "\x1b[D",
+};
 
 const tokenStorageKey = "ccode.remote.adminToken";
+const fontSizeStorageKey = "ccode.remote.terminalFontSize";
 let token = window.sessionStorage.getItem(tokenStorageKey) || "";
 let socket = null;
 let term = null;
 let fitAddon = null;
 let currentSession = null;
+let terminalFontSize = Number(window.localStorage.getItem(fontSizeStorageKey)) || 14;
+let terminalTouchScroll = null;
+let terminalViewportEl = null;
+let resizeFrame = null;
+let viewportHeight = "";
+let keyboardInset = "";
 
 function setStatus(message) {
   statusEl.textContent = message;
 }
 
+function sendInput(data) {
+  if (!socket || socket.readyState !== WebSocket.OPEN) {
+    return;
+  }
+  socket.send(JSON.stringify({ type: "input", data }));
+}
+
+function focusTerminal() {
+  ensureTerminal();
+  term.focus();
+}
+
+function adjustTerminalFontSize(delta) {
+  const nextFontSize = Math.min(22, Math.max(10, terminalFontSize + delta));
+  if (nextFontSize === terminalFontSize) {
+    return;
+  }
+  terminalFontSize = nextFontSize;
+  window.localStorage.setItem(fontSizeStorageKey, String(terminalFontSize));
+  if (term) {
+    term.options.fontSize = terminalFontSize;
+    fitAndSendResize();
+  }
+}
+
+function closeActionMenu() {
+  actionsEl.classList.remove("open");
+  actionsToggleButton.setAttribute("aria-expanded", "false");
+}
+
+function beginTerminalTouchScroll(y) {
+  if (!term || terminalTouchScroll) {
+    return;
+  }
+  terminalTouchScroll = { y, remainder: 0, active: false };
+}
+
+function scrollTerminalFromTouch(y, event) {
+  if (!terminalTouchScroll || !term) {
+    return;
+  }
+  const deltaY = terminalTouchScroll.y - y;
+  if (!terminalTouchScroll.active && Math.abs(deltaY) < 8) {
+    return;
+  }
+  terminalTouchScroll.active = true;
+  event.preventDefault();
+  if (terminalViewportEl) {
+    terminalViewportEl.dispatchEvent(new WheelEvent("wheel", { deltaY, bubbles: true, cancelable: true }));
+  }
+  const lineHeight = Math.max(14, terminalFontSize * 1.35);
+  const delta = deltaY + terminalTouchScroll.remainder;
+  const lines = Math.trunc(delta / lineHeight);
+  terminalTouchScroll.remainder = delta - lines * lineHeight;
+  terminalTouchScroll.y = y;
+  if (lines) {
+    term.scrollLines(lines);
+  }
+}
+
+function endTerminalTouchScroll() {
+  terminalTouchScroll = null;
+}
+
+function startTerminalTouchScroll(event) {
+  if (event.touches.length === 1) {
+    beginTerminalTouchScroll(event.touches[0].clientY);
+  }
+}
+
+function moveTerminalTouchScroll(event) {
+  if (event.touches.length === 1) {
+    scrollTerminalFromTouch(event.touches[0].clientY, event);
+  }
+}
+
+function stopTerminalTouchScroll() {
+  endTerminalTouchScroll();
+}
+
 function ensureTerminal() {
   if (term) {
     return;
@@ -28,7 +132,7 @@ function ensureTerminal() {
     cursorBlink: true,
     convertEol: true,
     fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace',
-    fontSize: 14,
+    fontSize: terminalFontSize,
     theme: {
       background: "#05070a",
       foreground: "#d6e2f0",
@@ -39,15 +143,36 @@ function ensureTerminal() {
   fitAddon = new FitAddon.FitAddon();
   term.loadAddon(fitAddon);
   term.open(terminalEl);
-  term.onData((data) => {
-    if (!socket || socket.readyState !== WebSocket.OPEN) {
-      return;
-    }
-    socket.send(JSON.stringify({ type: "input", data }));
+  terminalViewportEl = terminalEl.querySelector(".xterm-viewport");
+  term.onData(sendInput);
+}
+
+function updateViewportInsets() {
+  const viewport = window.visualViewport;
+  const nextViewportHeight = `${viewport ? viewport.height : window.innerHeight}px`;
+  const nextKeyboardInset = `${viewport ? Math.max(0, window.innerHeight - viewport.height - viewport.offsetTop) : 0}px`;
+  if (nextViewportHeight !== viewportHeight) {
+    viewportHeight = nextViewportHeight;
+    document.documentElement.style.setProperty("--viewport-height", viewportHeight);
+  }
+  if (nextKeyboardInset !== keyboardInset) {
+    keyboardInset = nextKeyboardInset;
+    document.documentElement.style.setProperty("--keyboard-inset", keyboardInset);
+  }
+}
+
+function requestFitAndSendResize() {
+  if (resizeFrame !== null) {
+    return;
+  }
+  resizeFrame = window.requestAnimationFrame(() => {
+    resizeFrame = null;
+    fitAndSendResize();
   });
 }
 
 function fitAndSendResize() {
+  updateViewportInsets();
   if (!term || !fitAddon || terminalEl.hidden) {
     return;
   }
@@ -71,9 +196,12 @@ function showTokenMode(message = "enter token") {
   terminalEl.hidden = true;
   sessionListEl.hidden = true;
   tokenFormEl.hidden = false;
+  actionsToggleButton.hidden = true;
+  closeActionMenu();
   backButton.hidden = true;
   focusButton.hidden = true;
   reconnectButton.hidden = true;
+  mobileKeybarEl.hidden = true;
   refreshButton.hidden = true;
   changeTokenButton.hidden = true;
   setStatus(message);
@@ -87,9 +215,12 @@ function showListMode() {
   tokenFormEl.hidden = true;
   terminalEl.hidden = true;
   sessionListEl.hidden = false;
+  actionsToggleButton.hidden = false;
+  closeActionMenu();
   backButton.hidden = true;
   focusButton.hidden = true;
   reconnectButton.hidden = true;
+  mobileKeybarEl.hidden = true;
   refreshButton.hidden = false;
   changeTokenButton.hidden = false;
 }
@@ -98,9 +229,12 @@ function showTerminalMode() {
   tokenFormEl.hidden = true;
   sessionListEl.hidden = true;
   terminalEl.hidden = false;
+  actionsToggleButton.hidden = false;
+  closeActionMenu();
   backButton.hidden = false;
   focusButton.hidden = false;
   reconnectButton.hidden = false;
+  mobileKeybarEl.hidden = false;
   refreshButton.hidden = true;
   changeTokenButton.hidden = false;
 }
@@ -276,13 +410,45 @@ changeTokenButton.addEventListener("click", () => {
   token = "";
   showTokenMode("enter token");
 });
-window.addEventListener("resize", fitAndSendResize);
+window.addEventListener("resize", requestFitAndSendResize);
+actionsToggleButton.addEventListener("click", () => {
+  const open = actionsEl.classList.toggle("open");
+  actionsToggleButton.setAttribute("aria-expanded", String(open));
+});
+actionsEl.addEventListener("click", (event) => {
+  if (event.target.closest("button")) {
+    closeActionMenu();
+  }
+});
 backButton.addEventListener("click", loadSessions);
 refreshButton.addEventListener("click", loadSessions);
 reconnectButton.addEventListener("click", connect);
-focusButton.addEventListener("click", () => {
-  ensureTerminal();
-  term.focus();
+focusButton.addEventListener("click", focusTerminal);
+terminalEl.addEventListener("touchstart", startTerminalTouchScroll, { passive: true });
+terminalEl.addEventListener("touchmove", moveTerminalTouchScroll, { passive: false });
+terminalEl.addEventListener("touchend", stopTerminalTouchScroll);
+terminalEl.addEventListener("touchcancel", stopTerminalTouchScroll);
+mobileKeybarEl.addEventListener("pointerdown", (event) => {
+  const inputButton = event.target.closest("button[data-sequence]");
+  const zoomButton = event.target.closest("button[data-zoom]");
+  if (!inputButton && !zoomButton) {
+    return;
+  }
+  event.preventDefault();
+  if (zoomButton) {
+    adjustTerminalFontSize(Number(zoomButton.dataset.zoom));
+    return;
+  }
+  const data = inputSequences[inputButton.dataset.sequence];
+  if (data) {
+    sendInput(data);
+    focusTerminal();
+  }
 });
+if (window.visualViewport) {
+  window.visualViewport.addEventListener("resize", requestFitAndSendResize);
+  window.visualViewport.addEventListener("scroll", requestFitAndSendResize);
+}
+updateViewportInsets();
 
 loadSessions();

{ccoding-0.2.1 → ccoding-0.2.2}/src/ccode/web/index.html

@@ -14,7 +14,8 @@
           <h1>ccode remote</h1>
           <p id="status">enter token</p>
         </div>
-        <div class="actions">
+        <button id="actions-toggle" class="actions-toggle" type="button" hidden>Menu</button>
+        <div id="actions" class="actions">
           <button id="back" type="button" hidden>Sessions</button>
           <button id="refresh" type="button" hidden>Refresh</button>
           <button id="change-token" type="button" hidden>Change token</button>
@@ -31,6 +32,21 @@
       </form>
       <section id="session-list" hidden></section>
       <div id="terminal" tabindex="0" hidden></div>
+      <div id="mobile-keybar" class="mobile-keybar" hidden>
+        <button type="button" data-zoom="-1">A−</button>
+        <button type="button" data-zoom="1">A+</button>
+        <button type="button" data-sequence="tab">Tab</button>
+        <button type="button" data-sequence="esc">Esc</button>
+        <button type="button" data-sequence="ctrl-c">Ctrl+C</button>
+        <button type="button" data-sequence="ctrl-d">Ctrl+D</button>
+        <button type="button" data-sequence="ctrl-l">Ctrl+L</button>
+        <button type="button" data-sequence="enter">Enter</button>
+        <button type="button" data-sequence="backspace">⌫</button>
+        <button type="button" data-sequence="up">↑</button>
+        <button type="button" data-sequence="down">↓</button>
+        <button type="button" data-sequence="left">←</button>
+        <button type="button" data-sequence="right">→</button>
+      </div>
     </main>
     <script src="assets/xterm.js"></script>
     <script src="assets/addon-fit.js"></script>

{ccoding-0.2.1 → ccoding-0.2.2}/src/ccode/web/style.css

@@ -10,6 +10,11 @@ main {
   margin: 0;
 }
 
+:root {
+  --keyboard-inset: 0px;
+  --viewport-height: 100vh;
+}
+
 body {
   background: #090b10;
   color: #e8eef8;
@@ -47,6 +52,10 @@ p {
   justify-content: flex-end;
 }
 
+.actions-toggle {
+  display: none;
+}
+
 button,
 input {
   border-radius: 8px;
@@ -168,12 +177,105 @@ button[hidden],
   min-height: 0;
   overflow: hidden;
   padding: 12px;
+  touch-action: none;
 }
 
 #terminal:focus-within {
   outline: 2px solid #4f8cff;
 }
 
+.mobile-keybar {
+  display: none;
+}
+
 .xterm {
   height: 100%;
 }
+
+@media (max-width: 720px), (pointer: coarse) {
+  html,
+  body,
+  main {
+    height: var(--viewport-height);
+    overflow: hidden;
+  }
+
+  main {
+    padding: 8px;
+    gap: 8px;
+  }
+
+  header {
+    align-items: flex-start;
+    gap: 8px;
+    position: relative;
+  }
+
+  .actions-toggle:not([hidden]) {
+    display: block;
+    margin-left: auto;
+  }
+
+  .actions {
+    background: rgba(9, 11, 16, 0.98);
+    border: 1px solid #1c2638;
+    border-radius: 12px;
+    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.38);
+    display: none;
+    flex-direction: column;
+    min-width: 180px;
+    padding: 8px;
+    position: absolute;
+    right: 0;
+    top: calc(100% + 6px);
+    z-index: 20;
+  }
+
+  .actions.open {
+    display: flex;
+  }
+
+  .actions button {
+    text-align: left;
+    width: 100%;
+  }
+
+  #session-list {
+    overflow: auto;
+  }
+
+  #terminal {
+    margin-bottom: 58px;
+    min-height: 120px;
+    padding: 8px;
+  }
+
+  .mobile-keybar:not([hidden]) {
+    background: rgba(9, 11, 16, 0.96);
+    border: 1px solid #1c2638;
+    border-radius: 12px;
+    bottom: calc(8px + var(--keyboard-inset));
+    display: flex;
+    gap: 6px;
+    left: 8px;
+    max-width: calc(100vw - 16px);
+    overflow-x: auto;
+    padding: 8px;
+    position: fixed;
+    right: 8px;
+    scrollbar-width: none;
+    z-index: 10;
+  }
+
+  .mobile-keybar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .mobile-keybar button {
+    flex: 0 0 auto;
+    min-width: 48px;
+    padding: 10px 12px;
+    touch-action: manipulation;
+    user-select: none;
+  }
+}