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>
2026-03-03 19:40:22 +00:00
parent 0863a66ddc
commit f31e0ba28b
7 changed files with 656 additions and 126 deletions
@@ -0,0 +1,46 @@
+import js from '@eslint/js'
+import tseslint from 'typescript-eslint'
+import pluginVue from 'eslint-plugin-vue'
+import vueParser from 'vue-eslint-parser'
+import globals from 'globals'
+
+export default tseslint.config(
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  ...pluginVue.configs['flat/recommended'],
+  {
+    files: ['src/**/*.vue'],
+    languageOptions: {
+      parser: vueParser,
+      parserOptions: {
+        parser: tseslint.parser,
+        extraFileExtensions: ['.vue'],
+        sourceType: 'module',
+      },
+    },
+  },
+  {
+    files: ['src/**/*.{ts,vue}'],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+      },
+    },
+    rules: {
+      // TypeScript
+      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
+      '@typescript-eslint/no-explicit-any': 'warn',
+
+      // Vue
+      'vue/multi-word-component-names': 'off',
+      'vue/require-default-prop': 'off',
+      'vue/no-v-html': 'warn',
+
+      // General
+      'no-console': ['warn', { allow: ['warn', 'error'] }],
+    },
+  },
+  {
+    ignores: ['dist/', 'node_modules/', 'e2e/', 'server/'],
+  },
+)
@@ -26,18 +26,24 @@
    "vue-router": "^5.0.3"
  },
  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@playwright/test": "^1.49.0",
    "@tailwindcss/vite": "^4.2.1",
    "@vitejs/plugin-vue": "^6.0.4",
    "duck-duck-scrape": "^2.2.7",
    "eslint": "^10.0.2",
+    "eslint-plugin-vue": "^10.8.0",
+    "globals": "^17.4.0",
+    "happy-dom": "^20.8.3",
    "rss-parser": "^3.13.0",
    "tailwindcss": "^4.2.1",
    "tsx": "^4.21.0",
    "typescript": "~5.8.0",
+    "typescript-eslint": "^8.56.1",
    "vite": "^7.3.1",
    "vite-plugin-pwa": "^1.2.0",
-    "@playwright/test": "^1.49.0",
    "vitest": "^4.0.18",
+    "vue-eslint-parser": "^10.4.0",
    "vue-tsc": "^3.2.5"
  }
 }
@@ -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(
@@ -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 {
@@ -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>
@@ -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 },
  ]