bingocode 1.0.3 → 1.0.4

package/desktop/src/components/chat/DiffViewer.tsx

@@ -1,157 +0,0 @@
-import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer-continued'
-import { Highlight, type PrismTheme } from 'prism-react-renderer'
-import { CopyButton } from '../shared/CopyButton'
-
-type Props = {
-  filePath: string
-  oldString: string
-  newString: string
-}
-
-function inferLanguage(filePath: string): string {
-  const ext = filePath.split('.').pop()?.toLowerCase()
-  const langMap: Record<string, string> = {
-    ts: 'typescript', tsx: 'tsx', js: 'javascript', jsx: 'jsx',
-    py: 'python', rs: 'rust', go: 'go', rb: 'ruby',
-    json: 'json', yaml: 'yaml', yml: 'yaml', toml: 'toml',
-    md: 'markdown', css: 'css', html: 'markup', xml: 'markup',
-    sql: 'sql', sh: 'bash', bash: 'bash', zsh: 'bash',
-  }
-  return langMap[ext ?? ''] || 'text'
-}
-
-/** Shared warm syntax theme — must stay in sync with CodeViewer */
-const warmSyntaxTheme: PrismTheme = {
-  plain: {
-    color: 'var(--color-code-fg)',
-    backgroundColor: 'transparent',
-  },
-  styles: [
-    { types: ['comment', 'prolog', 'doctype', 'cdata'], style: { color: 'var(--color-code-comment)', fontStyle: 'italic' as const } },
-    { types: ['string', 'attr-value', 'template-string'], style: { color: 'var(--color-code-string)' } },
-    { types: ['keyword', 'selector', 'important', 'atrule'], style: { color: 'var(--color-code-keyword)' } },
-    { types: ['function'], style: { color: 'var(--color-code-function)' } },
-    { types: ['tag'], style: { color: 'var(--color-code-keyword)' } },
-    { types: ['number', 'boolean'], style: { color: 'var(--color-code-number)' } },
-    { types: ['operator'], style: { color: 'var(--color-code-fg)' } },
-    { types: ['punctuation'], style: { color: 'var(--color-code-punctuation)' } },
-    { types: ['variable', 'parameter'], style: { color: 'var(--color-code-fg)' } },
-    { types: ['property', 'attr-name'], style: { color: 'var(--color-code-property)' } },
-    { types: ['builtin', 'class-name', 'constant', 'symbol'], style: { color: 'var(--color-code-type)' } },
-    { types: ['regex'], style: { color: 'var(--color-primary-container)' } },
-    { types: ['inserted'], style: { color: 'var(--color-code-inserted)' } },
-    { types: ['deleted'], style: { color: 'var(--color-code-deleted)' } },
-  ],
-}
-
-function highlightSyntax(str: string, language: string) {
-  return (
-    <Highlight theme={warmSyntaxTheme} code={str} language={language}>
-      {({ tokens, getTokenProps }) => (
-        <>
-          {tokens.map((line, i) => (
-            <span key={i}>
-              {line.map((token, key) => (
-                <span key={key} {...getTokenProps({ token })} />
-              ))}
-            </span>
-          ))}
-        </>
-      )}
-    </Highlight>
-  )
-}
-
-const diffStyles = {
-  variables: {
-    light: {
-      diffViewerBackground: 'var(--color-code-bg)',
-      diffViewerColor: 'var(--color-code-fg)',
-      addedBackground: 'var(--color-diff-added-bg)',
-      addedColor: 'var(--color-code-fg)',
-      removedBackground: 'var(--color-diff-removed-bg)',
-      removedColor: 'var(--color-code-fg)',
-      wordAddedBackground: 'var(--color-diff-added-word)',
-      wordRemovedBackground: 'var(--color-diff-removed-word)',
-      addedGutterBackground: 'var(--color-diff-added-gutter)',
-      removedGutterBackground: 'var(--color-diff-removed-gutter)',
-      gutterBackground: 'var(--color-surface-container-low)',
-      gutterBackgroundDark: 'var(--color-surface-container)',
-      highlightBackground: 'var(--color-diff-highlight-bg)',
-      highlightGutterBackground: 'var(--color-diff-highlight-gutter)',
-      codeFoldGutterBackground: 'var(--color-surface-container-high)',
-      codeFoldBackground: 'var(--color-surface-container-highest)',
-      emptyLineBackground: 'var(--color-surface-container-low)',
-      gutterColor: 'var(--color-text-tertiary)',
-      addedGutterColor: 'var(--color-diff-added-text)',
-      removedGutterColor: 'var(--color-diff-removed-text)',
-      codeFoldContentColor: 'var(--color-text-tertiary)',
-      diffViewerTitleBackground: 'var(--color-diff-title-bg)',
-      diffViewerTitleColor: 'var(--color-diff-title-color)',
-      diffViewerTitleBorderColor: 'var(--color-diff-title-border)',
-    },
-  },
-  diffContainer: {
-    borderRadius: '0',
-    fontSize: '12px',
-    lineHeight: '1.45',
-    fontFamily: 'var(--font-mono)',
-  },
-  line: {
-    padding: '1px 0',
-  },
-  gutter: {
-    padding: '1px 8px',
-    minWidth: '40px',
-    fontSize: '11px',
-  },
-  wordDiff: {
-    padding: '1px 2px',
-    borderRadius: '2px',
-  },
-}
-
-export function DiffViewer({ filePath, oldString, newString }: Props) {
-  const language = inferLanguage(filePath)
-
-  const oldLines = oldString.split('\n')
-  const newLines = newString.split('\n')
-  const additions = newLines.filter((l, i) => l !== (oldLines[i] ?? null)).length
-  const deletions = oldLines.filter((l, i) => l !== (newLines[i] ?? null)).length
-
-  return (
-    <div className="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-outline-variant)]/50 bg-[var(--color-surface-container-low)]">
-      {/* Header */}
-      <div className="flex items-center justify-between border-b border-[var(--color-outline-variant)]/40 bg-[var(--color-surface-container)] px-3 py-1.5">
-        <div className="min-w-0">
-          <div className="truncate font-[var(--font-mono)] text-[11px] text-[var(--color-text-tertiary)]">
-            {filePath}
-          </div>
-          <div className="mt-1 flex items-center gap-2 text-[10px] uppercase tracking-[0.14em]">
-            <span className="rounded-full bg-[var(--color-diff-added-bg)] px-2 py-0.5 text-[var(--color-diff-added-text)]">+{additions}</span>
-            <span className="rounded-full bg-[var(--color-diff-removed-bg)] px-2 py-0.5 text-[var(--color-diff-removed-text)]">-{deletions}</span>
-          </div>
-        </div>
-        <CopyButton
-          text={`--- ${filePath}\n+++ ${filePath}`}
-          label="Copy path"
-          className="rounded-md border border-[var(--color-outline-variant)]/40 bg-[var(--color-surface-container-lowest)] px-2 py-1 text-[11px] text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-surface-container-high)] hover:text-[var(--color-text-primary)]"
-        />
-      </div>
-
-      {/* Diff area */}
-      <div className="max-h-[400px] overflow-auto">
-        <ReactDiffViewer
-          oldValue={oldString}
-          newValue={newString}
-          splitView={false}
-          compareMethod={DiffMethod.WORDS}
-          renderContent={(str) => highlightSyntax(str, language)}
-          hideLineNumbers={false}
-          styles={diffStyles}
-          useDarkTheme={document.documentElement.getAttribute('data-theme') === 'dark'}
-        />
-      </div>
-    </div>
-  )
-}

package/desktop/src/components/chat/FileSearchMenu.tsx

@@ -1,198 +0,0 @@
-import { forwardRef, useState, useEffect, useRef, useCallback, useImperativeHandle } from 'react'
-import { filesystemApi } from '../../api/filesystem'
-import { useTranslation } from '../../i18n'
-
-type DirEntry = {
-  name: string
-  path: string
-  isDirectory: boolean
-}
-
-export type FileSearchMenuHandle = {
-  handleKeyDown: (e: KeyboardEvent) => void
-}
-
-type Props = {
-  cwd: string
-  filter?: string
-  onSelect: (path: string, relativePath: string) => void
-}
-
-export const FileSearchMenu = forwardRef<FileSearchMenuHandle, Props>(({ cwd, filter = '', onSelect }, ref) => {
-  const t = useTranslation()
-  const [entries, setEntries] = useState<DirEntry[]>([])
-  const [currentPath, setCurrentPath] = useState(cwd)
-  const [loading, setLoading] = useState(false)
-  const [selectedIndex, setSelectedIndex] = useState(0)
-  const listRef = useRef<HTMLDivElement>(null)
-  const currentPathRef = useRef(cwd)
-
-  // Parse filter: if it contains '/', navigate to that subdir and search the rest
-  // Uses currentPathRef as base so nested paths navigate from current depth
-  const parseFilter = (rawFilter: string): { navigateTo: string; searchQuery: string } => {
-    const base = currentPathRef.current
-    if (!rawFilter || !rawFilter.includes('/')) {
-      return { navigateTo: base, searchQuery: rawFilter }
-    }
-    const lastSlash = rawFilter.lastIndexOf('/')
-    const dirPart = rawFilter.slice(0, lastSlash + 1)
-    const searchPart = rawFilter.slice(lastSlash + 1)
-    const navigateTo = dirPart === '' ? base : `${base}/${dirPart}`
-    return { navigateTo, searchQuery: searchPart }
-  }
-
-  // Load directory entries
-  const loadDir = useCallback(async (dirPath: string, searchQuery: string) => {
-    setLoading(true)
-    // Only update currentPath if actually navigating to a different directory
-    if (dirPath !== currentPathRef.current) {
-      setCurrentPath(dirPath)
-      currentPathRef.current = dirPath
-    }
-    try {
-      if (searchQuery) {
-        const result = await filesystemApi.search(searchQuery, dirPath)
-        setEntries(result.entries)
-      } else {
-        const result = await filesystemApi.browse(dirPath, { includeFiles: true })
-        setEntries(result.entries)
-      }
-      setSelectedIndex(0)
-    } catch {
-      setEntries([])
-    }
-    setLoading(false)
-  }, [])
-
-  // Initial load: parse filter path and navigate accordingly
-  useEffect(() => {
-    currentPathRef.current = cwd
-    const { navigateTo, searchQuery } = parseFilter(filter)
-    void loadDir(navigateTo, searchQuery)
-  }, [cwd, filter, loadDir])
-
-  // Keyboard navigation handler exposed via ref
-  const handleKeyDown = useCallback((e: KeyboardEvent) => {
-    if (e.key === 'ArrowDown') {
-      e.preventDefault()
-      setSelectedIndex((prev) => Math.min(prev + 1, entries.length - 1))
-      return
-    }
-    if (e.key === 'ArrowUp') {
-      e.preventDefault()
-      setSelectedIndex((prev) => Math.max(prev - 1, 0))
-      return
-    }
-    if (e.key === 'Enter' || e.key === 'Tab') {
-      e.preventDefault()
-      if (entries[selectedIndex]) {
-        onSelect(entries[selectedIndex]!.path, entries[selectedIndex]!.name)
-      }
-      return
-    }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [entries, selectedIndex])
-
-  useImperativeHandle(ref, () => ({ handleKeyDown }), [handleKeyDown])
-
-  // Scroll selected into view
-  useEffect(() => {
-    const el = listRef.current?.querySelector(`[data-index="${selectedIndex}"]`) as HTMLButtonElement | null
-    el?.scrollIntoView({ block: 'nearest' })
-  }, [selectedIndex])
-
-  // Build breadcrumb segments from current path relative to cwd
-  const breadcrumbs: string[] = []
-  if (currentPath !== cwd && currentPath.startsWith(cwd)) {
-    const rel = currentPath.slice(cwd.length).replace(/^\//, '')
-    if (rel) breadcrumbs.push(...rel.split('/'))
-  }
-
-  const dirs = entries.filter((e) => e.isDirectory)
-  const files = entries.filter((e) => !e.isDirectory)
-
-  return (
-    <div
-      id="file-search-menu"
-      className="absolute left-0 bottom-full mb-2 z-50 w-full min-w-[480px] overflow-hidden rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] shadow-[var(--shadow-dropdown)]"
-      onMouseDown={(e) => e.stopPropagation()}
-    >
-      {/* Header with path */}
-      <div className="flex items-center gap-1.5 border-b border-[var(--color-border)] px-3 py-2 text-[11px]">
-        <span className="material-symbols-outlined text-[14px] text-[var(--color-text-tertiary)]">folder_open</span>
-        <span className="text-[var(--color-text-tertiary)] font-mono">{cwd.split('/').pop() || cwd}</span>
-        {breadcrumbs.map((seg, i) => (
-          <span key={i} className="flex items-center gap-1">
-            <span className="text-[var(--color-text-tertiary)]">/</span>
-            <span className="text-[var(--color-text-primary)] font-mono">{seg}</span>
-          </span>
-        ))}
-        {loading && (
-          <span className="material-symbols-outlined text-[12px] text-[var(--color-text-tertiary)] animate-spin ml-1">progress_activity</span>
-        )}
-      </div>
-
-      {/* File list */}
-      <div ref={listRef} className="max-h-[300px] overflow-y-auto py-1">
-        {loading && entries.length === 0 ? (
-          <div className="px-4 py-6 text-center text-xs text-[var(--color-text-tertiary)]">{t('fileSearch.searching')}</div>
-        ) : entries.length === 0 ? (
-          <div className="px-4 py-6 text-center text-xs text-[var(--color-text-tertiary)]">
-            {filter ? t('fileSearch.noMatch') : t('fileSearch.noFiles')}
-          </div>
-        ) : (
-          <>
-            {/* Directories */}
-            {dirs.map((entry, i) => (
-              <button
-                key={entry.path}
-                data-index={i}
-                onClick={() => {
-                  void loadDir(entry.path, filter)
-                }}
-                onMouseEnter={() => setSelectedIndex(i)}
-                className={`w-full flex items-center gap-3 px-3 py-2 text-left transition-colors ${
-                  selectedIndex === i ? 'bg-[var(--color-surface-hover)]' : 'hover:bg-[var(--color-surface-hover)]'
-                }`}
-              >
-                <span className="material-symbols-outlined text-[16px] text-[var(--color-brand)]">folder</span>
-                <span className="text-sm text-[var(--color-text-primary)] truncate">{entry.name}</span>
-              </button>
-            ))}
-
-            {/* Files */}
-            {files.map((entry, i) => {
-              const idx = dirs.length + i
-              return (
-                <button
-                  key={entry.path}
-                  data-index={idx}
-                  onClick={() => onSelect(entry.path, entry.name)}
-                  onMouseEnter={() => setSelectedIndex(idx)}
-                  className={`w-full flex items-center gap-3 px-3 py-2 text-left transition-colors ${
-                    selectedIndex === idx ? 'bg-[var(--color-surface-hover)]' : 'hover:bg-[var(--color-surface-hover)]'
-                  }`}
-                >
-                  <span className="material-symbols-outlined text-[16px] text-[var(--color-text-secondary)]">description</span>
-                  <span className="text-sm text-[var(--color-text-primary)] truncate">{entry.name}</span>
-                </button>
-              )
-            })}
-          </>
-        )}
-      </div>
-
-      {/* Footer hint */}
-      <div className="flex items-center gap-1.5 border-t border-[var(--color-border)] px-3 py-1.5 text-[10px] text-[var(--color-text-tertiary)]">
-        <kbd className="rounded border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-1 py-0.5 font-mono">↑↓</kbd>
-        <span>{t('fileSearch.navigate')}</span>
-        <kbd className="ml-2 rounded border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-1 py-0.5 font-mono">Enter</kbd>
-        <span>{t('fileSearch.attach')}</span>
-        <kbd className="ml-2 rounded border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-1 py-0.5 font-mono">Esc</kbd>
-        <span>{t('fileSearch.close')}</span>
-      </div>
-    </div>
-  )
-})
-
-FileSearchMenu.displayName = 'FileSearchMenu'

package/desktop/src/components/chat/ImageGalleryModal.tsx

@@ -1,91 +0,0 @@
-import { useEffect } from 'react'
-import { Modal } from '../shared/Modal'
-
-type GalleryImage = {
-  src: string
-  name: string
-}
-
-type Props = {
-  open: boolean
-  images: GalleryImage[]
-  activeIndex: number
-  onClose: () => void
-  onSelect: (index: number) => void
-}
-
-export function ImageGalleryModal({ open, images, activeIndex, onClose, onSelect }: Props) {
-  const activeImage = images[activeIndex]
-
-  useEffect(() => {
-    if (!open || images.length <= 1) return
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'ArrowLeft') {
-        event.preventDefault()
-        onSelect((activeIndex - 1 + images.length) % images.length)
-      } else if (event.key === 'ArrowRight') {
-        event.preventDefault()
-        onSelect((activeIndex + 1) % images.length)
-      }
-    }
-    document.addEventListener('keydown', handleKeyDown)
-    return () => document.removeEventListener('keydown', handleKeyDown)
-  }, [activeIndex, images.length, onSelect, open])
-
-  if (!activeImage) return null
-
-  return (
-    <Modal open={open} onClose={onClose} width={960}>
-      <div className="space-y-4">
-        <div className="flex items-center justify-between gap-4">
-          <div className="min-w-0">
-            <div className="text-sm font-semibold text-[var(--color-text-primary)]">{activeImage.name}</div>
-            <div className="text-xs text-[var(--color-text-tertiary)]">
-              {activeIndex + 1} / {images.length}
-            </div>
-          </div>
-          {images.length > 1 && (
-            <div className="flex items-center gap-2">
-              <button
-                onClick={() => onSelect((activeIndex - 1 + images.length) % images.length)}
-                className="flex h-9 w-9 items-center justify-center rounded-full border border-[var(--color-border)] text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-surface-hover)]"
-                aria-label="Previous image"
-              >
-                <span className="material-symbols-outlined text-[18px]">chevron_left</span>
-              </button>
-              <button
-                onClick={() => onSelect((activeIndex + 1) % images.length)}
-                className="flex h-9 w-9 items-center justify-center rounded-full border border-[var(--color-border)] text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-surface-hover)]"
-                aria-label="Next image"
-              >
-                <span className="material-symbols-outlined text-[18px]">chevron_right</span>
-              </button>
-            </div>
-          )}
-        </div>
-
-        <div className="flex max-h-[70vh] items-center justify-center overflow-hidden rounded-2xl bg-[#111]">
-          <img src={activeImage.src} alt={activeImage.name} className="max-h-[70vh] w-full object-contain" />
-        </div>
-
-        {images.length > 1 && (
-          <div className="flex gap-2 overflow-x-auto pb-1">
-            {images.map((image, index) => (
-              <button
-                key={`${image.name}-${index}`}
-                onClick={() => onSelect(index)}
-                className={`overflow-hidden rounded-xl border transition-all ${
-                  index === activeIndex
-                    ? 'border-[var(--color-brand)] shadow-[0_0_0_1px_var(--color-brand)]'
-                    : 'border-[var(--color-border)]'
-                }`}
-              >
-                <img src={image.src} alt={image.name} className="h-16 w-16 object-cover" />
-              </button>
-            ))}
-          </div>
-        )}
-      </div>
-    </Modal>
-  )
-}

package/desktop/src/components/chat/InlineImageGallery.tsx

@@ -1,106 +0,0 @@
-import { useMemo, useState } from 'react'
-import { ImageGalleryModal } from './ImageGalleryModal'
-import { getBaseUrl } from '../../api/client'
-
-const IMAGE_EXTENSIONS = /\.(png|jpe?g|gif|webp|svg|bmp|avif|ico)$/i
-
-/**
- * Extracts absolute image file paths from text content.
- * Matches paths like /Users/.../image.png, /tmp/output.jpg, etc.
- */
-export function extractImagePaths(text: string): string[] {
-  // Match absolute paths ending with image extensions
-  // Handles paths that may be wrapped in backticks, quotes, or standalone
-  const regex = /(?:^|[\s`"'(])(\/?(?:[A-Za-z]:[\\/]|\/)[^\s`"')<>]+\.(?:png|jpe?g|gif|webp|svg|bmp|avif|ico))/gim
-  const paths: string[] = []
-  const seen = new Set<string>()
-
-  let match: RegExpExecArray | null
-  while ((match = regex.exec(text)) !== null) {
-    const p = match[1]!.trim()
-    if (!seen.has(p) && IMAGE_EXTENSIONS.test(p)) {
-      seen.add(p)
-      paths.push(p)
-    }
-  }
-
-  return paths
-}
-
-function fileUrl(filePath: string): string {
-  return `${getBaseUrl()}/api/filesystem/file?path=${encodeURIComponent(filePath)}`
-}
-
-function fileName(filePath: string): string {
-  return filePath.split('/').pop() || filePath
-}
-
-type Props = {
-  text: string
-}
-
-export function InlineImageGallery({ text }: Props) {
-  const [activeIndex, setActiveIndex] = useState<number | null>(null)
-
-  const imagePaths = useMemo(() => extractImagePaths(text), [text])
-
-  const images = useMemo(
-    () => imagePaths.map((p) => ({ src: fileUrl(p), name: fileName(p) })),
-    [imagePaths],
-  )
-
-  if (images.length === 0) return null
-
-  return (
-    <>
-      <div className="mt-3 space-y-2">
-        <div className="flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-wider text-[var(--color-outline)]">
-          <span className="material-symbols-outlined text-[12px]">image</span>
-          {images.length === 1 ? '1 image' : `${images.length} images`}
-        </div>
-        <div className={`grid gap-2 ${images.length === 1 ? 'grid-cols-1' : 'grid-cols-2'}`}>
-          {images.map((img, i) => (
-            <button
-              key={img.src}
-              type="button"
-              onClick={() => setActiveIndex(i)}
-              className="group relative overflow-hidden rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-container-low)] text-left shadow-sm transition-all hover:shadow-md hover:border-[var(--color-brand)]/40"
-            >
-              <img
-                src={img.src}
-                alt={img.name}
-                loading="lazy"
-                className="w-full object-cover"
-                style={{ maxHeight: images.length === 1 ? 400 : 240 }}
-                onError={(e) => {
-                  // Hide broken images
-                  (e.target as HTMLImageElement).closest('button')!.style.display = 'none'
-                }}
-              />
-              <div className="absolute inset-0 flex items-center justify-center bg-black/0 opacity-0 transition-all group-hover:bg-black/20 group-hover:opacity-100">
-                <span className="material-symbols-outlined rounded-full bg-white/90 p-2 text-[20px] text-[var(--color-text-primary)] shadow-lg">
-                  fullscreen
-                </span>
-              </div>
-              <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent px-2.5 pb-2 pt-6">
-                <span className="text-[10px] font-medium text-white/90 drop-shadow-sm">
-                  {img.name}
-                </span>
-              </div>
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {activeIndex !== null && activeIndex >= 0 && (
-        <ImageGalleryModal
-          open={activeIndex !== null}
-          images={images}
-          activeIndex={activeIndex}
-          onClose={() => setActiveIndex(null)}
-          onSelect={setActiveIndex}
-        />
-      )}
-    </>
-  )
-}

package/desktop/src/components/chat/InlineTaskSummary.tsx

@@ -1,60 +0,0 @@
-import type { TaskSummaryItem } from '../../types/chat'
-import { useTranslation } from '../../i18n'
-
-const statusIcon: Record<TaskSummaryItem['status'], string> = {
-  pending: 'radio_button_unchecked',
-  in_progress: 'pending',
-  completed: 'check_circle',
-}
-
-const statusColor: Record<TaskSummaryItem['status'], string> = {
-  pending: 'var(--color-text-tertiary)',
-  in_progress: 'var(--color-warning)',
-  completed: 'var(--color-success)',
-}
-
-export function InlineTaskSummary({ tasks }: { tasks: TaskSummaryItem[] }) {
-  const t = useTranslation()
-  const completed = tasks.filter((tk) => tk.status === 'completed').length
-  const total = tasks.length
-
-  return (
-    <div className="mb-3 rounded-[var(--radius-lg)] border border-[var(--color-outline-variant)]/40 bg-[var(--color-surface-container-lowest)] overflow-hidden">
-      <div className="flex items-center gap-3 px-4 py-2 bg-[var(--color-surface-container)]">
-        <div className="flex items-center justify-center w-5 h-5 rounded-[var(--radius-md)] bg-[var(--color-success)]/10">
-          <span className="material-symbols-outlined text-[13px] text-[var(--color-success)]" style={{ fontVariationSettings: "'FILL' 1" }}>
-            task_alt
-          </span>
-        </div>
-        <span className="text-xs font-semibold text-[var(--color-text-primary)]">
-          {t('tasks.completed')}
-        </span>
-        <span className="text-[10px] text-[var(--color-text-tertiary)] tabular-nums">
-          {completed}/{total}
-        </span>
-      </div>
-      <div className="px-4 py-2 flex flex-col gap-0.5">
-        {tasks.map((task) => (
-          <div key={task.id} className="flex items-center gap-2 py-1 px-1">
-            <span
-              className="material-symbols-outlined text-[14px] shrink-0"
-              style={{ color: statusColor[task.status], fontVariationSettings: "'FILL' 1" }}
-            >
-              {statusIcon[task.status]}
-            </span>
-            <span className="text-[10px] font-mono text-[var(--color-text-tertiary)]">
-              #{task.id}
-            </span>
-            <span className={`text-xs ${
-              task.status === 'completed'
-                ? 'text-[var(--color-text-tertiary)] line-through'
-                : 'text-[var(--color-text-primary)]'
-            }`}>
-              {task.subject}
-            </span>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}