entari-plugin-hyw 3.4.2__py3-none-any.whl → 3.5.0rc1__py3-none-any.whl

entari_plugin_hyw/card-ui/src/components/MarkdownContent.vue

@@ -0,0 +1,330 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { marked, type Tokens } from 'marked'
+import hljs from 'highlight.js/lib/core'
+// Import only common languages to reduce bundle size
+import python from 'highlight.js/lib/languages/python'
+import javascript from 'highlight.js/lib/languages/javascript'
+import typescript from 'highlight.js/lib/languages/typescript'
+import json from 'highlight.js/lib/languages/json'
+import bash from 'highlight.js/lib/languages/bash'
+import css from 'highlight.js/lib/languages/css'
+import xml from 'highlight.js/lib/languages/xml'
+import java from 'highlight.js/lib/languages/java'
+import cpp from 'highlight.js/lib/languages/cpp'
+import go from 'highlight.js/lib/languages/go'
+import rust from 'highlight.js/lib/languages/rust'
+import sql from 'highlight.js/lib/languages/sql'
+import markdown from 'highlight.js/lib/languages/markdown'
+import shell from 'highlight.js/lib/languages/shell'
+import yaml from 'highlight.js/lib/languages/yaml'
+import properties from 'highlight.js/lib/languages/properties'
+
+hljs.registerLanguage('python', python)
+hljs.registerLanguage('javascript', javascript)
+hljs.registerLanguage('js', javascript)
+hljs.registerLanguage('typescript', typescript)
+hljs.registerLanguage('ts', typescript)
+hljs.registerLanguage('json', json)
+hljs.registerLanguage('bash', bash)
+hljs.registerLanguage('sh', bash)
+hljs.registerLanguage('shell', shell)
+hljs.registerLanguage('zsh', bash)
+hljs.registerLanguage('css', css)
+hljs.registerLanguage('html', xml)
+hljs.registerLanguage('xml', xml)
+hljs.registerLanguage('java', java)
+hljs.registerLanguage('cpp', cpp)
+hljs.registerLanguage('c', cpp)
+hljs.registerLanguage('go', go)
+hljs.registerLanguage('rust', rust)
+hljs.registerLanguage('sql', sql)
+hljs.registerLanguage('markdown', markdown)
+hljs.registerLanguage('md', markdown)
+hljs.registerLanguage('yaml', yaml)
+hljs.registerLanguage('yml', yaml)
+hljs.registerLanguage('properties', properties)
+hljs.registerLanguage('ini', properties)
+hljs.registerLanguage('conf', properties)
+
+import 'highlight.js/styles/github.css'
+
+const props = defineProps<{
+  markdown: string
+  numSearchRefs?: number
+  numPageRefs?: number
+  bare?: boolean  // When true, tables and code blocks render without window decoration
+}>()
+
+// Configure marked with syntax highlighting
+marked.setOptions({
+  breaks: true,
+  gfm: true,
+})
+
+// Custom renderer for code blocks with technical layout
+const renderer = new marked.Renderer()
+renderer.code = ({ text, lang }: Tokens.Code): string => {
+  const language = lang || 'text'
+  let highlighted = ''
+  if (lang && hljs.getLanguage(lang)) {
+    try {
+      highlighted = hljs.highlight(text, { language: lang }).value
+    } catch {
+      highlighted = hljs.highlightAuto(text).value
+    }
+  } else {
+    highlighted = hljs.highlightAuto(text).value
+  }
+
+  // Bare mode: just the code, no window decoration
+  if (props.bare) {
+    return `<pre class="!mt-0 !mb-0 !rounded-none !bg-gray-50 !p-4 overflow-x-auto border-b border-gray-100"><code class="hljs language-${language} text-[13px] leading-relaxed font-mono">${highlighted}</code></pre>`
+  }
+
+  // Dynamic Icon mapping
+  const getLangIcon = (l: string) => {
+    const map: Record<string, { icon: string, color: string }> = {
+      'python': { icon: 'mdi:language-python', color: 'text-blue-500' },
+      'javascript': { icon: 'mdi:language-javascript', color: 'text-yellow-500' },
+      'js': { icon: 'mdi:language-javascript', color: 'text-yellow-500' },
+      'typescript': { icon: 'mdi:language-typescript', color: 'text-blue-600' },
+      'ts': { icon: 'mdi:language-typescript', color: 'text-blue-600' },
+      'bash': { icon: 'mdi:terminal', color: 'text-green-500' },
+      'sh': { icon: 'mdi:terminal', color: 'text-green-500' },
+      'shell': { icon: 'mdi:terminal', color: 'text-green-500' },
+      'json': { icon: 'mdi:code-json', color: 'text-yellow-600' },
+      'html': { icon: 'mdi:language-html5', color: 'text-orange-500' },
+      'css': { icon: 'mdi:language-css3', color: 'text-blue-500' },
+      'yaml': { icon: 'mdi:file-cog', color: 'text-purple-500' },
+      'sql': { icon: 'mdi:database', color: 'text-red-500' }
+    }
+    return map[l] || { icon: 'mdi:code-braces', color: 'text-red-500' }
+  }
+  const langInfo = getLangIcon(language)
+
+  return `
+    <div class="my-6 space-y-1 group">
+      <div class="flex items-center justify-between px-3 py-1.5 bg-gray-50 ">
+        <div class="flex items-center gap-2">
+          <Icon icon="${langInfo.icon}" class="${langInfo.color} text-sm" />
+          <span class="text-[10px] font-black text-gray-700 uppercase tracking-widest">${language}</span>
+        </div>
+        <div class="text-gray-500 text-[9px] font-mono tracking-tighter tabular-nums">
+          Source Code
+        </div>
+      </div>
+      <div class="">
+        <pre class="!mt-0 !mb-0 !rounded-none !bg-white !p-4 overflow-x-auto"><code class="hljs language-${language} text-[13px] leading-relaxed font-mono">${highlighted}</code></pre>
+      </div>
+    </div>
+  `
+}
+
+marked.use({ renderer })
+
+// Process markdown and convert citations to badges
+const processedHtml = computed(() => {
+  let md = props.markdown || ''
+  
+  // Remove References section at end
+  md = md.replace(/(?:^|\n)\s*(?:#{1,3}|\*\*)\s*(?:References|Citations|Sources)[\s\S]*$/i, '')
+  
+  // Convert markdown to HTML
+  let html = marked.parse(md) as string
+  
+  // Render <summary> tags as technical highlight blocks
+  html = html.replace(/<summary>([\s\S]*?)<\/summary>/g, (_, content) => {
+    return `
+      <div class="my-8 group">
+        <div class="flex items-center justify-between px-3 py-1.5 bg-gray-50 ">
+          <div class="flex items-center gap-2">
+            <Icon icon="mdi:lightning-bolt" class="text-red-500 text-sm" />
+            <span class="text-[10px] font-black text-gray-700 uppercase tracking-widest">Summary</span>
+          </div>
+          <div class="text-gray-500 text-[9px] font-mono tracking-tighter tabular-nums">
+            Insight
+          </div>
+        </div>
+        <div class="p-5 text-[15px] leading-relaxed text-gray-800 font-medium bg-white ">
+          ${content}
+        </div>
+      </div>
+    `
+  })
+  
+  // Wrap tables in crisp technical borders
+  html = html.replace(/<table[^>]*>([\s\S]*?)<\/table>/g, (_, content) => {
+    // Parse table content to simple structure
+    const rows = content.match(/<tr[^>]*>[\s\S]*?<\/tr>/g) || []
+    
+    // Extract headers
+    const headerRow = rows[0] || ''
+    const headers = (headerRow.match(/<th[^>]*>([\s\S]*?)<\/th>/g) || []).map((h: string) => {
+      const alignMatch = h.match(/align="([^"]*)"/)
+      const align = alignMatch ? alignMatch[1] : 'left'
+      const text = h.replace(/<[^>]+>/g, '')
+      return { text, align }
+    })
+
+    // Extract body rows
+    const bodyRows = rows.slice(1).map((row: string) => {
+      return (row.match(/<td[^>]*>([\s\S]*?)<\/td>/g) || []).map((c: string, i: number) => {
+        const alignMatch = c.match(/align="([^"]*)"/)
+        const align = alignMatch ? alignMatch[1] : (headers[i]?.align || 'left') 
+        const innerHtml = c.replace(/^<td[^>]*>|<\/td>$/g, '')
+        return { html: innerHtml, align }
+      })
+    })
+
+    const containerClass = "w-full bg-white text-[12px] select-text";
+      
+    let gridHtml = `<div class="${containerClass}">`
+    
+    const allRows: any[] = [headers.map((h: any) => ({ html: h.text, align: h.align })), ...bodyRows];
+
+    allRows.forEach((row: any[], rowIndex: number) => {
+      const isHeader = rowIndex === 0;
+      const rowBg = isHeader 
+        ? 'bg-white text-gray-900 font-black uppercase tracking-tight' 
+        : (rowIndex % 2 === 0 ? 'bg-white' : 'bg-gray-50/30');
+      const borderB = rowIndex < allRows.length - 1 ? 'border-b border-gray-200' : '';
+        
+      gridHtml += `<div class="flex w-full ${rowBg} ${borderB}">`;
+      
+      row.forEach((cell: any, colIndex: number) => {
+        const justify = cell.align === 'center' ? 'justify-center text-center' : (cell.align === 'right' ? 'justify-end text-right' : 'justify-start');
+        const borderClass = colIndex === row.length - 1 ? '' : 'border-r border-gray-100';
+        
+        gridHtml += `<div class="flex-1 py-2.5 px-3 min-w-0 break-words flex items-center leading-tight ${justify} ${borderClass}">
+          <span>${cell.html}</span>
+        </div>`;
+      });
+      gridHtml += `</div>`;
+    });
+    gridHtml += `</div>`;
+
+    if (props.bare) {
+      return `<div class="overflow-x-auto border-b border-gray-200">${gridHtml}</div>`
+    }
+
+    return `
+      <div class="my-6 group">
+        <div class="overflow-x-auto bg-white p-0 border-t border-gray-100">
+          ${gridHtml}
+        </div>
+      </div>
+    `
+  })
+  
+  // Convert [N] citations to rectangular sharp badges
+  html = html.replace(/\[(\d+)\]/g, (_, n) => {
+    const num = parseInt(n)
+    return `<span class="relative -top-1.5 text-[10px] font-bold text-blue-600 mx-0.5 cursor-default select-none transition-all">${num}</span>`
+  })
+  
+  return html
+})
+</script>
+
+<template>
+  <div ref="contentRef"
+       class="prose prose-slate max-w-none 
+              prose-headings:text-gray-900 prose-headings:font-black prose-headings:mb-2 prose-headings:mt-6 prose-headings:tracking-tight
+              prose-p:text-gray-800 prose-p:leading-relaxed prose-p:my-3
+              prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline
+              prose-code:bg-gray-100 prose-code:px-1 prose-code:py-0.5 prose-code:rounded-none prose-code:text-[0.9em] prose-code:font-mono prose-code:text-gray-900
+              prose-pre:bg-gray-50 prose-pre:border prose-pre:border-gray-200 prose-pre:rounded-none prose-pre:p-0
+              prose-img:rounded-none prose-img:my-6 prose-img:max-h-[400px] prose-img:w-auto prose-img:object-contain prose-img:border prose-img:border-gray-200 prose-img:
+              prose-ol:list-decimal prose-ol:pl-4 prose-ol:list-outside
+              [&>*:first-child]:!mt-0"
+       v-html="processedHtml">
+  </div>
+</template>
+
+<style>
+/* Highlight.js theme - minimal */
+.hljs {
+  background: transparent !important;
+  padding: 0 !important;
+}
+
+/* Custom List Styling - Premium technical bullet */
+.prose ul {
+  list-style: none !important;
+  padding-left: 0.25rem !important;
+  margin-top: 0.75rem !important;
+  margin-bottom: 0.75rem !important;
+}
+
+.prose ul > li {
+  position: relative !important;
+  padding-left: 1.5rem !important;
+  margin-top: 0.5rem !important;
+  margin-bottom: 0.5rem !important;
+  line-height: 1.6 !important;
+}
+
+.prose ul > li::before {
+  content: "" !important;
+  position: absolute !important;
+  left: 0 !important;
+  top: 0.6em !important;
+  width: 6px !important;
+  height: 6px !important;
+  background-color: #ef4444 !important; /* Red-500 */
+  border-radius: 0 !important;
+}
+
+/* Nested list styling */
+.prose ul ul {
+  margin-top: 0.25rem !important;
+  margin-bottom: 0.25rem !important;
+  padding-left: 1rem !important;
+}
+
+.prose ul ul > li {
+  padding-left: 1.25rem !important;
+  margin-top: 0.25rem !important;
+  margin-bottom: 0.25rem !important;
+}
+
+.prose ul ul > li::before {
+  width: 5px !important;
+  height: 5px !important;
+  background-color: #ef4444 !important; /* Red-500 - same as parent, slightly smaller */
+  top: 0.65em !important;
+}
+
+/* Custom Blockquote Styling - Dual Red Lines */
+.prose blockquote {
+  border-left: none !important;
+  padding-left: 1rem !important;
+  margin-left: 0 !important;
+  position: relative !important;
+  font-style: italic !important;
+  color: #1f2937 !important; /* gray-800 */
+}
+
+.prose blockquote::before {
+  content: "" !important;
+  position: absolute !important;
+  left: 0 !important;
+  top: 0 !important;
+  bottom: 0 !important;
+  width: 3px !important;
+  background-color: #ef4444 !important; /* Red-500 - thick line */
+}
+
+
+
+/* Ensure images don't have artifacts */
+.prose img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+.prose pre {
+  border: none !important;
+}
+</style>

entari_plugin_hyw/card-ui/src/components/SectionCard.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import MarkdownContent from './MarkdownContent.vue'
+
+const props = defineProps<{
+  title: string
+  content: string
+  level: number
+  numSearchRefs?: number
+  numPageRefs?: number
+  index: number
+}>()
+</script>
+
+<template>
+  <div class="mb-5">
+    <!-- Normal Text Section: macOS Window Style -->
+    <div class="rounded-none overflow-hidden border border-gray-300 bg-white/70 backdrop-blur-xl">
+      <!-- Section Window Header with traffic lights + title on right -->
+      <div class="flex items-center justify-between px-3 py-2 bg-gray-100/80 backdrop-blur-lg border-b border-gray-200/40">
+        <div class="flex items-center gap-1.5">
+          <!-- macOS Traffic Lights -->
+          <div class="flex gap-1.5 mr-2">
+            <div class="w-2.5 h-2.5 rounded-full bg-[#ff5f56] shadow-md"></div>
+            <div class="w-2.5 h-2.5 rounded-full bg-[#ffbd2e] shadow-md"></div>
+            <div class="w-2.5 h-2.5 rounded-full bg-[#27c93f] shadow-md"></div>
+          </div>
+        </div>
+        <span class="text-[11px] font-mono text-gray-700/70 uppercase font-bold tracking-wider">{{ title }}</span>
+      </div>
+      
+      <!-- Section Content -->
+      <div class="p-5 bg-white/40 backdrop-blur-sm">
+        <MarkdownContent 
+          :markdown="content"
+          :num-search-refs="numSearchRefs"
+          :num-page-refs="numPageRefs"
+        />
+      </div>
+    </div>
+  </div>
+</template>

entari_plugin_hyw/card-ui/src/components/StageCard.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Icon } from '@iconify/vue'
+import type { Stage } from '../types'
+
+const failedImages = ref<Record<string, boolean>>({})
+
+function handleImageError(url: string) {
+  failedImages.value[url] = true
+}
+
+const props = defineProps<{
+  stage: Stage
+  isFirst?: boolean
+  isLast?: boolean
+  prevStageName?: string
+}>()
+
+function getDomain(url: string): string {
+  try {
+    return new URL(url).hostname.replace('www.', '')
+  } catch {
+    return url
+  }
+}
+
+function getFavicon(url: string): string {
+  const domain = getDomain(url)
+  return `https://www.google.com/s2/favicons?domain=${domain}&sz=32`
+}
+
+function formatTime(seconds: number): string {
+  return `${seconds.toFixed(2)}s`
+}
+
+function formatCost(dollars: number): string {
+  return dollars > 0 ? `$${dollars.toFixed(6)}` : '$0'
+}
+
+function getModelShort(model: string): string {
+  const short = model.includes('/') ? model.split('/').pop() || model : model
+  return short.length > 25 ? short.slice(0, 23) + '…' : short
+}
+
+function getStageTheme(name?: string) {
+  if (!name) return themes['default']
+  const key = name.toLowerCase()
+  
+  if (key.includes('search')) return themes['search']
+  if (key.includes('crawl') || key.includes('page')) return themes['crawler']
+  if (key.includes('agent')) return themes['agent']
+  if (key.includes('instruct')) return themes['instruct']
+  if (key.includes('vision')) return themes['vision']
+  
+  return themes['default']
+}
+
+const themes: Record<string, any> = {
+  'search': { color: 'text-blue-600', bg: 'bg-blue-50', line: 'bg-red-300', iconBg: 'bg-blue-100/50', dotBg: 'bg-red-500', icon: 'mdi:magnify' },
+  'crawler': { color: 'text-orange-600', bg: 'bg-orange-50', line: 'bg-red-300', iconBg: 'bg-orange-100/50', dotBg: 'bg-red-500', icon: 'mdi:web' },
+  'agent': { color: 'text-purple-600', bg: 'bg-purple-50', line: 'bg-red-300', iconBg: 'bg-white/80', dotBg: 'bg-red-500', icon: 'mdi:robot' },
+  'instruct': { color: 'text-red-600', bg: 'bg-red-50', line: 'bg-red-300', iconBg: 'bg-white/80', dotBg: 'bg-red-500', icon: 'mdi:lightning-bolt' },
+  'vision': { color: 'text-green-600', bg: 'bg-green-50', line: 'bg-red-300', iconBg: 'bg-green-100/50', dotBg: 'bg-red-500', icon: 'mdi:eye' },
+  'default': { color: 'text-gray-600', bg: 'bg-gray-50', line: 'bg-red-300', iconBg: 'bg-gray-100/50', dotBg: 'bg-red-500', icon: 'mdi:circle' }
+}
+
+function getIcon(name: string): string {
+  const key = name.toLowerCase()
+  if (key.includes('search')) return 'mdi:magnify'
+  if (key.includes('crawl') || key.includes('page')) return 'mdi:web'
+  if (key.includes('agent')) return 'mdi:robot'
+  if (key.includes('instruct')) return 'mdi:lightning-bolt'
+  if (key.includes('vision')) return 'mdi:eye'
+  return 'mdi:circle'
+}
+
+function getModelLogo(model: string): string | undefined {
+  if (!model) return undefined
+  const m = model.toLowerCase()
+  if (m.includes('openai') || m.includes('gpt')) return 'logos/openai.svg'
+  if (m.includes('claude') || m.includes('anthropic')) return 'logos/anthropic.svg'
+  if (m.includes('gemini') || m.includes('google')) return 'logos/google.svg'
+  if (m.includes('deepseek')) return 'logos/deepseek.png'
+  if (m.includes('huggingface')) return 'logos/huggingface.png'
+  if (m.includes('mistral')) return 'logos/mistral.png'
+  if (m.includes('perplexity')) return 'logos/perplexity.svg'
+  if (m.includes('cerebras')) return 'logos/cerebras.svg'
+  if (m.includes('grok')) return 'logos/grok.png'
+  if (m.includes('qwen')) return 'logos/qwen.png'
+  if (m.includes('minimax')) return 'logos/minimax.png'
+  if (m.includes('nvidia') || m.includes('nvida')) return 'logos/nvida.png'
+  if (m.includes('azure') || m.includes('microsoft')) return 'logos/microsoft.svg'
+  if (m.includes('xai')) return 'logos/xai.png'
+  if (m.includes('xiaomi')) return 'logos/xiaomi.png'
+  if (m.includes('zai')) return 'logos/zai.png'
+  return undefined
+}
+</script>
+
+<template>
+  <div class="relative">
+    <!-- Content -->
+    <div class="flex-1 min-w-0 pl-2">
+        <div class="rounded-none overflow-hidden bg-white">
+        
+          <!-- Header -->
+          <div :class="['bg-white px-3 py-1.5 flex items-center justify-between gap-2']">
+            <div class="flex items-center gap-2">
+              <div :class="['w-6 h-6 flex items-center justify-center shrink-0 overflow-hidden border border-gray-100', getStageTheme(stage.name).iconBg, getStageTheme(stage.name).color]">
+                <img v-if="getModelLogo(stage.model)" :src="getModelLogo(stage.model)" class="w-4 h-4 object-contain" />
+                <Icon v-else :icon="getIcon(stage.name)" class="text-xs" />
+              </div>
+              <div class="flex flex-col">
+                <span class="font-black text-xs text-gray-900 uppercase tracking-tight">{{ stage.name }}</span>
+                <span class="text-[10px] font-mono text-gray-400 tabular-nums tracking-tighter">{{ getModelShort(stage.model) }}</span>
+              </div>
+            </div>
+            <div v-if="stage.time > 0 || stage.cost > 0" class="text-[10px] text-gray-400 font-mono flex items-center justify-end gap-2 leading-tight min-w-[120px]">
+              <span v-if="stage.cost > 0">{{ formatCost(stage.cost) }}</span>
+              <span v-if="stage.time > 0 && stage.cost > 0" class="text-gray-300">·</span>
+              <span v-if="stage.time > 0">{{ formatTime(stage.time) }}</span>
+            </div>
+          </div>
+
+
+          <div v-if="stage.references?.length || stage.image_references?.length" class="bg-white pl-8 relative">
+            <div v-if="stage.references?.length" class="divide-y divide-gray-50 relative z-10">
+                <a v-for="(ref, idx) in stage.references" :key="idx" 
+                   :href="ref.url" target="_blank" 
+                   class="flex items-start gap-2 pr-3 py-2 hover:bg-gray-50 transition-colors group">
+                  <!-- Favicon - Aligned with Title -->
+                  <img :src="getFavicon(ref.url)" class="w-3 h-3 rounded-none shrink-0 object-contain mt-[3px]">
+                  
+                  <!-- Content: Title and Domain -->
+                  <div class="flex-1 min-w-0 flex flex-col">
+                    <div class="flex items-center gap-2">
+                      <span class="flex-1 text-xs font-bold text-gray-800 truncate leading-tight tracking-tight">{{ ref.title }}</span>
+                      <!-- Neutralized Citation Design -->
+                      <span class="shrink-0 text-[10px] font-bold text-blue-600 flex items-center justify-center">{{ idx + 1 }}</span>
+                    </div>
+                    <div class="text-[10px] font-mono text-gray-400 truncate mt-0.5 tracking-tighter">{{ getDomain(ref.url) }}</div>
+                  </div>
+                </a>
+            </div>
+
+            <!-- Image Search Results -->
+            <div v-if="stage.image_references?.length" class="pr-2 py-2 relative z-10">
+              <div class="grid grid-cols-3 gap-1">
+                <a v-for="(img, idx) in stage.image_references" :key="idx" 
+                   v-show="!failedImages[img.url]"
+                   :href="img.url" target="_blank" 
+                   class="relative aspect-square overflow-hidden bg-white border border-gray-200 transition-colors">
+                  <img :src="img.thumbnail || img.url" 
+                       @error="handleImageError(img.url)"
+                       class="w-full h-full object-cover">
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+    </div>
+  </div>
+</template>

entari_plugin_hyw/card-ui/src/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+
+createApp(App).mount('#app')

entari_plugin_hyw/card-ui/src/style.css

@@ -0,0 +1,8 @@
+@import "tailwindcss";
+@plugin "daisyui";
+@plugin "@tailwindcss/typography";
+
+/* Custom styles */
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}

entari_plugin_hyw/card-ui/src/types.ts

@@ -0,0 +1,51 @@
+// Type definitions for render data
+// Python only passes raw data, all processing happens in frontend
+
+export interface Stage {
+    name: string
+    model: string
+    provider: string
+    icon_name?: string  // Icon identifier (e.g., "google", "openai")
+    time: number        // Time in seconds (raw number)
+    cost: number        // Cost in dollars (raw number)
+    references?: Reference[]
+    image_references?: ImageReference[]
+    crawled_pages?: CrawledPage[]
+}
+
+export interface Reference {
+    title: string
+    url: string
+}
+
+export interface ImageReference {
+    title: string
+    url: string
+    thumbnail?: string
+}
+
+export interface CrawledPage {
+    title: string
+    url: string
+}
+
+export interface Stats {
+    total_time?: number
+    vision_duration?: number
+}
+
+export interface Flags {
+    has_vision: boolean
+    has_search: boolean
+}
+
+// Raw data from Python - minimal processing
+export interface RenderData {
+    markdown: string          // Raw markdown content
+    stages: Stage[]
+    references: Reference[]   // All references for citation
+    page_references: Reference[]
+    image_references: ImageReference[]
+    stats: Stats
+    total_time: number
+}

entari_plugin_hyw/card-ui/tsconfig.app.json

@@ -0,0 +1,16 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "types": ["vite/client"],
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}

entari_plugin_hyw/card-ui/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

entari_plugin_hyw/card-ui/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

entari_plugin_hyw/card-ui/vite.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import tailwindcss from '@tailwindcss/vite'
+import { viteSingleFile } from 'vite-plugin-singlefile'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    tailwindcss(),
+    viteSingleFile(),
+  ],
+  build: {
+    outDir: '../assets/card-dist',
+    emptyOutDir: true,
+  },
+})