@workerdeck/ui 0.23.0 → 1.1.0

package/src/components/agent/use-path-links.ts

@@ -1,59 +1,39 @@
 import { useEffect, type RefObject } from 'react'
 
-/**
- * Cmd/Ctrl+click a file path in the transcript to open it.
- *
- * The agent names files constantly — in prose, in tables, in tool arguments —
- * and every one of them is a place the reader wants to go. They already *look*
- * like links (inline code renders in the accent), so the affordance is half
- * promised before anything is wired: this makes it true.
- *
- * **Detection is deliberately conservative**, because the cost is asymmetric. A
- * missed path is a path you select and open yourself; a false positive is a
- * word that lights up under the modifier and then does nothing, which teaches
- * the reader not to trust any of them. So:
- *
- * - A trailing `/` means a directory. Directories are not openable in a text
- *   editor, and offering it is worse than staying quiet.
- * - Outside a `<code>` element the match must be *most* of what the element
- *   says, or a paragraph mentioning `src/index.ts` in passing would underline
- *   whole sentences.
- * - A bare filename (`worker.mjs`) is only a path **inside code**, and only
- *   with an extension. `18 B` and `Type` are table cells, not files.
- *
- * The modifier is the editor's own: hold it and what would open lights up
- * (`wd-path-link`), which is the only honest way to show which of the blue
- * things on screen are actually reachable.
- */
 export type PathHit = { path: string; line?: number }
 
-/** Marks the element under the pointer while the modifier is held. */
 const LINKISH = 'wd-path-link'
 
-/** Absolute, or relative with at least one separator. `:12` is a line number. */
 const PATH_RE = /^(\/[^\s:'"`()[\]{}]+|[\w.@~-]+(?:\/[\w.@~-]+)+)(?::(\d+))?$/
-/** A bare filename — only trusted inside a code element. */
 const FILE_RE = /^([\w.@-]+\.[A-Za-z0-9]{1,10})(?::(\d+))?$/
 
-/** How much of an element's text the match must cover, outside code. */
 const COVERAGE = 0.6
 
 export function matchPath(text: string, inCode: boolean): PathHit | undefined {
   const trimmed = text.trim()
-  if (!trimmed || trimmed.endsWith('/')) return undefined
+  if (!trimmed || trimmed.endsWith('/')) {
+    return undefined
+  }
   const hit = PATH_RE.exec(trimmed) ?? (inCode ? FILE_RE.exec(trimmed) : null)
-  if (!hit) return undefined
+  if (!hit) {
+    return undefined
+  }
   return { path: hit[1]!, line: hit[2] ? Number(hit[2]) : undefined }
 }
 
-/** The path a click on this element means, if any. */
 function hitFor(element: HTMLElement | undefined): PathHit | undefined {
-  if (!element) return undefined
+  if (!element) {
+    return undefined
+  }
   const inCode = element.closest('code') !== null
   const text = element.textContent ?? ''
   const hit = matchPath(text, inCode)
-  if (!hit) return undefined
-  if (!inCode && hit.path.length < text.trim().length * COVERAGE) return undefined
+  if (!hit) {
+    return undefined
+  }
+  if (!inCode && hit.path.length < text.trim().length * COVERAGE) {
+    return undefined
+  }
   return hit
 }
 
@@ -63,22 +43,16 @@ export function usePathLinks({
   enabled = true,
   ignore,
 }: {
-  /** The subtree to listen in — normally the panel. */
   container: RefObject<HTMLElement | null>
   onOpen: (hit: PathHit) => void
-  /** Off when there is no host filesystem to open from: a link that cannot
-   * resolve is worse than plain text. */
   enabled?: boolean
-  /**
-   * A selector for subtrees to leave alone. Anything with its own meaning for
-   * the modifier needs this — a code editor's Cmd+click is go-to-definition,
-   * and every identifier in it would otherwise match as a filename.
-   */
   ignore?: string
 }) {
   useEffect(() => {
     const root = container.current
-    if (!root || !enabled) return
+    if (!root || !enabled) {
+      return
+    }
     const excluded = (element: HTMLElement | undefined) =>
       ignore !== undefined && element?.closest(ignore) !== null && element !== undefined
 
@@ -89,13 +63,17 @@ export function usePathLinks({
     }
 
     const onClick = (event: MouseEvent) => {
-      if (!event.metaKey && !event.ctrlKey) return
+      if (!event.metaKey && !event.ctrlKey) {
+        return
+      }
       const target = event.target instanceof HTMLElement ? event.target : undefined
-      if (excluded(target)) return
+      if (excluded(target)) {
+        return
+      }
       const hit = hitFor(target)
-      if (!hit) return
-      // Capture phase and stopped here: the row underneath is usually pressable
-      // (a tool call expands), and opening a file is not expanding it.
+      if (!hit) {
+        return
+      }
       event.preventDefault()
       event.stopPropagation()
       unmark()
@@ -103,19 +81,25 @@ export function usePathLinks({
     }
 
     const onMove = (event: MouseEvent) => {
-      if (!event.metaKey && !event.ctrlKey) return unmark()
+      if (!event.metaKey && !event.ctrlKey) {
+        return unmark()
+      }
       const element = event.target instanceof HTMLElement ? event.target : undefined
-      if (element === marked) return
+      if (element === marked) {
+        return
+      }
       unmark()
-      if (!element || excluded(element) || !hitFor(element)) return
+      if (!element || excluded(element) || !hitFor(element)) {
+        return
+      }
       marked = element
       element.classList.add(LINKISH)
     }
 
-    // Releasing the modifier has to clear it: an underline that outlives the key
-    // promises a click that will not work.
     const onKey = (event: KeyboardEvent) => {
-      if (!event.metaKey && !event.ctrlKey) unmark()
+      if (!event.metaKey && !event.ctrlKey) {
+        unmark()
+      }
     }
 
     root.addEventListener('click', onClick, true)
@@ -134,14 +118,12 @@ export function usePathLinks({
   }, [container, onOpen, enabled, ignore])
 }
 
-/**
- * A transcript path against the session's cwd.
- *
- * Absolute wins outright. Everything else is relative to where the agent is
- * working, which is the only root that makes `worker.mjs` mean anything.
- */
 export function resolveAgainstCwd(path: string, cwd: string | undefined): string {
-  if (path.startsWith('/')) return path
-  if (!cwd) return path
+  if (path.startsWith('/')) {
+    return path
+  }
+  if (!cwd) {
+    return path
+  }
   return `${cwd.replace(/\/$/, '')}/${path.replace(/^\.\//, '')}`
 }

package/src/components/agent/use-subagent-frame.ts

@@ -0,0 +1,106 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { subagentLabel, type SessionInfo } from '@workerdeck/protocol'
+import type { TranscriptItem } from '@workerdeck/react'
+import { subagentItems, type ToolCallItem } from '../terminal/blocks.ts'
+
+/**
+ * The sub-agent frame machine: which agent frame is on screen, how it is entered (a host
+ * `openSubagent` request or a Task row in the transcript), how it is left (Escape, the strip's
+ * Back, or the host withdrawing), and what the transcript reveals on the way out. The frame
+ * round-trips through the host's URL — the anti-loop rules live in GOTCHAS ("The sub-agent
+ * frame round-trips through the URL"); here they mean: entry keys on the nonce alone, and the
+ * report is deduped through a ref, so an echo of our own report is inert on arrival.
+ */
+export function useSubagentFrame(options: {
+  sessionId: string | undefined
+  items: TranscriptItem[]
+  session: SessionInfo | undefined
+  /** Host request to reveal a transcript row; entering a frame must not eat a pending one. */
+  reveal?: { toolUseId: string; nonce: number }
+  /** Host request to enter a frame; `toolUseId: undefined` withdraws it (Back/Forward). */
+  openSubagent?: { toolUseId: string; nonce: number }
+  onSubagentChange?: (toolUseId: string | undefined) => void
+}) {
+  const { sessionId, items, session, reveal, openSubagent, onSubagentChange } = options
+
+  const [subagentId, setSubagentId] = useState<string | undefined>(undefined)
+  const [returnReveal, setReturnReveal] = useState<{ toolUseId: string; nonce: number } | undefined>(undefined)
+  useEffect(() => {
+    setSubagentId(undefined)
+    setReturnReveal(undefined)
+  }, [sessionId])
+
+  // Leaving a frame reveals the Task row it came from, so the reader lands where they left.
+  const leaveSubagent = useCallback(() => {
+    setSubagentId((current) => {
+      if (current !== undefined) {
+        setReturnReveal({ toolUseId: current, nonce: Date.now() })
+      }
+      return undefined
+    })
+  }, [])
+
+  const openSubagentNonce = openSubagent?.nonce
+  const openSubagentId = openSubagent?.toolUseId
+  useEffect(() => {
+    if (openSubagentId === undefined) {
+      leaveSubagent()
+    } else {
+      setSubagentId(openSubagentId)
+    }
+    // Keyed on the nonce alone: an unchanged nonce is the host echoing our own report, and
+    // acting on it starts the URL → panel → URL cycle.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [openSubagentNonce])
+
+  // A reveal targets the root transcript, so it closes whatever frame is open — without the
+  // return reveal, which would fight the requested one.
+  const revealNonce = reveal?.nonce
+  useEffect(() => {
+    if (revealNonce === undefined) {
+      return
+    }
+    setSubagentId(undefined)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [revealNonce])
+
+  useEffect(() => {
+    if (subagentId === undefined) {
+      return
+    }
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape' || event.defaultPrevented) {
+        return
+      }
+      leaveSubagent()
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [subagentId, leaveSubagent])
+
+  const onSubagentChangeRef = useRef(onSubagentChange)
+  onSubagentChangeRef.current = onSubagentChange
+  const reportedSubagentId = useRef<string | undefined>(undefined)
+  useEffect(() => {
+    if (reportedSubagentId.current === subagentId) {
+      return
+    }
+    reportedSubagentId.current = subagentId
+    onSubagentChangeRef.current?.(subagentId)
+  }, [subagentId])
+
+  const frameItems = useMemo(() => (subagentId === undefined ? [] : subagentItems(items, subagentId)), [items, subagentId])
+  const task = useMemo(
+    () =>
+      subagentId === undefined
+        ? undefined
+        : items.find((item): item is ToolCallItem => item.kind === 'tool_call' && item.id === subagentId),
+    [items, subagentId],
+  )
+  const fallbackLabel = useMemo(() => {
+    const record = session?.subagents?.find((sub) => sub.toolUseId === subagentId)
+    return record ? subagentLabel(record) : 'Sub-agent'
+  }, [session, subagentId])
+
+  return { subagentId, enterSubagent: setSubagentId, leaveSubagent, returnReveal, frameItems, task, fallbackLabel }
+}

package/src/components/agent/use-transcript-jumps.ts

@@ -1,37 +1,33 @@
-/**
- * The jump: aim at a virtual row, land exactly. Every jump on the transcript
- * surface — the catch-up strip's, and each of the scrubber's marks — comes
- * through here, along with the re-pin the catch-up strip's dismiss uses.
- * **Instant**, like everything else that moves the scroll position: VS Code's
- * editor jumps when you click its scrollbar and so does this.
- *
- * The aim loop survives from before the height calculator, with its job
- * changed twice. It used to be the mechanism: offsets over unmeasured spans
- * were sums of flat estimates (~3300px off over 600 rows), and the loop
- * walked them in up to six passes, each pass better than the last because
- * the rows it crossed had measured. With `estimateSize` computed the first
- * aim lands within a line or two; with the travel now instant there is also
- * no in-flight animation suppressing the virtualizer's own adjustments — the
- * condition that made a *single* smooth `scrollToIndex` unable to
- * self-correct at all. What is left is convergence insurance for the two
- * things the calculator cannot know: the recap row's estimated constant, and
- * flagged content (CJK, compressed tables). It is cheap now — each pass is a
- * jump, not a journey, so a pass that was already on target costs nothing and
- * the check exits after one.
- */
 import { useEffect, useRef, type RefObject } from 'react'
 import type { Virtualizer } from '@tanstack/react-virtual'
 import type { useStickToBottomContext } from 'use-stick-to-bottom'
 import type { HeightEpoch } from '../terminal/height.ts'
 import { gapBefore, type TranscriptRow } from './transcript-rows.ts'
 
-/** How many times a jump re-checks its landing, and how long it waits before
- * doing so. Both are much smaller than the smooth era's 6 × 300ms: a pass is
- * now a jump rather than a journey, so the only thing being waited on is a
- * layout pass in which the crossed rows measure. */
 const AIM_PASSES = 4
 const AIM_SETTLE_MS = 50
 
+/** How long a send's re-pin outlasts the click — long enough to eat a trackpad's momentum tail. */
+export const REPIN_HOLD_MS = 750
+
+type RepinTarget = Pick<ReturnType<typeof useStickToBottomContext>, 'scrollToBottom' | 'state'>
+
+/**
+ * The send re-pin: a held, escape-proof pin, not one `scrollToBottom('instant')` — a trackpad's
+ * trailing momentum tick reads as escape intent and aborts the one-shot before its first frame
+ * (GOTCHAS "The send re-pin is a held pin"). Every line is load-bearing: clear the stale escape
+ * flag, hold through the momentum tail, seed the `ignoreEscapes` record the library only
+ * installs one rAF too late, and press the first scroll synchronously. Deliberate detach
+ * (`stopScroll`, drag-selection) still wins immediately.
+ */
+export function repinToBottom(stick: RepinTarget): void {
+  const { state } = stick
+  state.escapedFromLock = false
+  const settled = stick.scrollToBottom({ animation: 'instant', ignoreEscapes: true, duration: REPIN_HOLD_MS })
+  state.animation = { behavior: 'instant', ignoreEscapes: true, promise: Promise.resolve(settled) }
+  state.scrollTop = state.calculatedTargetScrollTop
+}
+
 export function useTranscriptJumps(options: {
   rows: TranscriptRow[]
   terminal: boolean
@@ -45,89 +41,44 @@ export function useTranscriptJumps(options: {
   jumpToRecapRef?: RefObject<(() => void) | null>
   repinRef?: RefObject<(() => void) | null>
 }): (rowIndex: number, align?: 'start' | 'center') => void {
-  const {
-    rows,
-    terminal,
-    stickyPrompt,
-    epoch,
-    promptRows,
-    scrollElement,
-    rowsRef,
-    virtualizer,
-    stick,
-    jumpToRecapRef,
-    repinRef,
-  } = options
+  const { rows, terminal, stickyPrompt, epoch, promptRows, scrollElement, rowsRef, virtualizer, stick, jumpToRecapRef, repinRef } = options
 
-  // The pending re-aim lives in a ref, and this is the whole reason: the
-  // closure is rebuilt every render to keep `rows` fresh, so anything held in
-  // its scope is torn down every render too — and a jump in flight re-renders
-  // constantly, because that is what rows mounting *is*. A timer in the
-  // closure would be cancelled by the very work it is waiting for.
   const aimTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
   useEffect(() => () => clearTimeout(aimTimer.current), [])
 
-  // `align` is the caller's, and every caller on this surface now asks for
-  // `'start'`: a jump target is a place to *start reading* — what you came for
-  // runs downward from it — so its line lands at exactly the top edge with the
-  // screen below it to read into, and centring wastes half the viewport on what
-  // you have already read. The recap boundary was the one exception, argued as
-  // "a seam, and seeing a little of what came before is how you place it"; in
-  // practice the seam is a starting line too. `'center'` survives as the
-  // default because it is what `scrollIntoView` means and a future caller may
-  // want it, not because anything here uses it.
-  //
-  // The two aligns aim differently, and the split is load-bearing. `'start'`
-  // computes the target offset itself — never `scrollIntoView` — because a
-  // prompt row is `position: sticky` and scrollIntoView aims at the element's
-  // *current* rect, which for a stuck row is wherever it is pinned: the jump
-  // would be a no-op on the very rows the scrubber's left lane points at. The
-  // target is the row's virtual start plus the rows container's own offset in
-  // the scroll content, plus the row's gap padding (the blank line is padding
-  // *on* the row, and the reader asked for the line, not its air) — which also
-  // lands exactly on the sticky engage threshold, so the row arrives pinned.
-  // Re-aims recompute it while rows crossed by the travel measure.
-  //
-  // `stopScroll()` first, because the pin spring is the other `scrollTop`
-  // writer and this is the library's own switch for "the user is leaving the
-  // bottom".
   const jumpToRow = (rowIndex: number, align: 'start' | 'center' = 'center') => {
-    if (rowIndex < 0 || rowIndex >= rows.length || !scrollElement) return
+    if (rowIndex < 0 || rowIndex >= rows.length || !scrollElement) {
+      return
+    }
     stick.stopScroll()
     clearTimeout(aimTimer.current)
+    // `'start'` computes the offset itself, never `scrollIntoView`: a prompt row is `position: sticky`, and while stuck its current rect is where it is pinned, so the jump would no-op on exactly the rows the scrubber's left lane points at.
     if (align === 'start') {
-      // The gap padding a row's *line* sits below — the target is the line,
-      // not its air.
-      const linePad = (index: number) =>
-        terminal && epoch && index > 0 && gapBefore(rows, index) ? epoch.line : 0
+      const linePad = (index: number) => (terminal && epoch && index > 0 && gapBefore(rows, index) ? epoch.line : 0)
       const target = () => {
         const start = virtualizer.measurementsCache[rowIndex]?.start ?? 0
         const spacer = rowsRef.current
-          ? rowsRef.current.getBoundingClientRect().top -
-            scrollElement.getBoundingClientRect().top +
-            scrollElement.scrollTop
+          ? rowsRef.current.getBoundingClientRect().top - scrollElement.getBoundingClientRect().top + scrollElement.scrollTop
           : 0
         let top = start + spacer + linePad(rowIndex)
-        // A non-prompt target lands *below* the pinned prompt, not under it:
-        // at this offset the turn's own prompt head is stuck at the top, and a
-        // jump that puts the line at zero puts it exactly behind that band —
-        // the scrubber's answer marks would all land their first line hidden.
-        // The head is one line tall. A jump *to* a prompt keeps zero: it
-        // becomes the pinned row itself.
         if (terminal && stickyPrompt && epoch && !promptRows.includes(rowIndex)) {
           const pinned = promptRows.some((index) => index < rowIndex)
-          if (pinned) top -= epoch.line
+          if (pinned) {
+            top -= epoch.line
+          }
         }
         return Math.round(top)
       }
       const aim = (attempt: number) => {
         const top = target()
         scrollElement.scrollTo({ top, behavior: 'instant' })
-        if (attempt >= AIM_PASSES) return
+        if (attempt >= AIM_PASSES) {
+          return
+        }
         aimTimer.current = setTimeout(() => {
-          // Off target: a row that measured under the jump moved it. (It can no
-          // longer be "still travelling" — that was the smooth era.)
-          if (Math.abs(scrollElement.scrollTop - target()) > 1) aim(attempt + 1)
+          if (Math.abs(scrollElement.scrollTop - target()) > 1) {
+            aim(attempt + 1)
+          }
         }, AIM_SETTLE_MS)
       }
       aim(0)
@@ -139,23 +90,20 @@ export function useTranscriptJumps(options: {
         row.scrollIntoView({ behavior: 'instant', block: align })
         return
       }
-      if (attempt >= AIM_PASSES) return
+      if (attempt >= AIM_PASSES) {
+        return
+      }
       virtualizer.scrollToIndex(rowIndex, { align, behavior: 'auto' })
-      // A frame or two, not a journey: the aim is only better once the rows
-      // crossed have mounted *and* been measured, and that is a layout pass
-      // away — but with the jump instant there is nothing else to wait for.
       aimTimer.current = setTimeout(() => aim(attempt + 1), AIM_SETTLE_MS)
     }
     aim(0)
   }
 
   useEffect(() => {
-    if (!jumpToRecapRef) return
+    if (!jumpToRecapRef) {
+      return
+    }
     jumpToRecapRef.current = () => {
-      // `'start'`, like the scrubber's marks. The seam is a place to *start
-      // reading* — everything you missed runs downward from it — so it belongs
-      // at the top edge with the screen below it to read into. Centring it
-      // spent half the viewport on rows you had already read.
       jumpToRow(
         rows.findIndex((row) => row.key === 'recap'),
         'start',
@@ -166,20 +114,14 @@ export function useTranscriptJumps(options: {
     }
   })
 
-  // Re-pin to the bottom. Published the same way as the jump above, and for the
-  // same reason: only the scroll context can do it, and it lives in here.
-  //
-  // `'instant'`, never the follow spring. The spring exists to keep up with a
-  // stream a few pixels at a time; from a reader who had scrolled a long way up
-  // it would animate the whole way down, which is the smooth-scroll-on-switch
-  // complaint this component already carries two guards against. The target is
-  // trustworthy because the bottom is `totalSize`, which the height calculator
-  // makes exact — unlike a mid-list row, which is why `jumpToRow` needs its
-  // aim/re-aim loop and this needs none.
   useEffect(() => {
-    if (!repinRef) return
+    if (!repinRef) {
+      return
+    }
     repinRef.current = () => {
-      void stick.scrollToBottom('instant')
+      // A pending jump's re-aim would land after the re-pin and yank the view back up.
+      clearTimeout(aimTimer.current)
+      repinToBottom(stick)
     }
     return () => {
       repinRef.current = null

package/src/components/prompt-area/animated-placeholder.tsx

@@ -18,7 +18,9 @@ export function AnimatedPlaceholder({ texts, interval = 3000 }: AnimatedPlacehol
   const [index, setIndex] = useState(0)
 
   useEffect(() => {
-    if (texts.length <= 1) return
+    if (texts.length <= 1) {
+      return
+    }
 
     const id = setInterval(() => {
       setIndex((prev) => (prev + 1) % texts.length)
@@ -31,10 +33,9 @@ export function AnimatedPlaceholder({ texts, interval = 3000 }: AnimatedPlacehol
     <div
       className="pointer-events-none absolute top-0 left-0 overflow-hidden select-none"
       style={{ color: 'var(--prompt-area-placeholder, var(--muted-foreground))' }}
-      aria-hidden="true">
-      <div
-        key={index}
-        className="animate-in fade-in-0 slide-in-from-top-4 duration-300 ease-in-out">
+      aria-hidden="true"
+    >
+      <div key={index} className="animate-in fade-in-0 slide-in-from-top-4 duration-300 ease-in-out">
         {texts[index]}
       </div>
     </div>

package/src/components/prompt-area/clipboard-helpers.ts

@@ -6,14 +6,7 @@
  * clipboard I/O concerns alongside its DOM traversal and chip-accessor helpers.
  */
 import type { Segment, ChipSegment } from './types.ts'
-import {
-  chipNodeToSegment,
-  getChipDisplay,
-  getChipTrigger,
-  getSelectionRange,
-  isChipElement,
-  isHTMLElement,
-} from './dom-helpers.ts'
+import { chipNodeToSegment, getChipDisplay, getChipTrigger, getSelectionRange, isChipElement, isHTMLElement } from './dom-helpers.ts'
 import { mergeAdjacentTextSegments } from './prompt-area-engine.ts'
 import { getTextLengthInRange } from './cursor-helpers.ts'
 
@@ -89,11 +82,15 @@ export function serializeFragmentToSegments(fragment: DocumentFragment): Segment
 
   walkFragmentNodes(fragment, {
     onText: (value) => {
-      if (value) segments.push({ type: 'text', text: value })
+      if (value) {
+        segments.push({ type: 'text', text: value })
+      }
     },
     onChip: (node) => {
       const chip = chipNodeToSegment(node)
-      if (chip) segments.push(chip)
+      if (chip) {
+        segments.push(chip)
+      }
     },
     onBreak: () => {
       segments.push({ type: 'text', text: '\n' })
@@ -109,11 +106,15 @@ export function serializeFragmentToSegments(fragment: DocumentFragment): Segment
 export function parseSegmentsFromClipboard(json: string): Segment[] | null {
   try {
     const parsed: unknown = JSON.parse(json)
-    if (!Array.isArray(parsed)) return null
+    if (!Array.isArray(parsed)) {
+      return null
+    }
 
     const segments: Segment[] = []
     for (const item of parsed) {
-      if (!isRecord(item)) return null
+      if (!isRecord(item)) {
+        return null
+      }
 
       if (item.type === 'text' && typeof item.text === 'string') {
         segments.push({ type: 'text', text: item.text })
@@ -148,13 +149,11 @@ export function parseSegmentsFromClipboard(json: string): Segment[] | null {
  * Splits any text segment that straddles the cursor so the pasted content lands
  * exactly at the cursor and nothing before or after is lost.
  */
-export function insertSegmentsAtCursor(
-  currentSegments: Segment[],
-  pastedSegments: Segment[],
-  editor: HTMLElement,
-): Segment[] {
+export function insertSegmentsAtCursor(currentSegments: Segment[], pastedSegments: Segment[], editor: HTMLElement): Segment[] {
   const range = getSelectionRange()
-  if (!range) return [...currentSegments, ...pastedSegments]
+  if (!range) {
+    return [...currentSegments, ...pastedSegments]
+  }
 
   const preRange = document.createRange()
   preRange.selectNodeContents(editor)
@@ -175,7 +174,9 @@ export function insertSegmentsAtCursor(
   for (const seg of currentSegments) {
     if (seg.type === 'chip') {
       const chipLen = seg.trigger.length + seg.displayText.length
-      if (offset >= cursorOffset) insertOnce()
+      if (offset >= cursorOffset) {
+        insertOnce()
+      }
       result.push(seg)
       offset += chipLen
       continue
@@ -194,9 +195,13 @@ export function insertSegmentsAtCursor(
       const splitAt = cursorOffset - offset
       const before = seg.text.slice(0, splitAt)
       const after = seg.text.slice(splitAt)
-      if (before) result.push({ type: 'text', text: before })
+      if (before) {
+        result.push({ type: 'text', text: before })
+      }
       insertOnce()
-      if (after) result.push({ type: 'text', text: after })
+      if (after) {
+        result.push({ type: 'text', text: after })
+      }
     }
     offset = segEnd
   }