nastechai-desktop 18.1.0

package/src/app/chat/composer/controls.tsx

@@ -0,0 +1,289 @@
+import { Button } from '@/components/ui/button'
+import { Codicon } from '@/components/ui/codicon'
+import { Tip } from '@/components/ui/tooltip'
+import { useI18n } from '@/i18n'
+import { triggerHaptic } from '@/lib/haptics'
+import { AudioLines, Layers3, Loader2, Square, SteeringWheel } from '@/lib/icons'
+import { cn } from '@/lib/utils'
+
+import type { ConversationStatus } from './hooks/use-voice-conversation'
+import type { ChatBarState, VoiceStatus } from './types'
+
+export const ICON_BTN = 'size-(--composer-control-size) shrink-0 rounded-md'
+export const GHOST_ICON_BTN = cn(
+  ICON_BTN,
+  'text-(--ui-text-tertiary) hover:bg-(--chrome-action-hover) hover:text-foreground'
+)
+// Send/voice-conversation primary: solid foreground-on-background circle
+// (reads as black-on-white in light mode, white-on-black in dark mode) to
+// match the reference composer's high-contrast CTA. Keeps the pill itself
+// neutral and lets the action visually dominate the row.
+export const PRIMARY_ICON_BTN = cn(
+  'size-(--composer-control-primary-size,var(--composer-control-size)) shrink-0 rounded-full p-0',
+  'bg-foreground text-background hover:bg-foreground/90',
+  'disabled:bg-foreground/30 disabled:text-background disabled:opacity-100'
+)
+
+interface ConversationProps {
+  active: boolean
+  level: number
+  muted: boolean
+  status: ConversationStatus
+  onEnd: () => void
+  onStart: () => void
+  onStopTurn: () => void
+  onToggleMute: () => void
+}
+
+export function ComposerControls({
+  busy,
+  busyAction,
+  canSteer,
+  canSubmit,
+  conversation,
+  disabled,
+  hasComposerPayload,
+  state,
+  voiceStatus,
+  onDictate,
+  onSteer
+}: {
+  busy: boolean
+  busyAction: 'queue' | 'stop'
+  canSteer: boolean
+  canSubmit: boolean
+  conversation: ConversationProps
+  disabled: boolean
+  hasComposerPayload: boolean
+  state: ChatBarState
+  voiceStatus: VoiceStatus
+  onDictate: () => void
+  onSteer: () => void
+}) {
+  const { t } = useI18n()
+  const c = t.composer
+
+  if (conversation.active) {
+    return <ConversationPill {...conversation} disabled={disabled} />
+  }
+
+  const showVoicePrimary = !busy && !hasComposerPayload
+
+  return (
+    <div className="ml-auto flex shrink-0 items-center gap-(--composer-control-gap)">
+      <DictationButton disabled={disabled} onToggle={onDictate} state={state.voice} status={voiceStatus} />
+      {canSteer && (
+        <Tip label={c.steer}>
+          <Button
+            aria-label={c.steer}
+            className={GHOST_ICON_BTN}
+            disabled={disabled}
+            onClick={onSteer}
+            size="icon"
+            type="button"
+            variant="ghost"
+          >
+            <SteeringWheel size={16} />
+          </Button>
+        </Tip>
+      )}
+      {showVoicePrimary ? (
+        <Tip label={c.startVoice}>
+          <Button
+            aria-label={c.startVoice}
+            className={PRIMARY_ICON_BTN}
+            disabled={disabled}
+            onClick={() => {
+              triggerHaptic('open')
+              conversation.onStart()
+            }}
+            size="icon"
+            type="button"
+          >
+            <AudioLines size={17} />
+          </Button>
+        </Tip>
+      ) : (
+        <Tip label={busy ? (busyAction === 'queue' ? c.queueMessage : c.stop) : c.send}>
+          <Button
+            aria-label={busy ? (busyAction === 'queue' ? c.queueMessage : c.stop) : c.send}
+            className={PRIMARY_ICON_BTN}
+            disabled={disabled || !canSubmit}
+            type="submit"
+          >
+            {busy ? (
+              busyAction === 'queue' ? (
+                <Layers3 size={16} />
+              ) : (
+                <span className="block size-3 rounded-[0.1875rem] bg-current" />
+              )
+            ) : (
+              <Codicon name="arrow-up" size="1rem" />
+            )}
+          </Button>
+        </Tip>
+      )}
+    </div>
+  )
+}
+
+function ConversationPill({
+  disabled,
+  level,
+  muted,
+  onEnd,
+  onStopTurn,
+  onToggleMute,
+  status
+}: ConversationProps & { disabled: boolean }) {
+  const { t } = useI18n()
+  const c = t.composer
+  const speaking = status === 'speaking'
+  const listening = status === 'listening' && !muted
+
+  const label =
+    status === 'speaking'
+      ? c.speaking
+      : status === 'transcribing'
+        ? c.transcribing
+        : status === 'thinking'
+          ? c.thinking
+          : muted
+            ? c.muted
+            : c.listening
+
+  return (
+    <div className="ml-auto flex shrink-0 items-center gap-(--composer-control-gap)">
+      <Tip label={muted ? c.unmuteMic : c.muteMic}>
+        <Button
+          aria-label={muted ? c.unmuteMic : c.muteMic}
+          aria-pressed={muted}
+          className={cn(GHOST_ICON_BTN, 'p-0', muted && 'bg-muted text-muted-foreground')}
+          disabled={disabled}
+          onClick={() => {
+            triggerHaptic('selection')
+            onToggleMute()
+          }}
+          size="icon"
+          type="button"
+          variant="ghost"
+        >
+          <Codicon name={muted ? 'mic-off' : 'mic'} size="1rem" />
+        </Button>
+      </Tip>
+      {listening && (
+        <Button
+          aria-label={c.stopListening}
+          className="h-(--composer-control-size) shrink-0 gap-1.5 rounded-full px-2.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
+          disabled={disabled}
+          onClick={() => {
+            triggerHaptic('submit')
+            onStopTurn()
+          }}
+          title={c.stopListening}
+          type="button"
+          variant="ghost"
+        >
+          <Square className="fill-current" size={11} />
+          <span>{c.stopShort}</span>
+        </Button>
+      )}
+      <Button
+        aria-label={c.endConversation}
+        className="h-(--composer-control-size) gap-1.5 rounded-full bg-primary px-3 text-xs font-medium text-primary-foreground hover:bg-primary/90"
+        disabled={disabled}
+        onClick={() => {
+          triggerHaptic('close')
+          onEnd()
+        }}
+        title={c.endConversation}
+        type="button"
+      >
+        <ConversationIndicator level={level} listening={listening} speaking={speaking} />
+        <span>{c.endShort}</span>
+      </Button>
+      <span className="sr-only" role="status">
+        {label}
+      </span>
+    </div>
+  )
+}
+
+function ConversationIndicator({
+  level,
+  listening,
+  speaking
+}: {
+  level: number
+  listening: boolean
+  speaking: boolean
+}) {
+  if (speaking) {
+    return <Loader2 className="animate-spin" size={12} />
+  }
+
+  const bars = [0.55, 0.85, 1, 0.85, 0.55]
+  const normalized = Math.max(0, Math.min(level, 1))
+
+  return (
+    <span aria-hidden="true" className="flex h-3 items-center gap-0.5">
+      {bars.map((weight, index) => {
+        const height = listening ? 0.3 + Math.min(0.7, normalized * weight) : 0.3
+
+        return <span className="w-0.5 rounded-full bg-current" key={index} style={{ height: `${height * 100}%` }} />
+      })}
+    </span>
+  )
+}
+
+function DictationButton({
+  disabled,
+  state,
+  status,
+  onToggle
+}: {
+  disabled: boolean
+  state: ChatBarState['voice']
+  status: VoiceStatus
+  onToggle: () => void
+}) {
+  const { t } = useI18n()
+  const c = t.composer
+  const active = state.active || status !== 'idle'
+
+  const aria =
+    status === 'recording' ? c.stopDictation : status === 'transcribing' ? c.transcribingDictation : c.voiceDictation
+
+  return (
+    <Tip label={aria}>
+      <Button
+        aria-label={aria}
+        aria-pressed={active}
+        className={cn(
+          GHOST_ICON_BTN,
+          'p-0',
+          'data-[active=true]:bg-accent data-[active=true]:text-foreground',
+          status === 'recording' && 'bg-primary/10 text-primary hover:bg-primary/15 hover:text-primary',
+          status === 'transcribing' && 'bg-primary/10 text-primary'
+        )}
+        data-active={active}
+        disabled={disabled || !state.enabled || status === 'transcribing'}
+        onClick={() => {
+          triggerHaptic(active ? 'close' : 'open')
+          onToggle()
+        }}
+        size="icon"
+        type="button"
+        variant="ghost"
+      >
+        {status === 'recording' ? (
+          <Square className="fill-current" size={12} />
+        ) : status === 'transcribing' ? (
+          <Loader2 className="animate-spin" size={16} />
+        ) : (
+          <Codicon name="mic" size="1rem" />
+        )}
+      </Button>
+    </Tip>
+  )
+}

package/src/app/chat/composer/drop-affordance.ts

@@ -0,0 +1,2 @@
+export const COMPOSER_DROP_FADE_CLASS = 'transition-opacity duration-150 ease-out'
+export const COMPOSER_DROP_ACTIVE_CLASS = 'opacity-60'

package/src/app/chat/composer/enter-submit-dom-race.test.tsx

@@ -0,0 +1,218 @@
+import { act, cleanup, fireEvent, render } from '@testing-library/react'
+import { useRef, useState } from 'react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+// No global setupFiles registers auto-cleanup, so unmount between tests —
+// otherwise a second render() leaks the first editor and getByTestId('editor')
+// matches multiple nodes.
+afterEach(cleanup)
+
+// Faithful mirror of index.tsx's Enter wiring (handleEditorKeyDown's Enter
+// branch + submitDraft), driven through REAL DOM keydown events on a
+// contentEditable.
+//
+// Regression repro for #39630: pressing Enter right after typing (fast typing /
+// IME) did nothing. The composer state (`draft` from useAuiState) and its
+// derived `hasComposerPayload` lag the DOM by a render, so the keydown handler
+// read empty state and either dropped the message, drained a queued prompt
+// instead of sending, or (while busy) refused to queue. The fix reads the live
+// editor text — `hasLivePayload` in the handler and a DOM re-sync at the top of
+// submitDraft — so the just-typed text always wins.
+//
+// We model the race deterministically the way the IME repro does: mutate the
+// editor's textContent WITHOUT firing an input event, so the React `draft`
+// state stays stale while the DOM already holds the text.
+function Harness({
+  busy = false,
+  disabled = false,
+  queued = [],
+  onSubmit,
+  onQueue,
+  onCancel,
+  onDrain
+}: {
+  busy?: boolean
+  disabled?: boolean
+  queued?: readonly string[]
+  onSubmit: (text: string) => void
+  onQueue: (text: string) => void
+  onCancel: () => void
+  onDrain: () => void
+}) {
+  const editorRef = useRef<HTMLDivElement>(null)
+  const draftRef = useRef('')
+  // Mirrors `useAuiState(s => s.composer.text)` — updated only via setText, so
+  // it lags the DOM until React re-renders (the source of the bug).
+  const [draft, setDraft] = useState('')
+  const attachments: unknown[] = []
+
+  const composerPlainText = (el: HTMLElement) => el.textContent ?? ''
+
+  const setText = (next: string) => {
+    draftRef.current = next
+    setDraft(next)
+  }
+
+  const submitDraft = () => {
+    if (disabled) {
+      return
+    }
+
+    const editor = editorRef.current
+    if (editor) {
+      const domText = composerPlainText(editor)
+      if (domText !== draftRef.current) {
+        draftRef.current = domText
+        setDraft(domText)
+      }
+    }
+
+    const text = draftRef.current
+    const payloadPresent = text.trim().length > 0 || attachments.length > 0
+
+    if (busy) {
+      if (payloadPresent) {
+        onQueue(text)
+      } else {
+        onCancel()
+      }
+    } else if (!payloadPresent && queued.length > 0) {
+      onDrain()
+    } else if (payloadPresent) {
+      onSubmit(text)
+    }
+  }
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault()
+
+      const editorText = editorRef.current ? composerPlainText(editorRef.current) : draftRef.current
+      const hasLivePayload = editorText.trim().length > 0 || attachments.length > 0
+
+      if (disabled) {
+        return
+      }
+
+      if (!busy && !hasLivePayload && queued.length > 0) {
+        onDrain()
+
+        return
+      }
+
+      if (busy && !hasLivePayload) {
+        return
+      }
+
+      submitDraft()
+    }
+  }
+
+  // `draft` is read so the lint/compiler treats the stale-state mirror as live;
+  // the assertions prove the handler never relies on it.
+  void draft
+
+  return (
+    <div
+      contentEditable
+      data-testid="editor"
+      onInput={event => setText(composerPlainText(event.currentTarget))}
+      onKeyDown={handleKeyDown}
+      ref={editorRef}
+      suppressContentEditableWarning
+    />
+  )
+}
+
+describe('composer Enter submit — live DOM vs stale composer state (#39630)', () => {
+  it('sends the just-typed text on Enter even when composer state has not synced', async () => {
+    const onSubmit = vi.fn()
+    const { getByTestId } = render(
+      <Harness onCancel={vi.fn()} onDrain={vi.fn()} onQueue={vi.fn()} onSubmit={onSubmit} />
+    )
+    const editor = getByTestId('editor')
+
+    // Fast typing: the DOM has the text but NO input event fired, so `draft`
+    // state is still empty (the exact stale-state race).
+    await act(async () => {
+      editor.textContent = 'hello world'
+      fireEvent.keyDown(editor, { key: 'Enter' })
+    })
+
+    expect(onSubmit).toHaveBeenCalledWith('hello world')
+  })
+
+  it('queues a fast-typed message while busy instead of draining the queue or cancelling', async () => {
+    const onQueue = vi.fn()
+    const onDrain = vi.fn()
+    const onCancel = vi.fn()
+    const { getByTestId } = render(
+      <Harness busy onCancel={onCancel} onDrain={onDrain} onQueue={onQueue} onSubmit={vi.fn()} queued={['queued-1']} />
+    )
+    const editor = getByTestId('editor')
+
+    await act(async () => {
+      editor.textContent = 'urgent follow-up'
+      fireEvent.keyDown(editor, { key: 'Enter' })
+    })
+
+    expect(onQueue).toHaveBeenCalledWith('urgent follow-up')
+    expect(onDrain).not.toHaveBeenCalled()
+    expect(onCancel).not.toHaveBeenCalled()
+  })
+
+  it('treats an empty Enter while busy as a no-op (never an accidental Stop)', async () => {
+    const onCancel = vi.fn()
+    const onSubmit = vi.fn()
+    const onQueue = vi.fn()
+    const { getByTestId } = render(
+      <Harness busy onCancel={onCancel} onDrain={vi.fn()} onQueue={onQueue} onSubmit={onSubmit} />
+    )
+    const editor = getByTestId('editor')
+
+    await act(async () => {
+      editor.textContent = ''
+      fireEvent.keyDown(editor, { key: 'Enter' })
+    })
+
+    expect(onCancel).not.toHaveBeenCalled()
+    expect(onSubmit).not.toHaveBeenCalled()
+    expect(onQueue).not.toHaveBeenCalled()
+  })
+
+  it('drains the next queued prompt on Enter when idle with a truly empty editor', async () => {
+    const onDrain = vi.fn()
+    const onSubmit = vi.fn()
+    const { getByTestId } = render(
+      <Harness onCancel={vi.fn()} onDrain={onDrain} onQueue={vi.fn()} onSubmit={onSubmit} queued={['queued-1']} />
+    )
+    const editor = getByTestId('editor')
+
+    await act(async () => {
+      editor.textContent = ''
+      fireEvent.keyDown(editor, { key: 'Enter' })
+    })
+
+    expect(onDrain).toHaveBeenCalledTimes(1)
+    expect(onSubmit).not.toHaveBeenCalled()
+  })
+
+  it('keeps reconnect drafts editable but blocks Enter submit until the gateway returns', async () => {
+    const onSubmit = vi.fn()
+    const onDrain = vi.fn()
+    const { getByTestId } = render(
+      <Harness disabled onCancel={vi.fn()} onDrain={onDrain} onQueue={vi.fn()} onSubmit={onSubmit} queued={['queued-1']} />
+    )
+    const editor = getByTestId('editor')
+
+    await act(async () => {
+      editor.textContent = 'draft while reconnecting'
+      fireEvent.input(editor)
+      fireEvent.keyDown(editor, { key: 'Enter' })
+    })
+
+    expect(editor.textContent).toBe('draft while reconnecting')
+    expect(onDrain).not.toHaveBeenCalled()
+    expect(onSubmit).not.toHaveBeenCalled()
+  })
+})

package/src/app/chat/composer/focus.ts

@@ -0,0 +1,134 @@
+/**
+ * Composer focus + external-insert bus.
+ *
+ * Mutations from outside the composer (sidebar attach, drag drop, terminal
+ * Cmd+L, preview console, etc.) dispatch through here. Each composer subscribes
+ * and routes the work back into its own ref/state.
+ *
+ * `dispatch` defers to a macrotask so synchronous click/keydown handlers
+ * (react-arborist row focus, picker `node.select()`) finish first and don't
+ * steal focus from the composer effect.
+ */
+
+import type { InlineRefInput } from './inline-refs'
+import { RICH_INPUT_SLOT } from './rich-editor'
+
+export type ComposerTarget = 'edit' | 'main'
+export type ComposerInsertMode = 'block' | 'inline'
+
+interface FocusDetail {
+  target: ComposerTarget
+}
+
+interface InsertDetail {
+  mode: ComposerInsertMode
+  target: ComposerTarget
+  text: string
+}
+
+interface InsertRefsDetail {
+  refs: InlineRefInput[]
+  target: ComposerTarget
+}
+
+const FOCUS_EVENT = 'NASTECH:composer-focus'
+const INSERT_EVENT = 'NASTECH:composer-insert'
+const INSERT_REFS_EVENT = 'NASTECH:composer-insert-refs'
+
+let activeTarget: ComposerTarget = 'main'
+
+const resolve = (target: ComposerTarget | 'active') => (target === 'active' ? activeTarget : target)
+
+const dispatch = <T>(name: string, detail: T) => {
+  if (typeof window === 'undefined') {
+    return
+  }
+
+  window.setTimeout(() => window.dispatchEvent(new CustomEvent<T>(name, { detail })), 0)
+}
+
+const subscribe = <T>(name: string, handler: (detail: T) => void) => {
+  if (typeof window === 'undefined') {
+    return () => undefined
+  }
+
+  const listener = (event: Event) => {
+    const detail = (event as CustomEvent<T>).detail
+
+    if (detail) {
+      handler(detail)
+    }
+  }
+
+  window.addEventListener(name, listener)
+
+  return () => window.removeEventListener(name, listener)
+}
+
+export const markActiveComposer = (target: ComposerTarget) => {
+  activeTarget = target
+}
+
+export const requestComposerFocus = (target: ComposerTarget | 'active' = 'active') =>
+  dispatch<FocusDetail>(FOCUS_EVENT, { target: resolve(target) })
+
+export const requestComposerInsert = (
+  text: string,
+  { mode = 'block', target = 'active' }: { mode?: ComposerInsertMode; target?: ComposerTarget | 'active' } = {}
+) => {
+  const trimmed = text.trim()
+
+  if (!trimmed) {
+    return
+  }
+
+  dispatch<InsertDetail>(INSERT_EVENT, { mode, target: resolve(target), text: trimmed })
+}
+
+export const onComposerFocusRequest = (handler: (target: ComposerTarget) => void) =>
+  subscribe<FocusDetail>(FOCUS_EVENT, ({ target }) => handler(target))
+
+export const onComposerInsertRequest = (handler: (detail: InsertDetail) => void) =>
+  subscribe<InsertDetail>(INSERT_EVENT, handler)
+
+/** Insert typed ref chips (carrying a display label) into a composer — the
+ * structured cousin of {@link requestComposerInsert}, used for session links. */
+export const requestComposerInsertRefs = (
+  refs: InlineRefInput[],
+  { target = 'active' }: { target?: ComposerTarget | 'active' } = {}
+) => {
+  if (refs.length) {
+    dispatch<InsertRefsDetail>(INSERT_REFS_EVENT, { refs, target: resolve(target) })
+  }
+}
+
+export const onComposerInsertRefsRequest = (handler: (detail: InsertRefsDetail) => void) =>
+  subscribe<InsertRefsDetail>(INSERT_REFS_EVENT, handler)
+
+/**
+ * Focus a composer input across React commit + browser focus restore.
+ *
+ * The triple-call survives:
+ *   - sync: contenteditable already mounted
+ *   - rAF:  React just committed a `renderComposerContents` swap
+ *   - 0ms:  browser focus reclaim from a click target inside an external panel
+ */
+export const focusComposerInput = (el: HTMLElement | null) => {
+  if (!el) {
+    return
+  }
+
+  const focus = () => el.focus({ preventScroll: true })
+
+  focus()
+  window.requestAnimationFrame(focus)
+  window.setTimeout(focus, 0)
+}
+
+export const blurComposerInput = () => {
+  const el = document.querySelector(`[data-slot="${RICH_INPUT_SLOT}"]`) as HTMLElement | null
+
+  if (el && document.activeElement === el) {
+    el.blur()
+  }
+}

package/src/app/chat/composer/help-hint.tsx

@@ -0,0 +1,59 @@
+import type { ReactNode } from 'react'
+
+import { useI18n } from '@/i18n'
+
+import { COMPLETION_DRAWER_CLASS } from './completion-drawer'
+
+const COMMON_COMMAND_KEYS = ['/help', '/clear', '/resume', '/details', '/copy', '/quit']
+const HOTKEY_KEYS = ['@', '/', '?', 'Enter', 'Cmd/Ctrl+Shift+K', 'Cmd/Ctrl+/', 'Esc', '↑ / ↓']
+
+export function HelpHint() {
+  const { t } = useI18n()
+  const c = t.composer
+
+  return (
+    <div className={COMPLETION_DRAWER_CLASS} data-slot="composer-completion-drawer" data-state="open" role="dialog">
+      <Section title={c.commonCommands}>
+        {COMMON_COMMAND_KEYS.map(key => (
+          <Row description={c.commandDescs[key] ?? ''} key={key} keyLabel={key} mono />
+        ))}
+      </Section>
+
+      <Section title={c.hotkeys}>
+        {HOTKEY_KEYS.map(key => (
+          <Row description={c.hotkeyDescs[key] ?? ''} key={key} keyLabel={key} />
+        ))}
+      </Section>
+
+      <p className="px-2.5 py-1 text-xs text-muted-foreground/80">
+        <span className="font-mono text-foreground/80">/help</span> {c.helpFooter}
+      </p>
+    </div>
+  )
+}
+
+function Section({ children, title }: { children: ReactNode; title: string }) {
+  return (
+    <div className="grid gap-0.5 pt-0.5">
+      <p className="px-2.5 pb-0.5 pt-1 text-[0.65rem] font-medium uppercase tracking-wide text-muted-foreground/75">
+        {title}
+      </p>
+      {children}
+    </div>
+  )
+}
+
+function Row({ description, keyLabel, mono = false }: { description: string; keyLabel: string; mono?: boolean }) {
+  return (
+    <div className="flex min-w-0 items-baseline gap-2 rounded-md px-2.5 py-1 text-xs">
+      <span
+        className={
+          mono ? 'shrink-0 truncate font-mono font-medium text-foreground/85' : 'shrink-0 truncate text-foreground/85'
+        }
+      >
+        {keyLabel}
+      </span>
+      <span className="min-w-0 truncate text-muted-foreground/80">{description}</span>
+    </div>
+  )
+}