fix

src/App.tsx

@@ -1,4 +1,4 @@
-import { createSignal } from "solid-js";
+import { createSignal, ErrorBoundary } from "solid-js";
 import { Layout } from "./components/Layout";
 import { Navigation } from "./components/Navigation";
 import { TabNavigation } from "./components/TabNavigation";
@@ -191,7 +191,18 @@ export function App() {
       }
       footer={<Navigation activeTab={activeTab()} onTabSelect={setActiveTab} />}
     >
-      <box style={{ padding: 1 }}>{renderContent()}</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>
+        )}>
+          {renderContent()}
+        </ErrorBoundary>
+      </box>
     </Layout>
   );
 }

src/components/PodcastCard.tsx

@@ -2,7 +2,7 @@
  * PodcastCard component - Reusable card for displaying podcast info
  */
 
-import { Show } from "solid-js"
+import { Show, For } from "solid-js"
 import type { Podcast } from "../types/podcast"
 
 type PodcastCardProps = {
@@ -54,9 +54,9 @@ export function PodcastCard(props: PodcastCardProps) {
       <box flexDirection="row" justifyContent="space-between" marginTop={props.compact ? 0 : 1}>
         <box flexDirection="row" gap={1}>
           <Show when={(props.podcast.categories ?? []).length > 0}>
-            {(props.podcast.categories ?? []).slice(0, 2).map((cat) => (
-              <text fg="yellow">[{cat}]</text>
-            ))}
+            <For each={(props.podcast.categories ?? []).slice(0, 2)}>
+              {(cat) => <text fg="yellow">[{cat}]</text>}
+            </For>
           </Show>
         </box>
 

src/components/SettingsScreen.tsx

@@ -1,4 +1,4 @@
-import { createSignal } from "solid-js"
+import { createSignal, For } from "solid-js"
 import { useKeyboard } from "@opentui/solid"
 import { SourceManager } from "./SourceManager"
 import { useTheme } from "../context/ThemeContext"
@@ -56,18 +56,20 @@ export function SettingsScreen(props: SettingsScreenProps) {
       </box>
 
       <box flexDirection="row" gap={1}>
-        {SECTIONS.map((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 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}>

src/components/TrendingShows.tsx

@@ -31,7 +31,7 @@ export function TrendingShows(props: TrendingShowsProps) {
       </Show>
 
       <Show when={!props.isLoading && props.podcasts.length > 0}>
-        <scrollbox height="100%">
+        <scrollbox height={15}>
           <box flexDirection="column">
             <For each={props.podcasts}>
               {(podcast, index) => (

src/index.tsx

@@ -33,4 +33,4 @@ render(() => (
       </ThemeProvider>
     </ToastProvider>
   </RendererSetup>
-))
+), { useThread: false })