@lijian-ui/dsh-file-manager 0.1.20

package/src/client/preview/selection.ts

@@ -0,0 +1,82 @@
+/**
+ * Translate a text selection inside the preview into a file reference (path
+ * plus start/end line). The selection must live inside a `<pre>` of a file-
+ * backed preview (code / text / markdown source / diff); returns null for
+ * anything else so the caller can hide the floating action.
+ *
+ * The reference carries only what the agent needs: the workspace-relative
+ * path of the file and the 1-based line range. The selected text itself is
+ * not copied into the composer — the agent re-reads the file at the line
+ * range when the message is sent.
+ * @module dsh-filemgr/client/preview/selection
+ */
+
+import type { PreviewTabState } from '../store.ts'
+
+/** The file-backed reference we surface from a preview selection. */
+export interface FileReferenceSelection {
+  path: string
+  startLine: number
+  endLine: number
+}
+
+/** Content types that map cleanly to line-based references. */
+const LINE_BASED_CONTENT_TYPES: ReadonlySet<PreviewTabState['contentType']> = new Set([
+  'code',
+  'text',
+  'markdown', // markdown source-mode selection still maps to text lines
+  'diff',
+])
+
+/** Number the 1-based line of `offset` within `text` (counting newlines before it). */
+function lineOf(text: string, offset: number): number {
+  const upto = text.length === 0 ? '' : text.slice(0, Math.max(0, Math.min(offset, text.length)))
+  let line = 1
+  for (let i = 0; i < upto.length; i += 1) {
+    if (upto.charCodeAt(i) === 10) line += 1
+  }
+  return line
+}
+
+/** Return the character offset of (node, offset) measured from the start of `pre`. */
+function offsetInPre(pre: HTMLPreElement, node: Node | null, offset: number): number | null {
+  if (node === null) return null
+  try {
+    const range = document.createRange()
+    range.setStart(pre, 0)
+    range.setEnd(node, offset)
+    return range.toString().length
+  } catch {
+    // Cross-boundary nodes (e.g. detached text) raise; fall through.
+    return null
+  }
+}
+
+/**
+ * Build a FileReferenceSelection from a browser selection if it points to a
+ * supported preview's `<pre>`. Returns null otherwise (image / pdf / url /
+ * non-line content, or a selection that lives outside any code block).
+ */
+export function findFileReferenceSelection(
+  anchorElement: Element | null,
+  selection: Selection,
+  tab: PreviewTabState | null,
+): FileReferenceSelection | null {
+  if (anchorElement === null) return null
+  if (tab === null || tab.content === null) return null
+  if (!LINE_BASED_CONTENT_TYPES.has(tab.contentType)) return null
+  const pre = anchorElement.closest('pre') as HTMLPreElement | null
+  if (pre === null) return null
+  const startInPre = offsetInPre(pre, selection.anchorNode, selection.anchorOffset)
+  const endInPre = offsetInPre(pre, selection.focusNode, selection.focusOffset)
+  if (startInPre === null || endInPre === null) return null
+  const start = Math.min(startInPre, endInPre)
+  const end = Math.max(startInPre, endInPre)
+  if (start === end) return null
+  const text = pre.textContent ?? ''
+  return {
+    path: tab.path,
+    startLine: lineOf(text, start),
+    endLine: lineOf(text, end),
+  }
+}

package/src/client/reference.ts

@@ -0,0 +1,161 @@
+import type { ClientContext, SessionId } from '@deepseek-ai/dsh-client-runtime/client'
+
+/**
+ * Composer draft helpers for file references.
+ *
+ * References ride the shell's native U+FFFC chip pipeline
+ * (`slash/input-insert-reference` bail): the composer shows one chip pill in
+ * place of the hidden `@path:lines` token, and the model text is serialized
+ * on submit through the `file` reference source's codec (registered in
+ * file-source.ts). Without that codec the submit attempt fails with
+ * `slash: no serializer for reference source "file"` — the codec MUST stay
+ * registered while any chip is in a draft.
+ */
+
+/**
+ * Minimal structural view of the conversation input service. Declared locally
+ * so this helper has no value import from the conversation package (keeps the
+ * client bundle purity gate happy).
+ */
+interface DraftInput {
+  state: { getSnapshot(): { draft: string; draftRev: number } }
+  setDraft(draft: string): void
+}
+export interface ConversationService {
+  input: { for(actx: ClientContext): DraftInput }
+}
+
+/** The file-backed reference a composer chip stands for. */
+export interface FileReference {
+  /** Workspace-relative path (what the agent will read). */
+  path: string
+  /** First line of the referenced range (1-based, inclusive). */
+  startLine: number
+  /** Last line of the referenced range (1-based, inclusive). */
+  endLine: number
+}
+
+/** Basename of a `/`-separated relative path ('' when empty). */
+function basenameOf(rel: string): string {
+  const idx = rel.lastIndexOf('/')
+  return idx >= 0 ? rel.slice(idx + 1) : rel
+}
+
+/** Directory of a `/`-separated relative path ('' when none). */
+function dirnameOf(rel: string): string {
+  const idx = rel.lastIndexOf('/')
+  return idx > 0 ? rel.slice(0, idx) : ''
+}
+
+/**
+ * The chip label: basename, or `basename - dir` when the basename is
+ * ambiguous across the workspace (matches the reference screenshot: a short
+ * name plus the line range, never the full path).
+ */
+function formatRefLabel(ref: FileReference): string {
+  const basename = basenameOf(ref.path)
+  const dirname = dirnameOf(ref.path)
+  const name = dirname === '' ? basename : `${basename} - ${dirname}`
+  return ref.endLine > ref.startLine ? `${name} ${ref.startLine}-${ref.endLine}` : `${name} ${ref.startLine}`
+}
+
+/** The `@path:lines` model form (what the codec serializes to on submit). */
+export function formatFileRefToken(ref: { path: string; startLine: number; endLine: number }): string {
+  const range = ref.endLine > ref.startLine ? `${ref.startLine}-${ref.endLine}` : `${ref.startLine}`
+  return `@${ref.path}:${range}`
+}
+
+/** Reference shape the conversation machine mints into a chip occurrence. */
+interface ConversationReference {
+  source: string
+  ref: string
+  label: string
+  clipboardText: string
+}
+
+/** The DRAFT-REV+CAS span the conversation machine expects for chip inserts. */
+export interface RefSpan {
+  start: number
+  end: number
+  draftRev: number
+}
+
+/** Append `text` to the session's composer draft (plain text — no chip). */
+export function appendToDraft(ctx: ClientContext, sessionId: SessionId | undefined, text: string): boolean {
+  try {
+    if (sessionId === undefined) return false
+    const actx = ctx.sessions.scope(sessionId)
+    if (actx === undefined) return false
+    const conversation = (ctx as unknown as { conversation?: ConversationService }).conversation
+    if (conversation === undefined) return false
+    const input = conversation.input.for(actx as unknown as ClientContext)
+    const draft = input.state.getSnapshot().draft
+    input.setDraft(draft.trim() === '' ? text : `${draft} ${text}`)
+    return true
+  } catch (error) {
+    console.warn('[dsh-filemgr] draft insert failed:', error)
+    return false
+  }
+}
+
+/**
+ * Insert a file-reference chip into the composer draft at `span`, replacing
+ * its range with an occurrence the machine renders as a `</> name N-M`
+ * pill. The model text (`@path:lines`) is serialized on submit by the `file`
+ * source's codec (file-source.ts) — never the clipboard text.
+ *
+ * @returns true when the bail was accepted (CAS will still reject on
+ *   stale draftRev — caller can re-read draft after).
+ */
+export function insertFileReference(
+  ctx: ClientContext,
+  sessionId: SessionId | undefined,
+  ref: FileReference,
+  span: RefSpan,
+): boolean {
+  try {
+    if (sessionId === undefined) return false
+    const actx = ctx.sessions.scope(sessionId)
+    if (actx === undefined) return false
+    const reference: ConversationReference = {
+      source: 'file',
+      ref: formatFileRefToken(ref),
+      label: formatRefLabel(ref),
+      clipboardText: formatFileRefToken(ref),
+    }
+    return (actx as unknown as {
+      bail(target: unknown, event: string, payload: unknown): boolean
+    }).bail(actx, 'slash/input-insert-reference', { reference, span })
+  } catch (error) {
+    console.warn('[dsh-filemgr] file-reference insert failed:', error)
+    return false
+  }
+}
+
+/**
+ * Append a file-reference chip at the end of the current draft (the explorer
+ * `@` button and the preview "添加到对话" action path). Reads the latest
+ * draft + draftRev from the conversation shell and inserts a zero-length chip
+ * there, so the chip lands after whatever the user has already typed.
+ *
+ * @returns true on success.
+ */
+export function appendFileReferenceChip(
+  ctx: ClientContext,
+  sessionId: SessionId | undefined,
+  ref: FileReference,
+): boolean {
+  if (sessionId === undefined) return false
+  const actx = ctx.sessions.scope(sessionId)
+  if (actx === undefined) return false
+  const conversation = (ctx as unknown as { conversation?: ConversationService }).conversation
+  if (conversation === undefined) return false
+  const shell = conversation.input.for(actx as unknown as ClientContext)
+  const snap = shell.state.getSnapshot()
+  return insertFileReference(
+    ctx,
+    sessionId,
+    ref,
+    { start: snap.draft.length, end: snap.draft.length, draftRev: snap.draftRev },
+  )
+}

package/src/client/settings-card.module.css

@@ -0,0 +1,316 @@
+/* Generated by scripts/sync-shared.mjs from shared/client/settings/settings-card.module.css. Do not edit this copy; edit the shared source and run "node scripts/sync-shared.mjs". */
+/* Plugin settings card chrome + staged form fields.
+ * Aligned with the official ui-settings-plugins PluginCard / fields CSS:
+ * same semantic tokens, radius, typography and states so family cards read
+ * as siblings of the built-in Shell / Agent loop / Web search cards. */
+
+.card {
+  border: 1px solid var(--dsw-alias-border-l2);
+  background: var(--dsw-alias-bg-layer-3);
+  border-radius: 12px;
+  list-style: none;
+  transition: border-color 0.16s, background 0.16s;
+}
+
+.card:hover {
+  border-color: var(--dsw-alias-label-dimmed);
+}
+
+.cardOpen {
+  background: var(--dsw-alias-bg-layer-2);
+  border-color: var(--dsw-alias-label-dimmed);
+}
+
+.header {
+  appearance: none;
+  width: 100%;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: 12px;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  display: flex;
+}
+
+.header:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: -2px;
+}
+
+.headerStatic {
+  width: 100%;
+  border-radius: 12px;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  display: flex;
+}
+
+.headText {
+  flex-direction: column;
+  flex: 1;
+  gap: 4px;
+  min-width: 0;
+  display: flex;
+}
+
+.name {
+  color: var(--dsw-alias-label-primary);
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.description {
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.pending {
+  white-space: nowrap;
+  background: var(--dsw-alias-bg-module-platform);
+  color: var(--dsw-alias-label-secondary);
+  border-radius: 999px;
+  flex: none;
+  padding: 1px 8px;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 17px;
+}
+
+.chevron {
+  color: var(--dsw-alias-label-tertiary);
+  flex: none;
+  transition: transform 0.16s;
+}
+
+.chevronOpen {
+  transform: rotate(180deg);
+}
+
+.body {
+  border-top: 1px solid var(--dsw-alias-border-l2);
+  margin: 0 16px;
+  padding-bottom: 8px;
+}
+
+.readOnly {
+  color: var(--dsw-alias-label-tertiary);
+  margin: 12px 0 0;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.notExposed {
+  color: var(--dsw-alias-state-warn-primary);
+  margin: 12px 0 0;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.footer {
+  border-top: 1px solid var(--dsw-alias-border-l2);
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 0 4px;
+  display: flex;
+}
+
+.failed {
+  min-width: 0;
+  color: var(--dsw-alias-label-error);
+  flex: 1;
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.discard,
+.save {
+  appearance: none;
+  font: inherit;
+  cursor: pointer;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 5px 14px;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.discard {
+  border-color: var(--dsw-alias-border-l2);
+  color: var(--dsw-alias-label-secondary);
+  background: transparent;
+}
+
+.discard:hover:not(:disabled) {
+  color: var(--dsw-alias-label-primary);
+  border-color: var(--dsw-alias-label-dimmed);
+}
+
+.save {
+  background: var(--dsw-alias-label-primary);
+  color: var(--dsw-alias-bg-layer-3);
+}
+
+.discard:disabled,
+.save:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.discard:focus-visible,
+.save:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: 1px;
+}
+
+.field {
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 0;
+  display: flex;
+}
+
+.field + .field {
+  border-top: 1px solid var(--dsw-alias-border-l2);
+}
+
+.head {
+  align-items: center;
+  gap: 8px;
+  display: flex;
+}
+
+.label {
+  min-width: 0;
+  color: var(--dsw-alias-label-primary);
+  flex: 1;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.5;
+}
+
+.badges {
+  align-items: center;
+  gap: 8px;
+  display: inline-flex;
+}
+
+.badge {
+  white-space: nowrap;
+  background: var(--dsw-alias-bg-module-platform);
+  color: var(--dsw-alias-label-secondary);
+  border-radius: 999px;
+  padding: 1px 8px;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 17px;
+}
+
+.reset {
+  font: inherit;
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  padding: 0;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.reset:hover:not(:disabled) {
+  color: var(--dsw-alias-label-primary);
+}
+
+.reset:disabled {
+  cursor: default;
+}
+
+.reset:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: 2px;
+}
+
+.reset:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: 2px;
+}
+
+.input,
+.select {
+  border: 1px solid var(--dsw-alias-border-l2);
+  background: var(--dsw-alias-bg-layer-3);
+  height: 34px;
+  font: inherit;
+  color: var(--dsw-alias-label-primary);
+  border-radius: 8px;
+  padding: 0 12px;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.input:focus-visible,
+.select:focus-visible {
+  border-color: var(--dsw-alias-brand-primary);
+  outline: none;
+}
+
+.input:disabled,
+.select:disabled {
+  color: var(--dsw-alias-label-tertiary);
+  cursor: default;
+}
+
+.inputInvalid {
+  border: 1px solid var(--dsw-alias-label-error);
+  background: var(--dsw-alias-bg-layer-3);
+  height: 34px;
+  font: inherit;
+  color: var(--dsw-alias-label-primary);
+  border-radius: 8px;
+  padding: 0 12px;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.inputInvalid:focus-visible {
+  outline: 2px solid var(--dsw-alias-label-error);
+  outline-offset: 1px;
+  border-color: var(--dsw-alias-label-error);
+}
+
+.invalid {
+  color: var(--dsw-alias-label-error);
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.hint {
+  color: var(--dsw-alias-label-tertiary);
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .card,
+  .header,
+  .chevron,
+  .chevronOpen,
+  .discard,
+  .save {
+    transition: none;
+  }
+}