fix: address review report across security, architecture, quality, tests
Implements the fixes from docs/REVIEW_REPORT.md (4-agent parallel review). typecheck clean; 341 tests pass (16 files, +113); build:web ok; coverage thresholds (80%) enforced in vitest.config.ts. Critical: - multi-device approval race: release held approval only when the last client detaches (closing one mirror no longer cancels another's prompt) - unbounded session creation (DoS): Config.maxSessions cap (env MAX_SESSIONS), enforced in manager via the existing M4 exit(-1) path - signal-handler leak: named SIGINT/SIGTERM/uncaughtException refs removed in close() - terminal-session initialInput timer tracked + cleared on dispose - tabs.addEntry null-as-cast type hole removed (build session before entry) Should-fix: - security-headers middleware + Origin/CSRF guard on DELETE /live-sessions[/:id] - history.ts converted to fs/promises (async /sessions handler) - removed dead clientDims map + blur protocol message end-to-end - per-connection WS message rate limit (Config.maxMsgsPerSec) - /sessions behavior kept; documented as accepted LAN risk (TECH_DOC §7) Tests: - new tmux / preview-grid / terminal-session (jsdom) / tabs (jsdom) suites - extended history/config/manager/integration coverage incl. regressions Hygiene: - parsePositiveInt -> parseNonNegativeInt; ALLOWED_ORIGINS scheme validation - log-injection sanitize; isLoopback handles 127.0.0.0/8 + IPv4-mapped - operational constants moved into Config - extracted public/preview-grid.ts (DRY launcher/manage) - doc sweeps: ARCHITECTURE §8 runtime-handle exception, stale comments
This commit is contained in:
Yaojia Wang
180
public/preview-grid.ts
Normal file
180
public/preview-grid.ts
Normal file
@@ -0,0 +1,180 @@
|
||||
/**
|
||||
* public/preview-grid.ts — shared live-preview thumbnail helpers.
|
||||
*
|
||||
* The launcher (home session chooser) and the manage page both render a grid of
|
||||
* the host's running sessions as read-only xterm thumbnails fed by
|
||||
* GET /live-sessions/:id/preview. This module holds the DRY core: the small DOM
|
||||
* helper, time/status formatting, the preview card factory, the scaling fit, and
|
||||
* the preview fetch — so both pages import it instead of duplicating ~80%.
|
||||
*/
|
||||
|
||||
import { Terminal } from '@xterm/xterm'
|
||||
import type { LiveSessionInfo } from '../src/types.js'
|
||||
|
||||
/** Shape of GET /live-sessions/:id/preview. */
|
||||
export interface SessionPreview {
|
||||
id: string
|
||||
cols: number
|
||||
rows: number
|
||||
data: string
|
||||
}
|
||||
|
||||
/** Reset screen + scrollback + cursor before writing the tail. */
|
||||
export const PREVIEW_CLEAR = '\x1b[2J\x1b[3J\x1b[H\x1b[0m'
|
||||
export const PREVIEW_THEME = { background: '#0e0f13', foreground: '#e7e8ec', cursor: '#0e0f13' }
|
||||
|
||||
/** Create an element with an optional class and text content. */
|
||||
export function el<K extends keyof HTMLElementTagNameMap>(
|
||||
tag: K,
|
||||
cls?: string,
|
||||
text?: string,
|
||||
): HTMLElementTagNameMap[K] {
|
||||
const node = document.createElement(tag)
|
||||
if (cls) node.className = cls
|
||||
if (text !== undefined) node.textContent = text
|
||||
return node
|
||||
}
|
||||
|
||||
/** Coarse "Ns / Nm / Nh / Nd ago" formatter. */
|
||||
export function relTime(ms: number): string {
|
||||
const s = Math.max(0, (Date.now() - ms) / 1000)
|
||||
if (s < 60) return `${Math.floor(s)}s`
|
||||
if (s < 3600) return `${Math.floor(s / 60)}m`
|
||||
if (s < 86400) return `${Math.floor(s / 3600)}h`
|
||||
return `${Math.floor(s / 86400)}d`
|
||||
}
|
||||
|
||||
/** Human label for a Claude activity status. */
|
||||
export function statusText(s: LiveSessionInfo['status']): string {
|
||||
return s === 'working' ? '⚙ working' : s === 'waiting' ? '⏳ waiting' : s === 'idle' ? '✓ idle' : '·'
|
||||
}
|
||||
|
||||
/** Display name for a session: last cwd segment, else the short id. */
|
||||
export function sessionName(s: LiveSessionInfo): string {
|
||||
return s.cwd ? (s.cwd.split('/').filter(Boolean).pop() ?? s.cwd) : s.id.slice(0, 8)
|
||||
}
|
||||
|
||||
/** A rendered preview card: the element tree plus the live xterm and its parts. */
|
||||
export interface PreviewCard {
|
||||
el: HTMLElement
|
||||
term: Terminal
|
||||
inner: HTMLElement
|
||||
thumb: HTMLElement
|
||||
watch: HTMLElement
|
||||
status: HTMLElement
|
||||
meta: HTMLElement
|
||||
}
|
||||
|
||||
export interface MakeCardOpts {
|
||||
/** Called when the card (thumbnail or Open action) is activated. */
|
||||
onOpen: (id: string) => void
|
||||
/** Optional extra action button(s) appended to the card actions row. */
|
||||
extraActions?: (s: LiveSessionInfo) => HTMLElement[]
|
||||
/** Use an <a href> Open link instead of a button (manage page). */
|
||||
openHref?: (id: string) => string
|
||||
}
|
||||
|
||||
/** Build a preview card for one session (read-only xterm thumbnail). */
|
||||
export function makePreviewCard(s: LiveSessionInfo, opts: MakeCardOpts): PreviewCard {
|
||||
const cardEl = el('div', 'mg-card')
|
||||
|
||||
const head = el('div', 'mg-card-head')
|
||||
const title = el('span', 'mg-name', sessionName(s))
|
||||
const status = el('span', `mg-status mg-${s.status}`, statusText(s.status))
|
||||
const watch = el('span', s.clientCount > 0 ? 'mg-watch live' : 'mg-watch', `👁 ${s.clientCount}`)
|
||||
head.append(title, status, watch)
|
||||
|
||||
const thumb = el('div', 'mg-thumb')
|
||||
const inner = el('div', 'mg-thumb-inner')
|
||||
thumb.append(inner)
|
||||
thumb.addEventListener('click', () => opts.onOpen(s.id))
|
||||
|
||||
const meta = el('div', 'mg-meta')
|
||||
|
||||
const actions = el('div', 'mg-actions')
|
||||
if (opts.openHref) {
|
||||
const open = el('a', 'mg-open', 'Open ↗') as HTMLAnchorElement
|
||||
open.href = opts.openHref(s.id)
|
||||
actions.append(open)
|
||||
} else {
|
||||
const open = el('button', 'mg-open', 'Open ↗')
|
||||
open.addEventListener('click', () => opts.onOpen(s.id))
|
||||
actions.append(open)
|
||||
}
|
||||
if (opts.extraActions) actions.append(...opts.extraActions(s))
|
||||
|
||||
const term = new Terminal({
|
||||
cols: Math.max(2, s.cols),
|
||||
rows: Math.max(2, s.rows),
|
||||
disableStdin: true,
|
||||
cursorBlink: false,
|
||||
fontFamily: 'Menlo, Consolas, monospace',
|
||||
fontSize: 12,
|
||||
scrollback: 0,
|
||||
theme: PREVIEW_THEME,
|
||||
})
|
||||
term.open(inner)
|
||||
|
||||
cardEl.append(head, thumb, meta, actions)
|
||||
return { el: cardEl, term, inner, thumb, watch, status, meta }
|
||||
}
|
||||
|
||||
/** Re-apply a session's live status/watch/meta fields to its card in place. */
|
||||
export function updatePreviewCard(card: PreviewCard, s: LiveSessionInfo): void {
|
||||
card.status.className = `mg-status mg-${s.status}`
|
||||
card.status.textContent = statusText(s.status)
|
||||
card.watch.className = s.clientCount > 0 ? 'mg-watch live' : 'mg-watch'
|
||||
card.watch.textContent = `👁 ${s.clientCount}`
|
||||
}
|
||||
|
||||
/** Scale the rendered xterm down so the full screen fits `thumbW` px wide. */
|
||||
export function fitThumb(card: PreviewCard, thumbW: number, thumbMaxH: number): void {
|
||||
const w = card.inner.offsetWidth
|
||||
const h = card.inner.offsetHeight
|
||||
if (w === 0 || h === 0) return
|
||||
const scale = Math.min(1, thumbW / w)
|
||||
card.inner.style.transform = `scale(${scale})`
|
||||
card.thumb.style.height = `${Math.min(h * scale, thumbMaxH)}px`
|
||||
}
|
||||
|
||||
/** Fetch a session preview, returning null on any failure (best-effort). */
|
||||
export async function fetchPreview(id: string): Promise<SessionPreview | null> {
|
||||
try {
|
||||
const res = await fetch(`/live-sessions/${id}/preview`)
|
||||
if (!res.ok) return null
|
||||
return (await res.json()) as SessionPreview
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
/** Render a preview into a card's xterm, resizing + scaling to fit. */
|
||||
export function renderPreview(card: PreviewCard, p: SessionPreview, thumbW: number, thumbMaxH: number): void {
|
||||
if (card.term.cols !== Math.max(2, p.cols) || card.term.rows !== Math.max(2, p.rows)) {
|
||||
card.term.resize(Math.max(2, p.cols), Math.max(2, p.rows))
|
||||
}
|
||||
card.term.reset()
|
||||
card.term.write(PREVIEW_CLEAR + p.data, () => requestAnimationFrame(() => fitThumb(card, thumbW, thumbMaxH)))
|
||||
}
|
||||
|
||||
/** Fetch + render a session's preview into its card (best-effort, no throw). */
|
||||
export async function loadPreviewInto(
|
||||
id: string,
|
||||
card: PreviewCard,
|
||||
thumbW: number,
|
||||
thumbMaxH: number,
|
||||
): Promise<void> {
|
||||
const p = await fetchPreview(id)
|
||||
if (p) renderPreview(card, p, thumbW, thumbMaxH)
|
||||
}
|
||||
|
||||
/** Fetch the host's live sessions list, returning [] on failure. */
|
||||
export async function fetchLiveSessions(): Promise<LiveSessionInfo[]> {
|
||||
try {
|
||||
const res = await fetch('/live-sessions')
|
||||
const data: unknown = await res.json()
|
||||
return Array.isArray(data) ? (data as LiveSessionInfo[]) : []
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user