@softize/opus 9.0.4 → 9.0.5

package/CHANGELOG.md

@@ -11,6 +11,12 @@ Depois de qualquer bump, rode os gates (`typecheck` · `test` · `opus check` ·
 > tinha ficado sem registro nenhum, o que é exatamente o caso que este arquivo existe
 > pra cobrir.
 
+## 9.0.5 — 2026-08-18
+
+**Cards de usuário no `Chat` ficam planos enquanto percorrem o histórico.** A sombra passa
+a indicar somente o turno efetivamente pinado no topo durante o scroll, em vez de elevar
+todas as mensagens que apenas têm comportamento `sticky` disponível.
+
 ## 9.0.4 — 2026-08-18
 
 **Digitar no `Chat` deixa de reprocessar o histórico inteiro.** O transcript agora é uma

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@softize/opus",
-  "version": "9.0.4",
+  "version": "9.0.5",
   "description": "End-to-end action protocol for TypeScript. Single package with subpath exports (core + adapters).",
   "license": "MIT",
   "type": "module",

package/src/ui/components/primitives/chat.tsx

@@ -49,7 +49,13 @@ function defaultHumanizeTool(name: string): string {
  * dela sugere). A medida só vale COLAPSADO: aberto, `scrollHeight === clientHeight` e a
  * pergunta "transborda?" passaria a responder não, sumindo com o botão de fechar.
  */
-const UserTurn = React.memo(function UserTurn({ content }: { content: string }): React.ReactElement {
+const UserTurn = React.memo(function UserTurn({
+  content,
+  pinned,
+}: {
+  content: string
+  pinned: boolean
+}): React.ReactElement {
   const ref = React.useRef<HTMLDivElement>(null)
   const [overflows, setOverflows] = React.useState(false)
   const [expanded, setExpanded] = React.useState(false)
@@ -97,7 +103,13 @@ const UserTurn = React.memo(function UserTurn({ content }: { content: string }):
   }, [content, expanded])
 
   return (
-    <div data-slot="chat-user" className="break-words rounded-xl border border-border bg-card px-3 py-2 text-sm leading-snug shadow-sm">
+    <div
+      data-slot="chat-user"
+      className={cn(
+        'break-words rounded-xl border border-border bg-card px-3 py-2 text-sm leading-snug',
+        pinned && 'shadow-sm',
+      )}
+    >
       <div
         ref={ref}
         data-slot="chat-user-body"
@@ -216,10 +228,59 @@ const ChatTranscript = React.memo(function ChatTranscript({
   const scrollRef = React.useRef<HTMLDivElement>(null)
   const turns = React.useMemo(() => groupTurns(items), [items])
   const indicatorVisible = indicator !== undefined
+  const [pinnedTurn, setPinnedTurn] = React.useState<number | null>(null)
+  const pinFrameRef = React.useRef<number | undefined>(undefined)
+
+  const measurePinnedTurn = React.useCallback((): void => {
+    const scroll = scrollRef.current
+    if (scroll === null) return
+
+    const rect = scroll.getBoundingClientRect()
+    const hit = document.elementFromPoint(rect.left + rect.width / 2, rect.top + 1)
+    const header = hit?.closest<HTMLElement>('[data-slot="chat-turn-user"]') ?? null
+    const index = Number(header?.dataset['turn'])
+    const next = header !== null && Number.isInteger(index) ? index : null
+    setPinnedTurn((current) => current === next ? current : next)
+  }, [])
+
+  const schedulePinnedTurnMeasure = React.useCallback((): void => {
+    if (pinFrameRef.current !== undefined) return
+    pinFrameRef.current = requestAnimationFrame(() => {
+      pinFrameRef.current = undefined
+      measurePinnedTurn()
+    })
+  }, [measurePinnedTurn])
+
+  React.useLayoutEffect(() => {
+    const scroll = scrollRef.current
+    if (scroll === null) return
+    measurePinnedTurn()
+    scroll.addEventListener('scroll', schedulePinnedTurnMeasure, { passive: true })
+    if (typeof ResizeObserver === 'undefined') {
+      return () => {
+        if (pinFrameRef.current !== undefined) {
+          cancelAnimationFrame(pinFrameRef.current)
+          pinFrameRef.current = undefined
+        }
+        scroll.removeEventListener('scroll', schedulePinnedTurnMeasure)
+      }
+    }
+    const observer = new ResizeObserver(measurePinnedTurn)
+    observer.observe(scroll)
+    return () => {
+      if (pinFrameRef.current !== undefined) {
+        cancelAnimationFrame(pinFrameRef.current)
+        pinFrameRef.current = undefined
+      }
+      observer.disconnect()
+      scroll.removeEventListener('scroll', schedulePinnedTurnMeasure)
+    }
+  }, [turns.length, measurePinnedTurn, schedulePinnedTurnMeasure])
 
   React.useEffect(() => {
     scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight })
-  }, [items, indicator])
+    measurePinnedTurn()
+  }, [items, indicator, measurePinnedTurn])
 
   return (
     <div
@@ -242,8 +303,13 @@ const ChatTranscript = React.memo(function ChatTranscript({
           {turn.user !== null && turn.user.role === 'user' && (
             // Cabeçalho do turno: gruda no topo enquanto o turno está em vista (igual
             // Claude) — a mensagem do usuário num card, não num balão preenchido.
-            <div className="sticky top-0 z-10 py-1.5">
-              <UserTurn content={turn.user.content} />
+            <div
+              data-slot="chat-turn-user"
+              data-turn={ti}
+              data-pinned={pinnedTurn === ti ? 'true' : undefined}
+              className="sticky top-0 z-10 py-1.5"
+            >
+              <UserTurn content={turn.user.content} pinned={pinnedTurn === ti} />
             </div>
           )}
           {turn.rest.map((item, i) => {