Skip to content

Commit 0ca4f87

Browse files
authored
feat: docs accuracy, side panel UX, SW font caching, test coverage (#22)
## Summary Quality and polish improvements across documentation, UI, caching, and test coverage. ### Documentation - Fixed inaccurate \SHELL\ env var default (\/bin/zsh\ → \/bin/sh\, documented as fallback) - Added missing \COMSPEC\ (Windows) env var documentation - Fixed \--password\ flag docs to include \--password=<pw>\ syntax - Updated prerequisites: Windows native support (not just WSL) - Added \cmd\ field to \GET /api/shells\ response schema - Architecture: added missing files (sw.js, manifest.json, icons/, 3 test files) - Architecture: expanded module descriptions (cli.js, sessions.js, websocket.js, routes.js) - README: updated env var list and Windows support ### Side Panel (mobile) - Widened from 320px → 380px for better readability - Added **close (×) button** on each session card to delete sessions directly from sidebar - Added **\"+ New Session\"** button pinned at the bottom - Added \safe-area-inset\ padding (top, left, bottom) for iPhone PWA rounded corners ### Service Worker - CDN font files (NerdFont \.ttf\ from jsdelivr) are now cached with a cache-first strategy - Previously skipped as external-origin requests — fonts re-downloaded on every reconnect - Cache version bumped to v2 ### Test Coverage - **79.22% → 89.6% statements** (427/539 → 483/539) - **90.47% → 95.83% functions** - \shells.js\: 49% → 96% — added mocked Unix shell detection tests - \cli.js\: 60% → 85% — added env var, printHelp, shell args, flag override tests - Exported \detectUnixShells\/\detectWindowsShells\ for testability ### All 83 tests passing ✓
1 parent 5c88093 commit 0ca4f87

18 files changed

Lines changed: 2277 additions & 545 deletions

README.md

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,18 @@ termbeam --password mysecret
4141

4242
## Features
4343

44-
- **Mobile-first UI** with on-screen touch bar (arrow keys, Tab, Ctrl shortcuts, Esc) and swipe-to-delete session management
45-
- **Multiple sessions** running simultaneously, managed from a single hub page — shows connected client count per session
44+
- **Mobile-first UI** with on-screen touch bar (arrow keys, Tab, Enter, Ctrl shortcuts, Esc) and touch-optimized controls
45+
- **Tabbed multi-session terminal** — open, switch, and manage multiple sessions from a single tab bar with drag-to-reorder
46+
- **Split view** — view two sessions side-by-side (horizontal on desktop, vertical on mobile)
47+
- **Session colors** — assign a color to each session for quick identification
48+
- **Activity indicators** — see how recently each session had output (e.g. "3s ago", "5m ago")
49+
- **Tab previews** — hover (desktop) or long-press (mobile) a tab to preview the last few lines of output
50+
- **Side panel** (mobile) — slide-out session list with output previews for quick switching
51+
- **Create sessions anywhere** — new session modal available from both the hub page and the terminal page
52+
- **Touch scrolling** — swipe to scroll through terminal history
53+
- **Share button** — share the TermBeam URL via Web Share API, clipboard, or legacy copy fallback (works over HTTP)
54+
- **Refresh button** — clear PWA/service worker cache and reload to get the latest version
55+
- **iPhone PWA safe area** — full support for `viewport-fit=cover` and safe area insets on notched devices
4656
- **Password auth** with token-based cookies and rate-limited login
4757
- **Folder browser** to pick working directories without typing paths
4858
- **Initial command** — optionally launch a session straight into `htop`, `vim`, or any command
@@ -80,14 +90,14 @@ termbeam --host 127.0.0.1 # restrict to localhost (default: 0.0.0.0)
8090

8191
| Flag | Description | Default |
8292
| --------------------- | ---------------------------------------- | ----------- |
83-
| `--password <pw>` | Set access password | None |
93+
| `--password <pw>` | Set access password (also accepts `--password=<pw>`) | None |
8494
| `--generate-password` | Auto-generate a secure password ||
8595
| `--tunnel` | Create an ephemeral devtunnel URL | Off |
8696
| `--persisted-tunnel` | Create a reusable devtunnel URL | Off |
8797
| `--port <port>` | Server port | `3456` |
8898
| `--host <addr>` | Bind address | `0.0.0.0` |
8999

90-
Environment variables: `PORT`, `TERMBEAM_PASSWORD`, `TERMBEAM_CWD` (see [Configuration docs](https://dorlugasigal.github.io/TermBeam/configuration/)).
100+
Environment variables: `PORT`, `TERMBEAM_PASSWORD`, `TERMBEAM_CWD`, `SHELL` (Unix fallback), `COMSPEC` (Windows fallback). See [Configuration docs](https://dorlugasigal.github.io/TermBeam/configuration/).
91101

92102
## Security
93103

docs/api.md

Lines changed: 49 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -60,9 +60,16 @@ List all active sessions.
6060
"shell": "/bin/zsh",
6161
"pid": 12345,
6262
"clients": 1,
63-
"createdAt": "2025-01-01T00:00:00.000Z"
63+
"createdAt": "2025-01-01T00:00:00.000Z",
64+
"color": "#4a9eff",
65+
"lastActivity": 1719849600000
6466
}
6567
]
68+
69+
| Field | Type | Description |
70+
| -------------- | ------ | ---------------------------------------------- |
71+
| `color` | string | Hex color assigned to the session |
72+
| `lastActivity` | number | Unix timestamp (ms) of the last PTY output |
6673
```
6774

6875
#### `POST /api/sessions`
@@ -77,11 +84,12 @@ Create a new session.
7784
"shell": "/bin/bash",
7885
"args": ["-l"],
7986
"cwd": "/home/user",
80-
"initialCommand": "htop"
87+
"initialCommand": "htop",
88+
"color": "#4ade80"
8189
}
8290
```
8391

84-
All fields are optional. If `initialCommand` is provided, it will be sent to the shell after startup.
92+
All fields are optional. If `initialCommand` is provided, it will be sent to the shell after startup. If `color` is omitted, a color is assigned automatically from a built-in palette.
8593

8694
**Response:**
8795

@@ -92,6 +100,35 @@ All fields are optional. If `initialCommand` is provided, it will be sent to the
92100
}
93101
```
94102

103+
#### `PATCH /api/sessions/:id`
104+
105+
Update session properties.
106+
107+
**Request:**
108+
109+
```json
110+
{
111+
"color": "#f87171",
112+
"name": "renamed-session"
113+
}
114+
```
115+
116+
All fields are optional.
117+
118+
**Response (200):**
119+
120+
```json
121+
{ "ok": true }
122+
```
123+
124+
**Response (404):**
125+
126+
```json
127+
{ "error": "not found" }
128+
```
129+
130+
---
131+
95132
#### `DELETE /api/sessions/:id`
96133

97134
Kill and remove a session.
@@ -117,13 +154,20 @@ List available shells on the host system.
117154
```json
118155
{
119156
"shells": [
120-
{ "name": "bash", "path": "/bin/bash" },
121-
{ "name": "zsh", "path": "/bin/zsh" }
157+
{ "name": "bash", "path": "/bin/bash", "cmd": "/bin/bash" },
158+
{ "name": "zsh", "path": "/bin/zsh", "cmd": "/bin/zsh" }
122159
],
123160
"default": "/bin/zsh"
124161
}
125162
```
126163

164+
| Field | Type | Description |
165+
| ------ | ------ | ------------------------------------------------------------------ |
166+
| `name` | string | Display name of the shell |
167+
| `path` | string | Full path to the shell executable |
168+
| `cmd` | string | Original command name (on Windows this differs from the full path) |
169+
```
170+
127171
---
128172
129173
### Utilities

docs/architecture.md

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,17 @@ termbeam/
1717
│ └── version.js # Smart version detection
1818
├── public/
1919
│ ├── index.html # Session manager (mobile UI)
20-
│ └── terminal.html # Terminal view (xterm.js)
20+
│ ├── terminal.html # Terminal view (xterm.js)
21+
│ ├── sw.js # Service worker (PWA caching)
22+
│ ├── manifest.json # Web app manifest
23+
│ └── icons/ # PWA icons
2124
├── test/
22-
│ ├── cli.test.js
2325
│ ├── auth.test.js
24-
│ └── sessions.test.js
26+
│ ├── cli.test.js
27+
│ ├── sessions.test.js
28+
│ ├── shells.test.js
29+
│ ├── version.test.js
30+
│ └── websocket.test.js
2531
├── docs/ # MkDocs documentation
2632
├── package.json
2733
└── mkdocs.yml
@@ -35,23 +41,23 @@ Wires all modules together. Creates the Express app, HTTP server, WebSocket serv
3541

3642
### `cli.js` — CLI Interface
3743

38-
Parses command-line arguments and environment variables. Returns a config object used by all other modules.
44+
Parses command-line arguments and environment variables. Returns a config object used by all other modules. Includes platform-specific shell auto-detection: on Windows it walks the process tree (via `wmic`) looking for PowerShell or cmd.exe; on Unix it inspects the parent process via `ps` and falls back to `$SHELL` or `/bin/sh`.
3945

4046
### `auth.js` — Authentication
4147

4248
Factory function `createAuth(password)` returns an object with middleware, token management, rate limiting, and the login page HTML.
4349

4450
### `sessions.js` — Session Manager
4551

46-
`SessionManager` class wraps the PTY lifecycle. Handles spawning, tracking, listing, and cleaning up terminal sessions.
52+
`SessionManager` class wraps the PTY lifecycle. Handles spawning, tracking, listing, updating, and cleaning up terminal sessions. Each session has an auto-assigned color, tracks `lastActivity` timestamps, a `createdAt` timestamp, and supports live updates via the `update()` method. Sessions maintain a scrollback buffer (capped at 200 KB) that is sent to newly connecting clients, and track a `clients` Set of active WebSocket connections. Supports an optional `initialCommand` that is written to the PTY shortly after spawn.
4753

4854
### `routes.js` — HTTP Routes
4955

50-
Registers all Express routes: login page, auth API, session CRUD, shell detection, directory browser, version endpoint.
56+
Registers all Express routes: login page (`GET /login`), auth API, session CRUD (including `PATCH` for updating session color/name), shell detection, directory browser, version endpoint. The `POST /api/sessions` endpoint accepts optional `shell`, `args`, `cwd`, `initialCommand`, and `color` parameters.
5157

5258
### `websocket.js` — WebSocket Handler
5359

54-
Handles real-time communication: session attachment, terminal I/O forwarding, resize events.
60+
Handles real-time communication: WebSocket-level authentication (password or token), session attachment, terminal I/O forwarding, and resize events. When multiple clients are connected to the same session, the PTY is resized to the minimum dimensions across all clients.
5561

5662
### `tunnel.js` — DevTunnel
5763

docs/configuration.md

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
| Flag | Description | Default |
66
| --------------------- | ------------------------------- | --------- |
7-
| `--password <pw>` | Set access password | None |
7+
| `--password <pw>` | Set access password (also accepts `--password=<pw>`) | None |
88
| `--generate-password` | Auto-generate a secure password ||
99
| `--tunnel` | Create an ephemeral devtunnel URL | Off |
1010
| `--persisted-tunnel` | Create a reusable devtunnel URL (stable across restarts) | Off |
@@ -20,11 +20,15 @@
2020
| `PORT` | Server port | `3456` |
2121
| `TERMBEAM_PASSWORD` | Access password | None |
2222
| `TERMBEAM_CWD` | Default working directory | Current directory |
23-
| `SHELL` | Default shell | `/bin/zsh` |
23+
| `SHELL` | Fallback shell on Unix (used only if auto-detection fails) | `/bin/sh` |
24+
| `COMSPEC` | Fallback shell on Windows (used only if auto-detection fails) | `cmd.exe` |
2425

2526
!!! note
2627
CLI flags take precedence over environment variables.
2728

29+
!!! info "Shell Auto-Detection"
30+
TermBeam auto-detects your current shell by inspecting the parent process tree. The `SHELL` (Unix) and `COMSPEC` (Windows) environment variables are only used as fallbacks when detection fails.
31+
2832
!!! info "Legacy Variables"
2933
The environment variables `PTY_PASSWORD` and `PTY_CWD` are also supported as fallbacks for `TERMBEAM_PASSWORD` and `TERMBEAM_CWD` respectively.
3034

docs/getting-started.md

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
## Prerequisites
44

55
- **Node.js** 18 or higher
6-
- A terminal (macOS, Linux, or Windows with WSL)
6+
- A terminal (macOS, Linux, or Windows)
77

88
## Installation
99

@@ -59,9 +59,35 @@ termbeam
5959
## Creating Sessions
6060

6161
- The default session uses your current shell and working directory
62-
- Tap **+ New Session** to create additional sessions
62+
- Tap **+ New** (or **+ New Session** on the hub page) to create additional sessions
63+
- Pick a **color** for each session to tell them apart at a glance
6364
- Use the **📂 folder browser** to pick a working directory
64-
- **Swipe left** on a session to delete it
65+
- Optionally set an **initial command** (e.g. `htop`, `vim`)
66+
67+
## Terminal View
68+
69+
### Tabs & Split View
70+
71+
- All open sessions appear as **tabs** in the top bar — tap to switch
72+
- **Drag to reorder** tabs (long-press on mobile to enter drag mode)
73+
- **Hover** (desktop) or **long-press** (mobile) a tab to see a **live preview** of its output
74+
- Tap the **split view** button to view two sessions side-by-side
75+
- On mobile, use the **☰ menu** to open the **side panel** with session cards and previews
76+
77+
### Session Colors & Activity
78+
79+
- Each session has a colored dot for quick identification
80+
- **Activity labels** (e.g. "3s", "5m") show time since the last output
81+
82+
### Scrolling
83+
84+
- **Swipe up/down** to scroll through terminal history on touch devices
85+
- Scrollbar is hidden to save space but scrolling works normally
86+
87+
### Share & Refresh
88+
89+
- Tap the **share button** (↗) to copy the current URL to your clipboard (works over HTTP)
90+
- Tap the **refresh button** (↻) to clear the PWA cache and reload
6591

6692
## Touch Controls
6793

docs/index.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@ TermBeam lets you access your terminal from your phone, tablet, or any browser.
77
## Why TermBeam?
88

99
- 🚫 No SSH client needed — just a web browser
10-
- 📱 Built for mobile — touch bar, swipe gestures, zoom
10+
- 📱 Built for mobile — touch bar, swipe gestures, zoom, touch scrolling
11+
- 🗂️ Tabbed sessions — switch, split, reorder, and preview multiple terminals
12+
- 🎨 Session colors & activity indicators
13+
- 📤 Share & refresh buttons for easy link sharing and PWA cache updates
1114
- ⚡ One command to start — `npx termbeam`
1215
- 🔐 Secure by default — localhost-only, password auth, rate limiting
1316

0 commit comments

Comments
 (0)