nastechai-desktop 18.1.0

package/src/app/chat/composer/inline-refs.ts

@@ -0,0 +1,138 @@
+import { formatRefValue } from '@/components/assistant-ui/directive-text'
+import { contextPath } from '@/lib/chat-runtime'
+
+import type { DroppedFile } from '../hooks/use-composer-actions'
+
+import { composerPlainText, escapeHtml, placeCaretEnd, refChipHtml } from './rich-editor'
+
+/** A chip to insert: a raw `@kind:value` string, or a typed value + display label. */
+export type InlineRefInput = string | { kind: string; label?: string; value: string }
+
+/** MIME for an in-app session drag (sidebar row → composer). */
+export const NASTECH_SESSION_MIME = 'application/x-NASTECH-session'
+
+export interface SessionDragPayload {
+  id: string
+  profile: string
+  title: string
+}
+
+export function writeSessionDrag(transfer: DataTransfer, payload: SessionDragPayload) {
+  transfer.setData(NASTECH_SESSION_MIME, JSON.stringify(payload))
+  transfer.effectAllowed = 'copy'
+}
+
+export function dragHasSession(transfer: DataTransfer | null) {
+  return Boolean(transfer) && Array.from(transfer!.types || []).includes(NASTECH_SESSION_MIME)
+}
+
+export function readSessionDrag(transfer: DataTransfer | null): null | SessionDragPayload {
+  const raw = transfer?.getData(NASTECH_SESSION_MIME)
+
+  if (!raw) {
+    return null
+  }
+
+  try {
+    const parsed = JSON.parse(raw) as Partial<SessionDragPayload>
+
+    return parsed.id ? { id: parsed.id, profile: parsed.profile || 'default', title: parsed.title || '' } : null
+  } catch {
+    return null
+  }
+}
+
+/** Build a `@session:<profile>/<id>` chip. Value carries the metadata the agent
+ * needs to resolve the link (session_search); label shows the friendly title. */
+export function sessionInlineRef({ id, profile, title }: SessionDragPayload): InlineRefInput {
+  return { kind: 'session', label: title || `chat ${id.slice(0, 8)}`, value: `${profile || 'default'}/${id}` }
+}
+
+export function dragHasAttachments(transfer: DataTransfer | null, pathsMime: string) {
+  if (!transfer) {
+    return false
+  }
+
+  if (Array.from(transfer.types || []).includes(pathsMime)) {
+    return true
+  }
+
+  if (Array.from(transfer.types || []).includes('Files')) {
+    return true
+  }
+
+  return Array.from(transfer.items || []).some(item => item.kind === 'file')
+}
+
+export function droppedFileInlineRef(candidate: DroppedFile, cwd: string | null | undefined) {
+  if (!candidate.path) {
+    return null
+  }
+
+  const rel = contextPath(candidate.path, cwd || '')
+
+  if (candidate.line) {
+    const { line, lineEnd } = candidate
+    const range = lineEnd && lineEnd > line ? `${line}-${lineEnd}` : `${line}`
+
+    return `@line:${formatRefValue(`${rel}:${range}`)}`
+  }
+
+  const kind = candidate.isDirectory ? 'folder' : 'file'
+
+  return `@${kind}:${formatRefValue(rel)}`
+}
+
+export function insertInlineRefsIntoEditor(editor: HTMLDivElement, refs: readonly InlineRefInput[]) {
+  if (!refs.length) {
+    return null
+  }
+
+  const refsHtml = refs
+    .map(ref => {
+      if (typeof ref !== 'string') {
+        return refChipHtml(ref.kind, ref.value, ref.label)
+      }
+
+      const match = ref.match(/^@([^:]+):(.+)$/)
+
+      return match ? refChipHtml(match[1], match[2]) : escapeHtml(ref)
+    })
+    .join(' ')
+
+  const selection = window.getSelection()
+
+  const range =
+    selection?.rangeCount && editor.contains(selection.getRangeAt(0).commonAncestorContainer)
+      ? selection.getRangeAt(0)
+      : null
+
+  editor.focus({ preventScroll: true })
+
+  if (range) {
+    const beforeRange = range.cloneRange()
+    beforeRange.selectNodeContents(editor)
+    beforeRange.setEnd(range.startContainer, range.startOffset)
+    const beforeContainer = document.createElement('div')
+    beforeContainer.appendChild(beforeRange.cloneContents())
+
+    const afterRange = range.cloneRange()
+    afterRange.selectNodeContents(editor)
+    afterRange.setStart(range.endContainer, range.endOffset)
+    const afterContainer = document.createElement('div')
+    afterContainer.appendChild(afterRange.cloneContents())
+
+    const beforeText = composerPlainText(beforeContainer)
+    const afterText = composerPlainText(afterContainer)
+    const needsBeforeSpace = beforeText.length > 0 && !/\s$/.test(beforeText)
+    const needsAfterSpace = afterText.length === 0 || !/^\s/.test(afterText)
+
+    document.execCommand('insertHTML', false, `${needsBeforeSpace ? ' ' : ''}${refsHtml}${needsAfterSpace ? ' ' : ''}`)
+  } else {
+    const current = composerPlainText(editor)
+    placeCaretEnd(editor)
+    document.execCommand('insertHTML', false, `${current && !/\s$/.test(current) ? ' ' : ''}${refsHtml} `)
+  }
+
+  return composerPlainText(editor)
+}

package/src/app/chat/composer/model-pill.tsx

@@ -0,0 +1,86 @@
+import { useStore } from '@nanostores/react'
+import { useState } from 'react'
+
+import { ModelMenuCloseContext } from '@/app/shell/model-menu-panel'
+import { Button } from '@/components/ui/button'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
+import { GlyphSpinner } from '@/components/ui/glyph-spinner'
+import { useI18n } from '@/i18n'
+import { ChevronDown } from '@/lib/icons'
+import { formatModelStatusLabel } from '@/lib/model-status-label'
+import { cn } from '@/lib/utils'
+import {
+  $currentFastMode,
+  $currentModel,
+  $currentProvider,
+  $currentReasoningEffort,
+  setModelPickerOpen
+} from '@/store/session'
+
+import type { ChatBarState } from './types'
+
+const PILL = cn(
+  'h-(--composer-control-size) max-w-40 shrink-0 gap-1 rounded-md px-2 text-xs font-normal',
+  'text-(--ui-text-tertiary) hover:bg-(--chrome-action-hover) hover:text-foreground'
+)
+
+/**
+ * Composer model selector — the relocated status-bar pill. Reuses the live
+ * `model.options` dropdown (`modelMenuContent`) verbatim; falls back to the
+ * full picker when the gateway is closed and no live menu exists.
+ */
+export function ModelPill({ disabled, model }: { disabled: boolean; model: ChatBarState['model'] }) {
+  const copy = useI18n().t.shell.statusbar
+  const currentModel = useStore($currentModel)
+  const currentProvider = useStore($currentProvider)
+  const fastMode = useStore($currentFastMode)
+  const reasoningEffort = useStore($currentReasoningEffort)
+  const [open, setOpen] = useState(false)
+
+  // The model resolves a beat after the gateway/session comes up. Rather than
+  // flash a literal "No model", show a quiet loader (inherits the pill text
+  // color at half opacity) until a model lands.
+  const label = (
+    <>
+      {currentModel.trim() ? (
+        <span className="truncate">{formatModelStatusLabel(currentModel, { fastMode, reasoningEffort })}</span>
+      ) : (
+        <GlyphSpinner className="opacity-50" spinner="braille" />
+      )}
+      <ChevronDown className="size-2.5 shrink-0 opacity-50" />
+    </>
+  )
+
+  const title = currentProvider ? copy.modelTitle(currentProvider, currentModel || copy.modelNone) : copy.switchModel
+
+  if (!model.modelMenuContent) {
+    return (
+      <Button
+        aria-label={copy.openModelPicker}
+        className={PILL}
+        disabled={disabled}
+        onClick={() => setModelPickerOpen(true)}
+        title={copy.openModelPicker}
+        type="button"
+        variant="ghost"
+      >
+        {label}
+      </Button>
+    )
+  }
+
+  return (
+    <DropdownMenu onOpenChange={setOpen} open={open}>
+      <DropdownMenuTrigger asChild>
+        <Button aria-label={title} className={PILL} disabled={disabled} title={title} type="button" variant="ghost">
+          {label}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-64 p-0" side="top" sideOffset={8}>
+        <ModelMenuCloseContext.Provider value={() => setOpen(false)}>
+          {model.modelMenuContent}
+        </ModelMenuCloseContext.Provider>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/src/app/chat/composer/queue-panel.tsx

@@ -0,0 +1,130 @@
+import { useState } from 'react'
+
+import { Button } from '@/components/ui/button'
+import { DisclosureCaret } from '@/components/ui/disclosure-caret'
+import { Tip } from '@/components/ui/tooltip'
+import { type Translations, useI18n } from '@/i18n'
+import { ArrowUp, Pencil, Trash2 } from '@/lib/icons'
+import { cn } from '@/lib/utils'
+import type { QueuedPromptEntry } from '@/store/composer-queue'
+
+interface QueuePanelProps {
+  busy: boolean
+  editingId: null | string
+  entries: QueuedPromptEntry[]
+  onDelete: (id: string) => void
+  onEdit: (entry: QueuedPromptEntry) => void
+  onSendNow: (id: string) => void
+}
+
+const entryPreview = (entry: QueuedPromptEntry, c: Translations['composer']) =>
+  entry.text.trim() || (entry.attachments.length > 0 ? c.attachmentOnly : c.emptyTurn)
+
+export function QueuePanel({ busy, editingId, entries, onDelete, onEdit, onSendNow }: QueuePanelProps) {
+  const { t } = useI18n()
+  const c = t.composer
+  const [collapsed, setCollapsed] = useState(true)
+
+  if (entries.length === 0) {
+    return null
+  }
+
+  return (
+    <div className="rounded-t-2xl border border-b-0 border-border/65 bg-[color-mix(in_srgb,var(--dt-card)_70%,transparent)] pt-0.5 pb-1 mx-1">
+      <button
+        className="flex w-full items-center gap-1.5 px-2 text-left text-[0.6rem] font-medium text-muted-foreground/92 transition-colors hover:text-foreground/90"
+        onClick={() => setCollapsed(open => !open)}
+        type="button"
+      >
+        <DisclosureCaret className="shrink-0" open={!collapsed} size="1em" />
+        <span className="truncate">{c.queued(entries.length)}</span>
+      </button>
+
+      {!collapsed && (
+        <div className="space-y-0.5 px-1 pb-0.5">
+          {entries.map(entry => {
+            const isEditing = editingId === entry.id
+            const attachmentsCount = entry.attachments.length
+            const sendLabel = busy ? c.sendQueuedNext : c.sendQueuedNow
+
+            return (
+              <div
+                className={cn(
+                  'group/queue-row flex items-center gap-1.5 rounded-lg border border-transparent px-1.5 py-0.5',
+                  'transition-colors duration-300 ease-out hover:bg-(--chrome-action-hover) hover:transition-none',
+                  isEditing && 'border-[color-mix(in_srgb,var(--dt-composer-ring)_40%,transparent)] bg-accent/25'
+                )}
+                key={entry.id}
+              >
+                <span
+                  aria-hidden
+                  className="h-3.5 w-3.5 shrink-0 rounded-full border border-foreground/35 bg-transparent"
+                />
+                <div className="min-w-0 flex-1">
+                  <p className="truncate text-[0.73rem] leading-4 text-foreground/92">{entryPreview(entry, c)}</p>
+                  {(attachmentsCount > 0 || isEditing) && (
+                    <div className="mt-0.5 flex items-center gap-1.5 text-[0.64rem] text-muted-foreground/75">
+                      {attachmentsCount > 0 && <span>{c.attachments(attachmentsCount)}</span>}
+                      {isEditing && (
+                        <span className="text-[color-mix(in_srgb,var(--dt-composer-ring)_78%,var(--muted-foreground))]">
+                          {c.editingInComposer}
+                        </span>
+                      )}
+                    </div>
+                  )}
+                </div>
+                <div
+                  className={cn(
+                    'flex shrink-0 items-center gap-0 transition-opacity',
+                    isEditing
+                      ? 'opacity-100'
+                      : 'opacity-0 group-hover/queue-row:opacity-100 group-focus-within/queue-row:opacity-100'
+                  )}
+                >
+                  <Tip label={c.editQueued}>
+                    <Button
+                      aria-label={c.editQueued}
+                      className="h-5 w-5 rounded-md"
+                      disabled={Boolean(editingId) && !isEditing}
+                      onClick={() => onEdit(entry)}
+                      size="icon-xs"
+                      type="button"
+                      variant="ghost"
+                    >
+                      <Pencil size={11} />
+                    </Button>
+                  </Tip>
+                  <Tip label={sendLabel}>
+                    <Button
+                      aria-label={sendLabel}
+                      className="h-5 w-5 rounded-md"
+                      disabled={isEditing}
+                      onClick={() => onSendNow(entry.id)}
+                      size="icon-xs"
+                      type="button"
+                      variant="ghost"
+                    >
+                      <ArrowUp size={11} />
+                    </Button>
+                  </Tip>
+                  <Tip label={c.deleteQueued}>
+                    <Button
+                      aria-label={c.deleteQueued}
+                      className="h-5 w-5 rounded-md"
+                      onClick={() => onDelete(entry.id)}
+                      size="icon-xs"
+                      type="button"
+                      variant="ghost"
+                    >
+                      <Trash2 size={11} />
+                    </Button>
+                  </Tip>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/app/chat/composer/rich-editor.test.ts

@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'vitest'
+
+import { composerPlainText, renderComposerContents, RICH_INPUT_SLOT } from './rich-editor'
+
+describe('renderComposerContents', () => {
+  it('renders refs and raw text without interpreting user text as HTML', () => {
+    const editor = document.createElement('div')
+    editor.dataset.slot = RICH_INPUT_SLOT
+
+    renderComposerContents(editor, '@file:`<img src=x onerror=alert(1)>` <b>raw</b>')
+
+    expect(editor.querySelector('img')).toBeNull()
+    expect(editor.querySelector('b')).toBeNull()
+    expect(editor.textContent).toContain('<img src=x onerror=alert(1)>')
+    expect(editor.textContent).toContain('<b>raw</b>')
+    expect(composerPlainText(editor)).toBe('@file:`<img src=x onerror=alert(1)>` <b>raw</b>')
+  })
+})

package/src/app/chat/composer/rich-editor.ts

@@ -0,0 +1,165 @@
+/**
+ * Helpers for the contenteditable composer surface: serialize refs to chip
+ * HTML, walk the DOM back to plain `@kind:value` text, and place the caret.
+ *
+ * Chip values are always wrapped in backticks/quotes so REF_RE stops at the
+ * fence — without that, typing after a chip would get re-absorbed on the next
+ * plain-text round-trip.
+ */
+import {
+  DIRECTIVE_CHIP_CLASS,
+  directiveIconElement,
+  directiveIconSvg,
+  formatRefValue
+} from '@/components/assistant-ui/directive-text'
+
+export const RICH_INPUT_SLOT = 'composer-rich-input'
+
+export const REF_RE = /@(file|folder|url|image|tool|line|terminal|session):(`[^`\n]+`|"[^"\n]+"|'[^'\n]+'|\S+)/g
+
+const ESC: Record<string, string> = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' }
+
+export function escapeHtml(value: string) {
+  return value.replace(/[&<>"']/g, ch => ESC[ch] || ch)
+}
+
+export function unquoteRef(raw: string) {
+  const head = raw[0]
+  const tail = raw[raw.length - 1]
+  const quoted = (head === '`' && tail === '`') || (head === '"' && tail === '"') || (head === "'" && tail === "'")
+
+  return quoted ? raw.slice(1, -1) : raw.replace(/[,.;!?]+$/, '')
+}
+
+export function refLabel(id: string) {
+  return id.split(/[\\/]/).filter(Boolean).pop() || id
+}
+
+/** Always-quote variant of formatRefValue — chips need a fence even for safe values. */
+export function quoteRefValue(value: string) {
+  if (!value.includes('`')) {
+    return `\`${value}\``
+  }
+
+  if (!value.includes('"')) {
+    return `"${value}"`
+  }
+
+  if (!value.includes("'")) {
+    return `'${value}'`
+  }
+
+  return formatRefValue(value)
+}
+
+export function refChipHtml(kind: string, rawValue: string, displayLabel?: string) {
+  const id = unquoteRef(rawValue)
+  const text = `@${kind}:${quoteRefValue(id)}`
+
+  return `<span contenteditable="false" data-ref-text="${escapeHtml(text)}" data-ref-id="${escapeHtml(id)}" data-ref-kind="${escapeHtml(kind)}" class="${DIRECTIVE_CHIP_CLASS}">${directiveIconSvg(kind)}<span class="truncate">${escapeHtml(displayLabel || refLabel(id))}</span></span>`
+}
+
+export function refChipElement(kind: string, rawValue: string, displayLabel?: string) {
+  const id = unquoteRef(rawValue)
+  const text = `@${kind}:${quoteRefValue(id)}`
+  const chip = document.createElement('span')
+  const label = document.createElement('span')
+
+  chip.contentEditable = 'false'
+  chip.dataset.refText = text
+  chip.dataset.refId = id
+  chip.dataset.refKind = kind
+  chip.className = DIRECTIVE_CHIP_CLASS
+  label.className = 'truncate'
+  label.textContent = displayLabel || refLabel(id)
+  chip.append(directiveIconElement(kind), label)
+
+  return chip
+}
+
+function appendTextWithBreaks(target: DocumentFragment | HTMLElement, text: string) {
+  const lines = text.split('\n')
+
+  lines.forEach((line, index) => {
+    if (index > 0) {
+      target.append(document.createElement('br'))
+    }
+
+    if (line) {
+      target.append(document.createTextNode(line))
+    }
+  })
+}
+
+export function appendComposerContents(target: DocumentFragment | HTMLElement, text: string) {
+  let cursor = 0
+
+  REF_RE.lastIndex = 0
+
+  for (const match of text.matchAll(REF_RE)) {
+    const index = match.index ?? 0
+    appendTextWithBreaks(target, text.slice(cursor, index))
+    target.append(refChipElement(match[1] || 'file', match[2] || ''))
+    cursor = index + match[0].length
+  }
+
+  appendTextWithBreaks(target, text.slice(cursor))
+}
+
+export function renderComposerContents(target: HTMLElement, text: string) {
+  target.replaceChildren()
+  appendComposerContents(target, text)
+}
+
+/** Serialize a draft string into chip-HTML for the contenteditable surface. */
+export function composerHtml(text: string) {
+  let cursor = 0
+  let html = ''
+
+  REF_RE.lastIndex = 0
+
+  for (const match of text.matchAll(REF_RE)) {
+    const index = match.index ?? 0
+    html += escapeHtml(text.slice(cursor, index)).replace(/\n/g, '<br>')
+    html += refChipHtml(match[1] || 'file', match[2] || '')
+    cursor = index + match[0].length
+  }
+
+  return html + escapeHtml(text.slice(cursor)).replace(/\n/g, '<br>')
+}
+
+/** Walk a DOM subtree back to the plain `@kind:value` text it represents. */
+export function composerPlainText(node: Node): string {
+  if (node.nodeType === Node.TEXT_NODE) {
+    return node.textContent || ''
+  }
+
+  if (node.nodeType !== Node.ELEMENT_NODE) {
+    return ''
+  }
+
+  const el = node as HTMLElement
+
+  if (el.dataset.refText) {
+    return el.dataset.refText
+  }
+
+  if (el.tagName === 'BR') {
+    return '\n'
+  }
+
+  const text = Array.from(node.childNodes).map(composerPlainText).join('')
+  const block = el.tagName === 'DIV' || el.tagName === 'P'
+
+  return block && text && el.dataset.slot !== RICH_INPUT_SLOT ? `${text}\n` : text
+}
+
+export function placeCaretEnd(element: HTMLElement) {
+  const range = document.createRange()
+  const selection = window.getSelection()
+
+  range.selectNodeContents(element)
+  range.collapse(false)
+  selection?.removeAllRanges()
+  selection?.addRange(range)
+}

package/src/app/chat/composer/skin-slash-popover.tsx

@@ -0,0 +1,61 @@
+import { useI18n } from '@/i18n'
+import { desktopSkinSlashCompletions } from '@/lib/desktop-slash-commands'
+import { triggerHaptic } from '@/lib/haptics'
+import { useTheme } from '@/themes/context'
+
+import { COMPLETION_DRAWER_CLASS, COMPLETION_DRAWER_ROW_CLASS, CompletionDrawerEmpty } from './completion-drawer'
+
+interface SkinSlashPopoverProps {
+  draft: string
+  onSelect: (command: string) => void
+}
+
+export function SkinSlashPopover({ draft, onSelect }: SkinSlashPopoverProps) {
+  const { t } = useI18n()
+  const c = t.composer
+  const { availableThemes, themeName } = useTheme()
+  const match = draft.match(/^\/skin\s+(\S*)$/i)
+
+  if (!match) {
+    return null
+  }
+
+  const items = desktopSkinSlashCompletions(availableThemes, themeName, match[1] ?? '')
+
+  return (
+    <div
+      aria-label={c.themeSuggestions}
+      className={COMPLETION_DRAWER_CLASS}
+      data-slot="composer-skin-completion-drawer"
+      data-state="open"
+      role="listbox"
+    >
+      <div className="grid gap-0.5 pt-0.5">
+        {items.length === 0 ? (
+          <CompletionDrawerEmpty title={c.noMatchingThemes}>
+            {c.themeTryPre}
+            <span className="font-mono text-foreground/80">/skin list</span>
+            {c.themeTryPost}
+          </CompletionDrawerEmpty>
+        ) : (
+          items.map(item => (
+            <button
+              className={COMPLETION_DRAWER_ROW_CLASS}
+              key={item.text}
+              onClick={() => {
+                triggerHaptic('selection')
+                onSelect(item.text)
+              }}
+              onMouseDown={event => event.preventDefault()}
+              role="option"
+              type="button"
+            >
+              <span className="shrink-0 font-mono font-medium leading-5 text-foreground">{item.display}</span>
+              <span className="min-w-0 truncate leading-5 text-muted-foreground/80">{item.meta}</span>
+            </button>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}