@lijian-ui/dsh-file-manager 0.1.20

package/src/client/chat/file-ref.ts

@@ -0,0 +1,144 @@
+/**
+ * Chat file-reference click handling (issue #314): the transcript renders
+ * workspace file paths as inline code, and clicking one should locate the
+ * file in the Explorer (switch to the Files tab, expand the ancestor chain,
+ * select the node) and open it in the Preview panel — directories are
+ * reveal-only. A document-level click listener (wired in the client apply)
+ * recognizes a conservative subset: a single-line `code` element whose text
+ * is a workspace-relative path or an absolute path under the project root.
+ * Links (`a`), multi-line fences, URLs, escaped (`..`) paths and anything
+ * inside the panels' own subtrees keep their existing behavior.
+ * @module dsh-filemgr/client/chat/file-ref
+ */
+
+import type { PanelApi } from '../api.ts'
+import type { PanelStores } from '../store.ts'
+import { parentRel } from '../fileType.ts'
+
+/** Longest candidate text (arbitrary safety cap against huge code spans). */
+const MAX_REF_LENGTH = 512
+
+/** Normalize both separators to '/'. */
+function normalizeSlashes(value: string): string {
+  return value.replace(/\\/g, '/')
+}
+
+/**
+ * Interpret a code span's text as a workspace path. Returns the workspace
+ * RELATIVE path ('' = the root itself), or null when the text is not a
+ * recognizable in-workspace path. Never resolves above the root: `..`
+ * segments, absolute outside paths, URLs and whitespace/multi-line text all
+ * fall back to null so the transcript keeps its normal behavior.
+ */
+export function pathFromText(text: string, root: string): string | null {
+  const raw = text.trim()
+  if (raw === '' || raw.length > MAX_REF_LENGTH) return null
+  if (/[\r\n]/.test(raw)) return null
+  if (raw.includes('://')) return null
+  const normalized = normalizeSlashes(raw)
+  const rootNorm = normalizeSlashes(root).replace(/\/+$/, '')
+  if (rootNorm === '') return null
+
+  // Absolute path inside the workspace. Posix paths start with '/'
+  // (case-sensitive prefix match); Windows drive paths carry a drive
+  // letter (case-insensitive prefix match with a separator boundary).
+  if (normalized.startsWith('/')) {
+    if (normalized === rootNorm) return ''
+    if (!normalized.startsWith(rootNorm + '/')) return null
+    const rel = normalized.slice(rootNorm.length).replace(/^\/+/, '')
+    return validRelative(rel) ? rel : null
+  }
+  if (/^[a-zA-Z]:/.test(normalized)) {
+    const lower = normalized.toLowerCase()
+    const lowerRoot = rootNorm.toLowerCase()
+    if (lower === lowerRoot) return ''
+    if (!lower.startsWith(lowerRoot + '/')) return null
+    const rel = normalized.slice(rootNorm.length).replace(/^\/+/, '')
+    return validRelative(rel) ? rel : null
+  }
+
+  // Workspace-relative path ('.' prefix stripped).
+  const rel = normalized.startsWith('./') ? normalized.slice(2) : normalized
+  return validRelative(rel) ? rel : null
+}
+
+/** Validate a relative path: no escapes, no whitespace, looks path-like. */
+function validRelative(rel: string): boolean {
+  if (rel === '' || rel.length > MAX_REF_LENGTH) return false
+  if (/\s/.test(rel)) return false
+  const segments = rel.split('/')
+  if (segments.length < 2) {
+    // A bare name is accepted only when it looks like a file (dotted), so
+    // ordinary words in code spans never trigger a locate.
+    return /^[^/]*\.[^/]+$/.test(rel)
+  }
+  for (const segment of segments) {
+    if (segment === '' || segment === '.' || segment === '..') return false
+  }
+  return true
+}
+
+/** The `code` element a click targets, when it is a candidate file ref. */
+export function fileRefElement(target: EventTarget | null): HTMLElement | null {
+  if (!(target instanceof Element)) return null
+  const code = target.closest('code')
+  if (code === null) return null
+  // Links keep their own navigation; the panels' own code blocks (preview
+  // editors, tree rows) never trigger the transcript locate.
+  if (code.closest('a') !== null) return null
+  if (code.closest('.filemgr-root') !== null) return null
+  if (code.closest('[data-filemgr-preview-col], [data-filemgr-explorer-col]') !== null) return null
+  return code
+}
+
+/**
+ * Locate a workspace-relative path from the transcript: Files tab + expand
+ * ancestors + select; directories stay reveal-only, files also open in the
+ * Preview panel (dedup focuses the existing tab). The parent listing is
+ * consulted to classify the node; unknown paths keep the reveal and never
+ * issue a preview request.
+ */
+export async function locateFileRef(stores: PanelStores, api: PanelApi, rel: string): Promise<void> {
+  const explorer = stores.explorer
+  explorer.setActiveTab('files')
+  if (rel !== '') explorer.reveal(rel)
+
+  const root = stores.layout.getSnapshot().root
+  if (root === '' || rel === '') return
+
+  const name = rel.split('/').pop() ?? ''
+  const parent = parentRel(rel)
+  let entry = explorer.getSnapshot().dirs[parent]?.find((item) => item.name === name)
+  if (entry === undefined) {
+    const result = await api.list(root, parent)
+    if (result.ok) entry = result.value.entries.find((item) => item.name === name)
+  }
+  // Known directories: reveal-only (their children list is the tree's job).
+  // Known files: open in the preview panel. Unknown: no preview request.
+  if (entry !== undefined && !entry.isDir) {
+    stores.preview.openFile(root, rel)
+  }
+}
+
+/** Document-level click handler: locate recognized chat file references. */
+export function handleFileRefClick(stores: PanelStores, api: PanelApi, event: MouseEvent): void {
+  if (event.defaultPrevented || event.button !== 0) return
+  const code = fileRefElement(event.target)
+  if (code === null) return
+  const root = stores.layout.getSnapshot().root
+  if (root === '') return
+  const rel = pathFromText(code.textContent ?? '', root)
+  if (rel === null) return
+  // The explorer must be visible for the reveal to be seen: un-collapse the
+  // column (persisted like the chevron toggle does).
+  const layout = stores.layout.getSnapshot()
+  if (layout.explorerCollapsed) {
+    stores.layout.update((prev) => ({ ...prev, explorerCollapsed: false }))
+    try {
+      localStorage.setItem(`project-panel-collapse:${root}`, 'expanded')
+    } catch {
+      // best-effort
+    }
+  }
+  void locateFileRef(stores, api, rel)
+}

package/src/client/chat/mermaid-chat.tsx

@@ -0,0 +1,102 @@
+/**
+ * Chat-transcript mermaid enhancement: the core conversation renderer emits
+ * fenced code as `pre > code.language-mermaid`, and the shell has no slot
+ * for message-body post-processing — so this component rides the
+ * conversation input dock as a zero-render sentinel and observes the
+ * document for mermaid blocks the transcript mounts. Blocks inside the
+ * preview panel's own subtree are excluded (each surface owns its blocks).
+ *
+ * Streaming awareness: an assistant message re-renders continuously, so a
+ * diagram fence is often incomplete mid-stream. Renders that fail restore
+ * the block and the next mutation retries it — once the fence closes the
+ * diagram lands. Mutations are debounced to one rAF so long transcripts do
+ * not re-scan the whole document: each batch is mapped to the minimal
+ * mutated subtrees and scoped per-frame while the first scheduled pass scans
+ * the body once. The observer is disconnected on unmount.
+ * @module dsh-filemgr/client/chat/mermaid-chat
+ */
+
+import { useEffect } from 'react'
+import type { JSX } from 'react'
+import { DATA_MD_SCOPE, enhanceMermaidBlocks, mermaidTheme, rethemeMermaidBlocks, shellIsDark, watchShellTheme } from '../preview/mermaid.ts'
+import previewCss from '../styles/preview.module.css'
+
+/**
+ * Map a mutation batch to the minimal scan scopes that may contain new
+ * mermaid fences. Each record contributes its target and its added nodes
+ * (an added element directly; otherwise that node's parentElement), deduped
+ * by identity. Disconnected nodes and removed-only records yield nothing —
+ * removal never introduces a fence. Pure (DOM-read only) so tests can drive
+ * it in jsdom.
+ */
+export function enhanceScopesFor(records: MutationRecord[]): Element[] {
+  const scopes = new Set<Element>()
+  for (const record of records) {
+    // Removal-only batches do not introduce a fence: without additions the
+    // target scan is wasted, so only records carrying added nodes contribute.
+    if (record.addedNodes.length === 0) continue
+    if (record.target instanceof Element && record.target.isConnected) {
+      scopes.add(record.target)
+    }
+    for (const node of record.addedNodes) {
+      const element = node instanceof Element ? node : node.parentElement
+      if (element !== null && element.isConnected) scopes.add(element)
+    }
+  }
+  return Array.from(scopes)
+}
+
+/** Hidden sentinel: renders nothing, owns the transcript observer. */
+export function MermaidChatEnhancer(): JSX.Element | null {
+  useEffect(() => {
+    let scheduled = false
+    let pendingFrame = 0
+    let firstPass = true
+    let pendingRecords: MutationRecord[] = []
+    const run = (): void => {
+      scheduled = false
+      const records = pendingRecords
+      pendingRecords = []
+      const scopes = enhanceScopesFor(records)
+      if (firstPass) {
+        // First scheduled pass only: scan the whole document exactly once.
+        // Later batches (even removal-only ones that yield no scopes) never
+        // fall back to a full-body scan.
+        firstPass = false
+        void enhanceMermaidBlocks(document.body, {
+          className: previewCss.mermaidBlock,
+          theme: mermaidTheme(shellIsDark()),
+          skip: (pre) => pre.closest(`[${DATA_MD_SCOPE}]`) !== null,
+        })
+        return
+      }
+      for (const scope of scopes) {
+        void enhanceMermaidBlocks(scope, {
+          className: previewCss.mermaidBlock,
+          theme: mermaidTheme(shellIsDark()),
+          skip: (pre) => pre.closest(`[${DATA_MD_SCOPE}]`) !== null,
+        })
+      }
+    }
+    const schedule = (): void => {
+      if (scheduled) return
+      scheduled = true
+      pendingFrame = requestAnimationFrame(run)
+    }
+    const observer = new MutationObserver((records) => {
+      pendingRecords = pendingRecords.concat(records)
+      schedule()
+    })
+    observer.observe(document.body, { childList: true, subtree: true })
+    schedule()
+    const disposeTheme = watchShellTheme((isDark) => {
+      void rethemeMermaidBlocks(document.body, { theme: mermaidTheme(isDark) })
+    })
+    return () => {
+      observer.disconnect()
+      disposeTheme()
+      cancelAnimationFrame(pendingFrame)
+    }
+  }, [])
+  return null
+}

package/src/client/chat/placeholder-hint.tsx

@@ -0,0 +1,46 @@
+/**
+ * Composer placeholder hint: the shell owns the input-bar placeholder
+ * ("给智能体发消息") and exposes no override seam (the composer bar is a
+ * single slot owned by ui-conversation, and its locale namespace rejects
+ * duplicate registration), so this zero-render sentinel — riding the same
+ * `conversation.input.dock` band as the mermaid enhancer — rewrites the
+ * placeholder attribute in the DOM. It re-applies on any placeholder
+ * attribute change or node insert, which covers React re-renders that
+ * reset the attribute to the shell default. English UI is left untouched
+ * (exact-match on the Chinese string only).
+ * @module dsh-filemgr/client/chat/placeholder-hint
+ */
+
+import { useEffect } from 'react'
+import type { JSX } from 'react'
+
+const OLD_PLACEHOLDER = '给智能体发消息'
+const NEW_PLACEHOLDER = '给智能体发消息。@引用项目文件，/ 调用技能与指令'
+
+/** Rewrite every composer input whose placeholder matches the shell default. */
+function apply(): void {
+  for (const el of document.querySelectorAll<HTMLTextAreaElement | HTMLInputElement>('textarea, input[type="text"]')) {
+    if (el.placeholder === OLD_PLACEHOLDER) el.placeholder = NEW_PLACEHOLDER
+  }
+}
+
+/** Hidden sentinel: renders nothing, owns the placeholder rewriting observer. */
+export function PlaceholderHint(): JSX.Element | null {
+  useEffect(() => {
+    apply()
+    const observer = new MutationObserver((records) => {
+      const relevant = records.some(
+        (record) => record.type === 'attributes' || record.addedNodes.length > 0,
+      )
+      if (relevant) apply()
+    })
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ['placeholder'],
+      childList: true,
+      subtree: true,
+    })
+    return () => { observer.disconnect() }
+  }, [])
+  return null
+}