redmine-context 1.0.0 → 1.1.0

package/dist/surfaces/tui/banner.js

@@ -0,0 +1,93 @@
+/**
+ * Arte ASCII do banner da tela de abertura (#190 — pacote estético).
+ *
+ * As três variantes são CONSTANTES, não geradas em runtime: o texto é sempre
+ * `redmine-context`, então trazer uma dependência de fontes (figlet/cfonts) para
+ * recalcular a mesma string a cada boot não se paga — custaria peso no pacote e
+ * tempo de start. Para regenerar (fonte `ANSI Shadow` / `Small` do figlet):
+ *
+ *   npx figlet -f "ANSI Shadow" redmine-context
+ *   npx figlet -f "ANSI Shadow" redmine ; npx figlet -f "ANSI Shadow" context
+ *   npx figlet -f Small redmine-context
+ *
+ * A seleção é PURA ({@link selectBanner}) e depende de dois sinais que a TUI já
+ * possui: a largura do terminal (`../hooks/use-terminal-width.js`) e o suporte a
+ * Unicode (`../glyphs.js`) — o mesmo sinal que degrada os frames braille do
+ * spinner no terminal legado do Windows (M5-09, #84). Sem essa degradação, os
+ * blocos `█`/`╗` do ANSI Shadow virariam mojibake.
+ */
+const WIDE_LINES = [
+    '██████╗ ███████╗██████╗ ███╗   ███╗██╗███╗   ██╗███████╗     ██████╗ ██████╗ ███╗   ██╗████████╗███████╗██╗  ██╗████████╗',
+    '██╔══██╗██╔════╝██╔══██╗████╗ ████║██║████╗  ██║██╔════╝    ██╔════╝██╔═══██╗████╗  ██║╚══██╔══╝██╔════╝╚██╗██╔╝╚══██╔══╝',
+    '██████╔╝█████╗  ██║  ██║██╔████╔██║██║██╔██╗ ██║█████╗█████╗██║     ██║   ██║██╔██╗ ██║   ██║   █████╗   ╚███╔╝    ██║   ',
+    '██╔══██╗██╔══╝  ██║  ██║██║╚██╔╝██║██║██║╚██╗██║██╔══╝╚════╝██║     ██║   ██║██║╚██╗██║   ██║   ██╔══╝   ██╔██╗    ██║   ',
+    '██║  ██║███████╗██████╔╝██║ ╚═╝ ██║██║██║ ╚████║███████╗    ╚██████╗╚██████╔╝██║ ╚████║   ██║   ███████╗██╔╝ ██╗   ██║   ',
+    '╚═╝  ╚═╝╚══════╝╚═════╝ ╚═╝     ╚═╝╚═╝╚═╝  ╚═══╝╚══════╝     ╚═════╝ ╚═════╝ ╚═╝  ╚═══╝   ╚═╝   ╚══════╝╚═╝  ╚═╝   ╚═╝   ',
+];
+const STACKED_LINES = [
+    '██████╗ ███████╗██████╗ ███╗   ███╗██╗███╗   ██╗███████╗',
+    '██╔══██╗██╔════╝██╔══██╗████╗ ████║██║████╗  ██║██╔════╝',
+    '██████╔╝█████╗  ██║  ██║██╔████╔██║██║██╔██╗ ██║█████╗  ',
+    '██╔══██╗██╔══╝  ██║  ██║██║╚██╔╝██║██║██║╚██╗██║██╔══╝  ',
+    '██║  ██║███████╗██████╔╝██║ ╚═╝ ██║██║██║ ╚████║███████╗',
+    '╚═╝  ╚═╝╚══════╝╚═════╝ ╚═╝     ╚═╝╚═╝╚═╝  ╚═══╝╚══════╝',
+    ' ██████╗ ██████╗ ███╗   ██╗████████╗███████╗██╗  ██╗████████╗',
+    '██╔════╝██╔═══██╗████╗  ██║╚══██╔══╝██╔════╝╚██╗██╔╝╚══██╔══╝',
+    '██║     ██║   ██║██╔██╗ ██║   ██║   █████╗   ╚███╔╝    ██║   ',
+    '██║     ██║   ██║██║╚██╗██║   ██║   ██╔══╝   ██╔██╗    ██║   ',
+    '╚██████╗╚██████╔╝██║ ╚████║   ██║   ███████╗██╔╝ ██╗   ██║   ',
+    ' ╚═════╝ ╚═════╝ ╚═╝  ╚═══╝   ╚═╝   ╚══════╝╚═╝  ╚═╝   ╚═╝   ',
+];
+const ASCII_LINES = [
+    '             _       _                         _           _   ',
+    '  _ _ ___ __| |_ __ (_)_ _  ___ ___ __ ___ _ _| |_ _____ _| |_ ',
+    ' | \'_/ -_) _` | \'  \\| | \' \\/ -_)___/ _/ _ \\ \' \\  _/ -_) \\ /  _|',
+    ' |_| \\___\\__,_|_|_|_|_|_||_\\___|   \\__\\___/_||_\\__\\___/_\\_\\\\__|',
+];
+/** Largura mínima (colunas) exigida por cada variante. */
+const MIN_WIDTH = {
+    wide: 121,
+    stacked: 61,
+    ascii: 63,
+};
+/** Linhas de cada variante, na ordem de renderização. */
+const LINES = {
+    wide: WIDE_LINES,
+    stacked: STACKED_LINES,
+    ascii: ASCII_LINES,
+};
+/**
+ * Escolhe a variante do banner para o terminal atual.
+ *
+ * Ordem de preferência, sempre respeitando a largura disponível:
+ * `wide` (uma linha, Unicode) → `stacked` (duas linhas, Unicode) → `ascii`
+ * (ASCII puro) → `plain` (sem arte; a tela cai no nome em texto).
+ *
+ * @param width - Colunas disponíveis (ver `useTerminalWidth`).
+ * @param unicode - `true` quando o terminal renderiza os blocos do ANSI Shadow.
+ * @returns A variante a renderizar.
+ * @example
+ * selectBanner(140, true) // 'wide'
+ * selectBanner(80, true)  // 'stacked' (não cabe a wide)
+ * selectBanner(80, false) // 'ascii'  (sem Unicode)
+ */
+export function selectBanner(width, unicode) {
+    if (unicode) {
+        if (width >= MIN_WIDTH.wide)
+            return 'wide';
+        if (width >= MIN_WIDTH.stacked)
+            return 'stacked';
+    }
+    if (width >= MIN_WIDTH.ascii)
+        return 'ascii';
+    return 'plain';
+}
+/**
+ * Linhas da variante escolhida.
+ *
+ * @param variant - Variante de {@link selectBanner}.
+ * @returns As linhas da arte; vazio para `plain`.
+ */
+export function bannerLines(variant) {
+    return variant === 'plain' ? [] : LINES[variant];
+}

package/dist/surfaces/tui/components/gauge.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Converte a fração de progresso em número de células preenchidas.
+ *
+ * Exportada para teste: as bordas (0, 1 e valores fora da faixa) são o que mais
+ * erra em barra de progresso.
+ *
+ * @param progress - Fração entre 0 e 1; valores fora da faixa são fixados nela.
+ * @param width - Largura total da barra em células.
+ * @returns Quantidade de células preenchidas, sempre em `[0, width]`.
+ */
+export declare function filledCells(progress: number, width: number): number;
+/**
+ * Renderiza uma barra de progresso com percentual.
+ *
+ * @param props.progress - Fração entre 0 e 1.
+ * @param props.color - Cor do preenchimento (token do tema).
+ * @param props.trackColor - Cor do trilho vazio (normalmente `theme.muted`).
+ * @param props.width - Largura em células. Default: {@link DEFAULT_WIDTH}.
+ * @example
+ * <Gauge progress={0.4} color={theme.primary} trackColor={theme.muted} />
+ */
+export declare function Gauge({ progress, color, trackColor, width, }: {
+    progress: number;
+    color: string;
+    trackColor: string;
+    width?: number;
+}): import("react").JSX.Element;

package/dist/surfaces/tui/components/gauge.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Barra de progresso (#190 — pacote estético).
+ *
+ * O `Job` do registro (`../job-registry.tsx`) já carregava `progress`, mas a
+ * tela de jobs só mostrava o status textual — a extração de mídia (OCR, ffmpeg,
+ * whisper) roda em background e o usuário não tinha noção de quanto falta. Este
+ * componente dá essa leitura.
+ *
+ * Glyphs vêm de `../glyphs.js` (`gaugeFull`/`gaugeEmpty`), então a barra degrada
+ * para `#`/`-` no terminal legado do Windows pelo MESMO sinal que já degrada os
+ * frames braille do spinner — sem caractere Unicode solto na tela.
+ *
+ * Cores vêm do tema (varredura `no-hardcoded-colors`): o preenchimento usa a cor
+ * recebida e o trilho usa `muted`, o que preserva contraste tanto nas paletas
+ * escuras quanto nas claras.
+ */
+import { Text } from 'ink';
+import { glyphs } from '../glyphs.js';
+/** Largura default da barra, em células. */
+const DEFAULT_WIDTH = 20;
+/**
+ * Converte a fração de progresso em número de células preenchidas.
+ *
+ * Exportada para teste: as bordas (0, 1 e valores fora da faixa) são o que mais
+ * erra em barra de progresso.
+ *
+ * @param progress - Fração entre 0 e 1; valores fora da faixa são fixados nela.
+ * @param width - Largura total da barra em células.
+ * @returns Quantidade de células preenchidas, sempre em `[0, width]`.
+ */
+export function filledCells(progress, width) {
+    if (!Number.isFinite(progress) || progress <= 0)
+        return 0;
+    if (progress >= 1)
+        return width;
+    return Math.min(width, Math.max(0, Math.round(progress * width)));
+}
+/**
+ * Renderiza uma barra de progresso com percentual.
+ *
+ * @param props.progress - Fração entre 0 e 1.
+ * @param props.color - Cor do preenchimento (token do tema).
+ * @param props.trackColor - Cor do trilho vazio (normalmente `theme.muted`).
+ * @param props.width - Largura em células. Default: {@link DEFAULT_WIDTH}.
+ * @example
+ * <Gauge progress={0.4} color={theme.primary} trackColor={theme.muted} />
+ */
+export function Gauge({ progress, color, trackColor, width = DEFAULT_WIDTH, }) {
+    const filled = filledCells(progress, width);
+    const percent = Math.round(Math.min(1, Math.max(0, progress)) * 100);
+    return (_jsxs(Text, { children: [_jsx(Text, { color: color, children: glyphs.gaugeFull.repeat(filled) }), _jsx(Text, { color: trackColor, children: glyphs.gaugeEmpty.repeat(width - filled) }), _jsxs(Text, { color: trackColor, children: [" ", String(percent).padStart(3), "%"] })] }));
+}

package/dist/surfaces/tui/components/gradient-banner.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Renderiza linhas de arte ASCII com gradiente por coluna.
+ *
+ * @param props.lines - Linhas da arte (mesma fonte, alturas iguais).
+ * @param props.colors - Ramp de cores (hex) da paleta ativa; vazia ⇒ sem cor.
+ * @returns O banner, ou `null` quando não há linhas (variante `plain`).
+ * @example
+ * <GradientBanner lines={bannerLines('wide')} colors={theme.gradient ?? []} />
+ */
+export declare function GradientBanner({ lines, colors, }: {
+    lines: readonly string[];
+    colors: readonly string[];
+}): import("react").JSX.Element | null;

package/dist/surfaces/tui/components/gradient-banner.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Banner multi-linha com gradiente HORIZONTAL (#190 — pacote estético).
+ *
+ * Diferença para {@link GradientText}: aquele interpola por CARACTERE ao longo de
+ * uma string única — passar uma arte multi-linha a ele faria a ramp escorrer
+ * pelas quebras de linha e sair na diagonal, com cada linha começando numa cor
+ * diferente. Aqui a ramp é calculada UMA vez pela largura da arte e aplicada por
+ * COLUNA: a coluna `x` tem a mesma cor em todas as linhas, que é o que faz o
+ * logo ler como um objeto só.
+ *
+ * Reutiliza `rampColors` de `./gradient-text.js` — a interpolação é a mesma, só
+ * muda o eixo. Nenhuma cor literal aqui: a ramp vem do tema (varredura
+ * `no-hardcoded-colors`).
+ *
+ * Contraste: as paradas de cor são as da paleta ativa (claras e escuras já vêm
+ * calibradas em `../palettes.ts`), então o banner herda o contraste do tema em
+ * vez de impor um seu. Sem `bold` — o atributo derruba o fg truecolor em alguns
+ * terminais (ver a nota em `./gradient-text.tsx`).
+ */
+import { Box, Text } from 'ink';
+import { rampColors } from './gradient-text.js';
+/**
+ * Renderiza linhas de arte ASCII com gradiente por coluna.
+ *
+ * @param props.lines - Linhas da arte (mesma fonte, alturas iguais).
+ * @param props.colors - Ramp de cores (hex) da paleta ativa; vazia ⇒ sem cor.
+ * @returns O banner, ou `null` quando não há linhas (variante `plain`).
+ * @example
+ * <GradientBanner lines={bannerLines('wide')} colors={theme.gradient ?? []} />
+ */
+export function GradientBanner({ lines, colors, }) {
+    if (lines.length === 0)
+        return null;
+    const width = Math.max(...lines.map((line) => [...line].length));
+    const ramp = rampColors(colors, width);
+    return (_jsx(Box, { flexDirection: "column", children: lines.map((line, row) => (_jsx(Text, { children: [...line].map((ch, col) => (
+            // Espaço não recebe cor: evita pintar o "fundo" da arte e mantém o
+            // banner legível também em paleta clara.
+            _jsx(Text, { ...(ch === ' ' || ramp.length === 0 ? {} : { color: ramp[col] }), children: ch }, col))) }, row))) }));
+}

package/dist/surfaces/tui/glyphs.d.ts

@@ -31,6 +31,10 @@ export interface Glyphs {
     readonly maskBullet: string;
     /** Frames do spinner (`components/spinner.tsx`). */
     readonly spinnerFrames: readonly string[];
+    /** Célula PREENCHIDA da barra de progresso (`components/gauge.tsx`). */
+    readonly gaugeFull: string;
+    /** Célula VAZIA da barra de progresso (`components/gauge.tsx`). */
+    readonly gaugeEmpty: string;
 }
 /** Glyphs Unicode — terminais modernos (Windows Terminal, iTerm, etc.). */
 export declare const UNICODE_GLYPHS: Glyphs;

package/dist/surfaces/tui/glyphs.js

@@ -60,6 +60,8 @@ export const UNICODE_GLYPHS = {
     arrowDown: '↓',
     maskBullet: '•',
     spinnerFrames: ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'],
+    gaugeFull: '█',
+    gaugeEmpty: '░',
 };
 /** Fallback ASCII puro — terminal legado do Windows (sem mojibake). */
 export const ASCII_GLYPHS = {
@@ -70,6 +72,8 @@ export const ASCII_GLYPHS = {
     arrowDown: 'v',
     maskBullet: '*',
     spinnerFrames: ['|', '/', '-', '\\'],
+    gaugeFull: '#',
+    gaugeEmpty: '-',
 };
 /**
  * Escolhe o conjunto de glyphs conforme o suporte a Unicode.

package/dist/surfaces/tui/hooks/use-issue-detail.d.ts

@@ -1,4 +1,4 @@
-import { createHttpClient, getIssue, normalizeIssue, resolveApiKey, type Issue } from '../../../index.js';
+import { createHttpClient, fetchEnumerations, getIssue, normalizeIssue, resolveApiKey, type DetailLookups, type Issue } from '../../../index.js';
 /**
  * Estado da busca de detalhe de issue, consumido por
  * `../screens/issue-detail.tsx`. `no-selection` cobre o caso defensivo de a
@@ -14,6 +14,7 @@ export type IssueDetailState = {
 } | {
     status: 'loaded';
     issue: Issue;
+    lookups: DetailLookups;
 } | {
     status: 'error-network';
     message: string;
@@ -39,6 +40,11 @@ export interface UseIssueDetailOptions {
     getIssue?: typeof getIssue;
     /** Normaliza o payload bruto no modelo `Issue`; default `normalizeIssue` do core. */
     normalizeIssue?: typeof normalizeIssue;
+    /**
+     * Busca as enumerações da instância (`id → nome`); default
+     * `fetchEnumerations` do core. Injetável para os testes não tocarem a rede.
+     */
+    fetchEnumerations?: typeof fetchEnumerations;
 }
 /** Valor retornado pelo hook. */
 export interface UseIssueDetailResult {

package/dist/surfaces/tui/hooks/use-issue-detail.js

@@ -27,7 +27,7 @@
  * `auth-aborted` (neutro, não um erro), com `retry` disponível.
  */
 import { useCallback, useEffect, useState } from 'react';
-import { createHttpClient, getIssue, normalizeIssue, resolveApiKey, RedmineForbiddenError, RedmineNotFoundError, } from '../../../index.js';
+import { createHttpClient, collectUsers, fetchEnumerations, getIssue, normalizeIssue, resolveApiKey, RedmineForbiddenError, RedmineNotFoundError, } from '../../../index.js';
 import { useEnvFallbackAllowed } from '../instance.js';
 import { ReAuthAbortedError, useAuthGuard } from './use-auth-guard.js';
 /** Lê `REDMINE_URL` do ambiente, tratando string vazia como ausente (mesma convenção do doctor/home). */
@@ -52,6 +52,7 @@ export function useIssueDetail(issueId, options = {}) {
     const buildClient = options.createHttpClient ?? createHttpClient;
     const fetchIssue = options.getIssue ?? getIssue;
     const normalize = options.normalizeIssue ?? normalizeIssue;
+    const loadEnumerations = options.fetchEnumerations ?? fetchEnumerations;
     // Mandatório (M2-13, #36): ver o JSDoc do módulo.
     const { guard } = useAuthGuard();
     // SEGURANÇA (#187): origem config (URL persistida) → sem env-key instance-agnóstica.
@@ -93,7 +94,19 @@ export function useIssueDetail(issueId, options = {}) {
                 const payload = await guard(() => fetchIssue(http, issueId));
                 if (cancelled)
                     return;
-                setState({ status: 'loaded', issue: normalize(payload) });
+                const issue = normalize(payload);
+                // Dicionários `id → nome` para o histórico: sem eles a tela mostra
+                // `Status: #12 → Atribuída (#7)` — metade ilegível. `fetchEnumerations`
+                // é memoizado por instância (uma vez por sessão da TUI) e degrada em
+                // silêncio; os usuários saem do próprio payload, sem rede.
+                const enums = issue.journals.length > 0 ? await loadEnumerations(http, instanceUrl) : undefined;
+                if (cancelled)
+                    return;
+                setState({
+                    status: 'loaded',
+                    issue,
+                    lookups: { ...(enums ?? {}), user: collectUsers(issue) },
+                });
             }
             catch (cause) {
                 if (cancelled)

package/dist/surfaces/tui/screens/issue-detail.js

@@ -35,17 +35,19 @@ import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-run
  */
 import { Box, Text, useInput } from 'ink';
 import { useEffect, useRef } from 'react';
+import { journalDetailLabel, journalDetailValue } from '../../../index.js';
 import { attachmentStatusColor, attachmentStatusLabel, deriveAttachmentExtractionStatus, } from '../attachment-status.js';
 import { Spinner } from '../components/spinner.js';
 import { ScrollView } from '../components/scroll-view.js';
 import { glyphs } from '../glyphs.js';
 import { humanizeFileSize } from '../format-file-size.js';
 import { useIssueDetail } from '../hooks/use-issue-detail.js';
-import { useTerminalHeight } from '../hooks/use-terminal-width.js';
+import { useTerminalHeight, useTerminalWidth } from '../hooks/use-terminal-width.js';
 import { useNavigation } from '../navigation.js';
 import { statusColor } from '../status-color.js';
 import { symbols } from '../symbols.js';
 import { useTheme } from '../theme.js';
+import { wrapText } from '../wrap.js';
 import { useHomeSelection } from './home-selection.js';
 import { useLoadedIssue } from './loaded-issue-context.js';
 /**
@@ -58,6 +60,10 @@ import { useLoadedIssue } from './loaded-issue-context.js';
 const CONTENT_OVERHEAD_ROWS = 14;
 /** Piso da viewport (terminais muito baixos). */
 const CONTENT_MIN_HEIGHT = 6;
+/** Colunas consumidas fora do texto: moldura da aplicação (2) + padding da tela (2). */
+const CONTENT_WIDTH_OVERHEAD = 4;
+/** Piso da largura de texto (terminais muito estreitos). */
+const CONTENT_MIN_WIDTH = 20;
 /** Placeholder discreto para campos ausentes (assignee, autor/data de journal, old/new value). ASCII no Windows legado (#84). */
 const EMPTY_PLACEHOLDER = glyphs.emptyPlaceholder;
 /** Metadados fixos no topo: id/subject, status/prioridade, autor/responsável, datas. */
@@ -85,14 +91,17 @@ function buildAttachmentRows(issue, theme) {
     return rows;
 }
 /** Constrói as linhas da viewport rolável: bloco de descrição + histórico cronológico de journals. */
-function buildContentRows(issue, theme) {
+function buildContentRows(issue, theme, width, lookups) {
     const rows = [];
     rows.push(_jsx(Text, { color: theme.primary, children: "Descri\u00E7\u00E3o" }, "desc-header"));
     if (issue.description === undefined || issue.description === '') {
         rows.push(_jsx(Text, { color: theme.muted, children: "(sem descri\u00E7\u00E3o)" }, "desc-empty"));
     }
     else {
-        issue.description.split('\n').forEach((line, index) => {
+        // Quebra na largura ANTES de virar item: o ScrollView conta itens como
+        // linhas de tela, e um parágrafo longo (o caso comum de um chamado) faria o
+        // Ink quebrá-lo sozinho em várias, estourando o viewport.
+        wrapText(issue.description, width).forEach((line, index) => {
             rows.push(_jsx(Text, { children: line.length > 0 ? line : ' ' }, `desc-${index}`));
         });
     }
@@ -106,13 +115,21 @@ function buildContentRows(issue, theme) {
         issue.journals.forEach((journal) => {
             rows.push(_jsxs(Text, { color: theme.muted, children: [journal.user?.name ?? EMPTY_PLACEHOLDER, " ", glyphs.middleDot, " ", journal.created_on] }, `journal-${journal.id}-head`));
             if (journal.notes !== undefined && journal.notes !== '') {
-                journal.notes.split('\n').forEach((line, index) => {
+                wrapText(journal.notes, width).forEach((line, index) => {
                     rows.push(_jsx(Text, { children: line }, `journal-${journal.id}-note-${index}`));
                 });
             }
-            // Details estruturais resumidos: `campo: antigo → novo`, sempre em muted.
+            // Details resumidos: `campo: antigo → novo`, sempre em muted. Rótulos e
+            // ids vêm da MESMA semântica do bundle (`journalDetailLabel`/`Value` do
+            // core) — sem ela a tela mostrava o cru do Redmine (`status_id: 12 → 7`,
+            // custom field pelo id). A marca `trusted` das partes não se aplica aqui:
+            // ela existe para a fence anti prompt-injection do bundle, e esta tela é
+            // interface, não prompt.
             journal.details.forEach((detail, index) => {
-                rows.push(_jsxs(Text, { color: theme.muted, children: ['  ', detail.name, ": ", detail.old_value ?? EMPTY_PLACEHOLDER, " ", symbols.arrowRight, ' ', detail.new_value ?? EMPTY_PLACEHOLDER] }, `journal-${journal.id}-detail-${index}`));
+                const label = journalDetailLabel(detail, issue).text;
+                const from = journalDetailValue(detail, detail.old_value, issue, lookups)?.text ?? EMPTY_PLACEHOLDER;
+                const to = journalDetailValue(detail, detail.new_value, issue, lookups)?.text ?? EMPTY_PLACEHOLDER;
+                rows.push(_jsxs(Text, { color: theme.muted, children: ['  ', label, ": ", from, " ", symbols.arrowRight, " ", to] }, `journal-${journal.id}-detail-${index}`));
             });
             rows.push(_jsx(Text, { children: " " }, `journal-${journal.id}-spacer`));
         });
@@ -141,6 +158,10 @@ export function IssueDetailScreen() {
     // Viewport de descrição CRESCE com o terminal (#190) — só rola quando o conteúdo
     // passa da tela de verdade, em vez de uma janelinha fixa com espaço vazio embaixo.
     const contentHeight = Math.max(CONTENT_MIN_HEIGHT, useTerminalHeight() - CONTENT_OVERHEAD_ROWS);
+    // Largura útil do texto: o terminal menos a moldura da aplicação (2 colunas)
+    // e o padding desta tela (2). Sem descontar, o parágrafo encosta na borda e o
+    // Ink o requebra — o mesmo estouro que o wrap existe para evitar.
+    const contentWidth = Math.max(CONTENT_MIN_WIDTH, useTerminalWidth() - CONTENT_WIDTH_OVERHEAD);
     // Espelha a issue carregada no contexto leve consumido por `./export.js`
     // (#33) — ver o JSDoc do módulo e de `./loaded-issue-context.js` para a
     // escolha de reuso em memória em vez de refetch.
@@ -175,7 +196,7 @@ export function IssueDetailScreen() {
             retry();
         }
     });
-    return (_jsxs(Box, { flexGrow: 1, flexDirection: "column", paddingX: 1, paddingY: 1, children: [_jsx(Text, { color: theme.primary, children: "Detalhe da issue" }), state.status === 'no-selection' ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.muted, children: "Nenhuma issue selecionada." }) })) : null, state.status === 'loading' ? (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: [_jsx(Spinner, {}), " Carregando issue..."] }) })) : null, state.status === 'error-network' ? (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: theme.danger, children: [symbols.cross, " Falha ao carregar a issue: ", state.message] }) })) : null, state.status === 'error-forbidden' ? (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: theme.danger, children: [symbols.cross, " ", state.message] }) })) : null, state.status === 'error-not-found' ? (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: theme.danger, children: [symbols.cross, " ", state.message] }) })) : null, state.status === 'auth-aborted' ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.muted, children: state.message }) })) : null, state.status === 'loaded' ? (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(IssueMeta, { issue: state.issue, theme: theme }), _jsx(Box, { marginTop: 1, children: _jsx(ScrollView, { lines: buildContentRows(state.issue, theme), height: contentHeight }) })] })) : null, _jsx(Box, { flexGrow: 1 }), _jsx(Footer, { showRetry: state.status === 'error-network' ||
+    return (_jsxs(Box, { flexGrow: 1, flexDirection: "column", paddingX: 1, paddingY: 1, children: [_jsx(Text, { color: theme.primary, children: "Detalhe da issue" }), state.status === 'no-selection' ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.muted, children: "Nenhuma issue selecionada." }) })) : null, state.status === 'loading' ? (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: [_jsx(Spinner, {}), " Carregando issue..."] }) })) : null, state.status === 'error-network' ? (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: theme.danger, children: [symbols.cross, " Falha ao carregar a issue: ", state.message] }) })) : null, state.status === 'error-forbidden' ? (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: theme.danger, children: [symbols.cross, " ", state.message] }) })) : null, state.status === 'error-not-found' ? (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: theme.danger, children: [symbols.cross, " ", state.message] }) })) : null, state.status === 'auth-aborted' ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.muted, children: state.message }) })) : null, state.status === 'loaded' ? (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(IssueMeta, { issue: state.issue, theme: theme }), _jsx(Box, { marginTop: 1, children: _jsx(ScrollView, { lines: buildContentRows(state.issue, theme, contentWidth, state.lookups), height: contentHeight }) })] })) : null, _jsx(Box, { flexGrow: 1 }), _jsx(Footer, { showRetry: state.status === 'error-network' ||
                     state.status === 'error-forbidden' ||
                     state.status === 'error-not-found' ||
                     state.status === 'auth-aborted', showExport: state.status === 'loaded' })] }));

package/dist/surfaces/tui/screens/jobs.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * Painel de jobs da sessão (#34/M2-11) — empilhado a partir da home
  * (`./home.tsx`) ou do detalhe (`./issue-detail.tsx`) com a tecla `t`
@@ -40,6 +40,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { Box, Text, useInput } from 'ink';
 import { useRef } from 'react';
+import { Gauge } from '../components/gauge.js';
 import { Spinner } from '../components/spinner.js';
 import { glyphs } from '../glyphs.js';
 import { useListNavigation } from '../hooks/use-list-navigation.js';
@@ -51,7 +52,7 @@ import { useTheme } from '../theme.js';
 /** Uma linha do painel: ícone/spinner de status, rótulo, badge textual e, quando selecionada, o hint de cancelamento. */
 function JobRow({ job, selected, theme }) {
     const icon = jobStatusIcon(job.status);
-    return (_jsxs(Box, { children: [_jsx(Text, { color: theme.primary, children: selected ? `${symbols.pointerSmall} ` : '  ' }), job.status === 'processing' ? (_jsx(Spinner, {})) : (_jsx(Text, { color: jobStatusColor(theme, job.status), children: icon })), _jsx(Text, { children: " " }), _jsx(Text, { ...(selected ? { color: theme.primary } : {}), children: job.label }), _jsxs(Text, { color: theme.muted, children: [" [", jobStatusLabel(job.status), "]"] }), selected ? (_jsxs(Text, { color: theme.muted, children: [' ', job.cancelable === true ? '(Ctrl+C cancela)' : '(não cancelável)'] })) : null] }));
+    return (_jsxs(Box, { children: [_jsx(Text, { color: theme.primary, children: selected ? `${symbols.pointerSmall} ` : '  ' }), job.status === 'processing' ? (_jsx(Spinner, {})) : (_jsx(Text, { color: jobStatusColor(theme, job.status), children: icon })), _jsx(Text, { children: " " }), _jsx(Text, { ...(selected ? { color: theme.primary } : {}), children: job.label }), _jsxs(Text, { color: theme.muted, children: [" [", jobStatusLabel(job.status), "]"] }), job.progress !== undefined ? (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Gauge, { progress: job.progress, color: jobStatusColor(theme, job.status), trackColor: theme.muted })] })) : null, selected ? (_jsxs(Text, { color: theme.muted, children: [' ', job.cancelable === true ? '(Ctrl+C cancela)' : '(não cancelável)'] })) : null] }));
 }
 /**
  * Tela do painel de jobs: lista as operações da sessão (`../job-registry.tsx`),

package/dist/surfaces/tui/screens/welcome.js

@@ -20,7 +20,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useRef, useState } from 'react';
 import { Box, Text, useInput } from 'ink';
 import { resolveApiKey, TOOL_NAME, TOOL_VERSION } from '../../../index.js';
+import { bannerLines, selectBanner } from '../banner.js';
+import { GradientBanner } from '../components/gradient-banner.js';
 import { GradientText } from '../components/gradient-text.js';
+import { isUnicodeSupported } from '../glyphs.js';
+import { useTerminalWidth } from '../hooks/use-terminal-width.js';
 import { useEnvFallbackAllowed } from '../instance.js';
 import { useNavigation } from '../navigation.js';
 import { useTheme } from '../theme.js';
@@ -37,6 +41,10 @@ function instanceFromEnv(env) {
 export function WelcomeScreen() {
     const { navigate } = useNavigation();
     const theme = useTheme();
+    // Banner responsivo: a arte só entra quando cabe na largura atual e o terminal
+    // renderiza os blocos Unicode (ver ../banner.ts).
+    const variant = selectBanner(useTerminalWidth(), isUnicodeSupported());
+    const gradient = theme.gradient ?? [theme.primary];
     const [checking, setChecking] = useState(false);
     // Handlers ESTÁVEIS (useCallback+refs) — mesmo padrão do TextInput/app.tsx:
     // identidade nova por render des/re-subscreve o useInput e perde teclas.
@@ -91,5 +99,5 @@ export function WelcomeScreen() {
         }
     }, []);
     useInput(handleInput);
-    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, paddingY: 1, children: [_jsx(GradientText, { colors: theme.gradient ?? [theme.primary], children: TOOL_NAME }), _jsxs(Text, { color: theme.muted, children: ["v", TOOL_VERSION] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { children: "Contexto completo de issues do Redmine, pronto para qualquer LLM." }) }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: theme.muted, children: ["Pressione ", _jsx(Text, { color: theme.accent, children: "Enter" }), " para continuar,", ' ', _jsx(Text, { color: theme.accent, children: "?" }), " para atalhos,", ' ', _jsx(Text, { color: theme.accent, children: "d" }), " para o doctor,", ' ', _jsx(Text, { color: theme.accent, children: "c" }), " para configura\u00E7\u00E3o,", ' ', _jsx(Text, { color: theme.accent, children: "a" }), " para apar\u00EAncia,", ' ', _jsx(Text, { color: theme.accent, children: "q" }), " para sair."] }) })] }));
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, paddingY: 1, children: [variant === 'plain' ? (_jsx(GradientText, { colors: gradient, children: TOOL_NAME })) : (_jsx(GradientBanner, { lines: bannerLines(variant), colors: gradient })), _jsxs(Text, { color: theme.muted, children: [variant === 'plain' ? '' : `${TOOL_NAME} `, "v", TOOL_VERSION] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { children: "Contexto completo de issues do Redmine, pronto para qualquer LLM." }) }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: theme.muted, children: ["Pressione ", _jsx(Text, { color: theme.accent, children: "Enter" }), " para continuar,", ' ', _jsx(Text, { color: theme.accent, children: "?" }), " para atalhos,", ' ', _jsx(Text, { color: theme.accent, children: "d" }), " para o doctor,", ' ', _jsx(Text, { color: theme.accent, children: "c" }), " para configura\u00E7\u00E3o,", ' ', _jsx(Text, { color: theme.accent, children: "a" }), " para apar\u00EAncia,", ' ', _jsx(Text, { color: theme.accent, children: "q" }), " para sair."] }) })] }));
 }

package/dist/surfaces/tui/wrap.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Quebra de linha por LARGURA para as viewports roláveis da TUI.
+ *
+ * `../components/scroll-view.tsx` mostra `height` ITENS do array `lines` e
+ * assume que cada item ocupa UMA linha na tela. Texto vindo do Redmine não
+ * respeita isso: a descrição de um chamado costuma ter parágrafos de centenas
+ * de caracteres, o Ink os quebra sozinho em várias linhas visuais, e a conta do
+ * viewport passa a errar — o conteúdo escapa da janela, o começo das frases
+ * some e a moldura da aplicação aparece em pedaços no meio do texto.
+ *
+ * Quebrando ANTES de montar as linhas, cada item volta a ser uma linha visual e
+ * o ScrollView fica correto sem precisar saber medir texto.
+ *
+ * A medida é em code points (`[...text]`), a mesma convenção de `./truncate.ts`:
+ * suficiente para o conteúdo latino dos chamados e sem trazer dependência de
+ * largura de glifo (CJK/emoji contariam 2 colunas).
+ */
+/**
+ * Quebra um parágrafo em linhas de no máximo `width` colunas, sem cortar
+ * palavras (exceto quando a palavra sozinha excede a largura).
+ *
+ * @param text - Uma linha lógica (sem `\n`).
+ * @param width - Largura disponível em colunas; `<= 0` devolve o texto inteiro
+ *   numa linha só (não há o que quebrar de forma útil).
+ * @returns As linhas resultantes; nunca vazio — texto vazio devolve `['']` para
+ *   preservar a linha em branco do original.
+ * @example
+ * wrapLine('uma frase bem comprida', 10); // ['uma frase', 'bem', 'comprida']
+ */
+export declare function wrapLine(text: string, width: number): string[];
+/**
+ * Quebra um texto multi-linha, preservando as linhas em branco do original.
+ *
+ * @param text - Texto com `\n` (descrição de issue, nota de journal).
+ * @param width - Largura disponível em colunas.
+ * @returns Todas as linhas já ajustadas à largura.
+ */
+export declare function wrapText(text: string, width: number): string[];

package/dist/surfaces/tui/wrap.js

@@ -0,0 +1,82 @@
+/**
+ * Quebra de linha por LARGURA para as viewports roláveis da TUI.
+ *
+ * `../components/scroll-view.tsx` mostra `height` ITENS do array `lines` e
+ * assume que cada item ocupa UMA linha na tela. Texto vindo do Redmine não
+ * respeita isso: a descrição de um chamado costuma ter parágrafos de centenas
+ * de caracteres, o Ink os quebra sozinho em várias linhas visuais, e a conta do
+ * viewport passa a errar — o conteúdo escapa da janela, o começo das frases
+ * some e a moldura da aplicação aparece em pedaços no meio do texto.
+ *
+ * Quebrando ANTES de montar as linhas, cada item volta a ser uma linha visual e
+ * o ScrollView fica correto sem precisar saber medir texto.
+ *
+ * A medida é em code points (`[...text]`), a mesma convenção de `./truncate.ts`:
+ * suficiente para o conteúdo latino dos chamados e sem trazer dependência de
+ * largura de glifo (CJK/emoji contariam 2 colunas).
+ */
+/**
+ * Quebra um parágrafo em linhas de no máximo `width` colunas, sem cortar
+ * palavras (exceto quando a palavra sozinha excede a largura).
+ *
+ * @param text - Uma linha lógica (sem `\n`).
+ * @param width - Largura disponível em colunas; `<= 0` devolve o texto inteiro
+ *   numa linha só (não há o que quebrar de forma útil).
+ * @returns As linhas resultantes; nunca vazio — texto vazio devolve `['']` para
+ *   preservar a linha em branco do original.
+ * @example
+ * wrapLine('uma frase bem comprida', 10); // ['uma frase', 'bem', 'comprida']
+ */
+export function wrapLine(text, width) {
+    if (width <= 0)
+        return [text];
+    const chars = [...text];
+    if (chars.length <= width)
+        return [text];
+    const lines = [];
+    let current = '';
+    const pushCurrent = () => {
+        if (current.length > 0) {
+            lines.push(current);
+            current = '';
+        }
+    };
+    for (const word of text.split(' ')) {
+        const wordLength = [...word].length;
+        const currentLength = [...current].length;
+        // Palavra maior que a largura (URL, hash, caminho): quebra à força, em
+        // pedaços do tamanho da linha — melhor que estourar o viewport.
+        if (wordLength > width) {
+            pushCurrent();
+            let rest = [...word];
+            while (rest.length > width) {
+                lines.push(rest.slice(0, width).join(''));
+                rest = rest.slice(width);
+            }
+            current = rest.join('');
+            continue;
+        }
+        if (currentLength === 0) {
+            current = word;
+        }
+        else if (currentLength + 1 + wordLength <= width) {
+            current = `${current} ${word}`;
+        }
+        else {
+            pushCurrent();
+            current = word;
+        }
+    }
+    pushCurrent();
+    return lines.length > 0 ? lines : [''];
+}
+/**
+ * Quebra um texto multi-linha, preservando as linhas em branco do original.
+ *
+ * @param text - Texto com `\n` (descrição de issue, nota de journal).
+ * @param width - Largura disponível em colunas.
+ * @returns Todas as linhas já ajustadas à largura.
+ */
+export function wrapText(text, width) {
+    return text.split('\n').flatMap((line) => wrapLine(line, width));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "redmine-context",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Consumidor de Redmine que entrega contexto completo de issues (texto + mídia extraída localmente) para qualquer LLM",
   "type": "module",
   "license": "MIT",