`<ErrorDisplay />`

Surfaces an irrecoverable load error with one or two retry actions. Pass canClearCache when the error is a quota or cache-corruption issue (auto-detected by dendrite's classifyError) — the second button wipes the IndexedDB caches and reloads.

<script setup lang="ts">
import { useNeuron, ErrorDisplay, deleteAllModelCaches } from '@agent-layer-zero/dendrite-vue'

const { error, errorCanClearCache, inferenceMode } = useNeuron({ modelId: '…' })
async function handleClearCache() {
  await deleteAllModelCaches()
  window.location.reload()
}
</script>

<template>
  <ErrorDisplay
    v-if="error"
    :error="error"
    :can-clear-cache="errorCanClearCache"
    :inference-mode="inferenceMode"
    @retry="window.location.reload()"
    @clear-cache="handleClearCache"
  />
</template>

import {
  useNeuron,
  ErrorDisplay,
  deleteAllModelCaches,
} from '@agent-layer-zero/dendrite-react'

export function Demo() {
  const { error, errorCanClearCache, inferenceMode } = useNeuron({ modelId: '…' })
  if (!error) return null
  return (
    <ErrorDisplay
      error={error}
      canClearCache={errorCanClearCache}
      inferenceMode={inferenceMode}
      onRetry={() => window.location.reload()}
      onClearCache={async () => {
        await deleteAllModelCaches()
        window.location.reload()
      }}
    />
  )
}

<div class="alz-error">
  <div class="alz-error__icon">!</div>
  <div class="alz-error__content">
    <p class="alz-error__title">Model Load Failed</p>
    <p class="alz-error__message">…error message…</p>
    <p class="alz-error__mode">Engine: webllm (webgpu)</p>
    <div class="alz-error__actions">
      <button class="alz-error__action">Retry</button>
      <button class="alz-error__action">Clear Cache &amp; Retry</button>
    </div>
  </div>
</div>