bingocode 1.0.2 → 1.0.3

package/desktop/src/components/shared/UpdateChecker.tsx

@@ -0,0 +1,90 @@
+import { useEffect } from 'react'
+import { useTranslation } from '../../i18n'
+import { isTauriRuntime } from '../../lib/desktopRuntime'
+import { useUpdateStore } from '../../stores/updateStore'
+
+export function UpdateChecker() {
+  const t = useTranslation()
+  const status = useUpdateStore((s) => s.status)
+  const availableVersion = useUpdateStore((s) => s.availableVersion)
+  const releaseNotes = useUpdateStore((s) => s.releaseNotes)
+  const progressPercent = useUpdateStore((s) => s.progressPercent)
+  const error = useUpdateStore((s) => s.error)
+  const shouldPrompt = useUpdateStore((s) => s.shouldPrompt)
+  const initialize = useUpdateStore((s) => s.initialize)
+  const installUpdate = useUpdateStore((s) => s.installUpdate)
+  const dismissPrompt = useUpdateStore((s) => s.dismissPrompt)
+
+  useEffect(() => {
+    void initialize()
+  }, [initialize])
+
+  if (!isTauriRuntime()) return null
+
+  const showPopup =
+    shouldPrompt && !!availableVersion && ['available', 'downloading', 'restarting'].includes(status)
+
+  if (!showPopup) return null
+
+  const statusText =
+    status === 'restarting'
+      ? t('update.restarting')
+      : status === 'downloading'
+        ? t('update.downloading')
+        : null
+
+  return (
+    <div className="fixed top-4 right-4 z-[200] max-w-sm">
+      <div className="bg-[var(--color-surface-container-low)] border border-[var(--color-border)] rounded-[var(--radius-lg)] shadow-[var(--shadow-dropdown)] p-4">
+        <p className="text-sm font-medium text-[var(--color-text-primary)]">
+          {t('update.available', { version: availableVersion })}
+        </p>
+
+        {releaseNotes && (
+          <p className="mt-2 text-xs leading-5 text-[var(--color-text-secondary)] whitespace-pre-wrap line-clamp-5">
+            {releaseNotes}
+          </p>
+        )}
+
+        {(status === 'downloading' || status === 'restarting') && (
+          <div className="mt-3">
+            <div className="h-1.5 bg-[var(--color-surface)] rounded-full overflow-hidden">
+              <div
+                className="h-full bg-[var(--color-text-accent)] transition-all duration-300"
+                style={{ width: `${Math.min(progressPercent, 100)}%` }}
+              />
+            </div>
+            {statusText && (
+              <p className="text-xs text-[var(--color-text-tertiary)] mt-1">
+                {statusText} {status === 'downloading' ? `${progressPercent}%` : ''}
+              </p>
+            )}
+          </div>
+        )}
+
+        {error && (
+          <p className="mt-2 text-xs text-[var(--color-error)]">
+            {t('update.failed', { error })}
+          </p>
+        )}
+
+        {status === 'available' && (
+          <div className="mt-3 flex gap-2">
+            <button
+              onClick={() => void installUpdate()}
+              className="px-3 py-1 text-xs font-medium rounded-[var(--radius-md)] bg-[var(--color-text-accent)] text-white hover:opacity-90 transition-opacity"
+            >
+              {t('update.now')}
+            </button>
+            <button
+              onClick={dismissPrompt}
+              className="px-3 py-1 text-xs text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] transition-colors"
+            >
+              {t('update.later')}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/desktop/src/components/skills/SkillDetail.test.tsx

@@ -0,0 +1,89 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+vi.mock('../markdown/MarkdownRenderer', () => ({
+  MarkdownRenderer: ({
+    content,
+    variant,
+    className,
+  }: {
+    content: string
+    variant?: string
+    className?: string
+  }) => (
+    <div
+      data-testid="markdown-renderer"
+      data-content={content}
+      data-variant={variant}
+      data-classname={className}
+    />
+  ),
+}))
+
+vi.mock('../chat/CodeViewer', () => ({
+  CodeViewer: ({ code }: { code: string }) => <div data-testid="code-viewer">{code}</div>,
+}))
+
+import { SkillDetail } from './SkillDetail'
+import { useSkillStore } from '../../stores/skillStore'
+import { useSettingsStore } from '../../stores/settingsStore'
+
+const fetchSkills = vi.fn()
+const fetchSkillDetail = vi.fn()
+const clearSelection = vi.fn(() => {
+  useSkillStore.setState({ selectedSkill: null })
+})
+
+beforeEach(() => {
+  useSettingsStore.setState({ locale: 'en' })
+  useSkillStore.setState({
+    skills: [],
+    selectedSkill: null,
+    isLoading: false,
+    isDetailLoading: false,
+    error: null,
+    fetchSkills,
+    fetchSkillDetail,
+    clearSelection,
+  })
+  fetchSkills.mockReset()
+  fetchSkillDetail.mockReset()
+  clearSelection.mockClear()
+})
+
+describe('SkillDetail markdown presentation', () => {
+  it('renders markdown files with the document variant and readable width', () => {
+    useSkillStore.setState({
+      selectedSkill: {
+        meta: {
+          name: 'skill-test',
+          displayName: 'Skill Test',
+          description: 'Skill description',
+          source: 'user',
+          userInvocable: true,
+          contentLength: 120,
+          hasDirectory: true,
+        },
+        tree: [{ name: 'SKILL.md', path: 'SKILL.md', type: 'file' }],
+        files: [
+          {
+            path: 'SKILL.md',
+            content: '# Skill Body',
+            language: 'markdown',
+            isEntry: true,
+          },
+        ],
+        skillRoot: '/tmp/skill-test',
+      },
+    })
+
+    render(<SkillDetail />)
+
+    const markdown = screen.getByTestId('markdown-renderer')
+    expect(markdown).toBeInTheDocument()
+    expect(markdown).toHaveAttribute('data-variant', 'document')
+    expect(markdown).toHaveAttribute('data-classname', 'mx-auto max-w-[72ch]')
+    expect(markdown).toHaveAttribute('data-content', '# Skill Body')
+  })
+})

package/desktop/src/components/skills/SkillDetail.tsx

@@ -0,0 +1,403 @@
+import { useMemo, useState, type ReactNode } from 'react'
+import { useSkillStore } from '../../stores/skillStore'
+import { useTranslation } from '../../i18n'
+import { MarkdownRenderer } from '../markdown/MarkdownRenderer'
+import { CodeViewer } from '../chat/CodeViewer'
+import type { FileTreeNode, SkillFrontmatter } from '../../types/skill'
+
+const META_PRIORITY = [
+  'description',
+  'when_to_use',
+  'argument-hint',
+  'model',
+  'effort',
+  'allowed-tools',
+  'paths',
+  'agent',
+  'context',
+  'version',
+  'user-invocable',
+] as const
+
+export function SkillDetail() {
+  const { selectedSkill, isDetailLoading, clearSelection } = useSkillStore()
+  const t = useTranslation()
+  const [selectedFile, setSelectedFile] = useState<string>('SKILL.md')
+
+  const normalizedSelection = useMemo(() => {
+    if (!selectedSkill) return 'SKILL.md'
+    return selectedSkill.files.some((file) => file.path === selectedFile)
+      ? selectedFile
+      : selectedSkill.files[0]?.path || 'SKILL.md'
+  }, [selectedFile, selectedSkill])
+
+  if (isDetailLoading) {
+    return (
+      <div className="flex justify-center py-12">
+        <div className="animate-spin w-5 h-5 border-2 border-[var(--color-brand)] border-t-transparent rounded-full" />
+      </div>
+    )
+  }
+
+  if (!selectedSkill) return null
+
+  const { meta, tree, files } = selectedSkill
+  const currentFile = files.find((f) => f.path === normalizedSelection) || files[0]
+  const frontmatter = currentFile?.frontmatter
+  const metaEntries = getMetaEntries(frontmatter)
+
+  return (
+    <div className="flex h-full min-h-0 flex-col gap-4 min-w-0">
+      <div>
+        <button
+          onClick={clearSelection}
+          className="inline-flex items-center gap-1 rounded-lg px-2 py-1 text-sm text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-brand)]"
+        >
+          <span className="material-symbols-outlined text-[16px]">arrow_back</span>
+          {t('settings.skills.back')}
+        </button>
+      </div>
+
+      <section className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface-container-low)] overflow-hidden">
+        <div className="grid gap-4 px-5 py-5 lg:grid-cols-[minmax(0,1.5fr)_minmax(280px,0.9fr)] lg:items-start">
+          <div className="min-w-0">
+            <div className="text-[11px] font-semibold uppercase tracking-[0.2em] text-[var(--color-text-tertiary)] mb-2">
+              {t('settings.skills.entryEyebrow')}
+            </div>
+            <div className="flex flex-wrap items-center gap-2 mb-2">
+              <h3 className="text-[22px] font-semibold leading-tight text-[var(--color-text-primary)] break-all">
+                {meta.displayName || meta.name}
+              </h3>
+              <MetaPill>{t(`settings.skills.source.${meta.source}`)}</MetaPill>
+              {meta.version && <MetaPill>v{meta.version}</MetaPill>}
+              {meta.userInvocable && <MetaPill>{t('settings.skills.slashCommand')}</MetaPill>}
+            </div>
+            <p className="max-w-4xl text-sm leading-6 text-[var(--color-text-secondary)]">
+              {meta.description}
+            </p>
+            <div className="mt-3 flex flex-wrap gap-x-4 gap-y-2 text-xs text-[var(--color-text-tertiary)]">
+              <span>{t('settings.skills.tokenEstimate', { count: String(Math.ceil(meta.contentLength / 4)) })}</span>
+              <span>
+                {files.length} {t('settings.skills.files')}
+              </span>
+              <span>{currentFile?.isEntry ? t('settings.skills.entryFile') : currentFile?.path}</span>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-2">
+            <DetailStat
+              label={t('settings.skills.summary.totalFiles')}
+              value={String(files.length)}
+              icon="folder_open"
+            />
+            <DetailStat
+              label={t('settings.skills.summary.tokens')}
+              value={t('settings.skills.tokenEstimateShort', { count: String(Math.ceil(meta.contentLength / 4)) })}
+              icon="notes"
+            />
+            <DetailStat
+              label={t('settings.skills.summary.source')}
+              value={t(`settings.skills.source.${meta.source}`)}
+              icon="layers"
+            />
+            <DetailStat
+              label={t('settings.skills.summary.entry')}
+              value={files.some((file) => file.isEntry) ? 'SKILL.md' : '—'}
+              icon="article"
+            />
+          </div>
+        </div>
+      </section>
+
+      {metaEntries.length > 0 && (
+        <section className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface)] px-5 py-4">
+          <div className="flex items-center gap-2 mb-3">
+            <span className="material-symbols-outlined text-[18px] text-[var(--color-text-tertiary)]">
+              tune
+            </span>
+            <h4 className="text-sm font-semibold text-[var(--color-text-primary)]">
+              {t('settings.skills.metaTitle')}
+            </h4>
+          </div>
+          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+            {metaEntries.map(([key, value]) => (
+              <div
+                key={key}
+                className="rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-3 py-3 min-w-0"
+              >
+                <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-[var(--color-text-tertiary)]">
+                  {formatMetaKey(key)}
+                </div>
+                <div className="mt-2 text-sm leading-6 text-[var(--color-text-primary)] break-words">
+                  {formatMetaValue(value)}
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+      )}
+
+      <section className="flex flex-1 min-h-0 min-w-0 overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface)]">
+        <aside className="hidden w-[250px] flex-shrink-0 border-r border-[var(--color-border)] bg-[var(--color-surface-container-low)] lg:flex lg:flex-col">
+          <div className="border-b border-[var(--color-border)] px-4 py-3">
+            <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-[var(--color-text-tertiary)]">
+              {t('settings.skills.filesPanel')}
+            </div>
+            <p className="mt-1 text-xs leading-5 text-[var(--color-text-tertiary)]">
+              {t('settings.skills.filesPanelHint')}
+            </p>
+          </div>
+          <div className="min-h-0 flex-1 overflow-y-auto p-2">
+            <TreeView
+              nodes={tree}
+              selectedPath={normalizedSelection}
+              onSelect={setSelectedFile}
+              depth={0}
+            />
+          </div>
+        </aside>
+
+        <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
+          <div className="flex flex-wrap items-center justify-between gap-2 border-b border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-4 py-3">
+            <div className="min-w-0">
+              <div className="flex items-center gap-2 flex-wrap">
+                <span className="text-xs font-mono text-[var(--color-text-secondary)] break-all">
+                  {currentFile?.path}
+                </span>
+                {currentFile?.isEntry && <MetaPill>{t('settings.skills.entryFile')}</MetaPill>}
+              </div>
+              <div className="mt-1 text-[11px] text-[var(--color-text-tertiary)]">
+                {t('settings.skills.readingMode', {
+                  mode:
+                    currentFile?.language === 'markdown'
+                      ? t('settings.skills.docMode')
+                      : t('settings.skills.codeMode'),
+                })}
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="rounded-full bg-[var(--color-surface)] px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-[var(--color-text-tertiary)] border border-[var(--color-border)]">
+                {currentFile?.language}
+              </span>
+            </div>
+          </div>
+
+          <div className="lg:hidden border-b border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-2 overflow-x-auto">
+            <div className="flex gap-2 min-w-max">
+              {files.map((file) => {
+                const active = file.path === normalizedSelection
+                return (
+                  <button
+                    key={file.path}
+                    onClick={() => setSelectedFile(file.path)}
+                    className={`rounded-full border px-3 py-1.5 text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-brand)] ${
+                      active
+                        ? 'border-[var(--color-brand)] bg-[var(--color-primary-fixed)] text-[var(--color-text-primary)]'
+                        : 'border-[var(--color-border)] text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)]'
+                    }`}
+                  >
+                    {file.path}
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+
+          <div className="min-h-0 flex-1 overflow-y-auto bg-[var(--color-surface-container-lowest)]">
+            {currentFile && (
+              <div className={currentFile.language === 'markdown' ? 'px-6 py-5 lg:px-8' : 'p-4'}>
+                {currentFile.language === 'markdown' ? (
+                  <MarkdownRenderer
+                    content={currentFile.body ?? currentFile.content}
+                    variant="document"
+                    className="mx-auto max-w-[72ch]"
+                  />
+                ) : (
+                  <CodeViewer
+                    code={currentFile.content}
+                    language={currentFile.language}
+                    maxLines={9999}
+                    showLineNumbers
+                  />
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}
+
+function TreeView({
+  nodes,
+  selectedPath,
+  onSelect,
+  depth,
+}: {
+  nodes: FileTreeNode[]
+  selectedPath: string
+  onSelect: (path: string) => void
+  depth: number
+}) {
+  return (
+    <>
+      {nodes.map((node) => (
+        <TreeItem
+          key={node.path}
+          node={node}
+          selectedPath={selectedPath}
+          onSelect={onSelect}
+          depth={depth}
+        />
+      ))}
+    </>
+  )
+}
+
+function TreeItem({
+  node,
+  selectedPath,
+  onSelect,
+  depth,
+}: {
+  node: FileTreeNode
+  selectedPath: string
+  onSelect: (path: string) => void
+  depth: number
+}) {
+  const [expanded, setExpanded] = useState(true)
+  const isSelected = node.path === selectedPath
+  const isDir = node.type === 'directory'
+
+  const icon = isDir ? (expanded ? 'folder_open' : 'folder') : fileIcon(node.name)
+
+  return (
+    <div>
+      <button
+        onClick={() => (isDir ? setExpanded(!expanded) : onSelect(node.path))}
+        className={`flex w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-brand)] ${
+          isSelected
+            ? 'bg-[var(--color-surface-selected)] text-[var(--color-text-primary)] font-medium'
+            : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)]'
+        }`}
+        style={{ marginLeft: `${depth * 12}px`, width: `calc(100% - ${depth * 12}px)` }}
+      >
+        {isDir ? (
+          <span className="material-symbols-outlined text-[12px] text-[var(--color-text-tertiary)]">
+            {expanded ? 'expand_more' : 'chevron_right'}
+          </span>
+        ) : (
+          <span style={{ width: 12 }} />
+        )}
+        <span className="material-symbols-outlined text-[14px] text-[var(--color-text-tertiary)]">
+          {icon}
+        </span>
+        <span className="truncate">{node.name}</span>
+      </button>
+
+      {isDir && expanded && node.children && (
+        <TreeView
+          nodes={node.children}
+          selectedPath={selectedPath}
+          onSelect={onSelect}
+          depth={depth + 1}
+        />
+      )}
+    </div>
+  )
+}
+
+function DetailStat({
+  label,
+  value,
+  icon,
+}: {
+  label: string
+  value: string
+  icon: string
+}) {
+  return (
+    <div className="rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-3">
+      <div className="flex items-center gap-2 text-[11px] uppercase tracking-[0.16em] text-[var(--color-text-tertiary)]">
+        <span className="material-symbols-outlined text-[14px]">{icon}</span>
+        <span>{label}</span>
+      </div>
+      <div className="mt-2 text-base font-semibold text-[var(--color-text-primary)] break-all">
+        {value}
+      </div>
+    </div>
+  )
+}
+
+function MetaPill({ children }: { children: ReactNode }) {
+  return (
+    <span className="rounded-full border border-[var(--color-border)] bg-[var(--color-surface)] px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-[var(--color-text-tertiary)]">
+      {children}
+    </span>
+  )
+}
+
+function getMetaEntries(frontmatter?: SkillFrontmatter): Array<[string, unknown]> {
+  if (!frontmatter) return []
+
+  const entries = Object.entries(frontmatter).filter(([, value]) => {
+    if (value == null) return false
+    if (typeof value === 'string') return value.trim().length > 0
+    if (Array.isArray(value)) return value.length > 0
+    return true
+  })
+
+  entries.sort((a, b) => {
+    const aIndex = META_PRIORITY.indexOf(a[0] as (typeof META_PRIORITY)[number])
+    const bIndex = META_PRIORITY.indexOf(b[0] as (typeof META_PRIORITY)[number])
+    const normalizedA = aIndex === -1 ? Number.MAX_SAFE_INTEGER : aIndex
+    const normalizedB = bIndex === -1 ? Number.MAX_SAFE_INTEGER : bIndex
+    return normalizedA - normalizedB || a[0].localeCompare(b[0])
+  })
+
+  return entries
+}
+
+function formatMetaKey(key: string) {
+  return key.replace(/[-_]/g, ' ')
+}
+
+function formatMetaValue(value: unknown) {
+  if (Array.isArray(value)) {
+    return value.map((item) => String(item)).join(', ')
+  }
+  if (typeof value === 'boolean') {
+    return value ? 'true' : 'false'
+  }
+  if (typeof value === 'object' && value !== null) {
+    return JSON.stringify(value)
+  }
+  return String(value)
+}
+
+function fileIcon(filename: string): string {
+  const ext = filename.split('.').pop()?.toLowerCase()
+  switch (ext) {
+    case 'md':
+      return 'description'
+    case 'ts':
+    case 'tsx':
+    case 'js':
+    case 'jsx':
+    case 'py':
+    case 'rs':
+    case 'go':
+      return 'code'
+    case 'json':
+    case 'yaml':
+    case 'yml':
+    case 'toml':
+      return 'data_object'
+    case 'sh':
+    case 'bash':
+      return 'terminal'
+    default:
+      return 'draft'
+  }
+}