@minimalcorp/tsunagi 0.4.2 → 0.4.3

package/dist/server/pty-manager.d.ts

@@ -25,9 +25,17 @@ export interface PtySession {
     respawning: boolean;
     /** 最後にユーザー入力があった時刻（入力中の作り直しを避けるため） */
     lastInputAt: number;
-    /** PTY出力のリングバッファ（再接続時にまとめて送信） */
-    scrollback: string[];
+    /**
+     * PTY出力のリングバッファ（再接続時にまとめて送信）。
+     * 文字列は PTY 出力、TerminalSize は「ここで PTY がこのサイズに変わった」印。
+     * replay 時にサイズの区切りごとに xterm を resize してから書くことで、録画時と同じ幅で再生する
+     * （幅の違う出力を一つの幅で再生すると、列指定が切り詰められて崩れる）。
+     */
+    scrollback: ScrollbackEntry[];
+    /** scrollback 中の出力のバイト数（サイズ印は含まない） */
     scrollbackSize: number;
+    /** scrollback の先頭時点の PTY サイズ（最初のサイズ印より前の出力がこの幅で描かれた） */
+    scrollbackStartSize: TerminalSize;
     /** 最後にPTY出力があった時刻（GC判定用） */
     lastOutputAt: number;
     /** 最後にWebSocket接続があった時刻 */
@@ -39,6 +47,12 @@ export interface TerminalSize {
     cols: number;
     rows: number;
 }
+/** scrollback の要素。文字列は PTY 出力、TerminalSize は PTY の resize 位置を示す印 */
+export type ScrollbackEntry = string | TerminalSize;
+/** replay 用に scrollback をサイズごとに区切ったもの。data はそのサイズで描かれた出力 */
+export interface ReplaySegment extends TerminalSize {
+    data: string;
+}
 declare class PtyManager {
     private sessions;
     /** sessionId → 最後に input を送信した socket.id */
@@ -60,6 +74,18 @@ declare class PtyManager {
      */
     createSession(sessionId: string, cwd: string, env?: Record<string, string>, unsetKeys?: string[], options?: PtySessionOptions): PtySession;
     getSession(sessionId: string): PtySession | undefined;
+    /**
+     * PTY を resize する。サイズが変わったときだけ SIGWINCH が飛び、scrollback にサイズ印を残す。
+     * PTY の resize は必ずここを通し、replay が「どの出力がどの幅で描かれたか」を再現できるようにする。
+     * @returns 実際にサイズが変わったか
+     */
+    resizePty(session: PtySession, size: TerminalSize): boolean;
+    /**
+     * 再接続時の画面復元用に、scrollback を PTY サイズごとの区間に分ける。
+     * 末尾の区間は必ず現在の PTY サイズになる（出力が無くても返す）。
+     * @param transform 各区間の出力に適用する加工（端末クエリの除去など。区間ごとに join 済みの文字列を渡す）
+     */
+    getReplaySegments(session: PtySession, transform: (data: string) => string): ReplaySegment[];
     deleteSession(sessionId: string): void;
     /**
      * WebSocket接続が切れた際に呼ぶ。

package/dist/server/pty-manager.js

@@ -45,6 +45,7 @@ function addTsunagiPluginDir(env) {
         dirs.push(pluginDir);
     env.CLAUDE_CODE_PLUGIN_DIRS = dirs.join(':');
 }
+const INITIAL_PTY_SIZE = { cols: 80, rows: 24 };
 class PtyManager {
     sessions = new Map();
     /** sessionId → 最後に input を送信した socket.id */
@@ -118,8 +119,8 @@ class PtyManager {
         addTsunagiPluginDir(spawnEnv);
         const ptyProcess = pty.spawn(shell, [], {
             name: 'xterm-256color',
-            cols: 80,
-            rows: 24,
+            cols: INITIAL_PTY_SIZE.cols,
+            rows: INITIAL_PTY_SIZE.rows,
             cwd,
             env: spawnEnv,
         });
@@ -136,6 +137,7 @@ class PtyManager {
             lastInputAt: 0,
             scrollback: [],
             scrollbackSize: 0,
+            scrollbackStartSize: INITIAL_PTY_SIZE,
             lastOutputAt: now,
             lastConnectedAt: now,
             gcTimer: null,
@@ -147,8 +149,14 @@ class PtyManager {
             session.scrollbackSize += data.length;
             // バッファ上限を超えたら古いものから削除
             while (session.scrollbackSize > SCROLLBACK_MAX_BYTES && session.scrollback.length > 0) {
-                session.scrollbackSize -= session.scrollback[0].length;
-                session.scrollback.shift();
+                const head = session.scrollback.shift();
+                if (typeof head === 'string') {
+                    session.scrollbackSize -= head.length;
+                }
+                else {
+                    // サイズ印を捨てる → 残りの先頭はこのサイズで描かれている
+                    session.scrollbackStartSize = head;
+                }
             }
         });
         this.sessions.set(sessionId, session);
@@ -157,6 +165,65 @@ class PtyManager {
     getSession(sessionId) {
         return this.sessions.get(sessionId);
     }
+    /**
+     * PTY を resize する。サイズが変わったときだけ SIGWINCH が飛び、scrollback にサイズ印を残す。
+     * PTY の resize は必ずここを通し、replay が「どの出力がどの幅で描かれたか」を再現できるようにする。
+     * @returns 実際にサイズが変わったか
+     */
+    resizePty(session, size) {
+        const { pty: ptyProcess } = session;
+        if (ptyProcess.cols === size.cols && ptyProcess.rows === size.rows)
+            return false;
+        try {
+            ptyProcess.resize(size.cols, size.rows);
+        }
+        catch {
+            // 終了済みの PTY は無視する
+            return false;
+        }
+        // 直前の印以降に出力が無ければ、その印は不要なので置き換える
+        // （ウィンドウのドラッグ中など、出力を挟まず resize が連続しても印が溜まらないようにする）
+        const last = session.scrollback.at(-1);
+        if (last !== undefined && typeof last !== 'string') {
+            session.scrollback[session.scrollback.length - 1] = { cols: size.cols, rows: size.rows };
+        }
+        else {
+            session.scrollback.push({ cols: size.cols, rows: size.rows });
+        }
+        return true;
+    }
+    /**
+     * 再接続時の画面復元用に、scrollback を PTY サイズごとの区間に分ける。
+     * 末尾の区間は必ず現在の PTY サイズになる（出力が無くても返す）。
+     * @param transform 各区間の出力に適用する加工（端末クエリの除去など。区間ごとに join 済みの文字列を渡す）
+     */
+    getReplaySegments(session, transform) {
+        const segments = [];
+        let size = session.scrollbackStartSize;
+        let chunks = [];
+        const flush = () => {
+            if (chunks.length > 0) {
+                segments.push({ ...size, data: transform(chunks.join('')) });
+                chunks = [];
+            }
+        };
+        for (const entry of session.scrollback) {
+            if (typeof entry === 'string') {
+                chunks.push(entry);
+            }
+            else {
+                flush();
+                size = entry;
+            }
+        }
+        flush();
+        const current = { cols: session.pty.cols, rows: session.pty.rows };
+        const last = segments.at(-1);
+        if (!last || last.cols !== current.cols || last.rows !== current.rows) {
+            segments.push({ ...current, data: '' });
+        }
+        return segments;
+    }
     deleteSession(sessionId) {
         const session = this.sessions.get(sessionId);
         if (!session)

package/dist/server/routes/terminal.js

@@ -27,27 +27,6 @@ function stripTerminalQueries(s) {
         .replace(/\x1b\[[?>]?[0-9;]*n/g, '') // DSR: ESC[?6n(主犯) / ESC[6n / ESC[5n など
         .replace(/\x1b\[[?>=]?[0-9;]*c/g, ''); // DA: ESC[c / ESC[0c / ESC[>c / ESC[=c
 }
-/**
- * 表示中のクライアントがいなくなった PTY の cols をこの幅に縮める。
- * 一定の幅を下回ると Claude(Ink) が full-frame redraw を行い <Static> を再 emit するという
- * 観測に基づくしきい値。元 cols が既にこの値の場合のみ -1 にして必ず cols を変化させる。
- *
- * 再表示時は replay 後にクライアントが実サイズへ resize するため、必ず cols が変わり
- * SIGWINCH が飛んで Claude が現在の画面を描き直す（同一サイズの resize は no-op で
- * SIGWINCH が飛ばない）。縮める処理を切断時に済ませておくことで、縮めた時の再描画が
- * 再表示より前に scrollback に入り、replay と描き直しの順序がタイミングに依存しない。
- */
-const REDRAW_BUMP_COLS = 64;
-function bumpColsForRedraw(session) {
-    const { pty: ptyProcess } = session;
-    const cols = ptyProcess.cols === REDRAW_BUMP_COLS ? REDRAW_BUMP_COLS - 1 : REDRAW_BUMP_COLS;
-    try {
-        ptyProcess.resize(cols, ptyProcess.rows);
-    }
-    catch {
-        // 終了済みの PTY は無視する
-    }
-}
 export async function terminalRoutes(fastify) {
     const io = fastify.io;
     // 作成中のセッション（sessionId → 作成処理）。存在確認から PTY 作成までの間に await を挟むため、
@@ -112,20 +91,22 @@ export async function terminalRoutes(fastify) {
             }
             ptyManager.setActiveSocket(sessionId, socket.id);
             const { pty: ptyProcess } = session;
-            const isReused = session.scrollback.length > 0;
+            const isReused = session.scrollbackSize > 0;
             // リングバッファの内容を一括送信（画面復元）。初回接続・再接続を問わず join のたびに送る。
-            // クライアントは replay を受けたら画面をクリアし、xterm を PTY と同じサイズにしてから
-            // 書き込み、完了後に実サイズへ resize する（新規セッションは data が空）。
+            // 出力は PTY サイズごとの区間に分けて送り、クライアントは画面をクリアした後、区間ごとに
+            // xterm をそのサイズにしてから書き込む（録画時と同じ幅で再生する）。書き終えたら実サイズへ
+            // resize し、サイズが変わっていれば SIGWINCH で Claude が現在の画面を描き直す。
+            // 切断中に PTY のサイズは変えない（以前は再描画を誘発するため cols を縮めていたが、
+            // Claude は resize のたびに履歴全体を再出力するため、狭い幅の履歴コピーが scrollback に
+            // 積まれて再表示時に横幅の狭い行や同じ内容の繰り返しが残る原因になっていた）。
             // 端末クエリ列（ESC[?6n / ESC[c 等）を除去してから replay する。
             // これを怠ると xterm.js が応答を生成し PTY へ注入され、入力欄に "1;2c64;3R..." が
             // 勝手に入力される（stripTerminalQueries のコメント参照）。
-            const buffered = isReused ? stripTerminalQueries(session.scrollback.join('')) : '';
-            socket.emit('replay', {
-                // 末尾の \r\n / \n / \r をトリムする。
-                data: buffered.replace(/[\r\n]+$/, ''),
-                cols: ptyProcess.cols,
-                rows: ptyProcess.rows,
-            });
+            const segments = ptyManager.getReplaySegments(session, stripTerminalQueries);
+            // 末尾の \r\n / \n / \r をトリムする。
+            const lastSegment = segments[segments.length - 1];
+            lastSegment.data = lastSegment.data.replace(/[\r\n]+$/, '');
+            socket.emit('replay', { segments });
             // reused の場合、最初の resize まで onData 出力をバッファリング
             let initialResizeHandled = !isReused;
             const pendingOutput = [];
@@ -167,7 +148,7 @@ export async function terminalRoutes(fastify) {
                     return;
                 ptyManager.setTerminalSize(sessionId, socket.id, { cols, rows });
                 if (ptyManager.getActiveSocket(sessionId) === socket.id) {
-                    ptyProcess.resize(cols, rows);
+                    ptyManager.resizePty(session, { cols, rows });
                 }
                 // reused時: 初回 resize 後にバッファリングしていた出力をフラッシュ
                 if (!initialResizeHandled) {
@@ -186,9 +167,7 @@ export async function terminalRoutes(fastify) {
                     return;
                 ptyManager.setTerminalSize(sessionId, socket.id, { cols, rows });
                 ptyManager.setActiveSocket(sessionId, socket.id);
-                if (ptyProcess.cols !== cols || ptyProcess.rows !== rows) {
-                    ptyProcess.resize(cols, rows);
-                }
+                ptyManager.resizePty(session, { cols, rows });
             });
             // input イベント: 所有者 socket からの入力のみ PTY へ書き込む。
             // ゾンビ/非所有 socket（再接続前の旧 socket・誤バインド socket 等）からの重複 input は
@@ -223,23 +202,16 @@ export async function terminalRoutes(fastify) {
                 const next = ptyManager.removeTerminalSocket(boundSessionId, socket.id);
                 if (wasOwner && next) {
                     // 同じ PTY を表示している socket が残っている → 最後に使われた socket に所有権と
-                    // サイズを引き継ぐ（表示中なので GC も cols の縮小も行わない）
+                    // サイズを引き継ぐ（表示中なので GC は行わない）
                     ptyManager.setActiveSocket(boundSessionId, next.socketId);
                     const session = ptyManager.getSession(boundSessionId);
-                    try {
-                        session?.pty.resize(next.size.cols, next.size.rows);
-                    }
-                    catch {
-                        // 終了済みの PTY は無視する
-                    }
+                    if (session)
+                        ptyManager.resizePty(session, next.size);
                 }
                 else if (wasOwner) {
+                    // 表示中のクライアントがいなくなっても PTY のサイズはそのまま保つ。
+                    // 再表示時にサイズが同じなら replay だけで復元され、違えば resize で Claude が描き直す
                     ptyManager.scheduleGc(boundSessionId);
-                    // 次に表示されたとき Claude に描き直させるため、表示中のクライアントがいない間に
-                    // cols を縮めておく（REDRAW_BUMP_COLS 参照）
-                    const session = ptyManager.getSession(boundSessionId);
-                    if (session)
-                        bumpColsForRedraw(session);
                 }
             }
         });
@@ -350,11 +322,15 @@ export async function terminalRoutes(fastify) {
         if (!session) {
             return reply.status(404).send({ error: 'Session not found' });
         }
-        const raw = session.scrollback.join('');
+        // サイズ印は <RESIZE cols x rows> として埋め込む
+        const raw = session.scrollback
+            .map((e) => (typeof e === 'string' ? e : `<RESIZE ${e.cols}x${e.rows}>`))
+            .join('');
         // 制御文字を可視化して返す
         const visible = raw.replace(/\x1b/g, '<ESC>').replace(/\r/g, '<CR>').replace(/\n/g, '<LF>\n');
         return reply.send({
             sessionId,
+            startSize: session.scrollbackStartSize,
             chunks: session.scrollback.length,
             sizeBytes: session.scrollbackSize,
             raw: Buffer.from(raw).toString('base64'),