entari-plugin-hyw 2.2.5__py3-none-any.whl → 3.5.0rc6__py3-none-any.whl

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

@@ -0,0 +1,386 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { marked, type Tokens } from 'marked'
+import katex from 'katex'
+import 'katex/dist/katex.min.css'
+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
+  }
+
+  // Add line numbers to code
+  const addLineNumbers = (code: string): string => {
+    const lines = code.split('\n')
+    return lines.map((line, i) => 
+      `<span class="code-line"><span class="line-number">${i + 1}</span><span class="line-content">${line}</span></span>`
+    ).join('')
+  }
+  
+  const highlightedWithLines = addLineNumbers(highlighted)
+
+  // Bare mode: just the code, no window decoration
+  if (props.bare) {
+    return `<pre class="!mt-0 !mb-0 !rounded-none !bg-gray-50 !p-0 border-b border-gray-100 code-with-lines"><code class="hljs language-${language} text-[17.5px] leading-snug font-mono">${highlightedWithLines}</code></pre>`
+  }
+
+  // Dynamic Icon mapping
+
+
+  return `
+    <div class="my-6 space-y-1 group">
+      <div class="h-4 w-24 ml-auto" style="background-color: var(--theme-color);"></div>
+      <div class="">
+        <pre class="!mt-0 !mb-0 !rounded-none !bg-white !p-0 code-with-lines"><code class="hljs language-${language} text-[17.5px] leading-snug font-mono">${highlightedWithLines}</code></pre>
+      </div>
+    </div>
+  `
+}
+
+marked.use({ renderer })
+
+// Render LaTeX math with KaTeX
+function renderMath(tex: string, displayMode: boolean): string {
+  try {
+    return katex.renderToString(tex, {
+      displayMode,
+      throwOnError: false,
+      strict: false,
+    })
+  } catch {
+    return `<code>${tex}</code>`
+  }
+}
+
+// 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, '')
+  
+  // Protect math blocks from markdown parsing by replacing with placeholders
+  const mathBlocks: { placeholder: string; html: string }[] = []
+  let mathIndex = 0
+  
+  // Block math: $$...$$ or \[...\]
+  md = md.replace(/\$\$([\s\S]+?)\$\$|\\\[([\s\S]+?)\\\]/g, (_, tex1, tex2) => {
+    const tex = tex1 || tex2
+    const placeholder = `%%MATH_BLOCK_${mathIndex++}%%`
+    mathBlocks.push({ placeholder, html: `<div class="my-4 overflow-x-auto">${renderMath(tex.trim(), true)}</div>` })
+    return placeholder
+  })
+  
+  // Inline math: $...$ or \(...\) (but not $$)
+  md = md.replace(/\$([^\$\n]+?)\$|\\\((.+?)\\\)/g, (_, tex1, tex2) => {
+    const tex = tex1 || tex2
+    const placeholder = `%%MATH_INLINE_${mathIndex++}%%`
+    mathBlocks.push({ placeholder, html: renderMath(tex.trim(), false) })
+    return placeholder
+  })
+  
+  // Convert markdown to HTML
+  let html = marked.parse(md) as string
+  
+  // Restore math blocks
+  for (const { placeholder, html: mathHtml } of mathBlocks) {
+    html = html.replace(placeholder, mathHtml)
+  }
+  
+  // Render <summary> tags as technical highlight blocks
+  html = html.replace(/<summary>([\s\S]*?)<\/summary>/g, (_, content) => {
+    return `
+       <div class="my-8 group shadow-sm shadow-black/10">
+        <div class="h-4 w-full" style="background-color: var(--theme-color);"></div>
+        <div class="p-6 text-[19px] leading-relaxed font-medium bg-white" style="color: var(--text-body)">
+          ${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-[16.5px] 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-800 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-3.5 px-4 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="border-b border-gray-200">${gridHtml}</div>`
+    }
+
+    return `
+      <div class="my-6 group">
+        <div class="bg-white p-0 border-t border-gray-100">
+          ${gridHtml}
+        </div>
+      </div>
+    `
+  })
+  
+  // Convert [N] citations to small square badges with shadow
+  html = html.replace(/(\s*)\[(\d+)\]/g, (_, _space, n) => {
+    const num = parseInt(n)
+    return `<sup class="inline-flex items-center justify-center w-[15px] h-[15px] text-[10px] font-bold cursor-default select-none ml-0.5 mr-0 align-middle" style="background-color: var(--theme-color); color: var(--header-text-color); box-shadow: 0 1px 2px 0 rgba(0,0,0,0.15)">${num}</sup>`
+  })
+  
+  // Style <u> underline tags with theme-colored solid underline
+  html = html.replace(/<u>([^<]*)<\/u>/g, (_, content) => {
+    return `<span class="underline decoration-[3px] underline-offset-[6px]" style="text-decoration-color: var(--theme-color)">${content}</span>`
+  })
+  
+  return html
+})
+</script>
+
+<template>
+  <div ref="contentRef"
+       class="prose prose-slate max-w-none prose-lg
+              prose-headings:font-bold prose-headings:mb-3 prose-headings:mt-8 prose-headings:tracking-tight
+              prose-p:leading-7 prose-p:my-4 prose-p:text-[20px] prose-li:text-[20px]
+              prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline
+              prose-code:bg-gray-100 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-none prose-code:text-[0.85em] prose-code:font-mono
+              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-ol:list-decimal prose-ol:pl-7 prose-ol:list-outside prose-ol:my-5
+              prose-li:my-2.5 prose-li:leading-7
+              [&>*:first-child]:!mt-0"
+       style="--prose-headings: var(--text-primary); --prose-body: var(--text-body); --prose-bold: var(--text-primary); --prose-code: var(--text-body)"
+       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: 1rem !important;
+  margin-bottom: 1rem !important;
+}
+
+.prose ul > li {
+  position: relative !important;
+  padding-left: 1.5rem !important;
+  margin-top: 0.75rem !important;
+  margin-bottom: 0.75rem !important;
+  line-height: 1.6 !important;
+}
+
+.prose ul > li::before {
+  content: "" !important;
+  position: absolute !important;
+  left: 0 !important;
+  top: 0.6em !important;
+  width: 8px !important;
+  height: 8px !important;
+  background-color: var(--theme-color, #ef4444) !important; /* Theme color */
+  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: 6px !important;
+  height: 6px !important;
+  background-color: var(--theme-color, #ef4444) !important; /* Theme color - 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: var(--text-body, #3a3a3c) !important; /* Premium reading color */
+}
+
+.prose blockquote::before {
+  content: "" !important;
+  position: absolute !important;
+  left: 0 !important;
+  top: 0 !important;
+  bottom: 0 !important;
+  width: 5px !important;
+  background-color: var(--theme-color, #ef4444) !important; /* Theme color - thick line */
+}
+
+
+
+/* Ensure images don't have artifacts */
+.prose img {
+  display: block;
+  margin-left: 0;
+  margin-right: auto;
+}
+.prose pre {
+  border: none !important;
+}
+
+/* Code line numbers - Modern minimalist style */
+.code-with-lines code {
+  display: block;
+  padding: 1.25em 0;
+  background: white;
+}
+.code-with-lines .code-line {
+  display: flex;
+  align-items: stretch;
+}
+.code-with-lines .line-number {
+  flex-shrink: 0;
+  width: 36px;
+  padding: 0.1em 8px 0.1em 4px;
+  text-align: right;
+  color: var(--text-muted, #9ca3af);
+  background: white;
+  border-right: 1px solid #e5e7eb;
+  user-select: none;
+  font-size: 11px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+}
+.code-with-lines .line-content {
+  flex: 1;
+  padding: 0.1em 1.25em 0.1em 1em;
+  white-space: pre-wrap;
+  word-break: break-all;
+  background: white;
+}
+</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,237 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { Icon } from '@iconify/vue'
+import type { Stage } from '../types'
+
+const props = defineProps<{
+  stage: Stage
+  isFirst?: boolean
+  isLast?: boolean
+  prevStageName?: string
+  refOffset?: number
+}>()
+
+const failedImages = ref<Record<string, boolean>>({})
+const imageHeights = ref<Record<string, number>>({})
+
+function handleImageError(url: string) {
+  failedImages.value[url] = true
+}
+
+function handleImageLoad(url: string, event: Event) {
+  const img = event.target as HTMLImageElement
+  if (img.naturalWidth && img.naturalHeight) {
+    // Store aspect ratio as height per unit width
+    imageHeights.value[url] = img.naturalHeight / img.naturalWidth
+  }
+}
+
+// Compute two columns for masonry layout
+const imageColumns = computed(() => {
+  const images = props.stage.image_references || []
+  const leftColumn: typeof images = []
+  const rightColumn: typeof images = []
+  let leftHeight = 0
+  let rightHeight = 0
+
+  for (const img of images) {
+    if (failedImages.value[img.url]) continue
+    
+    // Get aspect ratio (default to 1 if not loaded yet)
+    const aspectRatio = imageHeights.value[img.url] || 1
+    
+    // Add to shorter column
+    if (leftHeight <= rightHeight) {
+      leftColumn.push(img)
+      leftHeight += aspectRatio
+    } else {
+      rightColumn.push(img)
+      rightHeight += aspectRatio
+    }
+  }
+
+  return { leftColumn, rightColumn }
+})
+
+
+
+
+
+function getDomain(url: string): string {
+  try {
+    const urlObj = new URL(url)
+    const hostname = urlObj.hostname.replace('www.', '')
+    const pathname = urlObj.pathname === '/' ? '' : urlObj.pathname
+    return hostname + pathname
+  } 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', iconBg: 'bg-blue-100/50', icon: 'mdi:magnify' },
+  'crawler': { color: 'text-orange-600', bg: 'bg-orange-50', iconBg: 'bg-orange-100/50', icon: 'mdi:web' },
+  'agent': { color: 'text-purple-600', bg: 'bg-purple-50', iconBg: 'bg-white/80', icon: 'mdi:robot' },
+  'instruct': { color: 'text-red-600', bg: 'bg-red-50', iconBg: 'bg-white/80', icon: 'mdi:lightning-bolt' },
+  'vision': { color: 'text-purple-600', bg: 'bg-purple-50', iconBg: 'bg-white/80', icon: 'mdi:eye' },
+  'default': { color: 'text-gray-600', bg: 'bg-gray-50', iconBg: 'bg-gray-100/50', 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-4 py-2.5 flex items-center justify-between gap-3']">
+            <div class="flex items-center gap-3">
+              <div :class="['w-8 h-8 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-5 h-5 object-contain" />
+                <Icon v-else :icon="getIcon(stage.name)" class="text-lg" />
+              </div>
+              <div class="flex flex-col">
+                <span class="font-black text-[18px] text-gray-800 uppercase tracking-tight">{{ stage.name }}</span>
+                <span class="text-[15.5px] font-mono tabular-nums tracking-tighter" style="color: var(--text-muted)">{{ getModelShort(stage.model) }}</span>
+              </div>
+            </div>
+            <div v-if="stage.time > 0 || stage.cost > 0" class="text-[15.5px] font-mono flex items-center justify-end gap-2 leading-tight min-w-[120px]" style="color: var(--text-muted)">
+              <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 || stage.crawled_pages?.length" class="bg-white pl-11 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-3 pr-3 py-3 hover:bg-gray-50 transition-colors group">
+                  <!-- Favicon - Aligned with Title -->
+                  <img :src="getFavicon(ref.url)" class="w-4 h-4 rounded-none shrink-0 object-contain mt-[4px]">
+                  
+                  <!-- 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-[18px] font-bold text-gray-700 truncate leading-tight tracking-tight">{{ ref.title }}</span>
+                      <!-- Square Badge with Shadow -->
+                      <span class="shrink-0 w-[18px] h-[18px] text-[11px] font-bold flex items-center justify-center" style="background-color: var(--theme-color); color: var(--header-text-color); box-shadow: 0 1px 3px 0 rgba(0,0,0,0.15)">{{ (refOffset || 0) + idx + 1 }}</span>
+                    </div>
+                    <div class="text-[15.5px] font-mono truncate mt-0.5 tracking-tighter" style="color: var(--text-muted)">{{ getDomain(ref.url) }}</div>
+                  </div>
+                </a>
+            </div>
+
+            <!-- Image Search Results - True Masonry Layout -->
+            <div v-if="stage.image_references?.length" class="pr-3 py-3 relative z-10">
+              <div class="flex gap-2">
+                <!-- Left Column -->
+                <div class="flex-1 flex flex-col gap-2">
+                  <a v-for="(img, idx) in imageColumns.leftColumn" :key="`left-${img.url}-${idx}`" 
+                     :href="img.url" target="_blank" 
+                     class="relative overflow-hidden transition-all hover:opacity-90 group block">
+                    <img :src="img.thumbnail || img.url" 
+                         @load="handleImageLoad(img.url, $event)"
+                         @error="handleImageError(img.url)"
+                         class="w-full h-auto block group-hover:scale-[1.02] transition-transform">
+                  </a>
+                </div>
+                <!-- Right Column -->
+                <div class="flex-1 flex flex-col gap-2">
+                  <a v-for="(img, idx) in imageColumns.rightColumn" :key="`right-${img.url}-${idx}`" 
+                     :href="img.url" target="_blank" 
+                     class="relative overflow-hidden transition-all hover:opacity-90 group block">
+                    <img :src="img.thumbnail || img.url" 
+                         @load="handleImageLoad(img.url, $event)"
+                         @error="handleImageError(img.url)"
+                         class="w-full h-auto block group-hover:scale-[1.02] transition-transform">
+                  </a>
+                </div>
+              </div>
+            </div>
+
+            <div v-if="stage.crawled_pages?.length" class="divide-y divide-gray-50 relative z-10">
+                <a v-for="(page, idx) in stage.crawled_pages" :key="idx" 
+                   :href="page.url" target="_blank" 
+                   class="flex items-start gap-3 pr-3 py-3 hover:bg-gray-50 transition-colors group">
+                  <img :src="getFavicon(page.url)" class="w-4 h-4 rounded-none shrink-0 object-contain mt-[4px]">
+                  <div class="flex-1 min-w-0 flex flex-col">
+                    <div class="flex items-center gap-2">
+                      <span class="flex-1 text-[18px] font-bold text-gray-700 truncate leading-tight tracking-tight">{{ page.title }}</span>
+                      <!-- Square Badge with Shadow -->
+                      <span class="shrink-0 w-[18px] h-[18px] text-[11px] font-bold flex items-center justify-center" style="background-color: var(--theme-color); color: var(--header-text-color); box-shadow: 0 1px 3px 0 rgba(0,0,0,0.15)">{{ (refOffset || 0) + (stage.references?.length || 0) + idx + 1 }}</span>
+                    </div>
+                    <div class="text-[15.5px] font-mono truncate mt-0.5 tracking-tighter" style="color: var(--text-muted)">{{ getDomain(page.url) }}</div>
+                  </div>
+                </a>
+            </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')