@pheem49/mint 1.16.0 → 1.18.0

package/src/renderer/src-web/css/mobile.css

@@ -34,7 +34,7 @@
     height: 40px;
     padding: 0;
     border: 1px solid var(--border-default);
-    border-radius: 12px;
+    border-radius: var(--radius-xl, 18px);
     background: var(--bg-surface-raised);
     color: var(--text-primary);
   }
@@ -406,7 +406,7 @@
     height: 52px;
     padding: 0 8px;
     border: 1px solid var(--border-default);
-    border-radius: 18px;
+    border-radius: var(--radius-full, 9999px);
     background: var(--mobile-chrome-bg);
     backdrop-filter: var(--mobile-chrome-filter);
     -webkit-backdrop-filter: var(--mobile-chrome-filter);
@@ -422,7 +422,7 @@
   .chat-header-clear-btn,
   .chat-header-back-btn,
   .web-mobile-nav-btn {
-    border-radius: 14px;
+    border-radius: var(--radius-full, 9999px);
   }
 
   .web-mobile-nav-btn,
@@ -443,7 +443,7 @@
     height: 44px;
     padding: 0;
     border: 1px solid var(--border);
-    border-radius: 14px;
+    border-radius: var(--radius-full, 9999px);
     background: var(--mobile-chrome-bg);
     color: var(--text-main);
     backdrop-filter: var(--mobile-chrome-filter);
@@ -460,7 +460,7 @@
     width: min(280px, calc(100vw - 24px)) !important;
     padding-top: calc(20px + env(safe-area-inset-top)) !important;
     padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
-    border-radius: 0 22px 22px 0;
+    border-radius: 0 var(--radius-2xl) var(--radius-2xl) 0;
     border-right: 1px solid var(--border-default);
   }
 
@@ -470,7 +470,7 @@
     -webkit-backdrop-filter: var(--mobile-chrome-filter);
     border: 1px solid var(--border-subtle);
     border-bottom: 0;
-    border-radius: 22px 22px 0 0;
+    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
   }
 
   #chat-form,
@@ -499,12 +499,12 @@
   }
 
   #chat-form {
-    border-radius: 20px;
+    border-radius: var(--radius-composer, 24px);
   }
 
   .user-message .message-bubble {
     background: color-mix(in srgb, var(--accent) 10%, var(--mobile-reading-bg));
-    border-radius: 20px 20px 6px 20px;
+    border-radius: var(--radius-xl) var(--radius-xl) var(--radius-xs, 4px) var(--radius-xl);
   }
 
   .app-body .img-studio,
@@ -514,18 +514,18 @@
 
   .app-body .img-studio-controls,
   .app-body .veo-studio-controls {
-    border-radius: 20px 20px 0 0;
+    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
   }
 
   .app-body .management-card,
   .picture-card,
   .img-studio-dropzone {
-    border-radius: 20px;
+    border-radius: var(--radius-xl);
   }
 
   .pictures-header {
     border: 1px solid var(--border-default);
-    border-radius: 18px;
+    border-radius: var(--radius-xl);
     padding: 12px;
   }
 
@@ -570,19 +570,35 @@
     grid-template-rows: minmax(48px, auto) 40px 40px;
   }
 
+  #chat-form .chat-composer-pills,
   #chat-form .model-selector-container {
     grid-column: 1 / -1;
     grid-row: 3;
     display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 6px;
     width: 100%;
     min-width: 0;
     height: 40px;
   }
 
+  #chat-form:not(:has(.mint-attachment)) .chat-composer-pills,
   #chat-form:not(:has(.mint-attachment)) .model-selector-container {
     grid-row: 2;
   }
 
+  #chat-form .chat-composer-pills .chat-mode-selector-wrap {
+    flex: 0 0 auto;
+  }
+
+  #chat-form .chat-composer-pills .model-selector-container {
+    flex: 1 1 auto;
+    min-width: 0;
+    grid-column: unset;
+    grid-row: unset;
+  }
+
   #chat-form .model-selector-trigger {
     display: flex;
     width: 100%;
@@ -625,7 +641,7 @@
     height: min(60dvh, 420px);
     max-height: calc(var(--mint-viewport-height, 100dvh) - 160px);
     flex-direction: column;
-    border-radius: 20px;
+    border-radius: var(--radius-xl);
     background: var(--bg-overlay);
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
@@ -643,7 +659,7 @@
     flex: 1;
     min-height: 40px;
     border: 0;
-    border-radius: 12px;
+    border-radius: var(--radius-lg, 14px);
     background: transparent;
     color: var(--text-soft);
   }

package/src/renderer/src-web/css/settings/mobile.css

@@ -178,7 +178,7 @@
   .settings-content .setting-feature-card {
     min-width: 0;
     padding: 14px;
-    border-radius: 18px;
+    border-radius: var(--radius-xl, 18px);
   }
 
   .settings-content .provider-card-header {
@@ -315,6 +315,6 @@
 
   .settings-nav-search,
   .tab-btn {
-    border-radius: 14px;
+    border-radius: var(--radius-lg, 14px);
   }
 }

package/src/renderer/src-web/css/sidebar-workspace.css

@@ -419,7 +419,7 @@
   gap: 9px;
   padding: 0 10px;
   color: var(--text-secondary);
-  border-radius: 7px;
+  border-radius: var(--radius-sm, 8px);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -776,6 +776,26 @@
   color: var(--text-main);
 }
 
+[data-theme="studio"] .sidebar-project.active,
+[data-theme="studio"] .sidebar-project.is-active,
+[data-theme="studio"] .sidebar-chat-item.active {
+  background: #323232;
+  color: #e1e1e1;
+}
+
+[data-theme="studio"] .sidebar-project:hover,
+[data-theme="studio"] .sidebar-chat-item:hover {
+  background: #262626;
+  color: #ffffff;
+}
+
+[data-theme="studio"] .sidebar-project.active:hover,
+[data-theme="studio"] .sidebar-project.is-active:hover,
+[data-theme="studio"] .sidebar-chat-item.active:hover {
+  background: #383838;
+  color: #ffffff;
+}
+
 .sidebar-pictures-btn {
   cursor: pointer;
 }

package/src/renderer/src-web/env.d.ts

@@ -1,9 +1,22 @@
 /// <reference types="vite/client" />
 declare module '*.css';
+declare module '*.svg?url';
+declare module '*.svg?raw' {
+  const content: string;
+  export default content;
+}
 declare module '*.md?raw' {
   const content: string;
   export default content;
 }
+declare module 'react-dom' {
+  export function createPortal(children: any, container: any, key?: any): any;
+  export function flushSync<R>(fn: () => R): R;
+}
+declare module 'react-dom/server' {
+  export function renderToStaticMarkup(element: any): string;
+  export function renderToString(element: any): string;
+}
 
 interface Window {
   api: {
@@ -37,6 +50,7 @@ interface Window {
     clearAiNotifications: () => void;
     getTtsUrls: (text: string) => Promise<Array<{ shortText: string; url: string }>>;
     setAiState: (state: string) => void;
+    openExternal: (url: string) => Promise<any>;
   };
   settingsApi: {
     getSettings: () => Promise<any>;

package/src/renderer/src-web/index.css

@@ -13,6 +13,11 @@ body, html, #root {
   background: transparent;
 }
 
+[data-theme="studio"],
+[data-theme="studio"] body {
+  background-color: #101010;
+}
+
 body, html {
   font-family: var(--font-ui, 'Inter', 'Noto Sans Thai', ui-sans-serif, system-ui, sans-serif);
   -webkit-font-smoothing: antialiased;
@@ -46,22 +51,36 @@ button {
   background: color-mix(in srgb, var(--accent, #10b981) 12%, transparent);
   border: 1px solid color-mix(in srgb, var(--accent, #10b981) 25%, transparent);
   color: var(--interactive-fg);
-  padding: 2px 6px;
-  border-radius: 6px;
+  padding: 1px 6px;
+  border-radius: var(--radius-xs, 6px);
   font-weight: 500;
-  font-size: 0.9em;
-  display: inline-block;
+  font-size: 0.88em;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  vertical-align: middle;
   margin: 0 2px;
+  line-height: 1.4;
+}
+
+.chat-mention.chat-file-mention {
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+.chat-mention.chat-file-mention:hover {
+  background: color-mix(in srgb, var(--accent, #10b981) 20%, transparent);
+  border-color: color-mix(in srgb, var(--accent, #10b981) 40%, transparent);
 }
 
 .chat-ui-grid-item:hover {
   transform: translateY(-2px);
-  border-color: rgba(255, 255, 255, 0.16) !important;
-  box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.3);
+  border-color: var(--border-strong) !important;
+  box-shadow: var(--shadow-md);
 }
 
 .chat-ui-feature-item:hover {
-  border-color: rgba(255, 255, 255, 0.18) !important;
+  border-color: var(--border-strong) !important;
 }
 
 /* Minimalist AI Workspace (Claude / Cursor style) Code Block */
@@ -70,7 +89,7 @@ button {
   flex-direction: column;
   background: var(--panel-soft, #121214);
   border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
-  border-radius: 16px;
+  border-radius: var(--radius-xl, 18px);
   margin: 12px 0;
   overflow: hidden;
   box-shadow: var(--shadow-sm, 0 4px 16px rgba(0, 0, 0, 0.18));
@@ -103,9 +122,9 @@ button {
 .chat-code-block-lines {
   font-size: 0.7rem;
   color: var(--text-soft, #64748b);
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--bg-surface-soft);
   padding: 1px 6px;
-  border-radius: 4px;
+  border-radius: var(--radius-2xs, 4px);
 }
 
 .chat-code-block-actions {
@@ -120,7 +139,7 @@ button {
   color: var(--text-soft, #94a3b8);
   cursor: pointer;
   padding: 4px 8px;
-  border-radius: 5px;
+  border-radius: var(--radius-xs, 6px);
   display: inline-flex;
   align-items: center;
   gap: 5px;
@@ -130,7 +149,7 @@ button {
 }
 
 .chat-code-action-btn:hover {
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--bg-surface-hover);
   color: var(--text-main, #f1f5f9);
 }
 
@@ -138,6 +157,10 @@ button {
   padding: 4px 6px;
 }
 
+.chat-code-toggle-lines-btn.is-active {
+  color: var(--interactive-fg, #38bdf8);
+}
+
 .chat-code-copy-btn.is-copied {
   color: var(--interactive-fg);
 }
@@ -159,9 +182,9 @@ button {
 }
 
 .chat-code-block-body code {
-  font-family: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  font-size: 13px;
-  line-height: 1.6;
+  font-family: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Noto Sans Thai', monospace;
+  font-size: 14.5px;
+  line-height: 1.65;
   white-space: pre;
   color: var(--text-chat, var(--text-main, #e2e8f0));
   display: block;
@@ -183,7 +206,7 @@ button {
 }
 
 .chat-code-line:hover {
-  background: rgba(255, 255, 255, 0.02);
+  background: var(--bg-surface-soft);
 }
 
 .chat-code-line-num {
@@ -192,7 +215,7 @@ button {
   padding-right: 14px;
   text-align: right;
   color: var(--text-soft, #475569);
-  font-size: 0.76rem;
+  font-size: 0.82rem;
   user-select: none;
   opacity: 0.65;
 }
@@ -206,70 +229,18 @@ button {
   padding-left: 16px;
 }
 
-/* Syntax Highlighting Tokens - Claude / Cursor low-saturation theme */
-.token-command {
-  color: #38bdf8; /* Soft sky blue */
-  font-weight: 500;
-}
-
-.token-keyword {
-  color: #818cf8; /* Soft indigo / violet */
-  font-weight: 500;
-}
-
-.token-string {
-  color: #86efac; /* Calm emerald green */
-}
-
-.token-flag {
-  color: #fde047; /* Soft yellow / amber */
-}
-
-.token-comment {
-  color: #64748b; /* Muted slate */
-  font-style: italic;
-}
-
-.token-number {
-  color: #fdba74; /* Soft warm orange */
-}
-
-.token-variable {
-  color: #f472b6; /* Soft pink */
-}
-
-.token-property {
-  color: #93c5fd; /* Soft light blue */
-}
-
-.token-function {
-  color: #38bdf8; /* Soft sky blue */
-}
-
-.token-type {
-  color: #a78bfa; /* Soft purple */
-}
-
-.token-boolean {
-  color: #fb7185; /* Soft rose */
-}
-
-.token-operator {
-  color: #94a3b8; /* Muted slate */
-}
-
-.token-punctuation {
-  color: #64748b; /* Darker muted slate */
-}
-
 .chat-bold-highlight {
   color: var(--text-chat, var(--text-main, inherit));
   font-weight: 600;
 }
+
 /* Code Syntax Highlighting (Driven by tokens.css) */
+.token-command { color: var(--syntax-command); font-weight: 500; }
+.token-keyword { color: var(--syntax-keyword); font-weight: 500; }
+.token-tag { color: var(--syntax-variable, #f43f5e); font-weight: 500; }
 .token-string { color: var(--syntax-string); }
 .token-flag { color: var(--syntax-flag); }
-.token-comment { color: var(--syntax-comment); }
+.token-comment { color: var(--syntax-comment); font-style: italic; }
 .token-number { color: var(--syntax-number); }
 .token-variable { color: var(--syntax-variable); }
 .token-property { color: var(--syntax-property); }
@@ -279,19 +250,18 @@ button {
 .token-operator { color: var(--syntax-operator); }
 .token-punctuation { color: var(--syntax-punctuation); }
 
-/* Tech Pill Inline Code (ChatGPT style) */
+/* Minimal Inline Code */
 .chat-inline-code {
-  background: var(--bg-surface-soft);
-  border: 1px solid var(--border-default);
-  color: var(--text-primary);
-  padding: 2px 7px;
-  border-radius: var(--radius-sm, 6px);
+  background: var(--bg-surface-hover, rgba(127, 127, 127, 0.14));
+  border: none;
+  color: var(--text-chat, var(--text-primary, inherit));
+  padding: 1.5px 5px;
+  border-radius: var(--radius-xs, 4px);
   font-family: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  font-size: 0.86em;
+  font-size: 0.88em;
   font-weight: 500;
   letter-spacing: -0.01em;
-  box-shadow: var(--shadow-sm);
-  display: inline-block;
+  box-shadow: none;
   vertical-align: baseline;
 }
 

package/src/renderer/src-web/tauri.ts

@@ -1,5 +1,8 @@
+import { createWorkspaceMediaReader } from '../shared/utils/workspaceMedia'
+import { createWorkspaceImageReader } from '../shared/utils/workspaceImage'
 import { createLibraryTransport } from '../shared/library/transport'
 import { createSourcesTransport } from '../shared/conversation/sourcesTransport'
+import { createExternalLinkInterceptor } from '../shared/utils/externalLinks'
 export * from '../shared/types'
 import type { MintPlatformApi } from '../shared/platform'
 import { createConversationTransport } from '../shared/conversation/transport'
@@ -467,6 +470,17 @@ export const { sendChatMessage, streamChatMessage } = createConversationTranspor
   ownerToken: getStoredAuthToken,
 })
 
+export async function speechRequest(request: import('../shared/speech/types').SpeechRequest): Promise<import('../shared/speech/types').SpeechReply> {
+  if (isTauriRuntime()) {
+    const { invoke } = await import('@tauri-apps/api/core')
+    return invoke('speech_request', { request })
+  }
+  const response = await authFetch(`${getLocalApiBase()}/speech`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(request) })
+  const result = await response.json()
+  if (!response.ok) throw new Error(result.error || 'Speech request failed')
+  return result
+}
+
 export async function getTtsUrls(text: string): Promise<TtsUrl[]> {
   if (typeof window === 'undefined') return []
   if (!isTauriRuntime()) return []
@@ -652,6 +666,12 @@ export async function saveInteractionAgentActivity(
   await invoke('save_interaction_agent_activity', { interactionId, activity })
 }
 
+export async function pendingCompanionChat(acknowledgedId?: string): Promise<string | null> {
+  if (!isTauriRuntime()) return null
+  const { invoke } = await import('@tauri-apps/api/core')
+  return invoke<string | null>('pending_companion_chat', { acknowledgedId: acknowledgedId ?? null })
+}
+
 export async function listChatSessions(): Promise<ChatSession[]> {
   if (typeof window === 'undefined' || !isTauriRuntime()) {
     const API_BASE = getApiBase();
@@ -778,6 +798,25 @@ export async function clearChatHistory(chatId?: string | null): Promise<number>
   return invoke<number>('clear_chat_history', { chatId })
 }
 
+export async function truncateInteractionsFrom(chatId: string | null | undefined, fromId: number): Promise<number> {
+  if (typeof window === 'undefined' || !isTauriRuntime()) {
+    const API_BASE = getApiBase();
+    try {
+      const params = new URLSearchParams();
+      if (chatId) params.set('chatId', chatId);
+      params.set('fromId', String(fromId));
+      const res = await authFetch(`${API_BASE}/interactions/truncate?${params.toString()}`, { method: 'POST' });
+      const data = await res.json();
+      return data.status === 'ok' ? 1 : 0;
+    } catch (e) {
+      console.error("Failed to truncate interactions on web:", e);
+      return 0;
+    }
+  }
+  const { invoke } = await import('@tauri-apps/api/core')
+  return invoke<number>('truncate_interactions_from', { chatId, fromId })
+}
+
 export async function listSavedPictures(): Promise<PictureEntry[]> {
   if (typeof window === 'undefined' || !isTauriRuntime()) {
     const API_BASE = getApiBase();
@@ -1004,7 +1043,43 @@ export function convertFileSrc(filePath: string, protocol = 'asset'): string {
   return `https://asset.localhost/${encodeURIComponent(path)}`;
 }
 
+/**
+ * Opens an external URL in the system's default browser (via Tauri desktop action in Tauri runtime,
+ * or window.open in fallback browser environments).
+ */
+export async function openExternal(url: string): Promise<any> {
+  if (isTauriRuntime()) {
+    const { invoke } = await import('@tauri-apps/api/core')
+    return invoke('run_desktop_action', { action: { type: 'open_url', target: url } })
+  }
+  if (typeof window !== 'undefined') {
+    return window.open(url, '_blank', 'noopener,noreferrer')
+  }
+}
+
+let activeWebLinkInterceptorCleanup: (() => void) | null = null
+
+const baseInstallExternalLinkInterceptor = createExternalLinkInterceptor(openExternal)
+
+/**
+ * Global link interceptor: Catches clicks on anchor tags pointing to external URLs
+ * and opens them via Tauri desktop actions when running in a Tauri webview.
+ */
+export const installExternalLinkInterceptor = (
+  targetDocument: Document | null = typeof document !== 'undefined' ? document : null
+): () => void => {
+  if (!targetDocument || !isTauriRuntime()) return () => {}
+  return baseInstallExternalLinkInterceptor(targetDocument)
+}
+
 export function installTauriAdapters() {
+  if (typeof document !== 'undefined' && isTauriRuntime()) {
+    if (activeWebLinkInterceptorCleanup) {
+      activeWebLinkInterceptorCleanup()
+    }
+    activeWebLinkInterceptorCleanup = installExternalLinkInterceptor(document)
+  }
+
   if (typeof window === 'undefined' || !isTauriRuntime()) {
     console.warn(`Not running inside Tauri. Connecting to local API server fallback at ${getApiBase()}.`);
     const API_BASE = getApiBase();
@@ -1041,9 +1116,7 @@ export function installTauriAdapters() {
         window.location.hash = '#/';
       },
       quitApp: () => undefined,
-      openExternal: async (url: string) => {
-        window.open(url, '_blank', 'noopener,noreferrer')
-      },
+      openExternal: (url: string) => openExternal(url),
       openFolder: async () => ({ success: false, message: 'Opening local folders is only available in the desktop app.' }),
     };
 
@@ -1226,6 +1299,7 @@ export function installTauriAdapters() {
       clearAiNotifications: clearBrowserNotifications,
       getTtsUrls: async () => [],
       setAiState: () => {},
+      openExternal: (url: string) => openExternal(url),
     };
     return;
   }
@@ -1271,10 +1345,7 @@ export function installTauriAdapters() {
       const { invoke } = await import('@tauri-apps/api/core')
       return void invoke('exit_app')
     },
-    openExternal: async (url) => {
-      const { invoke } = await import('@tauri-apps/api/core')
-      return invoke('run_desktop_action', { action: { type: 'open_url', target: url } })
-    },
+    openExternal: (url: string) => openExternal(url),
     openFolder: async (path) => {
       const { invoke } = await import('@tauri-apps/api/core')
       return invoke('open_folder', { path })
@@ -1416,6 +1487,7 @@ export function installTauriAdapters() {
       const { invoke } = await import('@tauri-apps/api/core')
       return void invoke('set_ai_state', { state })
     },
+    openExternal: (url: string) => openExternal(url),
   }
 }
 
@@ -2269,6 +2341,10 @@ export async function undoGitCheckpoint(
   }
 }
 
+export const readWorkspaceMedia = createWorkspaceMediaReader({ isNative: isTauriRuntime, apiBase: getLocalApiBase, fetch: authFetch, convertFileSrc })
+
+export const readWorkspaceImage = createWorkspaceImageReader({ isNative: isTauriRuntime, apiBase: getLocalApiBase, fetch: authFetch })
+
 export const readWorkspaceFile = async (path: string, workspacePath?: string): Promise<string> => {
   if (!isTauriRuntime()) {
     try {
@@ -2325,14 +2401,14 @@ const _apiCheck: MintPlatformApi = {
   detectSystemTools,
   sendChatMessage,
   streamChatMessage,
-  getTtsUrls,
+  getTtsUrls, speechRequest,
   cancelChatMessage,
   getRecentInteractions,
   getConversationSnapshot,
   getConversationChanges,
   saveSystemInteraction,
   saveInteractionAgentActivity,
-  listChatSessions,
+  listChatSessions, pendingCompanionChat,
   updateChatSessionWorkspace,
   deleteChatSession,
   renameChatSession,
@@ -2345,6 +2421,7 @@ const _apiCheck: MintPlatformApi = {
   saveSubagent,
   deleteSubagent,
   clearChatHistory,
+  truncateInteractionsFrom,
   listSavedPictures,
   deleteSavedPicture,
   generateImages,
@@ -2374,7 +2451,8 @@ const _apiCheck: MintPlatformApi = {
   listGitCheckpoints,
   rollbackGitCheckpoint,
   undoGitCheckpoint,
-  readWorkspaceFile,
+  readWorkspaceFile, readWorkspaceImage, readWorkspaceMedia,
+  openExternal,
   testMcpConnection,
 }
 
@@ -2393,20 +2471,20 @@ export function getBackgroundJob(id: string) { return backgroundRequest<import('
 export function stopBackgroundJob(id: string) { return backgroundRequest<import('../shared/types').BackgroundJob>(`/${encodeURIComponent(id)}/stop`, 'POST') }
 export function deleteBackgroundJob(id: string) { return backgroundRequest<{deleted: boolean}>(`/${encodeURIComponent(id)}`, 'DELETE').then(() => undefined) }
 
-export async function startHtmlPreview(root: string, relativePath: string, mintBrowser = false): Promise<{url: string; jobId: string}> {
-  const response = await authFetch(`${getLocalApiBase()}/html-preview`, { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({root, relativePath, mintBrowser}) })
+export async function startHtmlPreview(root: string, relativePath: string, _mintBrowser = false): Promise<{url: string; jobId: string}> {
+  const response = await authFetch(`${getLocalApiBase()}/html-preview`, { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({root, relativePath}) })
   const value = await response.json()
   if (!response.ok) throw new Error(value.message || 'Could not start HTML preview')
   return value
 }
 
 /** Loads artifacts by ID; no server-provided filesystem path is accepted. */
-export async function readMcpArtifact(id: string): Promise<string> {
+export async function readMcpArtifact(id: string, chatId?: string): Promise<string> {
   if (isTauriRuntime()) {
     const { invoke } = await import('@tauri-apps/api/core')
-    return invoke<string>('read_mcp_artifact', { id })
+    return invoke<string>('read_mcp_artifact', { id, chatId })
   }
-  const response = await authFetch(`${getApiBase()}/mcp-artifacts/${encodeURIComponent(id)}`)
+  const response = await authFetch(`${getApiBase()}/mcp-artifacts/${encodeURIComponent(id)}${chatId ? `?chatId=${encodeURIComponent(chatId)}` : ''}`)
   if (!response.ok) throw new Error('Artifact unavailable')
   return URL.createObjectURL(await response.blob())
 }

package/src/renderer/tests/browserArtifacts.browser.html

@@ -0,0 +1 @@
+<!doctype html><html data-theme="dark"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"></head><body><div id="root"></div><script type="module" src="./browserArtifacts.browser.tsx"></script></body></html>