Auto-commit 2026-03-11 16:27

- Changed nextPane/prevPane to use current tab's pane count instead of global TabsCount
- Added Page-specific pane counts mapping for accurate depth calculation
- Pages with 1 pane (Feed, Player) now skip depth navigation
- Fixed wrapping logic to respect each page's layout structure

.gitignore

@@ -27,10 +27,8 @@ report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 .eslintcache
 .cache
 *.tsbuildinfo
-*.lockb
+*.lock
 
-# IntelliJ based IDEs
-.idea
 
 # Finder (MacOS) folder config
 .DS_Store

AGENTS.md

@@ -0,0 +1,97 @@
+# AGENTS.md
+
+## Build, Lint, and Test Commands
+
+### Development
+- `bun start` - Run the application
+- `bun run dev` - Run with hot reload (watch mode)
+
+### Build
+- `bun run build` - Build JavaScript bundle to `dist/`
+- `bun run build:native` - Build native libraries (requires `scripts/build-cavacore.sh`)
+
+### Testing
+- `bun test` - Run all tests
+- `bun tests/cavacore-smoke.ts` - Run specific native library smoke test
+
+### Linting
+- `bun run lint` - Run ESLint with TypeScript rules
+
+## Code Style Guidelines
+
+### TypeScript Configuration
+- Target: ESNext with bundler module resolution
+- Strict mode enabled
+- Path alias: `@/*` maps to `src/*`
+- JSX: Use `@opentui/solid` as import source
+
+### Import Organization
+1. Third-party framework imports (solid-js, @opentui/solid)
+2. Local utility imports
+3. Type imports (separate from value imports)
+
+### Naming Conventions
+- **Components**: PascalCase (e.g., `FeedPage`, `Player`)
+- **Hooks**: `use*` prefix (e.g., `useAudio`, `useAppKeyboard`)
+- **Stores**: `create*` factory + `use*` accessor (e.g., `createFeedStore`, `useFeedStore`)
+- **Utilities**: camelCase (e.g., `parseRSSFeed`, `detectPlayers`)
+- **Constants**: UPPER_SNAKE_CASE (e.g., `MAX_EPISODES_REFRESH`)
+- **Types/interfaces**: PascalCase (e.g., `Feed`, `AudioBackend`)
+- **Enums**: PascalCase (e.g., `FeedVisibility`)
+
+### Code Structure
+- **Section Dividers**: Use `// ── Section Name ────────────────────────────────────────────────────────────` format
+- **Helper Functions**: Define before main logic
+- **Factory Functions**: Use for store creation (return object with state, computed, actions)
+- **Singleton Pattern**: Stores use module-level singleton with `use*` accessor
+
+### Type Definitions
+- Use `interface` for object shapes
+- Use `type` for unions, intersections, and complex types
+- Use `enum` for constant sets
+- Export types from `src/types/` directory
+- Include JSDoc comments for complex types
+
+### Error Handling
+- Use `try/catch` for async operations
+- For expected failures, use `.catch(() => {})` to suppress errors
+- Return default values on failure (e.g., `return []` or `return null`)
+- Use `catch` blocks with descriptive comments for unexpected errors
+- For UI components, wrap in `ErrorBoundary` with clear fallback
+
+### Async Patterns
+- Fire-and-forget async operations: `.catch(() => {})` with comment
+- Async store initialization: IIFE `(async () => { ... })()`
+- Promise handling: Use `.catch()` to return defaults
+
+### Comments
+- **File headers**: Brief description of file purpose
+- **Complex functions**: JSDoc-style comments explaining behavior
+- **Section dividers**: Visual separators for code organization
+- **Inline comments**: Explain non-obvious logic, especially async patterns
+
+### Code Formatting
+- 2-space indentation
+- No semicolons (Bun style)
+- Arrow functions with implicit return where appropriate
+- Object shorthand where possible
+- Prefer `const` over `let`
+
+### Reactivity (Solid.js)
+- Use `createSignal` for primitive state
+- Use `createMemo` for computed values
+- Use `createEffect` for side effects
+- Component functions return JSX
+- Store functions return plain objects with state, computed, and actions
+
+### Persistence
+- Async persistence operations fire-and-forget
+- Use `.catch(() => {})` to suppress errors
+- Update state synchronously, persist asynchronously
+- Use `setFeeds()` pattern to update state and trigger save
+
+### Testing
+- Test files in `tests/` directory
+- Use Bun's test framework
+- Include JSDoc comments explaining test purpose
+- Native library tests use `bun:ffi` for FFI calls

build.ts

@@ -44,4 +44,19 @@ if (platformPkg) {
   }
 }
 
+// Copy cavacore native library to dist
+const cavacoreLib = platform === "darwin"
+  ? "libcavacore.dylib"
+  : platform === "win32"
+    ? "cavacore.dll"
+    : "libcavacore.so"
+const cavacoreSrc = join("src", "native", cavacoreLib)
+
+if (existsSync(cavacoreSrc)) {
+  copyFileSync(cavacoreSrc, join("dist", cavacoreLib))
+  console.log(`Copied cavacore library: ${cavacoreLib}`)
+} else {
+  console.warn(`Warning: ${cavacoreSrc} not found — run scripts/build-cavacore.sh first`)
+}
+
 console.log("Build complete")

package.json

@@ -1,5 +1,6 @@
 {
   "name": "podcast-tui-app",
+  "version": "0.1.0",
   "module": "src/index.tsx",
   "type": "module",
   "private": true,
@@ -9,6 +10,7 @@
   "scripts": {
     "start": "bun src/index.tsx",
     "dev": "bun --watch src/index.tsx",
+    "build:native": "bash scripts/build-cavacore.sh",
     "build": "bun run build.ts",
     "dist": "bun dist/index.js",
     "test": "bun test",

scripts/build-cavacore.sh

@@ -0,0 +1,79 @@
+#!/usr/bin/env bash
+#
+# Build cavacore as a shared library with fftw3 statically linked.
+#
+# Prerequisites:
+#   macOS:  brew install fftw
+#   Linux:  apt install libfftw3-dev  (or equivalent)
+#
+# Output: src/native/libcavacore.{dylib,so}
+
+set -euo pipefail
+
+ROOT="$(cd "$(dirname "$0")/.." && pwd)"
+SRC="$ROOT/cava/cavacore.c"
+OUT_DIR="$ROOT/src/native"
+
+mkdir -p "$OUT_DIR"
+
+OS="$(uname -s)"
+ARCH="$(uname -m)"
+
+# Resolve fftw3 paths
+if [ "$OS" = "Darwin" ]; then
+  if [ "$ARCH" = "arm64" ]; then
+    FFTW_PREFIX="${FFTW_PREFIX:-/opt/homebrew}"
+  else
+    FFTW_PREFIX="${FFTW_PREFIX:-/usr/local}"
+  fi
+  LIB_EXT="dylib"
+  SHARED_FLAG="-dynamiclib"
+  INSTALL_NAME="-install_name @rpath/libcavacore.dylib"
+else
+  FFTW_PREFIX="${FFTW_PREFIX:-/usr}"
+  LIB_EXT="so"
+  SHARED_FLAG="-shared"
+  INSTALL_NAME=""
+fi
+
+FFTW_INCLUDE="$FFTW_PREFIX/include"
+FFTW_STATIC="$FFTW_PREFIX/lib/libfftw3.a"
+
+if [ ! -f "$FFTW_STATIC" ]; then
+  echo "Error: libfftw3.a not found at $FFTW_STATIC"
+  echo "Install fftw3: brew install fftw (macOS) or apt install libfftw3-dev (Linux)"
+  exit 1
+fi
+
+if [ ! -f "$SRC" ]; then
+  echo "Error: cavacore.c not found at $SRC"
+  echo "Ensure the cava submodule is initialized: git submodule update --init"
+  exit 1
+fi
+
+OUT="$OUT_DIR/libcavacore.$LIB_EXT"
+
+echo "Building libcavacore.$LIB_EXT ($OS $ARCH)"
+echo "  Source:  $SRC"
+echo "  FFTW3:   $FFTW_STATIC"
+echo "  Output:  $OUT"
+
+cc -O2 \
+  $SHARED_FLAG \
+  $INSTALL_NAME \
+  -fPIC \
+  -I"$FFTW_INCLUDE" \
+  -I"$ROOT/cava" \
+  -o "$OUT" \
+  "$SRC" \
+  "$FFTW_STATIC" \
+  -lm
+
+echo "Built: $OUT"
+
+# Verify exported symbols
+if [ "$OS" = "Darwin" ]; then
+  echo ""
+  echo "Exported symbols:"
+  nm -gU "$OUT" | grep "cava_"
+fi

src/App.tsx

@@ -1,208 +1,194 @@
-import { createSignal, ErrorBoundary } from "solid-js";
-import { Layout } from "./components/Layout";
-import { Navigation } from "./components/Navigation";
+import { createMemo, ErrorBoundary, Accessor } from "solid-js";
+import { useKeyboard, useSelectionHandler } from "@opentui/solid";
 import { TabNavigation } from "./components/TabNavigation";
-import { FeedList } from "./components/FeedList";
-import { LoginScreen } from "./components/LoginScreen";
-import { CodeValidation } from "./components/CodeValidation";
-import { OAuthPlaceholder } from "./components/OAuthPlaceholder";
-import { SyncProfile } from "./components/SyncProfile";
-import { SearchPage } from "./components/SearchPage";
-import { DiscoverPage } from "./components/DiscoverPage";
-import { Player } from "./components/Player";
-import { SettingsScreen } from "./components/SettingsScreen";
-import { useAuthStore } from "./stores/auth";
-import { useFeedStore } from "./stores/feed";
-import { useAppStore } from "./stores/app";
-import { FeedVisibility } from "./types/feed";
-import { useAppKeyboard } from "./hooks/useAppKeyboard";
-import type { TabId } from "./components/Tab";
-import type { AuthScreen } from "./types/auth";
+import { CodeValidation } from "@/components/CodeValidation";
+import { LoadingIndicator } from "@/components/LoadingIndicator";
+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";
+
+const DEBUG = import.meta.env.DEBUG;
 
 export function App() {
-  const [activeTab, setActiveTab] = createSignal<TabId>("settings");
-  const [authScreen, setAuthScreen] = createSignal<AuthScreen>("login");
-  const [showAuthPanel, setShowAuthPanel] = createSignal(false);
-  const [inputFocused, setInputFocused] = createSignal(false);
-  const [layerDepth, setLayerDepth] = createSignal(0);
+  const nav = useNavigation();
   const auth = useAuthStore();
   const feedStore = useFeedStore();
-  const appStore = useAppStore();
+  const audio = useAudio();
+  const toast = useToast();
+  const renderer = useRenderer();
+  const themeContext = useTheme();
+  const theme = themeContext.theme;
 
-  // Centralized keyboard handler for all tab navigation and shortcuts
-  useAppKeyboard({
-    get activeTab() {
-      return activeTab();
-    },
-    onTabChange: setActiveTab,
-    inputFocused: inputFocused(),
-    navigationEnabled: layerDepth() === 0,
-    layerDepth,
-    onLayerChange: (newDepth) => {
-      setLayerDepth(newDepth);
-    },
-    onAction: (action) => {
-      if (action === "escape") {
-        if (layerDepth() > 0) {
-          setLayerDepth(0);
-          setInputFocused(false);
-        } else {
-          setShowAuthPanel(false);
-          setInputFocused(false);
-        }
-      }
+  // Create a reactive expression for background color
+  const backgroundColor = () => {
+    return themeContext.selected === "system"
+      ? "transparent"
+      : themeContext.theme.surface;
+  };
+  const keybind = useKeybinds();
+  const audioNav = useAudioNavStore();
 
-      if (action === "enter" && layerDepth() === 0) {
-        setLayerDepth(1);
-      }
-    },
+  useMultimediaKeys({
+    playerFocused: () =>
+      nav.activeTab() === TABS.PLAYER && nav.activeDepth() > 0,
+    inputFocused: () => nav.inputFocused(),
+    hasEpisode: () => !!audio.currentEpisode(),
   });
 
-  const renderContent = () => {
-    const tab = activeTab();
-
-    switch (tab) {
-      case "feeds":
-        return (
-          <FeedList
-            focused={layerDepth() > 0}
-            showEpisodeCount={true}
-            showLastUpdated={true}
-            onFocusChange={() => setLayerDepth(0)}
-            onOpenFeed={(feed) => {
-              // Would open feed detail view
-            }}
-          />
-        );
-
-      case "settings":
-        // Show auth panel or sync panel based on state
-        if (showAuthPanel()) {
-          if (auth.isAuthenticated) {
-            return (
-              <SyncProfile
-                focused={layerDepth() > 0}
-                onLogout={() => {
-                  auth.logout();
-                  setShowAuthPanel(false);
-                }}
-                onManageSync={() => setShowAuthPanel(false)}
-              />
-            );
-          }
-
-          switch (authScreen()) {
-            case "code":
-              return (
-                <CodeValidation
-                  focused={layerDepth() > 0}
-                  onBack={() => setAuthScreen("login")}
-                />
-              );
-            case "oauth":
-              return (
-                <OAuthPlaceholder
-                  focused={layerDepth() > 0}
-                  onBack={() => setAuthScreen("login")}
-                  onNavigateToCode={() => setAuthScreen("code")}
-                />
-              );
-            case "login":
-            default:
-              return (
-                <LoginScreen
-                  focused={layerDepth() > 0}
-                  onNavigateToCode={() => setAuthScreen("code")}
-                  onNavigateToOAuth={() => setAuthScreen("oauth")}
-                />
-              );
-          }
-        }
-
-        return (
-          <SettingsScreen
-            onOpenAccount={() => setShowAuthPanel(true)}
-            accountLabel={
-              auth.isAuthenticated
-                ? `Signed in as ${auth.user?.email}`
-                : "Not signed in"
-            }
-            accountStatus={auth.isAuthenticated ? "signed-in" : "signed-out"}
-            onExit={() => setLayerDepth(0)}
-          />
-        );
-
-      case "discover":
-        return (
-          <DiscoverPage
-            focused={layerDepth() > 0}
-            onExit={() => setLayerDepth(0)}
-          />
-        );
-
-      case "search":
-        return (
-          <SearchPage
-            focused={layerDepth() > 0}
-            onInputFocusChange={setInputFocused}
-            onExit={() => setLayerDepth(0)}
-            onSubscribe={(result) => {
-              const feeds = feedStore.feeds();
-              const alreadySubscribed = feeds.some(
-                (feed) =>
-                  feed.podcast.id === result.podcast.id ||
-                  feed.podcast.feedUrl === result.podcast.feedUrl,
-              );
-
-              if (!alreadySubscribed) {
-                feedStore.addFeed(
-                  { ...result.podcast, isSubscribed: true },
-                  result.sourceId,
-                  FeedVisibility.PUBLIC,
-                );
-              }
-            }}
-          />
-        );
-
-      case "player":
-        return (
-          <Player focused={layerDepth() > 0} onExit={() => setLayerDepth(0)} />
-        );
-
-      default:
-        return (
-          <box border style={{ padding: 2 }}>
-            <text>
-              <strong>{tab}</strong>
-              <br />
-              Coming soon
-            </text>
-          </box>
-        );
-    }
+  const handlePlayEpisode = (episode: Episode) => {
+    audio.play(episode);
+    nav.setActiveTab(TABS.PLAYER);
+    nav.setActiveDepth(1);
+    audioNav.setSource(AudioSource.FEED);
   };
 
-  return (
-    <Layout
-      layerDepth={layerDepth()}
-      header={
-        <TabNavigation activeTab={activeTab()} onTabSelect={setActiveTab} />
+  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" });
+      })
+      .catch(toast.error)
+      .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();
+        }
       }
-      footer={<Navigation activeTab={activeTab()} onTabSelect={setActiveTab} />}
+    },
+    { release: false },
+  );
+
+  return (
+    <ErrorBoundary
+      fallback={(err) => (
+        <box border padding={2} borderColor={theme.error}>
+          <text fg={theme.error}>
+            Error: {err?.message ?? String(err)}
+            {"\n"}
+            Press a number key (1-6) to switch tabs.
+          </text>
+        </box>
+      )}
     >
-      <box style={{ padding: 1 }}>
-        <ErrorBoundary fallback={(err) => (
-          <box border padding={2}>
-            <text fg="red">
-              Error rendering tab: {err?.message ?? String(err)}{"\n"}
-              Press a number key (1-5) to switch tabs.
-            </text>
+      <box
+        flexDirection="column"
+        width="100%"
+        height="100%"
+        backgroundColor={
+          themeContext.selected === "system"
+            ? "transparent"
+            : themeContext.theme.surface
+        }
+      >
+        <LoadingIndicator />
+        {DEBUG && (
+          <box flexDirection="row" width="100%" height={1}>
+            <text fg={theme.primary}>█</text>
+            <text fg={theme.secondary}>█</text>
+            <text fg={theme.accent}>█</text>
+            <text fg={theme.error}>█</text>
+            <text fg={theme.warning}>█</text>
+            <text fg={theme.success}>█</text>
+            <text fg={theme.info}>█</text>
+            <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>
-        )}>
-          {renderContent()}
-        </ErrorBoundary>
+        )}
+        <box flexDirection="row" width="100%" height="100%">
+          <TabNavigation />
+          {LayerGraph[nav.activeTab()]()}
+        </box>
       </box>
-    </Layout>
+    </ErrorBoundary>
   );
 }

src/api/rss-parser.ts

@@ -1,11 +1,21 @@
 import type { Podcast } from "../types/podcast"
-import type { Episode } from "../types/episode"
+import type { Episode, EpisodeType } from "../types/episode"
+import { detectContentType, ContentType } from "../utils/rss-content-detector"
+import { htmlToText } from "../utils/html-to-text"
 
 const getTagValue = (xml: string, tag: string): string => {
-  const match = xml.match(new RegExp(`<${tag}[^>]*>([\s\S]*?)</${tag}>`, "i"))
+  const match = xml.match(new RegExp(`<${tag}[^>]*>([\\s\\S]*?)</${tag}>`, "i"))
   return match?.[1]?.trim() ?? ""
 }
 
+/** Get an attribute value from a self-closing or open tag */
+const getAttr = (xml: string, tag: string, attr: string): string => {
+  const tagMatch = xml.match(new RegExp(`<${tag}[^>]*>`, "i"))
+  if (!tagMatch) return ""
+  const attrMatch = tagMatch[0].match(new RegExp(`${attr}\\s*=\\s*["']([^"']*)["']`, "i"))
+  return attrMatch?.[1] ?? ""
+}
+
 const decodeEntities = (value: string) =>
   value
     .replace(/&lt;/g, "<")
@@ -14,30 +24,114 @@ const decodeEntities = (value: string) =>
     .replace(/&quot;/g, '"')
     .replace(/&#39;/g, "'")
 
+/**
+ * Clean a field (description or title): detect HTML vs plain text, and convert
+ * HTML to readable plain text. Plain text just gets entity decoding.
+ */
+const cleanField = (raw: string): string => {
+  if (!raw) return ""
+  const decoded = decodeEntities(raw)
+  const type = detectContentType(decoded)
+  if (type === ContentType.HTML) {
+    return htmlToText(decoded)
+  }
+  return decoded
+}
+
+/**
+ * Parse an itunes:duration value which can be:
+ *   - "HH:MM:SS"
+ *   - "MM:SS"
+ *   - seconds as a plain number string (e.g. "1234")
+ * Returns duration in seconds, or 0 if unparseable.
+ */
+const parseDuration = (raw: string): number => {
+  if (!raw) return 0
+  const trimmed = raw.trim()
+
+  // Pure numeric (seconds)
+  if (/^\d+$/.test(trimmed)) {
+    return parseInt(trimmed, 10)
+  }
+
+  // HH:MM:SS or MM:SS
+  const parts = trimmed.split(":").map(Number)
+  if (parts.some(isNaN)) return 0
+  if (parts.length === 3) {
+    return parts[0] * 3600 + parts[1] * 60 + parts[2]
+  }
+  if (parts.length === 2) {
+    return parts[0] * 60 + parts[1]
+  }
+  return 0
+}
+
+const parseEpisodeType = (raw: string): EpisodeType | undefined => {
+  const lower = raw.trim().toLowerCase()
+  if (lower === "trailer") return "trailer" as EpisodeType
+  if (lower === "bonus") return "bonus" as EpisodeType
+  if (lower === "full") return "full" as EpisodeType
+  return undefined
+}
+
 export const parseRSSFeed = (xml: string, feedUrl: string): Podcast & { episodes: Episode[] } => {
   const channel = xml.match(/<channel[\s\S]*?<\/channel>/i)?.[0] ?? xml
-  const title = decodeEntities(getTagValue(channel, "title")) || "Untitled Podcast"
-  const description = decodeEntities(getTagValue(channel, "description"))
+  const title = cleanField(getTagValue(channel, "title")) || "Untitled Podcast"
+  const description = cleanField(getTagValue(channel, "description"))
   const author = decodeEntities(getTagValue(channel, "itunes:author"))
   const lastUpdated = new Date()
 
   const items = channel.match(/<item[\s\S]*?<\/item>/gi) ?? []
   const episodes = items.map((item, index) => {
-    const epTitle = decodeEntities(getTagValue(item, "title")) || `Episode ${index + 1}`
-    const epDescription = decodeEntities(getTagValue(item, "description"))
+    const epTitle = cleanField(getTagValue(item, "title")) || `Episode ${index + 1}`
+    const epDescription = cleanField(getTagValue(item, "description"))
     const pubDate = new Date(getTagValue(item, "pubDate") || Date.now())
+
+    // Audio URL + file size + MIME type from <enclosure>
     const enclosure = item.match(/<enclosure[^>]*url=["']([^"']+)["'][^>]*>/i)
     const audioUrl = enclosure?.[1] ?? ""
+    const fileSizeStr = getAttr(item, "enclosure", "length")
+    const fileSize = fileSizeStr ? parseInt(fileSizeStr, 10) : undefined
+    const mimeType = getAttr(item, "enclosure", "type") || undefined
 
-    return {
+    // Duration from <itunes:duration>
+    const durationRaw = getTagValue(item, "itunes:duration")
+    const duration = parseDuration(durationRaw)
+
+    // Episode & season numbers
+    const episodeNumRaw = getTagValue(item, "itunes:episode")
+    const episodeNumber = episodeNumRaw ? parseInt(episodeNumRaw, 10) : undefined
+    const seasonNumRaw = getTagValue(item, "itunes:season")
+    const seasonNumber = seasonNumRaw ? parseInt(seasonNumRaw, 10) : undefined
+
+    // Episode type & explicit
+    const episodeType = parseEpisodeType(getTagValue(item, "itunes:episodeType"))
+    const explicitRaw = getTagValue(item, "itunes:explicit").toLowerCase()
+    const explicit = explicitRaw === "yes" || explicitRaw === "true" ? true : undefined
+
+    // Episode image (itunes:image has href attribute)
+    const imageUrl = getAttr(item, "itunes:image", "href") || undefined
+
+    const ep: Episode = {
       id: `${feedUrl}#${index}`,
       podcastId: feedUrl,
       title: epTitle,
       description: epDescription,
       audioUrl,
-      duration: 0,
+      duration,
       pubDate,
     }
+
+    // Only set optional fields if present
+    if (episodeNumber !== undefined && !isNaN(episodeNumber)) ep.episodeNumber = episodeNumber
+    if (seasonNumber !== undefined && !isNaN(seasonNumber)) ep.seasonNumber = seasonNumber
+    if (episodeType) ep.episodeType = episodeType
+    if (explicit !== undefined) ep.explicit = explicit
+    if (imageUrl) ep.imageUrl = imageUrl
+    if (fileSize !== undefined && !isNaN(fileSize) && fileSize > 0) ep.fileSize = fileSize
+    if (mimeType) ep.mimeType = mimeType
+
+    return ep
   })
 
   return {

src/components/BoxLayout.tsx

@@ -1,42 +0,0 @@
-import type { JSX } from "solid-js"
-
-type BoxLayoutProps = {
-  children?: JSX.Element
-  flexDirection?: "row" | "column" | "row-reverse" | "column-reverse"
-  justifyContent?:
-    | "flex-start"
-    | "flex-end"
-    | "center"
-    | "space-between"
-    | "space-around"
-    | "space-evenly"
-  alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline"
-  gap?: number
-  width?: number | "auto" | `${number}%`
-  height?: number | "auto" | `${number}%`
-  padding?: number
-  margin?: number
-  border?: boolean
-  title?: string
-}
-
-export function BoxLayout(props: BoxLayoutProps) {
-  return (
-    <box
-      style={{
-        flexDirection: props.flexDirection,
-        justifyContent: props.justifyContent,
-        alignItems: props.alignItems,
-        gap: props.gap,
-        width: props.width,
-        height: props.height,
-        padding: props.padding,
-        margin: props.margin,
-      }}
-      border={props.border}
-      title={props.title}
-    >
-      {props.children}
-    </box>
-  )
-}

src/components/CategoryFilter.tsx

@@ -1,40 +0,0 @@
-/**
- * CategoryFilter component - Horizontal category filter tabs
- */
-
-import { For } from "solid-js"
-import type { DiscoverCategory } from "../stores/discover"
-
-type CategoryFilterProps = {
-  categories: DiscoverCategory[]
-  selectedCategory: string
-  focused: boolean
-  onSelect?: (categoryId: string) => void
-}
-
-export function CategoryFilter(props: CategoryFilterProps) {
-  return (
-    <box flexDirection="row" gap={1} flexWrap="wrap">
-      <For each={props.categories}>
-        {(category) => {
-          const isSelected = () => props.selectedCategory === category.id
-
-          return (
-            <box
-              padding={0}
-              paddingLeft={1}
-              paddingRight={1}
-              border={isSelected()}
-              backgroundColor={isSelected() ? "#444" : undefined}
-              onMouseDown={() => props.onSelect?.(category.id)}
-            >
-              <text fg={isSelected() ? "cyan" : "gray"}>
-                {category.icon} {category.name}
-              </text>
-            </box>
-          )
-        }}
-      </For>
-    </box>
-  )
-}

src/components/CodeValidation.tsx

@@ -3,119 +3,131 @@
  * 8-character alphanumeric code input for sync authentication
  */
 
-import { createSignal } from "solid-js"
-import { useAuthStore } from "../stores/auth"
-import { AUTH_CONFIG } from "../config/auth"
+import { createSignal } from "solid-js";
+import { useAuthStore } from "@/stores/auth";
+import { AUTH_CONFIG } from "@/config/auth";
+import { useTheme } from "@/context/ThemeContext";
 
 interface CodeValidationProps {
-  focused?: boolean
-  onBack?: () => void
+  focused?: boolean;
+  onBack?: () => void;
 }
 
-type FocusField = "code" | "submit" | "back"
+type FocusField = "code" | "submit" | "back";
 
 export function CodeValidation(props: CodeValidationProps) {
-  const auth = useAuthStore()
-  const [code, setCode] = createSignal("")
-  const [focusField, setFocusField] = createSignal<FocusField>("code")
-  const [codeError, setCodeError] = createSignal<string | null>(null)
+  const auth = useAuthStore();
+  const { theme } = useTheme();
+  const [code, setCode] = createSignal("");
+  const [focusField, setFocusField] = createSignal<FocusField>("code");
+  const [codeError, setCodeError] = createSignal<string | null>(null);
 
-  const fields: FocusField[] = ["code", "submit", "back"]
+  const fields: FocusField[] = ["code", "submit", "back"];
 
   /** Format code as user types (uppercase, alphanumeric only) */
   const handleCodeInput = (value: string) => {
-    const formatted = value.toUpperCase().replace(/[^A-Z0-9]/g, "")
+    const formatted = value.toUpperCase().replace(/[^A-Z0-9]/g, "");
     // Limit to max length
-    const limited = formatted.slice(0, AUTH_CONFIG.codeValidation.codeLength)
-    setCode(limited)
+    const limited = formatted.slice(0, AUTH_CONFIG.codeValidation.codeLength);
+    setCode(limited);
 
     // Clear error when typing
     if (codeError()) {
-      setCodeError(null)
+      setCodeError(null);
     }
-  }
+  };
 
   const validateCode = (value: string): boolean => {
     if (!value) {
-      setCodeError("Code is required")
-      return false
+      setCodeError("Code is required");
+      return false;
     }
     if (value.length !== AUTH_CONFIG.codeValidation.codeLength) {
-      setCodeError(`Code must be ${AUTH_CONFIG.codeValidation.codeLength} characters`)
-      return false
+      setCodeError(
+        `Code must be ${AUTH_CONFIG.codeValidation.codeLength} characters`,
+      );
+      return false;
     }
     if (!AUTH_CONFIG.codeValidation.allowedChars.test(value)) {
-      setCodeError("Code must contain only letters and numbers")
-      return false
+      setCodeError("Code must contain only letters and numbers");
+      return false;
     }
-    setCodeError(null)
-    return true
-  }
+    setCodeError(null);
+    return true;
+  };
 
   const handleSubmit = async () => {
     if (!validateCode(code())) {
-      return
+      return;
     }
 
-    const success = await auth.validateCode(code())
+    const success = await auth.validateCode(code());
     if (!success && auth.error) {
-      setCodeError(auth.error.message)
+      setCodeError(auth.error.message);
     }
-  }
+  };
 
   const handleKeyPress = (key: { name: string; shift?: boolean }) => {
     if (key.name === "tab") {
-      const currentIndex = fields.indexOf(focusField())
+      const currentIndex = fields.indexOf(focusField());
       const nextIndex = key.shift
         ? (currentIndex - 1 + fields.length) % fields.length
-        : (currentIndex + 1) % fields.length
-      setFocusField(fields[nextIndex])
-    } else if (key.name === "return" || key.name === "enter") {
+        : (currentIndex + 1) % fields.length;
+      setFocusField(fields[nextIndex]);
+    } else if (key.name === "return" || key.name === "tab") {
       if (focusField() === "submit") {
-        handleSubmit()
+        handleSubmit();
       } else if (focusField() === "back" && props.onBack) {
-        props.onBack()
+        props.onBack();
       }
     } else if (key.name === "escape" && props.onBack) {
-      props.onBack()
+      props.onBack();
     }
-  }
+  };
 
   const codeProgress = () => {
-    const len = code().length
-    const max = AUTH_CONFIG.codeValidation.codeLength
-    return `${len}/${max}`
-  }
+    const len = code().length;
+    const max = AUTH_CONFIG.codeValidation.codeLength;
+    return `${len}/${max}`;
+  };
 
   const codeDisplay = () => {
-    const current = code()
-    const max = AUTH_CONFIG.codeValidation.codeLength
-    const filled = current.split("")
-    const empty = Array(max - filled.length).fill("_")
-    return [...filled, ...empty].join(" ")
-  }
+    const current = code();
+    const max = AUTH_CONFIG.codeValidation.codeLength;
+    const filled = current.split("");
+    const empty = Array(max - filled.length).fill("_");
+    return [...filled, ...empty].join(" ");
+  };
 
   return (
-    <box flexDirection="column" border padding={2} gap={1}>
-      <text>
+    <box flexDirection="column" border padding={2} gap={1} borderColor={theme.border}>
+      <text fg={theme.text}>
         <strong>Enter Sync Code</strong>
       </text>
 
       <box height={1} />
 
-      <text fg="gray">Enter your 8-character sync code to link your account.</text>
-      <text fg="gray">You can get this code from the web portal.</text>
+      <text fg={theme.textMuted}>
+        Enter your 8-character sync code to link your account.
+      </text>
+      <text fg={theme.textMuted}>You can get this code from the web portal.</text>
 
       <box height={1} />
 
       {/* Code display */}
       <box flexDirection="column" gap={0}>
-        <text fg={focusField() === "code" ? "cyan" : undefined}>
-          Code ({codeProgress()}):
-        </text>
+      <text fg={focusField() === "code" ? theme.primary : undefined}>
+            Code ({codeProgress()}):
+          </text>
 
-        <box border padding={1}>
-          <text fg={code().length === AUTH_CONFIG.codeValidation.codeLength ? "green" : "yellow"}>
+        <box border padding={1} borderColor={theme.border}>
+          <text
+            fg={
+              code().length === AUTH_CONFIG.codeValidation.codeLength
+                ? theme.success
+                : theme.warning
+            }
+          >
             {codeDisplay()}
           </text>
         </box>
@@ -129,9 +141,7 @@ export function CodeValidation(props: CodeValidationProps) {
           width={30}
         />
 
-        {codeError() && (
-          <text fg="red">{codeError()}</text>
-        )}
+        {codeError() && <text fg={theme.error}>{codeError()}</text>}
       </box>
 
       <box height={1} />
@@ -141,9 +151,9 @@ export function CodeValidation(props: CodeValidationProps) {
         <box
           border
           padding={1}
-          backgroundColor={focusField() === "submit" ? "#333" : undefined}
+          backgroundColor={focusField() === "submit" ? theme.backgroundElement : undefined}
         >
-          <text fg={focusField() === "submit" ? "cyan" : undefined}>
+          <text fg={focusField() === "submit" ? theme.primary : undefined}>
             {auth.isLoading ? "Validating..." : "[Enter] Validate Code"}
           </text>
         </box>
@@ -151,22 +161,20 @@ export function CodeValidation(props: CodeValidationProps) {
         <box
           border
           padding={1}
-          backgroundColor={focusField() === "back" ? "#333" : undefined}
+          backgroundColor={focusField() === "back" ? theme.backgroundElement : undefined}
         >
-          <text fg={focusField() === "back" ? "yellow" : "gray"}>
+          <text fg={focusField() === "back" ? theme.warning : theme.textMuted}>
             [Esc] Back to Login
           </text>
         </box>
       </box>
 
       {/* Auth error message */}
-      {auth.error && (
-        <text fg="red">{auth.error.message}</text>
-      )}
+      {auth.error && <text fg={theme.error}>{auth.error.message}</text>}
 
       <box height={1} />
 
-      <text fg="gray">Tab to navigate, Enter to select, Esc to go back</text>
+      <text fg={theme.textMuted}>Tab to navigate, Enter to select, Esc to go back</text>
     </box>
-  )
+  );
 }

src/components/Column.tsx

@@ -1,35 +0,0 @@
-import type { JSX } from "solid-js"
-
-type ColumnProps = {
-  children?: JSX.Element
-  gap?: number
-  alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline"
-  justifyContent?:
-    | "flex-start"
-    | "flex-end"
-    | "center"
-    | "space-between"
-    | "space-around"
-    | "space-evenly"
-  width?: number | "auto" | `${number}%`
-  height?: number | "auto" | `${number}%`
-  padding?: number
-}
-
-export function Column(props: ColumnProps) {
-  return (
-    <box
-      style={{
-        flexDirection: "column",
-        gap: props.gap,
-        alignItems: props.alignItems,
-        justifyContent: props.justifyContent,
-        width: props.width,
-        height: props.height,
-        padding: props.padding,
-      }}
-    >
-      {props.children}
-    </box>
-  )
-}

src/components/DiscoverPage.tsx

@@ -1,200 +0,0 @@
-/**
- * DiscoverPage component - Main discover/browse interface for PodTUI
- */
-
-import { createSignal } from "solid-js"
-import { useKeyboard } from "@opentui/solid"
-import { useDiscoverStore, DISCOVER_CATEGORIES } from "../stores/discover"
-import { CategoryFilter } from "./CategoryFilter"
-import { TrendingShows } from "./TrendingShows"
-
-type DiscoverPageProps = {
-  focused: boolean
-  onExit?: () => void
-}
-
-type FocusArea = "categories" | "shows"
-
-export function DiscoverPage(props: DiscoverPageProps) {
-  const discoverStore = useDiscoverStore()
-  const [focusArea, setFocusArea] = createSignal<FocusArea>("shows")
-  const [showIndex, setShowIndex] = createSignal(0)
-  const [categoryIndex, setCategoryIndex] = createSignal(0)
-
-  // Keyboard navigation
-  useKeyboard((key) => {
-    if (!props.focused) return
-
-    const area = focusArea()
-
-    // Tab switches focus between categories and shows
-    if (key.name === "tab") {
-      if (key.shift) {
-        setFocusArea((a) => (a === "categories" ? "shows" : "categories"))
-      } else {
-        setFocusArea((a) => (a === "categories" ? "shows" : "categories"))
-      }
-      return
-    }
-
-    if (key.name === "enter" && area === "categories") {
-      setFocusArea("shows")
-      return
-    }
-
-    // Category navigation
-    if (area === "categories") {
-      if (key.name === "left" || key.name === "h") {
-        const nextIndex = Math.max(0, categoryIndex() - 1)
-        setCategoryIndex(nextIndex)
-        const cat = DISCOVER_CATEGORIES[nextIndex]
-        if (cat) discoverStore.setSelectedCategory(cat.id)
-        setShowIndex(0)
-        return
-      }
-      if (key.name === "right" || key.name === "l") {
-        const nextIndex = Math.min(DISCOVER_CATEGORIES.length - 1, categoryIndex() + 1)
-        setCategoryIndex(nextIndex)
-        const cat = DISCOVER_CATEGORIES[nextIndex]
-        if (cat) discoverStore.setSelectedCategory(cat.id)
-        setShowIndex(0)
-        return
-      }
-      if (key.name === "enter") {
-        // Select category and move to shows
-        setFocusArea("shows")
-        return
-      }
-      if (key.name === "down" || key.name === "j") {
-        setFocusArea("shows")
-        return
-      }
-    }
-
-    // Shows navigation
-    if (area === "shows") {
-      const shows = discoverStore.filteredPodcasts()
-      if (key.name === "down" || key.name === "j") {
-        if (shows.length === 0) return
-        setShowIndex((i) => Math.min(i + 1, shows.length - 1))
-        return
-      }
-      if (key.name === "up" || key.name === "k") {
-        if (shows.length === 0) {
-          setFocusArea("categories")
-          return
-        }
-        const newIndex = showIndex() - 1
-        if (newIndex < 0) {
-          setFocusArea("categories")
-        } else {
-          setShowIndex(newIndex)
-        }
-        return
-      }
-      if (key.name === "enter") {
-        // Subscribe/unsubscribe
-        const podcast = shows[showIndex()]
-        if (podcast) {
-          discoverStore.toggleSubscription(podcast.id)
-        }
-        return
-      }
-    }
-
-    if (key.name === "escape") {
-      if (area === "shows") {
-        setFocusArea("categories")
-      } else {
-        props.onExit?.()
-      }
-      return
-    }
-
-    // Refresh with 'r'
-    if (key.name === "r") {
-      discoverStore.refresh()
-      return
-    }
-  })
-
-  const handleCategorySelect = (categoryId: string) => {
-    discoverStore.setSelectedCategory(categoryId)
-    const index = DISCOVER_CATEGORIES.findIndex((c) => c.id === categoryId)
-    if (index >= 0) setCategoryIndex(index)
-    setShowIndex(0)
-  }
-
-  const handleShowSelect = (index: number) => {
-    setShowIndex(index)
-    setFocusArea("shows")
-  }
-
-  const handleSubscribe = (podcast: { id: string }) => {
-    discoverStore.toggleSubscription(podcast.id)
-  }
-
-  return (
-    <box flexDirection="column" height="100%" gap={1}>
-      {/* Header */}
-      <box flexDirection="row" justifyContent="space-between" alignItems="center">
-          <text>
-            <strong>Discover Podcasts</strong>
-          </text>
-        <box flexDirection="row" gap={2}>
-          <text fg="gray">
-            {discoverStore.filteredPodcasts().length} shows
-          </text>
-          <box onMouseDown={() => discoverStore.refresh()}>
-            <text fg="cyan">[R] Refresh</text>
-          </box>
-        </box>
-      </box>
-
-      {/* Category Filter */}
-      <box border padding={1}>
-        <box flexDirection="column" gap={1}>
-          <text fg={focusArea() === "categories" ? "cyan" : "gray"}>
-            Categories:
-          </text>
-          <CategoryFilter
-            categories={discoverStore.categories}
-            selectedCategory={discoverStore.selectedCategory()}
-            focused={focusArea() === "categories"}
-            onSelect={handleCategorySelect}
-          />
-        </box>
-      </box>
-
-      {/* Trending Shows */}
-      <box flexDirection="column" flexGrow={1} border>
-          <box padding={1}>
-            <text fg={focusArea() === "shows" ? "cyan" : "gray"}>
-              Trending in {
-                DISCOVER_CATEGORIES.find(
-                  (c) => c.id === discoverStore.selectedCategory()
-                )?.name ?? "All"
-              }
-            </text>
-          </box>
-        <TrendingShows
-          podcasts={discoverStore.filteredPodcasts()}
-          selectedIndex={showIndex()}
-          focused={focusArea() === "shows"}
-          isLoading={discoverStore.isLoading()}
-          onSelect={handleShowSelect}
-          onSubscribe={handleSubscribe}
-        />
-      </box>
-
-      {/* Footer Hints */}
-      <box flexDirection="row" gap={2}>
-        <text fg="gray">[Tab] Switch focus</text>
-        <text fg="gray">[j/k] Navigate</text>
-        <text fg="gray">[Enter] Subscribe</text>
-        <text fg="gray">[Esc] Up</text>
-        <text fg="gray">[R] Refresh</text>
-      </box>
-    </box>
-  )
-}

src/components/FeedDetail.tsx

@@ -1,178 +0,0 @@
-/**
- * Feed detail view component for PodTUI
- * Shows podcast info and episode list
- */
-
-import { createSignal, For, Show } from "solid-js"
-import { useKeyboard } from "@opentui/solid"
-import type { Feed } from "../types/feed"
-import type { Episode } from "../types/episode"
-import { format } from "date-fns"
-
-interface FeedDetailProps {
-  feed: Feed
-  focused?: boolean
-  onBack?: () => void
-  onPlayEpisode?: (episode: Episode) => void
-}
-
-export function FeedDetail(props: FeedDetailProps) {
-  const [selectedIndex, setSelectedIndex] = createSignal(0)
-  const [showInfo, setShowInfo] = createSignal(true)
-
-  const episodes = () => {
-    // Sort episodes by publication date (newest first)
-    return [...props.feed.episodes].sort(
-      (a, b) => b.pubDate.getTime() - a.pubDate.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 formatDate = (date: Date): string => {
-    return format(date, "MMM d, yyyy")
-  }
-
-  const handleKeyPress = (key: { name: string }) => {
-    const eps = episodes()
-
-    if (key.name === "escape" && props.onBack) {
-      props.onBack()
-      return
-    }
-
-    if (key.name === "i") {
-      setShowInfo((v) => !v)
-      return
-    }
-
-    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(eps.length - 1, i + 1))
-    } else if (key.name === "return" || key.name === "enter") {
-      const episode = eps[selectedIndex()]
-      if (episode && props.onPlayEpisode) {
-        props.onPlayEpisode(episode)
-      }
-    } else if (key.name === "home" || key.name === "g") {
-      setSelectedIndex(0)
-    } else if (key.name === "end") {
-      setSelectedIndex(eps.length - 1)
-    } else if (key.name === "pageup") {
-      setSelectedIndex((i) => Math.max(0, i - 10))
-    } else if (key.name === "pagedown") {
-      setSelectedIndex((i) => Math.min(eps.length - 1, i + 10))
-    }
-  }
-
-  useKeyboard((key) => {
-    if (!props.focused) return
-    handleKeyPress(key)
-  })
-
-  return (
-    <box flexDirection="column" gap={1}>
-      {/* Header with back button */}
-      <box flexDirection="row" justifyContent="space-between">
-        <box border padding={0} onMouseDown={props.onBack}>
-          <text fg="cyan">[Esc] Back</text>
-        </box>
-        <box border padding={0} onMouseDown={() => setShowInfo((v) => !v)}>
-          <text fg="cyan">[i] {showInfo() ? "Hide" : "Show"} Info</text>
-        </box>
-      </box>
-
-      {/* Podcast info section */}
-      <Show when={showInfo()}>
-        <box border padding={1} flexDirection="column" gap={0}>
-          <text>
-            <strong>{props.feed.customName || props.feed.podcast.title}</strong>
-          </text>
-          {props.feed.podcast.author && (
-            <box flexDirection="row" gap={1}>
-              <text fg="gray">by</text>
-              <text fg="cyan">{props.feed.podcast.author}</text>
-            </box>
-          )}
-          <box height={1} />
-          <text fg="gray">
-            {props.feed.podcast.description?.slice(0, 200)}
-            {(props.feed.podcast.description?.length || 0) > 200 ? "..." : ""}
-          </text>
-          <box height={1} />
-          <box flexDirection="row" gap={2}>
-            <box flexDirection="row" gap={1}>
-              <text fg="gray">Episodes:</text>
-              <text fg="white">{props.feed.episodes.length}</text>
-            </box>
-            <box flexDirection="row" gap={1}>
-              <text fg="gray">Updated:</text>
-              <text fg="white">{formatDate(props.feed.lastUpdated)}</text>
-            </box>
-            <text fg={props.feed.visibility === "public" ? "green" : "yellow"}>
-              {props.feed.visibility === "public" ? "[Public]" : "[Private]"}
-            </text>
-            {props.feed.isPinned && (
-              <text fg="yellow">[Pinned]</text>
-            )}
-          </box>
-        </box>
-      </Show>
-
-      {/* Episodes header */}
-      <box flexDirection="row" justifyContent="space-between">
-        <text>
-          <strong>Episodes</strong>
-        </text>
-        <text fg="gray">({episodes().length} total)</text>
-      </box>
-
-      {/* Episode list */}
-      <scrollbox height={showInfo() ? 10 : 15} focused={props.focused}>
-        <For each={episodes()}>
-          {(episode, index) => (
-            <box
-              flexDirection="column"
-              gap={0}
-              padding={1}
-              backgroundColor={index() === selectedIndex() ? "#333" : undefined}
-              onMouseDown={() => {
-                setSelectedIndex(index())
-                if (props.onPlayEpisode) {
-                  props.onPlayEpisode(episode)
-                }
-              }}
-            >
-              <box flexDirection="row" gap={1}>
-                <text fg={index() === selectedIndex() ? "cyan" : "gray"}>
-                  {index() === selectedIndex() ? ">" : " "}
-                </text>
-                <text fg={index() === selectedIndex() ? "white" : undefined}>
-                  {episode.episodeNumber ? `#${episode.episodeNumber} - ` : ""}
-                  {episode.title}
-                </text>
-              </box>
-              <box flexDirection="row" gap={2} paddingLeft={2}>
-                <text fg="gray">{formatDate(episode.pubDate)}</text>
-                <text fg="gray">{formatDuration(episode.duration)}</text>
-              </box>
-            </box>
-          )}
-        </For>
-      </scrollbox>
-
-      {/* Help text */}
-      <text fg="gray">
-        j/k to navigate, Enter to play, i to toggle info, Esc to go back
-      </text>
-    </box>
-  )
-}

src/components/FeedFilter.tsx

@@ -1,169 +0,0 @@
-/**
- * Feed filter component for PodTUI
- * Toggle and filter options for feed list
- */
-
-import { createSignal } from "solid-js"
-import { FeedVisibility, FeedSortField } from "../types/feed"
-import type { FeedFilter } from "../types/feed"
-
-interface FeedFilterProps {
-  filter: FeedFilter
-  focused?: boolean
-  onFilterChange: (filter: FeedFilter) => void
-}
-
-type FilterField = "visibility" | "sort" | "pinned" | "search"
-
-export function FeedFilterComponent(props: FeedFilterProps) {
-  const [focusField, setFocusField] = createSignal<FilterField>("visibility")
-  const [searchValue, setSearchValue] = createSignal(props.filter.searchQuery || "")
-
-  const fields: FilterField[] = ["visibility", "sort", "pinned", "search"]
-
-  const handleKeyPress = (key: { name: string; shift?: boolean }) => {
-    if (key.name === "tab") {
-      const currentIndex = fields.indexOf(focusField())
-      const nextIndex = key.shift
-        ? (currentIndex - 1 + fields.length) % fields.length
-        : (currentIndex + 1) % fields.length
-      setFocusField(fields[nextIndex])
-    } else if (key.name === "return" || key.name === "enter") {
-      if (focusField() === "visibility") {
-        cycleVisibility()
-      } else if (focusField() === "sort") {
-        cycleSort()
-      } else if (focusField() === "pinned") {
-        togglePinned()
-      }
-    } else if (key.name === "space") {
-      if (focusField() === "pinned") {
-        togglePinned()
-      }
-    }
-  }
-
-  const cycleVisibility = () => {
-    const current = props.filter.visibility
-    let next: FeedVisibility | "all"
-    if (current === "all") next = FeedVisibility.PUBLIC
-    else if (current === FeedVisibility.PUBLIC) next = FeedVisibility.PRIVATE
-    else next = "all"
-    props.onFilterChange({ ...props.filter, visibility: next })
-  }
-
-  const cycleSort = () => {
-    const sortOptions: FeedSortField[] = [
-      FeedSortField.UPDATED,
-      FeedSortField.TITLE,
-      FeedSortField.EPISODE_COUNT,
-      FeedSortField.LATEST_EPISODE,
-    ]
-    const currentIndex = sortOptions.indexOf(props.filter.sortBy as FeedSortField)
-    const nextIndex = (currentIndex + 1) % sortOptions.length
-    props.onFilterChange({ ...props.filter, sortBy: sortOptions[nextIndex] })
-  }
-
-  const togglePinned = () => {
-    props.onFilterChange({
-      ...props.filter,
-      pinnedOnly: !props.filter.pinnedOnly,
-    })
-  }
-
-  const handleSearchInput = (value: string) => {
-    setSearchValue(value)
-    props.onFilterChange({ ...props.filter, searchQuery: value })
-  }
-
-  const visibilityLabel = () => {
-    const vis = props.filter.visibility
-    if (vis === "all") return "All"
-    if (vis === "public") return "Public"
-    return "Private"
-  }
-
-  const visibilityColor = () => {
-    const vis = props.filter.visibility
-    if (vis === "public") return "green"
-    if (vis === "private") return "yellow"
-    return "white"
-  }
-
-  const sortLabel = () => {
-    const sort = props.filter.sortBy
-    switch (sort) {
-      case "title":
-        return "Title"
-      case "episodeCount":
-        return "Episodes"
-      case "latestEpisode":
-        return "Latest"
-      case "updated":
-      default:
-        return "Updated"
-    }
-  }
-
-  return (
-    <box flexDirection="column" border padding={1} gap={1}>
-      <text>
-        <strong>Filter Feeds</strong>
-      </text>
-
-      <box flexDirection="row" gap={2} flexWrap="wrap">
-        {/* Visibility filter */}
-        <box
-          border
-          padding={0}
-          backgroundColor={focusField() === "visibility" ? "#333" : undefined}
-        >
-          <box flexDirection="row" gap={1}>
-            <text fg={focusField() === "visibility" ? "cyan" : "gray"}>Show:</text>
-            <text fg={visibilityColor()}>{visibilityLabel()}</text>
-          </box>
-        </box>
-
-        {/* Sort filter */}
-        <box
-          border
-          padding={0}
-          backgroundColor={focusField() === "sort" ? "#333" : undefined}
-        >
-          <box flexDirection="row" gap={1}>
-            <text fg={focusField() === "sort" ? "cyan" : "gray"}>Sort:</text>
-            <text fg="white">{sortLabel()}</text>
-          </box>
-        </box>
-
-        {/* Pinned filter */}
-        <box
-          border
-          padding={0}
-          backgroundColor={focusField() === "pinned" ? "#333" : undefined}
-        >
-          <box flexDirection="row" gap={1}>
-            <text fg={focusField() === "pinned" ? "cyan" : "gray"}>Pinned:</text>
-            <text fg={props.filter.pinnedOnly ? "yellow" : "gray"}>
-              {props.filter.pinnedOnly ? "Yes" : "No"}
-            </text>
-          </box>
-        </box>
-      </box>
-
-      {/* Search box */}
-      <box flexDirection="row" gap={1}>
-        <text fg={focusField() === "search" ? "cyan" : "gray"}>Search:</text>
-        <input
-          value={searchValue()}
-          onInput={handleSearchInput}
-          placeholder="Filter by name..."
-          focused={props.focused && focusField() === "search"}
-          width={25}
-        />
-      </box>
-
-      <text fg="gray">Tab to navigate, Enter/Space to toggle</text>
-    </box>
-  )
-}

src/components/FeedItem.tsx

@@ -1,109 +0,0 @@
-/**
- * Feed item component for PodTUI
- * Displays a single feed/podcast in the list
- */
-
-import type { Feed, FeedVisibility } from "../types/feed"
-import { format } from "date-fns"
-
-interface FeedItemProps {
-  feed: Feed
-  isSelected: boolean
-  showEpisodeCount?: boolean
-  showLastUpdated?: boolean
-  compact?: boolean
-}
-
-export function FeedItem(props: FeedItemProps) {
-  const formatDate = (date: Date): string => {
-    return format(date, "MMM d")
-  }
-
-  const episodeCount = () => props.feed.episodes.length
-  const unplayedCount = () => {
-    // This would be calculated based on episode status
-    return props.feed.episodes.length
-  }
-
-  const visibilityIcon = () => {
-    return props.feed.visibility === "public" ? "[P]" : "[*]"
-  }
-
-  const visibilityColor = () => {
-    return props.feed.visibility === "public" ? "green" : "yellow"
-  }
-
-  const pinnedIndicator = () => {
-    return props.feed.isPinned ? "*" : " "
-  }
-
-  if (props.compact) {
-    // Compact single-line view
-    return (
-      <box
-        flexDirection="row"
-        gap={1}
-        backgroundColor={props.isSelected ? "#333" : undefined}
-        paddingLeft={1}
-        paddingRight={1}
-      >
-        <text fg={props.isSelected ? "cyan" : "gray"}>
-          {props.isSelected ? ">" : " "}
-        </text>
-        <text fg={visibilityColor()}>{visibilityIcon()}</text>
-        <text fg={props.isSelected ? "white" : undefined}>
-          {props.feed.customName || props.feed.podcast.title}
-        </text>
-        {props.showEpisodeCount && (
-          <text fg="gray">({episodeCount()})</text>
-        )}
-      </box>
-    )
-  }
-
-  // Full view with details
-  return (
-    <box
-      flexDirection="column"
-      gap={0}
-      border={props.isSelected}
-      borderColor={props.isSelected ? "cyan" : undefined}
-      backgroundColor={props.isSelected ? "#222" : undefined}
-      padding={1}
-    >
-      {/* Title row */}
-      <box flexDirection="row" gap={1}>
-        <text fg={props.isSelected ? "cyan" : "gray"}>
-          {props.isSelected ? ">" : " "}
-        </text>
-        <text fg={visibilityColor()}>{visibilityIcon()}</text>
-        <text fg="yellow">{pinnedIndicator()}</text>
-        <text fg={props.isSelected ? "white" : undefined}>
-          <strong>{props.feed.customName || props.feed.podcast.title}</strong>
-        </text>
-      </box>
-
-      {/* Details row */}
-      <box flexDirection="row" gap={2} paddingLeft={4}>
-        {props.showEpisodeCount && (
-          <text fg="gray">
-            {episodeCount()} episodes ({unplayedCount()} new)
-          </text>
-        )}
-        {props.showLastUpdated && (
-          <text fg="gray">Updated: {formatDate(props.feed.lastUpdated)}</text>
-        )}
-      </box>
-
-      {/* Description (truncated) */}
-      {props.feed.podcast.description && (
-        <box paddingLeft={4} paddingTop={0}>
-          <text fg="gray">
-            {props.feed.podcast.description.slice(0, 60)}
-            {props.feed.podcast.description.length > 60 ? "..." : ""}
-          </text>
-        </box>
-      )}
-    </box>
-  )
-}

src/components/FeedList.tsx

@@ -1,193 +0,0 @@
-/**
- * Feed list component for PodTUI
- * Scrollable list of feeds with keyboard navigation and mouse support
- */
-
-import { createSignal, For, Show } from "solid-js"
-import { useKeyboard } from "@opentui/solid"
-import { FeedItem } from "./FeedItem"
-import { useFeedStore } from "../stores/feed"
-import { FeedVisibility, FeedSortField } from "../types/feed"
-import type { Feed } from "../types/feed"
-
-interface FeedListProps {
-  focused?: boolean
-  compact?: boolean
-  showEpisodeCount?: boolean
-  showLastUpdated?: boolean
-  onSelectFeed?: (feed: Feed) => void
-  onOpenFeed?: (feed: Feed) => void
-  onFocusChange?: (focused: boolean) => void
-}
-
-export function FeedList(props: FeedListProps) {
-  const feedStore = useFeedStore()
-  const [selectedIndex, setSelectedIndex] = createSignal(0)
-
-  const filteredFeeds = () => feedStore.getFilteredFeeds()
-
-  const handleKeyPress = (key: { name: string }) => {
-    if (key.name === "escape") {
-      props.onFocusChange?.(false)
-      return
-    }
-    const feeds = filteredFeeds()
-
-    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(feeds.length - 1, i + 1))
-    } else if (key.name === "return" || key.name === "enter") {
-      const feed = feeds[selectedIndex()]
-      if (feed && props.onOpenFeed) {
-        props.onOpenFeed(feed)
-      }
-    } else if (key.name === "home" || key.name === "g") {
-      setSelectedIndex(0)
-    } else if (key.name === "end") {
-      setSelectedIndex(feeds.length - 1)
-    } else if (key.name === "pageup") {
-      setSelectedIndex((i) => Math.max(0, i - 5))
-    } else if (key.name === "pagedown") {
-      setSelectedIndex((i) => Math.min(feeds.length - 1, i + 5))
-    } else if (key.name === "p") {
-      // Toggle pin on selected feed
-      const feed = feeds[selectedIndex()]
-      if (feed) {
-        feedStore.togglePinned(feed.id)
-      }
-    } else if (key.name === "f") {
-      // Cycle visibility filter
-      cycleVisibilityFilter()
-    } else if (key.name === "s") {
-      // Cycle sort
-      cycleSortField()
-    }
-
-    // Notify selection change
-    const selectedFeed = feeds[selectedIndex()]
-    if (selectedFeed && props.onSelectFeed) {
-      props.onSelectFeed(selectedFeed)
-    }
-  }
-
-  useKeyboard((key) => {
-    if (!props.focused) return
-    handleKeyPress(key)
-  })
-
-  const cycleVisibilityFilter = () => {
-    const current = feedStore.filter().visibility
-    let next: FeedVisibility | "all"
-    if (current === "all") next = FeedVisibility.PUBLIC
-    else if (current === FeedVisibility.PUBLIC) next = FeedVisibility.PRIVATE
-    else next = "all"
-    feedStore.setFilter({ ...feedStore.filter(), visibility: next })
-  }
-
-  const cycleSortField = () => {
-    const sortOptions: FeedSortField[] = [
-      FeedSortField.UPDATED,
-      FeedSortField.TITLE,
-      FeedSortField.EPISODE_COUNT,
-      FeedSortField.LATEST_EPISODE,
-    ]
-    const current = feedStore.filter().sortBy as FeedSortField
-    const idx = sortOptions.indexOf(current)
-    const next = sortOptions[(idx + 1) % sortOptions.length]
-    feedStore.setFilter({ ...feedStore.filter(), sortBy: next })
-  }
-
-  const visibilityLabel = () => {
-    const vis = feedStore.filter().visibility
-    if (vis === "all") return "All"
-    if (vis === "public") return "Public"
-    return "Private"
-  }
-
-  const sortLabel = () => {
-    const sort = feedStore.filter().sortBy
-    switch (sort) {
-      case "title": return "Title"
-      case "episodeCount": return "Episodes"
-      case "latestEpisode": return "Latest"
-      default: return "Updated"
-    }
-  }
-
-  const handleFeedClick = (feed: Feed, index: number) => {
-    setSelectedIndex(index)
-    if (props.onSelectFeed) {
-      props.onSelectFeed(feed)
-    }
-  }
-
-  const handleFeedDoubleClick = (feed: Feed) => {
-    if (props.onOpenFeed) {
-      props.onOpenFeed(feed)
-    }
-  }
-
-  return (
-      <box flexDirection="column" gap={1}>
-      {/* Header with filter controls */}
-      <box flexDirection="row" justifyContent="space-between" paddingBottom={0}>
-        <text>
-          <strong>My Feeds</strong>
-        </text>
-        <text fg="gray">({filteredFeeds().length} feeds)</text>
-        <box flexDirection="row" gap={1}>
-          <box
-            border
-            padding={0}
-            onMouseDown={cycleVisibilityFilter}
-          >
-            <text fg="cyan">[f] {visibilityLabel()}</text>
-          </box>
-          <box
-            border
-            padding={0}
-            onMouseDown={cycleSortField}
-          >
-            <text fg="cyan">[s] {sortLabel()}</text>
-          </box>
-        </box>
-      </box>
-
-      {/* Feed list in scrollbox */}
-      <Show
-        when={filteredFeeds().length > 0}
-        fallback={
-          <box border padding={2}>
-            <text fg="gray">
-              No feeds found. Add podcasts from the Discover or Search tabs.
-            </text>
-          </box>
-        }
-      >
-        <scrollbox height={15} focused={props.focused}>
-          <For each={filteredFeeds()}>
-            {(feed, index) => (
-              <box onMouseDown={() => handleFeedClick(feed, index())}>
-                <FeedItem
-                  feed={feed}
-                  isSelected={index() === selectedIndex()}
-                  compact={props.compact}
-                  showEpisodeCount={props.showEpisodeCount ?? true}
-                  showLastUpdated={props.showLastUpdated ?? true}
-                />
-              </box>
-            )}
-          </For>
-        </scrollbox>
-      </Show>
-
-      {/* Navigation help */}
-      <box paddingTop={0}>
-        <text fg="gray">
-          Enter open | Esc up | j/k navigate | p pin | f filter | s sort
-        </text>
-      </box>
-    </box>
-  )
-}

src/components/FileInfo.tsx

@@ -1,17 +0,0 @@
-type FileInfoProps = {
-  path: string
-  format: string
-  size: string
-  modifiedAt: string
-}
-
-export function FileInfo(props: FileInfoProps) {
-  return (
-    <box border title="File Info" style={{ padding: 1, flexDirection: "column" }}>
-      <text>Path: {props.path}</text>
-      <text>Format: {props.format}</text>
-      <text>Size: {props.size}</text>
-      <text>Modified: {props.modifiedAt}</text>
-    </box>
-  )
-}

src/components/KeyboardHandler.tsx

@@ -1,17 +0,0 @@
-import type { JSX } from "solid-js"
-import type { TabId } from "./Tab"
-
-/**
- * @deprecated Use useAppKeyboard hook directly instead.
- * This component is kept for backwards compatibility.
- */
-type KeyboardHandlerProps = {
-  children?: JSX.Element
-  onTabSelect?: (tab: TabId) => void
-}
-
-export function KeyboardHandler(props: KeyboardHandlerProps) {
-  // Keyboard handling has been moved to useAppKeyboard hook
-  // This component is now just a passthrough
-  return <>{props.children}</>
-}

src/components/LayerIndicator.tsx

@@ -1,30 +0,0 @@
-import { useTheme } from "../context/ThemeContext"
-
-export function LayerIndicator({ layerDepth }: { layerDepth: number }) {
-  const { theme } = useTheme()
-
-  const getLayerIndicator = () => {
-    const indicators = []
-    for (let i = 0; i < 4; i++) {
-      const isActive = i <= layerDepth
-      const color = isActive ? theme.accent : theme.textMuted
-      const size = isActive ? "●" : "○"
-      indicators.push(
-        <text fg={color} marginRight={1}>
-          {size}
-        </text>
-      )
-    }
-    return indicators
-  }
-
-  return (
-    <box flexDirection="row" alignItems="center">
-      <text fg={theme.textMuted} marginRight={1}>Depth:</text>
-      {getLayerIndicator()}
-      <text fg={theme.textMuted} marginLeft={1}>
-        {layerDepth}
-      </text>
-    </box>
-  )
-}

src/components/Layout.tsx

@@ -1,102 +0,0 @@
-import type { JSX } from "solid-js"
-import type { RGBA } from "@opentui/core"
-import { Show, createMemo } from "solid-js"
-import { useTheme } from "../context/ThemeContext"
-import { LayerIndicator } from "./LayerIndicator"
-
-type LayerConfig = {
-  depth: number
-  background: RGBA
-}
-
-type LayoutProps = {
-  header?: JSX.Element
-  footer?: JSX.Element
-  children?: JSX.Element
-  layerDepth?: number
-}
-
-export function Layout(props: LayoutProps) {
-  const context = useTheme()
-
-  // Get layer configuration based on depth - wrapped in createMemo for reactivity
-  const currentLayer = createMemo((): LayerConfig => {
-    const depth = props.layerDepth || 0
-    const backgrounds = context.theme.layerBackgrounds
-    const depthMap: Record<number, LayerConfig> = {
-      0: { depth: 0, background: backgrounds?.layer0 ?? context.theme.background },
-      1: { depth: 1, background: backgrounds?.layer1 ?? context.theme.backgroundPanel },
-      2: { depth: 2, background: backgrounds?.layer2 ?? context.theme.backgroundElement },
-      3: { depth: 3, background: backgrounds?.layer3 ?? context.theme.backgroundMenu },
-    }
-
-    return depthMap[depth] || { depth: 0, background: context.theme.background }
-  })
-
-  // Note: No need for a ready check here - the ThemeProvider uses
-  // createSimpleContext which gates children rendering until ready
-  return (
-    <box
-      flexDirection="column"
-      width="100%"
-      height="100%"
-      backgroundColor={context.theme.background}
-    >
-      {/* Header */}
-      <Show when={props.header} fallback={<box style={{ height: 4 }} />}>
-        <box
-          style={{
-            height: 4,
-            backgroundColor: context.theme.surface ?? context.theme.backgroundPanel,
-          }}
-        >
-          <box style={{ padding: 1 }}>
-            {props.header}
-          </box>
-        </box>
-      </Show>
-
-      {/* Main content area with layer background */}
-      <box
-        style={{
-          flexGrow: 1,
-          backgroundColor: currentLayer().background,
-          paddingLeft: 2,
-          paddingRight: 2,
-        }}
-      >
-        <box style={{ flexGrow: 1 }}>
-          {props.children}
-        </box>
-      </box>
-
-      {/* Footer */}
-      <Show when={props.footer} fallback={<box style={{ height: 2 }} />}>
-        <box
-          style={{
-            height: 2,
-            backgroundColor: context.theme.surface ?? context.theme.backgroundPanel,
-          }}
-        >
-          <box style={{ padding: 1 }}>
-            {props.footer}
-          </box>
-        </box>
-      </Show>
-
-      {/* Layer indicator */}
-      <Show when={props.layerDepth !== undefined}>
-        <box
-          style={{
-            height: 1,
-            backgroundColor: context.theme.surface ?? context.theme.backgroundPanel,
-          }}
-        >
-          <box style={{ padding: 1 }}>
-            <LayerIndicator layerDepth={props.layerDepth as number} />
-          </box>
-        </box>
-      </Show>
-    </box>
-  )
-}

src/components/LoadingIndicator.tsx

@@ -0,0 +1,24 @@
+import { createSignal, createMemo, onCleanup } from "solid-js";
+import { useTheme } from "@/context/ThemeContext";
+
+const spinnerChars = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+
+//TODO: Watch for actual loading state (fetching feeds)
+export function LoadingIndicator() {
+  const { theme } = useTheme();
+  const [index, setIndex] = createSignal(0);
+
+  const interval = setInterval(() => {
+    setIndex((i) => (i + 1) % spinnerChars.length);
+  }, 65);
+
+  onCleanup(() => clearInterval(interval));
+
+  const currentChar = createMemo(() => spinnerChars[index()]);
+
+  return (
+    <box flexDirection="row" justifyContent="flex-end" alignItems="flex-start">
+      <text fg={theme.primary} content={currentChar()} />
+    </box>
+  );
+}

src/components/Navigation.tsx

@@ -1,4 +1,5 @@
 import type { TabId } from "./Tab"
+import { useTheme } from "@/context/ThemeContext"
 
 type NavigationProps = {
   activeTab: TabId
@@ -6,12 +7,15 @@ type NavigationProps = {
 }
 
 export function Navigation(props: NavigationProps) {
+  const { theme } = useTheme();
   return (
     <box style={{ flexDirection: "row", width: "100%", height: 1 }}>
-      <text>
-        {props.activeTab === "discover" ? "[" : " "}Discover{props.activeTab === "discover" ? "]" : " "}
+      <text fg={theme.text}>
+        {props.activeTab === "feed" ? "[" : " "}Feed{props.activeTab === "feed" ? "]" : " "}
         <span> </span>
-        {props.activeTab === "feeds" ? "[" : " "}My Feeds{props.activeTab === "feeds" ? "]" : " "}
+        {props.activeTab === "shows" ? "[" : " "}My Shows{props.activeTab === "shows" ? "]" : " "}
+        <span> </span>
+        {props.activeTab === "discover" ? "[" : " "}Discover{props.activeTab === "discover" ? "]" : " "}
         <span> </span>
         {props.activeTab === "search" ? "[" : " "}Search{props.activeTab === "search" ? "]" : " "}
         <span> </span>

src/components/OAuthPlaceholder.tsx

@@ -1,125 +0,0 @@
-/**
- * OAuth placeholder component for PodTUI
- * Displays OAuth limitations and alternative authentication methods
- */
-
-import { createSignal } from "solid-js"
-import { OAUTH_PROVIDERS, OAUTH_LIMITATION_MESSAGE } from "../config/auth"
-
-interface OAuthPlaceholderProps {
-  focused?: boolean
-  onBack?: () => void
-  onNavigateToCode?: () => void
-}
-
-type FocusField = "code" | "back"
-
-export function OAuthPlaceholder(props: OAuthPlaceholderProps) {
-  const [focusField, setFocusField] = createSignal<FocusField>("code")
-
-  const fields: FocusField[] = ["code", "back"]
-
-  const handleKeyPress = (key: { name: string; shift?: boolean }) => {
-    if (key.name === "tab") {
-      const currentIndex = fields.indexOf(focusField())
-      const nextIndex = key.shift
-        ? (currentIndex - 1 + fields.length) % fields.length
-        : (currentIndex + 1) % fields.length
-      setFocusField(fields[nextIndex])
-    } else if (key.name === "return" || key.name === "enter") {
-      if (focusField() === "code" && props.onNavigateToCode) {
-        props.onNavigateToCode()
-      } else if (focusField() === "back" && props.onBack) {
-        props.onBack()
-      }
-    } else if (key.name === "escape" && props.onBack) {
-      props.onBack()
-    }
-  }
-
-  return (
-    <box flexDirection="column" border padding={2} gap={1}>
-      <text>
-        <strong>OAuth Authentication</strong>
-      </text>
-
-      <box height={1} />
-
-      {/* OAuth providers list */}
-      <text fg="cyan">Available OAuth Providers:</text>
-
-      <box flexDirection="column" gap={0} paddingLeft={2}>
-        {OAUTH_PROVIDERS.map((provider) => (
-          <box flexDirection="row" gap={1}>
-            <text fg={provider.enabled ? "green" : "gray"}>
-              {provider.enabled ? "[+]" : "[-]"} {provider.name}
-            </text>
-            <text fg="gray">- {provider.description}</text>
-          </box>
-        ))}
-      </box>
-
-      <box height={1} />
-
-      {/* Limitation message */}
-      <box border padding={1} borderColor="yellow">
-        <text fg="yellow">Terminal Limitations</text>
-      </box>
-
-      <box paddingLeft={1}>
-        {OAUTH_LIMITATION_MESSAGE.split("\n").map((line) => (
-          <text fg="gray">{line}</text>
-        ))}
-      </box>
-
-      <box height={1} />
-
-      {/* Alternative options */}
-      <text fg="cyan">Recommended Alternatives:</text>
-
-      <box flexDirection="column" gap={0} paddingLeft={2}>
-        <box flexDirection="row" gap={1}>
-          <text fg="green">[1]</text>
-          <text fg="white">Use a sync code from the web portal</text>
-        </box>
-        <box flexDirection="row" gap={1}>
-          <text fg="green">[2]</text>
-          <text fg="white">Use email/password authentication</text>
-        </box>
-        <box flexDirection="row" gap={1}>
-          <text fg="green">[3]</text>
-          <text fg="white">Use file-based sync (no account needed)</text>
-        </box>
-      </box>
-
-      <box height={1} />
-
-      {/* Action buttons */}
-      <box flexDirection="row" gap={2}>
-        <box
-          border
-          padding={1}
-          backgroundColor={focusField() === "code" ? "#333" : undefined}
-        >
-          <text fg={focusField() === "code" ? "cyan" : undefined}>
-            [C] Enter Sync Code
-          </text>
-        </box>
-
-        <box
-          border
-          padding={1}
-          backgroundColor={focusField() === "back" ? "#333" : undefined}
-        >
-          <text fg={focusField() === "back" ? "yellow" : "gray"}>
-            [Esc] Back to Login
-          </text>
-        </box>
-      </box>
-
-      <box height={1} />
-
-      <text fg="gray">Tab to navigate, Enter to select, Esc to go back</text>
-    </box>
-  )
-}

src/components/PlaybackControls.tsx

@@ -1,34 +0,0 @@
-type PlaybackControlsProps = {
-  isPlaying: boolean
-  volume: number
-  speed: number
-  onToggle: () => void
-  onPrev: () => void
-  onNext: () => void
-  onVolumeChange: (value: number) => void
-  onSpeedChange: (value: number) => void
-}
-
-export function PlaybackControls(props: PlaybackControlsProps) {
-  return (
-    <box flexDirection="row" gap={1} alignItems="center" border padding={1}>
-      <box border padding={0} onMouseDown={props.onPrev}>
-        <text fg="cyan">[Prev]</text>
-      </box>
-      <box border padding={0} onMouseDown={props.onToggle}>
-        <text fg="cyan">{props.isPlaying ? "[Pause]" : "[Play]"}</text>
-      </box>
-      <box border padding={0} onMouseDown={props.onNext}>
-        <text fg="cyan">[Next]</text>
-      </box>
-      <box flexDirection="row" gap={1} marginLeft={2}>
-        <text fg="gray">Vol</text>
-        <text fg="white">{Math.round(props.volume * 100)}%</text>
-      </box>
-      <box flexDirection="row" gap={1} marginLeft={2}>
-        <text fg="gray">Speed</text>
-        <text fg="white">{props.speed}x</text>
-      </box>
-    </box>
-  )
-}

src/components/Player.tsx

@@ -1,114 +0,0 @@
-import { createSignal } from "solid-js"
-import { useKeyboard } from "@opentui/solid"
-import { PlaybackControls } from "./PlaybackControls"
-import { Waveform } from "./Waveform"
-import { createWaveform } from "../utils/waveform"
-import type { Episode } from "../types/episode"
-
-type PlayerProps = {
-  focused: boolean
-  onExit?: () => void
-}
-
-const SAMPLE_EPISODE: Episode = {
-  id: "sample-ep",
-  podcastId: "sample-podcast",
-  title: "A Tour of the Productive Mind",
-  description: "A short guided session on building creative focus.",
-  audioUrl: "",
-  duration: 2780,
-  pubDate: new Date(),
-}
-
-export function Player(props: PlayerProps) {
-  const [isPlaying, setIsPlaying] = createSignal(false)
-  const [position, setPosition] = createSignal(0)
-  const [volume, setVolume] = createSignal(0.7)
-  const [speed, setSpeed] = createSignal(1)
-
-  const waveform = () => createWaveform(64)
-
-  useKeyboard((key: { name: string }) => {
-    if (!props.focused) return
-    if (key.name === "space") {
-      setIsPlaying((value: boolean) => !value)
-      return
-    }
-    if (key.name === "escape") {
-      props.onExit?.()
-      return
-    }
-    if (key.name === "left") {
-      setPosition((value: number) => Math.max(0, value - 10))
-    }
-    if (key.name === "right") {
-      setPosition((value: number) => Math.min(SAMPLE_EPISODE.duration, value + 10))
-    }
-    if (key.name === "up") {
-      setVolume((value: number) => Math.min(1, Number((value + 0.05).toFixed(2))))
-    }
-    if (key.name === "down") {
-      setVolume((value: number) => Math.max(0, Number((value - 0.05).toFixed(2))))
-    }
-    if (key.name === "s") {
-      setSpeed((value: number) => (value >= 2 ? 0.5 : Number((value + 0.25).toFixed(2))))
-    }
-  })
-
-  const progressPercent = () => Math.round((position() / SAMPLE_EPISODE.duration) * 100)
-
-  return (
-    <box flexDirection="column" gap={1}>
-      <box flexDirection="row" justifyContent="space-between">
-        <text>
-          <strong>Now Playing</strong>
-        </text>
-        <text fg="gray">
-          Episode {Math.floor(position() / 60)}:{String(Math.floor(position() % 60)).padStart(2, "0")}
-        </text>
-      </box>
-
-      <box border padding={1} flexDirection="column" gap={1}>
-        <text fg="white">
-          <strong>{SAMPLE_EPISODE.title}</strong>
-        </text>
-        <text fg="gray">{SAMPLE_EPISODE.description}</text>
-
-        <box flexDirection="column" gap={1}>
-          <box flexDirection="row" gap={1} alignItems="center">
-            <text fg="gray">Progress:</text>
-            <box flexGrow={1} height={1} backgroundColor="#2a2f3a">
-              <box
-                width={`${progressPercent()}%`}
-                height={1}
-                backgroundColor={isPlaying() ? "#6fa8ff" : "#7d8590"}
-              />
-            </box>
-            <text fg="gray">{progressPercent()}%</text>
-          </box>
-
-          <Waveform
-            data={waveform()}
-            position={position()}
-            duration={SAMPLE_EPISODE.duration}
-            isPlaying={isPlaying()}
-            onSeek={(next: number) => setPosition(next)}
-          />
-        </box>
-      </box>
-
-      <PlaybackControls
-        isPlaying={isPlaying()}
-        volume={volume()}
-        speed={speed()}
-        onToggle={() => setIsPlaying((value: boolean) => !value)}
-        onPrev={() => setPosition(0)}
-        onNext={() => setPosition(SAMPLE_EPISODE.duration)}
-        onSpeedChange={setSpeed}
-        onVolumeChange={setVolume}
-      />
-
-      <text fg="gray">Enter dive | Esc up | Space play/pause | Left/Right seek</text>
-    </box>
-  )
-}

src/components/PodcastCard.tsx

@@ -1,73 +0,0 @@
-/**
- * PodcastCard component - Reusable card for displaying podcast info
- */
-
-import { Show, For } from "solid-js"
-import type { Podcast } from "../types/podcast"
-
-type PodcastCardProps = {
-  podcast: Podcast
-  selected: boolean
-  compact?: boolean
-  onSelect?: () => void
-  onSubscribe?: () => void
-}
-
-export function PodcastCard(props: PodcastCardProps) {
-  const handleSubscribeClick = () => {
-    props.onSubscribe?.()
-  }
-
-  return (
-    <box
-      flexDirection="column"
-      padding={1}
-      backgroundColor={props.selected ? "#333" : undefined}
-      onMouseDown={props.onSelect}
-    >
-      {/* Title Row */}
-      <box flexDirection="row" gap={2} alignItems="center">
-        <text fg={props.selected ? "cyan" : "white"}>
-          <strong>{props.podcast.title}</strong>
-        </text>
-
-        <Show when={props.podcast.isSubscribed}>
-          <text fg="green">[+]</text>
-        </Show>
-      </box>
-
-      {/* Author */}
-      <Show when={props.podcast.author && !props.compact}>
-        <text fg="gray">by {props.podcast.author}</text>
-      </Show>
-
-      {/* Description */}
-      <Show when={props.podcast.description && !props.compact}>
-        <text fg={props.selected ? "white" : "gray"}>
-          {props.podcast.description!.length > 80
-            ? props.podcast.description!.slice(0, 80) + "..."
-            : props.podcast.description}
-        </text>
-      </Show>
-
-      {/* Categories and Subscribe Button */}
-      <box flexDirection="row" justifyContent="space-between" marginTop={props.compact ? 0 : 1}>
-        <box flexDirection="row" gap={1}>
-          <Show when={(props.podcast.categories ?? []).length > 0}>
-            <For each={(props.podcast.categories ?? []).slice(0, 2)}>
-              {(cat) => <text fg="yellow">[{cat}]</text>}
-            </For>
-          </Show>
-        </box>
-
-        <Show when={props.selected}>
-          <box onMouseDown={handleSubscribeClick}>
-            <text fg={props.podcast.isSubscribed ? "red" : "green"}>
-              {props.podcast.isSubscribed ? "[Unsubscribe]" : "[Subscribe]"}
-            </text>
-          </box>
-        </Show>
-      </box>
-    </box>
-  )
-}

src/components/ResponsiveContainer.tsx

@@ -1,19 +0,0 @@
-import { createMemo, type JSX } from "solid-js"
-import { useTerminalDimensions } from "@opentui/solid"
-
-type ResponsiveContainerProps = {
-  children?: (size: "small" | "medium" | "large") => JSX.Element
-}
-
-export function ResponsiveContainer(props: ResponsiveContainerProps) {
-  const dimensions = useTerminalDimensions()
-
-  const size = createMemo<"small" | "medium" | "large">(() => {
-    const width = dimensions().width
-    if (width < 60) return "small"
-    if (width < 100) return "medium"
-    return "large"
-  })
-
-  return <>{props.children?.(size())}</>
-}

src/components/ResultCard.tsx

@@ -1,79 +0,0 @@
-import { Show } from "solid-js"
-import type { SearchResult } from "../types/source"
-import { SourceBadge } from "./SourceBadge"
-
-type ResultCardProps = {
-  result: SearchResult
-  selected: boolean
-  onSelect: () => void
-  onSubscribe?: () => void
-}
-
-export function ResultCard(props: ResultCardProps) {
-  const podcast = () => props.result.podcast
-
-  return (
-    <box
-      flexDirection="column"
-      padding={1}
-      border={props.selected}
-      borderColor={props.selected ? "cyan" : undefined}
-      backgroundColor={props.selected ? "#222" : undefined}
-      onMouseDown={props.onSelect}
-    >
-      <box flexDirection="row" justifyContent="space-between" alignItems="center">
-        <box flexDirection="row" gap={2} alignItems="center">
-          <text fg={props.selected ? "cyan" : "white"}>
-            <strong>{podcast().title}</strong>
-          </text>
-          <SourceBadge
-            sourceId={props.result.sourceId}
-            sourceName={props.result.sourceName}
-            sourceType={props.result.sourceType}
-          />
-        </box>
-        <Show when={podcast().isSubscribed}>
-          <text fg="green">[Subscribed]</text>
-        </Show>
-      </box>
-
-      <Show when={podcast().author}>
-        <text fg="gray">by {podcast().author}</text>
-      </Show>
-
-      <Show when={podcast().description}>
-        {(description) => (
-          <text fg={props.selected ? "white" : "gray"}>
-            {description().length > 120
-              ? description().slice(0, 120) + "..."
-              : description()}
-          </text>
-        )}
-      </Show>
-
-      <Show when={(podcast().categories ?? []).length > 0}>
-        <box flexDirection="row" gap={1}>
-          {(podcast().categories ?? []).slice(0, 3).map((category) => (
-            <text fg="yellow">[{category}]</text>
-          ))}
-        </box>
-      </Show>
-
-      <Show when={!podcast().isSubscribed}>
-        <box
-          border
-          padding={0}
-          paddingLeft={1}
-          paddingRight={1}
-          width={18}
-          onMouseDown={(event) => {
-            event.stopPropagation?.()
-            props.onSubscribe?.()
-          }}
-        >
-          <text fg="cyan">[+] Add to Feeds</text>
-        </box>
-      </Show>
-    </box>
-  )
-}

src/components/ResultDetail.tsx

@@ -1,75 +0,0 @@
-import { Show } from "solid-js"
-import { format } from "date-fns"
-import type { SearchResult } from "../types/source"
-import { SourceBadge } from "./SourceBadge"
-
-type ResultDetailProps = {
-  result?: SearchResult
-  onSubscribe?: (result: SearchResult) => void
-}
-
-export function ResultDetail(props: ResultDetailProps) {
-  return (
-    <box flexDirection="column" border padding={1} gap={1} height="100%">
-      <Show
-        when={props.result}
-        fallback={
-          <text fg="gray">Select a result to see details.</text>
-        }
-      >
-        {(result) => (
-          <>
-          <text fg="white">
-            <strong>{result().podcast.title}</strong>
-          </text>
-
-            <SourceBadge
-              sourceId={result().sourceId}
-              sourceName={result().sourceName}
-              sourceType={result().sourceType}
-            />
-
-          <Show when={result().podcast.author}>
-            <text fg="gray">by {result().podcast.author}</text>
-          </Show>
-
-          <Show when={result().podcast.description}>
-            <text fg="gray">{result().podcast.description}</text>
-          </Show>
-
-          <Show when={(result().podcast.categories ?? []).length > 0}>
-            <box flexDirection="row" gap={1}>
-              {(result().podcast.categories ?? []).map((category) => (
-                <text fg="yellow">[{category}]</text>
-              ))}
-            </box>
-          </Show>
-
-          <text fg="gray">Feed: {result().podcast.feedUrl}</text>
-
-          <text fg="gray">
-            Updated: {format(result().podcast.lastUpdated, "MMM d, yyyy")}
-          </text>
-
-            <Show when={!result().podcast.isSubscribed}>
-              <box
-                border
-                padding={0}
-                paddingLeft={1}
-                paddingRight={1}
-                width={18}
-                onMouseDown={() => props.onSubscribe?.(result())}
-              >
-                <text fg="cyan">[+] Add to Feeds</text>
-              </box>
-            </Show>
-
-            <Show when={result().podcast.isSubscribed}>
-              <text fg="green">Already subscribed</text>
-            </Show>
-          </>
-        )}
-      </Show>
-    </box>
-  )
-}

src/components/Row.tsx

@@ -1,35 +0,0 @@
-import type { JSX } from "solid-js"
-
-type RowProps = {
-  children?: JSX.Element
-  gap?: number
-  alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline"
-  justifyContent?:
-    | "flex-start"
-    | "flex-end"
-    | "center"
-    | "space-between"
-    | "space-around"
-    | "space-evenly"
-  width?: number | "auto" | `${number}%`
-  height?: number | "auto" | `${number}%`
-  padding?: number
-}
-
-export function Row(props: RowProps) {
-  return (
-    <box
-      style={{
-        flexDirection: "row",
-        gap: props.gap,
-        alignItems: props.alignItems,
-        justifyContent: props.justifyContent,
-        width: props.width,
-        height: props.height,
-        padding: props.padding,
-      }}
-    >
-      {props.children}
-    </box>
-  )
-}

src/components/SearchPage.tsx

@@ -1,276 +0,0 @@
-/**
- * SearchPage component - Main search interface for PodTUI
- */
-
-import { createSignal, Show } from "solid-js"
-import { useKeyboard } from "@opentui/solid"
-import { useSearchStore } from "../stores/search"
-import { SearchResults } from "./SearchResults"
-import { SearchHistory } from "./SearchHistory"
-import type { SearchResult } from "../types/source"
-
-type SearchPageProps = {
-  focused: boolean
-  onSubscribe?: (result: SearchResult) => void
-  onInputFocusChange?: (focused: boolean) => void
-  onExit?: () => void
-}
-
-type FocusArea = "input" | "results" | "history"
-
-export function SearchPage(props: SearchPageProps) {
-  const searchStore = useSearchStore()
-  const [focusArea, setFocusArea] = createSignal<FocusArea>("input")
-  const [inputValue, setInputValue] = createSignal("")
-  const [resultIndex, setResultIndex] = createSignal(0)
-  const [historyIndex, setHistoryIndex] = createSignal(0)
-
-  const handleSearch = async () => {
-    const query = inputValue().trim()
-    if (query) {
-      await searchStore.search(query)
-      if (searchStore.results().length > 0) {
-        setFocusArea("results")
-        setResultIndex(0)
-        props.onInputFocusChange?.(false)
-      }
-    }
-    if (props.focused && focusArea() === "input") {
-      props.onInputFocusChange?.(true)
-    }
-  }
-
-  const handleHistorySelect = async (query: string) => {
-    setInputValue(query)
-    await searchStore.search(query)
-    if (searchStore.results().length > 0) {
-      setFocusArea("results")
-      setResultIndex(0)
-    }
-  }
-
-  const handleResultSelect = (result: SearchResult) => {
-    props.onSubscribe?.(result)
-    searchStore.markSubscribed(result.podcast.id)
-  }
-
-  // Keyboard navigation
-  useKeyboard((key) => {
-    if (!props.focused) return
-
-    const area = focusArea()
-
-    // Enter to search from input
-    if (key.name === "enter" && area === "input") {
-      handleSearch()
-      return
-    }
-
-    // Tab to cycle focus areas
-    if (key.name === "tab" && !key.shift) {
-      if (area === "input") {
-        if (searchStore.results().length > 0) {
-          setFocusArea("results")
-          props.onInputFocusChange?.(false)
-        } else if (searchStore.history().length > 0) {
-          setFocusArea("history")
-          props.onInputFocusChange?.(false)
-        }
-      } else if (area === "results") {
-        if (searchStore.history().length > 0) {
-          setFocusArea("history")
-        } else {
-          setFocusArea("input")
-          props.onInputFocusChange?.(true)
-        }
-      } else {
-        setFocusArea("input")
-        props.onInputFocusChange?.(true)
-      }
-      return
-    }
-
-    if (key.name === "tab" && key.shift) {
-      if (area === "input") {
-        if (searchStore.history().length > 0) {
-          setFocusArea("history")
-          props.onInputFocusChange?.(false)
-        } else if (searchStore.results().length > 0) {
-          setFocusArea("results")
-          props.onInputFocusChange?.(false)
-        }
-      } else if (area === "history") {
-        if (searchStore.results().length > 0) {
-          setFocusArea("results")
-        } else {
-          setFocusArea("input")
-          props.onInputFocusChange?.(true)
-        }
-      } else {
-        setFocusArea("input")
-        props.onInputFocusChange?.(true)
-      }
-      return
-    }
-
-    // Up/Down for results and history
-    if (area === "results") {
-      const results = searchStore.results()
-      if (key.name === "down" || key.name === "j") {
-        setResultIndex((i) => Math.min(i + 1, results.length - 1))
-        return
-      }
-      if (key.name === "up" || key.name === "k") {
-        setResultIndex((i) => Math.max(i - 1, 0))
-        return
-      }
-      if (key.name === "enter") {
-        const result = results[resultIndex()]
-        if (result) handleResultSelect(result)
-        return
-      }
-    }
-
-    if (area === "history") {
-      const history = searchStore.history()
-      if (key.name === "down" || key.name === "j") {
-        setHistoryIndex((i) => Math.min(i + 1, history.length - 1))
-        return
-      }
-      if (key.name === "up" || key.name === "k") {
-        setHistoryIndex((i) => Math.max(i - 1, 0))
-        return
-      }
-      if (key.name === "enter") {
-        const query = history[historyIndex()]
-        if (query) handleHistorySelect(query)
-        return
-      }
-    }
-
-    // Escape goes back to input or up one level
-    if (key.name === "escape") {
-      if (area === "input") {
-        props.onExit?.()
-      } else {
-        setFocusArea("input")
-        props.onInputFocusChange?.(true)
-      }
-      return
-    }
-
-    // "/" focuses search input
-    if (key.name === "/" && area !== "input") {
-      setFocusArea("input")
-      props.onInputFocusChange?.(true)
-      return
-    }
-  })
-
-  return (
-    <box flexDirection="column" height="100%" gap={1}>
-      {/* Search Header */}
-      <box flexDirection="column" gap={1}>
-          <text>
-            <strong>Search Podcasts</strong>
-          </text>
-
-        {/* Search Input */}
-        <box flexDirection="row" gap={1} alignItems="center">
-          <text fg="gray">Search:</text>
-          <input
-            value={inputValue()}
-            onInput={(value) => {
-              setInputValue(value)
-              if (props.focused && focusArea() === "input") {
-                props.onInputFocusChange?.(true)
-              }
-            }}
-            placeholder="Enter podcast name, topic, or author..."
-            focused={props.focused && focusArea() === "input"}
-            width={50}
-          />
-          <box
-            border
-            padding={0}
-            paddingLeft={1}
-            paddingRight={1}
-            onMouseDown={handleSearch}
-          >
-            <text fg="cyan">[Enter] Search</text>
-          </box>
-        </box>
-
-        {/* Status */}
-        <Show when={searchStore.isSearching()}>
-          <text fg="yellow">Searching...</text>
-        </Show>
-        <Show when={searchStore.error()}>
-          <text fg="red">{searchStore.error()}</text>
-        </Show>
-      </box>
-
-      {/* Main Content - Results or History */}
-      <box flexDirection="row" height="100%" gap={2}>
-        {/* Results Panel */}
-        <box flexDirection="column" flexGrow={1} border>
-          <box padding={1}>
-            <text fg={focusArea() === "results" ? "cyan" : "gray"}>
-              Results ({searchStore.results().length})
-            </text>
-          </box>
-          <Show
-            when={searchStore.results().length > 0}
-            fallback={
-              <box padding={2}>
-                <text fg="gray">
-                  {searchStore.query()
-                    ? "No results found"
-                    : "Enter a search term to find podcasts"}
-                </text>
-              </box>
-            }
-          >
-            <SearchResults
-              results={searchStore.results()}
-              selectedIndex={resultIndex()}
-              focused={focusArea() === "results"}
-              onSelect={handleResultSelect}
-              onChange={setResultIndex}
-              isSearching={searchStore.isSearching()}
-              error={searchStore.error()}
-            />
-          </Show>
-        </box>
-
-        {/* History Sidebar */}
-          <box width={30} border>
-            <box padding={1} flexDirection="column">
-              <box paddingBottom={1}>
-                <text fg={focusArea() === "history" ? "cyan" : "gray"}>
-                  History
-                </text>
-              </box>
-              <SearchHistory
-                history={searchStore.history()}
-                selectedIndex={historyIndex()}
-                focused={focusArea() === "history"}
-              onSelect={handleHistorySelect}
-              onRemove={searchStore.removeFromHistory}
-              onClear={searchStore.clearHistory}
-              onChange={setHistoryIndex}
-            />
-          </box>
-        </box>
-      </box>
-
-      {/* Footer Hints */}
-      <box flexDirection="row" gap={2}>
-        <text fg="gray">[Tab] Switch focus</text>
-        <text fg="gray">[/] Focus search</text>
-        <text fg="gray">[Enter] Select</text>
-        <text fg="gray">[Esc] Up</text>
-      </box>
-    </box>
-  )
-}

src/components/Selectable.tsx

@@ -0,0 +1,81 @@
+import { useTheme } from "@/context/ThemeContext";
+import { children as solidChildren } from "solid-js";
+import type { ParentComponent } from "solid-js";
+import type { BoxOptions, TextOptions } from "@opentui/core";
+
+export const SelectableBox: ParentComponent<
+  {
+    selected: () => boolean;
+  } & BoxOptions
+> = (props) => {
+  const themeContext = useTheme();
+  const { theme } = themeContext;
+
+  const child = solidChildren(() => props.children);
+
+  return (
+    <box
+      border={!!props.border}
+      borderColor={props.selected() ? theme.surface : theme.border}
+      backgroundColor={
+        props.selected()
+          ? theme.primary
+          : themeContext.selected === "system"
+            ? "transparent"
+            : themeContext.theme.surface
+      }
+      {...props}
+    >
+      {child()}
+    </box>
+  );
+};
+
+enum ColorSet {
+  PRIMARY,
+  SECONDARY,
+  TERTIARY,
+  DEFAULT,
+}
+function getTextColor(set: ColorSet, selected: () => boolean) {
+  const { theme } = useTheme();
+  switch (set) {
+    case ColorSet.PRIMARY:
+      return selected() ? theme.textSelectedPrimary : theme.textPrimary;
+    case ColorSet.SECONDARY:
+      return selected() ? theme.textSelectedSecondary : theme.textSecondary;
+    case ColorSet.TERTIARY:
+      return selected() ? theme.textSelectedTertiary : theme.textTertiary;
+    default:
+      return theme.textPrimary;
+  }
+}
+
+export const SelectableText: ParentComponent<
+  {
+    selected: () => boolean;
+    primary?: boolean;
+    secondary?: boolean;
+    tertiary?: boolean;
+  } & TextOptions
+> = (props) => {
+  const child = solidChildren(() => props.children);
+
+  return (
+    <text
+      fg={getTextColor(
+        props.primary
+          ? ColorSet.PRIMARY
+          : props.secondary
+            ? ColorSet.SECONDARY
+            : props.tertiary
+              ? ColorSet.TERTIARY
+              : ColorSet.DEFAULT,
+        props.selected,
+      )}
+      {...props}
+    >
+      {child()}
+    </text>
+  );
+};

src/components/SettingsScreen.tsx

@@ -1,98 +0,0 @@
-import { createSignal, For } from "solid-js"
-import { useKeyboard } from "@opentui/solid"
-import { SourceManager } from "./SourceManager"
-import { useTheme } from "../context/ThemeContext"
-import { PreferencesPanel } from "./PreferencesPanel"
-import { SyncPanel } from "./SyncPanel"
-
-type SettingsScreenProps = {
-  accountLabel: string
-  accountStatus: "signed-in" | "signed-out"
-  onOpenAccount?: () => void
-  onExit?: () => void
-}
-
-type SectionId = "sync" | "sources" | "preferences" | "account"
-
-const SECTIONS: Array<{ id: SectionId; label: string }> = [
-  { id: "sync", label: "Sync" },
-  { id: "sources", label: "Sources" },
-  { id: "preferences", label: "Preferences" },
-  { id: "account", label: "Account" },
-]
-
-export function SettingsScreen(props: SettingsScreenProps) {
-  const { theme } = useTheme()
-  const [activeSection, setActiveSection] = createSignal<SectionId>("sync")
-
-  useKeyboard((key) => {
-    if (key.name === "escape") {
-      props.onExit?.()
-      return
-    }
-
-    if (key.name === "tab") {
-      const idx = SECTIONS.findIndex((s) => s.id === activeSection())
-      const next = key.shift
-        ? (idx - 1 + SECTIONS.length) % SECTIONS.length
-        : (idx + 1) % SECTIONS.length
-      setActiveSection(SECTIONS[next].id)
-      return
-    }
-
-    if (key.name === "1") setActiveSection("sync")
-    if (key.name === "2") setActiveSection("sources")
-    if (key.name === "3") setActiveSection("preferences")
-    if (key.name === "4") setActiveSection("account")
-  })
-
-  return (
-    <box flexDirection="column" gap={1} height="100%">
-      <box flexDirection="row" justifyContent="space-between" alignItems="center">
-        <text>
-          <strong>Settings</strong>
-        </text>
-        <text fg={theme.textMuted}>[Tab] Switch section | 1-4 jump | Esc up</text>
-      </box>
-
-      <box flexDirection="row" gap={1}>
-        <For each={SECTIONS}>
-          {(section, index) => (
-            <box
-              border
-              padding={0}
-              backgroundColor={activeSection() === section.id ? theme.primary : undefined}
-              onMouseDown={() => setActiveSection(section.id)}
-            >
-              <text fg={activeSection() === section.id ? theme.text : theme.textMuted}>
-                [{index() + 1}] {section.label}
-              </text>
-            </box>
-          )}
-        </For>
-      </box>
-
-      <box border flexGrow={1} padding={1} flexDirection="column" gap={1}>
-        {activeSection() === "sync" && <SyncPanel />}
-        {activeSection() === "sources" && <SourceManager focused />}
-        {activeSection() === "preferences" && <PreferencesPanel />}
-        {activeSection() === "account" && (
-          <box flexDirection="column" gap={1}>
-            <text fg={theme.textMuted}>Account</text>
-            <box flexDirection="row" gap={2} alignItems="center">
-              <text fg={theme.textMuted}>Status:</text>
-              <text fg={props.accountStatus === "signed-in" ? theme.success : theme.warning}>
-                {props.accountLabel}
-              </text>
-            </box>
-            <box border padding={0} onMouseDown={() => props.onOpenAccount?.()}>
-              <text fg={theme.primary}>[A] Manage Account</text>
-            </box>
-          </box>
-        )}
-      </box>
-
-      <text fg={theme.textMuted}>Enter to dive | Esc up</text>
-    </box>
-  )
-}

src/components/ShortcutHelp.tsx

@@ -1,26 +1,28 @@
-import { shortcuts } from "../config/shortcuts"
+import { shortcuts } from "@/config/shortcuts";
+import { useTheme } from "@/context/ThemeContext";
 
 export function ShortcutHelp() {
+  const { theme } = useTheme();
   return (
     <box border title="Shortcuts" style={{ padding: 1 }}>
       <box style={{ flexDirection: "column" }}>
         <box style={{ flexDirection: "row" }}>
-          <text>{shortcuts[0]?.keys ?? ""} </text>
-          <text>{shortcuts[0]?.action ?? ""}</text>
+          <text fg={theme.text}>{shortcuts[0]?.keys ?? ""} </text>
+          <text fg={theme.text}>{shortcuts[0]?.action ?? ""}</text>
         </box>
         <box style={{ flexDirection: "row" }}>
-          <text>{shortcuts[1]?.keys ?? ""} </text>
-          <text>{shortcuts[1]?.action ?? ""}</text>
+          <text fg={theme.text}>{shortcuts[1]?.keys ?? ""} </text>
+          <text fg={theme.text}>{shortcuts[1]?.action ?? ""}</text>
         </box>
         <box style={{ flexDirection: "row" }}>
-          <text>{shortcuts[2]?.keys ?? ""} </text>
-          <text>{shortcuts[2]?.action ?? ""}</text>
+          <text fg={theme.text}>{shortcuts[2]?.keys ?? ""} </text>
+          <text fg={theme.text}>{shortcuts[2]?.action ?? ""}</text>
         </box>
         <box style={{ flexDirection: "row" }}>
-          <text>{shortcuts[3]?.keys ?? ""} </text>
-          <text>{shortcuts[3]?.action ?? ""}</text>
+          <text fg={theme.text}>{shortcuts[3]?.keys ?? ""} </text>
+          <text fg={theme.text}>{shortcuts[3]?.action ?? ""}</text>
         </box>
       </box>
     </box>
-  )
+  );
 }

src/components/SourceBadge.tsx

@@ -1,34 +0,0 @@
-import { SourceType } from "../types/source"
-
-type SourceBadgeProps = {
-  sourceId: string
-  sourceName?: string
-  sourceType?: SourceType
-}
-
-const typeLabel = (sourceType?: SourceType) => {
-  if (sourceType === SourceType.API) return "API"
-  if (sourceType === SourceType.RSS) return "RSS"
-  if (sourceType === SourceType.CUSTOM) return "Custom"
-  return "Source"
-}
-
-const typeColor = (sourceType?: SourceType) => {
-  if (sourceType === SourceType.API) return "cyan"
-  if (sourceType === SourceType.RSS) return "green"
-  if (sourceType === SourceType.CUSTOM) return "yellow"
-  return "gray"
-}
-
-export function SourceBadge(props: SourceBadgeProps) {
-  const label = () => props.sourceName || props.sourceId
-
-  return (
-    <box flexDirection="row" gap={1} padding={0}>
-      <text fg={typeColor(props.sourceType)}>
-        [{typeLabel(props.sourceType)}]
-      </text>
-      <text fg="gray">{label()}</text>
-    </box>
-  )
-}

src/components/SourceManager.tsx

@@ -1,302 +0,0 @@
-/**
- * Source management component for PodTUI
- * Add, remove, and configure podcast sources
- */
-
-import { createSignal, For } from "solid-js"
-import { useFeedStore } from "../stores/feed"
-import { useTheme } from "../context/ThemeContext"
-import { SourceType } from "../types/source"
-import type { PodcastSource } from "../types/source"
-
-interface SourceManagerProps {
-  focused?: boolean
-  onClose?: () => void
-}
-
-type FocusArea = "list" | "add" | "url" | "country" | "explicit" | "language"
-
-export function SourceManager(props: SourceManagerProps) {
-  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 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 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 === "enter" || 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 === "enter" || key.name === "return" || key.name === "space") {
-        const source = sources()[selectedIndex()]
-        if (source && source.type === SourceType.API) {
-          feedStore.updateSource(source.id, { allowExplicit: !source.allowExplicit })
-        }
-      }
-    }
-
-    if (focusArea() === "language") {
-      if (key.name === "enter" || 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 })
-        }
-      }
-    }
-  }
-
-  const handleAddSource = () => {
-    const url = newSourceUrl().trim()
-    const name = newSourceName().trim() || `Custom Source`
-
-    if (!url) {
-      setError("URL is required")
-      return
-    }
-
-    try {
-      new URL(url)
-    } catch {
-      setError("Invalid URL format")
-      return
-    }
-
-    feedStore.addSource({
-      name,
-      type: "rss" as SourceType,
-      baseUrl: url,
-      enabled: true,
-      description: `Custom RSS feed: ${url}`,
-    })
-
-    setNewSourceUrl("")
-    setNewSourceName("")
-    setFocusArea("list")
-    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 padding={1} gap={1}>
-      <box flexDirection="row" justifyContent="space-between">
-        <text>
-          <strong>Podcast Sources</strong>
-        </text>
-        <box 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 padding={1} flexDirection="column" gap={1}>
-        <text fg={focusArea() === "list" ? theme.primary : theme.textMuted}>Sources:</text>
-        <scrollbox height={6}>
-          <For each={sources()}>
-            {(source, index) => (
-              <box
-                flexDirection="row"
-                gap={1}
-                padding={0}
-                backgroundColor={
-                  focusArea() === "list" && index() === selectedIndex()
-                    ? theme.primary
-                    : undefined
-                }
-                onMouseDown={() => {
-                  setSelectedIndex(index())
-                  setFocusArea("list")
-                  feedStore.toggleSource(source.id)
-                }}
-              >
-                <text fg={
-                  focusArea() === "list" && index() === selectedIndex()
-                    ? theme.primary
-                    : theme.textMuted
-                }>
-                  {focusArea() === "list" && index() === selectedIndex()
-                    ? ">"
-                    : " "}
-                </text>
-                <text fg={source.enabled ? theme.success : theme.error}>
-                  {source.enabled ? "[x]" : "[ ]"}
-                </text>
-                <text fg={theme.accent}>{getSourceIcon(source)}</text>
-                <text
-                  fg={
-                    focusArea() === "list" && index() === selectedIndex()
-                      ? theme.text
-                      : undefined
-                  }
-                >
-                  {source.name}
-                </text>
-              </box>
-            )}
-          </For>
-        </scrollbox>
-        <text fg={theme.textMuted}>Space/Enter to toggle, d to delete, a to add</text>
-
-        {/* API settings */}
-        <box flexDirection="column" gap={1}>
-          <text fg={isApiSource() ? theme.textMuted : theme.accent}>
-            {isApiSource() ? "API Settings" : "API Settings (select an API source)"}
-          </text>
-          <box flexDirection="row" gap={2}>
-            <box
-              border
-              padding={0}
-              backgroundColor={focusArea() === "country" ? theme.primary : undefined}
-            >
-              <text fg={focusArea() === "country" ? theme.primary : theme.textMuted}>
-                Country: {sourceCountry()}
-              </text>
-            </box>
-            <box
-              border
-              padding={0}
-              backgroundColor={focusArea() === "language" ? theme.primary : undefined}
-            >
-              <text fg={focusArea() === "language" ? theme.primary : theme.textMuted}>
-                Language: {sourceLanguage() === "ja_jp" ? "Japanese" : "English"}
-              </text>
-            </box>
-            <box
-              border
-              padding={0}
-              backgroundColor={focusArea() === "explicit" ? theme.primary : undefined}
-            >
-              <text fg={focusArea() === "explicit" ? theme.primary : theme.textMuted}>
-                Explicit: {sourceExplicit() ? "Yes" : "No"}
-              </text>
-            </box>
-          </box>
-          <text fg={theme.textMuted}>Enter/Space to toggle focused setting</text>
-        </box>
-      </box>
-
-      {/* Add new source form */}
-      <box border padding={1} flexDirection="column" gap={1}>
-        <text fg={focusArea() === "add" || focusArea() === "url" ? theme.primary : theme.textMuted}>
-          Add New Source:
-        </text>
-
-        <box flexDirection="row" gap={1}>
-          <text fg={theme.textMuted}>Name:</text>
-          <input
-            value={newSourceName()}
-            onInput={setNewSourceName}
-            placeholder="My Custom Feed"
-            focused={props.focused && focusArea() === "add"}
-            width={25}
-          />
-        </box>
-
-        <box flexDirection="row" gap={1}>
-          <text fg={theme.textMuted}>URL:</text>
-          <input
-            value={newSourceUrl()}
-            onInput={(v) => {
-              setNewSourceUrl(v)
-              setError(null)
-            }}
-            placeholder="https://example.com/feed.rss"
-            focused={props.focused && focusArea() === "url"}
-            width={35}
-          />
-        </box>
-
-        <box
-          border
-          padding={0}
-          width={15}
-          onMouseDown={handleAddSource}
-        >
-          <text fg={theme.success}>[+] Add Source</text>
-        </box>
-      </box>
-
-      {/* Error message */}
-      {error() && (
-        <text fg={theme.error}>{error()}</text>
-      )}
-
-      <text fg={theme.textMuted}>Tab to switch sections, Esc to close</text>
-    </box>
-  )
-}

src/components/SyncError.tsx

@@ -1,15 +0,0 @@
-type SyncErrorProps = {
-  message: string
-  onRetry: () => void
-}
-
-export function SyncError(props: SyncErrorProps) {
-  return (
-    <box border title="Error" style={{ padding: 1, flexDirection: "column", gap: 1 }}>
-      <text>{props.message}</text>
-      <box border onMouseDown={props.onRetry}>
-        <text>Retry</text>
-      </box>
-    </box>
-  )
-}

src/components/SyncProfile.tsx

@@ -1,148 +0,0 @@
-/**
- * Sync profile component for PodTUI
- * Displays user profile information and sync status
- */
-
-import { createSignal } from "solid-js"
-import { useAuthStore } from "../stores/auth"
-import { format } from "date-fns"
-
-interface SyncProfileProps {
-  focused?: boolean
-  onLogout?: () => void
-  onManageSync?: () => void
-}
-
-type FocusField = "sync" | "export" | "logout"
-
-export function SyncProfile(props: SyncProfileProps) {
-  const auth = useAuthStore()
-  const [focusField, setFocusField] = createSignal<FocusField>("sync")
-  const [lastSyncTime] = createSignal<Date | null>(new Date())
-
-  const fields: FocusField[] = ["sync", "export", "logout"]
-
-  const handleKeyPress = (key: { name: string; shift?: boolean }) => {
-    if (key.name === "tab") {
-      const currentIndex = fields.indexOf(focusField())
-      const nextIndex = key.shift
-        ? (currentIndex - 1 + fields.length) % fields.length
-        : (currentIndex + 1) % fields.length
-      setFocusField(fields[nextIndex])
-    } else if (key.name === "return" || key.name === "enter") {
-      if (focusField() === "sync" && props.onManageSync) {
-        props.onManageSync()
-      } else if (focusField() === "logout" && props.onLogout) {
-        handleLogout()
-      }
-    }
-  }
-
-  const handleLogout = () => {
-    auth.logout()
-    if (props.onLogout) {
-      props.onLogout()
-    }
-  }
-
-  const formatDate = (date: Date | null | undefined): string => {
-    if (!date) return "Never"
-    return format(date, "MMM d, yyyy HH:mm")
-  }
-
-  const user = () => auth.state().user
-
-  // Get user initials for avatar
-  const userInitials = () => {
-    const name = user()?.name || "?"
-    return name.slice(0, 2).toUpperCase()
-  }
-
-  return (
-    <box flexDirection="column" border padding={2} gap={1}>
-      <text>
-        <strong>User Profile</strong>
-      </text>
-
-      <box height={1} />
-
-      {/* User avatar and info */}
-      <box flexDirection="row" gap={2}>
-        {/* ASCII avatar */}
-        <box border padding={1} width={8} height={4} justifyContent="center" alignItems="center">
-          <text fg="cyan">{userInitials()}</text>
-        </box>
-
-        {/* User details */}
-        <box flexDirection="column" gap={0}>
-          <text fg="white">{user()?.name || "Guest User"}</text>
-          <text fg="gray">{user()?.email || "No email"}</text>
-          <text fg="gray">Joined: {formatDate(user()?.createdAt)}</text>
-        </box>
-      </box>
-
-      <box height={1} />
-
-      {/* Sync status section */}
-      <box border padding={1} flexDirection="column" gap={0}>
-        <text fg="cyan">Sync Status</text>
-
-        <box flexDirection="row" gap={1}>
-          <text fg="gray">Status:</text>
-          <text fg={user()?.syncEnabled ? "green" : "yellow"}>
-            {user()?.syncEnabled ? "Enabled" : "Disabled"}
-          </text>
-        </box>
-
-        <box flexDirection="row" gap={1}>
-          <text fg="gray">Last Sync:</text>
-          <text fg="white">{formatDate(lastSyncTime())}</text>
-        </box>
-
-        <box flexDirection="row" gap={1}>
-          <text fg="gray">Method:</text>
-          <text fg="white">File-based (JSON/XML)</text>
-        </box>
-      </box>
-
-      <box height={1} />
-
-      {/* Action buttons */}
-      <box flexDirection="row" gap={2}>
-        <box
-          border
-          padding={1}
-          backgroundColor={focusField() === "sync" ? "#333" : undefined}
-        >
-          <text fg={focusField() === "sync" ? "cyan" : undefined}>
-            [S] Manage Sync
-          </text>
-        </box>
-
-        <box
-          border
-          padding={1}
-          backgroundColor={focusField() === "export" ? "#333" : undefined}
-        >
-          <text fg={focusField() === "export" ? "cyan" : undefined}>
-            [E] Export Data
-          </text>
-        </box>
-
-        <box
-          border
-          padding={1}
-          backgroundColor={focusField() === "logout" ? "#333" : undefined}
-        >
-          <text fg={focusField() === "logout" ? "red" : "gray"}>
-            [L] Logout
-          </text>
-        </box>
-      </box>
-
-      <box height={1} />
-
-      <text fg="gray">Tab to navigate, Enter to select</text>
-    </box>
-  )
-}

src/components/Tab.tsx

@@ -1,39 +0,0 @@
-import { useTheme } from "../context/ThemeContext"
-
-export type TabId = "discover" | "feeds" | "search" | "player" | "settings"
-
-export type TabDefinition = {
-  id: TabId
-  label: string
-}
-
-export const tabs: TabDefinition[] = [
-  { id: "discover", label: "Discover" },
-  { id: "feeds", label: "My Feeds" },
-  { id: "search", label: "Search" },
-  { id: "player", label: "Player" },
-  { id: "settings", label: "Settings" },
-]
-
-type TabProps = {
-  tab: TabDefinition
-  active: boolean
-  onSelect: (tab: TabId) => void
-}
-
-export function Tab(props: TabProps) {
-  const { theme } = useTheme()
-  return (
-    <box
-      border
-      onMouseDown={() => props.onSelect(props.tab.id)}
-      style={{ padding: 1, backgroundColor: props.active ? theme.primary : "transparent" }}
-    >
-      <text>
-        {props.active ? "[" : " "}
-        {props.tab.label}
-        {props.active ? "]" : " "}
-      </text>
-    </box>
-  )
-}

src/components/TabNavigation.tsx

@@ -1,18 +1,55 @@
-import { Tab, type TabId } from "./Tab"
+import { useTheme } from "@/context/ThemeContext";
+import { TABS, TabsCount } from "@/utils/navigation";
+import { For } from "solid-js";
+import { SelectableBox, SelectableText } from "@/components/Selectable";
+import { useNavigation } from "@/context/NavigationContext";
 
-type TabNavigationProps = {
-  activeTab: TabId
-  onTabSelect: (tab: TabId) => void
-}
+export const tabs: TabDefinition[] = [
+  { id: TABS.FEED, label: "Feed" },
+  { id: TABS.MYSHOWS, label: "My Shows" },
+  { id: TABS.DISCOVER, label: "Discover" },
+  { id: TABS.SEARCH, label: "Search" },
+  { id: TABS.PLAYER, label: "Player" },
+  { id: TABS.SETTINGS, label: "Settings" },
+];
 
-export function TabNavigation(props: TabNavigationProps) {
+export function TabNavigation() {
+  const { theme } = useTheme();
+  const { activeTab, setActiveTab, activeDepth } = useNavigation();
   return (
-    <box style={{ flexDirection: "row", gap: 1 }}>
-      <Tab tab={{ id: "discover", label: "Discover" }} active={props.activeTab === "discover"} onSelect={props.onTabSelect} />
-      <Tab tab={{ id: "feeds", label: "My Feeds" }} active={props.activeTab === "feeds"} onSelect={props.onTabSelect} />
-      <Tab tab={{ id: "search", label: "Search" }} active={props.activeTab === "search"} onSelect={props.onTabSelect} />
-      <Tab tab={{ id: "player", label: "Player" }} active={props.activeTab === "player"} onSelect={props.onTabSelect} />
-      <Tab tab={{ id: "settings", label: "Settings" }} active={props.activeTab === "settings"} onSelect={props.onTabSelect} />
+    <box
+      border
+      borderColor={activeDepth() !== 0 ? theme.border : theme.accent}
+      backgroundColor={"transparent"}
+      style={{
+        flexDirection: "column",
+        width: 12,
+        height: TabsCount * 3 + 2,
+      }}
+    >
+      <For each={tabs}>
+        {(tab) => (
+          <SelectableBox
+            border
+            height={3}
+            selected={() => tab.id == activeTab()}
+            onMouseDown={() => setActiveTab(tab.id)}
+          >
+            <SelectableText
+              selected={() => tab.id == activeTab()}
+              primary
+              alignSelf="center"
+            >
+              {tab.label}
+            </SelectableText>
+          </SelectableBox>
+        )}
+      </For>
     </box>
-  )
+  );
 }
+
+export type TabDefinition = {
+  id: TABS;
+  label: string;
+};

src/components/TrendingShows.tsx

@@ -1,51 +0,0 @@
-/**
- * TrendingShows component - Grid/list of trending podcasts
- */
-
-import { For, Show } from "solid-js"
-import type { Podcast } from "../types/podcast"
-import { PodcastCard } from "./PodcastCard"
-
-type TrendingShowsProps = {
-  podcasts: Podcast[]
-  selectedIndex: number
-  focused: boolean
-  isLoading: boolean
-  onSelect?: (index: number) => void
-  onSubscribe?: (podcast: Podcast) => void
-}
-
-export function TrendingShows(props: TrendingShowsProps) {
-  return (
-    <box flexDirection="column" height="100%">
-      <Show when={props.isLoading}>
-        <box padding={2}>
-          <text fg="yellow">Loading trending shows...</text>
-        </box>
-      </Show>
-
-      <Show when={!props.isLoading && props.podcasts.length === 0}>
-        <box padding={2}>
-          <text fg="gray">No podcasts found in this category.</text>
-        </box>
-      </Show>
-
-      <Show when={!props.isLoading && props.podcasts.length > 0}>
-        <scrollbox height={15}>
-          <box flexDirection="column">
-            <For each={props.podcasts}>
-              {(podcast, index) => (
-                <PodcastCard
-                  podcast={podcast}
-                  selected={index() === props.selectedIndex && props.focused}
-                  onSelect={() => props.onSelect?.(index())}
-                  onSubscribe={() => props.onSubscribe?.(podcast)}
-                />
-              )}
-            </For>
-          </box>
-        </scrollbox>
-      </Show>
-    </box>
-  )
-}

src/components/Waveform.tsx

@@ -1,52 +0,0 @@
-type WaveformProps = {
-  data: number[]
-  position: number
-  duration: number
-  isPlaying: boolean
-  onSeek?: (next: number) => void
-}
-
-const bars = [".", "-", "~", "=", "#"]
-
-export function Waveform(props: WaveformProps) {
-  const playedRatio = () => (props.duration === 0 ? 0 : props.position / props.duration)
-
-  const renderLine = () => {
-    const playedCount = Math.floor(props.data.length * playedRatio())
-    const playedColor = props.isPlaying ? "#6fa8ff" : "#7d8590"
-    const futureColor = "#3b4252"
-    const played = props.data
-      .map((value, index) =>
-        index <= playedCount
-          ? bars[Math.min(bars.length - 1, Math.floor(value * bars.length))]
-          : ""
-      )
-      .join("")
-    const upcoming = props.data
-      .map((value, index) =>
-        index > playedCount
-          ? bars[Math.min(bars.length - 1, Math.floor(value * bars.length))]
-          : ""
-      )
-      .join("")
-
-    return (
-      <box flexDirection="row" gap={0}>
-        <text fg={playedColor}>{played || " "}</text>
-        <text fg={futureColor}>{upcoming || " "}</text>
-      </box>
-    )
-  }
-
-  const handleClick = (event: { x: number }) => {
-    const ratio = props.data.length === 0 ? 0 : event.x / props.data.length
-    const next = Math.max(0, Math.min(props.duration, Math.round(props.duration * ratio)))
-    props.onSeek?.(next)
-  }
-
-  return (
-    <box border padding={1} onMouseDown={handleClick}>
-      {renderLine()}
-    </box>
-  )
-}

src/config/keybind.jsonc

@@ -0,0 +1,20 @@
+{
+  "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/constants/themes.ts

@@ -1,20 +1,25 @@
-import type { ThemeColors, ThemeDefinition, ThemeName } from "../types/settings"
-import { BASE_THEME_COLORS, BASE_LAYER_BACKGROUND } from "../types/desktop-theme"
-import catppuccin from "../themes/catppuccin.json" with { type: "json" }
-import gruvbox from "../themes/gruvbox.json" with { type: "json" }
-import tokyo from "../themes/tokyo.json" with { type: "json" }
-import nord from "../themes/nord.json" with { type: "json" }
-import opencode from "../themes/opencode.json" with { type: "json" }
+import type {
+  ThemeColors,
+  ThemeDefinition,
+  ThemeName,
+} from "../types/settings";
+import {
+  BASE_THEME_COLORS,
+  BASE_LAYER_BACKGROUND,
+} from "../types/desktop-theme";
+import catppuccin from "../themes/catppuccin.json" with { type: "json" };
+import gruvbox from "../themes/gruvbox.json" with { type: "json" };
+import tokyo from "../themes/tokyo.json" with { type: "json" };
+import nord from "../themes/nord.json" with { type: "json" };
 
 export const DEFAULT_THEME: ThemeColors = {
   ...BASE_THEME_COLORS,
   layerBackgrounds: BASE_LAYER_BACKGROUND,
-}
+};
 
 export const THEME_JSON: Record<string, ThemeDefinition> = {
-  opencode: opencode as ThemeDefinition,
   catppuccin: catppuccin as ThemeDefinition,
   gruvbox: gruvbox as ThemeDefinition,
   tokyo: tokyo as ThemeDefinition,
   nord: nord as ThemeDefinition,
-}
+};

src/context/KeybindContext.tsx

@@ -1,129 +1,136 @@
-import { createMemo } from "solid-js"
-import type { ParsedKey, Renderable } from "@opentui/core"
-import { createStore } from "solid-js/store"
-import { useKeyboard, useRenderer } from "@opentui/solid"
-import { createSimpleContext } from "./helper"
-import { Keybind, DEFAULT_KEYBINDS, type KeybindsConfig } from "../utils/keybind"
+import { createSignal, onMount } from "solid-js";
+import { createSimpleContext } from "./helper";
+import {
+  copyKeybindsIfNeeded,
+  loadKeybindsFromFile,
+  saveKeybindsToFile,
+} from "../utils/keybinds-persistence";
+import { createStore } from "solid-js/store";
 
-/**
- * Keybind context provider for managing keyboard shortcuts.
- *
- * Features:
- * - Leader key support (like vim's leader key)
- * - Configurable keybindings
- * - Key parsing and matching
- * - Display-friendly key representations
- */
-export const { use: useKeybind, provider: KeybindProvider } = createSimpleContext({
-  name: "Keybind",
-  init: (props: { keybinds?: Partial<KeybindsConfig> }) => {
-    // Merge default keybinds with custom keybinds
-    const customKeybinds = props.keybinds ?? {}
-    const mergedKeybinds = { ...DEFAULT_KEYBINDS, ...customKeybinds }
+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[];
+};
 
-    const keybinds = createMemo(() => {
-      const result: Record<string, Keybind.Info[]> = {}
-      for (const [key, value] of Object.entries(mergedKeybinds)) {
-        result[key] = Keybind.parse(value)
-      }
-      return result
-    })
+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,
+}
 
-    const [store, setStore] = createStore({
-      leader: false,
-    })
+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 [ready, setReady] = createSignal(false);
 
-    const renderer = useRenderer()
-
-    let focus: Renderable | null = null
-    let timeout: NodeJS.Timeout | undefined
-
-    function leader(active: boolean) {
-      if (active) {
-        setStore("leader", true)
-        focus = renderer.currentFocusedRenderable
-        focus?.blur()
-        if (timeout) clearTimeout(timeout)
-        timeout = setTimeout(() => {
-          if (!store.leader) return
-          leader(false)
-          if (!focus || focus.isDestroyed) return
-          focus.focus()
-        }, 2000) // Leader key timeout
-        return
+      async function load() {
+        await copyKeybindsIfNeeded();
+        const keybinds = await loadKeybindsFromFile();
+        setStore(keybinds);
+        setReady(true);
       }
 
-      if (!active) {
-        if (focus && !renderer.currentFocusedRenderable) {
-          focus.focus()
+      async function save() {
+        saveKeybindsToFile(store);
+      }
+
+      function print(input: keyof KeybindsResolved): string {
+        const keys = store[input] || [];
+        return Array.isArray(keys) ? keys.join(", ") : keys;
+      }
+
+      function match(
+        keybind: keyof KeybindsResolved,
+        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;
         }
-        setStore("leader", false)
-      }
-    }
-
-    // Handle leader key
-    useKeyboard(async (evt) => {
-      if (!store.leader && result.match("leader", evt)) {
-        leader(true)
-        return
+        return false;
       }
 
-      if (store.leader && evt.name) {
-        setImmediate(() => {
-          if (focus && renderer.currentFocusedRenderable === focus) {
-            focus.focus()
-          }
-          leader(false)
-        })
+      function isInverting(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;
+        return false;
       }
-    })
 
-    const result = {
-      get all() {
-        return keybinds()
-      },
-      get leader() {
-        return store.leader
-      },
-      /**
-       * Parse a keyboard event into a Keybind.Info.
-       */
-      parse(evt: ParsedKey): Keybind.Info {
-        // Handle special case for Ctrl+Underscore (represented as \x1F)
-        if (evt.name === "\x1F") {
-          return Keybind.fromParsedKey({ ...evt, name: "_", ctrl: true }, store.leader)
-        }
-        return Keybind.fromParsedKey(evt, store.leader)
-      },
-      /**
-       * Check if a keyboard event matches a registered keybind.
-       */
-      match(key: keyof KeybindsConfig, evt: ParsedKey): boolean {
-        const keybind = keybinds()[key]
-        if (!keybind) return false
-        const parsed: Keybind.Info = result.parse(evt)
-        for (const kb of keybind) {
-          if (Keybind.match(kb, parsed)) {
-            return true
-          }
-        }
-        return false
-      },
-      /**
-       * Get a display string for a registered keybind.
-       */
-      print(key: keyof KeybindsConfig): string {
-        const first = keybinds()[key]?.at(0)
-        if (!first) return ""
-        const display = Keybind.toString(first)
-        // Replace leader placeholder with actual leader key
-        const leaderKey = keybinds().leader?.[0]
-        if (leaderKey) {
-          return display.replace("<leader>", Keybind.toString(leaderKey))
-        }
-        return display
-      },
-    }
-    return result
-  },
-})
+      // Load on mount
+      onMount(() => {
+        load().catch(() => {});
+      });
+
+      return {
+        get ready() {
+          return ready();
+        },
+        get keybinds() {
+          return store;
+        },
+        save,
+        print,
+        match,
+        isInverting,
+      };
+    },
+  });

src/context/NavigationContext.tsx

@@ -0,0 +1,73 @@
+import { createEffect, createSignal, on } from "solid-js";
+import { createSimpleContext } from "./helper";
+import { TABS, TabsCount, LayerDepths } 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,
+};
+
+export const { use: useNavigation, provider: NavigationProvider } =
+  createSimpleContext({
+    name: "Navigation",
+    init: () => {
+      const [activeTab, setActiveTab] = createSignal<TABS>(TABS.FEED);
+      const [activeDepth, setActiveDepth] = createSignal(0);
+      const [inputFocused, setInputFocused] = createSignal(false);
+
+      createEffect(
+        on(
+          () => activeTab,
+          () => setActiveDepth(0),
+        ),
+      );
+
+      const nextTab = () => {
+        if (activeTab() >= TabsCount) {
+          setActiveTab(1);
+          return;
+        }
+        setActiveTab(activeTab() + 1);
+      };
+
+      const prevTab = () => {
+        if (activeTab() <= 1) {
+          setActiveTab(TabsCount);
+          return;
+        }
+        setActiveTab(activeTab() - 1);
+      };
+
+      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);
+      };
+
+      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);
+      };
+
+      return {
+        activeTab,
+        activeDepth,
+        inputFocused,
+        setActiveTab,
+        setActiveDepth,
+        setInputFocused,
+        nextTab,
+        prevTab,
+        nextPane,
+        prevPane,
+      };
+    },
+  });

src/context/ThemeContext.test.ts

@@ -1,8 +0,0 @@
-import { describe, expect, it } from "bun:test"
-import { ThemeProvider } from "./ThemeContext"
-
-describe("ThemeContext", () => {
-  it("exports provider", () => {
-    expect(typeof ThemeProvider).toBe("function")
-  })
-})

src/context/ThemeContext.tsx

@@ -1,80 +1,98 @@
-import { createEffect, createMemo, onMount, onCleanup } from "solid-js"
-import { createStore, produce } from "solid-js/store"
-import { useRenderer } from "@opentui/solid"
-import type { ThemeName } from "../types/settings"
-import type { ThemeJson } from "../types/theme-schema"
-import { useAppStore } from "../stores/app"
-import { THEME_JSON } from "../constants/themes"
-import { generateSyntax, generateSubtleSyntax } from "../utils/syntax-highlighter"
-import { resolveTerminalTheme, loadThemes } from "../utils/theme"
-import { createSimpleContext } from "./helper"
-import { setupThemeSignalHandler, emitThemeChanged, emitThemeModeChanged } from "../utils/theme-observer"
-import { createTerminalPalette, type RGBA, type TerminalColors } from "@opentui/core"
+import { createEffect, createMemo, onMount, onCleanup } from "solid-js";
+import { createStore, produce } from "solid-js/store";
+import { useRenderer } from "@opentui/solid";
+import type { ThemeName } from "../types/settings";
+import type { ThemeJson } from "../types/theme-schema";
+import { useAppStore } from "../stores/app";
+import { THEME_JSON } from "../constants/themes";
+import {
+  generateSyntax,
+  generateSubtleSyntax,
+} from "../utils/syntax-highlighter";
+import { resolveTerminalTheme, loadThemes } from "../utils/theme";
+import { createSimpleContext } from "./helper";
+import {
+  setupThemeSignalHandler,
+  emitThemeChanged,
+  emitThemeModeChanged,
+} from "../utils/theme-observer";
+import {
+  createTerminalPalette,
+  type RGBA,
+  type TerminalColors,
+} from "@opentui/core";
 
-type ThemeResolved = {
-  primary: RGBA
-  secondary: RGBA
-  accent: RGBA
-  error: RGBA
-  warning: RGBA
-  success: RGBA
-  info: RGBA
-  text: RGBA
-  textMuted: RGBA
-  selectedListItemText: RGBA
-  background: RGBA
-  backgroundPanel: RGBA
-  backgroundElement: RGBA
-  backgroundMenu: RGBA
-  border: RGBA
-  borderActive: RGBA
-  borderSubtle: RGBA
-  diffAdded: RGBA
-  diffRemoved: RGBA
-  diffContext: RGBA
-  diffHunkHeader: RGBA
-  diffHighlightAdded: RGBA
-  diffHighlightRemoved: RGBA
-  diffAddedBg: RGBA
-  diffRemovedBg: RGBA
-  diffContextBg: RGBA
-  diffLineNumber: RGBA
-  diffAddedLineNumberBg: RGBA
-  diffRemovedLineNumberBg: RGBA
-  markdownText: RGBA
-  markdownHeading: RGBA
-  markdownLink: RGBA
-  markdownLinkText: RGBA
-  markdownCode: RGBA
-  markdownBlockQuote: RGBA
-  markdownEmph: RGBA
-  markdownStrong: RGBA
-  markdownHorizontalRule: RGBA
-  markdownListItem: RGBA
-  markdownListEnumeration: RGBA
-  markdownImage: RGBA
-  markdownImageText: RGBA
-  markdownCodeBlock: RGBA
-  syntaxComment: RGBA
-  syntaxKeyword: RGBA
-  syntaxFunction: RGBA
-  syntaxVariable: RGBA
-  syntaxString: RGBA
-  syntaxNumber: RGBA
-  syntaxType: RGBA
-  syntaxOperator: RGBA
-  syntaxPunctuation: RGBA
-  muted?: RGBA
-  surface?: RGBA
+export type ThemeResolved = {
+  primary: RGBA;
+  secondary: RGBA;
+  accent: RGBA;
+  error: RGBA;
+  warning: RGBA;
+  success: RGBA;
+  info: RGBA;
+  text: RGBA;
+  textMuted: RGBA;
+  textPrimary: RGBA;
+  textSecondary: RGBA;
+  textTertiary: RGBA;
+  textSelectedPrimary: RGBA;
+  textSelectedSecondary: RGBA;
+  textSelectedTertiary: RGBA;
+
+  background: RGBA;
+  backgroundPanel: RGBA;
+  backgroundElement: RGBA;
+  backgroundMenu: RGBA;
+  border: RGBA;
+  borderActive: RGBA;
+  borderSubtle: RGBA;
+  diffAdded: RGBA;
+  diffRemoved: RGBA;
+  diffContext: RGBA;
+  diffHunkHeader: RGBA;
+  diffHighlightAdded: RGBA;
+  diffHighlightRemoved: RGBA;
+  diffAddedBg: RGBA;
+  diffRemovedBg: RGBA;
+  diffContextBg: RGBA;
+  diffLineNumber: RGBA;
+  diffAddedLineNumberBg: RGBA;
+  diffRemovedLineNumberBg: RGBA;
+  markdownText: RGBA;
+  markdownHeading: RGBA;
+  markdownLink: RGBA;
+  markdownLinkText: RGBA;
+  markdownCode: RGBA;
+  markdownBlockQuote: RGBA;
+  markdownEmph: RGBA;
+  markdownStrong: RGBA;
+  markdownHorizontalRule: RGBA;
+  markdownListItem: RGBA;
+  markdownListEnumeration: RGBA;
+  markdownImage: RGBA;
+  markdownImageText: RGBA;
+  markdownCodeBlock: RGBA;
+  syntaxComment: RGBA;
+  syntaxKeyword: RGBA;
+  syntaxFunction: RGBA;
+  syntaxVariable: RGBA;
+  syntaxString: RGBA;
+  syntaxNumber: RGBA;
+  syntaxType: RGBA;
+  syntaxOperator: RGBA;
+  syntaxPunctuation: RGBA;
+  muted?: RGBA;
+  surface?: RGBA;
+  selectedListItemText?: RGBA;
   layerBackgrounds?: {
-    layer0: RGBA
-    layer1: RGBA
-    layer2: RGBA
-    layer3: RGBA
-  }
-  _hasSelectedListItemText?: boolean
-  thinkingOpacity?: number
-}
+    layer0: RGBA;
+    layer1: RGBA;
+    layer2: RGBA;
+    layer3: RGBA;
+  };
+  _hasSelectedListItemText?: boolean;
+  thinkingOpacity?: number;
+};
 
 /**
  * Theme context using the createSimpleContext pattern.
@@ -82,95 +100,107 @@ type ThemeResolved = {
  * This ensures children are NOT rendered until the theme is ready,
  * preventing "useTheme must be used within a ThemeProvider" errors.
  *
- * The key insight from opencode's implementation is that the provider
- * uses `<Show when={ready}>` to gate rendering, so components can
- * safely call useTheme() without checking ready state.
  */
 export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
   name: "Theme",
   init: (props: { mode: "dark" | "light" }) => {
-    const appStore = useAppStore()
-    const renderer = useRenderer()
+    const appStore = useAppStore();
+    const renderer = useRenderer();
     const [store, setStore] = createStore({
       themes: THEME_JSON as Record<string, ThemeJson>,
       mode: props.mode,
       active: appStore.state().settings.theme as string,
       system: undefined as undefined | TerminalColors,
       ready: false,
-    })
+    });
 
     function init() {
-      resolveSystemTheme()
+      resolveSystemTheme();
       loadThemes()
         .then((custom) => {
           setStore(
             produce((draft) => {
-              Object.assign(draft.themes, custom)
-            })
-          )
+              Object.assign(draft.themes, custom);
+            }),
+          );
         })
         .catch(() => {
-          // If custom themes fail to load, fall back to opencode theme
-          setStore("active", "opencode")
+          setStore("active", "catppuccin");
         })
         .finally(() => {
           // Only set ready if not waiting for system theme
           if (store.active !== "system") {
-            setStore("ready", true)
+            setStore("ready", true);
           }
-        })
+        });
     }
 
     async function waitForCapabilities(timeoutMs = 300) {
-      if (renderer.capabilities) return
+      if (renderer.capabilities) return;
       await new Promise<void>((resolve) => {
-        let done = false
+        let done = false;
         const onCaps = () => {
-          if (done) return
-          done = true
-          renderer.off("capabilities", onCaps)
-          clearTimeout(timer)
-          resolve()
-        }
+          if (done) return;
+          done = true;
+          renderer.off("capabilities", onCaps);
+          clearTimeout(timer);
+          resolve();
+        };
         const timer = setTimeout(() => {
-          if (done) return
-          done = true
-          renderer.off("capabilities", onCaps)
-          resolve()
-        }, timeoutMs)
-        renderer.on("capabilities", onCaps)
-      })
+          if (done) return;
+          done = true;
+          renderer.off("capabilities", onCaps);
+          resolve();
+        }, timeoutMs);
+        renderer.on("capabilities", onCaps);
+      });
     }
 
     async function resolveSystemTheme() {
       if (process.env.TMUX) {
-        await waitForCapabilities()
+        await waitForCapabilities();
       }
 
-      let colors: TerminalColors | null = null
+      let colors: TerminalColors | null = null;
 
       try {
-        colors = await renderer.getPalette({ size: 16 })
+        colors = await renderer.getPalette({ size: 16 });
       } catch {
-        colors = null
+        colors = null;
       }
 
       if (!colors?.palette?.[0] && process.env.TMUX) {
-        const writeOut = (renderer as unknown as { writeOut?: (data: string | Buffer) => boolean }).writeOut
-        const writeFn = typeof writeOut === "function" ? writeOut.bind(renderer) : process.stdout.write.bind(process.stdout)
-        const detector = createTerminalPalette(process.stdin, process.stdout, writeFn, true)
+        const writeOut = (
+          renderer as unknown as {
+            writeOut?: (data: string | Buffer) => boolean;
+          }
+        ).writeOut;
+        const writeFn =
+          typeof writeOut === "function"
+            ? writeOut.bind(renderer)
+            : process.stdout.write.bind(process.stdout);
+        const detector = createTerminalPalette(
+          process.stdin,
+          process.stdout,
+          writeFn,
+          true,
+        );
         try {
-          const tmuxColors = await detector.detect({ size: 16, timeout: 1200 })
+          const tmuxColors = await detector.detect({ size: 16, timeout: 1200 });
           if (tmuxColors?.palette?.[0]) {
-            colors = tmuxColors
+            colors = tmuxColors;
           }
         } finally {
-          detector.cleanup()
+          detector.cleanup();
         }
       }
 
-      const hasPalette = Boolean(colors?.palette?.some((value) => Boolean(value)))
-      const hasDefaultColors = Boolean(colors?.defaultBackground || colors?.defaultForeground)
+      const hasPalette = Boolean(
+        colors?.palette?.some((value) => Boolean(value)),
+      );
+      const hasDefaultColors = Boolean(
+        colors?.defaultBackground || colors?.defaultForeground,
+      );
 
       if (!hasPalette && !hasDefaultColors) {
         // No system colors available, fall back to default
@@ -179,89 +209,100 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
         if (store.active === "system") {
           setStore(
             produce((draft) => {
-              draft.active = "opencode"
-              draft.ready = true
-            })
-          )
+              draft.active = "catppuccin";
+              draft.ready = true;
+            }),
+          );
         }
-        return
+        return;
       }
 
       if (colors) {
         setStore(
           produce((draft) => {
-            draft.system = colors
+            draft.system = colors;
             if (store.active === "system") {
-              draft.ready = true
+              draft.ready = true;
             }
-          })
-        )
+          }),
+        );
       }
     }
 
-    onMount(init)
+    onMount(init);
 
     // Setup SIGUSR2 signal handler for dynamic theme reload
     // This allows external tools to trigger a theme refresh by sending:
     // `kill -USR2 <pid>`
     const cleanupSignalHandler = setupThemeSignalHandler(() => {
-      renderer.clearPaletteCache()
-      init()
-    })
-    onCleanup(cleanupSignalHandler)
+      renderer.clearPaletteCache();
+      init();
+    });
+    onCleanup(cleanupSignalHandler);
 
     // Sync active theme with app store settings
     createEffect(() => {
-      const theme = appStore.state().settings.theme
-      if (theme) setStore("active", theme)
-    })
+      const theme = appStore.state().settings.theme;
+      if (theme) setStore("active", theme);
+    });
 
     // Emit theme change events for observers
     createEffect(() => {
-      const theme = store.active
-      const mode = store.mode
+      const theme = store.active;
+      const mode = store.mode;
       if (store.ready) {
-        emitThemeChanged(theme, mode)
+        emitThemeChanged(theme, mode);
       }
-    })
+    });
 
     const values = createMemo(() => {
-      return resolveTerminalTheme(store.themes, store.active, store.mode, store.system)
-    })
+      return resolveTerminalTheme(
+        store.themes,
+        store.active,
+        store.mode,
+        store.system,
+      );
+    });
 
-    const syntax = createMemo(() => generateSyntax(values() as unknown as Record<string, RGBA>))
+    const syntax = createMemo(() =>
+      generateSyntax(values() as unknown as Record<string, RGBA>),
+    );
     const subtleSyntax = createMemo(() =>
-      generateSubtleSyntax(values() as unknown as Record<string, RGBA> & { thinkingOpacity?: number })
-    )
+      generateSubtleSyntax(
+        values() as unknown as Record<string, RGBA> & {
+          thinkingOpacity?: number;
+        },
+      ),
+    );
 
     return {
       theme: new Proxy(values(), {
         get(_target, prop) {
           // @ts-expect-error - dynamic property access
-          return values()[prop]
+          return values()[prop];
         },
       }) as ThemeResolved,
       get selected() {
-        return store.active
+        return store.active;
       },
       all() {
-        return store.themes
+        return store.themes;
       },
       syntax,
       subtleSyntax,
       mode() {
-        return store.mode
+        return store.mode;
       },
       setMode(mode: "dark" | "light") {
-        setStore("mode", mode)
-        emitThemeModeChanged(mode)
+        setStore("mode", mode);
+        emitThemeModeChanged(mode);
       },
       set(theme: string) {
-        appStore.setTheme(theme as ThemeName)
+        appStore.setTheme(theme as ThemeName);
       },
       get ready() {
-        return store.ready
+        return store.ready;
       },
-    }
+    };
   },
-})
+});

src/hooks/useAppKeyboard.ts

@@ -1,135 +0,0 @@
-/**
- * Centralized keyboard shortcuts hook for PodTUI
- * Single handler to prevent conflicts
- */
-
-import { useKeyboard, useRenderer } from "@opentui/solid"
-import type { TabId } from "../components/Tab"
-import type { Accessor } from "solid-js"
-
-const TAB_ORDER: TabId[] = ["discover", "feeds", "search", "player", "settings"]
-
-type ShortcutOptions = {
-  activeTab: TabId
-  onTabChange: (tab: TabId) => void
-  onAction?: (action: string) => void
-  inputFocused?: boolean
-  navigationEnabled?: boolean
-  layerDepth?: Accessor<number>
-  onLayerChange?: (newDepth: number) => void
-}
-
-export function useAppKeyboard(options: ShortcutOptions) {
-  const renderer = useRenderer()
-
-  const getNextTab = (current: TabId): TabId => {
-    const idx = TAB_ORDER.indexOf(current)
-    return TAB_ORDER[(idx + 1) % TAB_ORDER.length]
-  }
-
-  const getPrevTab = (current: TabId): TabId => {
-    const idx = TAB_ORDER.indexOf(current)
-    return TAB_ORDER[(idx - 1 + TAB_ORDER.length) % TAB_ORDER.length]
-  }
-
-  useKeyboard((key) => {
-    // Always allow quit
-    if (key.ctrl && key.name === "q") {
-      renderer.destroy()
-      return
-    }
-
-    if (key.name === "escape") {
-      options.onAction?.("escape")
-      return
-    }
-
-    // Skip global shortcuts if input is focused (let input handle keys)
-    if (options.inputFocused) {
-      return
-    }
-
-    if (options.navigationEnabled === false) {
-      return
-    }
-
-    if (key.name === "enter") {
-      options.onAction?.("enter")
-      return
-    }
-
-    // Layer navigation with left/right arrows
-    if (options.layerDepth !== undefined && options.onLayerChange) {
-      const currentDepth = options.layerDepth()
-      const maxLayers = 3
-
-      if (key.name === "right") {
-        if (currentDepth < maxLayers) {
-          options.onLayerChange(currentDepth + 1)
-        }
-        return
-      }
-
-      if (key.name === "left") {
-        if (currentDepth > 0) {
-          options.onLayerChange(currentDepth - 1)
-        }
-        return
-      }
-    }
-
-    // Tab navigation with left/right arrows OR [ and ]
-    if (key.name === "right" || key.name === "]") {
-      options.onTabChange(getNextTab(options.activeTab))
-      return
-    }
-
-    if (key.name === "left" || key.name === "[") {
-      options.onTabChange(getPrevTab(options.activeTab))
-      return
-    }
-
-    // Number keys for direct tab access (1-5)
-    if (key.name === "1") {
-      options.onTabChange("discover")
-      return
-    }
-    if (key.name === "2") {
-      options.onTabChange("feeds")
-      return
-    }
-    if (key.name === "3") {
-      options.onTabChange("search")
-      return
-    }
-    if (key.name === "4") {
-      options.onTabChange("player")
-      return
-    }
-    if (key.name === "5") {
-      options.onTabChange("settings")
-      return
-    }
-
-    // Tab key cycles tabs (Shift+Tab goes backwards)
-    if (key.name === "tab") {
-      if (key.shift) {
-        options.onTabChange(getPrevTab(options.activeTab))
-      } else {
-        options.onTabChange(getNextTab(options.activeTab))
-      }
-      return
-    }
-
-    // Forward other actions
-    if (options.onAction) {
-      if (key.ctrl && key.name === "s") {
-        options.onAction("save")
-      } else if (key.ctrl && key.name === "f") {
-        options.onAction("find")
-      } else if (key.name === "?" || (key.shift && key.name === "/")) {
-        options.onAction("help")
-      }
-    }
-  })
-}

src/hooks/useAudio.ts

@@ -0,0 +1,528 @@
+/**
+ * Reactive SolidJS hook wrapping the AudioBackend.
+ *
+ * Provides signals for playback state and methods for controlling
+ * audio. Integrates with the event bus and app store.
+ *
+ * Usage:
+ * ```tsx
+ * const audio = useAudio()
+ * audio.play(episode)
+ * <text>{audio.isPlaying() ? "Playing" : "Paused"}</text>
+ * ```
+ */
+
+import { createSignal, onCleanup } from "solid-js"
+import {
+  createAudioBackend,
+  detectPlayers,
+  type AudioBackend,
+  type BackendName,
+  type DetectedPlayer,
+} from "../utils/audio-player"
+import { emit, on } from "../utils/event-bus"
+import { useAppStore } from "../stores/app"
+import { useProgressStore } from "../stores/progress"
+import { useMediaRegistry } from "../utils/media-registry"
+import type { Episode } from "../types/episode"
+import type { Feed } from "../types/feed"
+import { useAudioNavStore, AudioSource } from "../stores/audio-nav"
+import { useFeedStore } from "../stores/feed"
+
+export interface AudioControls {
+  // Signals (reactive getters)
+  isPlaying: () => boolean
+  position: () => number
+  duration: () => number
+  volume: () => number
+  speed: () => number
+  backendName: () => BackendName
+  error: () => string | null
+  currentEpisode: () => Episode | null
+  availablePlayers: () => DetectedPlayer[]
+
+  // Actions
+  play: (episode: Episode) => Promise<void>
+  pause: () => Promise<void>
+  resume: () => Promise<void>
+  togglePlayback: () => Promise<void>
+  stop: () => Promise<void>
+  seek: (seconds: number) => Promise<void>
+  seekRelative: (delta: number) => Promise<void>
+  setVolume: (volume: number) => Promise<void>
+  setSpeed: (speed: number) => Promise<void>
+  switchBackend: (name: BackendName) => Promise<void>
+  prev: () => Promise<void>
+  next: () => Promise<void>
+}
+
+// Singleton state — shared across all components that call useAudio()
+let backend: AudioBackend | null = null
+let pollTimer: ReturnType<typeof setInterval> | null = null
+let refCount = 0
+let pollCount = 0 // Counts poll ticks for throttling progress saves
+
+const [isPlaying, setIsPlaying] = createSignal(false)
+const [position, setPosition] = createSignal(0)
+const [duration, setDuration] = createSignal(0)
+const [volume, setVolume] = createSignal(0.7)
+const [speed, setSpeed] = createSignal(1)
+const [backendName, setBackendName] = createSignal<BackendName>("none")
+const [error, setError] = createSignal<string | null>(null)
+const [currentEpisode, setCurrentEpisode] = createSignal<Episode | null>(null)
+const [availablePlayers, setAvailablePlayers] = createSignal<DetectedPlayer[]>([])
+
+function ensureBackend(): AudioBackend {
+  if (!backend) {
+    const detected = detectPlayers()
+    setAvailablePlayers(detected)
+    backend = createAudioBackend()
+    setBackendName(backend.name)
+  }
+  return backend
+}
+
+function startPolling(): void {
+  stopPolling()
+  pollCount = 0
+  pollTimer = setInterval(async () => {
+    if (!backend || !isPlaying()) return
+    try {
+      const pos = await backend.getPosition()
+      const dur = await backend.getDuration()
+      setPosition(pos)
+      if (dur > 0) setDuration(dur)
+
+      // Save progress every ~5 seconds (10 ticks * 500ms)
+      pollCount++
+      if (pollCount % 10 === 0) {
+        const ep = currentEpisode()
+        if (ep) {
+          const progressStore = useProgressStore()
+          progressStore.update(ep.id, pos, dur > 0 ? dur : duration(), speed())
+
+          // Update platform media position
+          const media = useMediaRegistry()
+          media.setPosition(pos)
+        }
+      }
+
+      // Check if backend stopped playing (track ended)
+      if (!backend.isPlaying() && isPlaying()) {
+        setIsPlaying(false)
+        stopPolling()
+        // Save final position on track end
+        const ep = currentEpisode()
+        if (ep) {
+          const progressStore = useProgressStore()
+          progressStore.update(ep.id, pos, dur > 0 ? dur : duration(), speed())
+        }
+      }
+    } catch {
+      // Backend may have been disposed
+    }
+  }, 500)
+}
+
+function stopPolling(): void {
+  if (pollTimer) {
+    clearInterval(pollTimer)
+    pollTimer = null
+  }
+}
+
+async function play(episode: Episode): Promise<void> {
+  const b = ensureBackend()
+  setError(null)
+
+  if (!episode.audioUrl) {
+    setError("No audio URL for this episode")
+    return
+  }
+
+  try {
+    const appStore = useAppStore()
+    const progressStore = useProgressStore()
+    const storeSpeed = appStore.state().settings.playbackSpeed
+    const vol = volume()
+    const spd = storeSpeed || speed()
+
+    // Resume from saved progress if available and not completed
+    const savedProgress = progressStore.get(episode.id)
+    let startPos = 0
+    if (savedProgress && !progressStore.isCompleted(episode.id)) {
+      startPos = savedProgress.position
+    }
+
+    await b.play(episode.audioUrl, {
+      volume: vol,
+      speed: spd,
+      startPosition: startPos > 0 ? startPos : undefined,
+    })
+
+    setCurrentEpisode(episode)
+    setIsPlaying(true)
+    setPosition(startPos)
+    setSpeed(spd)
+    if (episode.duration) setDuration(episode.duration)
+
+    // Register with platform media controls
+    const media = useMediaRegistry()
+    media.setNowPlaying({
+      title: episode.title,
+      artist: episode.podcastId,
+      duration: episode.duration,
+    })
+    media.setPlaybackState(true)
+    if (startPos > 0) media.setPosition(startPos)
+
+    startPolling()
+    emit("player.play", { episodeId: episode.id })
+  } catch (err) {
+    setError(err instanceof Error ? err.message : "Playback failed")
+    setIsPlaying(false)
+  }
+}
+
+async function pause(): Promise<void> {
+  if (!backend) return
+  try {
+    await backend.pause()
+    setIsPlaying(false)
+    stopPolling()
+    const ep = currentEpisode()
+    if (ep) {
+      // Save progress on pause
+      const progressStore = useProgressStore()
+      progressStore.update(ep.id, position(), duration(), speed())
+      emit("player.pause", { episodeId: ep.id })
+
+      // Update platform media controls
+      const media = useMediaRegistry()
+      media.setPlaybackState(false)
+      media.setPosition(position())
+    }
+  } catch (err) {
+    setError(err instanceof Error ? err.message : "Pause failed")
+  }
+}
+
+async function resume(): Promise<void> {
+  if (!backend) return
+  try {
+    await backend.resume()
+    setIsPlaying(true)
+    startPolling()
+    const ep = currentEpisode()
+    if (ep) {
+      emit("player.play", { episodeId: ep.id })
+      const media = useMediaRegistry()
+      media.setPlaybackState(true)
+    }
+  } catch (err) {
+    setError(err instanceof Error ? err.message : "Resume failed")
+  }
+}
+
+async function togglePlayback(): Promise<void> {
+  if (isPlaying()) {
+    await pause()
+  } else if (currentEpisode()) {
+    await resume()
+  }
+}
+
+async function stop(): Promise<void> {
+  if (!backend) return
+  try {
+    // Save progress before stopping
+    const ep = currentEpisode()
+    if (ep) {
+      const progressStore = useProgressStore()
+      progressStore.update(ep.id, position(), duration(), speed())
+    }
+    await backend.stop()
+    setIsPlaying(false)
+    setPosition(0)
+    setCurrentEpisode(null)
+    stopPolling()
+    emit("player.stop", {})
+
+    // Clear platform media controls
+    const media = useMediaRegistry()
+    media.clearNowPlaying()
+  } catch (err) {
+    setError(err instanceof Error ? err.message : "Stop failed")
+  }
+}
+
+async function seek(seconds: number): Promise<void> {
+  if (!backend) return
+  const clamped = Math.max(0, Math.min(seconds, duration()))
+  try {
+    await backend.seek(clamped)
+    setPosition(clamped)
+  } catch (err) {
+    setError(err instanceof Error ? err.message : "Seek failed")
+  }
+}
+
+async function seekRelative(delta: number): Promise<void> {
+  await seek(position() + delta)
+}
+
+async function doSetVolume(vol: number): Promise<void> {
+  const clamped = Math.max(0, Math.min(1, vol))
+  if (backend) {
+    try {
+      await backend.setVolume(clamped)
+    } catch {
+      // Some backends can't change volume at runtime
+    }
+  }
+  setVolume(clamped)
+}
+
+async function doSetSpeed(spd: number): Promise<void> {
+  const clamped = Math.max(0.25, Math.min(3, spd))
+  if (backend) {
+    try {
+      await backend.setSpeed(clamped)
+    } catch {
+      // Some backends can't change speed at runtime
+    }
+  }
+  setSpeed(clamped)
+
+  // Sync back to app store
+  try {
+    const appStore = useAppStore()
+    appStore.updateSettings({ playbackSpeed: clamped })
+  } catch {
+    // Store may not be available
+  }
+}
+
+async function switchBackend(name: BackendName): Promise<void> {
+  const wasPlaying = isPlaying()
+  const ep = currentEpisode()
+  const pos = position()
+  const vol = volume()
+  const spd = speed()
+
+  // Stop current backend
+  if (backend) {
+    stopPolling()
+    backend.dispose()
+    backend = null
+  }
+
+  // Create new backend
+  backend = createAudioBackend(name)
+  setBackendName(backend.name)
+  setAvailablePlayers(detectPlayers())
+
+  // Resume playback if we were playing
+  if (wasPlaying && ep && ep.audioUrl) {
+    try {
+      await backend.play(ep.audioUrl, {
+        startPosition: pos,
+        volume: vol,
+        speed: spd,
+      })
+      setIsPlaying(true)
+      startPolling()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Backend switch failed")
+      setIsPlaying(false)
+    }
+  }
+}
+
+/**
+ * Reactive audio controls hook.
+ *
+ * Returns a singleton — all components share the same playback state.
+ * Registers event bus listeners and cleans them up with onCleanup.
+ */
+export function useAudio(): AudioControls {
+  // Initialize backend on first use
+  ensureBackend()
+
+  // Sync initial speed from app store
+  if (refCount === 0) {
+    try {
+      const appStore = useAppStore()
+      const storeSpeed = appStore.state().settings.playbackSpeed
+      if (storeSpeed && storeSpeed !== speed()) {
+        setSpeed(storeSpeed)
+      }
+    } catch {
+      // Store may not be available yet
+    }
+  }
+
+  refCount++
+
+  // Listen for event bus commands (e.g. from other components)
+  const unsubPlay = on("player.play", async (data) => {
+    // External play requests — currently just tracks episodeId.
+    // Episode lookup would require feed store integration.
+  })
+
+  const unsubStop = on("player.stop", async () => {
+    if (backend && isPlaying()) {
+      await backend.stop()
+      setIsPlaying(false)
+      setPosition(0)
+      setCurrentEpisode(null)
+      stopPolling()
+    }
+  })
+
+  // Listen for global multimedia key events (from useMultimediaKeys)
+  const unsubMediaToggle = on("media.toggle", async () => {
+    await togglePlayback()
+  })
+
+  const unsubMediaVolUp = on("media.volumeUp", async () => {
+    await doSetVolume(Math.min(1, Number((volume() + 0.05).toFixed(2))))
+  })
+
+  const unsubMediaVolDown = on("media.volumeDown", async () => {
+    await doSetVolume(Math.max(0, Number((volume() - 0.05).toFixed(2))))
+  })
+
+  const unsubMediaSeekFwd = on("media.seekForward", async () => {
+    await seekRelative(10)
+  })
+
+  const unsubMediaSeekBack = on("media.seekBackward", async () => {
+    await seekRelative(-10)
+  })
+
+  const unsubMediaSpeed = on("media.speedCycle", async () => {
+    const next = speed() >= 2 ? 0.5 : Number((speed() + 0.25).toFixed(2))
+    await doSetSpeed(next)
+  })
+
+  const audioNav = useAudioNavStore();
+  const feedStore = useFeedStore();
+
+  async function prev(): Promise<void> {
+    const current = currentEpisode();
+    if (!current) return;
+
+    const currentPos = position();
+    const currentDur = duration();
+
+    const NAV_START_THRESHOLD = 30;
+
+    if (currentPos > NAV_START_THRESHOLD && currentDur > 0) {
+      await seek(NAV_START_THRESHOLD);
+    } else {
+      const source = audioNav.getSource();
+      let episodes: Array<{ episode: Episode; feed: Feed }> = [];
+
+      if (source === AudioSource.FEED) {
+        episodes = feedStore.getAllEpisodesChronological();
+      } else if (source === AudioSource.MY_SHOWS) {
+        const podcastId = audioNav.getPodcastId();
+        if (!podcastId) return;
+
+        const feed = feedStore.getFilteredFeeds().find(f => f.podcast.id === podcastId);
+        if (!feed) return;
+
+        episodes = feed.episodes.map(ep => ({ episode: ep, feed }));
+      }
+
+      const currentIndex = audioNav.getCurrentIndex();
+      const newIndex = Math.max(0, currentIndex - 1);
+
+      if (newIndex < episodes.length && episodes[newIndex]) {
+        const { episode } = episodes[newIndex];
+        await play(episode);
+        audioNav.prev(newIndex);
+      }
+    }
+  }
+
+  async function next(): Promise<void> {
+    const current = currentEpisode();
+    if (!current) return;
+
+    const source = audioNav.getSource();
+    let episodes: Array<{ episode: Episode; feed: Feed }> = [];
+
+    if (source === AudioSource.FEED) {
+      episodes = feedStore.getAllEpisodesChronological();
+    } else if (source === AudioSource.MY_SHOWS) {
+      const podcastId = audioNav.getPodcastId();
+      if (!podcastId) return;
+
+      const feed = feedStore.getFilteredFeeds().find(f => f.podcast.id === podcastId);
+      if (!feed) return;
+
+      episodes = feed.episodes.map(ep => ({ episode: ep, feed }));
+    }
+
+    const currentIndex = audioNav.getCurrentIndex();
+    const newIndex = Math.min(episodes.length - 1, currentIndex + 1);
+
+    if (newIndex >= 0 && episodes[newIndex]) {
+      const { episode } = episodes[newIndex];
+      await play(episode);
+      audioNav.next(newIndex);
+    }
+  }
+
+  onCleanup(() => {
+    refCount--
+    unsubPlay()
+    unsubStop()
+    unsubMediaToggle()
+    unsubMediaVolUp()
+    unsubMediaVolDown()
+    unsubMediaSeekFwd()
+    unsubMediaSeekBack()
+    unsubMediaSpeed()
+
+    if (refCount <= 0) {
+      stopPolling()
+      if (backend) {
+        backend.dispose()
+        backend = null
+      }
+      // Clear media registry on full teardown
+      const media = useMediaRegistry()
+      media.clearNowPlaying()
+
+      refCount = 0
+    }
+  })
+
+  return {
+    isPlaying,
+    position,
+    duration,
+    volume,
+    speed,
+    backendName,
+    error,
+    currentEpisode,
+    availablePlayers,
+
+    play,
+    pause,
+    resume,
+    togglePlayback,
+    stop,
+    seek,
+    seekRelative,
+    setVolume: doSetVolume,
+    setSpeed: doSetSpeed,
+    switchBackend,
+    prev,
+    next,
+  }
+}

src/hooks/useKeyboardShortcuts.ts

@@ -1,37 +0,0 @@
-import { useKeyboard, useRenderer } from "@opentui/solid"
-
-type ShortcutOptions = {
-  onSave?: () => void
-  onQuit?: () => void
-  onTabNext?: () => void
-  onTabPrev?: () => void
-}
-
-export function useKeyboardShortcuts(options: ShortcutOptions) {
-  const renderer = useRenderer()
-
-  useKeyboard((key) => {
-    if (key.ctrl && key.name === "q") {
-      if (options.onQuit) {
-        options.onQuit()
-      } else {
-        renderer.destroy()
-      }
-      return
-    }
-
-    if (key.ctrl && key.name === "s") {
-      options.onSave?.()
-      return
-    }
-
-    if (key.name === "right") {
-      options.onTabNext?.()
-      return
-    }
-
-    if (key.name === "left") {
-      options.onTabPrev?.()
-    }
-  })
-}

src/hooks/useMultimediaKeys.ts

@@ -0,0 +1,98 @@
+/**
+ * Global multimedia key handler hook.
+ *
+ * Captures media-related key events (play/pause, volume, seek, speed)
+ * regardless of which component is focused. Uses the event bus to
+ * decouple key detection from audio control logic.
+ *
+ * Keys are only handled when an episode is loaded (or for play/pause,
+ * always). This prevents accidental volume/seek changes when there's
+ * nothing playing.
+ */
+
+import { useKeyboard } from "@opentui/solid"
+import { emit } from "../utils/event-bus"
+
+export type MediaKeyAction =
+  | "media.toggle"
+  | "media.volumeUp"
+  | "media.volumeDown"
+  | "media.seekForward"
+  | "media.seekBackward"
+  | "media.speedCycle"
+
+/** Key-to-action mappings for multimedia controls */
+const MEDIA_KEY_MAP: Record<string, MediaKeyAction> = {
+  // Common terminal media keys — these overlap with Player.tsx local
+  // bindings, but Player guards on `props.focused` so the global
+  // handler fires independently when the player tab is *not* active.
+  //
+  // When Player IS focused both handlers fire, but since the audio
+  // actions are idempotent (toggle = toggle, seek = additive) having
+  // them called twice for the same keypress is avoided by the event
+  // bus approach — the audio hook only processes event-bus events, and
+  // Player.tsx calls audio methods directly.  We therefore guard with
+  // a "playerFocused" flag passed via options.
+}
+
+export interface MultimediaKeysOptions {
+  /** When true, skip handling (Player.tsx handles keys locally) */
+  playerFocused?: () => boolean
+  /** When true, skip handling (text input has focus) */
+  inputFocused?: () => boolean
+  /** Whether an episode is currently loaded */
+  hasEpisode?: () => boolean
+}
+
+/**
+ * Registers a global keyboard listener that emits media events on the
+ * event bus. Call once at the app level (e.g. in App.tsx).
+ */
+export function useMultimediaKeys(options: MultimediaKeysOptions = {}) {
+  useKeyboard((key) => {
+    // Don't intercept when a text input owns the keyboard
+    if (options.inputFocused?.()) return
+
+    // Don't intercept when Player component handles its own keys
+    if (options.playerFocused?.()) return
+
+    // Ctrl/Meta combos are app-level shortcuts, not media keys
+    if (key.ctrl || key.meta) return
+
+    switch (key.name) {
+      case "space":
+        // Toggle play/pause — always valid (may start a loaded episode)
+        emit("media.toggle", {})
+        break
+
+      case "up":
+        if (!options.hasEpisode?.()) return
+        emit("media.volumeUp", {})
+        break
+
+      case "down":
+        if (!options.hasEpisode?.()) return
+        emit("media.volumeDown", {})
+        break
+
+      case "left":
+        if (!options.hasEpisode?.()) return
+        emit("media.seekBackward", {})
+        break
+
+      case "right":
+        if (!options.hasEpisode?.()) return
+        emit("media.seekForward", {})
+        break
+
+      case "s":
+        if (!options.hasEpisode?.()) return
+        emit("media.speedCycle", {})
+        break
+
+      default:
+        // Not a media key — do nothing
+        break
+    }
+  })
+}

src/index.tsx

@@ -1,36 +1,225 @@
-// Hack: Force TERM to tmux-256color when running in tmux to enable
-// correct palette detection in @opentui/core
-if (process.env.TMUX && !process.env.TERM?.includes("tmux")) {
-  process.env.TERM = "tmux-256color"
+const VERSION = "0.1.0";
+
+interface CliArgs {
+  version: boolean;
+  query: string | null;
+  play: string | null;
 }
 
-import { render, useRenderer } from "@opentui/solid"
-import { App } from "./App"
-import { ThemeProvider } from "./context/ThemeContext"
-import { ToastProvider, Toast } from "./ui/toast"
-import { KeybindProvider } from "./context/KeybindContext"
-import { DialogProvider } from "./ui/dialog"
-import { CommandProvider } from "./ui/command"
+function parseArgs(): CliArgs {
+  const args = process.argv.slice(2);
+  const result: CliArgs = {
+    version: false,
+    query: null,
+    play: null,
+  };
 
-function RendererSetup(props: { children: unknown }) {
-  const renderer = useRenderer()
-  renderer.disableStdoutInterception()
-  return props.children
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (arg === "--version" || arg === "-v") {
+      result.version = true;
+    } else if (arg === "--query" || arg === "-q") {
+      result.query = args[i + 1] || "";
+      i++;
+    } else if (arg === "--play" || arg === "-p") {
+      result.play = args[i + 1] || "";
+      i++;
+    }
+  }
+
+  return result;
 }
 
-render(() => (
-  <RendererSetup>
-    <ToastProvider>
-      <ThemeProvider mode="dark">
-        <KeybindProvider>
-          <DialogProvider>
-            <CommandProvider>
-              <App />
-              <Toast />
-            </CommandProvider>
-          </DialogProvider>
-        </KeybindProvider>
-      </ThemeProvider>
-    </ToastProvider>
-  </RendererSetup>
-), { useThread: false })
+const cliArgs = parseArgs();
+
+if (cliArgs.version) {
+  console.log(`PodTUI version ${VERSION}`);
+  process.exit(0);
+}
+
+if (cliArgs.query !== null || cliArgs.play !== null) {
+  import("./utils/feeds-persistence").then(async ({ loadFeedsFromFile }) => {
+    const feeds = await loadFeedsFromFile();
+
+    if (cliArgs.query !== null) {
+      const query = cliArgs.query;
+      const normalizedQuery = query.toLowerCase();
+
+      const matches = feeds.filter((feed) => {
+        const title = feed.podcast.title.toLowerCase();
+        return title.includes(normalizedQuery);
+      });
+
+      if (matches.length === 0) {
+        console.log(`No shows found matching: ${query}`);
+        if (feeds.length > 0) {
+          console.log("\nAvailable shows:");
+          feeds.slice(0, 5).forEach((feed) => {
+            console.log(`  - ${feed.podcast.title}`);
+          });
+          if (feeds.length > 5) {
+            console.log(`  ... and ${feeds.length - 5} more`);
+          }
+        }
+        process.exit(0);
+      }
+
+      if (matches.length === 1) {
+        const feed = matches[0];
+        console.log(`\n${feed.podcast.title}`);
+        if (feed.podcast.description) {
+          console.log(feed.podcast.description.substring(0, 200) + (feed.podcast.description.length > 200 ? "..." : ""));
+        }
+        console.log(`\nRecent episodes (${Math.min(5, feed.episodes.length)}):`);
+        feed.episodes.slice(0, 5).forEach((ep, idx) => {
+          const date = ep.pubDate instanceof Date ? ep.pubDate.toLocaleDateString() : String(ep.pubDate);
+          console.log(`  ${idx + 1}. ${ep.title} (${date})`);
+        });
+        process.exit(0);
+      }
+
+      console.log(`\nClosest matches for "${query}":`);
+      matches.slice(0, 5).forEach((feed, idx) => {
+        console.log(`  ${idx + 1}. ${feed.podcast.title}`);
+      });
+      process.exit(0);
+    }
+
+    if (cliArgs.play !== null) {
+      const playArg = cliArgs.play;
+      const normalizedArg = playArg.toLowerCase();
+
+      let feedResult: typeof feeds[0] | null = null;
+      let episodeResult: typeof feeds[0]["episodes"][0] | null = null;
+
+      if (normalizedArg === "latest") {
+        let latestFeed: typeof feeds[0] | null = null;
+        let latestEpisode: typeof feeds[0]["episodes"][0] | null = null;
+        let latestDate = 0;
+
+        for (const feed of feeds) {
+          if (feed.episodes.length > 0) {
+            const ep = feed.episodes[0];
+            const epDate = ep.pubDate instanceof Date ? ep.pubDate.getTime() : Number(ep.pubDate);
+            if (epDate > latestDate) {
+              latestDate = epDate;
+              latestFeed = feed;
+              latestEpisode = ep;
+            }
+          }
+        }
+
+        feedResult = latestFeed;
+        episodeResult = latestEpisode;
+      } else {
+        const parts = normalizedArg.split("/");
+        const showQuery = parts[0];
+        const episodeQuery = parts[1];
+
+        const matchingFeeds = feeds.filter((feed) =>
+          feed.podcast.title.toLowerCase().includes(showQuery)
+        );
+
+        if (matchingFeeds.length === 0) {
+          console.log(`No show found matching: ${showQuery}`);
+          process.exit(1);
+        }
+
+        const feed = matchingFeeds[0];
+
+        if (!episodeQuery) {
+          if (feed.episodes.length > 0) {
+            feedResult = feed;
+            episodeResult = feed.episodes[0];
+          } else {
+            console.log(`No episodes available for: ${feed.podcast.title}`);
+            process.exit(1);
+          }
+        } else if (episodeQuery === "latest") {
+          feedResult = feed;
+          episodeResult = feed.episodes[0];
+        } else {
+          const matchingEpisode = feed.episodes.find((ep) =>
+            ep.title.toLowerCase().includes(episodeQuery)
+          );
+
+          if (matchingEpisode) {
+            feedResult = feed;
+            episodeResult = matchingEpisode;
+          } else {
+            console.log(`Episode not found: ${episodeQuery}`);
+            console.log(`Available episodes for ${feed.podcast.title}:`);
+            feed.episodes.slice(0, 5).forEach((ep, idx) => {
+              console.log(`  ${idx + 1}. ${ep.title}`);
+            });
+            process.exit(1);
+          }
+        }
+      }
+
+      if (!feedResult || !episodeResult) {
+        console.log("Could not find episode to play");
+        process.exit(1);
+      }
+
+      console.log(`\nPlaying: ${episodeResult.title}`);
+      console.log(`Show: ${feedResult.podcast.title}`);
+
+      try {
+        const { createAudioBackend } = await import("./utils/audio-player");
+        const backend = createAudioBackend();
+        if (episodeResult.audioUrl) {
+          await backend.play(episodeResult.audioUrl);
+          console.log("Playback started (use the UI to control)");
+        } else {
+          console.log("No audio URL available for this episode");
+          process.exit(1);
+        }
+      } catch (err) {
+        console.error("Playback error:", err);
+        process.exit(1);
+      }
+    }
+  }).catch((err) => {
+    console.error("Error:", err);
+    process.exit(1);
+  });
+} else {
+  import("@opentui/solid").then(async ({ render, useRenderer }) => {
+    const { App } = await import("./App");
+    const { ThemeProvider } = await import("./context/ThemeContext");
+    const toast = await import("./ui/toast");
+    const { KeybindProvider } = await import("./context/KeybindContext");
+    const { NavigationProvider } = await import("./context/NavigationContext");
+    const { DialogProvider } = await import("./ui/dialog");
+    const { CommandProvider } = await import("./ui/command");
+
+    function RendererSetup(props: { children: unknown }) {
+      const renderer = useRenderer();
+      renderer.disableStdoutInterception();
+      return props.children;
+    }
+
+    render(
+      () => (
+        <RendererSetup>
+          <toast.ToastProvider>
+            <ThemeProvider mode="dark">
+              <KeybindProvider>
+                <NavigationProvider>
+                  <DialogProvider>
+                    <CommandProvider>
+                      <App />
+                      <toast.Toast />
+                    </CommandProvider>
+                  </DialogProvider>
+                </NavigationProvider>
+              </KeybindProvider>
+            </ThemeProvider>
+          </toast.ToastProvider>
+        </RendererSetup>
+      ),
+      { useThread: false },
+    );
+  });
+}

src/pages/Discover/DiscoverPage.tsx

@@ -0,0 +1,185 @@
+/**
+ * DiscoverPage component - Main discover/browse interface for PodTUI
+ */
+
+import { createSignal, For, Show, onMount } from "solid-js";
+import { useKeyboard } from "@opentui/solid";
+import { useDiscoverStore, DISCOVER_CATEGORIES } from "@/stores/discover";
+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";
+
+enum DiscoverPagePaneType {
+  CATEGORIES = 1,
+  SHOWS = 2,
+}
+export const DiscoverPaneCount = 2;
+
+export function DiscoverPage() {
+  const discoverStore = useDiscoverStore();
+  const [showIndex, setShowIndex] = createSignal(0);
+  const [categoryIndex, setCategoryIndex] = createSignal(0);
+  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);
+
+        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 },
+    );
+  });
+
+  const handleCategorySelect = (categoryId: string) => {
+    discoverStore.setSelectedCategory(categoryId);
+    const index = DISCOVER_CATEGORIES.findIndex((c) => c.id === categoryId);
+    if (index >= 0) setCategoryIndex(index);
+    setShowIndex(0);
+  };
+
+  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
+        }
+        flexDirection="column"
+        gap={1}
+      >
+        <text
+          fg={
+            nav.activeDepth() == DiscoverPagePaneType.CATEGORIES
+              ? theme.accent
+              : theme.text
+          }
+        >
+          Categories:
+        </text>
+        <box flexDirection="column" gap={1}>
+          <For each={discoverStore.categories}>
+            {(category) => {
+              const isSelected = () =>
+                discoverStore.selectedCategory() === category.id;
+
+              return (
+                <SelectableBox
+                  selected={isSelected}
+                  onMouseDown={() => handleCategorySelect(category.id)}
+                >
+                  <SelectableText selected={isSelected} primary>
+                    {category.icon} {category.name}
+                  </SelectableText>
+                </SelectableBox>
+              );
+            }}
+          </For>
+        </box>
+      </box>
+        <box
+          flexDirection="column"
+          flexGrow={1}
+          border
+          borderColor={
+            nav.activeDepth() == DiscoverPagePaneType.SHOWS
+              ? theme.accent
+              : theme.border
+          }
+        >
+          <box padding={1}>
+            <SelectableText
+              selected={() => false}
+              primary={nav.activeDepth() == DiscoverPagePaneType.SHOWS}
+            >
+              Trending in{" "}
+              {DISCOVER_CATEGORIES.find(
+                (c) => c.id === discoverStore.selectedCategory(),
+              )?.name ?? "All"}
+            </SelectableText>
+          </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}
+              >
+                <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>
+                </box>
+              </scrollbox>
+            </Show>
+          </box>
+        </box>
+    </box>
+  );
+}

src/pages/Discover/PodcastCard.tsx

@@ -0,0 +1,85 @@
+/**
+ * PodcastCard component - Reusable card for displaying podcast info
+ */
+
+import { Show, For } from "solid-js";
+import type { Podcast } from "@/types/podcast";
+import { useTheme } from "@/context/ThemeContext";
+import { SelectableBox, SelectableText } from "@/components/Selectable";
+
+type PodcastCardProps = {
+  podcast: Podcast;
+  selected: boolean;
+  compact?: boolean;
+  onSelect?: () => void;
+  onSubscribe?: () => void;
+};
+
+export function PodcastCard(props: PodcastCardProps) {
+  const { theme } = useTheme();
+  const handleSubscribeClick = () => {
+    props.onSubscribe?.();
+  };
+
+  return (
+    <SelectableBox
+      selected={() => props.selected}
+      flexDirection="column"
+      padding={1}
+      onMouseDown={props.onSelect}
+    >
+      <box flexDirection="row" gap={2} alignItems="center">
+        <SelectableText selected={() => props.selected} primary>
+          <strong>{props.podcast.title}</strong>
+        </SelectableText>
+
+        <Show when={props.podcast.isSubscribed}>
+          <text fg={theme.success}>[+]</text>
+        </Show>
+      </box>
+
+      {/* Author */}
+      <Show when={props.podcast.author && !props.compact}>
+        <SelectableText
+          selected={() => props.selected}
+          tertiary
+        >
+          by {props.podcast.author}
+        </SelectableText>
+      </Show>
+
+      {/* Description */}
+      <Show when={props.podcast.description && !props.compact}>
+        <SelectableText
+          selected={() => props.selected}
+          tertiary
+        >
+          {props.podcast.description!.length > 80
+            ? props.podcast.description!.slice(0, 80) + "..."
+            : props.podcast.description}
+        </SelectableText>
+      </Show>
+
+      {/**<box
+        flexDirection="row"
+        justifyContent="space-between"
+        marginTop={props.compact ? 0 : 1}
+      />**/}
+      <box flexDirection="row" gap={1}>
+        <Show when={(props.podcast.categories ?? []).length > 0}>
+          <For each={(props.podcast.categories ?? []).slice(0, 2)}>
+            {(cat) => <text fg={theme.warning}>[{cat}]</text>}
+          </For>
+        </Show>
+      </box>
+
+      <Show when={props.selected}>
+        <box onMouseDown={handleSubscribeClick}>
+          <text fg={props.podcast.isSubscribed ? theme.error : theme.success}>
+            {props.podcast.isSubscribed ? "[Unsubscribe]" : "[Subscribe]"}
+          </text>
+        </box>
+      </Show>
+    </SelectableBox>
+  );
+}

src/pages/Feed/FeedDetail.tsx

@@ -0,0 +1,194 @@
+/**
+ * Feed detail view component for PodTUI
+ * Shows podcast info and episode list
+ */
+
+import { createSignal, For, Show } from "solid-js";
+import { useKeyboard } from "@opentui/solid";
+import type { Feed } from "@/types/feed";
+import type { Episode } from "@/types/episode";
+import { format } from "date-fns";
+import { useTheme } from "@/context/ThemeContext";
+import { SelectableBox, SelectableText } from "@/components/Selectable";
+
+interface FeedDetailProps {
+  feed: Feed;
+  focused?: boolean;
+  onBack?: () => void;
+  onPlayEpisode?: (episode: Episode) => void;
+}
+
+export function FeedDetail(props: FeedDetailProps) {
+  const { theme } = useTheme();
+  const [selectedIndex, setSelectedIndex] = createSignal(0);
+  const [showInfo, setShowInfo] = createSignal(true);
+
+  const episodes = () => {
+    // Sort episodes by publication date (newest first)
+    return [...props.feed.episodes].sort(
+      (a, b) => b.pubDate.getTime() - a.pubDate.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 formatDate = (date: Date): string => {
+    return format(date, "MMM d, yyyy");
+  };
+
+  const handleKeyPress = (key: { name: string }) => {
+    const eps = episodes();
+
+    if (key.name === "escape" && props.onBack) {
+      props.onBack();
+      return;
+    }
+
+    if (key.name === "i") {
+      setShowInfo((v) => !v);
+      return;
+    }
+
+    if (key.name === "v") {
+      props.feed.podcast.onToggleVisibility?.(props.feed.id);
+      return;
+    }
+
+    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(eps.length - 1, i + 1));
+    } else if (key.name === "return") {
+      const episode = eps[selectedIndex()];
+      if (episode && props.onPlayEpisode) {
+        props.onPlayEpisode(episode);
+      }
+    } else if (key.name === "home" || key.name === "g") {
+      setSelectedIndex(0);
+    } else if (key.name === "end") {
+      setSelectedIndex(eps.length - 1);
+    } else if (key.name === "pageup") {
+      setSelectedIndex((i) => Math.max(0, i - 10));
+    } else if (key.name === "pagedown") {
+      setSelectedIndex((i) => Math.min(eps.length - 1, i + 10));
+    }
+  };
+
+  useKeyboard((key) => {
+    if (!props.focused) return;
+    handleKeyPress(key);
+  });
+
+  return (
+    <box flexDirection="column" gap={1}>
+      {/* Header with back button */}
+      <box flexDirection="row" justifyContent="space-between">
+        <box border padding={0} onMouseDown={props.onBack} borderColor={theme.border}>
+            <SelectableText selected={() => false} primary>[Esc] Back</SelectableText>
+        </box>
+        <box border padding={0} onMouseDown={() => setShowInfo((v) => !v)} borderColor={theme.border}>
+            <SelectableText selected={() => false} primary>[i] {showInfo() ? "Hide" : "Show"} Info</SelectableText>
+        </box>
+        <box border padding={0} onMouseDown={() => props.feed.podcast.onToggleVisibility?.(props.feed.id)} borderColor={theme.border}>
+            <SelectableText selected={() => false} primary>[v] Toggle Visibility</SelectableText>
+        </box>
+      </box>
+
+      {/* Podcast info section */}
+      <Show when={showInfo()}>
+        <box border padding={1} flexDirection="column" gap={0} borderColor={theme.border}>
+          <SelectableText selected={() => false} primary>
+            <strong>{props.feed.customName || props.feed.podcast.title}</strong>
+          </SelectableText>
+          {props.feed.podcast.author && (
+            <box flexDirection="row" gap={1}>
+                <SelectableText selected={() => false} tertiary>by</SelectableText>
+                <SelectableText selected={() => false} primary>{props.feed.podcast.author}</SelectableText>
+            </box>
+          )}
+          <box height={1} />
+          <SelectableText selected={() => false} tertiary>
+            {props.feed.podcast.description?.slice(0, 200)}
+            {(props.feed.podcast.description?.length || 0) > 200 ? "..." : ""}
+          </SelectableText>
+          <box height={1} />
+          <box flexDirection="row" gap={2}>
+            <box flexDirection="row" gap={1}>
+              <SelectableText selected={() => false} tertiary>Episodes:</SelectableText>
+              <SelectableText selected={() => false} tertiary>{props.feed.episodes.length}</SelectableText>
+            </box>
+            <box flexDirection="row" gap={1}>
+              <SelectableText selected={() => false} tertiary>Updated:</SelectableText>
+              <SelectableText selected={() => false} tertiary>{formatDate(props.feed.lastUpdated)}</SelectableText>
+            </box>
+            <SelectableText selected={() => false} tertiary>
+              {props.feed.visibility === "public" ? "[Public]" : "[Private]"}
+            </SelectableText>
+            {props.feed.isPinned && <SelectableText selected={() => false} tertiary>[Pinned]</SelectableText>}
+          </box>
+          <box flexDirection="row" gap={1}>
+            <SelectableText selected={() => false} tertiary>[v] Toggle Visibility</SelectableText>
+          </box>
+        </box>
+      </Show>
+
+      {/* Episodes header */}
+      <box flexDirection="row" justifyContent="space-between">
+        <SelectableText selected={() => false} primary>
+          <strong>Episodes</strong>
+        </SelectableText>
+        <SelectableText selected={() => false} tertiary>({episodes().length} total)</SelectableText>
+      </box>
+
+      {/* Episode list */}
+      <scrollbox height={showInfo() ? 10 : 15} focused={props.focused}>
+        <For each={episodes()}>
+          {(episode, index) => (
+            <SelectableBox
+              selected={() => index() === selectedIndex()}
+              flexDirection="column"
+              gap={0}
+              padding={1}
+              onMouseDown={() => {
+                setSelectedIndex(index());
+                if (props.onPlayEpisode) {
+                  props.onPlayEpisode(episode);
+                }
+              }}
+            >
+              <SelectableText
+                selected={() => index() === selectedIndex()}
+                primary
+              >
+                {index() === selectedIndex() ? ">" : " "}
+              </SelectableText>
+              <SelectableText
+                selected={() => index() === selectedIndex()}
+                primary
+              >
+                {episode.episodeNumber ? `#${episode.episodeNumber} - ` : ""}
+                {episode.title}
+              </SelectableText>
+              <box flexDirection="row" gap={2} paddingLeft={2}>
+                  <SelectableText selected={() => index() === selectedIndex()} tertiary>{formatDate(episode.pubDate)}</SelectableText>
+                  <SelectableText selected={() => index() === selectedIndex()} tertiary>{formatDuration(episode.duration)}</SelectableText>
+              </box>
+            </SelectableBox>
+          )}
+        </For>
+      </scrollbox>
+
+      {/* Help text */}
+      <text fg={theme.textMuted}>
+        j/k to navigate, Enter to play, i to toggle info, Esc to go back
+      </text>
+    </box>
+  );
+}

src/pages/Feed/FeedFilter.tsx

@@ -0,0 +1,207 @@
+/**
+ * Feed filter component for PodTUI
+ * Toggle and filter options for feed list
+ */
+
+import { createSignal } from "solid-js";
+import { FeedVisibility, FeedSortField } from "@/types/feed";
+import type { FeedFilter } from "@/types/feed";
+import { useTheme } from "@/context/ThemeContext";
+
+interface FeedFilterProps {
+  filter: FeedFilter;
+  focused?: boolean;
+  onFilterChange: (filter: FeedFilter) => void;
+}
+
+type FilterField = "visibility" | "sort" | "pinned" | "private" | "search";
+
+export function FeedFilterComponent(props: FeedFilterProps) {
+  const { theme } = useTheme();
+  const [focusField, setFocusField] = createSignal<FilterField>("visibility");
+  const [searchValue, setSearchValue] = createSignal(
+    props.filter.searchQuery || "",
+  );
+
+  const fields: FilterField[] = ["visibility", "sort", "pinned", "private", "search"];
+
+  const handleKeyPress = (key: { name: string; shift?: boolean }) => {
+    if (key.name === "tab") {
+      const currentIndex = fields.indexOf(focusField());
+      const nextIndex = key.shift
+        ? (currentIndex - 1 + fields.length) % fields.length
+        : (currentIndex + 1) % fields.length;
+      setFocusField(fields[nextIndex]);
+    } else if (key.name === "return") {
+      if (focusField() === "visibility") {
+        cycleVisibility();
+      } else if (focusField() === "sort") {
+        cycleSort();
+      } else if (focusField() === "pinned") {
+        togglePinned();
+      } else if (focusField() === "private") {
+        togglePrivate();
+      }
+    } else if (key.name === "space") {
+      if (focusField() === "pinned") {
+        togglePinned();
+      } else if (focusField() === "private") {
+        togglePrivate();
+      }
+    }
+  };
+
+  const cycleVisibility = () => {
+    const current = props.filter.visibility;
+    let next: FeedVisibility | "all";
+    if (current === "all") next = FeedVisibility.PUBLIC;
+    else if (current === FeedVisibility.PUBLIC) next = FeedVisibility.PRIVATE;
+    else next = "all";
+    props.onFilterChange({ ...props.filter, visibility: next });
+  };
+
+  const cycleSort = () => {
+    const sortOptions: FeedSortField[] = [
+      FeedSortField.UPDATED,
+      FeedSortField.TITLE,
+      FeedSortField.EPISODE_COUNT,
+      FeedSortField.LATEST_EPISODE,
+    ];
+    const currentIndex = sortOptions.indexOf(
+      props.filter.sortBy as FeedSortField,
+    );
+    const nextIndex = (currentIndex + 1) % sortOptions.length;
+    props.onFilterChange({ ...props.filter, sortBy: sortOptions[nextIndex] });
+  };
+
+  const togglePinned = () => {
+    props.onFilterChange({
+      ...props.filter,
+      pinnedOnly: !props.filter.pinnedOnly,
+    });
+  };
+
+  const togglePrivate = () => {
+    props.onFilterChange({
+      ...props.filter,
+      showPrivate: !props.filter.showPrivate,
+    });
+  };
+
+  const handleSearchInput = (value: string) => {
+    setSearchValue(value);
+    props.onFilterChange({ ...props.filter, searchQuery: value });
+  };
+
+  const visibilityLabel = () => {
+    const vis = props.filter.visibility;
+    if (vis === "all") return "All";
+    if (vis === "public") return "Public";
+    return "Private";
+  };
+
+  const visibilityColor = () => {
+    const vis = props.filter.visibility;
+    if (vis === "public") return theme.success;
+    if (vis === "private") return theme.warning;
+    return theme.text;
+  };
+
+  const sortLabel = () => {
+    const sort = props.filter.sortBy;
+    switch (sort) {
+      case "title":
+        return "Title";
+      case "episodeCount":
+        return "Episodes";
+      case "latestEpisode":
+        return "Latest";
+      case "updated":
+      default:
+        return "Updated";
+    }
+  };
+
+  return (
+    <box flexDirection="column" border padding={1} gap={1} borderColor={theme.border}>
+      <text fg={theme.text}>
+        <strong>Filter Feeds</strong>
+      </text>
+
+      <box flexDirection="row" gap={2} flexWrap="wrap">
+        {/* Visibility filter */}
+        <box
+          border
+          padding={0}
+            backgroundColor={focusField() === "visibility" ? theme.backgroundElement : undefined}
+            borderColor={theme.border}
+        >
+          <box flexDirection="row" gap={1}>
+            <text fg={focusField() === "visibility" ? theme.primary : theme.textMuted}>
+              Show:
+            </text>
+            <text fg={visibilityColor()}>{visibilityLabel()}</text>
+          </box>
+        </box>
+
+        {/* Sort filter */}
+        <box
+          border
+          padding={0}
+            backgroundColor={focusField() === "sort" ? theme.backgroundElement : undefined}
+        >
+          <box flexDirection="row" gap={1}>
+            <text fg={focusField() === "sort" ? theme.primary : theme.textMuted}>Sort:</text>
+            <text fg={theme.text}>{sortLabel()}</text>
+          </box>
+        </box>
+
+        {/* Pinned filter */}
+        <box
+          border
+          padding={0}
+            backgroundColor={focusField() === "pinned" ? theme.backgroundElement : undefined}
+        >
+          <box flexDirection="row" gap={1}>
+            <text fg={focusField() === "pinned" ? theme.primary : theme.textMuted}>
+              Pinned:
+            </text>
+            <text fg={props.filter.pinnedOnly ? theme.warning : theme.textMuted}>
+              {props.filter.pinnedOnly ? "Yes" : "No"}
+            </text>
+          </box>
+        </box>
+
+        {/* Private filter */}
+        <box
+          border
+          padding={0}
+            backgroundColor={focusField() === "private" ? theme.backgroundElement : undefined}
+        >
+          <box flexDirection="row" gap={1}>
+            <text fg={focusField() === "private" ? theme.primary : theme.textMuted}>
+              Private:
+            </text>
+            <text fg={props.filter.showPrivate ? theme.warning : theme.textMuted}>
+              {props.filter.showPrivate ? "Yes" : "No"}
+            </text>
+          </box>
+        </box>
+      </box>
+
+      {/* Search box */}
+      <box flexDirection="row" gap={1}>
+            <text fg={focusField() === "search" ? theme.primary : theme.textMuted}>Search:</text>
+        <input
+          value={searchValue()}
+          onInput={handleSearchInput}
+          placeholder="Filter by name..."
+          focused={props.focused && focusField() === "search"}
+          width={25}
+        />
+      </box>
+
+      <text fg={theme.textMuted}>Tab to navigate, Enter/Space to toggle</text>
+    </box>
+  );
+}

src/pages/Feed/FeedItem.tsx

@@ -0,0 +1,154 @@
+/**
+ * Feed item component for PodTUI
+ * Displays a single feed/podcast in the list
+ */
+
+import type { Feed, FeedVisibility } from "@/types/feed";
+import { format } from "date-fns";
+import { useTheme } from "@/context/ThemeContext";
+import { SelectableBox, SelectableText } from "@/components/Selectable";
+
+interface FeedItemProps {
+  feed: Feed;
+  isSelected: boolean;
+  showEpisodeCount?: boolean;
+  showLastUpdated?: boolean;
+  compact?: boolean;
+}
+
+export function FeedItem(props: FeedItemProps) {
+  const formatDate = (date: Date): string => {
+    return format(date, "MMM d");
+  };
+
+  const episodeCount = () => props.feed.episodes.length;
+  const unplayedCount = () => {
+    // This would be calculated based on episode status
+    return props.feed.episodes.length;
+  };
+
+  const visibilityIcon = () => {
+    return props.feed.visibility === "public" ? "[P]" : "[*]";
+  };
+
+  const visibilityColor = () => {
+    return props.feed.visibility === "public" ? theme.success : theme.warning;
+  };
+
+  const pinnedIndicator = () => {
+    return props.feed.isPinned ? "*" : " ";
+  };
+
+  const { theme } = useTheme();
+
+  if (props.compact) {
+    // Compact single-line view
+    return (
+      <SelectableBox
+        selected={() => props.isSelected}
+        flexDirection="row"
+        gap={1}
+        paddingLeft={1}
+        paddingRight={1}
+        onMouseDown={() => {}}
+      >
+        <SelectableText
+          selected={() => props.isSelected}
+          primary
+        >
+          {props.isSelected ? ">" : " "}
+        </SelectableText>
+        <SelectableText
+          selected={() => props.isSelected}
+          tertiary
+        >
+          {visibilityIcon()}
+        </SelectableText>
+        <SelectableText
+          selected={() => props.isSelected}
+          primary
+        >
+          {props.feed.customName || props.feed.podcast.title}
+        </SelectableText>
+        {props.showEpisodeCount && (
+          <SelectableText
+            selected={() => props.isSelected}
+            tertiary
+          >
+            ({episodeCount()})
+          </SelectableText>
+        )}
+      </SelectableBox>
+    );
+  }
+
+  // Full view with details
+  return (
+    <SelectableBox
+      selected={() => props.isSelected}
+      flexDirection="column"
+      gap={0}
+      padding={1}
+      onMouseDown={() => {}}
+    >
+      {/* Title row */}
+      <box flexDirection="row" gap={1}>
+        <SelectableText
+          selected={() => props.isSelected}
+          primary
+        >
+          {props.isSelected ? ">" : " "}
+        </SelectableText>
+        <SelectableText
+          selected={() => props.isSelected}
+          tertiary
+        >
+          {visibilityIcon()}
+        </SelectableText>
+        <SelectableText
+          selected={() => props.isSelected}
+          secondary
+        >
+          {pinnedIndicator()}
+        </SelectableText>
+        <SelectableText
+          selected={() => props.isSelected}
+          primary
+        >
+          <strong>{props.feed.customName || props.feed.podcast.title}</strong>
+        </SelectableText>
+      </box>
+
+      <box flexDirection="row" gap={2} paddingLeft={4}>
+        {props.showEpisodeCount && (
+          <SelectableText
+            selected={() => props.isSelected}
+            tertiary
+          >
+            {episodeCount()} episodes ({unplayedCount()} new)
+          </SelectableText>
+        )}
+        {props.showLastUpdated && (
+          <SelectableText
+            selected={() => props.isSelected}
+            tertiary
+          >
+            Updated: {formatDate(props.feed.lastUpdated)}
+          </SelectableText>
+        )}
+      </box>
+
+      {props.feed.podcast.description && (
+        <SelectableText
+          selected={() => props.isSelected}
+          paddingLeft={4}
+          paddingTop={0}
+          tertiary
+        >
+          {props.feed.podcast.description.slice(0, 60)}
+          {props.feed.podcast.description.length > 60 ? "..." : ""}
+        </SelectableText>
+      )}
+    </SelectableBox>
+  );
+}

src/pages/Feed/FeedList.tsx

@@ -0,0 +1,198 @@
+/**
+ * Feed list component for PodTUI
+ * Scrollable list of feeds with keyboard navigation and mouse support
+ */
+
+import { createSignal, For, Show } from "solid-js";
+import { useKeyboard } from "@opentui/solid";
+import { FeedItem } from "./FeedItem";
+import { useFeedStore } from "@/stores/feed";
+import { FeedVisibility, FeedSortField } from "@/types/feed";
+import type { Feed } from "@/types/feed";
+import { useTheme } from "@/context/ThemeContext";
+
+interface FeedListProps {
+  focused?: boolean;
+  compact?: boolean;
+  showEpisodeCount?: boolean;
+  showLastUpdated?: boolean;
+  onSelectFeed?: (feed: Feed) => void;
+  onOpenFeed?: (feed: Feed) => void;
+  onFocusChange?: (focused: boolean) => void;
+}
+
+export function FeedList(props: FeedListProps) {
+  const { theme } = useTheme();
+  const feedStore = useFeedStore();
+  const [selectedIndex, setSelectedIndex] = createSignal(0);
+
+  const filteredFeeds = () => feedStore.getFilteredFeeds();
+
+  const handleKeyPress = (key: { name: string }) => {
+    if (key.name === "escape") {
+      props.onFocusChange?.(false);
+      return;
+    }
+    const feeds = filteredFeeds();
+
+    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(feeds.length - 1, i + 1));
+    } else if (key.name === "return") {
+      const feed = feeds[selectedIndex()];
+      if (feed && props.onOpenFeed) {
+        props.onOpenFeed(feed);
+      }
+    } else if (key.name === "home" || key.name === "g") {
+      setSelectedIndex(0);
+    } else if (key.name === "end") {
+      setSelectedIndex(feeds.length - 1);
+    } else if (key.name === "pageup") {
+      setSelectedIndex((i) => Math.max(0, i - 5));
+    } else if (key.name === "pagedown") {
+      setSelectedIndex((i) => Math.min(feeds.length - 1, i + 5));
+    } else if (key.name === "p") {
+      // Toggle pin on selected feed
+      const feed = feeds[selectedIndex()];
+      if (feed) {
+        feedStore.togglePinned(feed.id);
+      }
+    } else if (key.name === "v") {
+      // Toggle visibility on selected feed
+      const feed = feeds[selectedIndex()];
+      if (feed) {
+        const newVisibility = feed.visibility === FeedVisibility.PUBLIC ? FeedVisibility.PRIVATE : FeedVisibility.PUBLIC;
+        feedStore.updateFeed(feed.id, { visibility: newVisibility });
+      }
+    } else if (key.name === "f") {
+      // Cycle visibility filter
+      cycleVisibilityFilter();
+    } else if (key.name === "s") {
+      // Cycle sort
+      cycleSortField();
+    }
+
+    // Notify selection change
+    const selectedFeed = feeds[selectedIndex()];
+    if (selectedFeed && props.onSelectFeed) {
+      props.onSelectFeed(selectedFeed);
+    }
+  };
+
+  useKeyboard((key) => {
+    if (!props.focused) return;
+    handleKeyPress(key);
+  });
+
+  const cycleVisibilityFilter = () => {
+    const current = feedStore.filter().visibility;
+    let next: FeedVisibility | "all";
+    if (current === "all") next = FeedVisibility.PUBLIC;
+    else if (current === FeedVisibility.PUBLIC) next = FeedVisibility.PRIVATE;
+    else next = "all";
+    feedStore.setFilter({ ...feedStore.filter(), visibility: next });
+  };
+
+  const cycleSortField = () => {
+    const sortOptions: FeedSortField[] = [
+      FeedSortField.UPDATED,
+      FeedSortField.TITLE,
+      FeedSortField.EPISODE_COUNT,
+      FeedSortField.LATEST_EPISODE,
+    ];
+    const current = feedStore.filter().sortBy as FeedSortField;
+    const idx = sortOptions.indexOf(current);
+    const next = sortOptions[(idx + 1) % sortOptions.length];
+    feedStore.setFilter({ ...feedStore.filter(), sortBy: next });
+  };
+
+  const visibilityLabel = () => {
+    const vis = feedStore.filter().visibility;
+    if (vis === "all") return "All";
+    if (vis === "public") return "Public";
+    return "Private";
+  };
+
+  const sortLabel = () => {
+    const sort = feedStore.filter().sortBy;
+    switch (sort) {
+      case "title":
+        return "Title";
+      case "episodeCount":
+        return "Episodes";
+      case "latestEpisode":
+        return "Latest";
+      default:
+        return "Updated";
+    }
+  };
+
+  const handleFeedClick = (feed: Feed, index: number) => {
+    setSelectedIndex(index);
+    if (props.onSelectFeed) {
+      props.onSelectFeed(feed);
+    }
+  };
+
+  const handleFeedDoubleClick = (feed: Feed) => {
+    if (props.onOpenFeed) {
+      props.onOpenFeed(feed);
+    }
+  };
+
+  return (
+    <box flexDirection="column" gap={1}>
+      {/* Header with filter controls */}
+      <box flexDirection="row" justifyContent="space-between" paddingBottom={0}>
+        <text fg={theme.text}>
+          <strong>My Feeds</strong>
+        </text>
+            <text fg={theme.textMuted}>({filteredFeeds().length} feeds)</text>
+            <box flexDirection="row" gap={1}>
+              <box border padding={0} onMouseDown={cycleVisibilityFilter} borderColor={theme.border}>
+                <text fg={theme.primary}>[f] {visibilityLabel()}</text>
+              </box>
+              <box border padding={0} onMouseDown={cycleSortField} borderColor={theme.border}>
+                <text fg={theme.primary}>[s] {sortLabel()}</text>
+              </box>
+            </box>
+      </box>
+
+      {/* Feed list in scrollbox */}
+      <Show
+        when={filteredFeeds().length > 0}
+        fallback={
+          <box border padding={2} borderColor={theme.border}>
+            <text fg={theme.textMuted}>
+              No feeds found. Add podcasts from the Discover or Search tabs.
+            </text>
+          </box>
+        }
+      >
+        <scrollbox height={15} focused={props.focused}>
+          <For each={filteredFeeds()}>
+            {(feed, index) => (
+              <box onMouseDown={() => handleFeedClick(feed, index())}>
+                <FeedItem
+                  feed={feed}
+                  isSelected={index() === selectedIndex()}
+                  compact={props.compact}
+                  showEpisodeCount={props.showEpisodeCount ?? true}
+                  showLastUpdated={props.showLastUpdated ?? true}
+                />
+              </box>
+            )}
+          </For>
+        </scrollbox>
+      </Show>
+
+      {/* Navigation help */}
+      <box paddingTop={0}>
+          <text fg={theme.textMuted}>
+            Enter open | Esc up | j/k navigate | p pin | f filter | s sort
+          </text>
+      </box>
+    </box>
+  );
+}

src/pages/Feed/FeedPage.tsx

@@ -0,0 +1,195 @@
+/**
+ * FeedPage - Shows latest episodes across all subscribed shows
+ * Reverse chronological order, grouped by date
+ */
+
+import { createSignal, For, Show, onMount } from "solid-js";
+import { useFeedStore } from "@/stores/feed";
+import { format } from "date-fns";
+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";
+
+enum FeedPaneType {
+  FEED = 1,
+}
+export const FeedPaneCount = 1;
+
+const ITEMS_PER_BATCH = 50;
+
+export function FeedPage() {
+  const feedStore = useFeedStore();
+  const nav = useNavigation();
+  const { theme } = useTheme();
+  const [selectedEpisodeID, setSelectedEpisodeID] = createSignal<
+    string | undefined
+  >();
+  const allEpisodes = () => feedStore.getAllEpisodesChronological();
+  const keybind = useKeybinds();
+  const [focusedIndex, setFocusedIndex] = createSignal(0);
+
+  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);
+          }
+          return;
+        }
+
+        // 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);
+        }
+      },
+      { release: false },
+    );
+  });
+
+  const formatDate = (date: Date): string => {
+    return format(date, "MMM d, yyyy");
+  };
+
+  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`;
+  };
+
+  return (
+    <box
+      border
+      borderColor={
+        nav.activeDepth() !== FeedPaneType.FEED ? theme.border : theme.accent
+      }
+      backgroundColor={theme.background}
+      flexDirection="column"
+      height="100%"
+      width="100%"
+    >
+      <Show
+        when={allEpisodes().length > 0}
+        fallback={
+          <box padding={2}>
+            <text fg={theme.textMuted}>
+              No episodes yet. Subscribe to shows from Discover or Search.
+            </text>
+          </box>
+        }
+      >
+        <scrollbox
+          height="100%"
+          focused={nav.activeDepth() == FeedPaneType.FEED}
+        >
+          <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}
+                        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),
+                          );
+                        }}
+                      >
+                        <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>
+              </box>
+            )}
+          </For>
+        </scrollbox>
+      </Show>
+    </box>
+  );
+}

src/pages/MyShows/MyShowsPage.tsx

@@ -0,0 +1,325 @@
+/**
+ * MyShowsPage - Two-panel file-explorer style view
+ * Left panel: list of subscribed shows
+ * Right panel: episodes for the selected show
+ */
+
+import { createSignal, For, Show, createMemo, createEffect, onMount } from "solid-js";
+import { useKeyboard } from "@opentui/solid";
+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 { LoadingIndicator } from "@/components/LoadingIndicator";
+import { KeybindProvider, useKeybinds } from "@/context/KeybindContext";
+
+enum MyShowsPaneType {
+  SHOWS = 1,
+  EPISODES = 2,
+}
+
+export const MyShowsPaneCount = 2;
+
+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 { theme } = useTheme();
+  const mutedColor = () => 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 shows = () => feedStore.getFilteredFeeds();
+
+  const selectedShow = createMemo(() => {
+    return shows()[0]; //TODO: Integrate with locally handled keyboard navigation
+  });
+
+  const episodes = createMemo(() => {
+    const show = selectedShow();
+    if (!show) return [];
+    return [...show.episodes].sort(
+      (a, b) => b.pubDate.getTime() - a.pubDate.getTime(),
+    );
+  });
+
+  const formatDate = (date: Date): string => {
+    return format(date, "MMM d, yyyy");
+  };
+
+  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`;
+  };
+
+  /** Get download status label for an episode */
+  const downloadLabel = (episodeId: string): string => {
+    const status = downloadStore.getDownloadStatus(episodeId);
+    switch (status) {
+      case DownloadStatus.QUEUED:
+        return "[Q]";
+      case DownloadStatus.DOWNLOADING: {
+        const pct = downloadStore.getDownloadProgress(episodeId);
+        return `[${pct}%]`;
+      }
+      case DownloadStatus.COMPLETED:
+        return "[DL]";
+      case DownloadStatus.FAILED:
+        return "[ERR]";
+      default:
+        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) {
+      case DownloadStatus.QUEUED:
+        return theme.warning.toString();
+      case DownloadStatus.DOWNLOADING:
+        return theme.primary.toString();
+      case DownloadStatus.COMPLETED:
+        return theme.success.toString();
+      case DownloadStatus.FAILED:
+        return theme.error.toString();
+      default:
+        return mutedColor().toString();
+    }
+  };
+
+  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
+            height="100%"
+            borderColor={
+              nav.activeDepth() == MyShowsPaneType.SHOWS
+                ? theme.accent
+                : theme.border
+            }
+            focused={nav.activeDepth() == MyShowsPaneType.SHOWS}
+          >
+            <For each={shows()}>
+              {(feed, index) => (
+                <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,
+                    );
+                  }}
+                >
+                  <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%">
+          <Show
+            when={selectedShow()}
+            fallback={
+              <box padding={1}>
+                <text fg={theme.muted}>Select a show</text>
+              </box>
+            }
+          >
+            <Show
+              when={episodes().length > 0}
+              fallback={
+                <box padding={1}>
+                  <text fg={theme.muted}>No episodes. Press [r] to 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) => (
+                  <box
+                    flexDirection="column"
+                    gap={0}
+                    paddingLeft={1}
+                    paddingRight={1}
+                    backgroundColor={
+                      index() === episodeIndex() ? theme.primary : undefined
+                    }
+                    onMouseDown={() => setEpisodeIndex(index())}
+                  >
+                    <box flexDirection="row" gap={1}>
+                      <text
+                        fg={
+                          index() === episodeIndex()
+                            ? theme.surface
+                            : theme.text
+                        }
+                      >
+                        {index() === episodeIndex() ? ">" : " "}
+                      </text>
+                      <text
+                        fg={
+                          index() === episodeIndex()
+                            ? theme.surface
+                            : theme.text
+                        }
+                      >
+                        {episode.episodeNumber
+                          ? `#${episode.episodeNumber} `
+                          : ""}
+                        {episode.title}
+                      </text>
+                    </box>
+                    <box flexDirection="row" gap={2} paddingLeft={2}>
+                      <text
+                        fg={index() === episodeIndex() ? undefined : theme.info}
+                      >
+                        {formatDate(episode.pubDate)}
+                      </text>
+                      <text fg={theme.muted}>
+                        {formatDuration(episode.duration)}
+                      </text>
+                      <Show when={downloadLabel(episode.id)}>
+                        <text fg={downloadColor(episode.id)}>
+                          {downloadLabel(episode.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>
+            </scrollbox>
+          </Show>
+        </Show>
+      </box>
+    </box>
+  );
+}

src/pages/Player/PlaybackControls.tsx

@@ -0,0 +1,64 @@
+import type { BackendName } from "../utils/audio-player"
+import { useTheme } from "@/context/ThemeContext"
+
+type PlaybackControlsProps = {
+  isPlaying: boolean
+  volume: number
+  speed: number
+  backendName?: BackendName
+  hasAudioUrl?: boolean
+  onToggle: () => void
+  onPrev: () => void
+  onNext: () => void
+  onVolumeChange: (value: number) => void
+  onSpeedChange: (value: number) => void
+}
+
+const BACKEND_LABELS: Record<BackendName, string> = {
+  mpv: "mpv",
+  ffplay: "ffplay",
+  afplay: "afplay",
+  system: "system",
+  none: "none",
+}
+
+export function PlaybackControls(props: PlaybackControlsProps) {
+  const { theme } = useTheme();
+  return (
+    <box flexDirection="row" gap={1} alignItems="center" border padding={1} borderColor={theme.border}>
+      <box border padding={0} onMouseDown={props.onPrev} borderColor={theme.border}>
+        <text fg={theme.primary}>[Prev]</text>
+      </box>
+      <box border padding={0} onMouseDown={props.onToggle} borderColor={theme.border}>
+        <text fg={theme.primary}>{props.isPlaying ? "[Pause]" : "[Play]"}</text>
+      </box>
+      <box border padding={0} onMouseDown={props.onNext} borderColor={theme.border}>
+        <text fg={theme.primary}>[Next]</text>
+      </box>
+      <box flexDirection="row" gap={1} marginLeft={2}>
+        <text fg={theme.textMuted}>Vol</text>
+        <text fg={theme.text}>{Math.round(props.volume * 100)}%</text>
+      </box>
+      <box flexDirection="row" gap={1} marginLeft={2}>
+        <text fg={theme.textMuted}>Speed</text>
+        <text fg={theme.text}>{props.speed}x</text>
+      </box>
+      {props.backendName && props.backendName !== "none" && (
+        <box flexDirection="row" gap={1} marginLeft={2}>
+          <text fg={theme.textMuted}>via</text>
+          <text fg={theme.primary}>{BACKEND_LABELS[props.backendName]}</text>
+        </box>
+      )}
+      {props.backendName === "none" && (
+        <box marginLeft={2}>
+          <text fg={theme.warning}>No audio player found</text>
+        </box>
+      )}
+      {props.hasAudioUrl === false && (
+        <box marginLeft={2}>
+          <text fg={theme.warning}>No audio URL</text>
+        </box>
+      )}
+    </box>
+  )
+}

src/pages/Player/PlayerPage.tsx

@@ -0,0 +1,112 @@
+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 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 },
+    );
+  });
+
+  const progressPercent = () => {
+    const d = audio.duration();
+    if (d <= 0) return 0;
+    return Math.min(100, Math.round((audio.position() / d) * 100));
+  };
+
+  const formatTime = (seconds: number) => {
+    const m = Math.floor(seconds / 60);
+    const s = Math.floor(seconds % 60);
+    return `${m}:${String(s).padStart(2, "0")}`;
+  };
+
+  return (
+    <box flexDirection="column" gap={1} width="100%">
+      <box flexDirection="row" justifyContent="space-between">
+        <text fg={theme.text}>
+          <strong>Now Playing</strong>
+        </text>
+        <text fg={theme.muted}>
+          {formatTime(audio.position())} / {formatTime(audio.duration())} (
+          {progressPercent()}%)
+        </text>
+      </box>
+
+      {audio.error() && <text fg={theme.error}>{audio.error()}</text>}
+
+      <box
+        border
+        borderColor={nav.activeDepth() == PlayerPaneType.PLAYER ? theme.accent : theme.border}
+        padding={1}
+        flexDirection="column"
+        gap={1}
+      >
+        <text fg={theme.text}>
+          <strong>{audio.currentEpisode()?.title}</strong>
+        </text>
+        <text fg={theme.muted}>{audio.currentEpisode()?.description}</text>
+
+        <RealtimeWaveform
+          visualizerConfig={(() => {
+            const viz = useAppStore().state().settings.visualizer;
+            return {
+              bars: viz.bars,
+              noiseReduction: viz.noiseReduction,
+              lowCutOff: viz.lowCutOff,
+              highCutOff: viz.highCutOff,
+            };
+          })()}
+        />
+      </box>
+
+      <PlaybackControls
+        isPlaying={audio.isPlaying()}
+        volume={audio.volume()}
+        speed={audio.speed()}
+        backendName={audio.backendName()}
+        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)
+        onSpeedChange={(s: number) => audio.setSpeed(s)}
+        onVolumeChange={(v: number) => audio.setVolume(v)}
+      />
+    </box>
+  );
+}

src/pages/Player/RealtimeWaveform.tsx

@@ -0,0 +1,256 @@
+/**
+ * RealtimeWaveform — live audio frequency visualization using cavacore.
+ *
+ * Spawns an independent ffmpeg
+ * process to decode the audio stream, feeds PCM samples through cavacore
+ * for FFT analysis, and renders frequency bars as colored terminal
+ * characters at ~30fps.
+ */
+
+import { createSignal, createEffect, onCleanup, on, untrack } from "solid-js";
+import {
+  loadCavaCore,
+  type CavaCore,
+  type CavaCoreConfig,
+} from "@/utils/cavacore";
+import { AudioStreamReader } from "@/utils/audio-stream-reader";
+import { useAudio } from "@/hooks/useAudio";
+import { useTheme } from "@/context/ThemeContext";
+
+// ── Types ────────────────────────────────────────────────────────────
+
+export type RealtimeWaveformProps = {
+  visualizerConfig?: Partial<CavaCoreConfig>;
+};
+
+/** Unicode lower block elements: space (silence) through full block (max) */
+const BARS = [
+  " ",
+  "\u2581",
+  "\u2582",
+  "\u2583",
+  "\u2584",
+  "\u2585",
+  "\u2586",
+  "\u2587",
+  "\u2588",
+];
+
+/** Target frame interval in ms (~30 fps) */
+const FRAME_INTERVAL = 33;
+
+/** Number of PCM samples to read per frame (512 is a good FFT window) */
+const SAMPLES_PER_FRAME = 512;
+
+// ── Component ────────────────────────────────────────────────────────
+
+export function RealtimeWaveform(props: RealtimeWaveformProps) {
+  const { theme } = useTheme();
+  const audio = useAudio();
+
+  // Frequency bar values (0.0–1.0 per bar)
+  const [barData, setBarData] = createSignal<number[]>([]);
+
+  // Track whether cavacore is available
+  const [available, setAvailable] = createSignal(false);
+
+  let cava: CavaCore | null = null;
+  let reader: AudioStreamReader | null = null;
+  let frameTimer: ReturnType<typeof setInterval> | null = null;
+  let sampleBuffer: Float64Array | null = null;
+
+  // ── Lifecycle: init cavacore once ──────────────────────────────────
+
+  const initCava = () => {
+    if (cava) return true;
+
+    cava = loadCavaCore();
+    if (!cava) {
+      setAvailable(false);
+      return false;
+    }
+
+    setAvailable(true);
+    return true;
+  };
+
+  // ── Start/stop the visualization pipeline ──────────────────────────
+
+  const startVisualization = (url: string, position: number, speed: number) => {
+    stopVisualization();
+
+    if (!url || !initCava() || !cava) return;
+
+    // Initialize cavacore with current resolution + any overrides
+    const config: CavaCoreConfig = {
+      bars: 32,
+      sampleRate: 44100,
+      channels: 1,
+      ...props.visualizerConfig,
+    };
+    cava.init(config);
+
+    // Pre-allocate sample read buffer
+    sampleBuffer = new Float64Array(SAMPLES_PER_FRAME);
+
+    // Start ffmpeg decode stream (reuse reader if same URL, else create new)
+    if (!reader || reader.url !== url) {
+      if (reader) reader.stop();
+      reader = new AudioStreamReader({ url });
+    }
+    reader.start(position, speed);
+
+    // Start render loop
+    frameTimer = setInterval(renderFrame, FRAME_INTERVAL);
+  };
+
+  const stopVisualization = () => {
+    if (frameTimer) {
+      clearInterval(frameTimer);
+      frameTimer = null;
+    }
+    if (reader) {
+      reader.stop();
+      // Don't null reader — we reuse it across start/stop cycles
+    }
+    if (cava?.isReady) {
+      cava.destroy();
+    }
+    sampleBuffer = null;
+  };
+
+  // ── Render loop (called at ~30fps) ─────────────────────────────────
+
+  const renderFrame = () => {
+    if (!cava?.isReady || !reader?.running || !sampleBuffer) return;
+
+    // Read available PCM samples from the stream
+    const count = reader.read(sampleBuffer);
+    if (count === 0) return;
+
+    // Feed samples to cavacore → get frequency bars
+    const input =
+      count < sampleBuffer.length
+        ? sampleBuffer.subarray(0, count)
+        : sampleBuffer;
+    const output = cava.execute(input);
+
+    // Copy bar values to a new array for the signal
+    setBarData(Array.from(output));
+  };
+
+  createEffect(
+    on(
+      [
+        audio.isPlaying,
+        () => audio.currentEpisode()?.audioUrl ?? "", // may need to fire an error here
+        audio.speed,
+        () => 32,
+      ],
+      ([playing, url, speed]) => {
+        if (playing && url) {
+          const pos = untrack(audio.position);
+          startVisualization(url, pos, speed);
+        } else {
+          stopVisualization();
+        }
+      },
+    ),
+  );
+
+  // ── Seek detection: lightweight effect for position jumps ──────────
+  //
+  // Watches position and restarts the reader (not the whole pipeline)
+  // only on significant jumps (>2s), which indicate a user seek.
+  // This is intentionally a separate effect — it should NOT trigger a
+  // full pipeline restart, just restart the ffmpeg stream at the new pos.
+
+  let lastSyncPosition = 0;
+  createEffect(
+    on(audio.position, (pos) => {
+      if (!audio.isPlaying || !reader?.running) {
+        lastSyncPosition = pos;
+        return;
+      }
+
+      const delta = Math.abs(pos - lastSyncPosition);
+      lastSyncPosition = pos;
+
+      if (delta > 2) {
+        reader.restart(pos, audio.speed() ?? 1);
+      }
+    }),
+  );
+
+  // Cleanup on unmount
+  onCleanup(() => {
+    stopVisualization();
+    if (reader) {
+      reader.stop();
+      reader = null;
+    }
+    // Don't null cava itself — it can be reused. But do destroy its plan.
+    if (cava?.isReady) {
+      cava.destroy();
+    }
+  });
+
+  // ── Rendering ──────────────────────────────────────────────────────
+
+  const playedRatio = () =>
+    audio.duration() <= 0
+      ? 0
+      : Math.min(1, audio.position() / audio.duration());
+
+  const renderLine = () => {
+    const bars = barData();
+    const numBars = 32;
+
+    // If no data yet, show empty placeholder
+    if (bars.length === 0) {
+      const placeholder = ".".repeat(numBars);
+      return (
+        <box flexDirection="row" gap={0}>
+          <text fg="#3b4252">{placeholder}</text>
+        </box>
+      );
+    }
+
+    const played = Math.floor(numBars * playedRatio());
+    const playedColor = audio.isPlaying() ? "#6fa8ff" : "#7d8590";
+    const futureColor = "#3b4252";
+
+    const playedChars = bars
+      .slice(0, played)
+      .map((v) => BARS[Math.min(BARS.length - 1, Math.floor(v * BARS.length))])
+      .join("");
+
+    const futureChars = bars
+      .slice(played)
+      .map((v) => BARS[Math.min(BARS.length - 1, Math.floor(v * BARS.length))])
+      .join("");
+
+    return (
+      <box flexDirection="row" gap={0}>
+        <text fg={playedColor}>{playedChars || " "}</text>
+        <text fg={futureColor}>{futureChars || " "}</text>
+      </box>
+    );
+  };
+
+  const handleClick = (event: { x: number }) => {
+    const numBars = 32;
+    const ratio = event.x / numBars;
+    const next = Math.max(
+      0,
+      Math.min(audio.duration(), Math.round(audio.duration() * ratio)),
+    );
+    audio.seek(next);
+  };
+
+  return (
+    <box border borderColor={theme.border} padding={1} onMouseDown={handleClick}>
+      {renderLine()}
+    </box>
+  );
+}

src/pages/Search/ResultCard.tsx

@@ -0,0 +1,95 @@
+import { Show } from "solid-js";
+import type { SearchResult } from "@/types/source";
+import { SourceBadge } from "./SourceBadge";
+import { useTheme } from "@/context/ThemeContext";
+import { SelectableBox, SelectableText } from "@/components/Selectable";
+
+type ResultCardProps = {
+  result: SearchResult;
+  selected: boolean;
+  onSelect: () => void;
+  onSubscribe?: () => void;
+};
+
+export function ResultCard(props: ResultCardProps) {
+  const { theme } = useTheme();
+  const podcast = () => props.result.podcast;
+
+  return (
+    <SelectableBox
+      selected={() => props.selected}
+      flexDirection="column"
+      padding={1}
+      onMouseDown={props.onSelect}
+    >
+      <box
+        flexDirection="row"
+        justifyContent="space-between"
+        alignItems="center"
+      >
+         <box flexDirection="row" gap={2} alignItems="center">
+             <SelectableText
+               selected={() => props.selected}
+               primary
+             >
+               <strong>{podcast().title}</strong>
+             </SelectableText>
+           <SourceBadge
+             sourceId={props.result.sourceId}
+             sourceName={props.result.sourceName}
+             sourceType={props.result.sourceType}
+           />
+         </box>
+        <Show when={podcast().isSubscribed}>
+            <text fg={theme.success}>[Subscribed]</text>
+        </Show>
+      </box>
+
+       <Show when={podcast().author}>
+             <SelectableText
+               selected={() => props.selected}
+               tertiary
+             >
+               by {podcast().author}
+             </SelectableText>
+       </Show>
+
+       <Show when={podcast().description}>
+         {(description) => (
+             <SelectableText
+               selected={() => props.selected}
+               tertiary
+             >
+             {description().length > 120
+               ? description().slice(0, 120) + "..."
+               : description()}
+           </SelectableText>
+         )}
+       </Show>
+
+      <Show when={(podcast().categories ?? []).length > 0}>
+        <box flexDirection="row" gap={1}>
+          {(podcast().categories ?? []).slice(0, 3).map((category) => (
+            <text fg={theme.warning}>[{category}]</text>
+          ))}
+        </box>
+      </Show>
+
+      <Show when={!podcast().isSubscribed}>
+        <box
+          border
+          padding={0}
+          paddingLeft={1}
+          paddingRight={1}
+          width={18}
+          onMouseDown={(event) => {
+            event.stopPropagation?.();
+            props.onSubscribe?.();
+          }}
+        >
+            <text fg={theme.primary}>[+] Add to Feeds</text>
+        </box>
+      </Show>
+    </SelectableBox>
+  );
+}

src/pages/Search/ResultDetail.tsx

@@ -0,0 +1,75 @@
+import { Show } from "solid-js";
+import { format } from "date-fns";
+import type { SearchResult } from "@/types/source";
+import { SourceBadge } from "./SourceBadge";
+import { useTheme } from "@/context/ThemeContext";
+
+type ResultDetailProps = {
+  result?: SearchResult;
+  onSubscribe?: (result: SearchResult) => void;
+};
+
+export function ResultDetail(props: ResultDetailProps) {
+  const { theme } = useTheme();
+  return (
+    <box flexDirection="column" border padding={1} gap={1} height="100%" borderColor={theme.border}>
+      <Show
+        when={props.result}
+        fallback={          <text fg={theme.textMuted}>Select a result to see details.</text>}
+      >
+        {(result) => (
+          <>
+            <text fg={theme.text}>
+              <strong>{result().podcast.title}</strong>
+            </text>
+
+            <SourceBadge
+              sourceId={result().sourceId}
+              sourceName={result().sourceName}
+              sourceType={result().sourceType}
+            />
+
+            <Show when={result().podcast.author}>
+              <text fg={theme.textMuted}>by {result().podcast.author}</text>
+            </Show>
+
+            <Show when={result().podcast.description}>
+              <text fg={theme.textMuted}>{result().podcast.description}</text>
+            </Show>
+
+            <Show when={(result().podcast.categories ?? []).length > 0}>
+              <box flexDirection="row" gap={1}>
+                {(result().podcast.categories ?? []).map((category) => (
+                  <text fg={theme.warning}>[{category}]</text>
+                ))}
+              </box>
+            </Show>
+
+            <text fg={theme.textMuted}>Feed: {result().podcast.feedUrl}</text>
+
+            <text fg={theme.textMuted}>
+              Updated: {format(result().podcast.lastUpdated, "MMM d, yyyy")}
+            </text>
+
+            <Show when={!result().podcast.isSubscribed}>
+              <box
+                border
+                padding={0}
+                paddingLeft={1}
+                paddingRight={1}
+                width={18}
+                onMouseDown={() => props.onSubscribe?.(result())}
+              >
+                  <text fg={theme.primary}>[+] Add to Feeds</text>
+              </box>
+            </Show>
+
+            <Show when={result().podcast.isSubscribed}>
+              <text fg={theme.success}>Already subscribed</text>
+            </Show>
+          </>
+        )}
+      </Show>
+    </box>
+  );
+}

src/pages/Search/SearchHistory.tsx

@@ -3,6 +3,8 @@
  */
 
 import { For, Show } from "solid-js"
+import { useTheme } from "@/context/ThemeContext"
+import { SelectableBox, SelectableText } from "@/components/Selectable"
 
 type SearchHistoryProps = {
   history: string[]
@@ -15,6 +17,7 @@ type SearchHistoryProps = {
 }
 
 export function SearchHistory(props: SearchHistoryProps) {
+  const { theme } = useTheme();
   const handleSearchClick = (index: number, query: string) => {
     props.onChange?.(index)
     props.onSelect?.(query)
@@ -27,19 +30,19 @@ export function SearchHistory(props: SearchHistoryProps) {
   return (
     <box flexDirection="column" gap={1}>
       <box flexDirection="row" justifyContent="space-between">
-        <text fg="gray">Recent Searches</text>
-        <Show when={props.history.length > 0}>
-          <box onMouseDown={() => props.onClear?.()} padding={0}>
-            <text fg="red">[Clear All]</text>
-          </box>
-        </Show>
+            <text fg={theme.textMuted}>Recent Searches</text>
+            <Show when={props.history.length > 0}>
+              <box onMouseDown={() => props.onClear?.()} padding={0}>
+                <text fg={theme.error}>[Clear All]</text>
+              </box>
+            </Show>
       </box>
 
       <Show
         when={props.history.length > 0}
         fallback={
           <box padding={1}>
-            <text fg="gray">No recent searches</text>
+            <text fg={theme.textMuted}>No recent searches</text>
           </box>
         }
       >
@@ -50,23 +53,31 @@ export function SearchHistory(props: SearchHistoryProps) {
                 const isSelected = () => index() === props.selectedIndex && props.focused
 
                 return (
-                  <box
+                  <SelectableBox
+                    selected={isSelected}
                     flexDirection="row"
                     justifyContent="space-between"
                     padding={0}
                     paddingLeft={1}
                     paddingRight={1}
-                    backgroundColor={isSelected() ? "#333" : undefined}
                     onMouseDown={() => handleSearchClick(index(), query)}
                   >
-                    <box flexDirection="row" gap={1}>
-                      <text fg="gray">{">"}</text>
-                      <text fg={isSelected() ? "cyan" : "white"}>{query}</text>
-                    </box>
+                     <SelectableText
+                       selected={isSelected}
+                       tertiary
+                     >
+                       {">"}
+                     </SelectableText>
+                     <SelectableText
+                       selected={isSelected}
+                       primary
+                     >
+                       {query}
+                     </SelectableText>
                     <box onMouseDown={() => handleRemoveClick(query)} padding={0}>
-                      <text fg="red">[x]</text>
+                      <text fg={theme.error}>[x]</text>
                     </box>
-                  </box>
+                  </SelectableBox>
                 )
               }}
             </For>

src/pages/Search/SearchPage.tsx

@@ -0,0 +1,210 @@
+/**
+ * SearchPage component - Main search interface for PodTUI
+ */
+
+import { createSignal, createEffect, Show, onMount } from "solid-js";
+import { useKeyboard } from "@opentui/solid";
+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 { useTheme } from "@/context/ThemeContext";
+import { useNavigation } from "@/context/NavigationContext";
+import { KeybindProvider, useKeybinds } from "@/context/KeybindContext";
+
+enum SearchPaneType {
+  INPUT = 1,
+  RESULTS = 2,
+  HISTORY = 3,
+}
+export const SearchPaneCount = 3;
+
+export function SearchPage() {
+  const searchStore = useSearchStore();
+  const [inputValue, setInputValue] = createSignal("");
+  const [resultIndex, setResultIndex] = createSignal(0);
+  const [historyIndex, setHistoryIndex] = createSignal(0);
+  const { theme } = useTheme();
+  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);
+
+        if (isSelect) {
+          const results = searchStore.results();
+          if (results.length > 0 && resultIndex() < results.length) {
+            setResultIndex(resultIndex() + 1);
+          }
+          return;
+        }
+
+        // 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 },
+    );
+  });
+
+  const handleSearch = async () => {
+    const query = inputValue().trim();
+    if (query) {
+      await searchStore.search(query);
+      if (searchStore.results().length > 0) {
+        //setFocusArea("results"); //TODO: move level
+        setResultIndex(0);
+      }
+    }
+  };
+
+  const handleHistorySelect = async (query: string) => {
+    setInputValue(query);
+    await searchStore.search(query);
+    if (searchStore.results().length > 0) {
+      //setFocusArea("results"); //TODO: move level
+      setResultIndex(0);
+    }
+  };
+
+  const handleResultSelect = (result: SearchResult) => {
+    //props.onSubscribe?.(result);
+    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>
+
+        {/* Search Input */}
+        <box flexDirection="row" gap={1} alignItems="center">
+          <text fg="gray">Search:</text>
+          <input
+            value={inputValue()}
+            onInput={(value) => {
+              setInputValue(value);
+            }}
+            placeholder="Enter podcast name, topic, or author..."
+            focused={nav.activeDepth() === SearchPaneType.INPUT}
+            width={50}
+          />
+          <box
+            border
+            padding={0}
+            paddingLeft={1}
+            paddingRight={1}
+            onMouseDown={handleSearch}
+          >
+            <text fg={theme.primary}>[Enter] Search</text>
+          </box>
+        </box>
+
+        {/* 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
+            flexDirection="column"
+            flexGrow={1}
+            border
+            borderColor={
+              nav.activeDepth() === SearchPaneType.RESULTS
+                ? theme.accent
+                : theme.border
+            }
+          >
+            <box padding={1}>
+              <text
+                fg={
+                  nav.activeDepth() === SearchPaneType.RESULTS
+                    ? theme.primary
+                    : theme.muted
+                }
+              >
+                Results ({searchStore.results().length})
+              </text>
+            </box>
+            <Show
+              when={searchStore.results().length > 0}
+              fallback={
+                <box padding={2}>
+                  <text fg={theme.muted}>
+                    {searchStore.query()
+                      ? "No results found"
+                      : "Enter a search term to find podcasts"}
+                  </text>
+                </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}>
+                <text
+                  fg={
+                    nav.activeDepth() === SearchPaneType.HISTORY
+                      ? theme.primary
+                      : theme.muted
+                  }
+                >
+                  History
+                </text>
+              </box>
+              <SearchHistory
+                history={searchStore.history()}
+                selectedIndex={historyIndex()}
+                focused={nav.activeDepth() === SearchPaneType.HISTORY}
+                onSelect={handleHistorySelect}
+                onRemove={searchStore.removeFromHistory}
+                onClear={searchStore.clearHistory}
+                onChange={setHistoryIndex}
+              />
+            </box>
+          </box>
+        </box>
+    </box>
+  );
+}

src/pages/Search/SearchResults.tsx

@@ -2,32 +2,35 @@
  * SearchResults component for displaying podcast search results
  */
 
-import { For, Show } from "solid-js"
-import type { SearchResult } from "../types/source"
-import { ResultCard } from "./ResultCard"
-import { ResultDetail } from "./ResultDetail"
+import { For, Show } from "solid-js";
+import type { SearchResult } from "@/types/source";
+import { ResultCard } from "./ResultCard";
+import { ResultDetail } from "./ResultDetail";
 
 type SearchResultsProps = {
-  results: SearchResult[]
-  selectedIndex: number
-  focused: boolean
-  onSelect?: (result: SearchResult) => void
-  onChange?: (index: number) => void
-  isSearching?: boolean
-  error?: string | null
-}
+  results: SearchResult[];
+  selectedIndex: number;
+  focused: boolean;
+  onSelect?: (result: SearchResult) => void;
+  onChange?: (index: number) => void;
+  isSearching?: boolean;
+  error?: string | null;
+};
 
 export function SearchResults(props: SearchResultsProps) {
   const handleSelect = (index: number) => {
-    props.onChange?.(index)
-  }
+    props.onChange?.(index);
+  };
 
   return (
-    <Show when={!props.isSearching} fallback={
-      <box padding={1}>
-        <text fg="yellow">Searching...</text>
-      </box>
-    }>
+    <Show
+      when={!props.isSearching}
+      fallback={
+        <box padding={1}>
+          <text fg="yellow">Searching...</text>
+        </box>
+      }
+    >
       <Show
         when={!props.error}
         fallback={
@@ -40,7 +43,9 @@ export function SearchResults(props: SearchResultsProps) {
           when={props.results.length > 0}
           fallback={
             <box padding={1}>
-              <text fg="gray">No results found. Try a different search term.</text>
+              <text fg="gray">
+                No results found. Try a different search term.
+              </text>
             </box>
           }
         >
@@ -71,5 +76,5 @@ export function SearchResults(props: SearchResultsProps) {
         </Show>
       </Show>
     </Show>
-  )
+  );
 }

src/pages/Search/SourceBadge.tsx

@@ -0,0 +1,43 @@
+import { SourceType } from "@/types/source";
+import { useTheme } from "@/context/ThemeContext";
+
+type SourceBadgeProps = {
+  sourceId: string;
+  sourceName?: string;
+  sourceType?: SourceType;
+};
+
+const typeLabel = (sourceType?: SourceType) => {
+  if (sourceType === SourceType.API) return "API";
+  if (sourceType === SourceType.RSS) return "RSS";
+  if (sourceType === SourceType.CUSTOM) return "Custom";
+  return "Source";
+};
+
+const typeColor = (sourceType?: SourceType) => {
+  if (sourceType === SourceType.API) return theme.primary;
+  if (sourceType === SourceType.RSS) return theme.success;
+  if (sourceType === SourceType.CUSTOM) return theme.warning;
+  return theme.textMuted;
+};
+
+export function SourceBadge(props: SourceBadgeProps) {
+  const { theme } = useTheme();
+  const label = () => props.sourceName || props.sourceId;
+
+  const typeColor = (sourceType?: SourceType) => {
+    if (sourceType === SourceType.API) return theme.primary;
+    if (sourceType === SourceType.RSS) return theme.success;
+    if (sourceType === SourceType.CUSTOM) return theme.warning;
+    return theme.textMuted;
+  };
+
+  return (
+    <box flexDirection="row" gap={1} padding={0}>
+      <text fg={typeColor(props.sourceType)}>
+        [{typeLabel(props.sourceType)}]
+      </text>
+      <text fg={theme.textMuted}>{label()}</text>
+    </box>
+  );
+}

src/pages/Settings/ExportDialog.tsx

@@ -6,19 +6,21 @@ const createSignal = <T,>(value: T): [() => T, (next: T) => void] => {
 }
 
 import { SyncStatus } from "./SyncStatus"
+import { useTheme } from "@/context/ThemeContext"
 
 export function ExportDialog() {
+  const { theme } = useTheme();
   const filename = createSignal("podcast-sync.json")
   const format = createSignal<"json" | "xml">("json")
 
   return (
     <box border title="Export" style={{ padding: 1, flexDirection: "column", gap: 1 }}>
       <box style={{ flexDirection: "row", gap: 1 }}>
-        <text>File:</text>
+        <text fg={theme.text}>File:</text>
         <input value={filename[0]()} onInput={filename[1]} style={{ width: 30 }} />
       </box>
       <box style={{ flexDirection: "row", gap: 1 }}>
-        <text>Format:</text>
+        <text fg={theme.text}>Format:</text>
         <tab_select
           options={[
             { name: "JSON", description: "Portable" },
@@ -27,8 +29,8 @@ export function ExportDialog() {
           onSelect={(index) => format[1](index === 0 ? "json" : "xml")}
         />
       </box>
-      <box border>
-        <text>Export {format[0]()} to {filename[0]()}</text>
+      <box border borderColor={theme.border}>
+        <text fg={theme.text}>Export {format[0]()} to {filename[0]()}</text>
       </box>
       <SyncStatus />
     </box>

src/pages/Settings/FilePicker.tsx

@@ -1,12 +1,14 @@
-import { detectFormat } from "../utils/file-detector"
+import { detectFormat } from "@/utils/file-detector";
+import { useTheme } from "@/context/ThemeContext";
 
 type FilePickerProps = {
-  value: string
-  onChange: (value: string) => void
-}
+  value: string;
+  onChange: (value: string) => void;
+};
 
 export function FilePicker(props: FilePickerProps) {
-  const format = detectFormat(props.value)
+  const { theme } = useTheme();
+  const format = detectFormat(props.value);
 
   return (
     <box style={{ flexDirection: "column", gap: 1 }}>
@@ -16,7 +18,7 @@ export function FilePicker(props: FilePickerProps) {
         placeholder="/path/to/sync-file.json"
         style={{ width: 40 }}
       />
-      <text>Format: {format}</text>
+      <text fg={theme.text}>Format: {format}</text>
     </box>
-  )
+  );
 }

src/pages/Settings/ImportDialog.tsx

@@ -6,15 +6,17 @@ const createSignal = <T,>(value: T): [() => T, (next: T) => void] => {
 }
 
 import { FilePicker } from "./FilePicker"
+import { useTheme } from "@/context/ThemeContext"
 
 export function ImportDialog() {
+  const { theme } = useTheme();
   const filePath = createSignal("")
 
   return (
     <box border title="Import" style={{ padding: 1, flexDirection: "column", gap: 1 }}>
       <FilePicker value={filePath[0]()} onChange={filePath[1]} />
-      <box border>
-        <text>Import selected file</text>
+      <box border borderColor={theme.border}>
+        <text fg={theme.text}>Import selected file</text>
       </box>
     </box>
   )

src/pages/Settings/LoginScreen.tsx

@@ -3,88 +3,88 @@
  * Email/password login with links to code validation and OAuth
  */
 
-import { createSignal } from "solid-js"
-import { useAuthStore } from "../stores/auth"
-import { useTheme } from "../context/ThemeContext"
-import { AUTH_CONFIG } from "../config/auth"
+import { createSignal } from "solid-js";
+import { useAuthStore } from "@/stores/auth";
+import { useTheme } from "@/context/ThemeContext";
+import { AUTH_CONFIG } from "@/config/auth";
 
 interface LoginScreenProps {
-  focused?: boolean
-  onNavigateToCode?: () => void
-  onNavigateToOAuth?: () => void
+  focused?: boolean;
+  onNavigateToCode?: () => void;
+  onNavigateToOAuth?: () => void;
 }
 
-type FocusField = "email" | "password" | "submit" | "code" | "oauth"
+type FocusField = "email" | "password" | "submit" | "code" | "oauth";
 
 export function LoginScreen(props: LoginScreenProps) {
-  const auth = useAuthStore()
-  const { theme } = useTheme()
-  const [email, setEmail] = createSignal("")
-  const [password, setPassword] = createSignal("")
-  const [focusField, setFocusField] = createSignal<FocusField>("email")
-  const [emailError, setEmailError] = createSignal<string | null>(null)
-  const [passwordError, setPasswordError] = createSignal<string | null>(null)
+  const auth = useAuthStore();
+  const { theme } = useTheme();
+  const [email, setEmail] = createSignal("");
+  const [password, setPassword] = createSignal("");
+  const [focusField, setFocusField] = createSignal<FocusField>("email");
+  const [emailError, setEmailError] = createSignal<string | null>(null);
+  const [passwordError, setPasswordError] = createSignal<string | null>(null);
 
-  const fields: FocusField[] = ["email", "password", "submit", "code", "oauth"]
+  const fields: FocusField[] = ["email", "password", "submit", "code", "oauth"];
 
   const validateEmail = (value: string): boolean => {
     if (!value) {
-      setEmailError("Email is required")
-      return false
+      setEmailError("Email is required");
+      return false;
     }
     if (!AUTH_CONFIG.email.pattern.test(value)) {
-      setEmailError("Invalid email format")
-      return false
+      setEmailError("Invalid email format");
+      return false;
     }
-    setEmailError(null)
-    return true
-  }
+    setEmailError(null);
+    return true;
+  };
 
   const validatePassword = (value: string): boolean => {
     if (!value) {
-      setPasswordError("Password is required")
-      return false
+      setPasswordError("Password is required");
+      return false;
     }
     if (value.length < AUTH_CONFIG.password.minLength) {
-      setPasswordError(`Minimum ${AUTH_CONFIG.password.minLength} characters`)
-      return false
+      setPasswordError(`Minimum ${AUTH_CONFIG.password.minLength} characters`);
+      return false;
     }
-    setPasswordError(null)
-    return true
-  }
+    setPasswordError(null);
+    return true;
+  };
 
   const handleSubmit = async () => {
-    const isEmailValid = validateEmail(email())
-    const isPasswordValid = validatePassword(password())
+    const isEmailValid = validateEmail(email());
+    const isPasswordValid = validatePassword(password());
 
     if (!isEmailValid || !isPasswordValid) {
-      return
+      return;
     }
 
-    await auth.login({ email: email(), password: password() })
-  }
+    await auth.login({ email: email(), password: password() });
+  };
 
   const handleKeyPress = (key: { name: string; shift?: boolean }) => {
     if (key.name === "tab") {
-      const currentIndex = fields.indexOf(focusField())
+      const currentIndex = fields.indexOf(focusField());
       const nextIndex = key.shift
         ? (currentIndex - 1 + fields.length) % fields.length
-        : (currentIndex + 1) % fields.length
-      setFocusField(fields[nextIndex])
-    } else if (key.name === "return" || key.name === "enter") {
+        : (currentIndex + 1) % fields.length;
+      setFocusField(fields[nextIndex]);
+    } else if (key.name === "return") {
       if (focusField() === "submit") {
-        handleSubmit()
+        handleSubmit();
       } else if (focusField() === "code" && props.onNavigateToCode) {
-        props.onNavigateToCode()
+        props.onNavigateToCode();
       } else if (focusField() === "oauth" && props.onNavigateToOAuth) {
-        props.onNavigateToOAuth()
+        props.onNavigateToOAuth();
       }
     }
-  }
+  };
 
   return (
-    <box flexDirection="column" border padding={2} gap={1}>
-      <text>
+    <box flexDirection="column" border borderColor={theme.border} padding={2} gap={1}>
+      <text fg={theme.text}>
         <strong>Sign In</strong>
       </text>
 
@@ -92,7 +92,9 @@ export function LoginScreen(props: LoginScreenProps) {
 
       {/* Email field */}
       <box flexDirection="column" gap={0}>
-        <text fg={focusField() === "email" ? theme.primary : undefined}>Email:</text>
+        <text fg={focusField() === "email" ? theme.primary : theme.textMuted}>
+          Email:
+        </text>
         <input
           value={email()}
           onInput={setEmail}
@@ -100,14 +102,12 @@ export function LoginScreen(props: LoginScreenProps) {
           focused={props.focused && focusField() === "email"}
           width={30}
         />
-        {emailError() && (
-          <text fg={theme.error}>{emailError()}</text>
-        )}
+        {emailError() && <text fg={theme.error}>{emailError()}</text>}
       </box>
 
       {/* Password field */}
       <box flexDirection="column" gap={0}>
-        <text fg={focusField() === "password" ? theme.primary : undefined}>
+        <text fg={focusField() === "password" ? theme.primary : theme.textMuted}>
           Password:
         </text>
         <input
@@ -117,9 +117,7 @@ export function LoginScreen(props: LoginScreenProps) {
           focused={props.focused && focusField() === "password"}
           width={30}
         />
-        {passwordError() && (
-          <text fg={theme.error}>{passwordError()}</text>
-        )}
+        {passwordError() && <text fg={theme.error}>{passwordError()}</text>}
       </box>
 
       <box height={1} />
@@ -128,8 +126,11 @@ export function LoginScreen(props: LoginScreenProps) {
       <box flexDirection="row" gap={2}>
         <box
           border
+          borderColor={theme.border}
           padding={1}
-          backgroundColor={focusField() === "submit" ? theme.primary : undefined}
+          backgroundColor={
+            focusField() === "submit" ? theme.primary : undefined
+          }
         >
           <text fg={focusField() === "submit" ? theme.text : undefined}>
             {auth.isLoading ? "Signing in..." : "[Enter] Sign In"}
@@ -138,9 +139,7 @@ export function LoginScreen(props: LoginScreenProps) {
       </box>
 
       {/* Auth error message */}
-      {auth.error && (
-        <text fg={theme.error}>{auth.error.message}</text>
-      )}
+      {auth.error && <text fg={theme.error}>{auth.error.message}</text>}
 
       <box height={1} />
 
@@ -150,6 +149,7 @@ export function LoginScreen(props: LoginScreenProps) {
       <box flexDirection="row" gap={2}>
         <box
           border
+          borderColor={theme.border}
           padding={1}
           backgroundColor={focusField() === "code" ? theme.primary : undefined}
         >
@@ -160,6 +160,7 @@ export function LoginScreen(props: LoginScreenProps) {
 
         <box
           border
+          borderColor={theme.border}
           padding={1}
           backgroundColor={focusField() === "oauth" ? theme.primary : undefined}
         >
@@ -173,5 +174,5 @@ export function LoginScreen(props: LoginScreenProps) {
 
       <text fg={theme.textMuted}>Tab to navigate, Enter to select</text>
     </box>
-  )
+  );
 }

src/pages/Settings/OAuthPlaceholder.tsx

@@ -0,0 +1,123 @@
+/**
+ * OAuth placeholder component for PodTUI
+ * Displays OAuth limitations and alternative authentication methods
+ */
+
+import { createSignal } from "solid-js";
+import { OAUTH_PROVIDERS, OAUTH_LIMITATION_MESSAGE } from "@/config/auth";
+import { useTheme } from "@/context/ThemeContext";
+
+interface OAuthPlaceholderProps {
+  focused?: boolean;
+  onBack?: () => void;
+  onNavigateToCode?: () => void;
+}
+
+type FocusField = "code" | "back";
+
+export function OAuthPlaceholder(props: OAuthPlaceholderProps) {
+  const { theme } = useTheme();
+  const [focusField, setFocusField] = createSignal<FocusField>("code");
+
+  const fields: FocusField[] = ["code", "back"];
+
+  const handleKeyPress = (key: { name: string; shift?: boolean }) => {
+    if (key.name === "tab") {
+      const currentIndex = fields.indexOf(focusField());
+      const nextIndex = key.shift
+        ? (currentIndex - 1 + fields.length) % fields.length
+        : (currentIndex + 1) % fields.length;
+      setFocusField(fields[nextIndex]);
+    } else if (key.name === "return") {
+      if (focusField() === "code" && props.onNavigateToCode) {
+        props.onNavigateToCode();
+      } else if (focusField() === "back" && props.onBack) {
+        props.onBack();
+      }
+    } else if (key.name === "escape" && props.onBack) {
+      props.onBack();
+    }
+  };
+
+  return (
+    <box flexDirection="column" border padding={2} gap={1} borderColor={theme.border}>
+      <text fg={theme.text}>
+        <strong>OAuth Authentication</strong>
+      </text>
+
+      <box height={1} />
+
+      {/* OAuth providers list */}
+      <text fg={theme.primary}>Available OAuth Providers:</text>
+
+      <box flexDirection="column" gap={0} paddingLeft={2}>
+        {OAUTH_PROVIDERS.map((provider) => (
+          <box flexDirection="row" gap={1}>
+            <text fg={provider.enabled ? theme.success : theme.textMuted}>
+              {provider.enabled ? "[+]" : "[-]"} {provider.name}
+            </text>
+            <text fg={theme.textMuted}>- {provider.description}</text>
+          </box>
+        ))}
+      </box>
+
+      <box height={1} />
+
+      {/* Limitation message */}
+      <box border padding={1} borderColor={theme.warning}>
+        <text fg={theme.warning}>Terminal Limitations</text>
+      </box>
+
+      <box paddingLeft={1}>
+        {OAUTH_LIMITATION_MESSAGE.split("\n").map((line) => (
+          <text fg={theme.textMuted}>{line}</text>
+        ))}
+      </box>
+
+      <box height={1} />
+
+      {/* Alternative options */}
+      <text fg={theme.primary}>Recommended Alternatives:</text>
+
+      <box flexDirection="column" gap={0} paddingLeft={2}>
+        <box flexDirection="row" gap={1}>
+            <text fg={theme.success}>[1]</text>
+            <text fg={theme.text}>Use a sync code from the web portal</text>
+            <text fg={theme.success}>[2]</text>
+            <text fg={theme.text}>Use email/password authentication</text>
+            <text fg={theme.success}>[3]</text>
+            <text fg={theme.text}>Use file-based sync (no account needed)</text>
+        </box>
+      </box>
+
+      <box height={1} />
+
+      {/* Action buttons */}
+      <box flexDirection="row" gap={2}>
+        <box
+          border
+          padding={1}
+            backgroundColor={focusField() === "code" ? theme.backgroundElement : undefined}
+        >
+            <text fg={focusField() === "code" ? theme.primary : undefined}>
+            [C] Enter Sync Code
+          </text>
+        </box>
+
+        <box
+          border
+          padding={1}
+            backgroundColor={focusField() === "back" ? theme.backgroundElement : undefined}
+        >
+            <text fg={focusField() === "back" ? theme.warning : theme.textMuted}>
+            [Esc] Back to Login
+          </text>
+        </box>
+      </box>
+
+      <box height={1} />
+
+      <text fg={theme.textMuted}>Tab to navigate, Enter to select, Esc to go back</text>
+    </box>
+  );
+}

src/pages/Settings/PreferencesPanel.tsx

@@ -1,10 +1,10 @@
-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"
+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";
 
-type FocusField = "theme" | "font" | "speed" | "explicit" | "auto"
+type FocusField = "theme" | "font" | "speed" | "explicit" | "auto";
 
 const THEME_LABELS: Array<{ value: ThemeName; label: string }> = [
   { value: "system", label: "System" },
@@ -13,68 +13,77 @@ const THEME_LABELS: Array<{ value: ThemeName; label: string }> = [
   { value: "tokyo", label: "Tokyo" },
   { value: "nord", label: "Nord" },
   { value: "custom", label: "Custom" },
-]
+];
 
 export function PreferencesPanel() {
-  const appStore = useAppStore()
-  const { theme } = useTheme()
-  const [focusField, setFocusField] = createSignal<FocusField>("theme")
+  const appStore = useAppStore();
+  const { theme } = useTheme();
+  const [focusField, setFocusField] = createSignal<FocusField>("theme");
 
-  const settings = () => appStore.state().settings
-  const preferences = () => appStore.state().preferences
+  const settings = () => appStore.state().settings;
+  const preferences = () => appStore.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 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
+        : (idx + 1) % fields.length;
+      setFocusField(fields[next]);
+      return;
     }
 
     if (key.name === "left" || key.name === "h") {
-      stepValue(-1)
+      stepValue(-1);
     }
     if (key.name === "right" || key.name === "l") {
-      stepValue(1)
+      stepValue(1);
     }
-    if (key.name === "space" || key.name === "enter") {
-      toggleValue()
+    if (key.name === "space" || key.name === "return") {
+      toggleValue();
     }
-  }
+  };
 
   const stepValue = (delta: number) => {
-    const field = focusField()
+    const field = focusField();
     if (field === "theme") {
-      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
+      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
+      const next = Math.min(20, Math.max(10, settings().fontSize + delta));
+      appStore.updateSettings({ fontSize: next });
+      return;
     }
     if (field === "speed") {
-      const next = Math.min(2, Math.max(0.5, settings().playbackSpeed + delta * 0.1))
-      appStore.updateSettings({ playbackSpeed: Number(next.toFixed(1)) })
+      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()
+    const field = focusField();
     if (field === "explicit") {
-      appStore.updatePreferences({ showExplicit: !preferences().showExplicit })
+      appStore.updatePreferences({ showExplicit: !preferences().showExplicit });
     }
     if (field === "auto") {
-      appStore.updatePreferences({ autoDownload: !preferences().autoDownload })
+      appStore.updatePreferences({ autoDownload: !preferences().autoDownload });
     }
-  }
+  };
 
-  useKeyboard(handleKey)
+  useKeyboard(handleKey);
 
   return (
     <box flexDirection="column" gap={1}>
@@ -82,33 +91,47 @@ export function PreferencesPanel() {
 
       <box flexDirection="column" gap={1}>
         <box flexDirection="row" gap={1} alignItems="center">
-          <text fg={focusField() === "theme" ? theme.primary : theme.textMuted}>Theme:</text>
-          <box border padding={0}>
-            <text fg={theme.text}>{THEME_LABELS.find((t) => t.value === settings().theme)?.label}</text>
+          <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 padding={0}>
+          <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 padding={0}>
+          <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 padding={0}>
-            <text fg={preferences().showExplicit ? theme.success : theme.textMuted}>
+          <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>
@@ -116,9 +139,13 @@ export function PreferencesPanel() {
         </box>
 
         <box flexDirection="row" gap={1} alignItems="center">
-          <text fg={focusField() === "auto" ? theme.primary : theme.textMuted}>Auto Download:</text>
-          <box border padding={0}>
-            <text fg={preferences().autoDownload ? theme.success : theme.textMuted}>
+          <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>
@@ -128,5 +155,5 @@ export function PreferencesPanel() {
 
       <text fg={theme.textMuted}>Tab to move focus, Left/Right to adjust</text>
     </box>
-  )
+  );
 }

src/pages/Settings/SettingsPage.tsx

@@ -0,0 +1,119 @@
+import { createSignal, For, onMount } from "solid-js";
+import { useKeyboard } from "@opentui/solid";
+import { SourceManager } from "./SourceManager";
+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";
+
+enum SettingsPaneType {
+  SYNC = 1,
+  SOURCES = 2,
+  PREFERENCES = 3,
+  VISUALIZER = 4,
+  ACCOUNT = 5,
+}
+export const SettingsPaneCount = 5;
+
+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" },
+];
+
+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;
+  };
+
+  // Helper function to get the current depth as a number
+  const currentDepth = () => nav.activeDepth() as number;
+
+  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);
+
+        // don't handle pane navigation here - unified in App.tsx
+        if (nav.activeDepth() < 1 || nav.activeDepth() > SettingsPaneCount) return;
+
+        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);
+        }
+      },
+      { release: false },
+    );
+  });
+
+  return (
+    <box flexDirection="column" gap={1} height="100%" width="100%">
+      <box flexDirection="row" gap={1}>
+        <For each={SECTIONS}>
+          {(section, index) => (
+            <box
+              border
+              borderColor={theme.border}
+              padding={0}
+              backgroundColor={
+                currentDepth() === section.id ? theme.primary : undefined
+              }
+              onMouseDown={() => nav.setActiveDepth(section.id)}
+            >
+              <text
+                fg={
+                  currentDepth() === section.id ? theme.text : theme.textMuted
+                }
+              >
+                [{index() + 1}] {section.label}
+              </text>
+            </box>
+          )}
+        </For>
+      </box>
+
+      <box
+        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}
+      >
+        {isActive(SettingsPaneType.SYNC) && <SyncPanel />}
+        {isActive(SettingsPaneType.SOURCES) && (
+          <SourceManager focused />
+        )}
+        {isActive(SettingsPaneType.PREFERENCES) && (
+          <PreferencesPanel />
+        )}
+        {isActive(SettingsPaneType.VISUALIZER) && (
+          <VisualizerSettings />
+        )}
+        {isActive(SettingsPaneType.ACCOUNT) && (
+          <box flexDirection="column" gap={1}>
+            <text fg={theme.textMuted}>Account</text>
+          </box>
+        )}
+      </box>
+    </box>
+  );
+}

src/pages/Settings/SourceManager.tsx

@@ -0,0 +1,317 @@
+/**
+ * Source management component for PodTUI
+ * Add, remove, and configure podcast sources
+ */
+
+import { createSignal, For } 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";
+
+interface SourceManagerProps {
+  focused?: boolean;
+  onClose?: () => void;
+}
+
+type FocusArea = "list" | "add" | "url" | "country" | "explicit" | "language";
+
+export function SourceManager(props: SourceManagerProps) {
+  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 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 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,
+          });
+        }
+      }
+    }
+
+    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 });
+        }
+      }
+    }
+  };
+
+  const handleAddSource = () => {
+    const url = newSourceUrl().trim();
+    const name = newSourceName().trim() || `Custom Source`;
+
+    if (!url) {
+      setError("URL is required");
+      return;
+    }
+
+    try {
+      new URL(url);
+    } catch {
+      setError("Invalid URL format");
+      return;
+    }
+
+    feedStore.addSource({
+      name,
+      type: "rss" as SourceType,
+      baseUrl: url,
+      enabled: true,
+      description: `Custom RSS feed: ${url}`,
+    });
+
+    setNewSourceUrl("");
+    setNewSourceName("");
+    setFocusArea("list");
+    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">
+        <text fg={theme.text}>
+          <strong>Podcast Sources</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>
+             <input
+               value={newSourceName()}
+               onInput={setNewSourceName}
+               placeholder="My Custom Feed"
+               focused={props.focused && focusArea() === "add"}
+               width={25}
+             />
+           </box>
+
+           <box flexDirection="row" gap={1}>
+             <SelectableText selected={() => false} tertiary>URL:</SelectableText>
+             <input
+               value={newSourceUrl()}
+               onInput={(v) => {
+                 setNewSourceUrl(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>
+         </box>
+
+         {/* Error message */}
+         {error() && <SelectableText selected={() => false} tertiary>{error()}</SelectableText>}
+
+         <SelectableText selected={() => false} tertiary>Tab to switch sections, Esc to close</SelectableText>
+    </box>
+  );
+}

src/pages/Settings/SyncError.tsx

@@ -0,0 +1,18 @@
+import { useTheme } from "@/context/ThemeContext"
+
+type SyncErrorProps = {
+  message: string
+  onRetry: () => void
+}
+
+export function SyncError(props: SyncErrorProps) {
+  const { theme } = useTheme();
+  return (
+    <box border title="Error" style={{ padding: 1, flexDirection: "column", gap: 1 }}>
+      <text fg={theme.text}>{props.message}</text>
+      <box border borderColor={theme.border} onMouseDown={props.onRetry}>
+        <text fg={theme.text}>Retry</text>
+      </box>
+    </box>
+  )
+}

src/pages/Settings/SyncPanel.tsx

@@ -8,18 +8,20 @@ const createSignal = <T,>(value: T): [() => T, (next: T) => void] => {
 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 onMouseDown={() => mode[1]("import")}>
-          <text>Import</text>
+        <box border borderColor={theme.border} onMouseDown={() => mode[1]("import")}>
+          <text fg={theme.text}>Import</text>
         </box>
-        <box border onMouseDown={() => mode[1]("export")}>
-          <text>Export</text>
+        <box border borderColor={theme.border} onMouseDown={() => mode[1]("export")}>
+          <text fg={theme.text}>Export</text>
         </box>
       </box>
       <SyncStatus />

src/pages/Settings/SyncProfile.tsx

@@ -0,0 +1,157 @@
+/**
+ * Sync profile component for PodTUI
+ * Displays user profile information and sync status
+ */
+
+import { createSignal } from "solid-js";
+import { useAuthStore } from "@/stores/auth";
+import { format } from "date-fns";
+import { useTheme } from "@/context/ThemeContext";
+
+interface SyncProfileProps {
+  focused?: boolean;
+  onLogout?: () => void;
+  onManageSync?: () => void;
+}
+
+type FocusField = "sync" | "export" | "logout";
+
+export function SyncProfile(props: SyncProfileProps) {
+  const auth = useAuthStore();
+  const { theme } = useTheme();
+  const [focusField, setFocusField] = createSignal<FocusField>("sync");
+  const [lastSyncTime] = createSignal<Date | null>(new Date());
+
+  const fields: FocusField[] = ["sync", "export", "logout"];
+
+  const handleKeyPress = (key: { name: string; shift?: boolean }) => {
+    if (key.name === "tab") {
+      const currentIndex = fields.indexOf(focusField());
+      const nextIndex = key.shift
+        ? (currentIndex - 1 + fields.length) % fields.length
+        : (currentIndex + 1) % fields.length;
+      setFocusField(fields[nextIndex]);
+    } else if (key.name === "return") {
+      if (focusField() === "sync" && props.onManageSync) {
+        props.onManageSync();
+      } else if (focusField() === "logout" && props.onLogout) {
+        handleLogout();
+      }
+    }
+  };
+
+  const handleLogout = () => {
+    auth.logout();
+    if (props.onLogout) {
+      props.onLogout();
+    }
+  };
+
+  const formatDate = (date: Date | null | undefined): string => {
+    if (!date) return "Never";
+    return format(date, "MMM d, yyyy HH:mm");
+  };
+
+  const user = () => auth.state().user;
+
+  // Get user initials for avatar
+  const userInitials = () => {
+    const name = user()?.name || "?";
+    return name.slice(0, 2).toUpperCase();
+  };
+
+  return (
+    <box flexDirection="column" border padding={2} gap={1} borderColor={theme.border}>
+      <text fg={theme.text}>
+        <strong>User Profile</strong>
+      </text>
+
+      <box height={1} />
+
+      {/* User avatar and info */}
+      <box flexDirection="row" gap={2}>
+        {/* ASCII avatar */}
+        <box
+          border
+          padding={1}
+          width={8}
+          height={4}
+          justifyContent="center"
+          alignItems="center"
+        >
+          <text fg={theme.primary}>{userInitials()}</text>
+        </box>
+
+        {/* User details */}
+        <box flexDirection="column" gap={0}>
+            <text fg={theme.text}>{user()?.name || "Guest User"}</text>
+            <text fg={theme.textMuted}>{user()?.email || "No email"}</text>
+            <text fg={theme.textMuted}>Joined: {formatDate(user()?.createdAt)}</text>
+        </box>
+      </box>
+
+      <box height={1} />
+
+      {/* Sync status section */}
+      <box border padding={1} flexDirection="column" gap={0} borderColor={theme.border}>
+        <text fg={theme.primary}>Sync Status</text>
+
+        <box flexDirection="row" gap={1}>
+            <text fg={theme.textMuted}>Status:</text>
+            <text fg={user()?.syncEnabled ? theme.success : theme.warning}>
+              {user()?.syncEnabled ? "Enabled" : "Disabled"}
+            </text>
+        </box>
+
+        <box flexDirection="row" gap={1}>
+            <text fg={theme.textMuted}>Last Sync:</text>
+            <text fg={theme.text}>{formatDate(lastSyncTime())}</text>
+        </box>
+
+        <box flexDirection="row" gap={1}>
+            <text fg={theme.textMuted}>Method:</text>
+            <text fg={theme.text}>File-based (JSON/XML)</text>
+        </box>
+      </box>
+
+      <box height={1} />
+
+      {/* Action buttons */}
+      <box flexDirection="row" gap={2}>
+        <box
+          border
+          padding={1}
+            backgroundColor={focusField() === "sync" ? theme.backgroundElement : undefined}
+        >
+            <text fg={focusField() === "sync" ? theme.primary : undefined}>
+            [S] Manage Sync
+          </text>
+        </box>
+
+        <box
+          border
+          padding={1}
+            backgroundColor={focusField() === "export" ? theme.backgroundElement : undefined}
+        >
+            <text fg={focusField() === "export" ? theme.primary : undefined}>
+            [E] Export Data
+          </text>
+        </box>
+
+        <box
+          border
+          padding={1}
+            backgroundColor={focusField() === "logout" ? theme.backgroundElement : undefined}
+        >
+            <text fg={focusField() === "logout" ? theme.error : theme.textMuted}>
+            [L] Logout
+          </text>
+        </box>
+      </box>
+
+      <box height={1} />
+
+      <text fg={theme.textMuted}>Tab to navigate, Enter to select</text>
+    </box>
+  );
+}

src/pages/Settings/SyncProgress.tsx

@@ -1,8 +1,11 @@
+import { useTheme } from "@/context/ThemeContext"
+
 type SyncProgressProps = {
   value: number
 }
 
 export function SyncProgress(props: SyncProgressProps) {
+  const { theme } = useTheme();
   const width = 30
   let filled = (props.value / 100) * width
   filled = filled >= 0 ? filled : 0
@@ -18,8 +21,8 @@ export function SyncProgress(props: SyncProgressProps) {
 
   return (
     <box style={{ flexDirection: "column" }}>
-      <text>{bar}</text>
-      <text>{props.value}%</text>
+      <text fg={theme.text}>{bar}</text>
+      <text fg={theme.text}>{props.value}%</text>
     </box>
   )
 }

src/pages/Settings/SyncStatus.tsx

@@ -7,10 +7,12 @@ const createSignal = <T,>(value: T): [() => T, (next: T) => void] => {
 
 import { SyncProgress } from "./SyncProgress"
 import { SyncError } from "./SyncError"
+import { useTheme } from "@/context/ThemeContext"
 
 type SyncState = "idle" | "syncing" | "complete" | "error"
 
 export function SyncStatus() {
+  const { theme } = useTheme();
   const state = createSignal<SyncState>("idle")
   const message = createSignal("Idle")
   const progress = createSignal(0)
@@ -35,15 +37,15 @@ export function SyncStatus() {
   }
 
   return (
-    <box border title="Sync Status" style={{ padding: 1, flexDirection: "column", gap: 1 }}>
+    <box border title="Sync Status" borderColor={theme.border} style={{ padding: 1, flexDirection: "column", gap: 1 }}>
       <box style={{ flexDirection: "row", gap: 1 }}>
-        <text>Status:</text>
-        <text>{message[0]()}</text>
+        <text fg={theme.text}>Status:</text>
+        <text fg={theme.text}>{message[0]()}</text>
       </box>
       <SyncProgress value={progress[0]()} />
       {state[0]() === "error" ? <SyncError message={message[0]()} onRetry={() => toggle()} /> : null}
-      <box border onMouseDown={toggle}>
-        <text>Cycle Status</text>
+      <box border borderColor={theme.border} onMouseDown={toggle}>
+        <text fg={theme.text}>Cycle Status</text>
       </box>
     </box>
   )

src/pages/Settings/VisualizerSettings.tsx

@@ -0,0 +1,164 @@
+/**
+ * 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.
+ */
+
+import { createSignal } from "solid-js";
+import { useKeyboard } from "@opentui/solid";
+import { useAppStore } from "@/stores/app";
+import { useTheme } from "@/context/ThemeContext";
+
+type FocusField = "bars" | "sensitivity" | "noise" | "lowCut" | "highCut";
+
+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(
+          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(
+          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>
+  );
+}

src/stores/app.ts

@@ -1,114 +1,130 @@
-import { createSignal } from "solid-js"
-import { DEFAULT_THEME, THEME_JSON } from "../constants/themes"
-import type { AppSettings, AppState, ThemeColors, ThemeName, ThemeMode, UserPreferences } from "../types/settings"
-import { resolveTheme } from "../utils/theme-resolver"
-import type { ThemeJson } from "../types/theme-schema"
+import { createSignal } from "solid-js";
+import { DEFAULT_THEME, THEME_JSON } from "../constants/themes";
+import type {
+  AppSettings,
+  AppState,
+  ThemeColors,
+  ThemeName,
+  ThemeMode,
+  UserPreferences,
+  VisualizerSettings,
+} from "../types/settings";
+import { resolveTheme } from "../utils/theme-resolver";
+import type { ThemeJson } from "../types/theme-schema";
+import {
+  loadAppStateFromFile,
+  saveAppStateToFile,
+} from "../utils/app-persistence";
 
-const STORAGE_KEY = "podtui_app_state"
+const defaultVisualizerSettings: VisualizerSettings = {
+  bars: 32,
+  sensitivity: 1,
+  noiseReduction: 0.77,
+  lowCutOff: 50,
+  highCutOff: 10000,
+};
 
 const defaultSettings: AppSettings = {
   theme: "system",
   fontSize: 14,
   playbackSpeed: 1,
   downloadPath: "",
-}
+  visualizer: defaultVisualizerSettings,
+};
 
 const defaultPreferences: UserPreferences = {
   showExplicit: false,
   autoDownload: false,
-}
+};
 
 const defaultState: AppState = {
   settings: defaultSettings,
   preferences: defaultPreferences,
   customTheme: DEFAULT_THEME,
-}
-
-const loadState = (): AppState => {
-  if (typeof localStorage === "undefined") return defaultState
-  try {
-    const raw = localStorage.getItem(STORAGE_KEY)
-    if (!raw) return defaultState
-    const parsed = JSON.parse(raw) as Partial<AppState>
-    return {
-      settings: { ...defaultSettings, ...parsed.settings },
-      preferences: { ...defaultPreferences, ...parsed.preferences },
-      customTheme: { ...DEFAULT_THEME, ...parsed.customTheme },
-    }
-  } catch {
-    return defaultState
-  }
-}
-
-const saveState = (state: AppState) => {
-  if (typeof localStorage === "undefined") return
-  try {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(state))
-  } catch {
-    // ignore storage errors
-  }
-}
+};
 
 export function createAppStore() {
-  const [state, setState] = createSignal<AppState>(loadState())
+  // Start with defaults; async load will update once ready
+  const [state, setState] = createSignal<AppState>(defaultState);
+
+  // Fire-and-forget async initialisation
+  const init = async () => {
+    const loaded = await loadAppStateFromFile();
+    setState(loaded);
+  };
+  init();
+
+  const saveState = (next: AppState) => {
+    saveAppStateToFile(next).catch(() => {});
+  };
 
   const updateState = (next: AppState) => {
-    setState(next)
-    saveState(next)
-  }
+    setState(next);
+    saveState(next);
+  };
 
   const updateSettings = (updates: Partial<AppSettings>) => {
     const next = {
       ...state(),
       settings: { ...state().settings, ...updates },
-    }
-    updateState(next)
-  }
+    };
+    updateState(next);
+  };
 
   const updatePreferences = (updates: Partial<UserPreferences>) => {
     const next = {
       ...state(),
       preferences: { ...state().preferences, ...updates },
-    }
-    updateState(next)
-  }
+    };
+    updateState(next);
+  };
 
   const updateCustomTheme = (updates: Partial<ThemeColors>) => {
     const next = {
       ...state(),
       customTheme: { ...state().customTheme, ...updates },
-    }
-    updateState(next)
-  }
+    };
+    updateState(next);
+  };
+
+  const updateVisualizer = (updates: Partial<VisualizerSettings>) => {
+    updateSettings({
+      visualizer: { ...state().settings.visualizer, ...updates },
+    });
+  };
 
   const setTheme = (theme: ThemeName) => {
-    updateSettings({ theme })
-  }
+    updateSettings({ theme });
+  };
 
   const resolveThemeColors = (): ThemeColors => {
-    const theme = state().settings.theme
-    if (theme === "custom") return state().customTheme
-    if (theme === "system") return DEFAULT_THEME
-    const json = THEME_JSON[theme]
-    if (!json) return DEFAULT_THEME
-    return resolveTheme(json as ThemeJson, "dark" as ThemeMode) as unknown as ThemeColors
-  }
+    const theme = state().settings.theme;
+    if (theme === "custom") return state().customTheme;
+    if (theme === "system") return DEFAULT_THEME;
+    const json = THEME_JSON[theme];
+    if (!json) return DEFAULT_THEME;
+    return resolveTheme(
+      json as ThemeJson,
+      "dark" as ThemeMode,
+    ) as unknown as ThemeColors;
+  };
 
   return {
     state,
     updateSettings,
     updatePreferences,
     updateCustomTheme,
+    updateVisualizer,
     setTheme,
     resolveTheme: resolveThemeColors,
-  }
+  };
 }
 
-let appStoreInstance: ReturnType<typeof createAppStore> | null = null
+let appStoreInstance: ReturnType<typeof createAppStore> | null = null;
 
 export function useAppStore() {
   if (!appStoreInstance) {
-    appStoreInstance = createAppStore()
+    appStoreInstance = createAppStore();
   }
-  return appStoreInstance
+  return appStoreInstance;
 }

src/stores/audio-nav.ts

@@ -0,0 +1,126 @@
+/**
+ * Audio navigation store for tracking episode order and position
+ * Persists the current episode context (source type, index, and podcastId)
+ */
+
+import { createSignal } from "solid-js";
+import {
+  loadAudioNavFromFile,
+  saveAudioNavToFile,
+} from "../utils/app-persistence";
+
+/** Source type for audio navigation */
+export enum AudioSource {
+  FEED = "feed",
+  MY_SHOWS = "my_shows",
+  SEARCH = "search",
+}
+
+/** Audio navigation state */
+export interface AudioNavState {
+  /** Current source type */
+  source: AudioSource;
+  /** Index of current episode in the ordered list */
+  currentIndex: number;
+  /** Podcast ID for My Shows source */
+  podcastId?: string;
+  /** Timestamp when navigation state was last saved */
+  lastUpdated: Date;
+}
+
+/** Default navigation state */
+const defaultNavState: AudioNavState = {
+  source: AudioSource.FEED,
+  currentIndex: 0,
+  lastUpdated: new Date(),
+};
+
+/** Create audio navigation store */
+export function createAudioNavStore() {
+  const [navState, setNavState] = createSignal<AudioNavState>(defaultNavState);
+
+  /** Persist current navigation state to file (fire-and-forget) */
+  function persist(): void {
+    saveAudioNavToFile(navState()).catch(() => {});
+  }
+
+  /** Load navigation state from file */
+  async function init(): Promise<void> {
+    const loaded = await loadAudioNavFromFile<AudioNavState>();
+    if (loaded) {
+      setNavState(loaded);
+    }
+  }
+
+  /** Fire-and-forget initialization */
+  init();
+
+  return {
+    /** Get current navigation state */
+    get state(): AudioNavState {
+      return navState();
+    },
+
+    /** Update source type */
+    setSource: (source: AudioSource, podcastId?: string) => {
+      setNavState((prev) => ({
+        ...prev,
+        source,
+        podcastId,
+        lastUpdated: new Date(),
+      }));
+      persist();
+    },
+
+    /** Move to next episode */
+    next: (currentIndex: number) => {
+      setNavState((prev) => ({
+        ...prev,
+        currentIndex,
+        lastUpdated: new Date(),
+      }));
+      persist();
+    },
+
+    /** Move to previous episode */
+    prev: (currentIndex: number) => {
+      setNavState((prev) => ({
+        ...prev,
+        currentIndex,
+        lastUpdated: new Date(),
+      }));
+      persist();
+    },
+
+    /** Reset to default state */
+    reset: () => {
+      setNavState(defaultNavState);
+      persist();
+    },
+
+    /** Get current index */
+    getCurrentIndex: (): number => {
+      return navState().currentIndex;
+    },
+
+    /** Get current source */
+    getSource: (): AudioSource => {
+      return navState().source;
+    },
+
+    /** Get current podcast ID */
+    getPodcastId: (): string | undefined => {
+      return navState().podcastId;
+    },
+  };
+}
+
+/** Singleton instance */
+let audioNavInstance: ReturnType<typeof createAudioNavStore> | null = null;
+
+export function useAudioNavStore() {
+  if (!audioNavInstance) {
+    audioNavInstance = createAudioNavStore();
+  }
+  return audioNavInstance;
+}

src/stores/discover.ts

@@ -146,7 +146,7 @@ export function createDiscoverStore() {
 
     return podcasts().filter((p) => {
       const cats = p.categories?.map((c) => c.toLowerCase()) ?? []
-      return cats.some((c) => c.includes(category.replace("-", " ")))
+      return cats.some((c) => c.includes(category.toLowerCase().replace("-", " ")))
     })
   }
 

src/stores/download.ts

@@ -0,0 +1,360 @@
+/**
+ * Download store for PodTUI
+ *
+ * Manages per-episode download state with SolidJS signals, persists download
+ * metadata to downloads.json in XDG_CONFIG_HOME, and provides a sequential
+ * download queue (max 2 concurrent).
+ */
+
+import { createSignal } from "solid-js"
+import { DownloadStatus } from "../types/episode"
+import type { DownloadedEpisode } from "../types/episode"
+import type { Episode } from "../types/episode"
+import { downloadEpisode } from "../utils/episode-downloader"
+import { ensureConfigDir, getConfigFilePath } from "../utils/config-dir"
+import { backupConfigFile } from "../utils/config-backup"
+
+const DOWNLOADS_FILE = "downloads.json"
+const MAX_CONCURRENT = 2
+
+/** Serializable download record for persistence */
+interface DownloadRecord {
+  episodeId: string
+  feedId: string
+  status: DownloadStatus
+  filePath: string | null
+  downloadedAt: string | null
+  fileSize: number
+  error: string | null
+  audioUrl: string
+  episodeTitle: string
+}
+
+/** Queue item for pending downloads */
+interface QueueItem {
+  episodeId: string
+  feedId: string
+  audioUrl: string
+  episodeTitle: string
+}
+
+/** Create download store */
+export function createDownloadStore() {
+  const [downloads, setDownloads] = createSignal<Map<string, DownloadedEpisode>>(new Map())
+  const [queue, setQueue] = createSignal<QueueItem[]>([])
+  const [activeCount, setActiveCount] = createSignal(0)
+
+  /** Active AbortControllers keyed by episodeId */
+  const abortControllers = new Map<string, AbortController>()
+
+  // Load persisted downloads on init
+  ;(async () => {
+    const loaded = await loadDownloads()
+    if (loaded.size > 0) setDownloads(loaded)
+    // Resume any queued downloads from previous session
+    resumeIncomplete()
+  })()
+
+  /** Load downloads from JSON file */
+  async function loadDownloads(): Promise<Map<string, DownloadedEpisode>> {
+    try {
+      const filePath = getConfigFilePath(DOWNLOADS_FILE)
+      const file = Bun.file(filePath)
+      if (!(await file.exists())) return new Map()
+
+      const raw: DownloadRecord[] = await file.json()
+      if (!Array.isArray(raw)) return new Map()
+
+      const map = new Map<string, DownloadedEpisode>()
+      for (const rec of raw) {
+        map.set(rec.episodeId, {
+          episodeId: rec.episodeId,
+          feedId: rec.feedId,
+          status: rec.status === DownloadStatus.DOWNLOADING ? DownloadStatus.QUEUED : rec.status,
+          progress: rec.status === DownloadStatus.COMPLETED ? 100 : 0,
+          filePath: rec.filePath,
+          downloadedAt: rec.downloadedAt ? new Date(rec.downloadedAt) : null,
+          speed: 0,
+          fileSize: rec.fileSize,
+          error: rec.error,
+        })
+      }
+      return map
+    } catch {
+      return new Map()
+    }
+  }
+
+  /** Persist downloads to JSON file */
+  async function saveDownloads(): Promise<void> {
+    try {
+      await ensureConfigDir()
+      await backupConfigFile(DOWNLOADS_FILE)
+      const map = downloads()
+      const records: DownloadRecord[] = []
+      for (const [, dl] of map) {
+        // Find the audioUrl from queue or use empty string
+        const qItem = queue().find((q) => q.episodeId === dl.episodeId)
+        records.push({
+          episodeId: dl.episodeId,
+          feedId: dl.feedId,
+          status: dl.status,
+          filePath: dl.filePath,
+          downloadedAt: dl.downloadedAt?.toISOString() ?? null,
+          fileSize: dl.fileSize,
+          error: dl.error,
+          audioUrl: qItem?.audioUrl ?? "",
+          episodeTitle: qItem?.episodeTitle ?? "",
+        })
+      }
+      const filePath = getConfigFilePath(DOWNLOADS_FILE)
+      await Bun.write(filePath, JSON.stringify(records, null, 2))
+    } catch {
+      // Silently ignore write errors
+    }
+  }
+
+  /** Resume incomplete downloads from a previous session */
+  function resumeIncomplete(): void {
+    const map = downloads()
+    for (const [, dl] of map) {
+      if (dl.status === DownloadStatus.QUEUED) {
+        // Re-queue — but we lack audioUrl from persistence alone.
+        // These will sit as QUEUED until the user re-triggers them.
+      }
+    }
+  }
+
+  /** Update a single download entry and trigger reactivity */
+  function updateDownload(episodeId: string, updates: Partial<DownloadedEpisode>): void {
+    setDownloads((prev) => {
+      const next = new Map(prev)
+      const existing = next.get(episodeId)
+      if (existing) {
+        next.set(episodeId, { ...existing, ...updates })
+      }
+      return next
+    })
+  }
+
+  /** Process the download queue — starts downloads up to MAX_CONCURRENT */
+  function processQueue(): void {
+    const current = activeCount()
+    const q = queue()
+
+    if (current >= MAX_CONCURRENT || q.length === 0) return
+
+    const slotsAvailable = MAX_CONCURRENT - current
+    const toStart = q.slice(0, slotsAvailable)
+
+    // Remove started items from queue
+    if (toStart.length > 0) {
+      setQueue((prev) => prev.slice(toStart.length))
+    }
+
+    for (const item of toStart) {
+      executeDownload(item)
+    }
+  }
+
+  /** Execute a single download */
+  async function executeDownload(item: QueueItem): Promise<void> {
+    const controller = new AbortController()
+    abortControllers.set(item.episodeId, controller)
+    setActiveCount((c) => c + 1)
+
+    updateDownload(item.episodeId, {
+      status: DownloadStatus.DOWNLOADING,
+      progress: 0,
+      speed: 0,
+      error: null,
+    })
+
+    const result = await downloadEpisode(
+      item.audioUrl,
+      item.episodeTitle,
+      item.feedId,
+      (progress) => {
+        updateDownload(item.episodeId, {
+          progress: progress.percent >= 0 ? progress.percent : 0,
+          speed: progress.speed,
+          fileSize: progress.totalBytes,
+        })
+      },
+      controller.signal,
+    )
+
+    abortControllers.delete(item.episodeId)
+    setActiveCount((c) => Math.max(0, c - 1))
+
+    if (result.success) {
+      updateDownload(item.episodeId, {
+        status: DownloadStatus.COMPLETED,
+        progress: 100,
+        filePath: result.filePath,
+        fileSize: result.fileSize,
+        downloadedAt: new Date(),
+        speed: 0,
+        error: null,
+      })
+    } else {
+      updateDownload(item.episodeId, {
+        status: DownloadStatus.FAILED,
+        speed: 0,
+        error: result.error ?? "Unknown error",
+      })
+    }
+
+    saveDownloads().catch(() => {})
+    // Process next items in queue
+    processQueue()
+  }
+
+  /** Get download status for an episode */
+  const getDownloadStatus = (episodeId: string): DownloadStatus => {
+    return downloads().get(episodeId)?.status ?? DownloadStatus.NONE
+  }
+
+  /** Get download progress for an episode (0-100) */
+  const getDownloadProgress = (episodeId: string): number => {
+    return downloads().get(episodeId)?.progress ?? 0
+  }
+
+  /** Get full download info for an episode */
+  const getDownload = (episodeId: string): DownloadedEpisode | undefined => {
+    return downloads().get(episodeId)
+  }
+
+  /** Get the local file path for a completed download */
+  const getDownloadedFilePath = (episodeId: string): string | null => {
+    const dl = downloads().get(episodeId)
+    if (dl?.status === DownloadStatus.COMPLETED && dl.filePath) {
+      return dl.filePath
+    }
+    return null
+  }
+
+  /** Start downloading an episode */
+  const startDownload = (episode: Episode, feedId: string): void => {
+    const existing = downloads().get(episode.id)
+    if (existing?.status === DownloadStatus.DOWNLOADING || existing?.status === DownloadStatus.QUEUED) {
+      return // Already downloading or queued
+    }
+
+    // Create download entry
+    const entry: DownloadedEpisode = {
+      episodeId: episode.id,
+      feedId,
+      status: DownloadStatus.QUEUED,
+      progress: 0,
+      filePath: null,
+      downloadedAt: null,
+      speed: 0,
+      fileSize: episode.fileSize ?? 0,
+      error: null,
+    }
+
+    setDownloads((prev) => {
+      const next = new Map(prev)
+      next.set(episode.id, entry)
+      return next
+    })
+
+    // Add to queue
+    const queueItem: QueueItem = {
+      episodeId: episode.id,
+      feedId,
+      audioUrl: episode.audioUrl,
+      episodeTitle: episode.title,
+    }
+    setQueue((prev) => [...prev, queueItem])
+
+    saveDownloads().catch(() => {})
+    processQueue()
+  }
+
+  /** Cancel a download */
+  const cancelDownload = (episodeId: string): void => {
+    // Abort active download
+    const controller = abortControllers.get(episodeId)
+    if (controller) {
+      controller.abort()
+      abortControllers.delete(episodeId)
+    }
+
+    // Remove from queue
+    setQueue((prev) => prev.filter((q) => q.episodeId !== episodeId))
+
+    // Update status
+    updateDownload(episodeId, {
+      status: DownloadStatus.NONE,
+      progress: 0,
+      speed: 0,
+      error: null,
+    })
+
+    saveDownloads().catch(() => {})
+  }
+
+  /** Remove a completed download (delete file and metadata) */
+  const removeDownload = async (episodeId: string): Promise<void> => {
+    const dl = downloads().get(episodeId)
+    if (dl?.filePath) {
+      try {
+        const { unlink } = await import("fs/promises")
+        await unlink(dl.filePath)
+      } catch {
+        // File may already be gone
+      }
+    }
+
+    setDownloads((prev) => {
+      const next = new Map(prev)
+      next.delete(episodeId)
+      return next
+    })
+
+    saveDownloads().catch(() => {})
+  }
+
+  /** Get all downloads as an array */
+  const getAllDownloads = (): DownloadedEpisode[] => {
+    return Array.from(downloads().values())
+  }
+
+  /** Get the current queue */
+  const getQueue = (): QueueItem[] => {
+    return queue()
+  }
+
+  /** Get count of active downloads */
+  const getActiveCount = (): number => {
+    return activeCount()
+  }
+
+  return {
+    // Getters
+    getDownloadStatus,
+    getDownloadProgress,
+    getDownload,
+    getDownloadedFilePath,
+    getAllDownloads,
+    getQueue,
+    getActiveCount,
+
+    // Actions
+    startDownload,
+    cancelDownload,
+    removeDownload,
+  }
+}
+
+/** Singleton download store */
+let downloadStoreInstance: ReturnType<typeof createDownloadStore> | null = null
+
+export function useDownloadStore() {
+  if (!downloadStoreInstance) {
+    downloadStoreInstance = createDownloadStore()
+  }
+  return downloadStoreInstance
+}

src/stores/feed.ts

@@ -3,399 +3,452 @@
  * Manages feed data, sources, and filtering
  */
 
-import { createSignal } from "solid-js"
-import { FeedVisibility } from "../types/feed"
-import type { Feed, FeedFilter, FeedSortField } from "../types/feed"
-import type { Podcast } from "../types/podcast"
-import type { Episode, EpisodeStatus } from "../types/episode"
-import type { PodcastSource, SourceType } from "../types/source"
-import { DEFAULT_SOURCES } from "../types/source"
+import { createSignal } from "solid-js";
+import { FeedVisibility } from "../types/feed";
+import type { Feed, FeedFilter, FeedSortField } from "../types/feed";
+import type { Podcast } from "../types/podcast";
+import type { Episode, EpisodeStatus } from "../types/episode";
+import type { PodcastSource, SourceType } from "../types/source";
+import { DEFAULT_SOURCES } from "../types/source";
+import { parseRSSFeed } from "../api/rss-parser";
+import {
+  loadFeedsFromFile,
+  saveFeedsToFile,
+  loadSourcesFromFile,
+  saveSourcesToFile,
+} from "../utils/feeds-persistence";
+import { useDownloadStore } from "./download";
+import { DownloadStatus } from "../types/episode";
+import { useAuthStore } from "./auth";
 
-/** Storage keys */
-const STORAGE_KEYS = {
-  feeds: "podtui_feeds",
-  sources: "podtui_sources",
-}
+/** Max episodes to load per page/chunk */
+const MAX_EPISODES_REFRESH = 50;
 
-/** Create initial mock feeds for demonstration */
-function createMockFeeds(): Feed[] {
-  const now = new Date()
-  return [
-    {
-      id: "1",
-      podcast: {
-        id: "p1",
-        title: "The Daily Tech News",
-        description: "Your daily dose of technology news and insights from around the world. We cover the latest in AI, software, hardware, and digital culture.",
-        feedUrl: "https://example.com/tech.rss",
-        author: "Tech Media Inc",
-        categories: ["Technology", "News"],
-        lastUpdated: now,
-        isSubscribed: true,
-      },
-      episodes: createMockEpisodes("p1", 25),
-      visibility: "public" as FeedVisibility,
-      sourceId: "rss",
-      lastUpdated: now,
-      isPinned: true,
-    },
-    {
-      id: "2",
-      podcast: {
-        id: "p2",
-        title: "Code & Coffee",
-        description: "Weekly discussions about programming, software development, and the developer lifestyle. Best enjoyed with your morning coffee.",
-        feedUrl: "https://example.com/code.rss",
-        author: "Developer Collective",
-        categories: ["Technology", "Programming"],
-        lastUpdated: new Date(Date.now() - 86400000),
-        isSubscribed: true,
-      },
-      episodes: createMockEpisodes("p2", 50),
-      visibility: "private" as FeedVisibility,
-      sourceId: "rss",
-      lastUpdated: new Date(Date.now() - 86400000),
-      isPinned: false,
-    },
-    {
-      id: "3",
-      podcast: {
-        id: "p3",
-        title: "Science Explained",
-        description: "Breaking down complex scientific topics for curious minds. From quantum physics to biology, we make science accessible.",
-        feedUrl: "https://example.com/science.rss",
-        author: "Science Network",
-        categories: ["Science", "Education"],
-        lastUpdated: new Date(Date.now() - 172800000),
-        isSubscribed: true,
-      },
-      episodes: createMockEpisodes("p3", 120),
-      visibility: "public" as FeedVisibility,
-      sourceId: "itunes",
-      lastUpdated: new Date(Date.now() - 172800000),
-      isPinned: false,
-    },
-    {
-      id: "4",
-      podcast: {
-        id: "p4",
-        title: "History Uncovered",
-        description: "Deep dives into fascinating historical events and figures you never learned about in school.",
-        feedUrl: "https://example.com/history.rss",
-        author: "History Channel",
-        categories: ["History", "Education"],
-        lastUpdated: new Date(Date.now() - 259200000),
-        isSubscribed: true,
-      },
-      episodes: createMockEpisodes("p4", 80),
-      visibility: "public" as FeedVisibility,
-      sourceId: "rss",
-      lastUpdated: new Date(Date.now() - 259200000),
-      isPinned: true,
-    },
-    {
-      id: "5",
-      podcast: {
-        id: "p5",
-        title: "Startup Stories",
-        description: "Founders share their journey from idea to exit. Learn from their successes and failures.",
-        feedUrl: "https://example.com/startup.rss",
-        author: "Entrepreneur Media",
-        categories: ["Business", "Technology"],
-        lastUpdated: new Date(Date.now() - 345600000),
-        isSubscribed: true,
-      },
-      episodes: createMockEpisodes("p5", 45),
-      visibility: "private" as FeedVisibility,
-      sourceId: "itunes",
-      lastUpdated: new Date(Date.now() - 345600000),
-      isPinned: false,
-    },
-  ]
-}
+/** Max episodes to fetch on initial subscribe */
+const MAX_EPISODES_SUBSCRIBE = 20;
 
-/** Create mock episodes for a podcast */
-function createMockEpisodes(podcastId: string, count: number): Episode[] {
-  const episodes: Episode[] = []
-  for (let i = 0; i < count; i++) {
-    episodes.push({
-      id: `${podcastId}-ep-${i + 1}`,
-      podcastId,
-      title: `Episode ${count - i}: Sample Episode Title`,
-      description: `This is the description for episode ${count - i}. It contains interesting content about various topics.`,
-      audioUrl: `https://example.com/audio/${podcastId}/${i + 1}.mp3`,
-      duration: 1800 + Math.random() * 3600, // 30-90 minutes
-      pubDate: new Date(Date.now() - i * 604800000), // Weekly episodes
-      episodeNumber: count - i,
-    })
-  }
-  return episodes
-}
+/** Cache of all parsed episodes per feed (feedId -> Episode[]) */
+const fullEpisodeCache = new Map<string, Episode[]>();
 
-/** Load feeds from localStorage */
-function loadFeeds(): Feed[] {
-  if (typeof localStorage === "undefined") {
-    return createMockFeeds()
-  }
+/** Track how many episodes are currently loaded per feed */
+const episodeLoadCount = new Map<string, number>();
 
-  try {
-    const stored = localStorage.getItem(STORAGE_KEYS.feeds)
-    if (stored) {
-      const parsed = JSON.parse(stored)
-      // Convert date strings
-      return parsed.map((feed: Feed) => ({
-        ...feed,
-        lastUpdated: new Date(feed.lastUpdated),
-        podcast: {
-          ...feed.podcast,
-          lastUpdated: new Date(feed.podcast.lastUpdated),
-        },
-        episodes: feed.episodes.map((ep: Episode) => ({
-          ...ep,
-          pubDate: new Date(ep.pubDate),
-        })),
-      }))
-    }
-  } catch {
-    // Ignore errors
-  }
-
-  return createMockFeeds()
-}
-
-/** Save feeds to localStorage */
+/** Save feeds to file (async, fire-and-forget) */
 function saveFeeds(feeds: Feed[]): void {
-  if (typeof localStorage === "undefined") return
-  try {
-    localStorage.setItem(STORAGE_KEYS.feeds, JSON.stringify(feeds))
-  } catch {
-    // Ignore errors
-  }
+  saveFeedsToFile(feeds).catch(() => {});
 }
 
-/** Load sources from localStorage */
-function loadSources(): PodcastSource[] {
-  if (typeof localStorage === "undefined") {
-    return [...DEFAULT_SOURCES]
-  }
-
-  try {
-    const stored = localStorage.getItem(STORAGE_KEYS.sources)
-    if (stored) {
-      return JSON.parse(stored)
-    }
-  } catch {
-    // Ignore errors
-  }
-
-  return [...DEFAULT_SOURCES]
-}
-
-/** Save sources to localStorage */
+/** Save sources to file (async, fire-and-forget) */
 function saveSources(sources: PodcastSource[]): void {
-  if (typeof localStorage === "undefined") return
-  try {
-    localStorage.setItem(STORAGE_KEYS.sources, JSON.stringify(sources))
-  } catch {
-    // Ignore errors
-  }
+  saveSourcesToFile(sources).catch(() => {});
 }
 
 /** Create feed store */
 export function createFeedStore() {
-  const [feeds, setFeeds] = createSignal<Feed[]>(loadFeeds())
-  const [sources, setSources] = createSignal<PodcastSource[]>(loadSources())
+  const [feeds, setFeeds] = createSignal<Feed[]>([]);
+  const [sources, setSources] = createSignal<PodcastSource[]>([
+    ...DEFAULT_SOURCES,
+  ]);
   const [filter, setFilter] = createSignal<FeedFilter>({
     visibility: "all",
     sortBy: "updated" as FeedSortField,
     sortDirection: "desc",
-  })
-  const [selectedFeedId, setSelectedFeedId] = createSignal<string | null>(null)
+  });
+  const [selectedFeedId, setSelectedFeedId] = createSignal<string | null>(null);
+  const [isLoadingMore, setIsLoadingMore] = createSignal(false);
+  const [isLoadingFeeds, setIsLoadingFeeds] = createSignal(false);
 
   /** Get filtered and sorted feeds */
   const getFilteredFeeds = (): Feed[] => {
-    let result = [...feeds()]
-    const f = filter()
+    let result = [...feeds()];
+    const f = filter();
+    const authStore = useAuthStore();
 
     // Filter by visibility
     if (f.visibility && f.visibility !== "all") {
-      result = result.filter((feed) => feed.visibility === f.visibility)
+      result = result.filter((feed) => feed.visibility === f.visibility);
+    } else if (f.visibility === "all") {
+      // Only show private feeds if authenticated
+      result = result.filter((feed) => feed.visibility === FeedVisibility.PUBLIC || authStore.isAuthenticated);
     }
 
     // Filter by source
     if (f.sourceId) {
-      result = result.filter((feed) => feed.sourceId === f.sourceId)
+      result = result.filter((feed) => feed.sourceId === f.sourceId);
     }
 
     // Filter by pinned
     if (f.pinnedOnly) {
-      result = result.filter((feed) => feed.isPinned)
+      result = result.filter((feed) => feed.isPinned);
     }
 
     // Filter by search query
     if (f.searchQuery) {
-      const query = f.searchQuery.toLowerCase()
+      const query = f.searchQuery.toLowerCase();
       result = result.filter(
         (feed) =>
           feed.podcast.title.toLowerCase().includes(query) ||
           feed.customName?.toLowerCase().includes(query) ||
-          feed.podcast.description?.toLowerCase().includes(query)
-      )
+          feed.podcast.description?.toLowerCase().includes(query),
+      );
     }
 
     // Sort by selected field
-    const sortDir = f.sortDirection === "asc" ? 1 : -1
+    const sortDir = f.sortDirection === "asc" ? 1 : -1;
     result.sort((a, b) => {
       switch (f.sortBy) {
         case "title":
-          return sortDir * (a.customName || a.podcast.title).localeCompare(b.customName || b.podcast.title)
+          return (
+            sortDir *
+            (a.customName || a.podcast.title).localeCompare(
+              b.customName || b.podcast.title,
+            )
+          );
         case "episodeCount":
-          return sortDir * (a.episodes.length - b.episodes.length)
+          return sortDir * (a.episodes.length - b.episodes.length);
         case "latestEpisode":
-          const aLatest = a.episodes[0]?.pubDate?.getTime() || 0
-          const bLatest = b.episodes[0]?.pubDate?.getTime() || 0
-          return sortDir * (aLatest - bLatest)
+          const aLatest = a.episodes[0]?.pubDate?.getTime() || 0;
+          const bLatest = b.episodes[0]?.pubDate?.getTime() || 0;
+          return sortDir * (aLatest - bLatest);
         case "updated":
         default:
-          return sortDir * (a.lastUpdated.getTime() - b.lastUpdated.getTime())
+          return sortDir * (a.lastUpdated.getTime() - b.lastUpdated.getTime());
       }
-    })
+    });
 
     // Pinned feeds always first
     result.sort((a, b) => {
-      if (a.isPinned && !b.isPinned) return -1
-      if (!a.isPinned && b.isPinned) return 1
-      return 0
-    })
+      if (a.isPinned && !b.isPinned) return -1;
+      if (!a.isPinned && b.isPinned) return 1;
+      return 0;
+    });
 
-    return result
-  }
+    return result;
+  };
 
   /** Get episodes in reverse chronological order across all feeds */
-  const getAllEpisodesChronological = (): Array<{ episode: Episode; feed: Feed }> => {
-    const allEpisodes: Array<{ episode: Episode; feed: Feed }> = []
-    
+  const getAllEpisodesChronological = (): Array<{
+    episode: Episode;
+    feed: Feed;
+  }> => {
+    const allEpisodes: Array<{ episode: Episode; feed: Feed }> = [];
+
     for (const feed of feeds()) {
       for (const episode of feed.episodes) {
-        allEpisodes.push({ episode, feed })
+        allEpisodes.push({ episode, feed });
       }
     }
 
     // Sort by publication date (newest first)
-    allEpisodes.sort((a, b) => b.episode.pubDate.getTime() - a.episode.pubDate.getTime())
+    allEpisodes.sort(
+      (a, b) => b.episode.pubDate.getTime() - a.episode.pubDate.getTime(),
+    );
 
-    return allEpisodes
-  }
+    return allEpisodes;
+  };
 
-  /** Add a new feed */
-  const addFeed = (podcast: Podcast, sourceId: string, visibility: FeedVisibility = FeedVisibility.PUBLIC) => {
+  /** Sort episodes in reverse chronological order (newest first) */
+  const sortEpisodesReverseChronological = (episodes: Episode[]): Episode[] => {
+    return [...episodes].sort(
+      (a, b) => b.pubDate.getTime() - a.pubDate.getTime(),
+    );
+  };
+
+  /** Fetch latest episodes from an RSS feed URL, caching all parsed episodes */
+  const fetchEpisodes = async (
+    feedUrl: string,
+    limit: number,
+    feedId?: string,
+  ): Promise<Episode[]> => {
+    try {
+      const response = await fetch(feedUrl, {
+        headers: {
+          "Accept-Encoding": "identity",
+          Accept: "application/rss+xml, application/xml, text/xml, */*",
+        },
+      });
+      if (!response.ok) return [];
+      const xml = await response.text();
+      const parsed = parseRSSFeed(xml, feedUrl);
+      const allEpisodes = sortEpisodesReverseChronological(parsed.episodes);
+
+      // Cache all parsed episodes for pagination
+      if (feedId) {
+        fullEpisodeCache.set(feedId, allEpisodes);
+        episodeLoadCount.set(feedId, Math.min(limit, allEpisodes.length));
+      }
+
+      return allEpisodes.slice(0, limit);
+    } catch {
+      return [];
+    }
+  };
+
+  /** Add a new feed and auto-fetch latest 20 episodes */
+  const addFeed = async (
+    podcast: Podcast,
+    sourceId: string,
+    visibility: FeedVisibility = FeedVisibility.PUBLIC,
+  ) => {
+    const feedId = crypto.randomUUID();
+    const episodes = await fetchEpisodes(
+      podcast.feedUrl,
+      MAX_EPISODES_SUBSCRIBE,
+      feedId,
+    );
     const newFeed: Feed = {
-      id: crypto.randomUUID(),
+      id: feedId,
       podcast,
-      episodes: [],
+      episodes,
       visibility,
       sourceId,
       lastUpdated: new Date(),
       isPinned: false,
-    }
+    };
     setFeeds((prev) => {
-      const updated = [...prev, newFeed]
-      saveFeeds(updated)
-      return updated
-    })
-    return newFeed
-  }
+      const updated = [...prev, newFeed];
+      saveFeeds(updated);
+      return updated;
+    });
+    return newFeed;
+  };
+
+  /** Auto-download newest episodes for a feed */
+  const autoDownloadEpisodes = (
+    feedId: string,
+    newEpisodes: Episode[],
+    count: number,
+  ) => {
+    try {
+      const dlStore = useDownloadStore();
+      // Sort by pubDate descending (newest first)
+      const sorted = [...newEpisodes].sort(
+        (a, b) => b.pubDate.getTime() - a.pubDate.getTime(),
+      );
+      // count = 0 means download all new episodes
+      const toDownload = count > 0 ? sorted.slice(0, count) : sorted;
+      for (const ep of toDownload) {
+        const status = dlStore.getDownloadStatus(ep.id);
+        if (
+          status === DownloadStatus.NONE ||
+          status === DownloadStatus.FAILED
+        ) {
+          dlStore.startDownload(ep, feedId);
+        }
+      }
+    } catch {
+      // Download store may not be available yet
+    }
+  };
+
+  /** Refresh a single feed - re-fetch latest 50 episodes */
+  const refreshFeed = async (feedId: string) => {
+    const feed = getFeed(feedId);
+    if (!feed) return;
+    const oldEpisodeIds = new Set(feed.episodes.map((e) => e.id));
+    const episodes = await fetchEpisodes(
+      feed.podcast.feedUrl,
+      MAX_EPISODES_REFRESH,
+      feedId,
+    );
+    setFeeds((prev) => {
+      const updated = prev.map((f) =>
+        f.id === feedId ? { ...f, episodes, lastUpdated: new Date() } : f,
+      );
+      saveFeeds(updated);
+      return updated;
+    });
+
+    // Auto-download new episodes if enabled for this feed
+    if (feed.autoDownload) {
+      const newEpisodes = episodes.filter((e) => !oldEpisodeIds.has(e.id));
+      if (newEpisodes.length > 0) {
+        autoDownloadEpisodes(feedId, newEpisodes, feed.autoDownloadCount ?? 0);
+      }
+    }
+  };
+
+  /** Refresh all feeds */
+  const refreshAllFeeds = async () => {
+    setIsLoadingFeeds(true);
+    try {
+      const currentFeeds = feeds();
+      for (const feed of currentFeeds) {
+        await refreshFeed(feed.id);
+      }
+    } finally {
+      setIsLoadingFeeds(false);
+    }
+  };
+
+  (async () => {
+    const loadedFeeds = await loadFeedsFromFile();
+    if (loadedFeeds.length > 0) setFeeds(loadedFeeds);
+    const loadedSources = await loadSourcesFromFile<PodcastSource>();
+    if (loadedSources && loadedSources.length > 0) setSources(loadedSources);
+    await refreshAllFeeds();
+  })();
 
   /** Remove a feed */
   const removeFeed = (feedId: string) => {
+    fullEpisodeCache.delete(feedId);
+    episodeLoadCount.delete(feedId);
     setFeeds((prev) => {
-      const updated = prev.filter((f) => f.id !== feedId)
-      saveFeeds(updated)
-      return updated
-    })
-  }
+      const updated = prev.filter((f) => f.id !== feedId);
+      saveFeeds(updated);
+      return updated;
+    });
+  };
 
   /** Update a feed */
   const updateFeed = (feedId: string, updates: Partial<Feed>) => {
     setFeeds((prev) => {
       const updated = prev.map((f) =>
-        f.id === feedId ? { ...f, ...updates, lastUpdated: new Date() } : f
-      )
-      saveFeeds(updated)
-      return updated
-    })
-  }
+        f.id === feedId ? { ...f, ...updates, lastUpdated: new Date() } : f,
+      );
+      saveFeeds(updated);
+      return updated;
+    });
+  };
 
   /** Toggle feed pinned status */
   const togglePinned = (feedId: string) => {
     setFeeds((prev) => {
       const updated = prev.map((f) =>
-        f.id === feedId ? { ...f, isPinned: !f.isPinned } : f
-      )
-      saveFeeds(updated)
-      return updated
-    })
-  }
+        f.id === feedId ? { ...f, isPinned: !f.isPinned } : f,
+      );
+      saveFeeds(updated);
+      return updated;
+    });
+  };
 
   /** Add a source */
   const addSource = (source: Omit<PodcastSource, "id">) => {
     const newSource: PodcastSource = {
       ...source,
       id: crypto.randomUUID(),
-    }
+    };
     setSources((prev) => {
-      const updated = [...prev, newSource]
-      saveSources(updated)
-      return updated
-    })
-    return newSource
-  }
+      const updated = [...prev, newSource];
+      saveSources(updated);
+      return updated;
+    });
+    return newSource;
+  };
 
   /** Update a source */
   const updateSource = (sourceId: string, updates: Partial<PodcastSource>) => {
     setSources((prev) => {
       const updated = prev.map((source) =>
-        source.id === sourceId ? { ...source, ...updates } : source
-      )
-      saveSources(updated)
-      return updated
-    })
-  }
+        source.id === sourceId ? { ...source, ...updates } : source,
+      );
+      saveSources(updated);
+      return updated;
+    });
+  };
 
   /** Remove a source */
   const removeSource = (sourceId: string) => {
     // Don't remove default sources
-    if (sourceId === "itunes" || sourceId === "rss") return false
-    
+    if (sourceId === "itunes" || sourceId === "rss") return false;
+
     setSources((prev) => {
-      const updated = prev.filter((s) => s.id !== sourceId)
-      saveSources(updated)
-      return updated
-    })
-    return true
-  }
+      const updated = prev.filter((s) => s.id !== sourceId);
+      saveSources(updated);
+      return updated;
+    });
+    return true;
+  };
 
   /** Toggle source enabled status */
   const toggleSource = (sourceId: string) => {
     setSources((prev) => {
       const updated = prev.map((s) =>
-        s.id === sourceId ? { ...s, enabled: !s.enabled } : s
-      )
-      saveSources(updated)
-      return updated
-    })
-  }
+        s.id === sourceId ? { ...s, enabled: !s.enabled } : s,
+      );
+      saveSources(updated);
+      return updated;
+    });
+  };
 
   /** Get feed by ID */
   const getFeed = (feedId: string): Feed | undefined => {
-    return feeds().find((f) => f.id === feedId)
-  }
+    return feeds().find((f) => f.id === feedId);
+  };
 
   /** Get selected feed */
   const getSelectedFeed = (): Feed | undefined => {
-    const id = selectedFeedId()
-    return id ? getFeed(id) : undefined
-  }
+    const id = selectedFeedId();
+    return id ? getFeed(id) : undefined;
+  };
+
+  /** Check if a feed has more episodes available beyond what's currently loaded */
+  const hasMoreEpisodes = (feedId: string): boolean => {
+    const cached = fullEpisodeCache.get(feedId);
+    if (!cached) return false;
+    const loaded = episodeLoadCount.get(feedId) ?? 0;
+    return loaded < cached.length;
+  };
+
+  /** Load the next chunk of episodes for a feed from the cache.
+   *  If no cache exists (e.g. app restart), re-fetches from the RSS feed. */
+  const loadMoreEpisodes = async (feedId: string) => {
+    if (isLoadingMore()) return;
+    const feed = getFeed(feedId);
+    if (!feed) return;
+
+    setIsLoadingMore(true);
+    try {
+      let cached = fullEpisodeCache.get(feedId);
+
+      // If no cache, re-fetch and parse the full feed
+      if (!cached) {
+        const response = await fetch(feed.podcast.feedUrl, {
+          headers: {
+            "Accept-Encoding": "identity",
+            Accept: "application/rss+xml, application/xml, text/xml, */*",
+          },
+        });
+        if (!response.ok) return;
+        const xml = await response.text();
+        const parsed = parseRSSFeed(xml, feed.podcast.feedUrl);
+        cached = parsed.episodes;
+        fullEpisodeCache.set(feedId, cached);
+        // Set current load count to match what's already displayed
+        episodeLoadCount.set(feedId, feed.episodes.length);
+      }
+
+      const currentCount = episodeLoadCount.get(feedId) ?? feed.episodes.length;
+      const newCount = Math.min(
+        currentCount + MAX_EPISODES_REFRESH,
+        cached.length,
+      );
+
+      if (newCount <= currentCount) return; // nothing more to load
+
+      episodeLoadCount.set(feedId, newCount);
+      const episodes = cached.slice(0, newCount);
+
+      setFeeds((prev) => {
+        const updated = prev.map((f) =>
+          f.id === feedId ? { ...f, episodes } : f,
+        );
+        saveFeeds(updated);
+        return updated;
+      });
+    } finally {
+      setIsLoadingMore(false);
+    }
+  };
+
+  /** Set auto-download settings for a feed */
+  const setAutoDownload = (
+    feedId: string,
+    enabled: boolean,
+    count: number = 0,
+  ) => {
+    updateFeed(feedId, { autoDownload: enabled, autoDownloadCount: count });
+  };
 
   return {
     // State
@@ -403,13 +456,16 @@ export function createFeedStore() {
     sources,
     filter,
     selectedFeedId,
-    
+    isLoadingMore,
+
     // Computed
     getFilteredFeeds,
     getAllEpisodesChronological,
     getFeed,
     getSelectedFeed,
-    
+    hasMoreEpisodes,
+    isLoadingFeeds,
+
     // Actions
     setFilter,
     setSelectedFeedId,
@@ -417,19 +473,23 @@ export function createFeedStore() {
     removeFeed,
     updateFeed,
     togglePinned,
+    refreshFeed,
+    refreshAllFeeds,
+    loadMoreEpisodes,
     addSource,
     removeSource,
     toggleSource,
     updateSource,
-  }
+    setAutoDownload,
+  };
 }
 
 /** Singleton feed store */
-let feedStoreInstance: ReturnType<typeof createFeedStore> | null = null
+let feedStoreInstance: ReturnType<typeof createFeedStore> | null = null;
 
 export function useFeedStore() {
   if (!feedStoreInstance) {
-    feedStoreInstance = createFeedStore()
+    feedStoreInstance = createFeedStore();
   }
-  return feedStoreInstance
+  return feedStoreInstance;
 }

src/stores/progress.ts

@@ -0,0 +1,166 @@
+/**
+ * Episode progress store for PodTUI
+ *
+ * Persists per-episode playback progress to a JSON file in XDG_CONFIG_HOME.
+ * Tracks position, duration, completion, and last-played timestamp.
+ */
+
+import { createSignal } from "solid-js";
+import type { Progress } from "../types/episode";
+import {
+  loadProgressFromFile,
+  saveProgressToFile,
+} from "../utils/app-persistence";
+
+/** Threshold (fraction 0-1) at which an episode is considered completed */
+const COMPLETION_THRESHOLD = 0.95;
+
+/** Minimum seconds of progress before persisting */
+const MIN_POSITION_TO_SAVE = 5;
+
+// --- Singleton store ---
+
+const [progressMap, setProgressMap] = createSignal<Record<string, Progress>>(
+  {},
+);
+
+/** Persist current progress map to file (fire-and-forget) */
+function persist(): void {
+  saveProgressToFile(progressMap()).catch(() => {});
+}
+
+/** Parse raw progress entries from file, reviving Date objects */
+function parseProgressEntries(
+  raw: Record<string, unknown>,
+): Record<string, Progress> {
+  const result: Record<string, Progress> = {};
+  for (const [key, value] of Object.entries(raw)) {
+    const p = value as Record<string, unknown>;
+    result[key] = {
+      episodeId: p.episodeId as string,
+      position: p.position as number,
+      duration: p.duration as number,
+      timestamp: new Date(p.timestamp as string),
+      playbackSpeed: p.playbackSpeed as number | undefined,
+    };
+  }
+  return result;
+}
+
+async function initProgress(): Promise<void> {
+  const raw = await loadProgressFromFile();
+  const parsed = parseProgressEntries(raw as Record<string, unknown>);
+  setProgressMap(parsed);
+}
+
+// Fire-and-forget init
+initProgress();
+
+function createProgressStore() {
+  return {
+    /**
+     * Get progress for a specific episode.
+     */
+    get(episodeId: string): Progress | undefined {
+      return progressMap()[episodeId];
+    },
+
+    /**
+     * Get all progress entries.
+     */
+    all(): Record<string, Progress> {
+      return progressMap();
+    },
+
+    /**
+     * Update progress for an episode. Only persists if position is meaningful.
+     */
+    update(
+      episodeId: string,
+      position: number,
+      duration: number,
+      playbackSpeed?: number,
+    ): void {
+      if (position < MIN_POSITION_TO_SAVE && duration > 0) return;
+
+      setProgressMap((prev) => ({
+        ...prev,
+        [episodeId]: {
+          episodeId,
+          position,
+          duration,
+          timestamp: new Date(),
+          playbackSpeed,
+        },
+      }));
+      persist();
+    },
+
+    /**
+     * Check if an episode is completed.
+     */
+    isCompleted(episodeId: string): boolean {
+      const p = progressMap()[episodeId];
+      if (!p || p.duration <= 0) return false;
+      return p.position / p.duration >= COMPLETION_THRESHOLD;
+    },
+
+    /**
+     * Get progress percentage (0-100) for an episode.
+     */
+    getPercent(episodeId: string): number {
+      const p = progressMap()[episodeId];
+      if (!p || p.duration <= 0) return 0;
+      return Math.min(100, Math.round((p.position / p.duration) * 100));
+    },
+
+    /**
+     * Mark an episode as completed (set position to duration).
+     */
+    markCompleted(episodeId: string): void {
+      const p = progressMap()[episodeId];
+      const duration = p?.duration ?? 0;
+      setProgressMap((prev) => ({
+        ...prev,
+        [episodeId]: {
+          episodeId,
+          position: duration,
+          duration,
+          timestamp: new Date(),
+          playbackSpeed: p?.playbackSpeed,
+        },
+      }));
+      persist();
+    },
+
+    /**
+     * Remove progress for an episode (e.g. "mark as new").
+     */
+    remove(episodeId: string): void {
+      setProgressMap((prev) => {
+        const next = { ...prev };
+        delete next[episodeId];
+        return next;
+      });
+      persist();
+    },
+
+    /**
+     * Clear all progress data.
+     */
+    clear(): void {
+      setProgressMap({});
+      persist();
+    },
+  };
+}
+
+// Singleton instance
+let instance: ReturnType<typeof createProgressStore> | null = null;
+
+export function useProgressStore() {
+  if (!instance) {
+    instance = createProgressStore();
+  }
+  return instance;
+}

src/themes/catppuccin.json

@@ -1,7 +1,6 @@
 {
-  "$schema": "https://opencode.ai/theme.json",
   "defs": {
-    "background": "transparent",
+    "background": "#181825",
     "surface": "#1e1e2e",
     "primary": "#89b4fa",
     "secondary": "#cba6f7",
@@ -11,7 +10,7 @@
     "warning": "#fab387",
     "error": "#f38ba8",
     "success": "#a6e3a1",
-    "layer0": "transparent",
+    "layer0": "#181825",
     "layer1": "#181825",
     "layer2": "#11111b",
     "layer3": "#0a0a0f"

src/themes/gruvbox.json

@@ -1,7 +1,6 @@
 {
-  "$schema": "https://opencode.ai/theme.json",
   "defs": {
-    "background": "transparent",
+    "background": "#282828",
     "surface": "#282828",
     "primary": "#fabd2f",
     "secondary": "#83a598",
@@ -11,7 +10,7 @@
     "warning": "#fabd2f",
     "error": "#fb4934",
     "success": "#b8bb26",
-    "layer0": "transparent",
+    "layer0": "#282828",
     "layer1": "#32302a",
     "layer2": "#1d2021",
     "layer3": "#0d0c0c"

src/themes/nord.json

@@ -1,7 +1,6 @@
 {
-  "$schema": "https://opencode.ai/theme.json",
   "defs": {
-    "background": "transparent",
+    "background": "#2e3440",
     "surface": "#2e3440",
     "primary": "#88c0d0",
     "secondary": "#81a1c1",
@@ -11,7 +10,7 @@
     "warning": "#ebcb8b",
     "error": "#bf616a",
     "success": "#a3be8c",
-    "layer0": "transparent",
+    "layer0": "#2e3440",
     "layer1": "#3b4252",
     "layer2": "#242933",
     "layer3": "#1a1c23"

src/themes/opencode.json

@@ -1,245 +0,0 @@
-{
-  "$schema": "https://opencode.ai/theme.json",
-  "defs": {
-    "darkStep1": "#0a0a0a",
-    "darkStep2": "#141414",
-    "darkStep3": "#1e1e1e",
-    "darkStep4": "#282828",
-    "darkStep5": "#323232",
-    "darkStep6": "#3c3c3c",
-    "darkStep7": "#484848",
-    "darkStep8": "#606060",
-    "darkStep9": "#fab283",
-    "darkStep10": "#ffc09f",
-    "darkStep11": "#808080",
-    "darkStep12": "#eeeeee",
-    "darkSecondary": "#5c9cf5",
-    "darkAccent": "#9d7cd8",
-    "darkRed": "#e06c75",
-    "darkOrange": "#f5a742",
-    "darkGreen": "#7fd88f",
-    "darkCyan": "#56b6c2",
-    "darkYellow": "#e5c07b",
-    "lightStep1": "#ffffff",
-    "lightStep2": "#fafafa",
-    "lightStep3": "#f5f5f5",
-    "lightStep4": "#ebebeb",
-    "lightStep5": "#e1e1e1",
-    "lightStep6": "#d4d4d4",
-    "lightStep7": "#b8b8b8",
-    "lightStep8": "#a0a0a0",
-    "lightStep9": "#3b7dd8",
-    "lightStep10": "#2968c3",
-    "lightStep11": "#8a8a8a",
-    "lightStep12": "#1a1a1a",
-    "lightSecondary": "#7b5bb6",
-    "lightAccent": "#d68c27",
-    "lightRed": "#d1383d",
-    "lightOrange": "#d68c27",
-    "lightGreen": "#3d9a57",
-    "lightCyan": "#318795",
-    "lightYellow": "#b0851f"
-  },
-  "theme": {
-    "primary": {
-      "dark": "darkStep9",
-      "light": "lightStep9"
-    },
-    "secondary": {
-      "dark": "darkSecondary",
-      "light": "lightSecondary"
-    },
-    "accent": {
-      "dark": "darkAccent",
-      "light": "lightAccent"
-    },
-    "error": {
-      "dark": "darkRed",
-      "light": "lightRed"
-    },
-    "warning": {
-      "dark": "darkOrange",
-      "light": "lightOrange"
-    },
-    "success": {
-      "dark": "darkGreen",
-      "light": "lightGreen"
-    },
-    "info": {
-      "dark": "darkCyan",
-      "light": "lightCyan"
-    },
-    "text": {
-      "dark": "darkStep12",
-      "light": "lightStep12"
-    },
-    "textMuted": {
-      "dark": "darkStep11",
-      "light": "lightStep11"
-    },
-    "background": {
-      "dark": "darkStep1",
-      "light": "lightStep1"
-    },
-    "backgroundPanel": {
-      "dark": "darkStep2",
-      "light": "lightStep2"
-    },
-    "backgroundElement": {
-      "dark": "darkStep3",
-      "light": "lightStep3"
-    },
-    "border": {
-      "dark": "darkStep7",
-      "light": "lightStep7"
-    },
-    "borderActive": {
-      "dark": "darkStep8",
-      "light": "lightStep8"
-    },
-    "borderSubtle": {
-      "dark": "darkStep6",
-      "light": "lightStep6"
-    },
-    "diffAdded": {
-      "dark": "#4fd6be",
-      "light": "#1e725c"
-    },
-    "diffRemoved": {
-      "dark": "#c53b53",
-      "light": "#c53b53"
-    },
-    "diffContext": {
-      "dark": "#828bb8",
-      "light": "#7086b5"
-    },
-    "diffHunkHeader": {
-      "dark": "#828bb8",
-      "light": "#7086b5"
-    },
-    "diffHighlightAdded": {
-      "dark": "#b8db87",
-      "light": "#4db380"
-    },
-    "diffHighlightRemoved": {
-      "dark": "#e26a75",
-      "light": "#f52a65"
-    },
-    "diffAddedBg": {
-      "dark": "#20303b",
-      "light": "#d5e5d5"
-    },
-    "diffRemovedBg": {
-      "dark": "#37222c",
-      "light": "#f7d8db"
-    },
-    "diffContextBg": {
-      "dark": "darkStep2",
-      "light": "lightStep2"
-    },
-    "diffLineNumber": {
-      "dark": "darkStep3",
-      "light": "lightStep3"
-    },
-    "diffAddedLineNumberBg": {
-      "dark": "#1b2b34",
-      "light": "#c5d5c5"
-    },
-    "diffRemovedLineNumberBg": {
-      "dark": "#2d1f26",
-      "light": "#e7c8cb"
-    },
-    "markdownText": {
-      "dark": "darkStep12",
-      "light": "lightStep12"
-    },
-    "markdownHeading": {
-      "dark": "darkAccent",
-      "light": "lightAccent"
-    },
-    "markdownLink": {
-      "dark": "darkStep9",
-      "light": "lightStep9"
-    },
-    "markdownLinkText": {
-      "dark": "darkCyan",
-      "light": "lightCyan"
-    },
-    "markdownCode": {
-      "dark": "darkGreen",
-      "light": "lightGreen"
-    },
-    "markdownBlockQuote": {
-      "dark": "darkYellow",
-      "light": "lightYellow"
-    },
-    "markdownEmph": {
-      "dark": "darkYellow",
-      "light": "lightYellow"
-    },
-    "markdownStrong": {
-      "dark": "darkOrange",
-      "light": "lightOrange"
-    },
-    "markdownHorizontalRule": {
-      "dark": "darkStep11",
-      "light": "lightStep11"
-    },
-    "markdownListItem": {
-      "dark": "darkStep9",
-      "light": "lightStep9"
-    },
-    "markdownListEnumeration": {
-      "dark": "darkCyan",
-      "light": "lightCyan"
-    },
-    "markdownImage": {
-      "dark": "darkStep9",
-      "light": "lightStep9"
-    },
-    "markdownImageText": {
-      "dark": "darkCyan",
-      "light": "lightCyan"
-    },
-    "markdownCodeBlock": {
-      "dark": "darkStep12",
-      "light": "lightStep12"
-    },
-    "syntaxComment": {
-      "dark": "darkStep11",
-      "light": "lightStep11"
-    },
-    "syntaxKeyword": {
-      "dark": "darkAccent",
-      "light": "lightAccent"
-    },
-    "syntaxFunction": {
-      "dark": "darkStep9",
-      "light": "lightStep9"
-    },
-    "syntaxVariable": {
-      "dark": "darkRed",
-      "light": "lightRed"
-    },
-    "syntaxString": {
-      "dark": "darkGreen",
-      "light": "lightGreen"
-    },
-    "syntaxNumber": {
-      "dark": "darkOrange",
-      "light": "lightOrange"
-    },
-    "syntaxType": {
-      "dark": "darkYellow",
-      "light": "lightYellow"
-    },
-    "syntaxOperator": {
-      "dark": "darkCyan",
-      "light": "lightCyan"
-    },
-    "syntaxPunctuation": {
-      "dark": "darkStep12",
-      "light": "lightStep12"
-    }
-  }
-}

src/themes/schema.json

@@ -1,5 +1,4 @@
 {
-  "$schema": "https://opencode.ai/theme.json",
   "defs": {},
   "theme": {
     "primary": "#000000",

src/themes/tokyo.json

@@ -1,7 +1,6 @@
 {
-  "$schema": "https://opencode.ai/theme.json",
   "defs": {
-    "background": "transparent",
+    "background": "#0f0f15",
     "surface": "#1a1b26",
     "primary": "#7aa2f7",
     "secondary": "#bb9af7",
@@ -11,7 +10,7 @@
     "warning": "#e0af68",
     "error": "#f7768e",
     "success": "#9ece6a",
-    "layer0": "transparent",
+    "layer0": "#0f0f15",
     "layer1": "#16161e",
     "layer2": "#0f0f15",
     "layer3": "#08080b"

src/types/desktop-theme.ts

@@ -16,10 +16,18 @@ export const BASE_THEME_COLORS: ThemeColors = {
   secondary: "#a9b1d6",
   accent: "#f6c177",
   text: "#e6edf3",
+  textPrimary: "#e6edf3",
+  textSecondary: "#a9b1d6",
+  textTertiary: "#7d8590",
+  textSelectedPrimary: "#1b1f27",
+  textSelectedSecondary: "#e6edf3",
+  textSelectedTertiary: "#a9b1d6",
   muted: "#7d8590",
   warning: "#f0b429",
   error: "#f47067",
   success: "#3fb950",
+  _hasSelectedListItemText: true,
+  thinkingOpacity: 0.5,
 }
 
 // Base layer backgrounds
@@ -61,16 +69,22 @@ export const THEMES_DESKTOP: DesktopTheme = {
         secondary: "#cba6f7",
         accent: "#f9e2af",
         text: "#cdd6f4",
+        textPrimary: "#cdd6f4",
+        textSecondary: "#cba6f7",
+        textTertiary: "#7f849c",
+        textSelectedPrimary: "#1e1e2e",
+        textSelectedSecondary: "#cdd6f4",
+        textSelectedTertiary: "#cba6f7",
         muted: "#7f849c",
         warning: "#fab387",
         error: "#f38ba8",
         success: "#a6e3a1",
-  layerBackgrounds: {
-    layer0: "transparent",
-    layer1: "#181825",
-    layer2: "#11111b",
-    layer3: "#0a0a0f",
-  },
+    layerBackgrounds: {
+      layer0: "transparent",
+      layer1: "#181825",
+      layer2: "#11111b",
+      layer3: "#0a0a0f",
+    },
       },
     },
     {
@@ -82,6 +96,12 @@ export const THEMES_DESKTOP: DesktopTheme = {
         secondary: "#83a598",
         accent: "#fe8019",
         text: "#ebdbb2",
+        textPrimary: "#ebdbb2",
+        textSecondary: "#83a598",
+        textTertiary: "#928374",
+        textSelectedPrimary: "#282828",
+        textSelectedSecondary: "#ebdbb2",
+        textSelectedTertiary: "#83a598",
         muted: "#928374",
         warning: "#fabd2f",
         error: "#fb4934",
@@ -103,6 +123,12 @@ export const THEMES_DESKTOP: DesktopTheme = {
         secondary: "#bb9af7",
         accent: "#e0af68",
         text: "#c0caf5",
+        textPrimary: "#c0caf5",
+        textSecondary: "#bb9af7",
+        textTertiary: "#565f89",
+        textSelectedPrimary: "#1a1b26",
+        textSelectedSecondary: "#c0caf5",
+        textSelectedTertiary: "#bb9af7",
         muted: "#565f89",
         warning: "#e0af68",
         error: "#f7768e",
@@ -124,6 +150,12 @@ export const THEMES_DESKTOP: DesktopTheme = {
         secondary: "#81a1c1",
         accent: "#ebcb8b",
         text: "#eceff4",
+        textPrimary: "#eceff4",
+        textSecondary: "#81a1c1",
+        textTertiary: "#4c566a",
+        textSelectedPrimary: "#2e3440",
+        textSelectedSecondary: "#eceff4",
+        textSelectedTertiary: "#81a1c1",
         muted: "#4c566a",
         warning: "#ebcb8b",
         error: "#bf616a",

src/types/episode.ts

@@ -84,3 +84,34 @@ export interface EpisodeListItem {
   /** Progress percentage (0-100) */
   progressPercent: number
 }
+
+/** Download status for an episode */
+export enum DownloadStatus {
+  NONE = "none",
+  QUEUED = "queued",
+  DOWNLOADING = "downloading",
+  COMPLETED = "completed",
+  FAILED = "failed",
+}
+
+/** Metadata for a downloaded episode */
+export interface DownloadedEpisode {
+  /** Episode ID */
+  episodeId: string
+  /** Feed ID the episode belongs to */
+  feedId: string
+  /** Current download status */
+  status: DownloadStatus
+  /** Download progress 0-100 */
+  progress: number
+  /** Absolute path to the downloaded file */
+  filePath: string | null
+  /** When the download completed */
+  downloadedAt: Date | null
+  /** Download speed in bytes/sec (while downloading) */
+  speed: number
+  /** File size in bytes */
+  fileSize: number
+  /** Error message if failed */
+  error: string | null
+}

src/types/feed.ts

@@ -33,6 +33,10 @@ export interface Feed {
   isPinned: boolean
   /** Feed color for UI */
   color?: string
+  /** Whether auto-download is enabled for this feed */
+  autoDownload?: boolean
+  /** Number of newest episodes to auto-download (0 = all new) */
+  autoDownloadCount?: number
 }
 
 /** Feed item for display in lists */
@@ -65,6 +69,8 @@ export interface FeedFilter {
   sortBy?: FeedSortField
   /** Sort direction */
   sortDirection?: "asc" | "desc"
+  /** Show private feeds */
+  showPrivate?: boolean
 }
 
 /** Feed sort fields */