@softize/opus 9.0.5 → 9.0.7

package/CHANGELOG.md

@@ -11,6 +11,20 @@ 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.7 — 2026-08-18
+
+**Scrollbars nativas podem compartilhar um acabamento discreto e previsível.** A classe
+`scrollbar-subtle` veste um scroller ou todo um shell: o indicador fino aparece ao passar
+o ponteiro ou navegar com teclado pela região, sem depender da preferência global de
+barras do macOS e sem adicionar listeners ao caminho de scroll. O `Chat` já adota o novo
+acabamento.
+
+## 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@softize/opus",
-  "version": "9.0.5",
+  "version": "9.0.7",
   "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,116 +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.
- */
-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)
-  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])
-
+/** 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 {
   return (
     <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',
-      )}
+      className="w-fit max-w-[88%] self-end break-words rounded-xl bg-muted px-3 py-2 text-sm leading-snug"
     >
-      <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>
-      )}
+      <Markdown content={content} />
     </div>
   )
 })
@@ -192,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) {
@@ -228,65 +125,15 @@ 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 })
-    measurePinnedTurn()
-  }, [items, indicator, measurePinnedTurn])
+  }, [items, indicator])
 
   return (
     <div
       ref={scrollRef}
       data-slot="chat-scroll"
-      className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-4"
+      className="scrollbar-subtle 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">
@@ -301,15 +148,8 @@ 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
-              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 data-slot="chat-turn-user" className="flex justify-end py-1.5">
+              <UserTurn content={turn.user.content} />
             </div>
           )}
           {turn.rest.map((item, i) => {
@@ -373,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

package/src/ui/theme.css

@@ -180,6 +180,43 @@
   }
 }
 
+/* Escopo de scrollbar discreta. Pode vestir o próprio scroller (como o Chat) ou um shell:
+ * nesse caso todos os scrolls nativos descendentes compartilham o mesmo acabamento. Isso
+ * elimina a variação do macOS entre raiz, elementos aninhados, mouse e trackpad sem trocar
+ * o mecanismo nativo nem adicionar trabalho em JS. Firefox usa scrollbar-color;
+ * Chromium/Safari usam os pseudos abaixo. Iframes continuam sendo documentos isolados. */
+@media (hover: hover) {
+  .scrollbar-subtle,
+  .scrollbar-subtle * {
+    scrollbar-color: transparent transparent;
+    scrollbar-width: thin;
+  }
+  .scrollbar-subtle:is(:hover, :focus, :focus-within),
+  .scrollbar-subtle *:is(:hover, :focus, :focus-within) {
+    scrollbar-color: color-mix(in srgb, var(--muted-foreground) 35%, transparent) transparent;
+  }
+  .scrollbar-subtle::-webkit-scrollbar,
+  .scrollbar-subtle *::-webkit-scrollbar {
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+  .scrollbar-subtle::-webkit-scrollbar-track,
+  .scrollbar-subtle *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .scrollbar-subtle::-webkit-scrollbar-thumb,
+  .scrollbar-subtle *::-webkit-scrollbar-thumb {
+    border: 2px solid transparent;
+    border-radius: 9999px;
+    background-color: transparent;
+    background-clip: content-box;
+  }
+  .scrollbar-subtle:is(:hover, :focus, :focus-within)::-webkit-scrollbar-thumb,
+  .scrollbar-subtle *:is(:hover, :focus, :focus-within)::-webkit-scrollbar-thumb {
+    background-color: color-mix(in srgb, var(--muted-foreground) 35%, transparent);
+  }
+}
+
 /* Markdown (componente `prose`) segue os tokens da casa — light/dark sozinho via as vars
    (que já viram no `.dark`), então dispensa o `prose-invert`. O corpo é muted (como era na
    versão à mão); headings/bold no foreground; bordas/regras no --border. */