@softize/opus 9.0.3 → 9.0.5

package/CHANGELOG.md

@@ -11,6 +11,19 @@ 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
+fronteira memoizada separada do estado do composer, e cada bloco Markdown reaproveita o
+resultado enquanto seu conteúdo não muda. Conversas longas mantêm o custo de digitação
+constante; durante streaming, somente a mensagem alterada volta a passar pelo parser.
+
 ## 9.0.3 — 2026-08-12
 
 **O pre-push ignora worktrees internos do Maestro.** Projetos sob `.maestro/` pertencem

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@softize/opus",
-  "version": "9.0.3",
+  "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.
  */
-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 @@ function UserTurn({ content }: { content: string }): React.ReactElement {
   }, [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"
@@ -131,7 +143,7 @@ function UserTurn({ content }: { content: string }): React.ReactElement {
       )}
     </div>
   )
-}
+})
 
 export interface ChatProps {
   /** Modo AUTOGERENCIADO: envia a conversa (o histórico, já com a nova mensagem) e devolve
@@ -194,6 +206,171 @@ function groupTurns(items: ChatTranscriptItem[]): Array<{ user: ChatTranscriptIt
   return turns
 }
 
+interface ChatTranscriptProps {
+  items: ChatTranscriptItem[]
+  indicator: string | null | undefined
+  greeting: string | undefined
+  renderArtifact: ChatProps['renderArtifact']
+}
+
+/**
+ * O transcript é uma fronteira de renderização: editar o composer não muda nenhuma destas
+ * props e, portanto, não deve percorrer nem reprocessar o histórico. Quando o transcript
+ * realmente muda (streaming/replay), o Markdown memoizado abaixo de cada item preserva as
+ * mensagens cujo conteúdo continua igual.
+ */
+const ChatTranscript = React.memo(function ChatTranscript({
+  items,
+  indicator,
+  greeting,
+  renderArtifact,
+}: ChatTranscriptProps): React.ReactElement {
+  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 })
+    measurePinnedTurn()
+  }, [items, indicator, measurePinnedTurn])
+
+  return (
+    <div
+      ref={scrollRef}
+      data-slot="chat-scroll"
+      className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-4"
+    >
+      {items.length === 0 && !indicatorVisible && greeting !== undefined && (
+        <div data-slot="chat-empty" className="m-auto max-w-[280px] text-center text-muted-foreground">
+          <div className="mb-2 text-4xl">✦</div>
+          <p className="text-sm leading-relaxed">{greeting}</p>
+        </div>
+      )}
+      {turns.map((turn, ti) => (
+        // Hierarquia do espaço: as falas de um mesmo turno são um raciocínio contínuo
+        // (o agente narra o que vai fazendo), então andam juntas; quem separa é o gap
+        // MAIOR entre turnos. Com o mesmo gap nos dois níveis, um turno de oito falas
+        // curtas virava uma parede uniforme, sem começo nem fim visíveis.
+        <div key={ti} className="flex flex-col gap-1">
+          {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
+              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) => {
+            if (item.role === 'artifact') {
+              return (
+                <div key={i} data-slot="chat-artifact" className="flex justify-start">
+                  {renderArtifact !== undefined ? (
+                    renderArtifact(item.artifact)
+                  ) : (
+                    <a
+                      href={item.artifact.ref}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="rounded-xl border bg-card px-3.5 py-2 text-sm underline-offset-2 hover:underline"
+                    >
+                      {item.artifact.title ?? item.artifact.ref}
+                    </a>
+                  )}
+                </div>
+              )
+            }
+            if (item.role === 'error') {
+              return (
+                <div
+                  key={i}
+                  className="max-w-[88%] self-start rounded-xl border border-destructive/30 bg-destructive/10 px-3.5 py-2.5 text-sm text-destructive"
+                >
+                  {item.content}
+                </div>
+              )
+            }
+            // O assistente responde direto no corpo, em Markdown (convenção da casa).
+            return (
+              <div key={i} className="break-words px-1 text-sm leading-snug">
+                <Markdown content={item.content} />
+              </div>
+            )
+          })}
+        </div>
+      ))}
+      {indicatorVisible && (
+        <div
+          data-slot="chat-activity"
+          className="flex items-center gap-2 py-1 text-xs text-muted-foreground"
+        >
+          <span className="flex gap-1">
+            {[0, 1, 2].map((i) => (
+              <span
+                key={i}
+                className="h-1.5 w-1.5 animate-bounce rounded-full bg-muted-foreground/50"
+                style={{ animationDelay: `${i * 150}ms` }}
+              />
+            ))}
+          </span>
+          <span>{indicator ?? 'Pensando…'}</span>
+        </div>
+      )}
+    </div>
+  )
+})
+
 /**
  * Chat da casa: lista de mensagens + composer (Enter envia / Shift+Enter quebra linha),
  * transcript em turnos com o cabeçalho sticky (a pergunta fica à vista enquanto a
@@ -229,17 +406,12 @@ export function Chat({
   const [input, setInput] = React.useState('')
   const [ownBusy, setOwnBusy] = React.useState(false)
   const [ownActivity, setOwnActivity] = React.useState<string | null>(null)
-  const scrollRef = React.useRef<HTMLDivElement>(null)
 
   const items = controlled ? messages : ownItems
   const busy = controlled ? (busyProp ?? false) : ownBusy
   // Indicador: no controlado o app manda (undefined esconde); no autogerenciado segue o busy.
   const indicator = controlled ? activityProp : ownBusy ? ownActivity : undefined
 
-  React.useEffect(() => {
-    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight })
-  }, [items, indicator])
-
   const kickoffRan = React.useRef(false)
   React.useEffect(() => {
     if (controlled || kickoff === undefined || kickoffRan.current) return
@@ -312,86 +484,14 @@ export function Chat({
     }
   }
 
-  const indicatorVisible = indicator !== undefined
-
   return (
     <div data-slot="chat" className={cn('flex h-full flex-col', className)}>
-      <div ref={scrollRef} data-slot="chat-scroll" className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-4">
-        {items.length === 0 && !indicatorVisible && greeting !== undefined && (
-          <div data-slot="chat-empty" className="m-auto max-w-[280px] text-center text-muted-foreground">
-            <div className="mb-2 text-4xl">✦</div>
-            <p className="text-sm leading-relaxed">{greeting}</p>
-          </div>
-        )}
-        {groupTurns(items).map((turn, ti) => (
-          // Hierarquia do espaço: as falas de um mesmo turno são um raciocínio contínuo
-          // (o agente narra o que vai fazendo), então andam juntas; quem separa é o gap
-          // MAIOR entre turnos. Com o mesmo gap nos dois níveis, um turno de oito falas
-          // curtas virava uma parede uniforme, sem começo nem fim visíveis.
-          <div key={ti} className="flex flex-col gap-1">
-            {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>
-            )}
-            {turn.rest.map((item, i) => {
-              if (item.role === 'artifact') {
-                return (
-                  <div key={i} data-slot="chat-artifact" className="flex justify-start">
-                    {renderArtifact !== undefined ? (
-                      renderArtifact(item.artifact)
-                    ) : (
-                      <a
-                        href={item.artifact.ref}
-                        target="_blank"
-                        rel="noreferrer"
-                        className="rounded-xl border bg-card px-3.5 py-2 text-sm underline-offset-2 hover:underline"
-                      >
-                        {item.artifact.title ?? item.artifact.ref}
-                      </a>
-                    )}
-                  </div>
-                )
-              }
-              if (item.role === 'error') {
-                return (
-                  <div
-                    key={i}
-                    className="max-w-[88%] self-start rounded-xl border border-destructive/30 bg-destructive/10 px-3.5 py-2.5 text-sm text-destructive"
-                  >
-                    {item.content}
-                  </div>
-                )
-              }
-              // O assistente responde direto no corpo, em Markdown (convenção da casa).
-              return (
-                <div
-                  key={i}
-                  className="break-words px-1 text-sm leading-snug"
-                >
-                  <Markdown content={item.content} />
-                </div>
-              )
-            })}
-          </div>
-        ))}
-        {indicatorVisible && (
-          <div data-slot="chat-activity" className="flex items-center gap-2 py-1 text-xs text-muted-foreground">
-            <span className="flex gap-1">
-              {[0, 1, 2].map((i) => (
-                <span
-                  key={i}
-                  className="h-1.5 w-1.5 animate-bounce rounded-full bg-muted-foreground/50"
-                  style={{ animationDelay: `${i * 150}ms` }}
-                />
-              ))}
-            </span>
-            <span>{indicator ?? 'Pensando…'}</span>
-          </div>
-        )}
-      </div>
+      <ChatTranscript
+        items={items}
+        indicator={indicator}
+        greeting={greeting}
+        renderArtifact={renderArtifact}
+      />
       {/* Composer da casa (pílula elevada, enviar dentro). Extraído no <Composer> — o Chat
           liga texto/envio e repassa `composerActions` pros seletores da conversa (agente,
           app…); o <Composer> sozinho segue sendo o caminho de quem não tem chat. */}

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

@@ -10,6 +10,7 @@
  * A tipografia é delegada ao `prose` (@tailwindcss/typography), mapeado pros tokens da casa
  * no theme.css; as tags saem SEMÂNTICAS e sem classe.
  */
+import * as React from 'react'
 import MarkdownIt from 'markdown-it'
 
 /** A instância ÚNICA — a doc (`DocMarkdown`) importa esta mesma. Duas instâncias com
@@ -21,7 +22,10 @@ export interface MarkdownProps {
   className?: string
 }
 
-export function Markdown({ content, className }: MarkdownProps): React.ReactElement {
+export const Markdown = React.memo(function Markdown({
+  content,
+  className,
+}: MarkdownProps): React.ReactElement {
   return (
     <div
       data-slot="markdown"
@@ -32,4 +36,4 @@ export function Markdown({ content, className }: MarkdownProps): React.ReactElem
       dangerouslySetInnerHTML={{ __html: markdownIt.render(content) }}
     />
   )
-}
+})