screen-manager-tui 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 m2kar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,141 @@
+# sm — Screen Manager
+
+SSH 登录后的交互式 GNU Screen 会话管理器。基于 Ink (React for CLI) 构建，为手机竖屏 SSH 操作优化。
+
+```
+ sm (3)
+ > 1 🌻 ● sm-0412-1249    12:49
+   2 🔥 ● llm-0412-1300   13:00
+   3 🐳 ○ work-0411-0900  09:00
+ ────────────────────────────
+   4 + sm claude
+   5 + sm
+   6 + llm claude
+   7 + llm
+ 1-9 go  jk sel  n new  x kill  r ref  q quit
+```
+
+## 安装
+
+```bash
+npm install -g screen-manager-tui
+```
+
+或从源码安装：
+
+```bash
+cd ~/sm
+npm install
+npm run build
+sudo npm link
+```
+
+## 使用
+
+```bash
+sm                          # 启动
+SM_HOME=/home/zhiqing sm    # 指定项目���目录
+```
+
+### 首页
+
+| 按键 | 操作 |
+|------|------|
+| `1`-`9` | 直接连接已有会话 / 快速新建会话 |
+| `j` `k` / `↑` `↓` | 上下选择 |
+| `Enter` | 连接选中会话 |
+| `n` | 新建会话（选择目录） |
+| `x` | 终止选中会话 |
+| `r` | 刷新列表 |
+| `q` | 退出到 Shell |
+
+首页分为两个区域：
+
+- **已有会话** — 每个会话前有基于名称哈希的固定 emoji、状态标识（`●` 可连接 / `○` 已占用 / `✕` 已死亡）
+- **快速新建** — 最近使用的 top 2 收藏目录 × 是否启动 Claude Code = 4 个选项，按数字一键创建并进入
+
+### 新建会话
+
+按 `n` 进入目录选择：
+
+| 按键 | 操作 |
+|------|------|
+| `1`-`9` / `Enter` | 选择目录 |
+| `j` `k` / `↑` `↓` | 上下选择 |
+| `Tab` / `c` | 切换 `[x] claude` 启动选项 |
+| `Esc` | 返回首页 |
+
+- 会话名自动生成：`目录名-月日-时分`（如 `sm-0412-1249`）
+- 收藏目录显示完整路径，路径过长时自动缩写（`/h/z/p/subfolder`）
+- 选择 "Other..." 可输入自定义路径，该路径自动加入收藏
+- `[x] claude` 默认开启，创建会话后自动执行 `claude` 命令
+
+### 连接已占用会话
+
+选择状态为 `○ Attached` 的会话时：
+
+| 按键 | 操作 |
+|------|------|
+| `1` | 共享会话（多屏同显） |
+| `2` | 强制接管（踢掉另一端） |
+| `Esc` | 取消 |
+
+### 核心交互循环
+
+```
+SSH 登录 → sm 启动 → 选择/新建会话 → 进入 screen
+         ↑                                    ��
+         └──── Ctrl-A D 从 screen 断开 ────────┘
+                        按 q → 退出到 Shell
+```
+
+从 screen 会话 detach 后自动回到 sm 界面，无需重新输入命令。
+
+## 收藏与排序
+
+- 新建会话和连接会话都会记录目录的使用时间
+- 自定义路径自动保存为收藏
+- 收藏按最近使用时间排序，首页快速新建始终展示 top 2
+- 数据存储在 `$SM_HOME/.sm-data.json`
+
+## SSH 自动启动
+
+在 `~/.zshrc` 末尾添加：
+
+```bash
+if [[ -n "$SSH_CLIENT" ]] && [[ -z "$STY" ]] && [[ -z "$SM_SKIP" ]] && command -v sm &>/dev/null; then
+  export SM_HOME=/home/zhiqing
+  sm
+fi
+```
+
+条件说明：
+- `$SSH_CLIENT` — 仅 SSH 会话触发
+- `$STY` — 已在 screen 中则跳过
+- `$SM_SKIP=1` — 临时跳过 sm
+
+## 技术栈
+
+- [Ink 7](https://github.com/vadimdemedes/ink) (React for CLI) + React 19 + TypeScript
+- GNU Screen 命令封装
+- ESM + Node.js 24
+
+## 项目结构
+
+```
+src/
+├── index.tsx                 # 入口 + attach/re-render 主循环
+├── app.tsx                   # App 组件，视图状态机
+├── components/
+│   ├── SessionList.tsx       # 会话列表 + 快速新建
+│   ├── NewSession.tsx        # 目录选择 + claude 开关
+│   ├── AttachModeDialog.tsx  # 已占用会话的连接方式选择
+│   ├── ConfirmDialog.tsx     # 终止确认
+│   ├── Header.tsx            # 标题栏
+│   └── Footer.tsx            # 快捷键提示
+├── hooks/
+│   └── useScreenSessions.ts  # screen 会话数据 hook
+└── utils/
+    ├── screen.ts             # screen 命令封装
+    └── dirs.ts               # 目录扫描、收藏、路径缩写、emoji
+```

package/bin/sm.js

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+import '../dist/index.js';

package/dist/app.d.ts

@@ -0,0 +1,10 @@
+export interface AttachRequest {
+    sessionId: string;
+    mode: 'reattach' | 'share' | 'takeover';
+}
+interface AppProps {
+    onAttach: (request: AttachRequest) => void;
+    onExit: () => void;
+}
+export declare function App({ onAttach, onExit }: AppProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/app.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
+import { Box } from 'ink';
+import { Header } from './components/Header.js';
+import { Footer } from './components/Footer.js';
+import { SessionList } from './components/SessionList.js';
+import { NewSession } from './components/NewSession.js';
+import { ConfirmDialog } from './components/ConfirmDialog.js';
+import { AttachModeDialog } from './components/AttachModeDialog.js';
+import { useScreenSessions } from './hooks/useScreenSessions.js';
+import { createSession, killSession, getSessionId } from './utils/screen.js';
+import { saveFavorite, generateSessionName } from './utils/dirs.js';
+export function App({ onAttach, onExit }) {
+    const [view, setView] = useState('list');
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [targetSession, setTargetSession] = useState(null);
+    const { sessions, refresh } = useScreenSessions();
+    const handleAttach = useCallback((session) => {
+        if (session.status === 'Attached') {
+            setTargetSession(session);
+            setView('attach-mode');
+        }
+        else if (session.status === 'Detached') {
+            onAttach({ sessionId: getSessionId(session), mode: 'reattach' });
+        }
+    }, [onAttach]);
+    const handleQuickCreate = useCallback((req) => {
+        const name = generateSessionName(req.dirPath);
+        createSession(name, req.dirPath, req.runClaude);
+        saveFavorite(req.dirPath); // also updates lastUsed
+        refresh();
+        // Find the newly created session and attach to it
+        const updated = sessions;
+        // The new session won't be in the current `sessions` yet, but we know its name
+        // We'll attach by name pattern — refresh first, then find it
+        // Simpler: just attach directly by the name we just created
+        onAttach({ sessionId: name, mode: 'reattach' });
+    }, [onAttach, refresh, sessions]);
+    const handleRequestKill = useCallback((session) => {
+        setTargetSession(session);
+        setView('confirm-kill');
+    }, []);
+    const handleKillConfirm = useCallback(() => {
+        if (targetSession) {
+            killSession(getSessionId(targetSession));
+            refresh();
+            setSelectedIndex((prev) => Math.max(0, Math.min(prev, sessions.length - 2)));
+        }
+        setView('list');
+        setTargetSession(null);
+    }, [targetSession, refresh, sessions.length]);
+    const handleNewSession = useCallback((name, cwd, runClaude) => {
+        createSession(name, cwd, runClaude);
+        saveFavorite(cwd);
+        refresh();
+        setView('list');
+        setSelectedIndex(0);
+    }, [refresh]);
+    const handleRefresh = useCallback(() => {
+        refresh();
+    }, [refresh]);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Header, { sessionCount: sessions.length }), _jsxs(Box, { flexDirection: "column", minHeight: 3, children: [view === 'list' && (_jsx(SessionList, { sessions: sessions, selectedIndex: selectedIndex, onSelect: setSelectedIndex, onAttach: handleAttach, onQuickCreate: handleQuickCreate, onRequestNew: () => setView('new'), onRequestKill: handleRequestKill, onRefresh: handleRefresh, onQuit: onExit, active: view === 'list' })), view === 'new' && (_jsx(NewSession, { onSubmit: handleNewSession, onCancel: () => setView('list'), active: view === 'new' })), view === 'confirm-kill' && targetSession && (_jsx(ConfirmDialog, { sessionName: targetSession.name, onConfirm: handleKillConfirm, onCancel: () => {
+                            setView('list');
+                            setTargetSession(null);
+                        }, active: view === 'confirm-kill' })), view === 'attach-mode' && targetSession && (_jsx(AttachModeDialog, { sessionName: targetSession.name, onShare: () => onAttach({ sessionId: getSessionId(targetSession), mode: 'share' }), onTakeover: () => onAttach({ sessionId: getSessionId(targetSession), mode: 'takeover' }), onCancel: () => {
+                            setView('list');
+                            setTargetSession(null);
+                        }, active: view === 'attach-mode' }))] }), _jsx(Footer, { view: view })] }));
+}

package/dist/components/AttachModeDialog.d.ts

@@ -0,0 +1,9 @@
+interface AttachModeDialogProps {
+    sessionName: string;
+    onShare: () => void;
+    onTakeover: () => void;
+    onCancel: () => void;
+    active: boolean;
+}
+export declare function AttachModeDialog({ sessionName, onShare, onTakeover, onCancel, active, }: AttachModeDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/AttachModeDialog.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+export function AttachModeDialog({ sessionName, onShare, onTakeover, onCancel, active, }) {
+    useInput((input, key) => {
+        if (input === '1') {
+            onShare();
+        }
+        else if (input === '2') {
+            onTakeover();
+        }
+        else if (key.escape) {
+            onCancel();
+        }
+    }, { isActive: active });
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, paddingY: 1, children: [_jsxs(Text, { children: ["Session ", _jsx(Text, { bold: true, color: "yellow", children: sessionName }), " is already attached."] }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, color: "white", children: "1" }), " Share session (multi-display)"] }), _jsxs(Text, { children: [_jsx(Text, { bold: true, color: "white", children: "2" }), " Take over (detach other client)"] })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Esc to cancel" }) })] }));
+}

package/dist/components/ConfirmDialog.d.ts

@@ -0,0 +1,8 @@
+interface ConfirmDialogProps {
+    sessionName: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+    active: boolean;
+}
+export declare function ConfirmDialog({ sessionName, onConfirm, onCancel, active }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ConfirmDialog.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+export function ConfirmDialog({ sessionName, onConfirm, onCancel, active }) {
+    useInput((input, key) => {
+        if (input === 'y') {
+            onConfirm();
+        }
+        else if (input === 'n' || key.escape) {
+            onCancel();
+        }
+    }, { isActive: active });
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, paddingY: 1, children: [_jsxs(Text, { children: ["Kill session ", _jsx(Text, { bold: true, color: "red", children: sessionName }), "?"] }), _jsx(Text, { dimColor: true, children: "This will terminate all processes inside it." }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "[y] yes  [n] no" }) })] }));
+}

package/dist/components/Footer.d.ts

@@ -0,0 +1,5 @@
+interface FooterProps {
+    view: string;
+}
+export declare function Footer({ view }: FooterProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/Footer.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+function Hint({ k, label }) {
+    return (_jsxs(Text, { dimColor: true, children: [_jsx(Text, { bold: true, color: "white", children: k }), label] }));
+}
+export function Footer({ view }) {
+    if (view === 'list') {
+        return (_jsxs(Box, { paddingX: 1, gap: 1, flexWrap: "wrap", children: [_jsx(Hint, { k: "1-9", label: " go" }), _jsx(Hint, { k: "jk", label: " sel" }), _jsx(Hint, { k: "n", label: " new" }), _jsx(Hint, { k: "x", label: " kill" }), _jsx(Hint, { k: "r", label: " ref" }), _jsx(Hint, { k: "q", label: " quit" })] }));
+    }
+    if (view === 'new') {
+        return (_jsxs(Box, { paddingX: 1, gap: 1, flexWrap: "wrap", children: [_jsx(Hint, { k: "1-9", label: " pick" }), _jsx(Hint, { k: "jk", label: " sel" }), _jsx(Hint, { k: "Tab", label: " claude" }), _jsx(Hint, { k: "Esc", label: " back" })] }));
+    }
+    if (view === 'confirm-kill') {
+        return (_jsxs(Box, { paddingX: 1, gap: 1, children: [_jsx(Hint, { k: "y", label: " yes" }), _jsx(Hint, { k: "n", label: " no" })] }));
+    }
+    if (view === 'attach-mode') {
+        return (_jsxs(Box, { paddingX: 1, gap: 1, flexWrap: "wrap", children: [_jsx(Hint, { k: "1", label: " share" }), _jsx(Hint, { k: "2", label: " take" }), _jsx(Hint, { k: "Esc", label: " back" })] }));
+    }
+    return null;
+}

package/dist/components/Header.d.ts

@@ -0,0 +1,5 @@
+interface HeaderProps {
+    sessionCount: number;
+}
+export declare function Header({ sessionCount }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Header.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+export function Header({ sessionCount }) {
+    return (_jsxs(Box, { paddingX: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "sm" }), _jsxs(Text, { dimColor: true, children: [' ', "(", sessionCount, ")"] })] }));
+}

package/dist/components/NewSession.d.ts

@@ -0,0 +1,7 @@
+interface NewSessionProps {
+    onSubmit: (name: string, cwd: string, runClaude: boolean) => void;
+    onCancel: () => void;
+    active: boolean;
+}
+export declare function NewSession({ onSubmit, onCancel, active }: NewSessionProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/NewSession.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { TextInput } from '@inkjs/ui';
+import { getProjectDirs, getHome, generateSessionName, saveFavorite, shortenPath, } from '../utils/dirs.js';
+export function NewSession({ onSubmit, onCancel, active }) {
+    const [step, setStep] = useState('dir');
+    const [dirs] = useState(() => getProjectDirs());
+    const [dirIndex, setDirIndex] = useState(0);
+    const [runClaude, setRunClaude] = useState(true);
+    // Items: home + dirs + "Other..."
+    const totalItems = 1 + dirs.length + 1;
+    const termWidth = process.stdout.columns || 40;
+    // Reserve space for "> 1 * " prefix (~8 chars) + name + " (" + path + ")"
+    const prefixLen = 8;
+    useInput((input, key) => {
+        if (key.escape) {
+            if (step === 'custom-path') {
+                setStep('dir');
+            }
+            else {
+                onCancel();
+            }
+            return;
+        }
+        if (step !== 'dir')
+            return;
+        if (key.upArrow || input === 'k') {
+            setDirIndex((i) => Math.max(0, i - 1));
+        }
+        else if (key.downArrow || input === 'j') {
+            setDirIndex((i) => Math.min(totalItems - 1, i + 1));
+        }
+        else if (key.tab || input === 'c') {
+            setRunClaude((v) => !v);
+        }
+        else if (input >= '1' && input <= '9') {
+            const idx = parseInt(input, 10) - 1;
+            if (idx < totalItems) {
+                selectDir(idx);
+            }
+        }
+        else if (key.return) {
+            selectDir(dirIndex);
+        }
+    }, { isActive: active });
+    function selectDir(idx) {
+        let dirPath;
+        if (idx === 0) {
+            dirPath = getHome();
+        }
+        else if (idx <= dirs.length) {
+            dirPath = dirs[idx - 1].path;
+        }
+        else {
+            setStep('custom-path');
+            return;
+        }
+        const name = generateSessionName(dirPath);
+        onSubmit(name, dirPath, runClaude);
+    }
+    function handleCustomPathSubmit(value) {
+        const trimmed = value.trim();
+        if (!trimmed)
+            return;
+        saveFavorite(trimmed);
+        const name = generateSessionName(trimmed);
+        onSubmit(name, trimmed, runClaude);
+    }
+    function formatDirLabel(dir) {
+        const name = dir.name;
+        if (!dir.favorite) {
+            return `~/${name}`;
+        }
+        // Favorite: show "name (path)"
+        // Calculate available space for path
+        const baseLen = prefixLen + name.length + 3; // " (" + ")"
+        const maxPathLen = termWidth - baseLen;
+        if (maxPathLen < 8) {
+            // Too narrow, just show name
+            return name;
+        }
+        const pathDisplay = shortenPath(dir.path, maxPathLen);
+        return `${name} (${pathDisplay})`;
+    }
+    if (step === 'custom-path') {
+        return (_jsxs(Box, { flexDirection: "column", paddingX: 1, paddingY: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "New Session" }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { children: "Path: " }), active && (_jsx(TextInput, { placeholder: "/path/to/project", onSubmit: handleCustomPathSubmit }))] }), _jsx(Text, { dimColor: true, children: "Saved to favorites." })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, paddingY: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "New Session" }), _jsxs(Box, { flexDirection: "column", children: [_jsx(DirRow, { index: 0, selected: dirIndex === 0, label: "~" }), dirs.map((dir, i) => {
+                        const idx = i + 1;
+                        return (_jsx(DirRow, { index: idx, selected: dirIndex === idx, label: formatDirLabel(dir), favorite: dir.favorite }, dir.path));
+                    }), _jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "gray", children: dirIndex === totalItems - 1 ? '>' : ' ' }), _jsx(Text, { dimColor: true, children: " " }), _jsx(Text, { bold: dirIndex === totalItems - 1, dimColor: dirIndex !== totalItems - 1, children: "Other..." })] })] }), _jsxs(Box, { marginTop: 1, gap: 1, children: [_jsx(Text, { color: runClaude ? 'green' : 'gray', children: runClaude ? '[x]' : '[ ]' }), _jsx(Text, { bold: runClaude, dimColor: !runClaude, children: "claude" }), _jsx(Text, { dimColor: true, children: "(Tab)" })] })] }));
+}
+function DirRow({ index, selected, label, favorite, }) {
+    const num = index < 9 ? `${index + 1}` : ' ';
+    return (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "gray", children: selected ? '>' : ' ' }), _jsx(Text, { dimColor: true, children: num }), favorite ? _jsx(Text, { color: "yellow", children: "*" }) : null, _jsx(Text, { bold: selected, children: label })] }));
+}

package/dist/components/SessionList.d.ts

@@ -0,0 +1,19 @@
+import type { ScreenSession } from '../utils/screen.js';
+export interface QuickCreateRequest {
+    dirPath: string;
+    runClaude: boolean;
+}
+interface SessionListProps {
+    sessions: ScreenSession[];
+    selectedIndex: number;
+    onSelect: (index: number) => void;
+    onAttach: (session: ScreenSession) => void;
+    onQuickCreate: (req: QuickCreateRequest) => void;
+    onRequestNew: () => void;
+    onRequestKill: (session: ScreenSession) => void;
+    onRefresh: () => void;
+    onQuit: () => void;
+    active: boolean;
+}
+export declare function SessionList({ sessions, selectedIndex, onSelect, onAttach, onQuickCreate, onRequestNew, onRequestKill, onRefresh, onQuit, active, }: SessionListProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SessionList.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { getSessionId } from '../utils/screen.js';
+import { getTopFavorites, emojiForName } from '../utils/dirs.js';
+const STATUS = {
+    Detached: { icon: '●', color: 'green' },
+    Attached: { icon: '○', color: 'yellow' },
+    Dead: { icon: '✕', color: 'red' },
+};
+function shortDate(dateStr) {
+    const parts = dateStr.split(' ');
+    if (parts.length >= 2) {
+        return parts[1].split(':').slice(0, 2).join(':');
+    }
+    return dateStr;
+}
+function buildQuickItems(topFavs) {
+    const items = [];
+    for (const fav of topFavs) {
+        items.push({ dirPath: fav.path, runClaude: true });
+        items.push({ dirPath: fav.path, runClaude: false });
+    }
+    return items;
+}
+export function SessionList({ sessions, selectedIndex, onSelect, onAttach, onQuickCreate, onRequestNew, onRequestKill, onRefresh, onQuit, active, }) {
+    const [topFavs] = useState(() => getTopFavorites(2));
+    const quickItems = buildQuickItems(topFavs);
+    const totalItems = sessions.length + quickItems.length;
+    const termWidth = process.stdout.columns || 40;
+    useInput((input, key) => {
+        if (key.upArrow || input === 'k') {
+            onSelect(Math.max(0, selectedIndex - 1));
+        }
+        else if (key.downArrow || input === 'j') {
+            onSelect(Math.min(totalItems - 1, selectedIndex + 1));
+        }
+        else if (key.return && totalItems > 0) {
+            handleSelect(selectedIndex);
+        }
+        else if (input === 'n') {
+            onRequestNew();
+        }
+        else if (input === 'x' && selectedIndex < sessions.length && sessions.length > 0) {
+            onRequestKill(sessions[selectedIndex]);
+        }
+        else if (input === 'r') {
+            onRefresh();
+        }
+        else if (input === 'q') {
+            onQuit();
+        }
+        else if (input >= '1' && input <= '9') {
+            const idx = parseInt(input, 10) - 1;
+            if (idx < totalItems) {
+                handleSelect(idx);
+            }
+        }
+    }, { isActive: active });
+    function handleSelect(idx) {
+        if (idx < sessions.length) {
+            onAttach(sessions[idx]);
+        }
+        else {
+            const qIdx = idx - sessions.length;
+            if (qIdx < quickItems.length) {
+                onQuickCreate(quickItems[qIdx]);
+            }
+        }
+    }
+    const hasNothing = sessions.length === 0 && quickItems.length === 0;
+    if (hasNothing) {
+        return (_jsxs(Box, { paddingX: 1, paddingY: 1, children: [_jsx(Text, { dimColor: true, children: "No sessions. " }), _jsx(Text, { bold: true, color: "white", children: "n" }), _jsx(Text, { dimColor: true, children: " to create." })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [sessions.map((session, i) => {
+                const sel = i === selectedIndex;
+                const { icon, color } = STATUS[session.status] || STATUS.Dead;
+                const num = i < 9 ? `${i + 1}` : ' ';
+                const emoji = emojiForName(session.name);
+                return (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "gray", children: sel ? '>' : ' ' }), _jsx(Text, { dimColor: true, children: num }), _jsx(Text, { children: emoji }), _jsx(Text, { color: color, children: icon }), _jsx(Text, { bold: sel, children: session.name }), _jsx(Text, { dimColor: true, children: shortDate(session.date) })] }, getSessionId(session)));
+            }), sessions.length > 0 && quickItems.length > 0 && (_jsx(Box, { paddingX: 0, children: _jsx(Text, { dimColor: true, children: '─'.repeat(Math.min(termWidth - 4, 36)) }) })), quickItems.map((item, qi) => {
+                const globalIdx = sessions.length + qi;
+                const sel = globalIdx === selectedIndex;
+                const num = globalIdx < 9 ? `${globalIdx + 1}` : ' ';
+                const dirName = item.dirPath.split('/').pop() || item.dirPath;
+                const claudeTag = item.runClaude ? ' claude' : '';
+                return (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "gray", children: sel ? '>' : ' ' }), _jsx(Text, { dimColor: true, children: num }), _jsx(Text, { color: "magenta", children: "+" }), _jsxs(Text, { bold: sel, children: [dirName, claudeTag] })] }, `qc-${item.dirPath}-${item.runClaude}`));
+            })] }));
+}

package/dist/hooks/useScreenSessions.d.ts

@@ -0,0 +1,6 @@
+import { type ScreenSession } from '../utils/screen.js';
+export declare function useScreenSessions(): {
+    sessions: ScreenSession[];
+    error: string | null;
+    refresh: () => void;
+};

package/dist/hooks/useScreenSessions.js

@@ -0,0 +1,26 @@
+import { useState, useEffect, useCallback } from 'react';
+import { listSessions } from '../utils/screen.js';
+export function useScreenSessions() {
+    const [sessions, setSessions] = useState(() => {
+        try {
+            return listSessions();
+        }
+        catch {
+            return [];
+        }
+    });
+    const [error, setError] = useState(null);
+    const refresh = useCallback(() => {
+        try {
+            setSessions(listSessions());
+            setError(null);
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : 'Failed to list sessions');
+        }
+    }, []);
+    useEffect(() => {
+        refresh();
+    }, [refresh]);
+    return { sessions, error, refresh };
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from 'ink';
+import { spawnSync } from 'node:child_process';
+import { App } from './app.js';
+import { isInsideScreen, isScreenInstalled } from './utils/screen.js';
+import { touchFavoriteBySessionName } from './utils/dirs.js';
+// Guard: already inside screen
+if (isInsideScreen()) {
+    console.log('Already inside a screen session. Run `screen -ls` to see sessions.');
+    process.exit(0);
+}
+// Guard: screen not installed
+if (!isScreenInstalled()) {
+    console.error('GNU Screen is not installed. Install with: sudo apt install screen');
+    process.exit(1);
+}
+function runTui() {
+    return new Promise((resolve) => {
+        const { unmount, waitUntilExit } = render(_jsx(App, { onAttach: (request) => {
+                resolve(request);
+                unmount();
+            }, onExit: () => {
+                resolve(null);
+                unmount();
+            } }));
+        waitUntilExit().then(() => resolve(null));
+    });
+}
+function extractSessionName(sessionId) {
+    // "12345.my-session" -> "my-session", or just "my-session" -> "my-session"
+    const dotIdx = sessionId.indexOf('.');
+    return dotIdx >= 0 ? sessionId.slice(dotIdx + 1) : sessionId;
+}
+// Main loop
+while (true) {
+    const result = await runTui();
+    if (!result)
+        break;
+    touchFavoriteBySessionName(extractSessionName(result.sessionId));
+    let args;
+    switch (result.mode) {
+        case 'share':
+            args = ['-x', result.sessionId];
+            break;
+        case 'takeover':
+            args = ['-d', '-r', result.sessionId];
+            break;
+        case 'reattach':
+        default:
+            args = ['-r', result.sessionId];
+            break;
+    }
+    spawnSync('screen', args, { stdio: 'inherit' });
+}

package/dist/utils/dirs.d.ts

@@ -0,0 +1,19 @@
+export interface FavoriteEntry {
+    path: string;
+    lastUsed: number;
+}
+export interface ProjectDir {
+    name: string;
+    path: string;
+    favorite?: boolean;
+}
+export declare function getHome(): string;
+export declare function loadFavorites(): FavoriteEntry[];
+export declare function saveFavorite(dirPath: string): void;
+export declare function touchFavorite(dirPath: string): void;
+export declare function getTopFavorites(n: number): FavoriteEntry[];
+export declare function shortenPath(fullPath: string, maxLen: number): string;
+export declare function getProjectDirs(): ProjectDir[];
+export declare function touchFavoriteBySessionName(sessionName: string): void;
+export declare function emojiForName(name: string): string;
+export declare function generateSessionName(dirPath: string): string;

package/dist/utils/dirs.js

@@ -0,0 +1,196 @@
+import { readdirSync, readFileSync, writeFileSync, statSync } from 'node:fs';
+import { join, basename, sep } from 'node:path';
+import { homedir } from 'node:os';
+const EXCLUDED_DIRS = new Set([
+    'miniconda3',
+    'anaconda3',
+    '.nvm',
+    '.npm',
+    '.cache',
+    '.local',
+    '.config',
+    '.oh-my-zsh',
+    '.claude',
+    'node_modules',
+    '.vscode-server',
+    '.cursor-server',
+]);
+export function getHome() {
+    return process.env.SM_HOME || homedir();
+}
+function getDataPath() {
+    return join(getHome(), '.sm-data.json');
+}
+// --- Data persistence (favorites with lastUsed) ---
+function loadData() {
+    try {
+        const raw = readFileSync(getDataPath(), 'utf-8');
+        const parsed = JSON.parse(raw);
+        // Migrate old format (string[]) to new format
+        if (Array.isArray(parsed) && parsed.length > 0) {
+            if (typeof parsed[0] === 'string') {
+                return parsed.map((p) => ({ path: p, lastUsed: 0 }));
+            }
+            return parsed;
+        }
+    }
+    catch {
+        // Also try old file for migration
+        try {
+            const old = readFileSync(join(getHome(), '.sm-favorites.json'), 'utf-8');
+            const arr = JSON.parse(old);
+            if (Array.isArray(arr)) {
+                return arr.map((p) => ({ path: p, lastUsed: 0 }));
+            }
+        }
+        catch {
+            // ignore
+        }
+    }
+    return [];
+}
+function saveData(entries) {
+    try {
+        writeFileSync(getDataPath(), JSON.stringify(entries, null, 2));
+    }
+    catch {
+        // ignore
+    }
+}
+export function loadFavorites() {
+    return loadData().sort((a, b) => b.lastUsed - a.lastUsed);
+}
+export function saveFavorite(dirPath) {
+    const entries = loadData();
+    const existing = entries.find((e) => e.path === dirPath);
+    if (existing) {
+        existing.lastUsed = Date.now();
+    }
+    else {
+        entries.push({ path: dirPath, lastUsed: Date.now() });
+    }
+    saveData(entries);
+}
+export function touchFavorite(dirPath) {
+    const entries = loadData();
+    const existing = entries.find((e) => e.path === dirPath);
+    if (existing) {
+        existing.lastUsed = Date.now();
+        saveData(entries);
+    }
+}
+export function getTopFavorites(n) {
+    return loadFavorites()
+        .filter((e) => {
+        try {
+            statSync(e.path);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    })
+        .slice(0, n);
+}
+// --- Path display helpers ---
+export function shortenPath(fullPath, maxLen) {
+    if (fullPath.length <= maxLen)
+        return fullPath;
+    const home = getHome();
+    let display = fullPath;
+    if (fullPath.startsWith(home)) {
+        display = '~' + fullPath.slice(home.length);
+    }
+    if (display.length <= maxLen)
+        return display;
+    // Abbreviate: /home/user/projects/subfolder -> /h/u/p/subfolder
+    const parts = fullPath.split(sep).filter(Boolean);
+    if (parts.length <= 1)
+        return display;
+    // Keep last part full, abbreviate earlier parts to first char
+    const last = parts[parts.length - 1];
+    const abbreviated = parts.slice(0, -1).map((p) => p[0]);
+    const result = sep + abbreviated.join(sep) + sep + last;
+    return result.length <= maxLen ? result : last;
+}
+// --- Project directory listing ---
+export function getProjectDirs() {
+    const home = getHome();
+    const favorites = loadFavorites();
+    const favPaths = new Set(favorites.map((f) => f.path));
+    const dirs = [];
+    // Favorites first, sorted by lastUsed (already sorted)
+    for (const fav of favorites) {
+        try {
+            statSync(fav.path);
+            dirs.push({ name: basename(fav.path), path: fav.path, favorite: true });
+        }
+        catch {
+            // skip non-existent
+        }
+    }
+    // Home subdirectories (excluding favorites)
+    try {
+        const entries = readdirSync(home, { withFileTypes: true });
+        for (const entry of entries) {
+            if (!entry.isDirectory())
+                continue;
+            if (entry.name.startsWith('.'))
+                continue;
+            if (EXCLUDED_DIRS.has(entry.name))
+                continue;
+            const fullPath = join(home, entry.name);
+            if (favPaths.has(fullPath))
+                continue;
+            try {
+                statSync(fullPath);
+                dirs.push({ name: entry.name, path: fullPath });
+            }
+            catch {
+                // skip
+            }
+        }
+    }
+    catch {
+        // ignore
+    }
+    return dirs;
+}
+export function touchFavoriteBySessionName(sessionName) {
+    // Session names are "dirname-MMDD-HHMM"
+    const match = sessionName.match(/^(.+)-\d{4}-\d{4}$/);
+    if (!match)
+        return;
+    const dirName = match[1];
+    const entries = loadData();
+    const found = entries.find((e) => basename(e.path) === dirName);
+    if (found) {
+        found.lastUsed = Date.now();
+        saveData(entries);
+    }
+}
+const EMOJIS = [
+    '🚀', '⚡', '🔥', '💎', '🌟', '🎯', '🧪', '🔬', '🛠️', '🎨',
+    '🌊', '🍀', '🦊', '🐙', '🦋', '🐝', '🌵', '🍄', '🎲', '🧩',
+    '🏔️', '🌈', '☕', '🎸', '🔮', '🧲', '💡', '📡', '🛸', '🤖',
+    '🐳', '🦉', '🐺', '🐢', '🦎', '🌻', '🍊', '🫐', '🥝', '🧊',
+];
+function hashString(str) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        hash = ((hash << 5) - hash + str.charCodeAt(i)) | 0;
+    }
+    return Math.abs(hash);
+}
+export function emojiForName(name) {
+    return EMOJIS[hashString(name) % EMOJIS.length];
+}
+export function generateSessionName(dirPath) {
+    const dirName = basename(dirPath);
+    const now = new Date();
+    const mm = String(now.getMonth() + 1).padStart(2, '0');
+    const dd = String(now.getDate()).padStart(2, '0');
+    const hh = String(now.getHours()).padStart(2, '0');
+    const mi = String(now.getMinutes()).padStart(2, '0');
+    return `${dirName}-${mm}${dd}-${hh}${mi}`;
+}

package/dist/utils/screen.d.ts

@@ -0,0 +1,12 @@
+export interface ScreenSession {
+    pid: number;
+    name: string;
+    date: string;
+    status: 'Attached' | 'Detached' | 'Dead';
+}
+export declare function listSessions(): ScreenSession[];
+export declare function createSession(name: string, cwd?: string, runClaude?: boolean): void;
+export declare function killSession(id: string): void;
+export declare function isInsideScreen(): boolean;
+export declare function isScreenInstalled(): boolean;
+export declare function getSessionId(session: ScreenSession): string;

package/dist/utils/screen.js

@@ -0,0 +1,42 @@
+import { spawnSync } from 'node:child_process';
+import { homedir } from 'node:os';
+export function listSessions() {
+    const result = spawnSync('screen', ['-ls'], { encoding: 'utf-8' });
+    const output = result.stdout || result.stderr || '';
+    const sessions = [];
+    const regex = /^\t(\d+)\.(.+?)\t\((.+?)\)\t\((\w+)\)/gm;
+    let match;
+    while ((match = regex.exec(output)) !== null) {
+        sessions.push({
+            pid: parseInt(match[1], 10),
+            name: match[2],
+            date: match[3],
+            status: match[4],
+        });
+    }
+    return sessions;
+}
+export function createSession(name, cwd, runClaude) {
+    const targetCwd = cwd || process.env.SM_HOME || homedir();
+    if (runClaude) {
+        // Create session and send the claude command into it
+        spawnSync('screen', ['-dmS', name], { cwd: targetCwd, stdio: 'ignore' });
+        spawnSync('screen', ['-S', name, '-X', 'stuff', 'claude\n'], { stdio: 'ignore' });
+    }
+    else {
+        spawnSync('screen', ['-dmS', name], { cwd: targetCwd, stdio: 'ignore' });
+    }
+}
+export function killSession(id) {
+    spawnSync('screen', ['-X', '-S', id, 'quit'], { stdio: 'ignore' });
+}
+export function isInsideScreen() {
+    return !!process.env.STY;
+}
+export function isScreenInstalled() {
+    const result = spawnSync('screen', ['--version'], { encoding: 'utf-8' });
+    return result.status === 0 || (result.stderr || '').includes('Screen version');
+}
+export function getSessionId(session) {
+    return `${session.pid}.${session.name}`;
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "screen-manager-tui",
+  "version": "1.0.0",
+  "description": "Screen Manager TUI - Interactive GNU Screen session management tool with React-based terminal UI",
+  "type": "module",
+  "bin": {
+    "sm": "bin/sm.js"
+  },
+  "files": [
+    "bin/",
+    "dist/",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "start": "node bin/sm.js",
+    "prepublishOnly": "tsc"
+  },
+  "keywords": [
+    "screen",
+    "gnu-screen",
+    "session-manager",
+    "tui",
+    "terminal",
+    "ink",
+    "cli",
+    "ssh"
+  ],
+  "author": "m2kar <zhiqing.rui@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/m2kar/sm.git"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "@inkjs/ui": "^2.0.0",
+    "ink": "^7.0.0",
+    "react": "^19.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.6.0",
+    "@types/react": "^19.2.0",
+    "typescript": "^5.8.0"
+  }
+}