@webmcp-auto-ui/ui 2.5.6 → 2.5.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmcp-auto-ui/ui",
-  "version": "2.5.6",
+  "version": "2.5.8",
   "description": "Svelte 5 UI components — primitives, widgets, window manager",
   "license": "AGPL-3.0-or-later",
   "type": "module",

package/src/agent/TokenBubble.svelte

@@ -80,13 +80,14 @@
     {#if !metrics.isWasm && metrics.totalCacheReadTokens > 0}
       <span class="cached-active">Cached {fmt(metrics.totalCacheReadTokens)}</span>
     {/if}
+    <span class="sep">|</span>
     {#if metrics.isWasm}
-      <span>Req {metrics.requestsPerMin}/min</span>
       <span>Out {fmt(metrics.outputTokensPerMin)}/min</span>
+      <span>Req {metrics.requestsPerMin}/min</span>
     {:else}
-      <span class:warn={metrics.requestsPerMin > LIMITS.reqPerMin * 0.8}>Req {metrics.requestsPerMin}/min</span> <span class="limit">({fmt(LIMITS.reqPerMin)} max)</span>
       <span class:warn={metrics.inputTokensPerMin > LIMITS.inPerMin * 0.8}>In {fmt(metrics.inputTokensPerMin)}/min</span> <span class="limit">({fmt(LIMITS.inPerMin)} max)</span>
       <span class:warn={metrics.outputTokensPerMin > LIMITS.outPerMin * 0.8}>Out {fmt(metrics.outputTokensPerMin)}/min</span> <span class="limit">({fmt(LIMITS.outPerMin)} max)</span>
+      <span class:warn={metrics.requestsPerMin > LIMITS.reqPerMin * 0.8}>Req {metrics.requestsPerMin}/min</span> <span class="limit">({fmt(LIMITS.reqPerMin)} max)</span>
     {/if}
   </div>
 {/if}

package/src/index.ts

@@ -47,7 +47,9 @@ export { default as Carousel } from './widgets/rich/Carousel.svelte';
 export { default as SafeImage } from './widgets/SafeImage.svelte';
 
 // Widget export utility
-export { exportWidget } from './widgets/export-widget.js';
+export { exportWidget, getExportFormats, exportWidgetAs } from './widgets/export-widget.js';
+export type { ExportFormat } from './widgets/export-widget.js';
+export { default as ExportModal } from './widgets/ExportModal.svelte';
 
 // Dispatcher
 export { default as BlockRenderer } from './widgets/BlockRenderer.svelte';

package/src/widgets/ExportModal.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+  import { getExportFormats, exportWidgetAs, type ExportFormat } from './export-widget.js';
+
+  interface Props {
+    open: boolean;
+    type: string;
+    data: Record<string, unknown>;
+    containerEl?: HTMLElement;
+    onclose?: () => void;
+  }
+
+  let { open = $bindable(false), type, data, containerEl, onclose }: Props = $props();
+
+  const formats = $derived(open ? getExportFormats(type, containerEl) : []);
+
+  function doExport(fmt: ExportFormat) {
+    exportWidgetAs(fmt.id, type, data, containerEl);
+    open = false;
+    onclose?.();
+  }
+
+  function handleBackdrop() {
+    open = false;
+    onclose?.();
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      open = false;
+      onclose?.();
+    }
+  }
+</script>
+
+{#if open}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="export-modal-backdrop" onclick={handleBackdrop} onkeydown={handleKeydown}>
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <div class="export-modal" onclick={(e) => e.stopPropagation()}>
+      <div class="export-modal-title">Exporter — {type}</div>
+      <div class="export-modal-list">
+        {#each formats as fmt}
+          <button class="export-modal-btn" onclick={() => doExport(fmt)}>
+            <span class="export-modal-icon">{fmt.icon}</span>
+            <span class="export-modal-label">{fmt.label}</span>
+          </button>
+        {/each}
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .export-modal-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.35);
+  }
+  .export-modal {
+    background: var(--color-surface, #1a1a2e);
+    border: 1px solid var(--color-border, #333);
+    border-radius: 8px;
+    padding: 12px;
+    max-width: 250px;
+    width: 100%;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+    font-family: var(--font-mono, ui-monospace, monospace);
+  }
+  .export-modal-title {
+    font-size: 11px;
+    color: var(--color-text2, #888);
+    margin-bottom: 8px;
+    padding-bottom: 6px;
+    border-bottom: 1px solid var(--color-border, #333);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+  .export-modal-list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  .export-modal-btn {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    padding: 8px 10px;
+    border: 1px solid transparent;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--color-text1, #eee);
+    font-family: inherit;
+    font-size: 13px;
+    cursor: pointer;
+    transition: background 0.15s, border-color 0.15s;
+  }
+  .export-modal-btn:hover {
+    background: var(--color-surface2, #2a2a3e);
+    border-color: var(--color-border, #444);
+  }
+  .export-modal-icon {
+    font-size: 16px;
+    flex-shrink: 0;
+    width: 20px;
+    text-align: center;
+  }
+  .export-modal-label {
+    flex: 1;
+    text-align: left;
+  }
+</style>

package/src/widgets/WidgetRenderer.svelte

@@ -168,6 +168,10 @@
     const mc = getMC();
     if (!mc) return;
 
+    // Unregister first in case widget was re-mounted with same busId
+    const toolNames = [`widget_${busId}_get`, `widget_${busId}_update`, `widget_${busId}_remove`];
+    toolNames.forEach(n => { try { mc.unregisterTool(n); } catch { /* ok */ } });
+
     mc.registerTool({
       name: `widget_${busId}_get`,
       description: `Get current data of ${type} widget (id: ${busId}).`,
@@ -211,7 +215,7 @@
 </script>
 
 {#if isVanillaRenderer}
-  <div bind:this={vanillaContainer} class="w-full h-full overflow-hidden"></div>
+  <div bind:this={vanillaContainer} class="vanilla-container w-full h-full overflow-auto p-2"></div>
 {:else if customRenderer}
   <svelte:component this={customRenderer as Component<any>} {data} {id} />
 {:else if nativeEntry}
@@ -219,3 +223,24 @@
 {:else}
   <div class="p-3 font-mono text-xs text-text2">[{type}]</div>
 {/if}
+
+<style>
+  .vanilla-container :global(svg) {
+    width: 100%;
+    height: auto;
+    max-height: 100%;
+    display: block;
+  }
+  .vanilla-container :global(canvas) {
+    width: 100%;
+    height: auto;
+    max-height: 100%;
+    display: block;
+  }
+  .vanilla-container :global(img) {
+    width: 100%;
+    height: auto;
+    max-height: 100%;
+    object-fit: contain;
+  }
+</style>

package/src/widgets/export-widget.ts

@@ -191,10 +191,91 @@ function exportImageUrls(type: string, data: Record<string, unknown>): void {
   downloadFile(content, filename(type, 'json'), 'application/json');
 }
 
+// ── Export Format types ───────────────────────────────────────────────────────
+
+export interface ExportFormat {
+  id: string;       // 'csv', 'png', 'json', 'md', 'html'
+  label: string;    // 'CSV', 'PNG', 'JSON', 'Markdown', 'HTML'
+  icon: string;     // emoji or unicode
+}
+
+const CSV_FMT:  ExportFormat = { id: 'csv',  label: 'CSV',      icon: '📊' };
+const PNG_FMT:  ExportFormat = { id: 'png',  label: 'PNG',      icon: '📷' };
+const JSON_FMT: ExportFormat = { id: 'json', label: 'JSON',     icon: '📋' };
+const MD_FMT:   ExportFormat = { id: 'md',   label: 'Markdown', icon: '📝' };
+const HTML_FMT: ExportFormat = { id: 'html', label: 'HTML',     icon: '🌐' };
+
+/**
+ * Return the list of export formats available for a given widget type.
+ */
+export function getExportFormats(type: string, containerEl?: HTMLElement): ExportFormat[] {
+  switch (type) {
+    case 'data-table':
+    case 'grid-data':
+    case 'kv':
+    case 'list':
+      return [CSV_FMT, JSON_FMT];
+
+    case 'chart':
+    case 'chart-rich':
+    case 'sankey':
+    case 'd3':
+    case 'hemicycle':
+    case 'map':
+      return [PNG_FMT, JSON_FMT];
+
+    case 'text':
+    case 'code':
+    case 'log':
+      return [MD_FMT, JSON_FMT];
+
+    case 'js-sandbox':
+      return [HTML_FMT, JSON_FMT];
+
+    case 'gallery':
+    case 'carousel':
+      return [JSON_FMT];
+
+    default:
+      return [JSON_FMT];
+  }
+}
+
+/**
+ * Export a widget in a specific format chosen by the user.
+ */
+export function exportWidgetAs(
+  format: string,
+  type: string,
+  data: Record<string, unknown>,
+  containerEl?: HTMLElement
+): void {
+  switch (format) {
+    case 'csv':
+      exportCsv(type, data);
+      break;
+    case 'png':
+      if (containerEl) exportPng(type, containerEl);
+      else console.warn('[exportWidgetAs] containerEl required for PNG export');
+      break;
+    case 'md':
+      exportMarkdown(type, data);
+      break;
+    case 'html':
+      exportHtml(type, data, containerEl);
+      break;
+    case 'json':
+    default:
+      exportJson(type, data);
+      break;
+  }
+}
+
 // ── Public API ────────────────────────────────────────────────────────────────
 
 /**
  * Export a widget's data in the most appropriate format for its type.
+ * @deprecated Use getExportFormats() + exportWidgetAs() for format selection modal.
  *
  * @param type       Widget type identifier (e.g. "data-table", "chart", "text")
  * @param data       The widget's data object

package/src/widgets/rich/Cards.svelte

@@ -20,7 +20,7 @@
         <!-- svelte-ignore a11y_no_static_element_interactions -->
         <!-- svelte-ignore a11y_interactive_supports_focus -->
         <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-        <div class="bg-surface2 border border-border rounded-lg overflow-hidden hover:border-border2 transition-all {oncardclick?'cursor-pointer':''}" role={oncardclick?"button":undefined} tabindex={oncardclick?0:undefined} onclick={()=>oncardclick?.(card)}>
+        <div class="bg-surface2 border border-border rounded-lg overflow-hidden hover:border-border2 transition-all {oncardclick?'cursor-pointer':''}" role={oncardclick?"button":undefined} tabindex={oncardclick?0:undefined} title={oncardclick?"Double-cliquez pour interagir":undefined} ondblclick={()=>oncardclick?.(card)}>
           {#if card.image}<SafeImage src={card.image} alt={card.title} class="w-full h-32 object-cover" hideOnError />{/if}
           <div class="p-3">
             <div class="font-semibold text-sm text-text1 leading-tight">{card.title}</div>

package/src/widgets/rich/Chart.svelte

@@ -3,7 +3,11 @@
   export interface ChartSpec { title?: string; type?: 'bar'|'line'|'area'|'pie'|'donut'; labels?: string[]; data?: ChartDataset[]; legend?: boolean; xAxis?: {label?:string}; yAxis?: {label?:string}; }
   interface Props { spec: Partial<ChartSpec>; }
   let { spec }: Props = $props();
-  const PAL=['#7c6dfa','#3ecfb2','#f0a050','#fa6d7c','#3b82f6','#a855f7','#14b8a6','#f97316'];
+  const PAL=[
+    '#6366f1','#f59e0b','#10b981','#ef4444','#8b5cf6',
+    '#06b6d4','#f97316','#ec4899','#14b8a6','#a855f7',
+    '#eab308','#3b82f6','#22c55e','#e11d48','#0ea5e9',
+  ];
   const fmt=new Intl.NumberFormat('fr-FR');
   const datasets=$derived<ChartDataset[]>(Array.isArray(spec.data)?spec.data:[]);
   const labels=$derived<string[]>(Array.isArray(spec.labels)?spec.labels:[]);
@@ -14,6 +18,10 @@
   const xLabels=$derived(labels.length>0?labels:(datasets[0]?.values??[]).map((_:number,i:number)=>String(i+1)));
   const showLegend=$derived(spec.legend!==false&&datasets.length>1);
   function col(ds:ChartDataset,i:number){return ds.color??PAL[i%PAL.length];}
+  /** For single-series bar charts, color each bar distinctly by x-index */
+  const isCategoricalBar=$derived(type==='bar'&&datasets.length===1);
+  const isCategoricalLine=$derived((type==='line'||type==='area')&&datasets.length===1);
+  function barCol(ds:ChartDataset,di:number,xi:number){return isCategoricalBar?PAL[xi%PAL.length]:col(ds,di);}
   // Pie
   const pieTotal=$derived.by<number>(()=>{const ds=datasets[0];if(!ds)return 1;return ds.values.reduce((a,b)=>a+b,0)||1;});
   interface Slice{label:string;value:number;color:string;startAngle:number;endAngle:number;pct:number}
@@ -71,7 +79,7 @@
                 {@const v=ds.values[xi]??0}
                 {@const pct=Math.round(v/maxVal*100)}
                 <div class="flex-1 rounded-t transition-all hover:opacity-80 cursor-default"
-                  style="height:{pct}%;background:{col(ds,di)};"
+                  style="height:{pct}%;background:{barCol(ds,di,xi)};"
                   title="{ds.label??''} {lbl}: {fmt.format(v)}">
                 </div>
               {/each}
@@ -90,6 +98,11 @@
               <polygon points="{pad},{H-pad} {pts.join(' ')} {pad+((ds.values.length-1)*((W-pad*2)/(ds.values.length-1||1)))},{H-pad}" fill={col(ds,di)} opacity="0.15"/>
             {/if}
             <polyline points={pts.join(' ')} fill="none" stroke={col(ds,di)} stroke-width="2" stroke-linejoin="round"/>
+            {#each ds.values as v, i}
+              {@const cx = pad + i * ((W - pad * 2) / (ds.values.length - 1 || 1))}
+              {@const cy = H - pad - (v / maxVal) * (H - pad * 2)}
+              <circle cx={cx} cy={cy} r="4" fill={isCategoricalLine ? PAL[i % PAL.length] : col(ds, di)} stroke="var(--color-surface, white)" stroke-width="1.5" />
+            {/each}
           {/each}
         </svg>
         <div class="flex gap-1">
@@ -97,7 +110,25 @@
         </div>
       {/if}
     </div>
-    {#if showLegend}
+    {#if isCategoricalLine && xLabels.length>1}
+      <div class="flex gap-3 flex-wrap mt-2">
+        {#each xLabels as lbl, xi}
+          <div class="flex items-center gap-1 text-xs">
+            <div class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background:{PAL[xi%PAL.length]};"></div>
+            <span class="text-text2">{lbl}</span>
+          </div>
+        {/each}
+      </div>
+    {:else if isCategoricalBar && xLabels.length>1}
+      <div class="flex gap-3 flex-wrap mt-2">
+        {#each xLabels as lbl,xi}
+          <div class="flex items-center gap-1 text-xs">
+            <div class="w-2.5 h-2.5 rounded-sm flex-shrink-0" style="background:{PAL[xi%PAL.length]};"></div>
+            <span class="text-text2">{lbl}</span>
+          </div>
+        {/each}
+      </div>
+    {:else if showLegend}
       <div class="flex gap-3 flex-wrap mt-2">
         {#each datasets as ds,i}
           <div class="flex items-center gap-1 text-xs">

package/src/widgets/rich/DataTable.svelte

@@ -37,7 +37,8 @@
         <tbody>
           {#each displayed as row, i}
             <tr class="hover:bg-surface2 transition-colors {spec.striped!==false&&i%2===1?'bg-white/[0.02]':''} {onrowclick?'cursor-pointer':''}"
-              onclick={()=>onrowclick?.(row)}>
+              title={onrowclick?"Double-cliquez pour interagir":undefined}
+              ondblclick={()=>onrowclick?.(row)}>
               {#each columns as col}
                 {@const val=row[col.key]}
                 <td class="border-b border-border text-text1 overflow-hidden text-ellipsis whitespace-nowrap max-w-[280px] {compact?'px-2 py-1 text-xs':'px-3 py-2 text-sm'} {col.align==='center'?'text-center':col.align==='right'?'text-right':''}">

package/src/widgets/rich/Gallery.svelte

@@ -16,6 +16,8 @@
 
   function open(i: number) {
     lightboxIdx = i;
+  }
+  function interact(i: number) {
     onimageclick?.(images[i], i);
   }
   function close() { lightboxIdx = null; }
@@ -35,11 +37,22 @@
   {#if spec.title}<h3 class="text-sm font-semibold text-text1 mb-3">{spec.title}</h3>{/if}
   {#if images.length === 0}
     <p class="text-text2 text-sm">{spec.emptyMessage ?? 'Aucune image'}</p>
+  {:else if images.length === 1}
+    {@const img = images[0]}
+    <button class="relative overflow-hidden rounded-lg border border-border hover:border-border2 transition-all cursor-pointer bg-transparent p-0 group w-full"
+      onclick={() => open(0)}>
+      <SafeImage src={img.src} alt={img.alt ?? ''} class="w-full max-h-[400px] object-contain rounded-lg" loading="eager" />
+      {#if img.caption || img.alt}
+        <div class="mt-2 text-center text-xs text-text2">{img.caption ?? img.alt}</div>
+      {/if}
+    </button>
   {:else}
     <div class="grid gap-2 responsive-gallery" style="--gallery-cols: repeat({spec.columns ?? 3}, minmax(0, 1fr));">
       {#each images as img, i}
         <button class="relative overflow-hidden rounded-lg border border-border hover:border-border2 transition-all cursor-pointer bg-transparent p-0 group"
-          onclick={() => open(i)}>
+          title={onimageclick?"Double-cliquez pour interagir":undefined}
+          onclick={() => open(i)}
+          ondblclick={() => interact(i)}>
           <SafeImage src={img.src} alt={img.alt ?? ''} class="w-full h-32 sm:h-40 object-cover transition-transform group-hover:scale-105" loading="lazy" />
           {#if img.caption}
             <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent px-2 py-1.5">

package/src/widgets/rich/GridData.svelte

@@ -30,9 +30,10 @@
           {#each rows as row, ri}
             <tr class="hover:bg-surface2">
               {#each (Array.isArray(row)?row:[]) as cell, ci}
-                <td class="px-3 text-text2 border-b border-r border-border cursor-pointer hover:bg-surface2"
+                <td class="px-3 text-text2 border-b border-r border-border {oncellclick?'cursor-pointer':''} hover:bg-surface2"
                   style="height:{cellH}px;{bg(ri,ci)?`background:${bg(ri,ci)};`:''}"
-                  onclick={()=>oncellclick?.(ri,ci,cell)}>{dv(cell)}</td>
+                  title={oncellclick?"Double-cliquez pour interagir":undefined}
+                  ondblclick={()=>oncellclick?.(ri,ci,cell)}>{dv(cell)}</td>
               {/each}
             </tr>
           {/each}

package/src/widgets/rich/Hemicycle.svelte

@@ -51,7 +51,9 @@
             class={s.gid?'cursor-pointer':''}
             onmouseenter={()=>{const g=groups.find(g=>g.id===s.gid);if(g)tooltip={label:g.label,seats:g.seats};}}
             onmouseleave={()=>tooltip=null}
-            onclick={()=>{const g=groups.find(g=>g.id===s.gid);if(g)ongroupclick?.(g);}}/>
+            ondblclick={()=>{const g=groups.find(g=>g.id===s.gid);if(g)ongroupclick?.(g);}}>
+            {#if s.gid}<title>Double-cliquez pour interagir</title>{/if}
+          </circle>
         {/each}
         <text x={cx} y={cy+18} text-anchor="middle" font-size="11" fill="var(--color-text2)" font-family="system-ui">{total} sièges</text>
       </svg>
@@ -65,7 +67,7 @@
       {#each legend as g}
         <!-- svelte-ignore a11y_click_events_have_key_events -->
         <!-- svelte-ignore a11y_no_static_element_interactions -->
-        <div class="flex items-center gap-1.5 text-xs cursor-pointer hover:opacity-80" role="button" tabindex="0" onclick={()=>ongroupclick?.(g)} onkeydown={(e)=>{if(e.key==="Enter")ongroupclick?.(g)}}>
+        <div class="flex items-center gap-1.5 text-xs cursor-pointer hover:opacity-80" role="button" tabindex="0" title="Double-cliquez pour interagir" ondblclick={()=>ongroupclick?.(g)} onkeydown={(e)=>{if(e.key==="Enter")ongroupclick?.(g)}}>
           <div class="w-3 h-3 rounded-full flex-shrink-0" style="background:{g.color};"></div>
           <span class="text-text2">{g.label}</span>
           <span class="text-text2">{g.seats}</span>

package/src/widgets/rich/Timeline.svelte

@@ -18,7 +18,7 @@
         <!-- svelte-ignore a11y_no_static_element_interactions -->
         <!-- svelte-ignore a11y_interactive_supports_focus -->
         <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-        <div class="flex gap-4 relative {!isLast?'pb-5':''} {oneventclick?'cursor-pointer':''}" role={oneventclick?"button":undefined} tabindex={oneventclick?0:undefined} onclick={()=>oneventclick?.(event)} onkeydown={(e)=>{if(e.key==='Enter')oneventclick?.(event)}}>
+        <div class="flex gap-4 relative {!isLast?'pb-5':''} {oneventclick?'cursor-pointer':''}" role={oneventclick?"button":undefined} tabindex={oneventclick?0:undefined} title={oneventclick?"Double-cliquez pour interagir":undefined} ondblclick={()=>oneventclick?.(event)} onkeydown={(e)=>{if(e.key==='Enter')oneventclick?.(event)}}>
           <div class="flex flex-col items-center flex-shrink-0">
             <div class="w-3 h-3 rounded-full flex-shrink-0 mt-0.5" style="background:{dotColor};{event.status==='active'?`box-shadow:0 0 0 3px ${dotColor}33;`:''}"></div>
             {#if !isLast}<div class="w-0.5 flex-1 bg-border mt-1"></div>{/if}

package/src/widgets/simple/ListBlock.svelte

@@ -10,7 +10,8 @@
       <!-- svelte-ignore a11y_click_events_have_key_events -->
       <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
       <li class="text-sm text-text1 bg-surface2 rounded px-3 py-2 border-l-2 border-accent {onitemclick ? 'cursor-pointer hover:bg-surface2/80' : ''}"
-          onclick={() => onitemclick?.(item, i)}>{item}</li>
+          title={onitemclick?"Double-cliquez pour interagir":undefined}
+          ondblclick={() => onitemclick?.(item, i)}>{item}</li>
     {/each}
   </ul>
 </div>

package/src/widgets/simple/TextBlock.svelte

@@ -2,5 +2,121 @@
   export interface TextBlockData { content?: string; }
   interface Props { data: Partial<TextBlockData>; }
   let { data }: Props = $props();
+
+  /** Minimal markdown → HTML renderer (no deps, naturally XSS-safe: only produces known tags) */
+  function renderMarkdown(src: string): string {
+    if (!src) return '';
+
+    // Escape HTML entities first (XSS protection)
+    const esc = (s: string) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+
+    const lines = src.split('\n');
+    const out: string[] = [];
+    let inCode = false;
+    let codeLines: string[] = [];
+    let inUl = false;
+    let inOl = false;
+
+    const closeList = () => {
+      if (inUl) { out.push('</ul>'); inUl = false; }
+      if (inOl) { out.push('</ol>'); inOl = false; }
+    };
+
+    /** Inline formatting: bold, italic, code, links */
+    const inline = (s: string): string => {
+      return esc(s)
+        .replace(/`([^`]+)`/g, '<code>$1</code>')
+        .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+        .replace(/\*([^*]+)\*/g, '<em>$1</em>')
+        .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
+    };
+
+    for (const line of lines) {
+      // Fenced code block toggle
+      if (line.trimStart().startsWith('```')) {
+        if (!inCode) {
+          closeList();
+          inCode = true;
+          codeLines = [];
+        } else {
+          out.push(`<pre><code>${esc(codeLines.join('\n'))}</code></pre>`);
+          inCode = false;
+        }
+        continue;
+      }
+      if (inCode) { codeLines.push(line); continue; }
+
+      const trimmed = line.trim();
+
+      // Empty line → close lists, push break
+      if (!trimmed) { closeList(); out.push(''); continue; }
+
+      // Headers
+      const hMatch = trimmed.match(/^(#{1,6})\s+(.+)$/);
+      if (hMatch) {
+        closeList();
+        const level = hMatch[1].length;
+        out.push(`<h${level}>${inline(hMatch[2])}</h${level}>`);
+        continue;
+      }
+
+      // Unordered list
+      if (/^[-*+]\s+/.test(trimmed)) {
+        if (inOl) { out.push('</ol>'); inOl = false; }
+        if (!inUl) { out.push('<ul>'); inUl = true; }
+        out.push(`<li>${inline(trimmed.replace(/^[-*+]\s+/, ''))}</li>`);
+        continue;
+      }
+
+      // Ordered list
+      const olMatch = trimmed.match(/^(\d+)\.\s+(.+)$/);
+      if (olMatch) {
+        if (inUl) { out.push('</ul>'); inUl = false; }
+        if (!inOl) { out.push('<ol>'); inOl = true; }
+        out.push(`<li>${inline(olMatch[2])}</li>`);
+        continue;
+      }
+
+      // Horizontal rule
+      if (/^[-*_]{3,}$/.test(trimmed)) {
+        closeList();
+        out.push('<hr>');
+        continue;
+      }
+
+      // Regular paragraph line
+      closeList();
+      out.push(`<p>${inline(trimmed)}</p>`);
+    }
+
+    // Close any open blocks
+    if (inCode) out.push(`<pre><code>${esc(codeLines.join('\n'))}</code></pre>`);
+    closeList();
+
+    return out.join('\n');
+  }
+
+  let rendered = $derived(renderMarkdown(data.content ?? ''));
 </script>
-<div class="p-4 md:p-5 text-sm text-text2 leading-relaxed">{data.content ?? ''}</div>
+<div class="tb-md p-4 md:p-5 text-sm leading-relaxed">{@html rendered}</div>
+
+<style>
+  .tb-md { color: var(--color-text2); }
+  .tb-md :global(h1) { font-size: 1.5em; font-weight: 700; color: var(--color-text1); margin: 0.8em 0 0.4em; }
+  .tb-md :global(h2) { font-size: 1.25em; font-weight: 600; color: var(--color-text1); margin: 0.7em 0 0.35em; }
+  .tb-md :global(h3) { font-size: 1.1em; font-weight: 600; color: var(--color-text1); margin: 0.6em 0 0.3em; }
+  .tb-md :global(h4), .tb-md :global(h5), .tb-md :global(h6) { font-size: 1em; font-weight: 600; color: var(--color-text1); margin: 0.5em 0 0.25em; }
+  .tb-md :global(p) { margin: 0.4em 0; }
+  .tb-md :global(strong) { font-weight: 600; color: var(--color-text1); }
+  .tb-md :global(em) { font-style: italic; }
+  .tb-md :global(a) { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
+  .tb-md :global(a:hover) { opacity: 0.8; }
+  .tb-md :global(ul), .tb-md :global(ol) { margin: 0.4em 0; padding-left: 1.5em; }
+  .tb-md :global(ul) { list-style: disc; }
+  .tb-md :global(ol) { list-style: decimal; }
+  .tb-md :global(li) { margin: 0.15em 0; }
+  .tb-md :global(code) { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.9em; background: var(--color-surface2); padding: 0.15em 0.35em; border-radius: 4px; }
+  .tb-md :global(pre) { background: var(--color-surface2); border-radius: 6px; padding: 0.75em 1em; margin: 0.5em 0; overflow-x: auto; }
+  .tb-md :global(pre code) { background: none; padding: 0; font-size: 0.85em; }
+  .tb-md :global(hr) { border: none; border-top: 1px solid var(--color-surface2); margin: 0.8em 0; }
+</style>