bingocode 1.0.1 → 1.0.3

package/desktop/src/components/layout/TabBar.tsx

@@ -0,0 +1,318 @@
+import { useRef, useState, useEffect, useCallback } from 'react'
+import { useTabStore, type Tab } from '../../stores/tabStore'
+import { useChatStore } from '../../stores/chatStore'
+import { useTranslation } from '../../i18n'
+import { WindowControls, showWindowControls } from './WindowControls'
+
+const TAB_WIDTH = 180
+
+export function TabBar() {
+  const tabs = useTabStore((s) => s.tabs)
+  const activeTabId = useTabStore((s) => s.activeTabId)
+  const setActiveTab = useTabStore((s) => s.setActiveTab)
+  const closeTab = useTabStore((s) => s.closeTab)
+  const disconnectSession = useChatStore((s) => s.disconnectSession)
+
+  const moveTab = useTabStore((s) => s.moveTab)
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const [canScrollLeft, setCanScrollLeft] = useState(false)
+  const [canScrollRight, setCanScrollRight] = useState(false)
+  const [contextMenu, setContextMenu] = useState<{ sessionId: string; x: number; y: number } | null>(null)
+  const [closingTabId, setClosingTabId] = useState<string | null>(null)
+  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null)
+  const dragIndexRef = useRef<number | null>(null)
+  const t = useTranslation()
+
+  const updateScrollState = useCallback(() => {
+    const el = scrollRef.current
+    if (!el) return
+    setCanScrollLeft(el.scrollLeft > 0)
+    setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1)
+  }, [])
+
+  useEffect(() => {
+    updateScrollState()
+    const el = scrollRef.current
+    if (!el) return
+    el.addEventListener('scroll', updateScrollState)
+    const ro = new ResizeObserver(updateScrollState)
+    ro.observe(el)
+    return () => {
+      el.removeEventListener('scroll', updateScrollState)
+      ro.disconnect()
+    }
+  }, [updateScrollState, tabs.length])
+
+  useEffect(() => {
+    if (!contextMenu) return
+    const close = () => setContextMenu(null)
+    document.addEventListener('click', close)
+    return () => document.removeEventListener('click', close)
+  }, [contextMenu])
+
+  const scroll = (direction: 'left' | 'right') => {
+    const el = scrollRef.current
+    if (!el) return
+    el.scrollBy({ left: direction === 'left' ? -TAB_WIDTH : TAB_WIDTH, behavior: 'smooth' })
+  }
+
+  const handleClose = (sessionId: string) => {
+    // Special tabs can always be closed directly
+    const tab = tabs.find((t) => t.sessionId === sessionId)
+    if (tab && tab.type !== 'session') {
+      closeTab(sessionId)
+      return
+    }
+
+    const sessionState = useChatStore.getState().sessions[sessionId]
+    const isRunning = sessionState && sessionState.chatState !== 'idle'
+
+    if (isRunning) {
+      setClosingTabId(sessionId)
+      return
+    }
+
+    disconnectSession(sessionId)
+    closeTab(sessionId)
+  }
+
+  const handleContextMenu = (e: React.MouseEvent, sessionId: string) => {
+    e.preventDefault()
+    setContextMenu({ sessionId, x: e.clientX, y: e.clientY })
+  }
+
+  const handleCloseOthers = (sessionId: string) => {
+    setContextMenu(null)
+    const otherIds = tabs.filter((t) => t.sessionId !== sessionId).map((t) => t.sessionId)
+    for (const id of otherIds) {
+      disconnectSession(id)
+      closeTab(id)
+    }
+  }
+
+  const handleCloseLeft = (sessionId: string) => {
+    setContextMenu(null)
+    const idx = tabs.findIndex((t) => t.sessionId === sessionId)
+    const leftIds = tabs.slice(0, idx).map((t) => t.sessionId)
+    for (const id of leftIds) {
+      disconnectSession(id)
+      closeTab(id)
+    }
+  }
+
+  const handleCloseRight = (sessionId: string) => {
+    setContextMenu(null)
+    const idx = tabs.findIndex((t) => t.sessionId === sessionId)
+    const rightIds = tabs.slice(idx + 1).map((t) => t.sessionId)
+    for (const id of rightIds) {
+      disconnectSession(id)
+      closeTab(id)
+    }
+  }
+
+  const handleCloseAll = () => {
+    setContextMenu(null)
+    const allIds = tabs.map((t) => t.sessionId)
+    for (const id of allIds) {
+      disconnectSession(id)
+      closeTab(id)
+    }
+  }
+
+  const handleDragStart = (index: number) => {
+    dragIndexRef.current = index
+  }
+
+  const handleDragOver = (e: React.DragEvent, index: number) => {
+    e.preventDefault()
+    if (dragIndexRef.current === null || dragIndexRef.current === index) {
+      setDragOverIndex(null)
+      return
+    }
+    setDragOverIndex(index)
+  }
+
+  const handleDrop = (index: number) => {
+    if (dragIndexRef.current !== null && dragIndexRef.current !== index) {
+      moveTab(dragIndexRef.current, index)
+    }
+    dragIndexRef.current = null
+    setDragOverIndex(null)
+  }
+
+  const handleDragEnd = () => {
+    dragIndexRef.current = null
+    setDragOverIndex(null)
+  }
+
+  if (tabs.length === 0 && !showWindowControls) return null
+
+  return (
+    <div
+      data-testid="tab-bar"
+      data-tauri-drag-region
+      className="flex items-stretch bg-[var(--color-surface-container)] min-h-[37px] select-none border-b border-[var(--color-border)]"
+    >
+
+      {canScrollLeft && (
+        <button onClick={() => scroll('left')} className="flex-shrink-0 w-7 h-[37px] flex items-center justify-center text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]">
+          <span className="material-symbols-outlined text-[16px]">chevron_left</span>
+        </button>
+      )}
+
+      <div ref={scrollRef} className="flex-1 flex items-stretch overflow-x-hidden" onDragOver={(e) => e.preventDefault()}>
+        {tabs.map((tab, index) => (
+          <TabItem
+            key={tab.sessionId}
+            tab={tab}
+            isActive={tab.sessionId === activeTabId}
+            isDragOver={dragOverIndex === index}
+            onClick={() => setActiveTab(tab.sessionId)}
+            onClose={() => handleClose(tab.sessionId)}
+            onContextMenu={(e) => handleContextMenu(e, tab.sessionId)}
+            onDragStart={() => handleDragStart(index)}
+            onDragOver={(e) => handleDragOver(e, index)}
+            onDrop={() => handleDrop(index)}
+            onDragEnd={handleDragEnd}
+          />
+        ))}
+      </div>
+
+      {canScrollRight && (
+        <button onClick={() => scroll('right')} className="flex-shrink-0 w-7 h-[37px] flex items-center justify-center text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]">
+          <span className="material-symbols-outlined text-[16px]">chevron_right</span>
+        </button>
+      )}
+
+      <WindowControls />
+
+      {contextMenu && (
+        <div
+          className="fixed z-50 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-[var(--radius-md)] py-1 min-w-[160px]"
+          style={{ left: contextMenu.x, top: contextMenu.y, boxShadow: 'var(--shadow-dropdown)' }}
+        >
+          <button
+            onClick={() => { handleClose(contextMenu.sessionId); setContextMenu(null) }}
+            className="w-full px-3 py-1.5 text-xs text-left text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]"
+          >
+            {t('tabs.close')}
+          </button>
+          <button
+            onClick={() => handleCloseOthers(contextMenu.sessionId)}
+            className="w-full px-3 py-1.5 text-xs text-left text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]"
+          >
+            {t('tabs.closeOthers')}
+          </button>
+          <button
+            onClick={() => handleCloseLeft(contextMenu.sessionId)}
+            className="w-full px-3 py-1.5 text-xs text-left text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]"
+          >
+            {t('tabs.closeLeft')}
+          </button>
+          <button
+            onClick={() => handleCloseRight(contextMenu.sessionId)}
+            className="w-full px-3 py-1.5 text-xs text-left text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]"
+          >
+            {t('tabs.closeRight')}
+          </button>
+          <div className="my-1 border-t border-[var(--color-border)]" />
+          <button
+            onClick={handleCloseAll}
+            className="w-full px-3 py-1.5 text-xs text-left text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]"
+          >
+            {t('tabs.closeAll')}
+          </button>
+        </div>
+      )}
+
+      {closingTabId && (
+        <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/30">
+          <div className="bg-[var(--color-surface)] rounded-xl border border-[var(--color-border)] p-6 max-w-sm w-full mx-4" style={{ boxShadow: 'var(--shadow-dropdown)' }}>
+            <h3 className="text-sm font-semibold text-[var(--color-text-primary)] mb-2">{t('tabs.closeConfirmTitle')}</h3>
+            <p className="text-xs text-[var(--color-text-secondary)] mb-4">{t('tabs.closeConfirmMessage')}</p>
+            <div className="flex justify-end gap-2">
+              <button onClick={() => setClosingTabId(null)} className="px-3 py-1.5 text-xs rounded-lg border border-[var(--color-border)] text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)]">
+                {t('common.cancel')}
+              </button>
+              <button
+                onClick={() => { closeTab(closingTabId); setClosingTabId(null) }}
+                className="px-3 py-1.5 text-xs rounded-lg border border-[var(--color-border)] text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)]"
+              >
+                {t('tabs.closeConfirmKeep')}
+              </button>
+              <button
+                onClick={() => {
+                  useChatStore.getState().stopGeneration(closingTabId)
+                  disconnectSession(closingTabId)
+                  closeTab(closingTabId)
+                  setClosingTabId(null)
+                }}
+                className="px-3 py-1.5 text-xs rounded-lg bg-[var(--color-brand)] text-white hover:opacity-90"
+              >
+                {t('tabs.closeConfirmStop')}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function TabItem({ tab, isActive, isDragOver, onClick, onClose, onContextMenu, onDragStart, onDragOver, onDrop, onDragEnd }: {
+  tab: Tab
+  isActive: boolean
+  isDragOver: boolean
+  onClick: () => void
+  onClose: () => void
+  onContextMenu: (e: React.MouseEvent) => void
+  onDragStart: () => void
+  onDragOver: (e: React.DragEvent) => void
+  onDrop: () => void
+  onDragEnd: () => void
+}) {
+  return (
+    <div
+      draggable
+      onClick={onClick}
+      onContextMenu={onContextMenu}
+      onDragStart={onDragStart}
+      onDragOver={onDragOver}
+      onDrop={onDrop}
+      onDragEnd={onDragEnd}
+      className={`
+        flex-shrink-0 flex items-center gap-1.5 px-3 min-h-[37px] cursor-pointer group transition-colors relative
+        ${isActive
+          ? 'bg-[var(--color-surface)]'
+          : 'bg-transparent hover:bg-[var(--color-surface-hover)]'
+        }
+        ${isDragOver ? 'before:absolute before:left-0 before:top-[6px] before:bottom-[6px] before:w-[2px] before:bg-[var(--color-brand)] before:rounded-full' : ''}
+      `}
+      style={{ width: TAB_WIDTH, maxWidth: TAB_WIDTH }}
+    >
+      {tab.type === 'session' && tab.status === 'running' && (
+        <span className="w-1.5 h-1.5 rounded-full bg-[var(--color-success)] animate-pulse flex-shrink-0" />
+      )}
+      {tab.type === 'session' && tab.status === 'error' && (
+        <span className="w-1.5 h-1.5 rounded-full bg-[var(--color-error)] flex-shrink-0" />
+      )}
+      {tab.type === 'settings' && (
+        <span className="material-symbols-outlined text-[14px] flex-shrink-0 text-[var(--color-text-tertiary)]">settings</span>
+      )}
+      {tab.type === 'scheduled' && (
+        <span className="material-symbols-outlined text-[14px] flex-shrink-0 text-[var(--color-text-tertiary)]">schedule</span>
+      )}
+
+      <span className={`flex-1 truncate text-xs ${isActive ? 'text-[var(--color-text-primary)] font-medium' : 'text-[var(--color-text-secondary)]'}`}>
+        {tab.title || 'Untitled'}
+      </span>
+
+      <button
+        onClick={(e) => { e.stopPropagation(); onClose() }}
+        className="flex-shrink-0 w-4 h-4 flex items-center justify-center rounded opacity-0 group-hover:opacity-100 hover:bg-[var(--color-surface-hover)] transition-opacity text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)]"
+      >
+        <span className="material-symbols-outlined text-[14px]">close</span>
+      </button>
+    </div>
+  )
+}

package/desktop/src/components/layout/TitleBar.tsx

@@ -0,0 +1,96 @@
+import { useUIStore } from '../../stores/uiStore'
+import { useTranslation } from '../../i18n'
+
+export function TitleBar() {
+  const { activeView, setActiveView } = useUIStore()
+  const t = useTranslation()
+
+  return (
+    <div
+      className="h-[var(--titlebar-height)] flex items-center border-b border-[var(--color-border)] bg-[var(--color-surface)] select-none"
+      data-tauri-drag-region
+    >
+      {/* macOS traffic light spacer */}
+      <div className="w-[78px] flex-shrink-0" data-tauri-drag-region />
+
+      {/* Logo */}
+      <div className="flex items-center gap-2 mr-4" data-tauri-drag-region>
+        <span className="text-xs font-bold tracking-wider text-[var(--color-brand)] uppercase">Claude Code Companion</span>
+      </div>
+
+      {/* Navigation arrows */}
+      <div className="flex items-center gap-1 mr-4">
+        <button className="p-1 rounded-[var(--radius-md)] text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] transition-colors">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M15 18l-6-6 6-6" />
+          </svg>
+        </button>
+        <button className="p-1 rounded-[var(--radius-md)] text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] transition-colors">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M9 18l6-6-6-6" />
+          </svg>
+        </button>
+      </div>
+
+      {/* Center tabs */}
+      <div className="flex-1 flex items-center justify-center gap-1" data-tauri-drag-region>
+        <TabButton
+          active={activeView === 'code'}
+          onClick={() => setActiveView('code')}
+          icon="code"
+        >
+          {t('titlebar.code')}
+        </TabButton>
+        <TabButton
+          active={activeView === 'terminal'}
+          onClick={() => setActiveView('terminal')}
+          icon="terminal"
+        >
+          {t('titlebar.terminal')}
+        </TabButton>
+        <TabButton
+          active={activeView === 'history'}
+          onClick={() => setActiveView('history')}
+          icon="history"
+        >
+          {t('titlebar.history')}
+        </TabButton>
+      </div>
+
+      {/* Right: Settings */}
+      <div className="flex items-center gap-2 mr-4">
+        <button className="p-1.5 rounded-[var(--radius-md)] text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] transition-colors">
+          <span className="material-symbols-outlined text-[18px]">settings</span>
+        </button>
+      </div>
+    </div>
+  )
+}
+
+function TabButton({
+  active,
+  onClick,
+  icon,
+  children,
+}: {
+  active: boolean
+  onClick: () => void
+  icon: string
+  children: React.ReactNode
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={`
+        flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-[var(--radius-md)] transition-colors duration-200
+        ${active
+          ? 'bg-[var(--color-surface-selected)] text-[var(--color-text-primary)]'
+          : 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]'
+        }
+      `}
+    >
+      <span className="material-symbols-outlined text-[16px]">{icon}</span>
+      {children}
+    </button>
+  )
+}

package/desktop/src/components/layout/WindowControls.test.tsx

@@ -0,0 +1,69 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+const minimize = vi.fn().mockResolvedValue(undefined)
+const toggleMaximize = vi.fn().mockResolvedValue(undefined)
+const close = vi.fn().mockResolvedValue(undefined)
+const isMaximized = vi.fn().mockResolvedValue(false)
+const onResized = vi.fn().mockResolvedValue(() => {})
+
+vi.mock('@tauri-apps/api/window', () => ({
+  getCurrentWindow: () => ({
+    minimize,
+    toggleMaximize,
+    close,
+    isMaximized,
+    onResized,
+  }),
+}))
+
+describe('WindowControls', () => {
+  const originalPlatform = navigator.platform
+
+  beforeEach(async () => {
+    minimize.mockClear()
+    toggleMaximize.mockClear()
+    close.mockClear()
+    isMaximized.mockClear()
+    onResized.mockClear()
+
+    Object.defineProperty(window, '__TAURI_INTERNALS__', {
+      configurable: true,
+      value: {},
+    })
+    Object.defineProperty(navigator, 'platform', {
+      configurable: true,
+      value: 'Win32',
+    })
+    vi.resetModules()
+  })
+
+  afterEach(() => {
+    Reflect.deleteProperty(window, '__TAURI_INTERNALS__')
+    Object.defineProperty(navigator, 'platform', {
+      configurable: true,
+      value: originalPlatform,
+    })
+  })
+
+  it('invokes Tauri window APIs for custom controls on Windows', async () => {
+    const { WindowControls } = await import('./WindowControls')
+
+    render(<WindowControls />)
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Minimize window' })).toBeInTheDocument()
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Minimize window' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Maximize window' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Close window' }))
+
+    await waitFor(() => {
+      expect(minimize).toHaveBeenCalledTimes(1)
+      expect(toggleMaximize).toHaveBeenCalledTimes(1)
+      expect(close).toHaveBeenCalledTimes(1)
+    })
+  })
+})

package/desktop/src/components/layout/WindowControls.tsx

@@ -0,0 +1,89 @@
+import { useState, useEffect } from 'react'
+
+const isTauri = typeof window !== 'undefined' && ('__TAURI_INTERNALS__' in window || '__TAURI__' in window)
+const isWindows = typeof navigator !== 'undefined' && /Win/.test(navigator.platform)
+
+/** Whether to render custom window controls (Windows + Tauri only) */
+export const showWindowControls = isTauri && isWindows
+
+export function WindowControls() {
+  const [maximized, setMaximized] = useState(false)
+  const [win, setWin] = useState<{
+    minimize: () => Promise<void>
+    toggleMaximize: () => Promise<void>
+    close: () => Promise<void>
+    isMaximized: () => Promise<boolean>
+    onResized: (handler: () => void) => Promise<() => void>
+  } | null>(null)
+
+  useEffect(() => {
+    if (!showWindowControls) return
+    let unlisten: (() => void) | undefined
+
+    import('@tauri-apps/api/window')
+      .then(async ({ getCurrentWindow }) => {
+        const w = getCurrentWindow()
+        setWin(w as any)
+        setMaximized(await w.isMaximized())
+        unlisten = await w.onResized(async () => {
+          setMaximized(await w.isMaximized())
+        })
+      })
+      .catch(() => {})
+
+    return () => { unlisten?.() }
+  }, [])
+
+  const runWindowAction = (action: () => Promise<void>) => {
+    void action().catch((error) => {
+      console.error('Window control action failed', error)
+    })
+  }
+
+  if (!showWindowControls || !win) return null
+
+  return (
+    <div data-testid="window-controls" className="flex items-stretch flex-shrink-0 -my-px">
+      {/* Minimize */}
+      <button
+        onClick={() => runWindowAction(() => win.minimize())}
+        aria-label="Minimize window"
+        className="w-[46px] h-full flex items-center justify-center text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)] transition-colors"
+      >
+        <svg width="10" height="1" viewBox="0 0 10 1">
+          <rect width="10" height="1" fill="currentColor" />
+        </svg>
+      </button>
+
+      {/* Maximize / Restore */}
+      <button
+        onClick={() => runWindowAction(() => win.toggleMaximize())}
+        aria-label={maximized ? 'Restore window' : 'Maximize window'}
+        className="w-[46px] h-full flex items-center justify-center text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)] transition-colors"
+      >
+        {maximized ? (
+          <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1">
+            <rect x="0" y="3" width="7" height="7" />
+            <polyline points="3,3 3,0 10,0 10,7 7,7" />
+          </svg>
+        ) : (
+          <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1">
+            <rect x="0.5" y="0.5" width="9" height="9" />
+          </svg>
+        )}
+      </button>
+
+      {/* Close */}
+      <button
+        onClick={() => runWindowAction(() => win.close())}
+        aria-label="Close window"
+        className="w-[46px] h-full flex items-center justify-center text-[var(--color-text-secondary)] hover:bg-[var(--color-window-close-hover)] hover:text-white transition-colors"
+      >
+        <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.2">
+          <line x1="0" y1="0" x2="10" y2="10" />
+          <line x1="10" y1="0" x2="0" y2="10" />
+        </svg>
+      </button>
+    </div>
+  )
+}

package/desktop/src/components/markdown/MarkdownRenderer.test.tsx

@@ -0,0 +1,100 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+vi.mock('../chat/CodeViewer', () => ({
+  CodeViewer: ({ code, language }: { code: string; language?: string }) => (
+    <div data-testid="code-viewer" data-language={language ?? ''}>
+      {code}
+    </div>
+  ),
+}))
+
+vi.mock('../chat/MermaidRenderer', () => ({
+  MermaidRenderer: ({ code }: { code: string }) => (
+    <div data-testid="mermaid-renderer">{code}</div>
+  ),
+}))
+
+import { MarkdownRenderer } from './MarkdownRenderer'
+
+describe('MarkdownRenderer', () => {
+  it('applies document prose classes and custom width classes', () => {
+    const { container } = render(
+      <MarkdownRenderer
+        content={'# Skill Title\n\nReadable paragraph text.'}
+        variant="document"
+        className="mx-auto max-w-[72ch]"
+      />,
+    )
+
+    const root = container.firstChild as HTMLDivElement
+    expect(root).toBeInTheDocument()
+    expect(root.className).toContain('prose-p:text-[15px]')
+    expect(root.className).toContain('prose-h2:border-b')
+    expect(root.className).toContain('mx-auto')
+    expect(root.className).toContain('max-w-[72ch]')
+    expect(screen.getByText('Skill Title')).toBeInTheDocument()
+    expect(screen.getByText('Readable paragraph text.')).toBeInTheDocument()
+  })
+
+  it('keeps default variant free of document-only typography classes', () => {
+    const { container } = render(
+      <MarkdownRenderer content={'## Default Heading\n\nBody copy.'} />,
+    )
+
+    const root = container.firstChild as HTMLDivElement
+    expect(root).toBeInTheDocument()
+    expect(root.className).not.toContain('prose-p:text-[15px]')
+    expect(root.className).not.toContain('prose-h2:border-b')
+    expect(screen.getByText('Default Heading')).toBeInTheDocument()
+    expect(screen.getByText('Body copy.')).toBeInTheDocument()
+  })
+
+  it('renders mermaid fenced blocks with the Mermaid renderer', () => {
+    render(<MarkdownRenderer content={'```mermaid\ngraph TB\nA-->B\n```'} />)
+
+    expect(screen.getByTestId('mermaid-renderer')).toHaveTextContent(
+      /graph TB\s+A-->B/,
+    )
+    expect(screen.queryByTestId('code-viewer')).not.toBeInTheDocument()
+  })
+
+  it('detects mermaid diagrams even when the fence has no language tag', () => {
+    render(<MarkdownRenderer content={'```\ngraph TB\nA-->B\n```'} />)
+
+    expect(screen.getByTestId('mermaid-renderer')).toHaveTextContent(
+      /graph TB\s+A-->B/,
+    )
+    expect(screen.queryByTestId('code-viewer')).not.toBeInTheDocument()
+  })
+
+  it('keeps non-mermaid code fences in the normal code viewer', () => {
+    render(<MarkdownRenderer content={'```ts\nconst value = 1\n```'} />)
+
+    expect(screen.getByTestId('code-viewer')).toHaveAttribute(
+      'data-language',
+      'ts',
+    )
+    expect(screen.queryByTestId('mermaid-renderer')).not.toBeInTheDocument()
+  })
+
+  it('wraps markdown tables for horizontal overflow handling', () => {
+    const { container } = render(
+      <MarkdownRenderer
+        content={'| Name | Value |\n| --- | --- |\n| `index.html` | Ready |'}
+      />,
+    )
+
+    expect(container.querySelector('.md-table-wrap')).toBeInTheDocument()
+    expect(screen.getByText('index.html')).toBeInTheDocument()
+  })
+
+  it('opens markdown links in a new tab safely', () => {
+    render(<MarkdownRenderer content={'[OpenAI](https://openai.com)'} />)
+
+    const link = screen.getByRole('link', { name: 'OpenAI' })
+    expect(link).toHaveAttribute('target', '_blank')
+    expect(link).toHaveAttribute('rel', expect.stringContaining('noopener'))
+  })
+})