@jetcrab/pi-desk 1.1.18-dev → 1.1.20-dev

package/src/client/l3_modules/project-files/views/l3-project-search-results.tsx

@@ -0,0 +1,333 @@
+'use client'
+
+import { ChevronRightIcon, FileIcon, LoaderCircleIcon, SearchIcon } from 'lucide-react'
+import { useId, useState, type ReactElement, type ReactNode, type Ref } from 'react'
+import { useTranslation } from 'react-i18next'
+import type {
+  L4ProjectContentMatch,
+  L4ProjectFileSearch,
+  L4ProjectSearchInput,
+  L4ProjectSearchRange
+} from '@common/l4_foundation/file/l4-project-file-contract'
+import { cn } from '@client/l4_foundation/lib/l4-utils'
+import { L4ScrollArea } from '@client/l4_foundation/ui/l4-scroll-area'
+import { Button } from '@client/l4_foundation/ui/shadcn/button'
+
+interface L3ProjectSearchResultsProps {
+  search: L4ProjectSearchInput &
+    L4ProjectFileSearch & {
+      status: 'idle' | 'loading' | 'ready' | 'error'
+      error: string | null
+    }
+  resultsRef: Ref<HTMLDivElement>
+  activePath: string | null
+  onOpen: (path: string, line?: number) => void
+  wrapFile: (path: string, line: number | undefined, trigger: ReactElement) => ReactNode
+  renderFileIcon: (path: string) => ReactNode
+  fileDecoration: (path: string) => { className?: string; badge?: string }
+}
+
+function highlight(text: string, ranges: L4ProjectSearchRange[], offset = 0): ReactNode {
+  const parts: ReactNode[] = []
+  let cursor = 0
+  for (const range of ranges) {
+    const start = Math.max(cursor, range.start - offset, 0)
+    const end = Math.min(range.end - offset, text.length)
+    if (end <= start) continue
+    parts.push(text.slice(cursor, start))
+    parts.push(
+      <mark key={`${start}:${end}`} className="rounded-sm bg-foreground/15 text-inherit">
+        {text.slice(start, end)}
+      </mark>
+    )
+    cursor = end
+  }
+  parts.push(text.slice(cursor))
+  return parts
+}
+
+export function L3ProjectSearchResults({
+  search,
+  resultsRef,
+  activePath,
+  onOpen,
+  wrapFile,
+  renderFileIcon,
+  fileDecoration
+}: L3ProjectSearchResultsProps): React.JSX.Element {
+  const { t } = useTranslation('projectFiles')
+  const id = useId()
+  const [expandedFiles, setExpandedFiles] = useState(false)
+  const [collapsed, setCollapsed] = useState<Set<string>>(new Set())
+  const [selected, setSelected] = useState<{ path: string; line: number } | null>(null)
+  const groups = new Map<string, L4ProjectContentMatch[]>()
+  for (const match of search.contentMatches) {
+    const group = groups.get(match.path)
+    if (group) group.push(match)
+    else groups.set(match.path, [match])
+  }
+  const hasQuery = Boolean(search.query.trim())
+  const ready = hasQuery && search.status === 'ready'
+  const fileCount = search.fileMatches.length
+  const lineCount = search.contentMatches.length
+  const compact = search.scope === 'all' && fileCount > 3 && lineCount > 0 && !expandedFiles
+  const files = compact ? search.fileMatches.slice(0, 3) : search.fileMatches
+  const matchedFileCount = new Set([
+    ...search.fileMatches.map((match) => match.path),
+    ...groups.keys()
+  ]).size
+  const count = t('searchCounts', { files: matchedFileCount, lines: lineCount })
+  const toggleGroup = (path: string): void => {
+    setCollapsed((previous) => {
+      const next = new Set(previous)
+      if (next.has(path)) next.delete(path)
+      else next.add(path)
+      return next
+    })
+  }
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div
+        className="flex min-h-8 flex-wrap items-center justify-between gap-x-2 px-3 text-xs text-muted-foreground"
+        role="status"
+        aria-live="polite"
+      >
+        <span>{t('searchResults')}</span>
+        {ready ? (
+          <span className="tabular-nums">
+            {search.truncated ? t('searchShownCounts', { counts: count }) : count}
+          </span>
+        ) : null}
+      </div>
+      <L4ScrollArea className="min-h-0 flex-1" viewportClassName="pb-2">
+        <div
+          ref={resultsRef}
+          role="region"
+          aria-label={t('searchResults')}
+          aria-busy={hasQuery && search.status === 'loading'}
+          onKeyDown={(event) => {
+            if (
+              event.key !== 'ArrowDown' &&
+              event.key !== 'ArrowUp' &&
+              event.key !== 'Home' &&
+              event.key !== 'End'
+            )
+              return
+            const buttons = [
+              ...event.currentTarget.querySelectorAll<HTMLButtonElement>('button')
+            ].filter((button) => !button.disabled && !button.closest('[hidden]'))
+            const current = buttons.indexOf(document.activeElement as HTMLButtonElement)
+            if (current < 0) return
+            event.preventDefault()
+            const next =
+              event.key === 'Home'
+                ? 0
+                : event.key === 'End'
+                  ? buttons.length - 1
+                  : Math.max(
+                      0,
+                      Math.min(buttons.length - 1, current + (event.key === 'ArrowDown' ? 1 : -1))
+                    )
+            buttons[next]?.focus()
+          }}
+        >
+          {!hasQuery ? (
+            <div className="px-5 py-9 text-center text-sm text-muted-foreground">
+              <SearchIcon className="mx-auto mb-3 size-6" />
+              <p>{t('searchStart')}</p>
+              <p className="mt-2 text-xs">
+                {t(
+                  search.scope === 'files'
+                    ? 'searchFiles'
+                    : search.scope === 'content'
+                      ? 'searchContent'
+                      : 'searchAll'
+                )}
+              </p>
+            </div>
+          ) : search.status === 'loading' ? (
+            <div className="flex min-h-10 items-center gap-2 px-3 text-xs text-muted-foreground">
+              <LoaderCircleIcon className="size-3.5 animate-spin" />
+              {t('searching')}
+            </div>
+          ) : search.status === 'error' ? (
+            <p
+              role="alert"
+              className="mx-3 my-2 break-words rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive"
+            >
+              {search.error || t('searchFailed')}
+            </p>
+          ) : ready && fileCount === 0 && lineCount === 0 ? (
+            <div className="px-5 py-9 text-center text-sm text-muted-foreground">
+              <SearchIcon className="mx-auto mb-3 size-6" />
+              <p>{t(search.truncated ? 'resultLimit' : 'noMatches')}</p>
+              <p className="mt-2 text-xs">{t('searchTryOptions')}</p>
+            </div>
+          ) : ready ? (
+            <>
+              {fileCount > 0 ? (
+                <section className="pt-1">
+                  <h3 className="flex min-h-8 items-center gap-2 px-3 text-xs text-muted-foreground">
+                    {t('searchFileHeading')}
+                    <span className="tabular-nums">{fileCount}</span>
+                  </h3>
+                  {files.map(({ path, ranges }) => {
+                    const slash = path.lastIndexOf('/')
+                    const decoration = fileDecoration(path)
+                    return wrapFile(
+                      path,
+                      undefined,
+                      <Button
+                        key={path}
+                        type="button"
+                        variant="ghost"
+                        data-testid={`project-search-result-${path}`}
+                        data-search-result="true"
+                        className={cn(
+                          'mx-1.5 flex min-h-14 w-[calc(100%-0.75rem)] justify-start gap-2 px-2 py-2 text-left font-normal',
+                          activePath === path && 'bg-accent'
+                        )}
+                        title={path}
+                        onClick={() => onOpen(path)}
+                      >
+                        <span className="shrink-0">{renderFileIcon(path)}</span>
+                        <span className="min-w-0 flex-1">
+                          <span className={cn('block truncate text-sm', decoration.className)}>
+                            {highlight(path.slice(slash + 1), ranges, slash + 1)}
+                          </span>
+                          <span className="mt-0.5 block truncate font-mono text-xs text-muted-foreground">
+                            {slash < 0
+                              ? t('searchProjectRoot')
+                              : highlight(path.slice(0, slash), ranges)}
+                          </span>
+                        </span>
+                        {decoration.badge ? (
+                          <span
+                            className={cn('text-xs', decoration.className)}
+                            aria-label={t('gitStatus', { status: decoration.badge })}
+                          >
+                            {decoration.badge}
+                          </span>
+                        ) : null}
+                      </Button>
+                    )
+                  })}
+                  {compact ? (
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      className="ml-8 text-xs text-muted-foreground"
+                      onClick={() => setExpandedFiles(true)}
+                    >
+                      {t('searchExpandFiles', { count: fileCount - 3 })}
+                    </Button>
+                  ) : null}
+                </section>
+              ) : null}
+              {lineCount > 0 ? (
+                <section className={cn('pt-1', fileCount > 0 && 'mt-2 border-t')}>
+                  <h3 className="flex min-h-8 flex-wrap items-center gap-x-2 px-3 text-xs text-muted-foreground">
+                    {t('searchContentHeading')}
+                    <span>
+                      {t('searchContentCounts', { lines: lineCount, files: groups.size })}
+                    </span>
+                  </h3>
+                  {[...groups].map(([path, matches], index) => {
+                    const slash = path.lastIndexOf('/')
+                    const expanded = !collapsed.has(path)
+                    const groupId = `${id}-${index}`
+                    return (
+                      <section key={path} className="mb-1">
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          className="min-h-8 w-full justify-start gap-1.5 rounded-none px-3 text-left font-normal"
+                          title={path}
+                          aria-expanded={expanded}
+                          aria-controls={groupId}
+                          onClick={() => toggleGroup(path)}
+                          onKeyDown={(event) => {
+                            if (
+                              (event.key === 'ArrowLeft' && expanded) ||
+                              (event.key === 'ArrowRight' && !expanded)
+                            ) {
+                              event.preventDefault()
+                              toggleGroup(path)
+                            }
+                          }}
+                        >
+                          <ChevronRightIcon
+                            className={cn(
+                              'size-3 shrink-0 text-muted-foreground transition-transform motion-reduce:transition-none',
+                              expanded && 'rotate-90'
+                            )}
+                          />
+                          <FileIcon className="size-3.5 shrink-0 text-muted-foreground" />
+                          <span className="min-w-0 truncate text-sm">
+                            {path.slice(slash + 1)}
+                            <span className="ml-1.5 text-xs text-muted-foreground">
+                              {path.slice(0, Math.max(0, slash))}
+                            </span>
+                          </span>
+                          <span className="ml-auto shrink-0 rounded bg-muted px-1 text-xs text-muted-foreground tabular-nums">
+                            {matches.length}
+                          </span>
+                        </Button>
+                        <div id={groupId} hidden={!expanded}>
+                          {matches.map(({ line, text, ranges }) =>
+                            wrapFile(
+                              path,
+                              line,
+                              <Button
+                                key={`${path}:${line}`}
+                                type="button"
+                                variant="ghost"
+                                data-testid={`project-search-line-${path}-${line}`}
+                                data-search-result="true"
+                                className={cn(
+                                  'min-h-8 w-full justify-start gap-2 rounded-none border-l-2 border-transparent py-1 pr-3 pl-7 text-left font-mono font-normal',
+                                  selected?.path === path &&
+                                    selected.line === line &&
+                                    'border-l-foreground/50 bg-accent'
+                                )}
+                                title={text}
+                                aria-label={t('searchOpenLine', { path, line })}
+                                onClick={() => {
+                                  setSelected({ path, line })
+                                  onOpen(path, line)
+                                }}
+                              >
+                                <span className="min-w-5 shrink-0 text-right text-xs text-muted-foreground tabular-nums">
+                                  {line}
+                                </span>
+                                <span className="min-w-0 truncate whitespace-pre text-sm">
+                                  {highlight(text, ranges)}
+                                </span>
+                              </Button>
+                            )
+                          )}
+                        </div>
+                      </section>
+                    )
+                  })}
+                </section>
+              ) : null}
+              {search.truncated ? (
+                <p className="px-3 py-2 text-xs leading-5 text-muted-foreground">
+                  {t('resultLimit')}
+                </p>
+              ) : null}
+            </>
+          ) : null}
+        </div>
+      </L4ScrollArea>
+      {search.scope !== 'files' ? (
+        <p className="shrink-0 border-t px-3 py-1.5 text-xs leading-5 text-muted-foreground">
+          {t('searchTextLimit')}
+        </p>
+      ) : null}
+    </div>
+  )
+}

package/src/client/l4_foundation/ui/code/l4-code-preview.tsx

@@ -3,6 +3,7 @@
 import { LoaderCircleIcon } from 'lucide-react'
 import {
   forwardRef,
+  useCallback,
   useEffect,
   useImperativeHandle,
   useRef,
@@ -28,6 +29,10 @@ import markerStyles from './l4-code-line-markers.module.css'
 
 export type L4CodePreviewState = editor.ICodeEditorViewState
 
+export interface L4CodeLineNavigation {
+  readonly line: number
+}
+
 export interface L4CodePreviewHandle {
   openSearch: () => void
   gotoLine: () => void
@@ -48,6 +53,8 @@ interface L4CodePreviewProps {
   originalContent?: string
   onChanges?: (count: number | null) => void
   onOpenDiff?: (lineNumber: number) => void
+  navigation?: L4CodeLineNavigation | null
+  onNavigation?: (target: L4CodeLineNavigation, exists: boolean) => void
 }
 
 function L4CodePreviewComponent(
@@ -60,7 +67,9 @@ function L4CodePreviewComponent(
     onEscape,
     originalContent,
     onChanges,
-    onOpenDiff
+    onOpenDiff,
+    navigation,
+    onNavigation
   }: L4CodePreviewProps,
   ref: ForwardedRef<L4CodePreviewHandle>
 ): React.JSX.Element {
@@ -76,13 +85,29 @@ function L4CodePreviewComponent(
   const markersRef = useRef<L4CodeLineMarkers | null>(null)
   const changesRef = useRef(onChanges)
   const openDiffRef = useRef(onOpenDiff)
+  const navigationCompleteRef = useRef(onNavigation)
+  const navigationMarkersRef = useRef<editor.IEditorDecorationsCollection | null>(null)
+  const highlightedLineRef = useRef<number | null>(null)
+  const paintNavigation = useCallback((codeEditor: editor.IStandaloneCodeEditor): void => {
+    const line = highlightedLineRef.current
+    navigationMarkersRef.current?.clear()
+    if (line === null || line > (codeEditor.getModel()?.getLineCount() ?? 0)) return
+    navigationMarkersRef.current ??= codeEditor.createDecorationsCollection()
+    navigationMarkersRef.current.set([
+      {
+        range: { startLineNumber: line, startColumn: 1, endLineNumber: line, endColumn: 1 },
+        options: { isWholeLine: true, className: 'bg-accent' }
+      }
+    ])
+  }, [])
 
   useEffect(() => {
     savedStateRef.current = savedState
     escapeRef.current = onEscape
     changesRef.current = onChanges
     openDiffRef.current = onOpenDiff
-  }, [onChanges, onEscape, onOpenDiff, savedState])
+    navigationCompleteRef.current = onNavigation
+  }, [onChanges, onEscape, onOpenDiff, onNavigation, savedState])
   const [loadState, setLoadState] = useState<'loading' | 'ready' | 'error'>('loading')
 
   useEffect(() => {
@@ -200,6 +225,7 @@ function L4CodePreviewComponent(
         stopTypographyObserver = observeL4MonacoTypography((typography) =>
           codeEditor?.updateOptions(typography)
         )
+        paintNavigation(codeEditor)
         setLoadState('ready')
       })
       .catch((error: unknown) => {
@@ -222,16 +248,34 @@ function L4CodePreviewComponent(
         savedStateRef.current = codeEditor.saveViewState()
         onSaveStateRef.current(path, savedStateRef.current)
       }
+      navigationMarkersRef.current?.clear()
+      navigationMarkersRef.current = null
       editorRef.current = null
       codeEditor?.dispose()
       model?.dispose()
     }
-  }, [content, originalContent, path, projectFilesT, size, t])
+  }, [content, originalContent, paintNavigation, path, projectFilesT, size, t])
 
   useEffect(() => {
     editorRef.current?.updateOptions({ wordWrap: wrapLines ? 'on' : 'off' })
   }, [wrapLines])
 
+  useEffect(() => {
+    const codeEditor = editorRef.current
+    if (!navigation || loadState !== 'ready' || !codeEditor) return
+    const model = codeEditor.getModel()
+    const exists = Boolean(model && navigation.line >= 1 && navigation.line <= model.getLineCount())
+    highlightedLineRef.current = exists ? navigation.line : null
+    paintNavigation(codeEditor)
+    if (exists) {
+      codeEditor.setPosition({ lineNumber: navigation.line, column: 1 })
+      codeEditor.revealLineInCenter(navigation.line)
+      savedStateRef.current = codeEditor.saveViewState()
+      onSaveStateRef.current(path, savedStateRef.current)
+    }
+    navigationCompleteRef.current?.(navigation, exists)
+  }, [loadState, navigation, paintNavigation, path])
+
   return (
     <div
       data-testid="code-preview"

package/src/client/l4_foundation/ui/markdown/l4-markdown-remark.ts

@@ -0,0 +1,89 @@
+export const L4_MARKDOWN_ALLOWED_TAGS = {
+  input: ['dataPiMarkdownProgress'],
+  blockquote: ['dataPiMarkdownAlert']
+}
+
+// 仅描述本转换读取的 mdast 字段，不引入另一套解析器或运行依赖。
+interface MarkdownNode {
+  type: string
+  value?: string
+  children?: MarkdownNode[]
+  position?: { start: { offset?: number } }
+  data?: {
+    hName?: string
+    hProperties?: Record<string, string | boolean | string[]>
+  }
+}
+
+function statusNode(marker: string): MarkdownNode {
+  return {
+    type: 'paragraph',
+    children: [],
+    data: {
+      hName: 'input',
+      hProperties: {
+        type: 'checkbox',
+        disabled: true,
+        checked: marker.toLowerCase() === '[x]',
+        ...(marker === '[-]' ? { dataPiMarkdownProgress: 'true' } : {})
+      }
+    }
+  }
+}
+
+export function remarkL4Markdown(): (tree: MarkdownNode, file: { value: unknown }) => void {
+  return (tree, file): void => {
+    const source = String(file.value)
+    const isLiteral = (node: MarkdownNode, marker: string): boolean => {
+      const start = node.position?.start.offset
+      return start !== undefined && source.slice(start, start + marker.length) === marker
+    }
+
+    const visit = (node: MarkdownNode): void => {
+      const first = node.children?.[0]
+      if (node.type === 'tableCell' && node.children?.length === 1 && first?.type === 'text') {
+        const marker = first.value ?? ''
+        if (/^\[[ xX-]\]$/.test(marker) && isLiteral(first, marker)) {
+          node.children = [statusNode(marker)]
+        }
+      } else if (node.type === 'listItem' && first?.type === 'paragraph') {
+        const text = first.children?.[0]
+        if (
+          text?.type === 'text' &&
+          /^\[-\](?:\s|$)/.test(text.value ?? '') &&
+          isLiteral(text, '[-]')
+        ) {
+          text.value = text.value!.slice(3)
+          first.children!.unshift(statusNode('[-]'))
+          node.data = { ...node.data, hProperties: { className: ['task-list-item'] } }
+        }
+      } else if (node.type === 'blockquote' && first?.type === 'paragraph') {
+        const text = first.children?.[0]
+        const match = text?.value?.match(
+          /^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\][ \t]*(?:\r?\n|$)/
+        )
+        if (
+          text?.type === 'text' &&
+          match &&
+          isLiteral(text, `[!${match[1]}]`) &&
+          (match[0].endsWith('\n') ||
+            first.children!.length === 1 ||
+            first.children![1]?.type === 'break')
+        ) {
+          text.value = text.value!.slice(match[0].length)
+          if (!text.value) {
+            first.children!.shift()
+            if (first.children![0]?.type === 'break') first.children!.shift()
+          }
+          if (first.children!.length === 0) node.children!.shift()
+          node.data = {
+            ...node.data,
+            hProperties: { dataPiMarkdownAlert: match[1]!.toLowerCase() }
+          }
+        }
+      }
+      for (const child of node.children ?? []) visit(child)
+    }
+    visit(tree)
+  }
+}

package/src/client/l4_foundation/ui/markdown/l4-markdown.module.css

@@ -0,0 +1,58 @@
+.markdown :global(.task-list-item) {
+  list-style: none;
+}
+
+.status {
+  display: inline-flex;
+  position: relative;
+  width: 1rem;
+  height: 1rem;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--muted-foreground);
+  border-radius: 0.25rem;
+  vertical-align: -0.125rem;
+  color: var(--foreground);
+}
+
+.status[data-state='completed'] {
+  border-color: var(--foreground);
+  background: var(--foreground);
+  color: var(--background);
+}
+
+.status svg {
+  width: 0.875rem;
+  height: 0.875rem;
+  stroke-width: 2;
+}
+
+.alert {
+  margin-block: 0.75rem;
+  border-left: 3px solid var(--muted-foreground);
+  padding: 0.5rem 0.875rem;
+  color: var(--foreground);
+  font-style: normal;
+}
+
+.alertTitle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.375rem;
+  font-weight: 600;
+}
+
+.alertTitle svg {
+  width: 1rem;
+  height: 1rem;
+  flex: none;
+}
+
+.alertBody > * {
+  margin-block: 0;
+}
+
+.alertBody > * + * {
+  margin-block-start: 0.5rem;
+}