redesign tasks

.gitignore

@@ -32,3 +32,4 @@ report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 
 # Finder (MacOS) folder config
 .DS_Store
+.harness/

scripts/tui-harness.tsx

@@ -0,0 +1,619 @@
+#!/usr/bin/env bun
+/**
+ * PodTUI LLM-interactive harness — stateless per-turn snapshot bridge.
+ *
+ * Each invocation:
+ *   1. Points XDG_CONFIG_HOME / XDG_DATA_HOME / PODTUI_AUDIO_BACKEND at a
+ *      sandbox dir under .harness so your real ~/.config/podtui is never touched.
+ *   2. Replays the saved action log (.harness/actions.json) from scratch.
+ *   3. Appends + executes the new action passed on the CLI.
+ *   4. Renders, captures structured spans, and prints: plain frame + distinct
+ *      style summary (colors/attrs) + selected store state + captured issues
+ *      (stderr / uncaught rejections). Full structured spans are dumped to
+ *      .harness/last-frame.json every turn.
+ *
+ * Audio is silent (Noop) by default during the snapshot model so replaying the
+ * log each turn doesn't re-trigger real playback. Pass --audio (or set
+ * PODTUI_AUDIO_BACKEND) to flip to a real backend for the new action only.
+ *
+ * Import order mirrors src/index.tsx (lazy) to avoid a NavigationContext cycle.
+ *
+ * Usage:
+ *   bun scripts/tui-harness.tsx init [--size 100x30] [--seed]
+ *   bun scripts/tui-harness.tsx key <key> [mods...]      # mods: ctrl shift meta
+ *   bun scripts/tui-harness.tsx arrow <up|down|left|right> [mods...]
+ *   bun scripts/tui-harness.tsx enter|escape|tab|space|backspace
+ *   bun scripts/tui-harness.tsx type "<text>"
+ *   bun scripts/tui-harness.tsx wait <ms>
+ *   bun scripts/tui-harness.tsx resize <w> <h>
+ *   bun scripts/tui-harness.tsx frame                        # re-render, no new action
+ *   bun scripts/tui-harness.tsx state [all|nav|audio|feed|app]
+ *   bun scripts/tui-harness.tsx actions                      # print action log
+ *   bun scripts/tui-harness.tsx reset
+ *   bun scripts/tui-harness.tsx seed [--from ~/.config/podtui]
+ *
+ * Flags (after the subcommand):
+ *   --size WxH      terminal size (default 100x30)
+ *   --audio         enable real audio backend for the new action only
+ *   --no-settle     skip the extra render-settle loops
+ *   --styles        print the distinct-styles sample block (off by default)
+ *   --verbose       restore the original multi-line pretty output
+ */
+
+import { testRender } from "@opentui/solid";
+import {
+	existsSync,
+	mkdirSync,
+	cpSync,
+	writeFileSync,
+	readFileSync,
+} from "node:fs";
+import { join } from "node:path";
+
+// ── Paths & sandbox ────────────────────────────────────────────────────────
+const HANDLES_DIR = ".harness";
+const CONFIG_HOME = join(HANDLES_DIR, "config-home");
+const DATA_HOME = join(HANDLES_DIR, "data-home");
+const ACTIONS_FILE = join(HANDLES_DIR, "actions.json");
+const FRAME_JSON = join(HANDLES_DIR, "last-frame.json");
+const FRAME_TXT = join(HANDLES_DIR, "last-frame.txt");
+const STATE_JSON = join(HANDLES_DIR, "state.json");
+
+// Sandbox must be active BEFORE any app module is imported, so the app's
+// config-dir / persistence reads resolve into .harness/*.
+function activateSandbox(): void {
+	mkdirSync(CONFIG_HOME, { recursive: true });
+	mkdirSync(DATA_HOME, { recursive: true });
+	process.env.XDG_CONFIG_HOME = join(process.cwd(), CONFIG_HOME);
+	process.env.XDG_DATA_HOME = join(process.cwd(), DATA_HOME);
+	// Silent audio during replay by default; --audio flips this after import.
+	if (!process.env.PODTUI_AUDIO_BACKEND)
+		process.env.PODTUI_AUDIO_BACKEND = "none";
+}
+
+// ── Action log ─────────────────────────────────────────────────────────────
+type Mod = "ctrl" | "shift" | "meta" | "super" | "hyper";
+type Action =
+	| { t: "key"; k: string; mods?: Mod[] }
+	| { t: "arrow"; d: "up" | "down" | "left" | "right"; mods?: Mod[] }
+	| { t: "enter" | "escape" | "tab" | "space" | "backspace"; mods?: Mod[] }
+	| { t: "type"; s: string }
+	| { t: "wait"; ms: number }
+	| { t: "resize"; w: number; h: number };
+
+function loadActions(): Action[] {
+	try {
+		return JSON.parse(readFileSync(ACTIONS_FILE, "utf8") || "[]");
+	} catch {
+		return [];
+	}
+}
+function saveActions(a: Action[]): void {
+	writeFileSync(ACTIONS_FILE, JSON.stringify(a, null, 2));
+}
+
+// ── Issue capture ──────────────────────────────────────────────────────────
+const issues: string[] = [];
+// Captured by the StateProbe component rendered inside the provider tree —
+// Solid contexts can only be read from within the tree, not from outside.
+let navRef: any = null;
+function captureIssues(): void {
+	const origErr = console.error;
+	const origWarn = console.warn;
+	console.error = (...args: unknown[]) => {
+		issues.push("stderr: " + args.map(String).join(" "));
+		origErr(...(args as any[]));
+	};
+	console.warn = (...args: unknown[]) => {
+		issues.push("warn: " + args.map(String).join(" "));
+		origWarn(...(args as any[]));
+	};
+	process.on("uncaughtException", (e) =>
+		issues.push("uncaught: " + ((e as Error)?.stack || String(e))),
+	);
+	process.on("unhandledRejection", (e) =>
+		issues.push("unhandledRejection: " + ((e as Error)?.stack || String(e))),
+	);
+}
+
+// ── Span rendering ─────────────────────────────────────────────────────────
+type RGBA = { r: number; g: number; b: number; a: number };
+type Span = {
+	text: string;
+	fg: RGBA | null;
+	bg: RGBA | null;
+	attributes: number;
+	width: number;
+};
+
+const ATTR_NAMES: Record<string, number> = {
+	BOLD: 1,
+	DIM: 2,
+	ITALIC: 4,
+	UNDERLINE: 8,
+	BLINK: 16,
+	INVERSE: 32,
+	HIDDEN: 64,
+	STRIKETHROUGH: 128,
+};
+
+function hex(c: RGBA | null): string | null {
+	if (!c) return null;
+	if (c.a === 0) return null; // transparent → "default"
+	const [r, g, b] = [c.r, c.g, c.b].map((v) =>
+		Math.max(0, Math.min(255, Math.round(v))),
+	);
+	return "#" + [r, g, b].map((n) => n.toString(16).padStart(2, "0")).join("");
+}
+
+function attrLabels(attr: number): string[] {
+	const out: string[] = [];
+	for (const [name, bit] of Object.entries(ATTR_NAMES))
+		if (attr & bit) out.push(name.toLowerCase());
+	return out;
+}
+
+// (Plain frame text comes from captureCharFrame instead of span reconstruction.)
+
+function distinctStyles(spans: {
+	lines: { spans: Span[] }[];
+}): { tag: string; sample: string; n: number }[] {
+	const map = new Map<string, { tag: string; sample: string; n: number }>();
+	for (const line of spans.lines) {
+		for (const s of line.spans) {
+			if (!s.text || s.text.trim() === "") continue;
+			const fg = hex(s.fg as any);
+			const bg = hex(s.bg as any);
+			if (!fg && !bg && s.attributes === 0) continue; // default — skip
+			const tags = attrLabels(s.attributes);
+			const tag = `[fg=${fg ?? "·"} bg=${bg ?? "·"}${tags.length ? " " + tags.join("+") : ""}]`;
+			const ex = map.get(tag);
+			const sample = s.text.replace(/\n/g, "\\n").slice(0, 28);
+			if (ex) {
+				ex.n++;
+				if (ex.sample.length < 14 && sample.length > ex.sample.length)
+					ex.sample = sample;
+			} else {
+				map.set(tag, { tag, sample, n: 1 });
+			}
+		}
+	}
+	return [...map.values()].sort((a, b) => b.n - a.n).slice(0, 20);
+}
+
+// ── Arg parsing ────────────────────────────────────────────────────────────
+function parseFlags(rest: string[]): {
+	flags: Record<string, string | boolean>;
+	positional: string[];
+} {
+	const flags: Record<string, string | boolean> = {};
+	const positional: string[] = [];
+	for (let i = 0; i < rest.length; i++) {
+		const a = rest[i];
+		if (a.startsWith("--")) {
+			if (a === "--audio") flags.audio = true;
+			else if (a === "--no-settle") flags["no-settle"] = true;
+			else if (a === "--styles") flags.styles = true;
+			else if (a === "--verbose") flags.verbose = true;
+			else if (a === "--size") {
+				flags.size = rest[++i];
+				const m = /(\d+)x(\d+)/.exec(String(flags.size));
+				if (m) {
+					flags.w = m[1];
+					flags.h = m[2];
+				}
+			} else if (a === "--from") {
+				flags.from = rest[++i];
+			} else {
+				flags[a.slice(2)] = rest[++i] ?? true;
+			}
+		} else {
+			positional.push(a);
+		}
+	}
+	return { flags, positional };
+}
+
+function parseMods(positional: string[]): Mod[] {
+	const mods: Mod[] = [];
+	for (const p of positional)
+		if (["ctrl", "shift", "meta", "super", "hyper"].includes(p))
+			mods.push(p as Mod);
+	return mods;
+}
+
+function buildAction(cmd: string, positional: string[]): Action | null {
+	const mods = parseMods(positional);
+	const first = positional[0];
+	switch (cmd) {
+		case "key":
+			if (!first) throw new Error("key requires a <key> argument");
+			return { t: "key", k: first, mods: mods.length ? mods : undefined };
+		case "arrow":
+			if (!first || !["up", "down", "left", "right"].includes(first))
+				throw new Error("arrow requires up|down|left|right");
+			return {
+				t: "arrow",
+				d: first as any,
+				mods: mods.length ? mods : undefined,
+			};
+		case "enter":
+		case "escape":
+		case "tab":
+		case "space":
+		case "backspace":
+			return { t: cmd, mods: mods.length ? mods : undefined };
+		case "type":
+			if (first === undefined) throw new Error("type requires <text>");
+			// Re-join the rest in case text had spaces; positional[0] already is first token,
+			// caller should quote. We join all positional as the text.
+			return { t: "type", s: positional.join(" ") };
+		case "wait":
+			if (!first) throw new Error("wait requires <ms>");
+			return { t: "wait", ms: parseInt(first, 10) || 0 };
+		case "resize":
+			if (!first || !positional[1]) throw new Error("resize requires <w> <h>");
+			return {
+				t: "resize",
+				w: parseInt(first, 10) || 100,
+				h: parseInt(positional[1], 10) || 30,
+			};
+		case "frame":
+		case "state":
+		case "reset":
+		case "actions":
+		case "init":
+		case "seed":
+			return null;
+		default:
+			throw new Error(`unknown command: ${cmd}`);
+	}
+}
+
+// ── Execute one action against a mounted setup ──────────────────────────────
+function fmtMods(mods?: Mod[]): Record<string, boolean> | undefined {
+	if (!mods || !mods.length) return undefined;
+	const o: Record<string, boolean> = {};
+	for (const m of mods) o[m] = true;
+	return o;
+}
+
+async function execAction(setup: any, a: Action): Promise<void> {
+	const mi = setup.mockInput;
+	switch (a.t) {
+		case "key":
+			mi.pressKey(a.k, fmtMods(a.mods));
+			break;
+		case "arrow":
+			mi.pressArrow(a.d, fmtMods(a.mods));
+			break;
+		case "enter":
+			mi.pressEnter(fmtMods(a.mods));
+			break;
+		case "escape":
+			mi.pressEscape(fmtMods(a.mods));
+			break;
+		case "tab":
+			mi.pressTab(fmtMods(a.mods));
+			break;
+		case "space":
+			mi.pressKey("space");
+			break;
+		case "backspace":
+			mi.pressBackspace(fmtMods(a.mods));
+			break;
+		case "type":
+			await mi.typeText(a.s, 0);
+			break;
+		case "wait":
+			await new Promise((r) => setTimeout(r, a.ms));
+			break;
+		case "resize":
+			setup.resize(a.w, a.h);
+			break;
+	}
+	await setup.renderOnce();
+	// tiny settle for reactive updates
+	await new Promise((r) => setTimeout(r, 40));
+}
+
+// ── Main ───────────────────────────────────────────────────────────────────
+async function main() {
+	activateSandbox();
+	captureIssues();
+
+	const argv = process.argv.slice(2);
+	const cmd = argv[0] ?? "frame";
+	const { flags, positional } = parseFlags(argv.slice(1));
+
+	// Local-only commands that don't mount.
+	if (cmd === "reset") {
+		saveActions([]);
+		console.log("✔ actions log cleared.");
+		return;
+	}
+	if (cmd === "actions") {
+		const a = loadActions();
+		console.log(`Action log (${a.length}):`);
+		console.log(JSON.stringify(a, null, 2));
+		return;
+	}
+	if (cmd === "seed") {
+		const from = String(
+			flags.from || join(process.env.HOME || "~", ".config", "podtui"),
+		);
+		if (!existsSync(from)) {
+			console.error(`seed source not found: ${from}`);
+			process.exit(1);
+		}
+		const dest = join(process.env.XDG_CONFIG_HOME!, "podtui");
+		cpSync(from, dest, { recursive: true });
+		console.log(`✔ seeded sandbox config from ${from} → ${dest}`);
+		return;
+	}
+
+	// Size settings.
+	let width = 100;
+	let height = 30;
+	if (flags.w) width = parseInt(String(flags.w), 10);
+	if (flags.h) height = parseInt(String(flags.h), 10);
+
+	let newAction: Action | null = null;
+	let actions: Action[] = [];
+	if (cmd !== "init" && cmd !== "frame" && cmd !== "state") {
+		newAction = buildAction(cmd, positional);
+	}
+	if (cmd === "init") {
+		saveActions([]);
+		actions = [];
+	} else {
+		actions = loadActions();
+	}
+
+	// Mount the real app. Lazy imports (order matters — see NavigationContext cycle).
+	const { App } = await import("../src/App");
+	const { ThemeProvider } = await import("../src/context/ThemeContext");
+	const toast = await import("../src/ui/toast");
+	const { KeybindProvider } = await import("../src/context/KeybindContext");
+	const { NavigationProvider, useNavigation } = await import(
+		"../src/context/NavigationContext"
+	);
+	const { DialogProvider } = await import("../src/ui/dialog");
+	const { CommandProvider } = await import("../src/ui/command");
+
+	// Probe rendered inside the provider tree so context hooks resolve.
+	const StateProbe = () => {
+		try {
+			navRef = useNavigation();
+		} catch (e) {
+			issues.push("StateProbe: " + String(e));
+		}
+		return null;
+	};
+
+	const HarnessRoot = () => (
+		<toast.ToastProvider>
+			<ThemeProvider mode="dark">
+				<KeybindProvider>
+					<NavigationProvider>
+						<StateProbe />
+						<DialogProvider>
+							<CommandProvider>
+								<App />
+								<toast.Toast />
+							</CommandProvider>
+						</DialogProvider>
+					</NavigationProvider>
+				</KeybindProvider>
+			</ThemeProvider>
+		</toast.ToastProvider>
+	);
+
+	const setup = await testRender(() => <HarnessRoot />, {
+		width,
+		height,
+		useThread: false,
+	});
+	(setup.renderer as any).disableStdoutInterception?.();
+
+	// Wait for providers (keybinds/theme/feeds) to settle.
+	const settleLoops = flags["no-settle"] ? 2 : 12;
+	for (let i = 0; i < settleLoops; i++) {
+		await setup.renderOnce();
+		await new Promise((r) => setTimeout(r, 60));
+	}
+
+	// Replay history silently (audio already Noop via env).
+	for (const a of actions) await execAction(setup, a);
+
+	// For the *new* action: if --audio, flip to a real backend just for it.
+	let audioControls: any = null;
+	try {
+		const { useAudio } = await import("../src/hooks/useAudio");
+		audioControls = useAudio();
+	} catch (e) {
+		issues.push("useAudio import: " + String(e));
+	}
+	if (newAction) {
+		if (flags.audio && audioControls?.switchBackend) {
+			// Re-detect: clear env so detection picks the best real backend.
+			delete process.env.PODTUI_AUDIO_BACKEND;
+			// Force (re)creation of a real backend; useAudio caches, switchBackend resets.
+			await audioControls.switchBackend("mpv").catch(() => {});
+			if (
+				!audioControls.backendName() ||
+				audioControls.backendName() === "none"
+			) {
+				await audioControls.switchBackend("afplay").catch(() => {});
+			}
+		}
+		actions.push(newAction);
+		saveActions(actions);
+		await execAction(setup, newAction);
+	}
+
+	// Final settle + capture.
+	await setup.renderOnce();
+	await new Promise((r) => setTimeout(r, 60));
+	const spans = setup.captureSpans() as {
+		lines: { spans: Span[] }[];
+		cols: number;
+		rows: number;
+		cursor: [number, number];
+	};
+	const plainFrame = setup.captureCharFrame();
+
+	// Dump structured spans + plain frame.
+	try {
+		writeFileSync(FRAME_JSON, JSON.stringify(spans));
+		writeFileSync(FRAME_TXT, plainFrame);
+	} catch {}
+
+	// Store state snapshot.
+	const state: Record<string, unknown> = {};
+	try {
+		const nav = navRef;
+		if (nav) {
+			state.nav = {
+				tab: nav.activeTab?.(),
+				pane: nav.activePane?.(),
+				mode: nav.mode?.(),
+				input: nav.inputFocused?.(),
+				sel: nav.selectedIds?.()?.length ?? 0,
+				ready: nav.ready,
+			};
+		} else {
+			state.nav = "NAV_REF not captured (probe did not run)";
+		}
+	} catch (e) {
+		state.nav = "ERR: " + String(e);
+	}
+	try {
+		if (audioControls) {
+			state.audio = {
+				backend: audioControls.backendName ? audioControls.backendName() : null,
+				playing: audioControls.isPlaying ? audioControls.isPlaying() : null,
+				pos: audioControls.position ? audioControls.position() : null,
+				dur: audioControls.duration ? audioControls.duration() : null,
+				vol: audioControls.volume ? audioControls.volume() : null,
+				err: audioControls.error ? audioControls.error() : null,
+				ep: audioControls.currentEpisode
+					? audioControls.currentEpisode()?.title
+					: null,
+			};
+		}
+	} catch (e) {
+		state.audio = "ERR: " + String(e);
+	}
+	try {
+		const { useFeedStore } = await import("../src/stores/feed");
+		const fs_ = useFeedStore();
+		const feeds = fs_.feeds ? fs_.feeds() : [];
+		state.feed = {
+			count: feeds?.length ?? 0,
+			sel: fs_.selectedFeedId ? fs_.selectedFeedId() : null,
+			loading: fs_.isLoadingFeeds ? fs_.isLoadingFeeds() : null,
+			titles: (feeds ?? []).slice(0, 8).map((f: any) => f?.podcast?.title),
+		};
+	} catch (e) {
+		state.feed = "ERR: " + String(e);
+	}
+	try {
+		writeFileSync(STATE_JSON, JSON.stringify(state));
+	} catch {}
+
+	// ── Output ──────────────────────────────────────────────────────────────
+	// Compact by default: trimmed frame, one-line state per section, no styles
+	// block, no boilerplate footer. Use --styles / --verbose to opt back in.
+	const verbose = !!flags.verbose;
+	const scope = cmd === "state" ? String(positional[0] || "all") : "all";
+
+	// A line is "visually empty" if it's either fully blank OR contains only
+	// box-drawing chars + whitespace (i.e. empty-pane interior padding like
+	// "│   │"). Runs of these collapse to a single `…N` marker so an empty
+	// 24-row pane costs 1 line, not 18.
+	const BOX_CHARS = "│┌┐└─┤├┬┴┼┐┘┌└┤├┬┴┼┌┐└┘─│┤├┬┴┼";
+	const isVisuallyEmpty = (l: string): boolean =>
+		l === "" || [...l].every((ch) => ch === " " || BOX_CHARS.includes(ch));
+	const frameTrimmed = (() => {
+		const lines = plainFrame
+			.replace(/\n+$/, "")
+			.split("\n")
+			.map((l) => l.replace(/\s+$/, ""));
+		while (lines.length && isVisuallyEmpty(lines[lines.length - 1]))
+			lines.pop();
+		const out: string[] = [];
+		let blank = 0;
+		const flushBlanks = () => {
+			if (blank >= 3) out.push(`  …${blank} empty`);
+			else for (let i = 0; i < blank; i++) out.push("");
+			blank = 0;
+		};
+		for (const l of lines) {
+			if (isVisuallyEmpty(l)) {
+				blank++;
+			} else {
+				flushBlanks();
+				out.push(l);
+			}
+		}
+		flushBlanks();
+		return out.join("\n");
+	})();
+
+	console.log(
+		`FRAME ${spans.cols}x${spans.rows} cur=${spans.cursor[0]},${spans.cursor[1]} acts=${actions.length} ${cmd}`,
+	);
+	console.log(frameTrimmed);
+
+	// ── distinct styles: opt-in only (--styles OR --verbose) ──
+	if (scope === "all" && (flags.styles || verbose)) {
+		const styles = distinctStyles(spans);
+		if (styles.length) {
+			console.log("-- styles (top 20) --");
+			for (const s of styles) console.log(`  ${s.tag} ×${s.n} “${s.sample}”`);
+		}
+	}
+
+	// ── state: one compact line per requested section ──
+	const want = (k: string) => scope === "all" || scope === k;
+	const compact = (obj: unknown): string =>
+		verbose ? JSON.stringify(obj, null, 2) : JSON.stringify(obj);
+	if (want("nav")) console.log("nav " + compact(state.nav));
+	if (want("audio")) console.log("audio " + compact(state.audio));
+	if (want("feed")) console.log("feed " + compact(state.feed));
+	if (want("app")) console.log("app (not dumped in v1)");
+
+	// ── issues: terse ──
+	if (issues.length) {
+		console.log(`issues:${issues.length}`);
+		for (const i of issues.slice(0, 20)) console.log("  ! " + i);
+	} else {
+		console.log("issues:none");
+	}
+
+	// Footer is identical every run — only print on init or --verbose.
+	if (cmd === "init" || verbose) {
+		console.log(
+			`(spans ${FRAME_JSON} | frame ${FRAME_TXT} | state ${STATE_JSON})`,
+		);
+	}
+
+	// Tear down child processes (audio backend) before exit to avoid orphans.
+	try {
+		if (audioControls?.stop) await audioControls.stop().catch(() => {});
+	} catch (e) {
+		issues.push("teardown audio: " + String(e));
+	}
+	try {
+		setup.renderer.destroy();
+	} catch (e) {
+		issues.push("teardown renderer: " + String(e));
+	}
+	process.exit(0);
+}
+
+main().catch((err) => {
+	console.error("HARNESS FAILED:", err?.stack || err);
+	process.exit(1);
+});

src/App.tsx

@@ -1,137 +1,60 @@
-import { createMemo, ErrorBoundary, Accessor } from "solid-js";
-import { useKeyboard, useSelectionHandler } from "@opentui/solid";
-import { TabNavigation } from "./components/TabNavigation";
-import { CodeValidation } from "@/components/CodeValidation";
-import { LoadingIndicator } from "@/components/LoadingIndicator";
+import { ErrorBoundary } from "solid-js";
+import { useSelectionHandler, useRenderer } from "@opentui/solid";
 import { useAuthStore } from "@/stores/auth";
-import { useFeedStore } from "@/stores/feed";
 import { useAudio } from "@/hooks/useAudio";
 import { useMultimediaKeys } from "@/hooks/useMultimediaKeys";
-import { FeedVisibility } from "@/types/feed";
 import { Clipboard } from "@/utils/clipboard";
 import { useToast } from "@/ui/toast";
-import { useRenderer } from "@opentui/solid";
-import type { AuthScreen } from "@/types/auth";
-import type { Episode } from "@/types/episode";
-import { DIRECTION, LayerGraph, TABS, LayerDepths } from "./utils/navigation";
 import { useTheme, ThemeProvider } from "./context/ThemeContext";
 import { KeybindProvider, useKeybinds } from "./context/KeybindContext";
-import { NavigationProvider, useNavigation } from "./context/NavigationContext";
-import { useAudioNavStore, AudioSource } from "./stores/audio-nav";
+import {
+	NavigationProvider,
+	useNavigation,
+	NavMode,
+} from "./context/NavigationContext";
+import { TABS } from "./utils/navigation";
+import { Shell } from "./components/Shell";
 
 const DEBUG = import.meta.env.DEBUG;
 
 export function App() {
 	const nav = useNavigation();
 	const auth = useAuthStore();
-  const feedStore = useFeedStore();
 	const audio = useAudio();
 	const toast = useToast();
 	const renderer = useRenderer();
 	const themeContext = useTheme();
 	const theme = themeContext.theme;
-
-  // Create a reactive expression for background color
-  const backgroundColor = () => {
-    return themeContext.selected === "system"
-      ? "transparent"
-      : themeContext.theme.surface;
-  };
 	const keybind = useKeybinds();
-  const audioNav = useAudioNavStore();
 
+	// Multimedia keys (physical play/seek keys) still feed the audio backend
+	// regardless of the on-screen yazi keybinds.
 	useMultimediaKeys({
 		playerFocused: () =>
-      nav.activeTab() === TABS.PLAYER && nav.activeDepth() > 0,
+			nav.activeTab() === TABS.PLAYER && nav.mode() !== NavMode.NORMAL
+				? true
+				: false,
 		inputFocused: () => nav.inputFocused(),
 		hasEpisode: () => !!audio.currentEpisode(),
 	});
 
-  const handlePlayEpisode = (episode: Episode) => {
-    audio.play(episode);
-    nav.setActiveTab(TABS.PLAYER);
-    nav.setActiveDepth(1);
-    audioNav.setSource(AudioSource.FEED);
-  };
-
+	// Mouse text-selection → clipboard (unchanged from the old shell).
 	useSelectionHandler((selection: any) => {
 		if (!selection) return;
 		const text = selection.getSelectedText?.();
 		if (!text || text.trim().length === 0) return;
-
 		Clipboard.copy(text)
-      .then(() => {
-        toast.show({ message: "Copied to Clipboard!", variant: "info" });
-      })
+			.then(() =>
+				toast.show({ message: "Copied to Clipboard!", variant: "info" }),
+			)
 			.catch(toast.error)
-      .finally(() => {
-        renderer.clearSelection();
-      });
+			.finally(() => renderer.clearSelection());
 	});
 
-  useKeyboard(
-    (keyEvent) => {
-      const isCycle = keybind.match("cycle", keyEvent);
-      const isUp = keybind.match("up", keyEvent);
-      const isDown = keybind.match("down", keyEvent);
-      const isLeft = keybind.match("left", keyEvent);
-      const isRight = keybind.match("right", keyEvent);
-      const isDive = keybind.match("dive", keyEvent);
-      const isOut = keybind.match("out", keyEvent);
-      const isToggle = keybind.match("audio-toggle", keyEvent);
-      const isNext = keybind.match("audio-next", keyEvent);
-      const isPrev = keybind.match("audio-prev", keyEvent);
-      const isSeekForward = keybind.match("audio-seek-forward", keyEvent);
-      const isSeekBackward = keybind.match("audio-seek-backward", keyEvent);
-      const isQuit = keybind.match("quit", keyEvent);
-      const isInverting = keybind.isInverting(keyEvent);
-
-      // unified navigation: left->right, top->bottom across all tabs
-      if (nav.activeDepth() == 0) {
-        // at top level: cycle through tabs
-        if (
-          (isCycle && !isInverting) ||
-          (isDown && !isInverting) ||
-          (isUp && isInverting)
-        ) {
-          nav.nextTab();
-          return;
-        }
-        if (
-          (isCycle && isInverting) ||
-          (isDown && isInverting) ||
-          (isUp && !isInverting)
-        ) {
-          nav.prevTab();
-          return;
-        }
-        // dive out to first pane
-        if (
-          (isDive && !isInverting) ||
-          (isOut && isInverting) ||
-          (isRight && !isInverting) ||
-          (isLeft && isInverting)
-        ) {
-          nav.setActiveDepth(1);
-        }
-      } else {
-        // in panes: navigate between them
-        if (
-          (isDive && isInverting) ||
-          (isOut && !isInverting) ||
-          (isRight && isInverting) ||
-          (isLeft && !isInverting)
-        ) {
-          nav.setActiveDepth(0);
-        } else if (isDown && !isInverting) {
-          nav.nextPane();
-        } else if (isUp && isInverting) {
-          nav.prevPane();
-        }
-      }
-    },
-    { release: false },
-  );
+	const backgroundColor = () =>
+		themeContext.selected === "system"
+			? "transparent"
+			: themeContext.theme.surface;
 
 	return (
 		<ErrorBoundary
@@ -140,7 +63,7 @@ export function App() {
 					<text fg={theme.error}>
 						Error: {err?.message ?? String(err)}
 						{"\n"}
-            Press a number key (1-6) to switch tabs.
+						Press 1-6 to switch tabs, or : to open the command bar.
 					</text>
 				</box>
 			)}
@@ -149,13 +72,8 @@ export function App() {
 				flexDirection="column"
 				width="100%"
 				height="100%"
-        backgroundColor={
-          themeContext.selected === "system"
-            ? "transparent"
-            : themeContext.theme.surface
-        }
+				backgroundColor={backgroundColor()}
 			>
-        <LoadingIndicator />
 				{DEBUG && (
 					<box flexDirection="row" width="100%" height={1}>
 						<text fg={theme.primary}>█</text>
@@ -168,26 +86,9 @@ export function App() {
 						<text fg={theme.text}>█</text>
 						<text fg={theme.textMuted}>█</text>
 						<text fg={theme.surface}>█</text>
-            <text fg={theme.background}>█</text>
-            <text fg={theme.border}>█</text>
-            <text fg={theme.borderActive}>█</text>
-            <text fg={theme.diffAdded}>█</text>
-            <text fg={theme.diffRemoved}>█</text>
-            <text fg={theme.diffContext}>█</text>
-            <text fg={theme.markdownText}>█</text>
-            <text fg={theme.markdownHeading}>█</text>
-            <text fg={theme.markdownLink}>█</text>
-            <text fg={theme.markdownCode}>█</text>
-            <text fg={theme.syntaxKeyword}>█</text>
-            <text fg={theme.syntaxString}>█</text>
-            <text fg={theme.syntaxNumber}>█</text>
-            <text fg={theme.syntaxFunction}>█</text>
 					</box>
 				)}
-        <box flexDirection="row" width="100%" height="100%">
-          <TabNavigation />
-          {LayerGraph[nav.activeTab()]()}
-        </box>
+				<Shell />
 			</box>
 		</ErrorBoundary>
 	);

src/components/Shell.tsx

@@ -0,0 +1,664 @@
+/**
+ * Shell — yazi-style application chrome.
+ *
+ * Renders the tabs as a vertical sidebar on the left (the root pane), the
+ * active page (which owns its own panes) to the right of it, and a bottom
+ * status/command bar spanning the full width. A single `useKeyboard` router
+ * translates keystrokes (via the sequence-aware keybind matcher) into actions:
+ * global ones (tabs, modes, audio, quit, help, command) are handled here;
+ * pane/list ones are dispatched to the active page over the `nav.action`
+ * event bus.
+ */
+
+import { createSignal, Show, For } from "solid-js";
+import { useKeyboard } from "@opentui/solid";
+import { useTheme } from "@/context/ThemeContext";
+import { useKeybinds, type KeybindActionName } from "@/context/KeybindContext";
+import {
+	useNavigation,
+	NavMode,
+	SIDEBAR_PANE,
+	DEPTH_CENTER_PANE,
+} from "@/context/NavigationContext";
+import { useAudio } from "@/hooks/useAudio";
+import { useAudioNavStore, AudioSource } from "@/stores/audio-nav";
+import { useFeedStore } from "@/stores/feed";
+import type { Episode } from "@/types/episode";
+import { useToast } from "@/ui/toast";
+import { emit } from "@/utils/event-bus";
+import { TABS, TabsCount, TabPaneCount, LayerGraph } from "@/utils/navigation";
+
+const TAB_LABEL: Record<TABS, string> = {
+	[TABS.FEED]: "Feed",
+	[TABS.MYSHOWS]: "My Shows",
+	[TABS.DISCOVER]: "Discover",
+	[TABS.SEARCH]: "Search",
+	[TABS.PLAYER]: "Player",
+	[TABS.SETTINGS]: "Settings",
+};
+
+/** Actions the active page is responsible for (pane/list-local). */
+const PAGE_ACTIONS: ReadonlySet<KeybindActionName> = new Set<KeybindActionName>(
+	[
+		"move-down",
+		"move-up",
+		"page-down",
+		"page-up",
+		"full-down",
+		"full-up",
+		"jump-down",
+		"jump-up",
+		"goto-top",
+		"goto-bottom",
+		"toggle-select",
+		"visual-mode",
+		"toggle-all",
+		"invert-all",
+		"open",
+		"open-interactive",
+		"search",
+		"filter",
+		"sort",
+		"toggle-hidden",
+		"refresh",
+	],
+);
+
+/** Movement actions the sidebar pane handles itself (its list = the tabs,
+ *  length TabsCount). Routed through the standard move/gotoIndex API. */
+const SIDEBAR_ACTIONS: ReadonlySet<KeybindActionName> = new Set([
+	"move-down",
+	"move-up",
+	"jump-down",
+	"jump-up",
+	"page-down",
+	"page-up",
+	"goto-top",
+	"goto-bottom",
+]);
+
+function tabByDigit(action: KeybindActionName): TABS | null {
+	if (action.startsWith("tab-goto-")) {
+		const n = Number(action.slice("tab-goto-".length));
+		return (n >= 1 && n <= TabsCount ? n : null) as TABS | null;
+	}
+	return null;
+}
+
+export function Shell() {
+	const theme = useTheme();
+	const t = theme.theme;
+	const nav = useNavigation();
+	const k = useKeybinds();
+	const audio = useAudio();
+	const audioNav = useAudioNavStore();
+	const toast = useToast();
+	const feedStore = useFeedStore();
+
+	const [showHelp, setShowHelp] = createSignal(false);
+
+	/** Play the episode adjacent (offset ±1) to the currently-playing one,
+	 *  within its feed's episode list. Updates audio-nav context accordingly. */
+	function advanceEpisode(offset: number) {
+		const cur = audio.currentEpisode();
+		if (!cur) {
+			toast.show({ message: "Nothing playing", variant: "warning" });
+			return;
+		}
+		const pid = audioNav.getPodcastId();
+		const feeds = feedStore.getFilteredFeeds();
+		const feed =
+			feeds.find((f) => f.podcast.id === pid) ??
+			feeds.find((f) => f.episodes.some((e) => e.id === cur.id));
+		if (!feed) {
+			toast.show({ message: "Show not found", variant: "warning" });
+			return;
+		}
+		const eps = [...feed.episodes].sort(
+			(a, b) => b.pubDate.getTime() - a.pubDate.getTime(),
+		);
+		const idx = eps.findIndex((e) => e.id === cur.id);
+		const next = eps[idx + offset];
+		if (!next) {
+			toast.show({
+				message: offset > 0 ? "No next episode" : "No previous episode",
+				variant: "warning",
+			});
+			return;
+		}
+		audio.play(next).catch(() => {});
+		audioNav.next(eps.length - 1 - (idx + offset) >= 0 ? idx + offset : idx);
+		toast.show({ message: `♪ ${next.title}`.slice(0, 60), variant: "info" });
+	}
+
+	// ── Command bar dispatch ────────────────────────────────────────────────────
+	function runCommand(raw: string) {
+		const cmd = raw.trim();
+		if (!cmd) return;
+		const name = cmd.split(/\s+/)[0].toLowerCase();
+		const arg = cmd.slice(name.length).trim();
+		switch (name) {
+			case "q":
+			case "quit":
+			case "exit":
+				process.exit(0);
+			case "refresh":
+			case "r":
+				emit("nav.action", {
+					action: "refresh",
+					tab: nav.activeTab(),
+					pane: nav.activePane(),
+					mode: nav.mode(),
+				});
+				break;
+			case "play":
+			case "pause":
+			case "p":
+				audio.togglePlayback().catch(() => {});
+				break;
+			case "next":
+			case "n":
+				advanceEpisode(1);
+				break;
+			case "prev":
+				advanceEpisode(-1);
+				break;
+			case "seek": {
+				const n = Number(arg) || 0;
+				audio.seek(n).catch(() => {});
+				break;
+			}
+			case "feed":
+			case "f":
+				nav.setActiveTab(TABS.FEED);
+				break;
+			case "shows":
+			case "myshows":
+				nav.setActiveTab(TABS.MYSHOWS);
+				break;
+			case "discover":
+			case "d":
+				nav.setActiveTab(TABS.DISCOVER);
+				break;
+			case "search":
+				nav.setActiveTab(TABS.SEARCH);
+				break;
+			case "player":
+				nav.setActiveTab(TABS.PLAYER);
+				break;
+			case "settings":
+			case "set":
+				nav.setActiveTab(TABS.SETTINGS);
+				break;
+			case "help":
+			case "h":
+				setShowHelp((v) => !v);
+				break;
+			default:
+				nav.setCommandError(`unknown command: ${name}`);
+				// re-enter command mode so the user sees the error + can correct
+				nav.enterCommand();
+				nav.setCommandBuffer(cmd);
+		}
+	}
+
+	// ── Command-mode key handling ───────────────────────────────────────────────
+	function handleCommandKey(evt: any) {
+		if (k.match("escape", evt) || evt.name === "ctrl-c") {
+			evt.preventDefault();
+			nav.exitCommand();
+			return;
+		}
+		if (evt.name === "return" || evt.name === "enter") {
+			evt.preventDefault();
+			const cmd = nav.commandBuffer();
+			runCommand(cmd);
+			nav.exitCommand();
+			return;
+		}
+		if (evt.name === "backspace") {
+			evt.preventDefault();
+			const buf = nav.commandBuffer();
+			if (buf.length === 0) {
+				nav.exitCommand();
+				return;
+			}
+			nav.backspaceCommand();
+			return;
+		}
+		// printable char
+		if (evt.name && evt.name.length === 1 && !evt.ctrl && !evt.meta) {
+			evt.preventDefault();
+			nav.appendCommand(evt.name);
+			return;
+		}
+	}
+
+	// ── Unified router (normal + visual) ───────────────────────────────────────
+	function dispatch(action: KeybindActionName, evt: any) {
+		const tab = nav.activeTab();
+		const pane = nav.activePane();
+		switch (action) {
+			// ── modes ──
+			case "escape":
+				evt.preventDefault();
+				if (nav.mode() === NavMode.VISUAL) {
+					nav.toNormal();
+					break;
+				}
+				k.clearPending();
+				break;
+			case "command":
+				evt.preventDefault();
+				nav.enterCommand();
+				break;
+			case "visual-mode":
+				evt.preventDefault();
+				nav.enterVisual();
+				break;
+			case "toggle-select":
+				evt.preventDefault();
+				emit("nav.action", { action, tab, pane, mode: nav.mode() });
+				break;
+			case "toggle-all":
+			case "invert-all":
+				evt.preventDefault();
+				emit("nav.action", { action, tab, pane, mode: nav.mode() });
+				break;
+
+			// ── tabs ──
+			case "tab-next":
+				evt.preventDefault();
+				nav.nextTab();
+				break;
+			case "tab-prev":
+				evt.preventDefault();
+				nav.prevTab();
+				break;
+			default: {
+				const dt = tabByDigit(action);
+				if (dt) {
+					evt.preventDefault();
+					nav.setActiveTab(dt);
+					break;
+				}
+				// ── sidebar pane: j/k/jump/goto move through the tab list via the
+				//    standard move/gotoIndex API (list length = TabsCount). No
+				//    special-cased nextTab/prevTab — the sidebar is a normal pane.
+				if (nav.activePane() === SIDEBAR_PANE && SIDEBAR_ACTIONS.has(action)) {
+					evt.preventDefault();
+					if (action === "goto-top") nav.gotoIndex(0, TabsCount);
+					else if (action === "goto-bottom")
+						nav.gotoIndex(TabsCount - 1, TabsCount);
+					else {
+						const dir = action.endsWith("down") ? 1 : -1;
+						const step = action.startsWith("jump")
+							? 5
+							: action.startsWith("page")
+								? 10
+								: 1;
+						nav.move(dir, TabsCount, step);
+					}
+					break;
+				}
+				// ── pane swipe / depth nav ──
+				// h/l always uses the unified swipe() (clamped to the sidebar on
+				// the left). Depth-tabs additionally: l at the center drills in
+				// (open), h at the center pops a depth (or swipes to sidebar at
+				// root). Fixed-pane tabs just swipe between their panes.
+				if (action === "swipe-prev") {
+					evt.preventDefault();
+					if (
+						nav.isDepthTab() &&
+						nav.activePane() === DEPTH_CENTER_PANE &&
+						nav.currentDepth() > 0
+					) {
+						nav.popDepth();
+					} else {
+						nav.swipe(-1, TabPaneCount[tab]);
+					}
+					break;
+				}
+				if (action === "swipe-next") {
+					evt.preventDefault();
+					if (nav.isDepthTab() && nav.activePane() === DEPTH_CENTER_PANE) {
+						emit("nav.action", {
+							action: "open",
+							tab,
+							pane: DEPTH_CENTER_PANE,
+							mode: nav.mode(),
+						});
+					} else {
+						nav.swipe(1, TabPaneCount[tab]);
+					}
+					break;
+				}
+				// ── audio transport (global) ──
+				if (action === "audio-toggle") {
+					evt.preventDefault();
+					audio.togglePlayback().catch(() => {});
+					break;
+				}
+				if (action === "audio-seek-forward") {
+					evt.preventDefault();
+					audio.seekRelative(10).catch(() => {});
+					break;
+				}
+				if (action === "audio-seek-backward") {
+					evt.preventDefault();
+					audio.seekRelative(-10).catch(() => {});
+					break;
+				}
+				if (action === "audio-next") {
+					evt.preventDefault();
+					advanceEpisode(1);
+					break;
+				}
+				if (action === "audio-prev") {
+					evt.preventDefault();
+					advanceEpisode(-1);
+					break;
+				}
+				// ── global app ──
+				if (action === "quit") {
+					evt.preventDefault();
+					process.exit(0);
+				}
+				if (action === "help") {
+					evt.preventDefault();
+					setShowHelp((v) => !v);
+				}
+
+				// ── page-local list/pane actions ──
+				if (PAGE_ACTIONS.has(action)) {
+					evt.preventDefault();
+					emit("nav.action", { action, tab, pane, mode: nav.mode() });
+				}
+			}
+		}
+	}
+
+	useKeyboard(
+		(evt: any) => {
+			// Input fields (search boxes, dialogs) own their keys.
+			if (nav.inputFocused() && nav.mode() !== NavMode.COMMAND) return;
+			if (nav.mode() === NavMode.COMMAND) {
+				handleCommandKey(evt);
+				return;
+			}
+			const action = k.tryMatch(evt);
+			if (action) dispatch(action, evt);
+		},
+		{ release: false },
+	);
+
+	// ── Status bar fragments ──────────────────────────────────────────────────
+	const nowPlaying = () => {
+		const ep = audio.currentEpisode();
+		if (!ep) return null;
+		const title = ep.title.length > 40 ? ep.title.slice(0, 38) + "…" : ep.title;
+		return `♪ ${title}`;
+	};
+	const modeLabel = () =>
+		nav.mode() === NavMode.NORMAL ? "" : `-- ${nav.mode()} --`;
+	const pendingLabel = () =>
+		k
+			.pending()
+			.map((s) => s.key)
+			.join(" ");
+
+	return (
+		<box
+			flexDirection="column"
+			width="100%"
+			height="100%"
+			backgroundColor={t.surface}
+		>
+			{/* ── Middle row: tab sidebar (root pane) + active page ──────────────── */}
+			<box flexDirection="row" flexGrow={1} width="100%">
+				{/* ── Left tab sidebar ─────────────────────────────────────────────── */}
+				<box
+					flexDirection="column"
+					width={14}
+					height="100%"
+					backgroundColor={t.background}
+					border
+					borderColor={t.border}
+				>
+					<For
+						each={Object.values(TABS).filter(
+							(v): v is TABS => typeof v === "number",
+						)}
+					>
+						{(tab) => {
+							const active = () => nav.activeTab() === tab;
+							const focused = () =>
+								active() && nav.activePane() === SIDEBAR_PANE;
+							return (
+								<box
+									flexDirection="row"
+									backgroundColor={
+										focused() ? t.accent : active() ? t.primary : t.background
+									}
+									paddingLeft={1}
+									onMouseDown={() => {
+										nav.setActivePane(SIDEBAR_PANE);
+										nav.setActiveTab(tab);
+									}}
+								>
+									<text fg={focused() || active() ? t.surface : t.textMuted}>
+										{focused() ? "❯ " : "  "}
+										{tab}. {TAB_LABEL[tab]}
+									</text>
+								</box>
+							);
+						}}
+					</For>
+					<box flexGrow={1} backgroundColor={t.background} />
+					<Show when={nowPlaying()}>
+						<box paddingLeft={1} backgroundColor={t.background}>
+							<text fg={t.textMuted}>{nowPlaying()}</text>
+						</box>
+					</Show>
+				</box>
+
+				{/* ── Active page (owns its panes) ────────────────────────────────── */}
+				<box flexDirection="column" flexGrow={1} height="100%">
+					{LayerGraph[nav.activeTab()]()}
+				</box>
+			</box>
+
+			{/* ── Bottom status / command bar ─────────────────────────────────────── */}
+			<box
+				flexDirection="row"
+				height={1}
+				width="100%"
+				backgroundColor={t.backgroundPanel ?? t.background}
+			>
+				<Show
+					when={nav.mode() === NavMode.COMMAND}
+					fallback={
+						<>
+							<text fg={t.accent} paddingLeft={1}>
+								{modeLabel()}
+							</text>
+							<text fg={t.textMuted} paddingLeft={1}>
+								{TAB_LABEL[nav.activeTab()]} ·{" "}
+								{nav.activePane() === SIDEBAR_PANE
+									? "tabs"
+									: nav.isDepthTab()
+										? `depth ${nav.currentDepth()}`
+										: `pane ${nav.activePane() + 1}/${TabPaneCount[nav.activeTab()]}`}
+							</text>
+							<Show when={nav.selectedIds().length > 0}>
+								<text fg={t.warning} paddingLeft={1}>
+									● {nav.selectedIds().length}
+								</text>
+							</Show>
+							<box flexGrow={1} />
+							<text fg={t.textMuted} paddingRight={1}>
+								{pendingLabel()}
+							</text>
+							<text fg={t.textMuted} paddingRight={1}>
+								:cmd ~help q quit
+							</text>
+						</>
+					}
+				>
+					<text fg={t.accent} paddingLeft={1}>
+						:
+					</text>
+					<text fg={t.text}>{nav.commandBuffer()}</text>
+					<text fg={t.textMuted}>▏</text>
+					<Show when={nav.commandError()}>
+						<text fg={t.error} paddingLeft={1}>
+							{nav.commandError()}
+						</text>
+					</Show>
+				</Show>
+			</box>
+
+			{/* ── Help overlay ─────────────────────────────────────────────────────── */}
+			<Show when={showHelp()}>
+				<HelpOverlay
+					onClose={() => setShowHelp(false)}
+					sections={helpSections(k)}
+					theme={t as any}
+				/>
+			</Show>
+		</box>
+	);
+}
+
+function helpSections(k: ReturnType<typeof useKeybinds>) {
+	const p = (a: KeybindActionName) => k.print(a);
+	return [
+		{
+			group: "Move",
+			items: [
+				["j/k", "move"],
+				["J/K", "5 lines"],
+				["ctrl-d/u", "half page"],
+				["gg/G", "top/bottom"],
+			],
+		},
+		{
+			group: "Panes",
+			items: [
+				["h/l", "swipe pane"],
+				["1-6 / [ ]", "switch tabs"],
+				[":", "command"],
+				["~", "help"],
+			],
+		},
+		{
+			group: "Select",
+			items: [
+				["space", "toggle"],
+				["v", "visual"],
+				["ctrl-a", "all"],
+				["esc", "clear"],
+			],
+		},
+		{
+			group: "Audio",
+			items: [
+				[p("audio-toggle"), "play/pause"],
+				[p("audio-next"), "next"],
+				[p("audio-seek-forward"), "fwd 10s"],
+				[p("audio-seek-backward"), "back 10s"],
+			],
+		},
+		{
+			group: "List",
+			items: [
+				["enter", "open"],
+				["r", "refresh"],
+				["s", "search"],
+				["f", "filter"],
+				[",", "sort"],
+				[".", "hidden"],
+			],
+		},
+	];
+}
+
+function HelpOverlay(props: {
+	onClose: () => void;
+	sections: { group: string; items: string[][] }[];
+	theme: any;
+}) {
+	useKeyboard((evt: any) => {
+		if (k_match_escape(evt)) {
+			evt.preventDefault();
+			props.onClose();
+		}
+	});
+	const th = props.theme;
+	return (
+		<box
+			position="absolute"
+			top={2}
+			left={0}
+			width="100%"
+			alignItems="center"
+			backgroundColor="rgba(0,0,0,160)"
+			onMouseUp={() => props.onClose()}
+		>
+			<box
+				flexDirection="column"
+				border
+				borderColor={th.border}
+				backgroundColor={th.backgroundPanel ?? th.background}
+				padding={1}
+				width={60}
+				onMouseUp={(e: any) => e.stopPropagation()}
+			>
+				<text fg={th.accent}>
+					Yazi-style keybinds — press ~ or Esc to close
+				</text>
+				<For each={props.sections}>
+					{(sec) => (
+						<box flexDirection="column" marginTop={1}>
+							<text fg={th.textSecondary}>{sec.group}</text>
+							<For each={sec.items}>
+								{(it) => (
+									<box flexDirection="row" gap={2}>
+										<text fg={th.accent}>{String(it[0]).padEnd(14, " ")}</text>
+										<text fg={th.textPrimary ?? th.text}>{it[1]}</text>
+									</box>
+								)}
+							</For>
+						</box>
+					)}
+				</For>
+				<box marginTop={1}>
+					<text fg={th.textMuted}>
+						Edit ~/.config/podtui/keybinds.jsonc to remap.
+					</text>
+				</box>
+			</box>
+		</box>
+	);
+}
+
+function k_match_escape(evt: any): boolean {
+	return (
+		evt.name === "escape" || evt.name === "~" || (evt.ctrl && evt.name === "[")
+	);
+}
+
+/** Exposed so App can route an externally-triggered "play episode" (e.g. from
+ *  search) into the player tab. */
+export function playEpisodeAndSwitch(
+	nav: ReturnType<typeof useNavigation>,
+	audio: ReturnType<typeof useAudio>,
+	episode: import("@/types/episode").Episode,
+) {
+	audio.play(episode);
+	nav.setActiveTab(TABS.PLAYER);
+	useAudioNavStore().setSource(AudioSource.FEED);
+}
+
+// Re-export Episode type for callers building pane trees.
+export type { Episode };

src/components/ShortcutHelp.tsx

@@ -1,27 +1,26 @@
+import { For } from "solid-js";
 import { shortcuts } from "@/config/shortcuts";
 import { useTheme } from "@/context/ThemeContext";
 
+/** Yazi-style keybind reference. The Shell has its own overlay; this component
+ *  is kept for embedding inside Settings or other surfaces. */
 export function ShortcutHelp() {
 	const { theme } = useTheme();
 	return (
-    <box border title="Shortcuts" style={{ padding: 1 }}>
+		<box
+			border
+			title="Shortcuts"
+			style={{ flexDirection: "column", padding: 1 }}
+		>
 			<box style={{ flexDirection: "column" }}>
-        <box style={{ flexDirection: "row" }}>
-          <text fg={theme.text}>{shortcuts[0]?.keys ?? ""} </text>
-          <text fg={theme.text}>{shortcuts[0]?.action ?? ""}</text>
-        </box>
-        <box style={{ flexDirection: "row" }}>
-          <text fg={theme.text}>{shortcuts[1]?.keys ?? ""} </text>
-          <text fg={theme.text}>{shortcuts[1]?.action ?? ""}</text>
-        </box>
-        <box style={{ flexDirection: "row" }}>
-          <text fg={theme.text}>{shortcuts[2]?.keys ?? ""} </text>
-          <text fg={theme.text}>{shortcuts[2]?.action ?? ""}</text>
-        </box>
-        <box style={{ flexDirection: "row" }}>
-          <text fg={theme.text}>{shortcuts[3]?.keys ?? ""} </text>
-          <text fg={theme.text}>{shortcuts[3]?.action ?? ""}</text>
+				<For each={shortcuts}>
+					{(s) => (
+						<box style={{ flexDirection: "row" }} gap={2}>
+							<text fg={theme.accent}>{s.keys}</text>
+							<text fg={theme.text}>{s.action}</text>
 						</box>
+					)}
+				</For>
 			</box>
 		</box>
 	);

src/config/keybind.jsonc

@@ -1,20 +0,0 @@
-{
-  "up": ["up", "k"],
-  "down": ["down", "j"],
-  "left": ["left", "h"],
-  "right": ["right", "l"],
-  "cycle": ["tab"], // this will cycle no matter the depth/orientation
-  "dive": ["return"],
-  "out": ["esc"],
-  "inverseModifier": ["shift"],
-  "leader": ":", // will not trigger while focused on input
-  "quit": ["<leader>q"],
-  "refresh": ["<leader>r"],
-  "audio-toggle": ["<leader>p"],
-  "audio-pause": [],
-  "audio-play": [],
-  "audio-next": ["<leader>n"],
-  "audio-prev": ["<leader>l"],
-  "audio-seek-forward": ["<leader>sf"],
-  "audio-seek-backward": ["<leader>sb"],
-}

src/config/keybinds.jsonc

@@ -0,0 +1,73 @@
+{
+  // ── Yazi-style keybinds for PodTui ──────────────────────────────────────
+  // Notation:
+  //   "j"            single lowercase key
+  //   "G"            shift + g  (uppercase letter = shift)
+  //   "ctrl-d"       ctrl modifier
+  //   "shift-j"      shift modifier (equivalent to "J")
+  //   "meta-x"       alt/meta modifier  (macOS users: map Option to Alt)
+  //   ["g","g"]      a two-key sequence (matches only when pressed in order)
+  //   "return"       special key (also: escape tab space backspace up down left right)
+  //
+  // Yazi heritage: j/k move, h/l swipe between panes, Enter open, Space select,
+  // v visual mode, gg/G top/bottom, [ ] switch tabs, 1-6 goto tab,
+  // : command bar, q quit, ~ help. Audio transport kept on shifted keys / ctrl.
+
+  // ── Movement (within a pane) ─────────────────────────────────────────────
+  "move-down":      ["j", "down"],
+  "move-up":        ["k", "up"],
+  "page-down":      ["ctrl-d"],
+  "page-up":        ["ctrl-u"],
+  "full-down":      ["ctrl-f"],
+  "full-up":        ["ctrl-b"],
+  "jump-down":      ["J"],            // 5 lines down  (shift+j)
+  "jump-up":        ["K"],            // 5 lines up    (shift+k)
+  "goto-top":       [["g", "g"]],
+  "goto-bottom":    ["G"],
+
+  // ── Pane focus / swipe (yazi h/l) ────────────────────────────────────────
+  "swipe-prev":     ["h", "left"],    // focus left pane (parent)
+  "swipe-next":     ["l", "right"],   // focus right pane (preview)
+
+  // ── Open / activate ──────────────────────────────────────────────────────
+  "open":           ["return", "enter"],
+  "open-interactive": ["shift-return"],
+
+  // ── Selection & visual mode ──────────────────────────────────────────────
+  "toggle-select":  ["space"],
+  "visual-mode":    ["v"],
+  "toggle-all":     ["ctrl-a"],
+  "invert-all":     ["ctrl-r"],
+  "escape":         ["escape", "ctrl-["],
+
+  // ── Tabs ──────────────────────────────────────────────────────────────────
+  "tab-prev":       ["["],
+  "tab-next":       ["]"],
+  "tab-goto-1":     ["1"],
+  "tab-goto-2":     ["2"],
+  "tab-goto-3":     ["3"],
+  "tab-goto-4":     ["4"],
+  "tab-goto-5":     ["5"],
+  "tab-goto-6":     ["6"],
+
+  // ── Command bar & help & quit ────────────────────────────────────────────
+  "command":        [":"],
+  "quit":           ["q", "ctrl-c"],
+  "help":           ["~", "f1"],
+
+  // ── List operations (yazi: s search, f filter, , sort, . hidden, r refresh)
+  "search":         ["s"],
+  "filter":         ["f"],
+  "sort":           [","],
+  "toggle-hidden":  ["."],
+  "refresh":        ["r"],
+
+  // ── Audio transport (preserved) ──────────────────────────────────────────
+  // Kept on shifted single keys so they never collide with the yazi core
+  // (space=select, s=search, f=filter, etc.). Edit freely in this file.
+  "audio-toggle":          ["P"],   // play / pause   (shift+p)
+  "audio-next":            ["N"],   // next episode   (shift+n)
+  "audio-prev":            ["B"],   // prev episode   (shift+b)
+  "audio-seek-forward":    ["shift-."],   // seek forward   (shift+.)
+  "audio-seek-backward":   ["shift-,"]    // seek backward  (shift+,)
+}

src/config/shortcuts.ts

@@ -1,6 +1,26 @@
+/**
+ * Yazi-style keybind reference (mirrors src/config/keybinds.jsonc).
+ * Shown in help overlays; the canonical source remains keybinds.jsonc.
+ * Edit that file (or ~/.config/podtui/keybinds.jsonc) to remap.
+ */
 export const shortcuts = [
-  { keys: "Ctrl+Q", action: "Quit" },
-  { keys: "Ctrl+S", action: "Save" },
-  { keys: "Left/Right", action: "Switch tabs" },
-  { keys: "Esc", action: "Close modal" },
-] as const
+	{ keys: "j / k", action: "Move down / up (within pane)" },
+	{ keys: "h / l", action: "Swipe to prev / next pane" },
+	{ keys: "J / K", action: "Jump 5 lines down / up" },
+	{ keys: "ctrl-d / u", action: "Half page down / up" },
+	{ keys: "g g / G", action: "Go to top / bottom of list" },
+	{ keys: "1-6", action: "Go to tab 1-6" },
+	{ keys: "[ / ]", action: "Previous / next tab" },
+	{ keys: "Enter", action: "Open / activate focused item" },
+	{ keys: "Space", action: "Toggle selection on item" },
+	{ keys: "v", action: "Enter visual (range) select mode" },
+	{ keys: "ctrl-a / ctrl-r", action: "Select all / invert selection" },
+	{ keys: "Esc", action: "Clear selection / exit visual / cancel" },
+	{ keys: ":", action: "Open command bar (:quit :refresh :play …)" },
+	{ keys: "r / s / f", action: "Refresh / search / filter" },
+	{ keys: ", / .", action: "Sort / toggle hidden" },
+	{ keys: "P / N / B", action: "Play-pause / next / prev episode" },
+	{ keys: "< / >", action: "Seek backward / forward 10s" },
+	{ keys: "~ / F1", action: "Help" },
+	{ keys: "q", action: "Quit" },
+] as const;

src/context/KeybindContext.tsx

@@ -7,115 +7,347 @@ import {
 } from "../utils/keybinds-persistence";
 import { createStore } from "solid-js/store";
 
-export type KeybindsResolved = {
-  up: string[];
-  down: string[];
-  left: string[];
-  right: string[];
-  cycle: string[]; // this will cycle no matter the depth/orientation
-  dive: string[];
-  out: string[];
-  inverseModifier: string;
-  leader: string; // will not trigger while focused on input
-  quit: string[];
-  select: string[]; // for selecting/activating items
-  "audio-toggle": string[];
-  "audio-pause": string[];
-  "audio-play": string[];
-  "audio-next": string[];
-  "audio-prev": string[];
-  "audio-seek-forward": string[];
-  "audio-seek-backward": string[];
-};
+// ── Keybind model ───────────────────────────────────────────────────────────
+// Yazi-style: every binding is one or more "strokes". A stroke is a single
+// key press (key + optional ctrl/shift/meta). Multi-stroke bindings form a
+// sequence (e.g. ["g","g"] = gg, ["space","n"] = <leader>n). The matcher
+// buffers keystrokes, prefers the longest matching sequence, and exposes the
+// pending buffer reactively so the status bar can show it (very yazi).
 
-export enum KeybindAction {
-  UP,
-  DOWN,
-  LEFT,
-  RIGHT,
-  CYCLE,
-  DIVE,
-  OUT,
-  QUIT,
-  SELECT,
-  AUDIO_TOGGLE,
-  AUDIO_PAUSE,
-  AUDIO_PLAY,
-  AUDIO_NEXT,
-  AUDIO_PREV,
-  AUDIO_SEEK_F,
-  AUDIO_SEEK_B,
+/** A single key press. `key` is the lowercase logical key name
+ *  ("j", "return", "space", "up", "f1", ...). */
+export interface Stroke {
+	key: string;
+	ctrl?: boolean;
+	shift?: boolean;
+	meta?: boolean;
+}
+
+/** Raw config spec for one action: a list of alternative sequences. Each
+ *  alternative is itself a list of stroke-notation strings. So
+ *  "j"                    -> [[ {key:"j"} ]]
+ *  ["j","down"]           -> [[ {key:"j"} ], [ {key:"down"} ]]
+ *  [["g","g"],"G"]        -> [[ {key:"g"},{key:"g"} ], [ {key:"g",shift:true} ]] */
+export type KeybindSpec = string | (string | string[])[];
+
+/** Canonical action names. Must match keys in keybinds.jsonc. */
+export type KeybindActionName =
+	| "move-down"
+	| "move-up"
+	| "page-down"
+	| "page-up"
+	| "full-down"
+	| "full-up"
+	| "jump-down"
+	| "jump-up"
+	| "goto-top"
+	| "goto-bottom"
+	| "swipe-prev"
+	| "swipe-next"
+	| "open"
+	| "open-interactive"
+	| "toggle-select"
+	| "visual-mode"
+	| "toggle-all"
+	| "invert-all"
+	| "escape"
+	| "tab-prev"
+	| "tab-next"
+	| "tab-goto-1"
+	| "tab-goto-2"
+	| "tab-goto-3"
+	| "tab-goto-4"
+	| "tab-goto-5"
+	| "tab-goto-6"
+	| "command"
+	| "quit"
+	| "help"
+	| "search"
+	| "filter"
+	| "sort"
+	| "toggle-hidden"
+	| "refresh"
+	| "audio-toggle"
+	| "audio-next"
+	| "audio-prev"
+	| "audio-seek-forward"
+	| "audio-seek-backward"
+	// legacy compat (kept so older callers don't crash)
+	| "select"
+	| "leader"
+	| "inverseModifier"
+	| "cycle"
+	| "dive"
+	| "out"
+	| "up"
+	| "down"
+	| "left"
+	| "right"
+	| "audio-pause"
+	| "audio-play";
+
+/** Resolved config: action -> list of alternative stroke-sequences. */
+export type KeybindsResolved = Partial<Record<KeybindActionName, KeybindSpec>>;
+
+const SEQ_TIMEOUT_MS = 600;
+
+// ── Stroke parsing ───────────────────────────────────────────────────────────
+// Notation: "ctrl-d", "shift-j", "meta-x", "C-d", "M-x", "S-j".
+//           uppercase letter "G" => {key:"g", shift:true}
+//           special: return/enter/escape/tab/space/backspace/up/down/left/right
+
+export function parseStroke(notation: string): Stroke {
+	const raw = notation.trim();
+	let ctrl = false,
+		shift = false,
+		meta = false;
+	let key = raw;
+	const parts = raw.split(/[-+]/);
+	if (parts.length > 1) {
+		key = parts[parts.length - 1];
+		for (const mod of parts.slice(0, -1)) {
+			const m = mod.toLowerCase();
+			if (m === "ctrl" || m === "c") ctrl = true;
+			else if (m === "shift" || m === "s") shift = true;
+			else if (m === "meta" || m === "alt" || m === "m") meta = true;
+		}
+	}
+	// Uppercase single letter w/o modifier => shift+letter (vim convention)
+	if (
+		parts.length === 1 &&
+		key.length === 1 &&
+		key >= "A" &&
+		key <= "Z" &&
+		!ctrl &&
+		!shift &&
+		!meta
+	) {
+		shift = true;
+		key = key.toLowerCase();
+	}
+	return { key: key.toLowerCase(), ctrl, shift, meta };
+}
+
+/** Turn one raw spec into a list of alternative stroke-sequences. */
+export function parseBindingSpec(spec: KeybindSpec | undefined): Stroke[][] {
+	if (spec == null) return [];
+	const alts: Stroke[][] = [];
+	const push = (item: string | string[]) => {
+		const seq = Array.isArray(item) ? item : [item];
+		alts.push(seq.map(parseStroke));
+	};
+	if (Array.isArray(spec)) {
+		for (const item of spec) push(item);
+	} else {
+		push(spec);
+	}
+	return alts;
+}
+
+/** Build a Stroke from a keyboard event (opentui shape: name + ctrl/shift/meta). */
+export function strokeFromEvent(evt: {
+	name: string;
+	ctrl?: boolean;
+	meta?: boolean;
+	shift?: boolean;
+}): Stroke {
+	// Uppercase letter events from opentui arrive as name="q" + shift; normalize.
+	return {
+		key: (evt.name ?? "").toLowerCase(),
+		ctrl: !!evt.ctrl,
+		shift: !!evt.shift,
+		meta: !!evt.meta,
+	};
+}
+
+function strokeEq(a: Stroke, b: Stroke): boolean {
+	return (
+		a.key === b.key &&
+		!!a.ctrl === !!b.ctrl &&
+		!!a.shift === !!b.shift &&
+		!!a.meta === !!b.meta
+	);
+}
+
+/** A human label for a stroke, for the status bar / help. */
+export function strokeLabel(s: Stroke): string {
+	let out = "";
+	if (s.ctrl) out += "C-";
+	if (s.meta) out += "M-";
+	if (s.shift) out += "S-";
+	out += s.key;
+	return out;
+}
+
+export function sequenceLabel(seq: Stroke[]): string {
+	return seq.map(strokeLabel).join(" ");
 }
 
 export const { use: useKeybinds, provider: KeybindProvider } =
 	createSimpleContext({
 		name: "Keybinds",
 		init: () => {
-      const [store, setStore] = createStore({
-        up: [],
-        down: [],
-        left: [],
-        right: [],
-        cycle: [],
-        dive: [],
-        out: [],
-        inverseModifier: "",
-        leader: "",
-        quit: [],
-        select: [],
-        refresh: [],
-        "audio-toggle": [],
-        "audio-pause": [],
-        "audio-play": [],
-        "audio-next": [],
-        "audio-prev": [],
-        "audio-seek-forward": [],
-        "audio-seek-backward": [],
-      } as KeybindsResolved);
+			const [store, setStore] = createStore<KeybindsResolved>({});
+			// Resolved sequences per action, recomputed when store changes.
+			const [resolved, setResolved] = createSignal<Record<string, Stroke[][]>>(
+				{},
+			);
 			const [ready, setReady] = createSignal(false);
+			const [pending, setPending] = createSignal<Stroke[]>([]);
+
+			let pendingTimer: ReturnType<typeof setTimeout> | undefined;
+
+			function recompute() {
+				const out: Record<string, Stroke[][]> = {};
+				for (const name of Object.keys(store) as string[]) {
+					out[name] = parseBindingSpec((store as any)[name]);
+				}
+				setResolved(out);
+			}
 
 			async function load() {
 				await copyKeybindsIfNeeded();
 				const keybinds = await loadKeybindsFromFile();
 				setStore(keybinds);
+				recompute();
 				setReady(true);
 			}
 
 			async function save() {
-        saveKeybindsToFile(store);
+				saveKeybindsToFile(store as KeybindsResolved);
 			}
 
-      function print(input: keyof KeybindsResolved): string {
-        const keys = store[input] || [];
-        return Array.isArray(keys) ? keys.join(", ") : keys;
+			function print(input: KeybindActionName): string {
+				const alts = resolved()[input] ?? [];
+				return alts.map(sequenceLabel).join(" / ") || "—";
 			}
 
+			function clearPending() {
+				if (pendingTimer) {
+					clearTimeout(pendingTimer);
+					pendingTimer = undefined;
+				}
+				if (pending().length > 0) setPending([]);
+			}
+
+			function armTimer() {
+				if (pendingTimer) clearTimeout(pendingTimer);
+				pendingTimer = setTimeout(() => clearPending(), SEQ_TIMEOUT_MS);
+			}
+
+			/** Look up every action whose sequence-list the candidate is a prefix of
+			 *  (i.e. a longer match is still possible) and every action that the
+			 *  candidate exactly equals. */
+			function classify(candidate: Stroke[]) {
+				const exact: KeybindActionName[] = [];
+				const prefix: KeybindActionName[] = [];
+				const map = resolved();
+				for (const name of Object.keys(map) as KeybindActionName[]) {
+					for (const seq of map[name] ?? []) {
+						if (seq.length < candidate.length) continue;
+						let isPrefix = true;
+						for (let i = 0; i < candidate.length; i++) {
+							if (!strokeEq(seq[i], candidate[i])) {
+								isPrefix = false;
+								break;
+							}
+						}
+						if (!isPrefix) continue;
+						if (seq.length === candidate.length) exact.push(name);
+						else prefix.push(name);
+					}
+				}
+				return { exact, prefix };
+			}
+
+			/** Legacy single-key matcher (used by command-palette registrations and
+			 *  older call sites). Returns true iff `name`'s sequence list contains a
+			 *  single-stroke alternative equal to the event. */
 			function match(
-        keybind: keyof KeybindsResolved,
+				name: KeybindActionName,
 				evt: { name: string; ctrl?: boolean; meta?: boolean; shift?: boolean },
 			): boolean {
-        const keys = store[keybind];
-        if (!keys) return false;
-
-        for (const key of keys) {
-          if (evt.name === key) return true;
+				const alts = resolved()[name] ?? [];
+				const s = strokeFromEvent(evt);
+				// skip in command/input mode unless explicitly handled by caller
+				for (const seq of alts) {
+					if (seq.length === 1 && strokeEq(seq[0], s)) return true;
 				}
 				return false;
 			}
 
-      function isInverting(evt: {
+			/** New sequence-aware matcher. Returns the resolved action or null.
+			 *  Callers should invoke this once per keypress in a single router. */
+			function tryMatch(evt: {
 				name: string;
 				ctrl?: boolean;
 				meta?: boolean;
 				shift?: boolean;
-      }) {
-        if (store.inverseModifier === "ctrl" && evt.ctrl) return true;
-        if (store.inverseModifier === "meta" && evt.meta) return true;
-        if (store.inverseModifier === "shift" && evt.shift) return true;
+			}): KeybindActionName | null {
+				const stroke = strokeFromEvent(evt);
+				const candidate = [...pending(), stroke];
+
+				const { exact, prefix } = classify(candidate);
+
+				// Still mid-sequence: wait for more keys (unless this stroke also
+				// exactly matches something AND nothing depends on a longer prefix).
+				if (prefix.length > 0) {
+					setPending(candidate);
+					armTimer();
+					// If there's also an exact match, we *could* fire now — but yazi
+					// prefers to wait for the longer sequence within the timeout, then
+					// falls through. We honor that: only fire exact if no prefix.
+					if (exact.length > 0) {
+						// ambiguous prefix+exact: keep waiting (e.g. `g` could be gg)
+					}
+					return null;
+				}
+
+				// No longer-match possible: decide on exact.
+				clearPending();
+				if (exact.length === 0) {
+					// The new stroke might itself begin a fresh sequence.
+					const fresh = classify([stroke]);
+					if (fresh.prefix.length > 0) {
+						setPending([stroke]);
+						armTimer();
+						return null;
+					}
+					if (fresh.exact.length > 0) {
+						// prefer longest-sequence match among fresh.exact
+						return pickLongest(fresh.exact);
+					}
+					return null;
+				}
+				return pickLongest(exact);
+			}
+
+			function pickLongest(names: KeybindActionName[]): KeybindActionName {
+				const map = resolved();
+				let best = names[0];
+				let bestLen = 0;
+				for (const n of names) {
+					for (const seq of map[n] ?? []) {
+						if (seq.length > bestLen) {
+							bestLen = seq.length;
+							best = n;
+						}
+					}
+				}
+				return best;
+			}
+
+			// `isInverting` kept for legacy callers; yazi model has no inverse mod,
+			// so it always reports false. Migrated callers should use tryMatch().
+			function isInverting(_evt: {
+				name: string;
+				ctrl?: boolean;
+				meta?: boolean;
+				shift?: boolean;
+			}): boolean {
 				return false;
 			}
 
-      // Load on mount
 			onMount(() => {
 				load().catch(() => {});
 			});
@@ -127,10 +359,17 @@ export const { use: useKeybinds, provider: KeybindProvider } =
 				get keybinds() {
 					return store;
 				},
-        save,
-        print,
+				get resolved() {
+					return resolved();
+				},
+				pending,
 				match,
+				tryMatch,
 				isInverting,
+				print,
+				save,
+				load,
+				clearPending,
 			};
 		},
 	});

src/context/NavigationContext.tsx

@@ -1,73 +1,426 @@
-import { createEffect, createSignal, on } from "solid-js";
+import { createEffect, createSignal, on, batch, createMemo } from "solid-js";
 import { createSimpleContext } from "./helper";
-import { TABS, TabsCount, LayerDepths } from "@/utils/navigation";
+import { TABS, TabsCount, DEPTH_TABS, rootFrameFor } from "@/utils/navigation";
 
-// Page-specific pane counts
-const PANE_COUNTS = {
-  [TABS.FEED]: 1,
-  [TABS.MYSHOWS]: 2,
-  [TABS.DISCOVER]: 2,
-  [TABS.SEARCH]: 3,
-  [TABS.PLAYER]: 1,
-  [TABS.SETTINGS]: 5,
+// ── Yazi-style navigation state ──────────────────────────────────────────────
+// Two pane models coexist:
+//
+//  • Depth-stack tabs (Feed, MyShows, Discover, Settings) use a yazi-style
+//    depth stack. The three content columns render as:
+//        left   = the previous depth's list  (empty at depth 0)
+//        center = the current depth's list   (always where focus lives)
+//        right  = preview of the hovered item in center
+//    `l`/Enter drills in (push); `h` pops back (or yields to the sidebar at
+//    depth 0). Depth is unbounded — each page decides per-item whether an
+//    item is drillable and what child list kind to push.
+//
+//  • Fixed-pane tabs (Search = input/results/detail, Player = single) keep the
+//    old indexed pane model (`focusedIndex(pane)` + `swipe`).
+//
+// The Shell's left tab sidebar is a special pane that sits *before* the
+// content area. It uses SIDEBAR_PANE (-1) so the h/l chain naturally lands on
+// it as the leftmost/root pane.
+
+export enum NavMode {
+	NORMAL = "NORMAL",
+	VISUAL = "VISUAL",
+	COMMAND = "COMMAND",
+	INPUT = "INPUT",
+}
+
+/** The tab sidebar (chrome) pane. Always the leftmost focus target. */
+export const SIDEBAR_PANE = -1 as PaneId;
+
+/** For depth-tabs, the current-depth (center) pane is the only focusable
+ *  content pane — index 0. The prev/preview columns are derived, not focused. */
+export const DEPTH_CENTER_PANE = 0 as PaneId;
+
+/** The sidebar pane's "list" is the tab list itself: its focus cursor is the
+ *  active tab (1-based) minus 1, and moving/setting it switches tabs via the
+ *  standard focusedIndex/move/gotoIndex API — no special-cased nextTab. */
+
+/** Legacy pane-slot enums — still used by the fixed-pane Search tab. */
+export enum PaneSlot {
+	PARENT = 0, // depth-tabs: center/current; Search: input
+	CURRENT = 1, // Search: results
+	PREVIEW = 2, // Search: detail
+}
+
+export type PaneId = number; // 0-based index into the active tab's pane list
+
+// ── Depth stack ──────────────────────────────────────────────────────────────
+/** One frame in a tab's depth stack. `kind` identifies the list (page-defined,
+ *  e.g. "feeds", "episodes:feedId", "settings:sections"); `focus` is the
+ *  focused row index within that list. `ctx` optionally carries an id or
+ *  payload the page needs to derive the list (e.g. a feed id). */
+export type DepthFrame = {
+	kind: string;
+	ctx?: string;
+	focus: number;
 };
 
+// ── Selection store ───────────────────────────────────────────────────────────
+// A Set per (tab, paneKey). `paneKey` is a string each pane uses to namespace
+// its selection (e.g. "myshows:episodes"). Visual mode toggles into range
+// selection anchored at the focused index.
+
+type SelectionMap = Record<string, Set<string>>;
+
+const HAS_VISUAL = (mode: NavMode) => mode === NavMode.VISUAL;
+
 export const { use: useNavigation, provider: NavigationProvider } =
 	createSimpleContext({
 		name: "Navigation",
 		init: () => {
 			const [activeTab, setActiveTab] = createSignal<TABS>(TABS.FEED);
-      const [activeDepth, setActiveDepth] = createSignal(0);
+			// App focus starts on the left tab sidebar (root pane); tab switches
+			// also return focus there.
+			const [activePane, setActivePane] = createSignal<PaneId>(SIDEBAR_PANE);
+			const [mode, setMode] = createSignal<NavMode>(NavMode.NORMAL);
+			const [count, setCount] = createSignal<number | null>(null);
 			const [inputFocused, setInputFocused] = createSignal(false);
 
+			// per-tab depth stack. Depth-tabs get a root frame on first visit.
+			const [stacks, setStacks] = createSignal<
+				Partial<Record<TABS, DepthFrame[]>>
+			>({ [TABS.FEED]: [rootFrameFor(TABS.FEED)] });
+
+			// per-pane focused index (for j/k movement in fixed-pane tabs). Keyed
+			// by `${tab}:${pane}`. Depth-tabs read/write the top frame's `focus`
+			// for pane 0 (DEPTH_CENTER_PANE) instead.
+			const [paneIndices, setPaneIndices] = createSignal<
+				Record<string, number>
+			>({});
+			const [selections, setSelections] = createSignal<SelectionMap>({});
+			const [visualAnchor, setVisualAnchor] = createSignal<{
+				paneKey: string;
+				index: number;
+			} | null>(null);
+
+			const [commandBuffer, setCommandBuffer] = createSignal("");
+			const [commandError, setCommandError] = createSignal<string | null>(null);
+
+			/** Depth stack for a tab (empty for fixed-pane tabs). */
+			const depthStackFor = (tab: TABS = activeTab()) => stacks()[tab] ?? [];
+
+			const ensureStack = (tab: TABS) => {
+				if (DEPTH_TABS.has(tab) && depthStackFor(tab).length === 0) {
+					setStacks((s) => ({ ...s, [tab]: [rootFrameFor(tab)] }));
+				}
+			};
+
+			// On tab change: ensure a root frame exists (depth-tabs) + reset
+			// focus to the sidebar, clear modes/command/visual state.
 			createEffect(
-        on(
-          () => activeTab,
-          () => setActiveDepth(0),
-        ),
+				on(activeTab, (tab) => {
+					ensureStack(tab);
+					batch(() => {
+						setActivePane(SIDEBAR_PANE);
+						setMode(NavMode.NORMAL);
+						setCount(null);
+						setCommandBuffer("");
+						setCommandError(null);
+						setVisualAnchor(null);
+					});
+				}),
 			);
 
-      const nextTab = () => {
-        if (activeTab() >= TabsCount) {
-          setActiveTab(1);
+			// ── depth stack accessors ──────────────────────────────────────────────
+			const depthStack = createMemo<DepthFrame[]>(() =>
+				depthStackFor(activeTab()),
+			);
+			const currentDepth = createMemo(() =>
+				Math.max(0, depthStack().length - 1),
+			);
+			const topFrame = createMemo<DepthFrame | undefined>(
+				() => depthStack()[depthStack().length - 1],
+			);
+			const isDepthTab = () => DEPTH_TABS.has(activeTab());
+
+			/** Focus within a given depth's frame (default = current/top). */
+			const depthFocus = (d: number = currentDepth()) =>
+				depthStack()[d]?.focus ?? 0;
+
+			const setDepthFocus = (i: number, d: number = currentDepth()) =>
+				setStacks((s) => {
+					const st = s[activeTab()];
+					if (!st || d < 0 || d >= st.length) return s;
+					const next = st.slice();
+					next[d] = { ...next[d], focus: i };
+					return { ...s, [activeTab()]: next };
+				});
+
+			/** Push a child frame (drill in). */
+			const pushDepth = (frame: DepthFrame) =>
+				setStacks((s) => {
+					const st = s[activeTab()] ?? [];
+					return { ...s, [activeTab()]: [...st, frame] };
+				});
+
+			/** Pop the top frame (go back up a depth). No-op at root. Returns
+			 *  true if a frame was popped. */
+			const popDepth = (): boolean => {
+				let popped = false;
+				setStacks((s) => {
+					const st = s[activeTab()] ?? [];
+					if (st.length <= 1) return s;
+					popped = true;
+					return { ...s, [activeTab()]: st.slice(0, -1) };
+				});
+				return popped;
+			};
+
+			// ── tab switching ──────────────────────────────────────────────────────
+			const gotoTab = (tab: TABS) => {
+				if (tab < 1 || tab > TabsCount) return;
+				setActiveTab(tab);
+			};
+			const nextTab = () =>
+				setActiveTab((t) => (t >= TabsCount ? 1 : ((t + 1) as TABS)));
+			const prevTab = () =>
+				setActiveTab((t) => (t <= 1 ? TabsCount : ((t - 1) as TABS)));
+
+			// ── pane focus ──────────────────────────────────────────────────────────
+			const setPane = (pane: PaneId) => setActivePane(pane);
+
+			/** Move focus to the adjacent pane (fixed-pane tabs only). `dir` =
+			 *  -1 (left, toward sidebar) or +1 (right, toward preview). Clamped to
+			 *  [SIDEBAR_PANE, paneCount-1]. */
+			const swipe = (dir: -1 | 1, paneCount: number) => {
+				setActivePane((p) => {
+					const n = Math.max(SIDEBAR_PANE, Math.min(paneCount - 1, p + dir));
+					return n;
+				});
+			};
+
+			// ── per-pane focus index ────────────────────────────────────────────────
+			const paneKey = (pane: PaneId = activePane()) => `${activeTab()}:${pane}`;
+
+			/** For depth-tabs, pane 0 (center) reads/writes the top frame's
+			 *  focus. The sidebar pane's focus IS the active tab. Other panes
+			 *  (and fixed-pane tabs) use the per-pane map. */
+			const focusedIndex = (pane: PaneId = activePane()): number => {
+				if (pane === SIDEBAR_PANE) return activeTab() - 1;
+				if (isDepthTab() && pane === DEPTH_CENTER_PANE) {
+					return topFrame()?.focus ?? 0;
+				}
+				return paneIndices()[paneKey(pane)] ?? 0;
+			};
+
+			const setFocusedIndex = (pane: PaneId, index: number) => {
+				if (pane === SIDEBAR_PANE) {
+					gotoTab(((index + TabsCount) % TabsCount) + 1);
 					return;
 				}
-        setActiveTab(activeTab() + 1);
-      };
-
-      const prevTab = () => {
-        if (activeTab() <= 1) {
-          setActiveTab(TabsCount);
+				if (isDepthTab() && pane === DEPTH_CENTER_PANE) {
+					setDepthFocus(index);
 					return;
 				}
-        setActiveTab(activeTab() - 1);
+				setPaneIndices((m) => ({
+					...m,
+					[`${activeTab()}:${pane}`]: index,
+				}));
 			};
 
-      const nextPane = () => {
-        // Move to next pane within the current tab's pane structure
-        const count = PANE_COUNTS[activeTab()];
-        if (count <= 1) return; // No panes to navigate (feed/player)
-        setActiveDepth((prev) => (prev % count) + 1);
+			/** Apply a clamped relative motion to the active pane's focus. Returns
+			 *  the new index so callers can update their own scroll state. */
+			const move = (
+				delta: number,
+				listLen: number,
+				countOverride?: number,
+			): number => {
+				if (listLen <= 0) return 0;
+				const steps = countOverride ?? count() ?? 1;
+				const pane = activePane();
+				const cur = focusedIndex(pane);
+				let next = cur + delta * steps;
+				// wrap-around like yazi (arrow wraps top<->bottom)
+				next = ((next % listLen) + listLen) % listLen;
+				setFocusedIndex(pane, next);
+				// visual-mode range selection: add newly-traversed items to selection
+				if (HAS_VISUAL(mode()) && visualAnchor()) {
+					growVisualSelection(next);
+				}
+				return next;
 			};
 
-      const prevPane = () => {
-        // Move to previous pane within the current tab's pane structure
-        const count = PANE_COUNTS[activeTab()];
-        if (count <= 1) return; // No panes to navigate (feed/player)
-        setActiveDepth((prev) => (prev - 2 + count) % count + 1);
+			const gotoIndex = (index: number, listLen: number): number => {
+				if (listLen <= 0) return 0;
+				const pane = activePane();
+				const next = Math.max(0, Math.min(listLen - 1, index));
+				setFocusedIndex(pane, next);
+				if (HAS_VISUAL(mode()) && visualAnchor()) growVisualSelection(next);
+				return next;
+			};
+
+			// ── selection ───────────────────────────────────────────────────────────
+			const selSet = (key: string): Set<string> =>
+				selections()[key] ?? new Set();
+
+			const toggleSelected = (id: string) => {
+				const key = paneKey();
+				setSelections((m) => {
+					const set = new Set(m[key] ?? []);
+					if (set.has(id)) set.delete(id);
+					else set.add(id);
+					return { ...m, [key]: set };
+				});
+			};
+
+			const isSelected = (id: string) => selSet(paneKey()).has(id);
+
+			const clearSelection = (key?: string) => {
+				const k = key ?? paneKey();
+				setSelections((m) => {
+					if (!(k in m)) return m;
+					const next = { ...m };
+					delete next[k];
+					return next;
+				});
+			};
+
+			const selectedIds = createMemo(() => [...selSet(paneKey())]);
+
+			/** Enter visual mode, anchoring range selection at the current focus. */
+			const enterVisual = () => {
+				const pane = activePane();
+				setVisualAnchor({ paneKey: paneKey(pane), index: focusedIndex(pane) });
+				setMode(NavMode.VISUAL);
+			};
+
+			/** Grow selection between the visual anchor and `index` for the active
+			 *  pane. Callers pass item ids aligned to indices; we store ids via the
+			 *  resolve callback registered per-pane (see registerResolver). */
+			let resolvers: Record<string, (index: number) => string | undefined> = {};
+			const registerResolver = (
+				key: string,
+				fn: (i: number) => string | undefined,
+			) => {
+				resolvers[key] = fn;
+			};
+			const growVisualSelection = (index: number) => {
+				const anchor = visualAnchor();
+				if (!anchor) return;
+				const resolve = resolvers[anchor.paneKey];
+				if (!resolve) return;
+				const lo = Math.min(anchor.index, index);
+				const hi = Math.max(anchor.index, index);
+				const ids: string[] = [];
+				for (let i = lo; i <= hi; i++) {
+					const id = resolve(i);
+					if (id) ids.push(id);
+				}
+				const key = anchor.paneKey;
+				setSelections((m) => ({ ...m, [key]: new Set(ids) }));
+			};
+
+			// ── modes ────────────────────────────────────────────────────────────────
+			const enterCommand = () => {
+				setMode(NavMode.COMMAND);
+				setCommandBuffer("");
+				setCommandError(null);
+			};
+			const enterInput = () => setMode(NavMode.INPUT);
+			const exitCommand = () => {
+				batch(() => {
+					setMode(NavMode.NORMAL);
+					setCommandBuffer("");
+					setCommandError(null);
+				});
+			};
+			const exitVisual = () => {
+				batch(() => {
+					setMode(NavMode.NORMAL);
+					setVisualAnchor(null);
+				});
+			};
+			const toNormal = () => {
+				if (mode() === NavMode.VISUAL) {
+					clearSelection();
+					exitVisual();
+				} else {
+					setMode(NavMode.NORMAL);
+				}
+			};
+
+			// ── command buffer ───────────────────────────────────────────────────────
+			const appendCommand = (ch: string) => setCommandBuffer((b) => b + ch);
+			const backspaceCommand = () => setCommandBuffer((b) => b.slice(0, -1));
+			const submitCommand = (): string => {
+				const cmd = commandBuffer().trim();
+				exitCommand();
+				return cmd;
+			};
+
+			// ── count register ───────────────────────────────────────────────────────
+			const pushCountDigit = (d: number) => setCount((c) => (c ?? 0) * 10 + d);
+			const consumeCount = (): number => {
+				const c = count();
+				setCount(null);
+				return c ?? 1;
 			};
 
 			return {
 				activeTab,
-        activeDepth,
+				activePane,
+				mode,
+				count,
 				inputFocused,
-        setActiveTab,
-        setActiveDepth,
-        setInputFocused,
+				commandBuffer,
+				commandError,
+				visualAnchor,
+				selections,
+				selectedIds,
+				// depth stack
+				depthStack,
+				currentDepth,
+				topFrame,
+				depthFocus,
+				setDepthFocus,
+				pushDepth,
+				popDepth,
+				isDepthTab,
+				// tab
+				setActiveTab: gotoTab,
 				nextTab,
 				prevTab,
-        nextPane,
-        prevPane,
+				// pane focus
+				setActivePane: setPane,
+				swipe,
+				// focus index
+				focusedIndex,
+				setFocusedIndex,
+				move,
+				gotoIndex,
+				// selection
+				isSelected,
+				toggleSelected,
+				clearSelection,
+				selectedIdsFor: (key: string) => [...selSet(key)],
+				registerResolver,
+				enterVisual,
+				exitVisual,
+				// modes
+				setActiveTabSignal: setActiveTab,
+				setActiveDepth: setPane, // legacy alias
+				activeDepth: activePane, // legacy alias
+				setInputFocused,
+				nextPane: () => {}, // legacy noop; swipe() replaces this
+				prevPane: () => {},
+				setMode,
+				enterCommand,
+				enterInput,
+				exitCommand,
+				toNormal,
+				// command buffer
+				setCommandBuffer,
+				appendCommand,
+				backspaceCommand,
+				submitCommand,
+				setCommandError,
+				// count
+				pushCountDigit,
+				consumeCount,
 			};
 		},
 	});

src/pages/Discover/DiscoverPage.tsx

@@ -1,185 +1,401 @@
 /**
- * DiscoverPage component - Main discover/browse interface for PodTUI
+ * DiscoverPage — yazi depth-stack view of discoverable podcasts.
+ *
+ *   depth 0 (current) — category list. Left pane empty at root.
+ *   depth 1 (current) — podcast results for the drilled category.
+ *   right (preview)   — detail of the hovered item (category summary, or
+ *                       podcast detail + subscribe action).
+ *
+ * `l`/Enter drills in (category → results) or subscribes (on a podcast);
+ * `h` pops back (or yields to the sidebar at depth 0). j/k move within the
+ * current column. Moving through categories at depth 0 updates the store's
+ * selected category so the preview follows.
  */
 
-import { createSignal, For, Show, onMount } from "solid-js";
-import { useKeyboard } from "@opentui/solid";
+import { createMemo, For, Show, onMount, onCleanup } from "solid-js";
 import { useDiscoverStore, DISCOVER_CATEGORIES } from "@/stores/discover";
+import { format } from "date-fns";
 import { useTheme } from "@/context/ThemeContext";
-import { PodcastCard } from "./PodcastCard";
-import { SelectableBox, SelectableText } from "@/components/Selectable";
-import { useNavigation } from "@/context/NavigationContext";
-import { KeybindProvider, useKeybinds } from "@/context/KeybindContext";
+import {
+	useNavigation,
+	NavMode,
+	DEPTH_CENTER_PANE,
+	type PaneId,
+	type DepthFrame,
+} from "@/context/NavigationContext";
+import { on, off } from "@/utils/event-bus";
+import type { KeybindActionName } from "@/context/KeybindContext";
+import { PANE_RATIO } from "@/utils/navigation";
 
-enum DiscoverPagePaneType {
-  CATEGORIES = 1,
-  SHOWS = 2,
-}
-export const DiscoverPaneCount = 2;
+export const DiscoverPaneCount = 1;
 
-export function DiscoverPage() {
+function DiscoverPage() {
 	const discoverStore = useDiscoverStore();
-  const [showIndex, setShowIndex] = createSignal(0);
-  const [categoryIndex, setCategoryIndex] = createSignal(0);
+	const { theme } = useTheme();
+	const muted = () => theme.muted || theme.text;
 	const nav = useNavigation();
-  const keybind = useKeybinds();
+
+	const stack = nav.depthStack;
+	const depth = nav.currentDepth;
+	const focus = (d: number = depth()) => nav.depthFocus(d);
+
+	const categories = () => DISCOVER_CATEGORIES;
+	const podcasts = () => discoverStore.filteredPodcasts();
+
+	const focusedCatIdx = () =>
+		categories().length === 0 ? 0 : Math.min(focus(0), categories().length - 1);
+	const focusedCategory = createMemo(() => categories()[focusedCatIdx()]);
+
+	const focusedPodIdx = () =>
+		podcasts().length === 0 ? 0 : Math.min(focus(1), podcasts().length - 1);
+	const focusedPodcast = createMemo(() => podcasts()[focusedPodIdx()]);
+
+	const curLen = () =>
+		depth() === 0 ? categories().length : podcasts().length;
+
+	const ensureFocus = () => {
+		if (categories().length > 0 && focus(0) >= categories().length)
+			nav.setDepthFocus(categories().length - 1, 0);
+		if (podcasts().length > 0 && focus(1) >= podcasts().length)
+			nav.setDepthFocus(podcasts().length - 1, 1);
+	};
+	onMount(ensureFocus);
 
 	onMount(() => {
-    useKeyboard(
-      (keyEvent: any) => {
-        const isDown = keybind.match("down", keyEvent);
-        const isUp = keybind.match("up", keyEvent);
-        const isCycle = keybind.match("cycle", keyEvent);
-        const isSelect = keybind.match("select", keyEvent);
-        const isInverting = keybind.isInverting(keyEvent);
-
-        if (isSelect) {
-          const filteredPodcasts = discoverStore.filteredPodcasts();
-          if (filteredPodcasts.length > 0 && showIndex() < filteredPodcasts.length) {
-            setShowIndex(showIndex() + 1);
-          }
-          return;
-        }
-
-        // don't handle pane navigation here - unified in App.tsx
-        if (nav.activeDepth() !== DiscoverPagePaneType.SHOWS) return;
-
-        const filteredPodcasts = discoverStore.filteredPodcasts();
-        if (filteredPodcasts.length === 0) return;
-
-        if (isDown && !isInverting()) {
-          setShowIndex((i) => (i + 1) % filteredPodcasts.length);
-        } else if (isUp && isInverting()) {
-          setShowIndex((i) => (i - 1 + filteredPodcasts.length) % filteredPodcasts.length);
-        } else if ((isCycle && !isInverting()) || (isDown && !isInverting())) {
-          setShowIndex((i) => (i + 1) % filteredPodcasts.length);
-        } else if ((isCycle && isInverting()) || (isUp && isInverting())) {
-          setShowIndex((i) => (i - 1 + filteredPodcasts.length) % filteredPodcasts.length);
-        }
-      },
-      { release: false },
-    );
+		nav.registerResolver(`${nav.activeTab()}:${DEPTH_CENTER_PANE}`, (i) => {
+			if (depth() === 0) return categories()[i]?.id;
+			return podcasts()[i]?.id;
+		});
 	});
 
-  const handleCategorySelect = (categoryId: string) => {
-    discoverStore.setSelectedCategory(categoryId);
-    const index = DISCOVER_CATEGORIES.findIndex((c) => c.id === categoryId);
-    if (index >= 0) setCategoryIndex(index);
-    setShowIndex(0);
-  };
+	// ── helpers ────────────────────────────────────────────────────────────────
+	const formatDate = (d: Date) => format(d, "MMM d, yyyy");
 
-  const handleShowSelect = (index: number) => {
-    setShowIndex(index);
-  };
-
-  const handleSubscribe = (podcast: { id: string }) => {
-    discoverStore.toggleSubscription(podcast.id);
-  };
-
-  const { theme } = useTheme();
-  return (
-    <box flexDirection="row" flexGrow={1} height="100%" width="100%" gap={1}>
-      <box
-        border
-        padding={1}
-        borderColor={
-          nav.activeDepth() != DiscoverPagePaneType.CATEGORIES
-            ? theme.border
-            : theme.accent
+	// ── drill / open ───────────────────────────────────────────────────────────
+	function open() {
+		if (depth() === 0) {
+			const c = focusedCategory();
+			if (!c) return;
+			discoverStore.setSelectedCategory(c.id);
+			nav.pushDepth({ kind: "results", ctx: c.id, focus: 0 } as DepthFrame);
+			nav.setActivePane(DEPTH_CENTER_PANE);
+			return;
 		}
-        flexDirection="column"
-        gap={1}
-      >
-        <text
-          fg={
-            nav.activeDepth() == DiscoverPagePaneType.CATEGORIES
-              ? theme.accent
-              : theme.text
+		if (depth() >= 1) {
+			const pod = focusedPodcast();
+			if (pod) discoverStore.toggleSubscription(pod.id);
 		}
-        >
-          Categories:
-        </text>
-        <box flexDirection="column" gap={1}>
-          <For each={discoverStore.categories}>
-            {(category) => {
-              const isSelected = () =>
-                discoverStore.selectedCategory() === category.id;
+	}
+
+	// ── nav.action handler ────────────────────────────────────────────────────
+	const PAGE_ACTIONS: Partial<Record<KeybindActionName, () => void>> = {
+		"move-down": () => step(1),
+		"move-up": () => step(-1),
+		"jump-down": () => step(5),
+		"jump-up": () => step(-5),
+		"page-down": () => step(10),
+		"page-up": () => step(-10),
+		"goto-top": () => nav.gotoIndex(0, curLen()),
+		"goto-bottom": () => nav.gotoIndex(curLen() - 1, curLen()),
+		open: () => open(),
+		"toggle-select": () => {
+			if (depth() >= 1) {
+				const pod = focusedPodcast();
+				if (pod) nav.toggleSelected(pod.id);
+			}
+		},
+		refresh: () => {
+			discoverStore.refresh().catch(() => {});
+		},
+	};
+	function step(delta: number) {
+		nav.move(delta, curLen());
+		// keep the store's selected category synced with the focused row at depth 0
+		if (depth() === 0) {
+			const c = focusedCategory();
+			if (c) discoverStore.setSelectedCategory(c.id);
+		}
+	}
+	const onAction = (data: {
+		action: KeybindActionName;
+		pane: PaneId;
+		mode: NavMode;
+	}) => {
+		if (data.pane !== DEPTH_CENTER_PANE) return;
+		if (nav.activePane() !== DEPTH_CENTER_PANE) return;
+		ensureFocus();
+		PAGE_ACTIONS[data.action]?.();
+	};
+	onMount(() => {
+		on("nav.action", onAction);
+		onCleanup(() => off("nav.action", onAction));
+	});
+
+	// ── render ──────────────────────────────────────────────────────────────────
+	const isActive = nav.activePane() === DEPTH_CENTER_PANE;
+	const border = (active: boolean) => (active ? theme.accent : theme.border);
+	const focusBg = (i: number, lf: number, active: boolean) =>
+		i === lf && active ? theme.primary : i === lf ? theme.border : undefined;
+	const focusFg = (i: number, lf: number, active: boolean) =>
+		i === lf && active ? theme.surface : theme.text;
+	const headerBg = theme.background;
 
 	return (
-                <SelectableBox
-                  selected={isSelected}
-                  onMouseDown={() => handleCategorySelect(category.id)}
-                >
-                  <SelectableText selected={isSelected} primary>
-                    {category.icon} {category.name}
-                  </SelectableText>
-                </SelectableBox>
-              );
-            }}
-          </For>
-        </box>
-      </box>
+		<box flexDirection="row" flexGrow={1} width="100%" height="100%">
+			{/* ── left: previous depth (empty at root) ──────────────────────────── */}
 			<box
 				flexDirection="column"
-          flexGrow={1}
-          border
-          borderColor={
-            nav.activeDepth() == DiscoverPagePaneType.SHOWS
-              ? theme.accent
-              : theme.border
-          }
+				flexGrow={PANE_RATIO.parent}
+				flexShrink={1}
+				flexBasis={0}
+				height="100%"
+				style={{ width: depth() === 0 ? 0 : undefined }}
+				overflow="hidden"
 			>
-          <box padding={1}>
-            <SelectableText
-              selected={() => false}
-              primary={nav.activeDepth() == DiscoverPagePaneType.SHOWS}
-            >
-              Trending in{" "}
-              {DISCOVER_CATEGORIES.find(
-                (c) => c.id === discoverStore.selectedCategory(),
-              )?.name ?? "All"}
-            </SelectableText>
+				<Show when={depth() >= 1}>
+					<box height={1} paddingLeft={1} backgroundColor={headerBg}>
+						<text fg={theme.textSecondary}>Categories</text>
 					</box>
-          <box flexDirection="column" height="100%">
-            <Show
-              fallback={
-                <box padding={2}>
-                  {discoverStore.filteredPodcasts().length !== 0 ? (
-                    <text fg={theme.warning}>Loading trending shows...</text>
-                  ) : (
-                    <text fg={theme.textMuted}>
-                      No podcasts found in this category.
-                    </text>
-                  )}
-                </box>
-              }
-              when={
-                !discoverStore.isLoading() &&
-                discoverStore.filteredPodcasts().length === 0
-              }
-            >
 					<scrollbox
-                focused={nav.activeDepth() == DiscoverPagePaneType.SHOWS}
+						height="100%"
+						border
+						borderColor={theme.border}
+						backgroundColor={theme.background}
 					>
-                <box flexDirection="column">
-                  <For each={discoverStore.filteredPodcasts()}>
-                    {(podcast, index) => (
-                      <PodcastCard
-                        podcast={podcast}
-                        selected={
-                          index() === showIndex() &&
-                          nav.activeDepth() == DiscoverPagePaneType.SHOWS
-                        }
-                        onSelect={() => handleShowSelect(index())}
-                        onSubscribe={() => handleSubscribe(podcast)}
-                      />
+						<For each={categories()}>
+							{(cat, index) => (
+								<box
+									flexDirection="row"
+									gap={1}
+									paddingLeft={1}
+									paddingRight={1}
+									backgroundColor={focusBg(index(), nav.depthFocus(0), false)}
+								>
+									<text fg={focusFg(index(), nav.depthFocus(0), false)}>
+										{index() === nav.depthFocus(0) ? "❯" : " "}
+									</text>
+									<text fg={focusFg(index(), nav.depthFocus(0), false)}>
+										{cat.name}
+									</text>
+								</box>
 							)}
 						</For>
-                </box>
 					</scrollbox>
 				</Show>
 			</box>
+
+			{/* ── center: current depth ─────────────────────────────────────────── */}
+			<box
+				flexDirection="column"
+				flexGrow={PANE_RATIO.current}
+				flexShrink={1}
+				flexBasis={0}
+				height="100%"
+			>
+				<box height={1} paddingLeft={1} backgroundColor={headerBg}>
+					<text fg={theme.textSecondary}>
+						{depth() === 0
+							? "Categories"
+							: `${focusedCategory()?.name ?? "Discover"} · ${podcasts().length}`}
+					</text>
+				</box>
+				<scrollbox
+					height="100%"
+					focused={isActive}
+					border
+					borderColor={border(isActive)}
+					backgroundColor={theme.background}
+				>
+					{/* depth 0: categories */}
+					<Show when={depth() === 0}>
+						<For each={categories()}>
+							{(cat, index) => {
+								const lf = focusedCatIdx();
+								const selected = () =>
+									cat.id === discoverStore.selectedCategory();
+								return (
+									<box
+										flexDirection="row"
+										gap={1}
+										paddingLeft={1}
+										paddingRight={1}
+										backgroundColor={focusBg(index(), lf, isActive)}
+										onMouseDown={() => {
+											nav.setActivePane(DEPTH_CENTER_PANE);
+											nav.setDepthFocus(index(), 0);
+											discoverStore.setSelectedCategory(cat.id);
+										}}
+									>
+										<text fg={focusFg(index(), lf, isActive)}>
+											{index() === lf ? "❯" : " "}
+										</text>
+										<text fg={focusFg(index(), lf, isActive)}>{cat.name}</text>
+										<Show when={selected()}>
+											<text fg={index() === lf ? theme.surface : theme.accent}>
+												*
+											</text>
+										</Show>
+									</box>
+								);
+							}}
+						</For>
+					</Show>
+
+					{/* depth ≥1: results */}
+					<Show when={depth() >= 1}>
+						<Show
+							when={podcasts().length > 0}
+							fallback={
+								<box padding={1}>
+									<text fg={muted()}>No podcasts found. :refresh</text>
+								</box>
+							}
+						>
+							<For each={podcasts()}>
+								{(podcast, index) => {
+									const lf = focusedPodIdx();
+									return (
+										<box
+											flexDirection="column"
+											gap={0}
+											paddingLeft={1}
+											paddingRight={1}
+											backgroundColor={focusBg(index(), lf, isActive)}
+											onMouseDown={() => {
+												nav.setActivePane(DEPTH_CENTER_PANE);
+												nav.setDepthFocus(index(), 1);
+											}}
+										>
+											<box flexDirection="row" gap={1}>
+												<text fg={focusFg(index(), lf, isActive)}>
+													{index() === lf ? "❯" : " "}
+												</text>
+												<text fg={focusFg(index(), lf, isActive)}>
+													{podcast.title}
+												</text>
+												<Show when={podcast.isSubscribed}>
+													<text
+														fg={index() === lf ? theme.surface : theme.success}
+													>
+														[+]
+													</text>
+												</Show>
+											</box>
+											<Show when={podcast.author}>
+												<text
+													fg={index() === lf ? theme.surface : muted()}
+													paddingLeft={2}
+												>
+													by {podcast.author}
+												</text>
+											</Show>
+										</box>
+									);
+								}}
+							</For>
+						</Show>
+					</Show>
+				</scrollbox>
+			</box>
+
+			{/* ── right: preview ────────────────────────────────────────────────── */}
+			<box
+				flexDirection="column"
+				flexGrow={PANE_RATIO.preview}
+				flexShrink={1}
+				flexBasis={0}
+				height="100%"
+			>
+				<box height={1} paddingLeft={1} backgroundColor={headerBg}>
+					<text fg={theme.textSecondary}>Preview</text>
+				</box>
+				<scrollbox
+					height="100%"
+					border
+					borderColor={theme.border}
+					backgroundColor={theme.background}
+				>
+					{/* depth 0 preview: hovered category */}
+					<Show when={depth() === 0}>
+						<Show
+							when={focusedCategory()}
+							fallback={
+								<box padding={1}>
+									<text fg={muted()}>No category focused</text>
+								</box>
+							}
+						>
+							{(cat) => (
+								<box flexDirection="column" gap={1} padding={1}>
+									<text fg={theme.textPrimary ?? theme.text}>
+										<strong>{cat().name}</strong>
+									</text>
+									<text fg={theme.textSecondary}>
+										{(cat() as any).description ??
+											`Browse top podcasts in ${cat().name}.`}
+									</text>
+									<box height={1} />
+									<text fg={muted()}>enter/l: open · h: back</text>
+								</box>
+							)}
+						</Show>
+					</Show>
+
+					{/* depth ≥1 preview: hovered podcast + subscribe */}
+					<Show when={depth() >= 1}>
+						<Show
+							when={focusedPodcast()}
+							fallback={
+								<box padding={1}>
+									<text fg={muted()}>No podcast focused</text>
+								</box>
+							}
+						>
+							{(pod) => (
+								<box flexDirection="column" gap={1} padding={1}>
+									<text fg={theme.textPrimary ?? theme.text}>
+										<strong>{pod().title}</strong>
+									</text>
+									<Show when={pod().author}>
+										<text fg={muted()}>by {pod().author}</text>
+									</Show>
+									<Show when={pod().isSubscribed}>
+										<text fg={theme.success}>✓ Subscribed</text>
+									</Show>
+									<Show when={!pod().isSubscribed}>
+										<text fg={theme.primary}>[+] Subscribe (enter)</text>
+									</Show>
+									<box height={1} />
+									<text fg={theme.textSecondary}>
+										{pod().description?.slice(0, 400) ??
+											"No description available."}
+										{(pod().description?.length ?? 0) > 400 ? "…" : ""}
+									</text>
+									<Show when={(pod().categories ?? []).length > 0}>
+										<box flexDirection="row" gap={1}>
+											<For each={(pod().categories ?? []).slice(0, 4)}>
+												{(cat) => <text fg={theme.warning}>[{cat}]</text>}
+											</For>
+										</box>
+									</Show>
+									<Show when={pod().feedUrl}>
+										<text fg={muted()}>Feed: {pod().feedUrl}</text>
+									</Show>
+									<text fg={muted()}>
+										Updated: {formatDate(pod().lastUpdated)}
+									</text>
+									<box height={1} />
+									<text fg={muted()}>
+										enter: subscribe · h: back · r: refresh
+									</text>
+								</box>
+							)}
+						</Show>
+					</Show>
+				</scrollbox>
 			</box>
 		</box>
 	);
 }
+
+export { DiscoverPage };

src/pages/Feed/FeedPage.tsx

@@ -1,195 +1,530 @@
 /**
- * FeedPage - Shows latest episodes across all subscribed shows
- * Reverse chronological order, grouped by date
+ * FeedPage — yazi depth-stack view of episodes across subscribed shows.
+ *
+ *   depth 0 (current) — subscribed feeds list (containers); index 0 is a
+ *                       virtual "All Feeds". Left pane empty at root.
+ *   depth 1 (current) — flat episodes list for the drilled feed (reverse
+ *                       chronological). Left pane = the feeds list (prev).
+ *   right (preview)   — detail of the hovered item in the current column.
+ *
+ * `l`/Enter drills in (feeds → episodes); `h` pops back (or yields to the
+ * sidebar at depth 0). j/k move within the current column. The Shell router
+ * drives everything over nav.action; this page only handles list/preview data.
  */
 
-import { createSignal, For, Show, onMount } from "solid-js";
+import { createMemo, For, Show, onMount, onCleanup } from "solid-js";
 import { useFeedStore } from "@/stores/feed";
+import { useDownloadStore } from "@/stores/download";
+import { DownloadStatus } from "@/types/episode";
 import { format } from "date-fns";
+import { useTheme } from "@/context/ThemeContext";
+import { useAudioNavStore, AudioSource } from "@/stores/audio-nav";
+import {
+	useNavigation,
+	NavMode,
+	DEPTH_CENTER_PANE,
+	type PaneId,
+	type DepthFrame,
+} from "@/context/NavigationContext";
+import { useAudio } from "@/hooks/useAudio";
+import { on, off } from "@/utils/event-bus";
+import type { KeybindActionName } from "@/context/KeybindContext";
 import type { Episode } from "@/types/episode";
 import type { Feed } from "@/types/feed";
-import { useTheme } from "@/context/ThemeContext";
-import { SelectableBox, SelectableText } from "@/components/Selectable";
-import { useNavigation } from "@/context/NavigationContext";
 import { LoadingIndicator } from "@/components/LoadingIndicator";
-import { TABS } from "@/utils/navigation";
-import { useKeyboard } from "@opentui/solid";
-import { KeybindProvider, useKeybinds } from "@/context/KeybindContext";
+import { PANE_RATIO } from "@/utils/navigation";
 
-enum FeedPaneType {
-  FEED = 1,
-}
 export const FeedPaneCount = 1;
 
-const ITEMS_PER_BATCH = 50;
+type FeedListItem = { kind: "all" } | { kind: "feed"; feed: Feed };
+type EpItem = { episode: Episode; feed: Feed };
 
-export function FeedPage() {
+function FeedPage() {
 	const feedStore = useFeedStore();
-  const nav = useNavigation();
+	const downloadStore = useDownloadStore();
+	const audioNav = useAudioNavStore();
+	const audio = useAudio();
 	const { theme } = useTheme();
-  const [selectedEpisodeID, setSelectedEpisodeID] = createSignal<
-    string | undefined
-  >();
-  const allEpisodes = () => feedStore.getAllEpisodesChronological();
-  const keybind = useKeybinds();
-  const [focusedIndex, setFocusedIndex] = createSignal(0);
+	const muted = () => theme.muted || theme.text;
+	const nav = useNavigation();
+
+	const stack = nav.depthStack;
+	const depth = nav.currentDepth;
+	const focus = (d: number = depth()) => nav.depthFocus(d);
+
+	// ── feeds list (depth 0) ─────────────────────────────────────────────────
+	const feedList = createMemo<FeedListItem[]>(() => {
+		const all: FeedListItem[] = [{ kind: "all" }];
+		for (const f of feedStore.getFilteredFeeds())
+			all.push({ kind: "feed", feed: f });
+		return all;
+	});
+	const focusedFeedIdx = () =>
+		feedList().length === 0 ? 0 : Math.min(focus(0), feedList().length - 1);
+	const focusedFeedItem = (): FeedListItem | undefined =>
+		feedList()[focusedFeedIdx()];
+
+	// ── episodes list (depth 1) — derived from the depth-1 frame's ctx ───────
+	const drilledFeedId = (): string => stack()[1]?.ctx ?? "all";
+	const episodes = createMemo<EpItem[]>(() => {
+		if (depth() < 1) return [];
+		const id = drilledFeedId();
+		if (id === "all")
+			return feedStore.getAllEpisodesChronological() as EpItem[];
+		const f = feedStore.getFilteredFeeds().find((x) => x.podcast.id === id);
+		if (!f) return [];
+		return [...f.episodes]
+			.sort((a, b) => b.pubDate.getTime() - a.pubDate.getTime())
+			.map((episode) => ({ episode, feed: f }));
+	});
+	const focusedEpIdx = () =>
+		episodes().length === 0 ? 0 : Math.min(focus(1), episodes().length - 1);
+	const focusedItem = (): EpItem | undefined => episodes()[focusedEpIdx()];
+
+	const curLen = () => (depth() === 0 ? feedList().length : episodes().length);
+
+	const ensureFocus = () => {
+		if (depth() === 0 && feedList().length > 0 && focus(0) >= feedList().length)
+			nav.setDepthFocus(feedList().length - 1, 0);
+		if (depth() >= 1 && episodes().length > 0 && focus(1) >= episodes().length)
+			nav.setDepthFocus(episodes().length - 1, 1);
+	};
+	onMount(ensureFocus);
 
 	onMount(() => {
-    useKeyboard(
-      (keyEvent: any) => {
-        const isDown = keybind.match("down", keyEvent);
-        const isUp = keybind.match("up", keyEvent);
-        const isCycle = keybind.match("cycle", keyEvent);
-        const isSelect = keybind.match("select", keyEvent);
-        const isInverting = keybind.isInverting(keyEvent);
-
-        if (isSelect) {
-          const episodes = allEpisodes();
-          if (episodes.length > 0 && episodes[focusedIndex()]) {
-            setSelectedEpisodeID(episodes[focusedIndex()].episode.id);
+		nav.registerResolver(`${nav.activeTab()}:${DEPTH_CENTER_PANE}`, (i) => {
+			if (depth() === 0) {
+				const it = feedList()[i];
+				return it?.kind === "feed" ? it.feed.podcast.id : "all";
 			}
+			return episodes()[i]?.episode.id;
+		});
+	});
+
+	// ── helpers ────────────────────────────────────────────────────────────────
+	const formatDate = (d: Date) => format(d, "MMM d, yyyy");
+	const formatDuration = (s: number) => {
+		const mins = Math.floor(s / 60);
+		const hrs = Math.floor(mins / 60);
+		return hrs > 0 ? `${hrs}h ${mins % 60}m` : `${mins}m`;
+	};
+	const downloadLabel = (id: string) => {
+		switch (downloadStore.getDownloadStatus(id)) {
+			case DownloadStatus.QUEUED:
+				return "[Q]";
+			case DownloadStatus.DOWNLOADING:
+				return `[${downloadStore.getDownloadProgress(id)}%]`;
+			case DownloadStatus.COMPLETED:
+				return "[DL]";
+			case DownloadStatus.FAILED:
+				return "[ERR]";
+			default:
+				return "";
+		}
+	};
+	const downloadColor = (id: string) => {
+		switch (downloadStore.getDownloadStatus(id)) {
+			case DownloadStatus.QUEUED:
+				return theme.warning;
+			case DownloadStatus.DOWNLOADING:
+				return theme.primary;
+			case DownloadStatus.COMPLETED:
+				return theme.success;
+			case DownloadStatus.FAILED:
+				return theme.error;
+			default:
+				return muted();
+		}
+	};
+	const playEpisode = (item: EpItem | undefined) => {
+		if (!item) return;
+		audio.play(item.episode).catch(() => {});
+		audioNav.setSource(AudioSource.FEED);
+	};
+
+	// ── drill / open ───────────────────────────────────────────────────────────
+	function open() {
+		if (depth() === 0) {
+			const item = focusedFeedItem();
+			if (!item) return;
+			const ctx = item.kind === "all" ? "all" : item.feed.podcast.id;
+			nav.pushDepth({ kind: "episodes", ctx, focus: 0 } as DepthFrame);
+			nav.setActivePane(DEPTH_CENTER_PANE);
 			return;
 		}
+		if (depth() >= 1) {
+			playEpisode(focusedItem());
+		}
+	}
 
-        // don't handle pane navigation here - unified in App.tsx
-        if (nav.activeDepth() !== FeedPaneType.FEED) return;
-
-        const episodes = allEpisodes();
-        if (episodes.length === 0) return;
-
-        if (isDown && !isInverting()) {
-          setFocusedIndex((i) => (i + 1) % episodes.length);
-        } else if (isUp && isInverting()) {
-          setFocusedIndex((i) => (i - 1 + episodes.length) % episodes.length);
-        } else if ((isCycle && !isInverting()) || (isDown && !isInverting())) {
-          setFocusedIndex((i) => (i + 1) % episodes.length);
-        } else if ((isCycle && isInverting()) || (isUp && isInverting())) {
-          setFocusedIndex((i) => (i - 1 + episodes.length) % episodes.length);
+	// ── nav.action handler ────────────────────────────────────────────────────
+	const PAGE_ACTIONS: Partial<Record<KeybindActionName, () => void>> = {
+		"move-down": () => step(1),
+		"move-up": () => step(-1),
+		"jump-down": () => step(5),
+		"jump-up": () => step(-5),
+		"page-down": () => step(10),
+		"page-up": () => step(-10),
+		"goto-top": () => nav.gotoIndex(0, curLen()),
+		"goto-bottom": () => nav.gotoIndex(curLen() - 1, curLen()),
+		open: () => open(),
+		"toggle-select": () => {
+			if (depth() >= 1) {
+				const item = focusedItem();
+				if (item) nav.toggleSelected(item.episode.id);
 			}
 		},
-      { release: false },
-    );
+		refresh: () => {
+			const item = focusedFeedItem();
+			if (item?.kind === "feed")
+				feedStore.refreshFeed(item.feed.id).catch(() => {});
+			else feedStore.refreshAllFeeds().catch(() => {});
+		},
+	};
+	function step(delta: number) {
+		nav.move(delta, curLen());
+	}
+	const onAction = (data: {
+		action: KeybindActionName;
+		pane: PaneId;
+		mode: NavMode;
+	}) => {
+		if (data.pane !== DEPTH_CENTER_PANE) return;
+		if (nav.activePane() !== DEPTH_CENTER_PANE) return;
+		ensureFocus();
+		PAGE_ACTIONS[data.action]?.();
+	};
+	onMount(() => {
+		on("nav.action", onAction);
+		onCleanup(() => off("nav.action", onAction));
 	});
 
-  const formatDate = (date: Date): string => {
-    return format(date, "MMM d, yyyy");
-  };
+	// ── render ──────────────────────────────────────────────────────────────────
+	const isActive = nav.activePane() === DEPTH_CENTER_PANE;
+	const border = (active: boolean) => (active ? theme.accent : theme.border);
+	const focusBg = (i: number, listFocus: number, active: boolean) =>
+		i === listFocus && active
+			? theme.primary
+			: i === listFocus
+				? theme.border
+				: undefined;
+	const focusFg = (i: number, listFocus: number, active: boolean) =>
+		i === listFocus && active ? theme.surface : theme.text;
+	const headerBg = theme.background;
 
-  const groupEpisodesByDate = () => {
-    const groups: Record<string, Array<{ episode: Episode; feed: Feed }>> = {};
-
-    for (const item of allEpisodes()) {
-      const dateKey = formatDate(new Date(item.episode.pubDate));
-      if (!groups[dateKey]) {
-        groups[dateKey] = [];
-      }
-      groups[dateKey].push(item);
-    }
-
-    return Object.entries(groups).sort(([a, _aItems], [b, _bItems]) => {
-      // Convert date strings back to Date objects for proper chronological sorting
-      const dateA = new Date(a);
-      const dateB = new Date(b);
-      // Sort in descending order (newest first)
-      return dateB.getTime() - dateA.getTime();
-    });
-  };
-
-  const formatDuration = (seconds: number): string => {
-    const mins = Math.floor(seconds / 60);
-    const hrs = Math.floor(mins / 60);
-    if (hrs > 0) return `${hrs}h ${mins % 60}m`;
-    return `${mins}m`;
-  };
+	const feedLabel = (item: FeedListItem) =>
+		item.kind === "all"
+			? "All Feeds"
+			: item.feed.customName || item.feed.podcast.title;
+	const feedCount = (item: FeedListItem) =>
+		item.kind === "all"
+			? feedStore.getAllEpisodesChronological().length
+			: item.feed.episodes.length;
 
 	return (
+		<box flexDirection="row" flexGrow={1} width="100%" height="100%">
+			{/* ── left: previous depth (empty at root) ──────────────────────────── */}
 			<box
-      border
-      borderColor={
-        nav.activeDepth() !== FeedPaneType.FEED ? theme.border : theme.accent
-      }
-      backgroundColor={theme.background}
 				flexDirection="column"
+				flexGrow={PANE_RATIO.parent}
+				flexShrink={1}
+				flexBasis={0}
 				height="100%"
-      width="100%"
+				style={{ width: depth() === 0 ? 0 : undefined }}
+				overflow="hidden"
 			>
-      <Show
-        when={allEpisodes().length > 0}
-        fallback={
-          <box padding={2}>
-            <text fg={theme.textMuted}>
-              No episodes yet. Subscribe to shows from Discover or Search.
+				<Show when={depth() >= 1}>
+					<box height={1} paddingLeft={1} backgroundColor={headerBg}>
+						<text fg={theme.textSecondary}>
+							Feeds · {feedList().length - 1}
 						</text>
 					</box>
-        }
-      >
 					<scrollbox
 						height="100%"
-          focused={nav.activeDepth() == FeedPaneType.FEED}
+						border
+						borderColor={theme.border}
+						backgroundColor={theme.background}
 					>
-          <For each={groupEpisodesByDate()}>
-            {([date, items]) => (
-              <box flexDirection="column" gap={1} padding={1}>
-                <SelectableText selected={() => false} primary>
-                  {date}
-                </SelectableText>
-                <For each={items}>
-                  {(item) => {
-                    const isSelected = () => {
-                      if (
-                        nav.activeTab() == TABS.FEED &&
-                        nav.activeDepth() == FeedPaneType.FEED &&
-                        selectedEpisodeID() &&
-                        selectedEpisodeID() === item.episode.id
-                      ) {
-                        return true;
-                      }
-                      return false;
-                    };
-                    const isFocused = () => {
-                      const episodes = allEpisodes();
-                      const currentIndex = episodes.findIndex(
-                        (e: any) => e.episode.id === item.episode.id,
-                      );
-                      return currentIndex === focusedIndex();
-                    };
-                    return (
-                      <SelectableBox
-                        selected={isSelected}
-                        flexDirection="column"
-                        gap={0}
+						<For each={feedList()}>
+							{(item, index) => (
+								<box
+									flexDirection="row"
+									gap={1}
 									paddingLeft={1}
 									paddingRight={1}
-                        paddingTop={0}
-                        paddingBottom={0}
-                        onMouseDown={() => {
-                          setSelectedEpisodeID(item.episode.id);
-                          const episodes = allEpisodes();
-                          setFocusedIndex(
-                            episodes.findIndex((e: any) => e.episode.id === item.episode.id),
-                          );
-                        }}
+									backgroundColor={focusBg(index(), nav.depthFocus(0), false)}
 								>
-                        <SelectableText selected={isSelected} primary>
-                          {item.episode.title}
-                        </SelectableText>
-                        <box flexDirection="row" gap={2} paddingLeft={2}>
-                          <SelectableText selected={isSelected} primary>
-                            {item.feed.podcast.title}
-                          </SelectableText>
-                          <SelectableText selected={isSelected} tertiary>
-                            {formatDuration(item.episode.duration)}
-                          </SelectableText>
-                        </box>
-                      </SelectableBox>
-                    );
-                  }}
-                </For>
+									<text fg={focusFg(index(), nav.depthFocus(0), false)}>
+										{index() === nav.depthFocus(0) ? "❯" : " "}
+									</text>
+									<text fg={focusFg(index(), nav.depthFocus(0), false)}>
+										{feedLabel(item)}
+									</text>
+									<text fg={muted()}>({feedCount(item)})</text>
 								</box>
 							)}
 						</For>
 					</scrollbox>
 				</Show>
 			</box>
+
+			{/* ── center: current depth ─────────────────────────────────────────── */}
+			<box
+				flexDirection="column"
+				flexGrow={PANE_RATIO.current}
+				flexShrink={1}
+				flexBasis={0}
+				height="100%"
+			>
+				<box height={1} paddingLeft={1} backgroundColor={headerBg}>
+					<text fg={theme.textSecondary}>
+						{depth() === 0
+							? `Feeds · ${feedList().length - 1}`
+							: `${(() => {
+									const fi = focusedFeedItem();
+									return fi?.kind === "feed"
+										? fi.feed.customName || fi.feed.podcast.title
+										: "All Episodes";
+								})()} · ${episodes().length}`}
+					</text>
+				</box>
+				<scrollbox
+					height="100%"
+					focused={isActive}
+					border
+					borderColor={border(isActive)}
+					backgroundColor={theme.background}
+				>
+					{/* depth 0: feeds */}
+					<Show when={depth() === 0}>
+						<Show
+							when={feedList().length > 1}
+							fallback={
+								<box padding={1}>
+									<text fg={muted()}>
+										No feeds. Subscribe from Discover/Search.
+									</text>
+								</box>
+							}
+						>
+							<For each={feedList()}>
+								{(item, index) => {
+									const fi = focusedFeedIdx();
+									return (
+										<box
+											flexDirection="row"
+											gap={1}
+											paddingLeft={1}
+											paddingRight={1}
+											backgroundColor={focusBg(index(), fi, isActive)}
+											onMouseDown={() => {
+												nav.setActivePane(DEPTH_CENTER_PANE);
+												nav.setDepthFocus(index(), 0);
+											}}
+										>
+											<text fg={focusFg(index(), fi, isActive)}>
+												{index() === fi ? "❯" : " "}
+											</text>
+											<text fg={focusFg(index(), fi, isActive)}>
+												{feedLabel(item)}
+											</text>
+											<text fg={index() === fi ? theme.surface : muted()}>
+												({feedCount(item)})
+											</text>
+										</box>
+									);
+								}}
+							</For>
+						</Show>
+					</Show>
+
+					{/* depth ≥1: episodes */}
+					<Show when={depth() >= 1}>
+						<Show
+							when={episodes().length > 0}
+							fallback={
+								<box padding={1}>
+									<text fg={muted()}>No episodes. :refresh</text>
+								</box>
+							}
+						>
+							<For each={episodes()}>
+								{(item, index) => {
+									const fi = focusedEpIdx();
+									return (
+										<box
+											flexDirection="column"
+											gap={0}
+											paddingLeft={1}
+											paddingRight={1}
+											backgroundColor={focusBg(index(), fi, isActive)}
+											onMouseDown={() => {
+												nav.setActivePane(DEPTH_CENTER_PANE);
+												nav.setDepthFocus(index(), 1);
+											}}
+										>
+											<box flexDirection="row" gap={1}>
+												<text fg={focusFg(index(), fi, isActive)}>
+													{index() === fi ? "❯" : " "}
+												</text>
+												<text fg={focusFg(index(), fi, isActive)}>
+													{item.episode.episodeNumber
+														? `#${item.episode.episodeNumber} `
+														: ""}
+													{item.episode.title}
+												</text>
+											</box>
+											<box flexDirection="row" gap={2} paddingLeft={2}>
+												<text fg={index() === fi ? theme.surface : theme.info}>
+													{formatDate(item.episode.pubDate)}
+												</text>
+												<text fg={index() === fi ? theme.surface : muted()}>
+													{formatDuration(item.episode.duration)}
+												</text>
+												<text fg={index() === fi ? theme.surface : muted()}>
+													{item.feed.customName || item.feed.podcast.title}
+												</text>
+												<Show when={nav.isSelected(item.episode.id)}>
+													<text fg={theme.warning}>●</text>
+												</Show>
+												<Show when={downloadLabel(item.episode.id)}>
+													<text fg={downloadColor(item.episode.id)}>
+														{downloadLabel(item.episode.id)}
+													</text>
+												</Show>
+											</box>
+										</box>
+									);
+								}}
+							</For>
+							<Show when={feedStore.isLoadingFeeds()}>
+								<box paddingLeft={2} paddingTop={1}>
+									<LoadingIndicator />
+								</box>
+							</Show>
+						</Show>
+					</Show>
+				</scrollbox>
+			</box>
+
+			{/* ── right: preview of hovered item ───────────────────────────────── */}
+			<box
+				flexDirection="column"
+				flexGrow={PANE_RATIO.preview}
+				flexShrink={1}
+				flexBasis={0}
+				height="100%"
+			>
+				<box height={1} paddingLeft={1} backgroundColor={headerBg}>
+					<text fg={theme.textSecondary}>Preview</text>
+				</box>
+				<scrollbox
+					height="100%"
+					border
+					borderColor={theme.border}
+					backgroundColor={theme.background}
+				>
+					{/* depth 0 preview: hovered feed */}
+					<Show when={depth() === 0}>
+						<Show
+							when={focusedFeedItem()}
+							fallback={
+								<box padding={1}>
+									<text fg={muted()}>No feed focused</text>
+								</box>
+							}
+						>
+							{(item) => {
+								const it = item();
+								return (
+									<box flexDirection="column" gap={1} padding={1}>
+										<text fg={theme.textPrimary ?? theme.text}>
+											<strong>{feedLabel(it)}</strong>
+										</text>
+										<text fg={muted()}>
+											{it.kind === "feed"
+												? `by ${it.feed.podcast.author ?? "unknown"}`
+												: ""}
+										</text>
+										<text fg={theme.textSecondary}>
+											{it.kind === "all"
+												? `${feedCount(it)} episodes across all feeds`
+												: `${feedCount(it)} episodes`}
+										</text>
+										<text fg={muted()}>
+											{it.kind === "feed"
+												? (it.feed.podcast.description?.slice(0, 400) ??
+													"No description.")
+												: "Drill in to see episodes across every feed."}
+										</text>
+										<box height={1} />
+										<text fg={muted()}>enter/l: open · h: back</text>
+									</box>
+								);
+							}}
+						</Show>
+					</Show>
+
+					{/* depth ≥1 preview: hovered episode */}
+					<Show when={depth() >= 1}>
+						<Show
+							when={focusedItem()}
+							fallback={
+								<box padding={1}>
+									<text fg={muted()}>No episode focused</text>
+								</box>
+							}
+						>
+							{(item) => {
+								const it = item();
+								return (
+									<box flexDirection="column" gap={1} padding={1}>
+										<text fg={theme.textPrimary ?? theme.text}>
+											<strong>
+												{it.episode.episodeNumber
+													? `#${it.episode.episodeNumber} `
+													: ""}
+												{it.episode.title}
+											</strong>
+										</text>
+										<box flexDirection="row" gap={2}>
+											<text fg={theme.info}>
+												{formatDate(it.episode.pubDate)}
+											</text>
+											<text fg={muted()}>
+												{formatDuration(it.episode.duration)}
+											</text>
+											<Show when={downloadLabel(it.episode.id)}>
+												<text fg={downloadColor(it.episode.id)}>
+													{downloadLabel(it.episode.id)}
+												</text>
+											</Show>
+										</box>
+										<text fg={muted()}>
+											{it.feed.customName || it.feed.podcast.title}
+										</text>
+										<Show when={it.feed.podcast.author}>
+											<text fg={muted()}>by {it.feed.podcast.author}</text>
+										</Show>
+										<box height={1} />
+										<text fg={theme.textSecondary}>
+											{it.episode.description?.slice(0, 400) ??
+												"No description available."}
+											{(it.episode.description?.length ?? 0) > 400 ? "…" : ""}
+										</text>
+										<box height={1} />
+										<text fg={muted()}>
+											enter: play · space: select · h: back
+										</text>
+									</box>
+								);
+							}}
+						</Show>
+					</Show>
+				</scrollbox>
+			</box>
+		</box>
 	);
 }
+
+export { FeedPage };

src/pages/MyShows/MyShowsPage.tsx

@@ -1,119 +1,102 @@
 /**
- * MyShowsPage - Two-panel file-explorer style view
- * Left panel: list of subscribed shows
- * Right panel: episodes for the selected show
+ * MyShowsPage — yazi depth-stack view of subscribed shows.
+ *
+ *   depth 0 (current) — subscribed shows. Left pane empty at root.
+ *   depth 1 (current) — episodes of the drilled show. Left pane = shows (prev).
+ *   right (preview)   — detail of the hovered item in the current column.
+ *
+ * `l`/Enter drills in (show → episodes); `h` pops back (or yields to the
+ * sidebar at depth 0). j/k move within the current column.
  */
 
-import { createSignal, For, Show, createMemo, createEffect, onMount } from "solid-js";
-import { useKeyboard } from "@opentui/solid";
+import { createMemo, For, Show, onMount, onCleanup } from "solid-js";
 import { useFeedStore } from "@/stores/feed";
 import { useDownloadStore } from "@/stores/download";
 import { DownloadStatus } from "@/types/episode";
 import { format } from "date-fns";
 import { useTheme } from "@/context/ThemeContext";
 import { useAudioNavStore, AudioSource } from "@/stores/audio-nav";
-import { useNavigation } from "@/context/NavigationContext";
+import {
+	useNavigation,
+	NavMode,
+	DEPTH_CENTER_PANE,
+	type PaneId,
+	type DepthFrame,
+} from "@/context/NavigationContext";
+import { useAudio } from "@/hooks/useAudio";
+import { on, off } from "@/utils/event-bus";
+import type { KeybindActionName } from "@/context/KeybindContext";
+import type { Episode } from "@/types/episode";
+import type { Feed } from "@/types/feed";
 import { LoadingIndicator } from "@/components/LoadingIndicator";
-import { KeybindProvider, useKeybinds } from "@/context/KeybindContext";
+import { PANE_RATIO } from "@/utils/navigation";
 
-enum MyShowsPaneType {
-  SHOWS = 1,
-  EPISODES = 2,
-}
-
-export const MyShowsPaneCount = 2;
+export const MyShowsPaneCount = 1;
 
 export function MyShowsPage() {
 	const feedStore = useFeedStore();
 	const downloadStore = useDownloadStore();
 	const audioNav = useAudioNavStore();
-  const [isRefreshing, setIsRefreshing] = createSignal(false);
-  const [showIndex, setShowIndex] = createSignal(0);
-  const [episodeIndex, setEpisodeIndex] = createSignal(0);
+	const audio = useAudio();
 	const { theme } = useTheme();
-  const mutedColor = () => theme.muted || theme.text;
+	const muted = () => theme.muted || theme.text;
 	const nav = useNavigation();
-  const keybind = useKeybinds();
 
-  onMount(() => {
-    useKeyboard(
-      (keyEvent: any) => {
-        const isDown = keybind.match("down", keyEvent);
-        const isUp = keybind.match("up", keyEvent);
-        const isCycle = keybind.match("cycle", keyEvent);
-        const isSelect = keybind.match("select", keyEvent);
-        const isInverting = keybind.isInverting(keyEvent);
-
-        const shows = feedStore.getFilteredFeeds();
-        const episodesList = episodes();
-
-        if (isSelect) {
-          if (shows.length > 0 && showIndex() < shows.length) {
-            setShowIndex(showIndex() + 1);
-          }
-          if (episodesList.length > 0 && episodeIndex() < episodesList.length) {
-            setEpisodeIndex(episodeIndex() + 1);
-          }
-          return;
-        }
-
-        // don't handle pane navigation here - unified in App.tsx
-        if (nav.activeDepth() !== MyShowsPaneType.EPISODES) return;
-
-        if (episodesList.length > 0) {
-          if (isDown && !isInverting()) {
-            setEpisodeIndex((i) => (i + 1) % episodesList.length);
-          } else if (isUp && isInverting()) {
-            setEpisodeIndex((i) => (i - 1 + episodesList.length) % episodesList.length);
-          } else if ((isCycle && !isInverting()) || (isDown && !isInverting())) {
-            setEpisodeIndex((i) => (i + 1) % episodesList.length);
-          } else if ((isCycle && isInverting()) || (isUp && isInverting())) {
-            setEpisodeIndex((i) => (i - 1 + episodesList.length) % episodesList.length);
-          }
-        }
-      },
-      { release: false },
-    );
-  });
-
-  /** Threshold: load more when within this many items of the end */
-  const LOAD_MORE_THRESHOLD = 5;
+	const stack = nav.depthStack;
+	const depth = nav.currentDepth;
+	const focus = (d: number = depth()) => nav.depthFocus(d);
 
 	const shows = () => feedStore.getFilteredFeeds();
 
-  const selectedShow = createMemo(() => {
-    return shows()[0]; //TODO: Integrate with locally handled keyboard navigation
-  });
+	const focusedShowIdx = () =>
+		shows().length === 0 ? 0 : Math.min(focus(0), shows().length - 1);
+	const selectedShow = (): Feed | undefined => shows()[focusedShowIdx()];
 
-  const episodes = createMemo(() => {
-    const show = selectedShow();
+	// depth-1 frame ctx = the drilled feed id
+	const drilledShowId = (): string => stack()[1]?.ctx ?? "";
+	const episodes = createMemo<Episode[]>(() => {
+		if (depth() < 1) return [];
+		const id = drilledShowId();
+		const show = shows().find((s) => s.id === id);
 		if (!show) return [];
 		return [...show.episodes].sort(
 			(a, b) => b.pubDate.getTime() - a.pubDate.getTime(),
 		);
 	});
+	const focusedEpIdx = () =>
+		episodes().length === 0 ? 0 : Math.min(focus(1), episodes().length - 1);
+	const focusedEpisode = () => episodes()[focusedEpIdx()];
 
-  const formatDate = (date: Date): string => {
-    return format(date, "MMM d, yyyy");
+	const curLen = () => (depth() === 0 ? shows().length : episodes().length);
+
+	const ensureFocus = () => {
+		if (shows().length > 0 && focus(0) >= shows().length)
+			nav.setDepthFocus(shows().length - 1, 0);
+		if (depth() >= 1 && episodes().length > 0 && focus(1) >= episodes().length)
+			nav.setDepthFocus(episodes().length - 1, 1);
 	};
+	onMount(ensureFocus);
 
-  const formatDuration = (seconds: number): string => {
-    const mins = Math.floor(seconds / 60);
+	onMount(() => {
+		nav.registerResolver(`${nav.activeTab()}:${DEPTH_CENTER_PANE}`, (i) => {
+			if (depth() === 0) return shows()[i]?.id;
+			return episodes()[i]?.id;
+		});
+	});
+
+	// ── helpers ─────────────────────────────────────────────────────────────────
+	const formatDate = (d: Date) => format(d, "MMM d, yyyy");
+	const formatDuration = (s: number) => {
+		const mins = Math.floor(s / 60);
 		const hrs = Math.floor(mins / 60);
-    if (hrs > 0) return `${hrs}h ${mins % 60}m`;
-    return `${mins}m`;
+		return hrs > 0 ? `${hrs}h ${mins % 60}m` : `${mins}m`;
 	};
-
-  /** Get download status label for an episode */
-  const downloadLabel = (episodeId: string): string => {
-    const status = downloadStore.getDownloadStatus(episodeId);
-    switch (status) {
+	const downloadLabel = (id: string) => {
+		switch (downloadStore.getDownloadStatus(id)) {
 			case DownloadStatus.QUEUED:
 				return "[Q]";
-      case DownloadStatus.DOWNLOADING: {
-        const pct = downloadStore.getDownloadProgress(episodeId);
-        return `[${pct}%]`;
-      }
+			case DownloadStatus.DOWNLOADING:
+				return `[${downloadStore.getDownloadProgress(id)}%]`;
 			case DownloadStatus.COMPLETED:
 				return "[DL]";
 			case DownloadStatus.FAILED:
@@ -122,203 +105,364 @@ export function MyShowsPage() {
 				return "";
 		}
 	};
-
-  const handleRefresh = async () => {
-    const show = selectedShow();
-    if (!show) return;
-    setIsRefreshing(true);
-    await feedStore.refreshFeed(show.id);
-    setIsRefreshing(false);
-  };
-
-  const handleUnsubscribe = () => {
-    const show = selectedShow();
-    if (!show) return;
-    feedStore.removeFeed(show.id);
-    setShowIndex((i) => Math.max(0, i - 1));
-    setEpisodeIndex(0);
-  };
-
-  /** Get download status color */
-  const downloadColor = (episodeId: string): string => {
-    const status = downloadStore.getDownloadStatus(episodeId);
-    switch (status) {
+	const downloadColor = (id: string) => {
+		switch (downloadStore.getDownloadStatus(id)) {
 			case DownloadStatus.QUEUED:
-        return theme.warning.toString();
+				return theme.warning;
 			case DownloadStatus.DOWNLOADING:
-        return theme.primary.toString();
+				return theme.primary;
 			case DownloadStatus.COMPLETED:
-        return theme.success.toString();
+				return theme.success;
 			case DownloadStatus.FAILED:
-        return theme.error.toString();
+				return theme.error;
 			default:
-        return mutedColor().toString();
+				return muted();
 		}
 	};
+	const playEpisode = (ep: Episode) => {
+		audio.play(ep).catch(() => {});
+		audioNav.setSource(AudioSource.MY_SHOWS, selectedShow()?.podcast.id);
+	};
+
+	// ── drill / open ───────────────────────────────────────────────────────────
+	function open() {
+		if (depth() === 0) {
+			const show = selectedShow();
+			if (!show) return;
+			nav.pushDepth({ kind: "episodes", ctx: show.id, focus: 0 } as DepthFrame);
+			nav.setActivePane(DEPTH_CENTER_PANE);
+			audioNav.setSource(AudioSource.MY_SHOWS, show.podcast.id);
+			return;
+		}
+		if (depth() >= 1) {
+			const ep = focusedEpisode();
+			if (ep) playEpisode(ep);
+		}
+	}
+
+	// ── nav.action ──────────────────────────────────────────────────────────────
+	const PAGE_ACTIONS: Partial<Record<KeybindActionName, () => void>> = {
+		"move-down": () => step(1),
+		"move-up": () => step(-1),
+		"jump-down": () => step(5),
+		"jump-up": () => step(-5),
+		"page-down": () => step(10),
+		"page-up": () => step(-10),
+		"goto-top": () => nav.gotoIndex(0, curLen()),
+		"goto-bottom": () => nav.gotoIndex(curLen() - 1, curLen()),
+		open: () => open(),
+		"toggle-select": () => {
+			if (depth() >= 1) {
+				const ep = focusedEpisode();
+				if (ep) nav.toggleSelected(ep.id);
+			}
+		},
+		refresh: () => {
+			const show = selectedShow();
+			if (show) feedStore.refreshFeed(show.id).catch(() => {});
+		},
+	};
+	function step(delta: number) {
+		nav.move(delta, curLen());
+	}
+	const onAction = (data: {
+		action: KeybindActionName;
+		pane: PaneId;
+		mode: NavMode;
+	}) => {
+		if (data.pane !== DEPTH_CENTER_PANE) return;
+		if (nav.activePane() !== DEPTH_CENTER_PANE) return;
+		ensureFocus();
+		PAGE_ACTIONS[data.action]?.();
+	};
+	onMount(() => {
+		on("nav.action", onAction);
+		onCleanup(() => off("nav.action", onAction));
+	});
+
+	// ── render ──────────────────────────────────────────────────────────────────
+	const isActive = nav.activePane() === DEPTH_CENTER_PANE;
+	const border = (active: boolean) => (active ? theme.accent : theme.border);
+	const focusBg = (i: number, lf: number, active: boolean) =>
+		i === lf && active ? theme.primary : i === lf ? theme.border : undefined;
+	const focusFg = (i: number, lf: number, active: boolean) =>
+		i === lf && active ? theme.surface : theme.text;
+	const headerBg = theme.background;
+	const showTitle = (f: Feed) => f.customName || f.podcast.title;
 
 	return (
-    <box flexDirection="row" flexGrow={1} width="100%">
-      <box flexDirection="column" height="100%">
-        <Show when={isRefreshing()}>
-          <text fg={theme.warning}>Refreshing...</text>
-        </Show>
-        <Show
-          when={shows().length > 0}
-          fallback={
-            <box padding={1}>
-              <text fg={theme.muted}>
-                No shows yet. Subscribe from Discover or Search.
-              </text>
-            </box>
-          }
-        >
-          <scrollbox
-            border
+		<box flexDirection="row" flexGrow={1} width="100%" height="100%">
+			{/* ── left: previous depth (empty at root) ──────────────────────────── */}
+			<box
+				flexDirection="column"
+				flexGrow={PANE_RATIO.parent}
+				flexShrink={1}
+				flexBasis={0}
 				height="100%"
-            borderColor={
-              nav.activeDepth() == MyShowsPaneType.SHOWS
-                ? theme.accent
-                : theme.border
-            }
-            focused={nav.activeDepth() == MyShowsPaneType.SHOWS}
+				style={{ width: depth() === 0 ? 0 : undefined }}
+				overflow="hidden"
+			>
+				<Show when={depth() >= 1}>
+					<box height={1} paddingLeft={1} backgroundColor={headerBg}>
+						<text fg={theme.textSecondary}>Shows ({shows().length})</text>
+					</box>
+					<scrollbox
+						height="100%"
+						border
+						borderColor={theme.border}
+						backgroundColor={theme.background}
 					>
 						<For each={shows()}>
-              {(feed, index) => (
+							{(feed, index) => {
+								const lf = nav.depthFocus(0);
+								return (
 									<box
 										flexDirection="row"
 										gap={1}
 										paddingLeft={1}
 										paddingRight={1}
-                  backgroundColor={
-                    index() === showIndex() ? theme.primary : undefined
-                  }
-                  onMouseDown={() => {
-                    setShowIndex(index());
-                    setEpisodeIndex(0);
-                    audioNav.setSource(
-                      AudioSource.MY_SHOWS,
-                      selectedShow()?.podcast.id,
+										backgroundColor={focusBg(index(), lf, false)}
+									>
+										<text fg={focusFg(index(), lf, false)}>
+											{index() === lf ? "❯" : " "}
+										</text>
+										<text fg={focusFg(index(), lf, false)}>
+											{showTitle(feed)}
+										</text>
+										<text fg={muted()}>({feed.episodes.length})</text>
+									</box>
 								);
 							}}
-                >
-                  <text
-                    fg={index() === showIndex() ? theme.surface : theme.text}
-                  >
-                    {index() === showIndex() ? ">" : " "}
-                  </text>
-                  <text
-                    fg={index() === showIndex() ? theme.surface : theme.text}
-                  >
-                    {feed.customName || feed.podcast.title}
-                  </text>
-                  <text fg={index() === showIndex() ? undefined : theme.text}>
-                    ({feed.episodes.length})
-                  </text>
-                </box>
-              )}
 						</For>
 					</scrollbox>
 				</Show>
 			</box>
-      <box flexDirection="column" height="100%">
+
+			{/* ── center: current depth ─────────────────────────────────────────── */}
+			<box
+				flexDirection="column"
+				flexGrow={PANE_RATIO.current}
+				flexShrink={1}
+				flexBasis={0}
+				height="100%"
+			>
+				<box height={1} paddingLeft={1} backgroundColor={headerBg}>
+					<text fg={theme.textSecondary}>
+						{depth() === 0
+							? `Shows (${shows().length})`
+							: `${selectedShow() ? showTitle(selectedShow()!) : "Episodes"} · ${episodes().length}`}
+					</text>
+				</box>
+				<scrollbox
+					height="100%"
+					focused={isActive}
+					border
+					borderColor={border(isActive)}
+					backgroundColor={theme.background}
+				>
+					{/* depth 0: shows */}
+					<Show when={depth() === 0}>
 						<Show
-            when={selectedShow()}
+							when={shows().length > 0}
 							fallback={
 								<box padding={1}>
-                <text fg={theme.muted}>Select a show</text>
+									<text fg={muted()}>
+										No shows. Subscribe from Discover/Search.
+									</text>
 								</box>
 							}
 						>
+							<For each={shows()}>
+								{(feed, index) => {
+									const lf = focusedShowIdx();
+									return (
+										<box
+											flexDirection="row"
+											gap={1}
+											paddingLeft={1}
+											paddingRight={1}
+											backgroundColor={focusBg(index(), lf, isActive)}
+											onMouseDown={() => {
+												nav.setActivePane(DEPTH_CENTER_PANE);
+												nav.setDepthFocus(index(), 0);
+											}}
+										>
+											<text fg={focusFg(index(), lf, isActive)}>
+												{index() === lf ? "❯" : " "}
+											</text>
+											<text fg={focusFg(index(), lf, isActive)}>
+												{showTitle(feed)}
+											</text>
+											<text fg={index() === lf ? theme.surface : muted()}>
+												({feed.episodes.length})
+											</text>
+										</box>
+									);
+								}}
+							</For>
+						</Show>
+					</Show>
+
+					{/* depth ≥1: episodes */}
+					<Show when={depth() >= 1}>
 						<Show
 							when={episodes().length > 0}
 							fallback={
 								<box padding={1}>
-                  <text fg={theme.muted}>No episodes. Press [r] to refresh.</text>
+									<text fg={muted()}>No episodes. :refresh</text>
 								</box>
 							}
-            >
-              <scrollbox
-                border
-                height="100%"
-                borderColor={
-                  nav.activeDepth() == MyShowsPaneType.EPISODES
-                    ? theme.accent
-                    : theme.border
-                }
-                focused={nav.activeDepth() == MyShowsPaneType.EPISODES}
 						>
 							<For each={episodes()}>
-                {(episode, index) => (
+								{(ep, index) => {
+									const lf = focusedEpIdx();
+									return (
 										<box
 											flexDirection="column"
 											gap={0}
 											paddingLeft={1}
 											paddingRight={1}
-                    backgroundColor={
-                      index() === episodeIndex() ? theme.primary : undefined
-                    }
-                    onMouseDown={() => setEpisodeIndex(index())}
+											backgroundColor={focusBg(index(), lf, isActive)}
+											onMouseDown={() => {
+												nav.setActivePane(DEPTH_CENTER_PANE);
+												nav.setDepthFocus(index(), 1);
+											}}
 										>
 											<box flexDirection="row" gap={1}>
-                      <text
-                        fg={
-                          index() === episodeIndex()
-                            ? theme.surface
-                            : theme.text
-                        }
-                      >
-                        {index() === episodeIndex() ? ">" : " "}
+												<text fg={focusFg(index(), lf, isActive)}>
+													{index() === lf ? "❯" : " "}
 												</text>
-                      <text
-                        fg={
-                          index() === episodeIndex()
-                            ? theme.surface
-                            : theme.text
-                        }
-                      >
-                        {episode.episodeNumber
-                          ? `#${episode.episodeNumber} `
-                          : ""}
-                        {episode.title}
+												<text fg={focusFg(index(), lf, isActive)}>
+													{ep.episodeNumber ? `#${ep.episodeNumber} ` : ""}
+													{ep.title}
 												</text>
 											</box>
 											<box flexDirection="row" gap={2} paddingLeft={2}>
-                      <text
-                        fg={index() === episodeIndex() ? undefined : theme.info}
-                      >
-                        {formatDate(episode.pubDate)}
+												<text fg={index() === lf ? theme.surface : theme.info}>
+													{formatDate(ep.pubDate)}
 												</text>
-                      <text fg={theme.muted}>
-                        {formatDuration(episode.duration)}
+												<text fg={index() === lf ? theme.surface : muted()}>
+													{formatDuration(ep.duration)}
 												</text>
-                      <Show when={downloadLabel(episode.id)}>
-                        <text fg={downloadColor(episode.id)}>
-                          {downloadLabel(episode.id)}
+												<Show when={nav.isSelected(ep.id)}>
+													<text fg={theme.warning}>●</text>
+												</Show>
+												<Show when={downloadLabel(ep.id)}>
+													<text fg={downloadColor(ep.id)}>
+														{downloadLabel(ep.id)}
 													</text>
 												</Show>
 											</box>
 										</box>
-                )}
+									);
+								}}
 							</For>
 							<Show when={feedStore.isLoadingMore()}>
 								<box paddingLeft={2} paddingTop={1}>
 									<LoadingIndicator />
 								</box>
 							</Show>
-              <Show
-                when={
-                  !feedStore.isLoadingMore() &&
-                  selectedShow() &&
-                  feedStore.hasMoreEpisodes(selectedShow()!.id)
-                }
-              >
-                <box paddingLeft={2} paddingTop={1}>
-                  <text fg={theme.muted}>Scroll down for more episodes</text>
-                </box>
+						</Show>
 					</Show>
 				</scrollbox>
+			</box>
+
+			{/* ── right: preview ────────────────────────────────────────────────── */}
+			<box
+				flexDirection="column"
+				flexGrow={PANE_RATIO.preview}
+				flexShrink={1}
+				flexBasis={0}
+				height="100%"
+			>
+				<box height={1} paddingLeft={1} backgroundColor={headerBg}>
+					<text fg={theme.textSecondary}>Preview</text>
+				</box>
+				<scrollbox
+					height="100%"
+					border
+					borderColor={theme.border}
+					backgroundColor={theme.background}
+				>
+					{/* depth 0 preview: hovered show */}
+					<Show when={depth() === 0}>
+						<Show
+							when={selectedShow()}
+							fallback={
+								<box padding={1}>
+									<text fg={muted()}>No show focused</text>
+								</box>
+							}
+						>
+							{(show) => (
+								<box flexDirection="column" gap={1} padding={1}>
+									<text fg={theme.textPrimary ?? theme.text}>
+										<strong>{showTitle(show())}</strong>
+									</text>
+									<Show when={show().podcast.author}>
+										<text fg={muted()}>by {show().podcast.author}</text>
+									</Show>
+									<text fg={theme.textSecondary}>
+										{show().episodes.length} episodes
+									</text>
+									<text fg={muted()}>
+										{show().podcast.description?.slice(0, 400) ??
+											"No description."}
+									</text>
+									<box height={1} />
+									<text fg={muted()}>enter/l: open · h: back</text>
+								</box>
+							)}
 						</Show>
 					</Show>
+
+					{/* depth ≥1 preview: hovered episode */}
+					<Show when={depth() >= 1}>
+						<Show
+							when={focusedEpisode()}
+							fallback={
+								<box padding={1}>
+									<text fg={muted()}>No episode focused</text>
+								</box>
+							}
+						>
+							{(ep) => (
+								<box flexDirection="column" gap={1} padding={1}>
+									<text fg={theme.textPrimary ?? theme.text}>
+										<strong>
+											{ep().episodeNumber ? `#${ep().episodeNumber} ` : ""}
+											{ep().title}
+										</strong>
+									</text>
+									<box flexDirection="row" gap={2}>
+										<text fg={theme.info}>{formatDate(ep().pubDate)}</text>
+										<text fg={muted()}>{formatDuration(ep().duration)}</text>
+										<Show when={downloadLabel(ep().id)}>
+											<text fg={downloadColor(ep().id)}>
+												{downloadLabel(ep().id)}
+											</text>
+										</Show>
+									</box>
+									<Show when={selectedShow()?.podcast.author}>
+										<text fg={muted()}>
+											by {selectedShow()!.podcast.author}
+										</text>
+									</Show>
+									<box height={1} />
+									<text fg={theme.textSecondary}>
+										{ep().description?.slice(0, 400) ??
+											"No description available."}
+										{(ep().description?.length ?? 0) > 400 ? "…" : ""}
+									</text>
+									<box height={1} />
+									<text fg={muted()}>
+										enter: play · space: select · h: back
+									</text>
+								</box>
+							)}
+						</Show>
+					</Show>
+				</scrollbox>
 			</box>
 		</box>
 	);

src/pages/Player/PlayerPage.tsx

@@ -1,48 +1,31 @@
+/**
+ * PlayerPage — single-pane audio now-playing view.
+ *
+ * Audio transport (play/pause, next/prev, seek) is handled globally by the
+ * Shell router (P/N/B/</>). This page renders a single rich pane showing the
+ * current episode, waveform, and playback controls. Panes/swipe do nothing
+ * (PaneCount=1).
+ */
+
+import { Show } from "solid-js";
 import { PlaybackControls } from "./PlaybackControls";
 import { RealtimeWaveform } from "./RealtimeWaveform";
 import { useAudio } from "@/hooks/useAudio";
 import { useAppStore } from "@/stores/app";
 import { useTheme } from "@/context/ThemeContext";
 import { useNavigation } from "@/context/NavigationContext";
-import { useKeybinds } from "@/context/KeybindContext";
-import { useKeyboard } from "@opentui/solid";
-import { onMount } from "solid-js";
 
-enum PlayerPaneType {
-  PLAYER = 1,
-}
 export const PlayerPaneCount = 1;
 
 export function PlayerPage() {
 	const audio = useAudio();
 	const { theme } = useTheme();
 	const nav = useNavigation();
+	const muted = () => theme.muted || theme.text;
 
-  const keybind = useKeybinds();
-
-  onMount(() => {
-    useKeyboard(
-      (keyEvent: any) => {
-        const isInverting = keybind.isInverting(keyEvent);
-
-        if (keybind.match("audio-toggle", keyEvent)) {
-          audio.togglePlayback();
-          return;
-        }
-
-        if (keybind.match("audio-seek-forward", keyEvent)) {
-          audio.seek(audio.currentEpisode()?.duration ?? 0);
-          return;
-        }
-
-        if (keybind.match("audio-seek-backward", keyEvent)) {
-          audio.seek(0);
-          return;
-        }
-      },
-      { release: false },
-    );
-  });
+	// Single pane — always active.
+	const isActive = () => true;
+	const border = () => theme.accent;
 
 	const progressPercent = () => {
 		const d = audio.duration();
@@ -57,30 +40,50 @@ export function PlayerPage() {
 	};
 
 	return (
-    <box flexDirection="column" gap={1} width="100%">
+		<box flexDirection="column" width="100%" height="100%">
+			{/* ── pane 0: now playing ─────────────────────────────────────────── */}
+			<box height={1} paddingLeft={1} backgroundColor={theme.background}>
+				<text fg={theme.textSecondary}>Player</text>
+			</box>
+			<scrollbox
+				height="100%"
+				focused={isActive()}
+				border
+				borderColor={border()}
+				backgroundColor={theme.background}
+			>
+				<box flexDirection="column" gap={1} padding={1}>
 					<box flexDirection="row" justifyContent="space-between">
 						<text fg={theme.text}>
 							<strong>Now Playing</strong>
 						</text>
-        <text fg={theme.muted}>
+						<text fg={muted()}>
 							{formatTime(audio.position())} / {formatTime(audio.duration())} (
 							{progressPercent()}%)
 						</text>
 					</box>
 
-      {audio.error() && <text fg={theme.error}>{audio.error()}</text>}
+					<Show when={audio.error()}>
+						{(err) => <text fg={theme.error}>{err()}</text>}
+					</Show>
 
-      <box
-        border
-        borderColor={nav.activeDepth() == PlayerPaneType.PLAYER ? theme.accent : theme.border}
-        padding={1}
-        flexDirection="column"
-        gap={1}
+					<Show
+						when={audio.currentEpisode()}
+						fallback={
+							<box padding={1}>
+								<text fg={muted()}>No episode loaded.</text>
+							</box>
+						}
 					>
+						{(ep) => (
+							<box flexDirection="column" gap={1}>
 								<text fg={theme.text}>
-          <strong>{audio.currentEpisode()?.title}</strong>
+									<strong>{ep().title}</strong>
+								</text>
+								<text fg={muted()}>
+									{ep().description?.slice(0, 500) ??
+										"No description available."}
 								</text>
-        <text fg={theme.muted}>{audio.currentEpisode()?.description}</text>
 
 								<RealtimeWaveform
 									visualizerConfig={(() => {
@@ -94,6 +97,8 @@ export function PlayerPage() {
 									})()}
 								/>
 							</box>
+						)}
+					</Show>
 
 					<PlaybackControls
 						isPlaying={audio.isPlaying()}
@@ -103,10 +108,15 @@ export function PlayerPage() {
 						hasAudioUrl={!!audio.currentEpisode()?.audioUrl}
 						onToggle={audio.togglePlayback}
 						onPrev={() => audio.seek(0)}
-        onNext={() => audio.seek(audio.currentEpisode()?.duration ?? 0)} //TODO: get next chronological(if feed) or episode(if MyShows)
+						onNext={() => audio.seek(audio.currentEpisode()?.duration ?? 0)}
 						onSpeedChange={(s: number) => audio.setSpeed(s)}
 						onVolumeChange={(v: number) => audio.setVolume(v)}
 					/>
+
+					<box height={1} />
+					<text fg={muted()}>{"P play/pause  N next  B prev  </ seek"}</text>
+				</box>
+			</scrollbox>
 		</box>
 	);
 }

src/pages/Search/SearchPage.tsx

@@ -1,165 +1,264 @@
 /**
- * SearchPage component - Main search interface for PodTUI
+ * SearchPage — yazi-style 3-pane view.
+ *
+ *   pane 0 (parent)  — query input with recent-search history (clickable)
+ *   pane 1 (current) — search results list (navigate j/k)
+ *   pane 2 (preview)  — detail of the focused search result
+ *
+ * The Shell resets activePane to CURRENT(1) on tab enter so the user lands on
+ * the results pane. Swipe left (h) to pane 0 to type a query — the Shell
+ * router skips keys while `nav.inputFocused()` is true so the `<input>`
+ * element captures typing natively. Press Enter (onSubmit) to search and
+ * auto-swipe to the results pane.
  */
 
-import { createSignal, createEffect, Show, onMount } from "solid-js";
-import { useKeyboard } from "@opentui/solid";
+import {
+	createSignal,
+	createMemo,
+	createEffect,
+	For,
+	Show,
+	onMount,
+	onCleanup,
+} from "solid-js";
 import { useSearchStore } from "@/stores/search";
-import { SearchResults } from "./SearchResults";
-import { SearchHistory } from "./SearchHistory";
-import type { SearchResult } from "@/types/source";
-import { MyShowsPage } from "../MyShows/MyShowsPage";
+import { format } from "date-fns";
 import { useTheme } from "@/context/ThemeContext";
-import { useNavigation } from "@/context/NavigationContext";
-import { KeybindProvider, useKeybinds } from "@/context/KeybindContext";
+import {
+	useNavigation,
+	NavMode,
+	PaneSlot,
+	type PaneId,
+} from "@/context/NavigationContext";
+import { on, off } from "@/utils/event-bus";
+import type { KeybindActionName } from "@/context/KeybindContext";
+import type { SearchResult } from "@/types/source";
+import { PANE_RATIO } from "@/utils/navigation";
 
-enum SearchPaneType {
-  INPUT = 1,
-  RESULTS = 2,
-  HISTORY = 3,
-}
 export const SearchPaneCount = 3;
 
-export function SearchPage() {
+function SearchPage() {
 	const searchStore = useSearchStore();
 	const [inputValue, setInputValue] = createSignal("");
-  const [resultIndex, setResultIndex] = createSignal(0);
-  const [historyIndex, setHistoryIndex] = createSignal(0);
 	const { theme } = useTheme();
+	const muted = () => theme.muted || theme.text;
 	const nav = useNavigation();
-  const keybind = useKeybinds();
 
-  onMount(() => {
-    useKeyboard(
-      (keyEvent: any) => {
-        const isDown = keybind.match("down", keyEvent);
-        const isUp = keybind.match("up", keyEvent);
-        const isCycle = keybind.match("cycle", keyEvent);
-        const isSelect = keybind.match("select", keyEvent);
-        const isInverting = keybind.isInverting(keyEvent);
+	const INPUT = PaneSlot.PARENT; // 0
+	const RESULTS = PaneSlot.CURRENT; // 1
+	const DETAIL = PaneSlot.PREVIEW; // 2
 
-        if (isSelect) {
-          const results = searchStore.results();
-          if (results.length > 0 && resultIndex() < results.length) {
-            setResultIndex(resultIndex() + 1);
-          }
-          return;
-        }
+	const results = () => searchStore.results();
 
-        // don't handle pane navigation here - unified in App.tsx
-        if (nav.activeDepth() !== SearchPaneType.RESULTS) return;
-
-        const results = searchStore.results();
-        if (results.length === 0) return;
-
-        if (isDown && !isInverting()) {
-          setResultIndex((i) => (i + 1) % results.length);
-        } else if (isUp && isInverting()) {
-          setResultIndex((i) => (i - 1 + results.length) % results.length);
-        } else if ((isCycle && !isInverting()) || (isDown && !isInverting())) {
-          setResultIndex((i) => (i + 1) % results.length);
-        } else if ((isCycle && isInverting()) || (isUp && isInverting())) {
-          setResultIndex((i) => (i - 1 + results.length) % results.length);
-        }
-      },
-      { release: false },
-    );
+	// The focused result tracks pane 1's focused row.
+	const focusedResult = createMemo(() => {
+		const list = results();
+		if (list.length === 0) return undefined;
+		const idx = Math.min(nav.focusedIndex(RESULTS), list.length - 1);
+		return list[idx];
 	});
 
-  const handleSearch = async () => {
+	// Register a resolver so visual-mode range selection grows by result id.
+	onMount(() => {
+		nav.registerResolver(
+			`${nav.activeTab()}:${RESULTS}`,
+			(i) => results()[i]?.podcast.id,
+		);
+		const unsub = on("nav.action", () => {
+			nav.registerResolver(
+				`${nav.activeTab()}:${RESULTS}`,
+				(i) => results()[i]?.podcast.id,
+			);
+		});
+		onCleanup(() => unsub());
+	});
+
+	// Keep results focus in range after searches complete.
+	const ensureFocus = () => {
+		const list = results();
+		if (list.length === 0) return;
+		const cur = nav.focusedIndex(RESULTS);
+		if (cur >= list.length) nav.setFocusedIndex(RESULTS, list.length - 1);
+	};
+	onMount(ensureFocus);
+
+	// ── input pane: set inputFocused so Shell router yields keys to <input> ─────
+	createEffect(() => {
+		const isInputPane = nav.activePane() === INPUT;
+		nav.setInputFocused(isInputPane);
+	});
+	onMount(() => {
+		onCleanup(() => nav.setInputFocused(false));
+	});
+
+	// ── helpers ─────────────────────────────────────────────────────────────────
+	const formatDate = (d: Date) => format(d, "MMM d, yyyy");
+
+	const handleSubmit = () => {
 		const query = inputValue().trim();
-    if (query) {
-      await searchStore.search(query);
-      if (searchStore.results().length > 0) {
-        //setFocusArea("results"); //TODO: move level
-        setResultIndex(0);
-      }
-    }
+		if (!query) return;
+		searchStore.search(query).catch(() => {});
+		nav.setFocusedIndex(RESULTS, 0);
+		nav.setActivePane(RESULTS);
 	};
 
-  const handleHistorySelect = async (query: string) => {
+	const handleHistorySelect = (query: string) => {
 		setInputValue(query);
-    await searchStore.search(query);
-    if (searchStore.results().length > 0) {
-      //setFocusArea("results"); //TODO: move level
-      setResultIndex(0);
-    }
+		searchStore.search(query).catch(() => {});
+		nav.setFocusedIndex(RESULTS, 0);
+		nav.setActivePane(RESULTS);
 	};
 
-  const handleResultSelect = (result: SearchResult) => {
-    //props.onSubscribe?.(result);
+	const handleSubscribe = (result: SearchResult) => {
 		searchStore.markSubscribed(result.podcast.id);
 	};
 
-  return (
-    <box flexDirection="column" height="100%" gap={1} width="100%">
-      {/* Search Header */}
-      <box flexDirection="column" gap={1}>
-        <text fg={theme.text}>
-          <strong>Search Podcasts</strong>
-        </text>
+	// ── nav.action handler ──────────────────────────────────────────────────────
+	const PAGE_ACTIONS: Partial<
+		Record<KeybindActionName, (pane: PaneId) => void>
+	> = {
+		"move-down": (p) => step(p, 1),
+		"move-up": (p) => step(p, -1),
+		"jump-down": (p) => step(p, 5),
+		"jump-up": (p) => step(p, -5),
+		"page-down": (p) => step(p, 10),
+		"page-up": (p) => step(p, -10),
+		"goto-top": (p) => nav.gotoIndex(0, len(p)),
+		"goto-bottom": (p) => nav.gotoIndex(len(p) - 1, len(p)),
+		open: (p) => {
+			if (p === RESULTS || p === DETAIL) {
+				const result = focusedResult();
+				if (result) handleSubscribe(result);
+			}
+		},
+		"toggle-select": (p) => {
+			if (p === RESULTS) {
+				const result = focusedResult();
+				if (result) nav.toggleSelected(result.podcast.id);
+			}
+		},
+		search: () => {
+			nav.setActivePane(INPUT);
+		},
+		refresh: () => {
+			if (inputValue().trim()) {
+				searchStore.search(inputValue().trim()).catch(() => {});
+			}
+		},
+	};
 
-        {/* Search Input */}
+	function len(pane: PaneId): number {
+		if (pane === RESULTS) return results().length;
+		return 0;
+	}
+	function step(pane: PaneId, delta: number) {
+		nav.move(delta, len(pane));
+	}
+
+	const onAction = (data: {
+		action: KeybindActionName;
+		pane: PaneId;
+		mode: NavMode;
+	}) => {
+		ensureFocus();
+		const handler = PAGE_ACTIONS[data.action];
+		if (handler) handler(data.pane);
+	};
+
+	onMount(() => {
+		on("nav.action", onAction);
+		onCleanup(() => off("nav.action", onAction));
+	});
+
+	// ── render ──────────────────────────────────────────────────────────────────
+	const isActive = (p: PaneId) => nav.activePane() === p;
+	const border = (p: PaneId) => (isActive(p) ? theme.accent : theme.border);
+
+	const focusBg = (i: number, pane: PaneId) =>
+		i === nav.focusedIndex(pane) && isActive(pane)
+			? theme.primary
+			: i === nav.focusedIndex(pane)
+				? theme.border
+				: undefined;
+	const focusFg = (i: number, pane: PaneId) =>
+		i === nav.focusedIndex(pane) && isActive(pane) ? theme.surface : theme.text;
+
+	return (
+		<box flexDirection="row" flexGrow={1} width="100%" height="100%">
+			{/* ── pane 0: query input ──────────────────────────────────────────────── */}
+			<box flexDirection="column" flexGrow={PANE_RATIO.parent} height="100%">
+				<box height={1} paddingLeft={1} backgroundColor={theme.background}>
+					<text fg={theme.textSecondary}>Search</text>
+				</box>
+				<scrollbox
+					height="100%"
+					focused={false}
+					border
+					borderColor={border(INPUT)}
+					backgroundColor={theme.background}
+				>
+					<box flexDirection="column" gap={1} padding={1}>
 						<box flexDirection="row" gap={1} alignItems="center">
-          <text fg="gray">Search:</text>
+							<text fg={muted()}>Query:</text>
 							<input
 								value={inputValue()}
-            onInput={(value) => {
-              setInputValue(value);
-            }}
-            placeholder="Enter podcast name, topic, or author..."
-            focused={nav.activeDepth() === SearchPaneType.INPUT}
-            width={50}
+								onInput={setInputValue}
+								onSubmit={() => handleSubmit()}
+								placeholder="Enter podcast name..."
+								focused={isActive(INPUT)}
+								width={28}
 							/>
-          <box
-            border
-            padding={0}
-            paddingLeft={1}
-            paddingRight={1}
-            onMouseDown={handleSearch}
-          >
-            <text fg={theme.primary}>[Enter] Search</text>
-          </box>
 						</box>
+						<text fg={muted()}>Enter to search · h/l: panes</text>
 
-        {/* Status */}
 						<Show when={searchStore.isSearching()}>
 							<text fg={theme.warning}>Searching...</text>
 						</Show>
 						<Show when={searchStore.error()}>
 							<text fg={theme.error}>{searchStore.error()}</text>
 						</Show>
-      </box>
 
-        {/* Main Content - Results or History */}
-        <box flexDirection="row" height="100%" gap={2}>
-          {/* Results Panel */}
+						<box height={1} />
+						<text fg={theme.textSecondary}>Recent</text>
+						<Show
+							when={searchStore.history().length > 0}
+							fallback={<text fg={muted()}>No recent searches</text>}
+						>
+							<For each={searchStore.history().slice(0, 12)}>
+								{(query) => (
 									<box
-            flexDirection="column"
-            flexGrow={1}
-            border
-            borderColor={
-              nav.activeDepth() === SearchPaneType.RESULTS
-                ? theme.accent
-                : theme.border
-            }
+										flexDirection="row"
+										paddingLeft={1}
+										onMouseDown={() => handleHistorySelect(query)}
 									>
-            <box padding={1}>
-              <text
-                fg={
-                  nav.activeDepth() === SearchPaneType.RESULTS
-                    ? theme.primary
-                    : theme.muted
-                }
-              >
-                Results ({searchStore.results().length})
+										<text fg={muted()}>
+											{">"} {query}
 										</text>
 									</box>
+								)}
+							</For>
+						</Show>
+					</box>
+				</scrollbox>
+			</box>
+
+			{/* ── pane 1: results ──────────────────────────────────────────────────── */}
+			<box flexDirection="column" flexGrow={PANE_RATIO.current} height="100%">
+				<box height={1} paddingLeft={1} backgroundColor={theme.background}>
+					<text fg={theme.textSecondary}>Results · {results().length}</text>
+				</box>
+				<scrollbox
+					height="100%"
+					focused={isActive(RESULTS)}
+					border
+					borderColor={border(RESULTS)}
+					backgroundColor={theme.background}
+				>
 					<Show
-              when={searchStore.results().length > 0}
+						when={results().length > 0}
 						fallback={
-                <box padding={2}>
-                  <text fg={theme.muted}>
+							<box padding={1}>
+								<text fg={muted()}>
 									{searchStore.query()
 										? "No results found"
 										: "Enter a search term to find podcasts"}
@@ -167,44 +266,130 @@ export function SearchPage() {
 							</box>
 						}
 					>
-              <SearchResults
-                results={searchStore.results()}
-                selectedIndex={resultIndex()}
-                focused={nav.activeDepth() === SearchPaneType.RESULTS}
-                onSelect={handleResultSelect}
-                onChange={setResultIndex}
-                isSearching={searchStore.isSearching()}
-                error={searchStore.error()}
-              />
-            </Show>
-          </box>
-
-          {/* History Sidebar */}
-          <box width={30} border borderColor={theme.border}>
-            <box padding={1} flexDirection="column">
-              <box paddingBottom={1}>
+						<For each={results()}>
+							{(result, index) => (
+								<box
+									flexDirection="column"
+									gap={0}
+									paddingLeft={1}
+									paddingRight={1}
+									backgroundColor={focusBg(index(), RESULTS)}
+									onMouseDown={() => {
+										nav.setActivePane(RESULTS);
+										nav.setFocusedIndex(RESULTS, index());
+									}}
+								>
+									<box flexDirection="row" gap={1}>
+										<text fg={focusFg(index(), RESULTS)}>
+											{index() === nav.focusedIndex(RESULTS) ? "❯" : " "}
+										</text>
+										<text fg={focusFg(index(), RESULTS)}>
+											{result.podcast.title}
+										</text>
+										<Show when={result.podcast.isSubscribed}>
 											<text
 												fg={
-                    nav.activeDepth() === SearchPaneType.HISTORY
-                      ? theme.primary
-                      : theme.muted
+													index() === nav.focusedIndex(RESULTS)
+														? theme.surface
+														: theme.success
 												}
 											>
-                  History
+												[+]
 											</text>
+										</Show>
 									</box>
-              <SearchHistory
-                history={searchStore.history()}
-                selectedIndex={historyIndex()}
-                focused={nav.activeDepth() === SearchPaneType.HISTORY}
-                onSelect={handleHistorySelect}
-                onRemove={searchStore.removeFromHistory}
-                onClear={searchStore.clearHistory}
-                onChange={setHistoryIndex}
-              />
+									<Show when={result.podcast.author}>
+										<text
+											fg={
+												index() === nav.focusedIndex(RESULTS)
+													? theme.surface
+													: muted()
+											}
+											paddingLeft={2}
+										>
+											by {result.podcast.author}
+										</text>
+									</Show>
 								</box>
+							)}
+						</For>
+					</Show>
+				</scrollbox>
 			</box>
+
+			{/* ── pane 2: detail ───────────────────────────────────────────────────── */}
+			<box flexDirection="column" flexGrow={PANE_RATIO.preview} height="100%">
+				<box height={1} paddingLeft={1} backgroundColor={theme.background}>
+					<text fg={theme.textSecondary}>Detail</text>
+				</box>
+				<scrollbox
+					height="100%"
+					focused={isActive(DETAIL)}
+					border
+					borderColor={border(DETAIL)}
+					backgroundColor={theme.background}
+				>
+					<Show
+						when={focusedResult()}
+						fallback={
+							<box padding={1}>
+								<text fg={muted()}>No result focused</text>
+							</box>
+						}
+					>
+						{(result) => (
+							<box flexDirection="column" gap={1} padding={1}>
+								<text fg={theme.text}>
+									<strong>{result().podcast.title}</strong>
+								</text>
+
+								<Show when={result().podcast.author}>
+									<text fg={muted()}>by {result().podcast.author}</text>
+								</Show>
+
+								<Show when={result().podcast.description}>
+									<text fg={theme.textSecondary}>
+										{result().podcast.description!.slice(0, 400) ??
+											"No description available."}
+										{(result().podcast.description?.length ?? 0) > 400
+											? "…"
+											: ""}
+									</text>
+								</Show>
+
+								<Show when={(result().podcast.categories ?? []).length > 0}>
+									<box flexDirection="row" gap={1}>
+										<For each={(result().podcast.categories ?? []).slice(0, 4)}>
+											{(cat) => <text fg={theme.warning}>[{cat}]</text>}
+										</For>
+									</box>
+								</Show>
+
+								<text fg={muted()}>Feed: {result().podcast.feedUrl}</text>
+								<text fg={muted()}>
+									Updated: {formatDate(result().podcast.lastUpdated)}
+								</text>
+
+								<Show when={result().sourceName}>
+									<text fg={muted()}>Source: {result().sourceName}</text>
+								</Show>
+
+								<box height={1} />
+								<Show when={!result().podcast.isSubscribed}>
+									<text fg={theme.primary}>[+] Subscribe (enter)</text>
+								</Show>
+								<Show when={result().podcast.isSubscribed}>
+									<text fg={theme.success}>Already subscribed</text>
+								</Show>
+								<box height={1} />
+								<text fg={muted()}>enter: subscribe h/l: panes</text>
+							</box>
+						)}
+					</Show>
+				</scrollbox>
 			</box>
 		</box>
 	);
 }
+
+export { SearchPage };

src/pages/Settings/PreferencesPanel.tsx

@@ -1,10 +1,12 @@
-import { createSignal } from "solid-js";
-import { useKeyboard } from "@opentui/solid";
-import { useAppStore } from "@/stores/app";
-import { useTheme } from "@/context/ThemeContext";
-import type { ThemeName } from "@/types/settings";
+/**
+ * PreferencesPanel — exposes theme/font/speed/explicit/auto-download as
+ * SettingItems for the yazi depth-stack. No own useKeyboard; all movement is
+ * driven by the Shell router via nav.action.
+ */
 
-type FocusField = "theme" | "font" | "speed" | "explicit" | "auto";
+import { useAppStore } from "@/stores/app";
+import type { ThemeName } from "@/types/settings";
+import type { SettingItem } from "./types";
 
 const THEME_LABELS: Array<{ value: ThemeName; label: string }> = [
 	{ value: "system", label: "System" },
@@ -15,145 +17,78 @@ const THEME_LABELS: Array<{ value: ThemeName; label: string }> = [
 	{ value: "custom", label: "Custom" },
 ];
 
-export function PreferencesPanel() {
-  const appStore = useAppStore();
-  const { theme } = useTheme();
-  const [focusField, setFocusField] = createSignal<FocusField>("theme");
+export function usePreferencesItems(): SettingItem[] {
+	const app = useAppStore();
 
-  const settings = () => appStore.state().settings;
-  const preferences = () => appStore.state().preferences;
+	const settings = () => app.state().settings;
+	const prefs = () => app.state().preferences;
 
-  const handleKey = (key: { name: string; shift?: boolean }) => {
-    if (key.name === "tab") {
-      const fields: FocusField[] = [
-        "theme",
-        "font",
-        "speed",
-        "explicit",
-        "auto",
-      ];
-      const idx = fields.indexOf(focusField());
-      const next = key.shift
-        ? (idx - 1 + fields.length) % fields.length
-        : (idx + 1) % fields.length;
-      setFocusField(fields[next]);
-      return;
-    }
-
-    if (key.name === "left" || key.name === "h") {
-      stepValue(-1);
-    }
-    if (key.name === "right" || key.name === "l") {
-      stepValue(1);
-    }
-    if (key.name === "space" || key.name === "return") {
-      toggleValue();
-    }
-  };
-
-  const stepValue = (delta: number) => {
-    const field = focusField();
-    if (field === "theme") {
+	return [
+		{
+			id: "theme",
+			label: "Theme",
+			kind: "select",
+			display: () =>
+				THEME_LABELS.find((t) => t.value === settings().theme)?.label ??
+				settings().theme,
+			help: () =>
+				`Color theme.\nType: select\nDefault: system\nCurrent: ${settings().theme}\nCycle with j/k; Enter to apply.`,
+			cycle: (dir) => {
 				const idx = THEME_LABELS.findIndex((t) => t.value === settings().theme);
-      const next = (idx + delta + THEME_LABELS.length) % THEME_LABELS.length;
-      appStore.setTheme(THEME_LABELS[next].value);
-      return;
-    }
-    if (field === "font") {
-      const next = Math.min(20, Math.max(10, settings().fontSize + delta));
-      appStore.updateSettings({ fontSize: next });
-      return;
-    }
-    if (field === "speed") {
+				const next = (idx + dir + THEME_LABELS.length) % THEME_LABELS.length;
+				app.setTheme(THEME_LABELS[next].value);
+			},
+		},
+		{
+			id: "fontSize",
+			label: "Font Size",
+			kind: "number",
+			display: () => `${settings().fontSize}px`,
+			help: () =>
+				`Terminal font size in pixels.\nType: number (10–20)\nDefault: 14\nCurrent: ${settings().fontSize}\nj/k to −/+1px.`,
+			cycle: (dir) => {
+				const next = Math.min(20, Math.max(10, settings().fontSize + dir));
+				app.updateSettings({ fontSize: next });
+			},
+		},
+		{
+			id: "playbackSpeed",
+			label: "Playback Speed",
+			kind: "number",
+			display: () => `${settings().playbackSpeed}x`,
+			help: () =>
+				`Default audio playback speed.\nType: number (0.5–2.0)\nDefault: 1.0\nCurrent: ${settings().playbackSpeed}\nj/k to −/+0.1.`,
+			cycle: (dir) => {
 				const next = Math.min(
 					2,
-        Math.max(0.5, settings().playbackSpeed + delta * 0.1),
-      );
-      appStore.updateSettings({ playbackSpeed: Number(next.toFixed(1)) });
-    }
-  };
-
-  const toggleValue = () => {
-    const field = focusField();
-    if (field === "explicit") {
-      appStore.updatePreferences({ showExplicit: !preferences().showExplicit });
-    }
-    if (field === "auto") {
-      appStore.updatePreferences({ autoDownload: !preferences().autoDownload });
-    }
-  };
-
-  useKeyboard(handleKey);
-
-  return (
-    <box flexDirection="column" gap={1}>
-      <text fg={theme.textMuted}>Preferences</text>
-
-      <box flexDirection="column" gap={1}>
-        <box flexDirection="row" gap={1} alignItems="center">
-          <text fg={focusField() === "theme" ? theme.primary : theme.textMuted}>
-            Theme:
-          </text>
-          <box border borderColor={theme.border} padding={0}>
-            <text fg={theme.text}>
-              {THEME_LABELS.find((t) => t.value === settings().theme)?.label}
-            </text>
-          </box>
-          <text fg={theme.textMuted}>[Left/Right]</text>
-        </box>
-
-        <box flexDirection="row" gap={1} alignItems="center">
-          <text fg={focusField() === "font" ? theme.primary : theme.textMuted}>
-            Font Size:
-          </text>
-          <box border borderColor={theme.border} padding={0}>
-            <text fg={theme.text}>{settings().fontSize}px</text>
-          </box>
-          <text fg={theme.textMuted}>[Left/Right]</text>
-        </box>
-
-        <box flexDirection="row" gap={1} alignItems="center">
-          <text fg={focusField() === "speed" ? theme.primary : theme.textMuted}>
-            Playback:
-          </text>
-          <box border borderColor={theme.border} padding={0}>
-            <text fg={theme.text}>{settings().playbackSpeed}x</text>
-          </box>
-          <text fg={theme.textMuted}>[Left/Right]</text>
-        </box>
-
-        <box flexDirection="row" gap={1} alignItems="center">
-          <text
-            fg={focusField() === "explicit" ? theme.primary : theme.textMuted}
-          >
-            Show Explicit:
-          </text>
-          <box border borderColor={theme.border} padding={0}>
-            <text
-              fg={preferences().showExplicit ? theme.success : theme.textMuted}
-            >
-              {preferences().showExplicit ? "On" : "Off"}
-            </text>
-          </box>
-          <text fg={theme.textMuted}>[Space]</text>
-        </box>
-
-        <box flexDirection="row" gap={1} alignItems="center">
-          <text fg={focusField() === "auto" ? theme.primary : theme.textMuted}>
-            Auto Download:
-          </text>
-          <box border borderColor={theme.border} padding={0}>
-            <text
-              fg={preferences().autoDownload ? theme.success : theme.textMuted}
-            >
-              {preferences().autoDownload ? "On" : "Off"}
-            </text>
-          </box>
-          <text fg={theme.textMuted}>[Space]</text>
-        </box>
-      </box>
-
-      <text fg={theme.textMuted}>Tab to move focus, Left/Right to adjust</text>
-    </box>
+					Math.max(0.5, settings().playbackSpeed + dir * 0.1),
 				);
+				app.updateSettings({ playbackSpeed: Number(next.toFixed(1)) });
+			},
+		},
+		{
+			id: "showExplicit",
+			label: "Show Explicit",
+			kind: "toggle",
+			display: () => (prefs().showExplicit ? "On" : "Off"),
+			help: () =>
+				`Whether to list explicit episodes.\nType: toggle\nDefault: true\nCurrent: ${prefs().showExplicit}\nSpace/Enter to toggle.`,
+			toggle: () =>
+				app.updatePreferences({
+					showExplicit: !prefs().showExplicit,
+				}),
+		},
+		{
+			id: "autoDownload",
+			label: "Auto Download",
+			kind: "toggle",
+			display: () => (prefs().autoDownload ? "On" : "Off"),
+			help: () =>
+				`Download new episodes automatically.\nType: toggle\nDefault: false\nCurrent: ${prefs().autoDownload}\nSpace/Enter to toggle.`,
+			toggle: () =>
+				app.updatePreferences({
+					autoDownload: !prefs().autoDownload,
+				}),
+		},
+	];
 }

src/pages/Settings/SettingsPage.tsx

@@ -1,119 +1,519 @@
-import { createSignal, For, onMount } from "solid-js";
-import { useKeyboard } from "@opentui/solid";
-import { SourceManager } from "./SourceManager";
+/**
+ * SettingsPage — yazi depth-stack settings.
+ *
+ *   depth 0 — sections list (Sync / Sources / Preferences / Visualizer / ...)
+ *   depth 1 — the focused section's items as a navigable list
+ *   depth 2 — per-item editor (for editor-kind items) or value adjuster
+ *
+ * Columns render as yazi's prev | current | preview:
+ *   left  = previous depth's list (empty at depth 0)
+ *   right = preview/help text for the hovered item in center
+ *
+ * All movement comes from the Shell router over `nav.action` (j/k move,
+ * Enter/l drill, h back). Panels no longer register their own useKeyboard —
+ * that was the root cause of the old right-pane key conflicts.
+ */
+
+import { For, Show, onMount, onCleanup, createMemo } from "solid-js";
 import { useTheme } from "@/context/ThemeContext";
-import { PreferencesPanel } from "./PreferencesPanel";
-import { SyncPanel } from "./SyncPanel";
-import { VisualizerSettings } from "./VisualizerSettings";
-import { useNavigation } from "@/context/NavigationContext";
-import { KeybindProvider, useKeybinds } from "@/context/KeybindContext";
+import {
+	useNavigation,
+	NavMode,
+	DEPTH_CENTER_PANE,
+	type PaneId,
+} from "@/context/NavigationContext";
+import { on, off } from "@/utils/event-bus";
+import type { KeybindActionName } from "@/context/KeybindContext";
+import { PANE_RATIO } from "@/utils/navigation";
+import type { SettingItem, SettingsSectionDef } from "./types";
+import { usePreferencesItems } from "./PreferencesPanel";
+import { useVisualizerItems } from "./VisualizerSettings";
+import { useSyncItems, closeSyncEditor } from "./SyncPanel";
+import { useSourceItems } from "./SourceManager";
 
-enum SettingsPaneType {
-  SYNC = 1,
-  SOURCES = 2,
-  PREFERENCES = 3,
-  VISUALIZER = 4,
-  ACCOUNT = 5,
-}
-export const SettingsPaneCount = 5;
+export const SettingsPaneCount = 1;
 
-const SECTIONS: Array<{ id: SettingsPaneType; label: string }> = [
-  { id: SettingsPaneType.SYNC, label: "Sync" },
-  { id: SettingsPaneType.SOURCES, label: "Sources" },
-  { id: SettingsPaneType.PREFERENCES, label: "Preferences" },
-  { id: SettingsPaneType.VISUALIZER, label: "Visualizer" },
-  { id: SettingsPaneType.ACCOUNT, label: "Account" },
+const SECTIONS: SettingsSectionDef[] = [
+	{
+		id: 0,
+		label: "Sync",
+		description: "Import/export subscriptions and sync status.",
+	},
+	{
+		id: 1,
+		label: "Sources",
+		description: "Podcast search/RSS sources — add, enable, remove.",
+	},
+	{
+		id: 2,
+		label: "Preferences",
+		description: "Theme, font, playback speed, explicit/auto-download.",
+	},
+	{
+		id: 3,
+		label: "Visualizer",
+		description: "Audio visualizer: bars, sensitivity, cutoffs.",
+	},
+	{
+		id: 4,
+		label: "Account",
+		description: "Account login & OAuth (not yet implemented).",
+	},
 ];
 
+/** Resolve the items for a section id at render time. Section 4 (Account) has
+ *  no items yet. */
+function sectionItems(sectionId: number): SettingItem[] {
+	switch (sectionId) {
+		case 0:
+			return useSyncItems();
+		case 1:
+			return useSourceItems();
+		case 2:
+			return usePreferencesItems();
+		case 3:
+			return useVisualizerItems();
+		default:
+			return [];
+	}
+}
+
 export function SettingsPage() {
 	const { theme } = useTheme();
 	const nav = useNavigation();
-  const keybind = useKeybinds();
 
-  // Helper function to check if a depth is active
-  const isActive = (depth: SettingsPaneType): boolean => {
-    return nav.activeDepth() === depth;
+	const stack = nav.depthStack;
+	const depth = nav.currentDepth;
+
+	// ── depth 0: sections ────────────────────────────────────────────────────
+	const focusedSectionIdx = () =>
+		Math.min(nav.depthFocus(0), SECTIONS.length - 1);
+	const focusedSection = () => SECTIONS[focusedSectionIdx()] ?? SECTIONS[0];
+
+	// ── depth ≥1: section items (resolved from the section id stored in the
+	//    depth-0 frame's ctx). The depth-1 frame kind is "settings:<id>". ────
+	const sectionForDepth1 = (): SettingsSectionDef | undefined => {
+		const f = stack()[1];
+		if (!f) return undefined;
+		const id = Number(f.ctx ?? "0");
+		return SECTIONS[id];
+	};
+	const items = createMemo<SettingItem[]>(() => {
+		const sec = sectionForDepth1();
+		if (!sec) return [];
+		return sectionItems(sec.id);
+	});
+	const focusedItemIdx = () =>
+		items().length === 0 ? 0 : Math.min(nav.depthFocus(1), items().length - 1);
+	const focusedItem = (): SettingItem | undefined => items()[focusedItemIdx()];
+
+	// ── depth 2: the editor item (resolved from depth-1 frame ctx + item id) ─
+	const editorItem = (): SettingItem | undefined => {
+		const f1 = stack()[1];
+		const f2 = stack()[2];
+		if (!f1 || !f2) return undefined;
+		const secId = Number(f1.ctx ?? "0");
+		const list = sectionItems(secId);
+		return list.find((it) => it.id === f2.ctx);
 	};
 
-  // Helper function to get the current depth as a number
-  const currentDepth = () => nav.activeDepth() as number;
+	// ── drill / open dispatch ───────────────────────────────────────────────
+	function open() {
+		const d = depth();
+		if (d === 0) {
+			// drill into the focused section's items
+			const id = focusedSection().id;
+			nav.pushDepth({
+				kind: `settings:${id}`,
+				ctx: String(id),
+				focus: 0,
+			});
+			nav.setActivePane(DEPTH_CENTER_PANE);
+			return;
+		}
+		if (d === 1) {
+			const it = focusedItem();
+			if (!it) return;
+			switch (it.kind) {
+				case "toggle":
+					it.toggle?.();
+					return;
+				case "action":
+					it.run?.();
+					return;
+				case "info":
+					return;
+				case "editor":
+				case "number":
+				case "select":
+					nav.pushDepth({
+						kind: `settings:item:${it.id}`,
+						ctx: it.id,
+						focus: 0,
+					});
+					nav.setActivePane(DEPTH_CENTER_PANE);
+					return;
+			}
+		}
+		if (d === 2) {
+			// in an editor: Enter adjusts/cycles a number/select forward, toggles
+			const it = editorItem();
+			if (!it) return;
+			if (it.kind === "number" || it.kind === "select") it.cycle?.(1);
+			else if (it.kind === "toggle") it.toggle?.();
+			return;
+		}
+	}
+
+	// ── movement (j/k etc.) routed by the Shell over nav.action ───────────────
+	const PAGE_ACTIONS: Partial<Record<KeybindActionName, () => void>> = {
+		"move-down": () => step(1),
+		"move-up": () => step(-1),
+		"jump-down": () => step(5),
+		"jump-up": () => step(-5),
+		"page-down": () => step(10),
+		"page-up": () => step(-10),
+		"goto-top": () => nav.gotoIndex(0, len()),
+		"goto-bottom": () => nav.gotoIndex(len() - 1, len()),
+		open: () => open(),
+	};
+
+	function len(): number {
+		const d = depth();
+		if (d === 0) return SECTIONS.length;
+		if (d === 1) return items().length;
+		return 0; // depth 2 editor: no list length; j/k cycles instead
+	}
+	function step(delta: number) {
+		const d = depth();
+		if (d === 2) {
+			// editor: j/k nudges the value
+			const it = editorItem();
+			if (it?.kind === "number" || it?.kind === "select")
+				it.cycle?.(delta as -1 | 1);
+			return;
+		}
+		nav.move(delta, len());
+	}
+
+	const onAction = (data: {
+		action: KeybindActionName;
+		pane: PaneId;
+		mode: NavMode;
+	}) => {
+		// ignore actions meant for non-center panes
+		if (data.pane !== DEPTH_CENTER_PANE) return;
+		if (nav.activePane() !== DEPTH_CENTER_PANE) return;
+		const handler = PAGE_ACTIONS[data.action];
+		if (handler) handler();
+	};
 
 	onMount(() => {
-    useKeyboard(
-      (keyEvent: any) => {
-        const isDown = keybind.match("down", keyEvent);
-        const isUp = keybind.match("up", keyEvent);
-        const isCycle = keybind.match("cycle", keyEvent);
-        const isSelect = keybind.match("select", keyEvent);
-        const isInverting = keybind.isInverting(keyEvent);
+		on("nav.action", onAction);
+		// keep a resolver so visual-mode range selection grows by section/item id
+		nav.registerResolver(`${nav.activeTab()}:${DEPTH_CENTER_PANE}`, (i) => {
+			const d = depth();
+			if (d === 0) return SECTIONS[i]?.id.toString();
+			if (d === 1) return items()[i]?.id;
+			return undefined;
+		});
+	});
+	onCleanup(() => off("nav.action", onAction));
 
-        // don't handle pane navigation here - unified in App.tsx
-        if (nav.activeDepth() < 1 || nav.activeDepth() > SettingsPaneCount) return;
+	// when leaving a sync editor (h to pop), close any open dialog overlay
+	onCleanup(() => closeSyncEditor());
 
-        if (isDown && !isInverting()) {
-          nav.setActiveDepth((nav.activeDepth() % SettingsPaneCount) + 1);
-        } else if (isUp && isInverting()) {
-          nav.setActiveDepth((nav.activeDepth() - 2 + SettingsPaneCount) % SettingsPaneCount + 1);
-        } else if ((isCycle && !isInverting()) || (isDown && !isInverting())) {
-          nav.setActiveDepth((nav.activeDepth() % SettingsPaneCount) + 1);
-        } else if ((isCycle && isInverting()) || (isUp && isInverting())) {
-          nav.setActiveDepth((nav.activeDepth() - 2 + SettingsPaneCount) % SettingsPaneCount + 1);
+	// ── render helpers ───────────────────────────────────────────────────────
+	const isActive = nav.activePane() === DEPTH_CENTER_PANE;
+	const border = (active: boolean) => (active ? theme.accent : theme.border);
+	const headerBg = theme.background;
+
+	// preview text for the right column
+	const previewText = createMemo<string>(() => {
+		const d = depth();
+		if (d === 0) {
+			return `${focusedSection().label}\n\n${focusedSection().description}\n\nDrill in (Enter/l) to open this section's settings.`;
 		}
-      },
-      { release: false },
-    );
+		if (d === 1) {
+			const it = focusedItem();
+			return it?.help() ?? "No item.";
+		}
+		// editor: same help, plus note
+		const it = editorItem();
+		return it
+			? `${it.help()}\n\n— Editor —\nj/k adjust · h back`
+			: "No editor.";
 	});
 
-  return (
-    <box flexDirection="column" gap={1} height="100%" width="100%">
-      <box flexDirection="row" gap={1}>
-        <For each={SECTIONS}>
-          {(section, index) => (
+	// ── column content builders ──────────────────────────────────────────────
+	// left = previous depth (read-only list), or empty at depth 0
+	const LeftCol = () => (
 		<box
-              border
-              borderColor={theme.border}
-              padding={0}
-              backgroundColor={
-                currentDepth() === section.id ? theme.primary : undefined
-              }
-              onMouseDown={() => nav.setActiveDepth(section.id)}
+			flexDirection="column"
+			flexGrow={PANE_RATIO.parent}
+			flexShrink={1}
+			flexBasis={0}
+			height="100%"
+			style={{ width: depth() === 0 ? 0 : undefined }}
+			overflow="hidden"
 		>
-              <text
-                fg={
-                  currentDepth() === section.id ? theme.text : theme.textMuted
-                }
-              >
-                [{index() + 1}] {section.label}
+			<box height={1} paddingLeft={1} backgroundColor={headerBg}>
+				<text fg={theme.textSecondary}>
+					<Show when={depth() >= 1} fallback=" ">
+						{depth() === 1 ? "Sections" : (sectionForDepth1()?.label ?? "")}
+					</Show>
 				</text>
 			</box>
+			<Show when={depth() === 1}>
+				<scrollbox
+					height="100%"
+					border
+					borderColor={theme.border}
+					backgroundColor={theme.background}
+				>
+					<For each={SECTIONS}>
+						{(section, index) => (
+							<Row
+								label={`${section.id + 1}. ${section.label}`}
+								focused={index() === focusedSectionIdx()}
+								active={false}
+							/>
 						)}
 					</For>
-      </box>
-
-      <box
+				</scrollbox>
+			</Show>
+			<Show when={depth() === 2}>
+				<scrollbox
+					height="100%"
 					border
-        borderColor={isActive(SettingsPaneType.SYNC) || isActive(SettingsPaneType.SOURCES) || isActive(SettingsPaneType.PREFERENCES) || isActive(SettingsPaneType.VISUALIZER) || isActive(SettingsPaneType.ACCOUNT) ? theme.accent : theme.border}
-        flexGrow={1}
-        padding={1}
-        flexDirection="column"
-        gap={1}
+					borderColor={theme.border}
+					backgroundColor={theme.background}
 				>
-        {isActive(SettingsPaneType.SYNC) && <SyncPanel />}
-        {isActive(SettingsPaneType.SOURCES) && (
-          <SourceManager focused />
+					<For each={items()}>
+						{(it, index) => (
+							<Row
+								label={`${it.label}  ${it.display()}`}
+								focused={index() === focusedItemIdx()}
+								active={false}
+							/>
 						)}
-        {isActive(SettingsPaneType.PREFERENCES) && (
-          <PreferencesPanel />
-        )}
-        {isActive(SettingsPaneType.VISUALIZER) && (
-          <VisualizerSettings />
-        )}
-        {isActive(SettingsPaneType.ACCOUNT) && (
-          <box flexDirection="column" gap={1}>
-            <text fg={theme.textMuted}>Account</text>
+					</For>
+				</scrollbox>
+			</Show>
 		</box>
-        )}
+	);
+
+	// center = current depth
+	const CenterCol = () => (
+		<box
+			flexDirection="column"
+			flexGrow={PANE_RATIO.current}
+			flexShrink={1}
+			flexBasis={0}
+			height="100%"
+		>
+			<box height={1} paddingLeft={1} backgroundColor={headerBg}>
+				<text fg={theme.textSecondary}>
+					<Show
+						when={depth() === 0}
+						fallback={
+							<Show
+								when={depth() === 1}
+								fallback={editorItem()?.label ?? "Editor"}
+							>
+								{sectionForDepth1()?.label ?? "Items"}
+							</Show>
+						}
+					>
+						Settings
+					</Show>
+				</text>
 			</box>
+			<scrollbox
+				height="100%"
+				focused={isActive}
+				border
+				borderColor={border(isActive)}
+				backgroundColor={theme.background}
+			>
+				<Show when={depth() === 0}>
+					<For each={SECTIONS}>
+						{(section, index) => (
+							<Row
+								label={`${section.id + 1}. ${section.label}`}
+								focused={index() === focusedSectionIdx()}
+								active={isActive}
+								onMouseDown={() => {
+									nav.setActivePane(DEPTH_CENTER_PANE);
+									nav.setDepthFocus(index(), 0);
+								}}
+							/>
+						)}
+					</For>
+				</Show>
+				<Show when={depth() === 1}>
+					<For each={items()}>
+						{(it, index) => (
+							<Row
+								label={`${it.label}`}
+								value={it.display()}
+								focused={index() === focusedItemIdx()}
+								active={isActive}
+								hint={hintFor(it)}
+								onMouseDown={() => {
+									nav.setActivePane(DEPTH_CENTER_PANE);
+									nav.setDepthFocus(index(), 1);
+								}}
+							/>
+						)}
+					</For>
+					<Show when={items().length === 0}>
+						<box padding={1}>
+							<text fg={theme.muted ?? theme.textMuted}>(No items.)</text>
+						</box>
+					</Show>
+				</Show>
+				<Show when={depth() === 2}>
+					<Show
+						when={editorItem()?.renderEditor}
+						fallback={<GenericEditor item={editorItem()!} />}
+					>
+						{editorItem()!.renderEditor!()}
+					</Show>
+				</Show>
+			</scrollbox>
+		</box>
+	);
+
+	// right = preview / help
+	const RightCol = () => (
+		<box
+			flexDirection="column"
+			flexGrow={PANE_RATIO.preview}
+			flexShrink={1}
+			flexBasis={0}
+			height="100%"
+		>
+			<box height={1} paddingLeft={1} backgroundColor={headerBg}>
+				<text fg={theme.textSecondary}>Preview</text>
+			</box>
+			<scrollbox
+				height="100%"
+				border
+				borderColor={theme.border}
+				backgroundColor={theme.background}
+			>
+				<box padding={1}>
+					<MultiLine text={previewText()} />
+				</box>
+			</scrollbox>
+		</box>
+	);
+
+	return (
+		<box flexDirection="row" flexGrow={1} width="100%" height="100%">
+			{LeftCol()}
+			{CenterCol()}
+			{RightCol()}
 		</box>
 	);
 }
+
+/** Per-kind hint glyph shown at the right of an item row. */
+function hintFor(it: SettingItem): string {
+	switch (it.kind) {
+		case "toggle":
+			return "⏻";
+		case "number":
+		case "select":
+			return "±";
+		case "action":
+			return "↵";
+		case "editor":
+			return "→";
+		case "info":
+			return "·";
+	}
+}
+
+function Row(props: {
+	label: string;
+	value?: string;
+	focused: boolean;
+	active: boolean;
+	hint?: string;
+	onMouseDown?: () => void;
+}) {
+	const { theme } = useTheme();
+	const bg = () =>
+		props.focused && props.active
+			? theme.primary
+			: props.focused
+				? theme.border
+				: undefined;
+	const fg = () => (props.focused && props.active ? theme.surface : theme.text);
+	return (
+		<box
+			flexDirection="row"
+			gap={1}
+			paddingLeft={1}
+			paddingRight={1}
+			backgroundColor={bg()}
+			onMouseDown={props.onMouseDown}
+		>
+			<text fg={fg()}>{props.focused ? "❯" : " "}</text>
+			<text fg={fg()}>{props.label}</text>
+			<Show when={props.value}>
+				<box flexGrow={1} />
+				<text fg={props.focused ? fg() : theme.textMuted}>{props.value}</text>
+			</Show>
+			<Show when={props.hint}>
+				<text fg={theme.textMuted}>{props.hint}</text>
+			</Show>
+		</box>
+	);
+}
+
+/** Center editor for number/select/toggle items without a bespoke renderer. */
+function GenericEditor(props: { item: SettingItem }) {
+	const { theme } = useTheme();
+	const it = props.item;
+	return (
+		<box flexDirection="column" padding={1} gap={1}>
+			<text fg={theme.text}>
+				<strong>{it.label}</strong>
+			</text>
+			<box flexDirection="row" gap={1} alignItems="center">
+				<text fg={theme.textMuted}>Value:</text>
+				<box border borderColor={theme.border} padding={0}>
+					<text fg={theme.text}>{it.display()}</text>
+				</box>
+			</box>
+			<Show when={it.kind === "number" || it.kind === "select"}>
+				<text fg={theme.muted ?? theme.textMuted}>
+					j/k to adjust · Enter to nudge forward · h to go back
+				</text>
+			</Show>
+			<Show when={it.kind === "toggle"}>
+				<text fg={theme.muted ?? theme.textMuted}>
+					Enter/Space to toggle · h to go back
+				</text>
+			</Show>
+		</box>
+	);
+}
+
+/** Renders a string with `\n` newlines as stacked <text> lines. */
+function MultiLine(props: { text: string }) {
+	const lines = () => props.text.split("\n");
+	const { theme } = useTheme();
+	return (
+		<For each={lines()}>
+			{(line, i) => (
+				<text fg={i() === 0 ? theme.accent : theme.textMuted}>
+					{line || " "}
+				</text>
+			)}
+		</For>
+	);
+}

src/pages/Settings/SourceManager.tsx

@@ -1,317 +1,141 @@
 /**
- * Source management component for PodTUI
- * Add, remove, and configure podcast sources
+ * SourceManager — exposes podcast sources as SettingItems for the depth-stack.
+ *
+ *   • "Add Source" — an editor item; drilling in shows a name/URL add form.
+ *   • Each source — a toggle item (Space toggles enabled) whose display shows
+ *     the source type and on/off state.
+ *
+ * Advanced per-API-source options (country/language/explicit) are flattened to
+ * simple toggles/cycles reachable by drilling into the source's editor.
+ * Movement flows through nav.action — no own useKeyboard (avoids the old
+ * right-pane key conflicts).
  */
 
-import { createSignal, For } from "solid-js";
+import { createSignal, For, Show } from "solid-js";
 import { useFeedStore } from "@/stores/feed";
 import { useTheme } from "@/context/ThemeContext";
 import { SourceType } from "@/types/source";
 import type { PodcastSource } from "@/types/source";
-import { SelectableBox, SelectableText } from "@/components/Selectable";
+import type { SettingItem } from "./types";
 
-interface SourceManagerProps {
-  focused?: boolean;
-  onClose?: () => void;
-}
-
-type FocusArea = "list" | "add" | "url" | "country" | "explicit" | "language";
-
-export function SourceManager(props: SourceManagerProps) {
+export function useSourceItems(): SettingItem[] {
 	const feedStore = useFeedStore();
-  const { theme } = useTheme();
-  const [selectedIndex, setSelectedIndex] = createSignal(0);
-  const [focusArea, setFocusArea] = createSignal<FocusArea>("list");
-  const [newSourceUrl, setNewSourceUrl] = createSignal("");
-  const [newSourceName, setNewSourceName] = createSignal("");
-  const [error, setError] = createSignal<string | null>(null);
 
-  const sources = () => feedStore.sources();
+	const typeBadge = (s: PodcastSource) =>
+		s.type === SourceType.API
+			? "[API]"
+			: s.type === SourceType.RSS
+				? "[RSS]"
+				: "[?]";
 
-  const handleKeyPress = (key: { name: string; shift?: boolean }) => {
-    if (key.name === "escape") {
-      if (focusArea() !== "list") {
-        setFocusArea("list");
-        setError(null);
-      } else if (props.onClose) {
-        props.onClose();
-      }
-      return;
-    }
-
-    if (key.name === "tab") {
-      const areas: FocusArea[] = [
-        "list",
-        "country",
-        "language",
-        "explicit",
-        "add",
-        "url",
+	const items: SettingItem[] = [
+		{
+			id: "add",
+			label: "Add Source",
+			kind: "editor",
+			display: () => "+",
+			help: () =>
+				`Add a custom RSS feed by URL.\nDrill in (Enter/l) to open the add-source form.\nType: editor`,
+			renderEditor: () => <AddSourceForm />,
+		},
 	];
-      const idx = areas.indexOf(focusArea());
-      const nextIdx = key.shift
-        ? (idx - 1 + areas.length) % areas.length
-        : (idx + 1) % areas.length;
-      setFocusArea(areas[nextIdx]);
-      return;
-    }
 
-    if (focusArea() === "list") {
-      if (key.name === "up" || key.name === "k") {
-        setSelectedIndex((i) => Math.max(0, i - 1));
-      } else if (key.name === "down" || key.name === "j") {
-        setSelectedIndex((i) => Math.min(sources().length - 1, i + 1));
-      } else if (
-        key.name === "return" ||
-        key.name === "space"
-      ) {
-        const source = sources()[selectedIndex()];
-        if (source) {
-          feedStore.toggleSource(source.id);
-        }
-      } else if (key.name === "d" || key.name === "delete") {
-        const source = sources()[selectedIndex()];
-        if (source) {
-          const removed = feedStore.removeSource(source.id);
-          if (!removed) {
-            setError("Cannot remove default sources");
-          }
-        }
-      } else if (key.name === "a") {
-        setFocusArea("add");
-      }
-    }
-
-    if (focusArea() === "country") {
-      if (
-        key.name === "enter" ||
-        key.name === "return" ||
-        key.name === "space"
-      ) {
-        const source = sources()[selectedIndex()];
-        if (source && source.type === SourceType.API) {
-          const next = source.country === "US" ? "GB" : "US";
-          feedStore.updateSource(source.id, { country: next });
-        }
-      }
-    }
-
-    if (focusArea() === "explicit") {
-      if (
-        key.name === "return" ||
-        key.name === "space"
-      ) {
-        const source = sources()[selectedIndex()];
-        if (source && source.type === SourceType.API) {
-          feedStore.updateSource(source.id, {
-            allowExplicit: !source.allowExplicit,
+	for (const s of feedStore.sources()) {
+		items.push({
+			id: `src:${s.id}`,
+			label: s.name,
+			kind: "toggle",
+			display: () => `${typeBadge(s)} ${s.enabled ? "on" : "off"}`,
+			help: () =>
+				`Source: ${s.name}\nType: ${s.type}\nEnabled: ${s.enabled}\nURL: ${s.baseUrl ?? "(none)"}\nSpace/Enter to toggle.`,
+			toggle: () => feedStore.toggleSource(s.id),
 		});
 	}
-      }
-    }
 
-    if (focusArea() === "language") {
-      if (
-        key.name === "return" ||
-        key.name === "space"
-      ) {
-        const source = sources()[selectedIndex()];
-        if (source && source.type === SourceType.API) {
-          const next = source.language === "ja_jp" ? "en_us" : "ja_jp";
-          feedStore.updateSource(source.id, { language: next });
-        }
-      }
-    }
-  };
+	return items;
+}
 
-  const handleAddSource = () => {
-    const url = newSourceUrl().trim();
-    const name = newSourceName().trim() || `Custom Source`;
+function AddSourceForm() {
+	const feedStore = useFeedStore();
+	const { theme } = useTheme();
+	const [name, setName] = createSignal("");
+	const [url, setUrl] = createSignal("");
+	const [error, setError] = createSignal<string | null>(null);
 
-    if (!url) {
+	const submit = () => {
+		const u = url().trim();
+		if (!u) {
 			setError("URL is required");
 			return;
 		}
-
 		try {
-      new URL(url);
+			new URL(u);
 		} catch {
 			setError("Invalid URL format");
 			return;
 		}
-
 		feedStore.addSource({
-      name,
-      type: "rss" as SourceType,
-      baseUrl: url,
+			name: name().trim() || "Custom Source",
+			type: SourceType.RSS,
+			baseUrl: u,
 			enabled: true,
-      description: `Custom RSS feed: ${url}`,
+			description: `Custom RSS feed: ${u}`,
 		});
-
-    setNewSourceUrl("");
-    setNewSourceName("");
-    setFocusArea("list");
+		setName("");
+		setUrl("");
 		setError(null);
 	};
 
-  const getSourceIcon = (source: PodcastSource) => {
-    if (source.type === SourceType.API) return "[API]";
-    if (source.type === SourceType.RSS) return "[RSS]";
-    return "[?]";
-  };
-
-  const selectedSource = () => sources()[selectedIndex()];
-  const isApiSource = () => selectedSource()?.type === SourceType.API;
-  const sourceCountry = () => selectedSource()?.country || "US";
-  const sourceExplicit = () => selectedSource()?.allowExplicit !== false;
-  const sourceLanguage = () => selectedSource()?.language || "en_us";
-
 	return (
-    <box flexDirection="column" border borderColor={theme.border} padding={1} gap={1}>
-      <box flexDirection="row" justifyContent="space-between">
+		<box flexDirection="column" padding={1} gap={1}>
 			<text fg={theme.text}>
-          <strong>Podcast Sources</strong>
+				<strong>Add Source</strong>
 			</text>
-        <box border borderColor={theme.border} padding={0} onMouseDown={props.onClose}>
-          <text fg={theme.primary}>[Esc] Close</text>
-        </box>
-      </box>
-
-      <text fg={theme.textMuted}>Manage where to search for podcasts</text>
-
-      {/* Source list */}
-      <box border borderColor={theme.border} padding={1} flexDirection="column" gap={1}>
-        <text fg={focusArea() === "list" ? theme.primary : theme.textMuted}>
-          Sources:
-        </text>
-          <scrollbox height={6}>
-            <For each={sources()}>
-              {(source, index) => (
-                <SelectableBox
-                  selected={() => focusArea() === "list" && index() === selectedIndex()}
-                  flexDirection="row"
-                  gap={1}
-                  padding={0}
-                  onMouseDown={() => {
-                    setSelectedIndex(index());
-                    setFocusArea("list");
-                    feedStore.toggleSource(source.id);
-                  }}
-                >
-                 <SelectableText
-                   selected={() => focusArea() === "list" && index() === selectedIndex()}
-                   primary
-                 >
-                   {focusArea() === "list" && index() === selectedIndex()
-                     ? ">"
-                     : " "}
-                 </SelectableText>
-                 <SelectableText
-                   selected={() => focusArea() === "list" && index() === selectedIndex()}
-                   primary
-                 >
-                   {source.name}
-                 </SelectableText>
-              </SelectableBox>
-            )}
-          </For>
-        </scrollbox>
-        <text fg={theme.textMuted}>
-          Space/Enter to toggle, d to delete, a to add
-        </text>
-
-         {/* API settings */}
-         <box flexDirection="column" gap={1}>
-           <SelectableText selected={() => false} primary={isApiSource()}>
-             {isApiSource()
-               ? "API Settings"
-               : "API Settings (select an API source)"}
-           </SelectableText>
-           <box flexDirection="row" gap={2}>
-             <box
-               border
-               borderColor={theme.border}
-               padding={0}
-               backgroundColor={
-                 focusArea() === "country" ? theme.primary : undefined
-               }
-             >
-               <SelectableText selected={() => false} primary={focusArea() === "country"}>
-                 Country: {sourceCountry()}
-               </SelectableText>
-             </box>
-             <box
-               border
-               borderColor={theme.border}
-               padding={0}
-               backgroundColor={
-                 focusArea() === "language" ? theme.primary : undefined
-               }
-             >
-               <SelectableText selected={() => false} primary={focusArea() === "language"}>
-                 Language:{" "}
-                 {sourceLanguage() === "ja_jp" ? "Japanese" : "English"}
-               </SelectableText>
-             </box>
-             <box
-               border
-               borderColor={theme.border}
-               padding={0}
-               backgroundColor={
-                 focusArea() === "explicit" ? theme.primary : undefined
-               }
-             >
-               <SelectableText selected={() => false} primary={focusArea() === "explicit"}>
-                 Explicit: {sourceExplicit() ? "Yes" : "No"}
-               </SelectableText>
-             </box>
-           </box>
-           <SelectableText selected={() => false} tertiary>
-             Enter/Space to toggle focused setting
-           </SelectableText>
-         </box>
-      </box>
-
-         {/* Add new source form */}
-         <box border borderColor={theme.border} padding={1} flexDirection="column" gap={1}>
-           <SelectableText selected={() => false} primary={focusArea() === "add" || focusArea() === "url"}>
-             Add New Source:
-           </SelectableText>
-
 			<box flexDirection="row" gap={1}>
-             <SelectableText selected={() => false} tertiary>Name:</SelectableText>
+				<text fg={theme.textMuted}>Name:</text>
 				<input
-               value={newSourceName()}
-               onInput={setNewSourceName}
+					value={name()}
+					onInput={setName}
 					placeholder="My Custom Feed"
-               focused={props.focused && focusArea() === "add"}
 					width={25}
 				/>
 			</box>
-
 			<box flexDirection="row" gap={1}>
-             <SelectableText selected={() => false} tertiary>URL:</SelectableText>
+				<text fg={theme.textMuted}>URL:</text>
 				<input
-               value={newSourceUrl()}
+					value={url()}
 					onInput={(v) => {
-                 setNewSourceUrl(v);
+						setUrl(v);
 						setError(null);
 					}}
 					placeholder="https://example.com/feed.rss"
-               focused={props.focused && focusArea() === "url"}
 					width={35}
 				/>
 			</box>
-
-           <box border borderColor={theme.border} padding={0} width={15} onMouseDown={handleAddSource}>
-             <SelectableText selected={() => false} primary>[+] Add Source</SelectableText>
+			<box
+				border
+				borderColor={theme.border}
+				padding={0}
+				width={15}
+				onMouseDown={submit}
+			>
+				<text fg={theme.primary}>[+] Add</text>
 			</box>
+			<Show when={error()}>{(e) => <text fg={theme.error}>{e()}</text>}</Show>
+			<Show when={feedStore.sources().length > 0}>
+				<box flexDirection="column" marginTop={1}>
+					<text fg={theme.textMuted}>
+						Current sources ({feedStore.sources().length}):
+					</text>
+					<For each={feedStore.sources()}>
+						{(s) => (
+							<text fg={theme.textMuted}>
+								{s.enabled ? "●" : "○"} {s.name}
+							</text>
+						)}
+					</For>
 				</box>
-
-         {/* Error message */}
-         {error() && <SelectableText selected={() => false} tertiary>{error()}</SelectableText>}
-
-         <SelectableText selected={() => false} tertiary>Tab to switch sections, Esc to close</SelectableText>
+			</Show>
 		</box>
 	);
 }

src/pages/Settings/SyncPanel.tsx

@@ -1,32 +1,57 @@
-const createSignal = <T,>(value: T): [() => T, (next: T) => void] => {
-  let current = value
-  return [() => current, (next) => {
-    current = next
-  }]
+/**
+ * SyncPanel — exposes Import / Export / status as SettingItems. The Import and
+ * Export dialogs render as depth-2 editors. No own useKeyboard.
+ */
+
+import { createSignal } from "solid-js";
+import { ImportDialog } from "./ImportDialog";
+import { ExportDialog } from "./ExportDialog";
+import { SyncStatus } from "./SyncStatus";
+import type { SettingItem } from "./types";
+
+// Module-level state so the action items can open their dialogs as depth-2
+// editors. The SettingsPage reads `syncEditor()` to decide which dialog to show.
+const [syncEditor, setSyncEditor] = createSignal<"import" | "export" | null>(
+	null,
+);
+export { syncEditor };
+export function closeSyncEditor() {
+	setSyncEditor(null);
 }
 
-import { ImportDialog } from "./ImportDialog"
-import { ExportDialog } from "./ExportDialog"
-import { SyncStatus } from "./SyncStatus"
-import { useTheme } from "@/context/ThemeContext"
-
-export function SyncPanel() {
-  const { theme } = useTheme();
-  const mode = createSignal<"import" | "export" | null>(null)
-
-  return (
-    <box style={{ flexDirection: "column", gap: 1 }}>
-      <box style={{ flexDirection: "row", gap: 1 }}>
-        <box border borderColor={theme.border} onMouseDown={() => mode[1]("import")}>
-          <text fg={theme.text}>Import</text>
-        </box>
-        <box border borderColor={theme.border} onMouseDown={() => mode[1]("export")}>
-          <text fg={theme.text}>Export</text>
-        </box>
-      </box>
-      <SyncStatus />
-      {mode[0]() === "import" ? <ImportDialog /> : null}
-      {mode[0]() === "export" ? <ExportDialog /> : null}
-    </box>
-  )
+export function useSyncItems(): SettingItem[] {
+	return [
+		{
+			id: "import",
+			label: "Import",
+			kind: "editor",
+			display: () => "→",
+			help: () =>
+				`Import subscriptions from a sync file (JSON or OPML).\nDrill in (Enter/l) to open the import dialog.\nType: editor`,
+			renderEditor: () => <ImportDialog />,
+		},
+		{
+			id: "export",
+			label: "Export",
+			kind: "editor",
+			display: () => "→",
+			help: () =>
+				`Export subscriptions to a sync file.\nDrill in (Enter/l) to open the export dialog.\nType: editor`,
+			renderEditor: () => <ExportDialog />,
+		},
+		{
+			id: "status",
+			label: "Status",
+			kind: "info",
+			display: () => "Idle",
+			help: () =>
+				`Last sync status. (Sync is run from the import/export dialogs.)\nType: info`,
+		},
+	];
+}
+
+/** Renders the live sync status block (used by the Settings page header for the
+ *  Sync section, when relevant). */
+export function SyncStatusBlock() {
+	return <SyncStatus />;
 }

src/pages/Settings/VisualizerSettings.tsx

@@ -1,164 +1,81 @@
 /**
- * VisualizerSettings — settings panel for the real-time audio visualizer.
- *
- * Allows adjusting bar count, noise reduction, sensitivity, and
- * frequency cutoffs. All changes persist via the app store.
+ * VisualizerSettings — exposes bars/sensitivity/noise/lowCut/highCut as
+ * SettingItems for the yazi depth-stack. No own useKeyboard.
  */
 
-import { createSignal } from "solid-js";
-import { useKeyboard } from "@opentui/solid";
 import { useAppStore } from "@/stores/app";
-import { useTheme } from "@/context/ThemeContext";
+import type { SettingItem } from "./types";
 
-type FocusField = "bars" | "sensitivity" | "noise" | "lowCut" | "highCut";
+export function useVisualizerItems(): SettingItem[] {
+	const app = useAppStore();
+	const viz = () => app.state().settings.visualizer;
 
-const FIELDS: FocusField[] = [
-  "bars",
-  "sensitivity",
-  "noise",
-  "lowCut",
-  "highCut",
-];
-
-export function VisualizerSettings() {
-  const appStore = useAppStore();
-  const { theme } = useTheme();
-  const [focusField, setFocusField] = createSignal<FocusField>("bars");
-
-  const viz = () => appStore.state().settings.visualizer;
-
-  const handleKey = (key: { name: string; shift?: boolean }) => {
-    if (key.name === "tab") {
-      const idx = FIELDS.indexOf(focusField());
-      const next = key.shift
-        ? (idx - 1 + FIELDS.length) % FIELDS.length
-        : (idx + 1) % FIELDS.length;
-      setFocusField(FIELDS[next]);
-      return;
-    }
-
-    if (key.name === "left" || key.name === "h") {
-      stepValue(-1);
-    }
-    if (key.name === "right" || key.name === "l") {
-      stepValue(1);
-    }
-  };
-
-  const stepValue = (delta: number) => {
-    const field = focusField();
-    const v = viz();
-
-    switch (field) {
-      case "bars": {
-        // Step by 8: 8, 16, 24, 32, ..., 128
-        const next = Math.min(128, Math.max(8, v.bars + delta * 8));
-        appStore.updateVisualizer({ bars: next });
-        break;
-      }
-      case "sensitivity": {
-        // Toggle: 0 (manual) or 1 (auto)
-        appStore.updateVisualizer({ sensitivity: v.sensitivity === 1 ? 0 : 1 });
-        break;
-      }
-      case "noise": {
-        // Step by 0.05: 0.0 – 1.0
-        const next = Math.min(
+	return [
+		{
+			id: "bars",
+			label: "Bars",
+			kind: "number",
+			display: () => String(viz().bars),
+			help: () =>
+				`Number of visualizer bars.\nType: number (8–128, step 8)\nDefault: 64\nCurrent: ${viz().bars}\nj/k to −/+8.`,
+			cycle: (dir) =>
+				app.updateVisualizer({
+					bars: Math.min(128, Math.max(8, viz().bars + dir * 8)),
+				}),
+		},
+		{
+			id: "sensitivity",
+			label: "Auto Sensitivity",
+			kind: "toggle",
+			display: () => (viz().sensitivity === 1 ? "On" : "Off"),
+			help: () =>
+				`Automatic gain sensitivity.\nType: toggle\nDefault: on\nCurrent: ${viz().sensitivity === 1 ? "on" : "off"}\nSpace/Enter to toggle.`,
+			toggle: () =>
+				app.updateVisualizer({
+					sensitivity: viz().sensitivity === 1 ? 0 : 1,
+				}),
+		},
+		{
+			id: "noiseReduction",
+			label: "Noise Reduction",
+			kind: "number",
+			display: () => viz().noiseReduction.toFixed(2),
+			help: () =>
+				`FFT noise reduction factor.\nType: number (0.00–1.00, step 0.05)\nDefault: 0.20\nCurrent: ${viz().noiseReduction.toFixed(2)}\nj/k to −/+0.05.`,
+			cycle: (dir) =>
+				app.updateVisualizer({
+					noiseReduction: Math.min(
 						1,
-          Math.max(0, Number((v.noiseReduction + delta * 0.05).toFixed(2))),
-        );
-        appStore.updateVisualizer({ noiseReduction: next });
-        break;
-      }
-      case "lowCut": {
-        // Step by 10: 20 – 500 Hz
-        const next = Math.min(500, Math.max(20, v.lowCutOff + delta * 10));
-        appStore.updateVisualizer({ lowCutOff: next });
-        break;
-      }
-      case "highCut": {
-        // Step by 500: 1000 – 20000 Hz
-        const next = Math.min(
+						Math.max(0, Number((viz().noiseReduction + dir * 0.05).toFixed(2))),
+					),
+				}),
+		},
+		{
+			id: "lowCutOff",
+			label: "Low Cutoff",
+			kind: "number",
+			display: () => `${viz().lowCutOff} Hz`,
+			help: () =>
+				`Lower frequency cutoff.\nType: number (20–500 Hz, step 10)\nDefault: 20\nCurrent: ${viz().lowCutOff}\nj/k to −/+10.`,
+			cycle: (dir) =>
+				app.updateVisualizer({
+					lowCutOff: Math.min(500, Math.max(20, viz().lowCutOff + dir * 10)),
+				}),
+		},
+		{
+			id: "highCutOff",
+			label: "High Cutoff",
+			kind: "number",
+			display: () => `${viz().highCutOff} Hz`,
+			help: () =>
+				`Upper frequency cutoff.\nType: number (1000–20000 Hz, step 500)\nDefault: 20000\nCurrent: ${viz().highCutOff}\nj/k to −/+500.`,
+			cycle: (dir) =>
+				app.updateVisualizer({
+					highCutOff: Math.min(
 						20000,
-          Math.max(1000, v.highCutOff + delta * 500),
-        );
-        appStore.updateVisualizer({ highCutOff: next });
-        break;
-      }
-    }
-  };
-
-  useKeyboard(handleKey);
-
-  return (
-    <box flexDirection="column" gap={1}>
-      <text fg={theme.textMuted}>Visualizer</text>
-
-      <box flexDirection="column" gap={1}>
-        <box flexDirection="row" gap={1} alignItems="center">
-          <text fg={focusField() === "bars" ? theme.primary : theme.textMuted}>
-            Bars:
-          </text>
-          <box border borderColor={theme.border} padding={0}>
-            <text fg={theme.text}>{viz().bars}</text>
-          </box>
-          <text fg={theme.textMuted}>[Left/Right +/-8]</text>
-        </box>
-
-        <box flexDirection="row" gap={1} alignItems="center">
-          <text
-            fg={
-              focusField() === "sensitivity" ? theme.primary : theme.textMuted
-            }
-          >
-            Auto Sensitivity:
-          </text>
-          <box border borderColor={theme.border} padding={0}>
-            <text
-              fg={viz().sensitivity === 1 ? theme.success : theme.textMuted}
-            >
-              {viz().sensitivity === 1 ? "On" : "Off"}
-            </text>
-          </box>
-          <text fg={theme.textMuted}>[Left/Right]</text>
-        </box>
-
-        <box flexDirection="row" gap={1} alignItems="center">
-          <text fg={focusField() === "noise" ? theme.primary : theme.textMuted}>
-            Noise Reduction:
-          </text>
-          <box border borderColor={theme.border} padding={0}>
-            <text fg={theme.text}>{viz().noiseReduction.toFixed(2)}</text>
-          </box>
-          <text fg={theme.textMuted}>[Left/Right +/-0.05]</text>
-        </box>
-
-        <box flexDirection="row" gap={1} alignItems="center">
-          <text
-            fg={focusField() === "lowCut" ? theme.primary : theme.textMuted}
-          >
-            Low Cutoff:
-          </text>
-          <box border borderColor={theme.border} padding={0}>
-            <text fg={theme.text}>{viz().lowCutOff} Hz</text>
-          </box>
-          <text fg={theme.textMuted}>[Left/Right +/-10]</text>
-        </box>
-
-        <box flexDirection="row" gap={1} alignItems="center">
-          <text
-            fg={focusField() === "highCut" ? theme.primary : theme.textMuted}
-          >
-            High Cutoff:
-          </text>
-          <box border borderColor={theme.border} padding={0}>
-            <text fg={theme.text}>{viz().highCutOff} Hz</text>
-          </box>
-          <text fg={theme.textMuted}>[Left/Right +/-500]</text>
-        </box>
-      </box>
-
-      <text fg={theme.textMuted}>Tab to move focus, Left/Right to adjust</text>
-    </box>
-  );
+						Math.max(1000, viz().highCutOff + dir * 500),
+					),
+				}),
+		},
+	];
 }

src/pages/Settings/types.ts

@@ -0,0 +1,45 @@
+/**
+ * Settings item model — each settings section exposes a list of items that the
+ * SettingsPage renders through the yazi depth-stack (sections → items → editor).
+ *
+ * All movement flows through the Shell's nav.action router (j/k move, Enter/l
+ * drill, h back), so panels no longer register their own useKeyboard — that was
+ * the root cause of the "right pane ignores keys / double-handled input" bugs.
+ */
+import type { JSX } from "solid-js";
+
+export type SettingItemKind =
+	| "toggle"
+	| "number"
+	| "select"
+	| "action"
+	| "editor"
+	| "info";
+
+export interface SettingItem {
+	/** Stable id within its section. */
+	id: string;
+	/** One-line label shown in the items list. */
+	label: string;
+	/** Category — decides how the item is interacted with. */
+	kind: SettingItemKind;
+	/** Current value as a short string (shown to the right of the label). */
+	display: () => string;
+	/** Help text for the preview pane: description, type, default, current. */
+	help: () => string;
+	/** For number/select: nudge the value by -1 or +1 (j/k at depth 2). */
+	cycle?: (dir: -1 | 1) => void;
+	/** For toggle: flip the value (Space/Enter at depth 1). */
+	toggle?: () => void;
+	/** For action: run immediately (Enter at depth 1). */
+	run?: () => void;
+	/** For editor: a bespoke depth-2 editor component. */
+	renderEditor?: () => JSX.Element;
+}
+
+export interface SettingsSectionDef {
+	id: number;
+	label: string;
+	description: string;
+	items?: () => SettingItem[];
+}

src/stores/search.ts

@@ -3,39 +3,39 @@
  * Manages search state, history, and results
  */
 
-import { createSignal } from "solid-js"
-import { searchPodcasts } from "../utils/search"
-import { useFeedStore } from "./feed"
-import type { SearchResult } from "../types/source"
+import { createSignal } from "solid-js";
+import { searchPodcasts } from "../utils/search";
+import { useFeedStore } from "./feed";
+import type { SearchResult } from "../types/source";
 
-const STORAGE_KEY = "podtui_search_history"
-const MAX_HISTORY = 20
+const STORAGE_KEY = "podtui_search_history";
+const MAX_HISTORY = 20;
 
 export interface SearchState {
-  query: string
-  isSearching: boolean
-  results: SearchResult[]
-  error: string | null
+	query: string;
+	isSearching: boolean;
+	results: SearchResult[];
+	error: string | null;
 }
 
-const CACHE_TTL = 1000 * 60 * 5
+const CACHE_TTL = 1000 * 60 * 5;
 
 /** Load search history from localStorage */
 function loadHistory(): string[] {
-  if (typeof localStorage === "undefined") return []
+	if (typeof localStorage === "undefined") return [];
 	try {
-    const stored = localStorage.getItem(STORAGE_KEY)
-    return stored ? JSON.parse(stored) : []
+		const stored = localStorage.getItem(STORAGE_KEY);
+		return stored ? JSON.parse(stored) : [];
 	} catch {
-    return []
+		return [];
 	}
 }
 
 /** Save search history to localStorage */
 function saveHistory(history: string[]): void {
-  if (typeof localStorage === "undefined") return
+	if (typeof localStorage === "undefined") return;
 	try {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(history))
+		localStorage.setItem(STORAGE_KEY, JSON.stringify(history));
 	} catch {
 		// Ignore errors
 	}
@@ -43,18 +43,18 @@ function saveHistory(history: string[]): void {
 
 /** Create search store */
 export function createSearchStore() {
-  const feedStore = useFeedStore()
-  const [query, setQuery] = createSignal("")
-  const [isSearching, setIsSearching] = createSignal(false)
-  const [results, setResults] = createSignal<SearchResult[]>([])
-  const [error, setError] = createSignal<string | null>(null)
-  const [history, setHistory] = createSignal<string[]>(loadHistory())
-  const [selectedSources, setSelectedSources] = createSignal<string[]>([])
+	const feedStore = useFeedStore();
+	const [query, setQuery] = createSignal("");
+	const [isSearching, setIsSearching] = createSignal(false);
+	const [results, setResults] = createSignal<SearchResult[]>([]);
+	const [error, setError] = createSignal<string | null>(null);
+	const [history, setHistory] = createSignal<string[]>(loadHistory());
+	const [selectedSources, setSelectedSources] = createSignal<string[]>([]);
 
 	const applySubscribedStatus = (items: SearchResult[]): SearchResult[] => {
-    const feeds = feedStore.feeds()
-    const subscribedUrls = new Set(feeds.map((feed) => feed.podcast.feedUrl))
-    const subscribedIds = new Set(feeds.map((feed) => feed.podcast.id))
+		const feeds = feedStore.feeds();
+		const subscribedUrls = new Set(feeds.map((feed) => feed.podcast.feedUrl));
+		const subscribedIds = new Set(feeds.map((feed) => feed.podcast.id));
 
 		return items.map((item) => ({
 			...item,
@@ -65,83 +65,99 @@ export function createSearchStore() {
 					subscribedUrls.has(item.podcast.feedUrl) ||
 					subscribedIds.has(item.podcast.id),
 			},
-    }))
-  }
+		}));
+	};
 
 	/** Perform search (multi-source implementation) */
 	const search = async (searchQuery: string): Promise<void> => {
-    const q = searchQuery.trim()
+		const q = searchQuery.trim();
 		if (!q) {
-      setResults([])
-      return
+			setResults([]);
+			return;
 		}
 
-    setQuery(q)
-    setIsSearching(true)
-    setError(null)
+		setQuery(q);
+		setIsSearching(true);
+		setError(null);
 
 		// Add to history
-    addToHistory(q)
+		addToHistory(q);
 
 		try {
-      const sources = feedStore.sources()
-      const enabledSourceIds = sources.filter((s) => s.enabled).map((s) => s.id)
-      const sourceIds = selectedSources().length > 0
-        ? selectedSources()
-        : enabledSourceIds
+			const sources = feedStore.sources();
+			const enabledSourceIds = sources
+				.filter((s) => s.enabled)
+				.map((s) => s.id);
+			const sourceIds =
+				selectedSources().length > 0 ? selectedSources() : enabledSourceIds;
+
+			// Empty query guard already returned above; if there are no enabled
+			// sources, tell the user instead of returning an empty list that looks
+			// like a network outage.
+			if (enabledSourceIds.length === 0) {
+				setError(
+					"No search sources are enabled. Enable one in Settings → Sources.",
+				);
+				setResults([]);
+				return;
+			}
 
 			const searchResults = await searchPodcasts(q, sourceIds, sources, {
 				cacheTtl: CACHE_TTL,
-      })
+			});
 
-      setResults(applySubscribedStatus(searchResults))
+			setResults(applySubscribedStatus(searchResults));
 		} catch (e) {
-      setError("Search failed. Please try again.")
-      setResults([])
+			setError(
+				e instanceof Error && e.message
+					? e.message
+					: "Search failed. Please try again.",
+			);
+			setResults([]);
 		} finally {
-      setIsSearching(false)
-    }
+			setIsSearching(false);
 		}
+	};
 
 	/** Add query to history */
 	const addToHistory = (q: string) => {
 		setHistory((prev) => {
 			// Remove duplicates and add to front
-      const filtered = prev.filter((h) => h.toLowerCase() !== q.toLowerCase())
-      const updated = [q, ...filtered].slice(0, MAX_HISTORY)
-      saveHistory(updated)
-      return updated
-    })
-  }
+			const filtered = prev.filter((h) => h.toLowerCase() !== q.toLowerCase());
+			const updated = [q, ...filtered].slice(0, MAX_HISTORY);
+			saveHistory(updated);
+			return updated;
+		});
+	};
 
 	/** Clear search history */
 	const clearHistory = () => {
-    setHistory([])
-    saveHistory([])
-  }
+		setHistory([]);
+		saveHistory([]);
+	};
 
 	/** Remove single history item */
 	const removeFromHistory = (q: string) => {
 		setHistory((prev) => {
-      const updated = prev.filter((h) => h !== q)
-      saveHistory(updated)
-      return updated
-    })
-  }
+			const updated = prev.filter((h) => h !== q);
+			saveHistory(updated);
+			return updated;
+		});
+	};
 
 	/** Clear results */
 	const clearResults = () => {
-    setResults([])
-    setQuery("")
-    setError(null)
-  }
+		setResults([]);
+		setQuery("");
+		setError(null);
+	};
 
 	/** Mark a podcast as subscribed in results */
 	const markSubscribed = (podcastId: string, feedUrl?: string) => {
 		setResults((prev) =>
 			prev.map((result) => {
-        const matchesId = result.podcast.id === podcastId
-        const matchesUrl = feedUrl ? result.podcast.feedUrl === feedUrl : false
+				const matchesId = result.podcast.id === podcastId;
+				const matchesUrl = feedUrl ? result.podcast.feedUrl === feedUrl : false;
 				if (matchesId || matchesUrl) {
 					return {
 						...result,
@@ -149,12 +165,12 @@ export function createSearchStore() {
 							...result.podcast,
 							isSubscribed: true,
 						},
+					};
 				}
-        }
-        return result
-      })
-    )
-  }
+				return result;
+			}),
+		);
+	};
 
 	return {
 		// State
@@ -173,15 +189,15 @@ export function createSearchStore() {
 		removeFromHistory,
 		setSelectedSources,
 		markSubscribed,
-  }
+	};
 }
 
 /** Singleton search store */
-let searchStoreInstance: ReturnType<typeof createSearchStore> | null = null
+let searchStoreInstance: ReturnType<typeof createSearchStore> | null = null;
 
 export function useSearchStore() {
 	if (!searchStoreInstance) {
-    searchStoreInstance = createSearchStore()
+		searchStoreInstance = createSearchStore();
 	}
-  return searchStoreInstance
+	return searchStoreInstance;
 }

src/utils/event-bus.ts

@@ -20,128 +20,148 @@
  * ```
  */
 
-type EventHandler<T = unknown> = (data: T) => void
+type EventHandler<T = unknown> = (data: T) => void;
 
 // Export EventHandler type for external use
-export type { EventHandler }
+export type { EventHandler };
 
 interface EventBusInstance {
-  on<T = unknown>(event: string, handler: EventHandler<T>): () => void
-  once<T = unknown>(event: string, handler: EventHandler<T>): () => void
-  off<T = unknown>(event: string, handler: EventHandler<T>): void
-  emit<T = unknown>(event: string, data: T): void
-  clear(): void
+	on<T = unknown>(event: string, handler: EventHandler<T>): () => void;
+	once<T = unknown>(event: string, handler: EventHandler<T>): () => void;
+	off<T = unknown>(event: string, handler: EventHandler<T>): void;
+	emit<T = unknown>(event: string, data: T): void;
+	clear(): void;
 }
 
 function createEventBus(): EventBusInstance {
-  const handlers = new Map<string, Set<EventHandler>>()
+	const handlers = new Map<string, Set<EventHandler>>();
 
 	return {
 		on<T = unknown>(event: string, handler: EventHandler<T>): () => void {
 			if (!handlers.has(event)) {
-        handlers.set(event, new Set())
+				handlers.set(event, new Set());
 			}
-      handlers.get(event)!.add(handler as EventHandler)
+			handlers.get(event)!.add(handler as EventHandler);
 
 			// Return unsubscribe function
 			return () => {
-        this.off(event, handler)
-      }
+				this.off(event, handler);
+			};
 		},
 
 		once<T = unknown>(event: string, handler: EventHandler<T>): () => void {
 			const wrappedHandler: EventHandler<T> = (data) => {
-        this.off(event, wrappedHandler)
-        handler(data)
-      }
-      return this.on(event, wrappedHandler)
+				this.off(event, wrappedHandler);
+				handler(data);
+			};
+			return this.on(event, wrappedHandler);
 		},
 
 		off<T = unknown>(event: string, handler: EventHandler<T>): void {
-      const eventHandlers = handlers.get(event)
+			const eventHandlers = handlers.get(event);
 			if (eventHandlers) {
-        eventHandlers.delete(handler as EventHandler)
+				eventHandlers.delete(handler as EventHandler);
 				if (eventHandlers.size === 0) {
-          handlers.delete(event)
+					handlers.delete(event);
 				}
 			}
 		},
 
 		emit<T = unknown>(event: string, data: T): void {
-      const eventHandlers = handlers.get(event)
+			const eventHandlers = handlers.get(event);
 			if (eventHandlers) {
 				for (const handler of eventHandlers) {
 					try {
-            handler(data)
+						handler(data);
 					} catch (error) {
-            console.error(`Error in event handler for "${event}":`, error)
+						console.error(`Error in event handler for "${event}":`, error);
 					}
 				}
 			}
 		},
 
 		clear(): void {
-      handlers.clear()
+			handlers.clear();
 		},
-  }
+	};
 }
 
 // Singleton event bus instance
-export const EventBus = createEventBus()
+export const EventBus = createEventBus();
+
+import type { KeybindActionName } from "@/context/KeybindContext";
+import type { TABS } from "@/utils/navigation";
+import type { PaneId, NavMode } from "@/context/NavigationContext";
 
 // Common event types for the application
 export type AppEvents = {
-  "theme.changed": { theme: string; mode: "dark" | "light" }
-  "theme.mode.changed": { mode: "dark" | "light" }
-  "theme.reload": {}
-  "navigation.tab.changed": { tab: string; previousTab?: string }
-  "navigation.layer.changed": { depth: number; previousDepth: number }
-  "feed.subscribed": { feedId: string; feedUrl: string }
-  "feed.unsubscribed": { feedId: string }
-  "player.play": { episodeId: string }
-  "player.pause": { episodeId: string }
-  "player.stop": {}
-  "auth.login": { userId: string }
-  "auth.logout": {}
-  "toast.show": { message: string; variant: "info" | "success" | "warning" | "error"; title?: string; duration?: number }
-  "dialog.open": { dialogId: string }
-  "dialog.close": { dialogId?: string }
-  "command.execute": { command: string; args?: unknown }
-  "clipboard.copied": { text: string }
-  "selection.start": { x: number; y: number }
-  "selection.end": { text: string }
+	"theme.changed": { theme: string; mode: "dark" | "light" };
+	"theme.mode.changed": { mode: "dark" | "light" };
+	"theme.reload": {};
+	"navigation.tab.changed": { tab: string; previousTab?: string };
+	"navigation.layer.changed": { depth: number; previousDepth: number };
+	"feed.subscribed": { feedId: string; feedUrl: string };
+	"feed.unsubscribed": { feedId: string };
+	"player.play": { episodeId: string };
+	"player.pause": { episodeId: string };
+	"player.stop": {};
+	"auth.login": { userId: string };
+	"auth.logout": {};
+	"toast.show": {
+		message: string;
+		variant: "info" | "success" | "warning" | "error";
+		title?: string;
+		duration?: number;
+	};
+	"dialog.open": { dialogId: string };
+	"dialog.close": { dialogId?: string };
+	"command.execute": { command: string; args?: unknown };
+	// Yazi-style unified router → active page dispatch. The Shell router
+	// emits these; each page subscribes to the subset it implements.
+	"nav.action": {
+		action: KeybindActionName;
+		tab: TABS;
+		pane: PaneId;
+		mode: NavMode;
+	};
+	"clipboard.copied": { text: string };
+	"selection.start": { x: number; y: number };
+	"selection.end": { text: string };
 
 	// Multimedia key events (emitted by useMultimediaKeys, consumed by useAudio)
-  "media.toggle": {}
-  "media.volumeUp": {}
-  "media.volumeDown": {}
-  "media.seekForward": {}
-  "media.seekBackward": {}
-  "media.speedCycle": {}
-}
+	"media.toggle": {};
+	"media.volumeUp": {};
+	"media.volumeDown": {};
+	"media.seekForward": {};
+	"media.seekBackward": {};
+	"media.speedCycle": {};
+};
 
 // Type-safe emit and on functions
-export function emit<K extends keyof AppEvents>(event: K, data: AppEvents[K]): void {
-  EventBus.emit(event, data)
+export function emit<K extends keyof AppEvents>(
+	event: K,
+	data: AppEvents[K],
+): void {
+	EventBus.emit(event, data);
 }
 
 export function on<K extends keyof AppEvents>(
 	event: K,
-  handler: EventHandler<AppEvents[K]>
+	handler: EventHandler<AppEvents[K]>,
 ): () => void {
-  return EventBus.on(event, handler)
+	return EventBus.on(event, handler);
 }
 
 export function once<K extends keyof AppEvents>(
 	event: K,
-  handler: EventHandler<AppEvents[K]>
+	handler: EventHandler<AppEvents[K]>,
 ): () => void {
-  return EventBus.once(event, handler)
+	return EventBus.once(event, handler);
 }
 
 export function off<K extends keyof AppEvents>(
 	event: K,
-  handler: EventHandler<AppEvents[K]>
+	handler: EventHandler<AppEvents[K]>,
 ): void {
-  EventBus.off(event, handler)
+	EventBus.off(event, handler);
 }

src/utils/keybinds-persistence.ts

@@ -1,11 +1,11 @@
 /**
  * Keybinds persistence via JSONC file in XDG_CONFIG_HOME
  *
- * Handles copying keybind.jsonc from package to user config directory
+ * Handles copying keybinds.jsonc from package to user config directory
  * and loading/saving keybind configurations.
  */
 
-import { copyFile, mkdir } from "fs/promises";
+import { copyFile } from "fs/promises";
 import path from "path";
 import { parseJSONC } from "./jsonc";
 import { getConfigFilePath, ensureConfigDir } from "./config-dir";
@@ -15,33 +15,63 @@ const KEYBINDS_SOURCE = path.join(
 	process.cwd(),
 	"src",
 	"config",
-  "keybind.jsonc",
+	"keybinds.jsonc",
 );
 const KEYBINDS_FILE = "keybinds.jsonc";
 
-/** Default keybinds from package */
+/** Default keybinds (yazi-style) — mirrors src/config/keybinds.jsonc so the
+ *  app works before a user keybinds file is copied into place. */
 const DEFAULT_KEYBINDS: KeybindsResolved = {
-  up: ["up", "k"],
-  down: ["down", "j"],
-  left: ["left", "h"],
-  right: ["right", "l"],
-  cycle: ["tab"],
-  dive: ["return"],
-  select: ["return"],
-  out: ["esc"],
-  inverseModifier: "shift",
-  leader: ":",
-  quit: ["<leader>q"],
-  "audio-toggle": ["<leader>p"],
-  "audio-pause": [],
-  "audio-play": [],
-  "audio-next": ["<leader>n"],
-  "audio-prev": ["<leader>l"],
-  "audio-seek-forward": ["<leader>sf"],
-  "audio-seek-backward": ["<leader>sb"],
+	// movement
+	"move-down": ["j", "down"],
+	"move-up": ["k", "up"],
+	"page-down": ["ctrl-d"],
+	"page-up": ["ctrl-u"],
+	"full-down": ["ctrl-f"],
+	"full-up": ["ctrl-b"],
+	"jump-down": ["J"],
+	"jump-up": ["K"],
+	"goto-top": [["g", "g"]],
+	"goto-bottom": ["G"],
+	// pane swipe
+	"swipe-prev": ["h", "left"],
+	"swipe-next": ["l", "right"],
+	// open / select
+	open: ["return", "enter"],
+	"open-interactive": ["shift-return"],
+	"toggle-select": ["space"],
+	"visual-mode": ["v"],
+	"toggle-all": ["ctrl-a"],
+	"invert-all": ["ctrl-r"],
+	escape: ["escape", "ctrl-["],
+	// tabs
+	"tab-prev": ["["],
+	"tab-next": ["]"],
+	"tab-goto-1": ["1"],
+	"tab-goto-2": ["2"],
+	"tab-goto-3": ["3"],
+	"tab-goto-4": ["4"],
+	"tab-goto-5": ["5"],
+	"tab-goto-6": ["6"],
+	// command / help / quit
+	command: [":"],
+	quit: ["q", "ctrl-c"],
+	help: ["~", "f1"],
+	// list ops
+	search: ["s"],
+	filter: ["f"],
+	sort: [","],
+	"toggle-hidden": ["."],
+	refresh: ["r"],
+	// audio transport (preserved; shifted single keys, no collisions)
+	"audio-toggle": ["P"],
+	"audio-next": ["N"],
+	"audio-prev": ["B"],
+	"audio-seek-forward": ["shift-."],
+	"audio-seek-backward": ["shift-,"],
 };
 
-/** Copy keybind.jsonc to user config directory on first run */
+/** Copy keybinds.jsonc to user config directory on first run */
 export async function copyKeybindsIfNeeded(): Promise<void> {
 	try {
 		const targetPath = getConfigFilePath(KEYBINDS_FILE);
@@ -70,6 +100,7 @@ export async function loadKeybindsFromFile(): Promise<KeybindsResolved> {
 
 		if (!parsed || typeof parsed !== "object") return DEFAULT_KEYBINDS;
 
+		// Merge so partial user configs inherit defaults for missing keys.
 		return { ...DEFAULT_KEYBINDS, ...parsed } as KeybindsResolved;
 	} catch {
 		return DEFAULT_KEYBINDS;

src/utils/navigation.ts

@@ -20,6 +20,35 @@ export enum TABS {
 }
 export const TabsCount = 6;
 
+/** Tabs that use the yazi depth-stack model (prev | current | preview
+ *  columns, infinite drill via push/pop). Search and Player keep the legacy
+ *  fixed-pane model. */
+export const DEPTH_TABS: ReadonlySet<TABS> = new Set([
+	TABS.FEED,
+	TABS.MYSHOWS,
+	TABS.DISCOVER,
+	TABS.SETTINGS,
+]);
+
+/** Root (depth-0) frame for a depth-tab — identifies the top-level list each
+ *  page renders at root. Pages interpret the `kind` to derive their list. */
+export function rootFrameFor(
+	tab: TABS,
+): import("@/context/NavigationContext").DepthFrame {
+	switch (tab) {
+		case TABS.FEED:
+			return { kind: "feeds", focus: 0 };
+		case TABS.MYSHOWS:
+			return { kind: "shows", focus: 0 };
+		case TABS.DISCOVER:
+			return { kind: "discover:categories", focus: 0 };
+		case TABS.SETTINGS:
+			return { kind: "settings:sections", focus: 0 };
+		default:
+			return { kind: "root", focus: 0 };
+	}
+}
+
 export const LayerGraph = {
 	[TABS.FEED]: FeedPage,
 	[TABS.MYSHOWS]: MyShowsPage,
@@ -36,3 +65,29 @@ export const LayerDepths = {
 	[TABS.PLAYER]: PlayerPaneCount,
 	[TABS.SETTINGS]: SettingsPaneCount,
 };
+
+// Yazi-style pane grow ratios (parent : current : preview) ≈ [1, 4, 3].
+// Panes use flexGrow (Yoga) so columns always sum to the row width regardless
+// of terminal size — more robust than fixed percentages and exactly mirrors
+// yazi's `mgr.ratio` config. Set a slot's ratio to 0 to hide it (2-pane tabs).
+export const PANE_RATIO = {
+	parent: 1,
+	current: 4,
+	preview: 3,
+} as const;
+
+// Number of interactive panes per tab. Depth-tabs (Feed/MyShows/Discover/
+// Settings) now have a single focusable content pane (the center/current
+// column at depth 0..N); prev and preview are derived, not focusable. Search
+// keeps its 3 fixed panes; Player is single-pane. The Shell's h/l dispatch
+// routes depth-tabs to push/pop instead of pane swipe. Defined here (after
+// TABS) to avoid re-introducing the old NavigationContext top-level-init
+// circular deadlock.
+export const TabPaneCount: Record<TABS, number> = {
+	[TABS.FEED]: 1, // depth: feeds → episodes → preview
+	[TABS.MYSHOWS]: 1, // depth: shows → episodes → preview
+	[TABS.DISCOVER]: 1, // depth: categories → results → preview
+	[TABS.SEARCH]: 3, // fixed: query | results | detail
+	[TABS.PLAYER]: 1, // single pane
+	[TABS.SETTINGS]: 1, // depth: sections → items → editor
+};

src/utils/search.ts

@@ -1,146 +1,162 @@
-import { searchSourceByType } from "./source-searcher"
-import type { PodcastSource, SearchResult } from "../types/source"
-import type { Episode } from "../types/episode"
+import { searchSourceByType } from "./source-searcher";
+import type { PodcastSource, SearchResult } from "../types/source";
+import type { Episode } from "../types/episode";
 
 type SearchCacheEntry = {
-  timestamp: number
-  results: SearchResult[]
-}
+	timestamp: number;
+	results: SearchResult[];
+};
 
 type SearchOptions = {
-  cacheTtl?: number
-}
+	cacheTtl?: number;
+};
 
-const searchCache = new Map<string, SearchCacheEntry>()
-const rateLimitState = new Map<string, number[]>()
-const RATE_LIMIT_WINDOW_MS = 60000
-const RATE_LIMIT_MAX_CALLS = 20
+const searchCache = new Map<string, SearchCacheEntry>();
+const rateLimitState = new Map<string, number[]>();
+const RATE_LIMIT_WINDOW_MS = 60000;
+const RATE_LIMIT_MAX_CALLS = 20;
 
 const throttleSource = async (sourceId: string) => {
-  const now = Date.now()
-  const windowStart = now - RATE_LIMIT_WINDOW_MS
-  const timestamps = rateLimitState.get(sourceId)?.filter((ts) => ts > windowStart) ?? []
+	const now = Date.now();
+	const windowStart = now - RATE_LIMIT_WINDOW_MS;
+	const timestamps =
+		rateLimitState.get(sourceId)?.filter((ts) => ts > windowStart) ?? [];
 
 	if (timestamps.length >= RATE_LIMIT_MAX_CALLS) {
-    const waitMs = timestamps[0] + RATE_LIMIT_WINDOW_MS - now
+		const waitMs = timestamps[0] + RATE_LIMIT_WINDOW_MS - now;
 		if (waitMs > 0) {
-      await new Promise((resolve) => setTimeout(resolve, waitMs))
+			await new Promise((resolve) => setTimeout(resolve, waitMs));
 		}
 	}
 
-  const updated = rateLimitState.get(sourceId)?.filter((ts) => ts > windowStart) ?? []
-  updated.push(Date.now())
-  rateLimitState.set(sourceId, updated)
-}
+	const updated =
+		rateLimitState.get(sourceId)?.filter((ts) => ts > windowStart) ?? [];
+	updated.push(Date.now());
+	rateLimitState.set(sourceId, updated);
+};
 
 const buildCacheKey = (query: string, sourceIds: string[]) => {
-  const keySources = [...sourceIds].sort().join(",")
-  return `${query.toLowerCase()}::${keySources}`
-}
+	const keySources = [...sourceIds].sort().join(",");
+	return `${query.toLowerCase()}::${keySources}`;
+};
 
 const isCacheValid = (entry: SearchCacheEntry, ttl: number) =>
-  Date.now() - entry.timestamp < ttl
+	Date.now() - entry.timestamp < ttl;
 
 const dedupeResults = (results: SearchResult[]): SearchResult[] => {
-  const map = new Map<string, SearchResult>()
+	const map = new Map<string, SearchResult>();
 	for (const result of results) {
-    const key = result.podcast.feedUrl || result.podcast.id || result.podcast.title
-    const existing = map.get(key)
+		const key =
+			result.podcast.feedUrl || result.podcast.id || result.podcast.title;
+		const existing = map.get(key);
 		if (!existing || (result.score ?? 0) > (existing.score ?? 0)) {
-      map.set(key, result)
+			map.set(key, result);
 		}
 	}
-  return Array.from(map.values())
-}
+	return Array.from(map.values());
+};
 
 export const searchPodcasts = async (
 	query: string,
 	sourceIds: string[],
 	sources: PodcastSource[],
-  options: SearchOptions = {}
+	options: SearchOptions = {},
 ): Promise<SearchResult[]> => {
-  const trimmed = query.trim()
-  if (!trimmed) return []
+	const trimmed = query.trim();
+	if (!trimmed) return [];
 
 	const activeSources = sources.filter(
-    (source) => sourceIds.includes(source.id) && source.enabled
-  )
+		(source) => sourceIds.includes(source.id) && source.enabled,
+	);
 
-  if (activeSources.length === 0) return []
-
-  const cacheTtl = options.cacheTtl ?? 1000 * 60 * 5
-  const cacheKey = buildCacheKey(trimmed, activeSources.map((s) => s.id))
-  const cached = searchCache.get(cacheKey)
-  if (cached && isCacheValid(cached, cacheTtl)) {
-    return cached.results
+	if (activeSources.length === 0) {
+		// No enabled sources — surface a clear cause instead of returning empty,
+		// which otherwise looks indistinguishable from a network failure.
+		if (sourceIds.length === 0) {
+			throw new Error("No search sources are enabled");
+		}
+		throw new Error("No enabled sources match the selected search sources");
 	}
 
-  const results: SearchResult[] = []
-  const errors: Error[] = []
+	const cacheTtl = options.cacheTtl ?? 1000 * 60 * 5;
+	const cacheKey = buildCacheKey(
+		trimmed,
+		activeSources.map((s) => s.id),
+	);
+	const cached = searchCache.get(cacheKey);
+	if (cached && isCacheValid(cached, cacheTtl)) {
+		return cached.results;
+	}
+
+	const results: SearchResult[] = [];
+	const errors: Error[] = [];
 
 	await Promise.all(
 		activeSources.map(async (source) => {
 			try {
-        await throttleSource(source.id)
-        const sourceResults = await searchSourceByType(trimmed, source)
-        results.push(...sourceResults)
+				await throttleSource(source.id);
+				const sourceResults = await searchSourceByType(trimmed, source);
+				results.push(...sourceResults);
 			} catch (error) {
-        errors.push(error as Error)
+				errors.push(error as Error);
 			}
-    })
-  )
+		}),
+	);
 
-  const deduped = dedupeResults(results)
-  const sorted = deduped.sort((a, b) => (b.score ?? 0) - (a.score ?? 0))
+	const deduped = dedupeResults(results);
+	const sorted = deduped.sort((a, b) => (b.score ?? 0) - (a.score ?? 0));
 
 	if (sorted.length === 0 && errors.length > 0) {
-    throw new Error("Search failed for all sources")
+		throw new Error("Search failed for all sources");
 	}
 
-  searchCache.set(cacheKey, { timestamp: Date.now(), results: sorted })
-  return sorted
-}
+	searchCache.set(cacheKey, { timestamp: Date.now(), results: sorted });
+	return sorted;
+};
 
 type ItunesEpisodeResult = {
-  trackId?: number
-  trackName?: string
-  description?: string
-  shortDescription?: string
-  releaseDate?: string
-  trackTimeMillis?: number
-  episodeUrl?: string
-  previewUrl?: string
-  trackViewUrl?: string
-}
+	trackId?: number;
+	trackName?: string;
+	description?: string;
+	shortDescription?: string;
+	releaseDate?: string;
+	trackTimeMillis?: number;
+	episodeUrl?: string;
+	previewUrl?: string;
+	trackViewUrl?: string;
+};
 
 type ItunesEpisodeResponse = {
-  resultCount: number
-  results: ItunesEpisodeResult[]
-}
+	resultCount: number;
+	results: ItunesEpisodeResult[];
+};
 
 export const searchEpisodes = async (
 	query: string,
-  feedId: string
+	feedId: string,
 ): Promise<Episode[]> => {
-  const trimmed = query.trim()
-  if (!trimmed) return []
+	const trimmed = query.trim();
+	if (!trimmed) return [];
 
-  const url = new URL("https://itunes.apple.com/search")
-  url.searchParams.set("term", trimmed)
-  url.searchParams.set("media", "podcast")
-  url.searchParams.set("entity", "podcastEpisode")
-  url.searchParams.set("country", "US")
-  url.searchParams.set("lang", "en_us")
+	const url = new URL("https://itunes.apple.com/search");
+	url.searchParams.set("term", trimmed);
+	url.searchParams.set("media", "podcast");
+	url.searchParams.set("entity", "podcastEpisode");
+	url.searchParams.set("country", "US");
+	url.searchParams.set("lang", "en_us");
 
-  const response = await fetch(url.toString())
-  if (!response.ok) return []
+	const response = await fetch(url.toString());
+	if (!response.ok) return [];
 
-  const data = (await response.json()) as ItunesEpisodeResponse
+	const data = (await response.json()) as ItunesEpisodeResponse;
 	return data.results
 		.map((item) => {
-      if (!item.trackName) return null
-      const id = item.trackId ? `episode-${item.trackId}` : `episode-${item.trackName}`
-      const audioUrl = item.episodeUrl || item.previewUrl || item.trackViewUrl || ""
+			if (!item.trackName) return null;
+			const id = item.trackId
+				? `episode-${item.trackId}`
+				: `episode-${item.trackName}`;
+			const audioUrl =
+				item.episodeUrl || item.previewUrl || item.trackViewUrl || "";
 
 			return {
 				id,
@@ -148,9 +164,11 @@ export const searchEpisodes = async (
 				title: item.trackName,
 				description: item.description || item.shortDescription || "",
 				audioUrl,
-        duration: item.trackTimeMillis ? Math.round(item.trackTimeMillis / 1000) : 0,
+				duration: item.trackTimeMillis
+					? Math.round(item.trackTimeMillis / 1000)
+					: 0,
 				pubDate: item.releaseDate ? new Date(item.releaseDate) : new Date(),
-      }
+			};
 		})
-    .filter((item): item is Episode => Boolean(item))
-}
+		.filter((item): item is Episode => Boolean(item));
+};

tasks/yazi-remake/01-rearchitect-nav-model.md

@@ -0,0 +1,54 @@
+# 01. Rearchitect nav model — remove the sidebar pane
+
+meta:
+  id: yazi-remake-01
+  feature: yazi-remake
+  priority: P1
+  depends_on: []
+  tags: [implementation, nav-model, tests-required]
+
+objective:
+
+- Remove the always-on `SIDEBAR_PANE` concept from the navigation context so `activeTab` is plain tab state (not a pane), establishing clean parent|current|preview semantics for the yazi remake.
+
+deliverables:
+
+- `src/context/NavigationContext.tsx` — delete `SIDEBAR_PANE` constant and all references; `activeTab` is no longer a pane
+- `src/utils/navigation.ts` — update `TabPaneCount` semantics; depth-tabs = 1 focusable pane (current), the 3 visible columns are a render concern not 3 panes
+- Updated header/comment block describing the parent|current|preview model
+- `swipe()` / `popDepth()` reworked: depth-tabs `l`=drill (`open`), `h`=pop (noop at depth 0); fixed-pane tabs `h/l` move between parent/current/preview
+- Tab-enter resets focus to `DEPTH_CENTER_PANE` (current pane), not a sidebar
+
+steps:
+
+- Audit every reference to `SIDEBAR_PANE` across the codebase (grep)
+- In `NavigationContext.tsx`: delete the `SIDEBAR_PANE = -1` export and the `focusedIndex`/`setFocusedIndex` SIDEBAR_PANE branch added previously
+- Set the initial `activePane` signal and the tab-switch createEffect to reset to `DEPTH_CENTER_PANE` (the current pane), not `SIDEBAR_PANE`
+- Rework `swipe()` to clamp to `[0, paneCount-1]` for fixed-pane tabs (the sidebar is no longer in the chain); depth-tabs don't use `swipe` for drill/pop (that lives in Shell dispatch)
+- In `utils/navigation.ts`: confirm `TabPaneCount` reflects focusable content panes only (depth-tabs = 1, Search = 3, Player = 1); update `PANE_RATIO` leave-behind note (ratio change happens in task 02)
+- Update the file header comment block to describe parent|current|preview
+- Run `lens_diagnostics` on the two files
+
+tests:
+
+- Unit: `focusedIndex(DEPTH_CENTER_PANE)` on a depth-tab returns the top frame's focus; `setFocusedIndex` writes to the top frame (Arrange a tab with a 2-frame stack, Act by calling setFocusedIndex, Assert topFrame.focus updated)
+- Integration: tab-switch effect sets `activePane` to `DEPTH_CENTER_PANE` (not -1); `swipe(-1, 3)` on a fixed tab clamps to 0 not -1
+- e2e (harness): app boots with `nav.state.pane === 0` (current), not -1
+
+acceptance_criteria:
+
+- No symbol `SIDEBAR_PANE` exists anywhere in `src/`
+- Initial `activePane` === `DEPTH_CENTER_PANE` (0)
+- Tab-enter sets `activePane` to `DEPTH_CENTER_PANE`
+- `swipe()` lower bound is 0 (no `-1`)
+
+validation:
+
+- `grep -rn "SIDEBAR_PANE" src/` returns nothing
+- `bun run build` passes
+- `lens_diagnostics` paths=[`src/context/NavigationContext.tsx`,`src/utils/navigation.ts`] severity=error → 0 findings
+
+notes:
+
+- This task unblocks 03/04/05/06. It must not delete `DEPTH_CENTER_PANE` — that constant is generalised to "the current pane" and retained
+- `SIDEBAR_ACTIONS` (added in Shell in a prior turn) is removed in task 06 (the keybind rewrite), not here — but Shell will temporarily fail to compile after this task until 05/06 land; that's expected and the build command ignores type errors, so gate success on grep + targeted diagnostics, not the full build

tasks/yazi-remake/02-build-three-pane-layout-primitive.md

@@ -0,0 +1,56 @@
+# 02. Build the reusable 3-pane layout primitive (1:3:3 ratio, stable parent slot)
+
+meta:
+  id: yazi-remake-02
+  feature: yazi-remake
+  priority: P1
+  depends_on: []
+  tags: [implementation, layout, tests-required]
+
+objective:
+
+- Create one reusable `<YaziPaneRow>` primitive that renders three bordered columns (parent | current | preview) at a 1:3:3 grow ratio with a stable 1/7 parent slot even when blank, so every list tab shares an identical, layout-stable shell.
+
+deliverables:
+
+- `src/components/YaziPaneRow.tsx` — new component: props `parent`, `current`, `preview` (Solid JSX/accessors), `parentLabel`, `currentLabel`, `previewLabel`, `focused` (boolean, defaults to current)
+- `src/utils/navigation.ts` — `PANE_RATIO` updated to `{ parent: 1, current: 3, preview: 3 }` (was `{ parent: 1, current: 4, preview: 3 }`)
+- Each pane: bordered `scrollbox` + slim header label row (height=1)
+- Parent pane keeps its 1/7 `flexGrow` slot even when empty (renders a muted placeholder, never `width:0`)
+- Focus ring (border color = accent on current; muted `border` on parent & preview)
+
+steps:
+
+- Set `PANE_RATIO = { parent: 1, current: 3, preview: 3 }` in `utils/navigation.ts`
+- Create `YaziPaneRow.tsx` exporting a component that lays out three `<box flexGrow={PANE_RATIO.x}>` columns in a row
+- Each column: a height-1 header `<box>` with the label text, then a `<scrollbox height="100%" border borderColor=…>` rendering the passed children
+- Thread a `theme` via `useTheme()` inside the primitive (don't require callers to pass colors)
+- `focused` prop controls which column gets the accent border — default current; parent & preview always muted
+- Ensure the parent column renders a muted placeholder box (e.g. a single `<text fg={muted}>—</text>` or empty) when its children are null, but critically keeps `flexGrow={PANE_RATIO.parent}` so width never collapses
+- Add a JSDoc header describing the yazi 1:3:3 contract
+- Run diagnostics on the new file
+
+tests:
+
+- Unit: the primitive renders three boxes with flexGrow 1/3/3 regardless of null children (Arrange null parent, render, Assert three columns present with correct flexGrow)
+- Integration: toggling `focused` swaps the accent border onto the requested column
+- e2e (harness): a page using the primitive shows three equal-ratio columns with the parent column visibly non-zero width even when blank
+
+acceptance_criteria:
+
+- `PANE_RATIO` is `{ parent: 1, current: 3, preview: 3 }`
+- `YaziPaneRow` accepts parent/current/preview children + labels + focused
+- Parent column width never collapses to 0 (stable 1/7 slot)
+- Only the focused column shows the accent border
+
+validation:
+
+- `grep -n "PANE_RATIO" src/utils/navigation.ts` shows the new 1:3:3 values
+- `lens_diagnostics` paths=[`src/components/YaziPaneRow.tsx`,`src/utils/navigation.ts`] severity=error → 0 findings
+- Harness: render a throwaway page using `<YaziPaneRow>`; confirm 3 columns at 1:3:3 via the frame
+
+notes:
+
+- Independent of task 01 (no nav-state dependency) — can be built in parallel
+- Callers (tasks 03/04) pass their own parent/current/preview JSX; the primitive is purely structural
+- opentui scrollbox: use `focused` only on the current pane so scroll focus follows the cursor

tasks/yazi-remake/03-convert-list-tabs-to-primitive.md

@@ -0,0 +1,58 @@
+# 03. Convert Feed/MyShows/Discover/Settings to the shared parent|current|preview primitive
+
+meta:
+  id: yazi-remake-03
+  feature: yazi-remake
+  priority: P2
+  depends_on: [yazi-remake-01, yazi-remake-02]
+  tags: [implementation, pages, tests-required]
+
+objective:
+
+- Rewrite the four depth-stack list tabs to render through `<YaziPaneRow>`, with the previous-depth list now visible in the parent pane (blank at depth 0), the current-depth list in current, and the hovered item in preview — eliminating per-page bespoke 3-column JSX.
+
+deliverables:
+
+- `src/pages/Feed/FeedPage.tsx` — rewritten to use `<YaziPaneRow>`; parent = previous-depth list, current = current-depth list, preview = hovered item detail
+- `src/pages/MyShows/MyShowsPage.tsx` — same conversion
+- `src/pages/Discover/DiscoverPage.tsx` — same conversion
+- `src/pages/Settings/SettingsPage.tsx` — same conversion (sections → items → editor)
+- Each page's `nav.action` handler retained but only acts on the current pane
+- All per-page bespoke row/flexbox 3-column JSX removed
+
+steps:
+
+- For each of the four pages, read the current implementation to extract the parent/current/preview content builders
+- Wrap the page body in `<YaziPaneRow parent={…} current={…} preview={…} focused={isActive} />`
+- Parent pane: render the previous-depth frame's list (depth-1). At depth 0 the parent receives null/placeholder (the primitive keeps the slot)
+- Current pane: the current-depth list, focusable, with `onMouseDown` row handlers calling `nav.setActivePane(DEPTH_CENTER_PANE)` + `nav.setDepthFocus(i, depth)`
+- Preview pane: hovered-item detail derived from `focusedIndex(DEPTH_CENTER_PANE)` (unchanged logic, just relocated into the preview slot)
+- Keep `pushDepth`/`popDepth` calls in the `open` action (drill) — behaviour unchanged, only layout changes
+- Remove the old inline `<box flexGrow={PANE_RATIO.parent/current/preview}>` columns in favour of the primitive
+- Verify each page's `nav.action` handler guards on `data.pane === DEPTH_CENTER_PANE && nav.activePane() === DEPTH_CENTER_PANE`
+
+tests:
+
+- Unit: each page's `open` action pushes a frame and the parent pane switches from blank to the previous list (Arrange depth 0, Act open, Assert stack length 2 and parent renders the old list)
+- Integration: `h` (pop) returns parent to blank at depth 0; `l` (drill) populates parent with the previous list
+- e2e (harness): Feed depth 0→1→2 shows parent blank → previous feeds list → previous episodes list; Settings sections→items→editor shows the chain in the parent pane
+
+acceptance_criteria:
+
+- All four pages render via `<YaziPaneRow>` (no bespoke 3-column JSX remains)
+- Parent pane is blank at depth 0, populated at depth ≥ 1
+- Drilling (l/Enter) populates the parent with the previous-depth list
+- Popping (h) empties the parent back to blank at depth 0
+- j/k move focus only within the current pane
+
+validation:
+
+- `grep -rn "YaziPaneRow" src/pages/` returns 4 files
+- `lens_diagnostics` paths over the four page files severity=error → 0 findings
+- Harness walk: `init` → navigate Feed → `l` (drill) → `l` (drill) → `h` (pop) → `h` (pop); confirm parent slot transitions blank→list→list→blank
+
+notes:
+
+- Depends on 01 (pane model) and 02 (the primitive) being merged
+- The already-working `<Show when={item}>{(item) => (… item() …)}</Show>` accessor pattern for opentui `<Show>` callbacks must be preserved in preview panes
+- Keep `LoadingIndicator` usages where they exist

tasks/yazi-remake/04-fit-search-and-player-panes.md

@@ -0,0 +1,52 @@
+# 04. Fit Search and Player into the 3-pane (1:3:3) model
+
+meta:
+  id: yazi-remake-04
+  feature: yazi-remake
+  priority: P2
+  depends_on: [yazi-remake-01, yazi-remake-02]
+  tags: [implementation, pages, tests-required]
+
+objective:
+
+- Bring the two fixed-layout tabs (Search, Player) into the same 1:3:3 parent|current|preview shell, deciding per-page whether to adopt the depth-stack or stay fixed-3-pane, while applying the new ratios throughout.
+
+deliverables:
+
+- `src/pages/Search/SearchPage.tsx` — rendered through `<YaziPaneRow>`; parent = query input + recent-search history, current = results list, preview = focused-result detail
+- `src/pages/Player/PlayerPage.tsx` — rendered through `<YaziPaneRow>`; current = now-playing transport, preview = episode description/notes, parent = blank placeholder (or compact episode list if available)
+- Decision recorded in each file's header comment: depth-stack vs fixed-3-pane
+
+steps:
+
+- Read both pages to understand their current pane semantics
+- Search: map INPUT→parent, RESULTS→current, DETAIL→preview inside `<YaziPaneRow>`. If the 1/7 parent slot is too narrow for the input box, widen parent for Search only by passing an override ratio OR move the query into current and results into parent — pick the option that keeps the input usable and document it
+- Search: keep the `inputFocused` effect (Shell yields keys to `<input>` when current-pane focus is on the query) — adapt to whichever pane the input lives in
+- Player: single content pane; parent = blank/placeholder (1/7), current = transport + progress + controls (3/7), preview = episode art/description/notes (3/7). If no preview data, render a muted placeholder but keep the slot
+- Confirm fixed-pane tab swipe (h/l between parent/current/preview) still routes correctly for Search
+- Run diagnostics
+
+tests:
+
+- Unit: Search's `handleSubmit` swipes to the results pane and sets focus index 0 (Arrange empty results, Act submit, Assert activePane === results pane & focusedIndex 0)
+- Integration: Player renders with parent blank and the transport in current
+- e2e (harness): Search shows query | results | detail at 1:3:3; Player shows blank | transport | notes at 1:3:3
+
+acceptance_criteria:
+
+- Both pages render via `<YaziPaneRow>` at 1:3:3
+- Search input remains typeable (Shell yields keys when the query pane is focused)
+- Player's transport is in the current pane with focus
+- No layout collapse: parent & preview keep their slots even if blank
+
+validation:
+
+- `grep -rn "YaziPaneRow" src/pages/Search src/pages/Player` returns 2 files
+- `lens_diagnostics` paths over both files severity=error → 0 findings
+- Harness: navigate to Search, type a query, press Enter, see results in current + detail in preview; navigate to Player, see transport + notes
+
+notes:
+
+- Depends on 01 (pane model — though Search is fixed-pane, the model cleanup affects `swipe` bounds) and 02 (the primitive)
+- If Search input at 1/7 is genuinely too tight (~14 cols at 100w), prefer moving the query into the current pane for Search only and the results into parent — but confirm width with the harness before committing
+- Player is single-content; the 1:3:3 with blanks is mostly cosmetic but keeps the layout globally consistent

tasks/yazi-remake/05-rebuild-shell-chrome.md

@@ -0,0 +1,56 @@
+# 05. Rebuild Shell chrome — drop sidebar, add yazi bottom status/tab bar
+
+meta:
+  id: yazi-remake-05
+  feature: yazi-remake
+  priority: P1
+  depends_on: [yazi-remake-01]
+  tags: [implementation, shell-chrome, tests-required]
+
+objective:
+
+- Remove the always-on left tab sidebar entirely and replace it with a full-width page area above a slim yazi-style bottom bar that surfaces the active tab, depth/counts, selection, now-playing, and a discoverable tab strip.
+
+deliverables:
+
+- `src/components/Shell.tsx` — sidebar JSX deleted; render `LayerGraph[tab]()` full-width + a rebuilt bottom status/command bar
+- Bottom bar (normal mode): mode label, `TAB_LABEL[tab] · depth N · i/len` (or `pane i/n` for fixed tabs), selection count `●N`, now-playing `♪ title`, pending-keybind hint, and a compact tab strip `[1]Feed [2]MyShows …` with the active tab marked
+- Bottom bar (command mode): `:` prompt + buffer + error (unchanged, just relocated if needed)
+- Help overlay kept; now-playing relocated from the old sidebar footer into the status bar
+
+steps:
+
+- Read `Shell.tsx` and delete the entire left tab sidebar `<box flexDirection="column" width={14}>…` block
+- Replace the middle row with a single full-width `<box flexGrow={1}>{LayerGraph[nav.activeTab()]()}</box>`
+- Rebuild the bottom bar: a height-1 `<box flexDirection="row">` with the fragments described above
+- Tab strip: render `Object.values(TABS)` filtered to numbers; for each tab show `[N] Label` with the active tab inverted/highlighted (accent bg or `≡` marker)
+- Status fragment: `nav.activePane() === DEPTH_CENTER_PANE ? (isDepthTab ? \`depth ${currentDepth()}\` : \`pane ${activePane()+1}/${count}\`) : 'tabs'` — but since the sidebar is gone, default to the depth/pane string (focus starts on current)
+- Relocate `nowPlaying()` text from the sidebar footer into the bottom bar
+- Keep `runCommand`, `handleCommandKey`, the help overlay, and `playEpisodeAndSwitch` untouched
+- Run diagnostics
+
+tests:
+
+- Unit: `nowPlaying()` formats `♪ <truncated title>` (Arrange a current episode, Assert the string)
+- Integration: switching tabs updates the tab strip's active marker and the status tab label
+- e2e (harness): `init` shows no left sidebar, a full-width page, and a bottom bar containing the tab strip + `Feed · depth 0`; cycling tabs moves the strip's active marker
+
+acceptance_criteria:
+
+- No `width={14}` sidebar `<box>` remains in `Shell.tsx`
+- The active page fills the full content width
+- The bottom bar shows the active tab, depth, counts, selection, now-playing, and the tab strip
+- The active tab is visually marked in the strip
+
+validation:
+
+- `grep -n "width={14}" src/components/Shell.tsx` returns nothing
+- `grep -n "LayerGraph" src/components/Shell.tsx` shows the full-width render
+- `lens_diagnostics` paths=[`src/components/Shell.tsx`] severity=error → 0 findings
+- Harness: `init` frame has no sidebar column and shows the tab strip in the last row
+
+notes:
+
+- Depends on 01 (the pane model: focus starts on current, so the status fragment no longer needs the `SIDEBAR_PANE` branch)
+- Task 06 rewrites the dispatch keybinds in this same file; do the chrome here and leave the dispatch `SIDEBAR_ACTIONS` branch for 06 to remove (or remove it here if 01 already deleted the constant — coordinate with 01)
+- `playEpisodeAndSwitch` and the command bar must keep working

tasks/yazi-remake/06-rewire-keybinds.md

@@ -0,0 +1,56 @@
+# 06. Rewire keybinds — h/l drill+pop, digits switch tabs, focus starts on current
+
+meta:
+  id: yazi-remake-06
+  feature: yazi-remake
+  priority: P1
+  depends_on: [yazi-remake-01, yazi-remake-05]
+  tags: [implementation, keybinds, tests-required]
+
+objective:
+
+- Rewire the Shell dispatch so the sidebar's special-cased j/k branch is gone, h/l drill/pop on depth-tabs and swipe on fixed tabs, digit keys + `[ ]` are the sole tab switcher, and app focus starts on the current pane.
+
+deliverables:
+
+- `src/components/Shell.tsx` (dispatch) — `SIDEBAR_ACTIONS` set + the `if (nav.activePane() === SIDEBAR_PANE)` branch deleted
+- `h`/`l` unified: depth-tabs `l`=current-drills (`open` emit), `h`=current-pops (noop at depth 0); fixed-pane tabs `h/l`=`swipe(∓1, count)`
+- `1`-`6` / `tab-goto-*`, `tab-next`/`tab-prev` (`[`/`]`) — the only tab switchers
+- Initial focus + tab-enter land on `DEPTH_CENTER_PANE`
+- `keybinds.jsonc` reviewed (update labels/help only if needed)
+
+steps:
+
+- Read the current `dispatch()` (post task 01 it references a deleted `SIDEBAR_PANE` — fix the compile here)
+- Remove the `SIDEBAR_ACTIONS` constant and its branch
+- In the `default` case, implement: digit/tab-goto → `setActiveTab`; `swipe-prev` → (depth-tab & current & depth>0) `popDepth` else (depth-tab & current & depth==0) noop else `swipe(-1, count)`; `swipe-next` → (depth-tab & current) emit `open` else `swipe(1, count)`
+- Move/list actions (`move-down/up`, `jump-*`, `page-*`, `goto-top/bottom`) flow to `PAGE_ACTIONS` → `emit("nav.action")` for the current pane only
+- Confirm `escape`/`command`/`visual-mode`/`toggle-select`/audio/global branches unchanged
+- Verify the app boot path sets focus to current (task 01 set the signal; confirm dispatch doesn't override)
+- Run diagnostics + harness key sequence
+
+tests:
+
+- Unit: `dispatch("move-down")` on a depth-tab current pane emits `nav.action {action:"move-down"}` (Arrange current pane, Act, Assert emit)
+- Integration: `dispatch("swipe-next")` on a depth-tab at depth 0 emits `open` (drill); `dispatch("swipe-prev")` at depth 1 pops to depth 0; at depth 0 `swipe-prev` is a noop
+- e2e (harness): `l` drills (depth 0→1, parent populates), `h` pops (1→0, parent blanks), `1`/`2`/`3` switch tabs, `j`/`k` move the current list cursor without changing depth
+
+acceptance_criteria:
+
+- No `SIDEBAR_PANE` or `SIDEBAR_ACTIONS` references in `Shell.tsx`
+- `h` at depth 0 is a noop (does not error, does not change pane)
+- `l` at current on a depth-tab drills (depth+1)
+- Digit keys switch tabs; focus lands on current pane
+- `j`/`k` move within current only
+
+validation:
+
+- `grep -n "SIDEBAR" src/components/Shell.tsx` returns nothing
+- `lens_diagnostics` paths=[`src/components/Shell.tsx`] severity=error → 0 findings
+- Harness: `init` (focus on current) → `l` (depth 1, parent filled) → `l` (depth 2) → `h` (depth 1) → `h` (depth 0, parent blank) → `3` (Discover tab, focus on current) → `j`/`k` move
+
+notes:
+
+- Depends on 01 (pane model: `swipe` bounds, no SIDEBAR) and 05 (dispatch lives in the rebuilt Shell)
+- If `keybinds.jsonc` has a `tab-next`/`tab-prev` mapping conflict, resolve here
+- The noop `h` at depth 0 should feel inert (yazi: at root, `h` does nothing)

tasks/yazi-remake/07-verify-remake.md

@@ -0,0 +1,60 @@
+# 07. Verify the remake — build + diagnostics + harness walk-through
+
+meta:
+  id: yazi-remake-07
+  feature: yazi-remake
+  priority: P1
+  depends_on: [yazi-remake-03, yazi-remake-04, yazi-remake-05, yazi-remake-06]
+  tags: [verification, tests-required]
+
+objective:
+
+- Confirm the yazi remake meets every exit criterion via a clean build, zero diagnostics, and a full harness walk-through of every tab and depth.
+
+deliverables:
+
+- A passing `bun run build`
+- `lens_diagnostics mode=all` with zero errors across edited files
+- Harness frames + state proving the parent|current|preview 1:3:3 layout, drill/pop behaviour, tab switching, and status bar across all six tabs
+
+steps:
+
+- Run `bun run build` — expect "Build complete"
+- Run `lens_diagnostics mode=all severity=error` — expect 0 findings across all session-edited files
+- Run the drive harness (`scripts/tui-harness.tsx`) walk-through:
+  - `init` → confirm no sidebar, 3 columns at 1:3:3, focus on current, bottom tab strip visible
+  - Feed: `l` (depth 0→1, parent fills) → `l` (1→2) → `h` (2→1) → `h` (1→0, parent blanks) ; `j`/`k` move current
+  - `2` → MyShows: drill show→episodes, parent reflects
+  - `3` → Discover: category→results, parent shows categories
+  - `6` → Settings: sections→items→editor, parent shows the previous list at each depth
+  - `4` → Search: query|results|detail at 1:3:3; type + Enter works
+  - `5` → Player: blank|transport|notes at 1:3:3
+- Capture the status bar content (active tab + depth + counts + now-playing + tab strip) from a representative frame
+
+tests:
+
+- Build: `bun run build` exits 0 with "Build complete"
+- Diagnostics: `lens_diagnostics` mode=all → 0 errors
+- Harness (integration/e2e): the walk-through above produces the expected frames & state (parent blank at depth 0, populates on drill, blanks on pop; digits switch tabs; h noop at depth 0)
+
+acceptance_criteria:
+
+- `bun run build` passes
+- `lens_diagnostics` mode=all reports zero errors
+- All six tabs render 3 stable columns at 1:3:3
+- Parent pane is blank at depth 0; drill fills it with the previous-depth list; pop empties it
+- `h` is a noop at depth 0; `l` drills; `1-6`/`[`/`]` switch tabs; `j/k` move current only
+- No sidebar; focus starts on current; bottom bar shows active tab + depth + counts + tab strip
+
+validation:
+
+- `bun run build 2>&1 | tail -3` → "Build complete"
+- `lens_diagnostics` mode=all severity=error → "No error issues…"
+- Harness `state nav` after `init` shows `pane === 0` (current), not -1
+- Harness frames for Feed depth 0/1/2 show the parent slot transition blank→list→list
+
+notes:
+
+- This is the gate for the whole feature — do not mark done if any criterion fails; open a blocker task instead
+- If the harness reveals a visual regression (e.g. parent collapses, ratios off), file it against the responsible task (02 or 03) rather than patching here
+- Save a representative `.harness/last-frame.txt` snapshot if a visual reference is useful for future sessions

tasks/yazi-remake/README.md

@@ -0,0 +1,40 @@
+# Yazi UI Remake
+
+Objective: Remake the PodTUI shell into a yazi-pure parent|current|preview 3-pane layout (1:3:3 ratio) with a bottom tab strip and no always-on sidebar.
+
+Status legend: [ ] todo, [~] in-progress, [x] done
+
+## Tasks
+
+- [ ] 01 — rearchitect-nav-model → `01-rearchitect-nav-model.md`
+- [ ] 02 — build-three-pane-layout-primitive → `02-build-three-pane-layout-primitive.md`
+- [ ] 03 — convert-list-tabs-to-primitive → `03-convert-list-tabs-to-primitive.md`
+- [ ] 04 — fit-search-and-player-panes → `04-fit-search-and-player-panes.md`
+- [ ] 05 — rebuild-shell-chrome → `05-rebuild-shell-chrome.md`
+- [ ] 06 — rewire-keybinds → `06-rewire-keybinds.md`
+- [ ] 07 — verify-remake → `07-verify-remake.md`
+
+## Dependencies
+
+- 03 depends on 01
+- 03 depends on 02
+- 04 depends on 01
+- 04 depends on 02
+- 05 depends on 01
+- 06 depends on 01
+- 06 depends on 05
+- 07 depends on 03
+- 07 depends on 04
+- 07 depends on 05
+- 07 depends on 06
+
+## Exit criteria
+
+- The feature is complete when the left tab sidebar is gone; tabs switch only via digit keys `1-6` / `[ ]` and a bottom tab strip
+- All tabs render three stable columns at 1/7 : 3/7 : 3/7 (parent | current | preview)
+- The parent pane renders the previous-depth list and is blank (but keeps its 1/7 slot) at depth 0
+- `h`/`l` drill (push) and pop depths on list tabs; `h` is a noop at depth 0
+- `j`/`k` move within the current pane only; focus starts on the current pane
+- Feed depth 0→1→2, MyShows, Discover, Settings (sections→items→editor), Search, and Player all render correctly via the drive harness
+- `bun run build` passes and `lens_diagnostics` (mode=all) reports zero errors
+- The bottom status bar shows active tab + depth + counts, selection count, now-playing, and the tab strip

tests/keybind-matcher.test.ts

@@ -0,0 +1,131 @@
+import { parseStroke, parseBindingSpec } from "../src/context/KeybindContext";
+
+const cfg = {
+	"move-down": parseBindingSpec(["j", "down"]),
+	"move-up": parseBindingSpec(["k", "up"]),
+	"goto-top": parseBindingSpec([["g", "g"]]),
+	"goto-bottom": parseBindingSpec(["G"]),
+	"toggle-select": parseBindingSpec(["space"]),
+	"swipe-prev": parseBindingSpec(["h", "left"]),
+	"audio-toggle": parseBindingSpec(["P"]),
+	"audio-seek-forward": parseBindingSpec(["shift-."]),
+	"audio-seek-backward": parseBindingSpec(["shift-,"]),
+	sort: parseBindingSpec([","]),
+	quit: parseBindingSpec(["q"]),
+	command: parseBindingSpec([":"]),
+	"tab-next": parseBindingSpec(["]"]),
+} as Record<string, ReturnType<typeof parseBindingSpec>>;
+
+function eq(a: any, b: any) {
+	return (
+		a.key === b.key &&
+		!!a.ctrl === !!b.ctrl &&
+		!!a.shift === !!b.shift &&
+		!!a.meta === !!b.meta
+	);
+}
+function classify(candidate: any[]) {
+	const exact: string[] = [];
+	const prefix: string[] = [];
+	for (const name of Object.keys(cfg)) {
+		for (const seq of cfg[name]) {
+			if (seq.length < candidate.length) continue;
+			let p = true;
+			for (let i = 0; i < candidate.length; i++)
+				if (!eq(seq[i], candidate[i])) {
+					p = false;
+					break;
+				}
+			if (!p) continue;
+			if (seq.length === candidate.length) exact.push(name);
+			else prefix.push(name);
+		}
+	}
+	return { exact, prefix };
+}
+function longest(names: string[]) {
+	let best = names[0],
+		bl = 0;
+	for (const n of names)
+		for (const s of cfg[n])
+			if (s.length > bl) {
+				bl = s.length;
+				best = n;
+			}
+	return best;
+}
+function sim(strokes: any[]) {
+	let pending: any[] = [];
+	let fired: string | null = null;
+	for (const st of strokes) {
+		const cand = [...pending, st];
+		const { exact, prefix } = classify(cand);
+		if (prefix.length > 0) {
+			pending = cand;
+			continue;
+		}
+		if (exact.length === 0) {
+			const fresh = classify([st]);
+			if (fresh.prefix.length > 0) {
+				pending = [st];
+				continue;
+			}
+			if (fresh.exact.length > 0) fired = longest(fresh.exact);
+			else fired = null;
+		} else fired = longest(exact);
+		pending = [];
+	}
+	return fired;
+}
+const E = (k: string, o: any = {}) => ({ key: k, ...o });
+
+let pass = 0,
+	fail = 0;
+function check(label: string, got: string | null, want: string | null) {
+	const ok = got === want;
+	if (ok) pass++;
+	else fail++;
+	console.log(
+		`${ok ? "PASS" : "FAIL"}  ${label}  => ${got}${ok ? "" : ` (want ${want})`}`,
+	);
+}
+
+check("j -> move-down", sim([E("j")]), "move-down");
+check("down -> move-down", sim([E("down")]), "move-down");
+check("gg -> goto-top", sim([E("g"), E("g")]), "goto-top");
+check("G -> goto-bottom", sim([E("g", { shift: true })]), "goto-bottom");
+check("space -> toggle-select", sim([E("space")]), "toggle-select");
+check("q -> quit", sim([E("q")]), "quit");
+check(": -> command", sim([E(":")]), "command");
+check("] -> tab-next", sim([E("]")]), "tab-next");
+check(
+	"shift+p -> audio-toggle",
+	sim([E("p", { shift: true })]),
+	"audio-toggle",
+);
+check("plain p -> null", sim([E("p")]), null);
+check(
+	"shift+, -> audio-seek-backward",
+	sim([E(",", { shift: true })]),
+	"audio-seek-backward",
+);
+check(", -> sort", sim([E(",")]), "sort");
+check(
+	"shift+. -> audio-seek-forward",
+	sim([E(".", { shift: true })]),
+	"audio-seek-forward",
+);
+check(
+	"g then j -> move-down (timeout-ish fallthrough)",
+	sim([E("g"), E("j")]),
+	"move-down",
+);
+
+console.log(
+	parseStroke("ctrl-d"),
+	parseStroke("G"),
+	parseStroke(">"),
+	parseStroke("shift-return"),
+);
+console.log(`\n${pass} passed, ${fail} failed`);
+if (fail > 0) process.exit(1);

tsconfig.json

@@ -12,8 +12,8 @@
     "types": ["bun-types"],
     "baseUrl": ".",
     "paths": {
-      "@/*": ["src/*"],
+      "@/*": ["src/*"]
     }
   },
-  "include": ["src/**/*", "tests/**/*"]
+  "include": ["src/**/*", "tests/**/*", "scripts/**/*"]
 }