@softize/opus 9.0.4 → 9.0.6

package/CHANGELOG.md

@@ -11,6 +11,18 @@ 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.6 — 2026-08-18
+
+**As falas do usuário no `Chat` voltam ao fluxo normal da conversa.** Elas usam fundo
+discreto, abraçam o conteúdo até 88% da largura e deixam de ter borda, sombra, pin no topo
+e truncamento. O scroll não precisa mais medir qual turno está pinado.
+
+## 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.6",
   "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

@@ -31,104 +31,14 @@ function defaultHumanizeTool(name: string): string {
   return 'Trabalhando…'
 }
 
-/**
- * A fala do usuário no topo do turno — o card que GRUDA (sticky) enquanto o turno está
- * em vista.
- *
- * Ela nasce com TETO de altura, e o motivo é concreto: um brief longo (o caso normal na
- * cabine do Maestro, onde a primeira mensagem é o enunciado inteiro da tarefa) ocupava a
- * sala toda — e, por ser sticky, ficava lá, cobrindo a resposta que a pessoa está
- * esperando ler. Quanto mais caprichado o enunciado, menos se via do trabalho.
- *
- * Truncar sozinho não serve: esta é a ÚNICA cópia do texto na tela, então o corte precisa
- * vir com o gesto de abrir. Colapsado mostra o começo com um esmaecido no pé; aberto
- * mostra tudo e continua sticky.
- *
- * O botão só aparece quando há de fato o que revelar — medido no DOM, não adivinhado por
- * contagem de caracteres, que erra com markdown (uma tabela ocupa muito mais que o texto
- * 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.
- */
+/** A fala do usuário: fundo discreto, largura pelo conteúdo e sem se sobrepor ao histórico. */
 const UserTurn = React.memo(function UserTurn({ content }: { content: string }): React.ReactElement {
-  const ref = React.useRef<HTMLDivElement>(null)
-  const [overflows, setOverflows] = React.useState(false)
-  const [expanded, setExpanded] = React.useState(false)
-  const [cap, setCap] = React.useState<number>()
-
-  // Teto do EXPANDIDO, em px, medido no scroll container — não em `vh`.
-  //
-  // A primeira tentativa usou `60vh`, e a revisão mostrou por que não serve: o bloco que
-  // contém o sticky é o scroll container, cuja altura vem do CONSUMIDOR (`h-full`), não da
-  // tela. Num contêiner mais baixo que 60vh — um `<Chat>` embutido num painel de 400px numa
-  // tela de 1080, por exemplo — o card pinado fica mais alto que o próprio scroll port, e o
-  // botão de fechar sai da região visível e NÃO volta enquanto o turno estiver em vista.
-  // Era o mesmo defeito, alcançado por outra porta.
-  //
-  // CONTRATO que isto passa a cobrar: o `<Chat>` precisa de altura LIMITADA pelo pai. Já
-  // era assim de fato (sem isso o `overflow-y-auto` e o `sticky` não significam nada), mas
-  // agora tem dente: com altura auto, o container é dimensionado pelo CONTEÚDO, e aí capar
-  // encolhe o conteúdo, que baixa o teto, que encolhe de novo — espiral, e provável
-  // "ResizeObserver loop completed with undelivered notifications". Com `vh` não existia,
-  // porque a viewport não depende do conteúdo.
-  React.useLayoutEffect(() => {
-    const scroll = ref.current?.closest('[data-slot="chat-scroll"]')
-    if (!(scroll instanceof HTMLElement)) return
-    const apply = (): void => setCap(Math.round(scroll.clientHeight * 0.6))
-    apply()
-    if (typeof ResizeObserver === 'undefined') return
-    const ro = new ResizeObserver(apply)
-    ro.observe(scroll)
-    return () => ro.disconnect()
-  }, [])
-
-  React.useLayoutEffect(() => {
-    if (expanded) return
-    const el = ref.current
-    if (el === null) return
-    const measure = (): void => setOverflows(el.scrollHeight > el.clientHeight + 1)
-    measure()
-    // A largura muda o quebra-linha, e com ela a resposta: um texto que cabe no rail
-    // aberto transborda com ele estreito. Sem observar, o botão some ou sobra na hora
-    // errada — e o rail do Maestro é redimensionável.
-    if (typeof ResizeObserver === 'undefined') return
-    const ro = new ResizeObserver(measure)
-    ro.observe(el)
-    return () => ro.disconnect()
-  }, [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
-        ref={ref}
-        data-slot="chat-user-body"
-        // Teto NOS DOIS estados, e o do aberto não é zelo: soltar a altura recriava o
-        // defeito que este componente veio matar, agora atrás de um clique — o card segue
-        // `sticky` com fundo opaco e volta a pintar por cima das falas seguintes. Pior, o
-        // botão de fechar é o último filho: com card mais alto que a viewport ele fica
-        // abaixo da dobra, e o sticky só consegue subir a altura da RESPOSTA (centenas de
-        // px contra milhares de card, no caso-alvo de brief enorme + resposta curta). A
-        // pessoa abria o brief e ficava sem como fechar. Com teto, o card inteiro cabe e o
-        // botão está sempre alcançável; o brief se lê rolando DENTRO dele.
-        className={cn(expanded ? 'overflow-y-auto' : 'max-h-40 overflow-hidden')}
-        style={expanded ? { maxHeight: cap } : undefined}
-      >
-        <Markdown content={content} />
-        {/* Esmaecido DENTRO do body, colado no fim do texto: como irmão do botão ele caía
-            ~28px abaixo do corte (mt-1 + linha do botão + py-2), e a maior parte dos 40px
-            pintava a faixa do botão em vez do texto truncado. */}
-        {overflows && !expanded && (
-          <div className="pointer-events-none sticky bottom-0 -mt-10 h-10 bg-gradient-to-t from-card to-transparent" />
-        )}
-      </div>
-      {overflows && (
-        <button
-          type="button"
-          onClick={() => setExpanded((v) => !v)}
-          className="mt-1 text-xs text-muted-foreground underline-offset-2 hover:underline"
-        >
-          {expanded ? 'Mostrar menos' : 'Mostrar mais'}
-        </button>
-      )}
+    <div
+      data-slot="chat-user"
+      className="w-fit max-w-[88%] self-end break-words rounded-xl bg-muted px-3 py-2 text-sm leading-snug"
+    >
+      <Markdown content={content} />
     </div>
   )
 })
@@ -180,8 +90,7 @@ function isAsyncIterable(value: unknown): value is AsyncIterable<ChatEvent> {
   return typeof value === 'object' && value !== null && Symbol.asyncIterator in value
 }
 
-/** Agrupa o transcript em turnos (mensagem do usuário + o que veio em resposta) —
- *  o cabeçalho do turno fica sticky enquanto o turno está em vista. */
+/** Agrupa o transcript em turnos (mensagem do usuário + o que veio em resposta). */
 function groupTurns(items: ChatTranscriptItem[]): Array<{ user: ChatTranscriptItem | null; rest: ChatTranscriptItem[] }> {
   const turns: Array<{ user: ChatTranscriptItem | null; rest: ChatTranscriptItem[] }> = []
   for (const item of items) {
@@ -216,7 +125,6 @@ const ChatTranscript = React.memo(function ChatTranscript({
   const scrollRef = React.useRef<HTMLDivElement>(null)
   const turns = React.useMemo(() => groupTurns(items), [items])
   const indicatorVisible = indicator !== undefined
-
   React.useEffect(() => {
     scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight })
   }, [items, indicator])
@@ -240,9 +148,7 @@ const ChatTranscript = React.memo(function ChatTranscript({
         // 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">
+            <div data-slot="chat-turn-user" className="flex justify-end py-1.5">
               <UserTurn content={turn.user.content} />
             </div>
           )}
@@ -307,8 +213,8 @@ const ChatTranscript = React.memo(function ChatTranscript({
 
 /**
  * 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
- * resposta rola), assistente em Markdown direto no corpo, tool como indicador vivo
+ * transcript em turnos, fala do usuário em fundo discreto, assistente em Markdown direto
+ * no corpo, tool como indicador vivo
  * (nunca mensagem) e artefatos via `renderArtifact`. Dois modos:
  *
  * - **Autogerenciado** (`send`): o componente é dono da conversa; o `send` devolve