bingocode 1.0.2 → 1.0.3

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

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

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

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

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

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