@lijian-ui/dsh-file-manager 0.2.1 → 0.2.3

package/lib/types/client/reference.d.ts

@@ -33,17 +33,13 @@ export interface ConversationService {
 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;
+    /** First line of the referenced range (1-based, inclusive). Omit for whole-file references. */
+    startLine?: number;
+    /** Last line of the referenced range (1-based, inclusive). Omit for whole-file references. */
+    endLine?: number;
 }
-/** The `@path:lines` model form (what the codec serializes to on submit). */
-export declare function formatFileRefToken(ref: {
-    path: string;
-    startLine: number;
-    endLine: number;
-}): string;
+/** The `@path` / `@path:lines` model form (what the codec serializes to on submit). */
+export declare function formatFileRefToken(ref: FileReference): string;
 /** The DRAFT-REV+CAS span the conversation machine expects for chip inserts. */
 export interface RefSpan {
     start: number;

package/lib/types/client/reference.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reference.d.ts","sourceRoot":"","sources":["../../../src/client/reference.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAA;AAEtF;;;;;;;;;;GAUG;AAEH;;;;GAIG;AACH,UAAU,UAAU;IAClB,KAAK,EAAE;QAAE,WAAW,IAAI;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,QAAQ,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,CAAA;IAC7D,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CAC9B;AACD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE;QAAE,GAAG,CAAC,IAAI,EAAE,aAAa,GAAG,UAAU,CAAA;KAAE,CAAA;CAChD;AAED,4DAA4D;AAC5D,MAAM,WAAW,aAAa;IAC5B,0DAA0D;IAC1D,IAAI,EAAE,MAAM,CAAA;IACZ,+DAA+D;IAC/D,SAAS,EAAE,MAAM,CAAA;IACjB,8DAA8D;IAC9D,OAAO,EAAE,MAAM,CAAA;CAChB;AA0BD,6EAA6E;AAC7E,wBAAgB,kBAAkB,CAAC,GAAG,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAGpG;AAUD,gFAAgF;AAChF,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,4EAA4E;AAC5E,wBAAgB,aAAa,CAAC,GAAG,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,GAAG,SAAS,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAezG;AAED;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CACjC,GAAG,EAAE,aAAa,EAClB,SAAS,EAAE,SAAS,GAAG,SAAS,EAChC,GAAG,EAAE,aAAa,EAClB,IAAI,EAAE,OAAO,GACZ,OAAO,CAkBT;AAED;;;;;;;GAOG;AACH,wBAAgB,uBAAuB,CACrC,GAAG,EAAE,aAAa,EAClB,SAAS,EAAE,SAAS,GAAG,SAAS,EAChC,GAAG,EAAE,aAAa,GACjB,OAAO,CAcT"}
+{"version":3,"file":"reference.d.ts","sourceRoot":"","sources":["../../../src/client/reference.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAA;AAEtF;;;;;;;;;;GAUG;AAEH;;;;GAIG;AACH,UAAU,UAAU;IAClB,KAAK,EAAE;QAAE,WAAW,IAAI;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,QAAQ,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,CAAA;IAC7D,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CAC9B;AACD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE;QAAE,GAAG,CAAC,IAAI,EAAE,aAAa,GAAG,UAAU,CAAA;KAAE,CAAA;CAChD;AAED,4DAA4D;AAC5D,MAAM,WAAW,aAAa;IAC5B,0DAA0D;IAC1D,IAAI,EAAE,MAAM,CAAA;IACZ,+FAA+F;IAC/F,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8FAA8F;IAC9F,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AA2BD,uFAAuF;AACvF,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAI7D;AAYD,gFAAgF;AAChF,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,4EAA4E;AAC5E,wBAAgB,aAAa,CAAC,GAAG,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,GAAG,SAAS,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAezG;AAED;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CACjC,GAAG,EAAE,aAAa,EAClB,SAAS,EAAE,SAAS,GAAG,SAAS,EAChC,GAAG,EAAE,aAAa,EAClB,IAAI,EAAE,OAAO,GACZ,OAAO,CAmBT;AAED;;;;;;;GAOG;AACH,wBAAgB,uBAAuB,CACrC,GAAG,EAAE,aAAa,EAClB,SAAS,EAAE,SAAS,GAAG,SAAS,EAChC,GAAG,EAAE,aAAa,GACjB,OAAO,CAcT"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lijian-ui/dsh-file-manager",
   "description": "DSH web GUI right-panel system: a pixel-faithful re-implementation of FileManager's Explorer + Preview columns (file tree, filename search, git changes, multi-tab preview of 10+ formats) driven by real host-side fs/git services, hot-pluggable via a profile bundle without any dsh source changes",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "type": "module",
   "main": "lib/index.js",
   "types": "lib/types/index.d.ts",

package/src/client/DockItem.tsx

@@ -14,7 +14,7 @@ function ensureStyle(): void {
   if (document.getElementById(STYLE_ID) !== null) return
   const tag = document.createElement('style')
   tag.id = STYLE_ID
-  tag.textContent = '.dsh-dock-item{width:32px;height:32px;border:none;border-radius:9999px;background:#000;color:#fff;cursor:pointer;position:relative;transition:transform .15s ease,background .18s ease;display:inline-flex;align-items:center;justify-content:center}.dsh-dock-item:hover{transform:scale(1.15);background:#1a1a1a}.dsh-dock-item-active{background:var(--aion-primary,#6ea0ff)}.dsh-dock-tooltip{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:2px 8px;font-size:12px;line-height:1.4;white-space:nowrap;color:#fff;background:rgba(20,20,30,.9);border:1px solid rgba(255,255,255,.12);border-radius:6px;opacity:0;pointer-events:none;transition:opacity .15s}.dsh-dock-item:hover .dsh-dock-tooltip{opacity:1}'
+  tag.textContent = '.dsh-dock-item{width:32px;height:32px;border:none;border-radius:9999px;background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-base);cursor:pointer;position:relative;transition:transform .15s ease,background .18s ease;display:inline-flex;align-items:center;justify-content:center}.dsh-dock-item:hover{transform:scale(1.15);background:color-mix(in srgb,var(--dsw-alias-label-primary) 85%,var(--dsw-alias-bg-base))}.dsh-dock-item-active{background:var(--dsw-alias-state-business-primary);color:var(--dsw-alias-bg-base)}.dsh-dock-tooltip{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:2px 8px;font-size:12px;line-height:1.4;white-space:nowrap;color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-layer-3);border:1px solid var(--dsw-alias-border-l2);border-radius:6px;opacity:0;pointer-events:none;transition:opacity .15s}.dsh-dock-item:hover .dsh-dock-tooltip{opacity:1}'
   document.head.appendChild(tag)
 }
 

package/src/client/components/ExplorerPanel.tsx

@@ -267,7 +267,7 @@ function SearchArea({
       <div className={explorerCss.searchArea}>
         <div
           className={`${explorerCss.searchBox}${searchFocus ? ` ${explorerCss.searchAreaFocus}` : ''}`}
-          style={{ borderColor: searchFocus ? 'var(--aion-primary)' : undefined }}
+          style={{ borderColor: searchFocus ? 'var(--dsw-alias-state-business-primary)' : undefined }}
         >
           <span className={explorerCss.searchIcon}><SearchIcon size={14} /></span>
           <input

package/src/client/components/ScmPanel.tsx

@@ -130,7 +130,7 @@ export function ScmPanel({ stores }: { stores: PanelStores }): JSX.Element {
           </span>
           <span className={scmCss.sectionTitle}>{t('scm.changes')}</span>
           {status.branch !== '' && (
-            <span className={scmCss.branchName} style={{ fontSize: 11, color: 'var(--aion-text-tertiary)', display: 'flex', alignItems: 'center', gap: 4 }}>
+            <span className={scmCss.branchName} style={{ fontSize: 11, color: 'var(--dsw-alias-label-tertiary)', display: 'flex', alignItems: 'center', gap: 4 }}>
               <BranchIcon size={12} />
               {status.branch}
             </span>
@@ -161,7 +161,7 @@ export function ScmPanel({ stores }: { stores: PanelStores }): JSX.Element {
               type="button"
               className={scmCss.sectionAction}
               title={t('scm.viewList')}
-              style={{ color: state.viewMode === 'list' ? 'var(--aion-brand)' : undefined }}
+              style={{ color: state.viewMode === 'list' ? 'var(--dsw-alias-brand-primary)' : undefined }}
               onClick={() => scm.setViewMode('list')}
             >
               <ListIcon size={13} />
@@ -170,7 +170,7 @@ export function ScmPanel({ stores }: { stores: PanelStores }): JSX.Element {
               type="button"
               className={scmCss.sectionAction}
               title={t('scm.viewTree')}
-              style={{ color: state.viewMode === 'tree' ? 'var(--aion-brand)' : undefined }}
+              style={{ color: state.viewMode === 'tree' ? 'var(--dsw-alias-brand-primary)' : undefined }}
               onClick={() => scm.setViewMode('tree')}
             >
               <TreeIcon size={13} />
@@ -359,7 +359,7 @@ function DirNode({
           <ChevronRightIcon size={13} />
         </span>
         <FileTypeIcon name={label} isDir expanded={expanded} />
-        <span style={{ fontSize: 13, color: 'var(--aion-text-primary)' }}>{label}</span>
+        <span style={{ fontSize: 13, color: 'var(--dsw-alias-label-primary)' }}>{label}</span>
       </div>
       {expanded &&
         rows.map((row) => (

package/src/client/index.ts

@@ -37,7 +37,6 @@ import { handleFileRefClick } from './chat/file-ref.ts'
 import { appendToDraft, appendFileReferenceChip } from './reference.ts'
 import { registerFileReferenceSource } from './file-source.ts'
 import type { FileReferenceSelection } from './preview/selection.ts'
-import './styles/chip.module.css'
 import { FilePanelDockItem } from './FilePanelDockItem.tsx'
 
 declare module '@deepseek-ai/dsh-client-ui-slots' {
@@ -223,9 +222,8 @@ export function apply(ctx: ClientContext): void {
       let lastPreviewOpen = false
 
       // The Explorer row '@' button: insert a file-reference chip for files
-      // (path + 1..N) or plain `@<rel-path>/` text for folders. File lines
-      // are fetched from the host so the chip can carry an accurate line
-      // range; failures fall back to plain text.
+      // (plain `@<rel-path>`, no line range) or plain `@<rel-path>/` text for
+      // folders.
       const onReference = (path: string, isDir: boolean): void => {
         const sessionId = ctx.sessions.list.getSnapshot().current as SessionId | undefined
         if (sessionId === undefined) {
@@ -236,16 +234,7 @@ export function apply(ctx: ClientContext): void {
           appendToDraft(ctx, sessionId, `@${path}/ `)
           return
         }
-        void panelApi.read(currentRoot, path, false).then((result) => {
-          if (!result.ok) {
-            appendToDraft(ctx, sessionId, `@${path} `)
-            return
-          }
-          const text = result.value.content
-          const trimmed = text.endsWith('\n') ? text.slice(0, -1) : text
-          const lines = trimmed === '' ? 1 : trimmed.split('\n').length
-          appendFileReferenceChip(ctx, sessionId, { path, startLine: 1, endLine: lines })
-        })
+        appendFileReferenceChip(ctx, sessionId, { path })
       }
 
       // The preview "添加到对话" action: insert a file-reference chip

package/src/client/layout.ts

@@ -165,7 +165,7 @@ export class PanelLayoutController {
     previewCol.style.overflow = 'hidden'
     previewCol.style.display = 'flex'
     previewCol.style.flexDirection = 'column'
-    previewCol.style.borderLeft = '1px solid var(--aion-bg-3, #e5e6eb)'
+    previewCol.style.borderLeft = '1px solid var(--dsw-alias-bg-layer-3)'
 
     const explorerCol = document.createElement('div')
     explorerCol.dataset.filemgrExplorerCol = ''
@@ -174,7 +174,7 @@ export class PanelLayoutController {
     explorerCol.style.overflow = 'hidden'
     explorerCol.style.display = 'flex'
     explorerCol.style.flexDirection = 'column'
-    explorerCol.style.borderLeft = '1px solid var(--aion-bg-3, #e5e6eb)'
+    explorerCol.style.borderLeft = '1px solid var(--dsw-alias-bg-layer-3)'
 
     frame.appendChild(previewCol)
     frame.appendChild(explorerCol)

package/src/client/picker/FilePickerModal.tsx

@@ -4,13 +4,15 @@
  *
  * Trigger: typing `@` (with nothing after it) in the composer opens this
  * modal directly — no inline trigger menu (the shell's trigger menu is a
- * flat candidate list that cannot host a tree). The modal owns a recursive
- * tree with lazy expansion, a workspace filename search, per-row checkboxes
- * for multi-selection, and a chip row of the picked paths.
+ * flat candidate list that cannot host a tree). On open the just-typed `@`
+ * is stripped from the composer draft, which permanently silences the
+ * shell's own draft-driven `@` menu while the picker is up. The modal owns
+ * a recursive tree with lazy expansion, a workspace filename search,
+ * per-row checkboxes for multi-selection, and a chip row of the picked
+ * paths.
  *
- * Insertion replaces the `@` token the picker was opened from with the
- * picked references joined by spaces (`@a.ts @src/ @b.md`); cancel drops
- * the stray `@`.
+ * Insertion lands the picked references at the recorded anchor position
+ * (`@a.ts @src/ @b.md`); cancel drops the stray `@`.
  * @module dsh-filemgr/client/picker/FilePickerModal
  */
 
@@ -399,6 +401,28 @@ export function FilePickerHost({ ctx, api }: { ctx: ClientContext; api: PanelApi
         initialDir: '',
         span: { start: mention.start, end: mention.start + 1 },
       })
+      // Strip the just-typed `@` from the composer draft. Ordering note: this
+      // listener runs on the textarea (target phase) BEFORE the shell's
+      // root-delegated handler commits the keystroke into the machine, so a
+      // synchronous strip would read a STALE snapshot (guard fails, `@`
+      // survives). Defer to a microtask — by then the machine has committed
+      // the draft with the `@`, the guard holds, and the shell's draft-driven
+      // `@` menu loses its anchor for good. insert() re-checks the anchor
+      // idempotently in case this race ever lands the other way.
+      queueMicrotask(() => {
+        try {
+          const actx = ctx.sessions.scope(sessionId)
+          const conversation = (ctx as unknown as { conversation?: ConversationService }).conversation
+          if (actx === undefined || conversation === undefined) return
+          const shellInput = conversation.input.for(actx)
+          const snap = shellInput.state.getSnapshot()
+          if (snap.draft.charAt(mention.start) === '@') {
+            shellInput.setDraft(snap.draft.slice(0, mention.start) + snap.draft.slice(mention.start + 1))
+          }
+        } catch {
+          // Best-effort: insert() re-checks the anchor idempotently.
+        }
+      })
     }
     const attach = (): void => {
       for (const ta of document.querySelectorAll<HTMLTextAreaElement>('textarea')) {
@@ -421,58 +445,53 @@ export function FilePickerHost({ ctx, api }: { ctx: ClientContext; api: PanelApi
   /**
    * Insert the picked references into the composer draft as file-reference
    * chips (one `slash/input-insert-reference` bail per file; the `file`
-   * source codec serializes each to `@path:lines` on submit). Folders fall
-   * back to plain `@path/ ` text since the chip has no line concept.
-   * Multiple selections land as adjacent chips.
+   * source codec serializes each to `@path` on submit). Whole-file picks
+   * carry no line range. Folders fall back to plain `@path/ ` text since
+   * the chip has no directory concept. Multiple selections land as
+   * adjacent chips. Since open stripped the bare `@` from the draft, every
+   * chip inserts at the recorded anchor as a zero-length span.
    */
   const insert = async (paths: PickedPath[]): Promise<void> => {
     const current = filePicker.getSnapshot()
     if (!current.open || current.req === null || paths.length === 0) return
-    const { sessionId, root, span } = current.req
+    const { sessionId, span } = current.req
     try {
       const actx = ctx.sessions.scope(sessionId)
       if (actx === undefined) return
       const conversation = (ctx as unknown as { conversation?: ConversationService }).conversation
       if (conversation === undefined) return
       const shell = conversation.input.for(actx)
-      // Pre-fetch every file's line count in parallel (bails are serial so
-      // they share the same draft; reads are independent).
-      const lineCounts = await Promise.all(paths.map(async (pick) => {
-        if (pick.isDir) return { pick, lines: null }
-        const result = await api.read(root, pick.path, false)
-        if (!result.ok) return { pick, lines: null }
-        const text = result.value.content
-        const trimmed = text.endsWith('\n') ? text.slice(0, -1) : text
-        const lines = trimmed === '' ? 1 : trimmed.split('\n').length
-        return { pick, lines }
-      }))
-      // Walk in original order. The first chip replaces the `@` token; the
-      // rest insert at the current cursor (0-length span) so the machine
-      // appends each one in turn.
-      let cursor = span.end
-      let firstSpan = true
-      for (const { pick, lines } of lineCounts) {
-        if (pick.isDir) {
-          appendToDraft(ctx, sessionId, `@${pick.path}/ `)
-          continue
+      // Idempotent anchor cleanup: the open-time microtask strip usually
+      // removed the bare `@` already; if that race ever landed the other way
+      // (or was skipped), remove it now so no stray `@` survives next to the
+      // inserted chips.
+      {
+        const snap0 = shell.state.getSnapshot()
+        if (snap0.draft.charAt(span.start) === '@') {
+          shell.setDraft(snap0.draft.slice(0, span.start) + snap0.draft.slice(span.start + 1))
         }
-        if (lines === null) continue
+      }
+      // Walk in REVERSE pick order, every file chip at the SAME zero-length
+      // anchor: each machine insert splices the chip's DISPLAY TEXT (`@label`)
+      // plus a gap at span.start — the chip look itself is a minted scan
+      // decoration, never special characters — pushing earlier-inserted text
+      // to the right, so the draft reads in original pick order with no
+      // cursor bookkeeping. (A fixed advance of 2 would land the next chip
+      // mid-text of the previous one.) Folders keep the plain-text append at
+      // the draft tail.
+      for (let i = paths.length - 1; i >= 0; i--) {
+        const pick = paths[i]
+        if (pick.isDir) continue
         const snap = shell.state.getSnapshot()
-        const currentSpan: RefSpan = firstSpan
-          ? { start: span.start, end: span.end, draftRev: snap.draftRev }
-          : { start: cursor, end: cursor, draftRev: snap.draftRev }
-        const ok = insertFileReference(
+        insertFileReference(
           ctx,
           sessionId,
-          { path: pick.path, startLine: 1, endLine: lines },
-          currentSpan,
+          { path: pick.path },
+          { start: span.start, end: span.start, draftRev: snap.draftRev },
         )
-        if (ok) {
-          firstSpan = false
-          // The machine replaces [start,end) with U+FFFC and an optional
-          // trailing space; the cursor advances by 2 for the new characters.
-          cursor += 2
-        }
+      }
+      for (const pick of paths) {
+        if (pick.isDir) appendToDraft(ctx, sessionId, `@${pick.path}/ `)
       }
       filePicker.close()
     } catch (error) {

package/src/client/preview/PreviewPanel.tsx

@@ -70,6 +70,7 @@ export function PreviewPanel({ stores, onAddFileReference }: { stores: PanelStor
       }
       const ref = findFileReferenceSelection(el, selection, activeTab)
       if (ref === null) {
+
         setAddToChat(null)
         return
       }

package/src/client/preview/content.tsx

@@ -246,7 +246,7 @@ function HtmlViewer({
 }): JSX.Element {
   const srcDoc = useMemo(() => {
     // Base styles so the embedded page inherits the theme background.
-    return `<!doctype html><html><head><meta charset="utf-8"><style>body{margin:0;font-family:-apple-system,"system-ui","Segoe UI",Roboto,"PingFang SC",sans-serif;color:#1d2129}@media (prefers-color-scheme:dark){body{color:rgba(255,255,255,0.9)}}</style></head><body>${content}</body></html>`
+    return `<!doctype html><html><head><meta charset="utf-8"><style>body{margin:0;font-family:-apple-system,"system-ui","Segoe UI",Roboto,"PingFang SC",sans-serif;color:var(--dsw-alias-label-primary)}@media (prefers-color-scheme:dark){body{color:var(--dsw-alias-label-secondary)}}</style></head><body>${content}</body></html>`
   }, [content])
   if (sourceMode && onContentChange !== undefined) {
     return (

package/src/client/reference.ts

@@ -29,10 +29,10 @@ export interface ConversationService {
 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
+  /** First line of the referenced range (1-based, inclusive). Omit for whole-file references. */
+  startLine?: number
+  /** Last line of the referenced range (1-based, inclusive). Omit for whole-file references. */
+  endLine?: number
 }
 
 /** Basename of a `/`-separated relative path ('' when empty). */
@@ -56,11 +56,13 @@ function formatRefLabel(ref: FileReference): string {
   const basename = basenameOf(ref.path)
   const dirname = dirnameOf(ref.path)
   const name = dirname === '' ? basename : `${basename} - ${dirname}`
+  if (ref.startLine === undefined || ref.endLine === undefined) return name
   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 {
+/** The `@path` / `@path:lines` model form (what the codec serializes to on submit). */
+export function formatFileRefToken(ref: FileReference): string {
+  if (ref.startLine === undefined || ref.endLine === undefined) return `@${ref.path}`
   const range = ref.endLine > ref.startLine ? `${ref.startLine}-${ref.endLine}` : `${ref.startLine}`
   return `@${ref.path}:${range}`
 }
@@ -71,6 +73,8 @@ interface ConversationReference {
   ref: string
   label: string
   clipboardText: string
+  /** Official chip appearance: renders the reference icon over the `@` glyph. */
+  appearance: 'file'
 }
 
 /** The DRAFT-REV+CAS span the conversation machine expects for chip inserts. */
@@ -86,7 +90,7 @@ export function appendToDraft(ctx: ClientContext, sessionId: SessionId | undefin
     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
+    const conversation = (ctx as unknown as { get(name: string): unknown }).get('conversation') as ConversationService | undefined
     if (conversation === undefined) return false
     const input = conversation.input.for(actx as unknown as ClientContext)
     const draft = input.state.getSnapshot().draft
@@ -122,6 +126,7 @@ export function insertFileReference(
       ref: formatFileRefToken(ref),
       label: formatRefLabel(ref),
       clipboardText: formatFileRefToken(ref),
+      appearance: 'file',
     }
     return (actx as unknown as {
       bail(target: unknown, event: string, payload: unknown): boolean
@@ -148,7 +153,7 @@ export function appendFileReferenceChip(
   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
+  const conversation = (ctx as unknown as { get(name: string): unknown }).get('conversation') as ConversationService | undefined
   if (conversation === undefined) return false
   const shell = conversation.input.for(actx as unknown as ClientContext)
   const snap = shell.state.getSnapshot()

package/src/client/styles/picker.module.css

@@ -8,7 +8,7 @@
 .overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.45);
+  background: var(--dsw-alias-bg-mask-1);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -24,7 +24,7 @@
   background: var(--aion-bg-base);
   border: 1px solid var(--aion-border-base);
   border-radius: 10px;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
+  box-shadow: var(--dsw-shadow-lv3);
   overflow: hidden;
   font-family: var(--aion-font-sans);
   color: var(--aion-text-primary);
@@ -158,11 +158,11 @@
 }
 
 .rowSelected {
-  background: rgba(22, 93, 255, 0.12);
+  background: color-mix(in srgb, var(--dsw-alias-state-business-primary) 12%, transparent);
 }
 
 .rowSelected:hover {
-  background: rgba(22, 93, 255, 0.18);
+  background: color-mix(in srgb, var(--dsw-alias-state-business-primary) 18%, transparent);
 }
 
 .chev {
@@ -220,7 +220,7 @@
   height: 16px;
   border: 1px solid var(--aion-border-base);
   border-radius: 4px;
-  color: #fff;
+  color: var(--dsw-alias-label-primary-foreground);
   flex-shrink: 0;
   background: transparent;
 }
@@ -294,7 +294,7 @@
 }
 
 .chipX:hover {
-  background: rgba(0, 0, 0, 0.12);
+  background: var(--dsw-alias-interactive-bg-hover);
   color: var(--aion-text-primary);
 }
 
@@ -325,8 +325,8 @@
   height: 32px;
   padding: 0 16px;
   border: none;
-  background: var(--aion-primary);
-  color: #fff;
+  background: var(--dsw-alias-button-primary-fill);
+  color: var(--dsw-alias-label-primary-foreground);
   border-radius: 6px;
   font-size: 13px;
   font-weight: 500;
@@ -335,7 +335,7 @@
 }
 
 .insertBtn:hover:not(:disabled) {
-  filter: brightness(1.1);
+  background: var(--dsw-alias-button-primary-hover);
 }
 
 .insertBtn:disabled {

package/src/client/styles/preview.module.css

@@ -504,25 +504,30 @@
   border-radius: 4px;
 }
 
-/* The "添加到对话" floating action over a preview selection. */
+/* The "添加到对话" floating action over a preview selection.
+ * Mirrors the official primitives Button primary variant (.sm capsule):
+ * geometry h28/r14/p10, fill = button-primary-fill, text = label-primary-foreground,
+ * hover = button-primary-hover, shadow = --dsw-shadow-lv1 (floating layer). */
 .addToChat {
   position: fixed;
   z-index: 1000;
-  padding: 6px 12px;
-  background: var(--aion-primary);
-  color: #fff;
-  border-radius: 6px;
-  font-size: 13px;
-  font-weight: 500;
-  font-family: var(--aion-font-sans);
+  display: inline-flex;
+  align-items: center;
+  height: 28px;
+  padding: 0 10px;
+  background: var(--dsw-alias-button-primary-fill);
+  color: var(--dsw-alias-label-primary-foreground);
+  border-radius: 14px;
+  font-size: 12px;
+  line-height: 18px;
   cursor: pointer;
-  box-shadow: var(--aion-overlay-shadow);
+  box-shadow: var(--dsw-shadow-lv1);
   user-select: none;
   white-space: nowrap;
 }
 
 .addToChat:hover {
-  filter: brightness(1.1);
+  background: var(--dsw-alias-button-primary-hover);
 }
 
 /* Code viewer shell: line gutter + code body in one scroll container. */