Feat/errors tab panel (#8807)

## Summary

Add a dedicated **Errors tab** to the Right Side Panel that displays
prompt-level, node validation, and runtime execution errors in a
unified, searchable, grouped view — replacing the need to rely solely on
modal dialogs for error inspection.

## Changes

- **What**:
  - **New components** (`errors/` directory):
- `TabErrors.vue` — Main error tab with search, grouping by class type,
and canvas navigation (locate node / enter subgraph).
- `ErrorNodeCard.vue` — Renders a single error card with node ID badge,
title, action buttons, and error details.
- `types.ts` — Shared type definitions (`ErrorItem`, `ErrorCardData`,
`ErrorGroup`).
- **`executionStore.ts`** — Added `PromptError` interface,
`lastPromptError` ref and `hasAnyError` computed getter. Clears
`lastPromptError` alongside existing error state on execution start and
graph clear.
- **`rightSidePanelStore.ts`** — Registered `'errors'` as a valid tab
value.
- **`app.ts`** — On prompt submission failure (`PromptExecutionError`),
stores prompt-level errors (when no node errors exist) into
`lastPromptError`. On both runtime execution error and prompt error,
deselects all nodes and opens the errors tab automatically.
- **`RightSidePanel.vue`** — Shows the `'errors'` tab (with ⚠ icon) when
errors exist and no node is selected. Routes to `TabErrors` component.
- **`TopMenuSection.vue`** — Highlights the action bar with a red border
when any error exists, using `hasAnyError`.
- **`SectionWidgets.vue`** — Detects per-node errors by matching
execution IDs to graph node IDs. Shows an error icon (⚠) and "See Error"
button that navigates to the errors tab.
- **`en/main.json`** — Added i18n keys: `errors`, `noErrors`,
`enterSubgraph`, `seeError`, `promptErrors.*`, and `errorHelp*`.
- **Testing**: 6 unit tests (`TabErrors.test.ts`) covering
prompt/node/runtime errors, search filtering, and clipboard copy.
- **Storybook**: 7 stories (`ErrorNodeCard.stories.ts`) for badge
visibility, subgraph buttons, multiple errors, runtime tracebacks, and
prompt-only errors.
- **Breaking**: None
- **Dependencies**: None — uses only existing project dependencies
(`vue-i18n`, `pinia`, `primevue`)

## Related Work

> **Note**: Upstream PR #8603 (`New bottom button and badges`)
introduced a separate `TabError.vue` (singular) that shows per-node
errors when a specific node is selected. Our `TabErrors.vue` (plural)
provides the **global error overview** — a different scope. The two tabs
coexist:
> - `'error'` (singular) → appears when a node with errors is selected →
shows only that node's errors
> - `'errors'` (plural) → appears when no node is selected and errors
exist → shows all errors grouped by class type
>
> A future consolidation of these two tabs may be desirable after design
review.

## Architecture

```
executionStore
├── lastPromptError: PromptError | null     ← NEW (prompt-level errors without node IDs)
├── lastNodeErrors: Record<string, NodeError>  (existing)
├── lastExecutionError: ExecutionError         (existing)
└── hasAnyError: ComputedRef<boolean>       ← NEW (centralized error detection)

TabErrors.vue (errors tab - global view)
├── errorGroups: ComputedRef<ErrorGroup[]>  ← normalizes all 3 error sources
├── filteredGroups                          ← search-filtered view
├── locateNode()                            ← pan canvas to node
├── enterSubgraph()                         ← navigate into subgraph
└── ErrorNodeCard.vue                       ← per-node card with copy/locate actions

types.ts
├── ErrorItem      { message, details?, isRuntimeError? }
├── ErrorCardData  { id, title, nodeId?, errors[] }
└── ErrorGroup     { title, cards[], priority }
```

## Review Focus

1. **Error normalization logic** (`TabErrors.vue` L75–150): Three
different error sources (prompt, node validation, runtime) are
normalized into a common `ErrorGroup → ErrorCardData → ErrorItem`
hierarchy. Edge cases to verify:
- Prompt errors with known vs unknown types (known types use localized
descriptions)
   - Multiple errors on the same node (grouped into one card)
   - Runtime errors with long tracebacks (capped height with scroll)

2. **Canvas navigation** (`TabErrors.vue` L210–250): The `locateNode`
and `enterSubgraph` functions navigate to potentially nested subgraphs.
The double `requestAnimationFrame` is required due to LiteGraph's
asynchronous subgraph switching — worth verifying this timing is
sufficient.

3. **Store getter consolidation**: `hasAnyError` replaces duplicated
logic in `TopMenuSection` and `RightSidePanel`. Confirm that the
reactive dependency chain works correctly (it depends on 3 separate
refs).

4. **Coexistence with upstream `TabError.vue`**: The singular `'error'`
tab (upstream, PR #8603) and our plural `'errors'` tab serve different
purposes but share similar naming. Consider whether a unified approach
is preferred.

## Test Results

```
✓ renders "no errors" state when store is empty
✓ renders prompt-level errors (Group title = error message)
✓ renders node validation errors grouped by class_type
✓ renders runtime execution errors from WebSocket
✓ filters errors based on search query
✓ calls copyToClipboard when copy button is clicked

Test Files  1 passed (1)
     Tests  6 passed (6)
```

## Screenshots (if applicable)
<img width="1238" height="1914" alt="image"
src="https://github.com/user-attachments/assets/ec39b872-cca1-4076-8795-8bc7c05dc665"
/>
<img width="669" height="1028" alt="image"
src="https://github.com/user-attachments/assets/bdcaa82a-34b0-46a5-a08f-14950c5a479b"
/>
<img width="644" height="1005" alt="image"
src="https://github.com/user-attachments/assets/ffef38c6-8f42-4c01-a0de-11709d54b638"
/>
<img width="672" height="505" alt="image"
src="https://github.com/user-attachments/assets/5cff7f57-8d79-4808-a71e-9ad05bab6e17"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8807-Feat-errors-tab-panel-3046d73d36508127981ac670a70da467)
by [Unito](https://www.unito.io)

src/components/rightSidePanel/errors/ErrorNodeCard.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="overflow-hidden">
+    <!-- Card Header (Node ID & Actions) -->
+    <div v-if="card.nodeId" class="flex flex-wrap items-center gap-2 py-2">
+      <span
+        v-if="showNodeIdBadge"
+        class="shrink-0 rounded-md bg-secondary-background-selected px-2 py-0.5 text-[10px] font-mono text-muted-foreground font-bold"
+      >
+        #{{ card.nodeId }}
+      </span>
+      <span
+        v-if="card.nodeTitle"
+        class="flex-1 text-sm text-muted-foreground truncate font-medium"
+      >
+        {{ card.nodeTitle }}
+      </span>
+      <Button
+        v-if="card.isSubgraphNode"
+        variant="secondary"
+        size="sm"
+        class="rounded-lg text-sm shrink-0"
+        @click.stop="emit('enterSubgraph', card.nodeId ?? '')"
+      >
+        {{ t('rightSidePanel.enterSubgraph') }}
+      </Button>
+      <Button
+        variant="textonly"
+        size="icon-sm"
+        class="size-7 text-muted-foreground hover:text-base-foreground shrink-0"
+        @click.stop="emit('locateNode', card.nodeId ?? '')"
+      >
+        <i class="icon-[lucide--locate] size-3.5" />
+      </Button>
+    </div>
+
+    <!-- Multiple Errors within one Card -->
+    <div class="divide-y divide-interface-stroke/20 space-y-4">
+      <!-- Card Content -->
+      <div
+        v-for="(error, idx) in card.errors"
+        :key="idx"
+        class="flex flex-col gap-3"
+      >
+        <!-- Error Message -->
+        <p
+          v-if="error.message"
+          class="m-0 text-sm break-words whitespace-pre-wrap leading-relaxed px-0.5"
+        >
+          {{ error.message }}
+        </p>
+
+        <!-- Traceback / Details -->
+        <div
+          v-if="error.details"
+          :class="
+            cn(
+              'rounded-lg bg-secondary-background-hover p-2.5 overflow-y-auto border border-interface-stroke/30',
+              error.isRuntimeError ? 'max-h-[10lh]' : 'max-h-[6lh]'
+            )
+          "
+        >
+          <p
+            class="m-0 text-xs text-muted-foreground break-words whitespace-pre-wrap font-mono leading-relaxed"
+          >
+            {{ error.details }}
+          </p>
+        </div>
+
+        <Button
+          variant="secondary"
+          size="sm"
+          class="w-full justify-center gap-2 h-8 text-[11px]"
+          @click="handleCopyError(error)"
+        >
+          <i class="icon-[lucide--copy] size-3.5" />
+          {{ t('g.copy') }}
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { cn } from '@/utils/tailwindUtil'
+
+import type { ErrorCardData, ErrorItem } from './types'
+
+const { card, showNodeIdBadge = false } = defineProps<{
+  card: ErrorCardData
+  showNodeIdBadge?: boolean
+}>()
+
+const emit = defineEmits<{
+  locateNode: [nodeId: string]
+  enterSubgraph: [nodeId: string]
+  copyToClipboard: [text: string]
+}>()
+
+const { t } = useI18n()
+
+function handleCopyError(error: ErrorItem) {
+  emit(
+    'copyToClipboard',
+    [error.message, error.details].filter(Boolean).join('\n\n')
+  )
+}
+</script>