@softize/opus 9.0.7 → 9.0.9

package/CHANGELOG.md

@@ -11,6 +11,22 @@ 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.9 — 2026-08-19
+
+**O composer do `Chat` passa a navegar pelas mensagens já enviadas.** Com o campo vazio,
+`↑` recupera a mensagem mais recente e continua pelas anteriores; `↓` avança e, depois da
+mais nova, devolve o rascunho. Enquanto há texto sendo editado, as setas preservam a
+navegação normal da textarea. O `Composer` expõe callbacks opcionais para shells que
+queiram fornecer outro histórico, sem mudar o comportamento padrão do componente isolado.
+
+## 9.0.8 — 2026-08-18
+
+**Scrollbars nativas passam a usar o acabamento discreto como parte do tema base.** Todo
+documento que importa `@softize/opus/ui/theme.css` recebe o indicador fino, revelado no
+hover ou foco, inclusive em conteúdo renderizado por portal. A classe
+`scrollbar-subtle` deixa de ser necessária; iframes continuam isolados e precisam importar
+o tema no próprio documento.
+
 ## 9.0.7 — 2026-08-18
 
 **Scrollbars nativas podem compartilhar um acabamento discreto e previsível.** A classe

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@softize/opus",
-  "version": "9.0.7",
+  "version": "9.0.9",
   "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

@@ -133,7 +133,7 @@ const ChatTranscript = React.memo(function ChatTranscript({
     <div
       ref={scrollRef}
       data-slot="chat-scroll"
-      className="scrollbar-subtle flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-4"
+      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">
@@ -212,7 +212,8 @@ const ChatTranscript = React.memo(function ChatTranscript({
 })
 
 /**
- * Chat da casa: lista de mensagens + composer (Enter envia / Shift+Enter quebra linha),
+ * Chat da casa: lista de mensagens + composer (Enter envia / Shift+Enter quebra linha;
+ * com o campo vazio, ↑/↓ navegam pelas mensagens anteriores do usuário),
  * 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:
@@ -246,11 +247,52 @@ export function Chat({
   const [input, setInput] = React.useState('')
   const [ownBusy, setOwnBusy] = React.useState(false)
   const [ownActivity, setOwnActivity] = React.useState<string | null>(null)
+  const historyCursor = React.useRef<number | null>(null)
+  const historyDraft = React.useRef('')
 
   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
+  const inputHistory = React.useMemo(
+    () => items.filter((item): item is ChatMessage => item.role === 'user').map((item) => item.content),
+    [items],
+  )
+
+  function changeInput(value: string): void {
+    historyCursor.current = null
+    setInput(value)
+  }
+
+  function showPreviousInput(): boolean {
+    if (inputHistory.length === 0) return false
+
+    if (historyCursor.current === null) {
+      // Não rouba ↑ do cursor em mensagens novas ou multilinha. A navegação começa no
+      // composer vazio, como em shells; depois disso ↑/↓ pertencem ao histórico.
+      if (input !== '') return false
+      historyDraft.current = input
+      historyCursor.current = inputHistory.length - 1
+    } else if (historyCursor.current > 0) {
+      historyCursor.current -= 1
+    }
+
+    setInput(inputHistory[historyCursor.current])
+    return true
+  }
+
+  function showNextInput(): boolean {
+    if (historyCursor.current === null) return false
+
+    if (historyCursor.current < inputHistory.length - 1) {
+      historyCursor.current += 1
+      setInput(inputHistory[historyCursor.current])
+    } else {
+      historyCursor.current = null
+      setInput(historyDraft.current)
+    }
+    return true
+  }
 
   const kickoffRan = React.useRef(false)
   React.useEffect(() => {
@@ -264,6 +306,8 @@ export function Chat({
   async function submit(): Promise<void> {
     const text = input.trim()
     if (text === '' || busy) return
+    historyCursor.current = null
+    historyDraft.current = ''
     setInput('')
 
     if (controlled) {
@@ -339,8 +383,10 @@ export function Chat({
         {notice}
         <Composer
           value={input}
-          onChange={setInput}
+          onChange={changeInput}
           onSubmit={() => void submit()}
+          onHistoryPrevious={showPreviousInput}
+          onHistoryNext={showNextInput}
           busy={busy}
           placeholder={placeholder}
           actions={composerActions}

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

@@ -12,6 +12,10 @@ export interface ComposerProps {
   onChange: (value: string) => void
   /** Enter (sem Shift) ou o botão enviar. Só dispara quando dá pra enviar (ver `submitDisabled`). */
   onSubmit: () => void
+  /** Navegação opcional pelo histórico do dono do composer. Retorne `true` quando a tecla
+   *  foi consumida; o `<Chat>` usa isso para ↑/↓ sem interferir no cursor normal. */
+  onHistoryPrevious?: () => boolean
+  onHistoryNext?: () => boolean
   /** Trava o composer enquanto o turno/ação corre — o enviar vira spinner. */
   busy?: boolean
   /** Gate EXTRA de envio além de "vazio" e "busy" (ex.: falta escolher o app). Desabilita o
@@ -39,6 +43,8 @@ export function Composer({
   value,
   onChange,
   onSubmit,
+  onHistoryPrevious,
+  onHistoryNext,
   busy = false,
   submitDisabled = false,
   placeholder = 'Escreva uma mensagem…',
@@ -59,6 +65,14 @@ export function Composer({
       value={value}
       onChange={(e) => onChange(e.target.value)}
       onKeyDown={(e) => {
+        if (e.key === 'ArrowUp' && onHistoryPrevious?.()) {
+          e.preventDefault()
+          return
+        }
+        if (e.key === 'ArrowDown' && onHistoryNext?.()) {
+          e.preventDefault()
+          return
+        }
         if (e.key === 'Enter' && !e.shiftKey) {
           e.preventDefault()
           fire()

package/src/ui/docs/content/chat.md

@@ -1,6 +1,6 @@
 ## Básico
 
-Um chat mínimo: lista de mensagens + composer. A conversa é gerenciada por dentro (estado, loading, auto-scroll; **Enter** envia, **Shift+Enter** quebra linha) — a inteligência vem da prop `send`. O `greeting` é o estado vazio (centrado; some quando a conversa começa e NÃO entra no transcript). Dê altura ao container.
+Um chat mínimo: lista de mensagens + composer. A conversa é gerenciada por dentro (estado, loading, auto-scroll; **Enter** envia, **Shift+Enter** quebra linha) — a inteligência vem da prop `send`. Com o composer vazio, **↑** recupera as mensagens anteriores do usuário e **↓** volta em direção ao rascunho; durante a edição, as setas continuam movendo o cursor normalmente. O `greeting` é o estado vazio (centrado; some quando a conversa começa e NÃO entra no transcript). Dê altura ao container.
 
 ```tsx preview
 <div className="h-96 rounded-lg border">

package/src/ui/docs/content/composer.md

@@ -1,6 +1,6 @@
 ## Básico
 
-A caixa de escrever da casa: textarea numa pílula elevada (`rounded-card` + `border` + `shadow-sm`), **Enter** envia / **Shift+Enter** quebra linha, enviar dentro. É o composer do [Chat](/components/chat) extraído — use SOZINHO quando há entrada de texto mas não um chat (ex.: criar uma sessão). Controlado: o dono do texto é você.
+A caixa de escrever da casa: textarea numa pílula elevada (`rounded-card` + `border` + `shadow-sm`), **Enter** envia / **Shift+Enter** quebra linha, enviar dentro. É o composer do [Chat](/components/chat) extraído — use SOZINHO quando há entrada de texto mas não um chat (ex.: criar uma sessão). Controlado: o dono do texto é você. Os callbacks opcionais `onHistoryPrevious` e `onHistoryNext` permitem que esse dono consuma **↑/↓**; sem eles, as setas mantêm o comportamento nativo da textarea.
 
 ```tsx preview col
 const [text, setText] = React.useState('')

package/src/ui/theme.css

@@ -180,39 +180,39 @@
   }
 }
 
-/* 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. */
+/* Scrollbar nativa da casa: todo scroller do documento compartilha o mesmo acabamento,
+ * inclusive conteúdo renderizado por portal. 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 e devem importar o tema no próprio documento. */
 @media (hover: hover) {
-  .scrollbar-subtle,
-  .scrollbar-subtle * {
+  :root,
+  :root * {
     scrollbar-color: transparent transparent;
     scrollbar-width: thin;
   }
-  .scrollbar-subtle:is(:hover, :focus, :focus-within),
-  .scrollbar-subtle *:is(:hover, :focus, :focus-within) {
+  :root:is(:hover, :focus, :focus-within),
+  :root *: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 {
+  :root::-webkit-scrollbar,
+  :root *::-webkit-scrollbar {
     width: 0.5rem;
     height: 0.5rem;
   }
-  .scrollbar-subtle::-webkit-scrollbar-track,
-  .scrollbar-subtle *::-webkit-scrollbar-track {
+  :root::-webkit-scrollbar-track,
+  :root *::-webkit-scrollbar-track {
     background: transparent;
   }
-  .scrollbar-subtle::-webkit-scrollbar-thumb,
-  .scrollbar-subtle *::-webkit-scrollbar-thumb {
+  :root::-webkit-scrollbar-thumb,
+  :root *::-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 {
+  :root:is(:hover, :focus, :focus-within)::-webkit-scrollbar-thumb,
+  :root *:is(:hover, :focus, :focus-within)::-webkit-scrollbar-thumb {
     background-color: color-mix(in srgb, var(--muted-foreground) 35%, transparent);
   }
 }