chore: version packages

Root cause: xterm.js WebGL addon performs synchronous GPU ReadPixels
calls during terminal.write(). When heavy terminal output floods in
(~1MB/4s from active Claude sessions), single-frame writes of 70-105KB
block Chrome's main thread for 10+ seconds, triggering "page
unresponsive" dialogs. This happens both during tab switches (buffer
load + live SSE data competing) and during normal use (Ink redraw
bursts).

Fix: disable WebGL by default, use canvas renderer instead. Canvas
handles the same workloads without GPU stalls. Re-enable with ?webgl
URL param for testing.

Also: gate live SSE terminal writes during the entire selectSession()
buffer load sequence (not just during chunkedTerminalWrite), preventing
live data from competing with historical buffer restoration.

Crash investigation data (from server-side breadcrumb collection):
- 27 flushes totaling 937KB in 4 seconds preceded crash
- Two 105KB and one 104KB single-frame flushes observed
- Crash occurred when user switched tabs during output flood
- Tab froze for 2m54s before recovering
- Backend always stable (0 crashes); pure frontend GPU issue

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

.agents/skills/remotion-best-practices/SKILL.md

@@ -1,61 +0,0 @@
----
-name: remotion-best-practices
-description: Best practices for Remotion - Video creation in React
-metadata:
-  tags: remotion, video, react, animation, composition
----
-
-## When to use
-
-Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge.
-
-## Captions
-
-When dealing with captions or subtitles, load the [./rules/subtitles.md](./rules/subtitles.md) file for more information.
-
-## Using FFmpeg
-
-For some video operations, such as trimming videos or detecting silence, FFmpeg should be used. Load the [./rules/ffmpeg.md](./rules/ffmpeg.md) file for more information.
-
-## Audio visualization
-
-When needing to visualize audio (spectrum bars, waveforms, bass-reactive effects), load the [./rules/audio-visualization.md](./rules/audio-visualization.md) file for more information.
-
-## Sound effects
-
-When needing to use sound effects, load the [./rules/sound-effects.md](./rules/sound-effects.md) file for more information.
-
-## How to use
-
-Read individual rule files for detailed explanations and code examples:
-
-- [rules/3d.md](rules/3d.md) - 3D content in Remotion using Three.js and React Three Fiber
-- [rules/animations.md](rules/animations.md) - Fundamental animation skills for Remotion
-- [rules/assets.md](rules/assets.md) - Importing images, videos, audio, and fonts into Remotion
-- [rules/audio.md](rules/audio.md) - Using audio and sound in Remotion - importing, trimming, volume, speed, pitch
-- [rules/calculate-metadata.md](rules/calculate-metadata.md) - Dynamically set composition duration, dimensions, and props
-- [rules/can-decode.md](rules/can-decode.md) - Check if a video can be decoded by the browser using Mediabunny
-- [rules/charts.md](rules/charts.md) - Chart and data visualization patterns for Remotion (bar, pie, line, stock charts)
-- [rules/compositions.md](rules/compositions.md) - Defining compositions, stills, folders, default props and dynamic metadata
-- [rules/extract-frames.md](rules/extract-frames.md) - Extract frames from videos at specific timestamps using Mediabunny
-- [rules/fonts.md](rules/fonts.md) - Loading Google Fonts and local fonts in Remotion
-- [rules/get-audio-duration.md](rules/get-audio-duration.md) - Getting the duration of an audio file in seconds with Mediabunny
-- [rules/get-video-dimensions.md](rules/get-video-dimensions.md) - Getting the width and height of a video file with Mediabunny
-- [rules/get-video-duration.md](rules/get-video-duration.md) - Getting the duration of a video file in seconds with Mediabunny
-- [rules/gifs.md](rules/gifs.md) - Displaying GIFs synchronized with Remotion's timeline
-- [rules/images.md](rules/images.md) - Embedding images in Remotion using the Img component
-- [rules/light-leaks.md](rules/light-leaks.md) - Light leak overlay effects using @remotion/light-leaks
-- [rules/lottie.md](rules/lottie.md) - Embedding Lottie animations in Remotion
-- [rules/measuring-dom-nodes.md](rules/measuring-dom-nodes.md) - Measuring DOM element dimensions in Remotion
-- [rules/measuring-text.md](rules/measuring-text.md) - Measuring text dimensions, fitting text to containers, and checking overflow
-- [rules/sequencing.md](rules/sequencing.md) - Sequencing patterns for Remotion - delay, trim, limit duration of items
-- [rules/tailwind.md](rules/tailwind.md) - Using TailwindCSS in Remotion
-- [rules/text-animations.md](rules/text-animations.md) - Typography and text animation patterns for Remotion
-- [rules/timing.md](rules/timing.md) - Interpolation curves in Remotion - linear, easing, spring animations
-- [rules/transitions.md](rules/transitions.md) - Scene transition patterns for Remotion
-- [rules/transparent-videos.md](rules/transparent-videos.md) - Rendering out a video with transparency
-- [rules/trimming.md](rules/trimming.md) - Trimming patterns for Remotion - cut the beginning or end of animations
-- [rules/videos.md](rules/videos.md) - Embedding videos in Remotion - trimming, volume, speed, looping, pitch
-- [rules/parameters.md](rules/parameters.md) - Make a video parametrizable by adding a Zod schema
-- [rules/maps.md](rules/maps.md) - Add a map using Mapbox and animate it
-- [rules/voiceover.md](rules/voiceover.md) - Adding AI-generated voiceover to Remotion compositions using ElevenLabs TTS

.agents/skills/remotion-best-practices/rules/3d.md

@@ -1,86 +0,0 @@
----
-name: 3d
-description: 3D content in Remotion using Three.js and React Three Fiber.
-metadata:
-  tags: 3d, three, threejs
----
-
-# Using Three.js and React Three Fiber in Remotion
-
-Follow React Three Fiber and Three.js best practices.  
-Only the following Remotion-specific rules need to be followed:
-
-## Prerequisites
-
-First, the `@remotion/three` package needs to be installed.  
-If it is not, use the following command:
-
-```bash
-npx remotion add @remotion/three # If project uses npm
-bunx remotion add @remotion/three # If project uses bun
-yarn remotion add @remotion/three # If project uses yarn
-pnpm exec remotion add @remotion/three # If project uses pnpm
-```
-
-## Using ThreeCanvas
-
-You MUST wrap 3D content in `<ThreeCanvas>` and include proper lighting.  
-`<ThreeCanvas>` MUST have a `width` and `height` prop.
-
-```tsx
-import { ThreeCanvas } from "@remotion/three";
-import { useVideoConfig } from "remotion";
-
-const { width, height } = useVideoConfig();
-
-<ThreeCanvas width={width} height={height}>
-  <ambientLight intensity={0.4} />
-  <directionalLight position={[5, 5, 5]} intensity={0.8} />
-  <mesh>
-    <sphereGeometry args={[1, 32, 32]} />
-    <meshStandardMaterial color="red" />
-  </mesh>
-</ThreeCanvas>;
-```
-
-## No animations not driven by `useCurrentFrame()`
-
-Shaders, models etc MUST NOT animate by themselves.  
-No animations are allowed unless they are driven by `useCurrentFrame()`.  
-Otherwise, it will cause flickering during rendering.
-
-Using `useFrame()` from `@react-three/fiber` is forbidden.
-
-## Animate using `useCurrentFrame()`
-
-Use `useCurrentFrame()` to perform animations.
-
-```tsx
-const frame = useCurrentFrame();
-const rotationY = frame * 0.02;
-
-<mesh rotation={[0, rotationY, 0]}>
-  <boxGeometry args={[2, 2, 2]} />
-  <meshStandardMaterial color="#4a9eff" />
-</mesh>;
-```
-
-## Using `<Sequence>` inside `<ThreeCanvas>`
-
-The `layout` prop of any `<Sequence>` inside a `<ThreeCanvas>` must be set to `none`.
-
-```tsx
-import { Sequence } from "remotion";
-import { ThreeCanvas } from "@remotion/three";
-
-const { width, height } = useVideoConfig();
-
-<ThreeCanvas width={width} height={height}>
-  <Sequence layout="none">
-    <mesh>
-      <boxGeometry args={[2, 2, 2]} />
-      <meshStandardMaterial color="#4a9eff" />
-    </mesh>
-  </Sequence>
-</ThreeCanvas>;
-```

.agents/skills/remotion-best-practices/rules/animations.md

@@ -1,27 +0,0 @@
----
-name: animations
-description: Fundamental animation skills for Remotion
-metadata:
-  tags: animations, transitions, frames, useCurrentFrame
----
-
-All animations MUST be driven by the `useCurrentFrame()` hook.  
-Write animations in seconds and multiply them by the `fps` value from `useVideoConfig()`.
-
-```tsx
-import { useCurrentFrame } from "remotion";
-
-export const FadeIn = () => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
-
-  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
-    extrapolateRight: "clamp",
-  });
-
-  return <div style={{ opacity }}>Hello World!</div>;
-};
-```
-
-CSS transitions or animations are FORBIDDEN - they will not render correctly.  
-Tailwind animation class names are FORBIDDEN - they will not render correctly.

.agents/skills/remotion-best-practices/rules/assets.md

@@ -1,78 +0,0 @@
----
-name: assets
-description: Importing images, videos, audio, and fonts into Remotion
-metadata:
-  tags: assets, staticFile, images, fonts, public
----
-
-# Importing assets in Remotion
-
-## The public folder
-
-Place assets in the `public/` folder at your project root.
-
-## Using staticFile()
-
-You MUST use `staticFile()` to reference files from the `public/` folder:
-
-```tsx
-import { Img, staticFile } from "remotion";
-
-export const MyComposition = () => {
-  return <Img src={staticFile("logo.png")} />;
-};
-```
-
-The function returns an encoded URL that works correctly when deploying to subdirectories.
-
-## Using with components
-
-**Images:**
-
-```tsx
-import { Img, staticFile } from "remotion";
-
-<Img src={staticFile("photo.png")} />;
-```
-
-**Videos:**
-
-```tsx
-import { Video } from "@remotion/media";
-import { staticFile } from "remotion";
-
-<Video src={staticFile("clip.mp4")} />;
-```
-
-**Audio:**
-
-```tsx
-import { Audio } from "@remotion/media";
-import { staticFile } from "remotion";
-
-<Audio src={staticFile("music.mp3")} />;
-```
-
-**Fonts:**
-
-```tsx
-import { staticFile } from "remotion";
-
-const fontFamily = new FontFace("MyFont", `url(${staticFile("font.woff2")})`);
-await fontFamily.load();
-document.fonts.add(fontFamily);
-```
-
-## Remote URLs
-
-Remote URLs can be used directly without `staticFile()`:
-
-```tsx
-<Img src="https://example.com/image.png" />
-<Video src="https://remotion.media/video.mp4" />
-```
-
-## Important notes
-
-- Remotion components (`<Img>`, `<Video>`, `<Audio>`) ensure assets are fully loaded before rendering
-- Special characters in filenames (`#`, `?`, `&`) are automatically encoded

.agents/skills/remotion-best-practices/rules/assets/charts-bar-chart.tsx

@@ -1,173 +0,0 @@
-import {loadFont} from '@remotion/google-fonts/Inter';
-import {AbsoluteFill, spring, useCurrentFrame, useVideoConfig} from 'remotion';
-
-const {fontFamily} = loadFont();
-
-const COLOR_BAR = '#D4AF37';
-const COLOR_TEXT = '#ffffff';
-const COLOR_MUTED = '#888888';
-const COLOR_BG = '#0a0a0a';
-const COLOR_AXIS = '#333333';
-
-// Ideal composition size: 1280x720
-
-const Title: React.FC<{children: React.ReactNode}> = ({children}) => (
-	<div style={{textAlign: 'center', marginBottom: 40}}>
-		<div style={{color: COLOR_TEXT, fontSize: 48, fontWeight: 600}}>
-			{children}
-		</div>
-	</div>
-);
-
-const YAxis: React.FC<{steps: number[]; height: number}> = ({
-	steps,
-	height,
-}) => (
-	<div
-		style={{
-			display: 'flex',
-			flexDirection: 'column',
-			justifyContent: 'space-between',
-			height,
-			paddingRight: 16,
-		}}
-	>
-		{steps
-			.slice()
-			.reverse()
-			.map((step) => (
-				<div
-					key={step}
-					style={{
-						color: COLOR_MUTED,
-						fontSize: 20,
-						textAlign: 'right',
-					}}
-				>
-					{step.toLocaleString()}
-				</div>
-			))}
-	</div>
-);
-
-const Bar: React.FC<{
-	height: number;
-	progress: number;
-}> = ({height, progress}) => (
-	<div
-		style={{
-			flex: 1,
-			display: 'flex',
-			flexDirection: 'column',
-			justifyContent: 'flex-end',
-		}}
-	>
-		<div
-			style={{
-				width: '100%',
-				height,
-				backgroundColor: COLOR_BAR,
-				borderRadius: '8px 8px 0 0',
-				opacity: progress,
-			}}
-		/>
-	</div>
-);
-
-const XAxis: React.FC<{
-	children: React.ReactNode;
-	labels: string[];
-	height: number;
-}> = ({children, labels, height}) => (
-	<div style={{flex: 1, display: 'flex', flexDirection: 'column'}}>
-		<div
-			style={{
-				display: 'flex',
-				alignItems: 'flex-end',
-				gap: 16,
-				height,
-				borderLeft: `2px solid ${COLOR_AXIS}`,
-				borderBottom: `2px solid ${COLOR_AXIS}`,
-				paddingLeft: 16,
-			}}
-		>
-			{children}
-		</div>
-		<div
-			style={{
-				display: 'flex',
-				gap: 16,
-				paddingLeft: 16,
-				marginTop: 12,
-			}}
-		>
-			{labels.map((label) => (
-				<div
-					key={label}
-					style={{
-						flex: 1,
-						textAlign: 'center',
-						color: COLOR_MUTED,
-						fontSize: 20,
-					}}
-				>
-					{label}
-				</div>
-			))}
-		</div>
-	</div>
-);
-
-export const MyAnimation = () => {
-	const frame = useCurrentFrame();
-	const {fps, height} = useVideoConfig();
-
-	const data = [
-		{month: 'Jan', price: 2039},
-		{month: 'Mar', price: 2160},
-		{month: 'May', price: 2327},
-		{month: 'Jul', price: 2426},
-		{month: 'Sep', price: 2634},
-		{month: 'Nov', price: 2672},
-	];
-
-	const minPrice = 2000;
-	const maxPrice = 2800;
-	const priceRange = maxPrice - minPrice;
-	const chartHeight = height - 280;
-	const yAxisSteps = [2000, 2400, 2800];
-
-	return (
-		<AbsoluteFill
-			style={{
-				backgroundColor: COLOR_BG,
-				padding: 60,
-				display: 'flex',
-				flexDirection: 'column',
-				fontFamily,
-			}}
-		>
-			<Title>Gold Price 2024</Title>
-
-			<div style={{display: 'flex', flex: 1}}>
-				<YAxis steps={yAxisSteps} height={chartHeight} />
-				<XAxis height={chartHeight} labels={data.map((d) => d.month)}>
-					{data.map((item, i) => {
-						const progress = spring({
-							frame: frame - i * 5 - 10,
-							fps,
-							config: {damping: 18, stiffness: 80},
-						});
-
-						const barHeight =
-							((item.price - minPrice) / priceRange) * chartHeight * progress;
-
-						return (
-							<Bar key={item.month} height={barHeight} progress={progress} />
-						);
-					})}
-				</XAxis>
-			</div>
-		</AbsoluteFill>
-	);
-};

.agents/skills/remotion-best-practices/rules/assets/text-animations-typewriter.tsx

@@ -1,100 +0,0 @@
-import {
-	AbsoluteFill,
-	interpolate,
-	useCurrentFrame,
-	useVideoConfig,
-} from 'remotion';
-
-const COLOR_BG = '#ffffff';
-const COLOR_TEXT = '#000000';
-const FULL_TEXT = 'From prompt to motion graphics. This is Remotion.';
-const PAUSE_AFTER = 'From prompt to motion graphics.';
-const FONT_SIZE = 72;
-const FONT_WEIGHT = 700;
-const CHAR_FRAMES = 2;
-const CURSOR_BLINK_FRAMES = 16;
-const PAUSE_SECONDS = 1;
-
-// Ideal composition size: 1280x720
-
-const getTypedText = ({
-	frame,
-	fullText,
-	pauseAfter,
-	charFrames,
-	pauseFrames,
-}: {
-	frame: number;
-	fullText: string;
-	pauseAfter: string;
-	charFrames: number;
-	pauseFrames: number;
-}): string => {
-	const pauseIndex = fullText.indexOf(pauseAfter);
-	const preLen =
-		pauseIndex >= 0 ? pauseIndex + pauseAfter.length : fullText.length;
-
-	let typedChars = 0;
-	if (frame < preLen * charFrames) {
-		typedChars = Math.floor(frame / charFrames);
-	} else if (frame < preLen * charFrames + pauseFrames) {
-		typedChars = preLen;
-	} else {
-		const postPhase = frame - preLen * charFrames - pauseFrames;
-		typedChars = Math.min(
-			fullText.length,
-			preLen + Math.floor(postPhase / charFrames),
-		);
-	}
-	return fullText.slice(0, typedChars);
-};
-
-const Cursor: React.FC<{
-	frame: number;
-	blinkFrames: number;
-	symbol?: string;
-}> = ({frame, blinkFrames, symbol = '\u258C'}) => {
-	const opacity = interpolate(
-		frame % blinkFrames,
-		[0, blinkFrames / 2, blinkFrames],
-		[1, 0, 1],
-		{extrapolateLeft: 'clamp', extrapolateRight: 'clamp'},
-	);
-
-	return <span style={{opacity}}>{symbol}</span>;
-};
-
-export const MyAnimation = () => {
-	const frame = useCurrentFrame();
-	const {fps} = useVideoConfig();
-
-	const pauseFrames = Math.round(fps * PAUSE_SECONDS);
-
-	const typedText = getTypedText({
-		frame,
-		fullText: FULL_TEXT,
-		pauseAfter: PAUSE_AFTER,
-		charFrames: CHAR_FRAMES,
-		pauseFrames,
-	});
-
-	return (
-		<AbsoluteFill
-			style={{
-				backgroundColor: COLOR_BG,
-			}}
-		>
-			<div
-				style={{
-					color: COLOR_TEXT,
-					fontSize: FONT_SIZE,
-					fontWeight: FONT_WEIGHT,
-					fontFamily: 'sans-serif',
-				}}
-			>
-				<span>{typedText}</span>
-				<Cursor frame={frame} blinkFrames={CURSOR_BLINK_FRAMES} />
-			</div>
-		</AbsoluteFill>
-	);
-};

.agents/skills/remotion-best-practices/rules/assets/text-animations-word-highlight.tsx

@@ -1,103 +0,0 @@
-import {loadFont} from '@remotion/google-fonts/Inter';
-import React from 'react';
-import {AbsoluteFill, spring, useCurrentFrame, useVideoConfig} from 'remotion';
-
-/*
- * Highlight a word in a sentence with a spring-animated wipe effect.
- */
-
-// Ideal composition size: 1280x720
-
-const COLOR_BG = '#ffffff';
-const COLOR_TEXT = '#000000';
-const COLOR_HIGHLIGHT = '#A7C7E7';
-const FULL_TEXT = 'This is Remotion.';
-const HIGHLIGHT_WORD = 'Remotion';
-const FONT_SIZE = 72;
-const FONT_WEIGHT = 700;
-const HIGHLIGHT_START_FRAME = 30;
-const HIGHLIGHT_WIPE_DURATION = 18;
-
-const {fontFamily} = loadFont();
-
-const Highlight: React.FC<{
-	word: string;
-	color: string;
-	delay: number;
-	durationInFrames: number;
-}> = ({word, color, delay, durationInFrames}) => {
-	const frame = useCurrentFrame();
-	const {fps} = useVideoConfig();
-
-	const highlightProgress = spring({
-		fps,
-		frame,
-		config: {damping: 200},
-		delay,
-		durationInFrames,
-	});
-	const scaleX = Math.max(0, Math.min(1, highlightProgress));
-
-	return (
-		<span style={{position: 'relative', display: 'inline-block'}}>
-			<span
-				style={{
-					position: 'absolute',
-					left: 0,
-					right: 0,
-					top: '50%',
-					height: '1.05em',
-					transform: `translateY(-50%) scaleX(${scaleX})`,
-					transformOrigin: 'left center',
-					backgroundColor: color,
-					borderRadius: '0.18em',
-					zIndex: 0,
-				}}
-			/>
-			<span style={{position: 'relative', zIndex: 1}}>{word}</span>
-		</span>
-	);
-};
-
-export const MyAnimation = () => {
-	const highlightIndex = FULL_TEXT.indexOf(HIGHLIGHT_WORD);
-	const hasHighlight = highlightIndex >= 0;
-	const preText = hasHighlight ? FULL_TEXT.slice(0, highlightIndex) : FULL_TEXT;
-	const postText = hasHighlight
-		? FULL_TEXT.slice(highlightIndex + HIGHLIGHT_WORD.length)
-		: '';
-
-	return (
-		<AbsoluteFill
-			style={{
-				backgroundColor: COLOR_BG,
-				alignItems: 'center',
-				justifyContent: 'center',
-				fontFamily,
-			}}
-		>
-			<div
-				style={{
-					color: COLOR_TEXT,
-					fontSize: FONT_SIZE,
-					fontWeight: FONT_WEIGHT,
-				}}
-			>
-				{hasHighlight ? (
-					<>
-						<span>{preText}</span>
-						<Highlight
-							word={HIGHLIGHT_WORD}
-							color={COLOR_HIGHLIGHT}
-							delay={HIGHLIGHT_START_FRAME}
-							durationInFrames={HIGHLIGHT_WIPE_DURATION}
-						/>
-						<span>{postText}</span>
-					</>
-				) : (
-					<span>{FULL_TEXT}</span>
-				)}
-			</div>
-		</AbsoluteFill>
-	);
-};

.agents/skills/remotion-best-practices/rules/audio-visualization.md

@@ -1,198 +0,0 @@
----
-name: audio-visualization
-description: Audio visualization patterns - spectrum bars, waveforms, bass-reactive effects
-metadata:
-  tags: audio, visualization, spectrum, waveform, bass, music, audiogram, frequency
----
-
-# Audio Visualization in Remotion
-
-## Prerequisites
-
-```bash
-npx remotion add @remotion/media-utils
-```
-
-## Loading Audio Data
-
-Use `useWindowedAudioData()` (https://www.remotion.dev/docs/use-windowed-audio-data) to load audio data:
-
-```tsx
-import { useWindowedAudioData } from "@remotion/media-utils";
-import { staticFile, useCurrentFrame, useVideoConfig } from "remotion";
-
-const frame = useCurrentFrame();
-const { fps } = useVideoConfig();
-
-const { audioData, dataOffsetInSeconds } = useWindowedAudioData({
-  src: staticFile("podcast.wav"),
-  frame,
-  fps,
-  windowInSeconds: 30,
-});
-```
-
-## Spectrum Bar Visualization
-
-Use `visualizeAudio()` (https://www.remotion.dev/docs/visualize-audio) to get frequency data for bar charts:
-
-```tsx
-import { useWindowedAudioData, visualizeAudio } from "@remotion/media-utils";
-import { staticFile, useCurrentFrame, useVideoConfig } from "remotion";
-
-const frame = useCurrentFrame();
-const { fps } = useVideoConfig();
-
-const { audioData, dataOffsetInSeconds } = useWindowedAudioData({
-  src: staticFile("music.mp3"),
-  frame,
-  fps,
-  windowInSeconds: 30,
-});
-
-if (!audioData) {
-  return null;
-}
-
-const frequencies = visualizeAudio({
-  fps,
-  frame,
-  audioData,
-  numberOfSamples: 256,
-  optimizeFor: "speed",
-  dataOffsetInSeconds,
-});
-
-return (
-  <div style={{ display: "flex", alignItems: "flex-end", height: 200 }}>
-    {frequencies.map((v, i) => (
-      <div
-        key={i}
-        style={{
-          flex: 1,
-          height: `${v * 100}%`,
-          backgroundColor: "#0b84f3",
-          margin: "0 1px",
-        }}
-      />
-    ))}
-  </div>
-);
-```
-
-- `numberOfSamples` must be power of 2 (32, 64, 128, 256, 512, 1024)
-- Values range 0-1; left of array = bass, right = highs
-- Use `optimizeFor: "speed"` for Lambda or high sample counts
-
-**Important:** When passing `audioData` to child components, also pass the `frame` from the parent. Do not call `useCurrentFrame()` in each child - this causes discontinuous visualization when children are inside `<Sequence>` with offsets.
-
-## Waveform Visualization
-
-Use `visualizeAudioWaveform()` (https://www.remotion.dev/docs/media-utils/visualize-audio-waveform) with `createSmoothSvgPath()` (https://www.remotion.dev/docs/media-utils/create-smooth-svg-path) for oscilloscope-style displays:
-
-```tsx
-import {
-  createSmoothSvgPath,
-  useWindowedAudioData,
-  visualizeAudioWaveform,
-} from "@remotion/media-utils";
-import { staticFile, useCurrentFrame, useVideoConfig } from "remotion";
-
-const frame = useCurrentFrame();
-const { width, fps } = useVideoConfig();
-const HEIGHT = 200;
-
-const { audioData, dataOffsetInSeconds } = useWindowedAudioData({
-  src: staticFile("voice.wav"),
-  frame,
-  fps,
-  windowInSeconds: 30,
-});
-
-if (!audioData) {
-  return null;
-}
-
-const waveform = visualizeAudioWaveform({
-  fps,
-  frame,
-  audioData,
-  numberOfSamples: 256,
-  windowInSeconds: 0.5,
-  dataOffsetInSeconds,
-});
-
-const path = createSmoothSvgPath({
-  points: waveform.map((y, i) => ({
-    x: (i / (waveform.length - 1)) * width,
-    y: HEIGHT / 2 + (y * HEIGHT) / 2,
-  })),
-});
-
-return (
-  <svg width={width} height={HEIGHT}>
-    <path d={path} fill="none" stroke="#0b84f3" strokeWidth={2} />
-  </svg>
-);
-```
-
-## Bass-Reactive Effects
-
-Extract low frequencies for beat-reactive animations:
-
-```tsx
-const frequencies = visualizeAudio({
-  fps,
-  frame,
-  audioData,
-  numberOfSamples: 128,
-  optimizeFor: "speed",
-  dataOffsetInSeconds,
-});
-
-const lowFrequencies = frequencies.slice(0, 32);
-const bassIntensity =
-  lowFrequencies.reduce((sum, v) => sum + v, 0) / lowFrequencies.length;
-
-const scale = 1 + bassIntensity * 0.5;
-const opacity = Math.min(0.6, bassIntensity * 0.8);
-```
-
-## Volume-Based Waveform
-
-Use `getWaveformPortion()` (https://www.remotion.dev/docs/get-waveform-portion) when you need simplified volume data instead of frequency spectrum:
-
-```tsx
-import { getWaveformPortion } from "@remotion/media-utils";
-import { useCurrentFrame, useVideoConfig } from "remotion";
-
-const frame = useCurrentFrame();
-const { fps } = useVideoConfig();
-const currentTimeInSeconds = frame / fps;
-
-const waveform = getWaveformPortion({
-  audioData,
-  startTimeInSeconds: currentTimeInSeconds,
-  durationInSeconds: 5,
-  numberOfSamples: 50,
-});
-
-// Returns array of { index, amplitude } objects (amplitude: 0-1)
-waveform.map((bar) => (
-  <div key={bar.index} style={{ height: bar.amplitude * 100 }} />
-));
-```
-
-## Postprocessing
-
-Low frequencies naturally dominate. Apply logarithmic scaling for visual balance:
-
-```tsx
-const minDb = -100;
-const maxDb = -30;
-
-const scaled = frequencies.map((value) => {
-  const db = 20 * Math.log10(value);
-  return (db - minDb) / (maxDb - minDb);
-});
-```

.agents/skills/remotion-best-practices/rules/audio.md

@@ -1,169 +0,0 @@
----
-name: audio
-description: Using audio and sound in Remotion - importing, trimming, volume, speed, pitch
-metadata:
-  tags: audio, media, trim, volume, speed, loop, pitch, mute, sound, sfx
----
-
-# Using audio in Remotion
-
-## Prerequisites
-
-First, the @remotion/media package needs to be installed.
-If it is not installed, use the following command:
-
-```bash
-npx remotion add @remotion/media
-```
-
-## Importing Audio
-
-Use `<Audio>` from `@remotion/media` to add audio to your composition.
-
-```tsx
-import { Audio } from "@remotion/media";
-import { staticFile } from "remotion";
-
-export const MyComposition = () => {
-  return <Audio src={staticFile("audio.mp3")} />;
-};
-```
-
-Remote URLs are also supported:
-
-```tsx
-<Audio src="https://remotion.media/audio.mp3" />
-```
-
-By default, audio plays from the start, at full volume and full length.
-Multiple audio tracks can be layered by adding multiple `<Audio>` components.
-
-## Trimming
-
-Use `trimBefore` and `trimAfter` to remove portions of the audio. Values are in frames.
-
-```tsx
-const { fps } = useVideoConfig();
-
-return (
-  <Audio
-    src={staticFile("audio.mp3")}
-    trimBefore={2 * fps} // Skip the first 2 seconds
-    trimAfter={10 * fps} // End at the 10 second mark
-  />
-);
-```
-
-The audio still starts playing at the beginning of the composition - only the specified portion is played.
-
-## Delaying
-
-Wrap the audio in a `<Sequence>` to delay when it starts:
-
-```tsx
-import { Sequence, staticFile } from "remotion";
-import { Audio } from "@remotion/media";
-
-const { fps } = useVideoConfig();
-
-return (
-  <Sequence from={1 * fps}>
-    <Audio src={staticFile("audio.mp3")} />
-  </Sequence>
-);
-```
-
-The audio will start playing after 1 second.
-
-## Volume
-
-Set a static volume (0 to 1):
-
-```tsx
-<Audio src={staticFile("audio.mp3")} volume={0.5} />
-```
-
-Or use a callback for dynamic volume based on the current frame:
-
-```tsx
-import { interpolate } from "remotion";
-
-const { fps } = useVideoConfig();
-
-return (
-  <Audio
-    src={staticFile("audio.mp3")}
-    volume={(f) =>
-      interpolate(f, [0, 1 * fps], [0, 1], { extrapolateRight: "clamp" })
-    }
-  />
-);
-```
-
-The value of `f` starts at 0 when the audio begins to play, not the composition frame.
-
-## Muting
-
-Use `muted` to silence the audio. It can be set dynamically:
-
-```tsx
-const frame = useCurrentFrame();
-const { fps } = useVideoConfig();
-
-return (
-  <Audio
-    src={staticFile("audio.mp3")}
-    muted={frame >= 2 * fps && frame <= 4 * fps} // Mute between 2s and 4s
-  />
-);
-```
-
-## Speed
-
-Use `playbackRate` to change the playback speed:
-
-```tsx
-<Audio src={staticFile("audio.mp3")} playbackRate={2} /> {/* 2x speed */}
-<Audio src={staticFile("audio.mp3")} playbackRate={0.5} /> {/* Half speed */}
-```
-
-Reverse playback is not supported.
-
-## Looping
-
-Use `loop` to loop the audio indefinitely:
-
-```tsx
-<Audio src={staticFile("audio.mp3")} loop />
-```
-
-Use `loopVolumeCurveBehavior` to control how the frame count behaves when looping:
-
-- `"repeat"`: Frame count resets to 0 each loop (default)
-- `"extend"`: Frame count continues incrementing
-
-```tsx
-<Audio
-  src={staticFile("audio.mp3")}
-  loop
-  loopVolumeCurveBehavior="extend"
-  volume={(f) => interpolate(f, [0, 300], [1, 0])} // Fade out over multiple loops
-/>
-```
-
-## Pitch
-
-Use `toneFrequency` to adjust the pitch without affecting speed. Values range from 0.01 to 2:
-
-```tsx
-<Audio
-  src={staticFile("audio.mp3")}
-  toneFrequency={1.5} // Higher pitch
-/>
-<Audio
-  src={staticFile("audio.mp3")}
-  toneFrequency={0.8} // Lower pitch
-/>
-```
-
-Pitch shifting only works during server-side rendering, not in the Remotion Studio preview or in the `<Player />`.

.agents/skills/remotion-best-practices/rules/calculate-metadata.md

@@ -1,134 +0,0 @@
----
-name: calculate-metadata
-description: Dynamically set composition duration, dimensions, and props
-metadata:
-  tags: calculateMetadata, duration, dimensions, props, dynamic
----
-
-# Using calculateMetadata
-
-Use `calculateMetadata` on a `<Composition>` to dynamically set duration, dimensions, and transform props before rendering.
-
-```tsx
-<Composition
-  id="MyComp"
-  component={MyComponent}
-  durationInFrames={300}
-  fps={30}
-  width={1920}
-  height={1080}
-  defaultProps={{ videoSrc: "https://remotion.media/video.mp4" }}
-  calculateMetadata={calculateMetadata}
-/>
-```
-
-## Setting duration based on a video
-
-Use the [`getVideoDuration`](./get-video-duration.md) and [`getVideoDimensions`](./get-video-dimensions.md) skills to get the video duration and dimensions:
-
-```tsx
-import { CalculateMetadataFunction } from "remotion";
-import { getVideoDuration } from "./get-video-duration";
-
-const calculateMetadata: CalculateMetadataFunction<Props> = async ({
-  props,
-}) => {
-  const durationInSeconds = await getVideoDuration(props.videoSrc);
-
-  return {
-    durationInFrames: Math.ceil(durationInSeconds * 30),
-  };
-};
-```
-
-## Matching dimensions of a video
-
-Use the [`getVideoDimensions`](./get-video-dimensions.md) skill to get the video dimensions:
-
-```tsx
-import { CalculateMetadataFunction } from "remotion";
-import { getVideoDuration } from "./get-video-duration";
-import { getVideoDimensions } from "./get-video-dimensions";
-
-const calculateMetadata: CalculateMetadataFunction<Props> = async ({
-  props,
-}) => {
-  const dimensions = await getVideoDimensions(props.videoSrc);
-
-  return {
-    width: dimensions.width,
-    height: dimensions.height,
-  };
-};
-```
-
-## Setting duration based on multiple videos
-
-```tsx
-const calculateMetadata: CalculateMetadataFunction<Props> = async ({
-  props,
-}) => {
-  const metadataPromises = props.videos.map((video) =>
-    getVideoDuration(video.src),
-  );
-  const allMetadata = await Promise.all(metadataPromises);
-
-  const totalDuration = allMetadata.reduce(
-    (sum, durationInSeconds) => sum + durationInSeconds,
-    0,
-  );
-
-  return {
-    durationInFrames: Math.ceil(totalDuration * 30),
-  };
-};
-```
-
-## Setting a default outName
-
-Set the default output filename based on props:
-
-```tsx
-const calculateMetadata: CalculateMetadataFunction<Props> = async ({
-  props,
-}) => {
-  return {
-    defaultOutName: `video-${props.id}.mp4`,
-  };
-};
-```
-
-## Transforming props
-
-Fetch data or transform props before rendering:
-
-```tsx
-const calculateMetadata: CalculateMetadataFunction<Props> = async ({
-  props,
-  abortSignal,
-}) => {
-  const response = await fetch(props.dataUrl, { signal: abortSignal });
-  const data = await response.json();
-
-  return {
-    props: {
-      ...props,
-      fetchedData: data,
-    },
-  };
-};
-```
-
-The `abortSignal` cancels stale requests when props change in the Studio.
-
-## Return value
-
-All fields are optional. Returned values override the `<Composition>` props:
-
-- `durationInFrames`: Number of frames
-- `width`: Composition width in pixels
-- `height`: Composition height in pixels
-- `fps`: Frames per second
-- `props`: Transformed props passed to the component
-- `defaultOutName`: Default output filename
-- `defaultCodec`: Default codec for rendering

.agents/skills/remotion-best-practices/rules/can-decode.md

@@ -1,75 +0,0 @@
----
-name: can-decode
-description: Check if a video can be decoded by the browser using Mediabunny
-metadata:
-  tags: decode, validation, video, audio, compatibility, browser
----
-
-# Checking if a video can be decoded
-
-Use Mediabunny to check if a video can be decoded by the browser before attempting to play it.
-
-## The `canDecode()` function
-
-This function can be copy-pasted into any project.
-
-```tsx
-import { Input, ALL_FORMATS, UrlSource } from "mediabunny";
-
-export const canDecode = async (src: string) => {
-  const input = new Input({
-    formats: ALL_FORMATS,
-    source: new UrlSource(src, {
-      getRetryDelay: () => null,
-    }),
-  });
-
-  try {
-    await input.getFormat();
-  } catch {
-    return false;
-  }
-
-  const videoTrack = await input.getPrimaryVideoTrack();
-  if (videoTrack && !(await videoTrack.canDecode())) {
-    return false;
-  }
-
-  const audioTrack = await input.getPrimaryAudioTrack();
-  if (audioTrack && !(await audioTrack.canDecode())) {
-    return false;
-  }
-
-  return true;
-};
-```
-
-## Usage
-
-```tsx
-const src = "https://remotion.media/video.mp4";
-const isDecodable = await canDecode(src);
-
-if (isDecodable) {
-  console.log("Video can be decoded");
-} else {
-  console.log("Video cannot be decoded by this browser");
-}
-```
-
-## Using with Blob
-
-For file uploads or drag-and-drop, use `BlobSource`:
-
-```tsx
-import { Input, ALL_FORMATS, BlobSource } from "mediabunny";
-
-export const canDecodeBlob = async (blob: Blob) => {
-  const input = new Input({
-    formats: ALL_FORMATS,
-    source: new BlobSource(blob),
-  });
-
-  // Same validation logic as above
-};
-```

.agents/skills/remotion-best-practices/rules/charts.md

@@ -1,120 +0,0 @@
----
-name: charts
-description: Chart and data visualization patterns for Remotion. Use when creating bar charts, pie charts, line charts, stock graphs, or any data-driven animations.
-metadata:
-  tags: charts, data, visualization, bar-chart, pie-chart, line-chart, stock-chart, svg-paths, graphs
----
-
-# Charts in Remotion
-
-Create charts using React code - HTML, SVG, and D3.js are all supported.
-
-Disable all animations from third party libraries - they cause flickering.  
-Drive all animations from `useCurrentFrame()`.
-
-## Bar Chart
-
-```tsx
-const STAGGER_DELAY = 5;
-const frame = useCurrentFrame();
-const { fps } = useVideoConfig();
-
-const bars = data.map((item, i) => {
-  const height = spring({
-    frame,
-    fps,
-    delay: i * STAGGER_DELAY,
-    config: { damping: 200 },
-  });
-  return <div style={{ height: height * item.value }} />;
-});
-```
-
-## Pie Chart
-
-Animate segments using stroke-dashoffset, starting from 12 o'clock:
-
-```tsx
-const progress = interpolate(frame, [0, 100], [0, 1]);
-const circumference = 2 * Math.PI * radius;
-const segmentLength = (value / total) * circumference;
-const offset = interpolate(progress, [0, 1], [segmentLength, 0]);
-
-<circle
-  r={radius}
-  cx={center}
-  cy={center}
-  fill="none"
-  stroke={color}
-  strokeWidth={strokeWidth}
-  strokeDasharray={`${segmentLength} ${circumference}`}
-  strokeDashoffset={offset}
-  transform={`rotate(-90 ${center} ${center})`}
-/>;
-```
-
-## Line Chart / Path Animation
-
-Use `@remotion/paths` for animating SVG paths (line charts, stock graphs, signatures).
-
-Install: `npx remotion add @remotion/paths`  
-Docs: https://remotion.dev/docs/paths.md
-
-### Convert data points to SVG path
-
-```tsx
-type Point = { x: number; y: number };
-
-const generateLinePath = (points: Point[]): string => {
-  if (points.length < 2) return "";
-  return points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ");
-};
-```
-
-### Draw path with animation
-
-```tsx
-import { evolvePath } from "@remotion/paths";
-
-const path = "M 100 200 L 200 150 L 300 180 L 400 100";
-const progress = interpolate(frame, [0, 2 * fps], [0, 1], {
-  extrapolateLeft: "clamp",
-  extrapolateRight: "clamp",
-  easing: Easing.out(Easing.quad),
-});
-
-const { strokeDasharray, strokeDashoffset } = evolvePath(progress, path);
-
-<path
-  d={path}
-  fill="none"
-  stroke="#FF3232"
-  strokeWidth={4}
-  strokeDasharray={strokeDasharray}
-  strokeDashoffset={strokeDashoffset}
-/>;
-```
-
-### Follow path with marker/arrow
-
-```tsx
-import {
-  getLength,
-  getPointAtLength,
-  getTangentAtLength,
-} from "@remotion/paths";
-
-const pathLength = getLength(path);
-const point = getPointAtLength(path, progress * pathLength);
-const tangent = getTangentAtLength(path, progress * pathLength);
-const angle = Math.atan2(tangent.y, tangent.x);
-
-<g
-  style={{
-    transform: `translate(${point.x}px, ${point.y}px) rotate(${angle}rad)`,
-    transformOrigin: "0 0",
-  }}
->
-  <polygon points="0,0 -20,-10 -20,10" fill="#FF3232" />
-</g>;
-```

.agents/skills/remotion-best-practices/rules/compositions.md

@@ -1,154 +0,0 @@
----
-name: compositions
-description: Defining compositions, stills, folders, default props and dynamic metadata
-metadata:
-  tags: composition, still, folder, props, metadata
----
-
-A `<Composition>` defines the component, width, height, fps and duration of a renderable video.
-
-It normally is placed in the `src/Root.tsx` file.
-
-```tsx
-import { Composition } from "remotion";
-import { MyComposition } from "./MyComposition";
-
-export const RemotionRoot = () => {
-  return (
-    <Composition
-      id="MyComposition"
-      component={MyComposition}
-      durationInFrames={100}
-      fps={30}
-      width={1080}
-      height={1080}
-    />
-  );
-};
-```
-
-## Default Props
-
-Pass `defaultProps` to provide initial values for your component.  
-Values must be JSON-serializable (`Date`, `Map`, `Set`, and `staticFile()` are supported).
-
-```tsx
-import { Composition } from "remotion";
-import { MyComposition, MyCompositionProps } from "./MyComposition";
-
-export const RemotionRoot = () => {
-  return (
-    <Composition
-      id="MyComposition"
-      component={MyComposition}
-      durationInFrames={100}
-      fps={30}
-      width={1080}
-      height={1080}
-      defaultProps={
-        {
-          title: "Hello World",
-          color: "#ff0000",
-        } satisfies MyCompositionProps
-      }
-    />
-  );
-};
-```
-
-Use `type` declarations for props rather than `interface` to ensure `defaultProps` type safety.
-
-## Folders
-
-Use `<Folder>` to organize compositions in the sidebar.  
-Folder names can only contain letters, numbers, and hyphens.
-
-```tsx
-import { Composition, Folder } from "remotion";
-
-export const RemotionRoot = () => {
-  return (
-    <>
-      <Folder name="Marketing">
-        <Composition id="Promo" /* ... */ />
-        <Composition id="Ad" /* ... */ />
-      </Folder>
-      <Folder name="Social">
-        <Folder name="Instagram">
-          <Composition id="Story" /* ... */ />
-          <Composition id="Reel" /* ... */ />
-        </Folder>
-      </Folder>
-    </>
-  );
-};
-```
-
-## Stills
-
-Use `<Still>` for single-frame images. It does not require `durationInFrames` or `fps`.
-
-```tsx
-import { Still } from "remotion";
-import { Thumbnail } from "./Thumbnail";
-
-export const RemotionRoot = () => {
-  return (
-    <Still id="Thumbnail" component={Thumbnail} width={1280} height={720} />
-  );
-};
-```
-
-## Calculate Metadata
-
-Use `calculateMetadata` to make dimensions, duration, or props dynamic based on data.
-
-```tsx
-import { Composition, CalculateMetadataFunction } from "remotion";
-import { MyComposition, MyCompositionProps } from "./MyComposition";
-
-const calculateMetadata: CalculateMetadataFunction<
-  MyCompositionProps
-> = async ({ props, abortSignal }) => {
-  const data = await fetch(`https://api.example.com/video/${props.videoId}`, {
-    signal: abortSignal,
-  }).then((res) => res.json());
-
-  return {
-    durationInFrames: Math.ceil(data.duration * 30),
-    props: {
-      ...props,
-      videoUrl: data.url,
-    },
-  };
-};
-
-export const RemotionRoot = () => {
-  return (
-    <Composition
-      id="MyComposition"
-      component={MyComposition}
-      durationInFrames={100} // Placeholder, will be overridden
-      fps={30}
-      width={1080}
-      height={1080}
-      defaultProps={{ videoId: "abc123" }}
-      calculateMetadata={calculateMetadata}
-    />
-  );
-};
-```
-
-The function can return `props`, `durationInFrames`, `width`, `height`, `fps`, and codec-related defaults. It runs once before rendering begins.
-
-## Nesting compositions within another
-
-To add a composition within another composition, you can use the `<Sequence>` component with a `width` and `height` prop to specify the size of the composition.
-
-```tsx
-<AbsoluteFill>
-  <Sequence width={COMPOSITION_WIDTH} height={COMPOSITION_HEIGHT}>
-    <CompositionComponent />
-  </Sequence>
-</AbsoluteFill>
-```

.agents/skills/remotion-best-practices/rules/display-captions.md

@@ -1,184 +0,0 @@
----
-name: display-captions
-description: Displaying captions in Remotion with TikTok-style pages and word highlighting
-metadata:
-  tags: captions, subtitles, display, tiktok, highlight
----
-
-# Displaying captions in Remotion
-
-This guide explains how to display captions in Remotion, assuming you already have captions in the [`Caption`](https://www.remotion.dev/docs/captions/caption) format.
-
-## Prerequisites
-
-Read [Transcribing audio](transcribe-captions.md) for how to generate captions.
-
-First, the [`@remotion/captions`](https://www.remotion.dev/docs/captions) package needs to be installed.
-If it is not installed, use the following command:
-
-```bash
-npx remotion add @remotion/captions
-```
-
-## Fetching captions
-
-First, fetch your captions JSON file. Use [`useDelayRender()`](https://www.remotion.dev/docs/use-delay-render) to hold the render until the captions are loaded:
-
-```tsx
-import { useState, useEffect, useCallback } from "react";
-import { AbsoluteFill, staticFile, useDelayRender } from "remotion";
-import type { Caption } from "@remotion/captions";
-
-export const MyComponent: React.FC = () => {
-  const [captions, setCaptions] = useState<Caption[] | null>(null);
-  const { delayRender, continueRender, cancelRender } = useDelayRender();
-  const [handle] = useState(() => delayRender());
-
-  const fetchCaptions = useCallback(async () => {
-    try {
-      // Assuming captions.json is in the public/ folder.
-      const response = await fetch(staticFile("captions123.json"));
-      const data = await response.json();
-      setCaptions(data);
-      continueRender(handle);
-    } catch (e) {
-      cancelRender(e);
-    }
-  }, [continueRender, cancelRender, handle]);
-
-  useEffect(() => {
-    fetchCaptions();
-  }, [fetchCaptions]);
-
-  if (!captions) {
-    return null;
-  }
-
-  return <AbsoluteFill>{/* Render captions here */}</AbsoluteFill>;
-};
-```
-
-## Creating pages
-
-Use `createTikTokStyleCaptions()` to group captions into pages. The `combineTokensWithinMilliseconds` option controls how many words appear at once:
-
-```tsx
-import { useMemo } from "react";
-import { createTikTokStyleCaptions } from "@remotion/captions";
-import type { Caption } from "@remotion/captions";
-
-// How often captions should switch (in milliseconds)
-// Higher values = more words per page
-// Lower values = fewer words (more word-by-word)
-const SWITCH_CAPTIONS_EVERY_MS = 1200;
-
-const { pages } = useMemo(() => {
-  return createTikTokStyleCaptions({
-    captions,
-    combineTokensWithinMilliseconds: SWITCH_CAPTIONS_EVERY_MS,
-  });
-}, [captions]);
-```
-
-## Rendering with Sequences
-
-Map over the pages and render each one in a `<Sequence>`. Calculate the start frame and duration from the page timing:
-
-```tsx
-import { Sequence, useVideoConfig, AbsoluteFill } from "remotion";
-import type { TikTokPage } from "@remotion/captions";
-
-const CaptionedContent: React.FC = () => {
-  const { fps } = useVideoConfig();
-
-  return (
-    <AbsoluteFill>
-      {pages.map((page, index) => {
-        const nextPage = pages[index + 1] ?? null;
-        const startFrame = (page.startMs / 1000) * fps;
-        const endFrame = Math.min(
-          nextPage ? (nextPage.startMs / 1000) * fps : Infinity,
-          startFrame + (SWITCH_CAPTIONS_EVERY_MS / 1000) * fps,
-        );
-        const durationInFrames = endFrame - startFrame;
-
-        if (durationInFrames <= 0) {
-          return null;
-        }
-
-        return (
-          <Sequence
-            key={index}
-            from={startFrame}
-            durationInFrames={durationInFrames}
-          >
-            <CaptionPage page={page} />
-          </Sequence>
-        );
-      })}
-    </AbsoluteFill>
-  );
-};
-```
-
-## White-space preservation
-
-The captions are whitespace sensitive. You should include spaces in the `text` field before each word. Use `whiteSpace: "pre"` to preserve the whitespace in the captions.
-
-## Separate component for captions
-
-Put captioning logic in a separate component.  
-Make a new file for it.
-
-## Word highlighting
-
-A caption page contains `tokens` which you can use to highlight the currently spoken word:
-
-```tsx
-import { AbsoluteFill, useCurrentFrame, useVideoConfig } from "remotion";
-import type { TikTokPage } from "@remotion/captions";
-
-const HIGHLIGHT_COLOR = "#39E508";
-
-const CaptionPage: React.FC<{ page: TikTokPage }> = ({ page }) => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
-
-  // Current time relative to the start of the sequence
-  const currentTimeMs = (frame / fps) * 1000;
-  // Convert to absolute time by adding the page start
-  const absoluteTimeMs = page.startMs + currentTimeMs;
-
-  return (
-    <AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
-      <div style={{ fontSize: 80, fontWeight: "bold", whiteSpace: "pre" }}>
-        {page.tokens.map((token) => {
-          const isActive =
-            token.fromMs <= absoluteTimeMs && token.toMs > absoluteTimeMs;
-
-          return (
-            <span
-              key={token.fromMs}
-              style={{ color: isActive ? HIGHLIGHT_COLOR : "white" }}
-            >
-              {token.text}
-            </span>
-          );
-        })}
-      </div>
-    </AbsoluteFill>
-  );
-};
-```
-
-## Display captions alongside video content
-
-By default, put the captions alongside the video content, so the captions are in sync.  
-For each video, make a new captions JSON file.
-
-```tsx
-<AbsoluteFill>
-  <Video src={staticFile("video.mp4")} />
-  <CaptionPage page={page} />
-</AbsoluteFill>
-```

.agents/skills/remotion-best-practices/rules/extract-frames.md

@@ -1,229 +0,0 @@
----
-name: extract-frames
-description: Extract frames from videos at specific timestamps using Mediabunny
-metadata:
-  tags: frames, extract, video, thumbnail, filmstrip, canvas
----
-
-# Extracting frames from videos
-
-Use Mediabunny to extract frames from videos at specific timestamps. This is useful for generating thumbnails, filmstrips, or processing individual frames.
-
-## The `extractFrames()` function
-
-This function can be copy-pasted into any project.
-
-```tsx
-import {
-  ALL_FORMATS,
-  Input,
-  UrlSource,
-  VideoSample,
-  VideoSampleSink,
-} from "mediabunny";
-
-type Options = {
-  track: { width: number; height: number };
-  container: string;
-  durationInSeconds: number | null;
-};
-
-export type ExtractFramesTimestampsInSecondsFn = (
-  options: Options,
-) => Promise<number[]> | number[];
-
-export type ExtractFramesProps = {
-  src: string;
-  timestampsInSeconds: number[] | ExtractFramesTimestampsInSecondsFn;
-  onVideoSample: (sample: VideoSample) => void;
-  signal?: AbortSignal;
-};
-
-export async function extractFrames({
-  src,
-  timestampsInSeconds,
-  onVideoSample,
-  signal,
-}: ExtractFramesProps): Promise<void> {
-  using input = new Input({
-    formats: ALL_FORMATS,
-    source: new UrlSource(src),
-  });
-
-  const [durationInSeconds, format, videoTrack] = await Promise.all([
-    input.computeDuration(),
-    input.getFormat(),
-    input.getPrimaryVideoTrack(),
-  ]);
-
-  if (!videoTrack) {
-    throw new Error("No video track found in the input");
-  }
-
-  if (signal?.aborted) {
-    throw new Error("Aborted");
-  }
-
-  const timestamps =
-    typeof timestampsInSeconds === "function"
-      ? await timestampsInSeconds({
-          track: {
-            width: videoTrack.displayWidth,
-            height: videoTrack.displayHeight,
-          },
-          container: format.name,
-          durationInSeconds,
-        })
-      : timestampsInSeconds;
-
-  if (timestamps.length === 0) {
-    return;
-  }
-
-  if (signal?.aborted) {
-    throw new Error("Aborted");
-  }
-
-  const sink = new VideoSampleSink(videoTrack);
-
-  for await (using videoSample of sink.samplesAtTimestamps(timestamps)) {
-    if (signal?.aborted) {
-      break;
-    }
-
-    if (!videoSample) {
-      continue;
-    }
-
-    onVideoSample(videoSample);
-  }
-}
-```
-
-## Basic usage
-
-Extract frames at specific timestamps:
-
-```tsx
-await extractFrames({
-  src: "https://remotion.media/video.mp4",
-  timestampsInSeconds: [0, 1, 2, 3, 4],
-  onVideoSample: (sample) => {
-    const canvas = document.createElement("canvas");
-    canvas.width = sample.displayWidth;
-    canvas.height = sample.displayHeight;
-    const ctx = canvas.getContext("2d");
-    sample.draw(ctx!, 0, 0);
-  },
-});
-```
-
-## Creating a filmstrip
-
-Use a callback function to dynamically calculate timestamps based on video metadata:
-
-```tsx
-const canvasWidth = 500;
-const canvasHeight = 80;
-const fromSeconds = 0;
-const toSeconds = 10;
-
-await extractFrames({
-  src: "https://remotion.media/video.mp4",
-  timestampsInSeconds: async ({ track, durationInSeconds }) => {
-    const aspectRatio = track.width / track.height;
-    const amountOfFramesFit = Math.ceil(
-      canvasWidth / (canvasHeight * aspectRatio),
-    );
-    const segmentDuration = toSeconds - fromSeconds;
-    const timestamps: number[] = [];
-
-    for (let i = 0; i < amountOfFramesFit; i++) {
-      timestamps.push(
-        fromSeconds + (segmentDuration / amountOfFramesFit) * (i + 0.5),
-      );
-    }
-
-    return timestamps;
-  },
-  onVideoSample: (sample) => {
-    console.log(`Frame at ${sample.timestamp}s`);
-
-    const canvas = document.createElement("canvas");
-    canvas.width = sample.displayWidth;
-    canvas.height = sample.displayHeight;
-    const ctx = canvas.getContext("2d");
-    sample.draw(ctx!, 0, 0);
-  },
-});
-```
-
-## Cancellation with AbortSignal
-
-Cancel frame extraction after a timeout:
-
-```tsx
-const controller = new AbortController();
-
-setTimeout(() => controller.abort(), 5000);
-
-try {
-  await extractFrames({
-    src: "https://remotion.media/video.mp4",
-    timestampsInSeconds: [0, 1, 2, 3, 4],
-    onVideoSample: (sample) => {
-      using frame = sample;
-      const canvas = document.createElement("canvas");
-      canvas.width = frame.displayWidth;
-      canvas.height = frame.displayHeight;
-      const ctx = canvas.getContext("2d");
-      frame.draw(ctx!, 0, 0);
-    },
-    signal: controller.signal,
-  });
-
-  console.log("Frame extraction complete!");
-} catch (error) {
-  console.error("Frame extraction was aborted or failed:", error);
-}
-```
-
-## Timeout with Promise.race
-
-```tsx
-const controller = new AbortController();
-
-const timeoutPromise = new Promise<never>((_, reject) => {
-  const timeoutId = setTimeout(() => {
-    controller.abort();
-    reject(new Error("Frame extraction timed out after 10 seconds"));
-  }, 10000);
-
-  controller.signal.addEventListener("abort", () => clearTimeout(timeoutId), {
-    once: true,
-  });
-});
-
-try {
-  await Promise.race([
-    extractFrames({
-      src: "https://remotion.media/video.mp4",
-      timestampsInSeconds: [0, 1, 2, 3, 4],
-      onVideoSample: (sample) => {
-        using frame = sample;
-        const canvas = document.createElement("canvas");
-        canvas.width = frame.displayWidth;
-        canvas.height = frame.displayHeight;
-        const ctx = canvas.getContext("2d");
-        frame.draw(ctx!, 0, 0);
-      },
-      signal: controller.signal,
-    }),
-    timeoutPromise,
-  ]);
-
-  console.log("Frame extraction complete!");
-} catch (error) {
-  console.error("Frame extraction was aborted or failed:", error);
-}
-```

.agents/skills/remotion-best-practices/rules/ffmpeg.md

@@ -1,38 +0,0 @@
----
-name: ffmpeg
-description: Using FFmpeg and FFprobe in Remotion
-metadata:
-  tags: ffmpeg, ffprobe, video, trimming
----
-
-## FFmpeg in Remotion
-
-`ffmpeg` and `ffprobe` do not need to be installed. They are available via the `bunx remotion ffmpeg` and `bunx remotion ffprobe`:
-
-```bash
-bunx remotion ffmpeg -i input.mp4 output.mp3
-bunx remotion ffprobe input.mp4
-```
-
-### Trimming videos
-
-You have 2 options for trimming videos:
-
-1. Use the FFMpeg command line. You MUST re-encode the video to avoid frozen frames at the start of the video.
-
-```bash
-# Re-encodes from the exact frame
-bunx remotion ffmpeg -ss 00:00:05 -i public/input.mp4 -to 00:00:10 -c:v libx264 -c:a aac public/output.mp4
-```
-
-2. Use the `trimBefore` and `trimAfter` props of the `<Video>` component. The benefit is that this is non-destructive and you can change the trim at any time.
-
-```tsx
-import { Video } from "@remotion/media";
-
-<Video
-  src={staticFile("video.mp4")}
-  trimBefore={5 * fps}
-  trimAfter={10 * fps}
-/>;
-```

.agents/skills/remotion-best-practices/rules/fonts.md

@@ -1,152 +0,0 @@
----
-name: fonts
-description: Loading Google Fonts and local fonts in Remotion
-metadata:
-  tags: fonts, google-fonts, typography, text
----
-
-# Using fonts in Remotion
-
-## Google Fonts with @remotion/google-fonts
-
-The recommended way to use Google Fonts. It's type-safe and automatically blocks rendering until the font is ready.
-
-### Prerequisites
-
-First, the @remotion/google-fonts package needs to be installed.
-If it is not installed, use the following command:
-
-```bash
-npx remotion add @remotion/google-fonts # If project uses npm
-bunx remotion add @remotion/google-fonts # If project uses bun
-yarn remotion add @remotion/google-fonts # If project uses yarn
-pnpm exec remotion add @remotion/google-fonts # If project uses pnpm
-```
-
-```tsx
-import { loadFont } from "@remotion/google-fonts/Lobster";
-
-const { fontFamily } = loadFont();
-
-export const MyComposition = () => {
-  return <div style={{ fontFamily }}>Hello World</div>;
-};
-```
-
-Preferrably, specify only needed weights and subsets to reduce file size:
-
-```tsx
-import { loadFont } from "@remotion/google-fonts/Roboto";
-
-const { fontFamily } = loadFont("normal", {
-  weights: ["400", "700"],
-  subsets: ["latin"],
-});
-```
-
-### Waiting for font to load
-
-Use `waitUntilDone()` if you need to know when the font is ready:
-
-```tsx
-import { loadFont } from "@remotion/google-fonts/Lobster";
-
-const { fontFamily, waitUntilDone } = loadFont();
-
-await waitUntilDone();
-```
-
-## Local fonts with @remotion/fonts
-
-For local font files, use the `@remotion/fonts` package.
-
-### Prerequisites
-
-First, install @remotion/fonts:
-
-```bash
-npx remotion add @remotion/fonts # If project uses npm
-bunx remotion add @remotion/fonts # If project uses bun
-yarn remotion add @remotion/fonts # If project uses yarn
-pnpm exec remotion add @remotion/fonts # If project uses pnpm
-```
-
-### Loading a local font
-
-Place your font file in the `public/` folder and use `loadFont()`:
-
-```tsx
-import { loadFont } from "@remotion/fonts";
-import { staticFile } from "remotion";
-
-await loadFont({
-  family: "MyFont",
-  url: staticFile("MyFont-Regular.woff2"),
-});
-
-export const MyComposition = () => {
-  return <div style={{ fontFamily: "MyFont" }}>Hello World</div>;
-};
-```
-
-### Loading multiple weights
-
-Load each weight separately with the same family name:
-
-```tsx
-import { loadFont } from "@remotion/fonts";
-import { staticFile } from "remotion";
-
-await Promise.all([
-  loadFont({
-    family: "Inter",
-    url: staticFile("Inter-Regular.woff2"),
-    weight: "400",
-  }),
-  loadFont({
-    family: "Inter",
-    url: staticFile("Inter-Bold.woff2"),
-    weight: "700",
-  }),
-]);
-```
-
-### Available options
-
-```tsx
-loadFont({
-  family: "MyFont", // Required: name to use in CSS
-  url: staticFile("font.woff2"), // Required: font file URL
-  format: "woff2", // Optional: auto-detected from extension
-  weight: "400", // Optional: font weight
-  style: "normal", // Optional: normal or italic
-  display: "block", // Optional: font-display behavior
-});
-```
-
-## Using in components
-
-Call `loadFont()` at the top level of your component or in a separate file that's imported early:
-
-```tsx
-import { loadFont } from "@remotion/google-fonts/Montserrat";
-
-const { fontFamily } = loadFont("normal", {
-  weights: ["400", "700"],
-  subsets: ["latin"],
-});
-
-export const Title: React.FC<{ text: string }> = ({ text }) => {
-  return (
-    <h1
-      style={{
-        fontFamily,
-        fontSize: 80,
-        fontWeight: "bold",
-      }}
-    >
-      {text}
-    </h1>
-  );
-};
-```

.agents/skills/remotion-best-practices/rules/get-audio-duration.md

@@ -1,58 +0,0 @@
----
-name: get-audio-duration
-description: Getting the duration of an audio file in seconds with Mediabunny
-metadata:
-  tags: duration, audio, length, time, seconds, mp3, wav
----
-
-# Getting audio duration with Mediabunny
-
-Mediabunny can extract the duration of an audio file. It works in browser, Node.js, and Bun environments.
-
-## Getting audio duration
-
-```tsx title="get-audio-duration.ts"
-import { Input, ALL_FORMATS, UrlSource } from "mediabunny";
-
-export const getAudioDuration = async (src: string) => {
-  const input = new Input({
-    formats: ALL_FORMATS,
-    source: new UrlSource(src, {
-      getRetryDelay: () => null,
-    }),
-  });
-
-  const durationInSeconds = await input.computeDuration();
-  return durationInSeconds;
-};
-```
-
-## Usage
-
-```tsx
-const duration = await getAudioDuration("https://remotion.media/audio.mp3");
-console.log(duration); // e.g. 180.5 (seconds)
-```
-
-## Using with staticFile in Remotion
-
-Make sure to wrap the file path in `staticFile()`:
-
-```tsx
-import { staticFile } from "remotion";
-
-const duration = await getAudioDuration(staticFile("audio.mp3"));
-```
-
-## In Node.js and Bun
-
-Use `FileSource` instead of `UrlSource`:
-
-```tsx
-import { Input, ALL_FORMATS, FileSource } from "mediabunny";
-
-const input = new Input({
-  formats: ALL_FORMATS,
-  source: new FileSource(file), // File object from input or drag-drop
-});
-```

.agents/skills/remotion-best-practices/rules/get-video-dimensions.md

@@ -1,68 +0,0 @@
----
-name: get-video-dimensions
-description: Getting the width and height of a video file with Mediabunny
-metadata:
-  tags: dimensions, width, height, resolution, size, video
----
-
-# Getting video dimensions with Mediabunny
-
-Mediabunny can extract the width and height of a video file. It works in browser, Node.js, and Bun environments.
-
-## Getting video dimensions
-
-```tsx
-import { Input, ALL_FORMATS, UrlSource } from "mediabunny";
-
-export const getVideoDimensions = async (src: string) => {
-  const input = new Input({
-    formats: ALL_FORMATS,
-    source: new UrlSource(src, {
-      getRetryDelay: () => null,
-    }),
-  });
-
-  const videoTrack = await input.getPrimaryVideoTrack();
-  if (!videoTrack) {
-    throw new Error("No video track found");
-  }
-
-  return {
-    width: videoTrack.displayWidth,
-    height: videoTrack.displayHeight,
-  };
-};
-```
-
-## Usage
-
-```tsx
-const dimensions = await getVideoDimensions("https://remotion.media/video.mp4");
-console.log(dimensions.width); // e.g. 1920
-console.log(dimensions.height); // e.g. 1080
-```
-
-## Using with local files
-
-For local files, use `FileSource` instead of `UrlSource`:
-
-```tsx
-import { Input, ALL_FORMATS, FileSource } from "mediabunny";
-
-const input = new Input({
-  formats: ALL_FORMATS,
-  source: new FileSource(file), // File object from input or drag-drop
-});
-
-const videoTrack = await input.getPrimaryVideoTrack();
-const width = videoTrack.displayWidth;
-const height = videoTrack.displayHeight;
-```
-
-## Using with staticFile in Remotion
-
-```tsx
-import { staticFile } from "remotion";
-
-const dimensions = await getVideoDimensions(staticFile("video.mp4"));
-```

.agents/skills/remotion-best-practices/rules/get-video-duration.md

@@ -1,60 +0,0 @@
----
-name: get-video-duration
-description: Getting the duration of a video file in seconds with Mediabunny
-metadata:
-  tags: duration, video, length, time, seconds
----
-
-# Getting video duration with Mediabunny
-
-Mediabunny can extract the duration of a video file. It works in browser, Node.js, and Bun environments.
-
-## Getting video duration
-
-```tsx
-import { Input, ALL_FORMATS, UrlSource } from "mediabunny";
-
-export const getVideoDuration = async (src: string) => {
-  const input = new Input({
-    formats: ALL_FORMATS,
-    source: new UrlSource(src, {
-      getRetryDelay: () => null,
-    }),
-  });
-
-  const durationInSeconds = await input.computeDuration();
-  return durationInSeconds;
-};
-```
-
-## Usage
-
-```tsx
-const duration = await getVideoDuration("https://remotion.media/video.mp4");
-console.log(duration); // e.g. 10.5 (seconds)
-```
-
-## Video files from the public/ directory
-
-Make sure to wrap the file path in `staticFile()`:
-
-```tsx
-import { staticFile } from "remotion";
-
-const duration = await getVideoDuration(staticFile("video.mp4"));
-```
-
-## In Node.js and Bun
-
-Use `FileSource` instead of `UrlSource`:
-
-```tsx
-import { Input, ALL_FORMATS, FileSource } from "mediabunny";
-
-const input = new Input({
-  formats: ALL_FORMATS,
-  source: new FileSource(file), // File object from input or drag-drop
-});
-
-const durationInSeconds = await input.computeDuration();
-```

.agents/skills/remotion-best-practices/rules/gifs.md

@@ -1,141 +0,0 @@
----
-name: gif
-description: Displaying GIFs, APNG, AVIF and WebP in Remotion
-metadata:
-  tags: gif, animation, images, animated, apng, avif, webp
----
-
-# Using Animated images in Remotion
-
-## Basic usage
-
-Use `<AnimatedImage>` to display a GIF, APNG, AVIF or WebP image synchronized with Remotion's timeline:
-
-```tsx
-import { AnimatedImage, staticFile } from "remotion";
-
-export const MyComposition = () => {
-  return (
-    <AnimatedImage src={staticFile("animation.gif")} width={500} height={500} />
-  );
-};
-```
-
-Remote URLs are also supported (must have CORS enabled):
-
-```tsx
-<AnimatedImage
-  src="https://example.com/animation.gif"
-  width={500}
-  height={500}
-/>
-```
-
-## Sizing and fit
-
-Control how the image fills its container with the `fit` prop:
-
-```tsx
-// Stretch to fill (default)
-<AnimatedImage src={staticFile("animation.gif")} width={500} height={300} fit="fill" />
-
-// Maintain aspect ratio, fit inside container
-<AnimatedImage src={staticFile("animation.gif")} width={500} height={300} fit="contain" />
-
-// Fill container, crop if needed
-<AnimatedImage src={staticFile("animation.gif")} width={500} height={300} fit="cover" />
-```
-
-## Playback speed
-
-Use `playbackRate` to control the animation speed:
-
-```tsx
-<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} playbackRate={2} /> {/* 2x speed */}
-<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} playbackRate={0.5} /> {/* Half speed */}
-```
-
-## Looping behavior
-
-Control what happens when the animation finishes:
-
-```tsx
-// Loop indefinitely (default)
-<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} loopBehavior="loop" />
-
-// Play once, show final frame
-<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} loopBehavior="pause-after-finish" />
-
-// Play once, then clear canvas
-<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} loopBehavior="clear-after-finish" />
-```
-
-## Styling
-
-Use the `style` prop for additional CSS (use `width` and `height` props for sizing):
-
-```tsx
-<AnimatedImage
-  src={staticFile("animation.gif")}
-  width={500}
-  height={500}
-  style={{
-    borderRadius: 20,
-    position: "absolute",
-    top: 100,
-    left: 50,
-  }}
-/>
-```
-
-## Getting GIF duration
-
-Use `getGifDurationInSeconds()` from `@remotion/gif` to get the duration of a GIF.
-
-```bash
-npx remotion add @remotion/gif
-```
-
-```tsx
-import { getGifDurationInSeconds } from "@remotion/gif";
-import { staticFile } from "remotion";
-
-const duration = await getGifDurationInSeconds(staticFile("animation.gif"));
-console.log(duration); // e.g. 2.5
-```
-
-This is useful for setting the composition duration to match the GIF:
-
-```tsx
-import { getGifDurationInSeconds } from "@remotion/gif";
-import { staticFile, CalculateMetadataFunction } from "remotion";
-
-const calculateMetadata: CalculateMetadataFunction = async () => {
-  const duration = await getGifDurationInSeconds(staticFile("animation.gif"));
-  return {
-    durationInFrames: Math.ceil(duration * 30),
-  };
-};
-```
-
-## Alternative
-
-If `<AnimatedImage>` does not work (only supported in Chrome and Firefox), you can use `<Gif>` from `@remotion/gif` instead.
-
-```bash
-npx remotion add @remotion/gif # If project uses npm
-bunx remotion add @remotion/gif # If project uses bun
-yarn remotion add @remotion/gif # If project uses yarn
-pnpm exec remotion add @remotion/gif # If project uses pnpm
-```
-
-```tsx
-import { Gif } from "@remotion/gif";
-import { staticFile } from "remotion";
-
-export const MyComposition = () => {
-  return <Gif src={staticFile("animation.gif")} width={500} height={500} />;
-};
-```
-
-The `<Gif>` component has the same props as `<AnimatedImage>` but only supports GIF files.

.agents/skills/remotion-best-practices/rules/images.md

@@ -1,134 +0,0 @@
----
-name: images
-description: Embedding images in Remotion using the <Img> component
-metadata:
-  tags: images, img, staticFile, png, jpg, svg, webp
----
-
-# Using images in Remotion
-
-## The `<Img>` component
-
-Always use the `<Img>` component from `remotion` to display images:
-
-```tsx
-import { Img, staticFile } from "remotion";
-
-export const MyComposition = () => {
-  return <Img src={staticFile("photo.png")} />;
-};
-```
-
-## Important restrictions
-
-**You MUST use the `<Img>` component from `remotion`.** Do not use:
-
-- Native HTML `<img>` elements
-- Next.js `<Image>` component
-- CSS `background-image`
-
-The `<Img>` component ensures images are fully loaded before rendering, preventing flickering and blank frames during video export.
-
-## Local images with staticFile()
-
-Place images in the `public/` folder and use `staticFile()` to reference them:
-
-```
-my-video/
-├─ public/
-│  ├─ logo.png
-│  ├─ avatar.jpg
-│  └─ icon.svg
-├─ src/
-├─ package.json
-```
-
-```tsx
-import { Img, staticFile } from "remotion";
-
-<Img src={staticFile("logo.png")} />;
-```
-
-## Remote images
-
-Remote URLs can be used directly without `staticFile()`:
-
-```tsx
-<Img src="https://example.com/image.png" />
-```
-
-Ensure remote images have CORS enabled.
-
-For animated GIFs, use the `<Gif>` component from `@remotion/gif` instead.
-
-## Sizing and positioning
-
-Use the `style` prop to control size and position:
-
-```tsx
-<Img
-  src={staticFile("photo.png")}
-  style={{
-    width: 500,
-    height: 300,
-    position: "absolute",
-    top: 100,
-    left: 50,
-    objectFit: "cover",
-  }}
-/>
-```
-
-## Dynamic image paths
-
-Use template literals for dynamic file references:
-
-```tsx
-import { Img, staticFile, useCurrentFrame } from "remotion";
-
-const frame = useCurrentFrame();
-
-// Image sequence
-<Img src={staticFile(`frames/frame${frame}.png`)} />
-
-// Selecting based on props
-<Img src={staticFile(`avatars/${props.userId}.png`)} />
-
-// Conditional images
-<Img src={staticFile(`icons/${isActive ? "active" : "inactive"}.svg`)} />
-```
-
-This pattern is useful for:
-
-- Image sequences (frame-by-frame animations)
-- User-specific avatars or profile images
-- Theme-based icons
-- State-dependent graphics
-
-## Getting image dimensions
-
-Use `getImageDimensions()` to get the dimensions of an image:
-
-```tsx
-import { getImageDimensions, staticFile } from "remotion";
-
-const { width, height } = await getImageDimensions(staticFile("photo.png"));
-```
-
-This is useful for calculating aspect ratios or sizing compositions:
-
-```tsx
-import {
-  getImageDimensions,
-  staticFile,
-  CalculateMetadataFunction,
-} from "remotion";
-
-const calculateMetadata: CalculateMetadataFunction = async () => {
-  const { width, height } = await getImageDimensions(staticFile("photo.png"));
-  return {
-    width,
-    height,
-  };
-};
-```

.agents/skills/remotion-best-practices/rules/import-srt-captions.md

@@ -1,69 +0,0 @@
----
-name: import-srt-captions
-description: Importing .srt subtitle files into Remotion using @remotion/captions
-metadata:
-  tags: captions, subtitles, srt, import, parse
----
-
-# Importing .srt subtitles into Remotion
-
-If you have an existing `.srt` subtitle file, you can import it into Remotion using `parseSrt()` from `@remotion/captions`.
-
-If you don't have a .srt file, read [Transcribing audio](transcribe-captions.md) for how to generate captions instead.
-
-## Prerequisites
-
-First, the @remotion/captions package needs to be installed.
-If it is not installed, use the following command:
-
-```bash
-npx remotion add @remotion/captions # If project uses npm
-bunx remotion add @remotion/captions # If project uses bun
-yarn remotion add @remotion/captions # If project uses yarn
-pnpm exec remotion add @remotion/captions # If project uses pnpm
-```
-
-## Reading an .srt file
-
-Use `staticFile()` to reference an `.srt` file in your `public` folder, then fetch and parse it:
-
-```tsx
-import { useState, useEffect, useCallback } from "react";
-import { AbsoluteFill, staticFile, useDelayRender } from "remotion";
-import { parseSrt } from "@remotion/captions";
-import type { Caption } from "@remotion/captions";
-
-export const MyComponent: React.FC = () => {
-  const [captions, setCaptions] = useState<Caption[] | null>(null);
-  const { delayRender, continueRender, cancelRender } = useDelayRender();
-  const [handle] = useState(() => delayRender());
-
-  const fetchCaptions = useCallback(async () => {
-    try {
-      const response = await fetch(staticFile("subtitles.srt"));
-      const text = await response.text();
-      const { captions: parsed } = parseSrt({ input: text });
-      setCaptions(parsed);
-      continueRender(handle);
-    } catch (e) {
-      cancelRender(e);
-    }
-  }, [continueRender, cancelRender, handle]);
-
-  useEffect(() => {
-    fetchCaptions();
-  }, [fetchCaptions]);
-
-  if (!captions) {
-    return null;
-  }
-
-  return <AbsoluteFill>{/* Use captions here */}</AbsoluteFill>;
-};
-```
-
-Remote URLs are also supported - you can `fetch()` a remote file via URL instead of using `staticFile()`.
-
-## Using imported captions
-
-Once parsed, the captions are in the `Caption` format and can be used with all `@remotion/captions` utilities.

.agents/skills/remotion-best-practices/rules/light-leaks.md

@@ -1,73 +0,0 @@
----
-name: light-leaks
-description: Light leak overlay effects for Remotion using @remotion/light-leaks.
-metadata:
-  tags: light-leaks, overlays, effects, transitions
----
-
-## Light Leaks
-
-This only works from Remotion 4.0.415 and up. Use `npx remotion versions` to check your Remotion version and `npx remotion upgrade` to upgrade your Remotion version.
-
-`<LightLeak>` from `@remotion/light-leaks` renders a WebGL-based light leak effect. It reveals during the first half of its duration and retracts during the second half.
-
-Typically used inside a `<TransitionSeries.Overlay>` to play over the cut point between two scenes. See the **transitions** rule for `<TransitionSeries>` and overlay usage.
-
-## Prerequisites
-
-```bash
-npx remotion add @remotion/light-leaks
-```
-
-## Basic usage with TransitionSeries
-
-```tsx
-import { TransitionSeries } from "@remotion/transitions";
-import { LightLeak } from "@remotion/light-leaks";
-
-<TransitionSeries>
-  <TransitionSeries.Sequence durationInFrames={60}>
-    <SceneA />
-  </TransitionSeries.Sequence>
-  <TransitionSeries.Overlay durationInFrames={30}>
-    <LightLeak />
-  </TransitionSeries.Overlay>
-  <TransitionSeries.Sequence durationInFrames={60}>
-    <SceneB />
-  </TransitionSeries.Sequence>
-</TransitionSeries>;
-```
-
-## Props
-
-- `durationInFrames?` — defaults to the parent sequence/composition duration. The effect reveals during the first half and retracts during the second half.
-- `seed?` — determines the shape of the light leak pattern. Different seeds produce different patterns. Default: `0`.
-- `hueShift?` — rotates the hue in degrees (`0`–`360`). Default: `0` (yellow-to-orange). `120` = green, `240` = blue.
-
-## Customizing the look
-
-```tsx
-import { LightLeak } from "@remotion/light-leaks";
-
-// Blue-tinted light leak with a different pattern
-<LightLeak seed={5} hueShift={240} />;
-
-// Green-tinted light leak
-<LightLeak seed={2} hueShift={120} />;
-```
-
-## Standalone usage
-
-`<LightLeak>` can also be used outside of `<TransitionSeries>`, for example as a decorative overlay in any composition:
-
-```tsx
-import { AbsoluteFill } from "remotion";
-import { LightLeak } from "@remotion/light-leaks";
-
-const MyComp: React.FC = () => (
-  <AbsoluteFill>
-    <MyContent />
-    <LightLeak durationInFrames={60} seed={3} />
-  </AbsoluteFill>
-);
-```

.agents/skills/remotion-best-practices/rules/lottie.md

@@ -1,70 +0,0 @@
----
-name: lottie
-description: Embedding Lottie animations in Remotion.
-metadata:
-  category: Animation
----
-
-# Using Lottie Animations in Remotion
-
-## Prerequisites
-
-First, the @remotion/lottie package needs to be installed.  
-If it is not, use the following command:
-
-```bash
-npx remotion add @remotion/lottie # If project uses npm
-bunx remotion add @remotion/lottie # If project uses bun
-yarn remotion add @remotion/lottie # If project uses yarn
-pnpm exec remotion add @remotion/lottie # If project uses pnpm
-```
-
-## Displaying a Lottie file
-
-To import a Lottie animation:
-
-- Fetch the Lottie asset
-- Wrap the loading process in `delayRender()` and `continueRender()`
-- Save the animation data in a state
-- Render the Lottie animation using the `Lottie` component from the `@remotion/lottie` package
-
-```tsx
-import { Lottie, LottieAnimationData } from "@remotion/lottie";
-import { useEffect, useState } from "react";
-import { cancelRender, continueRender, delayRender } from "remotion";
-
-export const MyAnimation = () => {
-  const [handle] = useState(() => delayRender("Loading Lottie animation"));
-
-  const [animationData, setAnimationData] =
-    useState<LottieAnimationData | null>(null);
-
-  useEffect(() => {
-    fetch("https://assets4.lottiefiles.com/packages/lf20_zyquagfl.json")
-      .then((data) => data.json())
-      .then((json) => {
-        setAnimationData(json);
-        continueRender(handle);
-      })
-      .catch((err) => {
-        cancelRender(err);
-      });
-  }, [handle]);
-
-  if (!animationData) {
-    return null;
-  }
-
-  return <Lottie animationData={animationData} />;
-};
-```
-
-## Styling and animating
-
-Lottie supports the `style` prop to allow styles and animations:
-
-```tsx
-return (
-  <Lottie animationData={animationData} style={{ width: 400, height: 400 }} />
-);
-```

.agents/skills/remotion-best-practices/rules/maps.md

@@ -1,412 +0,0 @@
----
-name: maps
-description: Make map animations with Mapbox
-metadata:
-  tags: map, map animation, mapbox
----
-
-Maps can be added to a Remotion video with Mapbox.  
-The [Mapbox documentation](https://docs.mapbox.com/mapbox-gl-js/api/) has the API reference.
-
-## Prerequisites
-
-Mapbox and `@turf/turf` need to be installed.
-
-Search the project for lockfiles and run the correct command depending on the package manager:
-
-If `package-lock.json` is found, use the following command:
-
-```bash
-npm i mapbox-gl @turf/turf @types/mapbox-gl
-```
-
-If `bun.lock` is found, use the following command:
-
-```bash
-bun i mapbox-gl @turf/turf @types/mapbox-gl
-```
-
-If `yarn.lock` is found, use the following command:
-
-```bash
-yarn add mapbox-gl @turf/turf @types/mapbox-gl
-```
-
-If `pnpm-lock.yaml` is found, use the following command:
-
-```bash
-pnpm i mapbox-gl @turf/turf @types/mapbox-gl
-```
-
-The user needs to create a free Mapbox account and create an access token by visiting https://console.mapbox.com/account/access-tokens/.
-
-The mapbox token needs to be added to the `.env` file:
-
-```txt title=".env"
-REMOTION_MAPBOX_TOKEN==pk.your-mapbox-access-token
-```
-
-## Adding a map
-
-Here is a basic example of a map in Remotion.
-
-```tsx
-import { useEffect, useMemo, useRef, useState } from "react";
-import { AbsoluteFill, useDelayRender, useVideoConfig } from "remotion";
-import mapboxgl, { Map } from "mapbox-gl";
-
-export const lineCoordinates = [
-  [6.56158447265625, 46.059891147620725],
-  [6.5691375732421875, 46.05679376154153],
-  [6.5842437744140625, 46.05059898938315],
-  [6.594886779785156, 46.04702502069337],
-  [6.601066589355469, 46.0460718554722],
-  [6.6089630126953125, 46.0365370783104],
-  [6.6185760498046875, 46.018420689207964],
-];
-
-mapboxgl.accessToken = process.env.REMOTION_MAPBOX_TOKEN as string;
-
-export const MyComposition = () => {
-  const ref = useRef<HTMLDivElement>(null);
-  const { delayRender, continueRender } = useDelayRender();
-
-  const { width, height } = useVideoConfig();
-  const [handle] = useState(() => delayRender("Loading map..."));
-  const [map, setMap] = useState<Map | null>(null);
-
-  useEffect(() => {
-    const _map = new Map({
-      container: ref.current!,
-      zoom: 11.53,
-      center: [6.5615, 46.0598],
-      pitch: 65,
-      bearing: 0,
-      style: "⁠mapbox://styles/mapbox/standard",
-      interactive: false,
-      fadeDuration: 0,
-    });
-
-    _map.on("style.load", () => {
-      // Hide all features from the Mapbox Standard style
-      const hideFeatures = [
-        "showRoadsAndTransit",
-        "showRoads",
-        "showTransit",
-        "showPedestrianRoads",
-        "showRoadLabels",
-        "showTransitLabels",
-        "showPlaceLabels",
-        "showPointOfInterestLabels",
-        "showPointsOfInterest",
-        "showAdminBoundaries",
-        "showLandmarkIcons",
-        "showLandmarkIconLabels",
-        "show3dObjects",
-        "show3dBuildings",
-        "show3dTrees",
-        "show3dLandmarks",
-        "show3dFacades",
-      ];
-      for (const feature of hideFeatures) {
-        _map.setConfigProperty("basemap", feature, false);
-      }
-
-      _map.setConfigProperty("basemap", "colorTrunks", "rgba(0, 0, 0, 0)");
-
-      _map.addSource("trace", {
-        type: "geojson",
-        data: {
-          type: "Feature",
-          properties: {},
-          geometry: {
-            type: "LineString",
-            coordinates: lineCoordinates,
-          },
-        },
-      });
-      _map.addLayer({
-        type: "line",
-        source: "trace",
-        id: "line",
-        paint: {
-          "line-color": "black",
-          "line-width": 5,
-        },
-        layout: {
-          "line-cap": "round",
-          "line-join": "round",
-        },
-      });
-    });
-
-    _map.on("load", () => {
-      continueRender(handle);
-      setMap(_map);
-    });
-  }, [handle, lineCoordinates]);
-
-  const style: React.CSSProperties = useMemo(
-    () => ({ width, height, position: "absolute" }),
-    [width, height],
-  );
-
-  return <AbsoluteFill ref={ref} style={style} />;
-};
-```
-
-The following is important in Remotion:
-
-- Animations must be driven by `useCurrentFrame()` and animations that Mapbox brings itself should be disabled. For example, the `fadeDuration` prop should be set to `0`, `interactive` should be set to `false`, etc.
-- Loading the map should be delayed using `useDelayRender()` and the map should be set to `null` until it is loaded.
-- The element containing the ref MUST have an explicit width and height and `position: "absolute"`.
-- Do not add a `_map.remove();` cleanup function.
-
-## Drawing lines
-
-Unless I request it, do not add a glow effect to the lines.
-Unless I request it, do not add additional points to the lines.
-
-## Map style
-
-By default, use the `mapbox://styles/mapbox/standard` style.  
-Hide the labels from the base map style.
-
-Unless I request otherwise, remove all features from the Mapbox Standard style.
-
-```tsx
-// Hide all features from the Mapbox Standard style
-const hideFeatures = [
-  "showRoadsAndTransit",
-  "showRoads",
-  "showTransit",
-  "showPedestrianRoads",
-  "showRoadLabels",
-  "showTransitLabels",
-  "showPlaceLabels",
-  "showPointOfInterestLabels",
-  "showPointsOfInterest",
-  "showAdminBoundaries",
-  "showLandmarkIcons",
-  "showLandmarkIconLabels",
-  "show3dObjects",
-  "show3dBuildings",
-  "show3dTrees",
-  "show3dLandmarks",
-  "show3dFacades",
-];
-for (const feature of hideFeatures) {
-  _map.setConfigProperty("basemap", feature, false);
-}
-
-_map.setConfigProperty("basemap", "colorMotorways", "transparent");
-_map.setConfigProperty("basemap", "colorRoads", "transparent");
-_map.setConfigProperty("basemap", "colorTrunks", "transparent");
-```
-
-## Animating the camera
-
-You can animate the camera along the line by adding a `useEffect` hook that updates the camera position based on the current frame.
-
-Unless I ask for it, do not jump between camera angles.
-
-```tsx
-import * as turf from "@turf/turf";
-import { interpolate } from "remotion";
-import { Easing } from "remotion";
-import { useCurrentFrame, useVideoConfig, useDelayRender } from "remotion";
-
-const animationDuration = 20;
-const cameraAltitude = 4000;
-```
-
-```tsx
-const frame = useCurrentFrame();
-const { fps } = useVideoConfig();
-const { delayRender, continueRender } = useDelayRender();
-
-useEffect(() => {
-  if (!map) {
-    return;
-  }
-  const handle = delayRender("Moving point...");
-
-  const routeDistance = turf.length(turf.lineString(lineCoordinates));
-
-  const progress = interpolate(
-    frame / fps,
-    [0.00001, animationDuration],
-    [0, 1],
-    {
-      easing: Easing.inOut(Easing.sin),
-      extrapolateLeft: "clamp",
-      extrapolateRight: "clamp",
-    },
-  );
-
-  const camera = map.getFreeCameraOptions();
-
-  const alongRoute = turf.along(
-    turf.lineString(lineCoordinates),
-    routeDistance * progress,
-  ).geometry.coordinates;
-
-  camera.lookAtPoint({
-    lng: alongRoute[0],
-    lat: alongRoute[1],
-  });
-
-  map.setFreeCameraOptions(camera);
-  map.once("idle", () => continueRender(handle));
-}, [lineCoordinates, fps, frame, handle, map]);
-```
-
-Notes:
-
-IMPORTANT: Keep the camera by default so north is up.
-IMPORTANT: For multi-step animations, set all properties at all stages (zoom, position, line progress) to prevent jumps. Override initial values.
-
-- The progress is clamped to a minimum value to avoid the line being empty, which can lead to turf errors
-- See [Timing](./timing.md) for more options for timing.
-- Consider the dimensions of the composition and make the lines thick enough and the label font size large enough to be legible for when the composition is scaled down.
-
-## Animating lines
-
-### Straight lines (linear interpolation)
-
-To animate a line that appears straight on the map, use linear interpolation between coordinates. Do NOT use turf's `lineSliceAlong` or `along` functions, as they use geodesic (great circle) calculations which appear curved on a Mercator projection.
-
-```tsx
-const frame = useCurrentFrame();
-const { durationInFrames } = useVideoConfig();
-
-useEffect(() => {
-  if (!map) return;
-
-  const animationHandle = delayRender("Animating line...");
-
-  const progress = interpolate(frame, [0, durationInFrames - 1], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp",
-    easing: Easing.inOut(Easing.cubic),
-  });
-
-  // Linear interpolation for a straight line on the map
-  const start = lineCoordinates[0];
-  const end = lineCoordinates[1];
-  const currentLng = start[0] + (end[0] - start[0]) * progress;
-  const currentLat = start[1] + (end[1] - start[1]) * progress;
-
-  const lineData: GeoJSON.Feature<GeoJSON.LineString> = {
-    type: "Feature",
-    properties: {},
-    geometry: {
-      type: "LineString",
-      coordinates: [start, [currentLng, currentLat]],
-    },
-  };
-
-  const source = map.getSource("trace") as mapboxgl.GeoJSONSource;
-  if (source) {
-    source.setData(lineData);
-  }
-
-  map.once("idle", () => continueRender(animationHandle));
-}, [frame, map, durationInFrames]);
-```
-
-### Curved lines (geodesic/great circle)
-
-To animate a line that follows the geodesic (great circle) path between two points, use turf's `lineSliceAlong`. This is useful for showing flight paths or the actual shortest distance on Earth.
-
-```tsx
-import * as turf from "@turf/turf";
-
-const routeLine = turf.lineString(lineCoordinates);
-const routeDistance = turf.length(routeLine);
-
-const currentDistance = Math.max(0.001, routeDistance * progress);
-const slicedLine = turf.lineSliceAlong(routeLine, 0, currentDistance);
-
-const source = map.getSource("route") as mapboxgl.GeoJSONSource;
-if (source) {
-  source.setData(slicedLine);
-}
-```
-
-## Markers
-
-Add labels, and markers where appropriate.
-
-```tsx
-_map.addSource("markers", {
-  type: "geojson",
-  data: {
-    type: "FeatureCollection",
-    features: [
-      {
-        type: "Feature",
-        properties: { name: "Point 1" },
-        geometry: { type: "Point", coordinates: [-118.2437, 34.0522] },
-      },
-    ],
-  },
-});
-
-_map.addLayer({
-  id: "city-markers",
-  type: "circle",
-  source: "markers",
-  paint: {
-    "circle-radius": 40,
-    "circle-color": "#FF4444",
-    "circle-stroke-width": 4,
-    "circle-stroke-color": "#FFFFFF",
-  },
-});
-
-_map.addLayer({
-  id: "labels",
-  type: "symbol",
-  source: "markers",
-  layout: {
-    "text-field": ["get", "name"],
-    "text-font": ["DIN Pro Bold", "Arial Unicode MS Bold"],
-    "text-size": 50,
-    "text-offset": [0, 0.5],
-    "text-anchor": "top",
-  },
-  paint: {
-    "text-color": "#FFFFFF",
-    "text-halo-color": "#000000",
-    "text-halo-width": 2,
-  },
-});
-```
-
-Make sure they are big enough. Check the composition dimensions and scale the labels accordingly.
-For a composition size of 1920x1080, the label font size should be at least 40px.
-
-IMPORTANT: Keep the `text-offset` small enough so it is close to the marker. Consider the marker circle radius. For a circle radius of 40, this is a good offset:
-
-```tsx
-"text-offset": [0, 0.5],
-```
-
-## 3D buildings
-
-To enable 3D buildings, use the following code:
-
-```tsx
-_map.setConfigProperty("basemap", "show3dObjects", true);
-_map.setConfigProperty("basemap", "show3dLandmarks", true);
-_map.setConfigProperty("basemap", "show3dBuildings", true);
-```
-
-## Rendering
-
-When rendering a map animation, make sure to render with the following flags:
-
-```
-npx remotion render --gl=angle --concurrency=1
-```

.agents/skills/remotion-best-practices/rules/measuring-dom-nodes.md

@@ -1,34 +0,0 @@
----
-name: measuring-dom-nodes
-description: Measuring DOM element dimensions in Remotion
-metadata:
-  tags: measure, layout, dimensions, getBoundingClientRect, scale
----
-
-# Measuring DOM nodes in Remotion
-
-Remotion applies a `scale()` transform to the video container, which affects values from `getBoundingClientRect()`. Use `useCurrentScale()` to get correct measurements.
-
-## Measuring element dimensions
-
-```tsx
-import { useCurrentScale } from "remotion";
-import { useRef, useEffect, useState } from "react";
-
-export const MyComponent = () => {
-  const ref = useRef<HTMLDivElement>(null);
-  const scale = useCurrentScale();
-  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
-
-  useEffect(() => {
-    if (!ref.current) return;
-    const rect = ref.current.getBoundingClientRect();
-    setDimensions({
-      width: rect.width / scale,
-      height: rect.height / scale,
-    });
-  }, [scale]);
-
-  return <div ref={ref}>Content to measure</div>;
-};
-```

.agents/skills/remotion-best-practices/rules/measuring-text.md

@@ -1,140 +0,0 @@
----
-name: measuring-text
-description: Measuring text dimensions, fitting text to containers, and checking overflow
-metadata:
-  tags: measure, text, layout, dimensions, fitText, fillTextBox
----
-
-# Measuring text in Remotion
-
-## Prerequisites
-
-Install @remotion/layout-utils if it is not already installed:
-
-```bash
-npx remotion add @remotion/layout-utils
-```
-
-## Measuring text dimensions
-
-Use `measureText()` to calculate the width and height of text:
-
-```tsx
-import { measureText } from "@remotion/layout-utils";
-
-const { width, height } = measureText({
-  text: "Hello World",
-  fontFamily: "Arial",
-  fontSize: 32,
-  fontWeight: "bold",
-});
-```
-
-Results are cached - duplicate calls return the cached result.
-
-## Fitting text to a width
-
-Use `fitText()` to find the optimal font size for a container:
-
-```tsx
-import { fitText } from "@remotion/layout-utils";
-
-const { fontSize } = fitText({
-  text: "Hello World",
-  withinWidth: 600,
-  fontFamily: "Inter",
-  fontWeight: "bold",
-});
-
-return (
-  <div
-    style={{
-      fontSize: Math.min(fontSize, 80), // Cap at 80px
-      fontFamily: "Inter",
-      fontWeight: "bold",
-    }}
-  >
-    Hello World
-  </div>
-);
-```
-
-## Checking text overflow
-
-Use `fillTextBox()` to check if text exceeds a box:
-
-```tsx
-import { fillTextBox } from "@remotion/layout-utils";
-
-const box = fillTextBox({ maxBoxWidth: 400, maxLines: 3 });
-
-const words = ["Hello", "World", "This", "is", "a", "test"];
-for (const word of words) {
-  const { exceedsBox } = box.add({
-    text: word + " ",
-    fontFamily: "Arial",
-    fontSize: 24,
-  });
-  if (exceedsBox) {
-    // Text would overflow, handle accordingly
-    break;
-  }
-}
-```
-
-## Best practices
-
-**Load fonts first:** Only call measurement functions after fonts are loaded.
-
-```tsx
-import { loadFont } from "@remotion/google-fonts/Inter";
-
-const { fontFamily, waitUntilDone } = loadFont("normal", {
-  weights: ["400"],
-  subsets: ["latin"],
-});
-
-waitUntilDone().then(() => {
-  // Now safe to measure
-  const { width } = measureText({
-    text: "Hello",
-    fontFamily,
-    fontSize: 32,
-  });
-});
-```
-
-**Use validateFontIsLoaded:** Catch font loading issues early:
-
-```tsx
-measureText({
-  text: "Hello",
-  fontFamily: "MyCustomFont",
-  fontSize: 32,
-  validateFontIsLoaded: true, // Throws if font not loaded
-});
-```
-
-**Match font properties:** Use the same properties for measurement and rendering:
-
-```tsx
-const fontStyle = {
-  fontFamily: "Inter",
-  fontSize: 32,
-  fontWeight: "bold" as const,
-  letterSpacing: "0.5px",
-};
-
-const { width } = measureText({
-  text: "Hello",
-  ...fontStyle,
-});
-
-return <div style={fontStyle}>Hello</div>;
-```
-
-**Avoid padding and border:** Use `outline` instead of `border` to prevent layout differences:
-
-```tsx
-<div style={{ outline: "2px solid red" }}>Text</div>
-```

.agents/skills/remotion-best-practices/rules/parameters.md

@@ -1,109 +0,0 @@
----
-name: parameters
-description: Make a video parametrizable by adding a Zod schema
-metadata:
-  tags: parameters, zod, schema
----
-
-To make a video parametrizable, a Zod schema can be added to a composition.
-
-First, `zod` must be installed .
-
-Search the project for lockfiles and run the correct command depending on the package manager:
-
-If `package-lock.json` is found, use the following command:
-
-```bash
-npm i zod
-```
-
-If `bun.lockb` is found, use the following command:
-
-```bash
-bun i zod
-```
-
-If `yarn.lock` is found, use the following command:
-
-```bash
-yarn add zod
-```
-
-If `pnpm-lock.yaml` is found, use the following command:
-
-```bash
-pnpm i zod
-```
-
-Then, a Zod schema can be defined alongside the component:
-
-```tsx title="src/MyComposition.tsx"
-import { z } from "zod";
-
-export const MyCompositionSchema = z.object({
-  title: z.string(),
-});
-
-const MyComponent: React.FC<z.infer<typeof MyCompositionSchema>> = () => {
-  return (
-    <div>
-      <h1>{props.title}</h1>
-    </div>
-  );
-};
-```
-
-In the root file, the schema can be passed to the composition:
-
-```tsx title="src/Root.tsx"
-import { Composition } from "remotion";
-import { MycComponent, MyCompositionSchema } from "./MyComposition";
-
-export const RemotionRoot = () => {
-  return (
-    <Composition
-      id="MyComposition"
-      component={MyComponent}
-      durationInFrames={100}
-      fps={30}
-      width={1080}
-      height={1080}
-      defaultProps={{ title: "Hello World" }}
-      schema={MyCompositionSchema}
-    />
-  );
-};
-```
-
-Now, the user can edit the parameter visually in the sidebar.
-
-All schemas that are supported by Zod are supported by Remotion.
-
-Remotion requires that the top-level type is a z.object(), because the collection of props of a React component is always an object.
-
-## Color picker
-
-For adding a color picker, use `zColor()` from `@remotion/zod-types`.
-
-If it is not installed, use the following command:
-
-```bash
-npx remotion add @remotion/zod-types # If project uses npm
-bunx remotion add @remotion/zod-types # If project uses bun
-yarn remotion add @remotion/zod-types # If project uses yarn
-pnpm exec remotion add @remotion/zod-types # If project uses pnpm
-```
-
-Then import `zColor` from `@remotion/zod-types`:
-
-```tsx
-import { zColor } from "@remotion/zod-types";
-```
-
-Then use it in the schema:
-
-```tsx
-export const MyCompositionSchema = z.object({
-  color: zColor(),
-});
-```

.agents/skills/remotion-best-practices/rules/sequencing.md

@@ -1,118 +0,0 @@
----
-name: sequencing
-description: Sequencing patterns for Remotion - delay, trim, limit duration of items
-metadata:
-  tags: sequence, series, timing, delay, trim
----
-
-Use `<Sequence>` to delay when an element appears in the timeline.
-
-```tsx
-import { Sequence } from "remotion";
-
-const {fps} = useVideoConfig();
-
-<Sequence from={1 * fps} durationInFrames={2 * fps} premountFor={1 * fps}>
-  <Title />
-</Sequence>
-<Sequence from={2 * fps} durationInFrames={2 * fps} premountFor={1 * fps}>
-  <Subtitle />
-</Sequence>
-```
-
-This will by default wrap the component in an absolute fill element.  
-If the items should not be wrapped, use the `layout` prop:
-
-```tsx
-<Sequence layout="none">
-  <Title />
-</Sequence>
-```
-
-## Premounting
-
-This loads the component in the timeline before it is actually played.  
-Always premount any `<Sequence>`!
-
-```tsx
-<Sequence premountFor={1 * fps}>
-  <Title />
-</Sequence>
-```
-
-## Series
-
-Use `<Series>` when elements should play one after another without overlap.
-
-```tsx
-import { Series } from "remotion";
-
-<Series>
-  <Series.Sequence durationInFrames={45}>
-    <Intro />
-  </Series.Sequence>
-  <Series.Sequence durationInFrames={60}>
-    <MainContent />
-  </Series.Sequence>
-  <Series.Sequence durationInFrames={30}>
-    <Outro />
-  </Series.Sequence>
-</Series>;
-```
-
-Same as with `<Sequence>`, the items will be wrapped in an absolute fill element by default when using `<Series.Sequence>`, unless the `layout` prop is set to `none`.
-
-### Series with overlaps
-
-Use negative offset for overlapping sequences:
-
-```tsx
-<Series>
-  <Series.Sequence durationInFrames={60}>
-    <SceneA />
-  </Series.Sequence>
-  <Series.Sequence offset={-15} durationInFrames={60}>
-    {/* Starts 15 frames before SceneA ends */}
-    <SceneB />
-  </Series.Sequence>
-</Series>
-```
-
-## Frame References Inside Sequences
-
-Inside a Sequence, `useCurrentFrame()` returns the local frame (starting from 0):
-
-```tsx
-<Sequence from={60} durationInFrames={30}>
-  <MyComponent />
-  {/* Inside MyComponent, useCurrentFrame() returns 0-29, not 60-89 */}
-</Sequence>
-```
-
-## Nested Sequences
-
-Sequences can be nested for complex timing:
-
-```tsx
-<Sequence from={0} durationInFrames={120}>
-  <Background />
-  <Sequence from={15} durationInFrames={90} layout="none">
-    <Title />
-  </Sequence>
-  <Sequence from={45} durationInFrames={60} layout="none">
-    <Subtitle />
-  </Sequence>
-</Sequence>
-```
-
-## Nesting compositions within another
-
-To add a composition within another composition, you can use the `<Sequence>` component with a `width` and `height` prop to specify the size of the composition.
-
-```tsx
-<AbsoluteFill>
-  <Sequence width={COMPOSITION_WIDTH} height={COMPOSITION_HEIGHT}>
-    <CompositionComponent />
-  </Sequence>
-</AbsoluteFill>
-```

.agents/skills/remotion-best-practices/rules/sfx.md

@@ -1,26 +0,0 @@
----
-name: sfx
-description: Including sound effects
-metadata:
-  tags: sfx, sound, effect, audio
----
-
-To include a sound effect, use the `<Audio>` tag:
-
-```tsx
-import { Audio } from "@remotion/sfx";
-
-<Audio src={"https://remotion.media/whoosh.wav"} />;
-```
-
-The following sound effects are available:
-
-- `https://remotion.media/whoosh.wav`
-- `https://remotion.media/whip.wav`
-- `https://remotion.media/page-turn.wav`
-- `https://remotion.media/switch.wav`
-- `https://remotion.media/mouse-click.wav`
-- `https://remotion.media/shutter-modern.wav`
-- `https://remotion.media/shutter-old.wav`
-
-For more sound effects, search the internet. A good resource is https://github.com/kapishdima/soundcn/tree/main/assets.

.agents/skills/remotion-best-practices/rules/subtitles.md

@@ -1,36 +0,0 @@
----
-name: subtitles
-description: subtitles and caption rules
-metadata:
-  tags: subtitles, captions, remotion, json
----
-
-All captions must be processed in JSON. The captions must use the `Caption` type which is the following:
-
-```ts
-import type { Caption } from "@remotion/captions";
-```
-
-This is the definition:
-
-```ts
-type Caption = {
-  text: string;
-  startMs: number;
-  endMs: number;
-  timestampMs: number | null;
-  confidence: number | null;
-};
-```
-
-## Generating captions
-
-To transcribe video and audio files to generate captions, load the [./transcribe-captions.md](./transcribe-captions.md) file for more instructions.
-
-## Displaying captions
-
-To display captions in your video, load the [./display-captions.md](./display-captions.md) file for more instructions.
-
-## Importing captions
-
-To import captions from a .srt file, load the [./import-srt-captions.md](./import-srt-captions.md) file for more instructions.

.agents/skills/remotion-best-practices/rules/tailwind.md

@@ -1,11 +0,0 @@
----
-name: tailwind
-description: Using TailwindCSS in Remotion.
-metadata:
----
-
-You can and should use TailwindCSS in Remotion, if TailwindCSS is installed in the project.
-
-Don't use `transition-*` or `animate-*` classes - always animate using the `useCurrentFrame()` hook.
-
-Tailwind must be installed and enabled first in a Remotion project - fetch https://www.remotion.dev/docs/tailwind using WebFetch for instructions.

.agents/skills/remotion-best-practices/rules/text-animations.md

@@ -1,20 +0,0 @@
----
-name: text-animations
-description: Typography and text animation patterns for Remotion.
-metadata:
-  tags: typography, text, typewriter, highlighter ken
----
-
-## Text animations
-
-Based on `useCurrentFrame()`, reduce the string character by character to create a typewriter effect.
-
-## Typewriter Effect
-
-See [Typewriter](assets/text-animations-typewriter.tsx) for an advanced example with a blinking cursor and a pause after the first sentence.
-
-Always use string slicing for typewriter effects. Never use per-character opacity.
-
-## Word Highlighting
-
-See [Word Highlight](assets/text-animations-word-highlight.tsx) for an example for how a word highlight is animated, like with a highlighter pen.

.agents/skills/remotion-best-practices/rules/timing.md

@@ -1,179 +0,0 @@
----
-name: timing
-description: Interpolation curves in Remotion - linear, easing, spring animations
-metadata:
-  tags: spring, bounce, easing, interpolation
----
-
-A simple linear interpolation is done using the `interpolate` function.
-
-```ts title="Going from 0 to 1 over 100 frames"
-import { interpolate } from "remotion";
-
-const opacity = interpolate(frame, [0, 100], [0, 1]);
-```
-
-By default, the values are not clamped, so the value can go outside the range [0, 1].  
-Here is how they can be clamped:
-
-```ts title="Going from 0 to 1 over 100 frames with extrapolation"
-const opacity = interpolate(frame, [0, 100], [0, 1], {
-  extrapolateRight: "clamp",
-  extrapolateLeft: "clamp",
-});
-```
-
-## Spring animations
-
-Spring animations have a more natural motion.  
-They go from 0 to 1 over time.
-
-```ts title="Spring animation from 0 to 1 over 100 frames"
-import { spring, useCurrentFrame, useVideoConfig } from "remotion";
-
-const frame = useCurrentFrame();
-const { fps } = useVideoConfig();
-
-const scale = spring({
-  frame,
-  fps,
-});
-```
-
-### Physical properties
-
-The default configuration is: `mass: 1, damping: 10, stiffness: 100`.  
-This leads to the animation having a bit of bounce before it settles.
-
-The config can be overwritten like this:
-
-```ts
-const scale = spring({
-  frame,
-  fps,
-  config: { damping: 200 },
-});
-```
-
-The recommended configuration for a natural motion without a bounce is: `{ damping: 200 }`.
-
-Here are some common configurations:
-
-```tsx
-const smooth = { damping: 200 }; // Smooth, no bounce (subtle reveals)
-const snappy = { damping: 20, stiffness: 200 }; // Snappy, minimal bounce (UI elements)
-const bouncy = { damping: 8 }; // Bouncy entrance (playful animations)
-const heavy = { damping: 15, stiffness: 80, mass: 2 }; // Heavy, slow, small bounce
-```
-
-### Delay
-
-The animation starts immediately by default.  
-Use the `delay` parameter to delay the animation by a number of frames.
-
-```tsx
-const entrance = spring({
-  frame: frame - ENTRANCE_DELAY,
-  fps,
-  delay: 20,
-});
-```
-
-### Duration
-
-A `spring()` has a natural duration based on the physical properties.  
-To stretch the animation to a specific duration, use the `durationInFrames` parameter.
-
-```tsx
-const spring = spring({
-  frame,
-  fps,
-  durationInFrames: 40,
-});
-```
-
-### Combining spring() with interpolate()
-
-Map spring output (0-1) to custom ranges:
-
-```tsx
-const springProgress = spring({
-  frame,
-  fps,
-});
-
-// Map to rotation
-const rotation = interpolate(springProgress, [0, 1], [0, 360]);
-
-<div style={{ rotate: rotation + "deg" }} />;
-```
-
-### Adding springs
-
-Springs return just numbers, so math can be performed:
-
-```tsx
-const frame = useCurrentFrame();
-const { fps, durationInFrames } = useVideoConfig();
-
-const inAnimation = spring({
-  frame,
-  fps,
-});
-const outAnimation = spring({
-  frame,
-  fps,
-  durationInFrames: 1 * fps,
-  delay: durationInFrames - 1 * fps,
-});
-
-const scale = inAnimation - outAnimation;
-```
-
-## Easing
-
-Easing can be added to the `interpolate` function:
-
-```ts
-import { interpolate, Easing } from "remotion";
-
-const value1 = interpolate(frame, [0, 100], [0, 1], {
-  easing: Easing.inOut(Easing.quad),
-  extrapolateLeft: "clamp",
-  extrapolateRight: "clamp",
-});
-```
-
-The default easing is `Easing.linear`.  
-There are various other convexities:
-
-- `Easing.in` for starting slow and accelerating
-- `Easing.out` for starting fast and slowing down
-- `Easing.inOut`
-
-and curves (sorted from most linear to most curved):
-
-- `Easing.quad`
-- `Easing.sin`
-- `Easing.exp`
-- `Easing.circle`
-
-Convexities and curves need be combined for an easing function:
-
-```ts
-const value1 = interpolate(frame, [0, 100], [0, 1], {
-  easing: Easing.inOut(Easing.quad),
-  extrapolateLeft: "clamp",
-  extrapolateRight: "clamp",
-});
-```
-
-Cubic bezier curves are also supported:
-
-```ts
-const value1 = interpolate(frame, [0, 100], [0, 1], {
-  easing: Easing.bezier(0.8, 0.22, 0.96, 0.65),
-  extrapolateLeft: "clamp",
-  extrapolateRight: "clamp",
-});
-```

.agents/skills/remotion-best-practices/rules/transcribe-captions.md

@@ -1,70 +0,0 @@
----
-name: transcribe-captions
-description: Transcribing audio to generate captions in Remotion
-metadata:
-  tags: captions, transcribe, whisper, audio, speech-to-text
----
-
-# Transcribing audio
-
-To transcribe audio to generate captions in Remotion, you can use the [`transcribe()`](https://www.remotion.dev/docs/install-whisper-cpp/transcribe) function from the [`@remotion/install-whisper-cpp`](https://www.remotion.dev/docs/install-whisper-cpp) package.
-
-## Prerequisites
-
-First, the @remotion/install-whisper-cpp package needs to be installed.
-If it is not installed, use the following command:
-
-```bash
-npx remotion add @remotion/install-whisper-cpp
-```
-
-## Transcribing
-
-Make a Node.js script to download Whisper.cpp and a model, and transcribe the audio.
-
-```ts
-import path from "path";
-import {
-  downloadWhisperModel,
-  installWhisperCpp,
-  transcribe,
-  toCaptions,
-} from "@remotion/install-whisper-cpp";
-import fs from "fs";
-
-const to = path.join(process.cwd(), "whisper.cpp");
-
-await installWhisperCpp({
-  to,
-  version: "1.5.5",
-});
-
-await downloadWhisperModel({
-  model: "medium.en",
-  folder: to,
-});
-
-// Convert the audio to a 16KHz wav file first if needed:
-// import {execSync} from 'child_process';
-// execSync('ffmpeg -i /path/to/audio.mp4 -ar 16000 /path/to/audio.wav -y');
-
-const whisperCppOutput = await transcribe({
-  model: "medium.en",
-  whisperPath: to,
-  whisperCppVersion: "1.5.5",
-  inputPath: "/path/to/audio123.wav",
-  tokenLevelTimestamps: true,
-});
-
-// Optional: Apply our recommended postprocessing
-const { captions } = toCaptions({
-  whisperCppOutput,
-});
-
-// Write it to the public/ folder so it can be fetched from Remotion
-fs.writeFileSync("captions123.json", JSON.stringify(captions, null, 2));
-```
-
-Transcribe each clip individually and create multiple JSON files.
-
-See [Displaying captions](display-captions.md) for how to display the captions in Remotion.

.agents/skills/remotion-best-practices/rules/transitions.md

@@ -1,197 +0,0 @@
----
-name: transitions
-description: Scene transitions and overlays for Remotion using TransitionSeries.
-metadata:
-  tags: transitions, overlays, fade, slide, wipe, scenes
----
-
-## TransitionSeries
-
-`<TransitionSeries>` arranges scenes and supports two ways to enhance the cut point between them:
-
-- **Transitions** (`<TransitionSeries.Transition>`) — crossfade, slide, wipe, etc. between two scenes. Shortens the timeline because both scenes play simultaneously during the transition.
-- **Overlays** (`<TransitionSeries.Overlay>`) — render an effect (e.g. a light leak) on top of the cut point without shortening the timeline.
-
-Children are absolutely positioned.
-
-## Prerequisites
-
-```bash
-npx remotion add @remotion/transitions
-```
-
-## Transition example
-
-```tsx
-import { TransitionSeries, linearTiming } from "@remotion/transitions";
-import { fade } from "@remotion/transitions/fade";
-
-<TransitionSeries>
-  <TransitionSeries.Sequence durationInFrames={60}>
-    <SceneA />
-  </TransitionSeries.Sequence>
-  <TransitionSeries.Transition
-    presentation={fade()}
-    timing={linearTiming({ durationInFrames: 15 })}
-  />
-  <TransitionSeries.Sequence durationInFrames={60}>
-    <SceneB />
-  </TransitionSeries.Sequence>
-</TransitionSeries>;
-```
-
-## Overlay example
-
-Any React component can be used as an overlay. For a ready-made effect, see the **light-leaks** rule.
-
-```tsx
-import { TransitionSeries } from "@remotion/transitions";
-import { LightLeak } from "@remotion/light-leaks";
-
-<TransitionSeries>
-  <TransitionSeries.Sequence durationInFrames={60}>
-    <SceneA />
-  </TransitionSeries.Sequence>
-  <TransitionSeries.Overlay durationInFrames={20}>
-    <LightLeak />
-  </TransitionSeries.Overlay>
-  <TransitionSeries.Sequence durationInFrames={60}>
-    <SceneB />
-  </TransitionSeries.Sequence>
-</TransitionSeries>;
-```
-
-## Mixing transitions and overlays
-
-Transitions and overlays can coexist in the same `<TransitionSeries>`, but an overlay cannot be adjacent to a transition or another overlay.
-
-```tsx
-import { TransitionSeries, linearTiming } from "@remotion/transitions";
-import { fade } from "@remotion/transitions/fade";
-import { LightLeak } from "@remotion/light-leaks";
-
-<TransitionSeries>
-  <TransitionSeries.Sequence durationInFrames={60}>
-    <SceneA />
-  </TransitionSeries.Sequence>
-  <TransitionSeries.Overlay durationInFrames={30}>
-    <LightLeak />
-  </TransitionSeries.Overlay>
-  <TransitionSeries.Sequence durationInFrames={60}>
-    <SceneB />
-  </TransitionSeries.Sequence>
-  <TransitionSeries.Transition
-    presentation={fade()}
-    timing={linearTiming({ durationInFrames: 15 })}
-  />
-  <TransitionSeries.Sequence durationInFrames={60}>
-    <SceneC />
-  </TransitionSeries.Sequence>
-</TransitionSeries>;
-```
-
-## Transition props
-
-`<TransitionSeries.Transition>` requires:
-
-- `presentation` — the visual effect (e.g. `fade()`, `slide()`, `wipe()`).
-- `timing` — controls speed and easing (e.g. `linearTiming()`, `springTiming()`).
-
-## Overlay props
-
-`<TransitionSeries.Overlay>` accepts:
-
-- `durationInFrames` — how long the overlay is visible (positive integer).
-- `offset?` — shifts the overlay relative to the cut point center. Positive = later, negative = earlier. Default: `0`.
-
-## Available transition types
-
-Import transitions from their respective modules:
-
-```tsx
-import { fade } from "@remotion/transitions/fade";
-import { slide } from "@remotion/transitions/slide";
-import { wipe } from "@remotion/transitions/wipe";
-import { flip } from "@remotion/transitions/flip";
-import { clockWipe } from "@remotion/transitions/clock-wipe";
-```
-
-## Slide transition with direction
-
-```tsx
-import { slide } from "@remotion/transitions/slide";
-
-<TransitionSeries.Transition
-  presentation={slide({ direction: "from-left" })}
-  timing={linearTiming({ durationInFrames: 20 })}
-/>;
-```
-
-Directions: `"from-left"`, `"from-right"`, `"from-top"`, `"from-bottom"`
-
-## Timing options
-
-```tsx
-import { linearTiming, springTiming } from "@remotion/transitions";
-
-// Linear timing - constant speed
-linearTiming({ durationInFrames: 20 });
-
-// Spring timing - organic motion
-springTiming({ config: { damping: 200 }, durationInFrames: 25 });
-```
-
-## Duration calculation
-
-Transitions overlap adjacent scenes, so the total composition length is **shorter** than the sum of all sequence durations. Overlays do **not** affect the total duration.
-
-For example, with two 60-frame sequences and a 15-frame transition:
-
-- Without transitions: `60 + 60 = 120` frames
-- With transition: `60 + 60 - 15 = 105` frames
-
-Adding an overlay between two other sequences does not change the total.
-
-### Getting the duration of a transition
-
-Use the `getDurationInFrames()` method on the timing object:
-
-```tsx
-import { linearTiming, springTiming } from "@remotion/transitions";
-
-const linearDuration = linearTiming({
-  durationInFrames: 20,
-}).getDurationInFrames({ fps: 30 });
-// Returns 20
-
-const springDuration = springTiming({
-  config: { damping: 200 },
-}).getDurationInFrames({ fps: 30 });
-// Returns calculated duration based on spring physics
-```
-
-For `springTiming` without an explicit `durationInFrames`, the duration depends on `fps` because it calculates when the spring animation settles.
-
-### Calculating total composition duration
-
-```tsx
-import { linearTiming } from "@remotion/transitions";
-
-const scene1Duration = 60;
-const scene2Duration = 60;
-const scene3Duration = 60;
-
-const timing1 = linearTiming({ durationInFrames: 15 });
-const timing2 = linearTiming({ durationInFrames: 20 });
-
-const transition1Duration = timing1.getDurationInFrames({ fps: 30 });
-const transition2Duration = timing2.getDurationInFrames({ fps: 30 });
-
-const totalDuration =
-  scene1Duration +
-  scene2Duration +
-  scene3Duration -
-  transition1Duration -
-  transition2Duration;
-// 60 + 60 + 60 - 15 - 20 = 145 frames
-```

.agents/skills/remotion-best-practices/rules/transparent-videos.md

@@ -1,106 +0,0 @@
----
-name: transparent-videos
-description: Rendering transparent videos in Remotion
-metadata:
-  tags: transparent, alpha, codec, vp9, prores, webm
----
-
-# Rendering Transparent Videos
-
-Remotion can render transparent videos in two ways: as a ProRes video or as a WebM video.
-
-## Transparent ProRes
-
-Ideal for when importing into video editing software.
-
-**CLI:**
-
-```bash
-npx remotion render --image-format=png --pixel-format=yuva444p10le --codec=prores --prores-profile=4444 MyComp out.mov
-```
-
-**Default in Studio** (restart Studio after changing):
-
-```ts
-// remotion.config.ts
-import { Config } from "@remotion/cli/config";
-
-Config.setVideoImageFormat("png");
-Config.setPixelFormat("yuva444p10le");
-Config.setCodec("prores");
-Config.setProResProfile("4444");
-```
-
-**Setting it as the default export settings for a composition** (using `calculateMetadata`):
-
-```tsx
-import { CalculateMetadataFunction } from "remotion";
-
-const calculateMetadata: CalculateMetadataFunction<Props> = async ({
-  props,
-}) => {
-  return {
-    defaultCodec: "prores",
-    defaultVideoImageFormat: "png",
-    defaultPixelFormat: "yuva444p10le",
-    defaultProResProfile: "4444",
-  };
-};
-
-<Composition
-  id="my-video"
-  component={MyVideo}
-  durationInFrames={150}
-  fps={30}
-  width={1920}
-  height={1080}
-  calculateMetadata={calculateMetadata}
-/>;
-```
-
-## Transparent WebM (VP9)
-
-Ideal for when playing in a browser.
-
-**CLI:**
-
-```bash
-npx remotion render --image-format=png --pixel-format=yuva420p --codec=vp9 MyComp out.webm
-```
-
-**Default in Studio** (restart Studio after changing):
-
-```ts
-// remotion.config.ts
-import { Config } from "@remotion/cli/config";
-
-Config.setVideoImageFormat("png");
-Config.setPixelFormat("yuva420p");
-Config.setCodec("vp9");
-```
-
-**Setting it as the default export settings for a composition** (using `calculateMetadata`):
-
-```tsx
-import { CalculateMetadataFunction } from "remotion";
-
-const calculateMetadata: CalculateMetadataFunction<Props> = async ({
-  props,
-}) => {
-  return {
-    defaultCodec: "vp8",
-    defaultVideoImageFormat: "png",
-    defaultPixelFormat: "yuva420p",
-  };
-};
-
-<Composition
-  id="my-video"
-  component={MyVideo}
-  durationInFrames={150}
-  fps={30}
-  width={1920}
-  height={1080}
-  calculateMetadata={calculateMetadata}
-/>;
-```

.agents/skills/remotion-best-practices/rules/trimming.md

@@ -1,51 +0,0 @@
----
-name: trimming
-description: Trimming patterns for Remotion - cut the beginning or end of animations
-metadata:
-  tags: sequence, trim, clip, cut, offset
----
-
-Use `<Sequence>` with a negative `from` value to trim the start of an animation.
-
-## Trim the Beginning
-
-A negative `from` value shifts time backwards, making the animation start partway through:
-
-```tsx
-import { Sequence, useVideoConfig } from "remotion";
-
-const fps = useVideoConfig();
-
-<Sequence from={-0.5 * fps}>
-  <MyAnimation />
-</Sequence>;
-```
-
-The animation appears 15 frames into its progress - the first 15 frames are trimmed off.
-Inside `<MyAnimation>`, `useCurrentFrame()` starts at 15 instead of 0.
-
-## Trim the End
-
-Use `durationInFrames` to unmount content after a specified duration:
-
-```tsx
-<Sequence durationInFrames={1.5 * fps}>
-  <MyAnimation />
-</Sequence>
-```
-
-The animation plays for 45 frames, then the component unmounts.
-
-## Trim and Delay
-
-Nest sequences to both trim the beginning and delay when it appears:
-
-```tsx
-<Sequence from={30}>
-  <Sequence from={-15}>
-    <MyAnimation />
-  </Sequence>
-</Sequence>
-```
-
-The inner sequence trims 15 frames from the start, and the outer sequence delays the result by 30 frames.

.agents/skills/remotion-best-practices/rules/videos.md

@@ -1,171 +0,0 @@
----
-name: videos
-description: Embedding videos in Remotion - trimming, volume, speed, looping, pitch
-metadata:
-  tags: video, media, trim, volume, speed, loop, pitch
----
-
-# Using videos in Remotion
-
-## Prerequisites
-
-First, the @remotion/media package needs to be installed.  
-If it is not, use the following command:
-
-```bash
-npx remotion add @remotion/media # If project uses npm
-bunx remotion add @remotion/media # If project uses bun
-yarn remotion add @remotion/media # If project uses yarn
-pnpm exec remotion add @remotion/media # If project uses pnpm
-```
-
-Use `<Video>` from `@remotion/media` to embed videos into your composition.
-
-```tsx
-import { Video } from "@remotion/media";
-import { staticFile } from "remotion";
-
-export const MyComposition = () => {
-  return <Video src={staticFile("video.mp4")} />;
-};
-```
-
-Remote URLs are also supported:
-
-```tsx
-<Video src="https://remotion.media/video.mp4" />
-```
-
-## Trimming
-
-Use `trimBefore` and `trimAfter` to remove portions of the video. Values are in seconds.
-
-```tsx
-const { fps } = useVideoConfig();
-
-return (
-  <Video
-    src={staticFile("video.mp4")}
-    trimBefore={2 * fps} // Skip the first 2 seconds
-    trimAfter={10 * fps} // End at the 10 second mark
-  />
-);
-```
-
-## Delaying
-
-Wrap the video in a `<Sequence>` to delay when it appears:
-
-```tsx
-import { Sequence, staticFile } from "remotion";
-import { Video } from "@remotion/media";
-
-const { fps } = useVideoConfig();
-
-return (
-  <Sequence from={1 * fps}>
-    <Video src={staticFile("video.mp4")} />
-  </Sequence>
-);
-```
-
-The video will appear after 1 second.
-
-## Sizing and Position
-
-Use the `style` prop to control size and position:
-
-```tsx
-<Video
-  src={staticFile("video.mp4")}
-  style={{
-    width: 500,
-    height: 300,
-    position: "absolute",
-    top: 100,
-    left: 50,
-    objectFit: "cover",
-  }}
-/>
-```
-
-## Volume
-
-Set a static volume (0 to 1):
-
-```tsx
-<Video src={staticFile("video.mp4")} volume={0.5} />
-```
-
-Or use a callback for dynamic volume based on the current frame:
-
-```tsx
-import { interpolate } from "remotion";
-
-const { fps } = useVideoConfig();
-
-return (
-  <Video
-    src={staticFile("video.mp4")}
-    volume={(f) =>
-      interpolate(f, [0, 1 * fps], [0, 1], { extrapolateRight: "clamp" })
-    }
-  />
-);
-```
-
-Use `muted` to silence the video entirely:
-
-```tsx
-<Video src={staticFile("video.mp4")} muted />
-```
-
-## Speed
-
-Use `playbackRate` to change the playback speed:
-
-```tsx
-<Video src={staticFile("video.mp4")} playbackRate={2} /> {/* 2x speed */}
-<Video src={staticFile("video.mp4")} playbackRate={0.5} /> {/* Half speed */}
-```
-
-Reverse playback is not supported.
-
-## Looping
-
-Use `loop` to loop the video indefinitely:
-
-```tsx
-<Video src={staticFile("video.mp4")} loop />
-```
-
-Use `loopVolumeCurveBehavior` to control how the frame count behaves when looping:
-
-- `"repeat"`: Frame count resets to 0 each loop (for `volume` callback)
-- `"extend"`: Frame count continues incrementing
-
-```tsx
-<Video
-  src={staticFile("video.mp4")}
-  loop
-  loopVolumeCurveBehavior="extend"
-  volume={(f) => interpolate(f, [0, 300], [1, 0])} // Fade out over multiple loops
-/>
-```
-
-## Pitch
-
-Use `toneFrequency` to adjust the pitch without affecting speed. Values range from 0.01 to 2:
-
-```tsx
-<Video
-  src={staticFile("video.mp4")}
-  toneFrequency={1.5} // Higher pitch
-/>
-<Video
-  src={staticFile("video.mp4")}
-  toneFrequency={0.8} // Lower pitch
-/>
-```
-
-Pitch shifting only works during server-side rendering, not in the Remotion Studio preview or in the `<Player />`.

.agents/skills/remotion-best-practices/rules/voiceover.md

@@ -1,99 +0,0 @@
----
-name: voiceover
-description: Adding AI-generated voiceover to Remotion compositions using ElevenLabs TTS
-metadata:
-  tags: voiceover, audio, elevenlabs, tts, speech, calculateMetadata, dynamic duration
----
-
-# Adding AI voiceover to a Remotion composition
-
-Use ElevenLabs TTS to generate speech audio per scene, then use [`calculateMetadata`](./calculate-metadata) to dynamically size the composition to match the audio.
-
-## Prerequisites
-
-An **ElevenLabs API key** is required (`ELEVENLABS_API_KEY` environment variable).
-
-**MUST** ask the user for their ElevenLabs API key if `ELEVENLABS_API_KEY` is not set. **MUST NOT** fall back to other TTS tools.
-
-Ensure the environment variable is available when running the generation script:
-
-```bash
-node --strip-types generate-voiceover.ts
-```
-
-## Generating audio with ElevenLabs
-
-Create a script that reads the config, calls the ElevenLabs API for each scene, and writes MP3 files to the `public/` directory so Remotion can access them via `staticFile()`.
-
-The core API call for a single scene:
-
-```ts title="generate-voiceover.ts"
-const response = await fetch(
-  `https://api.elevenlabs.io/v1/text-to-speech/${voiceId}`,
-  {
-    method: "POST",
-    headers: {
-      "xi-api-key": process.env.ELEVENLABS_API_KEY!,
-      "Content-Type": "application/json",
-      Accept: "audio/mpeg",
-    },
-    body: JSON.stringify({
-      text: "Welcome to the show.",
-      model_id: "eleven_multilingual_v2",
-      voice_settings: {
-        stability: 0.5,
-        similarity_boost: 0.75,
-        style: 0.3,
-      },
-    }),
-  },
-);
-
-const audioBuffer = Buffer.from(await response.arrayBuffer());
-writeFileSync(`public/voiceover/${compositionId}/${scene.id}.mp3`, audioBuffer);
-```
-
-## Dynamic composition duration with calculateMetadata
-
-Use [`calculateMetadata`](./calculate-metadata.md) to measure the [audio durations](./get-audio-duration.md) and set the composition length accordingly.
-
-```tsx
-import { CalculateMetadataFunction, staticFile } from "remotion";
-import { getAudioDuration } from "./get-audio-duration";
-
-const FPS = 30;
-
-const SCENE_AUDIO_FILES = [
-  "voiceover/my-comp/scene-01-intro.mp3",
-  "voiceover/my-comp/scene-02-main.mp3",
-  "voiceover/my-comp/scene-03-outro.mp3",
-];
-
-export const calculateMetadata: CalculateMetadataFunction<Props> = async ({
-  props,
-}) => {
-  const durations = await Promise.all(
-    SCENE_AUDIO_FILES.map((file) => getAudioDuration(staticFile(file))),
-  );
-
-  const sceneDurations = durations.map((durationInSeconds) => {
-    return durationInSeconds * FPS;
-  });
-
-  return {
-    durationInFrames: Math.ceil(sceneDurations.reduce((sum, d) => sum + d, 0)),
-  };
-};
-```
-
-The computed `sceneDurations` are passed into the component via a `voiceover` prop so the component knows how long each scene should be.
-
-If the composition uses [`<TransitionSeries>`](./transitions.md), subtract the overlap from total duration: [./transitions.md#calculating-total-composition-duration](./transitions.md#calculating-total-composition-duration)
-
-## Rendering audio in the component
-
-See [audio.md](./audio.md) for more information on how to render audio in the component.
-
-## Delaying audio start
-
-See [audio.md#delaying](./audio.md#delaying) for more information on how to delay the audio start.

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.github/workflows/ci.yml

@@ -0,0 +1,36 @@
+name: CI
+
+on:
+  push:
+    branches: [master, main]
+  pull_request:
+
+jobs:
+  ci:
+    name: Typecheck & Lint
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Type check
+        run: npm run typecheck
+
+      - name: Lint
+        run: npm run lint
+
+      - name: Format check
+        run: npm run format:check
+
+# Note: The test suite is intentionally excluded from CI.
+# Tests spawn real tmux sessions and require a full system environment.
+# Run tests locally with: npx vitest run test/<file>.test.ts

.github/workflows/release.yml

@@ -11,6 +11,9 @@ jobs:
   release:
     name: Release
     runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
     steps:
       - name: Checkout repo
         uses: actions/checkout@v4
@@ -20,6 +23,7 @@ jobs:
         with:
           node-version: 20
           cache: npm
+          registry-url: https://registry.npmjs.org
 
       - name: Install dependencies
         run: npm ci
@@ -37,4 +41,26 @@ jobs:
           commit: "chore: version packages"
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Rename release tag to codeman
+        if: steps.changesets.outputs.published == 'true'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          VERSION=$(node -p "require('./package.json').version")
+          OLD_TAG="aicodeman@${VERSION}"
+          NEW_TAG="codeman@${VERSION}"
+
+          # Update the GitHub release BEFORE deleting the old tag
+          RELEASE_ID=$(gh release view "$OLD_TAG" --json databaseId -q .databaseId 2>/dev/null || true)
+          if [ -n "$RELEASE_ID" ]; then
+            gh api -X PATCH "repos/${{ github.repository }}/releases/${RELEASE_ID}" \
+              -f tag_name="$NEW_TAG" \
+              -f name="$NEW_TAG"
+          fi
+
+          # Retag
+          git tag "$NEW_TAG" "$OLD_TAG" 2>/dev/null || true
+          git tag -d "$OLD_TAG" 2>/dev/null || true
+          git push origin "$NEW_TAG" ":refs/tags/$OLD_TAG" 2>/dev/null || true

.gitignore

@@ -1,3 +1,7 @@
+# Claude Code local files
+.agents/
+skills-lock.json
+
 # Dependencies
 node_modules/
 
@@ -41,6 +45,14 @@ Thumbs.db
 *.tmp
 *.temp
 
+# Generated output
+out/
+screenshots-echo-diag/
+tools/remotion/out/
+
+# Claude Code plan tracking
+plan.json
+
 # Unfinished TUI (local development only)
 src/tui/
 .claude/
@@ -48,3 +60,4 @@ media-assets/
 commands
 todo.md
 @fix_plan.md
+readme-preview.mjs

.nvmrc

@@ -0,0 +1 @@
+22

.prettierignore

@@ -0,0 +1,9 @@
+dist/
+coverage/
+node_modules/
+src/web/public/vendor/
+src/web/public/app.js
+src/web/public/styles.css
+src/web/public/mobile.css
+src/web/public/index.html
+tools/

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "tabWidth": 2,
+  "printWidth": 120,
+  "trailingComma": "es5",
+  "endOfLine": "lf"
+}

CHANGELOG.md

@@ -1,4 +1,96 @@
-# codeman
+# aicodeman
+
+## 0.3.5
+
+### Patch Changes
+
+- Fix Chrome "page unresponsive" crashes caused by xterm.js WebGL renderer GPU stalls during heavy terminal output. Disable WebGL by default (canvas renderer used instead), gate SSE terminal writes during tab switches, and add crash diagnostics with server-side breadcrumb collection.
+
+## 0.3.4
+
+### Patch Changes
+
+- Fix Chrome tab freeze from flicker filter buffer accumulation during active sessions, and fix shell mode feedback delay by excluding shell sessions from cursor-up filter
+
+## 0.3.3
+
+### Patch Changes
+
+- fix: eliminate WebGL re-render flicker during tab switch by keeping renderer active instead of toggling it off/on around large buffer writes
+
+## 0.3.2
+
+### Patch Changes
+
+- Make file browser panel draggable by its header
+
+## 0.3.1
+
+### Patch Changes
+
+- LLM context optimization and performance improvements: compress CLAUDE.md 21%, MEMORY.md 61%; SSE broadcast early return, cached tunnel state, cache invalidation fix, ralph todo cleanup timer; frontend SSE listener leak fix, short ID caching, subagent window handle cleanup; 100% @fileoverview coverage
+
+## 0.3.0
+
+### Minor Changes
+
+- QR code authentication for tunnel access, 7-phase codebase refactor (route extraction, type domain modules, frontend module split, config consolidation, managed timers, test infrastructure), overlay rendering fixes, and security hardening
+
+## 0.2.9
+
+### Patch Changes
+
+- System-level performance optimizations (Phase 4): stream parent transcripts instead of full reads, consolidate subagent file watchers from 500 to ~50 using directory-level inotify, incremental state persistence with per-session JSON caching, and replace team watcher polling with chokidar fs events
+
+## 0.2.8
+
+### Patch Changes
+
+- Remove 159 lines of dead code: unused interfaces, functions, config constants, legacy no-op timer, and stale barrel re-exports
+
+## 0.2.7
+
+### Patch Changes
+
+- Fix race condition in StateStore where dirty flag was overwritten after async write, silently discarding mutations
+- Fix PlanOrchestrator session leak by adding session.stop() in finally blocks and centralizing cleanup
+- Fix symlink path traversal in file-content and file-raw endpoints by adding realpathSync validation
+- Fix PTY exit handler to clean up sessionListenerRefs, transcriptWatchers, runSummaryTrackers, and terminal batching state
+- Fix sendInput() fire-and-forget by propagating runPrompt errors to task queue via taskError event
+- Fix Ralph Loop tick() race condition by running checkTimeouts/assignTasks sequentially with per-iteration error handling
+- Fix shell injection in hook scripts by piping HOOK_DATA via printf to curl stdin instead of inline embedding
+- Narrow tail-file allowlist to remove ~/.cache and ~/.local/share paths that exposed credentials
+- Fix stored XSS in quick-start dropdown by escaping case names with escapeHtml()
+
+## 0.2.6
+
+### Patch Changes
+
+- Disable tunnel auto-start on boot; tunnel now only starts when user clicks the UI toggle
+
+## 0.2.5
+
+### Patch Changes
+
+- Fix 3 minor memory leaks: clear respawn timers in stop(), clean up persistDebounceTimers on session cleanup, reset \_parentNameCache on SSE reconnect
+
+## 0.2.4
+
+### Patch Changes
+
+- Fix tunnel button not working: settings PUT was rejected by strict Zod validation when sending full settings blob; now sends only `{tunnelEnabled}`. Added polling fallback for tunnel status in case SSE events are missed.
+
+## 0.2.3
+
+### Patch Changes
+
+- Fix tunnel button stuck on "Connecting..." when tunnel is already running on the server
+
+## 0.2.2
+
+### Patch Changes
+
+- Update CLAUDE.md app.js line count references
 
 ## 0.2.1
 

CLAUDE.md

@@ -8,6 +8,8 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 |------|---------|
 | Dev server | `npx tsx src/index.ts web` |
 | Type check | `tsc --noEmit` |
+| Lint | `npm run lint` (fix: `npm run lint:fix`) |
+| Format | `npm run format` (check: `npm run format:check`) |
 | Single test | `npx vitest run test/<file>.test.ts` |
 | Production | `npm run build && systemctl --user restart codeman-web` |
 
@@ -15,7 +17,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 **You may be running inside a Codeman-managed tmux session.** Before killing ANY tmux or Claude process:
 
-1. Check: `echo $CODEMAN_TMUX` - if `1`, you're in a managed session
+1. Check: `echo $CODEMAN_MUX` - if `1`, you're in a managed session
 2. **NEVER** run `tmux kill-session`, `pkill tmux`, or `pkill claude` without confirming
 3. Use the web UI or `./scripts/tmux-manager.sh` instead of direct kill commands
 
@@ -27,7 +29,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 2. **Frontend changes**: Use Playwright to load the page and assert the UI renders correctly. Use `waitUntil: 'domcontentloaded'` (not `networkidle` — SSE keeps the connection open). Wait 3-4s for polling/async data to populate, then check element visibility, text content, and CSS values
 3. **Only after verification passes**, proceed with COM
 
-The production server caches static files for 1 hour (`maxAge: '1h'` in `server.ts`). After deploying frontend changes, users may need a hard refresh (Ctrl+Shift+R) to see updates.
+The production server caches static files for 1 year (`maxAge: '1y'` in `server.ts`). After deploying frontend changes, users may need a hard refresh (Ctrl+Shift+R) to see updates.
 
 ## COM Shorthand (Deployment)
 
@@ -39,7 +41,7 @@ When user says "COM":
    ```bash
    cat > .changeset/$(openssl rand -hex 4).md << 'CHANGESET'
    ---
-   "codeman": patch
+   "aicodeman": patch
    ---
 
    Description of changes
@@ -50,7 +52,7 @@ When user says "COM":
 4. **Sync CLAUDE.md version**: Update the `**Version**` line below to match the new version from `package.json`
 5. **Commit and deploy**: `git add -A && git commit -m "chore: version packages" && git push && npm run build && systemctl --user restart codeman-web`
 
-**Version**: 0.2.1 (must match `package.json`)
+**Version**: 0.3.5 (must match `package.json`)
 
 ## Project Overview
 
@@ -58,128 +60,65 @@ Codeman is a Claude Code session manager with web interface and autonomous Ralph
 
 **Tech Stack**: TypeScript (ES2022/NodeNext, strict mode), Node.js, Fastify, node-pty, xterm.js. Supports both Claude Code and OpenCode AI CLIs via pluggable CLI resolvers.
 
-**TypeScript Strictness** (see `tsconfig.json`): `noUnusedLocals`, `noUnusedParameters`, `noImplicitReturns`, `noImplicitOverride`, `noFallthroughCasesInSwitch`, `allowUnreachableCode: false`, `allowUnusedLabels: false`. Note: `src/tui` is excluded from compilation (legacy/deprecated code path).
+**TypeScript Strictness** (see `tsconfig.json`): `noUnusedLocals`, `noUnusedParameters`, `noImplicitReturns`, `noImplicitOverride`, `noFallthroughCasesInSwitch`, `allowUnreachableCode: false`, `allowUnusedLabels: false`.
 
 **Requirements**: Node.js 18+, Claude CLI, tmux
 
-## Commands
+**Git**: Main branch is `master`. SSH session chooser: `sc` (interactive), `sc 2` (quick attach), `sc -l` (list).
 
-**CRITICAL**: `npm run dev` shows CLI help, NOT the web server.
+## Additional Commands
 
-**Default port**: `3000` (web UI at `http://localhost:3000`)
+`npm run dev` = dev server. Default port: `3000`. Commands not in Quick Reference:
 
-```bash
-# Setup
-npm install                        # Install dependencies
+| Task | Command |
+|------|---------|
+| Dev with TLS | `npx tsx src/index.ts web --https` |
+| Continuous typecheck | `tsc --noEmit --watch` |
+| Test coverage | `npm run test:coverage` |
+| Production start | `npm run start` |
+| Production logs | `journalctl --user -u codeman-web -f` |
 
-# Development
-npx tsx src/index.ts web           # Dev server (RECOMMENDED)
-npx tsx src/index.ts web --https   # With TLS (only needed for remote access)
-npm run typecheck                  # Type check
-tsc --noEmit --watch               # Continuous type checking
+**CI**: `.github/workflows/ci.yml` runs `typecheck`, `lint`, `format:check` on push to master (Node 22). Tests excluded (they spawn tmux).
 
-# Testing (NEVER run full suite from inside Codeman — kills tmux sessions)
-# npx vitest run                   # ALL tests — DANGEROUS inside Codeman
-npx vitest run test/<file>.test.ts # Single file (SAFE)
-npx vitest run -t "pattern"        # Tests matching name
-npm run test:coverage              # With coverage report
-
-# Production
-npm run build
-systemctl --user restart codeman-web
-journalctl --user -u codeman-web -f
-```
+**Code style**: Prettier (`singleQuote: true`, `printWidth: 120`, `trailingComma: "es5"`). ESLint allows `no-console`, warns on `@typescript-eslint/no-explicit-any`. Does not lint `app.js` or `scripts/**/*.mjs`.
 
 ## Common Gotchas
 
-- **`npm run dev` is NOT the web server** — it shows CLI help. Use `npx tsx src/index.ts web`
-- **Single-line prompts only** — `writeViaMux()` sends text and Enter separately; multi-line breaks Ink
-- **Don't kill tmux sessions blindly** — Check `$CODEMAN_TMUX` first; you might be inside one
-- **Never run full test suite** — `npx vitest run` spawns/kills tmux sessions and will crash your Codeman session. Run individual test files only.
-- **Global regex `lastIndex` sharing** — `ANSI_ESCAPE_PATTERN_FULL/SIMPLE` have `g` flag; use `createAnsiPatternFull/Simple()` factory functions for fresh instances in loops
-- **DEC 2026 sync blocks** — Never discard incomplete sync blocks (START without END); buffer up to 50ms then flush. See `app.js:extractSyncSegments()`
-- **Terminal writes during buffer load** — Live SSE writes are queued while `_isLoadingBuffer` is true to prevent interleaving with historical data
-- **Local echo prompt scanning** — Does NOT use `buffer.cursorY` (Ink moves it); scans buffer bottom-up for visible `>` prompt marker
+- **Single-line prompts only** — `writeViaMux()` sends text+Enter separately; multi-line breaks Ink
+- **ESM only** — Never `require()`, use `await import()`. `tsx` masks CJS/ESM issues in dev but production breaks
+- **Package ≠ product name** — npm: `aicodeman`, product: **Codeman**. Release renames tags accordingly
+- **Global regex `lastIndex`** — Use `createAnsiPatternFull/Simple()` factories, not shared `g`-flag patterns in loops
 
-## Import Conventions
-
-- **Utilities**: Import from `./utils` (re-exports all): `import { LRUMap, stripAnsi } from './utils'`
-- **Types**: Use type imports: `import type { SessionState } from './types'`
-- **Config**: Import from specific files: `import { MAX_TERMINAL_BUFFER_SIZE } from './config/buffer-limits'`
+**Import conventions**: Utils from `./utils`, types from `./types` (barrel), config from specific `./config/*` files.
 
 ## Architecture
 
-### Core Files
+### Core Files (by domain)
 
-| File | Purpose |
-|------|---------|
-| `src/session.ts` | PTY wrapper: `runPrompt()`, `startInteractive()`, `startShell()` |
-| `src/mux-interface.ts` | `TerminalMultiplexer` interface + `MuxSession` type |
-| `src/mux-factory.ts` | Create tmux multiplexer instance |
-| `src/tmux-manager.ts` | tmux session management |
-| `src/session-manager.ts` | Session lifecycle, cleanup |
-| `src/state-store.ts` | State persistence to `~/.codeman/state.json` |
-| `src/respawn-controller.ts` | State machine for autonomous cycling |
-| `src/ralph-tracker.ts` | Detects `<promise>PHRASE</promise>`, todos |
-| `src/ralph-loop.ts` | Autonomous task execution loop (polls queue, assigns tasks) |
-| `src/ralph-config.ts` | Parses `.claude/ralph-loop.local.md` plugin config |
-| `src/task.ts` | Task model for prompt execution |
-| `src/task-queue.ts` | Priority queue for tasks with dependencies |
-| `src/task-tracker.ts` | Background task tracker for subagent detection |
-| `src/subagent-watcher.ts` | Monitors Claude Code's Task tool (background agents) |
-| `src/team-watcher.ts` | Polls `~/.claude/teams/` for agent team activity; matches teams to sessions via `leadSessionId` |
-| `src/run-summary.ts` | Timeline events for "what happened while away" |
-| `src/ai-checker-base.ts` | Base class for AI-powered checkers (shared by idle + plan checkers) |
-| `src/ai-idle-checker.ts` | AI-powered idle detection |
-| `src/ai-plan-checker.ts` | AI-powered plan completion checker |
-| `src/bash-tool-parser.ts` | Parses Claude's bash tool invocations from output |
-| `src/transcript-watcher.ts` | Watches Claude's transcript files for changes |
-| `src/hooks-config.ts` | Manages `.claude/settings.local.json` hook configuration |
-| `src/push-store.ts` | VAPID key auto-gen + push subscription CRUD for Web Push |
-| `src/session-lifecycle-log.ts` | Append-only JSONL audit log at `~/.codeman/session-lifecycle.jsonl` |
-| `src/image-watcher.ts` | Watches for image file creation (screenshots, etc.) |
-| `src/file-stream-manager.ts` | Manages `tail -f` processes for live log viewing |
-| `src/plan-orchestrator.ts` | Multi-agent plan generation with research and planning phases |
-| `src/prompts/index.ts` | Barrel export for all agent prompts |
-| `src/prompts/*.ts` | Agent prompts (research-agent, planner) |
-| `src/templates/claude-md.ts` | CLAUDE.md generation for new cases |
-| `src/cli.ts` | Command-line interface handlers |
-| `src/web/server.ts` | Fastify REST API + SSE at `/api/events` (~105 routes) |
-| `src/web/schemas.ts` | Zod v4 validation schemas with path/env security allowlists |
-| `src/web/public/app.js` | Frontend: xterm.js, tab management, subagent windows, mobile support (~17K lines) |
-| `src/types.ts` | All TypeScript interfaces (~70 type/interface/enum defs, ~1450 lines) |
+| Domain | Key files | Notes |
+|--------|-----------|-------|
+| **Entry** | `src/index.ts`, `src/cli.ts` | |
+| **Session** | `src/session.ts` ★, `src/session-manager.ts`, `src/session-auto-ops.ts`, `src/session-cli-builder.ts` | |
+| **Mux** | `src/mux-interface.ts`, `src/mux-factory.ts`, `src/tmux-manager.ts` | |
+| **Respawn** | `src/respawn-controller.ts` ★ + 4 helpers (`-adaptive-timing`, `-health`, `-metrics`, `-patterns`) | Read `docs/respawn-state-machine.md` first |
+| **Ralph** | `src/ralph-tracker.ts` ★, `src/ralph-loop.ts` + 5 helpers (`-config`, `-fix-plan-watcher`, `-plan-tracker`, `-stall-detector`, `-status-parser`) | Read `docs/ralph-wiggum-guide.md` first |
+| **Agents** | `src/subagent-watcher.ts` ★, `src/team-watcher.ts`, `src/bash-tool-parser.ts`, `src/transcript-watcher.ts` | |
+| **AI** | `src/ai-checker-base.ts`, `src/ai-idle-checker.ts`, `src/ai-plan-checker.ts` | |
+| **Tasks** | `src/task.ts`, `src/task-queue.ts`, `src/task-tracker.ts` | |
+| **State** | `src/state-store.ts`, `src/run-summary.ts`, `src/session-lifecycle-log.ts` | |
+| **Infra** | `src/hooks-config.ts`, `src/push-store.ts`, `src/tunnel-manager.ts`, `src/image-watcher.ts`, `src/file-stream-manager.ts` | |
+| **Plan** | `src/plan-orchestrator.ts`, `src/prompts/*.ts`, `src/templates/claude-md.ts` | |
+| **Web** | `src/web/server.ts`, `src/web/sse-events.ts`, `src/web/routes/*.ts` (13 modules), `src/web/ports/*.ts`, `src/web/middleware/auth.ts`, `src/web/schemas.ts` | |
+| **Frontend** | `src/web/public/app.js` ★ (~11.8K lines) + 10 JS modules (incl. `sw.js` service worker) | |
+| **Types** | `src/types/index.ts` → 14 domain files | See `@fileoverview` in index.ts |
 
-**Large files** (>50KB): `app.js`, `ralph-tracker.ts`, `respawn-controller.ts`, `session.ts`, `subagent-watcher.ts` — these contain complex state machines; read `docs/respawn-state-machine.md` before modifying.
+★ = Large file (>50KB). All files have `@fileoverview` JSDoc — read that before diving in.
 
-### Local Packages
+**Local package**: `packages/xterm-zerolag-input/` — local echo overlay for xterm.js; copy embedded in `app.js`.
 
-| Package | Purpose |
-|---------|---------|
-| `packages/xterm-zerolag-input/` | Instant keystroke feedback overlay for xterm.js — eliminates perceived input latency over high-RTT connections. Source of truth for `LocalEchoOverlay`; a copy is embedded in `app.js`. Build: `npm run build` (tsup). |
+**Config**: `src/config/` — 9 files. Import from specific files, not barrel.
 
-### Config Files (`src/config/`)
-
-| File | Purpose |
-|------|---------|
-| `buffer-limits.ts` | Terminal/text buffer size limits |
-| `map-limits.ts` | Global limits for Maps, sessions, watchers |
-
-### Utility Files (`src/utils/`)
-
-| File | Purpose |
-|------|---------|
-| `index.ts` | Re-exports all utilities (standard import point) |
-| `lru-map.ts` | LRU eviction Map for bounded caches |
-| `nice-wrapper.ts` | Wrap commands with `nice` priority adjustment |
-| `stale-expiration-map.ts` | TTL-based Map with lazy expiration |
-| `claude-cli-resolver.ts` | Resolve Claude CLI binary across install paths |
-| `cleanup-manager.ts` | Centralized resource disposal |
-| `buffer-accumulator.ts` | Chunk accumulator with size limits |
-| `string-similarity.ts` | String matching utilities (fuzzy matching) |
-| `token-validation.ts` | Token count parsing and validation |
-| `regex-patterns.ts` | Shared regex patterns for parsing |
-| `type-safety.ts` | `assertNever()` for exhaustive switch/case type checking |
-| `opencode-cli-resolver.ts` | Resolve OpenCode CLI binary across install paths |
+**Utilities**: `src/utils/` — re-exported via index. Key: `CleanupManager`, `LRUMap`, `StaleExpirationMap`, `BufferAccumulator`, `stripAnsi`, `Debouncer`.
 
 ### Data Flow
 
@@ -190,371 +129,118 @@ journalctl --user -u codeman-web -f
 
 ### Key Patterns
 
-**Input to sessions**: Use `session.writeViaMux()` for programmatic input (respawn, auto-compact). Uses tmux `send-keys -l` (literal text) + `send-keys Enter`. All prompts must be single-line.
-
-**Terminal multiplexer**: `TerminalMultiplexer` interface (`src/mux-interface.ts`) abstracts the backend. `createMultiplexer()` from `src/mux-factory.ts` creates the tmux backend.
+**Input**: `session.writeViaMux()` for programmatic input — tmux `send-keys -l` (literal) + `send-keys Enter`. Single-line only.
 
 **Idle detection**: Multi-layer (completion message → AI check → output silence → token stability). See `docs/respawn-state-machine.md`.
 
-**Token tracking**: Interactive mode parses status line ("123.4k tokens"), estimates 60/40 input/output split.
+**Hook events**: Claude Code hooks trigger via `/api/hook-event`. Key events: `permission_prompt`, `elicitation_dialog`, `idle_prompt`, `stop`, `teammate_idle`, `task_completed`. See `src/hooks-config.ts`.
 
-**Hook events**: Claude Code hooks trigger notifications via `/api/hook-event`. Key events: `permission_prompt` (tool approval needed), `elicitation_dialog` (Claude asking question), `idle_prompt` (waiting for input), `stop` (response complete), `teammate_idle` (Agent Teams), `task_completed` (Agent Teams). See `src/hooks-config.ts`.
+**Agent Teams**: `TeamWatcher` polls `~/.claude/teams/`, matches to sessions via `leadSessionId`. Teammates are in-process threads appearing as subagents. Enable: `CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS=1`. See `agent-teams/`.
 
-**Web Push**: Layer 5 of the notification system. Service worker (`sw.js`) receives push events and shows OS-level notifications even when the browser tab is closed. VAPID keys auto-generated on first use and persisted to `~/.codeman/push-keys.json`. Per-subscription per-event preferences stored in `~/.codeman/push-subscriptions.json`. Expired subscriptions (410/404) auto-cleaned. Requires HTTPS or localhost. iOS requires PWA installed to home screen. See `src/push-store.ts`.
+**Circuit breaker**: Prevents respawn thrashing. States: `CLOSED` → `HALF_OPEN` → `OPEN`. Reset: `/api/sessions/:id/ralph-circuit-breaker/reset`.
 
-**Agent Teams (experimental)**: `TeamWatcher` polls `~/.claude/teams/` for team configs and matches teams to sessions via `leadSessionId`. Teammates are in-process threads (not separate OS processes) and appear as standard subagents. RespawnController checks `TeamWatcher.hasActiveTeammates()` before triggering respawn. Enable via `CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS=1` env var in `settings.local.json`. See `agent-teams/` for full docs.
+**Port interfaces**: Routes declare dependencies via port interfaces (`src/web/ports/`). Routes use intersection types (e.g., `SessionPort & EventPort`).
 
-**Circuit breaker**: Prevents respawn thrashing when Claude is stuck. States: `CLOSED` (normal) → `HALF_OPEN` (testing) → `OPEN` (blocked). Tracks consecutive no-progress, same-error-repeated, and tests-failing-too-long. Reset via API at `/api/sessions/:id/ralph-circuit-breaker/reset`.
+### Frontend
 
-**Respawn cycle metrics & health scoring**: `RespawnCycleMetrics` tracks per-cycle outcomes (success, stuck_recovery, blocked, error). `RalphLoopHealthScore` computes 0-100 health with component scores (cycleSuccess, circuitBreaker, iterationProgress, aiChecker, stuckRecovery). Available via respawn status API.
-
-**Subagent-session correlation**: Session parses Task tool output via `BashToolParser` → `SubagentWatcher` discovers new agent → calls `session.findTaskDescriptionNear()` to match description for window title.
-
-### Frontend Files
-
-| File | Purpose |
-|------|---------|
-| `src/web/public/index.html` | HTML entry point with inline critical CSS and async vendor loading |
-| `src/web/public/app.js` | Core UI: xterm.js, tab management, subagent windows, mobile support (~17.5K lines) |
-| `src/web/public/styles.css` | Main styling (dark theme, layout, components) |
-| `src/web/public/mobile.css` | Responsive overrides for screens <1024px (loaded conditionally via `media` attribute) |
-| `src/web/public/upload.html` | Screenshot upload page served at `/upload.html` |
-| `src/web/public/sw.js` | Service worker for Web Push notifications |
-| `src/web/public/manifest.json` | Minimal PWA manifest (required for push on Android) |
-| `src/web/public/vendor/` | Self-hosted xterm.js + addons (eliminates CDN latency) |
-
-### Frontend Architecture (`app.js`)
-
-The frontend is a single ~17.5K-line vanilla JS file with these key systems:
-
-| System | Key Classes/Functions | Purpose |
-|--------|----------------------|---------|
-| **Terminal rendering** | `batchTerminalWrite()`, `flushPendingWrites()`, `chunkedTerminalWrite()` | 60fps batched writes with DEC 2026 sync |
-| **Local echo overlay** | `LocalEchoOverlay` class | DOM overlay for instant mobile keystroke feedback |
-| **Mobile support** | `MobileDetection`, `KeyboardHandler`, `SwipeHandler`, `KeyboardAccessoryBar` | Touch input, viewport adaptation, swipe navigation |
-| **Subagent windows** | `openSubagentWindow()`, `closeSubagentWindow()`, `updateConnectionLines()` | Floating terminal windows with parent connection lines |
-| **Notifications** | `NotificationManager` class | 5-layer: in-app drawer, tab flash, browser API, web push, audio beep |
-| **SSE connection** | `connectSSE()`, `addListener()` | EventSource with exponential backoff (1-30s), offline queue (64KB) |
-| **Settings** | `openAppSettings()`, `apply*Visibility()` | Server-backed + localStorage persistence |
-| **Focus management** | `FocusTrap` class | Modal keyboard navigation with focus restore |
+Frontend JS modules have `@fileoverview` with `@dependency`/`@loadorder` tags. Load order: `constants.js`(1) → `mobile-handlers.js`(2) → `voice-input.js`(3) → `notification-manager.js`(4) → `keyboard-accessory.js`(5) → `app.js`(6) → `ralph-wizard.js`(7) → `api-client.js`(8) → `subagent-windows.js`(9).
 
 **Z-index layers**: subagent windows (1000), plan agents (1100), log viewers (2000), image popups (3000), local echo overlay (7).
 
-**Built-in respawn presets**: `solo-work` (3s idle, 60min), `subagent-workflow` (45s idle, 240min), `team-lead` (90s idle, 480min), `ralph-todo` (8s idle, 480min, works through @fix_plan.md tasks), `overnight-autonomous` (10s idle, 480min, full reset).
+**Respawn presets**: `solo-work` (3s/60min), `subagent-workflow` (45s/240min), `team-lead` (90s/480min), `ralph-todo` (8s/480min), `overnight-autonomous` (10s/480min).
 
-**Keyboard shortcuts**: Escape (close panels), Ctrl+? (help), Ctrl+Enter (quick start), Ctrl+W (kill session), Ctrl+Tab (next session), Ctrl+K (kill all), Ctrl+L (clear), Ctrl+Shift+R (restore size), Ctrl/Cmd +/- (font size).
+**Keyboard shortcuts**: Escape (close), Ctrl+? (help), Ctrl+Enter (quick start), Ctrl+W (kill), Ctrl+Tab (next), Ctrl+K (kill all), Ctrl+L (clear), Ctrl+Shift+R (restore size), Ctrl/Cmd +/- (font).
 
 ### Security
 
-- **HTTP Basic Auth**: Optional via `CODEMAN_USERNAME`/`CODEMAN_PASSWORD` env vars
-- **Session cookies**: After Basic Auth, a 24h session cookie (`codeman_session`) is issued so credentials aren't re-sent on every request. Active sessions auto-extend. SSE works via same-origin cookie (`EventSource` can't send custom headers).
-- **Rate limiting**: 10 failed auth attempts per IP triggers 429 rejection (15-minute decay window). Manual `StaleExpirationMap` counter — no `@fastify/rate-limit` needed.
-- **Hook bypass**: `/api/hook-event` POST is exempt from auth — Claude Code hooks curl this from localhost and can't present credentials. Safe: validated by `HookEventSchema`, only triggers broadcasts.
-- **CORS**: Restricted to localhost only
-- **Security headers**: X-Content-Type-Options, X-Frame-Options, CSP; HSTS if HTTPS
-- **Path validation** (`schemas.ts`): Strict allowlist regex, no shell metacharacters, no traversal, must be absolute
-- **Env var allowlist**: Only `CLAUDE_CODE_*` prefixes allowed; blocks `PATH`, `LD_PRELOAD`, `NODE_OPTIONS`, `CODEMAN_*` keys
-- **File streaming TOCTOU protection**: `FileStreamManager` calls `realpathSync()` twice (at validation and before spawn) to catch symlink swaps
+| Layer | Details |
+|-------|---------|
+| **Auth** | Optional HTTP Basic via `CODEMAN_USERNAME`/`CODEMAN_PASSWORD` env vars |
+| **QR Auth** | Single-use 6-char tokens (60s TTL) for tunnel login. See `docs/qr-auth-plan.md` |
+| **Sessions** | 24h cookie (`codeman_session`), auto-extend, device context audit |
+| **Rate limit** | 10 failed auth/IP → 429 (15min decay). QR has separate limiter |
+| **Hook bypass** | `/api/hook-event` exempt from auth (localhost-only, schema-validated) |
+| **Env vars** | `CODEMAN_MUX` (managed session), `CODEMAN_API_URL` (auto-set for hooks) |
+| **Validation** | Zod schemas, path allowlist regex, `CLAUDE_CODE_*` env prefix allowlist |
+| **Headers** | CORS localhost-only, CSP, X-Frame-Options, HSTS if HTTPS |
 
-### SSE Event Categories
+### SSE Event Registry
 
-~80+ event types broadcast via `broadcast()`. Key categories:
+~100 event types in `src/web/sse-events.ts` (backend) and `SSE_EVENTS` in `constants.js` (frontend). Both must be kept in sync.
 
-| Category | Events | Purpose |
-|----------|--------|---------|
-| Session | `session:created/updated/deleted/working/idle/exit/error/completion` | Lifecycle |
-| Terminal | `session:terminal`, `session:clearTerminal`, `session:needsRefresh` | Output streaming |
-| Respawn | `respawn:stateChanged/cycleStarted/blocked/aiCheck*/planCheck*/timer*` | Respawn state machine |
-| Subagent | `subagent:discovered/updated/completed/tool_call/progress` | Background agents |
-| Ralph | `session:ralphLoopUpdate/ralphTodoUpdate/ralphCompletionDetected` | Ralph tracking |
-| Hooks | `hook:{eventName}` (dynamic) | Claude Code hook events |
-| Plan | `plan:started/progress/completed/cancelled/subagent` | Plan orchestration |
-| Mux | `mux:created/killed/died/statsUpdated` | tmux process monitor |
-| Image | `image:detected` | Screenshot detection |
+### API Routes
 
-### API Route Categories
-
-~105 routes in `server.ts:buildServer()`. Key groups:
-
-| Group | Prefix | Count | Key endpoints |
-|-------|--------|-------|---------------|
-| Sessions | `/api/sessions` | ~20 | CRUD, input, resize, interactive, shell |
-| Respawn | `/api/sessions/:id/respawn` | 5 | start, stop, enable, config |
-| Ralph | `/api/sessions/:id/ralph-*` | 6 | state, status, config, circuit-breaker |
-| Plan | `/api/sessions/:id/plan/*` | 5 | task CRUD, checkpoint, history, rollback |
-| Subagents | `/api/subagents` | 7 | list, transcript, kill, cleanup |
-| Cases | `/api/cases` | 5 | CRUD, link, fix-plan |
-| Scheduled | `/api/scheduled` | 4 | CRUD for scheduled runs |
-| Push | `/api/push` | 4 | VAPID key, subscribe, update prefs, unsubscribe |
-| System | `/api/status`, `/api/stats`, `/api/config`, `/api/settings` | 8 | App state, config |
-| Files | `/api/sessions/:id/file*`, `tail-file` | 5 | Browser, preview, raw, tail stream |
-| Mux | `/api/mux-sessions` | 4 | tmux management, stats |
+~111 handlers across 13 route files in `src/web/routes/`: system (35), sessions (24), ralph (9), plan (8), respawn (7), cases (7), files (5), mux (5), scheduled (4), push (4), teams (2), hooks (1). Each file has `@fileoverview` with endpoint details.
 
 ## Adding Features
 
-- **API endpoint**: Types in `types.ts`, route in `server.ts:buildServer()`, use `createErrorResponse()`. Validate request bodies with Zod schemas in `schemas.ts`.
-- **SSE event**: Emit via `broadcast()`, handle in `app.js` SSE listener section (search `addListener(`)
-- **Session setting**: Add to `SessionState` in `types.ts`, include in `session.toState()`, call `persistSessionState()`
-- **Hook event**: Add to `HookEventType` in `types.ts`, add hook command in `hooks-config.ts:generateHooksConfig()`, update `HookEventSchema` in `schemas.ts`
-- **Mobile feature**: Add to relevant mobile singleton (`KeyboardHandler`, `KeyboardAccessoryBar`, etc.), test with `MobileDetection.isMobile()` guard
-- **New test**: Pick unique port (search `const PORT =`), add port comment to test file header. Tests use ports 3150+.
+- **API endpoint**: Types in `src/types/` domain file, route in `src/web/routes/*-routes.ts`, use `createErrorResponse()`. Validate with Zod schemas in `schemas.ts`.
+- **SSE event**: Add to `src/web/sse-events.ts` + `SSE_EVENTS` in `constants.js`, emit via `broadcast()`, handle in `app.js` (`addListener(`)
+- **Session setting**: Add to `SessionState`, include in `session.toState()`, call `persistSessionState()`
+- **Hook event**: Add to `HookEventType`, add hook in `hooks-config.ts:generateHooksConfig()`, update `HookEventSchema`
+- **Mobile feature**: Add to relevant singleton, guard with `MobileDetection.isMobile()`
+- **New test**: Pick unique port (search `const PORT =`). Integration: ports 3099-3211. Route tests: `app.inject()` — see `test/routes/_route-test-utils.ts`.
 
-**Validation**: Uses Zod v4 for request validation. Define schemas in `schemas.ts` and use `.parse()` or `.safeParse()`. Note: Zod v4 has different API from v3 (e.g., `z.object()` options changed, error formatting differs).
+**Validation**: Zod v4 (different API from v3). Define schemas in `schemas.ts`, use `.parse()`/`.safeParse()`.
 
 ## State Files
 
-| File | Purpose |
-|------|---------|
-| `~/.codeman/state.json` | Sessions, settings, tokens, respawn config |
-| `~/.codeman/mux-sessions.json` | Tmux session metadata for recovery |
-| `~/.codeman/settings.json` | User preferences |
-| `~/.codeman/push-keys.json` | VAPID key pair for Web Push (auto-generated) |
-| `~/.codeman/push-subscriptions.json` | Registered push notification subscriptions |
-
-## Default Settings
-
-UI defaults are set in `src/web/public/app.js` using `??` fallbacks. To change defaults, edit `openAppSettings()` and `apply*Visibility()` functions.
-
-**Key defaults:** Most panels hidden (monitor, subagents shown), notifications enabled (audio disabled), subagent tracking on, Ralph tracking off.
+All in `~/.codeman/`: `state.json` (sessions, settings, respawn), `mux-sessions.json` (tmux recovery), `settings.json` (user prefs), `push-keys.json` (VAPID), `push-subscriptions.json`, `session-lifecycle.jsonl` (audit log).
 
 ## Testing
 
-**CRITICAL: You are running inside a Codeman-managed tmux session.** Never run `npx vitest run` (full suite) — it spawns/kills tmux sessions and will crash your own session. Instead:
+**CRITICAL: You are running inside a Codeman-managed tmux session.** Never run `npx vitest run` (full suite) — it spawns/kills tmux sessions and will crash your own session. Only run individual files:
 
 ```bash
-# Safe: run individual test files
-npx vitest run test/<specific-file>.test.ts
-
-# Safe: run tests matching a pattern
-npx vitest run -t "pattern"
-
-# DANGEROUS from inside Codeman — will kill your tmux session:
-# npx vitest run          ← DON'T DO THIS
+npx vitest run test/<specific-file>.test.ts     # Single file (SAFE)
+npx vitest run -t "pattern"                      # By name (SAFE)
+# npx vitest run                                 # DANGEROUS — DON'T DO THIS
 ```
 
-**Ports**: Unit tests pick unique ports manually. Search `const PORT =` before adding new tests.
+**Config**: Vitest with `globals: true`, `fileParallelism: false`. Timeout 30s, teardown 60s.
 
-**Config**: Vitest with `globals: true`, `fileParallelism: false`. Unit timeout 30s.
+**Safety**: `test/setup.ts` snapshots pre-existing tmux sessions and never kills them. Only `registerTestTmuxSession()` sessions get cleaned up.
 
-**Safety**: `test/setup.ts` snapshots pre-existing tmux sessions at load time and never kills them. Only sessions registered via `registerTestTmuxSession()` get cleaned up.
+**Ports**: Pick unique ports manually. Search `const PORT =` before adding new tests.
 
-**Respawn tests**: Use MockSession from `test/respawn-test-utils.ts` to avoid spawning real Claude processes.
+**Respawn tests**: Use `MockSession` from `test/respawn-test-utils.ts`. **Route tests**: `app.inject()` in `test/routes/`. **Mobile tests**: Playwright suite in `mobile-test/` (135 device profiles).
 
-**Mobile tests**: Separate Playwright-based suite in `mobile-test/` with 135 device profiles. Run via `npx vitest run --config mobile-test/vitest.config.ts`. See `mobile-test/README.md`.
+## Screenshots
 
-## Screenshots ("sc")
-
-When the user says "check the sc", "screenshot", or "sc", they mean uploaded screenshots from their mobile device. Screenshots are saved to `~/.codeman/screenshots/` and uploaded via `/upload.html` on the Codeman web UI. To view them, use the Read tool on the image files:
-
-```bash
-ls ~/.codeman/screenshots/        # List uploaded screenshots
-# Then use Read tool on individual files — Claude Code can view images natively
-```
-
-API: `GET /api/screenshots` (list), `GET /api/screenshots/:name` (serve), `POST /api/screenshots` (upload multipart/form-data). Source: `src/web/public/upload.html`.
+Mobile screenshots in `~/.codeman/screenshots/`. API: `GET /api/screenshots`, `POST /api/screenshots`.
 
 ## Debugging
 
 ```bash
 tmux list-sessions                                 # List tmux sessions
-tmux attach-session -t <name>       # Attach (Ctrl+B D to detach)
-curl localhost:3000/api/sessions    # Check sessions
+curl localhost:3000/api/sessions | jq              # Check sessions
 curl localhost:3000/api/status | jq                # Full app state
-cat ~/.codeman/state.json | jq    # View persisted state
-curl localhost:3000/api/subagents   # List background agents
-curl localhost:3000/api/sessions/:id/run-summary | jq  # Session timeline
+curl localhost:3000/api/subagents | jq             # Background agents
+cat ~/.codeman/state.json | jq                     # Persisted state
 ```
 
-## Troubleshooting
+## Performance & Limits
 
-| Problem | Check | Fix |
-|---------|-------|-----|
-| Session won't start | `tmux list-sessions` for orphans | Kill orphaned sessions, check Claude CLI installed |
-| Port 3000 in use | `lsof -i :3000` | Kill conflicting process or use `--port` flag |
-| SSE not connecting | Browser console for errors | Check CORS, ensure server running |
-| Respawn not triggering | Session settings → Respawn enabled? | Enable respawn, check idle timeout config |
-| Terminal blank on tab switch | Network tab for `/api/sessions/:id/buffer` | Check session exists, restart server |
-| Tests failing on session limits | `tmux list-sessions \| wc -l` | Clean up: `tmux list-sessions \| grep test \| awk -F: '{print $1}' \| xargs -I{} tmux kill-session -t {}` |
-| State not persisting | `cat ~/.codeman/state.json` | Check file permissions, disk space |
+Target: 20 sessions, 50 agent windows at 60fps. Limits in `src/config/`: terminal 2MB, text 1MB, messages 1000, max agents 500, max sessions 50, max SSE clients 100. Use `LRUMap` for bounded caches, `StaleExpirationMap` for TTL cleanup. Anti-flicker pipeline: `docs/terminal-anti-flicker.md`.
 
-## Performance Constraints
+## References
 
-The app must stay fast with 20 sessions and 50 agent windows:
-- 60fps terminal (16ms batching + `requestAnimationFrame`)
-- Auto-trimming buffers (2MB terminal max)
-- Debounced state persistence (500ms)
-- SSE adaptive batching: 16ms (normal), 32ms (moderate), 50ms (rapid); immediate flush at 32KB
-- SSE backpressure handling: skip writes to backpressured clients, recover via `session:needsRefresh` on drain
-- Cached endpoints: `/api/sessions` and `/api/status` use 1s TTL caches to avoid expensive serialization
-- Frontend buffer loads: 128KB chunks via `requestAnimationFrame` to prevent UI jank
-
-## Terminal Anti-Flicker System
-
-Claude Code uses Ink (React for terminals), which redraws the screen on every state change. Codeman implements a 6-layer anti-flicker pipeline for smooth 60fps output:
-
-```
-PTY Output → Server Batching (16-50ms) → DEC 2026 Wrap → SSE → Client rAF → xterm.js
-```
-
-**Key functions:** `server.ts:batchTerminalData()`, `server.ts:flushTerminalBatches()`, `app.js:batchTerminalWrite()`, `app.js:extractSyncSegments()`
-
-**Typical latency:** 16-32ms. Optional per-session flicker filter adds ~50ms for problematic terminals.
-
-See `docs/terminal-anti-flicker.md` for full implementation details (adaptive batching, DEC 2026 markers, edge cases).
-
-## Resource Limits
-
-Limits are centralized in `src/config/buffer-limits.ts` and `src/config/map-limits.ts`.
-
-**Buffer limits** (per session):
-| Buffer | Max | Trim To |
-|--------|-----|---------|
-| Terminal | 2MB | 1.5MB |
-| Text output | 1MB | 768KB |
-| Messages | 1000 | 800 |
-
-**Map limits** (global):
-| Resource | Max |
-|----------|-----|
-| Tracked agents | 500 |
-| Concurrent sessions | 50 |
-| SSE clients total | 100 |
-| File watchers | 500 |
-
-Use `LRUMap` for bounded caches with eviction, `StaleExpirationMap` for TTL-based cleanup.
-
-## Where to Find More Information
-
-| Topic | Location |
-|-------|----------|
-| **Respawn state machine** | `docs/respawn-state-machine.md` |
-| **Ralph Loop guide** | `docs/ralph-wiggum-guide.md` |
-| **Claude Code hooks** | `docs/claude-code-hooks-reference.md` |
-| **Terminal anti-flicker** | `docs/terminal-anti-flicker.md` |
-| **API routes** | `src/web/server.ts:buildServer()` or README.md (full endpoint tables) |
-| **SSE events** | Search `broadcast(` in `server.ts` |
-| **CLI commands** | `codeman --help` |
-| **Frontend patterns** | `src/web/public/app.js` (subagent windows, notifications) |
-| **Session statuses** | `SessionStatus` type in `src/types.ts` |
-| **Error codes** | `createErrorResponse()` in `src/types.ts` |
-| **Test utilities** | `test/respawn-test-utils.ts` |
-| **Memory leak patterns** | `test/memory-leak-prevention.test.ts` |
-| **Keyboard shortcuts** | README.md or App Settings in web UI |
-| **Mobile/SSH access** | README.md (Codeman Sessions / `sc` command) |
-| **Plan orchestrator** | `src/plan-orchestrator.ts` file header |
-| **Agent prompts** | `src/prompts/` directory |
-| **Agent Teams (experimental)** | `agent-teams/README.md`, `agent-teams/design.md` |
-| **Local echo overlay** | `docs/local-echo-overlay-plan.md` |
-| **Browser testing** | `docs/browser-testing-guide.md` |
-| **Mobile testing** | `docs/mobile-testing-report.md` |
-| **Run summary design** | `docs/run-summary-plan.md` |
-| **Performance audit** | `docs/perf-audit-first-load.md` |
-| **First-load optimization** | `docs/first-load-optimization-plan.md` |
-| **Dead code audit** | `docs/cleanup-findings.md` |
-| **Mobile test suite** | `mobile-test/README.md` |
-| **Voice input** | `docs/voice-input-plan.md` |
-| **Background keystroke forwarding** | `docs/background-keystroke-forwarding-merged-plan.md` |
-| **Respawn improvements** | `docs/respawn-improvement-plan.md` |
-| **Ralph improvements** | `docs/ralph-improvement-plan.md`, `docs/ralph-phase1-implementation.md` |
-| **Performance investigation** | `docs/performance-investigation-report.md` |
-| **Plan improvements** | `docs/plan-improvement-roadmap.md` |
-| **TypeScript improvements** | `docs/typescript-improvement-suggestions.md` |
-| **OpenCode integration** | `docs/opencode-integration.md` |
+Deep-dive docs in `docs/`: `respawn-state-machine.md`, `ralph-wiggum-guide.md`, `claude-code-hooks-reference.md`, `terminal-anti-flicker.md`, `opencode-integration.md`, `qr-auth-plan.md`. Agent Teams: `agent-teams/README.md`. SSE events: `src/web/sse-events.ts` + `constants.js`.
 
 ## Scripts
 
-| Script | Purpose |
-|--------|---------|
-| `scripts/tmux-manager.sh` | Safe tmux session management (use instead of direct kill commands) |
-| `scripts/tmux-chooser.sh` | Mobile-friendly tmux session picker (`sc` alias) |
-| `scripts/monitor-respawn.sh` | Monitor respawn state machine in real-time |
-| `scripts/postinstall.js` | npm postinstall hook for setup |
-| `scripts/data-generator.sh` | Generate test data for development |
-| `scripts/test-tail-links.sh` | Test clickable file links in tail output |
-| `scripts/capture-subagent-screenshots.mjs` | Capture subagent screenshots for README (uses real Claude sessions) |
-| `scripts/capture-subagent-gif.mjs` | Capture subagent GIF animations for README |
-| `scripts/mobile-screenshot.mjs` | Capture mobile UI screenshots |
-| `scripts/ralph-wizard-start.mjs` | Automate Ralph Loop startup via headless browser |
-| `scripts/ralph-wizard-prod.mjs` | Production Ralph wizard with HTTPS support |
-| `scripts/browser-comparison.mjs` | Compare Playwright, Puppeteer, and Agent-Browser frameworks |
-| `scripts/ralph-wizard-demo.mjs` | Demo Ralph Loop wizard via visible browser |
-| `scripts/test-links-browser.mjs` | Browser test for clickable terminal file links |
-| `scripts/test-patterns.mjs` | Test file path link detection regex patterns |
-| `scripts/watch-subagents.ts` | Real-time subagent transcript watcher (list, follow by session/agent ID) |
-| `scripts/capture-readme-screenshots.mjs` | Capture screenshots for README |
-| `scripts/codeman-web.service` | systemd service file for production deployment |
+Key: `scripts/tmux-manager.sh` (safe tmux mgmt), `scripts/tunnel.sh` (tunnel start/stop/url). Production: `scripts/codeman-web.service`, `scripts/codeman-tunnel.service`.
 
 ## Memory Leak Prevention
 
-Frontend runs long (24+ hour sessions); all Maps/timers must be cleaned up.
-
-### Cleanup Patterns
-When adding new event listeners or timers:
-1. Store handler references for later removal
-2. Add cleanup to appropriate `stop()` or `cleanup*()` method
-3. For singleton watchers, store refs in class properties and remove in server `stop()`
-
-**Backend**: Clear Maps in `stop()`, null promise callbacks on error, remove watcher listeners on shutdown. Use `CleanupManager` for centralized disposal — supports timers, intervals, watchers, listeners, streams. Guard async callbacks with `if (this.cleanup.isStopped) return`.
-
-**Frontend**: Store drag/resize handlers on elements, clean up in `close*()` functions. SSE reconnect calls `handleInit()` which resets state. SSE listeners are tracked in an array and removed on reconnect to prevent accumulation.
-
-Run `npx vitest run test/memory-leak-prevention.test.ts` to verify patterns.
+24+ hour sessions: use `CleanupManager`, clear Maps in `stop()`, guard async with `if (this.cleanup.isStopped) return`. Frontend: store handler refs, clean in `close*()`. Verify: `npx vitest run test/memory-leak-prevention.test.ts`.
 
 ## Common Workflows
 
-**Investigating a bug**: Start dev server (`npx tsx src/index.ts web`), reproduce in browser, check terminal output and `~/.codeman/state.json` for clues.
+**Bug investigation**: Dev server → reproduce in browser → check terminal + `~/.codeman/state.json`.
+**API endpoint**: Types in `src/types/*.ts` → route in `src/web/routes/*-routes.ts` → SSE event if needed → handle in `app.js`.
+**Respawn changes**: Read `docs/respawn-state-machine.md` first. Use `MockSession` from `test/respawn-test-utils.ts`.
 
-**Adding a new API endpoint**: Define types in `types.ts`, add route in `server.ts:buildServer()`, broadcast SSE events if needed, handle in `app.js:handleSSEEvent()`.
+## Tunnel
 
-**Modifying respawn behavior**: Study `docs/respawn-state-machine.md` first. The state machine is in `respawn-controller.ts`. Use MockSession from `test/respawn-test-utils.ts` for testing.
-
-**Modifying mobile behavior**: Mobile singletons (`MobileDetection`, `KeyboardHandler`, `SwipeHandler`, `KeyboardAccessoryBar`) all have `init()`/`cleanup()` lifecycle. KeyboardHandler uses `visualViewport` API for iOS keyboard detection (100px threshold for address bar drift). All mobile handlers are re-initialized after SSE reconnect to prevent stale closures.
-
-**Adding a file watcher**: Use `ImageWatcher` as a template pattern — chokidar with `awaitWriteFinish`, burst throttling (max 20/10s), debouncing (200ms), and auto-ignore of `node_modules/.git/dist/`.
-
-## Tunnel Setup (Remote Access)
-
-Access Codeman from mobile/remote devices via Cloudflare quick tunnel.
-
-```
-Browser → Cloudflare Edge (HTTPS) → cloudflared → localhost:3000
-```
-
-**Prerequisites**: `cloudflared` installed (`cloudflared --version`), `CODEMAN_PASSWORD` set in environment.
-
-### Quick Start
-
-```bash
-# Via CLI
-./scripts/tunnel.sh start      # Start tunnel, prints public URL
-./scripts/tunnel.sh url        # Show current URL
-./scripts/tunnel.sh stop       # Stop tunnel
-
-# Via web UI: Settings → Tunnel → Toggle On
-```
-
-### systemd Service (Persistent)
-
-```bash
-# Install and enable
-cp scripts/codeman-tunnel.service ~/.config/systemd/user/
-systemctl --user daemon-reload
-systemctl --user enable --now codeman-tunnel
-
-# Check logs
-journalctl --user -u codeman-tunnel -f
-```
-
-### Auth Flow
-
-1. First request → browser shows Basic Auth prompt (username: `admin` or `CODEMAN_USERNAME`)
-2. On success → server issues `codeman_session` HttpOnly cookie (24h TTL, auto-extends on activity)
-3. Subsequent requests → cookie authenticates silently (no more prompts)
-4. SSE works automatically — `EventSource` sends same-origin cookies
-5. 10 failed attempts per IP → 429 rate limit (15-minute decay)
-
-### Security Requirements
-
-- **Always set `CODEMAN_PASSWORD`** before exposing via tunnel — without it, anyone with the URL has full access
-- Session cookies are `Secure` when using `--https` flag; through Cloudflare tunnel without `--https`, cookies are non-Secure but traffic is still encrypted end-to-end via Cloudflare
-- `/api/hook-event` bypasses auth (localhost-only Claude Code hooks need unauthenticated access)
+`./scripts/tunnel.sh start|stop|url`. **Always set `CODEMAN_PASSWORD`** before exposing via tunnel.

README.md

@@ -68,11 +68,23 @@ Codeman requires tmux, so Windows users need [WSL](https://learn.microsoft.com/e
 
 ## Mobile-Optimized Web UI
 
-The most responsive AI coding agent experience on any phone. Full xterm.js terminal with local echo, swipe navigation, and a touch-optimized interface designed for real remote work.
+The most responsive AI coding agent experience on any phone. Full xterm.js terminal with local echo, swipe navigation, and a touch-optimized interface designed for real remote work — not a desktop UI crammed onto a small screen.
+
+<table>
+<tr>
+<td align="center" width="33%"><img src="docs/screenshots/mobile-landing-qr.png" alt="Mobile — landing page with QR auth" width="260"></td>
+<td align="center" width="33%"><img src="docs/screenshots/mobile-session-idle.png" alt="Mobile — idle session with keyboard accessory" width="260"></td>
+<td align="center" width="33%"><img src="docs/screenshots/mobile-session-active.png" alt="Mobile — active agent session" width="260"></td>
+</tr>
+<tr>
+<td align="center"><em>Landing page with QR auth</em></td>
+<td align="center"><em>Keyboard accessory bar</em></td>
+<td align="center"><em>Agent working in real-time</em></td>
+</tr>
+</table>
 
 <table>
 <tr>
-<td rowspan="8" width="320"><img src="docs/screenshots/mobile-keyboard-open.png" alt="Mobile — keyboard open" width="300"></td>
 <th>Terminal Apps</th>
 <th>Codeman Mobile</th>
 </tr>
@@ -82,11 +94,22 @@ The most responsive AI coding agent experience on any phone. Full xterm.js termi
 <tr><td>No notifications</td><td>Push alerts for approvals and idle</td></tr>
 <tr><td>Manual reconnect</td><td>tmux persistence</td></tr>
 <tr><td>No agent visibility</td><td>Background agents in real-time</td></tr>
-<tr><td>Copy-paste slash commands</td><td>One-tap <code>/init</code></tr>
+<tr><td>Copy-paste slash commands</td><td>One-tap <code>/init</code>, <code>/clear</code>, <code>/compact</code></td></tr>
+<tr><td>Password typing on phone</td><td><b>QR code scan — instant auth</b></td></tr>
 </table>
 
-- **Swipe navigation** — left/right on the terminal to switch sessions (80px threshold, 300ms)
+### Secure QR Code Authentication
+
+Typing passwords on a phone keyboard is miserable. Codeman replaces it with **cryptographically secure single-use QR tokens** — scan the code displayed on your desktop and your phone is authenticated instantly.
+
+Each QR encodes a URL containing a 6-character short code that maps to a 256-bit secret (`crypto.randomBytes(32)`) on the server. Tokens auto-rotate every **60 seconds**, are **atomically consumed on first scan** (replays always fail), and use **hash-based `Map.get()` lookup** that leaks nothing through response timing. The short code is an opaque pointer — the real secret never appears in browser history, `Referer` headers, or Cloudflare edge logs.
+
+The security design addresses all 6 critical QR auth flaws identified in ["Demystifying the (In)Security of QR Code-based Login"](https://www.usenix.org/conference/usenixsecurity25/presentation/zhang-xin) (USENIX Security 2025, which found 47 of the top-100 websites vulnerable): single-use enforcement, short TTL, cryptographic randomness, server-side generation, real-time desktop notification on scan (QRLjacking detection), and IP + User-Agent session binding with manual revocation. Dual-layer rate limiting (per-IP + global) makes brute force infeasible across 62^6 = 56.8 billion possible codes. Full security analysis: [`docs/qr-auth-plan.md`](docs/qr-auth-plan.md)
+
+### Touch-Optimized Interface
+
 - **Keyboard accessory bar** — `/init`, `/clear`, `/compact` quick-action buttons above the virtual keyboard. Destructive commands (`/clear`, `/compact`) require a double-press to confirm — first tap arms the button, second tap executes — so you never fire one by accident on a bumpy commute
+- **Swipe navigation** — left/right on the terminal to switch sessions (80px threshold, 300ms)
 - **Smart keyboard handling** — toolbar and terminal shift up when keyboard opens (uses `visualViewport` API with 100px threshold for iOS address bar drift)
 - **Safe area support** — respects iPhone notch and home indicator via `env(safe-area-inset-*)`
 - **44px touch targets** — all buttons meet iOS Human Interface Guidelines minimum sizes
@@ -194,6 +217,127 @@ PTY Output → 16ms Server Batch → DEC 2026 Wrap → SSE → Client rAF → xt
 
 ---
 
+## Remote Access — Cloudflare Tunnel
+
+Access Codeman from your phone or any device outside your local network using a free [Cloudflare quick tunnel](https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/do-more-with-tunnels/trycloudflare/) — no port forwarding, no DNS, no static IP required.
+
+```
+Browser (phone/tablet) → Cloudflare Edge (HTTPS) → cloudflared → localhost:3000
+```
+
+**Prerequisites:** Install [`cloudflared`](https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/downloads/) and set `CODEMAN_PASSWORD` in your environment.
+
+```bash
+# Quick start
+./scripts/tunnel.sh start      # Start tunnel, prints public URL
+./scripts/tunnel.sh url        # Show current URL
+./scripts/tunnel.sh stop       # Stop tunnel
+./scripts/tunnel.sh status     # Service status + URL
+```
+
+The script auto-installs a systemd user service on first run. The tunnel URL is a randomly generated `*.trycloudflare.com` address that changes each time the tunnel restarts.
+
+<details>
+<summary><strong>Persistent tunnel (survives reboots)</strong></summary>
+
+```bash
+# Enable as a persistent service
+systemctl --user enable codeman-tunnel
+loginctl enable-linger $USER
+
+# Or via the Codeman web UI: Settings → Tunnel → Toggle On
+```
+
+</details>
+
+<details>
+<summary><strong>Authentication</strong></summary>
+
+1. First request → browser shows Basic Auth prompt (username: `admin` or `CODEMAN_USERNAME`)
+2. On success → server issues a `codeman_session` cookie (24h TTL, auto-extends on activity)
+3. Subsequent requests authenticate silently via cookie
+4. 10 failed attempts per IP → 429 rate limit (15-minute decay)
+
+**Always set `CODEMAN_PASSWORD`** before exposing via tunnel — without it, anyone with the URL has full access to your sessions.
+
+</details>
+
+### QR Code Authentication
+
+Typing a password on a phone keyboard is terrible. Codeman solves this with **ephemeral single-use QR tokens** — scan the code on your desktop, and your phone is instantly authenticated. No password prompt, no typing, no clipboard.
+
+```
+Desktop displays QR  →  Phone scans  →  GET /q/Xk9mQ3  →  Server validates
+→  Token atomically consumed (single-use)  →  Session cookie issued  →  302 to /
+→  Desktop notified: "Device authenticated via QR"  →  New QR auto-generated
+```
+
+Someone who only has the bare tunnel URL (without the QR) still hits the standard password prompt. The QR is the fast path; the password is the fallback.
+
+#### How It Works
+
+The server maintains a rotating pool of short-lived, single-use tokens. Each token consists of a 256-bit secret (`crypto.randomBytes(32)`) paired with a 6-character base62 short code used as an opaque lookup key in the URL path. The QR code encodes a URL like `https://abc-xyz.trycloudflare.com/q/Xk9mQ3` — the short code is a pointer, not the secret itself, so it never leaks through browser history, `Referer` headers, or Cloudflare edge logs.
+
+Every **60 seconds**, the server automatically rotates to a fresh token. The previous token remains valid for a **90-second grace period** to handle the race where you scan right as rotation happens — after that, it's dead. Each token is **single-use**: the moment a phone successfully scans it, the token is atomically consumed and a new one is immediately generated for the desktop display.
+
+#### Security Design
+
+The design is informed by ["Demystifying the (In)Security of QR Code-based Login"](https://www.usenix.org/conference/usenixsecurity25/presentation/zhang-xin) (USENIX Security 2025), which found 47 of the top-100 websites vulnerable to QR auth attacks due to 6 critical design flaws across 42 CVEs. Codeman addresses all six:
+
+| USENIX Flaw | Mitigation |
+|-------------|------------|
+| **Flaw-1**: Missing single-use enforcement | Token atomically consumed on first scan — replays always fail |
+| **Flaw-2**: Long-lived tokens | 60s TTL with 90s grace, auto-rotation via timer |
+| **Flaw-3**: Predictable token generation | `crypto.randomBytes(32)` — 256-bit entropy. Short codes use rejection sampling to eliminate modulo bias |
+| **Flaw-4**: Client-side token generation | Server-side only — tokens never leave the server until embedded in the QR |
+| **Flaw-5**: Missing status notification | Desktop toast: *"Device [IP] authenticated via QR (Safari). Not you? [Revoke]"* — real-time QRLjacking detection |
+| **Flaw-6**: Inadequate session binding | IP + User-Agent stored for audit. Manual session revocation via API. HttpOnly + Secure + SameSite=lax cookies |
+
+#### Timing-Safe Lookup
+
+Short codes are stored in a `Map<shortCode, TokenRecord>`. Validation uses `Map.get()` — a hash-based O(1) lookup that reveals nothing about the target string through response timing. There is no character-by-character string comparison anywhere in the hot path, eliminating timing side-channel attacks entirely.
+
+#### Rate Limiting (Dual Layer)
+
+QR auth has its own rate limiting, completely independent from password auth:
+
+- **Per-IP**: 10 failed QR attempts per IP trigger a 429 block (15-minute decay window) — separate counter from Basic Auth failures, so a fat-fingered password doesn't burn your QR budget
+- **Global**: 30 QR attempts per minute across all IPs combined — defends against distributed brute force. With 62^6 = 56.8 billion possible short codes and only ~2 valid at any time, brute force is computationally infeasible regardless
+
+#### QR Code Size Optimization
+
+The URL is kept deliberately short (`/q/` path + 6-char code = ~53-56 total characters) to target **QR Version 4** (33x33 modules) instead of Version 5 (37x37). Smaller QR codes scan faster on budget phones — modern devices read Version 4 in 100-300ms. The `/q/` prefix saves 7 bytes compared to `/qr-auth/`, which alone is the difference between QR versions.
+
+#### Desktop Experience
+
+The QR display auto-refreshes every 60 seconds via SSE with the SVG embedded directly in the event payload (~2-5KB) — no extra HTTP fetch, sub-50ms refresh. A countdown timer shows time remaining. A "Regenerate" button instantly invalidates all existing tokens and creates a fresh one (useful if you suspect the QR was photographed).
+
+When someone authenticates via QR, the desktop shows a notification toast with the device's IP and browser — if it wasn't you, one click revokes all sessions.
+
+#### Threat Coverage
+
+| Threat | Why it doesn't work |
+|--------|-------------------|
+| **QR screenshot shared** | Single-use: consumed on first scan. 60s TTL: expired before the attacker can act. Desktop notification alerts you immediately. |
+| **Replay attack** | Atomic single-use consumption + 60s TTL. Old URLs always return 401. |
+| **Cloudflare edge logs** | Short code is an opaque 6-char lookup key, not the real 256-bit token. Single-use means replaying from logs always fails. |
+| **Brute force** | 56.8 billion combinations, ~2 valid at any time, dual-layer rate limiting blocks well before statistical feasibility. |
+| **QRLjacking** | 60s rotation forces real-time relay. Desktop toast provides instant detection. Self-hosted single-user context makes phishing implausible. |
+| **Timing attack** | Hash-based Map lookup — no string comparison timing leak. |
+| **Session cookie theft** | HttpOnly + Secure + SameSite=lax + 24h TTL. Manual revocation at `POST /api/auth/revoke`. |
+
+#### How It Compares
+
+| Platform | Model | Comparison |
+|----------|-------|------------|
+| **Discord** | Long-lived token, no confirmation, [repeatedly exploited](https://owasp.org/www-community/attacks/Qrljacking) | Codeman: single-use + TTL + notification |
+| **WhatsApp Web** | Phone confirms "Link device?", ~60s rotation | Comparable rotation; WhatsApp adds explicit confirmation (acceptable tradeoff for single-user) |
+| **Signal** | Ephemeral public key, E2E encrypted channel | Stronger crypto, but [exploited by Russian state actors in 2025](https://cloud.google.com/blog/topics/threat-intelligence/russia-targeting-signal-messenger) via social engineering despite it |
+
+> Full design rationale, security analysis, and implementation details: [`docs/qr-auth-plan.md`](docs/qr-auth-plan.md)
+
+---
+
 ## SSH Alternative (`sc`)
 
 If you prefer SSH (Termius, Blink, etc.), the `sc` command is a thumb-friendly session chooser:
@@ -329,6 +473,23 @@ See [CLAUDE.md](./CLAUDE.md) for full documentation.
 
 ---
 
+## Codebase Quality
+
+The codebase went through a comprehensive 7-phase refactoring that eliminated god objects, centralized configuration, and established modular architecture:
+
+| Phase | What changed | Impact |
+|-------|-------------|--------|
+| **Performance** | Cached endpoints, SSE adaptive batching, buffer chunking | Sub-16ms terminal latency |
+| **Route extraction** | `server.ts` split into 12 domain route modules + auth middleware + port interfaces | **−60%** server.ts LOC (6,736 → 2,697) |
+| **Domain splitting** | `types.ts` → 14 domain files, `ralph-tracker` → 7 files, `respawn-controller` → 5 files, `session` → 6 files | No more god files |
+| **Frontend modules** | `app.js` → 8 extracted modules (constants, mobile, voice, notifications, keyboard, API, subagent windows) | **−24%** app.js LOC (15.2K → 11.5K) |
+| **Config consolidation** | ~70 scattered magic numbers → 9 domain-focused config files | Zero cross-file duplicates |
+| **Test infrastructure** | Shared mock library, 12 route test files, consolidated MockSession | Testable route handlers via `app.inject()` |
+
+Full details: [`docs/code-structure-findings.md`](docs/code-structure-findings.md)
+
+---
+
 ## Published Packages
 
 ### [`xterm-zerolag-input`](https://www.npmjs.com/package/xterm-zerolag-input)

docs/code-structure-findings.md

@@ -0,0 +1,977 @@
+# Code Structure & Quality Findings
+
+**Date**: 2026-02-28
+**Scope**: Full codebase analysis across 5 dimensions: frontend, backend, TypeScript, testing, and utilities/config.
+
+This document contains detailed findings for agent teams to write implementation plans and execute improvements. Each section includes severity, specific locations, and recommended fixes.
+
+---
+
+## Table of Contents
+
+1. [Critical: server.ts God Object (6,736 LOC)](#1-critical-serverts-god-object)
+2. [Critical: app.js Monolith (15,196 LOC)](#2-critical-appjs-monolith)
+3. [Critical: CleanupManager Unused Despite Existing](#3-critical-cleanupmanager-unused)
+4. [High: Duplicated Debounce/Timer Patterns](#4-high-duplicated-debouncetimer-patterns)
+5. [High: Large Domain Files Need Splitting](#5-high-large-domain-files-need-splitting)
+6. [High: types.ts God File (1,443 LOC)](#6-high-typests-god-file)
+7. [High: Zod Schemas Duplicate TypeScript Types](#7-high-zod-schemas-duplicate-typescript-types)
+8. [High: Test Coverage Gaps](#8-high-test-coverage-gaps)
+9. [High: Duplicated Test Mocks](#9-high-duplicated-test-mocks)
+10. [Medium: Hardcoded Magic Values](#10-medium-hardcoded-magic-values)
+11. [Medium: Frontend Global State Monolith](#11-medium-frontend-global-state-monolith)
+12. [Medium: Frontend Code Duplication](#12-medium-frontend-code-duplication)
+13. [Medium: Inconsistent Logging](#13-medium-inconsistent-logging)
+14. [Medium: Utils Barrel Export Gaps](#14-medium-utils-barrel-export-gaps)
+15. [Medium: Non-Null Assertion Risks](#15-medium-non-null-assertion-risks)
+16. [Low: Dead Utility Functions](#16-low-dead-utility-functions)
+17. [Low: No Dependency Injection for File I/O](#17-low-no-dependency-injection-for-file-io)
+18. [Scorecard & Prioritized Roadmap](#18-scorecard--prioritized-roadmap)
+
+---
+
+## 1. Critical: server.ts God Object
+
+**File**: `src/web/server.ts` (6,736 lines)
+**Severity**: CRITICAL
+**Impact**: Hardest file to maintain, test, and extend. Imports 38 modules.
+
+### Problem
+
+The `WebServer` class handles everything: HTTP routing (~110 routes), authentication, SSE broadcasting, terminal data batching, state persistence, session lifecycle, respawn orchestration, file serving, tunnel management, plan orchestration, and subagent coordination.
+
+**Key metrics**:
+- 40+ private properties (Maps, timers, caches)
+- 70+ methods
+- `setupRoutes()` is 2,000+ LOC of inline route handlers
+- Zero test coverage
+
+### Current Structure (Bad)
+
+```
+WebServer class (6,736 LOC)
+├── Auth session management (lines 469, 668-698)
+├── SSE client management (lines 407-408, 5843-5880)
+├── Terminal data batching (lines 414-416, 5909-5966)
+├── Task update batching (line 426, 5995-6028)
+├── State persistence batching (lines 429-430, 6028-6061)
+├── Respawn lifecycle (lines 445-451, 5425-5534)
+├── Session cleanup (lines 4769-4961)
+├── Listener setup (lines 544-643)
+└── setupRoutes() (lines 645+, 2000+ LOC)
+    ├── /api/sessions/* (30+ routes inline)
+    ├── /api/respawn/* (7 routes inline)
+    ├── /api/subagents/* (7 routes inline)
+    ├── /api/plan/* (5 routes inline)
+    ├── /api/push/* (4 routes inline)
+    └── ... 60+ more inline
+```
+
+### Recommended Structure
+
+```
+src/web/
+├── server.ts              (~500 LOC - HTTP setup, route registration only)
+├── routes/
+│   ├── session-routes.ts  (session CRUD, input, resize)
+│   ├── respawn-routes.ts  (respawn control endpoints)
+│   ├── subagent-routes.ts (background agent tracking)
+│   ├── plan-routes.ts     (plan generation & management)
+│   ├── push-routes.ts     (web push subscriptions)
+│   ├── mux-routes.ts      (tmux management)
+│   ├── case-routes.ts     (case management)
+│   ├── file-routes.ts     (file browsing/serving)
+│   └── system-routes.ts   (status, stats, config, settings)
+├── middleware/
+│   ├── auth.ts            (Basic Auth + session cookies)
+│   └── error-handler.ts   (centralized error responses)
+└── services/
+    ├── sse-manager.ts     (SSE client + broadcast)
+    ├── terminal-batcher.ts (60fps terminal batching)
+    └── session-lifecycle.ts (listener setup/teardown)
+```
+
+### Duplication in server.ts
+
+**Error response pattern** repeated 189 times:
+```typescript
+return createErrorResponse(ApiErrorCode.NOT_FOUND, 'Session not found');
+```
+
+**Fix**: Extract `findSessionOrFail()` middleware:
+```typescript
+const findSessionOrFail = (sessionId: string) => {
+  const session = this.sessions.get(sessionId);
+  if (!session) throw new NotFoundError('Session not found');
+  return session;
+};
+```
+
+**Event listener setup** copy-pasted for subagent watcher, image watcher, and team watcher (lines 544-643). Same attach/detach pattern duplicated 3 times.
+
+---
+
+## 2. Critical: app.js Monolith
+
+**File**: `src/web/public/app.js` (15,196 lines)
+**Severity**: CRITICAL
+**Impact**: Untestable, hard to navigate, tightly coupled systems.
+
+### Extractable Modules (by priority)
+
+| Module | Lines | Current Location | Impact |
+|--------|-------|------------------|--------|
+| Mobile handlers (MobileDetection, KeyboardHandler, SwipeHandler) | ~300 | lines 168-620 | High |
+| Voice input (DeepgramProvider, VoiceInput) | ~830 | lines 631-1471 | High |
+| NotificationManager | ~450 | lines 2218-2663 | High |
+| xterm-zerolag-input (inlined copy from packages/) | ~400 | lines 1756-2153 | High |
+| KeyboardAccessoryBar | ~195 | lines 1480-1680 | Medium |
+| FocusTrap | ~60 | lines 1690-1748 | Medium |
+
+### CodemanApp Class (12,000+ LOC)
+
+The main `CodemanApp` class starting at line 2665 has:
+- **60+ Maps/Sets** in the constructor (lines 2667-2805)
+- **18 Map instances** with complex cross-references (subagents, parents, teams, windows)
+- **10+ monolithic methods** exceeding 100 lines each
+
+**Largest methods**:
+| Method | Lines | Size |
+|--------|-------|------|
+| `renderAppSettings()` | 14400-14700 | ~300 LOC |
+| `selectSession()` | 6028-6250 | ~220 LOC |
+| `batchTerminalWrite()` | 7482-7700 | ~200 LOC |
+| `renderSessionTabs()` | 5814-6000 | ~180 LOC |
+| `openSubagentWindow()` | 11927-12100 | ~170 LOC |
+| `handleInit()` | 5183-5350 | ~170 LOC |
+
+### Recommended Split
+
+```
+src/web/public/
+├── app.js                 (~4000 LOC - core app, session mgmt, SSE)
+├── mobile.js              (~300 LOC - MobileDetection, KeyboardHandler, SwipeHandler)
+├── voice.js               (~830 LOC - DeepgramProvider, VoiceInput)
+├── notifications.js       (~450 LOC - NotificationManager)
+├── keyboard-accessory.js  (~200 LOC - KeyboardAccessoryBar)
+├── api-client.js          (~100 LOC - fetch wrapper with error handling)
+└── config.js              (~50 LOC - magic numbers, z-index layers)
+```
+
+---
+
+## 3. Critical: CleanupManager Unused
+
+**File**: `src/utils/cleanup-manager.ts` (320 lines)
+**Severity**: CRITICAL
+**Impact**: Memory leak risk. Well-designed utility exists but is never used. Every file manages cleanup manually.
+
+### Current State
+
+`CleanupManager` is exported from the utils barrel but has **0 instantiations** in production code. Instead, every file implements manual cleanup:
+
+**respawn-controller.ts** (worst offender):
+```typescript
+// 11 timer properties, manually cleared in stop()
+private stepTimer: NodeJS.Timeout | null = null;
+private completionConfirmTimer: NodeJS.Timeout | null = null;
+private noOutputTimer: NodeJS.Timeout | null = null;
+// ... 8 more
+
+stop() {
+  if (this.stepTimer) clearTimeout(this.stepTimer);
+  if (this.completionConfirmTimer) clearTimeout(this.completionConfirmTimer);
+  // ... 9 more clearTimeout/clearInterval calls
+}
+```
+
+**Files that should use CleanupManager**:
+| File | Timer/Listener Count | Current Cleanup |
+|------|---------------------|-----------------|
+| `respawn-controller.ts` | 11 timers + intervals | 11 manual clearTimeout/clearInterval |
+| `web/server.ts` | 6+ timers, debounce map | Manual in stop(), some may leak |
+| `state-store.ts` | 2 debounce timers | Manual clearTimeout |
+| `push-store.ts` | 1 save timer | Manual clearTimeout |
+| `subagent-watcher.ts` | debounce map + watchers | Manual clear + close |
+| `ralph-tracker.ts` | 3 debounce timers | Manual clear |
+| `bash-tool-parser.ts` | 1 debounce timer | Manual clear |
+| `image-watcher.ts` | 1 debounce map | Manual clear |
+
+### Fix
+
+Migrate all timer management to use `CleanupManager`. Example for respawn-controller.ts:
+
+```typescript
+// Before: 11 fields + 11 clearTimeout calls
+private stepTimer: NodeJS.Timeout | null = null;
+// ...
+
+// After: 1 field, auto-cleanup
+private cleanup = new CleanupManager();
+
+startStep() {
+  this.cleanup.setTimeout(() => { ... }, 5000, 'step');
+}
+
+stop() {
+  this.cleanup.dispose(); // Clears everything
+}
+```
+
+---
+
+## 4. High: Duplicated Debounce/Timer Patterns
+
+**Severity**: HIGH
+**Impact**: 8+ files implement debounce independently. Bug fixes need to be applied everywhere.
+
+### Pattern Inventory
+
+```typescript
+// Pattern 1: Manual timer ref (used in 6 files)
+private saveTimer: NodeJS.Timeout | null = null;
+debouncedSave() {
+  if (this.saveTimer) clearTimeout(this.saveTimer);
+  this.saveTimer = setTimeout(() => this.save(), 500);
+}
+
+// Pattern 2: Timer Map (used in 3 files)
+private fileDebouncers = new Map<string, NodeJS.Timeout>();
+debounce(key: string) {
+  const existing = this.fileDebouncers.get(key);
+  if (existing) clearTimeout(existing);
+  this.fileDebouncers.set(key, setTimeout(() => { ... }, 100));
+}
+
+// Pattern 3: State flag (used in 2 files)
+private isSaving = false;
+```
+
+### Locations
+
+| File | Debounce Vars | Delay (ms) |
+|------|---------------|------------|
+| `state-store.ts` | `saveTimeout`, `ralphStateSaveTimeout` | 500 |
+| `push-store.ts` | `saveTimer` | 500 |
+| `web/server.ts` | `persistDebounceTimers` (Map) | 500 |
+| `subagent-watcher.ts` | `fileDebouncers` (Map) | 100 |
+| `ralph-tracker.ts` | 3 debounce timers | 50, 30000 |
+| `bash-tool-parser.ts` | `EVENT_DEBOUNCE_MS` | 50 |
+| `image-watcher.ts` | debounce map | 200 |
+| `respawn-controller.ts` | 11 timer fields | various |
+
+### Fix
+
+Create a `Debouncer` utility:
+
+```typescript
+// src/utils/debouncer.ts
+export class Debouncer {
+  private timer: NodeJS.Timeout | null = null;
+
+  constructor(private readonly delayMs: number) {}
+
+  run(fn: () => void): void {
+    if (this.timer) clearTimeout(this.timer);
+    this.timer = setTimeout(fn, this.delayMs);
+  }
+
+  cancel(): void {
+    if (this.timer) clearTimeout(this.timer);
+    this.timer = null;
+  }
+}
+
+// Usage:
+private saveDeb = new Debouncer(500);
+this.saveDeb.run(() => this.save());
+// cleanup: this.saveDeb.cancel();
+```
+
+---
+
+## 5. High: Large Domain Files Need Splitting
+
+**Severity**: HIGH
+**Impact**: Complex state machines spanning 3,000+ lines are hard to understand and test.
+
+### ralph-tracker.ts (3,905 LOC)
+
+**5 responsibilities mixed**:
+1. Output Parsing (~900 LOC) - Line-by-line parsing, state extraction
+2. Todo Management (~700 LOC) - Parsing, dedup, expiry
+3. Plan Tracking (~800 LOC) - Enhanced plan tasks, checkpoints
+4. Circuit Breaker (~400 LOC) - State machine for stuck detection
+5. File Watching (~300 LOC) - Monitor external state files
+
+**Recommended split**:
+```
+ralph-tracker.ts          (core output parsing, ~1200 LOC)
+ralph-todo-manager.ts     (todo parsing + management, ~700 LOC)
+ralph-plan-tracker.ts     (plan tasks + checkpoints, ~800 LOC)
+ralph-circuit-breaker.ts  (circuit breaker logic, ~400 LOC)
+```
+
+### respawn-controller.ts (3,611 LOC)
+
+**6 responsibilities mixed**:
+1. State Machine (~1,000 LOC) - 6+ states, transitions
+2. Idle Detection (~800 LOC) - 5 layers + multi-signal combining
+3. AI Checkers (~600 LOC) - Idle + plan checkers integration
+4. Health Scoring (~500 LOC) - Metrics, circuit breaker, scoring
+5. Action Logging (~300 LOC) - Timeline, detection status
+6. Stuck-State Detection (~250 LOC) - Timeout tracking
+
+**Recommended split**:
+```
+respawn-controller.ts         (state machine core, ~1000 LOC)
+respawn-idle-detection.ts     (all 5 idle detection layers, ~800 LOC)
+respawn-health-scorer.ts      (metrics & health scoring, ~500 LOC)
+```
+
+### session.ts (2,418 LOC)
+
+**8 responsibilities mixed**:
+1. PTY Management (~600 LOC)
+2. Terminal I/O (~400 LOC)
+3. Token Tracking (~200 LOC)
+4. Task Tracking (~250 LOC)
+5. Ralph Integration (~200 LOC)
+6. Auto-Clear/Compact (~300 LOC)
+7. Image Watching (~100 LOC)
+8. CLI Detection (~150 LOC)
+
+**Recommended split**:
+```
+session.ts               (PTY + terminal I/O core, ~1000 LOC)
+session-tracking.ts      (token + task + Ralph, ~500 LOC)
+session-auto-ops.ts      (auto-clear/compact + image, ~300 LOC)
+```
+
+---
+
+## 6. High: types.ts God File
+
+**File**: `src/types.ts` (1,443 lines, 72 exported definitions)
+**Severity**: HIGH
+**Impact**: Every file imports from types.ts. Hard to find relevant types.
+
+### Current Contents
+
+- 46 interfaces
+- 25 types
+- 1 enum (ApiErrorCode)
+- 9 factory functions (createInitialState, etc.)
+
+### Recommended Split
+
+```
+src/types/
+├── index.ts          (barrel export - transparent migration)
+├── session.ts        (SessionState, SessionConfig, SessionMode, SessionColor)
+├── task.ts           (TaskState, TaskDefinition, TaskStatus)
+├── respawn.ts        (RespawnConfig, RespawnState, CircuitBreakerStatus)
+├── ralph.ts          (RalphLoopState, RalphTrackerState, RalphTodoItem)
+├── api.ts            (ApiResponse, ApiErrorCode, HookEventType, all route types)
+├── lifecycle.ts      (LifecycleEventType, LifecycleEntry)
+└── common.ts         (Disposable, BufferConfig, CleanupResourceType)
+```
+
+The barrel export makes this a transparent refactor - existing `import from './types'` continues to work.
+
+---
+
+## 7. High: Zod Schemas Duplicate TypeScript Types
+
+**File**: `src/web/schemas.ts` (508 lines)
+**Severity**: HIGH
+**Impact**: When a type changes, the Zod schema must be manually updated too. Source of bugs.
+
+### Problem
+
+Zod schemas manually duplicate TypeScript interfaces. **Zero `z.infer` usage found.**
+
+```typescript
+// types.ts (manual interface)
+export interface CreateSessionRequest {
+  workingDir?: string;
+  mode?: SessionMode;
+  name?: string;
+}
+
+// schemas.ts (manual Zod schema - duplicated!)
+export const CreateSessionSchema = z.object({
+  workingDir: safePathSchema.optional(),
+  mode: z.enum(['claude', 'shell', 'opencode']).optional(),
+  name: z.string().max(100).optional(),
+});
+```
+
+### Fix
+
+Use `z.infer` to derive TypeScript types from Zod schemas (single source of truth):
+
+```typescript
+// schemas.ts
+export const CreateSessionSchema = z.object({
+  workingDir: safePathSchema.optional(),
+  mode: z.enum(['claude', 'shell', 'opencode']).optional(),
+  name: z.string().max(100).optional(),
+});
+
+// types.ts (auto-derived)
+export type CreateSessionRequest = z.infer<typeof CreateSessionSchema>;
+```
+
+**Affected schemas** (~10):
+- CreateSessionSchema
+- RunPromptSchema
+- ResizeSchema
+- CreateCaseSchema
+- QuickStartSchema
+- HookEventSchema
+- RespawnConfigSchema
+- ConfigUpdateSchema
+- SettingsUpdateSchema
+
+---
+
+## 8. High: Test Coverage Gaps
+
+**Severity**: HIGH
+**Impact**: Critical code paths untested. Regressions go unnoticed.
+
+### Untested Source Files
+
+| File | Lines | Risk |
+|------|-------|------|
+| `src/web/server.ts` | 6,736 | CRITICAL - Core REST API, 280+ routes |
+| `src/plan-orchestrator.ts` | ~500 | HIGH - Multi-agent plan generation |
+| `src/tunnel-manager.ts` | ~200 | MEDIUM - Cloudflare tunnel |
+| `src/session-lifecycle-log.ts` | ~150 | MEDIUM - JSONL audit log |
+| `src/ai-plan-checker.ts` | ~300 | MEDIUM - Plan completion detection |
+| `src/templates/claude-md.ts` | ~200 | LOW - CLAUDE.md generation |
+| `src/utils/claude-cli-resolver.ts` | ~100 | LOW - CLI path resolution |
+| `src/utils/opencode-cli-resolver.ts` | ~100 | LOW - OpenCode CLI support |
+| `src/utils/regex-patterns.ts` | ~100 | LOW - Used everywhere! |
+| `src/utils/token-validation.ts` | ~50 | LOW - Token counting |
+
+### Test Quality Issues
+
+**10 "not.toThrow()" tests without behavior verification**:
+```typescript
+// BAD: Only checks it doesn't crash
+expect(() => tracker.processMessage(null)).not.toThrow();
+
+// GOOD: Also verify defensive behavior
+expect(() => tracker.processMessage(null)).not.toThrow();
+expect(tracker.getAllTasks().size).toBe(0);
+```
+
+Locations:
+- `task-tracker.test.ts` - 5 instances
+- `image-watcher.test.ts` - 1 instance
+- `task-queue.test.ts` - 1 instance
+- Others scattered
+
+---
+
+## 9. High: Duplicated Test Mocks
+
+**Severity**: HIGH
+**Impact**: Mock changes need updating in 4 places. Inconsistent mock behavior.
+
+### MockSession Defined 4 Times
+
+| File | Usage |
+|------|-------|
+| `test/respawn-controller.test.ts` | Full mock with event emitter |
+| `test/session-manager.test.ts` | Simpler mock |
+| `test/respawn-team-awareness.test.ts` | Copy of respawn-controller mock |
+| `test/respawn-test-utils.ts` | **Comprehensive mock - UNUSED!** |
+
+### MockStateStore Defined 2 Times
+
+| File | Usage |
+|------|-------|
+| `test/session-manager.test.ts` | Basic mock |
+| `test/ralph-loop.test.ts` | Separate implementation |
+
+### Unused Test Utilities
+
+`test/respawn-test-utils.ts` exports these utilities that **no test file imports**:
+- `createTimeController()` - Abstraction over vitest fake timers
+- `MockAiIdleChecker` - Fully mocked AI idle checker
+- `MockAiPlanChecker` - Fully mocked plan checker
+- Factory functions for pre-configured controllers
+
+### Fix
+
+Create `test/mocks/` directory:
+```
+test/
+├── mocks/
+│   ├── mock-session.ts      (single MockSession, used everywhere)
+│   ├── mock-state-store.ts  (single MockStateStore)
+│   └── index.ts             (barrel export)
+├── utils/
+│   └── time-controller.ts   (from respawn-test-utils.ts)
+└── ... test files
+```
+
+---
+
+## 10. Medium: Hardcoded Magic Values
+
+**Severity**: MEDIUM
+**Impact**: Hard to tune, inconsistent when same value appears in multiple places.
+
+### Already Centralized (Good)
+
+- `src/config/buffer-limits.ts` - All buffer sizes
+- `src/config/map-limits.ts` - All collection limits
+
+### NOT Centralized (40+ values scattered)
+
+**In server.ts** (lines 145-194):
+```typescript
+const TASK_UPDATE_BATCH_INTERVAL = 100;
+const STATE_UPDATE_DEBOUNCE_INTERVAL = 500;
+const SESSIONS_LIST_CACHE_TTL = 1000;
+const SCHEDULED_CLEANUP_INTERVAL = 5 * 60 * 1000;
+const SSE_HEALTH_CHECK_INTERVAL = 30 * 1000;
+const MAX_TERMINAL_COLS = 500;
+const MAX_TERMINAL_ROWS = 200;
+const AUTH_SESSION_TTL_MS = 24 * 60 * 60 * 1000;
+const MAX_AUTH_SESSIONS = 100;
+const AUTH_FAILURE_WINDOW_MS = 15 * 60 * 1000;
+const STATS_COLLECTION_INTERVAL_MS = 2000;
+const MAX_INPUT_LENGTH = 64 * 1024;
+```
+
+**In hooks-config.ts**: `timeout: 10000` hardcoded 6 times.
+
+**In respawn-controller.ts** (lines 538-565): 10 timing constants.
+
+**In utils**: `EXEC_TIMEOUT_MS = 5000` duplicated in both `claude-cli-resolver.ts` and `opencode-cli-resolver.ts`.
+
+**In app.js**:
+```javascript
+// line 27: 600000 - stuck detection threshold
+// line 24: 5000 - default scrollback
+// lines 34-35: 128*1024, 256*1024 - chunk sizes
+// lines 152-155: 150, 100 - keyboard detection thresholds
+// lines 573-575: 80, 300, 100 - swipe detection params
+```
+
+### Fix
+
+Create additional config files:
+```
+src/config/
+├── buffer-limits.ts     (existing)
+├── map-limits.ts        (existing)
+├── server-config.ts     (NEW - web server intervals, auth, caching)
+├── timing-config.ts     (NEW - debounce delays, check intervals)
+└── terminal-config.ts   (NEW - max cols/rows, batch intervals)
+```
+
+---
+
+## 11. Medium: Frontend Global State Monolith
+
+**Severity**: MEDIUM
+**Impact**: All state in single CodemanApp class. Tight coupling between unrelated systems.
+
+### 60+ State Variables in CodemanApp Constructor (lines 2667-2805)
+
+```javascript
+this.sessions = new Map();             // Session data
+this.subagents = new Map();            // Agent tracking
+this.subagentActivity = new Map();     // Tool call tracking
+this.subagentToolResults = new Map();  // Result caching
+this.subagentParentMap = new Map();    // Agent-to-session mapping
+this.teams = new Map();                // Team tracking
+this.teamTasks = new Map();           // Team task state
+this.planSubagents = new Map();        // Plan agent tracking
+this.pendingWrites = [];               // Terminal write queue
+this.terminalBufferCache = new Map();  // Buffer caching (unbounded!)
+this.projectInsights = new Map();      // Bash tool insights
+// ... 40+ more
+```
+
+### Problems
+
+1. **18 Map instances** with complex cross-references (no garbage collection strategy)
+2. **No domain separation**: Session, subagent, notification, UI, and network state mixed
+3. **Implicit dependencies**: `selectSession()` requires 5+ Maps to be in consistent state
+4. **`terminalBufferCache`** has no max size - can grow unbounded with many sessions
+
+### Recommended Domain Split
+
+```javascript
+// Instead of 60+ flat properties:
+class SessionState {
+  sessions = new Map();
+  sessionOrder = [];
+  terminalBuffers = new Map();
+  tabAlerts = new Map();
+}
+
+class SubagentState {
+  subagents = new Map();
+  activity = new Map();
+  parentMap = new Map();
+  windows = new Map();
+  minimized = new Map();
+}
+
+class TeamState {
+  teams = new Map();
+  tasks = new Map();
+  teammates = new Map();
+}
+
+class UIState {
+  activeSessionId = null;
+  draggedTabId = null;
+  isLoadingBuffer = false;
+}
+```
+
+---
+
+## 12. Medium: Frontend Code Duplication
+
+**Severity**: MEDIUM
+**Impact**: Repeated patterns increase maintenance burden and inconsistency risk.
+
+### Duplicated Patterns
+
+**API fetch calls** (~50 instances):
+```javascript
+// Repeated everywhere:
+fetch(`/api/sessions/${sessionId}/...`, {
+  method: 'POST',
+  headers: { 'Content-Type': 'application/json' },
+  body: JSON.stringify({...})
+}).catch(() => {})
+```
+**Fix**: Extract `ApiClient` class.
+
+**`innerHTML` usage** (104 instances):
+- Mix of template strings, createElement chains, and direct innerHTML
+- Some with manual XSS escaping (`text.replace(/</g, '&lt;')`), some without
+- No consistent DOM creation pattern
+
+**`typeof app !== 'undefined'` checks** (20+ instances):
+- Lines 458, 467, 481, 614, 617, 1549, etc.
+- **Fix**: Ensure `app` is always defined as global singleton.
+
+**Element visibility toggling** (212+ occurrences):
+```javascript
+element.classList.add('active')
+element.classList.remove('active')
+```
+**Fix**: Create `toggleClass(el, className, condition)` utility.
+
+### Event Listener Issues
+
+- **152 `addEventListener` calls** with fragile cleanup
+- **Mix of inline (`onclick="app.method()"`) and addEventListener** - hard to track
+- **Element cache (`_elemCache`) never invalidated** if DOM elements are recreated (line 2808)
+- **Tab drag-and-drop listeners** may not clean up if user switches tabs mid-drag
+
+---
+
+## 13. Medium: Inconsistent Logging
+
+**Severity**: MEDIUM
+**Impact**: Hard to debug in production. Can't filter by severity or component.
+
+### Current State
+
+- **345 console calls** across source files
+- **No structured logging** - all `console.log/error` directly
+- **No log levels** (DEBUG, INFO, WARN, ERROR)
+
+### Inconsistent Prefixes
+
+```typescript
+// Some files use brackets:
+console.log('[Session] Starting interactive...');
+console.log('[RalphLoop] Task assigned...');
+console.log('[TunnelManager] Tunnel started');
+
+// Others use no prefix:
+console.error('Failed to spawn PTY:', err);
+console.log('Server listening on port', port);
+```
+
+### Positive: CleanupManager Has Debug Mode
+
+`src/utils/cleanup-manager.ts` has a `debugMode` flag for conditional debug logging - good pattern not replicated elsewhere.
+
+### Fix
+
+Either:
+1. Enforce consistent `[ComponentName]` prefixes via lint rule
+2. Create lightweight logger abstraction (not a heavy framework)
+
+---
+
+## 14. Medium: Utils Barrel Export Gaps
+
+**File**: `src/utils/index.ts`
+**Severity**: MEDIUM
+**Impact**: Forces deep imports, unclear public API.
+
+### Missing Exports
+
+These functions are defined but NOT exported from the barrel:
+- `createAnsiPatternFull()` and `createAnsiPatternSimple()` (factory functions from `regex-patterns.ts`)
+- `SAFE_PATH_PATTERN` (from `regex-patterns.ts`)
+- `validateTokenCounts()` and `validateTokensAndCost()` (from `token-validation.ts`)
+- `isSimilar()`, `isSimilarByDistance()`, `levenshteinDistance()`, `normalizePhrase()` (from `string-similarity.ts` - though some are dead code, see finding #16)
+
+### Deep Import Anti-Pattern (16 instances)
+
+Some files bypass the barrel unnecessarily:
+```typescript
+// Could use barrel:
+import { BufferAccumulator } from './utils/buffer-accumulator.js';
+import { LRUMap } from './utils/lru-map.js';
+
+// Must deep import (not in barrel):
+import { SAFE_PATH_PATTERN } from './utils/regex-patterns.js';
+```
+
+### Fix
+
+Add missing exports to `src/utils/index.ts` and update import sites.
+
+---
+
+## 15. Medium: Non-Null Assertion Risks
+
+**Severity**: MEDIUM
+**Impact**: Runtime crashes if assumptions violated. 37 instances found.
+
+### Distribution
+
+| File | Count | Risk Level |
+|------|-------|------------|
+| `src/web/server.ts` | 10 | Low (auth flow verified) |
+| `src/session.ts` | 6 | **High** (mux/terminal refs) |
+| `src/respawn-controller.ts` | 4 | Low (config validated) |
+| `src/lru-map.ts` | 3 | Low (checked lookups) |
+| `src/subagent-watcher.ts` | 2 | Low (pending tool calls) |
+| Others | 12 | Low |
+
+### High-Risk Examples (session.ts)
+
+```typescript
+// Line 915 - _mux could be null if startInteractive called during cleanup
+`[Session] Starting interactive (with ${this._mux!.backend})`
+
+// Line 954 - _muxSession could be null in race condition
+this._muxSession!.muxName
+```
+
+### Fix
+
+Add null guards before assertions, or document invariants:
+```typescript
+// Before:
+this._mux!.backend
+
+// After:
+if (!this._mux) throw new Error('Invariant: _mux must be initialized before startInteractive');
+this._mux.backend
+```
+
+### Positive Notes
+
+- **0 instances of `as any`**
+- **0 instances of `@ts-ignore` or `@ts-expect-error`**
+- TypeScript overall score: 8.5/10
+
+---
+
+## 16. Low: Dead Utility Functions
+
+**File**: `src/utils/string-similarity.ts`
+**Severity**: LOW
+**Impact**: Code clutter, confusion about what's actually used.
+
+### Unused Functions
+
+These are defined and exported but **never imported anywhere**:
+- `isSimilar(a, b, threshold)` - similarity check with threshold
+- `isSimilarByDistance(a, b, maxDistance)` - Levenshtein-based check
+- `levenshteinDistance(a, b)` - raw edit distance
+- `normalizePhrase(phrase)` - phrase normalization
+
+### Actually Used
+
+Only these are imported from the barrel:
+- `stringSimilarity()` - used in ralph-tracker.ts
+- `fuzzyPhraseMatch()` - used in ralph-tracker.ts
+- `todoContentHash()` - used in ralph-tracker.ts
+
+### Fix
+
+Delete unused functions or mark as `@internal` if kept for future use.
+
+---
+
+## 17. Low: No Dependency Injection for File I/O
+
+**Severity**: LOW (practical impact limited at current scale)
+**Impact**: Can't mock filesystem for unit tests. 68+ hard-coded filesystem calls.
+
+### Examples
+
+```typescript
+// state-store.ts - directly imports and uses fs
+import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'node:fs';
+
+// push-store.ts - hard-coded paths
+const KEYS_FILE = join(DATA_DIR, 'push-keys.json');
+const SUBS_FILE = join(DATA_DIR, 'push-subscriptions.json');
+
+// ai-checker-base.ts - direct execSync
+execSync(`tmux kill-session -t "${this.checkMuxName}"`, { timeout: 3000 });
+```
+
+### Why This Is Lower Priority
+
+- The codebase uses integration tests (spawning real processes/tmux sessions) rather than unit tests
+- Most filesystem operations are in infrastructure code, not business logic
+- Adding DI would be a large refactor with limited near-term benefit
+
+---
+
+## 18. Scorecard & Prioritized Roadmap
+
+### Overall Scores (Post-Implementation)
+
+| Category | Before | After | Notes |
+|----------|--------|-------|-------|
+| TypeScript Safety | 8.5/10 | 9/10 | 0 `any`, 0 `@ts-ignore`, Zod `z.infer` eliminates type drift |
+| Error Handling | 8/10 | 8/10 | Unchanged — already strong |
+| Async/Promise Safety | 9.5/10 | 9.5/10 | Unchanged — already strong |
+| Resource Cleanup | 7/10 | 8/10 | CleanupManager adopted in server.ts, subagent-watcher, bash-tool-parser; Debouncer in 6 files. **Gaps**: respawn-controller (10+ manual timers) and ralph-tracker (2 manual timers) not migrated |
+| Module Organization | 5/10 | 8/10 | Routes extracted (12 modules), types split (14 domain files), domain files split (ralph: 7, respawn: 5, session: 6) |
+| Test Coverage | 6/10 | 7.5/10 | Shared mock infrastructure, 12 route test files, MockSession/MockStateStore consolidated |
+| Config Centralization | 6/10 | 9/10 | 9 config files, ~65 constants centralized, 0 cross-file duplicates |
+| Frontend Architecture | 4/10 | 7/10 | 8 extracted modules (3,453 LOC), app.js reduced 24% (15.2K → 11.5K), xterm-zerolag-input vendor build |
+| Code Duplication | 5/10 | 8/10 | Debouncer utility, shared test mocks, barrel exports, config consolidation |
+
+### Implementation Phases
+
+**Phase 1 - Quick Wins (1-2 days)** ✅ COMPLETE
+1. ✅ Export missing functions from utils barrel (~30 min) — `createAnsiPatternFull`, `createAnsiPatternSimple`, `SAFE_PATH_PATTERN`, `validateTokenCounts`, `validateTokensAndCost` all now exported from `src/utils/index.ts`
+2. ✅ Delete dead utility functions (~15 min) — `isSimilar()` removed from `string-similarity.ts`; `levenshteinDistance()`, `isSimilarByDistance()`, `normalizePhrase()` made private (used internally by `fuzzyPhraseMatch`/`stringSimilarity`)
+3. ✅ Consolidate duplicated `EXEC_TIMEOUT_MS` constant (~15 min) — Created `src/config/exec-timeout.ts` as single source of truth; `claude-cli-resolver.ts`, `opencode-cli-resolver.ts`, and `tmux-manager.ts` all import from it
+4. ✅ Add `z.infer` to Zod schemas (~2 hours) — `src/web/schemas.ts` now has 36 `z.infer` type exports (lines 512-547) covering all schemas
+5. ✅ Fix 10 weak "not.toThrow()" tests (~1 hour) — All `not.toThrow()` calls now have behavior assertions: `task-tracker.test.ts` (6 instances all followed by state checks), `image-watcher.test.ts` (1 instance followed by length check), `session-manager.test.ts` (1 instance followed by count check)
+
+**Phase 2 - CleanupManager & Debounce (2-3 days)** ✅ COMPLETE
+1. ✅ Create `Debouncer` utility class (~1 hour) — Created `src/utils/debouncer.ts` with `Debouncer` and `KeyedDebouncer` classes; exported from `src/utils/index.ts`
+2. ✅ Migrate all 8 files from manual debounce to Debouncer — `state-store.ts` (2 Debouncers), `push-store.ts` (1 Debouncer), `bash-tool-parser.ts` (1 Debouncer), `image-watcher.ts` (1 KeyedDebouncer), `subagent-watcher.ts` (2 KeyedDebouncers), `server.ts` (1 KeyedDebouncer for persist timers), `ralph-tracker.ts` (2 Debouncers replacing 4 manual fields: `_todoUpdateTimer`, `_loopUpdateTimer`, `_todoUpdatePending`, `_loopUpdatePending`)
+3. ✅ Migrate respawn-controller to CleanupManager — 10 manual timer fields replaced with single `CleanupManager` instance + `timerIds` Map. `startTrackedTimer()`/`cancelTrackedTimer()` preserved as wrappers for UI countdown display and timer events. `clearTimers()` uses dispose-and-recreate pattern for state transitions.
+4. ✅ Migrate server.ts timer cleanup to CleanupManager (~2 hours) — `private cleanup = new CleanupManager()` present; terminal batch timers and pending respawn starts left as manual Maps (complex lifecycle)
+5. ✅ Migrate remaining files — `bash-tool-parser.ts` (CleanupManager ✅), `subagent-watcher.ts` (CleanupManager ✅), `ralph-tracker.ts` (Debouncer ✅)
+
+**Phase 3 - server.ts Route Extraction (3-4 days)** ✅ COMPLETE
+1. ✅ Created `src/web/routes/` with 12 domain route modules + index barrel (4,090 LOC total): session (909), system (768), ralph (533), plan (459), respawn (315), case, file, hook-event, mux, push, scheduled, team
+2. ✅ Created `src/web/middleware/auth.ts` (193 LOC) — Basic Auth, session cookies, rate limiting, security headers, CORS
+3. ✅ Created `src/web/ports/` with 7 typed port interfaces (142 LOC) — SessionPort, EventPort, RespawnPort, ConfigPort, InfraPort, AuthPort; routes declare dependencies via intersection types
+4. ✅ Created `src/web/route-helpers.ts` (154 LOC) — `findSessionOrFail()`, `formatUptime()`, `sanitizeHookData()`, `autoConfigureRalph()`
+5. ✅ Reduced `server.ts` from 6,736 → 2,697 LOC (60% reduction). Remaining LOC is justified infrastructure: session lifecycle, SSE broadcast engine, terminal batching, respawn integration, resource cleanup
+
+**Phase 4 - Domain File Splitting (2-3 days)** ✅ COMPLETE
+1. ✅ Split `types.ts` into `src/types/` directory — 14 domain files (1,469 LOC total): common, session, task, app-state, respawn, ralph, api, lifecycle, run-summary, tools, teams, push, plan + index barrel. Original `types.ts` is now a 1-line re-export
+2. ✅ Split `ralph-tracker.ts` into 7 files (exceeded plan of 4) — ralph-tracker (2,391), ralph-plan-tracker (477), ralph-status-parser (552), ralph-fix-plan-watcher (366), ralph-stall-detector (166), ralph-config (153), ralph-loop (522)
+3. ✅ Split `respawn-controller.ts` into 5 files (exceeded plan of 3) — respawn-controller (3,228), respawn-health (229), respawn-metrics (229), respawn-patterns (131), respawn-adaptive-timing (134)
+4. ✅ Split `session.ts` into 6 files (exceeded plan of 3) — session (2,168), session-manager (298), session-auto-ops (284), session-cli-builder (132), session-task-cache (101), session-lifecycle-log (114)
+
+**Phase 5 - Frontend Modularization (3-4 days)** ✅ COMPLETE
+1. ✅ Extracted `constants.js` (238 LOC) — shared constants, timing values, Z-index layers, `escapeHtml()`, `extractSyncSegments()`
+2. ✅ Extracted `mobile-handlers.js` (449 LOC) — `MobileDetection`, `KeyboardHandler`, `SwipeHandler`
+3. ✅ Extracted `voice-input.js` (853 LOC) — `DeepgramProvider`, `VoiceInput`
+4. ✅ Extracted `notification-manager.js` (445 LOC) — `NotificationManager` class (5-layer system)
+5. ✅ Extracted `keyboard-accessory.js` (279 LOC) — `KeyboardAccessoryBar`, `FocusTrap`
+6. ✅ Extracted `api-client.js` (70 LOC) — `_api()`, `_apiJson()`, `_apiPost()`, `_apiPut()`
+7. ✅ Extracted `subagent-windows.js` (1,119 LOC) — 13 subagent window methods
+8. ✅ Removed inlined xterm-zerolag-input copy → built to `vendor/xterm-zerolag-input.js` from `packages/xterm-zerolag-input/`
+9. ✅ Reduced `app.js` from ~15,200 → 11,473 LOC (24% reduction). All scripts loaded in correct dependency order in `index.html`
+
+**Phase 6 - Config Consolidation (1 day)** ✅ COMPLETE
+1. ✅ Created 6 new domain-focused config files (better than plan's 2 generic files): `server-timing.ts` (13 constants), `auth-config.ts` (5 constants), `tunnel-config.ts` (8 constants), `terminal-limits.ts` (4 constants), `ai-defaults.ts` (3 constants), `team-config.ts` (3 constants)
+2. ✅ Total: 9 config files in `src/config/`, ~65 constants centralized
+3. ✅ Eliminated all cross-file duplicates: `STATS_COLLECTION_INTERVAL_MS` (was in 2 files), `timeout: 10000` (was 6× inline in hooks-config.ts → `HOOK_TIMEOUT_MS`), AI model string (was in 5 files → `AI_CHECK_MODEL`), `MAX_TRACKED_AGENTS` (was shadowed in subagent-watcher.ts)
+4. ✅ CLAUDE.md updated with config files table, import conventions, resource limits references
+
+**Phase 7 - Test Infrastructure (2-3 days)** ✅ COMPLETE
+1. ✅ Created `test/mocks/` directory with 5 files (541 LOC): `mock-session.ts` (312), `mock-state-store.ts` (60), `mock-route-context.ts` (121), `test-helpers.ts` (37), `index.ts` (11 — barrel export)
+2. ✅ Consolidated MockSession into single shared definition — no duplicate class definitions remain (2 `vi.mock()`-based copies intentionally left in session-manager.test.ts and ralph-loop.test.ts)
+3. ✅ `respawn-test-utils.ts` converted to backward-compatibility shim — re-exports from `test/mocks/`, retains respawn-specific utilities (MockAiIdleChecker, TimeController, etc.)
+4. ✅ Created initial 3 route test files with 58 total tests: `session-routes.test.ts` (34 tests), `respawn-routes.test.ts` (13 tests), `system-routes.test.ts` (11 tests). Route test harness uses `app.inject()` — no real ports needed
+5. ✅ All 12 route modules now have dedicated test files in `test/routes/`: session, respawn, system, ralph, plan, push, team, mux, file, scheduled, hook-event, case
+
+---
+
+## Appendix: File Size Inventory (Post-Implementation)
+
+### Before vs After
+
+| File | Before | After | Change |
+|------|--------|-------|--------|
+| `src/web/server.ts` | 6,736 | 2,697 | **−60%** (routes, auth, ports extracted) |
+| `src/web/public/app.js` | 15,196 | 11,473 | **−24%** (8 modules extracted) |
+| `src/ralph-tracker.ts` | 3,905 | 2,391 | **−39%** (6 companion files extracted) |
+| `src/respawn-controller.ts` | 3,611 | 3,228 | **−11%** (4 companion files extracted) |
+| `src/session.ts` | 2,418 | 2,168 | **−10%** (5 companion files extracted) |
+| `src/types.ts` | 1,443 | 1 | **−99%** (14 domain files in `src/types/`) |
+
+### New Infrastructure Created
+
+| Directory | Files | Total LOC | Purpose |
+|-----------|-------|-----------|---------|
+| `src/web/routes/` | 13 | 4,090 | Domain route modules |
+| `src/web/ports/` | 7 | 142 | Port interfaces for DI |
+| `src/web/middleware/` | 1 | 193 | Auth middleware |
+| `src/types/` | 14 | 1,469 | Domain type files |
+| `src/config/` | 9 | ~450 | Centralized config |
+| `test/mocks/` | 5 | 541 | Shared test mocks |
+| `test/routes/` | 4 | ~500 | Route handler tests |
+
+### Extracted Frontend Modules
+
+| Module | Lines | Purpose |
+|--------|-------|---------|
+| `subagent-windows.js` | 1,119 | Subagent window management |
+| `voice-input.js` | 853 | DeepgramProvider, VoiceInput |
+| `mobile-handlers.js` | 449 | MobileDetection, KeyboardHandler, SwipeHandler |
+| `notification-manager.js` | 445 | 5-layer notification system |
+| `keyboard-accessory.js` | 279 | KeyboardAccessoryBar, FocusTrap |
+| `constants.js` | 238 | Shared constants, timing, Z-index |
+| `api-client.js` | 70 | API fetch wrapper |
+
+### What's Working Well
+
+These patterns should be **preserved, not refactored**:
+- Clean one-way dependency graph (no circular deps)
+- EventEmitter-based decoupling between domain models
+- Proper `import type` usage (19 files, consistent)
+- Utility type adoption (101 instances of Record, Partial, Omit, etc.)
+- `assertNever()` for exhaustive switch checking
+- `StaleExpirationMap` and `LRUMap` for bounded collections
+- State persistence circuit breaker pattern
+- TypeScript strict mode with all safety flags enabled
+- `CleanupManager` for centralized timer/watcher disposal
+- `Debouncer`/`KeyedDebouncer` for consistent debounce patterns
+- Port interfaces for route module dependency injection
+- `Object.assign(CodemanApp.prototype, ...)` for frontend module composition

docs/performance-optimization-plan.md

@@ -0,0 +1,168 @@
+# Performance & Responsiveness Optimization Plan
+
+**Date**: 2026-02-28
+**Status**: Phases 1–4 Complete. Phase 5 optional/deferred.
+
+---
+
+## Executive Summary
+
+Three independent research passes analyzed the Codeman codebase for performance bottlenecks across frontend rendering, backend hot paths, and system-level resource usage. The codebase already has strong foundational optimizations (per-session adaptive batching, rAF terminal writes, DEC 2026 sync markers, backpressure handling). This plan targets the remaining high-impact opportunities.
+
+**Key finding**: The biggest wins come from **skipping unnecessary work** — serializing unchanged state, processing output nobody is watching, and reducing broadcast volume.
+
+---
+
+## Phase 1: Quick Wins — COMPLETE
+
+All Phase 1 items were found to already exist in the codebase during verification:
+
+| # | Item | Status | Evidence |
+|---|------|--------|----------|
+| 1.1 | Skip terminal writes for hidden tabs | Done | SSE handler filters by `activeSessionId` (app.js:4076) |
+| 1.2 | mobile.css media query | Done | `media="(max-width: 1023px)"` on link tag (index.html:13) |
+| 1.3 | Deduplicate init API calls | Done | `_initGeneration` dedup + 3s fallback timer (app.js:2901-2904) |
+| 1.4 | Remove cache-busting timestamps | Done | No `?_t=` patterns found anywhere |
+| 1.5 | JS/CSS minification + compression | Done | esbuild minify + gzip + brotli in build.mjs (lines 42-51) |
+
+---
+
+## Phase 2: Frontend Responsiveness — COMPLETE
+
+### 2.1 Batch `getBoundingClientRect()` in connection lines — DONE
+- **Files**: `src/web/public/app.js` (`_updateConnectionLinesImmediate()`)
+- **Change**: Refactored to batch all layout reads into Phase 1 (collect all rects into a Map), then perform all SVG writes in Phase 2 using cached values. Classic read-then-write pattern prevents interleaved forced reflows.
+
+### 2.2 Clean up ResizeObservers — Already implemented
+- `forceCloseSubagentWindow()` disconnects observers (app.js:12618-12620)
+- `cleanupAllFloatingWindows()` disconnects all on reconnect (app.js:12649-12653)
+- Observer refs stored on `windowData.resizeObserver` (app.js:12492)
+
+### 2.3 Drag handler cleanup — Already implemented
+- `makeWindowDraggable()` returns listener refs, stored in `windowData.dragListeners`
+- `forceCloseSubagentWindow()` removes all document-level drag listeners (app.js:12622-12630)
+- Panel drags add listeners on mousedown, remove on mouseup (app.js:10253-10284)
+
+### 2.4 Mobile window position cache — Skipped
+- O(n) loop over max ~20 windows; complexity of cached counter not justified
+
+### 2.5 Lazy modal DOM — Skipped
+- Large effort, marginal benefit for a vanilla JS app with fast DOM construction
+
+---
+
+## Phase 3: Backend Hot Paths — COMPLETE
+
+### 3.1 State diff broadcasts — ALREADY OPTIMIZED
+- `broadcastSessionStateDebounced()` already batches at 500ms intervals
+- `toLightDetailedState()` excludes heavy buffers (textOutput, terminalBuffer)
+- Per-session serialization is <1ms; with debouncing, only 1-3 sessions serialize per flush
+- JSON.stringify happens once per broadcast (not per client) — serialization cost is negligible
+- Full state diffs would add significant frontend complexity for marginal gain
+
+### 3.2 Improve session list cache hit rate — DONE
+- **Files**: `src/web/server.ts` (`broadcast()` method)
+- **Change**: Cache now only invalidated on truly structural events (`session:created`, `session:deleted`, `session:updated`) instead of on every `session:*` and `respawn:*` event. High-frequency events like `session:working`, `session:idle`, `session:completion`, `respawn:stateChanged` no longer defeat the 1s TTL cache.
+- **Impact**: Cache hit ratio from ~0% to ~80%+ during active sessions. The debounced `session:updated` still refreshes the cache within 500ms of any state change.
+
+### 3.3 Skip PTY processing — ALREADY OPTIMIZED
+- `_processExpensiveParsers()` is already throttled to every 150ms (not per-chunk)
+- Lazy ANSI stripping via `getCleanData()` closure — only computed when a consumer needs it
+- Quick pre-checks skip parsers when content is irrelevant (e.g., token parser only runs if data contains "token")
+- OpenCode sessions skip all Claude-specific parsers entirely
+- Further optimization would require visibility-aware processing, adding complexity for marginal gain
+
+### 3.4 Batch subagent liveness checks — Deferred
+- `/proc/{pid}` stat calls are ~0.1ms each; even with 500 agents, total is 50ms every 10s
+- Current approach is simple and reliable; batching adds race condition risk
+- Consider only if profiling shows this as a bottleneck
+
+### 3.5 Deduplicate detection update emissions — DONE
+- **Files**: `src/respawn-controller.ts` (`startDetectionUpdates()`)
+- **Change**: Detection status now only emitted when key fields (confidenceLevel, statusText, controller state) actually change. Previously emitted every 2s regardless, broadcasting identical status to all SSE clients.
+- **Impact**: For stable/idle sessions, eliminates ~100% of redundant detection broadcasts. For active sessions, reduces broadcasts to only meaningful state transitions.
+
+---
+
+## Phase 4: System-Level Improvements — COMPLETE
+
+### 4.1 Incremental state persistence — DONE
+- **Files**: `src/state-store.ts` (`assembleStateJson()`, `setSession()`)
+- **Change**: Added `dirtySessions` Set and `cachedSessionJsons` Map. On persist, only dirty sessions are re-serialized; clean sessions reuse cached JSON fragments. `setSession()` marks sessions dirty; `assembleStateJson()` rebuilds only changed fragments.
+- **Impact**: Serialization cost reduced from O(all sessions) to O(dirty sessions). Typical steady-state: 1-2 dirty sessions instead of 50.
+
+### 4.2 Replace polling with fs watchers for team watcher — DONE
+- **Files**: `src/team-watcher.ts` (`setupFsWatchers()`)
+- **Change**: Added chokidar watchers on both `~/.claude/teams/` and `~/.claude/tasks/` directories for instant event-driven detection. Lock files ignored via chokidar config. Mtime-based dedup skips unchanged files. Polling interval relaxed from 5s to 30s as a fallback.
+- **Impact**: Near-instant team detection; polling overhead eliminated for normal operation.
+
+### 4.3 Consolidate subagent file watchers — DONE
+- **Files**: `src/subagent-watcher.ts` (`setupDirectoryWatcher()`)
+- **Change**: Replaced per-agent chokidar watchers with one `fs.watch()` per session subagent directory. Events are routed to the correct agent via filename. Per-file debouncing (100ms) prevents hammering on bulk discovery.
+- **Impact**: Inotify watchers reduced from potentially 500 (one per agent) to ~50 (one per session directory).
+
+### 4.4 Stream transcript files instead of full reads — DONE
+- **Files**: `src/subagent-watcher.ts` (`tailFile()`, `findDescriptionInAgentFile()`, parent transcript lookup)
+- **Change**: Multiple streaming strategies implemented:
+  - **Live monitoring**: Position-based `tailFile()` with `createReadStream({ start: fromPosition })` — only reads new content
+  - **Parent transcript lookup**: Streams only last 16KB (`createReadStream({ start: offset })`)
+  - **Description extraction**: Streams only first 8KB, exits early after 5 lines
+  - **Full read**: Only for on-demand transcript review panel (with optional `limit` parameter)
+- **Impact**: File I/O for bulk agent discovery reduced from ~50MB to ~5MB.
+
+---
+
+## Phase 5: Long-Term Architectural (Optional) — NOT STARTED
+
+These items are deferred until scaling demands justify the complexity.
+
+### 5.1 Worker thread for PTY processing
+- **Files**: `src/session.ts`
+- **Problem**: ANSI stripping, Ralph tracking, and bash tool parsing all run on the main event loop. At scale (50 busy sessions), this consumes 300-500ms CPU/sec.
+- **Fix**: Offload ANSI strip + line processing to a worker thread pool. Main thread receives clean text + parsed events.
+- **Impact**: Frees event loop for I/O operations. Most impactful at 10+ concurrent busy sessions.
+
+### 5.2 Per-session SSE subscriptions
+- **Files**: `src/web/server.ts`
+- **Problem**: Every SSE event is broadcast to all connected clients. A client watching session A still receives events for sessions B through Z.
+- **Fix**: Clients subscribe to specific session IDs. Server only sends events to interested clients.
+- **Impact**: Reduces SSE broadcast fan-out from N clients to ~1-2 per event. Major improvement at 100 SSE clients.
+
+### 5.3 O(1) LRUMap via doubly-linked list
+- **Files**: `src/utils/lru-map.ts` (~lines 98-110)
+- **Problem**: `get()` uses delete + re-insert to refresh position — O(n) on Map iteration for delete.
+- **Fix**: Implement classic LRU with doubly-linked list + Map for O(1) get/put/evict.
+- **Impact**: Low — current sizes (max 500) make this barely measurable. Only worthwhile if LRUMap is used on hot paths.
+
+---
+
+## Completion Summary
+
+| Phase | Scope | Status | Items |
+|-------|-------|--------|-------|
+| 1 | Quick Wins | **Complete** | 5/5 (all pre-existing) |
+| 2 | Frontend Responsiveness | **Complete** | 3/3 actionable done, 2 skipped |
+| 3 | Backend Hot Paths | **Complete** | 4/4 actionable done, 1 deferred |
+| 4 | System-Level | **Complete** | 4/4 done |
+| 5 | Long-Term Architectural | **Not started** | 0/3 — deferred until needed |
+
+**Overall**: 16/16 actionable items complete. 3 optional items deferred.
+
+---
+
+## Measurement
+
+Before starting Phase 5, establish baselines:
+
+1. **Frontend**: Record Chrome DevTools Performance trace with 10 sessions open. Measure:
+   - Frame rate during rapid terminal output
+   - Long tasks (>50ms) count per 30s
+   - Heap size after 1h session
+
+2. **Backend**: Add `performance.now()` instrumentation around:
+   - `flushSessionTerminalBatch()` — time per flush
+   - `broadcastSessionStateDebounced()` — serialization time
+   - `StateStore.save()` — persist time
+   - Event loop lag via `monitorEventLoopDelay()`
+
+3. **First load**: Lighthouse score on desktop and mobile (simulated 3G)

docs/phase-4-domain-splitting-plan.md

@@ -0,0 +1,788 @@
+# Phase 4: Domain File Splitting — Implementation Plan
+
+**Date**: 2026-03-01
+**Prerequisites**: Phase 1-3 complete (utils cleanup, CleanupManager/Debouncer migration, route extraction)
+**Goal**: Split 4 god files into focused modules with barrel exports for transparent migration.
+
+---
+
+## Table of Contents
+
+1. [Split types.ts into types/ directory](#1-split-typests-into-types-directory)
+2. [Split ralph-tracker.ts into focused modules](#2-split-ralph-trackerts-into-focused-modules)
+3. [Split respawn-controller.ts into focused modules](#3-split-respawn-controllerts-into-focused-modules)
+4. [Split session.ts into focused modules](#4-split-sessionts-into-focused-modules)
+5. [Execution Order & Dependencies](#5-execution-order--dependencies)
+6. [Validation Checklist](#6-validation-checklist)
+
+---
+
+## 1. Split types.ts into types/ directory
+
+**Current**: 1,443 lines, 71 exports, imported by 36 files.
+**Risk**: LOW — pure type refactor, no runtime behavior change.
+
+### Target Structure
+
+```
+src/types/
+├── index.ts              (barrel re-export — transparent migration)
+├── common.ts             (Disposable, BufferConfig, CleanupResourceType, CleanupRegistration)
+├── session.ts            (SessionStatus, SessionMode, ClaudeMode, SessionConfig, SessionColor,
+│                          SessionState, OpenCodeConfig, SessionOutput)
+├── task.ts               (TaskStatus, TaskDefinition, TaskState)
+├── app-state.ts          (AppState, AppConfig, GlobalStats, TokenUsageEntry, TokenStats,
+│                          DEFAULT_CONFIG, createInitialState, createInitialGlobalStats)
+├── respawn.ts            (RespawnConfig, PersistedRespawnConfig, CycleOutcome,
+│                          RespawnCycleMetrics, RespawnAggregateMetrics, HealthStatus,
+│                          RalphLoopHealthScore, TimingHistory, RespawnPreset)
+├── ralph.ts              (RalphLoopStatus, RalphLoopState, RalphTodoStatus, RalphTodoPriority,
+│                          RalphTodoItem, RalphTodoProgress, RalphSessionState,
+│                          RalphStatusValue, RalphTestsStatus, RalphWorkType, RalphStatusBlock,
+│                          CompletionConfidence, RalphTrackerState,
+│                          CircuitBreakerState, CircuitBreakerReason, CircuitBreakerStatus,
+│                          createInitialCircuitBreakerStatus, createInitialRalphTrackerState,
+│                          createInitialRalphSessionState)
+├── api.ts                (ApiErrorCode, ApiResponse, HookEventType, QuickStartResponse,
+│                          CaseInfo, createErrorResponse, isError, getErrorMessage)
+├── lifecycle.ts          (LifecycleEventType, LifecycleEntry)
+├── run-summary.ts        (RunSummaryEventType, RunSummaryEventSeverity, RunSummaryEvent,
+│                          RunSummaryStats, RunSummary, createInitialRunSummaryStats)
+├── tools.ts              (ActiveBashToolStatus, ActiveBashTool, ImageDetectedEvent)
+├── teams.ts              (TeamConfig, TeamMember, TeamTask, InboxMessage, PaneInfo)
+├── push.ts               (PushSubscriptionRecord, VapidKeys)
+└── plan.ts               (PlanTaskStatus, TddPhase, PlanItem re-export, NiceConfig,
+                            DEFAULT_NICE_CONFIG, ProcessStats)
+```
+
+### Steps
+
+1. **Create `src/types/` directory** and each domain file above.
+
+2. **Move types** from `src/types.ts` into their domain files. Preserve all JSDoc comments. Each file should import from siblings as needed (e.g., `ralph.ts` imports `CircuitBreakerState` within itself — no cross-file deps needed since they're in the same file).
+
+3. **Create barrel `src/types/index.ts`** that re-exports everything:
+   ```typescript
+   export * from './common.js';
+   export * from './session.js';
+   export * from './task.js';
+   export * from './app-state.js';
+   export * from './respawn.js';
+   export * from './ralph.js';
+   export * from './api.js';
+   export * from './lifecycle.js';
+   export * from './run-summary.js';
+   export * from './tools.js';
+   export * from './teams.js';
+   export * from './push.js';
+   export * from './plan.js';
+   ```
+
+4. **Delete old `src/types.ts`** and replace with a single-line re-export barrel:
+   ```typescript
+   export * from './types/index.js';
+   ```
+   This ensures `import { ... } from './types.js'` continues to work everywhere — zero changes to 36 import sites.
+
+5. **Verify**: `tsc --noEmit` and `npm run lint` must pass. No runtime changes.
+
+### Internal Dependencies Between Domain Files
+
+Some types reference others across domains. Handle with imports:
+
+| File | Imports From |
+|------|-------------|
+| `app-state.ts` | `session.ts` (SessionState), `task.ts` (TaskState), `ralph.ts` (RalphLoopState, RalphSessionState) |
+| `respawn.ts` | None (self-contained) |
+| `ralph.ts` | None (self-contained) |
+| `run-summary.ts` | None (self-contained) |
+| `api.ts` | None (self-contained) |
+| `session.ts` | `respawn.ts` (RespawnConfig), `ralph.ts` (RalphTrackerState, RalphTodoItem, CircuitBreakerStatus, RalphSessionState, RunSummaryEvent) |
+
+Wait — `SessionState` references `RespawnConfig`, `RalphTrackerState`, `CircuitBreakerStatus`, and `RunSummaryEvent`. This creates imports from `session.ts` → `respawn.ts`, `ralph.ts`, `run-summary.ts`. This is fine (one-way deps, no cycles).
+
+---
+
+## 2. Split ralph-tracker.ts into focused modules
+
+**Current**: 3,868 lines, single `RalphTracker` class with 5 responsibilities.
+**Risk**: MEDIUM — class has shared mutable state, but extractable modules are well-isolated.
+
+### Coupling Analysis Summary
+
+| Module | Coupling | Extractability |
+|--------|----------|----------------|
+| Plan task tracking | LOW | HIGH — only reads `cycleCount` |
+| Fix-plan file watching | LOW | HIGH — callback-based todo replacement |
+| Iteration stall detection | LOW | HIGH — notification-based |
+| RALPH_STATUS block parsing + circuit breaker | MEDIUM | MEDIUM — callback for circuit breaker updates |
+| Todo parsing, loop detection, completion | HIGH | LOW — deeply entangled shared state |
+
+### Target Structure
+
+```
+src/
+├── ralph-tracker.ts              (~1,800 LOC — core: output parsing, loop state,
+│                                   todo management, completion detection)
+├── ralph-plan-tracker.ts         (~600 LOC — plan tasks, checkpoints, history, rollback)
+├── ralph-status-parser.ts        (~300 LOC — RALPH_STATUS block parsing, circuit breaker)
+├── ralph-fix-plan-watcher.ts     (~150 LOC — @fix_plan.md file watching)
+└── ralph-stall-detector.ts       (~80 LOC — iteration stall detection)
+```
+
+### Step 2a: Extract `RalphPlanTracker` (~600 LOC)
+
+**Why first**: Lowest coupling. Only dependency is `cycleCount` for checkpoint detection.
+
+**Extract these from `RalphTracker`**:
+
+Types to export:
+- `EnhancedPlanTask` (interface, currently lines 56-87)
+- `CheckpointReview` (interface, currently lines 90-139)
+
+Properties to move:
+- `_planVersion: number`
+- `_planHistory: Array<{version, timestamp, tasks, summary}>`
+- `_planTasks: Map<string, EnhancedPlanTask>`
+- `_checkpointIterations: number[]`
+- `_lastCheckpointIteration: number`
+
+Methods to move:
+- `initializePlanTasks(items)`
+- `updatePlanTask(taskId, update)`
+- `addPlanTask(params)`
+- `getPlanTasks()`
+- `generateCheckpointReview()`
+- `getPlanHistory()`
+- `rollbackToVersion(version)`
+- `isCheckpointDue()`
+- `planVersion` getter
+- `_savePlanToHistory()` (private)
+- `_unblockDependentTasks()` (private)
+- `_checkForCheckpoint()` (private)
+
+Events emitted (define in new class):
+- `planInitialized`
+- `planTaskUpdate`
+- `taskBlocked`
+- `taskUnblocked`
+- `planCheckpoint`
+
+**Interface with parent**:
+```typescript
+export class RalphPlanTracker extends EventEmitter {
+  constructor() { ... }
+
+  // Parent calls this when iteration changes (for checkpoint detection)
+  notifyCycleCount(cycleCount: number): void { ... }
+
+  // Full public API moves here unchanged
+  initializePlanTasks(items: PlanItem[]): void { ... }
+  updatePlanTask(taskId: string, update: { ... }): { ... } | null { ... }
+  // ...etc
+}
+```
+
+**In `RalphTracker`**: Replace plan methods with delegation:
+```typescript
+readonly planTracker = new RalphPlanTracker();
+
+// Forward plan events
+this.planTracker.on('planInitialized', (...args) => this.emit('planInitialized', ...args));
+// ...etc
+
+// In detectLoopStatus(), when cycleCount changes:
+this.planTracker.notifyCycleCount(this._loopState.cycleCount);
+```
+
+### Step 2b: Extract `RalphFixPlanWatcher` (~150 LOC)
+
+**Extract these**:
+
+Properties:
+- `_workingDir: string | null`
+- `_fixPlanPath: string | null`
+- `_fixPlanWatcher: FSWatcher | null`
+- `_fixPlanWatcherErrorHandler`
+- `_fixPlanReloadDeb`
+
+Methods:
+- `setWorkingDir(workingDir)`
+- `loadFixPlanFromDisk()`
+- `startWatchingFixPlan()`
+- `stopWatchingFixPlan()`
+- `handleFixPlanChange()`
+- `isFileAuthoritative` getter
+
+**Interface with parent**:
+```typescript
+export class RalphFixPlanWatcher extends EventEmitter {
+  get isFileAuthoritative(): boolean { ... }
+
+  setWorkingDir(workingDir: string): void { ... }
+  stop(): void { ... }
+}
+
+// Events:
+// 'todosLoaded' → (todos: Array<{id, content, status, priority}>) — parent replaces _todos
+```
+
+**In `RalphTracker`**:
+```typescript
+readonly fixPlanWatcher = new RalphFixPlanWatcher();
+
+constructor() {
+  this.fixPlanWatcher.on('todosLoaded', (items) => {
+    // Replace _todos with file-based items
+    this._todos.clear();
+    for (const item of items) {
+      this.addOrUpdateTodo(item.id, item.content, item.status, item.priority);
+    }
+  });
+}
+
+// Delegate isFileAuthoritative
+get isFileAuthoritative(): boolean {
+  return this.fixPlanWatcher.isFileAuthoritative;
+}
+```
+
+### Step 2c: Extract `RalphStallDetector` (~80 LOC)
+
+**Extract these**:
+
+Properties:
+- `_lastIterationChangeTime`
+- `_lastObservedIteration`
+- `_iterationStallTimerId`
+- `_iterationStallWarningMs`
+- `_iterationStallCriticalMs`
+- `_iterationStallWarned`
+
+Methods:
+- `startIterationStallDetection()`
+- `stopIterationStallDetection()`
+- `checkIterationStall()`
+- `getIterationStallMetrics()`
+- `configureIterationStallThresholds(warningMs, criticalMs)`
+
+**Interface with parent**:
+```typescript
+export class RalphStallDetector extends EventEmitter {
+  constructor(private cleanup: CleanupManager) { ... }
+
+  start(): void { ... }
+  stop(): void { ... }
+
+  // Parent calls when iteration changes
+  notifyIterationChanged(iteration: number): void {
+    this._lastIterationChangeTime = Date.now();
+    this._lastObservedIteration = iteration;
+    this._iterationStallWarned = false;
+  }
+
+  // Parent calls to check if loop is active
+  setLoopActive(active: boolean): void { ... }
+
+  getIterationStallMetrics(): { ... } { ... }
+}
+
+// Events: 'iterationStallWarning', 'iterationStallCritical'
+```
+
+### Step 2d: Extract `RalphStatusParser` (~300 LOC)
+
+**Extract these**:
+
+Properties:
+- `_circuitBreaker: CircuitBreakerStatus`
+- `_statusBlockBuffer: string[]`
+- `_inStatusBlock: boolean`
+- `_lastStatusBlock: RalphStatusBlock | null`
+- `_completionIndicators: number`
+- `_exitGateMet: boolean`
+- `_totalFilesModified: number`
+- `_totalTasksCompleted: number`
+
+Methods:
+- `processStatusBlockLine(line)`
+- `parseStatusBlock(lines)`
+- `detectCompletionIndicators(line)`
+- `updateCircuitBreaker(hasProgress, testsStatus, status)`
+- `resetCircuitBreaker()`
+- `circuitBreakerStatus` getter
+- `lastStatusBlock` getter
+- `cumulativeStats` getter
+- `exitGateMet` getter
+
+Regex patterns to move:
+- `RALPH_STATUS_START_PATTERN` through `RALPH_RECOMMENDATION_PATTERN`
+- `COMPLETION_INDICATOR_PATTERNS`
+
+**Interface with parent**:
+```typescript
+export class RalphStatusParser extends EventEmitter {
+  processLine(line: string): void { ... }  // calls processStatusBlockLine + detectCompletionIndicators
+
+  get circuitBreakerStatus(): CircuitBreakerStatus { ... }
+  get lastStatusBlock(): RalphStatusBlock | null { ... }
+  get exitGateMet(): boolean { ... }
+  get cumulativeStats(): { ... } { ... }
+
+  resetCircuitBreaker(): void { ... }
+  reset(): void { ... }
+}
+
+// Events: 'statusBlockDetected', 'circuitBreakerUpdate', 'exitGateMet'
+```
+
+**In `RalphTracker.processLine()`**:
+```typescript
+// Replace inline status block handling with delegation
+this.statusParser.processLine(line);
+```
+
+### Step 2e: Keep in `ralph-tracker.ts` (~1,800 LOC)
+
+The core remains tightly coupled and stays together:
+- Output parsing pipeline (`processTerminalData`, `processCleanData`, `processLine`)
+- Loop state management (`_loopState`, `detectLoopStatus`, `enable/disable/startLoop/stopLoop`)
+- Todo management (`_todos`, `detectTodoItems`, `addOrUpdateTodo`, `updateTodoStatus`, `getTodoStats`)
+- Completion detection (`detectCompletionPhrase`, `handleCompletionPhrase`, `calculateCompletionConfidence`)
+- All-tasks-complete detection (`detectAllTasksComplete`)
+- Auto-enable logic (`shouldAutoEnable`)
+- Lifecycle (`reset`, `fullReset`, `clear`, `restoreState`, `destroy`)
+- Event debouncing and buffering
+
+The class coordinates the extracted modules via composition:
+```typescript
+export class RalphTracker extends EventEmitter {
+  readonly planTracker = new RalphPlanTracker();
+  readonly fixPlanWatcher = new RalphFixPlanWatcher();
+  readonly stallDetector: RalphStallDetector;
+  readonly statusParser = new RalphStatusParser();
+
+  constructor() {
+    super();
+    this.stallDetector = new RalphStallDetector(this.cleanup);
+    this._wireSubModuleEvents();
+  }
+
+  private _wireSubModuleEvents(): void {
+    // Forward all sub-module events through RalphTracker
+    // so external consumers don't need to know about the split
+    for (const event of ['planInitialized', 'planTaskUpdate', ...]) {
+      this.planTracker.on(event, (...args) => this.emit(event, ...args));
+    }
+    // ...same for statusParser, stallDetector, fixPlanWatcher
+  }
+}
+```
+
+### Migration Safety
+
+- All events continue to be emitted from `RalphTracker` (forwarded from sub-modules)
+- All public methods stay on `RalphTracker` (delegated to sub-modules)
+- External consumers (`session.ts`, `case-routes.ts`) see zero API changes
+- New sub-modules are exposed as `readonly` properties for direct access where needed
+
+---
+
+## 3. Split respawn-controller.ts into focused modules
+
+**Current**: 3,611 lines, single `RespawnController` class with 6 responsibilities.
+**Risk**: MEDIUM — health scoring and metrics are cleanly decoupled; detection is tightly coupled.
+
+### Coupling Analysis Summary
+
+| Module | Coupling | Extractability |
+|--------|----------|----------------|
+| Health scoring | NONE | HIGH — pure calculations from metrics |
+| Cycle metrics | LOW | HIGH — standalone tracking |
+| Adaptive timing | LOW | HIGH — standalone timing adjustments |
+| Stuck-state detection | LOW | MEDIUM — needs state + config refs |
+| Pattern detection utilities | NONE | HIGH — pure functions |
+| State machine + idle detection + AI checkers | HIGH | LOW — deeply entangled |
+
+### Target Structure
+
+```
+src/
+├── respawn-controller.ts             (~2,200 LOC — state machine, idle detection,
+│                                       AI checkers, terminal handling, hook signals,
+│                                       auto-accept, step execution)
+├── respawn-health.ts                 (~250 LOC — health scoring + recommendations)
+├── respawn-metrics.ts                (~200 LOC — cycle metrics + aggregate stats)
+├── respawn-adaptive-timing.ts        (~100 LOC — adaptive timing with percentile calc)
+└── respawn-patterns.ts               (~50 LOC — terminal pattern detection utilities)
+```
+
+### Step 3a: Extract `RespawnPatterns` (~50 LOC)
+
+**Pure utility functions, zero coupling**.
+
+Move:
+- `isCompletionMessage(data): boolean`
+- `hasWorkingPattern(data, window): boolean`
+- `extractTokenCount(data): number | null`
+- `PROMPT_PATTERNS` array
+- `WORKING_PATTERNS` array
+
+```typescript
+// src/respawn-patterns.ts
+import { TOKEN_PATTERN, SPINNER_PATTERN } from './utils/index.js';
+
+export const PROMPT_PATTERNS = ['❯', '>', '$', '%', '#'];
+
+export const WORKING_PATTERNS = [/* 70+ patterns */];
+
+export function isCompletionMessage(data: string): boolean { ... }
+export function hasWorkingPattern(data: string, window: string): boolean { ... }
+export function extractTokenCount(data: string): number | null { ... }
+```
+
+**In `RespawnController`**: Import and call:
+```typescript
+import { isCompletionMessage, hasWorkingPattern, extractTokenCount } from './respawn-patterns.js';
+```
+
+### Step 3b: Extract `RespawnAdaptiveTiming` (~100 LOC)
+
+**Self-contained timing controller**.
+
+Move properties:
+- `timingHistory: TimingHistory`
+
+Move methods:
+- `recordTimingData(idleDetectionMs, cycleDurationMs)`
+- `updateAdaptiveTiming()`
+- `getTimingHistory()`
+- `getAdaptiveCompletionConfirmMs()`
+
+```typescript
+export class RespawnAdaptiveTiming {
+  private timingHistory: TimingHistory;
+
+  constructor(private config: { adaptiveMinConfirmMs: number; adaptiveMaxConfirmMs: number }) {
+    this.timingHistory = { recentIdleDetectionMs: [], recentCycleDurationMs: [], ... };
+  }
+
+  recordTimingData(idleDetectionMs: number, cycleDurationMs: number): void { ... }
+  getAdaptiveCompletionConfirmMs(): number { ... }
+  getTimingHistory(): TimingHistory { ... }
+  reset(): void { ... }
+}
+```
+
+### Step 3c: Extract `RespawnCycleMetrics` (~200 LOC)
+
+**Standalone metrics tracker**.
+
+Move properties:
+- `currentCycleMetrics`
+- `recentCycleMetrics[]`
+- `aggregateMetrics`
+- `MAX_CYCLE_METRICS_IN_MEMORY`
+
+Move methods:
+- `startCycleMetrics(idleReason)`
+- `recordCycleStep(step)`
+- `completeCycleMetrics(outcome, errorMessage?)`
+- `updateAggregateMetrics(metrics)`
+- `getAggregateMetrics()`
+- `getRecentCycleMetrics(limit?)`
+
+```typescript
+export class RespawnCycleMetricsTracker {
+  private currentCycleMetrics: Partial<RespawnCycleMetrics> | null = null;
+  private recentCycleMetrics: RespawnCycleMetrics[] = [];
+  private aggregateMetrics: RespawnAggregateMetrics;
+
+  startCycle(sessionId: string, cycleNumber: number, idleReason: string): void { ... }
+  recordStep(step: string): void { ... }
+  completeCycle(outcome: CycleOutcome, errorMessage?: string): RespawnCycleMetrics | null { ... }
+  getAggregate(): RespawnAggregateMetrics { ... }
+  getRecent(limit?: number): RespawnCycleMetrics[] { ... }
+  reset(): void { ... }
+}
+```
+
+**Callback**: `completeCycle()` returns the completed metrics so the controller can pass them to `adaptiveTiming.recordTimingData()`.
+
+### Step 3d: Extract `RespawnHealthCalculator` (~250 LOC)
+
+**Pure calculation — no state of its own**.
+
+Move methods:
+- `calculateHealthScore()`
+- `calculateCycleSuccessScore()`
+- `calculateCircuitBreakerScore()`
+- `calculateIterationProgressScore()`
+- `calculateAiCheckerScore()`
+- `calculateStuckRecoveryScore()`
+- `generateHealthRecommendations(components)`
+- `generateHealthSummary(score, status, components)`
+- `shouldSkipClear()` (belongs here since it's a pure calculation on token/config)
+
+```typescript
+export interface HealthInputs {
+  aggregateMetrics: RespawnAggregateMetrics;
+  circuitBreakerStatus: CircuitBreakerStatus;
+  iterationStallMetrics: { stallDurationMs: number; warningMs: number; criticalMs: number } | null;
+  aiCheckerState: { disabled: boolean; inCooldown: boolean; hasErrors: boolean };
+  stuckRecoveryCount: number;
+  maxStuckRecoveries: number;
+}
+
+export function calculateHealthScore(inputs: HealthInputs): RalphLoopHealthScore { ... }
+
+export function shouldSkipClear(
+  lastTokenCount: number,
+  skipClearThresholdPercent: number,
+  maxContextTokens: number
+): boolean { ... }
+```
+
+**Made as pure functions** (not a class) since they hold no state.
+
+### Step 3e: Keep in `respawn-controller.ts` (~2,200 LOC)
+
+The core state machine, idle detection, and AI checker integration stays:
+- State machine transitions (`setState`, `start`, `stop`, `pause`, `resume`)
+- Terminal data handling (`handleTerminalData`)
+- All 5 idle detection layers + hook signals
+- AI checker integration (`tryStartAiCheck`, `startAiCheck`, `startPlanCheck`)
+- Auto-accept logic
+- Step execution (`sendUpdateDocs`, `sendClear`, `sendInit`, `sendKickstart`)
+- Timer management (`startTrackedTimer`, `cancelTrackedTimer`)
+- Stuck-state detection and recovery
+- Action logging
+
+The class composes extracted modules:
+```typescript
+import { RespawnAdaptiveTiming } from './respawn-adaptive-timing.js';
+import { RespawnCycleMetricsTracker } from './respawn-metrics.js';
+import { calculateHealthScore, shouldSkipClear } from './respawn-health.js';
+import { isCompletionMessage, hasWorkingPattern, extractTokenCount } from './respawn-patterns.js';
+
+export class RespawnController extends EventEmitter {
+  private adaptiveTiming: RespawnAdaptiveTiming;
+  private cycleMetrics: RespawnCycleMetricsTracker;
+
+  calculateHealthScore(): RalphLoopHealthScore {
+    return calculateHealthScore({
+      aggregateMetrics: this.cycleMetrics.getAggregate(),
+      circuitBreakerStatus: this.session.ralphTracker.circuitBreakerStatus,
+      iterationStallMetrics: this.session.ralphTracker.getIterationStallMetrics(),
+      aiCheckerState: { ... },
+      stuckRecoveryCount: this.stuckRecoveryCount,
+      maxStuckRecoveries: this.config.maxStuckRecoveries ?? 3,
+    });
+  }
+}
+```
+
+---
+
+## 4. Split session.ts into focused modules
+
+**Current**: 2,418 lines, single `Session` class.
+**Risk**: LOW-MEDIUM — extractable pieces are utility-like with clear boundaries.
+
+### Coupling Analysis Summary
+
+| Module | Coupling | Extractability |
+|--------|----------|----------------|
+| CLI arg builder | NONE | HIGH — pure functions used at spawn time |
+| Auto-compact/clear | LOW | HIGH — self-contained automation with config |
+| Token tracking | LOW | MEDIUM — reads PTY output, writes state |
+| Task description cache | LOW | HIGH — separate LRU cache |
+| PTY + mux lifecycle | HIGH | KEEP — core of the class |
+| Tracker integration | HIGH | KEEP — event forwarding plumbing |
+
+### Target Structure
+
+```
+src/
+├── session.ts                    (~1,600 LOC — PTY lifecycle, terminal I/O,
+│                                   tracker integration, output processing,
+│                                   token tracking, state management)
+├── session-cli-builder.ts        (~250 LOC — Claude/OpenCode CLI arg construction)
+├── session-auto-ops.ts           (~300 LOC — auto-compact, auto-clear automation)
+└── session-task-cache.ts         (~100 LOC — task description LRU cache)
+```
+
+### Step 4a: Extract `SessionCliBuilder` (~250 LOC)
+
+**Pure functions — zero coupling to Session instance**.
+
+Move:
+- `buildClaudeArgs()` logic (currently inlined in `startInteractive` and `runPrompt`)
+- `buildOpenCodeArgs()` logic
+- Model mapping constants
+- Claude mode to flag mapping
+- Environment variable construction
+
+```typescript
+// src/session-cli-builder.ts
+export interface CliBuilderConfig {
+  claudeMode: ClaudeMode;
+  model?: string;
+  workingDir: string;
+  sessionId: string;
+  niceConfig?: NiceConfig;
+  isOpenCode?: boolean;
+  openCodeConfig?: OpenCodeConfig;
+}
+
+export function buildInteractiveArgs(config: CliBuilderConfig): string[] { ... }
+export function buildPromptArgs(config: CliBuilderConfig, prompt: string): string[] { ... }
+export function buildShellArgs(shell?: string): string[] { ... }
+export function buildClaudeEnv(config: CliBuilderConfig): Record<string, string> { ... }
+```
+
+### Step 4b: Extract `SessionAutoOps` (~300 LOC)
+
+**Self-contained automation with config-based thresholds**.
+
+Move properties:
+- `_autoCompactThreshold`
+- `_autoClearThreshold`
+- `_isAutoCompacting`
+- `_isAutoClearing`
+- `_autoCompactCount`
+- `_autoClearCount`
+- `_lastAutoCompactTime`
+- `_lastAutoClearTime`
+
+Move methods:
+- `checkAutoCompact(tokenCount)`
+- `performAutoCompact()`
+- `checkAutoClear(tokenCount)`
+- `performAutoClear()`
+- Auto-compact/clear threshold configuration
+
+```typescript
+export class SessionAutoOps extends EventEmitter {
+  constructor(
+    private writeCommand: (command: string) => Promise<void>,
+    private getTokenCount: () => number,
+    config: { compactThreshold: number; clearThreshold: number }
+  ) { ... }
+
+  /** Called after token count updates. Checks thresholds and triggers if needed. */
+  checkThresholds(tokenCount: number): void { ... }
+
+  updateConfig(config: { compactThreshold?: number; clearThreshold?: number }): void { ... }
+  getStats(): { autoCompactCount: number; autoClearCount: number; ... } { ... }
+}
+
+// Events: 'autoCompact', 'autoClear'
+```
+
+**In `Session`**: Compose and wire:
+```typescript
+private autoOps = new SessionAutoOps(
+  (cmd) => this.writeViaMux(cmd),
+  () => this._state.tokenCount,
+  { compactThreshold: 110_000, clearThreshold: 140_000 }
+);
+```
+
+### Step 4c: Extract `SessionTaskCache` (~100 LOC)
+
+**Isolated LRU cache for task descriptions**.
+
+Move:
+- `_taskDescriptionCache: LRUMap<number, { description: string; timestamp: number }>`
+- `_taskDescriptionMaxAge`
+- `findTaskDescriptionNear(lineNumber)`
+- `cacheTaskDescription(lineNumber, description)`
+
+```typescript
+export class SessionTaskCache {
+  private cache: LRUMap<number, { description: string; timestamp: number }>;
+  private maxAgeMs: number;
+
+  constructor(maxSize: number = 50, maxAgeMs: number = 30_000) { ... }
+
+  find(lineNumber: number, searchRadius: number = 50): string | null { ... }
+  add(lineNumber: number, description: string): void { ... }
+  clear(): void { ... }
+}
+```
+
+### Step 4d: Keep in `session.ts` (~1,600 LOC)
+
+The core stays together:
+- PTY process management (`spawn`, `kill`, `resize`, `writeViaMux`)
+- Data streaming pipeline (PTY → buffer → ANSI strip → JSON parse → events)
+- Tracker initialization and event forwarding (RalphTracker, BashToolParser, TaskTracker)
+- Output processing (message extraction, completion detection)
+- Token tracking (status line parsing)
+- State management (`toState()`, `updateState()`)
+- Session lifecycle (`startInteractive`, `startShell`, `runPrompt`)
+- CLI info detection (version, model, account)
+
+---
+
+## 5. Execution Order & Dependencies
+
+Execute in this order to minimize risk. Each step is independently deployable.
+
+```
+Step 1: types.ts split
+  ↓  (no runtime change, just file reorganization)
+Step 2a: RalphPlanTracker extraction
+  ↓  (independent of types split)
+Step 2b: RalphFixPlanWatcher extraction
+Step 2c: RalphStallDetector extraction
+Step 2d: RalphStatusParser extraction
+  ↓  (ralph-tracker.ts now ~1,800 LOC)
+Step 3a: RespawnPatterns extraction
+Step 3b: RespawnAdaptiveTiming extraction
+Step 3c: RespawnCycleMetrics extraction
+Step 3d: RespawnHealthCalculator extraction
+  ↓  (respawn-controller.ts now ~2,200 LOC)
+Step 4a: SessionCliBuilder extraction
+Step 4b: SessionAutoOps extraction
+Step 4c: SessionTaskCache extraction
+  ↓  (session.ts now ~1,600 LOC)
+```
+
+**Parallelization**: Steps 1, 2a-2d, 3a-3d, and 4a-4c can be done by separate agents in parallel since they touch different files. However, within each group, sequential execution is safer.
+
+### Risk Mitigation
+
+- **Barrel exports**: Every split uses delegation + barrel re-export so external consumers see zero API changes
+- **Event forwarding**: Sub-modules emit events, parent class forwards them — no event contract changes
+- **Incremental**: Each step can be verified independently with `tsc --noEmit` + `npm run lint`
+- **No test changes needed**: External API stays identical; existing tests continue to pass
+
+---
+
+## 6. Validation Checklist
+
+After each step, verify:
+
+- [ ] `tsc --noEmit` passes (no type errors)
+- [ ] `npm run lint` passes (no unused imports, etc.)
+- [ ] `npm run format:check` passes
+- [ ] `npx vitest run test/respawn-controller.test.ts` passes (for respawn splits)
+- [ ] `npx vitest run test/ralph-tracker.test.ts` passes (for ralph splits)
+- [ ] `npx vitest run test/session-manager.test.ts` passes (for session splits)
+- [ ] Dev server starts: `npx tsx src/index.ts web`
+- [ ] Existing sessions work (create, interact, delete)
+- [ ] Respawn cycle works (enable respawn, verify idle detection fires)
+- [ ] No new circular dependencies: `npx madge --circular src/`
+
+### Size Targets
+
+| File | Before | After |
+|------|--------|-------|
+| `src/types.ts` | 1,443 LOC | 1 LOC (re-export barrel) |
+| `src/ralph-tracker.ts` | 3,868 LOC | ~1,800 LOC |
+| `src/respawn-controller.ts` | 3,611 LOC | ~2,200 LOC |
+| `src/session.ts` | 2,418 LOC | ~1,600 LOC |
+| **Total new files** | — | 12 files |
+| **Net LOC change** | — | ~0 (refactor only) |

docs/phase1-implementation-plan.md

@@ -0,0 +1,738 @@
+# Phase 1 Implementation Plan: Quick Wins
+
+**Source**: `docs/code-structure-findings.md` (Phase 1 - Quick Wins section)
+**Estimated effort**: 1-2 days
+**Tasks**: 5 independent tasks (can be done in parallel unless noted)
+
+---
+
+## Safety Constraints
+
+Before starting ANY work, read and follow these rules:
+
+1. **Never run `npx vitest run`** (full suite) -- it kills tmux sessions. You are running inside a Codeman-managed tmux session.
+2. **Run individual tests only**: `npx vitest run test/<file>.test.ts`
+3. **Never test on port 3000** -- the live dev server runs there. Tests use ports 3150+.
+4. **After TypeScript changes**: Run `tsc --noEmit` to verify type checking passes.
+5. **Before considering done**: Run `npm run lint` and `npm run format:check` to ensure CI passes.
+6. **Never kill tmux sessions** -- check `echo $CODEMAN_MUX` first.
+
+---
+
+## Task Dependencies
+
+All 5 tasks are independent and can be done in parallel. However:
+- Task 1 (barrel exports) is a prerequisite if you want to update import sites to use the barrel after Task 3 (consolidate EXEC_TIMEOUT_MS). The EXEC_TIMEOUT_MS consolidation creates a new export that should be added to the barrel.
+- Task 2 (delete dead functions) removes functions that Task 1 would otherwise need to add to the barrel. Do Task 2 first or simultaneously with Task 1 to avoid adding exports for dead code.
+
+**Recommended order**: Task 2 -> Task 1 -> Task 3 -> Task 4 -> Task 5
+
+---
+
+## Task 1: Export Missing Functions from Utils Barrel
+
+**File**: `src/utils/index.ts`
+**Time**: ~30 minutes
+
+### Problem
+
+The barrel file (`src/utils/index.ts`) is missing exports for several functions that are defined in util modules, forcing consumers to use deep imports or preventing usage entirely.
+
+### Missing Exports
+
+From `src/utils/regex-patterns.ts`:
+- `createAnsiPatternFull()` -- factory for fresh ANSI regex (documented in CLAUDE.md)
+- `createAnsiPatternSimple()` -- factory for fresh ANSI regex (documented in CLAUDE.md)
+- `stripAnsi()` -- ANSI stripping utility
+- `SAFE_PATH_PATTERN` -- regex for safe file paths (currently deep-imported by `schemas.ts` and `tmux-manager.ts`)
+
+From `src/utils/token-validation.ts`:
+- `validateTokenCounts()` -- token count validation (documented in CLAUDE.md)
+- `validateTokensAndCost()` -- token + cost validation (documented in CLAUDE.md)
+
+**Note**: Do NOT export `isSimilar`, `isSimilarByDistance`, `levenshteinDistance`, or `normalizePhrase` from `string-similarity.ts` -- these are dead code (see Task 2).
+
+### Edit 1: Add missing regex-patterns exports
+
+**File**: `src/utils/index.ts`
+
+**Old code** (lines 13-18):
+```typescript
+export {
+  ANSI_ESCAPE_PATTERN_FULL,
+  ANSI_ESCAPE_PATTERN_SIMPLE,
+  TOKEN_PATTERN,
+  SPINNER_PATTERN,
+} from './regex-patterns.js';
+```
+
+**New code**:
+```typescript
+export {
+  ANSI_ESCAPE_PATTERN_FULL,
+  ANSI_ESCAPE_PATTERN_SIMPLE,
+  TOKEN_PATTERN,
+  SPINNER_PATTERN,
+  createAnsiPatternFull,
+  createAnsiPatternSimple,
+  stripAnsi,
+  SAFE_PATH_PATTERN,
+} from './regex-patterns.js';
+```
+
+### Edit 2: Add missing token-validation exports
+
+**File**: `src/utils/index.ts`
+
+**Old code** (line 19):
+```typescript
+export { MAX_SESSION_TOKENS } from './token-validation.js';
+```
+
+**New code**:
+```typescript
+export { MAX_SESSION_TOKENS, validateTokenCounts, validateTokensAndCost } from './token-validation.js';
+```
+
+### Optional follow-up: Update deep imports to use barrel
+
+These files currently deep-import `SAFE_PATH_PATTERN` and could be updated to use the barrel instead:
+
+- `src/web/schemas.ts` line 11: `import { SAFE_PATH_PATTERN } from '../utils/regex-patterns.js';` could become `import { SAFE_PATH_PATTERN } from '../utils/index.js';`
+- `src/tmux-manager.ts` line 44: `import { SAFE_PATH_PATTERN } from './utils/regex-patterns.js';` could become part of existing barrel import
+
+This is a low-priority cosmetic change. The barrel export itself is the important fix.
+
+### Verification
+
+```bash
+tsc --noEmit
+npm run lint
+```
+
+---
+
+## Task 2: Delete Dead Utility Functions
+
+**File**: `src/utils/string-similarity.ts`
+**Time**: ~15 minutes
+
+### Problem
+
+Four exported functions in `string-similarity.ts` are never imported anywhere in the codebase:
+- `levenshteinDistance()` (lines 27-69)
+- `isSimilar()` (lines 106-108)
+- `isSimilarByDistance()` (lines 123-125)
+- `normalizePhrase()` (lines 139-144)
+
+Only three functions are actually used (all by `ralph-tracker.ts` via the barrel):
+- `stringSimilarity()` -- uses `levenshteinDistance()` internally
+- `fuzzyPhraseMatch()` -- uses `normalizePhrase()` and `isSimilarByDistance()` internally
+- `todoContentHash()`
+
+### Strategy
+
+`levenshteinDistance()` is called by `stringSimilarity()`, and `normalizePhrase()` and `isSimilarByDistance()` are called by `fuzzyPhraseMatch()`. So they cannot be deleted -- they just need to be un-exported (made private to the module).
+
+`isSimilar()` is truly dead -- not called by anything. Delete it entirely.
+
+### Edit 1: Remove `export` from `levenshteinDistance`
+
+**File**: `src/utils/string-similarity.ts`
+
+**Old code** (line 27):
+```typescript
+export function levenshteinDistance(a: string, b: string): number {
+```
+
+**New code**:
+```typescript
+function levenshteinDistance(a: string, b: string): number {
+```
+
+### Edit 2: Delete `isSimilar` function entirely
+
+**File**: `src/utils/string-similarity.ts`
+
+**Old code** (lines 94-108):
+```typescript
+/**
+ * Check if two strings are similar within a given threshold.
+ *
+ * @param a - First string
+ * @param b - Second string
+ * @param threshold - Minimum similarity ratio (default: 0.85 = 85% similar)
+ * @returns True if similarity >= threshold
+ *
+ * @example
+ * isSimilar('COMPLETE', 'COMPLET', 0.85)  // true (87.5% similar)
+ * isSimilar('COMPLETE', 'DONE', 0.85)     // false (0% similar)
+ */
+export function isSimilar(a: string, b: string, threshold = 0.85): boolean {
+  return stringSimilarity(a, b) >= threshold;
+}
+```
+
+**New code**: (delete entirely -- replace with empty string)
+
+### Edit 3: Remove `export` from `isSimilarByDistance`
+
+**File**: `src/utils/string-similarity.ts`
+
+**Old code** (line 123):
+```typescript
+export function isSimilarByDistance(a: string, b: string, maxDistance = 2): boolean {
+```
+
+**New code**:
+```typescript
+function isSimilarByDistance(a: string, b: string, maxDistance = 2): boolean {
+```
+
+### Edit 4: Remove `export` from `normalizePhrase`
+
+**File**: `src/utils/string-similarity.ts`
+
+**Old code** (line 139):
+```typescript
+export function normalizePhrase(phrase: string): string {
+```
+
+**New code**:
+```typescript
+function normalizePhrase(phrase: string): string {
+```
+
+### Verification
+
+```bash
+tsc --noEmit
+npx vitest run test/string-utilities.test.ts
+npm run lint
+```
+
+Note: If `test/string-utilities.test.ts` imports any of the now-unexported functions, those test imports will fail. Check the test file and remove tests for `isSimilar` (deleted) and update any direct tests for `levenshteinDistance`, `isSimilarByDistance`, `normalizePhrase` to test them indirectly through the public API (`stringSimilarity`, `fuzzyPhraseMatch`), or remove those tests.
+
+---
+
+## Task 3: Consolidate Duplicated `EXEC_TIMEOUT_MS` Constant
+
+**Files**:
+- `src/utils/claude-cli-resolver.ts` (line 17)
+- `src/utils/opencode-cli-resolver.ts` (line 16)
+- `src/tmux-manager.ts` (line 63) -- also has its own copy
+
+**Time**: ~15 minutes
+
+### Problem
+
+`EXEC_TIMEOUT_MS = 5000` is defined identically in three files. Changes need to happen in all three places.
+
+### Strategy
+
+Create a shared constant and export it. The natural home is a new config file since the existing config files (`buffer-limits.ts`, `map-limits.ts`) follow this pattern. However, to keep it minimal, we can add it to an existing config file or create a small one.
+
+**Recommended approach**: Add to `src/config/timing-config.ts` (new file) as a single constant. This file can grow later in Phase 6 to hold other timing constants.
+
+Alternatively, the simplest approach: export from one of the existing utils and import in the others. Since both CLI resolvers are in `src/utils/`, the cleanest approach is to put it in a shared location.
+
+### Option A: Add to existing config (simpler)
+
+Create `src/config/exec-timeout.ts`:
+
+**New file**: `src/config/exec-timeout.ts`
+```typescript
+/**
+ * Timeout for child process exec commands (e.g., `which claude`, `which opencode`, tmux commands).
+ * Used across CLI resolvers and tmux manager.
+ */
+export const EXEC_TIMEOUT_MS = 5000;
+```
+
+### Edit 1: Update `claude-cli-resolver.ts`
+
+**File**: `src/utils/claude-cli-resolver.ts`
+
+**Old code** (lines 11-17):
+```typescript
+import { execSync } from 'node:child_process';
+import { existsSync } from 'node:fs';
+import { delimiter, dirname, join } from 'node:path';
+import { homedir } from 'node:os';
+
+/** Timeout for exec commands (5 seconds) */
+const EXEC_TIMEOUT_MS = 5000;
+```
+
+**New code**:
+```typescript
+import { execSync } from 'node:child_process';
+import { existsSync } from 'node:fs';
+import { delimiter, dirname, join } from 'node:path';
+import { homedir } from 'node:os';
+import { EXEC_TIMEOUT_MS } from '../config/exec-timeout.js';
+```
+
+### Edit 2: Update `opencode-cli-resolver.ts`
+
+**File**: `src/utils/opencode-cli-resolver.ts`
+
+**Old code** (lines 10-16):
+```typescript
+import { execSync } from 'node:child_process';
+import { existsSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { homedir } from 'node:os';
+
+/** Timeout for exec commands (5 seconds) */
+const EXEC_TIMEOUT_MS = 5000;
+```
+
+**New code**:
+```typescript
+import { execSync } from 'node:child_process';
+import { existsSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { homedir } from 'node:os';
+import { EXEC_TIMEOUT_MS } from '../config/exec-timeout.js';
+```
+
+### Edit 3: Update `tmux-manager.ts`
+
+**File**: `src/tmux-manager.ts`
+
+**Old code** (line 63):
+```typescript
+const EXEC_TIMEOUT_MS = 5000;
+```
+
+**New code**:
+```typescript
+import { EXEC_TIMEOUT_MS } from './config/exec-timeout.js';
+```
+
+Note: `tmux-manager.ts` already has many imports at the top of the file. Add this import near the other local imports (around lines 43-56). The `const EXEC_TIMEOUT_MS = 5000;` on line 63 should be deleted entirely (replaced with the import).
+
+### Verification
+
+```bash
+tsc --noEmit
+npm run lint
+```
+
+---
+
+## Task 4: Add `z.infer` to Zod Schemas
+
+**Files**:
+- `src/web/schemas.ts` (add type exports)
+- `src/types.ts` (replace manual interfaces with `z.infer` re-exports where applicable)
+
+**Time**: ~2 hours
+
+### Problem
+
+All 30+ Zod schemas in `schemas.ts` define validation rules, but zero use `z.infer` to derive TypeScript types. Instead, `types.ts` manually duplicates interfaces that match the schemas. When a schema changes, the type must be manually updated too.
+
+### Strategy
+
+Add `z.infer` type exports to `schemas.ts` for each exported schema. This creates derived types as the single source of truth. For schemas that have corresponding manual interfaces in `types.ts`, the manual interface can be replaced with a re-export of the inferred type.
+
+**Important**: Not all schemas have matching interfaces in `types.ts`. The `RespawnConfig` interface in `types.ts` (line 395) has all required fields, while `RespawnConfigSchema` has all optional fields (it's for partial updates). These are NOT the same type and should NOT be unified.
+
+### Edit 1: Add inferred type exports to `schemas.ts`
+
+**File**: `src/web/schemas.ts`
+
+After each schema definition, add a corresponding type export. Add the following lines at the **end of the file** (after line 509):
+
+**Old code** (end of file, lines 506-509):
+```typescript
+    .optional(),
+});
+```
+
+Wait -- the end of file is actually at line 509 after the `RalphLoopStartSchema`. Add the type exports after the last schema:
+
+**Append to end of file** `src/web/schemas.ts`:
+
+```typescript
+
+// ========== Inferred Types ==========
+// Derive TypeScript types from Zod schemas (single source of truth)
+
+export type CreateSessionInput = z.infer<typeof CreateSessionSchema>;
+export type RunPromptInput = z.infer<typeof RunPromptSchema>;
+export type ResizeInput = z.infer<typeof ResizeSchema>;
+export type CreateCaseInput = z.infer<typeof CreateCaseSchema>;
+export type QuickStartInput = z.infer<typeof QuickStartSchema>;
+export type HookEventInput = z.infer<typeof HookEventSchema>;
+export type RespawnConfigInput = z.infer<typeof RespawnConfigSchema>;
+export type ConfigUpdateInput = z.infer<typeof ConfigUpdateSchema>;
+export type SettingsUpdateInput = z.infer<typeof SettingsUpdateSchema>;
+export type SessionInputWithLimitInput = z.infer<typeof SessionInputWithLimitSchema>;
+export type SessionNameInput = z.infer<typeof SessionNameSchema>;
+export type SessionColorInput = z.infer<typeof SessionColorSchema>;
+export type RalphConfigInput = z.infer<typeof RalphConfigSchema>;
+export type FixPlanImportInput = z.infer<typeof FixPlanImportSchema>;
+export type RalphPromptWriteInput = z.infer<typeof RalphPromptWriteSchema>;
+export type AutoClearInput = z.infer<typeof AutoClearSchema>;
+export type AutoCompactInput = z.infer<typeof AutoCompactSchema>;
+export type ImageWatcherInput = z.infer<typeof ImageWatcherSchema>;
+export type FlickerFilterInput = z.infer<typeof FlickerFilterSchema>;
+export type QuickRunInput = z.infer<typeof QuickRunSchema>;
+export type ScheduledRunInput = z.infer<typeof ScheduledRunSchema>;
+export type LinkCaseInput = z.infer<typeof LinkCaseSchema>;
+export type GeneratePlanInput = z.infer<typeof GeneratePlanSchema>;
+export type GeneratePlanDetailedInput = z.infer<typeof GeneratePlanDetailedSchema>;
+export type CancelPlanInput = z.infer<typeof CancelPlanSchema>;
+export type PlanTaskUpdateInput = z.infer<typeof PlanTaskUpdateSchema>;
+export type PlanTaskAddInput = z.infer<typeof PlanTaskAddSchema>;
+export type CpuLimitInput = z.infer<typeof CpuLimitSchema>;
+export type SubagentWindowStatesInput = z.infer<typeof SubagentWindowStatesSchema>;
+export type SubagentParentMapInput = z.infer<typeof SubagentParentMapSchema>;
+export type InteractiveRespawnInput = z.infer<typeof InteractiveRespawnSchema>;
+export type RespawnEnableInput = z.infer<typeof RespawnEnableSchema>;
+export type PushSubscribeInput = z.infer<typeof PushSubscribeSchema>;
+export type PushPreferencesUpdateInput = z.infer<typeof PushPreferencesUpdateSchema>;
+export type RalphLoopStartInput = z.infer<typeof RalphLoopStartSchema>;
+```
+
+### What NOT to do
+
+Do NOT replace the `RespawnConfig` interface in `types.ts` with `z.infer<typeof RespawnConfigSchema>`. The schema has all optional fields (for partial config updates), but the interface has required fields (for the full config object). These are intentionally different shapes.
+
+Similarly, do NOT try to unify every interface in `types.ts` with a schema -- most interfaces in `types.ts` represent internal domain objects (SessionState, TaskState, etc.) that have no corresponding Zod schema. The schemas only exist for API request validation.
+
+### Future opportunity
+
+In a future phase, route handlers in `server.ts` can use these inferred types for request body typing:
+```typescript
+const body = CreateSessionSchema.parse(request.body) as CreateSessionInput;
+```
+This task only adds the type exports. Migrating route handlers to use them is out of scope.
+
+### Verification
+
+```bash
+tsc --noEmit
+npm run lint
+npm run format:check
+```
+
+---
+
+## Task 5: Fix Weak `not.toThrow()` Tests with Behavioral Assertions
+
+**Files**:
+- `test/task-tracker.test.ts` -- 6 instances
+- `test/image-watcher.test.ts` -- 1 instance
+- `test/task-queue.test.ts` -- 1 instance
+- `test/hooks-config.test.ts` -- 1 instance
+- `test/session-manager.test.ts` -- 1 instance
+
+**Time**: ~1 hour
+
+### Problem
+
+10 tests only assert `not.toThrow()` without verifying the actual defensive behavior. These tests prove the code doesn't crash but don't verify it does the right thing.
+
+### Fix Strategy
+
+After each `not.toThrow()`, add a behavioral assertion that verifies the state is correct (e.g., no tasks were created, no side effects occurred).
+
+### Edit 1: `task-tracker.test.ts` -- null message (line 566)
+
+**File**: `test/task-tracker.test.ts`
+
+**Old code**:
+```typescript
+    it('should handle null message', () => {
+      expect(() => tracker.processMessage(null)).not.toThrow();
+    });
+```
+
+**New code**:
+```typescript
+    it('should handle null message', () => {
+      expect(() => tracker.processMessage(null)).not.toThrow();
+      expect(tracker.getAllTasks().size).toBe(0);
+      expect(tracker.getRunningCount()).toBe(0);
+    });
+```
+
+### Edit 2: `task-tracker.test.ts` -- message without content (line 569-571)
+
+**File**: `test/task-tracker.test.ts`
+
+**Old code**:
+```typescript
+    it('should handle message without content', () => {
+      expect(() => tracker.processMessage({ message: {} })).not.toThrow();
+    });
+```
+
+**New code**:
+```typescript
+    it('should handle message without content', () => {
+      expect(() => tracker.processMessage({ message: {} })).not.toThrow();
+      expect(tracker.getAllTasks().size).toBe(0);
+    });
+```
+
+### Edit 3: `task-tracker.test.ts` -- empty content array (line 573-575)
+
+**File**: `test/task-tracker.test.ts`
+
+**Old code**:
+```typescript
+    it('should handle empty content array', () => {
+      expect(() => tracker.processMessage({ message: { content: [] } })).not.toThrow();
+    });
+```
+
+**New code**:
+```typescript
+    it('should handle empty content array', () => {
+      expect(() => tracker.processMessage({ message: { content: [] } })).not.toThrow();
+      expect(tracker.getAllTasks().size).toBe(0);
+    });
+```
+
+### Edit 4: `task-tracker.test.ts` -- tool_result for unknown task (lines 577-590)
+
+**File**: `test/task-tracker.test.ts`
+
+**Old code**:
+```typescript
+    it('should handle tool_result for unknown task', () => {
+      expect(() => {
+        tracker.processMessage({
+          message: {
+            content: [{
+              type: 'tool_result',
+              tool_use_id: 'unknown-task',
+              is_error: false,
+              content: 'Done',
+            }],
+          },
+        });
+      }).not.toThrow();
+    });
+```
+
+**New code**:
+```typescript
+    it('should handle tool_result for unknown task', () => {
+      expect(() => {
+        tracker.processMessage({
+          message: {
+            content: [{
+              type: 'tool_result',
+              tool_use_id: 'unknown-task',
+              is_error: false,
+              content: 'Done',
+            }],
+          },
+        });
+      }).not.toThrow();
+      expect(tracker.getTask('unknown-task')).toBeUndefined();
+      expect(tracker.getAllTasks().size).toBe(0);
+    });
+```
+
+### Edit 5: `task-tracker.test.ts` -- empty terminal output (lines 592-595)
+
+**File**: `test/task-tracker.test.ts`
+
+**Old code**:
+```typescript
+    it('should handle empty terminal output', () => {
+      expect(() => tracker.processTerminalOutput('')).not.toThrow();
+      expect(() => tracker.processTerminalOutput('   ')).not.toThrow();
+    });
+```
+
+**New code**:
+```typescript
+    it('should handle empty terminal output', () => {
+      expect(() => tracker.processTerminalOutput('')).not.toThrow();
+      expect(() => tracker.processTerminalOutput('   ')).not.toThrow();
+      expect(tracker.getAllTasks().size).toBe(0);
+      expect(tracker.getRunningCount()).toBe(0);
+    });
+```
+
+### Edit 6: `image-watcher.test.ts` -- unwatchSession for non-watched session (line 123)
+
+**File**: `test/image-watcher.test.ts`
+
+**Old code**:
+```typescript
+    it('should be safe to call for non-watched session', () => {
+      expect(() => watcher.unwatchSession('nonexistent')).not.toThrow();
+    });
+```
+
+**New code**:
+```typescript
+    it('should be safe to call for non-watched session', () => {
+      expect(() => watcher.unwatchSession('nonexistent')).not.toThrow();
+      expect(watcher.getWatchedSessions()).toHaveLength(0);
+    });
+```
+
+### Edit 7: `task-queue.test.ts` -- dependencies on non-existent tasks (lines 538-542)
+
+**File**: `test/task-queue.test.ts`
+
+**Old code**:
+```typescript
+  it('should allow dependencies on non-existent tasks (just unsatisfied, not a cycle)', () => {
+    // Dependencies on non-existent tasks are valid - they just won't be satisfied
+    expect(() => {
+      queue.addTask({ prompt: 'Task D', dependencies: ['non-existent-id'] });
+    }).not.toThrow();
+  });
+```
+
+**New code**:
+```typescript
+  it('should allow dependencies on non-existent tasks (just unsatisfied, not a cycle)', () => {
+    // Dependencies on non-existent tasks are valid - they just won't be satisfied
+    let task: ReturnType<typeof queue.addTask> | undefined;
+    expect(() => {
+      task = queue.addTask({ prompt: 'Task D', dependencies: ['non-existent-id'] });
+    }).not.toThrow();
+    expect(task).toBeDefined();
+    expect(task!.dependencies).toEqual(['non-existent-id']);
+    // Task should be pending but blocked (dependency unsatisfied)
+    expect(queue.next()?.prompt).toBeUndefined();
+  });
+```
+
+Wait -- `queue.next()` returns `null` when no next task is available (all blocked). Let me adjust:
+
+**New code** (corrected):
+```typescript
+  it('should allow dependencies on non-existent tasks (just unsatisfied, not a cycle)', () => {
+    // Dependencies on non-existent tasks are valid - they just won't be satisfied
+    let task: ReturnType<typeof queue.addTask> | undefined;
+    expect(() => {
+      task = queue.addTask({ prompt: 'Task D', dependencies: ['non-existent-id'] });
+    }).not.toThrow();
+    expect(task).toBeDefined();
+    expect(task!.dependencies).toEqual(['non-existent-id']);
+    // Task exists but is blocked (dependency unsatisfied), so next() skips it
+    expect(queue.getAllTasks()).toHaveLength(1);
+    expect(queue.next()).toBeNull();
+  });
+```
+
+### Edit 8: `hooks-config.test.ts` -- valid JSON check (line 129)
+
+**File**: `test/hooks-config.test.ts`
+
+**Old code**:
+```typescript
+  it('should write valid JSON', () => {
+    writeHooksConfig(testDir);
+    const settingsPath = join(testDir, '.claude', 'settings.local.json');
+    const content = readFileSync(settingsPath, 'utf-8');
+    expect(() => JSON.parse(content)).not.toThrow();
+  });
+```
+
+**New code**:
+```typescript
+  it('should write valid JSON', () => {
+    writeHooksConfig(testDir);
+    const settingsPath = join(testDir, '.claude', 'settings.local.json');
+    const content = readFileSync(settingsPath, 'utf-8');
+    const parsed = JSON.parse(content);
+    expect(parsed).toBeDefined();
+    expect(typeof parsed).toBe('object');
+    expect(parsed.hooks).toBeDefined();
+  });
+```
+
+### Edit 9: `session-manager.test.ts` -- stopSession for non-existent (line 216)
+
+**File**: `test/session-manager.test.ts`
+
+**Old code**:
+```typescript
+    it('should handle non-existent session gracefully', async () => {
+      await expect(manager.stopSession('non-existent')).resolves.not.toThrow();
+    });
+```
+
+**New code**:
+```typescript
+    it('should handle non-existent session gracefully', async () => {
+      await expect(manager.stopSession('non-existent')).resolves.not.toThrow();
+      expect(manager.getSessionCount()).toBe(0);
+    });
+```
+
+### Verification
+
+Run each test file individually:
+
+```bash
+npx vitest run test/task-tracker.test.ts
+npx vitest run test/image-watcher.test.ts
+npx vitest run test/task-queue.test.ts
+npx vitest run test/hooks-config.test.ts
+npx vitest run test/session-manager.test.ts
+```
+
+**Important**: `hooks-config.test.ts` and `session-manager.test.ts` spawn real servers on ports 3130-3131. Only run them if you are NOT running other tests that use those ports.
+
+---
+
+## Final Verification Checklist
+
+After all 5 tasks are complete, run the following in order:
+
+```bash
+# 1. TypeScript type checking
+tsc --noEmit
+
+# 2. Linting
+npm run lint
+
+# 3. Formatting
+npm run format:check
+
+# 4. Run affected test files individually (NOT the full suite)
+npx vitest run test/string-utilities.test.ts
+npx vitest run test/task-tracker.test.ts
+npx vitest run test/image-watcher.test.ts
+npx vitest run test/task-queue.test.ts
+npx vitest run test/session-manager.test.ts
+npx vitest run test/hooks-config.test.ts
+```
+
+If any formatting issues arise, fix with:
+```bash
+npm run format
+```
+
+If any lint issues arise, fix with:
+```bash
+npm run lint:fix
+```
+
+### Summary of Changes
+
+| Task | Files Modified | Files Created |
+|------|---------------|---------------|
+| 1. Barrel exports | `src/utils/index.ts` | -- |
+| 2. Dead functions | `src/utils/string-similarity.ts` | -- |
+| 3. EXEC_TIMEOUT_MS | `src/utils/claude-cli-resolver.ts`, `src/utils/opencode-cli-resolver.ts`, `src/tmux-manager.ts` | `src/config/exec-timeout.ts` |
+| 4. z.infer types | `src/web/schemas.ts` | -- |
+| 5. Weak tests | `test/task-tracker.test.ts`, `test/image-watcher.test.ts`, `test/task-queue.test.ts`, `test/hooks-config.test.ts`, `test/session-manager.test.ts` | -- |
+
+**Total files modified**: 10
+**Total files created**: 1

docs/phase6-config-consolidation-plan.md

@@ -0,0 +1,689 @@
+# Phase 6 Implementation Plan: Config Consolidation
+
+**Source**: `docs/code-structure-findings.md` (Phase 6 — Config Consolidation)
+**Estimated effort**: 1 day
+**Tasks**: 8 tasks with dependencies (see dependency graph below)
+
+---
+
+## Safety Constraints
+
+Before starting ANY work, read and follow these rules:
+
+1. **Never run `npx vitest run`** (full suite) — it kills tmux sessions. You are running inside a Codeman-managed tmux session.
+2. **Run individual tests only**: `npx vitest run test/<file>.test.ts`
+3. **Never test on port 3000** — the live dev server runs there. Tests use ports 3150+.
+4. **After TypeScript changes**: Run `tsc --noEmit` to verify type checking passes.
+5. **Before considering done**: Run `npm run lint` and `npm run format:check` to ensure CI passes.
+6. **Never kill tmux sessions** — check `echo $CODEMAN_MUX` first.
+7. **Verify the dev server starts**: After each task, run `npx tsx src/index.ts web --port 3099 &` on a non-production port, confirm `curl -s http://localhost:3099/api/status | jq .status` returns `"ok"`, then kill the background process.
+
+---
+
+## Goal
+
+Consolidate ~70 scattered numeric constants from 15+ source files into 6 new domain-focused config files, eliminating cross-file duplicates (including a 5x-duplicated AI model string) and making all tuning knobs discoverable in `src/config/`.
+
+**Non-goal**: Moving every constant. Module-internal implementation details (like regex patterns, algorithm-specific magic numbers, or constants only used once in deeply coupled logic) stay where they are. The goal is discoverability of operational tuning knobs, not mechanical relocation.
+
+---
+
+## Design Decisions
+
+### What gets centralized (and why)
+
+Constants are candidates for centralization when they meet **any** of these criteria:
+
+1. **Duplicated across files** — DRY violation (e.g., `STATS_COLLECTION_INTERVAL_MS` in `server.ts` and `mux-routes.ts`, AI model string in 5 files)
+2. **Operational tuning knobs** — values an operator might want to adjust for performance, security, or behavior without understanding the implementation (e.g., SSE health check interval, auth session TTL, rate limits)
+3. **Cross-cutting concerns** — values that establish system-wide contracts (e.g., max terminal dimensions used by both server routes and frontend)
+
+### What stays in place (and why)
+
+Constants that are **internal implementation details** of a single module stay where they are:
+
+- **Algorithm parameters** — `TODO_SIMILARITY_THRESHOLD`, `adaptiveCompletionConfirmMs`, confidence weights. These are meaningless without understanding the algorithm.
+- **Display/UI formatting** — `TEXT_PREVIEW_LENGTH`, `SMART_TITLE_MAX_LENGTH`, `COMMAND_DISPLAY_LENGTH` in `subagent-watcher.ts`. Only used locally, tightly coupled to rendering logic.
+- **Module-internal timing** — `LINE_BUFFER_FLUSH_INTERVAL` in `session.ts`, `AI_CHECK_POLL_INTERVAL` in `ai-checker-base.ts`. Internal implementation of specific features.
+- **Frontend constants** — `constants.js` already centralizes frontend values well. Don't mix frontend and backend config.
+- **Respawn `DEFAULT_CONFIG`** — these are user-configurable defaults for the respawn config interface, not system constants. They live properly in `respawn-controller.ts`. The AI model/context defaults within it are replaced with imports from the new `ai-defaults.ts` (Task 5).
+- **Session auto-ops thresholds** — `AUTO_RETRY_DELAY_MS`, `COMPACT_COOLDOWN_MS`, etc. in `session-auto-ops.ts` are internal to that module's retry logic and already well-documented in place.
+
+### File organization: domain-based, not category-based
+
+A single `timing-config.ts` with 70 unrelated timing values would be worse than the current state — developers would need to grep it just like they grep the whole codebase now. Instead, constants are grouped by **the system they configure**:
+
+| New File | Domain | Developer Question It Answers |
+|----------|--------|-------------------------------|
+| `server-timing.ts` | Web server performance | "How do I tune SSE batching / terminal throughput?" |
+| `auth-config.ts` | Authentication & security | "What are the rate limits and session TTLs?" |
+| `tunnel-config.ts` | QR auth & Cloudflare tunnel | "What are the QR token rotation parameters?" |
+| `terminal-limits.ts` | Terminal dimensions & input | "What are the max cols/rows/input size?" |
+| `ai-defaults.ts` | AI checker model & context | "What model do the AI checkers use? What's the context limit?" |
+| `team-config.ts` | Agent Teams polling & caching | "How often does team polling run? What are the cache limits?" |
+
+---
+
+## Task Dependencies
+
+```
+Task 1 (server-timing.ts)
+Task 2 (auth-config.ts)
+Task 3 (tunnel-config.ts)
+Task 4 (terminal-limits.ts)
+Task 5 (ai-defaults.ts)
+Task 6 (team-config.ts)
+    └──> Task 7 (Fix remaining duplicates)
+         └──> Task 8 (Update CLAUDE.md + final verification)
+```
+
+**Tasks 1–6** are independent and can run in parallel.
+**Task 7** depends on Tasks 1–6 (needs the new config files to exist).
+**Task 8** depends on Task 7.
+
+---
+
+## Task 1: Create `src/config/server-timing.ts`
+
+**Estimated effort**: 30 minutes
+**Files created**: `src/config/server-timing.ts`
+**Files modified**: `src/web/server.ts`, `src/web/routes/mux-routes.ts`
+
+### Constants to extract from `src/web/server.ts`
+
+| Constant | Value | Purpose |
+|----------|-------|---------|
+| `TERMINAL_BATCH_INTERVAL` | `16` | Terminal data batching interval (60fps) |
+| `TASK_UPDATE_BATCH_INTERVAL` | `100` | Task event batching interval (ms) |
+| `STATE_UPDATE_DEBOUNCE_INTERVAL` | `500` | State persistence debounce (ms) |
+| `SESSIONS_LIST_CACHE_TTL` | `1000` | Sessions list cache TTL (ms) |
+| `SCHEDULED_CLEANUP_INTERVAL` | `300000` | Scheduled runs cleanup check (5 min) |
+| `SCHEDULED_RUN_MAX_AGE` | `3600000` | Completed scheduled run max age (1 hour) |
+| `SSE_HEALTH_CHECK_INTERVAL` | `30000` | SSE client health check (30s) |
+| `SESSION_LIMIT_WAIT_MS` | `5000` | Session limit retry wait (5s) |
+| `ITERATION_PAUSE_MS` | `2000` | Scheduled run iteration pause (2s) |
+| `BATCH_FLUSH_THRESHOLD` | `32768` | Terminal batch immediate flush threshold (32KB) |
+| `STATS_COLLECTION_INTERVAL_MS` | `2000` | Mux stats collection interval (2s) |
+
+### Implementation
+
+1. Create `src/config/server-timing.ts` with all 11 constants, preserving existing JSDoc comments.
+2. In `src/web/server.ts`: Remove the 11 local constant declarations (lines ~92–121). Add `import { TERMINAL_BATCH_INTERVAL, ... } from '../config/server-timing.js'`.
+3. In `src/web/routes/mux-routes.ts`: Remove the duplicate `STATS_COLLECTION_INTERVAL_MS` (line 10) and its comment. Add `import { STATS_COLLECTION_INTERVAL_MS } from '../../config/server-timing.js'`. This fixes a **duplicate constant** (finding #10).
+4. Run `tsc --noEmit`.
+
+### New file template
+
+```typescript
+/**
+ * @fileoverview Web server performance and scheduling constants.
+ *
+ * Controls terminal batching throughput, SSE health checking,
+ * state persistence debouncing, and scheduled run timing.
+ *
+ * @module config/server-timing
+ */
+
+// ============================================================================
+// Terminal & SSE Performance
+// ============================================================================
+
+/** Terminal data batching interval — targets 60fps (ms) */
+export const TERMINAL_BATCH_INTERVAL = 16;
+
+/** Immediate flush threshold for terminal batches (bytes).
+ * Set high (32KB) to allow effective batching; avg Ink events are ~14KB. */
+export const BATCH_FLUSH_THRESHOLD = 32 * 1024;
+
+/** Task event batching interval (ms) */
+export const TASK_UPDATE_BATCH_INTERVAL = 100;
+
+/** SSE client health check interval (ms) */
+export const SSE_HEALTH_CHECK_INTERVAL = 30 * 1000;
+
+// ============================================================================
+// State Persistence
+// ============================================================================
+
+/** State update debounce — batches expensive toDetailedState() calls (ms) */
+export const STATE_UPDATE_DEBOUNCE_INTERVAL = 500;
+
+/** Sessions list cache TTL — avoids re-serializing on every SSE init (ms) */
+export const SESSIONS_LIST_CACHE_TTL = 1000;
+
+// ============================================================================
+// Scheduled Runs
+// ============================================================================
+
+/** Scheduled runs cleanup check interval (ms) */
+export const SCHEDULED_CLEANUP_INTERVAL = 5 * 60 * 1000;
+
+/** Completed scheduled run max age before cleanup (ms) */
+export const SCHEDULED_RUN_MAX_AGE = 60 * 60 * 1000;
+
+/** Session limit retry wait before retrying (ms) */
+export const SESSION_LIMIT_WAIT_MS = 5000;
+
+/** Pause between scheduled run iterations (ms) */
+export const ITERATION_PAUSE_MS = 2000;
+
+// ============================================================================
+// Mux Stats
+// ============================================================================
+
+/** Mux stats collection interval (ms) */
+export const STATS_COLLECTION_INTERVAL_MS = 2000;
+```
+
+### Verification
+
+```bash
+tsc --noEmit
+npx tsx src/index.ts web --port 3099 &
+curl -s http://localhost:3099/api/status | jq .status  # "ok"
+kill %1
+```
+
+---
+
+## Task 2: Create `src/config/auth-config.ts`
+
+**Estimated effort**: 20 minutes
+**Files created**: `src/config/auth-config.ts`
+**Files modified**: `src/web/middleware/auth.ts`, `src/hooks-config.ts`
+
+### Constants to extract from `src/web/middleware/auth.ts`
+
+| Constant | Value | Purpose |
+|----------|-------|---------|
+| `AUTH_SESSION_TTL_MS` | `86400000` | Auth session cookie TTL (24h) |
+| `MAX_AUTH_SESSIONS` | `100` | Max concurrent auth sessions |
+| `AUTH_FAILURE_MAX` | `10` | Max failed auth attempts per IP |
+| `AUTH_FAILURE_WINDOW_MS` | `900000` | Failed auth tracking window (15 min) |
+
+### Constants to extract from `src/hooks-config.ts`
+
+| Constant | Value | Purpose |
+|----------|-------|---------|
+| `HOOK_TIMEOUT_MS` | `10000` | Timeout for Claude Code hook commands |
+
+The `timeout: 10000` value is hardcoded 6 times in `hooks-config.ts` as inline literals. Extract to a single named constant.
+
+### Implementation
+
+1. Create `src/config/auth-config.ts` with the 5 constants.
+2. In `src/web/middleware/auth.ts`: Remove the 4 local constant declarations (lines 17–25). Add import from `../../config/auth-config.js`. Keep `AUTH_COOKIE_NAME` in place — it's a string identifier, not a tunable numeric constant.
+3. In `src/hooks-config.ts`: Replace all 6 inline `timeout: 10000` occurrences with `timeout: HOOK_TIMEOUT_MS`. Add import from `./config/auth-config.js`.
+4. Run `tsc --noEmit`.
+
+### New file template
+
+```typescript
+/**
+ * @fileoverview Authentication, rate limiting, and hook security constants.
+ *
+ * Controls auth session lifecycle, brute-force protection,
+ * and Claude Code hook timeouts.
+ *
+ * @module config/auth-config
+ */
+
+// ============================================================================
+// Session Cookies
+// ============================================================================
+
+/** Auth session cookie TTL — matches autonomous run length (ms) */
+export const AUTH_SESSION_TTL_MS = 24 * 60 * 60 * 1000;
+
+/** Max concurrent auth sessions per server */
+export const MAX_AUTH_SESSIONS = 100;
+
+// ============================================================================
+// Rate Limiting
+// ============================================================================
+
+/** Max failed auth attempts per IP before 429 rejection */
+export const AUTH_FAILURE_MAX = 10;
+
+/** Failed auth attempt tracking window (ms) */
+export const AUTH_FAILURE_WINDOW_MS = 15 * 60 * 1000;
+
+// ============================================================================
+// Hooks
+// ============================================================================
+
+/** Timeout for Claude Code hook curl commands (ms) */
+export const HOOK_TIMEOUT_MS = 10000;
+```
+
+### Verification
+
+```bash
+tsc --noEmit
+npm run lint
+```
+
+---
+
+## Task 3: Create `src/config/tunnel-config.ts`
+
+**Estimated effort**: 20 minutes
+**Files created**: `src/config/tunnel-config.ts`
+**Files modified**: `src/tunnel-manager.ts`
+
+### Constants to extract from `src/tunnel-manager.ts`
+
+| Constant | Value | Purpose |
+|----------|-------|---------|
+| `QR_TOKEN_TTL_MS` | `60000` | QR token auto-rotation interval (60s) |
+| `QR_TOKEN_GRACE_MS` | `90000` | Grace period for previous token (90s) |
+| `SHORT_CODE_LENGTH` | `6` | Length of QR short code |
+| `QR_RATE_LIMIT_MAX` | `30` | Global QR attempt rate limit |
+| `QR_RATE_LIMIT_WINDOW_MS` | `60000` | QR rate limit reset window (60s) |
+| `URL_TIMEOUT_MS` | `30000` | Cloudflared URL fetch timeout (30s) |
+| `RESTART_DELAY_MS` | `5000` | Tunnel restart delay after crash (5s) |
+| `FORCE_KILL_MS` | `5000` | SIGTERM → SIGKILL escalation timeout (5s) |
+
+### Implementation
+
+1. Create `src/config/tunnel-config.ts` with all 8 constants.
+2. In `src/tunnel-manager.ts`: Remove the 8 local constant declarations (lines ~39–75). Add `import { QR_TOKEN_TTL_MS, ... } from './config/tunnel-config.js'`.
+3. Keep the `TUNNEL_URL_REGEX` in `tunnel-manager.ts` — it's a parsing detail, not a tuning knob.
+4. Run `tsc --noEmit`.
+
+### New file template
+
+```typescript
+/**
+ * @fileoverview Cloudflare tunnel and QR authentication constants.
+ *
+ * Controls QR token rotation timing, rate limiting,
+ * and tunnel process lifecycle.
+ *
+ * @module config/tunnel-config
+ */
+
+// ============================================================================
+// QR Token Rotation
+// ============================================================================
+
+/** QR token auto-rotation interval (ms) */
+export const QR_TOKEN_TTL_MS = 60_000;
+
+/** Grace period — previous token still valid during rotation (ms) */
+export const QR_TOKEN_GRACE_MS = 90_000;
+
+/** Length of the short code in QR URL path (chars) */
+export const SHORT_CODE_LENGTH = 6;
+
+// ============================================================================
+// QR Rate Limiting
+// ============================================================================
+
+/** Global rate limit for QR auth attempts across all IPs */
+export const QR_RATE_LIMIT_MAX = 30;
+
+/** QR rate limit reset window (ms) */
+export const QR_RATE_LIMIT_WINDOW_MS = 60_000;
+
+// ============================================================================
+// Tunnel Process Lifecycle
+// ============================================================================
+
+/** Max time to wait for cloudflared URL before timeout (ms) */
+export const URL_TIMEOUT_MS = 30_000;
+
+/** Restart delay after unexpected tunnel exit (ms) */
+export const RESTART_DELAY_MS = 5_000;
+
+/** SIGTERM → SIGKILL escalation timeout (ms) */
+export const FORCE_KILL_MS = 5_000;
+```
+
+### Verification
+
+```bash
+tsc --noEmit
+```
+
+---
+
+## Task 4: Create `src/config/terminal-limits.ts`
+
+**Estimated effort**: 20 minutes
+**Files created**: `src/config/terminal-limits.ts`
+**Files modified**: `src/web/routes/session-routes.ts`
+
+### Constants to extract from `src/web/routes/session-routes.ts`
+
+| Constant | Value | Purpose |
+|----------|-------|---------|
+| `MAX_INPUT_LENGTH` | `65536` | Max input length per request (64KB) |
+| `MAX_TERMINAL_COLS` | `500` | Max terminal columns |
+| `MAX_TERMINAL_ROWS` | `200` | Max terminal rows |
+| `MAX_SESSION_NAME_LENGTH` | `128` | Max session name length (chars) |
+
+### Why a separate file instead of adding to `buffer-limits.ts`
+
+`buffer-limits.ts` covers memory buffer sizes (2MB terminal, 1MB text). These constants are **validation limits** for API inputs — different concern. A terminal resize request must not exceed `MAX_TERMINAL_COLS`; this has nothing to do with buffer trimming.
+
+### Implementation
+
+1. Create `src/config/terminal-limits.ts` with all 4 constants.
+2. In `src/web/routes/session-routes.ts`: Remove the 4 local constant declarations (lines 45–48). Add `import { MAX_INPUT_LENGTH, MAX_TERMINAL_COLS, MAX_TERMINAL_ROWS, MAX_SESSION_NAME_LENGTH } from '../../config/terminal-limits.js'`.
+3. Run `tsc --noEmit`.
+
+### New file template
+
+```typescript
+/**
+ * @fileoverview Terminal dimension and input validation limits.
+ *
+ * Used by API routes to validate resize, input, and session
+ * creation requests. Separate from buffer-limits.ts which
+ * controls memory buffer sizes.
+ *
+ * @module config/terminal-limits
+ */
+
+/** Max input length per API request (bytes) */
+export const MAX_INPUT_LENGTH = 64 * 1024;
+
+/** Max terminal columns for resize requests */
+export const MAX_TERMINAL_COLS = 500;
+
+/** Max terminal rows for resize requests */
+export const MAX_TERMINAL_ROWS = 200;
+
+/** Max session name length (chars) */
+export const MAX_SESSION_NAME_LENGTH = 128;
+```
+
+### Verification
+
+```bash
+tsc --noEmit
+```
+
+---
+
+## Task 5: Create `src/config/ai-defaults.ts`
+
+**Estimated effort**: 30 minutes
+**Files created**: `src/config/ai-defaults.ts`
+**Files modified**: `src/respawn-controller.ts`, `src/ai-idle-checker.ts`, `src/ai-plan-checker.ts`, `src/web/routes/respawn-routes.ts`
+
+### Problem: AI model string duplicated 5 times
+
+The model identifier `'claude-opus-4-5-20251101'` appears in 5 places across 4 files. When the model changes, all 5 must be updated — a guaranteed source of bugs. The context limits (`16000`, `8000`) are similarly scattered across 3 files each.
+
+| Constant | Current Value | Duplicated In |
+|----------|---------------|---------------|
+| `AI_CHECK_MODEL` | `'claude-opus-4-5-20251101'` | `respawn-controller.ts` (×2: idle + plan), `ai-idle-checker.ts`, `ai-plan-checker.ts`, `respawn-routes.ts` (×2: idle + plan) |
+| `AI_IDLE_CHECK_MAX_CONTEXT` | `16000` | `respawn-controller.ts`, `ai-idle-checker.ts`, `respawn-routes.ts` |
+| `AI_PLAN_CHECK_MAX_CONTEXT` | `8000` | `respawn-controller.ts`, `ai-plan-checker.ts`, `respawn-routes.ts` |
+
+### Implementation
+
+1. Create `src/config/ai-defaults.ts` with the 3 constants.
+2. In `src/respawn-controller.ts` `DEFAULT_CONFIG` (line 538): Replace `aiIdleCheckModel: 'claude-opus-4-5-20251101'` with `aiIdleCheckModel: AI_CHECK_MODEL`, `aiIdleCheckMaxContext: 16000` with `aiIdleCheckMaxContext: AI_IDLE_CHECK_MAX_CONTEXT`, `aiPlanCheckModel: 'claude-opus-4-5-20251101'` with `aiPlanCheckModel: AI_CHECK_MODEL`, `aiPlanCheckMaxContext: 8000` with `aiPlanCheckMaxContext: AI_PLAN_CHECK_MAX_CONTEXT`. Add import from `./config/ai-defaults.js`.
+3. In `src/ai-idle-checker.ts` `DEFAULT_AI_CHECK_CONFIG` (line 46): Replace `model: 'claude-opus-4-5-20251101'` with `model: AI_CHECK_MODEL`, `maxContextChars: 16000` with `maxContextChars: AI_IDLE_CHECK_MAX_CONTEXT`. Add import from `./config/ai-defaults.js`.
+4. In `src/ai-plan-checker.ts` `DEFAULT_PLAN_CHECK_CONFIG` (line 45): Replace `model: 'claude-opus-4-5-20251101'` with `model: AI_CHECK_MODEL`, `maxContextChars: 8000` with `maxContextChars: AI_PLAN_CHECK_MAX_CONTEXT`. Add import from `./config/ai-defaults.js`.
+5. In `src/web/routes/respawn-routes.ts` config merge block (lines 173–179): Replace all 4 inline fallback values with imports from `../../config/ai-defaults.js`.
+6. Run `tsc --noEmit`.
+
+### New file template
+
+```typescript
+/**
+ * @fileoverview Default model and context limits for AI-powered checkers.
+ *
+ * Centralizes the AI model identifier and context window sizes used by
+ * the idle checker, plan checker, respawn controller defaults, and
+ * respawn route fallbacks. Change the model here when upgrading.
+ *
+ * @module config/ai-defaults
+ */
+
+/** Default model for AI idle and plan checkers */
+export const AI_CHECK_MODEL = 'claude-opus-4-5-20251101';
+
+/** Max context chars for idle checker (~4k tokens) */
+export const AI_IDLE_CHECK_MAX_CONTEXT = 16000;
+
+/** Max context chars for plan checker (~2k tokens, plan mode UI is compact) */
+export const AI_PLAN_CHECK_MAX_CONTEXT = 8000;
+```
+
+### Verification
+
+```bash
+tsc --noEmit
+# Verify no remaining hardcoded model strings
+grep -rn 'claude-opus-4-5-20251101' src/  # Should only appear in config/ai-defaults.ts
+```
+
+---
+
+## Task 6: Create `src/config/team-config.ts`
+
+**Estimated effort**: 15 minutes
+**Files created**: `src/config/team-config.ts`
+**Files modified**: `src/team-watcher.ts`
+
+### Constants to extract from `src/team-watcher.ts`
+
+| Constant | Value | Purpose |
+|----------|-------|---------|
+| `TEAM_POLL_INTERVAL_MS` | `30000` | Team directory poll interval (30s) |
+| `MAX_CACHED_TEAMS` | `50` | LRU cache size for team configs |
+| `MAX_CACHED_TASKS` | `200` | LRU cache size for team tasks + inboxes |
+
+### Why centralize these
+
+Team polling frequency and cache sizes are operational knobs that affect both performance (polling too often wastes CPU) and responsiveness (polling too rarely means stale team state in the UI). They're also the kind of values a developer tuning for a large team deployment would want to find quickly. `MAX_CACHED_TASKS` is used for both the task cache and inbox cache — worth documenting.
+
+### Implementation
+
+1. Create `src/config/team-config.ts` with the 3 constants.
+2. In `src/team-watcher.ts`: Remove the 3 local constants (lines 23–25). Add `import { TEAM_POLL_INTERVAL_MS, MAX_CACHED_TEAMS, MAX_CACHED_TASKS } from './config/team-config.js'`. Note: rename `POLL_INTERVAL_MS` → `TEAM_POLL_INTERVAL_MS` to avoid ambiguity with the identically-named constant in `subagent-watcher.ts`.
+3. Update the usage site: `setInterval(... POLL_INTERVAL_MS)` → `setInterval(... TEAM_POLL_INTERVAL_MS)`.
+4. Run `tsc --noEmit`.
+
+### New file template
+
+```typescript
+/**
+ * @fileoverview Agent Teams polling and cache configuration.
+ *
+ * Controls how frequently TeamWatcher polls ~/.claude/teams/
+ * and how many teams/tasks are cached in memory.
+ *
+ * @module config/team-config
+ */
+
+/** Team directory poll interval (ms) */
+export const TEAM_POLL_INTERVAL_MS = 30_000;
+
+/** Max cached team configs (LRU eviction) */
+export const MAX_CACHED_TEAMS = 50;
+
+/** Max cached team tasks and inbox messages (LRU eviction).
+ * Used for both teamTasks and inboxCache maps. */
+export const MAX_CACHED_TASKS = 200;
+```
+
+### Verification
+
+```bash
+tsc --noEmit
+```
+
+---
+
+## Task 7: Fix remaining cross-file duplicates
+
+**Estimated effort**: 30 minutes
+**Files modified**: `src/index.ts`, `src/subagent-watcher.ts`
+
+### Duplicate 1: `STATS_COLLECTION_INTERVAL_MS`
+
+Already fixed in Task 1 — both `server.ts` and `mux-routes.ts` now import from `server-timing.ts`.
+
+### Duplicate 2: AI model string
+
+Already fixed in Task 5 — all 5 occurrences now import from `ai-defaults.ts`.
+
+### Duplicate 3: `MAX_SCREENSHOT_SIZE` / `MAX_TEXT_FILE_SIZE` / `MAX_RAW_FILE_SIZE`
+
+These file size limits in `file-routes.ts` and `system-routes.ts` are **API-specific validation limits**. They're only used in their respective route files and aren't duplicated. **Leave in place** — they're local to their route module and well-commented.
+
+### Action A: Move `MAX_CONSECUTIVE_ERRORS` and `ERROR_RESET_MS` to config
+
+`src/index.ts` has two process-level constants that are operational tuning knobs:
+
+| Constant | Value | Purpose |
+|----------|-------|---------|
+| `MAX_CONSECUTIVE_ERRORS` | `5` | Max consecutive unhandled errors before process exit |
+| `ERROR_RESET_MS` | `60000` | Error counter reset interval (1 min) |
+
+These belong in a config file since they control server reliability behavior. Add them to `src/config/server-timing.ts` (they're server operational constants).
+
+1. Add to `src/config/server-timing.ts`:
+   ```typescript
+   // ============================================================================
+   // Process Error Recovery
+   // ============================================================================
+
+   /** Max consecutive unhandled errors before auto-restart */
+   export const MAX_CONSECUTIVE_ERRORS = 5;
+
+   /** Error counter reset interval — forgives errors after quiet period (ms) */
+   export const ERROR_RESET_MS = 60_000;
+   ```
+2. In `src/index.ts`: Remove lines 19–20, add import from `./config/server-timing.js`.
+3. Run `tsc --noEmit`.
+
+### Action B: Fix `MAX_TRACKED_AGENTS` shadow in `subagent-watcher.ts`
+
+`subagent-watcher.ts` defines its own `MAX_TRACKED_AGENTS = 500` locally instead of importing the identical value from `config/map-limits.ts`. This is a latent bug — if someone changes the config value, the subagent watcher's copy stays stale.
+
+1. In `src/subagent-watcher.ts`: Remove the local `MAX_TRACKED_AGENTS` constant. Add `import { MAX_TRACKED_AGENTS } from './config/map-limits.js'` (the value there is `MAX_TODOS_PER_SESSION = 500` — **verify** the map-limits constant is actually named `MAX_TRACKED_AGENTS` or if it needs to be added). If the constant doesn't exist in `map-limits.ts` under that name, add it.
+2. Run `tsc --noEmit`.
+
+### Verification
+
+```bash
+tsc --noEmit
+npm run lint
+npm run format:check
+```
+
+---
+
+## Task 8: Update CLAUDE.md and final verification
+
+**Estimated effort**: 20 minutes
+**Files modified**: `CLAUDE.md`
+
+### Updates to CLAUDE.md
+
+1. **Config Files table** (`src/config/`): Add the 6 new files:
+
+   | File | Purpose |
+   |------|---------|
+   | `buffer-limits.ts` | Terminal/text buffer size limits |
+   | `map-limits.ts` | Global limits for Maps, sessions, watchers |
+   | `exec-timeout.ts` | Execution timeout configuration |
+   | `server-timing.ts` | Web server batching, SSE, scheduled run timing |
+   | `auth-config.ts` | Auth session TTL, rate limits, hook timeout |
+   | `tunnel-config.ts` | QR token rotation, tunnel process lifecycle |
+   | `terminal-limits.ts` | Terminal dimension and input validation limits |
+   | `ai-defaults.ts` | AI checker model and context limits |
+   | `team-config.ts` | Agent Teams polling and cache sizes |
+
+2. **Import Conventions** section: Add:
+   ```
+   - **Config**: Import from specific files: `import { MAX_TERMINAL_COLS } from './config/terminal-limits'`
+   ```
+
+3. **Phase 6 status** in `docs/code-structure-findings.md`: Mark as COMPLETE with summary of what was done.
+
+### Final verification checklist
+
+```bash
+# Type checking
+tsc --noEmit
+
+# Linting
+npm run lint
+
+# Formatting
+npm run format:check
+
+# Dev server starts
+npx tsx src/index.ts web --port 3099 &
+curl -s http://localhost:3099/api/status | jq .status  # "ok"
+kill %1
+
+# Verify no remaining duplicates
+grep -rn 'STATS_COLLECTION_INTERVAL_MS' src/  # Should only appear in config + import sites
+grep -rn 'timeout: 10000' src/hooks-config.ts  # Should be 0 — all replaced with HOOK_TIMEOUT_MS
+grep -rn 'claude-opus-4-5-20251101' src/       # Should only appear in config/ai-defaults.ts
+```
+
+---
+
+## What is NOT in scope (and why)
+
+These constants were considered but deliberately left in their current files:
+
+### Respawn controller defaults (`src/respawn-controller.ts`)
+
+The `DEFAULT_CONFIG` object (lines 538–578) contains ~30 default values for the `RespawnConfig` interface. These are **user-facing configuration defaults**, not system constants — they're the starting values for a config object that users can modify via the API and UI. Centralizing them would break the locality between the config interface definition and its defaults. They already have excellent JSDoc with `@default` tags. The only values extracted are the AI model/context constants (Task 5) which are duplicated in other files.
+
+### Subagent watcher timing (`src/subagent-watcher.ts`)
+
+The 18 constants at lines 129–158 are all internal to the subagent watcher's polling/lifecycle algorithm. Moving them to a config file would force developers to context-switch between two files to understand the polling logic. They're already grouped with clear comments. Exception: `MAX_TRACKED_AGENTS` is consolidated with `map-limits.ts` (Task 7B) since it duplicates a global limit.
+
+### Session auto-ops timing (`src/session-auto-ops.ts`)
+
+The 8 constants at lines 19–40 are internal to the auto-compact/clear retry state machine. They form a coherent group that's meaningless without the surrounding implementation context.
+
+### Run summary constants (`src/run-summary.ts`)
+
+`MAX_EVENTS`, `TRIM_TO_EVENTS`, `TOKEN_MILESTONE_INTERVAL`, `STATE_STUCK_WARNING_MS`, `STATE_STUCK_CHECK_INTERVAL` — all module-internal. The buffer-style limits (`MAX_EVENTS`/`TRIM_TO_EVENTS`) follow the same pattern as `buffer-limits.ts` but are only used in this one file.
+
+### Frontend (`src/web/public/constants.js`)
+
+Already well-centralized. Frontend and backend run in different environments — mixing them in TypeScript config files would create import problems. If frontend constants need expansion, do it in `constants.js`. Note: `app.js` has 2 inline uses of `256 * 1024` that should use the existing `TERMINAL_TAIL_SIZE` from `constants.js` — a minor cleanup that can be done opportunistically but is not worth a task here.
+
+### Tmux manager timing (`src/tmux-manager.ts`)
+
+The 6 constants (lines 65–78) are internal to tmux process lifecycle management. They're low-level retry/wait values that are meaningless without understanding the tmux spawn sequence.
+
+### Process-internal constants
+
+`image-watcher.ts`, `bash-tool-parser.ts`, `transcript-watcher.ts`, `ralph-tracker.ts`, `task-tracker.ts`, `file-stream-manager.ts`, `session-lifecycle-log.ts`, `session-task-cache.ts`, `respawn-metrics.ts`, `respawn-adaptive-timing.ts`, `ai-checker-base.ts` — all have module-local constants that are internal implementation details.
+
+### `localhost:3000` default URL
+
+The string `'http://localhost:3000'` or port `3000` appears as a fallback default in ~5 files (`session-cli-builder.ts`, `tmux-manager.ts`, `tunnel-manager.ts`, `server.ts`, CLI). While technically duplicated, extracting it provides little value — each usage has a different fallback chain (env var → config → hardcoded) and the port is also baked into systemd service files and documentation. The risk of a missed update is low since port 3000 is deeply conventional.
+
+### `SAVE_DEBOUNCE_MS = 500` in `state-store.ts` / `push-store.ts`
+
+Same value (500ms), but they debounce different persistence targets (state.json vs push-subscriptions.json). If one needed faster/slower debouncing, they'd diverge. Coupling them would be misleading.
+
+---
+
+## Summary
+
+| Metric | Before | After |
+|--------|--------|-------|
+| Config files in `src/config/` | 3 | 9 |
+| Constants centralized | ~25 | ~65 |
+| Cross-file duplicates | 9+ (`STATS_COLLECTION_INTERVAL_MS`, `timeout: 10000` ×6, AI model ×5, context limits ×3 each, `MAX_TRACKED_AGENTS`) | 0 |
+| Files with `timeout: 10000` inline | 1 (6 occurrences) | 0 |
+| Files with hardcoded AI model string | 4 (5 occurrences) | 1 (config only) |
+| Files modified | — | 11 |
+| Files created | — | 6 |

docs/phase7-test-infrastructure-plan.md

@@ -0,0 +1,953 @@
+# Phase 7 Implementation Plan: Test Infrastructure
+
+**Source**: `docs/code-structure-findings.md` (Phase 7 — Test Infrastructure)
+**Estimated effort**: 2–3 days
+**Tasks**: 11 tasks with dependencies (see dependency graph below)
+
+---
+
+## Safety Constraints
+
+Before starting ANY work, read and follow these rules:
+
+1. **Never run `npx vitest run`** (full suite) — it kills tmux sessions. You are running inside a Codeman-managed tmux session.
+2. **Run individual tests only**: `npx vitest run test/<file>.test.ts`
+3. **Never test on port 3000** — the live dev server runs there. Tests use ports 3150+.
+4. **After TypeScript changes**: Run `tsc --noEmit` to verify type checking passes.
+5. **Before considering done**: Run `npm run lint` and `npm run format:check` to ensure CI passes.
+6. **Never kill tmux sessions** — check `echo $CODEMAN_MUX` first.
+7. **Port assignments for this phase**: New tests use ports 3220–3229 (see individual tasks for assignments).
+
+---
+
+## Goal
+
+Eliminate duplicated test mocks, activate the unused `respawn-test-utils.ts` utilities, and add route-level test coverage for the server's 12 route modules — the single largest untested area in the codebase (162 route handlers, 0 dedicated tests).
+
+**Non-goals**:
+- Full end-to-end integration tests (those require real Claude CLI / tmux sessions)
+- 100% route coverage in this phase — focus on the highest-value route modules first
+- Refactoring test patterns in existing passing tests that don't use shared mocks
+- Migrating `vi.mock()`-based module replacement mocks (different pattern, see Task 6/7)
+
+---
+
+## Current State
+
+### Mock Duplication (Finding #9)
+
+`MockSession` is defined **4 times** across test files with varying levels of completeness:
+
+| File | Properties | Methods | EventEmitter | Notes |
+|------|-----------|---------|-------------|-------|
+| `test/respawn-test-utils.ts` | 6 | 20+ | Yes | **Most complete**. Includes terminal simulation, token count, ANSI output, plan mode prompts. **Never imported by any test.** |
+| `test/respawn-controller.test.ts` | 6 | 9 | Yes | Subset of respawn-test-utils. Missing token simulation, ANSI helpers. |
+| `test/respawn-team-awareness.test.ts` | ~6 | ~9 | Yes | Near-copy of respawn-controller.test.ts version. |
+| `test/session-manager.test.ts` | 4 | 8 | Yes | **Inside `vi.mock()` factory** — replaces `../src/session.js` module. Different shape: `start()`/`stop()`/`toState()`/`sendInput()` for lifecycle testing. |
+
+`MockStateStore` is defined **2 times** (both inside `vi.mock()` factories):
+
+| File | Shape | Methods | Mock Pattern |
+|------|-------|---------|-------------|
+| `test/session-manager.test.ts` | `{ sessions, config }` | `getConfig`, `getSessions`, `getSession`, `setSession`, `removeSession` | `vi.mock('../src/state-store.js')` |
+| `test/ralph-loop.test.ts` | `{ ralphLoop, tasks, config }` | `getConfig`, `getRalphLoopState`, `setRalphLoopState`, `getTasks`, `setTask`, `removeTask` | `vi.mock('../src/state-store.js')` |
+
+### Important: Two distinct mocking patterns
+
+The codebase uses two different mocking patterns that require different migration strategies:
+
+1. **Direct instantiation** (respawn-controller, respawn-team-awareness): `MockSession` is defined at file scope and instantiated directly in tests. These can be migrated to shared mocks via simple import replacement.
+
+2. **Module replacement** (session-manager, ralph-loop): Mocks are defined inside `vi.mock()` factories that replace entire modules (`../src/session.js`, `../src/state-store.js`). These factories run in an isolated scope and return `{ Session: MockClass }` or `{ getStore: vi.fn(() => instance) }`. Migrating these requires either `vi.hoisted()` or restructuring the test's module mocking — higher risk for limited benefit.
+
+### Unused Test Utilities
+
+`test/respawn-test-utils.ts` exports these utilities that **no test file imports**:
+
+- `TimeController` / `createTimeController()` — abstraction over vitest fake timers
+- `MockAiIdleChecker` / `MockAiPlanChecker` — fully mocked AI checkers with result queueing
+- `createStateTracker()` / `createEventRecorder()` — state transition and event recording
+- `FAST_TEST_CONFIG` / `AI_ENABLED_TEST_CONFIG` — pre-configured RespawnConfig objects
+- `waitForState()` / `waitForEvent()` / `createDeferred()` — async test helpers
+- `terminalOutputs` — factory object for common terminal output patterns
+
+### Route Test Coverage
+
+Currently **zero** dedicated tests for the 12 route modules in `src/web/routes/`. The existing test files that touch API endpoints:
+
+| Test File | What It Tests | Approach |
+|-----------|--------------|----------|
+| `test/api-responses.test.ts` | Response structure validation | Imports types, no HTTP calls |
+| `test/api-generate-plan.test.ts` | Plan generation API | Mocks validation logic, Port 3191 declared |
+| `test/auth-security.test.ts` | Auth middleware | Integration tests with WebServer, Ports 3160/3161 |
+| `test/qr-auth.test.ts` | QR authentication | Integration + unit tests, Port 3162 |
+
+None of these test the route handlers themselves with real HTTP requests against a running Fastify instance.
+
+---
+
+## Design Decisions
+
+### Shared mocks: Superset strategy
+
+Rather than creating a lowest-common-denominator mock, `MockSession` in `test/mocks/` will be the **superset** from `respawn-test-utils.ts` (the most complete version). Test files that need a simpler mock can just ignore the extra methods — having unused methods costs nothing, but missing methods forces local re-definition.
+
+### vi.mock() tests: Don't migrate
+
+The `session-manager.test.ts` and `ralph-loop.test.ts` tests define mocks inside `vi.mock()` factories. These use **module-level replacement** (replacing `../src/session.js` and `../src/state-store.js` entirely), which is fundamentally different from the direct-instantiation pattern. Migrating them would require `vi.hoisted()` or factory restructuring — high complexity for limited benefit since these mocks are already working. We leave these as-is and create the shared mocks for **new** tests and for the two direct-instantiation tests (Tasks 4–5).
+
+### MockStateStore: Union of both shapes
+
+The shared `MockStateStore` in `test/mocks/` will include methods from both existing definitions (session management + Ralph loop), so any **new** test can use it. Methods default to no-ops via `vi.fn()`. Existing `vi.mock()`-based tests are not migrated.
+
+### Route testing strategy: Lightweight Fastify instances
+
+Each route test file will:
+1. Create a minimal `Fastify` instance
+2. Register **only** the route module under test
+3. Provide a mock context object satisfying the port interfaces
+4. Use `app.inject()` (Fastify's built-in test helper) — no real HTTP, no port needed
+
+This avoids port conflicts entirely and runs fast. Only tests that need SSE or WebSocket behavior will use a real listening server with assigned ports.
+
+### Port assignments (for tests needing real servers)
+
+| Port | Test File | Purpose |
+|------|-----------|---------|
+| 3220 | `test/routes/session-routes.test.ts` | SSE integration (if needed) |
+| 3221 | `test/routes/system-routes.test.ts` | Status/stats endpoints |
+| 3222 | `test/routes/respawn-routes.test.ts` | Respawn API |
+| 3223 | `test/routes/ralph-routes.test.ts` | Ralph API |
+| 3224–3229 | Reserved | Future route tests |
+
+Most tests should NOT need real ports — `app.inject()` is preferred. Verified: ports 3220–3229 are completely unused by existing tests (highest used port is 3211 in `opencode-resize.test.ts`).
+
+---
+
+## Task Dependencies
+
+```
+Task 1 (Consolidate MockSession)
+Task 2 (Consolidate MockStateStore)
+    └──> Task 3 (Create test/mocks/ barrel)
+         ├──> Task 4 (Migrate respawn-controller.test.ts)
+         ├──> Task 5 (Migrate respawn-team-awareness.test.ts)
+         └──> Task 6 (Route test scaffold + helpers)
+              ├──> Task 7 (Session routes tests)
+              └──> Task 8 (System + respawn routes tests)
+
+Task 9 (Slim down respawn-test-utils.ts) — depends on Tasks 4, 5
+```
+
+**Tasks 1–2** are independent and can run in parallel.
+**Task 3** depends on Tasks 1–2.
+**Tasks 4–6** depend on Task 3 and can run in parallel.
+**Tasks 7–8** depend on Task 6 and can run in parallel.
+**Task 9** depends on Tasks 4, 5 (must verify migrations work before removing duplicates from source).
+
+---
+
+## Task 1: Consolidate MockSession into `test/mocks/mock-session.ts`
+
+**Estimated effort**: 2 hours
+**Files created**: `test/mocks/mock-session.ts`
+**Files modified**: None yet (consumers migrate in Tasks 4–5)
+
+### Source
+
+The canonical MockSession comes from `test/respawn-test-utils.ts` (lines 89–241). It is the most complete version with:
+
+- All properties needed by `RespawnController`: `id`, `workingDir`, `status`, `writeBuffer`, `terminalBuffer`, `muxName`
+- `write()` / `writeViaMux()` for input simulation
+- Buffer inspection: `lastWrite`, `hasWritten(pattern)`, `clearWriteBuffer()`
+- Terminal simulation: `simulateTerminalOutput()`, `simulatePrompt()`, `simulateReady()`, `simulateCompletionMessage()`, `simulateWorking()`, `simulateClearComplete()`, `simulateInitComplete()`, `simulatePlanModePrompt()`, `simulateElicitationDialog()`, `simulateTokenCount()`, `simulateAnsiOutput()`
+- Lifecycle: `close()`
+
+### Implementation
+
+1. Create `test/mocks/` directory.
+2. Create `test/mocks/mock-session.ts`:
+   - Copy the `MockSession` class **exactly** from `test/respawn-test-utils.ts` (lines 89–241)
+   - Copy `terminalOutputs` helper object (tightly coupled to mock)
+   - Copy `createMockSession()` factory function
+   - Export all three: `export { MockSession, createMockSession, terminalOutputs }`
+   - Ensure all `vi` imports come from `vitest`
+
+**CRITICAL**: Copy the source verbatim — do NOT rewrite the simulation methods. The respawn controller's detection logic matches specific output patterns (e.g., `'\u276f '` for prompt, `'\u273b Worked for'` for completion). Using different patterns would cause test failures.
+
+### Template
+
+```typescript
+/**
+ * Shared MockSession for tests that need terminal simulation.
+ *
+ * Copied from test/respawn-test-utils.ts (the canonical, most complete version).
+ * Used by respawn, route, and subagent tests.
+ */
+import { EventEmitter } from 'node:events';
+
+// Copy MockSession class exactly from test/respawn-test-utils.ts lines 89–241
+export class MockSession extends EventEmitter {
+  // ... (copy verbatim from respawn-test-utils.ts)
+}
+
+/**
+ * Factory for common terminal output strings.
+ * Must match the patterns used in MockSession's simulate* methods.
+ */
+export const terminalOutputs = {
+  // ... (copy verbatim from respawn-test-utils.ts)
+};
+
+/**
+ * Convenience factory.
+ */
+export function createMockSession(id?: string): MockSession {
+  return new MockSession(id);
+}
+```
+
+### Verification
+
+```bash
+tsc --noEmit  # Ensure file compiles
+```
+
+---
+
+## Task 2: Consolidate MockStateStore into `test/mocks/mock-state-store.ts`
+
+**Estimated effort**: 1 hour
+**Files created**: `test/mocks/mock-state-store.ts`
+**Files modified**: None (existing vi.mock()-based tests are NOT migrated; this is for new route tests)
+
+### Source
+
+Union of both existing definitions:
+
+- From `test/session-manager.test.ts`: session CRUD methods (`getConfig`, `getSession`, `setSession`, `removeSession`, `getSessions`)
+- From `test/ralph-loop.test.ts`: Ralph state methods (`getConfig`, `getRalphLoopState`, `setRalphLoopState`, `getTasks`, `setTask`, `removeTask`)
+
+### Template
+
+```typescript
+/**
+ * Shared MockStateStore for tests.
+ *
+ * Includes methods for both session management and Ralph loop testing.
+ * All methods are vi.fn() spies — tests can override return values as needed.
+ *
+ * NOTE: This is for direct instantiation in new tests. Existing tests that
+ * use vi.mock('../src/state-store.js') keep their inline definitions.
+ */
+import { vi } from 'vitest';
+
+export class MockStateStore {
+  state: Record<string, unknown> = {
+    sessions: {} as Record<string, unknown>,
+    config: { maxConcurrentSessions: 5 },
+    ralphLoop: { status: 'stopped' },
+    tasks: {} as Record<string, unknown>,
+  };
+
+  // Session methods
+  getConfig = vi.fn(() => this.state.config);
+  getSessions = vi.fn(() => this.state.sessions as Record<string, unknown>);
+  getSession = vi.fn((id: string) => (this.state.sessions as Record<string, unknown>)[id]);
+  setSession = vi.fn((id: string, state: unknown) => {
+    (this.state.sessions as Record<string, unknown>)[id] = state;
+  });
+  removeSession = vi.fn((id: string) => {
+    delete (this.state.sessions as Record<string, unknown>)[id];
+  });
+
+  // Ralph state methods
+  getRalphLoopState = vi.fn(() => this.state.ralphLoop);
+  setRalphLoopState = vi.fn((update: Record<string, unknown>) => {
+    this.state.ralphLoop = { ...(this.state.ralphLoop as Record<string, unknown>), ...update };
+  });
+
+  // Task methods
+  getTasks = vi.fn(() => this.state.tasks);
+  setTask = vi.fn();
+  removeTask = vi.fn();
+
+  // Settings methods
+  getSettings = vi.fn(() => ({}));
+  setSettings = vi.fn();
+
+  // Generic persistence
+  save = vi.fn();
+  load = vi.fn();
+
+  /** Reset all state and mocks for clean test isolation */
+  reset(): void {
+    this.state = {
+      sessions: {},
+      config: { maxConcurrentSessions: 5 },
+      ralphLoop: { status: 'stopped' },
+      tasks: {},
+    };
+    vi.clearAllMocks();
+  }
+}
+```
+
+### Verification
+
+```bash
+tsc --noEmit
+```
+
+---
+
+## Task 3: Create `test/mocks/index.ts` barrel export
+
+**Estimated effort**: 30 minutes
+**Depends on**: Tasks 1, 2
+**Files created**: `test/mocks/index.ts`, `test/mocks/test-helpers.ts`
+**Files modified**: None
+
+### Implementation
+
+1. Create `test/mocks/test-helpers.ts` with the async utilities from `respawn-test-utils.ts`:
+
+```typescript
+/**
+ * Reusable async test helpers.
+ * Extracted from respawn-test-utils.ts.
+ */
+
+/** Wait for an EventEmitter to emit a specific event, with timeout */
+export function waitForEvent(
+  emitter: { once: (event: string, listener: (...args: unknown[]) => void) => void },
+  event: string,
+  timeoutMs = 5000,
+): Promise<unknown> {
+  return new Promise((resolve, reject) => {
+    const timer = setTimeout(
+      () => reject(new Error(`Timed out waiting for event "${event}" after ${timeoutMs}ms`)),
+      timeoutMs,
+    );
+    emitter.once(event, (...args: unknown[]) => {
+      clearTimeout(timer);
+      resolve(args.length === 1 ? args[0] : args);
+    });
+  });
+}
+
+/** Create a deferred promise with external resolve/reject */
+export function createDeferred<T = void>(): {
+  promise: Promise<T>;
+  resolve: (value: T) => void;
+  reject: (reason?: unknown) => void;
+} {
+  let resolve!: (value: T) => void;
+  let reject!: (reason?: unknown) => void;
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+  return { promise, resolve, reject };
+}
+```
+
+2. Create `test/mocks/index.ts` barrel:
+
+```typescript
+/**
+ * Shared test mocks — import from here instead of defining inline.
+ *
+ * @example
+ * import { MockSession, MockStateStore, terminalOutputs } from './mocks/index.js';
+ */
+
+export { MockSession, createMockSession, terminalOutputs } from './mock-session.js';
+export { MockStateStore } from './mock-state-store.js';
+export { waitForEvent, createDeferred } from './test-helpers.js';
+```
+
+### Verification
+
+```bash
+tsc --noEmit
+```
+
+---
+
+## Task 4: Migrate `respawn-controller.test.ts` to shared mocks
+
+**Estimated effort**: 30 minutes
+**Depends on**: Task 3
+**Files modified**: `test/respawn-controller.test.ts`
+
+### Steps
+
+1. Remove the local `MockSession` class definition (approx. 50 lines).
+2. Add: `import { MockSession } from './mocks/index.js';`
+3. Verify all test methods still exist on the shared mock. The shared mock is a superset, so all existing usage should work.
+4. If the local mock had any test-specific customizations (e.g., extra properties added in `beforeEach`), keep those in the test file as inline assignments on the shared instance.
+5. Run the test to confirm it passes.
+
+### Potential issues
+
+- The local mock's `simulateCompletionMessage()` may have a slightly different output format than the shared mock's (from respawn-test-utils.ts). Verify the respawn controller's completion detection regex matches the shared mock's output pattern (`'\u273b Worked for ...'`).
+- If the local mock adds `pid` or `isWorking` properties that the shared mock doesn't have, add inline assignments in `beforeEach`.
+
+### Verification
+
+```bash
+npx vitest run test/respawn-controller.test.ts
+```
+
+---
+
+## Task 5: Migrate `respawn-team-awareness.test.ts` to shared mocks
+
+**Estimated effort**: 30 minutes
+**Depends on**: Task 3
+**Files modified**: `test/respawn-team-awareness.test.ts`
+
+### Steps
+
+1. Remove the local `MockSession` class definition.
+2. Add: `import { MockSession } from './mocks/index.js';`
+3. Keep `MockTeamWatcher` in this file — it's test-specific and extends the real `TeamWatcher`, not a general-purpose mock.
+4. Run the test to confirm it passes.
+
+### Verification
+
+```bash
+npx vitest run test/respawn-team-awareness.test.ts
+```
+
+---
+
+## Task 6: Create route test scaffold and helpers
+
+**Estimated effort**: 2 hours
+**Depends on**: Task 3
+**Files created**: `test/mocks/mock-route-context.ts`, `test/routes/` directory, `test/routes/_route-test-utils.ts`
+
+### Problem
+
+The 12 route modules in `src/web/routes/` have zero dedicated test coverage. Each route module takes `(app: FastifyInstance, ctx: PortIntersection)` — we need a reusable way to create mock context objects that satisfy the port interfaces.
+
+### Design
+
+Create a `MockRouteContext` factory that builds a mock object satisfying all port interfaces. Each port's methods are `vi.fn()` stubs. Tests can override specific methods as needed.
+
+### Route registration signatures (verified)
+
+Each route module requires a specific port intersection. The mock must satisfy all of them:
+
+| Route Module | Required Ports |
+|-------------|----------------|
+| `registerSessionRoutes` | `SessionPort & EventPort & ConfigPort & InfraPort & AuthPort` |
+| `registerSystemRoutes` | `SessionPort & EventPort & ConfigPort & InfraPort & AuthPort` |
+| `registerRespawnRoutes` | `SessionPort & EventPort & RespawnPort & ConfigPort & InfraPort` |
+| `registerRalphRoutes` | `SessionPort & EventPort & RespawnPort & ConfigPort & InfraPort` |
+| `registerPlanRoutes` | `SessionPort & EventPort & ConfigPort & InfraPort` |
+| `registerCaseRoutes` | `EventPort & ConfigPort` |
+| `registerScheduledRoutes` | `SessionPort & EventPort & InfraPort` |
+| `registerFileRoutes` | `SessionPort` |
+| `registerMuxRoutes` | `InfraPort` |
+| `registerPushRoutes` | `InfraPort` |
+| `registerTeamRoutes` | `InfraPort` |
+| `registerHookEventRoutes` | `EventPort & AuthPort` |
+
+### Implementation
+
+1. Create `test/mocks/mock-route-context.ts`:
+
+```typescript
+/**
+ * Mock context for route handler testing.
+ *
+ * Satisfies ALL port interfaces (SessionPort, EventPort, RespawnPort,
+ * ConfigPort, InfraPort, AuthPort) so any route module can be tested.
+ * Override specific methods in individual tests as needed.
+ *
+ * Verified against actual port interfaces in src/web/ports/:
+ * - SessionPort: 6 methods (sessions, addSession, cleanupSession,
+ *   setupSessionListeners, persistSessionState, persistSessionStateNow,
+ *   getSessionStateWithRespawn)
+ * - EventPort: 5 methods (broadcast, sendPushNotifications, batchTerminalData,
+ *   broadcastSessionStateDebounced, batchTaskUpdate)
+ * - RespawnPort: 2 maps + 4 methods
+ * - ConfigPort: 5 readonly + 7 methods (incl getDefaultClaudeMdPath,
+ *   getLightState, getLightSessionsState, stopTranscriptWatcher)
+ * - InfraPort: 7 readonly + 2 methods (startScheduledRun, stopScheduledRun)
+ * - AuthPort: 3 readonly (authSessions, qrAuthFailures, https)
+ */
+import { vi } from 'vitest';
+import { MockSession, createMockSession } from './mock-session.js';
+
+/**
+ * Creates a mock context that satisfies all port interfaces.
+ * Pre-populated with one session for convenience.
+ */
+export function createMockRouteContext(options?: { sessionId?: string }) {
+  const sessionId = options?.sessionId ?? 'test-session-1';
+  const session = createMockSession(sessionId);
+  const sessions = new Map<string, MockSession>();
+  sessions.set(sessionId, session);
+
+  return {
+    // -- SessionPort --
+    sessions,
+    addSession: vi.fn(),
+    cleanupSession: vi.fn(),
+    setupSessionListeners: vi.fn(),
+    persistSessionState: vi.fn(),
+    persistSessionStateNow: vi.fn(),
+    getSessionStateWithRespawn: vi.fn((s: unknown) => s),
+
+    // -- EventPort --
+    broadcast: vi.fn(),
+    sendPushNotifications: vi.fn(),
+    batchTerminalData: vi.fn(),
+    broadcastSessionStateDebounced: vi.fn(),
+    batchTaskUpdate: vi.fn(),
+
+    // -- RespawnPort --
+    respawnControllers: new Map(),
+    respawnTimers: new Map(),
+    setupRespawnListeners: vi.fn(),
+    setupTimedRespawn: vi.fn(),
+    restoreRespawnController: vi.fn(),
+    saveRespawnConfig: vi.fn(),
+
+    // -- ConfigPort --
+    store: {
+      getConfig: vi.fn(() => ({})),
+      getSessions: vi.fn(() => ({})),
+      getSession: vi.fn(),
+      setSession: vi.fn(),
+      removeSession: vi.fn(),
+      getSettings: vi.fn(() => ({})),
+      setSettings: vi.fn(),
+      getRalphLoopState: vi.fn(() => ({})),
+      setRalphLoopState: vi.fn(),
+      getTasks: vi.fn(() => ({})),
+      save: vi.fn(),
+      load: vi.fn(),
+    },
+    port: 3000,
+    https: false,
+    testMode: true,
+    serverStartTime: Date.now(),
+    getGlobalNiceConfig: vi.fn(async () => undefined),
+    getModelConfig: vi.fn(async () => null),
+    getClaudeModeConfig: vi.fn(async () => ({})),
+    getDefaultClaudeMdPath: vi.fn(async () => undefined),
+    getLightState: vi.fn(() => ({ sessions: [], status: 'ok' })),
+    getLightSessionsState: vi.fn(() => []),
+    startTranscriptWatcher: vi.fn(),
+    stopTranscriptWatcher: vi.fn(),
+
+    // -- InfraPort --
+    mux: {
+      createSession: vi.fn(),
+      killSession: vi.fn(),
+      listSessions: vi.fn(() => []),
+      getStats: vi.fn(() => ({})),
+    },
+    runSummaryTrackers: new Map(),
+    activePlanOrchestrators: new Map(),
+    scheduledRuns: new Map(),
+    teamWatcher: { getTeams: vi.fn(() => []), hasActiveTeammates: vi.fn(() => false) },
+    tunnelManager: null,
+    pushStore: null,
+    startScheduledRun: vi.fn(),
+    stopScheduledRun: vi.fn(),
+
+    // -- AuthPort --
+    authSessions: null,
+    qrAuthFailures: null,
+    // https already declared above in ConfigPort (shared property)
+
+    // Convenience accessors (not part of any port interface)
+    _session: session,
+    _sessionId: sessionId,
+  };
+}
+
+export type MockRouteContext = ReturnType<typeof createMockRouteContext>;
+```
+
+2. Add to `test/mocks/index.ts` barrel:
+
+```typescript
+export { createMockRouteContext, type MockRouteContext } from './mock-route-context.js';
+```
+
+3. Create `test/routes/` directory for route test files.
+
+4. Create `test/routes/_route-test-utils.ts` with Fastify test helpers:
+
+```typescript
+/**
+ * Shared utilities for route testing.
+ *
+ * Creates minimal Fastify instances with just the route module under test
+ * and a mock context. Uses app.inject() for HTTP testing without real ports.
+ */
+import Fastify, { type FastifyInstance } from 'fastify';
+import { createMockRouteContext, type MockRouteContext } from '../mocks/index.js';
+
+export interface RouteTestHarness {
+  app: FastifyInstance;
+  ctx: MockRouteContext;
+}
+
+/**
+ * Creates a Fastify instance with a route module registered against a mock context.
+ *
+ * @param registerFn - The route registration function (e.g., registerSessionRoutes).
+ *   Uses `any` for ctx parameter because route functions expect typed port intersections
+ *   that MockRouteContext satisfies structurally but not nominally.
+ * @param ctxOptions - Optional overrides for the mock context
+ */
+export async function createRouteTestHarness(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  registerFn: (app: FastifyInstance, ctx: any) => void,
+  ctxOptions?: { sessionId?: string },
+): Promise<RouteTestHarness> {
+  const app = Fastify({ logger: false });
+  const ctx = createMockRouteContext(ctxOptions);
+
+  registerFn(app, ctx);
+  await app.ready();
+
+  return { app, ctx };
+}
+```
+
+### Why `ctx: any` in the harness
+
+Route registration functions like `registerSessionRoutes(app, ctx: SessionPort & EventPort & ConfigPort & InfraPort & AuthPort)` expect specific port intersection types. TypeScript won't accept `unknown` here because it's not assignable to the port types. The `MockRouteContext` satisfies the interfaces structurally (it has all the required properties and methods), but since it's not declared as implementing them, we need `any` at the call site. This is the standard pattern for test mocks in TypeScript.
+
+### Verification
+
+```bash
+tsc --noEmit
+```
+
+---
+
+## Task 7: Add session routes tests
+
+**Estimated effort**: 4 hours
+**Depends on**: Task 6
+**Files created**: `test/routes/session-routes.test.ts`
+**Port**: 3220 (only if SSE tests needed; prefer `app.inject()`)
+
+### Coverage targets
+
+`src/web/routes/session-routes.ts` is the largest route module (43 handlers). Focus on the most critical endpoints first:
+
+#### Priority 1: Session CRUD (must test)
+
+| Method | Path | What to test |
+|--------|------|-------------|
+| `GET` | `/api/sessions` | Returns session list; empty when no sessions |
+| `GET` | `/api/sessions/:id` | Returns session state; 404 for unknown ID |
+| `POST` | `/api/sessions` | Creates session; validates workingDir; rejects invalid paths |
+| `DELETE` | `/api/sessions/:id` | Calls cleanupSession; 404 for unknown ID |
+
+#### Priority 2: Session I/O
+
+| Method | Path | What to test |
+|--------|------|-------------|
+| `POST` | `/api/sessions/:id/input` | Sends input to session; validates input length; 404 for unknown |
+| `POST` | `/api/sessions/:id/resize` | Validates cols/rows bounds; 404 for unknown |
+| `GET` | `/api/sessions/:id/buffer` | Returns terminal buffer; 404 for unknown |
+
+#### Priority 3: Session actions
+
+| Method | Path | What to test |
+|--------|------|-------------|
+| `POST` | `/api/sessions/:id/run` | Runs prompt on session |
+| `POST` | `/api/sessions/:id/clear` | Clears session |
+| `POST` | `/api/sessions/:id/compact` | Compacts session |
+| `POST` | `/api/sessions/:id/interactive` | Starts interactive mode |
+| `POST` | `/api/sessions/:id/quick-start` | Quick start flow |
+
+### Test pattern
+
+```typescript
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { createRouteTestHarness, type RouteTestHarness } from './_route-test-utils.js';
+import { registerSessionRoutes } from '../../src/web/routes/session-routes.js';
+
+describe('session-routes', () => {
+  let harness: RouteTestHarness;
+
+  beforeEach(async () => {
+    harness = await createRouteTestHarness(registerSessionRoutes);
+  });
+
+  afterEach(async () => {
+    await harness.app.close();
+  });
+
+  describe('GET /api/sessions', () => {
+    it('returns empty array when no sessions', async () => {
+      harness.ctx.sessions.clear();
+      const res = await harness.app.inject({ method: 'GET', url: '/api/sessions' });
+      expect(res.statusCode).toBe(200);
+      expect(JSON.parse(res.body)).toEqual([]);
+    });
+
+    it('returns session list with one session', async () => {
+      const res = await harness.app.inject({ method: 'GET', url: '/api/sessions' });
+      expect(res.statusCode).toBe(200);
+      const sessions = JSON.parse(res.body);
+      expect(sessions).toHaveLength(1);
+    });
+  });
+
+  describe('GET /api/sessions/:id', () => {
+    it('returns 404 for unknown session', async () => {
+      const res = await harness.app.inject({
+        method: 'GET',
+        url: '/api/sessions/nonexistent',
+      });
+      expect(res.statusCode).toBe(404);
+    });
+  });
+
+  describe('POST /api/sessions/:id/input', () => {
+    it('rejects input exceeding max length', async () => {
+      const res = await harness.app.inject({
+        method: 'POST',
+        url: `/api/sessions/${harness.ctx._sessionId}/input`,
+        payload: { input: 'x'.repeat(65537) },
+      });
+      expect(res.statusCode).toBe(400);
+    });
+  });
+
+  describe('POST /api/sessions/:id/resize', () => {
+    it('rejects cols exceeding max', async () => {
+      const res = await harness.app.inject({
+        method: 'POST',
+        url: `/api/sessions/${harness.ctx._sessionId}/resize`,
+        payload: { cols: 501, rows: 24 },
+      });
+      expect(res.statusCode).toBe(400);
+    });
+  });
+});
+```
+
+### Key assertions to include
+
+- **404 for unknown sessions**: Every `:id` endpoint must return 404 for nonexistent IDs
+- **Input validation**: Bad paths, oversized inputs, invalid resize dimensions
+- **Side effects**: Verify `ctx.broadcast()` was called with correct event type after mutations
+- **Response shape**: Verify response bodies match expected API types
+
+### Verification
+
+```bash
+npx vitest run test/routes/session-routes.test.ts
+```
+
+---
+
+## Task 8: Add system + respawn routes tests
+
+**Estimated effort**: 4 hours
+**Depends on**: Task 6
+**Files created**: `test/routes/system-routes.test.ts`, `test/routes/respawn-routes.test.ts`
+
+### System routes (`src/web/routes/system-routes.ts`)
+
+Focus on status and configuration endpoints:
+
+| Method | Path | What to test |
+|--------|------|-------------|
+| `GET` | `/api/status` | Returns server status with uptime, session count |
+| `GET` | `/api/stats` | Returns mux stats |
+| `GET` | `/api/config` | Returns current config |
+| `PUT` | `/api/config` | Updates config; validates input |
+| `GET` | `/api/settings` | Returns user settings |
+| `PUT` | `/api/settings` | Updates settings; validates input |
+| `GET` | `/api/subagents` | Returns subagent list |
+| `GET` | `/api/screenshots` | Returns screenshot list |
+
+### Respawn routes (`src/web/routes/respawn-routes.ts`)
+
+| Method | Path | What to test |
+|--------|------|-------------|
+| `GET` | `/api/sessions/:id/respawn` | Returns respawn status; null when not configured |
+| `POST` | `/api/sessions/:id/respawn/start` | Starts respawn; 404 for unknown session |
+| `POST` | `/api/sessions/:id/respawn/stop` | Stops respawn; 404 for unknown session |
+| `PUT` | `/api/sessions/:id/respawn/config` | Updates respawn config; validates |
+| `POST` | `/api/sessions/:id/respawn/enable` | Enables respawn loop |
+| `POST` | `/api/sessions/:id/respawn/disable` | Disables respawn loop |
+
+### Test patterns
+
+Same pattern as Task 7 — `createRouteTestHarness` with `registerSystemRoutes` / `registerRespawnRoutes`.
+
+For respawn tests, pre-populate `ctx.respawnControllers` with a mock controller in `beforeEach`:
+
+```typescript
+beforeEach(async () => {
+  harness = await createRouteTestHarness(registerRespawnRoutes);
+  // Add a mock respawn controller for the default session
+  harness.ctx.respawnControllers.set(harness.ctx._sessionId, {
+    getState: vi.fn(() => 'idle'),
+    getConfig: vi.fn(() => ({})),
+    getStatus: vi.fn(() => ({ state: 'idle', health: 100 })),
+    start: vi.fn(),
+    stop: vi.fn(),
+    updateConfig: vi.fn(),
+    enable: vi.fn(),
+    disable: vi.fn(),
+  });
+});
+```
+
+### Verification
+
+```bash
+npx vitest run test/routes/system-routes.test.ts
+npx vitest run test/routes/respawn-routes.test.ts
+```
+
+---
+
+## Task 9: Slim down `respawn-test-utils.ts`
+
+**Estimated effort**: 30 minutes
+**Depends on**: Tasks 4, 5
+**Files modified**: `test/respawn-test-utils.ts`
+
+After Tasks 4–5 are verified passing with shared mocks, slim down `respawn-test-utils.ts` to remove duplicates.
+
+### Steps
+
+1. **Remove** from `respawn-test-utils.ts` what has been moved to shared mocks:
+   - `MockSession` class → now in `test/mocks/mock-session.ts`
+   - `createMockSession()` → now in `test/mocks/mock-session.ts`
+   - `terminalOutputs` → now in `test/mocks/mock-session.ts`
+   - `waitForEvent()` / `createDeferred()` → now in `test/mocks/test-helpers.ts`
+
+2. **Keep** respawn-specific utilities that don't belong in the general mocks:
+   - `TimeController` / `createTimeController()` — respawn-specific timer control
+   - `MockAiIdleChecker` / `MockAiPlanChecker` — respawn-specific AI mocks
+   - `createStateTracker()` / `createEventRecorder()` — respawn state tracking
+   - `FAST_TEST_CONFIG` / `AI_ENABLED_TEST_CONFIG` — respawn config presets
+   - `waitForState()` — respawn state machine waiter
+
+3. **Update imports** in `respawn-test-utils.ts` to re-use shared mocks:
+   ```typescript
+   import { MockSession, createMockSession, terminalOutputs } from './mocks/index.js';
+   import { waitForEvent, createDeferred } from './mocks/index.js';
+   export { MockSession, createMockSession, terminalOutputs, waitForEvent, createDeferred };
+   ```
+
+This preserves backward compatibility for any future tests that import from `respawn-test-utils.ts` directly while eliminating the duplication.
+
+### Verification
+
+```bash
+tsc --noEmit
+npx vitest run test/respawn-controller.test.ts
+npx vitest run test/respawn-team-awareness.test.ts
+```
+
+---
+
+## What is NOT in scope (and why)
+
+### Migrating `session-manager.test.ts` and `ralph-loop.test.ts` mocks
+
+Both files define mocks inside `vi.mock()` factories that replace entire modules:
+
+```typescript
+// session-manager.test.ts — mock replaces ../src/session.js
+vi.mock('../src/session.js', () => {
+  class MockSession extends EventEmitter { ... }
+  return { Session: MockSession };
+});
+
+// ralph-loop.test.ts — mock replaces ../src/state-store.js
+vi.mock('../src/state-store.js', () => {
+  class MockStateStore { ... }
+  return { getStore: vi.fn(() => instance), StateStore: MockStateStore };
+});
+```
+
+These are fundamentally different from the direct-instantiation pattern:
+- The `vi.mock()` factory runs in an isolated scope — outer imports are not available
+- The mock class must be returned with the exact export names (`Session`, `getStore`, `StateStore`)
+- The `session-manager.test.ts` MockSession auto-registers into a shared `mockState.sessions` Map (tight coupling with test setup)
+
+Migrating would require `vi.hoisted()` to share the class between factory and test scope, plus restructuring the test's module-mocking setup. This is high-complexity, high-risk refactoring with limited benefit since these tests already work. The shared `MockStateStore` in `test/mocks/` is available for **new** tests (like route tests) that use direct instantiation instead.
+
+### Full integration tests with real Fastify server
+
+Route tests use `app.inject()` which simulates HTTP without opening ports. Full integration tests that spin up `WebServer`, create real sessions, and stream SSE would be valuable but are a separate effort requiring:
+- A test WebServer factory
+- Session lifecycle management in tests
+- SSE client test utilities
+- Significantly more setup/teardown complexity
+
+### Testing auth middleware in route tests
+
+Route tests bypass authentication (no auth middleware registered on the test Fastify instance). Auth middleware has its own dedicated tests in `auth-security.test.ts` and `qr-auth.test.ts`. Testing auth + routes together is a future integration test concern.
+
+### Testing SSE event streaming
+
+SSE integration requires a running server with `EventSource` client. This is significantly more complex than `app.inject()` tests and is deferred. The existing `sse-events.test.ts` covers SSE patterns.
+
+### Complete route coverage for all 12 modules
+
+This phase covers the 3 highest-value route modules (session, system, respawn — 98 of 162 handlers). The remaining 9 modules (ralph, plan, push, team, mux, file, scheduled, hook-event, case) should be added incrementally in follow-up work.
+
+---
+
+## Summary
+
+| Metric | Before | After |
+|--------|--------|-------|
+| MockSession definitions | 4 (across 4 files) | 1 shared (2 vi.mock() copies remain, intentionally) |
+| MockStateStore definitions | 2 (across 2 files) | 1 shared (2 vi.mock() copies remain, intentionally) |
+| Files importing from `respawn-test-utils.ts` | 0 | Utilities split into `test/mocks/` |
+| Route test files | 0 | 3 (session, system, respawn) |
+| Route handlers with dedicated tests | 0 | ~30 (highest-priority endpoints) |
+| Shared mock directory | None | `test/mocks/` with 5 files + barrel |
+
+### Final verification checklist
+
+```bash
+# Type checking
+tsc --noEmit
+
+# Linting
+npm run lint
+
+# Formatting
+npm run format:check
+
+# Run all affected tests individually
+npx vitest run test/respawn-controller.test.ts
+npx vitest run test/respawn-team-awareness.test.ts
+npx vitest run test/routes/session-routes.test.ts
+npx vitest run test/routes/system-routes.test.ts
+npx vitest run test/routes/respawn-routes.test.ts
+
+# Verify unchanged tests still pass
+npx vitest run test/session-manager.test.ts
+npx vitest run test/ralph-loop.test.ts
+
+# Dev server still starts
+npx tsx src/index.ts web --port 3099 &
+curl -s http://localhost:3099/api/status | jq .status  # "ok"
+kill %1
+```

docs/qr-auth-plan.md

@@ -0,0 +1,723 @@
+# QR Code Authentication Plan
+
+> Ephemeral, single-use auth tokens embedded in the tunnel QR code — scan to auto-authenticate, while the bare tunnel URL stays password-protected.
+
+## Problem
+
+When the Cloudflare tunnel is active, anyone who discovers the `*.trycloudflare.com` URL can access Codeman (they just need the Basic Auth password, or if no password is set, full open access). The QR code currently encodes the raw tunnel URL — it provides no additional security. We want:
+
+1. **Scanning the QR code** → seamless, instant access (no password prompt)
+2. **Having only the URL** → blocked by Basic Auth (no access without credentials)
+
+## Design
+
+### Core Concept: Ephemeral Single-Use QR Tokens
+
+The server maintains a rotating pool of short-lived, single-use tokens. The QR code encodes a short URL containing a lookup code that maps to the real token server-side. When scanned, the server validates the token, atomically consumes it, issues a session cookie, and redirects to `/`. The token is **not** the password — it's a separate, independent, ephemeral authentication pathway.
+
+```
+Desktop   → displays QR (auto-refreshes every 60s via SSE)
+QR Code   → https://abc-xyz.trycloudflare.com/q/Xk9mQ3
+Phone     → scans, GET /q/Xk9mQ3
+Server    → looks up short code via Map (hash-based, timing-safe)
+          → finds token record → validates TTL
+          → atomically consumes token (single-use)
+          → issues codeman_session cookie
+          → 302 redirect to /
+          → SSE push: new QR with embedded SVG for desktop display
+          → desktop toast: "Device [IP] authenticated via QR"
+          → audit log entry to session-lifecycle.jsonl
+User      → lands on app, fully authenticated
+```
+
+Someone who only has `https://abc-xyz.trycloudflare.com/` gets the standard Basic Auth prompt.
+
+### Token Properties
+
+| Property | Value |
+|----------|-------|
+| Length | 32 bytes (256 bits entropy) |
+| Generation | `crypto.randomBytes(32).toString('hex')` |
+| Short code | 6 chars base62, rejection-sampled (no modulo bias) |
+| Short code derivation | Independent random generation (not derived from token) |
+| Storage | In-memory `Map<shortCode, QrTokenRecord>` (no disk persistence) |
+| TTL | 60 seconds (auto-rotation via timer), 90s grace for previous token |
+| Effective window | Up to 90 seconds for the previous token (documented, not hidden) |
+| Usage | **Single-use** — atomically consumed on first valid scan |
+| URL format | Short code in path (`/q/Xk9mQ3`), not query params |
+| URL length | ~53-56 chars total — targets QR Version 4 (33x33) for fast scanning |
+| Scope | Only valid when `CODEMAN_PASSWORD` is set (no point without auth) |
+| Lookup | `Map.get()` — hash-based O(1), no timing side-channel |
+
+### Why This Design?
+
+**Why not embed the password directly?**
+- Password would appear in browser history, Cloudflare edge logs, and URL bars
+- Password can't be rotated independently from QR access
+
+**Why not a long-lived multi-use token? (original design)**
+- A static token is functionally a second password — if the QR image leaks (screenshot shared, shoulder surfing, Cloudflare logs), the attacker has permanent access
+- The USENIX Security 2025 paper ["Demystifying the (In)Security of QR Code-based Login"](https://www.usenix.org/conference/usenixsecurity25/presentation/zhang-xin) found 47 of the top-100 websites vulnerable due to exactly this pattern — missing single-use enforcement and long-lived tokens were 2 of the 6 critical design flaws identified
+
+**Why short codes in the URL path instead of query params?**
+- Query params (`?t=TOKEN`) leak into browser history, address bar, `Referer` headers, and Cloudflare edge logs
+- Path-based short codes (`/q/Xk9mQ3`) are opaque references — the real token never appears in URLs
+- Short codes are 6-char base62 (62^6 = 56.8 billion combinations), sufficient for lookup since they're backed by the full 256-bit token for validation and rate-limited to 10 attempts/IP
+- The short `/q/` path (vs `/qr-auth/`) saves 7 bytes, helping keep the QR at Version 4 (33x33 modules) instead of Version 5 (37x37) — faster scanning on budget phones
+
+## Auth Flow Diagram
+
+```
+┌─────────────┐    scan QR     ┌──────────────────────────────────────┐
+│  Mobile      │ ────────────→ │ GET /q/Xk9mQ3                        │
+│  Device      │               │                                      │
+└─────────────┘               │ 1. Auth middleware sees /q/            │
+                               │    → skips Basic Auth check           │
+                               │ 2. Route handler: Map.get(shortCode)  │
+                               │    → hash-based lookup (timing-safe)  │
+                               │ 3. Checks TTL (90s grace for prev)    │
+                               │    → token not expired?               │
+                               │ 4. Checks consumed flag               │
+                               │    → not already used?                 │
+                               │ 5. Atomically marks token consumed    │
+                               │ 6. Issues codeman_session cookie      │
+                               │ 7. 302 redirect to /                  │
+                               │ 8. Audit log → session-lifecycle.jsonl│
+                               │ 9. SSE push: tunnel:qrRegenerated     │
+                               │    → desktop refreshes QR (SVG inline)│
+                               │ 10. Desktop toast: "Device auth'd"    │
+                               └──────────────────────────────────────┘
+
+┌─────────────┐  replay URL   ┌──────────────────────────────────────┐
+│  Attacker    │ ────────────→ │ GET /q/Xk9mQ3                        │
+│ (stale code) │               │                                      │
+└─────────────┘               │ 1. Map.get(shortCode) → not found     │
+                               │    OR token consumed OR expired       │
+                               │ 2. Increment QR rate limit counter    │
+                               │    (separate from Basic Auth counter) │
+                               │ 3. 401 Unauthorized                   │
+                               └──────────────────────────────────────┘
+
+┌─────────────┐   URL only    ┌──────────────────────────────────────┐
+│  Attacker    │ ────────────→ │ GET /                                │
+│  (no token)  │               │                                      │
+└─────────────┘               │ 1. Auth middleware checks cookie      │
+                               │    → no cookie                        │
+                               │ 2. Checks Basic Auth header           │
+                               │    → no header                        │
+                               │ 3. Returns 401 + WWW-Authenticate    │
+                               │    → Browser shows password popup     │
+                               └──────────────────────────────────────┘
+```
+
+## Implementation
+
+### 1. Token Manager — `src/tunnel-manager.ts`
+
+Add a `QrTokenRecord` type and token rotation logic to `TunnelManager`. The token rotates every 60 seconds. A consumed token is immediately replaced. Up to 2 tokens can be valid simultaneously (current + previous, to handle the race where someone scans right as rotation happens). The previous token has a 90s grace period (not a full extra 60s — only enough to cover the scan-during-rotation race).
+
+**Design decisions from security review:**
+- **Map-based lookup** (not array scan) — `Map.get()` uses hash-based O(1) lookup, eliminating timing side-channels from string comparison
+- **Rejection sampling** for short codes — avoids modulo bias (`256 % 62 != 0` gives 25% overrepresentation for first 6 charset chars)
+- **SVG cache** — stores generated QR SVG per rotation cycle to avoid regenerating on every `/api/tunnel/qr` poll
+- **Separate rate limit counter** — QR auth failures tracked independently from Basic Auth failures
+
+```typescript
+import { randomBytes } from 'node:crypto';
+
+interface QrTokenRecord {
+  token: string;       // 64 hex chars (256 bits)
+  shortCode: string;   // 6 chars base62 (for URL path)
+  createdAt: number;   // Date.now()
+  consumed: boolean;   // single-use flag
+}
+
+const QR_TOKEN_TTL_MS = 60_000;        // 60 seconds
+const QR_TOKEN_GRACE_MS = 90_000;      // 90s grace for previous token (scan-during-rotation)
+const SHORT_CODE_LENGTH = 6;
+const QR_RATE_LIMIT_MAX = 30;          // global rate limit across all IPs
+const QR_RATE_LIMIT_WINDOW_MS = 60_000; // 1 minute window
+
+/** Rejection-sampled short code generation — no modulo bias */
+function generateShortCode(): string {
+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  const maxUnbiased = 248; // largest multiple of 62 that fits in a byte (248 = 62 * 4)
+  const result: string[] = [];
+  while (result.length < SHORT_CODE_LENGTH) {
+    const [byte] = randomBytes(1);
+    if (byte < maxUnbiased) result.push(chars[byte % 62]);
+    // else: discard and re-draw (rejection sampling)
+  }
+  return result.join('');
+}
+
+export class TunnelManager extends EventEmitter {
+  // Map-based lookup: shortCode → QrTokenRecord (timing-safe, no string comparison)
+  private qrTokensByCode = new Map<string, QrTokenRecord>();
+  private currentShortCode: string | null = null;
+  private rotationTimer: ReturnType<typeof setInterval> | null = null;
+
+  // SVG cache — regenerated only on token rotation, not per request
+  private cachedQrSvg: { shortCode: string; svg: string } | null = null;
+
+  // Global rate limit counter (separate from Basic Auth rate limiting)
+  private qrAttemptCount = 0;
+  private qrRateLimitResetTimer: ReturnType<typeof setInterval> | null = null;
+
+  constructor() {
+    super();
+    this.rotateToken();
+    this.rotationTimer = setInterval(() => this.rotateToken(), QR_TOKEN_TTL_MS);
+    this.qrRateLimitResetTimer = setInterval(() => { this.qrAttemptCount = 0; }, QR_RATE_LIMIT_WINDOW_MS);
+  }
+
+  private rotateToken(): void {
+    const record: QrTokenRecord = {
+      token: randomBytes(32).toString('hex'),
+      shortCode: generateShortCode(),
+      createdAt: Date.now(),
+      consumed: false,
+    };
+
+    // Evict expired tokens from the Map
+    const now = Date.now();
+    for (const [code, rec] of this.qrTokensByCode) {
+      if (now - rec.createdAt > QR_TOKEN_GRACE_MS || rec.consumed) {
+        this.qrTokensByCode.delete(code);
+      }
+    }
+
+    this.qrTokensByCode.set(record.shortCode, record);
+    this.currentShortCode = record.shortCode;
+    this.cachedQrSvg = null; // invalidate SVG cache
+    this.emit('qrTokenRotated');
+  }
+
+  /** Get the current (newest) token's short code for QR URL */
+  getCurrentShortCode(): string | undefined {
+    return this.currentShortCode ?? undefined;
+  }
+
+  /** Get cached QR SVG, regenerating only if the short code changed */
+  async getQrSvg(tunnelUrl: string): Promise<string> {
+    const code = this.currentShortCode;
+    if (!code) throw new Error('No QR token available');
+    if (this.cachedQrSvg?.shortCode === code) return this.cachedQrSvg.svg;
+    const QRCode = require('qrcode');
+    const svg = await QRCode.toString(`${tunnelUrl}/q/${code}`, { type: 'svg', margin: 2, width: 256 });
+    this.cachedQrSvg = { shortCode: code, svg };
+    return svg;
+  }
+
+  /**
+   * Validate and atomically consume a token by short code.
+   * Returns { success, ip?, ua? } for audit logging on success.
+   * Map.get() is hash-based — no timing side-channel from string comparison.
+   */
+  consumeToken(shortCode: string): boolean {
+    // Global rate limit (across all IPs)
+    if (this.qrAttemptCount >= QR_RATE_LIMIT_MAX) return false;
+    this.qrAttemptCount++;
+
+    const record = this.qrTokensByCode.get(shortCode);
+    if (!record) return false;
+    if (record.consumed) return false;
+
+    const now = Date.now();
+    if (now - record.createdAt > QR_TOKEN_GRACE_MS) return false;
+
+    // Atomic consume (single-threaded JS = no race)
+    record.consumed = true;
+    // Immediately rotate so desktop gets a fresh QR
+    this.rotateToken();
+    this.emit('qrTokenRegenerated');
+    return true;
+  }
+
+  /** Force-regenerate (manual revocation via API) */
+  regenerateQrToken(): void {
+    // Invalidate all existing tokens
+    this.qrTokensByCode.clear();
+    this.currentShortCode = null;
+    this.rotateToken();
+    this.emit('qrTokenRegenerated');
+  }
+
+  stopRotation(): void {
+    if (this.rotationTimer) {
+      clearInterval(this.rotationTimer);
+      this.rotationTimer = null;
+    }
+    if (this.qrRateLimitResetTimer) {
+      clearInterval(this.qrRateLimitResetTimer);
+      this.qrRateLimitResetTimer = null;
+    }
+  }
+}
+```
+
+### 2. Auth Middleware Bypass — `src/web/middleware/auth.ts`
+
+Add `/q/` to the bypass list (same pattern as `/api/hook-event`). The route handler itself handles token validation and rate limiting.
+
+```typescript
+// In the onRequest hook, add before Basic Auth check:
+if (req.url.startsWith('/q/')) {
+  done();  // Let the route handler deal with token validation
+  return;
+}
+```
+
+**Important**: Unlike `/api/hook-event` (localhost-only), `/q/` must be reachable from any IP (remote devices scan the QR). Rate limiting is handled by two independent mechanisms:
+1. **Per-IP rate limit** — reuses the `authFailures` StaleExpirationMap (10 attempts/IP/15min), but tracked via a **separate counter** from Basic Auth failures (so a user who fat-fingers their password doesn't burn their QR attempts)
+2. **Global path rate limit** — `TunnelManager.qrAttemptCount` caps total QR attempts to 30/minute across all IPs, defending against distributed brute force
+
+### 3. Auto-Auth Route — `src/web/routes/system-routes.ts`
+
+Add `GET /q/:code` as a top-level route (not under `/api/`):
+
+```typescript
+app.get('/q/:code', async (req, reply) => {
+  const shortCode = (req.params as { code: string }).code;
+  const authPassword = process.env.CODEMAN_PASSWORD;
+
+  // No point if auth isn't enabled
+  if (!authPassword) {
+    return reply.redirect('/');
+  }
+
+  // Per-IP rate limit (separate counter from Basic Auth failures)
+  const clientIp = req.ip;
+  const qrFailures = ctx.authState.qrAuthFailures?.get(clientIp) ?? 0;
+  if (qrFailures >= 10) {
+    return reply.code(429).send('Too Many Requests');
+  }
+
+  // Validate and atomically consume the token
+  // consumeToken() also checks the global rate limit (30/min across all IPs)
+  if (!shortCode || !ctx.tunnelManager.consumeToken(shortCode)) {
+    ctx.authState.qrAuthFailures?.set(clientIp, qrFailures + 1);
+    return reply.code(401).send('Invalid or expired QR code');
+  }
+
+  // Issue session cookie (same as Basic Auth success path)
+  const sessionToken = randomBytes(32).toString('hex');
+  const clientUA = req.headers['user-agent'] ?? '';
+  ctx.authState.authSessions?.set(sessionToken, {
+    ip: clientIp,
+    ua: clientUA,
+    createdAt: Date.now(),
+  });
+  ctx.authState.qrAuthFailures?.delete(clientIp);
+
+  // Audit log — write to session-lifecycle.jsonl for forensic analysis
+  ctx.lifecycleLog?.append({
+    event: 'qr_auth',
+    ip: clientIp,
+    ua: clientUA,
+    timestamp: Date.now(),
+    shortCodePrefix: shortCode.slice(0, 3) + '***', // partial for privacy
+  });
+
+  reply.setCookie(AUTH_COOKIE_NAME, sessionToken, {
+    httpOnly: true,
+    secure: ctx.https,
+    sameSite: 'lax',
+    maxAge: 86400,  // 24h
+    path: '/',
+  });
+
+  // Broadcast auth notification — desktop sees who authenticated (QRLjacking detection)
+  broadcast('tunnel:qrAuthUsed', {
+    ip: clientIp,
+    ua: clientUA,
+    timestamp: Date.now(),
+  });
+
+  return reply.redirect('/');
+});
+```
+
+### 4. Update QR Code URL — `src/web/routes/system-routes.ts`
+
+Modify `/api/tunnel/qr` to encode the short-code URL. Uses the `TunnelManager.getQrSvg()` cache — SVG is regenerated only when the token rotates, not on every request.
+
+```typescript
+app.get('/api/tunnel/qr', async (_req, reply) => {
+  const url = ctx.tunnelManager.getUrl();
+  if (!url) {
+    return reply.code(404).send(createErrorResponse(ApiErrorCode.NOT_FOUND, 'Tunnel not running'));
+  }
+
+  const authPassword = process.env.CODEMAN_PASSWORD;
+
+  // If auth is enabled, use the cached SVG with embedded short code
+  if (authPassword) {
+    const svg = await ctx.tunnelManager.getQrSvg(url);
+    return { svg, authEnabled: true };
+  }
+
+  // No auth — just encode the raw tunnel URL
+  const QRCode = require('qrcode');
+  const svg = await QRCode.toString(url, { type: 'svg', margin: 2, width: 256 });
+  return { svg, authEnabled: false };
+});
+```
+
+### 5. Token Regeneration Endpoint — `src/web/routes/system-routes.ts`
+
+Manual revocation — invalidates ALL existing tokens and creates a fresh one:
+
+```typescript
+app.post('/api/tunnel/qr/regenerate', async () => {
+  ctx.tunnelManager.regenerateQrToken();
+  return { success: true };
+});
+```
+
+### 6. Frontend Updates — `src/web/public/app.js`
+
+#### QR Overlay Changes
+
+- **Auto-refresh via inline SVG**: Listen for `tunnel:qrRotated` SSE events which now include the SVG directly in the payload — no extra HTTP fetch needed, sub-50ms refresh on desktop.
+- **Countdown indicator**: Small "expires in Xs" text under the QR that counts down from 60. Reassures the user the QR is live and not stale.
+- **Regenerate button**: "Regenerate QR" button. Calls `POST /api/tunnel/qr/regenerate` — SSE event delivers the new SVG.
+- **Auth badge**: Lock icon or "Single-use auth" label when auth is active.
+- **URL display**: Show the raw tunnel URL (not the auth URL) for manual copy — users who copy the URL authenticate via Basic Auth. The QR is the fast path.
+- **Auth notification toast**: When `tunnel:qrAuthUsed` fires, show a 10-second toast: "Device [IP] authenticated via QR (Safari). Not you? [Revoke]". This is the primary QRLjacking detection mechanism (USENIX Flaw-5).
+
+```javascript
+// Auto-refresh QR on rotation — SVG is inline in the event payload
+addListener('tunnel:qrRotated', (data) => {
+  if (data.svg) {
+    updateQrDisplay(data.svg);  // direct DOM update, no fetch
+  } else {
+    refreshTunnelQR();          // fallback: fetch from API
+  }
+});
+
+// Also refresh on manual regeneration
+addListener('tunnel:qrRegenerated', (data) => {
+  if (data.svg) {
+    updateQrDisplay(data.svg);
+  } else {
+    refreshTunnelQR();
+  }
+});
+
+// QRLjacking detection — notify desktop user when QR is consumed
+addListener('tunnel:qrAuthUsed', (data) => {
+  showNotificationToast(
+    `Device authenticated via QR (${parseUAFamily(data.ua)}, ${data.ip}). Not you?`,
+    {
+      duration: 10000,
+      action: { label: 'Revoke', onClick: () => revokeAllSessions() },
+    }
+  );
+});
+
+// In showTunnelQR(), after fetching /api/tunnel/qr:
+if (data.authEnabled) {
+  const badge = document.createElement('div');
+  badge.textContent = 'Single-use auth \u00b7 refreshes every 60s';
+  badge.style.cssText = 'margin-top:8px;font-size:11px;color:var(--text-secondary)';
+  container.parentElement.appendChild(badge);
+}
+```
+
+#### Welcome Screen QR
+
+Same auto-refresh behavior applies to `_updateWelcomeTunnelBtn()` — the QR is fetched from `/api/tunnel/qr` so token embedding happens automatically.
+
+### 7. SSE Events
+
+Three events for the frontend. QR rotation events embed the SVG directly in the payload to eliminate an extra HTTP fetch — the desktop gets the new QR in a single SSE push (~2-5KB SVG, well within SSE limits).
+
+```typescript
+// In server.ts, listen for tunnelManager events:
+
+// Auto-rotation every 60s — desktop refreshes QR silently (SVG inline)
+tunnelManager.on('qrTokenRotated', async () => {
+  const url = tunnelManager.getUrl();
+  if (url && process.env.CODEMAN_PASSWORD) {
+    const svg = await tunnelManager.getQrSvg(url);
+    broadcast('tunnel:qrRotated', { svg });
+  } else {
+    broadcast('tunnel:qrRotated', {});
+  }
+});
+
+// Manual regeneration or post-consumption — desktop refreshes QR (SVG inline)
+tunnelManager.on('qrTokenRegenerated', async () => {
+  const url = tunnelManager.getUrl();
+  if (url && process.env.CODEMAN_PASSWORD) {
+    const svg = await tunnelManager.getQrSvg(url);
+    broadcast('tunnel:qrRegenerated', { svg });
+  } else {
+    broadcast('tunnel:qrRegenerated', {});
+  }
+});
+
+// QR auth consumed — desktop shows notification toast (QRLjacking detection)
+// Note: this is broadcast from the route handler, not tunnelManager
+// Event: tunnel:qrAuthUsed { ip, ua, timestamp }
+```
+
+### 8. Session Cookie Binding & Revocation
+
+Enhance session records to include device context for audit purposes. The UA is stored for **logging only** — not for blocking.
+
+**Why no UA-family blocking (`majorUAChanged`)?** Security review found this is security theater:
+- UA strings are trivially spoofable by any attacker who can steal a cookie
+- Chrome UA reduction (2022+) makes family detection unreliable
+- Mobile WebView → browser switches trigger false positives on the same device
+- HttpOnly + Secure + SameSite=lax + 24h TTL already protect against cookie theft
+- The attacker who can exfiltrate a cookie can also replay the exact UA
+
+Instead, provide **manual session revocation** as the active defense:
+
+```typescript
+// Session record stores device context for audit logging (not blocking):
+ctx.authState.authSessions?.set(sessionToken, {
+  ip: clientIp,
+  ua: req.headers['user-agent'] ?? '',
+  createdAt: Date.now(),
+  method: 'qr',  // 'qr' | 'basic' — tracks how session was created
+});
+
+// Manual revocation endpoint — kill specific session or all sessions
+app.post('/api/auth/revoke', async (req, reply) => {
+  const { sessionToken: target } = req.body as { sessionToken?: string };
+  if (target) {
+    ctx.authState.authSessions?.delete(target);
+  } else {
+    // Revoke all sessions (nuclear option)
+    ctx.authState.authSessions?.clear();
+  }
+  return { success: true };
+});
+```
+
+**Note**: This is a breaking type change. The `AuthState` interface must be updated from `StaleExpirationMap<string, string>` (token → clientIp) to `StaleExpirationMap<string, { ip, ua, createdAt, method }>`. All session validation code in `auth.ts` must be updated simultaneously.
+
+### 9. Cleanup — `src/tunnel-manager.ts`
+
+Stop the rotation timer in the `stop()` method:
+
+```typescript
+stop(): void {
+  this.stopRotation();
+  // ... existing cleanup
+}
+```
+
+## Security Analysis
+
+### Threat Model
+
+| Threat | Attack Vector | Mitigation | Residual Risk |
+|--------|--------------|------------|---------------|
+| **QR screenshot shared** | Attacker gets image of QR code | Single-use: token consumed on first scan. 60s TTL: expired by the time attacker tries. Desktop toast notification alerts user if someone else scans. | If attacker scans faster than legitimate user (~seconds), they win the race. Low risk: requires physical proximity + speed. User sees notification and can revoke. |
+| **Cloudflare edge logs** | Cloudflare logs the full URL path | Short code is opaque (6-char lookup key), not the real token. Single-use: replaying from logs always fails. 60s TTL (90s grace): expired before log review. `trycloudflare.com` quick tunnels have no customer-accessible logging controls — the privacy implications are inherent to using free quick tunnels. | Cloudflare has TLS termination access regardless. Ephemeral short codes are far less valuable than a permanent token. |
+| **Brute force short code** | Attacker guesses `/q/XXXXXX` | Per-IP rate limiting (10/IP/15min) + global path rate limit (30/min across all IPs). 62^6 = 56.8 billion combinations. Only ~2 valid codes at any time. | Infeasible: expected guesses to hit = ~2.8×10^10, rate limits block well before. |
+| **Replay attack** | Reuse a previously valid URL | Single-use consumption + 60s TTL (90s grace). Old codes always 401. | None — replay is impossible by design. |
+| **QRLjacking** | Attacker displays your QR on phishing site | No companion app = limited mitigation. However: 60s rotation means attacker must relay in real-time. Desktop toast notification ("Device [IP] authenticated via QR. Not you? [Revoke]") provides real-time detection. Self-hosted single-user context makes phishing implausible. | Theoretical risk for multi-user deployments. Mitigated by notification toast for single-user. Note: Signal's linked-device QR flow was exploited by Russian state actors (UNC5792/Sandworm) via quishing in 2025 — but that targeted a multi-user messaging platform, not a self-hosted dev tool. |
+| **Session cookie theft** | XSS or network sniffing steals cookie | HttpOnly + Secure flags. SameSite=lax prevents CSRF. 24h TTL limits exposure window. Manual revocation via `/api/auth/revoke`. | Standard web cookie risks apply. Mitigated by security headers (CSP, etc.). |
+| **Token in server logs** | Access log captures URL path | Log `/q/*` with short code masked or omitted. Configure Fastify logger to redact `/q/` paths. | Path still appears in server access logs (mitigated by masking). |
+| **Timing attack** | Measure response time to leak short code | Map-based lookup (`Map.get()`) — hash-based O(1), no character-by-character timing leak. No string comparison in the hot path. | None — timing side channel eliminated by design. |
+| **Token not in query params** | N/A (this is a mitigation) | Short code in URL path avoids browser history, Referer headers, and address bar exposure. | Path still appears in server access logs (mitigated by masking). |
+| **Distributed brute force** | Multiple IPs guess codes simultaneously | Global rate limit (30/min total across all IPs) in addition to per-IP limit. | Infeasible given keyspace. Global limit prevents botnet-scale attempts. |
+| **CSRF on regenerate** | Cross-origin POST to `/api/tunnel/qr/regenerate` | SameSite=lax cookies are NOT sent with cross-origin POST requests, providing CSRF protection. Endpoint requires authenticated session. | Verify SameSite=lax behavior through cloudflared tunnel. |
+
+### USENIX Security 2025 Flaw Coverage
+
+The [Zhang et al. paper](https://www.usenix.org/conference/usenixsecurity25/presentation/zhang-xin) (USENIX Security 2025, 47 of top-100 websites vulnerable, 42 CVEs) identified 6 critical design flaws. Coverage:
+
+| USENIX Flaw | Status | Implementation |
+|-------------|--------|----------------|
+| Flaw-1: Missing single-use enforcement | **Fixed** | Atomic `consumed` flag, Map-based lookup |
+| Flaw-2: Long-lived tokens | **Fixed** | 60s TTL, 90s grace, auto-rotation |
+| Flaw-3: Predictable QrId generation | **Fixed** | `crypto.randomBytes(32)` — 256-bit entropy, rejection-sampled short codes |
+| Flaw-4: Client-side QrId generation | **Fixed** | Server-side generation only |
+| Flaw-5: Missing status notification | **Fixed** | Desktop toast notification via `tunnel:qrAuthUsed` SSE event. Shows device IP/UA with [Revoke] button. |
+| Flaw-6: Inadequate session binding | **Partial** | IP + UA stored for audit. No cryptographic channel binding (requires companion app / FIDO2 — overkill for single-user). Manual revocation as active defense. |
+
+### Industry Comparison
+
+| Platform | Model | How This Plan Compares |
+|----------|-------|----------------------|
+| **Discord** | Long-lived session token, no confirmation, repeatedly exploited via QRLjacking | **Better** — single-use + TTL + notification toast |
+| **WhatsApp Web** | Pre-authenticated phone confirms "Link device?", ~60s rotation | **Comparable** rotation model; missing WhatsApp's explicit confirmation prompt (acceptable: single-user, no account selection) |
+| **Signal** | Ephemeral public key in QR, E2E encrypted channel via Signal protocol | **Below** — no cryptographic channel binding. Note: Signal's QR flow was exploited by state actors in 2025 despite stronger crypto, showing that protocol strength alone doesn't prevent social engineering. |
+| **1Password** | Noise framework E2E channel, post-quantum pre-shared keys, confirmation codes | **Below** — but 1Password is a credential manager with different threat model. Overkill for a dev tool. |
+| **FIDO2 CTAP 2.2** | BLE proximity + cryptographic binding + biometric verification | **Below** — but requires BLE stack, FIDO server, and companion authenticator. Completely inappropriate here. |
+
+### Comparison to Prior Design
+
+| Property | Original Plan | Current Plan |
+|----------|--------------|--------------|
+| Token TTL | Infinite (until restart) | 60 seconds (90s grace for previous token) |
+| Reuse | Multi-use (same QR works forever) | Single-use (consumed atomically on first scan) |
+| Secret in URL | Query param (`?t=64-char-hex`) | Opaque short code in path (`/q/Xk9mQ3`) |
+| Leak impact | Permanent access until manual revoke | Worthless after first use or 90s, whichever comes first |
+| Desktop QR refresh | Manual only | Auto-refresh every 60s via SSE with inline SVG |
+| Session binding | IP only | IP + UA stored for audit (not blocking). Manual revocation endpoint. |
+| Auth notification | None | Desktop toast: "Device [IP] authenticated via QR. Not you? [Revoke]" |
+| Audit logging | None | `session-lifecycle.jsonl` entry on every QR auth event |
+| Rate limiting | Per-IP only, shared with Basic Auth | Per-IP (separate counter) + global path limit (30/min) |
+| Short code generation | Modulo-biased | Rejection-sampled (no bias) |
+| Short code lookup | Array scan (timing leak) | Map-based O(1) (timing-safe) |
+| Connect latency | ~50ms (localhost only) | ~150-300ms through Cloudflare tunnel (honest estimate) |
+
+### What This Does NOT Protect Against
+
+- **FIDO2/passkey-level phishing resistance**: Would require BLE proximity verification and cryptographic channel binding. Overkill for a self-hosted single-user dev tool. The FIDO2 CTAP 2.2 hybrid transport is the gold standard but requires BLE hardware and a companion authenticator.
+- **Compromised phone**: If the attacker has physical access to the phone that scans, no QR scheme helps.
+- **Compromised Cloudflare tunnel**: Cloudflare terminates TLS and can inspect all traffic. This is inherent to using `trycloudflare.com` quick tunnels — use `--https` for end-to-end encryption if this matters.
+- **State-sponsored quishing**: Sophisticated attackers could create convincing phishing pages that relay the QR in real-time. The 60s rotation and desktop notification toast mitigate this for the single-user case, but a dedicated attacker with social engineering could theoretically succeed within the TTL window.
+
+### Standards Compliance Note
+
+This design is **inspired by but does not conform to** [OASIS SQRAP v1.0](https://docs.oasis-open.org/esat/sqrap/v1.0/cs01/sqrap-v1.0-cs01.html). SQRAP's architecture requires a companion mobile app with stored identity keys, public key channel binding, back-channel authentication, and user presence verification (biometric/PIN). These are fundamentally incompatible with a browser-scan-to-authenticate flow. SQRAP is referenced for awareness of formal QR auth standards, not as a compliance target.
+
+## Performance
+
+The design prioritizes speed on connect. Latency depends on whether the request goes through a Cloudflare tunnel or is localhost:
+
+### Localhost (no tunnel)
+
+| Step | Latency |
+|------|---------|
+| QR scan (physical) | ~1-2s (user action) |
+| `GET /q/:code` → Map.get() lookup + consume | <1ms |
+| Cookie set + 302 redirect | <1ms |
+| Browser follows redirect to `/` | <5ms |
+| **Total (after scan)** | **<10ms** |
+
+### Through Cloudflare Tunnel (typical mobile use case)
+
+Each request traverses: phone → Cloudflare edge (TLS termination) → cloudflared → localhost. The 302 redirect means **two full round trips** through the tunnel.
+
+| Step | Latency |
+|------|---------|
+| QR scan (physical) | ~1-2s (user action) |
+| DNS resolution for `*.trycloudflare.com` | 20-80ms (first request, cached after) |
+| TLS handshake to Cloudflare edge | 50-100ms (first request, 0 with TLS resumption) |
+| `GET /q/:code` through tunnel (request + response) | 30-90ms |
+| Browser follows 302 redirect: `GET /` through tunnel | 30-90ms |
+| **Total first connection (cold)** | **~200-400ms** |
+| **Total subsequent (TLS/DNS cached)** | **~100-200ms** |
+
+This is still fast — **imperceptible after the 1-2s physical QR scan action**. For comparison, VS Code Remote Tunnels (through Azure) adds 20-100ms per hop.
+
+### Why Not Eliminate the Redirect?
+
+The 302 means two round trips. Alternatives considered:
+- **200 + serve `index.html` directly**: URL bar shows `/q/Xk9mQ3`, relative paths break, couples auth to static serving. Not worth the complexity.
+- **200 + `<meta http-equiv="refresh">`**: Still two requests, plus HTML parse delay. Actually slower.
+- **200 + JavaScript redirect**: Same problem, plus fails if JS disabled.
+
+The 302 is clean, universally supported, and the extra 30-90ms is invisible to users.
+
+### QR Code Size Optimization
+
+The URL `https://xxx-yyy.trycloudflare.com/q/Xk9mQ3` is ~53-56 characters. At QR Error Correction Level M:
+
+| QR Version | Grid Size | Byte Capacity | Fits? |
+|------------|-----------|---------------|-------|
+| Version 3 | 29x29 | 42 bytes | No |
+| Version 4 | 33x33 | 62 bytes | Yes (comfortably) |
+| Version 5 | 37x37 | 84 bytes | Yes |
+
+The shortened `/q/` path (vs `/qr-auth/`) and 6-char code (vs 8-char) save 9 bytes, targeting Version 4 (33x33) for faster scanning on budget Android phones. Modern phones scan Version 4 QR codes in 100-300ms — the user action of pointing the camera dominates.
+
+### Desktop QR Refresh
+
+Token rotation SSE events now embed the SVG directly in the payload (~2-5KB). The desktop gets the new QR in a single SSE push — no extra HTTP fetch needed. Refresh latency: **sub-50ms** (SSE adaptive batching at 16-50ms).
+
+### SVG Caching
+
+QR SVG is cached per rotation cycle on `TunnelManager.cachedQrSvg`. The SVG is regenerated only when the token rotates (every 60s), not on every `/api/tunnel/qr` request. SVG format is optimal: resolution-independent (retina-safe), inline-able (no extra HTTP request), ~2-5KB, renders in <1ms.
+
+## Edge Cases
+
+1. **Scan during rotation**: The server keeps 2 tokens (current + previous). If the user scans right as rotation happens, the previous token is still valid for up to 60s more. Seamless.
+
+2. **Server restart**: All tokens cleared (in-memory). New token generated immediately. Tunnel URL also changes (trycloudflare gives a new subdomain), so old QR codes are doubly dead.
+
+3. **Multiple devices**: Each scan consumes the token and triggers a fresh one. To auth a second device, wait for the QR to refresh (≤60s) or hit "Regenerate QR" on the desktop, then scan the new code.
+
+4. **Token without tunnel**: `/qr-auth/:code` works even on localhost. If you have the code and it's valid, you get authenticated regardless of access method.
+
+5. **Tunnel restart (same server)**: Tokens survive tunnel restarts (stored on `TunnelManager` instance). But new tunnel URL = new QR code generated. Short code stays valid until consumed or expired.
+
+6. **Desktop browser closed during scan**: Token is consumed server-side. The scanning phone gets authenticated. When the desktop reopens, SSE reconnects and shows a fresh QR. No state corruption.
+
+7. **Race condition: two phones scan same QR**: First scanner wins (atomic `consumed = true`). Second scanner gets 401. This is correct behavior — single-use by design.
+
+## Files to Modify
+
+| File | Changes |
+|------|---------|
+| `src/tunnel-manager.ts` | `QrTokenRecord` type, `Map<shortCode, record>` token pool, rejection-sampled `generateShortCode()`, rotation timer, `consumeToken()`, `getCurrentShortCode()`, `getQrSvg()` (cached), `regenerateQrToken()`, global rate limit counter, cleanup in `stop()` |
+| `src/web/middleware/auth.ts` | Add `/q/` bypass in `onRequest` hook. Enhance session record type from `string` to `{ ip, ua, createdAt, method }` (**breaking type change** — all consumers must update). Add `qrAuthFailures` StaleExpirationMap (separate from Basic Auth `authFailures`). |
+| `src/web/routes/system-routes.ts` | Modify `/api/tunnel/qr` to use `getQrSvg()` cache. Add `GET /q/:code` with atomic consume, audit log, and `tunnel:qrAuthUsed` broadcast. Add `POST /api/tunnel/qr/regenerate`. Add `POST /api/auth/revoke`. |
+| `src/web/server.ts` | Pass `authState` + `lifecycleLog` to route context. Listen for `qrTokenRotated` and `qrTokenRegenerated` events → broadcast SSE with inline SVG. |
+| `src/web/public/app.js` | Auto-refresh QR from inline SSE SVG payload (no extra fetch). Countdown timer. Regenerate button. Auth badge. Auth notification toast on `tunnel:qrAuthUsed` with [Revoke] action. |
+| `src/session-lifecycle-log.ts` | Add `qr_auth` event type to lifecycle log schema |
+| `src/types/api.ts` | Update `AuthState` interface: `authSessions` value type, add `qrAuthFailures` map |
+
+## Complexity Estimate
+
+Medium change. Core logic (Map-based token pool, rejection-sampled short codes, SVG cache, atomic consumption, cookie issuance, audit logging) is ~120 lines. Rate limiting (separate QR counter + global path limit) adds ~20 lines. SSE plumbing with inline SVG adds ~30 lines. Frontend (inline SVG refresh, auth notification toast with revoke, countdown) is ~40 lines. Auth type migration (session record type change) touches ~10 lines across middleware. No new dependencies — `crypto` and `qrcode` are already available.
+
+## Testing
+
+### Automated
+
+```bash
+# Unit test for token manager
+npx vitest run test/qr-auth.test.ts
+```
+
+Test cases:
+- Token rotation generates unique short codes (6-char, base62)
+- Short codes have uniform character distribution (no modulo bias — verify with chi-squared test over 10K samples)
+- `consumeToken()` returns true on first use, false on second
+- Expired tokens (>90s old) return false
+- Previous token still works during 90s grace period
+- Token at exactly 60s still valid (within grace), token at 91s rejected
+- `regenerateQrToken()` invalidates all existing tokens (Map cleared)
+- Short code lookup is case-sensitive
+- Per-IP rate limiting increments on invalid codes (separate from Basic Auth counter)
+- Global rate limit (30/min) blocks attempts across all IPs
+- SVG cache returns same string for same short code, regenerates on rotation
+- Audit log entry written on successful QR auth
+- `tunnel:qrAuthUsed` SSE event broadcast on successful QR auth
+- `tunnel:qrRotated` SSE event includes inline SVG payload
+- Map-based lookup does not leak timing information (no string comparison in hot path)
+
+### Manual
+
+1. Start server with `CODEMAN_PASSWORD=test`
+2. Enable tunnel
+3. Verify `/api/tunnel/qr` returns QR encoding `https://...trycloudflare.com/q/Xk9mQ3`
+4. Open the QR URL in incognito → should auto-redirect to `/` with session cookie
+5. Verify desktop shows notification toast: "Device [IP] authenticated via QR"
+6. Open the **same** URL again → should get 401 (single-use consumed)
+7. Wait 60s → verify QR display auto-updated (new short code, inline SVG via SSE)
+8. Open just the tunnel URL → should get Basic Auth prompt
+9. Call `POST /api/tunnel/qr/regenerate` → old QR URL returns 401, new QR appears
+10. Verify per-IP rate limiting: 10+ failed `/q/badcode` → 429
+11. Verify Basic Auth failures don't consume QR rate limit budget (and vice versa)
+12. Check `~/.codeman/session-lifecycle.jsonl` for `qr_auth` entries after successful scan
+13. Click [Revoke] on the notification toast → verify session is invalidated
+
+## References
+
+- [USENIX Security 2025: "Demystifying the (In)Security of QR Code-based Login in Real-world Deployments"](https://www.usenix.org/conference/usenixsecurity25/presentation/zhang-xin) — 6 design flaws, 5 attack types, 42 CVEs across 47 of top-100 websites. Primary design reference for this plan.
+- [OWASP QRLJacking](https://owasp.org/www-community/attacks/Qrljacking) — canonical QR session hijacking reference
+- [OASIS SQRAP v1.0 Standard](https://docs.oasis-open.org/esat/sqrap/v1.0/cs01/sqrap-v1.0-cs01.html) — formal standard for secure QR authentication. **Not a compliance target** for this plan (requires companion app + PKI). Referenced for awareness only.
+- [FIDO2 CTAP 2.2 Hybrid Transport](https://fidoalliance.org/specs/fido-v2.2-rd-20230321/fido-client-to-authenticator-protocol-v2.2-rd-20230321.html) — gold standard for cross-device auth (overkill for this use case)
+- [Google GTIG: Signal QR quishing by Russian state actors (2025)](https://cloud.google.com/blog/topics/threat-intelligence/russia-targeting-signal-messenger) — UNC5792/Sandworm exploited Signal's linked-device QR flow via phishing. Demonstrates that even cryptographically strong QR auth can be defeated by social engineering.
+- [CVE-2026-2144: Magic Login QR Code Plugin race condition](https://www.cvedetails.com/cve/CVE-2026-2144/) — QR token stored as predictable static file, race window between creation and deletion. Validates this plan's in-memory-only approach.

eslint.config.js

@@ -0,0 +1,29 @@
+// @ts-check
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  eslint.configs.recommended,
+  tseslint.configs.recommended,
+  {
+    rules: {
+      'no-console': 'off',
+      'no-debugger': 'error',
+      // Relax some rules that conflict with existing patterns
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-unused-vars': 'off', // TypeScript compiler already handles this
+    },
+  },
+  {
+    ignores: [
+      'dist/**',
+      'node_modules/**',
+      'coverage/**',
+      'src/web/public/vendor/**',
+      'src/web/public/app.js',
+      'scripts/**/*.mjs',
+      'tools/**',
+      'remotion/**',
+    ],
+  }
+);

install.sh

@@ -312,6 +312,32 @@ get_opencode_path() {
     done
 }
 
+check_cloudflared() {
+    # Check ~/.local/bin first (matches tunnel-manager.ts resolution order)
+    if [[ -x "$HOME/.local/bin/cloudflared" ]]; then
+        return 0
+    fi
+    if [[ -x "/usr/local/bin/cloudflared" ]]; then
+        return 0
+    fi
+    if command -v cloudflared &>/dev/null; then
+        return 0
+    fi
+    return 1
+}
+
+get_cloudflared_path() {
+    if [[ -x "$HOME/.local/bin/cloudflared" ]]; then
+        echo "$HOME/.local/bin/cloudflared"
+        return
+    fi
+    if [[ -x "/usr/local/bin/cloudflared" ]]; then
+        echo "/usr/local/bin/cloudflared"
+        return
+    fi
+    command -v cloudflared 2>/dev/null
+}
+
 # ============================================================================
 # Dependency Installation
 # ============================================================================
@@ -541,6 +567,82 @@ install_git_suse() {
     run_as_root zypper install -y git
 }
 
+install_cloudflared_macos() {
+    info "Installing cloudflared via Homebrew..."
+    ensure_homebrew
+    brew install cloudflared
+}
+
+install_cloudflared_debian() {
+    info "Installing cloudflared..."
+    ensure_sudo
+    local arch
+    arch="$(dpkg --print-architecture 2>/dev/null || echo "amd64")"
+    local tmp
+    tmp="$(mktemp)"
+    download "https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-$arch.deb" "$tmp"
+    run_as_root dpkg -i "$tmp"
+    rm -f "$tmp"
+}
+
+install_cloudflared_fedora() {
+    info "Installing cloudflared..."
+    ensure_sudo
+    local arch
+    arch="$(uname -m)"
+    local rpm_arch="$arch"
+    [[ "$arch" == "x86_64" ]] && rpm_arch="x86_64"
+    [[ "$arch" == "aarch64" ]] && rpm_arch="aarch64"
+    local tmp
+    tmp="$(mktemp)"
+    download "https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-$rpm_arch.rpm" "$tmp"
+    run_as_root rpm -i "$tmp" || run_as_root rpm -U "$tmp"
+    rm -f "$tmp"
+}
+
+install_cloudflared_arch() {
+    info "Installing cloudflared binary..."
+    local arch
+    arch="$(uname -m)"
+    local cf_arch="amd64"
+    [[ "$arch" == "aarch64" ]] && cf_arch="arm64"
+    [[ "$arch" == "armv7l" ]] && cf_arch="arm"
+    ensure_sudo
+    local tmp
+    tmp="$(mktemp)"
+    download "https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-$cf_arch" "$tmp"
+    run_as_root mv "$tmp" /usr/local/bin/cloudflared
+    run_as_root chmod +x /usr/local/bin/cloudflared
+}
+
+install_cloudflared_alpine() {
+    info "Installing cloudflared binary..."
+    local arch
+    arch="$(uname -m)"
+    local cf_arch="amd64"
+    [[ "$arch" == "aarch64" ]] && cf_arch="arm64"
+    [[ "$arch" == "armv7l" ]] && cf_arch="arm"
+    ensure_sudo
+    local tmp
+    tmp="$(mktemp)"
+    download "https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-$cf_arch" "$tmp"
+    run_as_root mv "$tmp" /usr/local/bin/cloudflared
+    run_as_root chmod +x /usr/local/bin/cloudflared
+}
+
+install_cloudflared_suse() {
+    info "Installing cloudflared..."
+    ensure_sudo
+    local arch
+    arch="$(uname -m)"
+    local rpm_arch="$arch"
+    local tmp
+    tmp="$(mktemp)"
+    download "https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-$rpm_arch.rpm" "$tmp"
+    run_as_root rpm -i "$tmp" || run_as_root rpm -U "$tmp"
+    rm -f "$tmp"
+}
+
 # ============================================================================
 # Interactive Prompts
 # ============================================================================
@@ -733,6 +835,22 @@ EOF
     success "Systemd service installed and started"
 }
 
+setup_tunnel_service() {
+    local service_dir="$HOME/.config/systemd/user"
+    local service_file="$service_dir/codeman-tunnel.service"
+
+    info "Setting up Cloudflare tunnel systemd service..."
+
+    mkdir -p "$service_dir"
+    cp "$INSTALL_DIR/scripts/codeman-tunnel.service" "$service_file"
+
+    systemctl --user daemon-reload
+    systemctl --user enable codeman-tunnel.service 2>/dev/null || true
+
+    success "Tunnel service installed (start with: systemctl --user start codeman-tunnel)"
+    echo -e "  ${DIM}Note: Set CODEMAN_PASSWORD env var before starting the tunnel for security.${NC}"
+}
+
 # ============================================================================
 # Installation Helpers
 # ============================================================================
@@ -915,6 +1033,24 @@ main() {
         fi
     fi
 
+    # cloudflared (optional — for remote/mobile access via Cloudflare Tunnel)
+    info "Checking cloudflared (optional, for remote access)..."
+    if check_cloudflared; then
+        success "cloudflared found at $(get_cloudflared_path)"
+    else
+        if prompt_yes_no "Install cloudflared? (enables remote/mobile access via Cloudflare Tunnel)" "n"; then
+            install_dependency "cloudflared" "$os" "$distro"
+            hash -r 2>/dev/null || true
+            if check_cloudflared; then
+                success "cloudflared installed at $(get_cloudflared_path)"
+            else
+                warn "cloudflared installation failed. You can install it manually later."
+            fi
+        else
+            info "Skipped (you can install cloudflared later for remote access)"
+        fi
+    fi
+
     echo ""
 
     # ========================================================================
@@ -989,18 +1125,7 @@ main() {
     fi
 
     # ========================================================================
-    # Systemd Service (Linux only)
-    # ========================================================================
-
-    if [[ "$os" == "linux" ]] && [[ "$SKIP_SYSTEMD" != "1" ]] && command -v systemctl &>/dev/null; then
-        echo ""
-        if prompt_yes_no "Set up systemd service for auto-start?" "n"; then
-            setup_systemd_service
-        fi
-    fi
-
-    # ========================================================================
-    # Success!
+    # Launch Options
     # ========================================================================
 
     echo ""
@@ -1009,13 +1134,73 @@ main() {
     echo -e "${GREEN}${BOLD}============================================================${NC}"
     echo ""
 
-    # Check if systemd service is running (we just started it above)
-    local service_running=false
-    if systemctl --user is-active codeman-web.service &>/dev/null; then
-        service_running=true
+    local launch_choice=""
+    local has_systemd=false
+
+    if [[ "$os" == "linux" ]] && [[ "$SKIP_SYSTEMD" != "1" ]] && command -v systemctl &>/dev/null; then
+        has_systemd=true
     fi
 
-    if [[ "$service_running" == "true" ]]; then
+    if [[ "$has_systemd" == "true" ]]; then
+        echo -e "  ${BOLD}How would you like to run Codeman?${NC}"
+        echo ""
+        echo -e "    ${CYAN}1)${NC} Run now in this terminal"
+        echo -e "    ${CYAN}2)${NC} Install as systemd service (auto-start on boot)"
+        echo -e "    ${CYAN}3)${NC} Don't start — I'll run it later"
+        echo ""
+
+        if [[ "$NONINTERACTIVE" == "1" ]] || [[ ! -t 0 ]]; then
+            launch_choice="3"
+        else
+            while true; do
+                echo -en "${CYAN}Choose [1/2/3]:${NC} " >&2
+                read -r launch_choice
+                case "$launch_choice" in
+                    1|2|3) break ;;
+                    *) echo "Please enter 1, 2, or 3." >&2 ;;
+                esac
+            done
+        fi
+    else
+        # macOS or no systemd — only offer run now or skip
+        echo -e "  ${BOLD}Would you like to start Codeman now?${NC}"
+        echo ""
+        echo -e "    ${CYAN}1)${NC} Run now in this terminal"
+        echo -e "    ${CYAN}2)${NC} Don't start — I'll run it later"
+        echo ""
+
+        if [[ "$NONINTERACTIVE" == "1" ]] || [[ ! -t 0 ]]; then
+            launch_choice="2"
+        else
+            while true; do
+                echo -en "${CYAN}Choose [1/2]:${NC} " >&2
+                read -r launch_choice
+                case "$launch_choice" in
+                    1) break ;;
+                    2) break ;;
+                    *) echo "Please enter 1 or 2." >&2 ;;
+                esac
+            done
+        fi
+        # Remap: no-systemd choice "2" (skip) → internal "3"
+        [[ "$launch_choice" == "2" ]] && launch_choice="3"
+    fi
+
+    echo ""
+
+    # Handle systemd setup
+    if [[ "$launch_choice" == "2" ]]; then
+        setup_systemd_service
+
+        # Offer tunnel service if cloudflared is available
+        if check_cloudflared && [[ -f "$INSTALL_DIR/scripts/codeman-tunnel.service" ]]; then
+            echo ""
+            if prompt_yes_no "Also set up Cloudflare tunnel service? (requires CODEMAN_PASSWORD)" "n"; then
+                setup_tunnel_service
+            fi
+        fi
+
+        echo ""
         echo -e "  ${GREEN}${BOLD}Codeman is running now!${NC}"
         echo ""
         echo -e "    ${CYAN}# Open in browser${NC}"
@@ -1028,20 +1213,29 @@ main() {
         echo -e "    ${CYAN}systemctl --user status codeman-web${NC}  # Check status"
         echo -e "    ${CYAN}journalctl --user -u codeman-web -f${NC}  # View logs"
         echo ""
-    else
+    fi
+
+    # Show quick-start help for non-service paths
+    if [[ "$launch_choice" != "2" ]]; then
         echo -e "  ${BOLD}Quick Start:${NC}"
         echo ""
-        echo -e "    ${CYAN}# Start the web server${NC}"
-        echo -e "    codeman web"
-        echo ""
-        echo -e "    ${CYAN}# Start with HTTPS (only needed for remote access)${NC}"
-        echo -e "    codeman web --https"
+        echo -e "    ${CYAN}codeman web${NC}            # Start the web server"
+        echo -e "    ${CYAN}codeman web --https${NC}    # With HTTPS (for remote access)"
         echo ""
         echo -e "    ${CYAN}# Open in browser${NC}"
         echo -e "    http://localhost:3000"
         echo ""
     fi
 
+    if check_cloudflared; then
+        echo -e "  ${BOLD}Remote Access (Cloudflare Tunnel):${NC}"
+        echo ""
+        echo -e "    ${CYAN}./scripts/tunnel.sh start${NC}   # Start tunnel"
+        echo -e "    ${CYAN}./scripts/tunnel.sh url${NC}     # Show tunnel URL"
+        echo -e "    ${CYAN}./scripts/tunnel.sh stop${NC}    # Stop tunnel"
+        echo ""
+    fi
+
     echo -e "  ${BOLD}Mobile Access (Termius/SSH):${NC}"
     echo ""
     echo -e "    ${CYAN}sc${NC}              # Interactive tmux session chooser"
@@ -1060,16 +1254,19 @@ main() {
         echo ""
     fi
 
-    # Check if PATH needs reload in user's shell (only relevant if service not running)
-    if [[ "$service_running" != "true" ]]; then
+    # Run now in foreground (must be last — exec replaces the shell)
+    if [[ "$launch_choice" == "1" ]]; then
         local profile
         profile=$(detect_shell_profile)
-        if ! command -v codeman &>/dev/null 2>&1; then
-            echo -e "  ${YELLOW}Run this to start using codeman now:${NC}"
+
+        echo -e "  ${GREEN}${BOLD}Starting Codeman...${NC}"
+        echo -e "  ${DIM}Press Ctrl+C to stop${NC}"
         echo ""
-            echo -e "    ${CYAN}source $profile && codeman web${NC}"
-            echo ""
-        fi
+
+        # Source profile to pick up PATH changes, then exec codeman
+        # shellcheck disable=SC1090
+        source "$profile" 2>/dev/null || true
+        exec node "$INSTALL_DIR/dist/index.js" web
     fi
 }
 
@@ -1095,21 +1292,23 @@ uninstall() {
     info "Uninstalling Codeman..."
     echo ""
 
-    # Stop and remove systemd service
-    if systemctl --user is-active codeman-web.service &>/dev/null; then
-        info "Stopping codeman-web service..."
-        systemctl --user stop codeman-web.service
+    # Stop and remove systemd services
+    for svc in codeman-web codeman-tunnel; do
+        if systemctl --user is-active "${svc}.service" &>/dev/null; then
+            info "Stopping ${svc} service..."
+            systemctl --user stop "${svc}.service"
         fi
-    if systemctl --user is-enabled codeman-web.service &>/dev/null 2>&1; then
-        info "Disabling codeman-web service..."
-        systemctl --user disable codeman-web.service 2>/dev/null || true
+        if systemctl --user is-enabled "${svc}.service" &>/dev/null 2>&1; then
+            info "Disabling ${svc} service..."
+            systemctl --user disable "${svc}.service" 2>/dev/null || true
         fi
-    local service_file="$HOME/.config/systemd/user/codeman-web.service"
-    if [[ -f "$service_file" ]]; then
-        rm -f "$service_file"
+        local svc_file="$HOME/.config/systemd/user/${svc}.service"
+        if [[ -f "$svc_file" ]]; then
+            rm -f "$svc_file"
+            success "Removed ${svc} service"
+        fi
+    done
     systemctl --user daemon-reload 2>/dev/null || true
-        success "Systemd service removed"
-    fi
 
     # Remove symlinks
     local symlink_dir="$HOME/.local/bin"

package.json

@@ -1,29 +1,37 @@
 {
-  "name": "codeman",
-  "version": "0.2.1",
+  "name": "aicodeman",
+  "version": "0.3.5",
   "description": "The missing control plane for AI coding agents - run 20 autonomous agents with real-time monitoring and session persistence",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "bin": {
-    "codeman": "./dist/index.js"
+    "aicodeman": "./dist/index.js"
   },
   "scripts": {
     "postinstall": "node scripts/postinstall.js",
-    "build": "tsc && chmod +x dist/index.js && mkdir -p dist/web dist/templates dist/web/public/vendor && cp -r src/web/public dist/web/ && cp src/templates/case-template.md dist/templates/ && cp node_modules/xterm/css/xterm.css dist/web/public/vendor/ && npx esbuild node_modules/xterm/lib/xterm.js --minify --outfile=dist/web/public/vendor/xterm.min.js && npx esbuild node_modules/xterm-addon-fit/lib/xterm-addon-fit.js --minify --outfile=dist/web/public/vendor/xterm-addon-fit.min.js && cp node_modules/xterm-addon-webgl/lib/xterm-addon-webgl.js dist/web/public/vendor/xterm-addon-webgl.min.js && npx esbuild node_modules/xterm-addon-unicode11/lib/xterm-addon-unicode11.js --minify --outfile=dist/web/public/vendor/xterm-addon-unicode11.min.js && npx esbuild dist/web/public/app.js --minify --drop:console --outfile=dist/web/public/app.js --allow-overwrite && npx esbuild dist/web/public/styles.css --minify --outfile=dist/web/public/styles.css --allow-overwrite && npx esbuild dist/web/public/mobile.css --minify --outfile=dist/web/public/mobile.css --allow-overwrite && for f in dist/web/public/*.js dist/web/public/*.css dist/web/public/*.html dist/web/public/vendor/*.js dist/web/public/vendor/*.css; do [ -f \"$f\" ] && gzip -9 -k -f \"$f\" && { brotli -9 -k -f \"$f\" 2>/dev/null || true; }; done",
+    "build": "node scripts/build.mjs",
     "start": "node dist/index.js",
-    "dev": "tsx src/index.ts",
+    "dev": "tsx src/index.ts web",
     "web": "node dist/index.js web",
     "clean": "rm -rf dist",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
     "typecheck": "tsc --noEmit",
+    "lint": "eslint 'src/**/*.ts'",
+    "lint:fix": "eslint 'src/**/*.ts' --fix",
+    "format": "prettier --write 'src/**/*.ts'",
+    "format:check": "prettier --check 'src/**/*.ts'",
     "capture:subagents": "node scripts/capture-subagent-screenshots.mjs",
     "changeset": "changeset",
     "version-packages": "changeset version",
     "release": "changeset publish"
   },
+  "workspaces": [
+    ".",
+    "packages/*"
+  ],
   "keywords": [
     "claude",
     "claude-code",
@@ -43,15 +51,14 @@
     "@fastify/compress": "^8.3.1",
     "@fastify/cookie": "^11.0.2",
     "@fastify/static": "^8.0.0",
-    "@remotion/cli": "4.0.429",
-    "@remotion/transitions": "4.0.429",
+    "@remotion/compositor-linux-x64-gnu": "^4.0.432",
+    "@rspack/binding-linux-x64-gnu": "^1.7.7",
     "chalk": "^5.3.0",
     "chokidar": "^3.6.0",
     "commander": "^12.1.0",
     "fastify": "^5.1.0",
     "node-pty": "^1.1.0",
     "qrcode": "^1.5.4",
-    "remotion": "4.0.429",
     "uuid": "^10.0.0",
     "web-push": "^3.6.7",
     "xterm": "^5.3.0",
@@ -62,20 +69,28 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.8",
+    "@eslint/js": "^9.0.0",
+    "@remotion/cli": "4.0.429",
+    "@remotion/transitions": "4.0.429",
     "@types/node": "^20.19.33",
     "@types/pngjs": "^6.0.5",
+    "@types/qrcode": "^1.5.6",
     "@types/react": "^19.2.14",
     "@types/uuid": "^10.0.0",
     "@types/web-push": "^3.6.4",
     "@vitest/coverage-v8": "^4.0.18",
     "agent-browser": "^0.6.0",
     "esbuild": "^0.27.3",
+    "eslint": "^9.0.0",
     "pixelmatch": "^6.0.0",
     "playwright": "^1.58.0",
     "pngjs": "^7.0.0",
+    "prettier": "^3.4.0",
     "puppeteer": "^24.36.0",
+    "remotion": "4.0.429",
     "tsx": "^4.15.0",
     "typescript": "^5.9.3",
+    "typescript-eslint": "^8.0.0",
     "vitest": "^4.0.18"
   },
   "engines": {

packages/xterm-zerolag-input/package.json

@@ -17,7 +17,7 @@
     "dist/"
   ],
   "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "build": "tsup",
     "test": "vitest run",
     "typecheck": "tsc --noEmit",
     "prepublishOnly": "npm run build"

packages/xterm-zerolag-input/src/cell-dimensions.ts

@@ -4,18 +4,26 @@ import type { XtermTerminal, CellDimensions } from './types.js';
  * Get cell dimensions from the terminal, handling xterm.js v5 (private API)
  * and v7+ (public API).
  *
+ * Returns CSS-pixel values.  xterm's `device.char` is in device pixels, so
+ * we divide by `devicePixelRatio` to stay consistent with `css.cell`.
+ *
  * Returns `null` if the terminal is not yet rendered or dimensions are
  * unavailable.
  */
 export function getCellDimensions(terminal: XtermTerminal): CellDimensions | null {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const t = terminal as any;
+    const dpr = typeof devicePixelRatio === 'number' && devicePixelRatio > 0
+        ? devicePixelRatio : 1;
 
     // Try v7+ public API first
     if (t.dimensions?.css?.cell) {
+        const cellH = t.dimensions.css.cell.height;
         return {
             width: t.dimensions.css.cell.width,
-            height: t.dimensions.css.cell.height,
+            height: cellH,
+            charTop: (t.dimensions?.device?.char?.top ?? 0) / dpr,
+            charHeight: (t.dimensions?.device?.char?.height ?? (cellH * dpr)) / dpr,
         };
     }
 
@@ -23,9 +31,12 @@ export function getCellDimensions(terminal: XtermTerminal): CellDimensions | nul
     try {
         const dims = t._core?._renderService?.dimensions;
         if (dims?.css?.cell) {
+            const cellH = dims.css.cell.height;
             return {
                 width: dims.css.cell.width,
-                height: dims.css.cell.height,
+                height: cellH,
+                charTop: (dims.device?.char?.top ?? 0) / dpr,
+                charHeight: (dims.device?.char?.height ?? (cellH * dpr)) / dpr,
             };
         }
     } catch {

packages/xterm-zerolag-input/src/overlay-renderer.ts

@@ -1,4 +1,50 @@
-import type { RenderParams, FontStyle } from './types.js';
+import type { RenderParams, FontStyle, XtermTerminal } from './types.js';
+
+// ─── CJK / fullwidth character width detection ───────────────────────
+
+/**
+ * Get visual cell width of a single character.
+ * CJK wide characters occupy 2 cells, others occupy 1.
+ * Prefers the terminal's Unicode addon when available.
+ */
+export function charCellWidth(terminal: XtermTerminal | null | undefined, ch: string): number {
+  if (terminal?.unicode?.getStringCellWidth) {
+    return terminal.unicode.getStringCellWidth(ch);
+  }
+  // Fallback: detect CJK wide characters by Unicode range
+  const code = ch.codePointAt(0);
+  if (
+    code !== undefined &&
+    code >= 0x1100 &&
+    (code <= 0x115f || // Hangul Jamo
+      (code >= 0x2e80 && code <= 0x303e) || // CJK Radicals, Kangxi, Ideographic
+      (code >= 0x3040 && code <= 0x33bf) || // Hiragana, Katakana, Bopomofo, CJK Compat
+      (code >= 0x3400 && code <= 0x4dbf) || // CJK Unified Ext A
+      (code >= 0x4e00 && code <= 0xa4cf) || // CJK Unified, Yi
+      (code >= 0xa960 && code <= 0xa97c) || // Hangul Jamo Extended-A
+      (code >= 0xac00 && code <= 0xd7a3) || // Hangul Syllables
+      (code >= 0xf900 && code <= 0xfaff) || // CJK Compat Ideographs
+      (code >= 0xfe30 && code <= 0xfe6f) || // CJK Compat Forms
+      (code >= 0xff01 && code <= 0xff60) || // Fullwidth Forms
+      (code >= 0xffe0 && code <= 0xffe6) || // Fullwidth Signs
+      (code >= 0x1f000 && code <= 0x1fbff) || // Mahjong, Domino, Emoji
+      (code >= 0x20000 && code <= 0x2ffff) || // CJK Unified Ext B-F
+      (code >= 0x30000 && code <= 0x3ffff)) // CJK Unified Ext G+
+  )
+    return 2;
+  return 1;
+}
+
+/**
+ * Get visual cell width of a string (sum of all character widths).
+ */
+export function stringCellWidth(terminal: XtermTerminal | null | undefined, str: string): number {
+  let w = 0;
+  for (const ch of str) w += charCellWidth(terminal, ch);
+  return w;
+}
+
+// ─── Overlay rendering ────────────────────────────────────────────────
 
 /**
  * Render the overlay content into the container element.
@@ -6,13 +52,28 @@ import type { RenderParams, FontStyle } from './types.js';
  * Creates per-character `<span>` elements positioned on an exact grid
  * matching xterm.js's canvas renderer. This avoids sub-pixel drift that
  * occurs with normal DOM text flow.
+ *
+ * CJK wide characters are rendered with double-width spans.
  */
 export function renderOverlay(container: HTMLDivElement, params: RenderParams): void {
-    const { lines, startCol, totalCols, cellW, cellH, promptRow, font, showCursor, cursorColor } = params;
+  const {
+    lines,
+    startCol,
+    totalCols,
+    cellW,
+    cellH,
+    charTop,
+    charHeight,
+    promptRow,
+    font,
+    showCursor,
+    cursorColor,
+    terminal,
+  } = params;
 
-    // Position container at prompt row
+  // Position container at prompt row.
   container.style.left = '0px';
-    container.style.top = (promptRow * cellH) + 'px';
+  container.style.top = promptRow * cellH + 'px';
 
   // Clear and rebuild (typically 1-3 line divs, negligible cost)
   container.innerHTML = '';
@@ -20,22 +81,22 @@ export function renderOverlay(container: HTMLDivElement, params: RenderParams):
 
   for (let i = 0; i < lines.length; i++) {
     const leftPx = i === 0 ? startCol * cellW : 0;
-        const widthPx = i === 0 ? (fullWidthPx - leftPx) : fullWidthPx;
+    const widthPx = i === 0 ? fullWidthPx - leftPx : fullWidthPx;
     const topPx = i * cellH;
-        const lineEl = makeLine(lines[i], leftPx, topPx, widthPx, cellH, cellW, font);
+    const lineEl = makeLine(lines[i], leftPx, topPx, widthPx, cellH, cellW, charTop, charHeight, font, terminal);
     container.appendChild(lineEl);
   }
 
-    // Block cursor at end of last line
+  // Block cursor at end of last line (use visual width for CJK support)
   if (showCursor) {
     const lastLine = lines[lines.length - 1];
     const lastLineLeft = lines.length === 1 ? startCol : 0;
-        const cursorCol = lastLineLeft + lastLine.length;
+    const cursorCol = lastLineLeft + stringCellWidth(terminal, lastLine);
     if (cursorCol < totalCols) {
       const cursor = document.createElement('span');
       cursor.style.cssText = 'position:absolute;display:inline-block';
-            cursor.style.left = (cursorCol * cellW) + 'px';
-            cursor.style.top = ((lines.length - 1) * cellH) + 'px';
+      cursor.style.left = cursorCol * cellW + 'px';
+      cursor.style.top = (lines.length - 1) * cellH + 'px';
       cursor.style.width = cellW + 'px';
       cursor.style.height = cellH + 'px';
       cursor.style.backgroundColor = cursorColor;
@@ -49,9 +110,8 @@ export function renderOverlay(container: HTMLDivElement, params: RenderParams):
 /**
  * Create a styled line `<div>` with per-character grid positioning.
  *
- * Each character gets its own `<span>` placed at `i * cellW` pixels.
- * This matches xterm's canvas renderer where each glyph occupies exactly
- * one cell width, regardless of the actual glyph metrics.
+ * Each character gets its own `<span>` positioned by visual column offset.
+ * CJK wide characters occupy 2 cell widths.
  */
 function makeLine(
   text: string,
@@ -60,7 +120,10 @@ function makeLine(
   widthPx: number,
   cellH: number,
   cellW: number,
+  _charTop: number,
+  _charHeight: number,
   font: FontStyle,
+  terminal?: XtermTerminal | null
 ): HTMLDivElement {
   const el = document.createElement('div');
   el.style.cssText = 'position:absolute;pointer-events:none';
@@ -68,28 +131,34 @@ function makeLine(
   el.style.left = leftPx + 'px';
   el.style.top = topPx + 'px';
   el.style.width = widthPx + 'px';
-    el.style.height = (cellH + 1) + 'px';
-    el.style.lineHeight = cellH + 'px';
+  // Extend background 1px past cell boundary to cover the compositing
+  // seam between the overlay layer (z-index:7) and the canvas layer below.
+  // The extra 1px lands in the next row's charTop gap (empty area before
+  // text rendering starts), so no canvas content is obscured.
+  el.style.height = cellH + 1 + 'px';
 
-    for (let i = 0; i < text.length; i++) {
+  // CJK wide chars occupy 2 cells — position by visual column offset
+  let colOffset = 0;
+  for (const ch of text) {
+    const cw = charCellWidth(terminal, ch);
     const span = document.createElement('span');
-        // Match xterm.js canvas text rendering:
-        // - antialiased smoothing (canvas uses grayscale, not LCD subpixel)
-        // - geometricPrecision for consistent glyph sizing
-        // - no ligatures (canvas renders each glyph independently)
+    // No ligatures — canvas renders each glyph independently.
     span.style.cssText =
       'position:absolute;display:inline-block;text-align:center;pointer-events:none;' +
-            '-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;' +
-            "text-rendering:geometricPrecision;font-feature-settings:'liga' 0,'calt' 0";
-        span.style.left = (i * cellW) + 'px';
-        span.style.width = cellW + 'px';
+      "font-feature-settings:'liga' 0,'calt' 0";
+    span.style.left = colOffset * cellW + 'px';
+    span.style.top = '0px';
+    span.style.width = cw * cellW + 'px';
+    span.style.height = cellH + 'px';
+    span.style.lineHeight = cellH + 'px';
     span.style.fontFamily = font.fontFamily;
     span.style.fontSize = font.fontSize;
     span.style.fontWeight = font.fontWeight;
     span.style.color = font.color;
     if (font.letterSpacing) span.style.letterSpacing = font.letterSpacing;
-        span.textContent = text[i];
+    span.textContent = ch;
     el.appendChild(span);
+    colOffset += cw;
   }
 
   return el;

packages/xterm-zerolag-input/src/types.ts

@@ -22,11 +22,18 @@ export interface XtermTerminal {
     readonly active: {
       readonly viewportY: number;
       readonly baseY: number;
-            getLine(y: number): {
+      getLine(y: number):
+        | {
             translateToString(trimRight?: boolean): string;
-            } | undefined;
+          }
+        | undefined;
     };
   };
+  /** Unicode addon (e.g. Unicode11Addon) for CJK wide character width */
+  readonly unicode?: {
+    getStringCellWidth(str: string): number;
+    activeVersion?: string;
+  };
 }
 
 /**
@@ -137,6 +144,10 @@ export interface ZerolagInputState {
 export interface CellDimensions {
   width: number;
   height: number;
+  /** Vertical offset (px) from cell top to where characters render. */
+  charTop: number;
+  /** Height of the character rendering area (px). */
+  charHeight: number;
 }
 
 /** Parameters for the overlay renderer. */
@@ -146,10 +157,16 @@ export interface RenderParams {
   totalCols: number;
   cellW: number;
   cellH: number;
+  /** Vertical offset (px) from cell top to character rendering area. */
+  charTop: number;
+  /** Height of the character rendering area (px). */
+  charHeight: number;
   promptRow: number;
   font: FontStyle;
   showCursor: boolean;
   cursorColor: string;
+  /** Terminal instance for CJK wide character width detection */
+  terminal?: XtermTerminal | null;
 }
 
 /** Cached font style properties for overlay rendering. */

packages/xterm-zerolag-input/src/zerolag-input-addon.ts

@@ -9,7 +9,7 @@ import type {
 } from './types.js';
 import { getCellDimensions } from './cell-dimensions.js';
 import { findPrompt, readTextAfterPrompt } from './prompt-finder.js';
-import { renderOverlay } from './overlay-renderer.js';
+import { renderOverlay, charCellWidth } from './overlay-renderer.js';
 
 const DEFAULT_PROMPT: PromptFinder = { type: 'character', char: '>', offset: 2 };
 const DEFAULT_Z_INDEX = 7;
@@ -59,9 +59,8 @@ const DEFAULT_CURSOR = '#e0e0e0';
 export class ZerolagInputAddon implements XtermAddon {
   private _terminal: XtermTerminal | null = null;
   private _overlay: HTMLDivElement | null = null;
-    private _options: Required<
-        Pick<ZerolagInputOptions, 'zIndex' | 'showCursor' | 'scrollDebounceMs'>
-    > & ZerolagInputOptions;
+  private _options: Required<Pick<ZerolagInputOptions, 'zIndex' | 'showCursor' | 'scrollDebounceMs'>> &
+    ZerolagInputOptions;
 
   // Text state
   private _pendingText = '';
@@ -110,8 +109,7 @@ export class ZerolagInputAddon implements XtermAddon {
 
     // Create overlay container
     this._overlay = document.createElement('div');
-        this._overlay.style.cssText =
-            `position:absolute;z-index:${this._options.zIndex};pointer-events:none;display:none`;
+    this._overlay.style.cssText = `position:absolute;z-index:${this._options.zIndex};pointer-events:none;display:none`;
 
     // Insert into xterm DOM
     const screen = terminal.element?.querySelector('.xterm-screen');
@@ -140,7 +138,9 @@ export class ZerolagInputAddon implements XtermAddon {
             this._render();
           }, this._options.scrollDebounceMs);
         }
-            } catch { /* ignore */ }
+      } catch {
+        /* ignore */
+      }
     };
 
     const viewport = terminal.element?.querySelector('.xterm-viewport');
@@ -380,6 +380,20 @@ export class ZerolagInputAddon implements XtermAddon {
     this._bufferDetectDone = true;
   }
 
+  // ─── Prompt configuration ──────────────────────────────────────────
+
+  /**
+   * Change the prompt detection strategy at runtime.
+   * Call this when switching between CLI modes (e.g., Claude Code vs OpenCode)
+   * that use different prompt characters.
+   */
+  setPrompt(finder: PromptFinder): void {
+    this._options.prompt = finder;
+    this._lastPromptPos = null;
+    this._lastRenderKey = '';
+    if (this._pendingText || this._flushedOffset > 0) this._render();
+  }
+
   // ─── Prompt utilities ─────────────────────────────────────────────
 
   /**
@@ -452,7 +466,9 @@ export class ZerolagInputAddon implements XtermAddon {
         this._bufferDetectDone = true;
         return afterPrompt;
       }
-        } catch { /* ignore */ }
+    } catch {
+      /* ignore */
+    }
 
     return null;
   }
@@ -464,14 +480,8 @@ export class ZerolagInputAddon implements XtermAddon {
     this._font.fontFamily = t.options.fontFamily || 'monospace';
     this._font.fontSize = (t.options.fontSize || 14) + 'px';
     this._font.fontWeight = String(t.options.fontWeight || 'normal');
-        this._font.backgroundColor =
-            this._options.backgroundColor ??
-            t.options.theme?.background ??
-            DEFAULT_BG;
-        this._font.color =
-            this._options.foregroundColor ??
-            t.options.theme?.foreground ??
-            DEFAULT_FG;
+    this._font.backgroundColor = this._options.backgroundColor ?? t.options.theme?.background ?? DEFAULT_BG;
+    this._font.color = this._options.foregroundColor ?? t.options.theme?.foreground ?? DEFAULT_FG;
     this._font.letterSpacing = '';
 
     // Prefer computed styles from rendered rows (matches actual rendering)
@@ -531,7 +541,7 @@ export class ZerolagInputAddon implements XtermAddon {
         return;
       }
 
-            const { width: cellW, height: cellH } = dims;
+      const { width: cellW, height: cellH, charTop, charHeight } = dims;
       const totalCols = this._terminal.cols;
       const offset = this._getPromptOffset();
       const startCol = activePrompt.col + offset;
@@ -559,21 +569,39 @@ export class ZerolagInputAddon implements XtermAddon {
       if (renderKey === this._lastRenderKey && this._overlay.style.display !== 'none') return;
       this._lastRenderKey = renderKey;
 
-            // Split text into visual lines matching terminal character-wrap
+      // Split into visual lines by column width (CJK wide chars = 2 cols)
       const firstLineCols = Math.max(1, totalCols - startCol);
+      const chars = [...displayText]; // proper Unicode iteration
       const lines: string[] = [];
-            let remaining = displayText;
-            lines.push(remaining.slice(0, firstLineCols));
-            remaining = remaining.slice(firstLineCols);
-            while (remaining.length > 0) {
-                lines.push(remaining.slice(0, totalCols));
-                remaining = remaining.slice(totalCols);
+      let ci = 0;
+      // First line: remaining columns after prompt
+      {
+        let lineStr = '';
+        let lineCols = 0;
+        while (ci < chars.length) {
+          const cw = charCellWidth(this._terminal, chars[ci]);
+          if (lineCols + cw > firstLineCols) break;
+          lineStr += chars[ci];
+          lineCols += cw;
+          ci++;
+        }
+        lines.push(lineStr);
+      }
+      // Subsequent lines: full terminal width
+      while (ci < chars.length) {
+        let lineStr = '';
+        let lineCols = 0;
+        while (ci < chars.length) {
+          const cw = charCellWidth(this._terminal, chars[ci]);
+          if (lineCols + cw > totalCols) break;
+          lineStr += chars[ci];
+          lineCols += cw;
+          ci++;
+        }
+        lines.push(lineStr);
       }
 
-            const cursorColor =
-                this._options.cursorColor ??
-                this._terminal.options.theme?.cursor ??
-                DEFAULT_CURSOR;
+      const cursorColor = this._options.cursorColor ?? this._terminal.options.theme?.cursor ?? DEFAULT_CURSOR;
 
       renderOverlay(this._overlay, {
         lines,
@@ -581,10 +609,13 @@ export class ZerolagInputAddon implements XtermAddon {
         totalCols,
         cellW,
         cellH,
+        charTop,
+        charHeight,
         promptRow: activePrompt.row,
         font: this._font,
         showCursor: this._options.showCursor,
         cursorColor,
+        terminal: this._terminal,
       });
     } catch {
       // Hide on render error but preserve pendingText —

packages/xterm-zerolag-input/test/cell-dimensions.test.ts

@@ -0,0 +1,127 @@
+import { describe, it, expect, afterEach, beforeEach } from 'vitest';
+import { getCellDimensions } from '../src/cell-dimensions.js';
+import { createMockTerminal } from './helpers.js';
+import type { XtermTerminal } from '../src/types.js';
+
+let cleanups: (() => void)[] = [];
+
+afterEach(() => {
+    for (const fn of cleanups) fn();
+    cleanups = [];
+});
+
+describe('getCellDimensions', () => {
+    describe('v5 private API (mock _core._renderService)', () => {
+        it('returns cell width and height from css.cell', () => {
+            const mock = createMockTerminal({ cellWidth: 8.4, cellHeight: 19 });
+            cleanups.push(mock.cleanup);
+            const dims = getCellDimensions(mock.terminal as unknown as XtermTerminal);
+            expect(dims).not.toBeNull();
+            expect(dims!.width).toBe(8.4);
+            expect(dims!.height).toBe(19);
+        });
+
+        it('returns charTop from device.char.top divided by DPR', () => {
+            const mock = createMockTerminal({
+                cellWidth: 8, cellHeight: 19,
+                deviceCharTop: 2,
+            });
+            cleanups.push(mock.cleanup);
+            const dims = getCellDimensions(mock.terminal as unknown as XtermTerminal);
+            expect(dims).not.toBeNull();
+            // DPR=1 in jsdom, so charTop = 2 / 1 = 2
+            expect(dims!.charTop).toBe(2);
+        });
+
+        it('returns charHeight from device.char.height divided by DPR', () => {
+            const mock = createMockTerminal({
+                cellWidth: 8, cellHeight: 19,
+                deviceCharHeight: 16,
+            });
+            cleanups.push(mock.cleanup);
+            const dims = getCellDimensions(mock.terminal as unknown as XtermTerminal);
+            expect(dims).not.toBeNull();
+            // DPR=1, so charHeight = 16 / 1 = 16
+            expect(dims!.charHeight).toBe(16);
+        });
+
+        it('defaults charTop to 0 when device.char not present', () => {
+            // Default mock has deviceCharTop=0
+            const mock = createMockTerminal({ cellWidth: 8, cellHeight: 19 });
+            cleanups.push(mock.cleanup);
+            const dims = getCellDimensions(mock.terminal as unknown as XtermTerminal);
+            expect(dims!.charTop).toBe(0);
+        });
+
+        it('defaults charHeight to cellH when device.char.height not set', () => {
+            // Default mock has deviceCharHeight=cellH
+            const mock = createMockTerminal({ cellWidth: 8, cellHeight: 19 });
+            cleanups.push(mock.cleanup);
+            const dims = getCellDimensions(mock.terminal as unknown as XtermTerminal);
+            expect(dims!.charHeight).toBe(19);
+        });
+    });
+
+    describe('DPR simulation', () => {
+        const originalDPR = globalThis.devicePixelRatio;
+
+        beforeEach(() => {
+            // Set DPR=2 to test division
+            Object.defineProperty(globalThis, 'devicePixelRatio', {
+                value: 2,
+                writable: true,
+                configurable: true,
+            });
+        });
+
+        afterEach(() => {
+            Object.defineProperty(globalThis, 'devicePixelRatio', {
+                value: originalDPR,
+                writable: true,
+                configurable: true,
+            });
+        });
+
+        it('divides device.char.top by DPR', () => {
+            const mock = createMockTerminal({
+                cellWidth: 16, cellHeight: 38,
+                deviceCharTop: 4,
+                deviceCharHeight: 32,
+            });
+            cleanups.push(mock.cleanup);
+            const dims = getCellDimensions(mock.terminal as unknown as XtermTerminal);
+            expect(dims).not.toBeNull();
+            // charTop = 4 / 2 = 2
+            expect(dims!.charTop).toBe(2);
+            // charHeight = 32 / 2 = 16
+            expect(dims!.charHeight).toBe(16);
+        });
+    });
+
+    describe('null cases', () => {
+        it('returns null for terminal without _core', () => {
+            const terminal = {
+                element: document.createElement('div'),
+                cols: 80,
+                rows: 24,
+                options: {},
+                buffer: { active: { viewportY: 0, baseY: 0, getLine: () => undefined } },
+            } as unknown as XtermTerminal;
+            const dims = getCellDimensions(terminal);
+            expect(dims).toBeNull();
+        });
+
+        it('returns null for terminal with no dimensions', () => {
+            const terminal = {
+                element: document.createElement('div'),
+                cols: 80,
+                rows: 24,
+                options: {},
+                buffer: { active: { viewportY: 0, baseY: 0, getLine: () => undefined } },
+                _core: { _renderService: {} },
+            } as unknown as XtermTerminal;
+            const dims = getCellDimensions(terminal);
+            expect(dims).toBeNull();
+        });
+    });
+});

packages/xterm-zerolag-input/test/cjk-testplan.test.ts

@@ -0,0 +1,843 @@
+/**
+ * Comprehensive CJK wide character test plan for PR #30.
+ *
+ * Tests all 7 items from the test plan:
+ * 1. Chinese text input — no character overlap
+ * 2. CJK text renders with correct double-width spacing
+ * 3. Japanese (こんにちは) and Korean (안녕하세요) input
+ * 4. Cursor positions correctly after CJK characters
+ * 5. Long CJK input wraps at correct column boundary
+ * 6. Existing ASCII input is unaffected
+ * 7. Teammate terminal panels render CJK correctly (app.js embedded copy)
+ */
+
+import { describe, it, expect, afterEach } from 'vitest';
+import { renderOverlay, charCellWidth, stringCellWidth } from '../src/overlay-renderer.js';
+import type { RenderParams, FontStyle } from '../src/types.js';
+import { createMockTerminal } from './helpers.js';
+import { ZerolagInputAddon } from '../src/zerolag-input-addon.js';
+
+// ─── Shared fixtures ─────────────────────────────────────────────────
+
+const FONT: FontStyle = {
+  fontFamily: 'monospace',
+  fontSize: '14px',
+  fontWeight: 'normal',
+  color: '#eeeeee',
+  backgroundColor: '#0d0d0d',
+  letterSpacing: '',
+};
+
+function makeParams(overrides: Partial<RenderParams> = {}): RenderParams {
+  return {
+    lines: ['hello'],
+    startCol: 2,
+    totalCols: 80,
+    cellW: 10,
+    cellH: 17,
+    charTop: 2,
+    charHeight: 14,
+    promptRow: 0,
+    font: FONT,
+    showCursor: true,
+    cursorColor: '#e0e0e0',
+    ...overrides,
+  };
+}
+
+/** Extract span data from a rendered line div */
+function getSpans(lineDiv: HTMLDivElement) {
+  const spans: { text: string; left: number; width: number }[] = [];
+  for (let i = 0; i < lineDiv.children.length; i++) {
+    const span = lineDiv.children[i] as HTMLSpanElement;
+    spans.push({
+      text: span.textContent || '',
+      left: parseFloat(span.style.left),
+      width: parseFloat(span.style.width),
+    });
+  }
+  return spans;
+}
+
+// ─── Addon setup helpers ─────────────────────────────────────────────
+
+let cleanups: (() => void)[] = [];
+
+afterEach(() => {
+  for (const fn of cleanups) fn();
+  cleanups = [];
+});
+
+function tracked(lines: string[] = ['$ '], promptChar = '$') {
+  const mock = createMockTerminal({ buffer: { lines }, cols: 80 });
+  const addon = new ZerolagInputAddon({
+    prompt: { type: 'character', char: promptChar, offset: 2 },
+  });
+  mock.terminal.loadAddon(addon);
+  cleanups.push(() => {
+    addon.dispose();
+    mock.cleanup();
+  });
+  return { addon, mock };
+}
+
+// ═══════════════════════════════════════════════════════════════════════
+// TEST 1: Chinese text input — no character overlap
+// ═══════════════════════════════════════════════════════════════════════
+
+describe('Test 1: Chinese text — no character overlap', () => {
+  it('consecutive Chinese characters have contiguous non-overlapping spans', () => {
+    const container = document.createElement('div');
+    const text = '你好世界';
+    renderOverlay(container, makeParams({ lines: [text], cellW: 10 }));
+
+    const lineDiv = container.children[0] as HTMLDivElement;
+    const spans = getSpans(lineDiv);
+
+    expect(spans.length).toBe(4);
+
+    // Each span: left = previous span's (left + width), width = 20px (2 cells)
+    for (let i = 0; i < spans.length; i++) {
+      expect(spans[i].width).toBe(20); // 2 cells * 10px
+      if (i > 0) {
+        const expectedLeft = spans[i - 1].left + spans[i - 1].width;
+        expect(spans[i].left).toBe(expectedLeft);
+      }
+    }
+  });
+
+  it('Chinese sentence (simulated pinyin output) renders without gaps or overlaps', () => {
+    const container = document.createElement('div');
+    const text = '我是一个测试';
+    renderOverlay(container, makeParams({ lines: [text], cellW: 8 }));
+
+    const lineDiv = container.children[0] as HTMLDivElement;
+    const spans = getSpans(lineDiv);
+
+    expect(spans.length).toBe(6);
+
+    // Verify contiguous positioning
+    let expectedLeft = 0;
+    for (const span of spans) {
+      expect(span.left).toBe(expectedLeft);
+      expect(span.width).toBe(16); // 2 * 8px
+      expectedLeft += span.width;
+    }
+
+    // Total visual width should be 6 chars * 2 cells * 8px = 96px
+    expect(expectedLeft).toBe(96);
+  });
+
+  it('mixed Chinese + ASCII has no gaps between spans', () => {
+    const container = document.createElement('div');
+    const text = 'hello你好world';
+    renderOverlay(container, makeParams({ lines: [text], cellW: 10 }));
+
+    const lineDiv = container.children[0] as HTMLDivElement;
+    const spans = getSpans(lineDiv);
+
+    // h(10) e(10) l(10) l(10) o(10) 你(20) 好(20) w(10) o(10) r(10) l(10) d(10)
+    expect(spans.length).toBe(12);
+
+    // Verify contiguity: no gaps between any adjacent spans
+    for (let i = 1; i < spans.length; i++) {
+      const prevEnd = spans[i - 1].left + spans[i - 1].width;
+      expect(spans[i].left).toBe(prevEnd);
+    }
+  });
+
+  it('addChar with Chinese characters accumulates correctly in addon', () => {
+    const { addon } = tracked();
+    for (const ch of '你好世界') {
+      addon.addChar(ch);
+    }
+    expect(addon.pendingText).toBe('你好世界');
+    expect(addon.hasPending).toBe(true);
+  });
+});
+
+// ═══════════════════════════════════════════════════════════════════════
+// TEST 2: CJK text renders with correct double-width spacing
+// ═══════════════════════════════════════════════════════════════════════
+
+describe('Test 2: CJK double-width spacing', () => {
+  it('charCellWidth returns 2 for CJK Unified Ideographs (0x4E00-0x9FFF)', () => {
+    // Common Chinese characters
+    const chars = '中文测试你好世界天地人';
+    for (const ch of chars) {
+      expect(charCellWidth(null, ch)).toBe(2);
+    }
+  });
+
+  it('charCellWidth returns 2 for CJK Extension A (0x3400-0x4DBF)', () => {
+    expect(charCellWidth(null, '\u3400')).toBe(2); // First Extension A char
+    expect(charCellWidth(null, '\u4DB5')).toBe(2); // One of the last Extension A chars
+  });
+
+  it('charCellWidth returns 2 for CJK Radicals (0x2E80-0x2EFF)', () => {
+    expect(charCellWidth(null, '\u2E80')).toBe(2); // CJK Radical Repeat
+  });
+
+  it('charCellWidth returns 2 for fullwidth ASCII forms (0xFF01-0xFF5E)', () => {
+    expect(charCellWidth(null, '\uFF01')).toBe(2); // ！
+    expect(charCellWidth(null, '\uFF21')).toBe(2); // Ａ
+    expect(charCellWidth(null, '\uFF41')).toBe(2); // ａ
+    expect(charCellWidth(null, '\uFF10')).toBe(2); // ０
+  });
+
+  it('charCellWidth returns 2 for CJK Compatibility Ideographs (0xF900-0xFAFF)', () => {
+    expect(charCellWidth(null, '\uF900')).toBe(2);
+  });
+
+  it('stringCellWidth calculates correct visual width for CJK strings', () => {
+    expect(stringCellWidth(null, '你好')).toBe(4); // 2 + 2
+    expect(stringCellWidth(null, '你好世界')).toBe(8); // 4 * 2
+    expect(stringCellWidth(null, 'hi你好')).toBe(6); // 1 + 1 + 2 + 2
+    expect(stringCellWidth(null, '你a好b')).toBe(6); // 2 + 1 + 2 + 1
+    expect(stringCellWidth(null, 'abc你好def')).toBe(10); // 3 + 4 + 3
+  });
+
+  it('CJK span widths are exactly 2 * cellW pixels', () => {
+    const container = document.createElement('div');
+    renderOverlay(container, makeParams({ lines: ['你'], cellW: 8.4 }));
+    const lineDiv = container.children[0] as HTMLDivElement;
+    const span = lineDiv.children[0] as HTMLSpanElement;
+    expect(span.style.width).toBe('16.8px'); // 2 * 8.4
+  });
+
+  it('ASCII span widths remain 1 * cellW pixels', () => {
+    const container = document.createElement('div');
+    renderOverlay(container, makeParams({ lines: ['a'], cellW: 8.4 }));
+    const lineDiv = container.children[0] as HTMLDivElement;
+    const span = lineDiv.children[0] as HTMLSpanElement;
+    expect(span.style.width).toBe('8.4px'); // 1 * 8.4
+  });
+
+  it('terminal unicode addon is preferred over fallback when available', () => {
+    const mockTerminal = {
+      unicode: {
+        getStringCellWidth: (s: string) => {
+          // Custom width: treat 'W' as wide
+          return s === 'W' ? 2 : 1;
+        },
+      },
+    } as any;
+    expect(charCellWidth(mockTerminal, 'W')).toBe(2);
+    expect(charCellWidth(mockTerminal, 'a')).toBe(1);
+    // Fallback ignores terminal addon result for actual CJK
+    expect(charCellWidth(null, '你')).toBe(2);
+  });
+});
+
+// ═══════════════════════════════════════════════════════════════════════
+// TEST 3: Japanese (こんにちは) and Korean (안녕하세요) input
+// ═══════════════════════════════════════════════════════════════════════
+
+describe('Test 3: Japanese and Korean input', () => {
+  describe('Japanese', () => {
+    it('charCellWidth returns 2 for Hiragana (0x3040-0x309F)', () => {
+      const hiragana = 'あいうえおかきくけこさしすせそ';
+      for (const ch of hiragana) {
+        expect(charCellWidth(null, ch)).toBe(2);
+      }
+    });
+
+    it('charCellWidth returns 2 for Katakana (0x30A0-0x30FF)', () => {
+      const katakana = 'アイウエオカキクケコサシスセソ';
+      for (const ch of katakana) {
+        expect(charCellWidth(null, ch)).toBe(2);
+      }
+    });
+
+    it('Japanese greeting renders with correct span positions', () => {
+      const container = document.createElement('div');
+      const text = 'こんにちは';
+      renderOverlay(container, makeParams({ lines: [text], cellW: 10 }));
+
+      const lineDiv = container.children[0] as HTMLDivElement;
+      const spans = getSpans(lineDiv);
+
+      expect(spans.length).toBe(5);
+      // こ(0,20) ん(20,20) に(40,20) ち(60,20) は(80,20)
+      expect(spans[0]).toEqual({ text: 'こ', left: 0, width: 20 });
+      expect(spans[1]).toEqual({ text: 'ん', left: 20, width: 20 });
+      expect(spans[2]).toEqual({ text: 'に', left: 40, width: 20 });
+      expect(spans[3]).toEqual({ text: 'ち', left: 60, width: 20 });
+      expect(spans[4]).toEqual({ text: 'は', left: 80, width: 20 });
+    });
+
+    it('mixed Japanese + ASCII positions correctly', () => {
+      const container = document.createElement('div');
+      const text = 'hello こんにちは';
+      renderOverlay(container, makeParams({ lines: [text], cellW: 10 }));
+
+      const lineDiv = container.children[0] as HTMLDivElement;
+      const spans = getSpans(lineDiv);
+
+      // h(0) e(10) l(20) l(30) o(40) space(50) こ(60) ん(80) に(100) ち(120) は(140)
+      expect(spans.length).toBe(11);
+      expect(spans[5]).toEqual({ text: ' ', left: 50, width: 10 }); // space
+      expect(spans[6]).toEqual({ text: 'こ', left: 60, width: 20 }); // first CJK after ASCII
+    });
+
+    it('addon handles Japanese input via addChar', () => {
+      const { addon } = tracked();
+      for (const ch of 'こんにちは') {
+        addon.addChar(ch);
+      }
+      expect(addon.pendingText).toBe('こんにちは');
+    });
+
+    it('addon handles Japanese input via appendText (paste)', () => {
+      const { addon } = tracked();
+      addon.appendText('こんにちは世界');
+      expect(addon.pendingText).toBe('こんにちは世界');
+      expect(addon.hasPending).toBe(true);
+    });
+
+    it('stringCellWidth correct for Japanese greeting', () => {
+      expect(stringCellWidth(null, 'こんにちは')).toBe(10); // 5 * 2
+    });
+  });
+
+  describe('Korean', () => {
+    it('charCellWidth returns 2 for Hangul Syllables (0xAC00-0xD7A3)', () => {
+      const hangul = '가나다라마바사아자차카타파하';
+      for (const ch of hangul) {
+        expect(charCellWidth(null, ch)).toBe(2);
+      }
+    });
+
+    it('charCellWidth returns 2 for Hangul Jamo (0x1100-0x115F)', () => {
+      expect(charCellWidth(null, '\u1100')).toBe(2); // ᄀ
+      expect(charCellWidth(null, '\u1112')).toBe(2); // ᄒ
+    });
+
+    it('Korean greeting renders with correct span positions', () => {
+      const container = document.createElement('div');
+      const text = '안녕하세요';
+      renderOverlay(container, makeParams({ lines: [text], cellW: 10 }));
+
+      const lineDiv = container.children[0] as HTMLDivElement;
+      const spans = getSpans(lineDiv);
+
+      expect(spans.length).toBe(5);
+      expect(spans[0]).toEqual({ text: '안', left: 0, width: 20 });
+      expect(spans[1]).toEqual({ text: '녕', left: 20, width: 20 });
+      expect(spans[2]).toEqual({ text: '하', left: 40, width: 20 });
+      expect(spans[3]).toEqual({ text: '세', left: 60, width: 20 });
+      expect(spans[4]).toEqual({ text: '요', left: 80, width: 20 });
+    });
+
+    it('addon handles Korean input', () => {
+      const { addon } = tracked();
+      addon.appendText('안녕하세요');
+      expect(addon.pendingText).toBe('안녕하세요');
+      expect(addon.hasPending).toBe(true);
+    });
+
+    it('removeChar removes Korean characters one at a time', () => {
+      const { addon } = tracked();
+      addon.appendText('안녕');
+      addon.removeChar();
+      expect(addon.pendingText).toBe('안');
+      addon.removeChar();
+      expect(addon.pendingText).toBe('');
+    });
+
+    it('stringCellWidth correct for Korean greeting', () => {
+      expect(stringCellWidth(null, '안녕하세요')).toBe(10); // 5 * 2
+    });
+  });
+
+  describe('mixed CJK scripts', () => {
+    it('Chinese + Japanese + Korean in one string', () => {
+      const text = '你好こんにちは안녕';
+      expect(stringCellWidth(null, text)).toBe(18); // 9 chars * 2 each
+
+      const container = document.createElement('div');
+      renderOverlay(container, makeParams({ lines: [text], cellW: 10 }));
+      const lineDiv = container.children[0] as HTMLDivElement;
+      const spans = getSpans(lineDiv);
+
+      // All 9 CJK chars: contiguous double-width spans
+      expect(spans.length).toBe(9);
+      let expectedLeft = 0;
+      for (const span of spans) {
+        expect(span.left).toBe(expectedLeft);
+        expect(span.width).toBe(20);
+        expectedLeft += 20;
+      }
+    });
+  });
+});
+
+// ═══════════════════════════════════════════════════════════════════════
+// TEST 4: Cursor positions correctly after CJK characters
+// ═══════════════════════════════════════════════════════════════════════
+
+describe('Test 4: Cursor positioning after CJK', () => {
+  it('cursor after Chinese text on first line', () => {
+    const container = document.createElement('div');
+    renderOverlay(
+      container,
+      makeParams({
+        lines: ['你好世界'],
+        startCol: 2,
+        cellW: 10,
+        showCursor: true,
+      })
+    );
+    // cursorCol = startCol(2) + stringCellWidth('你好世界')(8) = 10
+    const cursor = container.children[container.children.length - 1] as HTMLSpanElement;
+    expect(cursor.style.left).toBe('100px'); // 10 * 10px
+  });
+
+  it('cursor after Japanese text on first line', () => {
+    const container = document.createElement('div');
+    renderOverlay(
+      container,
+      makeParams({
+        lines: ['こんにちは'],
+        startCol: 2,
+        cellW: 10,
+        showCursor: true,
+      })
+    );
+    // cursorCol = 2 + 10 = 12
+    const cursor = container.children[container.children.length - 1] as HTMLSpanElement;
+    expect(cursor.style.left).toBe('120px');
+  });
+
+  it('cursor after Korean text on first line', () => {
+    const container = document.createElement('div');
+    renderOverlay(
+      container,
+      makeParams({
+        lines: ['안녕하세요'],
+        startCol: 2,
+        cellW: 10,
+        showCursor: true,
+      })
+    );
+    // cursorCol = 2 + 10 = 12
+    const cursor = container.children[container.children.length - 1] as HTMLSpanElement;
+    expect(cursor.style.left).toBe('120px');
+  });
+
+  it('cursor after mixed ASCII + CJK', () => {
+    const container = document.createElement('div');
+    renderOverlay(
+      container,
+      makeParams({
+        lines: ['hi你好'],
+        startCol: 3,
+        cellW: 10,
+        showCursor: true,
+      })
+    );
+    // cursorCol = 3 + stringCellWidth('hi你好')(6) = 9
+    const cursor = container.children[container.children.length - 1] as HTMLSpanElement;
+    expect(cursor.style.left).toBe('90px');
+  });
+
+  it('cursor on wrapped line after CJK text', () => {
+    const container = document.createElement('div');
+    renderOverlay(
+      container,
+      makeParams({
+        lines: ['你好世界', '再见'],
+        startCol: 2,
+        cellW: 10,
+        cellH: 20,
+        showCursor: true,
+      })
+    );
+    // Last line is '再见', starts at col 0 (wrapped line), width = 4
+    const cursor = container.children[container.children.length - 1] as HTMLSpanElement;
+    expect(cursor.style.left).toBe('40px'); // 0 + 4 = 4, * 10 = 40
+    expect(cursor.style.top).toBe('20px'); // row 1 * cellH
+  });
+
+  it('cursor hidden when it would exceed totalCols', () => {
+    const container = document.createElement('div');
+    // 4 CJK chars = 8 visual cols, startCol=73, cursorCol = 73 + 8 = 81 > 80
+    renderOverlay(
+      container,
+      makeParams({
+        lines: ['你好世界'],
+        startCol: 73,
+        totalCols: 80,
+        cellW: 10,
+        showCursor: true,
+      })
+    );
+    // Should be 1 line div, no cursor span (cursor at col 81 >= totalCols 80)
+    // Actually cursor check is cursorCol < totalCols, so at 81 it's hidden
+    const children = container.children;
+    // If cursor is rendered, last child would be a cursor span
+    // With cursorCol 81 >= 80, cursor should NOT be rendered
+    expect(children.length).toBe(1); // only line div
+  });
+});
+
+// ═══════════════════════════════════════════════════════════════════════
+// TEST 5: Long CJK input wraps at correct column boundary
+// ═══════════════════════════════════════════════════════════════════════
+
+describe('Test 5: CJK line wrapping at column boundaries', () => {
+  it('CJK chars wrap when they would overflow first line', () => {
+    const container = document.createElement('div');
+    // totalCols=10, startCol=2 → firstLineCols=8
+    // Each CJK char = 2 cols → first line fits 4 chars (8 cols)
+    // 5th char wraps to second line
+    const text = '你好世界啊'; // 5 chars = 10 visual cols
+    renderOverlay(
+      container,
+      makeParams({
+        lines: ['你好世界', '啊'],
+        startCol: 2,
+        totalCols: 10,
+        cellW: 10,
+        cellH: 20,
+      })
+    );
+
+    expect(container.children.length).toBe(3); // 2 line divs + cursor
+
+    const line1 = container.children[0] as HTMLDivElement;
+    expect(line1.children.length).toBe(4); // 你好世界
+    expect(line1.style.left).toBe('20px'); // startCol * cellW
+
+    const line2 = container.children[1] as HTMLDivElement;
+    expect(line2.children.length).toBe(1); // 啊
+    expect(line2.style.left).toBe('0px'); // wrapped line starts at col 0
+    expect(line2.style.top).toBe('20px'); // second row
+  });
+
+  it('CJK char that would partially overflow stays on next line', () => {
+    // totalCols=9, startCol=2 → firstLineCols=7
+    // CJK chars are 2-wide. 3 chars = 6 cols (fits). 4th char = 8 cols > 7. Wraps.
+    const container = document.createElement('div');
+    renderOverlay(
+      container,
+      makeParams({
+        lines: ['你好世', '界'],
+        startCol: 2,
+        totalCols: 9,
+        cellW: 10,
+      })
+    );
+
+    const line1 = container.children[0] as HTMLDivElement;
+    expect(line1.children.length).toBe(3); // 3 CJK chars fit (6 cols <= 7)
+    const line2 = container.children[1] as HTMLDivElement;
+    expect(line2.children.length).toBe(1); // 界 wraps
+  });
+
+  it('addon _render splits CJK text into visual lines correctly', () => {
+    // Narrow terminal: 10 cols, startCol=2 → firstLineCols=8 → 4 CJK chars
+    const mock = createMockTerminal({
+      buffer: { lines: ['$ '] },
+      cols: 10,
+    });
+    const addon = new ZerolagInputAddon({
+      prompt: { type: 'character', char: '$', offset: 2 },
+    });
+    mock.terminal.loadAddon(addon);
+    cleanups.push(() => {
+      addon.dispose();
+      mock.cleanup();
+    });
+
+    // Type 6 CJK chars (12 visual cols)
+    for (const ch of '你好世界再见') {
+      addon.addChar(ch);
+    }
+    expect(addon.pendingText).toBe('你好世界再见');
+    expect(addon.hasPending).toBe(true);
+  });
+
+  it('mixed ASCII + CJK wraps correctly', () => {
+    const container = document.createElement('div');
+    // totalCols=10, startCol=2 → firstLineCols=8
+    // 'ab' = 2 cols, '你好' = 4 cols, 'cd' = 2 cols → total 8 cols (fits line 1)
+    // '世' = 2 cols → wraps to line 2
+    renderOverlay(
+      container,
+      makeParams({
+        lines: ['ab你好cd', '世'],
+        startCol: 2,
+        totalCols: 10,
+        cellW: 10,
+      })
+    );
+
+    const line1 = container.children[0] as HTMLDivElement;
+    expect(line1.children.length).toBe(6); // a,b,你,好,c,d
+    const line2 = container.children[1] as HTMLDivElement;
+    expect(line2.children.length).toBe(1); // 世
+  });
+
+  it('odd column count: CJK char does not split across boundary', () => {
+    // totalCols=11, startCol=2 → firstLineCols=9
+    // 4 CJK chars = 8 cols (fits). 5th CJK = 10 cols > 9 (wraps).
+    // 1 empty column remains on first line (CJK can't fit in 1 col).
+    const container = document.createElement('div');
+    renderOverlay(
+      container,
+      makeParams({
+        lines: ['你好世界', '啊'],
+        startCol: 2,
+        totalCols: 11,
+        cellW: 10,
+      })
+    );
+
+    const line1 = container.children[0] as HTMLDivElement;
+    expect(line1.children.length).toBe(4); // 4 chars = 8 cols, 5th would need 10 > 9
+    const line2 = container.children[1] as HTMLDivElement;
+    expect(line2.children.length).toBe(1);
+  });
+
+  it('CJK fills entire wrapped line', () => {
+    const container = document.createElement('div');
+    // totalCols=6, startCol=0 → firstLineCols=6
+    // 3 CJK chars = 6 cols (fills line 1), next 3 fill line 2
+    renderOverlay(
+      container,
+      makeParams({
+        lines: ['你好世', '界再见'],
+        startCol: 0,
+        totalCols: 6,
+        cellW: 10,
+      })
+    );
+
+    const line1 = container.children[0] as HTMLDivElement;
+    expect(line1.children.length).toBe(3);
+    const line2 = container.children[1] as HTMLDivElement;
+    expect(line2.children.length).toBe(3);
+  });
+});
+
+// ═══════════════════════════════════════════════════════════════════════
+// TEST 6: Existing ASCII input is unaffected
+// ═══════════════════════════════════════════════════════════════════════
+
+describe('Test 6: ASCII input — no regression', () => {
+  it('ASCII characters still get 1-cell-wide spans', () => {
+    const container = document.createElement('div');
+    renderOverlay(container, makeParams({ lines: ['abcdef'], cellW: 10 }));
+    const lineDiv = container.children[0] as HTMLDivElement;
+    const spans = getSpans(lineDiv);
+
+    for (const span of spans) {
+      expect(span.width).toBe(10); // 1 * cellW
+    }
+  });
+
+  it('ASCII span positions are sequential at 1-cell intervals', () => {
+    const container = document.createElement('div');
+    renderOverlay(container, makeParams({ lines: ['xyz'], cellW: 8.4 }));
+    const lineDiv = container.children[0] as HTMLDivElement;
+    const spans = getSpans(lineDiv);
+
+    expect(spans[0].left).toBe(0);
+    expect(spans[1].left).toBeCloseTo(8.4, 5);
+    expect(spans[2].left).toBeCloseTo(16.8, 5);
+  });
+
+  it('ASCII cursor positions at correct column', () => {
+    const container = document.createElement('div');
+    renderOverlay(
+      container,
+      makeParams({
+        lines: ['hello'],
+        startCol: 3,
+        cellW: 10,
+        showCursor: true,
+      })
+    );
+    // cursor at startCol(3) + 5 = 8
+    const cursor = container.children[container.children.length - 1] as HTMLSpanElement;
+    expect(cursor.style.left).toBe('80px');
+  });
+
+  it('charCellWidth returns 1 for all printable ASCII', () => {
+    for (let code = 32; code < 127; code++) {
+      const ch = String.fromCharCode(code);
+      expect(charCellWidth(null, ch)).toBe(1);
+    }
+  });
+
+  it('stringCellWidth equals length for pure ASCII', () => {
+    expect(stringCellWidth(null, 'hello world')).toBe(11);
+    expect(stringCellWidth(null, 'test123!@#')).toBe(10);
+    expect(stringCellWidth(null, '')).toBe(0);
+  });
+
+  it('ASCII multi-line wrapping is unaffected', () => {
+    const container = document.createElement('div');
+    renderOverlay(
+      container,
+      makeParams({
+        lines: ['abcde', 'fgh'],
+        startCol: 5,
+        totalCols: 10,
+        cellW: 10,
+        cellH: 20,
+      })
+    );
+
+    expect(container.children.length).toBe(3); // 2 lines + cursor
+    const line1 = container.children[0] as HTMLDivElement;
+    const line2 = container.children[1] as HTMLDivElement;
+    expect(line1.children.length).toBe(5);
+    expect(line2.children.length).toBe(3);
+    expect(line1.style.left).toBe('50px'); // startCol * cellW
+    expect(line2.style.left).toBe('0px');
+  });
+
+  it('addon addChar/removeChar/clear work for ASCII', () => {
+    const { addon } = tracked();
+    addon.addChar('h');
+    addon.addChar('e');
+    addon.addChar('l');
+    addon.addChar('l');
+    addon.addChar('o');
+    expect(addon.pendingText).toBe('hello');
+
+    addon.removeChar();
+    expect(addon.pendingText).toBe('hell');
+
+    addon.clear();
+    expect(addon.pendingText).toBe('');
+    expect(addon.hasPending).toBe(false);
+  });
+});
+
+// ═══════════════════════════════════════════════════════════════════════
+// TEST 7: Teammate terminal panels render CJK correctly
+//
+// Teammate panels share the global xterm-zerolag-input.js vendor bundle
+// (loaded via <script> in index.html). This is the IIFE build of the
+// same package source tested in tests 1-6. The build pipeline is:
+//   src/overlay-renderer.ts → tsup → dist/index.global.js → vendor copy
+//
+// Since all terminals (main + teammate) use the same LocalEchoOverlay
+// class from the global scope, CJK correctness is guaranteed by:
+// (a) The package source handles CJK correctly (tests 1-6 above)
+// (b) The IIFE build bundles the exact same charCellWidth / makeLine code
+//
+// These tests verify the exported module includes CJK-aware functions
+// and that teammate-style terminal instances work identically.
+// ═══════════════════════════════════════════════════════════════════════
+
+describe('Test 7: Teammate terminal panels render CJK correctly', () => {
+  it('package exports charCellWidth and stringCellWidth', () => {
+    // These are the CJK-aware functions that the IIFE build exposes
+    expect(typeof charCellWidth).toBe('function');
+    expect(typeof stringCellWidth).toBe('function');
+  });
+
+  it('ZerolagInputAddon (used by LocalEchoOverlay) handles CJK in teammate terminals', () => {
+    // Simulate a teammate terminal panel: separate terminal instance,
+    // same addon class, different prompt character
+    const mock = createMockTerminal({
+      buffer: { lines: ['❯ '] },
+      cols: 40,
+    });
+    const addon = new ZerolagInputAddon({
+      prompt: { type: 'character', char: '❯', offset: 2 },
+    });
+    mock.terminal.loadAddon(addon);
+    cleanups.push(() => {
+      addon.dispose();
+      mock.cleanup();
+    });
+
+    // Type CJK in teammate terminal
+    for (const ch of '你好世界') {
+      addon.addChar(ch);
+    }
+    expect(addon.pendingText).toBe('你好世界');
+    expect(addon.hasPending).toBe(true);
+  });
+
+  it('teammate terminal with narrow width wraps CJK correctly', () => {
+    // Teammate panels are often narrower (sidebar, split view)
+    const mock = createMockTerminal({
+      buffer: { lines: ['❯ '] },
+      cols: 12, // narrow panel
+    });
+    const addon = new ZerolagInputAddon({
+      prompt: { type: 'character', char: '❯', offset: 2 },
+    });
+    mock.terminal.loadAddon(addon);
+    cleanups.push(() => {
+      addon.dispose();
+      mock.cleanup();
+    });
+
+    // Type 6 CJK chars (12 visual cols) with startCol=2 → only 10 available
+    // First line: 5 CJK = 10 cols. 6th wraps.
+    for (const ch of '你好世界再见') {
+      addon.addChar(ch);
+    }
+    expect(addon.pendingText).toBe('你好世界再见');
+  });
+
+  it('mixed CJK scripts render identically in teammate and main terminals', () => {
+    // Verify that the same input produces the same overlay output
+    // regardless of which terminal instance it's on
+    const text = '你好こんにちは안녕';
+
+    // "Main" terminal
+    const container1 = document.createElement('div');
+    renderOverlay(container1, makeParams({ lines: [text], cellW: 10 }));
+    const line1 = container1.children[0] as HTMLDivElement;
+    const spans1 = getSpans(line1);
+
+    // "Teammate" terminal (same params — same bundle)
+    const container2 = document.createElement('div');
+    renderOverlay(container2, makeParams({ lines: [text], cellW: 10 }));
+    const line2 = container2.children[0] as HTMLDivElement;
+    const spans2 = getSpans(line2);
+
+    // Identical rendering
+    expect(spans1.length).toBe(spans2.length);
+    for (let i = 0; i < spans1.length; i++) {
+      expect(spans1[i]).toEqual(spans2[i]);
+    }
+  });
+
+  it('CJK rendering correct in overlay with teammate-typical prompt (❯)', () => {
+    const container = document.createElement('div');
+    renderOverlay(
+      container,
+      makeParams({
+        lines: ['こんにちは世界'],
+        startCol: 2, // after ❯ prompt
+        cellW: 10,
+        showCursor: true,
+      })
+    );
+
+    const lineDiv = container.children[0] as HTMLDivElement;
+    const spans = getSpans(lineDiv);
+    expect(spans.length).toBe(7);
+
+    // All CJK, all double-width, contiguous
+    let expectedLeft = 0;
+    for (const span of spans) {
+      expect(span.left).toBe(expectedLeft);
+      expect(span.width).toBe(20);
+      expectedLeft += 20;
+    }
+
+    // Cursor position: startCol(2) + 14 visual cols = 16
+    const cursor = container.children[container.children.length - 1] as HTMLSpanElement;
+    expect(cursor.style.left).toBe('160px');
+  });
+});

packages/xterm-zerolag-input/test/helpers.ts

@@ -31,6 +31,10 @@ interface MockTerminalOptions {
     };
     cellWidth?: number;
     cellHeight?: number;
+    /** Device-pixel char top offset (for charTop calculation). Default: 0 */
+    deviceCharTop?: number;
+    /** Device-pixel char height (for charHeight calculation). Default: cellHeight * dpr */
+    deviceCharHeight?: number;
 }
 
 export function createMockTerminal(opts: MockTerminalOptions = {}) {
@@ -95,6 +99,12 @@ export function createMockTerminal(opts: MockTerminalOptions = {}) {
                     css: {
                         cell: { width: cellW, height: cellH },
                     },
+                    device: {
+                        char: {
+                            top: opts.deviceCharTop ?? 0,
+                            height: opts.deviceCharHeight ?? cellH,
+                        },
+                    },
                 },
             },
         },

packages/xterm-zerolag-input/test/overlay-renderer.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { renderOverlay } from '../src/overlay-renderer.js';
+import { renderOverlay, charCellWidth, stringCellWidth } from '../src/overlay-renderer.js';
 import type { RenderParams, FontStyle } from '../src/types.js';
 
 const FONT: FontStyle = {
@@ -18,6 +18,8 @@ function makeParams(overrides: Partial<RenderParams> = {}): RenderParams {
     totalCols: 80,
     cellW: 8.4,
     cellH: 17,
+    charTop: 2,
+    charHeight: 14,
     promptRow: 10,
     font: FONT,
     showCursor: true,
@@ -30,7 +32,7 @@ describe('renderOverlay', () => {
   it('positions container at prompt row', () => {
     const container = document.createElement('div');
     renderOverlay(container, makeParams({ promptRow: 5 }));
-        expect(container.style.top).toBe((5 * 17) + 'px');
+    expect(container.style.top).toBe(5 * 17 + 'px');
     expect(container.style.left).toBe('0px');
   });
 
@@ -99,14 +101,17 @@ describe('renderOverlay', () => {
 
   it('renders cursor at end of text', () => {
     const container = document.createElement('div');
-        renderOverlay(container, makeParams({
+    renderOverlay(
+      container,
+      makeParams({
         lines: ['ab'],
         startCol: 3,
         cellW: 10,
         cellH: 20,
         showCursor: true,
         cursorColor: '#ff00ff',
-        }));
+      })
+    );
 
     // Last child is cursor (after line div)
     const cursor = container.children[container.children.length - 1] as HTMLSpanElement;
@@ -127,12 +132,15 @@ describe('renderOverlay', () => {
 
   it('renders multi-line text', () => {
     const container = document.createElement('div');
-        renderOverlay(container, makeParams({
+    renderOverlay(
+      container,
+      makeParams({
         lines: ['first', 'second'],
         startCol: 5,
         cellW: 10,
         cellH: 20,
-        }));
+      })
+    );
 
     // 2 line divs + cursor
     expect(container.children.length).toBe(3);
@@ -166,4 +174,247 @@ describe('renderOverlay', () => {
     renderOverlay(container, makeParams());
     expect(container.style.display).toBe('');
   });
+
+  // ─── Anti-flicker / compositing seam tests ────────────────────
+
+  it('line div height extends 1px past cellH to cover compositing seam', () => {
+    const container = document.createElement('div');
+    renderOverlay(container, makeParams({ lines: ['abc'], cellH: 19 }));
+    const lineDiv = container.children[0] as HTMLDivElement;
+    // cellH + 1 = 20px — the extra 1px covers the compositing seam
+    expect(lineDiv.style.height).toBe('20px');
+  });
+
+  it('line div height is cellH+1 for various cell heights', () => {
+    for (const cellH of [15, 17, 19, 22]) {
+      const container = document.createElement('div');
+      renderOverlay(container, makeParams({ lines: ['x'], cellH }));
+      const lineDiv = container.children[0] as HTMLDivElement;
+      expect(lineDiv.style.height).toBe(cellH + 1 + 'px');
+    }
+  });
+
+  it('multi-line overlay has cellH+1 height on each line div', () => {
+    const container = document.createElement('div');
+    renderOverlay(
+      container,
+      makeParams({
+        lines: ['first', 'second'],
+        cellH: 19,
+      })
+    );
+    const line1 = container.children[0] as HTMLDivElement;
+    const line2 = container.children[1] as HTMLDivElement;
+    expect(line1.style.height).toBe('20px');
+    expect(line2.style.height).toBe('20px');
+  });
+
+  // ─── Span vertical centering tests ────────────────────────────
+
+  it('span uses full cellH for height and lineHeight (CSS centering)', () => {
+    const container = document.createElement('div');
+    renderOverlay(container, makeParams({ lines: ['a'], cellH: 19 }));
+    const lineDiv = container.children[0] as HTMLDivElement;
+    const span = lineDiv.children[0] as HTMLSpanElement;
+    expect(span.style.height).toBe('19px');
+    expect(span.style.lineHeight).toBe('19px');
+  });
+
+  it('span top is 0px (no vertical offset / no transform)', () => {
+    const container = document.createElement('div');
+    renderOverlay(container, makeParams({ lines: ['a'], cellH: 19 }));
+    const lineDiv = container.children[0] as HTMLDivElement;
+    const span = lineDiv.children[0] as HTMLSpanElement;
+    expect(span.style.top).toBe('0px');
+    // No translateY transform — sub-pixel overhang causes artifacts
+    expect(span.style.transform).toBe('');
+  });
+
+  // ─── Font rendering tests ─────────────────────────────────────
+
+  it('span disables ligatures via font-feature-settings', () => {
+    const container = document.createElement('div');
+    renderOverlay(container, makeParams({ lines: ['fi'] }));
+    const lineDiv = container.children[0] as HTMLDivElement;
+    const span = lineDiv.children[0] as HTMLSpanElement;
+    // Check cssText includes the ligature-disabling settings
+    // jsdom may normalize whitespace; check that both liga and calt are disabled
+    expect(span.style.cssText).toContain('font-feature-settings:');
+    expect(span.style.cssText).toContain("'liga' 0");
+    expect(span.style.cssText).toContain("'calt' 0");
+  });
+
+  it('span has text-align: center for glyph centering', () => {
+    const container = document.createElement('div');
+    renderOverlay(container, makeParams({ lines: ['m'] }));
+    const lineDiv = container.children[0] as HTMLDivElement;
+    const span = lineDiv.children[0] as HTMLSpanElement;
+    expect(span.style.textAlign).toBe('center');
+  });
+
+  it('span has pointer-events: none', () => {
+    const container = document.createElement('div');
+    renderOverlay(container, makeParams({ lines: ['a'] }));
+    const lineDiv = container.children[0] as HTMLDivElement;
+    const span = lineDiv.children[0] as HTMLSpanElement;
+    expect(span.style.pointerEvents).toBe('none');
+  });
+
+  // ─── Multi-line cursor positioning ────────────────────────────
+
+  it('cursor on wrapped line uses col 0 as base', () => {
+    const container = document.createElement('div');
+    renderOverlay(
+      container,
+      makeParams({
+        lines: ['first', 'ab'],
+        startCol: 5,
+        cellW: 10,
+        cellH: 20,
+        showCursor: true,
+      })
+    );
+    // Cursor at end of second line: col = 0 + 2 = 2
+    const cursor = container.children[container.children.length - 1] as HTMLSpanElement;
+    expect(cursor.style.left).toBe('20px'); // 2 * 10
+    expect(cursor.style.top).toBe('20px'); // row 1 * cellH
+  });
+
+  // ─── charTop/charHeight passed through ────────────────────────
+
+  it('accepts charTop and charHeight params without error', () => {
+    const container = document.createElement('div');
+    expect(() =>
+      renderOverlay(
+        container,
+        makeParams({
+          lines: ['test'],
+          charTop: 2,
+          charHeight: 14,
+        })
+      )
+    ).not.toThrow();
+    expect(container.children.length).toBeGreaterThan(0);
+  });
+
+  // ─── Line div positioning regression ──────────────────────────
+
+  it('line div background color matches font.backgroundColor', () => {
+    const container = document.createElement('div');
+    const font: FontStyle = { ...FONT, backgroundColor: '#1a1a1a' };
+    renderOverlay(container, makeParams({ lines: ['x'], font }));
+    const lineDiv = container.children[0] as HTMLDivElement;
+    // jsdom normalizes hex to rgb()
+    expect(lineDiv.style.backgroundColor).toBe('rgb(26, 26, 26)');
+  });
+
+  it('empty line produces line div with no spans', () => {
+    const container = document.createElement('div');
+    renderOverlay(container, makeParams({ lines: [''] }));
+    const lineDiv = container.children[0] as HTMLDivElement;
+    expect(lineDiv.children.length).toBe(0);
+  });
+
+  // ─── CJK wide character support ───────────────────────────────
+
+  it('CJK characters get double-width spans', () => {
+    const container = document.createElement('div');
+    renderOverlay(container, makeParams({ lines: ['a你b'], cellW: 10 }));
+    const lineDiv = container.children[0] as HTMLDivElement;
+    expect(lineDiv.children.length).toBe(3);
+
+    const spanA = lineDiv.children[0] as HTMLSpanElement;
+    expect(spanA.textContent).toBe('a');
+    expect(spanA.style.left).toBe('0px');
+    expect(spanA.style.width).toBe('10px'); // 1 cell
+
+    const spanCJK = lineDiv.children[1] as HTMLSpanElement;
+    expect(spanCJK.textContent).toBe('你');
+    expect(spanCJK.style.left).toBe('10px'); // col 1
+    expect(spanCJK.style.width).toBe('20px'); // 2 cells
+
+    const spanB = lineDiv.children[2] as HTMLSpanElement;
+    expect(spanB.textContent).toBe('b');
+    expect(spanB.style.left).toBe('30px'); // col 3
+    expect(spanB.style.width).toBe('10px'); // 1 cell
+  });
+
+  it('cursor position accounts for CJK width', () => {
+    const container = document.createElement('div');
+    renderOverlay(
+      container,
+      makeParams({
+        lines: ['你好'],
+        startCol: 2,
+        cellW: 10,
+        showCursor: true,
+      })
+    );
+    // 你(2) + 好(2) = 4 visual cols, cursor at startCol(2) + 4 = 6
+    const cursor = container.children[container.children.length - 1] as HTMLSpanElement;
+    expect(cursor.style.left).toBe('60px');
+  });
+
+  it('mixed ASCII and CJK characters position correctly', () => {
+    const container = document.createElement('div');
+    renderOverlay(container, makeParams({ lines: ['hi你'], cellW: 8 }));
+    const lineDiv = container.children[0] as HTMLDivElement;
+    // h(col 0), i(col 1), 你(col 2, width 2)
+    const spanH = lineDiv.children[0] as HTMLSpanElement;
+    expect(spanH.style.left).toBe('0px');
+    const spanI = lineDiv.children[1] as HTMLSpanElement;
+    expect(spanI.style.left).toBe('8px');
+    const spanCJK = lineDiv.children[2] as HTMLSpanElement;
+    expect(spanCJK.style.left).toBe('16px');
+    expect(spanCJK.style.width).toBe('16px');
+  });
+});
+
+describe('charCellWidth', () => {
+  it('returns 1 for ASCII characters', () => {
+    expect(charCellWidth(null, 'a')).toBe(1);
+    expect(charCellWidth(null, '!')).toBe(1);
+    expect(charCellWidth(null, ' ')).toBe(1);
+  });
+
+  it('returns 2 for CJK ideographs', () => {
+    expect(charCellWidth(null, '你')).toBe(2);
+    expect(charCellWidth(null, '好')).toBe(2);
+    expect(charCellWidth(null, '中')).toBe(2);
+  });
+
+  it('returns 2 for Japanese hiragana', () => {
+    expect(charCellWidth(null, 'こ')).toBe(2);
+    expect(charCellWidth(null, 'ん')).toBe(2);
+  });
+
+  it('returns 2 for Korean syllables', () => {
+    expect(charCellWidth(null, '안')).toBe(2);
+    expect(charCellWidth(null, '녕')).toBe(2);
+  });
+
+  it('returns 2 for fullwidth forms', () => {
+    expect(charCellWidth(null, '\uff01')).toBe(2); // ！
+    expect(charCellWidth(null, '\uff21')).toBe(2); // Ａ
+  });
+
+  it('uses terminal unicode addon when available', () => {
+    const mockTerminal = {
+      unicode: { getStringCellWidth: (s: string) => (s === 'W' ? 2 : 1) },
+    } as any;
+    expect(charCellWidth(mockTerminal, 'W')).toBe(2);
+    expect(charCellWidth(mockTerminal, 'n')).toBe(1);
+  });
+});
+
+describe('stringCellWidth', () => {
+  it('sums individual character widths', () => {
+    expect(stringCellWidth(null, 'abc')).toBe(3);
+    expect(stringCellWidth(null, '你好')).toBe(4);
+    expect(stringCellWidth(null, 'a你b')).toBe(4);
+  });
+
+  it('returns 0 for empty string', () => {
+    expect(stringCellWidth(null, '')).toBe(0);
+  });
 });

packages/xterm-zerolag-input/test/zerolag-input-addon.test.ts

@@ -376,7 +376,10 @@ describe('ZerolagInputAddon', () => {
         prompt: { type: 'character', char: '\u276f', offset: 2 },
       });
       mock.terminal.loadAddon(addon);
-            cleanups.push(() => { addon.dispose(); mock.cleanup(); });
+      cleanups.push(() => {
+        addon.dispose();
+        mock.cleanup();
+      });
 
       const text = addon.readPromptText();
       expect(text).toBe('hello');
@@ -482,6 +485,134 @@ describe('ZerolagInputAddon', () => {
     });
   });
 
+  describe('setPrompt', () => {
+    it('changes prompt detection strategy', () => {
+      const { addon, mock } = tracked(['$ hello'], '$');
+      // Initially finds $ prompt
+      expect(addon.findPrompt()).toEqual({ row: 0, col: 0 });
+      expect(addon.readPromptText()).toBe('hello');
+
+      // Switch to > prompt — $ is no longer detected
+      mock.setLines(['> world']);
+      addon.setPrompt({ type: 'character', char: '>', offset: 2 });
+      expect(addon.findPrompt()).toEqual({ row: 0, col: 0 });
+      expect(addon.readPromptText()).toBe('world');
+    });
+
+    it('returns null when new prompt character not found', () => {
+      const { addon } = tracked(['$ hello'], '$');
+      addon.setPrompt({ type: 'character', char: '>', offset: 2 });
+      // Buffer still has $ not >
+      expect(addon.findPrompt()).toBeNull();
+    });
+
+    it('resets cached prompt position', () => {
+      const { addon } = tracked(['$ typed']);
+      addon.addChar('x');
+      expect(addon.state.promptPosition).not.toBeNull();
+
+      addon.setPrompt({ type: 'character', char: '>', offset: 2 });
+      // After setPrompt with no matching prompt, position resets
+      expect(addon.state.promptPosition).toBeNull();
+    });
+
+    it('re-renders when text exists', () => {
+      const { addon, mock } = tracked(['$ '], '$');
+      addon.addChar('h');
+      addon.addChar('i');
+
+      // Switch prompt strategy — should re-render with existing text
+      mock.setLines(['> ']);
+      addon.setPrompt({ type: 'character', char: '>', offset: 2 });
+      expect(addon.pendingText).toBe('hi');
+      expect(addon.hasPending).toBe(true);
+    });
+
+    it('does not crash when no text to render', () => {
+      const { addon } = tracked(['$ ']);
+      expect(() => addon.setPrompt({ type: 'character', char: '>', offset: 2 })).not.toThrow();
+    });
+
+    it('works with regex prompt strategy', () => {
+      const mock = createMockTerminal({ buffer: { lines: ['user@host:~$ cmd'] } });
+      const addon = new ZerolagInputAddon({
+        prompt: { type: 'character', char: '$', offset: 2 },
+      });
+      mock.terminal.loadAddon(addon);
+      cleanups.push(() => {
+        addon.dispose();
+        mock.cleanup();
+      });
+
+      // Switch to regex
+      addon.setPrompt({ type: 'regex', pattern: /\$/, offset: 2 });
+      expect(addon.findPrompt()).not.toBeNull();
+      expect(addon.readPromptText()).toBe('cmd');
+    });
+  });
+
+  describe('tab switch with setPrompt (CLI switching)', () => {
+    it('full tab switch cycle: save state, setPrompt, restore', () => {
+      // Session A with $ prompt
+      const { addon, mock } = tracked(['$ '], '$');
+      addon.addChar('h');
+      addon.addChar('e');
+      addon.addChar('l');
+      addon.addChar('l');
+      addon.addChar('o');
+      expect(addon.pendingText).toBe('hello');
+
+      // Save state before tab switch
+      const pending = addon.pendingText;
+      const { count: flushedCount, text: flushedText } = addon.getFlushed();
+      const totalText = flushedText + pending;
+      const totalCount = flushedCount + pending.length;
+      addon.clear();
+
+      // Switch to Session B with > prompt
+      mock.setLines(['> ']);
+      addon.setPrompt({ type: 'character', char: '>', offset: 2 });
+      expect(addon.pendingText).toBe('');
+      expect(addon.hasPending).toBe(false);
+
+      // Switch back to Session A — restore state
+      mock.setLines(['$ ']);
+      addon.setPrompt({ type: 'character', char: '$', offset: 2 });
+      addon.suppressBufferDetection();
+      addon.setFlushed(totalCount, totalText, false);
+
+      expect(addon.getFlushed()).toEqual({ count: 5, text: 'hello' });
+      expect(addon.hasPending).toBe(true);
+    });
+  });
+
+  describe('overlay hides when prompt not found (ghost artifact fix)', () => {
+    it('overlay hides when prompt scrolls away', () => {
+      const { addon, mock } = tracked(['$ ']);
+      addon.addChar('x');
+      // Prompt visible, overlay should render
+      expect(addon.hasPending).toBe(true);
+
+      // Simulate prompt scrolling away (no $ in buffer)
+      mock.setLines(['just output', 'more output']);
+      addon.clear();
+      addon.addChar('y');
+      // Prompt not found — overlay hidden despite pending text
+      // (the addon renders but finds no prompt, so display stays none)
+      const state = addon.state;
+      expect(state.pendingText).toBe('y');
+    });
+
+    it('clear resets lastPromptPos to null', () => {
+      const { addon } = tracked(['$ ']);
+      addon.addChar('a');
+      expect(addon.state.promptPosition).not.toBeNull();
+
+      addon.clear();
+      expect(addon.state.promptPosition).toBeNull();
+    });
+  });
+
   describe('methods before activate / after dispose', () => {
     it('addChar accumulates but does not crash before activate', () => {
       const addon = new ZerolagInputAddon();
@@ -522,6 +653,58 @@ describe('ZerolagInputAddon', () => {
     });
   });
 
+  describe('CJK wide character support', () => {
+    it('addChar works with CJK characters', () => {
+      const { addon } = tracked();
+      addon.addChar('你');
+      addon.addChar('好');
+      expect(addon.pendingText).toBe('你好');
+    });
+
+    it('appendText works with CJK characters', () => {
+      const { addon } = tracked();
+      addon.appendText('こんにちは');
+      expect(addon.pendingText).toBe('こんにちは');
+    });
+
+    it('removeChar removes CJK characters correctly', () => {
+      const { addon } = tracked();
+      addon.addChar('你');
+      addon.addChar('好');
+      addon.removeChar();
+      expect(addon.pendingText).toBe('你');
+    });
+
+    it('mixed ASCII and CJK renders without error', () => {
+      const { addon } = tracked();
+      addon.addChar('h');
+      addon.addChar('i');
+      addon.addChar('你');
+      addon.addChar('好');
+      expect(addon.pendingText).toBe('hi你好');
+      expect(addon.hasPending).toBe(true);
+    });
+
+    it('CJK line wrapping accounts for double-width', () => {
+      // With 10 cols and startCol=2, first line has 8 available cols
+      // Each CJK char takes 2 cols, so 4 CJK chars fill the first line
+      const { addon } = tracked(['$ '], '$');
+      // Type 5 CJK chars — should overflow first line
+      for (const ch of '你好世界啊') {
+        addon.addChar(ch);
+      }
+      expect(addon.pendingText).toBe('你好世界啊');
+      expect(addon.hasPending).toBe(true);
+    });
+
+    it('Korean text renders without error', () => {
+      const { addon } = tracked();
+      addon.appendText('안녕하세요');
+      expect(addon.pendingText).toBe('안녕하세요');
+      expect(addon.hasPending).toBe(true);
+    });
+  });
+
   describe('addChar implicit buffer detection', () => {
     it('first keystroke detects existing buffer text as flushed', () => {
       const { addon } = tracked(['$ existing']);

packages/xterm-zerolag-input/tsup.config.ts

@@ -0,0 +1,33 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig([
+  // Standard builds (CJS + ESM + DTS)
+  {
+    entry: ['src/index.ts'],
+    format: ['cjs', 'esm'],
+    dts: true,
+    clean: true,
+  },
+  // IIFE build for browser <script> tag usage
+  {
+    entry: ['src/index.ts'],
+    format: ['iife'],
+    globalName: 'XtermZerolagInput',
+    outDir: 'dist',
+    // Append global aliases so app.js can access classes directly
+    footer: {
+      js: [
+        '// Global aliases for browser usage',
+        'if(typeof window!=="undefined"){',
+        '  window.ZerolagInputAddon=XtermZerolagInput.ZerolagInputAddon;',
+        '  window.LocalEchoOverlay=class extends XtermZerolagInput.ZerolagInputAddon{',
+        '    constructor(terminal){',
+        '      super({prompt:{type:"character",char:"\\u276f",offset:2}});',
+        '      this.activate(terminal);',
+        '    }',
+        '  };',
+        '}',
+      ].join('\n'),
+    },
+  },
+]);

plan.json

@@ -1,399 +0,0 @@
-{
-  "items": [
-    {
-      "id": "P0-001",
-      "content": "Write failing tests for SessionMode type extension — verify 'opencode' is accepted as a valid mode in SessionMode, OpenCodeConfig interface exists with model/provider/autoAllowTools/continueSession/serverPort fields, and MuxSession.mode accepts 'opencode'",
-      "priority": "P0",
-      "tddPhase": "test",
-      "verificationCriteria": "test/opencode-types.test.ts exists, tests fail because SessionMode doesn't include 'opencode' and OpenCodeConfig doesn't exist",
-      "testCommand": "npx vitest run test/opencode-types.test.ts",
-      "dependencies": []
-    },
-    {
-      "id": "P0-002",
-      "content": "Implement SessionMode type extension — extend SessionMode from 'claude' | 'shell' to 'claude' | 'shell' | 'opencode' in types.ts (line 162), add OpenCodeConfig interface with fields: model?: string, provider?: string, autoAllowTools?: boolean, continueSession?: string, serverPort?: number. Update MuxSession.mode and createSession/respawnPane signatures in mux-interface.ts to accept 'opencode' and optional openCodeConfig param",
-      "priority": "P0",
-      "tddPhase": "impl",
-      "verificationCriteria": "npx vitest run test/opencode-types.test.ts passes, tsc --noEmit succeeds",
-      "pairedWith": "P0-001",
-      "dependencies": ["P0-001"]
-    },
-    {
-      "id": "P0-003",
-      "content": "Review type system changes — verify OpenCodeConfig follows existing type conventions (optional fields, no Claude-specific coupling), SessionMode union is used consistently across types.ts/mux-interface.ts/session.ts, no breaking changes to existing code",
-      "priority": "P0",
-      "tddPhase": "review",
-      "verificationCriteria": "tsc --noEmit passes with no errors, grep confirms SessionMode used consistently, no 'claude' | 'shell' hardcoded literals remain in interface definitions",
-      "reviewChecklist": ["Type consistency across files", "No breaking changes to existing Claude/shell modes", "OpenCodeConfig fields match opencode CLI flags", "Optional fields properly typed"],
-      "pairedWith": "P0-002",
-      "dependencies": ["P0-002"]
-    },
-    {
-      "id": "P0-004",
-      "content": "Write failing tests for OpenCode CLI resolver — test resolveOpenCodeDir() returns directory when opencode binary exists, returns null when not found, caches result after first call, isOpenCodeAvailable() returns boolean, getOpenCodeAugmentedPath() prepends directory to PATH. Mock filesystem and execSync. Port: none (pure unit test)",
-      "priority": "P0",
-      "tddPhase": "test",
-      "verificationCriteria": "test/opencode-resolver.test.ts exists with 5+ test cases, all fail because opencode-cli-resolver.ts doesn't exist",
-      "testCommand": "npx vitest run test/opencode-resolver.test.ts",
-      "dependencies": []
-    },
-    {
-      "id": "P0-005",
-      "content": "Implement opencode-cli-resolver.ts — create src/utils/opencode-cli-resolver.ts mirroring claude-cli-resolver.ts pattern. Functions: resolveOpenCodeDir() (checks which opencode, then ~/.local/bin, /usr/local/bin, ~/.bun/bin, ~/.npm-global/bin, ~/bin, ~/.opencode/bin), isOpenCodeAvailable(), getOpenCodeAugmentedPath(). Cache results. Add re-export in src/utils/index.ts",
-      "priority": "P0",
-      "tddPhase": "impl",
-      "verificationCriteria": "npx vitest run test/opencode-resolver.test.ts passes, tsc --noEmit succeeds",
-      "pairedWith": "P0-004",
-      "dependencies": ["P0-004"]
-    },
-    {
-      "id": "P0-006",
-      "content": "Review CLI resolver implementation — verify no command injection in execSync('which opencode'), timeout set to 5s, graceful fallback when binary not found, caching works correctly (null vs empty string sentinel), PATH augmentation doesn't duplicate entries",
-      "priority": "P0",
-      "tddPhase": "review",
-      "verificationCriteria": "Code review passes: no shell injection, proper error handling, cache invalidation, consistent with claude-cli-resolver.ts patterns",
-      "reviewChecklist": ["No command injection in execSync", "Proper timeout handling", "Cache sentinel value for 'not found'", "PATH deduplication", "Re-export in utils/index.ts"],
-      "pairedWith": "P0-005",
-      "dependencies": ["P0-005"]
-    },
-    {
-      "id": "P0-007",
-      "content": "Write failing tests for Zod schema validation — test CreateSessionSchema accepts mode: 'opencode', accepts openCodeConfig object with model/provider/autoAllowTools/continueSession fields, rejects invalid model strings (shell metacharacters), rejects overly long model names (>100 chars), validates provider field. Port: none (pure unit test)",
-      "priority": "P0",
-      "tddPhase": "test",
-      "verificationCriteria": "test/opencode-schema.test.ts exists, tests fail because schema doesn't accept 'opencode' mode or openCodeConfig field",
-      "testCommand": "npx vitest run test/opencode-schema.test.ts",
-      "dependencies": ["P0-002"]
-    },
-    {
-      "id": "P0-008",
-      "content": "Implement schema validation changes — update CreateSessionSchema in src/web/schemas.ts: extend mode enum to include 'opencode', add openCodeConfig z.object with model (string, max 100, regex /^[a-zA-Z0-9._\\-/]+$/), provider (string, max 50), autoAllowTools (boolean), continueSession (string, max 100, regex /^[a-zA-Z0-9_-]+$/). All fields optional",
-      "priority": "P0",
-      "tddPhase": "impl",
-      "verificationCriteria": "npx vitest run test/opencode-schema.test.ts passes, tsc --noEmit succeeds",
-      "pairedWith": "P0-007",
-      "dependencies": ["P0-007"]
-    },
-    {
-      "id": "P0-009",
-      "content": "Review schema validation — verify model regex blocks shell metacharacters (;|&$`), continueSession regex blocks path traversal, no overly permissive patterns, consistent with existing SAFE_PATH_PATTERN security approach in schemas.ts",
-      "priority": "P0",
-      "tddPhase": "review",
-      "verificationCriteria": "Schema rejects all dangerous inputs: model with semicolons, backticks, pipes; continueSession with ../; empty strings handled properly",
-      "reviewChecklist": ["Shell metacharacter blocking", "Path traversal prevention", "Consistent with existing security patterns", "Zod v4 API usage correct"],
-      "pairedWith": "P0-008",
-      "dependencies": ["P0-008"]
-    },
-    {
-      "id": "P1-001",
-      "content": "Write failing tests for TmuxManager opencode command construction — test buildOpenCodeCommand() generates correct CLI: basic 'opencode' command, with --model flag, with --session flag for continue, validates model string safety, validates session ID safety. Test that createSession() with mode 'opencode' builds correct tmux respawn-pane command with opencode env vars (CLAUDEMAN_MUX, API keys passthrough). Mock execAsync. Port: none (unit test with mocks)",
-      "priority": "P1",
-      "tddPhase": "test",
-      "verificationCriteria": "test/opencode-tmux.test.ts exists with 8+ test cases covering command construction, env var setup, and PATH augmentation for opencode mode",
-      "testCommand": "npx vitest run test/opencode-tmux.test.ts",
-      "dependencies": ["P0-002", "P0-005"]
-    },
-    {
-      "id": "P1-002",
-      "content": "Implement TmuxManager opencode support — in src/tmux-manager.ts: (1) import resolveOpenCodeDir from utils, (2) add buildOpenCodeCommand(sessionId, config?) helper that constructs 'opencode [--model X] [--session Y]' with input validation, (3) extend createSession() command construction to handle mode === 'opencode' alongside existing claude/shell branches, (4) add opencode-specific env exports (CLAUDEMAN_MUX, CLAUDEMAN_SESSION_ID, API key passthrough for ANTHROPIC/OPENAI/GOOGLE_API_KEY, optional OPENCODE_CONFIG_CONTENT), (5) use resolveOpenCodeDir() for PATH augmentation when mode is opencode, (6) throw clear error if opencode binary not found, (7) apply same changes to respawnPane()",
-      "priority": "P1",
-      "tddPhase": "impl",
-      "verificationCriteria": "npx vitest run test/opencode-tmux.test.ts passes, tsc --noEmit succeeds",
-      "pairedWith": "P1-001",
-      "dependencies": ["P1-001"]
-    },
-    {
-      "id": "P1-003",
-      "content": "Review TmuxManager opencode integration — verify command injection prevention in buildOpenCodeCommand (model and sessionId validated before interpolation), env var escaping for OPENCODE_CONFIG_CONTENT (single quotes properly escaped), API key passthrough doesn't leak other env vars, respawnPane changes mirror createSession exactly, error messages are actionable",
-      "priority": "P1",
-      "tddPhase": "review",
-      "verificationCriteria": "No command injection vectors, env vars properly escaped, consistent with existing Claude command construction security, error messages guide user to install opencode",
-      "reviewChecklist": ["Command injection prevention", "Env var escaping (single quotes in config content)", "API key passthrough scope limited", "respawnPane mirrors createSession", "Error message includes install instructions"],
-      "pairedWith": "P1-002",
-      "dependencies": ["P1-002"]
-    },
-    {
-      "id": "P1-004",
-      "content": "Write failing tests for Session class opencode mode — test that Session constructor accepts mode: 'opencode' with openCodeConfig, test startInteractive() dispatches to opencode-specific startup (not Claude CLI), test that Claude-specific features are disabled for opencode sessions (hooks config skipped, subagent watcher Claude patterns skipped), test that writeViaMux() works identically for opencode mode (tmux send-keys is mode-agnostic). Port: 3161",
-      "priority": "P1",
-      "tddPhase": "test",
-      "verificationCriteria": "test/opencode-session.test.ts exists with 6+ test cases, tests fail because Session doesn't support opencode mode",
-      "testCommand": "npx vitest run test/opencode-session.test.ts",
-      "dependencies": ["P0-002", "P1-002"]
-    },
-    {
-      "id": "P1-005",
-      "content": "Implement Session class opencode support — in src/session.ts: (1) accept openCodeConfig in constructor options and store as private field, (2) in startInteractive(), when mode is 'opencode', pass openCodeConfig to mux.createSession(), (3) skip hooks config generation for opencode sessions (no .claude/settings.local.json hooks), (4) add waitForOpenCodeReady() method using output-silence detection (wait for TUI paint: 500ms of stable output after initial burst, max 8s), (5) skip Claude-specific status line parsing for opencode mode, (6) add mode getter to Session for downstream consumers",
-      "priority": "P1",
-      "tddPhase": "impl",
-      "verificationCriteria": "npx vitest run test/opencode-session.test.ts passes, tsc --noEmit succeeds",
-      "pairedWith": "P1-004",
-      "dependencies": ["P1-004"]
-    },
-    {
-      "id": "P1-006",
-      "content": "Review Session class opencode integration — verify opencode mode doesn't break existing Claude/shell sessions (no regressions), waitForOpenCodeReady timeout is reasonable (8s), hooks are properly skipped without breaking Claude hooks, no memory leaks from new fields, toState() includes opencode-relevant state",
-      "priority": "P1",
-      "tddPhase": "review",
-      "verificationCriteria": "Existing session tests still pass, opencode-specific logic properly guarded with mode checks, no side effects on Claude sessions",
-      "reviewChecklist": ["No regression on Claude/shell modes", "waitForOpenCodeReady timeout appropriate", "Hooks skipped cleanly", "toState() serialization works", "No memory leak from new fields"],
-      "pairedWith": "P1-005",
-      "dependencies": ["P1-005"]
-    },
-    {
-      "id": "P1-007",
-      "content": "Write failing tests for opencode idle detection — test getIdleDetectionConfig() returns opencode-specific config (silenceThresholdMs: 5000, no prompt pattern, no AI checker), test that session emits 'idle' after 5s of output silence in opencode mode, test that session emits 'working' when output resumes, test that idle detection works during respawn cycles. Port: 3162",
-      "priority": "P1",
-      "tddPhase": "test",
-      "verificationCriteria": "test/opencode-idle.test.ts exists with 4+ test cases testing silence-based idle detection for opencode mode",
-      "testCommand": "npx vitest run test/opencode-idle.test.ts",
-      "dependencies": ["P1-005"]
-    },
-    {
-      "id": "P1-008",
-      "content": "Implement opencode idle detection — in src/session.ts: (1) add getIdleDetectionConfig() method returning mode-specific config: for opencode — silenceThresholdMs: 5000, promptPattern: null, useAIChecker: false; for claude — existing values, (2) modify idle detection logic to use silence-based detection when promptPattern is null (track lastOutputTime, timer-based idle check), (3) ensure 'working' event fires on any new output after idle state, (4) make IDLE_DETECTION_DELAY_MS configurable per mode",
-      "priority": "P1",
-      "tddPhase": "impl",
-      "verificationCriteria": "npx vitest run test/opencode-idle.test.ts passes, opencode sessions correctly transition idle→working→idle based on output silence",
-      "pairedWith": "P1-007",
-      "dependencies": ["P1-007"]
-    },
-    {
-      "id": "P1-009",
-      "content": "Review idle detection implementation — verify silence timer is properly cleaned up on session stop/exit (no leaked timers), timer doesn't fire after session disposal, idle threshold is tunable per session, working→idle transition doesn't spam events, existing Claude idle detection unchanged",
-      "priority": "P1",
-      "tddPhase": "review",
-      "verificationCriteria": "Timer cleanup verified, no event spam, Claude idle detection regression-free, CleanupManager tracks new timer",
-      "reviewChecklist": ["Timer cleanup on session.stop()", "No event spam on rapid output", "Claude idle detection unchanged", "CleanupManager integration", "Configurable threshold"],
-      "pairedWith": "P1-008",
-      "dependencies": ["P1-008"]
-    },
-    {
-      "id": "P1-010",
-      "content": "Write failing tests for API routes — test POST /api/sessions creates opencode session when mode: 'opencode', test returns 400 when opencode not installed, test GET /api/opencode/status returns availability info, test POST /api/sessions/:id/interactive works for opencode sessions, test openCodeConfig is persisted in session state. Port: 3163",
-      "priority": "P1",
-      "tddPhase": "test",
-      "verificationCriteria": "test/opencode-api.test.ts exists with 5+ test cases, tests fail because server doesn't handle opencode mode",
-      "testCommand": "npx vitest run test/opencode-api.test.ts",
-      "dependencies": ["P0-008", "P1-005"]
-    },
-    {
-      "id": "P1-011",
-      "content": "Implement API routes for opencode — in src/web/server.ts: (1) in POST /api/sessions handler, check isOpenCodeAvailable() when mode is 'opencode' and return 400 if not installed, pass openCodeConfig from request body to Session constructor, (2) add GET /api/opencode/status route returning { available: boolean, path: string | null }, (3) ensure POST /api/sessions/:id/interactive works for opencode mode (startInteractive already handles mode dispatch), (4) include mode in session state broadcast events, (5) persist openCodeConfig in state store",
-      "priority": "P1",
-      "tddPhase": "impl",
-      "verificationCriteria": "npx vitest run test/opencode-api.test.ts passes, curl GET /api/opencode/status returns valid JSON",
-      "pairedWith": "P1-010",
-      "dependencies": ["P1-010"]
-    },
-    {
-      "id": "P1-012",
-      "content": "Review API routes — verify /api/opencode/status doesn't expose sensitive info (only binary path, not env vars), session creation validates all openCodeConfig fields before passing to Session, error messages don't leak internal paths, SSE events include mode for frontend routing, state persistence includes openCodeConfig",
-      "priority": "P1",
-      "tddPhase": "review",
-      "verificationCriteria": "No info leakage, proper validation, error messages user-friendly, SSE events tagged with mode",
-      "reviewChecklist": ["No sensitive info in /api/opencode/status", "openCodeConfig validated before use", "Error messages actionable", "SSE events include mode", "State persistence round-trips correctly"],
-      "pairedWith": "P1-011",
-      "dependencies": ["P1-011"]
-    },
-    {
-      "id": "P1-013",
-      "content": "Write failing tests for frontend mode selector — Playwright test: load app, verify session creation dialog includes 'OpenCode' option alongside 'Claude Code' and 'Shell', verify selecting OpenCode shows model input field, verify OpenCode option is disabled when /api/opencode/status returns available: false, verify tab shows 'OC' badge for opencode sessions. Port: 3164",
-      "priority": "P1",
-      "tddPhase": "test",
-      "verificationCriteria": "test/opencode-frontend.test.ts (Playwright) exists with 4+ assertions, tests fail because UI doesn't have OpenCode option",
-      "testCommand": "npx vitest run test/opencode-frontend.test.ts",
-      "dependencies": ["P1-011"]
-    },
-    {
-      "id": "P1-014",
-      "content": "Implement frontend UI changes — in src/web/public/app.js: (1) add OpenCode to session creation mode selector (in quick-start modal and/or new session dialog), with icon and 'Multi-model AI agent' description, (2) when opencode mode selected, show model text input with autocomplete for common models (anthropic/claude-sonnet-4-5, openai/gpt-5.2, google/gemini-3-pro, ollama/codellama), (3) check /api/opencode/status on load and disable option if unavailable, (4) add tab badge rendering: 'OC' badge with green (#10b981) background for opencode sessions, 'SH' for shell, none for claude, (5) gate Claude-specific UI panels for opencode sessions (disable hooks panel, auto-compact button)",
-      "priority": "P1",
-      "tddPhase": "impl",
-      "verificationCriteria": "npx vitest run test/opencode-frontend.test.ts passes, manual verification: mode selector shows OpenCode option, tab badge renders",
-      "pairedWith": "P1-013",
-      "dependencies": ["P1-013"]
-    },
-    {
-      "id": "P1-015",
-      "content": "Review frontend implementation — verify mode selector accessibility (keyboard navigable, ARIA labels), model autocomplete doesn't make excessive API calls, tab badge CSS follows existing z-index layering, disabled state has clear visual indicator, no XSS from model name rendering (text content, not innerHTML), feature gating doesn't break Claude session UI",
-      "priority": "P1",
-      "tddPhase": "review",
-      "verificationCriteria": "Accessible UI, no XSS vectors, existing Claude UI unchanged, CSS consistent with design system",
-      "reviewChecklist": ["Keyboard accessibility", "No XSS from model names", "CSS z-index consistent", "Claude UI regression-free", "Disabled state visual clarity", "Mobile layout compatibility"],
-      "pairedWith": "P1-014",
-      "dependencies": ["P1-014"]
-    },
-    {
-      "id": "P1-016",
-      "content": "Write failing tests for respawn controller opencode adaptation — using MockSession from test/respawn-test-utils.ts: test respawn controller accepts opencode sessions, test completion detection uses output silence (not 'Worked for' pattern) for opencode, test prompt sending via writeViaMux works for opencode, test circuit breaker works identically for opencode sessions. Port: none (uses MockSession)",
-      "priority": "P1",
-      "tddPhase": "test",
-      "verificationCriteria": "test/opencode-respawn.test.ts exists with 4+ test cases using MockSession, tests fail because respawn controller doesn't handle opencode idle detection",
-      "testCommand": "npx vitest run test/opencode-respawn.test.ts",
-      "dependencies": ["P1-008"]
-    },
-    {
-      "id": "P1-017",
-      "content": "Implement respawn controller opencode adaptation — in src/respawn-controller.ts: (1) add mode-aware completion detection: for opencode, use output silence threshold instead of COMPLETION_TIME_PATTERN regex, (2) skip plan mode detection patterns for opencode (OpenCode has different plan mode), (3) skip AI idle checker for opencode sessions initially (prompt is Claude-specific), (4) ensure prompt sending via writeViaMux works without modification (it's mode-agnostic), (5) keep circuit breaker, health scoring, and cycle metrics unchanged (they're mode-agnostic)",
-      "priority": "P1",
-      "tddPhase": "impl",
-      "verificationCriteria": "npx vitest run test/opencode-respawn.test.ts passes, respawn cycles work with silence-based completion detection",
-      "pairedWith": "P1-016",
-      "dependencies": ["P1-016"]
-    },
-    {
-      "id": "P1-018",
-      "content": "Review respawn controller changes — verify existing Claude respawn behavior unchanged (run existing respawn tests), silence-based detection has reasonable timeout (matches idle detection config), no race conditions between idle detection and respawn timer, circuit breaker still functions correctly for opencode sessions",
-      "priority": "P1",
-      "tddPhase": "review",
-      "verificationCriteria": "Existing respawn tests pass, no regressions, silence timeout configurable, race conditions addressed",
-      "reviewChecklist": ["Existing Claude respawn tests pass", "Silence timeout reasonable", "No race conditions", "Circuit breaker works for opencode", "Respawn config serialization includes mode"],
-      "pairedWith": "P1-017",
-      "dependencies": ["P1-017"]
-    },
-    {
-      "id": "P1-019",
-      "content": "Write failing tests for state persistence round-trip — test that opencode sessions are correctly serialized to ~/.claudeman/state.json (mode, openCodeConfig preserved), test that sessions are restored on server restart with correct mode and config, test that session lifecycle log records opencode mode. Port: none (unit test)",
-      "priority": "P1",
-      "tddPhase": "test",
-      "verificationCriteria": "test/opencode-state.test.ts exists with 3+ test cases, tests verify serialization/deserialization of opencode session state",
-      "testCommand": "npx vitest run test/opencode-state.test.ts",
-      "dependencies": ["P1-005"]
-    },
-    {
-      "id": "P1-020",
-      "content": "Implement state persistence for opencode sessions — in src/state-store.ts: ensure openCodeConfig is included in SessionState serialization, in session.ts toState() method include openCodeConfig, in server.ts restoreSession() handle mode: 'opencode' and pass openCodeConfig through, update session-lifecycle-log.ts to record opencode mode in lifecycle entries",
-      "priority": "P1",
-      "tddPhase": "impl",
-      "verificationCriteria": "npx vitest run test/opencode-state.test.ts passes, state.json correctly stores and restores opencode sessions",
-      "pairedWith": "P1-019",
-      "dependencies": ["P1-019"]
-    },
-    {
-      "id": "P1-021",
-      "content": "Review state persistence — verify openCodeConfig doesn't contain sensitive data (API keys not serialized to disk), state.json schema is backward compatible (existing sessions load fine without openCodeConfig), lifecycle log entries are queryable by mode",
-      "priority": "P1",
-      "tddPhase": "review",
-      "verificationCriteria": "No API keys in state.json, backward compatibility verified, lifecycle log works",
-      "reviewChecklist": ["No secrets in state.json", "Backward compatibility", "Lifecycle log queryable by mode", "toState() round-trip fidelity"],
-      "pairedWith": "P1-020",
-      "dependencies": ["P1-020"]
-    },
-    {
-      "id": "P2-001",
-      "content": "Write failing tests for feature gating — test that hooks config is NOT generated for opencode sessions, test that subagent watcher skips Claude-specific transcript patterns for opencode, test that auto-compact sends correct slash command per mode (/compact for claude, /clear for opencode), test that token tracking is disabled for opencode sessions (no status line parsing). Port: none (unit tests)",
-      "priority": "P2",
-      "tddPhase": "test",
-      "verificationCriteria": "test/opencode-feature-gating.test.ts exists with 4+ test cases verifying mode-aware feature behavior",
-      "testCommand": "npx vitest run test/opencode-feature-gating.test.ts",
-      "dependencies": ["P1-005"]
-    },
-    {
-      "id": "P2-002",
-      "content": "Implement feature gating for opencode sessions — (1) in hooks-config.ts: guard generateHooksConfig() to skip when session mode is 'opencode', (2) in session.ts: skip token tracking / status line parsing for opencode mode, (3) in session.ts: make auto-compact command mode-aware (Claude: /compact, OpenCode: skip or /clear), (4) in subagent-watcher.ts: skip Claude-specific transcript parsing for opencode sessions but still watch for generic agent activity patterns",
-      "priority": "P2",
-      "tddPhase": "impl",
-      "verificationCriteria": "npx vitest run test/opencode-feature-gating.test.ts passes, Claude features properly disabled for opencode sessions",
-      "pairedWith": "P2-001",
-      "dependencies": ["P2-001"]
-    },
-    {
-      "id": "P2-003",
-      "content": "Review feature gating — verify all mode checks are consistent (use session.mode, not hardcoded string comparisons scattered everywhere), no Claude features accidentally leak into opencode sessions, no opencode-specific code paths break Claude sessions",
-      "priority": "P2",
-      "tddPhase": "review",
-      "verificationCriteria": "Consistent mode checking pattern, no feature leakage, no Claude regressions",
-      "reviewChecklist": ["Consistent mode check pattern", "No feature leakage", "No Claude regressions", "Auto-compact behavior correct per mode"],
-      "pairedWith": "P2-002",
-      "dependencies": ["P2-002"]
-    },
-    {
-      "id": "P2-004",
-      "content": "Write end-to-end integration test — Playwright test that creates an opencode session via the web UI (if opencode is installed) or via API with mocked binary, verifies terminal renders, sends input, receives output, verifies tab badge shows 'OC', verifies session appears in /api/sessions with mode: 'opencode', cleans up session. Port: 3165",
-      "priority": "P2",
-      "tddPhase": "test",
-      "verificationCriteria": "test/opencode-e2e.test.ts exists with full session lifecycle test, skips gracefully if opencode binary not installed",
-      "testCommand": "npx vitest run test/opencode-e2e.test.ts",
-      "dependencies": ["P1-014", "P1-011"]
-    },
-    {
-      "id": "P2-005",
-      "content": "Fix any issues found during E2E testing — address xterm.js rendering issues with OpenCode's Bubble Tea TUI (if any), fix signal handling (SIGWINCH for resize), resolve any env var passthrough issues, ensure cleanup on session delete works correctly for opencode sessions",
-      "priority": "P2",
-      "tddPhase": "impl",
-      "verificationCriteria": "npx vitest run test/opencode-e2e.test.ts passes end-to-end, manual smoke test confirms TUI renders correctly in browser",
-      "pairedWith": "P2-004",
-      "dependencies": ["P2-004"]
-    },
-    {
-      "id": "P2-006",
-      "content": "Review E2E integration — verify session cleanup doesn't leave orphaned tmux sessions, no zombie processes, state.json is clean after deletion, SSE events fire correctly for all lifecycle phases (created, interactive, idle, working, exit, deleted)",
-      "priority": "P2",
-      "tddPhase": "review",
-      "verificationCriteria": "No orphaned tmux sessions, no zombies, clean state.json after delete, all SSE events fire",
-      "reviewChecklist": ["No orphaned tmux sessions", "No zombie processes", "State cleanup complete", "SSE event lifecycle complete", "Resource usage reasonable"],
-      "pairedWith": "P2-005",
-      "dependencies": ["P2-005"]
-    },
-    {
-      "id": "P2-007",
-      "content": "Write tests for Ralph Loop opencode compatibility — test that Ralph Loop can send prompts to opencode sessions via writeViaMux, test that completion detection uses silence-based approach, test that todo tracking is disabled for opencode (no TodoWrite tool parsing), test that Ralph queue processes tasks for opencode sessions",
-      "priority": "P2",
-      "tddPhase": "test",
-      "verificationCriteria": "test/opencode-ralph.test.ts exists with 4+ test cases using MockSession configured in opencode mode",
-      "testCommand": "npx vitest run test/opencode-ralph.test.ts",
-      "dependencies": ["P1-017"]
-    },
-    {
-      "id": "P2-008",
-      "content": "Implement Ralph Loop opencode compatibility — in ralph-loop.ts: (1) allow opencode sessions to be Ralph Loop targets, (2) skip promise phrase detection for opencode (no <promise> tags), (3) use silence-based completion detection matching respawn controller approach, (4) skip TodoWrite parsing for opencode sessions, (5) keep task queue and priority logic unchanged (mode-agnostic)",
-      "priority": "P2",
-      "tddPhase": "impl",
-      "verificationCriteria": "npx vitest run test/opencode-ralph.test.ts passes, Ralph Loop can drive opencode sessions through task queues",
-      "pairedWith": "P2-007",
-      "dependencies": ["P2-007"]
-    },
-    {
-      "id": "P2-009",
-      "content": "Review Ralph Loop adaptation — verify Ralph Loop reliability for opencode (silence detection may be less precise than completion phrase), verify no Ralph features accidentally break for Claude sessions, verify circuit breaker properly handles opencode-specific failure modes",
-      "priority": "P2",
-      "tddPhase": "review",
-      "verificationCriteria": "Ralph Loop works reliably for both modes, no Claude regressions, clear documentation of opencode limitations",
-      "reviewChecklist": ["Silence detection reliability", "No Claude regressions in Ralph", "Circuit breaker handles opencode failures", "Task queue mode-agnostic"],
-      "pairedWith": "P2-008",
-      "dependencies": ["P2-008"]
-    },
-    {
-      "id": "P2-010",
-      "content": "Final typecheck and comprehensive review — run tsc --noEmit across entire project, verify all new files follow import conventions (utils from ./utils, types via type imports), verify no unused imports/variables (noUnusedLocals/noUnusedParameters), run existing test files individually to confirm no regressions, update CLAUDE.md with opencode session documentation",
-      "priority": "P2",
-      "tddPhase": "review",
-      "verificationCriteria": "tsc --noEmit passes with zero errors, existing tests pass, CLAUDE.md updated with opencode section",
-      "reviewChecklist": ["tsc --noEmit clean", "Import conventions followed", "No unused variables", "Existing tests pass", "CLAUDE.md updated", "No TODO/FIXME left unaddressed"],
-      "dependencies": ["P2-003", "P2-006", "P2-009"]
-    }
-  ],
-  "gaps": [
-    "OpenCode binary not currently installed on this machine — manual installation required before integration testing",
-    "OpenCode's exact TUI escape sequence behavior with xterm.js is unknown — may need rendering fixes",
-    "OpenCode's signal handling (SIGWINCH for resize, SIGTERM for graceful shutdown) needs empirical testing",
-    "OpenCode's stdin behavior for pasted/programmatic text input is unverified — writeViaMux may need adaptation",
-    "Token/cost tracking for opencode sessions is deferred — no structured way to get this from TUI output",
-    "OpenCode's 'opencode serve' API integration (Strategy B) is not included in this plan — it's a separate follow-up project",
-    "OpenCode was archived in September 2025 and moved to 'Crush' — long-term maintenance risk",
-    "Multi-line input compatibility with OpenCode's TUI is unknown (Claudeman sends single-line via writeViaMux)",
-    "AI idle checker prompt needs OpenCode-specific variant if AI-based idle detection is desired later",
-    "Agent Teams integration with OpenCode sessions is not covered — teams are Claude Code-specific"
-  ],
-  "warnings": [
-    "OpenCode's GitHub repository was archived (Sep 2025) and the project moved to 'Crush' — consider whether to target opencode or crush",
-    "Silence-based idle detection is less precise than Claude's prompt marker detection — may cause false positives (TUI animation) or false negatives (long-running quiet operations)",
-    "The respawn controller's AI idle checker uses a Claude-specific prompt — it will be disabled for opencode, reducing idle detection reliability",
-    "OpenCode's Bubble Tea TUI uses alternate screen buffer which may interact poorly with xterm.js buffer capture",
-    "API key passthrough in tmux env exports means keys appear in tmux's process tree — security consideration for shared machines",
-    "opencode.json in the project root may conflict with Claudeman's CLI flag overrides — need clear precedence documentation",
-    "Ralph Loop with opencode may be less reliable without completion phrase detection — silence-based detection has higher error margin",
-    "Test port allocation: this plan uses ports 3161-3165 — verify no conflicts with existing tests before implementation"
-  ]
-}

public

@@ -0,0 +1 @@
+tools/remotion/public

remotion/Root.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { Composition } from 'remotion';
-import { CodemanDemo, TOTAL_FRAMES } from './compositions/CodemanDemo';
-
-export const RemotionRoot: React.FC = () => {
-  return (
-    <Composition
-      id="CodemanDemo"
-      component={CodemanDemo}
-      durationInFrames={TOTAL_FRAMES}
-      fps={30}
-      width={1920}
-      height={1080}
-    />
-  );
-};

scripts/build.mjs

@@ -0,0 +1,70 @@
+#!/usr/bin/env node
+/**
+ * Build script for Codeman.
+ * Extracted from the package.json one-liner for readability and debuggability.
+ *
+ * Steps:
+ *   1. TypeScript compilation
+ *   2. Copy static assets (web/public, templates)
+ *   3. Build vendor xterm bundles
+ *   4. Minify frontend assets (app.js, styles.css, mobile.css)
+ *   5. Compress with gzip + brotli
+ */
+
+import { execSync } from 'child_process';
+import { appendFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { join } from 'path';
+
+const ROOT = join(fileURLToPath(import.meta.url), '..', '..');
+
+function run(label, cmd) {
+  console.log(`\n[build] ${label}`);
+  execSync(cmd, { stdio: 'inherit', cwd: ROOT, shell: true });
+}
+
+// 1. TypeScript compilation
+run('tsc', 'tsc');
+run('chmod dist/index.js', 'chmod +x dist/index.js');
+
+// 2. Copy static assets
+run('prepare dirs', 'mkdir -p dist/web dist/templates dist/web/public/vendor');
+run('copy web assets', 'cp -r src/web/public dist/web/');
+run('copy template', 'cp src/templates/case-template.md dist/templates/');
+
+// 3. Vendor xterm bundles
+run('xterm css', 'cp node_modules/xterm/css/xterm.css dist/web/public/vendor/');
+run('xterm js', 'npx esbuild node_modules/xterm/lib/xterm.js --minify --outfile=dist/web/public/vendor/xterm.min.js');
+run('xterm-addon-fit', 'npx esbuild node_modules/xterm-addon-fit/lib/xterm-addon-fit.js --minify --outfile=dist/web/public/vendor/xterm-addon-fit.min.js');
+run('xterm-addon-webgl', 'cp node_modules/xterm-addon-webgl/lib/xterm-addon-webgl.js dist/web/public/vendor/xterm-addon-webgl.min.js');
+run('xterm-addon-unicode11', 'npx esbuild node_modules/xterm-addon-unicode11/lib/xterm-addon-unicode11.js --minify --outfile=dist/web/public/vendor/xterm-addon-unicode11.min.js');
+run('xterm-zerolag-input', 'npx esbuild packages/xterm-zerolag-input/src/zerolag-input-addon.ts --bundle --minify --format=iife --global-name=XtermZerolagInput --outfile=dist/web/public/vendor/xterm-zerolag-input.js');
+
+// Append global aliases so app.js can use `new LocalEchoOverlay(terminal)`
+appendFileSync(
+  join(ROOT, 'dist/web/public/vendor/xterm-zerolag-input.js'),
+  '\n// Global aliases for browser usage\n' +
+  'if(typeof window!=="undefined"){' +
+    'window.ZerolagInputAddon=XtermZerolagInput.ZerolagInputAddon;' +
+    'window.LocalEchoOverlay=class extends XtermZerolagInput.ZerolagInputAddon{' +
+      'constructor(terminal){' +
+        'super({prompt:{type:"character",char:"\\u276f",offset:2}});' +
+        'this.activate(terminal);' +
+      '}' +
+    '};' +
+  '}\n'
+);
+
+// 4. Minify frontend assets
+run('minify app.js', 'npx esbuild dist/web/public/app.js --minify --outfile=dist/web/public/app.js --allow-overwrite');
+run('minify styles.css', 'npx esbuild dist/web/public/styles.css --minify --outfile=dist/web/public/styles.css --allow-overwrite');
+run('minify mobile.css', 'npx esbuild dist/web/public/mobile.css --minify --outfile=dist/web/public/mobile.css --allow-overwrite');
+
+// 5. Compress with gzip + brotli
+run(
+  'compress',
+  `for f in dist/web/public/*.js dist/web/public/*.css dist/web/public/*.html dist/web/public/vendor/*.js dist/web/public/vendor/*.css; do` +
+    ` [ -f "$f" ] && gzip -9 -k -f "$f" && { brotli -9 -k -f "$f" 2>/dev/null || true; }; done`
+);
+
+console.log('\n✓ Build complete');

scripts/postinstall.js

@@ -276,6 +276,34 @@ if (isGlobalInstall) {
 
         // WebGL addon: copy unminified (matches build script behavior)
         copyFileSync(join(webglDir, 'lib', 'xterm-addon-webgl.js'), join(vendorDir, 'xterm-addon-webgl.min.js'));
+
+        // xterm-zerolag-input: bundle local package as IIFE for <script> tag loading
+        try {
+            const zerolagSrc = join(import.meta.dirname, '..', 'packages', 'xterm-zerolag-input', 'src', 'zerolag-input-addon.ts');
+            const zerolagOut = join(vendorDir, 'xterm-zerolag-input.js');
+            execSync(
+                `npx esbuild "${zerolagSrc}" --bundle --format=iife --global-name=XtermZerolagInput --outfile="${zerolagOut}"`,
+                { stdio: 'pipe' }
+            );
+            // Append global aliases so app.js can use `new LocalEchoOverlay(terminal)`
+            const { appendFileSync } = await import('fs');
+            appendFileSync(
+                zerolagOut,
+                '\n// Global aliases for browser usage\n' +
+                'if(typeof window!=="undefined"){' +
+                    'window.ZerolagInputAddon=XtermZerolagInput.ZerolagInputAddon;' +
+                    'window.LocalEchoOverlay=class extends XtermZerolagInput.ZerolagInputAddon{' +
+                        'constructor(terminal){' +
+                            'super({prompt:{type:"character",char:"\\u276f",offset:2}});' +
+                            'this.activate(terminal);' +
+                        '}' +
+                    '};' +
+                '}\n'
+            );
+            console.log(colors.green('✓ xterm-zerolag-input bundled to vendor/'));
+        } catch {
+            console.log(colors.yellow('⚠ Failed to bundle xterm-zerolag-input — overlay may not work in dev mode'));
+        }
     } catch (err) {
         hasWarnings = true;
         console.log(colors.yellow('⚠ Failed to copy xterm vendor files'));
@@ -284,6 +312,36 @@ if (isGlobalInstall) {
     }
 }
 
+// ----------------------------------------------------------------------------
+// 5. Install git pre-commit hook (format check)
+// ----------------------------------------------------------------------------
+
+if (!isGlobalInstall) {
+    try {
+        const { writeFileSync, mkdirSync } = await import('fs');
+        const gitHooksDir = join(import.meta.dirname, '..', '.git', 'hooks');
+        if (existsSync(join(import.meta.dirname, '..', '.git'))) {
+            mkdirSync(gitHooksDir, { recursive: true });
+            const hook = `#!/bin/bash
+# Auto-installed by postinstall — prevents CI format failures
+staged_ts=$(git diff --cached --name-only --diff-filter=ACM -- '*.ts')
+[ -z "$staged_ts" ] && exit 0
+echo "$staged_ts" | xargs npx prettier --check 2>&1
+if [ $? -ne 0 ]; then
+    echo ""
+    echo "Pre-commit: Prettier check failed. Run 'npm run format' to fix."
+    exit 1
+fi
+`;
+            const hookPath = join(gitHooksDir, 'pre-commit');
+            writeFileSync(hookPath, hook, { mode: 0o755 });
+            console.log(colors.green('✓ Git pre-commit hook installed (prettier check)'));
+        }
+    } catch {
+        // Non-critical — git hook is a convenience
+    }
+}
+
 // ----------------------------------------------------------------------------
 // Summary
 // ----------------------------------------------------------------------------

skills-lock.json

@@ -1,10 +0,0 @@
-{
-  "version": 1,
-  "skills": {
-    "remotion-best-practices": {
-      "source": "remotion-dev/skills",
-      "sourceType": "github",
-      "computedHash": "9851afb52e1b892c43b2af973bda1776ce01fedfdfe704e0cfd70069a3a9c300"
-    }
-  }
-}

src/ai-checker-base.ts

@@ -115,7 +115,7 @@ export abstract class AiCheckerBase<
   V extends string,
   C extends AiCheckerConfigBase,
   R extends AiCheckerResultBase<V>,
-  S extends AiCheckerStateBase<V>
+  S extends AiCheckerStateBase<V>,
 > extends EventEmitter {
   protected config: C;
   protected sessionId: string;
@@ -205,9 +205,7 @@ export abstract class AiCheckerBase<
     super();
     this.sessionId = sessionId;
     // Filter out undefined values to prevent overwriting defaults
-    const filteredConfig = Object.fromEntries(
-      Object.entries(config).filter(([, v]) => v !== undefined)
-    ) as Partial<C>;
+    const filteredConfig = Object.fromEntries(Object.entries(config).filter(([, v]) => v !== undefined)) as Partial<C>;
     this.config = { ...defaultConfig, ...filteredConfig };
   }
 
@@ -342,9 +340,7 @@ export abstract class AiCheckerBase<
   /** Update configuration at runtime */
   updateConfig(config: Partial<C>): void {
     // Filter out undefined values to prevent overwriting existing config
-    const filteredConfig = Object.fromEntries(
-      Object.entries(config).filter(([, v]) => v !== undefined)
-    ) as Partial<C>;
+    const filteredConfig = Object.fromEntries(Object.entries(config).filter(([, v]) => v !== undefined)) as Partial<C>;
     this.config = { ...this.config, ...filteredConfig };
     if (config.enabled === false) {
       this.disable('Disabled by config');
@@ -369,9 +365,8 @@ export abstract class AiCheckerBase<
 
     // Prepare the terminal buffer (strip ANSI, trim to maxContextChars)
     const stripped = terminalBuffer.replace(ANSI_ESCAPE_PATTERN_SIMPLE, '');
-    const trimmed = stripped.length > this.config.maxContextChars
-      ? stripped.slice(-this.config.maxContextChars)
-      : stripped;
+    const trimmed =
+      stripped.length > this.config.maxContextChars ? stripped.slice(-this.config.maxContextChars) : stripped;
 
     // Build the prompt
     const prompt = this.buildPrompt(trimmed);
@@ -411,16 +406,15 @@ export abstract class AiCheckerBase<
         // No existing session, that's fine
       }
 
-      const muxProcess = childSpawn('tmux', [
-        'new-session', '-d', '-s', this.checkMuxName,
-        'bash', '-c', fullCmd
-      ], {
+      const muxProcess = childSpawn('tmux', ['new-session', '-d', '-s', this.checkMuxName, 'bash', '-c', fullCmd], {
         detached: true,
         stdio: 'ignore',
       });
       muxProcess.unref();
     } catch (err) {
-      throw new Error(`Failed to spawn ${this.checkDescription} tmux session: ${err instanceof Error ? err.message : String(err)}`);
+      throw new Error(
+        `Failed to spawn ${this.checkDescription} tmux session: ${err instanceof Error ? err.message : String(err)}`
+      );
     }
 
     // Poll the temp file for completion
@@ -530,7 +524,9 @@ export abstract class AiCheckerBase<
 
   private handleError(errorMsg: string): void {
     this.consecutiveErrors++;
-    this.log(`${this.checkDescription} error (${this.consecutiveErrors}/${this.config.maxConsecutiveErrors}): ${errorMsg}`);
+    this.log(
+      `${this.checkDescription} error (${this.consecutiveErrors}/${this.config.maxConsecutiveErrors}): ${errorMsg}`
+    );
 
     if (this.consecutiveErrors >= this.config.maxConsecutiveErrors) {
       this.disable(`${this.config.maxConsecutiveErrors} consecutive errors: ${errorMsg}`);

src/ai-idle-checker.ts

@@ -30,23 +30,24 @@ import {
   type AiCheckerResultBase,
   type AiCheckerStateBase,
 } from './ai-checker-base.js';
+import { AI_CHECK_MODEL, AI_IDLE_CHECK_MAX_CONTEXT } from './config/ai-defaults.js';
 
 // ========== Types ==========
 
-export interface AiIdleCheckConfig extends AiCheckerConfigBase {}
+export type AiIdleCheckConfig = AiCheckerConfigBase;
 
 export type AiCheckVerdict = 'IDLE' | 'WORKING' | 'ERROR';
 
-export interface AiCheckResult extends AiCheckerResultBase<AiCheckVerdict> {}
+export type AiCheckResult = AiCheckerResultBase<AiCheckVerdict>;
 
-export interface AiCheckState extends AiCheckerStateBase<AiCheckVerdict> {}
+export type AiCheckState = AiCheckerStateBase<AiCheckVerdict>;
 
 // ========== Constants ==========
 
 const DEFAULT_AI_CHECK_CONFIG: AiIdleCheckConfig = {
   enabled: true,
-  model: 'claude-opus-4-5-20251101',
-  maxContextChars: 16000,
+  model: AI_CHECK_MODEL,
+  maxContextChars: AI_IDLE_CHECK_MAX_CONTEXT,
   checkTimeoutMs: 90000,
   cooldownMs: 180000,
   errorCooldownMs: 60000,
@@ -123,12 +124,7 @@ Remember: When uncertain, answer WORKING.`;
  * Manages AI-powered idle detection by spawning a fresh Claude CLI session
  * to analyze terminal output and provide a definitive IDLE/WORKING verdict.
  */
-export class AiIdleChecker extends AiCheckerBase<
-  AiCheckVerdict,
-  AiIdleCheckConfig,
-  AiCheckResult,
-  AiCheckState
-> {
+export class AiIdleChecker extends AiCheckerBase<AiCheckVerdict, AiIdleCheckConfig, AiCheckResult, AiCheckState> {
   protected readonly muxNamePrefix = 'codeman-aicheck-';
   protected readonly doneMarker = '__AICHECK_DONE__';
   protected readonly tempFilePrefix = 'codeman-aicheck';

src/ai-plan-checker.ts

@@ -29,23 +29,24 @@ import {
   type AiCheckerResultBase,
   type AiCheckerStateBase,
 } from './ai-checker-base.js';
+import { AI_CHECK_MODEL, AI_PLAN_CHECK_MAX_CONTEXT } from './config/ai-defaults.js';
 
 // ========== Types ==========
 
-export interface AiPlanCheckConfig extends AiCheckerConfigBase {}
+export type AiPlanCheckConfig = AiCheckerConfigBase;
 
 export type AiPlanCheckVerdict = 'PLAN_MODE' | 'NOT_PLAN_MODE' | 'ERROR';
 
-export interface AiPlanCheckResult extends AiCheckerResultBase<AiPlanCheckVerdict> {}
+export type AiPlanCheckResult = AiCheckerResultBase<AiPlanCheckVerdict>;
 
-export interface AiPlanCheckState extends AiCheckerStateBase<AiPlanCheckVerdict> {}
+export type AiPlanCheckState = AiCheckerStateBase<AiPlanCheckVerdict>;
 
 // ========== Constants ==========
 
 const DEFAULT_PLAN_CHECK_CONFIG: AiPlanCheckConfig = {
   enabled: true,
-  model: 'claude-opus-4-5-20251101',
-  maxContextChars: 8000,
+  model: AI_CHECK_MODEL,
+  maxContextChars: AI_PLAN_CHECK_MAX_CONTEXT,
   checkTimeoutMs: 60000,
   cooldownMs: 30000,
   errorCooldownMs: 30000,

src/bash-tool-parser.ts

@@ -15,6 +15,7 @@
 import { EventEmitter } from 'node:events';
 import { v4 as uuidv4 } from 'uuid';
 import { ActiveBashTool } from './types.js';
+import { CleanupManager, Debouncer } from './utils/index.js';
 
 // ========== Configuration Constants ==========
 
@@ -73,25 +74,25 @@ const FOLLOW_MODE_PATTERN = /\s-[A-Za-z]*f[A-Za-z]*\s|\s--follow\s/;
  * Note: This is a simpler approach - we run it on each command string
  * rather than trying to match globally.
  */
-const FILE_PATH_PATTERN = /(?:^|\s|['"]|=)([\/~][^\s'"<>|;&\n]+)/g;
+const FILE_PATH_PATTERN = /(?:^|\s|['"]|=)([/~][^\s'"<>|;&\n]+)/g;
 
 /**
  * Pattern to detect paths that are likely not real files (flags, etc.)
  */
-const INVALID_PATH_PATTERN = /^[\/~]-|\/dev\/null$/;
+const INVALID_PATH_PATTERN = /^[/~]-|\/dev\/null$/;
 
 /**
  * Pattern to detect command suggestions in plain text output.
  * Matches lines like "tail -f /path/to/file" without the ● Bash() wrapper.
  * This catches commands Claude mentions but doesn't execute.
  */
-const TEXT_COMMAND_PATTERN = /^\s*(tail|cat|head|less|grep|watch|multitail)\s+(?:-[^\s]+\s+)*([\/~][^\s'"<>|;&\n]+)/;
+const TEXT_COMMAND_PATTERN = /^\s*(tail|cat|head|less|grep|watch|multitail)\s+(?:-[^\s]+\s+)*([/~][^\s'"<>|;&\n]+)/;
 
 /**
  * Pattern to detect log file paths mentioned in text (even without commands).
  * Matches paths ending in .log, .txt, .out, or in common log directories.
  */
-const LOG_FILE_MENTION_PATTERN = /([\/~][^\s'"<>|;&\n]*(?:\.log|\.txt|\.out|\/log\/[^\s'"<>|;&\n]+))/g;
+const LOG_FILE_MENTION_PATTERN = /([/~][^\s'"<>|;&\n]*(?:\.log|\.txt|\.out|\/log\/[^\s'"<>|;&\n]+))/g;
 
 // ========== Event Interfaces ==========
 
@@ -145,15 +146,14 @@ export class BashToolParser extends EventEmitter<BashToolParserEvents> {
   private _workingDir: string;
   private _homeDir: string;
 
-  // Track auto-remove timers for cleanup
-  private _autoRemoveTimers: Set<ReturnType<typeof setTimeout>> = new Set();
+  // Centralized resource cleanup for auto-remove timers
+  private cleanup = new CleanupManager();
 
   // Flag to prevent operations after destroy
   private _destroyed: boolean = false;
 
   // Debouncing
-  private _pendingUpdate: boolean = false;
-  private _updateTimer: ReturnType<typeof setTimeout> | null = null;
+  private _updateDeb = new Debouncer(EVENT_DEBOUNCE_MS);
 
   constructor(config: BashToolParserConfig) {
     super();
@@ -245,7 +245,7 @@ export class BashToolParser extends EventEmitter<BashToolParserEvents> {
    */
   private isShallowRootPath(path: string): boolean {
     if (!path.startsWith('/')) return false;
-    const parts = path.split('/').filter(p => p !== '');
+    const parts = path.split('/').filter((p) => p !== '');
     return parts.length === 1;
   }
 
@@ -354,10 +354,10 @@ export class BashToolParser extends EventEmitter<BashToolParserEvents> {
   isFilePathTracked(filePath: string): boolean {
     const normalizedNew = this.normalizePath(filePath);
 
-    return Array.from(this._activeTools.values()).some(t => {
+    return Array.from(this._activeTools.values()).some((t) => {
       if (t.status !== 'running') return false;
 
-      return t.filePaths.some(existingPath => {
+      return t.filePaths.some((existingPath) => {
         const normalizedExisting = this.normalizePath(existingPath);
         return normalizedExisting === normalizedNew;
       });
@@ -418,9 +418,8 @@ export class BashToolParser extends EventEmitter<BashToolParserEvents> {
     // Prevent unbounded growth
     if (this._lineBuffer.length > MAX_LINE_BUFFER_SIZE) {
       const trimPoint = this._lineBuffer.lastIndexOf('\n', MAX_LINE_BUFFER_SIZE / 2);
-      this._lineBuffer = trimPoint > 0
-        ? this._lineBuffer.slice(trimPoint + 1)
-        : this._lineBuffer.slice(-MAX_LINE_BUFFER_SIZE / 2);
+      this._lineBuffer =
+        trimPoint > 0 ? this._lineBuffer.slice(trimPoint + 1) : this._lineBuffer.slice(-MAX_LINE_BUFFER_SIZE / 2);
     }
 
     // Process complete lines
@@ -445,9 +444,8 @@ export class BashToolParser extends EventEmitter<BashToolParserEvents> {
 
     if (this._lineBuffer.length > MAX_LINE_BUFFER_SIZE) {
       const trimPoint = this._lineBuffer.lastIndexOf('\n', MAX_LINE_BUFFER_SIZE / 2);
-      this._lineBuffer = trimPoint > 0
-        ? this._lineBuffer.slice(trimPoint + 1)
-        : this._lineBuffer.slice(-MAX_LINE_BUFFER_SIZE / 2);
+      this._lineBuffer =
+        trimPoint > 0 ? this._lineBuffer.slice(trimPoint + 1) : this._lineBuffer.slice(-MAX_LINE_BUFFER_SIZE / 2);
     }
 
     const lines = this._lineBuffer.split('\n');
@@ -472,7 +470,6 @@ export class BashToolParser extends EventEmitter<BashToolParserEvents> {
    * Process a single pre-stripped line of terminal output.
    */
   private processCleanLine(cleanLine: string): void {
-
     // Check for tool start
     const startMatch = cleanLine.match(BASH_TOOL_START_PATTERN);
     if (startMatch) {
@@ -484,7 +481,7 @@ export class BashToolParser extends EventEmitter<BashToolParserEvents> {
         const filePaths = this.extractFilePaths(command);
 
         // Skip if any file path is already tracked (cross-pattern dedup)
-        if (filePaths.some(fp => this.isFilePathTracked(fp))) {
+        if (filePaths.some((fp) => this.isFilePathTracked(fp))) {
           return;
         }
 
@@ -502,8 +499,7 @@ export class BashToolParser extends EventEmitter<BashToolParserEvents> {
           // Enforce max tools limit
           if (this._activeTools.size >= MAX_ACTIVE_TOOLS) {
             // Remove oldest tool
-            const oldest = Array.from(this._activeTools.entries())
-              .sort((a, b) => a[1].startedAt - b[1].startedAt)[0];
+            const oldest = Array.from(this._activeTools.entries()).sort((a, b) => a[1].startedAt - b[1].startedAt)[0];
             if (oldest) {
               this._activeTools.delete(oldest[0]);
             }
@@ -528,13 +524,15 @@ export class BashToolParser extends EventEmitter<BashToolParserEvents> {
         this.scheduleUpdate();
 
         // Remove completed tool after a short delay to allow UI to show completion
-        const timer = setTimeout(() => {
-          this._autoRemoveTimers.delete(timer);
+        this.cleanup.setTimeout(
+          () => {
             if (this._destroyed) return;
             this._activeTools.delete(tool.id);
             this.scheduleUpdate();
-        }, 2000);
-        this._autoRemoveTimers.add(timer);
+          },
+          2000,
+          { description: 'auto-remove completed tool' }
+        );
       }
       this._lastToolId = null;
       return;
@@ -566,13 +564,15 @@ export class BashToolParser extends EventEmitter<BashToolParserEvents> {
       this.scheduleUpdate();
 
       // Auto-remove suggestions after 30 seconds
-      const timer = setTimeout(() => {
-        this._autoRemoveTimers.delete(timer);
+      this.cleanup.setTimeout(
+        () => {
           if (this._destroyed) return;
           this._activeTools.delete(tool.id);
           this.scheduleUpdate();
-      }, 30000);
-      this._autoRemoveTimers.add(timer);
+        },
+        30000,
+        { description: 'auto-remove suggestion tool' }
+      );
       return;
     }
 
@@ -603,13 +603,15 @@ export class BashToolParser extends EventEmitter<BashToolParserEvents> {
       this.scheduleUpdate();
 
       // Auto-remove after 60 seconds
-      const timer = setTimeout(() => {
-        this._autoRemoveTimers.delete(timer);
+      this.cleanup.setTimeout(
+        () => {
           if (this._destroyed) return;
           this._activeTools.delete(tool.id);
           this.scheduleUpdate();
-      }, 60000);
-      this._autoRemoveTimers.add(timer);
+        },
+        60000,
+        { description: 'auto-remove log file tool' }
+      );
     }
   }
 
@@ -671,6 +673,7 @@ export class BashToolParser extends EventEmitter<BashToolParserEvents> {
    */
   private stripAnsi(str: string): string {
     // Comprehensive ANSI pattern
+    // eslint-disable-next-line no-control-regex
     return str.replace(/\x1b(?:\[[0-9;?]*[A-Za-z]|\][^\x07\x1b]*(?:\x07|\x1b\\)|[=>])/g, '');
   }
 
@@ -678,13 +681,9 @@ export class BashToolParser extends EventEmitter<BashToolParserEvents> {
    * Schedule a debounced update emission.
    */
   private scheduleUpdate(): void {
-    if (this._pendingUpdate) return;
-
-    this._pendingUpdate = true;
-    this._updateTimer = setTimeout(() => {
-      this._pendingUpdate = false;
+    this._updateDeb.schedule(() => {
       this.emitUpdate();
-    }, EVENT_DEBOUNCE_MS);
+    });
   }
 
   /**
@@ -699,15 +698,8 @@ export class BashToolParser extends EventEmitter<BashToolParserEvents> {
    */
   destroy(): void {
     this._destroyed = true;
-    if (this._updateTimer) {
-      clearTimeout(this._updateTimer);
-      this._updateTimer = null;
-    }
-    // Clear all auto-remove timers to prevent orphaned callbacks
-    for (const timer of this._autoRemoveTimers) {
-      clearTimeout(timer);
-    }
-    this._autoRemoveTimers.clear();
+    this._updateDeb.dispose();
+    this.cleanup.dispose();
     this._activeTools.clear();
     this.removeAllListeners();
   }

src/cli.ts

@@ -21,17 +21,11 @@ const pkg = require('../package.json') as { version: string };
 
 const program = new Command();
 
-program
-  .name('codeman')
-  .description('Claude Code session manager with autonomous Ralph Loop')
-  .version(pkg.version);
+program.name('codeman').description('Claude Code session manager with autonomous Ralph Loop').version(pkg.version);
 
 // ============ Session Commands ============
 
-const sessionCmd = program
-  .command('session')
-  .alias('s')
-  .description('Manage Claude sessions');
+const sessionCmd = program.command('session').alias('s').description('Manage Claude sessions');
 
 sessionCmd
   .command('start')
@@ -83,7 +77,8 @@ sessionCmd
       console.log('  (none)');
     } else {
       for (const session of sessions) {
-        const status = session.status === 'idle'
+        const status =
+          session.status === 'idle'
             ? chalk.green('idle')
             : session.status === 'busy'
               ? chalk.yellow('busy')
@@ -106,7 +101,8 @@ sessionCmd
     if (sessions.length === 0 && activeSessions.length > 0) {
       console.log(chalk.bold('\nActive Sessions (from web server):'));
       for (const session of activeSessions) {
-        const status = session.status === 'idle'
+        const status =
+          session.status === 'idle'
             ? chalk.green('idle')
             : session.status === 'busy'
               ? chalk.yellow('busy')
@@ -126,9 +122,7 @@ sessionCmd
   .option('-e, --errors', 'Show stderr instead of stdout')
   .action((id, options) => {
     const manager = getSessionManager();
-    const output = options.errors
-      ? manager.getSessionError(id)
-      : manager.getSessionOutput(id);
+    const output = options.errors ? manager.getSessionError(id) : manager.getSessionOutput(id);
 
     if (output === null) {
       console.log(chalk.yellow(`Session ${id} not found or not active`));
@@ -145,10 +139,7 @@ sessionCmd
 
 // ============ Task Commands ============
 
-const taskCmd = program
-  .command('task')
-  .alias('t')
-  .description('Manage tasks');
+const taskCmd = program.command('task').alias('t').description('Manage tasks');
 
 taskCmd
   .command('add <prompt>')
@@ -205,7 +196,9 @@ taskCmd
 
     const counts = queue.getCount();
     console.log(chalk.bold('\nSummary:'));
-    console.log(`  Pending: ${counts.pending}, Running: ${counts.running}, Completed: ${counts.completed}, Failed: ${counts.failed}`);
+    console.log(
+      `  Pending: ${counts.pending}, Running: ${counts.running}, Completed: ${counts.completed}, Failed: ${counts.failed}`
+    );
     console.log('');
   });
 
@@ -276,10 +269,7 @@ taskCmd
 
 // ============ Ralph Loop Commands ============
 
-const ralphCmd = program
-  .command('ralph')
-  .alias('r')
-  .description('Control the Ralph autonomous loop');
+const ralphCmd = program.command('ralph').alias('r').description('Control the Ralph autonomous loop');
 
 ralphCmd
   .command('start')
@@ -355,17 +345,16 @@ ralphCmd
   });
 
 function printStats(stats: ReturnType<ReturnType<typeof getRalphLoop>['getStats']>) {
-  const statusColor =
-    stats.status === 'running' ? chalk.green :
-    stats.status === 'paused' ? chalk.yellow :
-    chalk.gray;
+  const statusColor = stats.status === 'running' ? chalk.green : stats.status === 'paused' ? chalk.yellow : chalk.gray;
 
   console.log(chalk.bold('\nRalph Loop Status:'));
   console.log(`  Status: ${statusColor(stats.status)}`);
   console.log(`  Elapsed: ${stats.elapsedHours.toFixed(2)} hours`);
   if (stats.minDurationMs) {
     const minHours = stats.minDurationMs / (1000 * 60 * 60);
-    console.log(`  Min Duration: ${minHours.toFixed(2)} hours (${stats.minDurationReached ? 'reached' : 'not reached'})`);
+    console.log(
+      `  Min Duration: ${minHours.toFixed(2)} hours (${stats.minDurationReached ? 'reached' : 'not reached'})`
+    );
   }
 
   console.log(chalk.bold('\nTasks:'));
@@ -422,10 +411,7 @@ program
     console.log(`  Completed: ${taskCounts.completed}`);
     console.log(`  Failed: ${taskCounts.failed}`);
 
-    const statusColor =
-      loopStatus === 'running' ? chalk.green :
-      loopStatus === 'paused' ? chalk.yellow :
-      chalk.gray;
+    const statusColor = loopStatus === 'running' ? chalk.green : loopStatus === 'paused' ? chalk.yellow : chalk.gray;
     console.log(chalk.bold('\nRalph Loop:'));
     console.log(`  Status: ${statusColor(loopStatus)}`);
     console.log('');
@@ -481,7 +467,8 @@ program
       console.log('  (none)');
     } else {
       for (const session of sessions) {
-        const status = session.status === 'idle'
+        const status =
+          session.status === 'idle'
             ? chalk.green('idle')
             : session.status === 'busy'
               ? chalk.yellow('busy')

src/config/ai-defaults.ts

@@ -0,0 +1,18 @@
+/**
+ * @fileoverview Default model and context limits for AI-powered checkers.
+ *
+ * Centralizes the AI model identifier and context window sizes used by
+ * the idle checker, plan checker, respawn controller defaults, and
+ * respawn route fallbacks. Change the model here when upgrading.
+ *
+ * @module config/ai-defaults
+ */
+
+/** Default model for AI idle and plan checkers */
+export const AI_CHECK_MODEL = 'claude-opus-4-5-20251101';
+
+/** Max context chars for idle checker (~4k tokens) */
+export const AI_IDLE_CHECK_MAX_CONTEXT = 16000;
+
+/** Max context chars for plan checker (~2k tokens, plan mode UI is compact) */
+export const AI_PLAN_CHECK_MAX_CONTEXT = 8000;