nastechai-desktop 18.1.0

package/src/app/chat/hooks/use-composer-actions.test.ts

@@ -0,0 +1,57 @@
+import { describe, expect, it } from 'vitest'
+
+import { type DroppedFile, partitionDroppedFiles } from './use-composer-actions'
+
+// A Finder/Explorer drop carries a native File handle; an in-app drag (project
+// tree, gutter line ref) is path-only. The split decides whether a drop becomes
+// an inline @file: ref (in-app, workspace-relative, gateway-resolvable) or goes
+// through the upload pipeline (OS drop — absolute local path a remote gateway
+// can't read, plus image bytes for vision).
+const osDrop = (path: string): DroppedFile => ({ file: new File(['x'], path.split('/').pop() || 'f'), path })
+const inAppRef = (path: string, extra: Partial<DroppedFile> = {}): DroppedFile => ({ path, ...extra })
+
+describe('partitionDroppedFiles', () => {
+  it('routes File-bearing OS drops to osDrops and path-only in-app drags to inAppRefs', () => {
+    const finderPdf = osDrop('/Users/mahmoud/Downloads/DEVIS_signed.pdf')
+    const projectFile = inAppRef('src/index.ts')
+
+    const { inAppRefs, osDrops } = partitionDroppedFiles([finderPdf, projectFile])
+
+    expect(osDrops).toEqual([finderPdf])
+    expect(inAppRefs).toEqual([projectFile])
+  })
+
+  it('treats an OS screenshot drop as an upload target (so it gets byte upload + vision)', () => {
+    const screenshot = osDrop('/var/folders/tmp/Screenshot 2026-06-09.png')
+
+    const { inAppRefs, osDrops } = partitionDroppedFiles([screenshot])
+
+    expect(osDrops).toEqual([screenshot])
+    expect(inAppRefs).toEqual([])
+  })
+
+  it('keeps gutter line-range drags inline (no File handle)', () => {
+    const lineRef = inAppRef('src/app.ts', { line: 10, lineEnd: 20 })
+
+    const { inAppRefs, osDrops } = partitionDroppedFiles([lineRef])
+
+    expect(osDrops).toEqual([])
+    expect(inAppRefs).toEqual([lineRef])
+  })
+
+  it('splits a mixed drop and preserves order within each group', () => {
+    const a = inAppRef('a.ts')
+    const b = osDrop('/abs/b.pdf')
+    const c = inAppRef('c.ts')
+    const d = osDrop('/abs/d.png')
+
+    const { inAppRefs, osDrops } = partitionDroppedFiles([a, b, c, d])
+
+    expect(inAppRefs).toEqual([a, c])
+    expect(osDrops).toEqual([b, d])
+  })
+
+  it('returns empty groups for an empty drop', () => {
+    expect(partitionDroppedFiles([])).toEqual({ inAppRefs: [], osDrops: [] })
+  })
+})

package/src/app/chat/hooks/use-composer-actions.ts

@@ -0,0 +1,525 @@
+import { useCallback } from 'react'
+
+import { requestComposerFocus, requestComposerInsert } from '@/app/chat/composer/focus'
+import { formatRefValue } from '@/components/assistant-ui/directive-text'
+import { useI18n } from '@/i18n'
+import { attachmentId, contextPath, pathLabel } from '@/lib/chat-runtime'
+import {
+  addComposerAttachment,
+  type ComposerAttachment,
+  removeComposerAttachment,
+  setComposerTerminalSelection
+} from '@/store/composer'
+import { notify, notifyError } from '@/store/notifications'
+
+import type { ImageDetachResponse } from '../../types'
+
+const IMAGE_EXTENSION_PATTERN = /\.(png|jpe?g|gif|webp|bmp|tiff?|svg|ico)$/i
+
+const BLOB_MIME_EXTENSION: Record<string, string> = {
+  'image/bmp': '.bmp',
+  'image/gif': '.gif',
+  'image/jpeg': '.jpg',
+  'image/png': '.png',
+  'image/svg+xml': '.svg',
+  'image/tiff': '.tiff',
+  'image/webp': '.webp',
+  'image/x-icon': '.ico'
+}
+
+function blobExtension(blob: Blob): string {
+  const mime = blob.type.split(';')[0]?.trim().toLowerCase()
+
+  return (mime && BLOB_MIME_EXTENSION[mime]) || '.png'
+}
+
+function isImagePath(filePath: string): boolean {
+  return IMAGE_EXTENSION_PATTERN.test(filePath)
+}
+
+export interface DroppedFile {
+  /** Browser-native File handle. Absent for in-app drags (e.g. project tree). */
+  file?: File
+  /** Absolute filesystem path. Empty when an OS drop didn't carry one. */
+  path: string
+  /** True if the entry is a directory. Currently only set by in-app drags. */
+  isDirectory?: boolean
+  /** First line number for in-app line-ref drags (source view gutter). */
+  line?: number
+  /** Last line number for line-range drags (`line..lineEnd` inclusive). */
+  lineEnd?: number
+}
+
+/** MIME emitted by in-app drag sources (project tree, gutter line numbers).
+ * Payload is JSON `{ path; isDirectory?; line?; lineEnd? }[]`. */
+export const NASTECH_PATHS_MIME = 'application/x-NASTECH-paths'
+
+/**
+ * Eagerly resolve files from a drop event into [File?, path, isDirectory?]
+ * triples. Internal NasTech sources (e.g. the project tree) ride on a custom
+ * MIME and produce path-only entries; OS drops produce File-bearing entries.
+ *
+ * Must be called synchronously from inside the drop handler — `DataTransfer`
+ * items are detached as soon as the handler returns, and `webUtils.getPathForFile`
+ * also requires the original (non-cloned) File reference.
+ */
+export function extractDroppedFiles(transfer: DataTransfer): DroppedFile[] {
+  const result: DroppedFile[] = []
+  const seenPaths = new Set<string>()
+  const seenFiles = new Set<File>()
+  const getPath = window.NASTECHDesktop?.getPathForFile
+
+  // In-app drags first — they carry richer metadata (isDirectory) than the
+  // File-based fallback can provide, and produce no overlapping native files.
+  try {
+    const internalRaw = transfer.getData(NASTECH_PATHS_MIME)
+
+    if (internalRaw) {
+      const parsed = JSON.parse(internalRaw) as {
+        path?: unknown
+        isDirectory?: unknown
+        line?: unknown
+        lineEnd?: unknown
+      }[]
+
+      const positiveInt = (value: unknown) => (typeof value === 'number' && value > 0 ? Math.floor(value) : undefined)
+
+      for (const entry of parsed) {
+        if (!entry || typeof entry.path !== 'string' || !entry.path) {
+          continue
+        }
+
+        const line = positiveInt(entry.line)
+        const rawEnd = positiveInt(entry.lineEnd)
+        const lineEnd = line && rawEnd && rawEnd > line ? rawEnd : undefined
+        const dedupKey = line ? `${entry.path}:${line}-${lineEnd ?? line}` : entry.path
+
+        if (seenPaths.has(dedupKey)) {
+          continue
+        }
+
+        seenPaths.add(dedupKey)
+        result.push({ isDirectory: entry.isDirectory === true, line, lineEnd, path: entry.path })
+      }
+    }
+  } catch {
+    // Malformed payload — fall through to native files.
+  }
+
+  const fileList = transfer.files
+
+  if (fileList) {
+    for (let i = 0; i < fileList.length; i += 1) {
+      const file = fileList.item(i)
+
+      if (!file || seenFiles.has(file)) {
+        continue
+      }
+
+      seenFiles.add(file)
+      let path = ''
+
+      if (getPath) {
+        try {
+          path = getPath(file) || ''
+        } catch {
+          path = ''
+        }
+      }
+
+      if (path && seenPaths.has(path)) {
+        continue
+      }
+
+      if (path) {
+        seenPaths.add(path)
+      }
+
+      result.push({ file, path })
+    }
+  }
+
+  const items = transfer.items
+
+  if (items) {
+    for (let i = 0; i < items.length; i += 1) {
+      const item = items[i]
+
+      if (!item || item.kind !== 'file') {
+        continue
+      }
+
+      const file = item.getAsFile()
+
+      if (!file || seenFiles.has(file)) {
+        continue
+      }
+
+      seenFiles.add(file)
+      let path = ''
+
+      if (getPath) {
+        try {
+          path = getPath(file) || ''
+        } catch {
+          path = ''
+        }
+      }
+
+      if (path && seenPaths.has(path)) {
+        continue
+      }
+
+      if (path) {
+        seenPaths.add(path)
+      }
+
+      result.push({ file, path })
+    }
+  }
+
+  return result
+}
+
+interface ComposerActionsOptions {
+  activeSessionId: string | null
+  currentCwd: string
+  requestGateway: <T>(method: string, params?: Record<string, unknown>) => Promise<T>
+}
+
+/** Add to the main composer and focus it. All sidebar/picker/drop attach paths funnel through here. */
+const attachToMain = (attachment: ComposerAttachment) => {
+  addComposerAttachment(attachment)
+  requestComposerFocus('main')
+}
+
+export function useComposerActions({ activeSessionId, currentCwd, requestGateway }: ComposerActionsOptions) {
+  const { t } = useI18n()
+  const copy = t.desktop
+  const addTextToDraft = useCallback((text: string) => {
+    requestComposerInsert(text, { mode: 'block' })
+  }, [copy.imagePreviewFailed])
+
+  const addTerminalSelectionAttachment = useCallback((text: string, label = 'selection') => {
+    const trimmed = text.trim()
+    const normalizedLabel = label.trim() || 'selection'
+    const refText = `@terminal:${formatRefValue(normalizedLabel)}`
+
+    if (!trimmed) {
+      return
+    }
+
+    setComposerTerminalSelection(normalizedLabel, trimmed)
+    requestComposerInsert(refText, { mode: 'inline' })
+  }, [])
+
+  const addContextRefAttachment = useCallback((refText: string, label?: string, detail?: string) => {
+    const kind: ComposerAttachment['kind'] = refText.startsWith('@folder:')
+      ? 'folder'
+      : refText.startsWith('@url:')
+        ? 'url'
+        : 'file'
+
+    attachToMain({
+      id: attachmentId(kind, refText),
+      kind,
+      label: label || refText.replace(/^@(file|folder|url):/, ''),
+      detail,
+      refText
+    })
+  }, [])
+
+  const pickContextPaths = useCallback(
+    async (kind: 'file' | 'folder') => {
+      const paths = await window.NASTECHDesktop?.selectPaths({
+        title: kind === 'file' ? 'Add files as context' : 'Add folders as context',
+        defaultPath: currentCwd || undefined,
+        directories: kind === 'folder'
+      })
+
+      if (!paths?.length) {
+        return
+      }
+
+      for (const path of paths) {
+        const rel = contextPath(path, currentCwd)
+
+        attachToMain({
+          id: attachmentId(kind, rel),
+          kind,
+          label: pathLabel(path),
+          detail: rel,
+          refText: `@${kind}:${formatRefValue(rel)}`,
+          path
+        })
+      }
+    },
+    [currentCwd]
+  )
+
+  const attachContextFilePath = useCallback(
+    (filePath: string) => {
+      if (!filePath) {
+        return false
+      }
+
+      const rel = contextPath(filePath, currentCwd)
+
+      attachToMain({
+        id: attachmentId('file', rel),
+        kind: 'file',
+        label: pathLabel(filePath),
+        detail: rel,
+        refText: `@file:${formatRefValue(rel)}`,
+        path: filePath
+      })
+
+      return true
+    },
+    [currentCwd]
+  )
+
+  const attachImagePath = useCallback(async (filePath: string) => {
+    if (!filePath) {
+      return false
+    }
+
+    const baseAttachment: ComposerAttachment = {
+      id: attachmentId('image', filePath),
+      kind: 'image',
+      label: pathLabel(filePath),
+      detail: filePath,
+      path: filePath
+    }
+
+    attachToMain(baseAttachment)
+
+    try {
+      const previewUrl = await window.NASTECHDesktop?.readFileDataUrl(filePath)
+
+      if (previewUrl) {
+        addComposerAttachment({ ...baseAttachment, previewUrl })
+      }
+
+      return true
+    } catch (err) {
+      notifyError(err, copy.imagePreviewFailed)
+
+      return true
+    }
+  }, [])
+
+  const attachImageBlob = useCallback(
+    async (blob: Blob) => {
+      if (blob.size === 0) {
+        return false
+      }
+
+      if (blob.type && !blob.type.startsWith('image/')) {
+        return false
+      }
+
+      try {
+        const buffer = await blob.arrayBuffer()
+        const data = new Uint8Array(buffer)
+        const savedPath = await window.NASTECHDesktop?.saveImageBuffer(data, blobExtension(blob))
+
+        if (!savedPath) {
+          notify({ kind: 'error', title: copy.imageAttach, message: copy.imageWriteFailed })
+
+          return false
+        }
+
+        return attachImagePath(savedPath)
+      } catch (err) {
+        notifyError(err, copy.imageAttachFailed)
+
+        return false
+      }
+    },
+    [attachImagePath, copy.imageAttach, copy.imageAttachFailed, copy.imageWriteFailed]
+  )
+
+  const pickImages = useCallback(async () => {
+    const paths = await window.NASTECHDesktop?.selectPaths({
+      title: copy.attachImages,
+      defaultPath: currentCwd || undefined,
+      filters: [
+        {
+          name: t.composer.images,
+          extensions: ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp', 'tiff']
+        }
+      ]
+    })
+
+    if (!paths?.length) {
+      return
+    }
+
+    for (const path of paths) {
+      await attachImagePath(path)
+    }
+  }, [attachImagePath, copy.attachImages, currentCwd, t.composer.images])
+
+  const pasteClipboardImage = useCallback(async () => {
+    try {
+      const path = await window.NASTECHDesktop?.saveClipboardImage()
+
+      if (!path) {
+        notify({
+          kind: 'warning',
+          title: copy.clipboard,
+          message: copy.noClipboardImage
+        })
+
+        return
+      }
+
+      await attachImagePath(path)
+    } catch (err) {
+      notifyError(err, copy.clipboardPasteFailed)
+    }
+  }, [attachImagePath, copy.clipboard, copy.clipboardPasteFailed, copy.noClipboardImage])
+
+  const attachContextFolderPath = useCallback(
+    (folderPath: string) => {
+      if (!folderPath) {
+        return false
+      }
+
+      const rel = contextPath(folderPath, currentCwd)
+
+      attachToMain({
+        id: attachmentId('folder', rel),
+        kind: 'folder',
+        label: pathLabel(folderPath),
+        detail: rel,
+        refText: `@folder:${formatRefValue(rel)}`,
+        path: folderPath
+      })
+
+      return true
+    },
+    [currentCwd]
+  )
+
+  const attachDroppedItems = useCallback(
+    async (candidates: DroppedFile[]) => {
+      if (candidates.length === 0) {
+        return false
+      }
+
+      let attached = false
+      let lastFailure: string | null = null
+
+      for (const candidate of candidates) {
+        const { file, isDirectory, path: knownPath } = candidate
+
+        // Path-only entry (in-app drag from the file browser tree, etc.).
+        if (!file) {
+          if (isDirectory) {
+            if (knownPath && attachContextFolderPath(knownPath)) {
+              attached = true
+
+              continue
+            }
+
+            lastFailure = `Could not attach folder ${knownPath || ''}`
+
+            continue
+          }
+
+          if (knownPath && isImagePath(knownPath)) {
+            if (await attachImagePath(knownPath)) {
+              attached = true
+
+              continue
+            }
+
+            lastFailure = `Could not attach ${knownPath}`
+
+            continue
+          }
+
+          if (knownPath && attachContextFilePath(knownPath)) {
+            attached = true
+
+            continue
+          }
+
+          lastFailure = `Could not attach ${knownPath || 'file'}`
+
+          continue
+        }
+
+        const fallbackPath =
+          !knownPath && window.NASTECHDesktop?.getPathForFile ? window.NASTECHDesktop.getPathForFile(file) : ''
+
+        const filePath = knownPath || fallbackPath || ''
+        const isImage = file.type.startsWith('image/') || isImagePath(file.name) || (filePath && isImagePath(filePath))
+
+        if (isImage) {
+          if ((filePath && (await attachImagePath(filePath))) || (await attachImageBlob(file))) {
+            attached = true
+
+            continue
+          }
+
+          lastFailure = `Could not attach ${file.name || 'image'}`
+
+          continue
+        }
+
+        if (filePath && attachContextFilePath(filePath)) {
+          attached = true
+
+          continue
+        }
+
+        lastFailure = `Could not attach ${file.name || 'file'}`
+      }
+
+      if (!attached && lastFailure) {
+        notify({ kind: 'warning', title: copy.dropFiles, message: lastFailure })
+      }
+
+      return attached
+    },
+    [attachContextFilePath, attachContextFolderPath, attachImageBlob, attachImagePath, copy.dropFiles]
+  )
+
+  const removeAttachment = useCallback(
+    async (id: string) => {
+      const removed = removeComposerAttachment(id)
+
+      if (
+        removed?.kind === 'image' &&
+        removed.path &&
+        activeSessionId &&
+        removed.attachedSessionId &&
+        removed.attachedSessionId === activeSessionId
+      ) {
+        await requestGateway<ImageDetachResponse>('image.detach', {
+          session_id: activeSessionId,
+          path: removed.path
+        }).catch(() => undefined)
+      }
+    },
+    [activeSessionId, requestGateway]
+  )
+
+  return {
+    addContextRefAttachment,
+    addTerminalSelectionAttachment,
+    addTextToDraft,
+    attachContextFilePath,
+    attachContextFolderPath,
+    attachDroppedItems,
+    attachImageBlob,
+    attachImagePath,
+    pasteClipboardImage,
+    pickContextPaths,
+    pickImages,
+    removeAttachment
+  }
+}

package/src/app/chat/hooks/use-file-drop-zone.ts

@@ -0,0 +1,118 @@
+import { type DragEvent as ReactDragEvent, useCallback, useRef, useState } from 'react'
+
+import {
+  dragHasAttachments,
+  dragHasSession,
+  readSessionDrag,
+  type SessionDragPayload
+} from '@/app/chat/composer/inline-refs'
+
+import { type DroppedFile, extractDroppedFiles, NASTECH_PATHS_MIME } from './use-composer-actions'
+
+export type DragKind = 'files' | 'session' | null
+
+const dragKindOf = (event: ReactDragEvent): DragKind => {
+  if (dragHasSession(event.dataTransfer)) {
+    return 'session'
+  }
+
+  if (dragHasAttachments(event.dataTransfer, NASTECH_PATHS_MIME)) {
+    return 'files'
+  }
+
+  return null
+}
+
+interface FileDropZoneOptions {
+  /** When false the zone ignores drags entirely. */
+  enabled?: boolean
+  onDropFiles: (files: DroppedFile[]) => void
+  onDropSession?: (session: SessionDragPayload) => void
+}
+
+/**
+ * "Drop anywhere in this region" affordance for files *and* in-app session
+ * links. An enter/leave depth counter keeps nested children from flickering the
+ * active state; `onDropCapture` clears it even when a nested target (the
+ * composer) handles the drop and stops propagation before our bubble-phase
+ * `onDrop` would fire.
+ *
+ * Spread `dropHandlers` onto the container; render an overlay off `dragKind`.
+ */
+export function useFileDropZone({ enabled = true, onDropFiles, onDropSession }: FileDropZoneOptions) {
+  const [dragKind, setDragKind] = useState<DragKind>(null)
+  const depth = useRef(0)
+
+  const reset = useCallback(() => {
+    depth.current = 0
+    setDragKind(null)
+  }, [])
+
+  const onDragEnter = useCallback(
+    (event: ReactDragEvent) => {
+      const kind = enabled ? dragKindOf(event) : null
+
+      if (!kind) {
+        return
+      }
+
+      event.preventDefault()
+      depth.current += 1
+      setDragKind(kind)
+    },
+    [enabled]
+  )
+
+  const onDragOver = useCallback(
+    (event: ReactDragEvent) => {
+      if (!enabled || !dragKindOf(event)) {
+        return
+      }
+
+      event.preventDefault()
+      event.dataTransfer.dropEffect = 'copy'
+    },
+    [enabled]
+  )
+
+  const onDragLeave = useCallback(() => {
+    if (enabled && --depth.current <= 0) {
+      reset()
+    }
+  }, [enabled, reset])
+
+  const onDrop = useCallback(
+    (event: ReactDragEvent) => {
+      const kind = enabled ? dragKindOf(event) : null
+
+      if (!kind) {
+        return
+      }
+
+      event.preventDefault()
+      reset()
+
+      if (kind === 'session') {
+        const session = readSessionDrag(event.dataTransfer)
+
+        if (session) {
+          onDropSession?.(session)
+        }
+
+        return
+      }
+
+      const files = extractDroppedFiles(event.dataTransfer)
+
+      if (files.length) {
+        onDropFiles(files)
+      }
+    },
+    [enabled, onDropFiles, onDropSession, reset]
+  )
+
+  return {
+    dragKind,
+    dropHandlers: { onDragEnter, onDragLeave, onDragOver, onDrop, onDropCapture: reset }
+  }
+}