bingocode 1.0.3 → 1.0.4

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

@@ -1,318 +0,0 @@
-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

@@ -1,96 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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

@@ -1,100 +0,0 @@
-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'))
-  })
-})