nonworking keybinds

src/App.tsx

@@ -12,13 +12,17 @@ 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 } from "./utils/navigation";
+import { DIRECTION, LayerGraph, TABS, LayerDepths } from "./utils/navigation";
-import { useTheme } from "./context/ThemeContext";
+import { useTheme, ThemeProvider } from "./context/ThemeContext";
+import { KeybindProvider, useKeybinds } from "./context/KeybindContext";
+import { useAudioNavStore, AudioSource } from "./stores/audio-nav";
 
 const DEBUG = import.meta.env.DEBUG;
 
 export interface PageProps {
   depth: Accessor<number>;
+  focusedIndex?: Accessor<number> | number;
+  focusedIndexValue?: number;
 }
 
 export function App() {
@@ -28,12 +32,16 @@ export function App() {
   const [showAuthPanel, setShowAuthPanel] = createSignal(false);
   const [inputFocused, setInputFocused] = createSignal(false);
   const [layerDepth, setLayerDepth] = createSignal(0);
+  const [focusedIndex, setFocusedIndex] = createSignal(0);
+
   const auth = useAuthStore();
   const feedStore = useFeedStore();
   const audio = useAudio();
   const toast = useToast();
   const renderer = useRenderer();
   const { theme } = useTheme();
+  const keybind = useKeybinds();
+  const audioNav = useAudioNavStore();
 
   useMultimediaKeys({
     playerFocused: () => activeTab() === TABS.PLAYER && layerDepth() > 0,
@@ -45,6 +53,7 @@ export function App() {
     audio.play(episode);
     setActiveTab(TABS.PLAYER);
     setLayerDepth(1);
+    audioNav.setSource(AudioSource.FEED);
   };
 
   useSelectionHandler((selection: any) => {
@@ -64,14 +73,117 @@ export function App() {
 
   useKeyboard(
     (keyEvent) => {
-      //handle intra layer navigation
+      const isUp = keybind.match("up", keyEvent);
-      if (keyEvent.name == "up" || keyEvent.name) {
+      const isDown = keybind.match("down", keyEvent);
+      const isLeft = keybind.match("left", keyEvent);
+      const isRight = keybind.match("right", keyEvent);
+      const isCycle = keybind.match("cycle", 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);
+
+      if (DEBUG) {
+        console.log("KeyEvent:", keyEvent);
+        console.log("Keybinds loaded:", {
+          up: keybind.keybinds.up,
+          down: keybind.keybinds.down,
+          left: keybind.keybinds.left,
+          right: keybind.keybinds.right,
+        });
+      }
+
+      if (isUp || isDown) {
+        const currentDepth = activeDepth();
+        const maxDepth = LayerDepths[activeTab()];
+
+        console.log("Navigation:", { isUp, isDown, currentDepth, maxDepth });
+
+        // Navigate within current depth layer
+        if (currentDepth < maxDepth) {
+          const newIndex = isUp ? focusedIndex() - 1 : focusedIndex() + 1;
+          setFocusedIndex(Math.max(0, Math.min(newIndex, maxDepth)));
+        }
+      }
+
+      // Horizontal movement - move within current layer
+      if (isLeft || isRight) {
+        const currentDepth = activeDepth();
+        const maxDepth = LayerDepths[activeTab()];
+
+        if (currentDepth < maxDepth) {
+          const newIndex = isLeft ? focusedIndex() - 1 : focusedIndex() + 1;
+          setFocusedIndex(Math.max(0, Math.min(newIndex, maxDepth)));
+        }
+      }
+
+      // Cycle through current depth
+      if (isCycle) {
+        const currentDepth = activeDepth();
+        const maxDepth = LayerDepths[activeTab()];
+
+        if (currentDepth < maxDepth) {
+          const newIndex = (focusedIndex() + 1) % (maxDepth + 1);
+          setFocusedIndex(newIndex);
+        }
+      }
+
+      // Increase depth
+      if (isDive) {
+        const currentDepth = activeDepth();
+        const maxDepth = LayerDepths[activeTab()];
+
+        if (currentDepth < maxDepth) {
+          setActiveDepth(currentDepth + 1);
+          setFocusedIndex(0);
+        }
+      }
+
+      // Decrease depth
+      if (isOut) {
+        const currentDepth = activeDepth();
+
+        if (currentDepth > 0) {
+          setActiveDepth(currentDepth - 1);
+          setFocusedIndex(0);
+        }
+      }
+
+      if (isToggle) {
+        audio.togglePlayback();
+      }
+
+      if (isNext) {
+        audio.next();
+      }
+
+      if (isPrev) {
+        audio.prev();
+      }
+
+      if (isSeekForward) {
+        audio.seekRelative(15);
+      }
+
+      if (isSeekBackward) {
+        audio.seekRelative(-15);
+      }
+
+      // Quit application
+      if (isQuit) {
+        process.exit(0);
       }
     },
-    { release: false }, // Not strictly necessary
+    { release: false },
   );
 
   return (
+    <KeybindProvider>
+      <ThemeProvider mode="dark">
         <ErrorBoundary
           fallback={(err) => (
             <box border padding={2} borderColor={theme.error}>
@@ -119,9 +231,14 @@ export function App() {
             backgroundColor={theme.surface}
           >
             <TabNavigation activeTab={activeTab()} onTabSelect={setActiveTab} />
-        {LayerGraph[activeTab()]({ depth: activeDepth })}
+            {LayerGraph[activeTab()]({
+              depth: activeDepth,
+              focusedIndex: focusedIndex(),
+            })}
             {/** TODO: Contextual controls based on tab/depth**/}
           </box>
         </ErrorBoundary>
+      </ThemeProvider>
+    </KeybindProvider>
   );
 }

src/components/Selectable.tsx

@@ -1,39 +1,74 @@
 import { useTheme } from "@/context/ThemeContext";
-import type { JSXElement } from "solid-js";
+import { children as solidChildren } from "solid-js";
+import type { ParentComponent } from "solid-js";
 import type { BoxOptions, TextOptions } from "@opentui/core";
 
-export function SelectableBox({
+export const SelectableBox: ParentComponent<
-  selected,
+  {
-  children,
+    selected: () => boolean;
-  ...props
+  } & BoxOptions
-}: { selected: () => boolean; children: JSXElement } & BoxOptions) {
+> = (props) => {
   const { theme } = useTheme();
 
+  const child = solidChildren(() => props.children);
+
   return (
     <box
       border={!!props.border}
-      borderColor={selected() ? theme.surface : theme.border}
+      borderColor={props.selected() ? theme.surface : theme.border}
-      backgroundColor={selected() ? theme.primary : theme.surface}
+      backgroundColor={props.selected() ? theme.primary : theme.surface}
       {...props}
     >
-      {children}
+      {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 function SelectableText({
+export const SelectableText: ParentComponent<
-  selected,
+  {
-  children,
-  ...props
-}: {
     selected: () => boolean;
-  children: JSXElement;
+    primary?: boolean;
-} & TextOptions) {
+    secondary?: boolean;
-  const { theme } = useTheme();
+    tertiary?: boolean;
+  } & TextOptions
+> = (props) => {
+  const child = solidChildren(() => props.children);
 
   return (
-    <text fg={selected() ? theme.surface : theme.text} {...props}>
+    <text
-      {children}
+      fg={getTextColor(
+        props.primary
+          ? ColorSet.PRIMARY
+          : props.secondary
+            ? ColorSet.SECONDARY
+            : props.tertiary
+              ? ColorSet.TERTIARY
+              : ColorSet.DEFAULT,
+        props.selected,
+      )}
+      {...props}
+    >
+      {child()}
     </text>
   );
-}
+};

src/components/TabNavigation.tsx

@@ -37,6 +37,7 @@ export function TabNavigation(props: TabNavigationProps) {
            >
              <SelectableText
                selected={() => tab.id == props.activeTab}
+               primary
                alignSelf="center"
              >
                {tab.label}

src/config/keybind.jsonc

@@ -14,4 +14,6 @@
   "audio-play": [],
   "audio-next": ["<leader>n"],
   "audio-prev": ["<leader>l"],
+  "audio-seek-forward": ["<leader>sf"],
+  "audio-seek-backward": ["<leader>sb"],
 }

src/context/KeybindContext.tsx

@@ -7,8 +7,6 @@ import {
 } from "../utils/keybinds-persistence";
 import { createStore } from "solid-js/store";
 
-// ── Type Definitions ────────────────────────────────────────────────────────────
-
 export type KeybindsResolved = {
   up: string[];
   down: string[];
@@ -25,9 +23,27 @@ export type KeybindsResolved = {
   "audio-play": string[];
   "audio-next": string[];
   "audio-prev": string[];
+  "audio-seek-forward": string[];
+  "audio-seek-backward": string[];
 };
 
-// ── Context Implementation ────────────────────────────────────────────────────────────
+export enum KeybindAction {
+  UP,
+  DOWN,
+  LEFT,
+  RIGHT,
+  CYCLE,
+  DIVE,
+  OUT,
+  QUIT,
+  AUDIO_TOGGLE,
+  AUDIO_PAUSE,
+  AUDIO_PLAY,
+  AUDIO_NEXT,
+  AUDIO_PREV,
+  AUDIO_SEEK_F,
+  AUDIO_SEEK_B,
+}
 
 export const { use: useKeybinds, provider: KeybindProvider } =
   createSimpleContext({
@@ -49,7 +65,9 @@ export const { use: useKeybinds, provider: KeybindProvider } =
         "audio-play": [],
         "audio-next": [],
         "audio-prev": [],
-      });
+        "audio-seek-forward": [],
+        "audio-seek-backward": [],
+      } as KeybindsResolved);
       const [ready, setReady] = createSignal(false);
 
       async function load() {

src/context/ThemeContext.tsx

@@ -22,7 +22,7 @@ import {
   type TerminalColors,
 } from "@opentui/core";
 
-type ThemeResolved = {
+export type ThemeResolved = {
   primary: RGBA;
   secondary: RGBA;
   accent: RGBA;
@@ -32,7 +32,13 @@ type ThemeResolved = {
   info: RGBA;
   text: RGBA;
   textMuted: RGBA;
-  selectedListItemText: RGBA;
+  textPrimary: RGBA;
+  textSecondary: RGBA;
+  textTertiary: RGBA;
+  textSelectedPrimary: RGBA;
+  textSelectedSecondary: RGBA;
+  textSelectedTertiary: RGBA;
+
   background: RGBA;
   backgroundPanel: RGBA;
   backgroundElement: RGBA;
@@ -77,6 +83,7 @@ type ThemeResolved = {
   syntaxPunctuation: RGBA;
   muted?: RGBA;
   surface?: RGBA;
+  selectedListItemText?: RGBA;
   layerBackgrounds?: {
     layer0: RGBA;
     layer1: RGBA;

src/hooks/useAudio.ts

@@ -25,6 +25,9 @@ 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)
@@ -49,6 +52,8 @@ export interface AudioControls {
   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()
@@ -401,6 +406,76 @@ export function useAudio(): AudioControls {
     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()
@@ -447,5 +522,7 @@ export function useAudio(): AudioControls {
     setVolume: doSetVolume,
     setSpeed: doSetSpeed,
     switchBackend,
+    prev,
+    next,
   }
 }

src/pages/Discover/DiscoverPage.tsx

@@ -68,7 +68,7 @@ export function DiscoverPage(props: PageProps) {
                   >
                     <SelectableText
                       selected={isSelected}
-                     fg={theme.primary}
+                      primary
                     >
                       {category.icon} {category.name}
                     </SelectableText>
@@ -85,14 +85,15 @@ export function DiscoverPage(props: PageProps) {
         borderColor={theme.border}
       >
         <box padding={1}>
-          <text
+             <SelectableText
-            fg={props.depth() == DiscoverPagePaneType.SHOWS ? theme.primary : theme.textMuted}
+               selected={() => false}
+               primary={props.depth() == DiscoverPagePaneType.SHOWS}
              >
             Trending in{" "}
             {DISCOVER_CATEGORIES.find(
               (c) => c.id === discoverStore.selectedCategory(),
             )?.name ?? "All"}
-          </text>
+          </SelectableText>
         </box>
         <box flexDirection="column" height="100%">
           <Show

src/pages/Discover/PodcastCard.tsx

@@ -29,7 +29,7 @@ export function PodcastCard(props: PodcastCardProps) {
       onMouseDown={props.onSelect}
     >
       <box flexDirection="row" gap={2} alignItems="center">
-        <SelectableText selected={() => props.selected}>
+        <SelectableText selected={() => props.selected} primary>
           <strong>{props.podcast.title}</strong>
         </SelectableText>
 
@@ -42,7 +42,7 @@ export function PodcastCard(props: PodcastCardProps) {
       <Show when={props.podcast.author && !props.compact}>
         <SelectableText
           selected={() => props.selected}
-          fg={theme.textMuted}
+          tertiary
         >
           by {props.podcast.author}
         </SelectableText>
@@ -52,7 +52,7 @@ export function PodcastCard(props: PodcastCardProps) {
       <Show when={props.podcast.description && !props.compact}>
         <SelectableText
           selected={() => props.selected}
-          fg={theme.text}
+          tertiary
         >
           {props.podcast.description!.length > 80
             ? props.podcast.description!.slice(0, 80) + "..."

src/pages/Feed/FeedDetail.tsx

@@ -86,54 +86,54 @@ export function FeedDetail(props: FeedDetailProps) {
       {/* Header with back button */}
       <box flexDirection="row" justifyContent="space-between">
         <box border padding={0} onMouseDown={props.onBack} borderColor={theme.border}>
-            <text fg={theme.primary}>[Esc] Back</text>
+            <SelectableText selected={() => false} primary>[Esc] Back</SelectableText>
         </box>
         <box border padding={0} onMouseDown={() => setShowInfo((v) => !v)} borderColor={theme.border}>
-            <text fg={theme.primary}>[i] {showInfo() ? "Hide" : "Show"} Info</text>
+            <SelectableText selected={() => false} primary>[i] {showInfo() ? "Hide" : "Show"} Info</SelectableText>
         </box>
       </box>
 
       {/* Podcast info section */}
       <Show when={showInfo()}>
         <box border padding={1} flexDirection="column" gap={0} borderColor={theme.border}>
-          <text fg={theme.text}>
+          <SelectableText selected={() => false} primary>
             <strong>{props.feed.customName || props.feed.podcast.title}</strong>
-          </text>
+          </SelectableText>
           {props.feed.podcast.author && (
             <box flexDirection="row" gap={1}>
-                <text fg={theme.textMuted}>by</text>
+                <SelectableText selected={() => false} tertiary>by</SelectableText>
-                <text fg={theme.primary}>{props.feed.podcast.author}</text>
+                <SelectableText selected={() => false} primary>{props.feed.podcast.author}</SelectableText>
             </box>
           )}
           <box height={1} />
-          <text fg={theme.textMuted}>
+          <SelectableText selected={() => false} tertiary>
             {props.feed.podcast.description?.slice(0, 200)}
             {(props.feed.podcast.description?.length || 0) > 200 ? "..." : ""}
-          </text>
+          </SelectableText>
           <box height={1} />
           <box flexDirection="row" gap={2}>
             <box flexDirection="row" gap={1}>
-              <text fg={theme.textMuted}>Episodes:</text>
+              <SelectableText selected={() => false} tertiary>Episodes:</SelectableText>
-              <text fg={theme.text}>{props.feed.episodes.length}</text>
+              <SelectableText selected={() => false} tertiary>{props.feed.episodes.length}</SelectableText>
             </box>
             <box flexDirection="row" gap={1}>
-              <text fg={theme.textMuted}>Updated:</text>
+              <SelectableText selected={() => false} tertiary>Updated:</SelectableText>
-              <text fg={theme.text}>{formatDate(props.feed.lastUpdated)}</text>
+              <SelectableText selected={() => false} tertiary>{formatDate(props.feed.lastUpdated)}</SelectableText>
             </box>
-            <text fg={props.feed.visibility === "public" ? theme.success : theme.warning}>
+            <SelectableText selected={() => false} tertiary>
               {props.feed.visibility === "public" ? "[Public]" : "[Private]"}
-            </text>
+            </SelectableText>
-            {props.feed.isPinned && <text fg={theme.warning}>[Pinned]</text>}
+            {props.feed.isPinned && <SelectableText selected={() => false} tertiary>[Pinned]</SelectableText>}
           </box>
         </box>
       </Show>
 
       {/* Episodes header */}
       <box flexDirection="row" justifyContent="space-between">
-        <text fg={theme.text}>
+        <SelectableText selected={() => false} primary>
           <strong>Episodes</strong>
-        </text>
+        </SelectableText>
-        <text fg={theme.textMuted}>({episodes().length} total)</text>
+        <SelectableText selected={() => false} tertiary>({episodes().length} total)</SelectableText>
       </box>
 
       {/* Episode list */}
@@ -154,20 +154,20 @@ export function FeedDetail(props: FeedDetailProps) {
             >
               <SelectableText
                 selected={() => index() === selectedIndex()}
-                fg={theme.primary}
+                primary
               >
                 {index() === selectedIndex() ? ">" : " "}
               </SelectableText>
               <SelectableText
                 selected={() => index() === selectedIndex()}
-                fg={theme.text}
+                primary
               >
                 {episode.episodeNumber ? `#${episode.episodeNumber} - ` : ""}
                 {episode.title}
               </SelectableText>
               <box flexDirection="row" gap={2} paddingLeft={2}>
-                  <text fg={theme.textMuted}>{formatDate(episode.pubDate)}</text>
+                  <SelectableText selected={() => index() === selectedIndex()} tertiary>{formatDate(episode.pubDate)}</SelectableText>
-                  <text fg={theme.textMuted}>{formatDuration(episode.duration)}</text>
+                  <SelectableText selected={() => index() === selectedIndex()} tertiary>{formatDuration(episode.duration)}</SelectableText>
               </box>
             </SelectableBox>
           )}

src/pages/Feed/FeedItem.tsx

@@ -54,26 +54,26 @@ export function FeedItem(props: FeedItemProps) {
       >
         <SelectableText
           selected={() => props.isSelected}
-          fg={theme.primary}
+          primary
         >
           {props.isSelected ? ">" : " "}
         </SelectableText>
         <SelectableText
           selected={() => props.isSelected}
-          fg={visibilityColor()}
+          tertiary
         >
           {visibilityIcon()}
         </SelectableText>
         <SelectableText
           selected={() => props.isSelected}
-          fg={theme.text}
+          primary
         >
           {props.feed.customName || props.feed.podcast.title}
         </SelectableText>
         {props.showEpisodeCount && (
           <SelectableText
             selected={() => props.isSelected}
-            fg={theme.textMuted}
+            tertiary
           >
             ({episodeCount()})
           </SelectableText>
@@ -95,25 +95,25 @@ export function FeedItem(props: FeedItemProps) {
       <box flexDirection="row" gap={1}>
         <SelectableText
           selected={() => props.isSelected}
-          fg={theme.primary}
+          primary
         >
           {props.isSelected ? ">" : " "}
         </SelectableText>
         <SelectableText
           selected={() => props.isSelected}
-          fg={visibilityColor()}
+          tertiary
         >
           {visibilityIcon()}
         </SelectableText>
         <SelectableText
           selected={() => props.isSelected}
-          fg={theme.warning}
+          secondary
         >
           {pinnedIndicator()}
         </SelectableText>
         <SelectableText
           selected={() => props.isSelected}
-          fg={theme.text}
+          primary
         >
           <strong>{props.feed.customName || props.feed.podcast.title}</strong>
         </SelectableText>
@@ -123,7 +123,7 @@ export function FeedItem(props: FeedItemProps) {
         {props.showEpisodeCount && (
           <SelectableText
             selected={() => props.isSelected}
-            fg={theme.textMuted}
+            tertiary
           >
             {episodeCount()} episodes ({unplayedCount()} new)
           </SelectableText>
@@ -131,7 +131,7 @@ export function FeedItem(props: FeedItemProps) {
         {props.showLastUpdated && (
           <SelectableText
             selected={() => props.isSelected}
-            fg={theme.textMuted}
+            tertiary
           >
             Updated: {formatDate(props.feed.lastUpdated)}
           </SelectableText>
@@ -143,7 +143,7 @@ export function FeedItem(props: FeedItemProps) {
           selected={() => props.isSelected}
           paddingLeft={4}
           paddingTop={0}
-          fg={theme.textMuted}
+          tertiary
         >
           {props.feed.podcast.description.slice(0, 60)}
           {props.feed.podcast.description.length > 60 ? "..." : ""}

src/pages/Feed/FeedPage.tsx

@@ -5,22 +5,27 @@
 
 import { createSignal, For, Show } from "solid-js";
 import { useFeedStore } from "@/stores/feed";
+import { useKeyboard } from "@opentui/solid";
 import { format } from "date-fns";
 import type { Episode } from "@/types/episode";
 import type { Feed } from "@/types/feed";
 import { useTheme } from "@/context/ThemeContext";
 import { PageProps } from "@/App";
 import { SelectableBox, SelectableText } from "@/components/Selectable";
+import { se } from "date-fns/locale";
 
 enum FeedPaneType {
   FEED = 1,
 }
 export const FeedPaneCount = 1;
 
+/** Episodes to load per batch */
+const ITEMS_PER_BATCH = 50;
+
 export function FeedPage(props: PageProps) {
   const feedStore = useFeedStore();
-  const [selectedIndex, setSelectedIndex] = createSignal(0);
   const [isRefreshing, setIsRefreshing] = createSignal(false);
+  const [loadedEpisodesCount, setLoadedEpisodesCount] = createSignal(ITEMS_PER_BATCH);
 
   const allEpisodes = () => feedStore.getAllEpisodesChronological();
 
@@ -28,9 +33,14 @@ export function FeedPage(props: PageProps) {
     return format(date, "MMM d, yyyy");
   };
 
+  const paginatedEpisodes = () => {
+    const episodes = allEpisodes();
+    return episodes.slice(0, loadedEpisodesCount());
+  };
+
   const episodesByDate = () => {
     const groups: Record<string, { episode: Episode; feed: Feed }> = {};
-    const sortedEpisodes = allEpisodes();
+    const sortedEpisodes = paginatedEpisodes();
 
     for (const episode of sortedEpisodes) {
       const dateKey = formatDate(new Date(episode.episode.pubDate));
@@ -77,44 +87,68 @@ export function FeedPage(props: PageProps) {
         }
       >
         <scrollbox height="100%" focused={props.depth() == FeedPaneType.FEED}>
-          <For each={Object.entries(episodesByDate()).sort(([a], [b]) => b.localeCompare(a))}>
+          <For
-            {([date, episode], groupIndex) => (
+            each={Object.entries(episodesByDate()).sort(([a], [b]) =>
+              b.localeCompare(a),
+            )}
+          >
+            {([date, episode], groupIndex) => {
+              const index = typeof props.focusedIndex === 'function' ? props.focusedIndex() : props.focusedIndex;
+              const selected = () => groupIndex() === index;
+              return (
                 <>
-                <box flexDirection="column" gap={0} paddingLeft={1} paddingRight={1} paddingTop={1} paddingBottom={1}>
+                  <box
-                  <text fg={theme.primary}>{date}</text>
+                    flexDirection="column"
+                    gap={0}
+                    paddingLeft={1}
+                    paddingRight={1}
+                    paddingTop={1}
+                    paddingBottom={1}
+                  >
+                    <SelectableText selected={() => false} primary>
+                      {date}
+                    </SelectableText>
                   </box>
                   <SelectableBox
-                  selected={() => groupIndex() === selectedIndex()}
+                    selected={selected}
                     flexDirection="column"
                     gap={0}
                     paddingLeft={1}
                     paddingRight={1}
                     paddingTop={0}
                     paddingBottom={0}
-                  onMouseDown={() => setSelectedIndex(groupIndex())}
+                    onMouseDown={() => {
+                      // Selection is handled by App's keyboard navigation
+                    }}
                   >
-                  <SelectableText selected={() => groupIndex() === selectedIndex()}>
+                    <SelectableText selected={selected} primary>
-                    {groupIndex() === selectedIndex() ? ">" : " "}
+                      {selected() ? ">" : " "}
                     </SelectableText>
-                  <SelectableText
+                    <SelectableText selected={selected} primary>
-                    selected={() => groupIndex() === selectedIndex()}
-                    fg={theme.text}
-                  >
                       {episode.episode.title}
                     </SelectableText>
                     <box flexDirection="row" gap={2} paddingLeft={2}>
-                    <text fg={theme.primary}>{episode.feed.podcast.title}</text>
+                      <SelectableText selected={selected} primary>
-                    <text fg={theme.textMuted}>
+                        {episode.feed.podcast.title}
+                      </SelectableText>
+                      <SelectableText selected={selected} tertiary>
                         {formatDate(episode.episode.pubDate)}
-                    </text>
+                      </SelectableText>
-                    <text fg={theme.textMuted}>
+                      <SelectableText selected={selected} tertiary>
                         {formatDuration(episode.episode.duration)}
-                    </text>
+                      </SelectableText>
                     </box>
                   </SelectableBox>
                 </>
-            )}
+              );
+            }}
           </For>
+          {/* Loading indicator */}
+          <Show when={feedStore.isLoadingMore()}>
+            <box padding={1}>
+              <text fg={theme.textMuted}>Loading more episodes...</text>
+            </box>
+          </Show>
         </scrollbox>
       </Show>
     </box>

src/pages/MyShows/MyShowsPage.tsx

@@ -11,6 +11,7 @@ import { DownloadStatus } from "@/types/episode";
 import { format } from "date-fns";
 import { PageProps } from "@/App";
 import { useTheme } from "@/context/ThemeContext";
+import { useAudioNavStore, AudioSource } from "@/stores/audio-nav";
 
 enum MyShowsPaneType {
   SHOWS = 1,
@@ -22,8 +23,7 @@ export const MyShowsPaneCount = 2;
 export function MyShowsPage(props: PageProps) {
   const feedStore = useFeedStore();
   const downloadStore = useDownloadStore();
-  const [showIndex, setShowIndex] = createSignal(0);
+  const audioNav = useAudioNavStore();
-  const [episodeIndex, setEpisodeIndex] = createSignal(0);
   const [isRefreshing, setIsRefreshing] = createSignal(false);
   const { theme } = useTheme();
   const mutedColor = () => theme.muted || theme.text;
@@ -35,8 +35,8 @@ export function MyShowsPage(props: PageProps) {
 
   const selectedShow = createMemo(() => {
     const s = shows();
-    const idx = showIndex();
+    const index = typeof props.focusedIndex === 'function' ? props.focusedIndex() : props.focusedIndex;
-    return idx < s.length ? s[idx] : undefined;
+    return index < s.length ? s[index] : undefined;
   });
 
   const episodes = createMemo(() => {
@@ -47,23 +47,6 @@ export function MyShowsPage(props: PageProps) {
     );
   });
 
-  // Detect when user navigates near the bottom and load more episodes
-  createEffect(() => {
-    const idx = episodeIndex();
-    const eps = episodes();
-    const show = selectedShow();
-    if (!show || eps.length === 0) return;
-
-    const nearBottom = idx >= eps.length - LOAD_MORE_THRESHOLD;
-    if (
-      nearBottom &&
-      feedStore.hasMoreEpisodes(show.id) &&
-      !feedStore.isLoadingMore()
-    ) {
-      feedStore.loadMoreEpisodes(show.id);
-    }
-  });
-
   const formatDate = (date: Date): string => {
     return format(date, "MMM d, yyyy");
   };
@@ -160,6 +143,7 @@ export function MyShowsPage(props: PageProps) {
                   onMouseDown={() => {
                     setShowIndex(index());
                     setEpisodeIndex(0);
+                    audioNav.setSource(AudioSource.MY_SHOWS, selectedShow()?.podcast.id);
                   }}
                 >
                   <text

src/pages/Search/ResultCard.tsx

@@ -30,7 +30,7 @@ export function ResultCard(props: ResultCardProps) {
          <box flexDirection="row" gap={2} alignItems="center">
              <SelectableText
                selected={() => props.selected}
-              fg={theme.primary}
+               primary
              >
                <strong>{podcast().title}</strong>
              </SelectableText>
@@ -48,7 +48,7 @@ export function ResultCard(props: ResultCardProps) {
        <Show when={podcast().author}>
              <SelectableText
                selected={() => props.selected}
-              fg={theme.textMuted}
+               tertiary
              >
                by {podcast().author}
              </SelectableText>
@@ -58,7 +58,7 @@ export function ResultCard(props: ResultCardProps) {
          {(description) => (
              <SelectableText
                selected={() => props.selected}
-              fg={theme.text}
+               tertiary
              >
              {description().length > 120
                ? description().slice(0, 120) + "..."

src/pages/Search/SearchHistory.tsx

@@ -64,13 +64,13 @@ export function SearchHistory(props: SearchHistoryProps) {
                   >
                      <SelectableText
                        selected={isSelected}
-                      fg={theme.textMuted}
+                       tertiary
                      >
                        {">"}
                      </SelectableText>
                      <SelectableText
                        selected={isSelected}
-                      fg={theme.primary}
+                       primary
                      >
                        {query}
                      </SelectableText>

src/pages/Settings/SourceManager.tsx

@@ -198,20 +198,17 @@ export function SourceManager(props: SourceManagerProps) {
                     feedStore.toggleSource(source.id);
                   }}
                 >
-                <text
+                 <SelectableText
-                  fg={
+                   selected={() => focusArea() === "list" && index() === selectedIndex()}
-                    focusArea() === "list" && index() === selectedIndex()
+                   primary
-                      ? theme.primary
-                      : theme.textMuted
-                  }
                  >
                    {focusArea() === "list" && index() === selectedIndex()
                      ? ">"
                      : " "}
-                </text>
+                 </SelectableText>
                  <SelectableText
                    selected={() => focusArea() === "list" && index() === selectedIndex()}
-                  fg={theme.text}
+                   primary
                  >
                    {source.name}
                  </SelectableText>
@@ -225,11 +222,11 @@ export function SourceManager(props: SourceManagerProps) {
 
          {/* API settings */}
          <box flexDirection="column" gap={1}>
-          <text fg={isApiSource() ? theme.textMuted : theme.accent}>
+           <SelectableText selected={() => false} primary={isApiSource()}>
              {isApiSource()
                ? "API Settings"
                : "API Settings (select an API source)"}
-          </text>
+           </SelectableText>
            <box flexDirection="row" gap={2}>
              <box
                border
@@ -239,11 +236,9 @@ export function SourceManager(props: SourceManagerProps) {
                  focusArea() === "country" ? theme.primary : undefined
                }
              >
-              <text
+               <SelectableText selected={() => false} primary={focusArea() === "country"}>
-                fg={focusArea() === "country" ? theme.primary : theme.textMuted}
-              >
                  Country: {sourceCountry()}
-              </text>
+               </SelectableText>
              </box>
              <box
                border
@@ -253,14 +248,10 @@ export function SourceManager(props: SourceManagerProps) {
                  focusArea() === "language" ? theme.primary : undefined
                }
              >
-              <text
+               <SelectableText selected={() => false} primary={focusArea() === "language"}>
-                fg={
-                  focusArea() === "language" ? theme.primary : theme.textMuted
-                }
-              >
                  Language:{" "}
                  {sourceLanguage() === "ja_jp" ? "Japanese" : "English"}
-              </text>
+               </SelectableText>
              </box>
              <box
                border
@@ -270,35 +261,25 @@ export function SourceManager(props: SourceManagerProps) {
                  focusArea() === "explicit" ? theme.primary : undefined
                }
              >
-              <text
+               <SelectableText selected={() => false} primary={focusArea() === "explicit"}>
-                fg={
-                  focusArea() === "explicit" ? theme.primary : theme.textMuted
-                }
-              >
                  Explicit: {sourceExplicit() ? "Yes" : "No"}
-              </text>
+               </SelectableText>
              </box>
            </box>
-          <text fg={theme.textMuted}>
+           <SelectableText selected={() => false} tertiary>
              Enter/Space to toggle focused setting
-          </text>
+           </SelectableText>
          </box>
       </box>
 
          {/* Add new source form */}
          <box border borderColor={theme.border} padding={1} flexDirection="column" gap={1}>
-        <text
+           <SelectableText selected={() => false} primary={focusArea() === "add" || focusArea() === "url"}>
-          fg={
-            focusArea() === "add" || focusArea() === "url"
-              ? theme.primary
-              : theme.textMuted
-          }
-        >
              Add New Source:
-        </text>
+           </SelectableText>
 
            <box flexDirection="row" gap={1}>
-          <text fg={theme.textMuted}>Name:</text>
+             <SelectableText selected={() => false} tertiary>Name:</SelectableText>
              <input
                value={newSourceName()}
                onInput={setNewSourceName}
@@ -309,7 +290,7 @@ export function SourceManager(props: SourceManagerProps) {
            </box>
 
            <box flexDirection="row" gap={1}>
-          <text fg={theme.textMuted}>URL:</text>
+             <SelectableText selected={() => false} tertiary>URL:</SelectableText>
              <input
                value={newSourceUrl()}
                onInput={(v) => {
@@ -323,14 +304,14 @@ export function SourceManager(props: SourceManagerProps) {
            </box>
 
            <box border borderColor={theme.border} padding={0} width={15} onMouseDown={handleAddSource}>
-          <text fg={theme.success}>[+] Add Source</text>
+             <SelectableText selected={() => false} primary>[+] Add Source</SelectableText>
            </box>
          </box>
 
          {/* Error message */}
-      {error() && <text fg={theme.error}>{error()}</text>}
+         {error() && <SelectableText selected={() => false} tertiary>{error()}</SelectableText>}
 
-      <text fg={theme.textMuted}>Tab to switch sections, Esc to close</text>
+         <SelectableText selected={() => false} tertiary>Tab to switch sections, Esc to close</SelectableText>
     </box>
   );
 }

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/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,6 +69,12 @@ 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",
@@ -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/settings.ts

@@ -23,11 +23,20 @@ export type ThemeColors = {
   secondary: ColorValue;
   accent: ColorValue;
   text: ColorValue;
+  textPrimary?: ColorValue;
+  textSecondary?: ColorValue;
+  textTertiary?: ColorValue;
+  textSelectedPrimary?: ColorValue;
+  textSelectedSecondary?: ColorValue;
+  textSelectedTertiary?: ColorValue;
   muted: ColorValue;
   warning: ColorValue;
   error: ColorValue;
   success: ColorValue;
   layerBackgrounds?: LayerBackgrounds;
+  _hasSelectedListItemText?: boolean;
+  thinkingOpacity?: number;
+  selectedListItemText?: ColorValue;
 };
 
 export type ThemeVariant = {

src/types/theme-schema.ts

@@ -23,4 +23,10 @@ export type ThemeJson = {
 export type ThemeColors = Record<string, RGBA> & {
   _hasSelectedListItemText: boolean
   thinkingOpacity: number
+  textPrimary?: ColorValue
+  textSecondary?: ColorValue
+  textTertiary?: ColorValue
+  textSelectedPrimary?: ColorValue
+  textSelectedSecondary?: ColorValue
+  textSelectedTertiary?: ColorValue
 }

src/ui/command.tsx

@@ -298,23 +298,14 @@ function CommandDialog(props: {
                <box flexDirection="column" flexGrow={1}>
                  <SelectableText
                    selected={() => index() === selectedIndex()}
-                  fg={
+                   primary
-                    index() === selectedIndex()
-                      ? theme.selectedListItemText
-                      : theme.text
-                  }
-                  attributes={
-                    index() === selectedIndex()
-                      ? TextAttributes.BOLD
-                      : undefined
-                  }
                  >
                    {option.title}
                  </SelectableText>
                  <Show when={option.footer}>
                    <SelectableText
                      selected={() => index() === selectedIndex()}
-                    fg={theme.textMuted}
+                     tertiary
                    >
                      {option.footer}
                    </SelectableText>
@@ -322,7 +313,7 @@ function CommandDialog(props: {
                  <Show when={option.description}>
                    <SelectableText
                      selected={() => index() === selectedIndex()}
-                    fg={theme.textMuted}
+                     tertiary
                    >
                      {option.description}
                    </SelectableText>

src/utils/app-persistence.ts

@@ -16,6 +16,7 @@ import { DEFAULT_THEME } from "../constants/themes";
 
 const APP_STATE_FILE = "app-state.json";
 const PROGRESS_FILE = "progress.json";
+const AUDIO_NAV_FILE = "audio-nav.json";
 
 // --- Defaults ---
 
@@ -119,3 +120,39 @@ export async function saveProgressToFile(
     // Silently ignore write errors
   }
 }
+
+interface AudioNavEntry {
+  source: string;
+  currentIndex: number;
+  podcastId?: string;
+  lastUpdated: string;
+}
+
+/** Load audio navigation state from JSON file */
+export async function loadAudioNavFromFile<T>(): Promise<T | null> {
+  try {
+    const filePath = getConfigFilePath(AUDIO_NAV_FILE);
+    const file = Bun.file(filePath);
+    if (!(await file.exists())) return null;
+
+    const raw = await file.json();
+    if (!raw || typeof raw !== "object") return null;
+
+    return raw as T;
+  } catch {
+    return null;
+  }
+}
+
+/** Save audio navigation state to JSON file */
+export async function saveAudioNavToFile<T>(
+  data: T,
+): Promise<void> {
+  try {
+    await ensureConfigDir();
+    const filePath = getConfigFilePath(AUDIO_NAV_FILE);
+    await Bun.write(filePath, JSON.stringify(data, null, 2));
+  } catch {
+    // Silently ignore write errors
+  }
+}

src/utils/keybinds-persistence.ts

@@ -11,7 +11,12 @@ import { parseJSONC } from "./jsonc";
 import { getConfigFilePath, ensureConfigDir } from "./config-dir";
 import type { KeybindsResolved } from "../context/KeybindContext";
 
-const KEYBINDS_SOURCE = path.join(process.cwd(), "src", "config", "keybind.jsonc");
+const KEYBINDS_SOURCE = path.join(
+  process.cwd(),
+  "src",
+  "config",
+  "keybind.jsonc",
+);
 const KEYBINDS_FILE = "keybinds.jsonc";
 
 /** Default keybinds from package */
@@ -31,6 +36,8 @@ const DEFAULT_KEYBINDS: KeybindsResolved = {
   "audio-play": [],
   "audio-next": ["<leader>n"],
   "audio-prev": ["<leader>l"],
+  "audio-seek-forward": ["<leader>sf"],
+  "audio-seek-backward": ["<leader>sb"],
 };
 
 /** Copy keybind.jsonc to user config directory on first run */
@@ -69,7 +76,9 @@ export async function loadKeybindsFromFile(): Promise<KeybindsResolved> {
 }
 
 /** Save keybinds to JSONC file */
-export async function saveKeybindsToFile(keybinds: KeybindsResolved): Promise<void> {
+export async function saveKeybindsToFile(
+  keybinds: KeybindsResolved,
+): Promise<void> {
   try {
     await ensureConfigDir();
     const filePath = getConfigFilePath(KEYBINDS_FILE);

src/utils/system-theme.ts

@@ -64,6 +64,19 @@ export function generateSystemTheme(
   const diffAddedLineNumberBg = tint(grays[3], ansi.green, diffAlpha);
   const diffRemovedLineNumberBg = tint(grays[3], ansi.red, diffAlpha);
 
+  // Create darker shades for selected text colors to ensure contrast
+  const darken = (color: RGBA, factor: number = 0.6) => {
+    return RGBA.fromInts(
+      Math.round(color.r * 255 * factor),
+      Math.round(color.g * 255 * factor),
+      Math.round(color.b * 255 * factor)
+    );
+  };
+
+  const selectedPrimary = darken(ansi.cyan, isDark ? 0.4 : 0.6);
+  const selectedSecondary = darken(ansi.magenta, isDark ? 0.4 : 0.6);
+  const selectedTertiary = darken(textMuted, isDark ? 0.5 : 0.5);
+
   return {
     theme: {
       primary: ansi.cyan,
@@ -75,6 +88,12 @@ export function generateSystemTheme(
       info: ansi.cyan,
       text: fg,
       textMuted,
+      textPrimary: fg,
+      textSecondary: textMuted,
+      textTertiary: textMuted,
+      textSelectedPrimary: selectedPrimary,
+      textSelectedSecondary: selectedSecondary,
+      textSelectedTertiary: selectedTertiary,
       selectedListItemText: bg,
       background: transparent,
       backgroundPanel: grays[2],