feat(app): add error boundaries and fix ESLint config for Vue+TS

- Wrap ChatMessage v-for loop in ChatWindow with ErrorBoundary
- Wrap ContentPanel grid/detail sections with ErrorBoundary
- Fix ESLint flat config: add vue-eslint-parser for TypeScript in SFCs
- Add browser globals to ESLint config
- Fix lint errors in contentExtraction.ts (useless escapes, prefer-const,
  unicode flag for emoji regex)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

packages/app/src/components/chat/ChatWindow.vue

@@ -34,13 +34,17 @@
         </div>
       </div>
 
-      <ChatMessage
+      <ErrorBoundary
         v-for="(msg, i) in messages"
         :key="msg.id"
-        :message="msg"
-        :index="i"
-        :triggering-query="getTriggeringQuery(messages, i)"
-      />
+        title="Message failed to render"
+      >
+        <ChatMessage
+          :message="msg"
+          :index="i"
+          :triggering-query="getTriggeringQuery(messages, i)"
+        />
+      </ErrorBoundary>
 
       <StreamingDots v-if="isStreaming && lastMessageEmpty" />
     </div>
@@ -67,6 +71,7 @@ import ChatMessage from './ChatMessage.vue'
 import ChatInput from './ChatInput.vue'
 import StreamingDots from './StreamingDots.vue'
 import PromptIndex from './PromptIndex.vue'
+import ErrorBoundary from '@/components/ui/ErrorBoundary.vue'
 import type { Message } from '@aiui/core/types/message'
 
 withDefaults(

packages/app/src/components/content/ContentPanel.vue

@@ -53,96 +53,98 @@
 
       <!-- Content area -->
       <div class="flex-1 min-h-0">
-        <!-- Detail views (override tab content) -->
-        <FilmDetail
-          v-if="selectedFilm"
-          :film="selectedFilm"
-          @back="closeFilmDetail"
-        />
-        <BookDetail
-          v-else-if="selectedBook"
-          :book="selectedBook"
-          @back="closeBookDetail"
-        />
-        <TVSeriesDetail
-          v-else-if="selectedTVSeries"
-          :series="selectedTVSeries"
-          @back="closeTVSeriesDetail"
-        />
-        <SongDetail
-          v-else-if="selectedSong"
-          :song="selectedSong"
-          @back="closeSongDetail"
-        />
-        <PodcastDetail
-          v-else-if="selectedPodcast"
-          :podcast="selectedPodcast"
-          @back="closePodcastDetail"
-        />
-        <ArticleDetail
-          v-else-if="selectedArticle"
-          :article="selectedArticle"
-          @back="closeArticleDetail"
-        />
+        <ErrorBoundary title="Content failed to load">
+          <!-- Detail views (override tab content) -->
+          <FilmDetail
+            v-if="selectedFilm"
+            :film="selectedFilm"
+            @back="closeFilmDetail"
+          />
+          <BookDetail
+            v-else-if="selectedBook"
+            :book="selectedBook"
+            @back="closeBookDetail"
+          />
+          <TVSeriesDetail
+            v-else-if="selectedTVSeries"
+            :series="selectedTVSeries"
+            @back="closeTVSeriesDetail"
+          />
+          <SongDetail
+            v-else-if="selectedSong"
+            :song="selectedSong"
+            @back="closeSongDetail"
+          />
+          <PodcastDetail
+            v-else-if="selectedPodcast"
+            :podcast="selectedPodcast"
+            @back="closePodcastDetail"
+          />
+          <ArticleDetail
+            v-else-if="selectedArticle"
+            :article="selectedArticle"
+            @back="closeArticleDetail"
+          />
 
-        <!-- Grid views by active tab -->
-        <FilmGrid
-          v-else-if="activeTab === 'film'"
-          :films="panelFilms"
-          :title="panelTitle"
-          @select-film="openFilmDetail"
-        />
-        <BookGrid
-          v-else-if="activeTab === 'book'"
-          :books="panelBooks"
-          :title="panelTitle"
-          @select-book="openBookDetail"
-        />
-        <TVSeriesGrid
-          v-else-if="activeTab === 'tvshow'"
-          :series="panelTVSeries"
-          :title="panelTitle"
-          @select-series="openTVSeriesDetail"
-        />
-        <SongGrid
-          v-else-if="activeTab === 'song'"
-          :songs="panelSongs"
-          :title="panelTitle"
-          @select-song="openSongDetail"
-        />
-        <PodcastGrid
-          v-else-if="activeTab === 'podcast'"
-          :podcasts="panelPodcasts"
-          :title="panelTitle"
-          @select-podcast="openPodcastDetail"
-        />
-        <NewsGrid
-          v-else-if="activeTab === 'news'"
-          :articles="panelWebResults"
-          :title="panelTitle"
-          :query="panelQuery"
-          variant="news"
-        />
-        <NewsGrid
-          v-else-if="activeTab === 'websites'"
-          :articles="panelWebsites"
-          :title="panelTitle"
-          :query="panelQuery"
-          variant="websites"
-        />
-        <MagazineGrid
-          v-else-if="activeTab === 'magazine'"
-          :sections="panelMagazineSections"
-          :title="panelTitle"
-          :query="panelQuery"
-          :hero-image="panelMagazineHeroImage ?? undefined"
-        />
-        <ProjectGrid
-          v-else-if="activeTab === 'code'"
-        />
-        <NostrGrid
-          v-else-if="activeTab === 'nostr'"
-        />
+          <!-- Grid views by active tab -->
+          <FilmGrid
+            v-else-if="activeTab === 'film'"
+            :films="panelFilms"
+            :title="panelTitle"
+            @select-film="openFilmDetail"
+          />
+          <BookGrid
+            v-else-if="activeTab === 'book'"
+            :books="panelBooks"
+            :title="panelTitle"
+            @select-book="openBookDetail"
+          />
+          <TVSeriesGrid
+            v-else-if="activeTab === 'tvshow'"
+            :series="panelTVSeries"
+            :title="panelTitle"
+            @select-series="openTVSeriesDetail"
+          />
+          <SongGrid
+            v-else-if="activeTab === 'song'"
+            :songs="panelSongs"
+            :title="panelTitle"
+            @select-song="openSongDetail"
+          />
+          <PodcastGrid
+            v-else-if="activeTab === 'podcast'"
+            :podcasts="panelPodcasts"
+            :title="panelTitle"
+            @select-podcast="openPodcastDetail"
+          />
+          <NewsGrid
+            v-else-if="activeTab === 'news'"
+            :articles="panelWebResults"
+            :title="panelTitle"
+            :query="panelQuery"
+            variant="news"
+          />
+          <NewsGrid
+            v-else-if="activeTab === 'websites'"
+            :articles="panelWebsites"
+            :title="panelTitle"
+            :query="panelQuery"
+            variant="websites"
+          />
+          <MagazineGrid
+            v-else-if="activeTab === 'magazine'"
+            :sections="panelMagazineSections"
+            :title="panelTitle"
+            :query="panelQuery"
+            :hero-image="panelMagazineHeroImage ?? undefined"
+          />
+          <ProjectGrid
+            v-else-if="activeTab === 'code'"
+          />
+          <NostrGrid
+            v-else-if="activeTab === 'nostr'"
+          />
+        </ErrorBoundary>
       </div>
     </aside>
   </Transition>
@@ -167,6 +169,7 @@ import ArticleDetail from './ArticleDetail.vue'
 import MagazineGrid from './MagazineGrid.vue'
 import ProjectGrid from './ProjectGrid.vue'
 import NostrGrid from './NostrGrid.vue'
+import ErrorBoundary from '@/components/ui/ErrorBoundary.vue'
 
 const { isDark } = useTheme()
 const {

packages/app/src/components/ui/ErrorBoundary.vue

@@ -0,0 +1,88 @@
+<template>
+  <slot v-if="!error" />
+  <div
+    v-else
+    class="flex items-center justify-center p-4"
+    role="alert"
+  >
+    <div
+      class="rounded-xl p-4 max-w-sm w-full space-y-3"
+      :class="isDark
+        ? 'bg-red-500/10 border border-red-500/20'
+        : 'bg-red-50 border border-red-200'"
+    >
+      <div class="flex items-start gap-3">
+        <svg
+          class="w-5 h-5 text-red-500 shrink-0 mt-0.5"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4.5c-.77-.833-2.694-.833-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"
+          />
+        </svg>
+        <div class="min-w-0">
+          <h3
+            class="text-sm font-semibold"
+            :class="isDark ? 'text-red-400' : 'text-red-900'"
+          >
+            {{ title }}
+          </h3>
+          <p
+            v-if="errorMessage"
+            class="text-xs mt-1 break-words"
+            :class="isDark ? 'text-red-300/70' : 'text-red-700/70'"
+          >
+            {{ errorMessage }}
+          </p>
+        </div>
+      </div>
+      <button
+        class="text-xs px-3 py-1.5 rounded-lg transition-colors"
+        :class="isDark
+          ? 'text-red-300 hover:bg-red-500/20'
+          : 'text-red-600 hover:bg-red-100'"
+        @click="reset"
+      >
+        Try again
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onErrorCaptured } from 'vue'
+import { useTheme } from '@/composables/useTheme'
+
+withDefaults(
+  defineProps<{
+    title?: string
+  }>(),
+  {
+    title: 'Something went wrong',
+  }
+)
+
+const { isDark } = useTheme()
+
+const error = ref<Error | null>(null)
+
+const errorMessage = ref('')
+
+onErrorCaptured((err: Error) => {
+  error.value = err
+  errorMessage.value = err.message || 'An unexpected error occurred'
+  console.error('[ErrorBoundary]', err)
+  return false
+})
+
+function reset() {
+  error.value = null
+  errorMessage.value = ''
+}
+</script>