@webmcp-auto-ui/ui 2.5.24 → 2.5.26

package/package.json

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

package/src/agent/AgentConsole.svelte

@@ -27,6 +27,7 @@
     prompt: '#6366f1',
     schema: '#06b6d4',
     warning: '#eab308',
+    recipe: '#ec4899',
   };
 
   function fmtTime(ts: number): string {
@@ -87,6 +88,12 @@
               <span class="ac-tag" class:ac-tag-recette={prov.tag === 'recette'} class:ac-tag-impro={prov.tag === 'impro'}>{prov.tag}</span>
             {/if}
             <span class="ac-detail">{prov.rest}</span>
+          {:else if log.type === 'recipe'}
+            {@const sepIdx = log.detail.indexOf(' · ')}
+            {@const rid = sepIdx > 0 ? log.detail.slice(0, sepIdx) : log.detail}
+            {@const rest = sepIdx > 0 ? log.detail.slice(sepIdx + 3) : ''}
+            <span class="ac-tag ac-tag-recipe">📄 {rid}</span>
+            <span class="ac-detail">{rest}</span>
           {:else}
             <span class="ac-detail">
               {log.detail}
@@ -243,6 +250,10 @@
     color: #fb923c;
     background: rgba(251, 146, 60, 0.1);
   }
+  .ac-tag-recipe {
+    color: #ec4899;
+    background: rgba(236, 72, 153, 0.1);
+  }
 
   .ac-clickable {
     cursor: pointer;

package/src/agent/EphemeralBubble.svelte

@@ -1,9 +1,39 @@
 <script lang="ts">
   import { fly } from 'svelte/transition';
+  import { renderMarkdown } from '../primitives/markdown-renderer.js';
 
   interface EphemeralMsg { id: string; role: 'user' | 'assistant'; html: string; }
   interface Props { ephemeral: EphemeralMsg[]; }
   let { ephemeral }: Props = $props();
+
+  // Detect if content has any markdown markers worth parsing.
+  // If not, we skip marked entirely and fall back to {@html} for the
+  // pre-existing HTML snippets (e.g. "<strong>tool_name</strong>").
+  const MD_RE = /(^|\n)\s*(#{1,6}\s|[-*+]\s|\d+\.\s|>\s)|\*\*|__|`|```|~~~|!\[|\[[^\]]+\]\(/;
+  function looksLikeMarkdown(src: string): boolean {
+    return MD_RE.test(src);
+  }
+
+  // Gracefully close dangling code fences during streaming so that
+  // a half-received ``` block still renders as code instead of
+  // swallowing the rest of the message.
+  function closeDanglingFences(src: string): string {
+    const fences = (src.match(/```/g) ?? []).length;
+    if (fences % 2 === 1) return src + '\n```';
+    const tildes = (src.match(/~~~/g) ?? []).length;
+    if (tildes % 2 === 1) return src + '\n~~~';
+    return src;
+  }
+
+  function renderContent(src: string): string {
+    if (!src) return '';
+    if (!looksLikeMarkdown(src)) return src;
+    try {
+      return renderMarkdown(closeDanglingFences(src));
+    } catch {
+      return src;
+    }
+  }
 </script>
 
 <div class="flex flex-col gap-2 items-start w-full">
@@ -13,7 +43,7 @@
       out:fly={{ y: -32, duration: 450, opacity: 0 }}
       class="ephemeral-msg {msg.role}"
     >
-      {@html msg.html}
+      {@html renderContent(msg.html)}
     </div>
   {/each}
 </div>
@@ -41,4 +71,41 @@
     color: var(--color-text1);
     align-self: flex-start;
   }
+  /* Markdown tweaks scoped to the ephemeral bubble — keep margins tight. */
+  .ephemeral-msg :global(p) { margin: 0.25rem 0; }
+  .ephemeral-msg :global(p:first-child) { margin-top: 0; }
+  .ephemeral-msg :global(p:last-child) { margin-bottom: 0; }
+  .ephemeral-msg :global(h1),
+  .ephemeral-msg :global(h2),
+  .ephemeral-msg :global(h3),
+  .ephemeral-msg :global(h4) {
+    font-weight: 600;
+    margin: 0.35rem 0 0.25rem;
+    font-size: 0.78rem;
+  }
+  .ephemeral-msg :global(ul),
+  .ephemeral-msg :global(ol) {
+    margin: 0.3rem 0;
+    padding-left: 1.1rem;
+  }
+  .ephemeral-msg :global(li) { margin: 0.1rem 0; }
+  .ephemeral-msg :global(code) {
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 0.66rem;
+    background: rgba(0, 0, 0, 0.28);
+    padding: 0.05rem 0.25rem;
+    border-radius: 0.2rem;
+  }
+  .ephemeral-msg :global(pre) {
+    background: rgba(0, 0, 0, 0.35);
+    border-radius: 0.3rem;
+    padding: 0.5rem;
+    margin: 0.35rem 0;
+    overflow-x: auto;
+    font-size: 0.66rem;
+  }
+  .ephemeral-msg :global(pre code) { background: transparent; padding: 0; }
+  .ephemeral-msg :global(strong) { font-weight: 600; }
+  .ephemeral-msg :global(em) { font-style: italic; }
+  .ephemeral-msg :global(a) { color: rgb(96, 165, 250); text-decoration: underline; }
 </style>

package/src/agent/McpConnector.svelte

@@ -13,7 +13,8 @@
     onconnect?: () => void;
     ondisconnect?: () => void;
     class?: string;
-    compact?: boolean;    // hide token field
+    compact?: boolean;      // hide token field entirely
+    showToken?: boolean;    // toggle controlled from outside
   }
 
   let {
@@ -29,9 +30,9 @@
     ondisconnect,
     class: cls = '',
     compact = false,
+    showToken = $bindable(false),
   }: Props = $props();
 
-  let showToken = $state(false);
   let debounceTimer: ReturnType<typeof setTimeout> | null = null;
 
   function handleUrlInput(e: Event) {
@@ -82,25 +83,14 @@
     <McpStatus {connecting} {connected} name={serverName || 'not connected'} />
   </div>
 
-  {#if !compact}
-    <div class="flex items-center gap-2">
-      <button
-        onclick={() => showToken = !showToken}
-        class="text-text2 hover:text-text1 transition-colors flex-shrink-0"
-        title="Bearer token"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
-      </button>
-      {#if showToken}
-        <input
-          type="password"
-          value={token}
-          oninput={(e) => { token = (e.target as HTMLInputElement).value; onTokenChange?.(token); }}
-          placeholder="Bearer token (optional)"
-          class="flex-1 font-mono text-xs bg-surface2 border border-border2 rounded px-2 h-7 text-text1 outline-none placeholder:text-text2/40 focus:border-accent/50 transition-colors"
-        />
-      {/if}
-    </div>
+  {#if !compact && showToken}
+    <input
+      type="password"
+      value={token}
+      oninput={(e) => { token = (e.target as HTMLInputElement).value; onTokenChange?.(token); }}
+      placeholder="Bearer token (optional)"
+      class="font-mono text-xs bg-surface2 border border-border2 rounded px-2 h-7 text-text1 outline-none placeholder:text-text2/40 focus:border-accent/50 transition-colors"
+    />
   {/if}
 
   {#if error}

package/src/agent/SettingsPanel.svelte

@@ -6,7 +6,6 @@
     effectivePrompt?: string;
     maxTokens?: number;
     maxContextTokens?: number;
-    maxTools?: number;
     maxResultLength?: number;
     compressHistory?: boolean;
     compressPreview?: number;
@@ -25,7 +24,6 @@
     effectivePrompt = '',
     maxTokens = $bindable(4096),
     maxContextTokens = $bindable(150_000),
-    maxTools = $bindable(8),
     maxResultLength = $bindable(10000),
     compressHistory = $bindable(false),
     compressPreview = $bindable(500),
@@ -104,15 +102,15 @@
       <label class="text-[9px] font-mono text-text2 uppercase tracking-wider">System Prompt</label>
       <div class="flex items-center gap-2">
         {#if promptSaved && customMode}
-          <span class="text-[9px] font-mono text-teal transition-opacity">✓ applique</span>
+          <span class="text-[9px] font-mono text-teal transition-opacity">✓ applied</span>
         {/if}
         {#if hasEffective}
           {#if customMode}
             <button class="text-[9px] font-mono text-accent2 hover:text-accent transition-colors"
-                    onclick={resetToAuto}>reinitialiser</button>
+                    onclick={resetToAuto}>reset</button>
           {:else}
             <button class="text-[9px] font-mono text-accent hover:text-text1 transition-colors"
-                    onclick={enterCustomMode}>personnaliser</button>
+                    onclick={enterCustomMode}>customize</button>
           {/if}
         {/if}
       </div>
@@ -123,15 +121,15 @@
         value={displayedPrompt}
         rows={8}
         class="w-full bg-surface2/50 border border-border2/50 rounded-lg px-3 py-2 text-xs font-mono text-text2 outline-none resize-none cursor-default"
-        placeholder="Prompt auto-genere"
+        placeholder="Auto-generated prompt"
       ></textarea>
-      <div class="text-[8px] font-mono text-text2/50">prompt auto-genere — cliquer personnaliser pour editer</div>
+      <div class="text-[8px] font-mono text-text2/50">auto-generated prompt — click customize to edit</div>
     {:else}
       <textarea
         bind:value={systemPrompt}
         rows={5}
         class="w-full bg-surface2 border border-border2 rounded-lg px-3 py-2 text-xs font-mono text-text1 outline-none resize-none focus:border-accent/50 transition-colors placeholder:text-text2/40"
-        placeholder="Instructions systeme pour l'agent…"
+        placeholder="System instructions for the agent…"
       ></textarea>
     {/if}
   </div>
@@ -184,19 +182,6 @@
              class="w-full accent-accent" />
     </div>
 
-    <!-- Max tools (WASM only) -->
-    {#if modelType === 'wasm'}
-    <div>
-      <div class="flex justify-between items-baseline mb-1">
-        <span class="text-[9px] font-mono text-text2 uppercase tracking-wider">Max tools (WASM)</span>
-        <span class="font-mono text-xs text-text1">{maxTools}</span>
-      </div>
-      <input type="range" bind:value={maxTools}
-             min={4} max={20} step={1}
-             class="w-full accent-accent" />
-    </div>
-    {/if}
-
     <!-- Max result length -->
     <div>
       <div class="flex justify-between items-baseline mb-1">
@@ -212,7 +197,7 @@
     <div>
       <label class="flex items-center gap-2 cursor-pointer select-none mb-1">
         <input type="checkbox" bind:checked={compressHistory} class="accent-accent w-3.5 h-3.5" />
-        <span class="text-[9px] font-mono text-text2 uppercase tracking-wider">Tronquer l'historique</span>
+        <span class="text-[9px] font-mono text-text2 uppercase tracking-wider">Truncate history</span>
       </label>
       {#if compressHistory}
       <div class="flex justify-between items-baseline mb-1">
@@ -237,7 +222,7 @@
       </div>
       <div class="pl-5">
         <div class="flex justify-between items-baseline mb-1">
-          <span class="text-[9px] font-mono text-text2 uppercase tracking-wider">Résidu inline (chars)</span>
+          <span class="text-[9px] font-mono text-text2 uppercase tracking-wider">Inline residue (chars)</span>
           <span class="font-mono text-xs text-text1">{ragResidueSize}</span>
         </div>
         <input type="range" bind:value={ragResidueSize}

package/src/agent/WebMCPserversList.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  interface Server {
+    id: string;
+    label: string;
+    description: string;
+    widgetCount: number;
+  }
+
+  interface Props {
+    servers: Server[];
+    enabledServers?: Set<string>;
+    onToggle?: (id: string) => void;
+    recipeCountByServer?: Record<string, number>;
+    toolCountByServer?: Record<string, number>;
+    onrecipeclick?: (id: string) => void;
+    ontoolclick?: (id: string) => void;
+  }
+
+  let {
+    servers,
+    enabledServers = new Set<string>(),
+    onToggle,
+    recipeCountByServer,
+    toolCountByServer,
+    onrecipeclick,
+    ontoolclick,
+  }: Props = $props();
+
+  let collapsed = $state(true);
+</script>
+
+<div class="flex flex-col gap-2">
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="flex items-center gap-1 cursor-pointer select-none"
+       onclick={() => collapsed = !collapsed}>
+    <span class="text-[9px] font-mono text-text2 uppercase tracking-wider">WebMCP servers</span>
+    <span class="text-[9px] text-text2/60 font-mono">({enabledServers.size}/{servers.length})</span>
+    <span class="text-[10px] text-text2 ml-auto transition-transform {collapsed ? '' : 'rotate-90'}">{@html '&#x25B6;'}</span>
+  </div>
+
+  {#if !collapsed}
+    <div class="flex flex-col gap-1">
+      {#each servers as srv (srv.id)}
+        {@const enabled = enabledServers.has(srv.id)}
+        {@const recipes = recipeCountByServer?.[srv.id] ?? 0}
+        {@const tools = toolCountByServer?.[srv.id] ?? 0}
+        <div class="group flex items-center gap-2 px-2 py-1.5 rounded border border-border2 bg-surface2 hover:border-accent/30 transition-colors">
+          <input
+            type="checkbox"
+            checked={enabled}
+            onchange={() => onToggle?.(srv.id)}
+            class="w-3.5 h-3.5 rounded border-border2 accent-accent cursor-pointer flex-shrink-0"
+          />
+          <div class="flex-1 min-w-0 flex flex-col">
+            <span class="font-mono text-xs font-medium text-text1 truncate">{srv.label}</span>
+            {#if srv.description}
+              <span class="text-[10px] text-text2 truncate">{srv.description}</span>
+            {/if}
+            {#if enabled && (recipes > 0 || tools > 0)}
+              <span class="flex items-center gap-1.5 mt-0.5">
+                {#if recipes > 0}
+                  <button class="text-[10px] font-mono text-accent hover:underline"
+                          onclick={(e) => { e.stopPropagation(); onrecipeclick?.(srv.id); }}>
+                    {recipes} recipes
+                  </button>
+                {/if}
+                {#if recipes > 0 && tools > 0}
+                  <span class="text-[10px] text-text2">·</span>
+                {/if}
+                {#if tools > 0}
+                  <button class="text-[10px] font-mono text-accent hover:underline"
+                          onclick={(e) => { e.stopPropagation(); ontoolclick?.(srv.id); }}>
+                    {tools} tools
+                  </button>
+                {/if}
+              </span>
+            {/if}
+          </div>
+          <span class="text-[9px] font-mono text-text2/50 flex-shrink-0">{srv.widgetCount}w</span>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>

package/src/index.ts

@@ -95,6 +95,7 @@ export type { ChatFeedItem, ChatBubble, ChatBlock } from './agent/ChatPanel.svel
 export { default as AgentConsole } from './agent/AgentConsole.svelte';
 export { default as SettingsPanel } from './agent/SettingsPanel.svelte';
 export { default as RemoteMCPserversDemo } from './agent/RemoteMCPserversDemo.svelte';
+export { default as WebMCPserversList } from './agent/WebMCPserversList.svelte';
 export { default as EphemeralBubble } from './agent/EphemeralBubble.svelte';
 export { default as TokenBubble } from './agent/TokenBubble.svelte';
 export { default as DiagnosticModal } from './agent/DiagnosticModal.svelte';