@clawpump/claw-agent 0.1.4 → 0.1.6

package/agent/apps/desktop/src/app/chat/composer/rich-editor.ts

@@ -10,12 +10,15 @@ import {
   DIRECTIVE_CHIP_CLASS,
   directiveIconElement,
   directiveIconSvg,
-  formatRefValue
+  formatRefValue,
+  slashChipClass,
+  type SlashChipKind,
+  slashIconElement
 } 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):(`[^`\n]+`|"[^"\n]+"|'[^'\n]+'|\S+)/g
+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;' }
 
@@ -52,14 +55,14 @@ export function quoteRefValue(value: string) {
   return formatRefValue(value)
 }
 
-export function refChipHtml(kind: string, rawValue: string) {
+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(refLabel(id))}</span></span>`
+  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) {
+export function refChipElement(kind: string, rawValue: string, displayLabel?: string) {
   const id = unquoteRef(rawValue)
   const text = `@${kind}:${quoteRefValue(id)}`
   const chip = document.createElement('span')
@@ -71,12 +74,30 @@ export function refChipElement(kind: string, rawValue: string) {
   chip.dataset.refKind = kind
   chip.className = DIRECTIVE_CHIP_CLASS
   label.className = 'truncate'
-  label.textContent = refLabel(id)
+  label.textContent = displayLabel || refLabel(id)
   chip.append(directiveIconElement(kind), label)
 
   return chip
 }
 
+/** A non-editable pill for a picked slash command (`/skin nous`, `/tropes`).
+ *  `data-ref-text` carries the literal command so `composerPlainText` round-trips
+ *  it back to the exact text that gets submitted. */
+export function slashChipElement(command: string, kind: SlashChipKind, label?: string) {
+  const chip = document.createElement('span')
+  const text = document.createElement('span')
+
+  chip.contentEditable = 'false'
+  chip.dataset.refText = command
+  chip.dataset.slashKind = kind
+  chip.className = slashChipClass(kind)
+  text.className = 'truncate'
+  text.textContent = label || command
+  chip.append(slashIconElement(kind), text)
+
+  return chip
+}
+
 function appendTextWithBreaks(target: DocumentFragment | HTMLElement, text: string) {
   const lines = text.split('\n')
 
@@ -111,6 +132,63 @@ export function renderComposerContents(target: HTMLElement, text: string) {
   appendComposerContents(target, text)
 }
 
+/** Caret range when the selection lives inside `editor`; else null. */
+function composerSelectionRange(editor: HTMLElement) {
+  const selection = window.getSelection()
+  const range = selection?.rangeCount ? selection.getRangeAt(0) : null
+
+  if (!selection || !range || !editor.contains(range.commonAncestorContainer)) {
+    return null
+  }
+
+  return { range, selection }
+}
+
+/** Insert plain text at the caret (replacing any selection). Pastes use this
+ *  instead of `execCommand('insertText')` — Chromium's editing pipeline is
+ *  ~O(n²) on large multiline blobs. */
+export function insertPlainTextAtCaret(editor: HTMLElement, text: string) {
+  const hit = composerSelectionRange(editor)
+  const fragment = document.createDocumentFragment()
+
+  appendTextWithBreaks(fragment, text)
+
+  const tail = fragment.lastChild
+
+  if (hit) {
+    hit.range.deleteContents()
+    hit.range.insertNode(fragment)
+  } else {
+    editor.append(fragment)
+  }
+
+  if (tail) {
+    const caret = document.createRange()
+    caret.setStartAfter(tail)
+    caret.collapse(true)
+    const selection = hit?.selection ?? window.getSelection()
+    selection?.removeAllRanges()
+    selection?.addRange(caret)
+  }
+}
+
+/** Remove a non-collapsed selection in-editor. Skips collapsed carets so word/
+ *  line delete (Opt/Cmd+Backspace) stays native. Returns whether anything ran. */
+export function deleteSelectionInEditor(editor: HTMLElement) {
+  const hit = composerSelectionRange(editor)
+
+  if (!hit || hit.range.collapsed) {
+    return false
+  }
+
+  hit.range.deleteContents()
+  hit.range.collapse(true)
+  hit.selection.removeAllRanges()
+  hit.selection.addRange(hit.range)
+
+  return true
+}
+
 /** Serialize a draft string into chip-HTML for the contenteditable surface. */
 export function composerHtml(text: string) {
   let cursor = 0
@@ -163,3 +241,36 @@ export function placeCaretEnd(element: HTMLElement) {
   selection?.removeAllRanges()
   selection?.addRange(range)
 }
+
+/** Drop contenteditable junk that serializes as `\n` and falsely expands the composer. */
+export function normalizeComposerEditorDom(editor: HTMLElement) {
+  if (editor.childNodes.length === 1 && editor.firstChild?.nodeName === 'BR') {
+    editor.replaceChildren()
+
+    return
+  }
+
+  if (editor.childNodes.length === 1 && editor.firstChild?.nodeType === Node.ELEMENT_NODE) {
+    const wrapper = editor.firstChild as HTMLElement
+
+    if (wrapper.tagName === 'DIV' && wrapper.dataset.slot !== RICH_INPUT_SLOT) {
+      editor.replaceChildren(...Array.from(wrapper.childNodes))
+    }
+  }
+
+  const last = editor.lastChild
+
+  if (last?.nodeName !== 'BR') {
+    return
+  }
+
+  let prev: ChildNode | null = last.previousSibling
+
+  while (prev?.nodeType === Node.TEXT_NODE && !(prev.textContent || '').trim()) {
+    prev = prev.previousSibling
+  }
+
+  if ((prev as HTMLElement | null)?.dataset.refText) {
+    editor.removeChild(last)
+  }
+}

package/agent/apps/desktop/src/app/chat/composer/slash-nav-dom-repro.test.tsx

@@ -0,0 +1,186 @@
+import type { Unstable_TriggerAdapter, Unstable_TriggerItem } from '@assistant-ui/core'
+import { act, fireEvent, render } from '@testing-library/react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { useLiveCompletionAdapter } from './hooks/use-live-completion-adapter'
+import { detectTrigger, type TriggerState } from './text-utils'
+
+// Faithful mirror of index.tsx's trigger wiring, driven through REAL DOM
+// keydown+keyup events on a contentEditable. Exercises the parts a direct
+// reducer-call repro misses: the keyup -> refreshTrigger path, the
+// keydown-set "consumed" ref that guards it, and per-press keydown+keyup
+// ordering (critical for Escape, whose keydown nulls `trigger` before keyup).
+function Harness({
+  onState
+}: {
+  onState: (s: { active: number; items: readonly Unstable_TriggerItem[]; open: boolean }) => void
+}) {
+  const editorRef = useRef<HTMLDivElement>(null)
+  const triggerKeyConsumedRef = useRef(false)
+  const [trigger, setTrigger] = useState<TriggerState | null>(null)
+  const [triggerActive, setTriggerActive] = useState(0)
+  const [triggerItems, setTriggerItems] = useState<readonly Unstable_TriggerItem[]>([])
+
+  const { adapter } = useLiveCompletionAdapter({
+    enabled: true,
+    debounceMs: 0,
+    fetcher: async (query: string) => ({
+      query,
+      items: Array.from({ length: 5 }, (_, i) => ({ text: `/cmd${i}`, display: `/cmd${i}`, meta: '' }))
+    }),
+    toItem: (entry, index) => ({ id: `${entry.text}|${index}`, type: 'slash', label: entry.text.slice(1) })
+  })
+
+  const triggerAdapter: Unstable_TriggerAdapter | null = trigger?.kind === '/' ? adapter : null
+
+  const refreshTrigger = useCallback(() => {
+    const editor = editorRef.current
+
+    if (!editor) {
+      return
+    }
+
+    const raw = editor.textContent ?? ''
+
+    if (!raw.includes('@') && !raw.includes('/')) {
+      if (trigger) {
+        setTrigger(null)
+        setTriggerActive(0)
+      }
+
+      return
+    }
+
+    const detected = detectTrigger(raw)
+    setTrigger(detected)
+
+    if (detected?.kind !== trigger?.kind || detected?.query !== trigger?.query) {
+      setTriggerActive(0)
+    }
+  }, [trigger])
+
+  useEffect(() => {
+    if (!trigger || !triggerAdapter?.search) {
+      setTriggerItems([])
+
+      return
+    }
+
+    setTriggerItems(triggerAdapter.search(trigger.query))
+  }, [trigger, triggerAdapter])
+
+  useEffect(() => {
+    setTriggerActive(idx => Math.min(idx, Math.max(0, triggerItems.length - 1)))
+  }, [triggerItems.length])
+
+  onState({ active: triggerActive, items: triggerItems, open: trigger !== null })
+
+  const closeTrigger = () => {
+    setTrigger(null)
+    setTriggerItems([])
+    setTriggerActive(0)
+  }
+
+  // Exact copies of index.tsx handlers, including the keydown-set "consumed"
+  // ref that the keyup consults.
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (trigger && triggerItems.length > 0) {
+      if (event.key === 'ArrowDown') {
+        event.preventDefault()
+        triggerKeyConsumedRef.current = true
+        setTriggerActive(idx => (idx + 1) % triggerItems.length)
+
+        return
+      }
+
+      if (event.key === 'ArrowUp') {
+        event.preventDefault()
+        triggerKeyConsumedRef.current = true
+        setTriggerActive(idx => (idx - 1 + triggerItems.length) % triggerItems.length)
+
+        return
+      }
+
+      if (event.key === 'Escape') {
+        event.preventDefault()
+        triggerKeyConsumedRef.current = true
+        closeTrigger()
+
+        return
+      }
+    }
+  }
+
+  const handleKeyUp = () => {
+    if (triggerKeyConsumedRef.current) {
+      triggerKeyConsumedRef.current = false
+
+      return
+    }
+
+    // index.tsx defers via setTimeout(refreshTrigger, 0); call synchronously
+    // here so the test deterministically observes the keyup-driven refresh.
+    refreshTrigger()
+  }
+
+  return (
+    <div
+      contentEditable
+      data-testid="editor"
+      onInput={() => refreshTrigger()}
+      onKeyDown={handleKeyDown}
+      onKeyUp={handleKeyUp}
+      ref={editorRef}
+      suppressContentEditableWarning
+    />
+  )
+}
+
+async function flush() {
+  await act(async () => {
+    await new Promise(r => setTimeout(r, 20))
+  })
+}
+
+describe('slash menu navigation — real DOM keydown+keyup', () => {
+  it('cycles through ALL items and Esc closes (and stays closed)', async () => {
+    vi.useRealTimers()
+    let latest = { active: 0, items: [] as readonly Unstable_TriggerItem[], open: false }
+    const { getByTestId } = render(<Harness onState={s => (latest = s)} />)
+    const editor = getByTestId('editor')
+
+    // Simulate typing '/'.
+    await act(async () => {
+      editor.textContent = '/'
+      fireEvent.input(editor)
+    })
+    await flush()
+
+    expect(latest.open).toBe(true)
+    expect(latest.items.length).toBe(5)
+
+    // ArrowDown 6x with REAL keydown+keyup pairs. Bug = stuck [0,1,0,1,...].
+    const seen: number[] = [latest.active]
+
+    for (let i = 0; i < 6; i++) {
+      await act(async () => {
+        fireEvent.keyDown(editor, { key: 'ArrowDown' })
+        fireEvent.keyUp(editor, { key: 'ArrowDown' })
+        await Promise.resolve()
+      })
+      seen.push(latest.active)
+    }
+
+    expect(seen).toEqual([0, 1, 2, 3, 4, 0, 1])
+
+    // Escape: keydown closes; keyup must NOT reopen (the '/' is still in text).
+    await act(async () => {
+      fireEvent.keyDown(editor, { key: 'Escape' })
+      fireEvent.keyUp(editor, { key: 'Escape' })
+      await Promise.resolve()
+    })
+    await flush()
+    expect(latest.open).toBe(false)
+  })
+})

package/agent/apps/desktop/src/app/chat/composer/status-stack/index.tsx

@@ -0,0 +1,202 @@
+import { useStore } from '@nanostores/react'
+import { type ReactNode, useEffect, useLayoutEffect, useMemo, useRef } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import { blurComposerInput } from '@/app/chat/composer/focus'
+import { AGENTS_ROUTE } from '@/app/routes'
+import { composerDockCard } from '@/components/chat/composer-dock'
+import { StatusSection } from '@/components/chat/status-section'
+import { Button } from '@/components/ui/button'
+import { Codicon } from '@/components/ui/codicon'
+import { type Translations, useI18n } from '@/i18n'
+import { cn } from '@/lib/utils'
+import {
+  $statusItemsBySession,
+  type ComposerStatusItem,
+  dismissBackgroundProcess,
+  groupStatusItems,
+  refreshBackgroundProcesses,
+  type StatusGroup,
+  stopBackgroundProcess
+} from '@/store/composer-status'
+import { $threadScrolledUp } from '@/store/thread-scroll'
+import { openSessionInNewWindow } from '@/store/windows'
+
+import { StatusItemRow } from './status-row'
+
+// Slow safety-net poll for silent exits (processes without notify_on_complete
+// emit no event when they die). Only armed while a running row is on screen.
+const BACKGROUND_POLL_MS = 5_000
+
+const groupLabel = (group: StatusGroup, s: Translations['statusStack']) => {
+  if (group.type === 'todo') {
+    return s.todos(group.items.filter(i => i.todoStatus === 'completed').length, group.items.length)
+  }
+
+  return group.type === 'subagent' ? s.subagents(group.items.length) : s.background(group.items.length)
+}
+
+interface ComposerStatusStackProps {
+  /** The queue, built by the composer (it owns the queue's callbacks). Rendered
+   *  as the last group so it stays fused to the composer like before. */
+  queue: ReactNode
+  sessionId: null | string
+}
+
+/**
+ * The status "sink" above the composer: one card (the queue's chrome) holding
+ * every session-scoped status — subagents, background tasks, queue — grouped by
+ * type and separated by light dividers. Collapses to nothing when empty.
+ */
+export function ComposerStatusStack({ queue, sessionId }: ComposerStatusStackProps) {
+  const { t } = useI18n()
+  const navigate = useNavigate()
+  const itemsBySession = useStore($statusItemsBySession)
+  const scrolledUp = useStore($threadScrolledUp)
+
+  const groups = useMemo(
+    () => groupStatusItems(sessionId ? (itemsBySession[sessionId] ?? []) : []),
+    [itemsBySession, sessionId]
+  )
+
+  // Seed from the registry on session open; event-driven refreshes (terminal /
+  // process tool completions) live in use-message-stream.
+  useEffect(() => {
+    if (sessionId) {
+      void refreshBackgroundProcesses(sessionId)
+    }
+  }, [sessionId])
+
+  const hasRunningBackground = groups.some(g => g.type === 'background' && g.items.some(i => i.state === 'running'))
+
+  useEffect(() => {
+    if (!sessionId || !hasRunningBackground) {
+      return
+    }
+
+    const timer = setInterval(() => void refreshBackgroundProcesses(sessionId), BACKGROUND_POLL_MS)
+
+    return () => clearInterval(timer)
+  }, [hasRunningBackground, sessionId])
+
+  const openAgents = () => navigate(AGENTS_ROUTE)
+
+  const openSubagent = (item: ComposerStatusItem) =>
+    item.sessionId ? void openSessionInNewWindow(item.sessionId, { watch: true }) : openAgents()
+
+  const sections: { key: string; node: ReactNode }[] = groups.map(group => ({
+    key: group.type,
+    node: (
+      <StatusSection
+        accessory={
+          group.type === 'subagent' ? (
+            <Button
+              className="text-muted-foreground/75 hover:text-foreground/90"
+              onClick={openAgents}
+              size="micro"
+              type="button"
+              variant="text"
+            >
+              {t.statusStack.agents}
+            </Button>
+          ) : undefined
+        }
+        defaultCollapsed={group.type !== 'todo'}
+        icon={
+          group.type === 'todo' ? (
+            <Codicon className="text-muted-foreground/70" name="checklist" size="0.8rem" />
+          ) : undefined
+        }
+        label={groupLabel(group, t.statusStack)}
+      >
+        {group.items.map(item => (
+          <StatusItemRow
+            item={item}
+            key={item.id}
+            onDismiss={sessionId ? id => dismissBackgroundProcess(sessionId, id) : undefined}
+            onOpen={() => openSubagent(item)}
+            onStop={sessionId ? id => stopBackgroundProcess(sessionId, id) : undefined}
+          />
+        ))}
+      </StatusSection>
+    )
+  }))
+
+  if (queue) {
+    sections.push({ key: 'queue', node: queue })
+  }
+
+  const visible = sections.length > 0
+  const stackRef = useRef<HTMLDivElement | null>(null)
+
+  // The stack is out of flow (overlays the thread), so the composer's measured
+  // height never sees it. Publish our own measured height — bucketed like the
+  // composer's, to avoid style invalidation churn — so the thread's
+  // last-message clearance can add it and the stack never hides messages.
+  useLayoutEffect(() => {
+    const root = document.documentElement
+    const el = stackRef.current
+
+    if (!visible || !el) {
+      root.style.removeProperty('--status-stack-measured-height')
+
+      return
+    }
+
+    let last = -1
+
+    const sync = () => {
+      const bucket = Math.round(el.getBoundingClientRect().height / 8) * 8
+
+      if (bucket !== last) {
+        last = bucket
+        root.style.setProperty('--status-stack-measured-height', `${bucket}px`)
+      }
+    }
+
+    const observer = new ResizeObserver(sync)
+    observer.observe(el)
+    sync()
+
+    return () => {
+      observer.disconnect()
+      root.style.removeProperty('--status-stack-measured-height')
+    }
+  }, [visible])
+
+  if (!visible) {
+    return null
+  }
+
+  return (
+    <div
+      // Sits above the composer (bottom-full), nudged down by the shell's 0.5rem
+      // top pad (pt-2 on composer-root) plus 1px so its bottom edge overlaps the
+      // composer surface's top border. z BELOW the surface (z-4) so the surface's
+      // top border paints over our transparent bottom border — one seam, no
+      // double line.
+      className="absolute inset-x-0 bottom-full z-3 max-h-[40vh] translate-y-[calc(0.5rem+1px)] overflow-y-auto"
+      onPointerDownCapture={() => blurComposerInput()}
+      ref={stackRef}
+    >
+      {/* The card paints the shared --composer-fill (rest / scrolled / focused
+          all match the composer surface by construction); on scroll we only
+          ghost the CONTENT — element opacity on the card would kill the blur.
+          Rounded top, square bottom; the bottom border is TRANSPARENT — the
+          composer surface's visible top border (which sits at a higher z) is the
+          single shared seam, so the two read as one fused capsule. */}
+      <div className={cn(composerDockCard('top'), 'mx-2 rounded-b-none border-b border-b-transparent pt-0.5 pb-1')}>
+        <div
+          className={cn(
+            'transition-opacity duration-200 ease-out',
+            scrolledUp ? 'opacity-30 group-hover/composer:opacity-100' : 'opacity-100'
+          )}
+        >
+          {sections.map(section => (
+            <div key={section.key}>{section.node}</div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}