@kitn.ai/ui 0.15.1 → 0.17.0

package/src/agent-tooling/mcp/tools/theme.ts

@@ -0,0 +1,340 @@
+import { z } from 'zod';
+import type { Tool } from './types';
+
+/**
+ * theme — produce a `--kai-*` CSS token override block from a brand color or
+ * description. Tokens are sourced exclusively from the real names in theme.css.
+ *
+ * Real --kai-color-* names (verified against repo-root theme.css):
+ *   --kai-color-primary            → brand color
+ *   --kai-color-primary-foreground → AA-contrast fg (white or black)
+ *   --kai-color-ring               → focus ring (brand color)
+ *   --kai-color-accent             → tinted accent surface
+ *   --kai-color-accent-foreground  → text on accent surface
+ */
+
+// ─── hex color utilities (no deps) ──────────────────────────────────────────
+
+/** Parse #rgb or #rrggbb → { r, g, b } 0-255. Returns null on failure. */
+function parseHex(hex: string): { r: number; g: number; b: number } | null {
+  const s = hex.trim().replace(/^#/, '');
+  if (s.length === 3) {
+    const r = parseInt(s[0] + s[0], 16);
+    const g = parseInt(s[1] + s[1], 16);
+    const b = parseInt(s[2] + s[2], 16);
+    if (isNaN(r) || isNaN(g) || isNaN(b)) return null;
+    return { r, g, b };
+  }
+  if (s.length === 6) {
+    const r = parseInt(s.slice(0, 2), 16);
+    const g = parseInt(s.slice(2, 4), 16);
+    const b = parseInt(s.slice(4, 6), 16);
+    if (isNaN(r) || isNaN(g) || isNaN(b)) return null;
+    return { r, g, b };
+  }
+  return null;
+}
+
+function toHex(r: number, g: number, b: number): string {
+  return (
+    '#' +
+    [r, g, b]
+      .map((v) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, '0'))
+      .join('')
+  );
+}
+
+/**
+ * Relative luminance (WCAG 2.1) — used for AA contrast check.
+ * Returns 0 (black) to 1 (white).
+ */
+function relativeLuminance(r: number, g: number, b: number): number {
+  const lin = (c: number) => {
+    const s = c / 255;
+    return s <= 0.04045 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+  };
+  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+}
+
+/** White or black for maximum contrast against the brand color. */
+function foreground(r: number, g: number, b: number): '#ffffff' | '#000000' {
+  const lum = relativeLuminance(r, g, b);
+  // Contrast against white = (1 + 0.05) / (lum + 0.05)
+  // Contrast against black = (lum + 0.05) / (0 + 0.05)
+  const contrastWhite = 1.05 / (lum + 0.05);
+  const contrastBlack = (lum + 0.05) / 0.05;
+  return contrastWhite >= contrastBlack ? '#ffffff' : '#000000';
+}
+
+/** Lighten a color by a ratio 0-1 (moves toward white). */
+function lighten(r: number, g: number, b: number, ratio: number): string {
+  return toHex(
+    r + (255 - r) * ratio,
+    g + (255 - g) * ratio,
+    b + (255 - b) * ratio,
+  );
+}
+
+/** Darken a color by a ratio 0-1 (moves toward black). */
+function darken(r: number, g: number, b: number, ratio: number): string {
+  return toHex(r * (1 - ratio), g * (1 - ratio), b * (1 - ratio));
+}
+
+/** Produce a tinted accent surface (very light tint of the brand color). */
+function accentSurface(r: number, g: number, b: number): string {
+  return lighten(r, g, b, 0.88);
+}
+
+/** Dark-mode variant: lighten the brand so it reads well on dark backgrounds. */
+function darkModeBrand(r: number, g: number, b: number): string {
+  const lum = relativeLuminance(r, g, b);
+  // If brand is already light enough for dark bg, keep it; otherwise lighten.
+  if (lum > 0.25) return toHex(r, g, b);
+  return lighten(r, g, b, 0.35);
+}
+
+/** Dark-mode accent surface: subtle dark tint of brand. */
+function darkAccentSurface(r: number, g: number, b: number): string {
+  return darken(r, g, b, 0.75);
+}
+
+// ─── keyword → hex fallback map ──────────────────────────────────────────────
+
+const KEYWORD_COLORS: Record<string, string> = {
+  blue:    '#3b82f6',
+  navy:    '#1e3a8a',
+  sky:     '#0ea5e9',
+  cyan:    '#06b6d4',
+  teal:    '#14b8a6',
+  green:   '#22c55e',
+  emerald: '#10b981',
+  lime:    '#84cc16',
+  yellow:  '#eab308',
+  amber:   '#f59e0b',
+  orange:  '#f97316',
+  red:     '#ef4444',
+  rose:    '#f43f5e',
+  pink:    '#ec4899',
+  purple:  '#a855f7',
+  violet:  '#7c3aed',
+  indigo:  '#6366f1',
+  slate:   '#64748b',
+  gray:    '#6b7280',
+  zinc:    '#71717a',
+  neutral: '#737373',
+  stone:   '#78716c',
+  white:   '#f8fafc',
+  black:   '#0f172a',
+};
+
+const DEFAULT_BRAND = '#6366f1'; // indigo — kit's own brand feel
+
+/**
+ * Resolve a brand hex from input.
+ * Returns { hex, note } where note explains the assumption if we guessed.
+ */
+function resolveBrand(
+  brand?: string,
+  description?: string,
+): { hex: string; r: number; g: number; b: number; note: string } {
+  // 1. Explicit hex
+  if (brand) {
+    const parsed = parseHex(brand);
+    if (parsed) {
+      return { hex: brand.startsWith('#') ? brand : `#${brand}`, ...parsed, note: '' };
+    }
+    // brand provided but unparseable — fall through with a note
+    const fallback = parseHex(DEFAULT_BRAND)!;
+    return {
+      hex: DEFAULT_BRAND,
+      ...fallback,
+      note: `Could not parse \`${brand}\` as a hex color — defaulted to **${DEFAULT_BRAND}** (indigo). Pass a valid \`#rgb\` or \`#rrggbb\` value to use your color.`,
+    };
+  }
+
+  // 2. Description → keyword match
+  if (description) {
+    const lower = description.toLowerCase();
+    for (const [keyword, hex] of Object.entries(KEYWORD_COLORS)) {
+      if (lower.includes(keyword)) {
+        const parsed = parseHex(hex)!;
+        return {
+          hex,
+          ...parsed,
+          note: `No brand color provided — inferred **${hex}** (${keyword}) from description. Override with \`brand: '#rrggbb'\` to use an exact color.`,
+        };
+      }
+    }
+    // Description present but no keyword matched → tasteful default
+    const parsed = parseHex(DEFAULT_BRAND)!;
+    return {
+      hex: DEFAULT_BRAND,
+      ...parsed,
+      note: `No recognizable color keyword in description — defaulted to **${DEFAULT_BRAND}** (indigo). Override with \`brand: '#rrggbb'\` for an exact color.`,
+    };
+  }
+
+  // 3. Nothing provided → kit brand default
+  const parsed = parseHex(DEFAULT_BRAND)!;
+  return {
+    hex: DEFAULT_BRAND,
+    ...parsed,
+    note: `No brand color or description provided — defaulted to **${DEFAULT_BRAND}** (indigo, the kit's own brand). Pass \`brand: '#rrggbb'\` to use your color.`,
+  };
+}
+
+// ─── CSS block builders ───────────────────────────────────────────────────────
+
+interface TokenSet {
+  primary: string;
+  primaryFg: string;
+  ring: string;
+  accent: string;
+  accentFg: string;
+}
+
+function buildTokenSet(r: number, g: number, b: number): TokenSet {
+  const primary = toHex(r, g, b);
+  const primaryFg = foreground(r, g, b);
+  const accent = accentSurface(r, g, b);
+  // foreground on the very-light accent surface
+  const accentFgColor = foreground(
+    ...([accent]
+      .map((h) => parseHex(h)!)
+      .flatMap((c) => [c.r, c.g, c.b]) as [number, number, number]),
+  );
+  return {
+    primary,
+    primaryFg,
+    ring: primary,
+    accent,
+    accentFg: accentFgColor,
+  };
+}
+
+function buildDarkTokenSet(r: number, g: number, b: number): TokenSet {
+  const darkBrand = darkModeBrand(r, g, b);
+  const parsed = parseHex(darkBrand)!;
+  const primary = darkBrand;
+  const primaryFg = foreground(parsed.r, parsed.g, parsed.b);
+  const accent = darkAccentSurface(r, g, b);
+  const accentFgParsed = parseHex(accent)!;
+  return {
+    primary,
+    primaryFg,
+    ring: darkBrand,
+    accent,
+    accentFg: foreground(accentFgParsed.r, accentFgParsed.g, accentFgParsed.b),
+  };
+}
+
+function cssBlock(selector: string, tokens: TokenSet): string {
+  return [
+    `${selector} {`,
+    `  --kai-color-primary:             ${tokens.primary};`,
+    `  --kai-color-primary-foreground:  ${tokens.primaryFg};`,
+    `  --kai-color-ring:                ${tokens.ring};`,
+    `  --kai-color-accent:              ${tokens.accent};`,
+    `  --kai-color-accent-foreground:   ${tokens.accentFg};`,
+    `}`,
+  ].join('\n');
+}
+
+// ─── Tool definition ─────────────────────────────────────────────────────────
+
+export const theme: Tool = {
+  name: 'theme',
+  description:
+    'Generate a --kai-* CSS token override block from a brand color or description. ' +
+    'Paste the block into your global stylesheet to brand every kai-* element in one shot.',
+
+  inputSchema: z.object({
+    brand: z
+      .string()
+      .optional()
+      .describe('Brand color as #rgb or #rrggbb hex (e.g. "#7c3aed")'),
+    description: z
+      .string()
+      .optional()
+      .describe(
+        'Natural-language description of your product (used to infer a color when `brand` is omitted)',
+      ),
+    mode: z
+      .enum(['light', 'dark', 'both'])
+      .optional()
+      .describe(
+        '"light" → :root only (default); "dark" → .dark only; "both" → :root + .dark',
+      ),
+  }),
+
+  handler: async (args) => {
+    const {
+      brand,
+      description,
+      mode = 'light',
+    } = args as { brand?: string; description?: string; mode?: 'light' | 'dark' | 'both' };
+
+    const { hex, r, g, b, note } = resolveBrand(brand, description);
+
+    const lightTokens = buildTokenSet(r, g, b);
+    const darkTokens = buildDarkTokenSet(r, g, b);
+
+    // Which blocks to emit
+    const blocks: string[] = [];
+    if (mode === 'light' || mode === 'both') {
+      blocks.push(cssBlock(':root', lightTokens));
+    }
+    if (mode === 'dark' || mode === 'both') {
+      blocks.push(cssBlock('.dark', darkTokens));
+    }
+
+    const cssOutput = blocks.join('\n\n');
+
+    const noteLabel = note.startsWith('Could not parse') ? 'Note' : 'Assumption';
+    const noteSection = note ? `\n> **${noteLabel}:** ${note}\n` : '';
+
+    const text = `\
+## AI/UI theme override — \`${hex}\`
+${noteSection}
+Paste this block into your **global stylesheet** (before the \`@import\` of \`@kitn.ai/ui\` or after — order doesn't matter since \`--kai-*\` tokens are resolved at runtime via \`var()\` fallbacks). For \`mode:'dark'\` overrides, the \`.dark\` class must be on a parent element (e.g. \`<html class="dark">\`) for them to take effect.
+
+\`\`\`css
+${cssOutput}
+\`\`\`
+
+### How it works
+
+The \`--kai-color-*\` tokens pierce the Shadow DOM via CSS custom-property inheritance. Every \`kai-*\` element reads them through a \`var(--kai-color-primary, <default>)\` fallback chain defined in \`theme.css\`. Setting them on \`:root\` (or a wrapper element) is enough to rebrand everything globally.
+
+**Tokens emitted** (verified names from \`theme.css\`):
+- \`--kai-color-primary\` — primary brand color
+- \`--kai-color-primary-foreground\` — AA-contrast foreground on primary (auto-selected black/white)
+- \`--kai-color-ring\` — keyboard focus ring
+- \`--kai-color-accent\` — tinted accent surface
+- \`--kai-color-accent-foreground\` — text on accent surface
+
+### Apply to a subtree only
+
+\`\`\`css
+/* scope to a specific container instead of :root */
+.my-chat-widget {
+${blocks[0]
+    ?.split('\n')
+    .slice(1, -1)
+    .map((l) => '  ' + l)
+    .join('\n')}
+}
+\`\`\`
+
+### Fine-tune the full palette
+
+The theme editor lets you tweak every token interactively and copy the result:
+
+**→ [Open Theme Editor](https://ui.kitn.ai/theme/editor/)**
+
+For the complete token list see the [theming guide](https://ui.kitn.ai/guides/theming/) and the source \`theme.css\` in the package root.
+`;
+
+    return { content: [{ type: 'text', text }] };
+  },
+};

package/src/agent-tooling/mcp/tools/types.ts

@@ -0,0 +1,14 @@
+import type { z } from 'zod';
+import type { CallToolResult } from '@modelcontextprotocol/sdk/types.js';
+
+/**
+ * The shape every AI/UI MCP tool module exports. The server reads `inputSchema`
+ * (a zod object) to advertise the tool over the protocol — converting it to JSON
+ * Schema — and calls `handler` when the tool is invoked.
+ */
+export interface Tool {
+  name: string;
+  description: string;
+  inputSchema: z.ZodObject<z.ZodRawShape>;
+  handler: (args: Record<string, unknown>) => Promise<CallToolResult>;
+}

package/src/agent-tooling/registry.ts

@@ -0,0 +1,41 @@
+import type { Integration, Archetype } from './types';
+import openrouter from './integrations/openrouter';
+import vercelAiSdk from './integrations/vercel-ai-sdk';
+import langgraph from './integrations/langgraph';
+import cloudflare from './integrations/cloudflare';
+import ollama from './integrations/ollama';
+import mastra from './integrations/mastra';
+import pi from './integrations/pi';
+import pydanticAi from './integrations/pydantic-ai';
+import mock from './integrations/mock';
+import { archetypes as _archetypes } from './archetypes';
+
+export const integrations: Integration[] = [
+  openrouter,
+  vercelAiSdk,
+  langgraph,
+  cloudflare,
+  ollama,
+  mastra,
+  pi,
+  pydanticAi,
+  mock,
+];
+
+export const archetypes: Archetype[] = _archetypes;
+
+export function getIntegration(id: string): Integration | undefined {
+  return integrations.find((i) => i.id === id);
+}
+
+export function getArchetype(id: string): Archetype | undefined {
+  return archetypes.find((a) => a.id === id);
+}
+
+export function listIntegrations(): Integration[] {
+  return integrations;
+}
+
+export function listArchetypes(): Archetype[] {
+  return archetypes;
+}

package/src/agent-tooling/types.ts

@@ -0,0 +1,30 @@
+import { z } from 'zod';
+
+export const Category = z.enum(['provider', 'gateway', 'framework', 'harness', 'mock']);
+export const Language = z.enum(['ts', 'python']);
+export const StreamFormat = z.enum(['openai-sse', 'ai-sdk', 'native']);
+export const Framework = z.enum(['html', 'react', 'next', 'vue', 'svelte', 'fastapi', 'express', 'worker', 'tanstack-start']);
+export const Placement = z.enum(['side', 'full-page', 'docked-widget', 'inline']);
+
+export const IntegrationSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  category: Category,
+  language: Language,
+  streamFormat: StreamFormat,
+  envVars: z.array(z.string()).default([]),
+  routeTemplates: z.record(z.string(), z.string()), // keyed by Framework value → code string
+  streamMapping: z.string(),                        // prose: how the stream maps to messages
+  runNote: z.string(),
+  docsSlug: z.string(),
+});
+export type Integration = z.infer<typeof IntegrationSchema>;
+
+export const ArchetypeSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  components: z.array(z.string()),     // kai-* tags, e.g. ['kai-chat', 'kai-sources']
+  defaultPlacement: Placement,
+  docsSlug: z.string(),
+});
+export type Archetype = z.infer<typeof ArchetypeSchema>;

package/src/components/chat-thread.tsx

@@ -1,10 +1,9 @@
 import { createSignal, For, Show } from 'solid-js';
 import { ChatConfig, useChatConfig } from '../primitives/chat-config';
 import { ChatContainer, ChatContainerContent, ChatContainerScrollAnchor } from './chat-container';
-import { Message, MessageAvatar, MessageContent, MessageActionBar } from './message';
-import { Reasoning, ReasoningTrigger, ReasoningContent } from './reasoning';
-import { Tool } from './tool';
-import { Attachments, Attachment, AttachmentPreview, AttachmentInfo, type AttachmentData } from './attachments';
+import { Message, MessageAvatar, MessageBody } from './message';
+import { type AttachmentData } from './attachments';
+import { createMessageFeedback, type MessageActionDetail } from '../primitives/message-feedback';
 import { ModelSwitcher } from './model-switcher';
 import { ScrollButton } from './scroll-button';
 import {
@@ -95,7 +94,7 @@ export interface ChatThreadProps {
   onSubmit?: (detail: { value: string; attachments: AttachmentData[] }) => void;
   onSuggestionClick?: (value: string) => void;
   onModelChange?: (modelId: string) => void;
-  onMessageAction?: (detail: { messageId: string; action: string }) => void;
+  onMessageAction?: (detail: MessageActionDetail) => void;
   onSearch?: () => void;
   onVoice?: () => void;
   onSlashSelect?: (command: SlashCommandItem) => void;
@@ -104,6 +103,15 @@ export interface ChatThreadProps {
 export function ChatThread(props: ChatThreadProps) {
   const outer = useChatConfig();
   const reveal = () => (props.actionsReveal === 'hover' ? 'hover' : 'always');
+  // Feedback (copy + vote) state lives ABOVE the per-message <For>, so streaming
+  // re-renders (a fresh `messages` array ref per chunk) don't wipe it.
+  // The copy/feedback toasts scope to the chat (this thread's root) so they appear
+  // in-chat rather than at the page top.
+  let rootEl: HTMLElement | undefined;
+  const feedback = createMessageFeedback({
+    emit: (detail) => props.onMessageAction?.(detail),
+    target: () => rootEl,
+  });
   const [internal, setInternal] = createSignal(props.value ?? '');
   const [attachments, setAttachments] = createSignal<AttachmentData[]>([]);
   const current = () => props.value ?? internal();
@@ -122,7 +130,7 @@ export function ChatThread(props: ChatThreadProps) {
 
   return (
     <ChatConfig proseSize={props.proseSize} codeTheme={props.codeTheme} codeHighlight={props.codeHighlight !== false} portalMount={outer.portalMount()}>
-      <div class={`flex h-full flex-col bg-background ${props.class ?? ''}`}>
+      <div ref={(e) => (rootEl = e as HTMLElement)} class={`flex h-full flex-col bg-background ${props.class ?? ''}`}>
         <Show when={showHeader()}>
           <header class="flex h-14 shrink-0 items-center justify-between border-b border-border px-5">
             <div class="flex items-center gap-2">
@@ -168,35 +176,19 @@ export function ChatThread(props: ChatThreadProps) {
               <For each={props.messages}>
                 {(m) => {
                   const body = (
-                    <>
-                      <Show when={m.reasoning}>
-                        <Reasoning class="mb-2 w-full">
-                          <ReasoningTrigger>{m.reasoning!.label ?? 'Reasoning'}</ReasoningTrigger>
-                          <ReasoningContent markdown>{m.reasoning!.text}</ReasoningContent>
-                        </Reasoning>
-                      </Show>
-                      <For each={m.tools ?? []}>{(tp) => <Tool toolPart={tp} class="mb-2 w-full" />}</For>
-                      <Show when={m.attachments?.length}>
-                        <Attachments variant="inline" class={m.role === 'user' ? 'mb-2 justify-end' : 'mb-2'}>
-                          <For each={m.attachments!}>
-                            {(att) => (<Attachment data={att}><AttachmentPreview /><AttachmentInfo /></Attachment>)}
-                          </For>
-                        </Attachments>
-                      </Show>
-                      <MessageContent
-                        markdown={m.role === 'assistant'}
-                        class={m.role === 'user' ? 'bg-muted text-primary max-w-[85%] rounded-2xl px-4 py-2' : 'bg-transparent p-0'}
-                      >
-                        {m.content}
-                      </MessageContent>
-                      <Show when={m.actions?.length}>
-                        <MessageActionBar
-                          actions={m.actions!}
-                          reveal={reveal()}
-                          onAction={(action) => props.onMessageAction?.({ messageId: m.id, action })}
-                        />
-                      </Show>
-                    </>
+                    <MessageBody
+                      content={m.content}
+                      reasoning={m.reasoning}
+                      tools={m.tools}
+                      attachments={m.attachments}
+                      isUser={m.role === 'user'}
+                      markdown={m.role === 'assistant'}
+                      actions={m.actions}
+                      actionsReveal={reveal()}
+                      activeFeedback={feedback.resolveFeedback(m)}
+                      copied={feedback.isCopied(m.id)}
+                      onAction={(action) => feedback.handleAction(m, action)}
+                    />
                   );
                   const rowGroup = reveal() === 'hover' ? 'group ' : '';
                   return (

package/src/components/choice-card.tsx

@@ -15,11 +15,12 @@ import { cn } from '../utils/cn';
 import { Button } from '../ui/button';
 import { HoverCard } from '../ui/hover-card';
 import { Card } from './card';
+import { DismissedStub } from './dismissed-stub';
 import type { CardEnvelope, CardEvent, CardHost, CardResolution } from '../primitives/card-contract';
 import { useCardResolution } from './use-card-resolution';
 import { emitCardEvent } from '../primitives/card-routing';
 import { useCardHost } from '../primitives/card-host';
-import { Check } from 'lucide-solid';
+import { Check, X } from 'lucide-solid';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Types (choice.schema.json) — see src/primitives/card-schemas/choice.schema.json
@@ -49,6 +50,7 @@ export interface ChoiceCardData {
   options: ChoiceOption[]; // 1..N
   allowOther?: ChoiceAllowOther; // free-text escape
   submitLabel?: string; // label for the Submit button (default 'Submit')
+  dismissible?: boolean; // show a close affordance that emits `dismiss`
 }
 
 export type ChoiceCardEnvelope = CardEnvelope<'choice', ChoiceCardData>;
@@ -310,6 +312,15 @@ export function ChoiceCard(props: ChoiceCardProps): JSX.Element {
     });
   };
 
+  // Dismiss: emit `dismiss` AND optimistically flip to a `dismissed` resolution so
+  // the card collapses to its re-openable stub immediately.
+  const onDismiss = (): void => {
+    if (res.isResolved()) return;
+    emit({ kind: 'dismiss', cardId: local.cardId });
+    res.setLocal({ kind: 'dismissed' });
+  };
+  const onReopen = (): void => emit({ kind: 'reopen', cardId: local.cardId });
+
   const focusRadio = (index: number): void => {
     const radios = groupRef?.querySelectorAll<HTMLElement>('[role="radio"]');
     radios?.[index]?.focus();
@@ -353,6 +364,10 @@ export function ChoiceCard(props: ChoiceCardProps): JSX.Element {
           return <Card heading={local.heading} errorMessage="The card failed to render." />;
         }}
       >
+        <Show
+          when={!res.isDeferred()}
+          fallback={<DismissedStub type={CHOICE_CARD_TYPE} title={local.heading} onReopen={onReopen} />}
+        >
         <Card heading={local.heading}>
           <div class={cn('flex flex-col gap-3', local.class)}>
             <Show when={local.data?.prompt}>
@@ -421,12 +436,26 @@ export function ChoiceCard(props: ChoiceCardProps): JSX.Element {
                 </div>
               </Show>
 
-              <Button type="button" class="self-end" disabled={!canSubmit()} onClick={submit}>
-                {submitLabel()}
-              </Button>
+              <div class="flex w-full flex-wrap items-center justify-between gap-2">
+                <Show when={local.data?.dismissible === true}>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon-sm"
+                    aria-label="Dismiss"
+                    onClick={onDismiss}
+                  >
+                    <X size={16} aria-hidden="true" />
+                  </Button>
+                </Show>
+                <Button type="button" class="ml-auto" disabled={!canSubmit()} onClick={submit}>
+                  {submitLabel()}
+                </Button>
+              </div>
             </Show>
           </div>
         </Card>
+        </Show>
       </ErrorBoundary>
     </Show>
   );