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>

packages/app/src/composables/contentExtraction.ts

@@ -25,7 +25,7 @@ const SAFE_URL_SCHEME = /^https?:\/\//i
 
 function extractUrlFromText(text: string): string | undefined {
   const mdLink = /\[([^\]]*)\]\((https?:\/\/[^)]+)\)/.exec(text)
-  const raw = mdLink ? mdLink[2] : (/(https?:\/\/[^\s)\]\"'<>]+)/.exec(text)?.[1])
+  const raw = mdLink ? mdLink[2] : (/(https?:\/\/[^\s)\]"'<>]+)/.exec(text)?.[1])
   if (!raw?.trim()) return undefined
   try {
     const u = new URL(raw.trim())
@@ -55,7 +55,7 @@ function extractAuthorFromText(text: string): string | undefined {
 
 function extractFirstImageFromText(text: string): string | undefined {
   const mdImg = /!\[[^\]]*\]\((https?:\/\/[^)]+)\)/.exec(text)
-  const raw = mdImg ? mdImg[1] : (/(https?:\/\/[^\s)\]\"'<>]+\.(?:jpg|jpeg|png|gif|webp)(?:\?[^\s)\]]*)?)/i.exec(text)?.[1])
+  const raw = mdImg ? mdImg[1] : (/(https?:\/\/[^\s)\]"'<>]+\.(?:jpg|jpeg|png|gif|webp)(?:\?[^\s)\]]*)?)/i.exec(text)?.[1])
   if (!raw?.trim()) return undefined
   try {
     const u = new URL(raw.trim())
@@ -117,13 +117,13 @@ function addSection(
   seen: Set<string>,
   group?: string,
 ): void {
-  let t = cleanMagazineText(title).replace(/\s+/g, ' ').trim().slice(0, 150)
+  const t = cleanMagazineText(title).replace(/\s+/g, ' ').trim().slice(0, 150)
   let c = cleanMagazineText(content).replace(/\n{3,}/g, '\n\n').trim().slice(0, MAGAZINE_CONTENT_MAX)
   if (t.length < 2 || c.length < 15) return
   const tLower = t.toLowerCase()
   const cLower = c.toLowerCase()
   if (tLower.length >= 10 && cLower.startsWith(tLower.slice(0, Math.min(tLower.length, 40)))) {
-    c = c.slice(t.length).replace(/^[\s.,:;—–\-]+/, '').trim()
+    c = c.slice(t.length).replace(/^[\s.,:;—–-]+/, '').trim()
     if (c.length < 15) return
   }
   const key = `${t.slice(0, 50)}`
@@ -159,7 +159,7 @@ export function extractMagazineSections(text: string): MagazineSection[] {
   const sections: MagazineSection[] = []
   const seen = new Set<string>()
 
-  let cleanedText = text
+  const cleanedText = text
     .replace(/\n+(?:Sources|References|Links):?\s*\n[\s\S]*$/i, '')
     .replace(/\n+\*{0,2}For deeper[^:]*:[\s\S]*$/im, '')
 
@@ -206,7 +206,7 @@ export function extractMagazineSections(text: string): MagazineSection[] {
     }
   }
 
-  const campRe = /\*\*([^*]+(?:camp| side| view)[^*]*)\*\*[🟠🔴🟢]?\s*\n([\s\S]+?)(?=\n\*\*[^*]+(?:camp| side)[^*]*\*\*|\n#{2,3}\s|\n\nThis is|\n\nFor deeper|$)/gim
+  const campRe = /\*\*([^*]+(?:camp| side| view)[^*]*)\*\*[🟠🔴🟢]?\s*\n([\s\S]+?)(?=\n\*\*[^*]+(?:camp| side)[^*]*\*\*|\n#{2,3}\s|\n\nThis is|\n\nFor deeper|$)/gimu
   while ((m = campRe.exec(cleanedText)) !== null) {
     const title = m[1].trim()
     const content = cleanMagazineContent(m[2])
@@ -564,10 +564,10 @@ function extractSongsFromPatterns(text: string): Song[] {
   const seen = new Set<string>()
 
   const patterns: { re: RegExp; titleIdx: number; artistIdx: number }[] = [
-    { re: /"([^"]{2,80})"\s+by\s+([A-Za-z0-9][^,\n\.]{1,50}?)(?:\s*[,\n\.]|$)/gi, titleIdx: 1, artistIdx: 2 },
-    { re: /\*\*([^*]{2,80})\*\*\s+by\s+([A-Za-z0-9][^,\n\.]{1,50}?)(?:\s*[,\n\.]|$)/g, titleIdx: 1, artistIdx: 2 },
-    { re: /(?:^|\n)\s*(?:\d+\.\s*|[-•]\s*)?([^\n\-–—]{2,60}?)\s*[-–—]\s*([A-Za-z0-9][^,\n]{1,50}?)(?:\s*[,\n\.]|$)/gm, titleIdx: 1, artistIdx: 2 },
-    { re: /([A-Za-z0-9][^\-–—\n]{2,60}?)\s+[-–—]\s+([A-Za-z0-9][^,\n]{1,50}?)(?=\s*[,\n\.]|$)/g, titleIdx: 1, artistIdx: 2 },
+    { re: /"([^"]{2,80})"\s+by\s+([A-Za-z0-9][^,\n.]{1,50}?)(?:\s*[,\n.]|$)/gi, titleIdx: 1, artistIdx: 2 },
+    { re: /\*\*([^*]{2,80})\*\*\s+by\s+([A-Za-z0-9][^,\n.]{1,50}?)(?:\s*[,\n.]|$)/g, titleIdx: 1, artistIdx: 2 },
+    { re: /(?:^|\n)\s*(?:\d+\.\s*|[-•]\s*)?([^\n\-–—]{2,60}?)\s*[-–—]\s*([A-Za-z0-9][^,\n]{1,50}?)(?:\s*[,\n.]|$)/gm, titleIdx: 1, artistIdx: 2 },
+    { re: /([A-Za-z0-9][^\-–—\n]{2,60}?)\s+[-–—]\s+([A-Za-z0-9][^,\n]{1,50}?)(?=\s*[,\n.]|$)/g, titleIdx: 1, artistIdx: 2 },
   ]
 
   for (const { re, titleIdx, artistIdx } of patterns) {
@@ -723,7 +723,7 @@ function extractBooksFromPatterns(text: string): Book[] {
   const seen = new Set<string>()
 
   const patterns: { re: RegExp; titleIdx: number; authorIdx: number }[] = [
-    { re: /["""]([^"""]{2,80})["""]\s+by\s+([A-Z][^,\n\.]{1,50}?)(?:\s*[,()\n\.]|$)/gi, titleIdx: 1, authorIdx: 2 },
+    { re: /["""]([^"""]{2,80})["""]\s+by\s+([A-Z][^,\n.]{1,50}?)(?:\s*[,()\n.]|$)/gi, titleIdx: 1, authorIdx: 2 },
     { re: /\*\*([^*]{2,80})\*\*\s+(?:by|—|–)\s+\*?([A-Z][^*\n]{1,50}?)\*?(?:\s*[,()*\n]|$)/g, titleIdx: 1, authorIdx: 2 },
     { re: /(?:^|\n)\s*(?:\d+\.\s*|[-•]\s*)\*{0,2}([^*\n\-–—]{2,80}?)\*{0,2}\s+(?:by|—|–)\s+\*?([A-Z][^*\n]{1,50}?)\*?(?:\s*[,()*\n]|$)/gm, titleIdx: 1, authorIdx: 2 },
   ]