entari-plugin-hyw 3.5.0rc1__py3-none-any.whl → 3.5.0rc2__py3-none-any.whl

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

@@ -1,6 +1,9 @@
 <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'
@@ -77,45 +80,29 @@ renderer.code = ({ text, lang }: Tokens.Code): string => {
     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-4 overflow-x-auto border-b border-gray-100"><code class="hljs language-${language} text-[13px] leading-relaxed font-mono">${highlighted}</code></pre>`
+    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
-  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="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-4 overflow-x-auto"><code class="hljs language-${language} text-[13px] leading-relaxed font-mono">${highlighted}</code></pre>
+        <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>
   `
@@ -123,6 +110,19 @@ renderer.code = ({ text, lang }: Tokens.Code): string => {
 
 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 || ''
@@ -130,23 +130,40 @@ const processedHtml = computed(() => {
   // 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">
-        <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 ">
+       <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 text-gray-700 font-medium bg-white">
           ${content}
         </div>
       </div>
@@ -177,7 +194,7 @@ const processedHtml = computed(() => {
       })
     })
 
-    const containerClass = "w-full bg-white text-[12px] select-text";
+    const containerClass = "w-full bg-white text-[16.5px] select-text";
       
     let gridHtml = `<div class="${containerClass}">`
     
@@ -186,7 +203,7 @@ const processedHtml = computed(() => {
     allRows.forEach((row: any[], rowIndex: number) => {
       const isHeader = rowIndex === 0;
       const rowBg = isHeader 
-        ? 'bg-white text-gray-900 font-black uppercase tracking-tight' 
+        ? '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' : '';
         
@@ -196,7 +213,7 @@ const processedHtml = computed(() => {
         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}">
+        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>`;
       });
@@ -205,22 +222,27 @@ const processedHtml = computed(() => {
     gridHtml += `</div>`;
 
     if (props.bare) {
-      return `<div class="overflow-x-auto border-b border-gray-200">${gridHtml}</div>`
+      return `<div class="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">
+        <div class="bg-white p-0 border-t border-gray-100">
           ${gridHtml}
         </div>
       </div>
     `
   })
   
-  // Convert [N] citations to rectangular sharp badges
+  // Convert [N] citations to small square badges with shadow
   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 `<sup class="inline-flex items-center justify-center w-[15px] h-[15px] text-[10px] font-bold cursor-default select-none ml-1 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
@@ -229,14 +251,15 @@ const processedHtml = computed(() => {
 
 <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
+       class="prose prose-slate max-w-none prose-lg
+              prose-headings:text-gray-800 prose-headings:font-bold prose-headings:mb-3 prose-headings:mt-8 prose-headings:tracking-tight
+              prose-p:text-gray-800 prose-p:leading-7 prose-p:my-4 prose-p:text-[20px] prose-li:text-[20px] prose-li:text-gray-800
               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-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-code:text-gray-800
               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
+              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"
        v-html="processedHtml">
   </div>
@@ -253,15 +276,15 @@ const processedHtml = computed(() => {
 .prose ul {
   list-style: none !important;
   padding-left: 0.25rem !important;
-  margin-top: 0.75rem !important;
-  margin-bottom: 0.75rem !important;
+  margin-top: 1rem !important;
+  margin-bottom: 1rem !important;
 }
 
 .prose ul > li {
   position: relative !important;
   padding-left: 1.5rem !important;
-  margin-top: 0.5rem !important;
-  margin-bottom: 0.5rem !important;
+  margin-top: 0.75rem !important;
+  margin-bottom: 0.75rem !important;
   line-height: 1.6 !important;
 }
 
@@ -270,9 +293,9 @@ const processedHtml = computed(() => {
   position: absolute !important;
   left: 0 !important;
   top: 0.6em !important;
-  width: 6px !important;
-  height: 6px !important;
-  background-color: #ef4444 !important; /* Red-500 */
+  width: 8px !important;
+  height: 8px !important;
+  background-color: var(--theme-color, #ef4444) !important; /* Theme color */
   border-radius: 0 !important;
 }
 
@@ -290,9 +313,9 @@ const processedHtml = computed(() => {
 }
 
 .prose ul ul > li::before {
-  width: 5px !important;
-  height: 5px !important;
-  background-color: #ef4444 !important; /* Red-500 - same as parent, slightly smaller */
+  width: 6px !important;
+  height: 6px !important;
+  background-color: var(--theme-color, #ef4444) !important; /* Theme color - same as parent, slightly smaller */
   top: 0.65em !important;
 }
 
@@ -312,8 +335,8 @@ const processedHtml = computed(() => {
   left: 0 !important;
   top: 0 !important;
   bottom: 0 !important;
-  width: 3px !important;
-  background-color: #ef4444 !important; /* Red-500 - thick line */
+  width: 5px !important;
+  background-color: var(--theme-color, #ef4444) !important; /* Theme color - thick line */
 }
 
 
@@ -321,10 +344,42 @@ const processedHtml = computed(() => {
 /* Ensure images don't have artifacts */
 .prose img {
   display: block;
-  margin-left: auto;
+  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/StageCard.vue

@@ -14,11 +14,15 @@ const props = defineProps<{
   isFirst?: boolean
   isLast?: boolean
   prevStageName?: string
+  refOffset?: number
 }>()
 
 function getDomain(url: string): string {
   try {
-    return new URL(url).hostname.replace('www.', '')
+    const urlObj = new URL(url)
+    const hostname = urlObj.hostname.replace('www.', '')
+    const pathname = urlObj.pathname === '/' ? '' : urlObj.pathname
+    return hostname + pathname
   } catch {
     return url
   }
@@ -56,12 +60,12 @@ function getStageTheme(name?: string) {
 }
 
 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' }
+  '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 {
@@ -104,18 +108,18 @@ function getModelLogo(model: string): string | undefined {
         <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 :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-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>
+                <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-[10px] text-gray-400 font-mono flex items-center justify-end gap-2 leading-tight min-w-[120px]">
+            <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>
@@ -123,39 +127,55 @@ function getModelLogo(model: string): string | undefined {
           </div>
 
 
-          <div v-if="stage.references?.length || stage.image_references?.length" class="bg-white pl-8 relative">
+          <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-2 pr-3 py-2 hover:bg-gray-50 transition-colors group">
+                   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-3 h-3 rounded-none shrink-0 object-contain mt-[3px]">
+                  <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-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>
+                      <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-[10px] font-mono text-gray-400 truncate mt-0.5 tracking-tighter">{{ getDomain(ref.url) }}</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 -->
-            <div v-if="stage.image_references?.length" class="pr-2 py-2 relative z-10">
-              <div class="grid grid-cols-3 gap-1">
+            <div v-if="stage.image_references?.length" class="pr-3 py-3 relative z-10">
+              <div class="grid grid-cols-2 gap-2 items-start">
                 <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">
+                   class="relative overflow-hidden transition-all hover:opacity-90 group">
                   <img :src="img.thumbnail || img.url" 
                        @error="handleImageError(img.url)"
-                       class="w-full h-full object-cover">
+                       class="w-full h-auto block group-hover:scale-[1.02] transition-transform">
                 </a>
               </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>

entari_plugin_hyw/card-ui/src/test_regex.js

@@ -0,0 +1,103 @@
+
+const stripPrefixBeforeH1 = (text) => {
+    const h1Match = text.match(/^#\s+/m)
+    if (h1Match && h1Match.index !== undefined) {
+        return text.substring(h1Match.index)
+    }
+    return text
+}
+
+const dedent = (text) => {
+    const lines = text.split('\n')
+    // Find minimum indentation of non-empty lines
+    let minIndent = Infinity
+    for (const line of lines) {
+        if (line.trim().length === 0) continue
+        const leadingSpace = line.match(/^\s*/)?.[0].length || 0
+        if (leadingSpace < minIndent) minIndent = leadingSpace
+    }
+
+    if (minIndent === Infinity || minIndent === 0) return text
+
+    return lines.map(line => {
+        if (line.trim().length === 0) return ''
+        return line.substring(minIndent)
+    }).join('\n')
+}
+
+const parse = (rawMd) => {
+    if (!rawMd) return []
+
+    const md = stripPrefixBeforeH1(rawMd)
+
+    let content = md.replace(/^#\s+.+$/m, '')
+    content = content.replace(/(?:^|\n)\s*(?:#{1,3}|\*\*)\s*(?:References|Citations|Sources)[\s\S]*$/i, '')
+    content = content.trim()
+
+    const sections = []
+
+    const combinedRegex = /(```[\s\S]*?```|((?:^|\n)\|[^\n]*\|(?:\n\|[^\n]*\|)*)|<summary>[\s\S]*?<\/summary>)/
+
+    let remaining = content
+
+    while (remaining) {
+        const match = remaining.match(combinedRegex)
+        if (!match) {
+            if (remaining.trim()) {
+                sections.push({ type: 'markdown', content: remaining.trim() })
+            }
+            break
+        }
+
+        const index = match.index
+        const matchedStr = match[0]
+        const preText = remaining.substring(0, index)
+
+        if (preText.trim()) {
+            sections.push({ type: 'markdown', content: preText.trim() })
+        }
+
+        const isCode = matchedStr.startsWith('```')
+        const isSummary = matchedStr.startsWith('<summary>')
+        const isTable = !isCode && !isSummary && matchedStr.trim().startsWith('|')
+
+        if (isCode || isTable || isSummary) {
+            let language = ''
+            let content = matchedStr.trim()
+
+            if (isCode) {
+                const match = matchedStr.match(/^```(\w+)/)
+                if (match && match[1]) language = match[1]
+            } else if (isSummary) {
+                content = content.replace(/^<summary>/, '').replace(/<\/summary>$/, '')
+                content = dedent(content)
+            }
+
+            sections.push({
+                type: 'card',
+                title: isCode ? 'Code' : (isSummary ? 'Summary' : 'Table'),
+                content: content,
+                contentType: isCode ? 'code' : (isSummary ? 'summary' : 'table'),
+                language: language
+            })
+        } else {
+            sections.push({ type: 'markdown', content: matchedStr })
+        }
+
+        remaining = remaining.substring(index + matchedStr.length)
+    }
+
+    return sections
+}
+
+const test1 = `
+# Title
+
+<summary>
+    Indented text.
+    It might become code block.
+</summary>
+`
+
+console.log("\n--- Test 2 (After Fix) ---")
+console.log(JSON.stringify(parse(test1), null, 2))

entari_plugin_hyw/card-ui/src/types.ts

@@ -48,4 +48,5 @@ export interface RenderData {
     image_references: ImageReference[]
     stats: Stats
     total_time: number
+    theme_color?: string      // Configurable theme color (hex)
 }

entari_plugin_hyw/{core/history.py → history.py}

@@ -79,13 +79,37 @@ class HistoryManager:
         """Save conversation history to disk"""
         import os
         import time
+        import re
         
         if key not in self._history:
             return
 
         try:
             os.makedirs(save_dir, exist_ok=True)
-            filename = f"{save_dir}/{key}_{int(time.time())}.md"
+            
+            # Extract user's first message (question) for filename
+            user_question = ""
+            for msg in self._history[key]:
+                if msg.get("role") == "user":
+                    content = msg.get("content", "")
+                    # Handle content that might be a list (multimodal)
+                    if isinstance(content, list):
+                        for item in content:
+                            if isinstance(item, dict) and item.get("type") == "text":
+                                user_question = item.get("text", "")
+                                break
+                    else:
+                        user_question = str(content)
+                    break
+            
+            # Clean and truncate question for filename (10 chars)
+            question_part = re.sub(r'[\\/:*?"<>|\n\r\t]', '', user_question)[:10].strip()
+            if not question_part:
+                question_part = "conversation"
+            
+            # Format: YYYYMMDD_HHMMSS_question.md
+            time_str = time.strftime("%Y%m%d_%H%M%S", time.localtime())
+            filename = f"{save_dir}/{time_str}_{question_part}.md"
             
             # Formatter
             timestamp = time.strftime("%Y-%m-%d %H:%M:%S", time.localtime())