@promovaweb/specsfy 0.7.0 → 0.9.1

package/dist/tui.js

@@ -14,7 +14,7 @@ import { resolvePath } from "./filesystem.js";
 import { AUXILIARY_SKILLS, DOCUMENTATION_SKILLS, FRAMEWORK_SKILLS, SkillInstaller, } from "./installer.js";
 import { scanSpecs, specsFingerprint, summarizeSpecs, } from "./progress.js";
 import { runProjectTests } from "./project-testing.js";
-import { ensureSkillsLock, skillsLockFingerprint, } from "./skill-lock.js";
+import { ensureSkillsLock, skillsLockFingerprint } from "./skill-lock.js";
 import { VERSION } from "./version.js";
 marked.use(markedTerminal({
     reflowText: true,
@@ -87,6 +87,30 @@ export const TUI_TABS = [
     { id: "skills", label: "Skills", key: "C-k" },
     { id: "about", label: "Sobre", key: "C-o" },
 ];
+/**
+ * Paleta semântica da TUI, derivada dos tokens oficiais do dark mode.
+ *
+ * Os pares de texto, seleção e foco mantêm contraste mensurável sem depender
+ * das cores configuráveis de 16 posições do terminal da pessoa usuária.
+ */
+export const TUI_THEME = {
+    background: "#000A0E",
+    surface: "#001117",
+    surfaceRaised: "#03212A",
+    text: "#F2F8F9",
+    textMuted: "#B2C6CE",
+    border: "#5F7D8C",
+    accent: "#C4B5FD",
+    activeBackground: "#5EEDE1",
+    activeText: "#001117",
+    selectedBackground: "#6D28D9",
+    selectedText: "#F2F8F9",
+    primaryBackground: "#15626A",
+    primaryText: "#F2F8F9",
+    focusBackground: "#5EEDE1",
+    focusText: "#001117",
+    warning: "#FCD34D",
+};
 /** Dashboard terminal principal. */
 export class SpecsfyTui {
     project;
@@ -95,6 +119,7 @@ export class SpecsfyTui {
     #status;
     #projectInput;
     #modal;
+    #modalFocus;
     #lastBackAt = 0;
     #tabButtons = new Map();
     #activeTab = "home";
@@ -105,6 +130,8 @@ export class SpecsfyTui {
     #catalogError = "";
     #installed = new Set();
     #selected = new Set();
+    #selectionDirty = false;
+    #loaded = false;
     #detected = new Set();
     #skillFilter = "all";
     #skillQuery = "";
@@ -112,10 +139,13 @@ export class SpecsfyTui {
     #suppressSkillToggleUntil = 0;
     #fingerprints = { specs: "", backlogs: "", lock: "" };
     #poller;
+    #refreshPromise;
     #testRunning = false;
     #testResultTab = "summary";
     #testSummary = "Nenhuma execução nesta sessão.";
     #testOutput = [];
+    #testSummaryPanel;
+    #testOutputPanel;
     constructor(project = process.cwd()) {
         this.project = resolvePath(project);
     }
@@ -134,6 +164,10 @@ export class SpecsfyTui {
         });
         await this.start({ screen });
         await new Promise((resolve) => {
+            if (screenDestroyed(screen)) {
+                resolve();
+                return;
+            }
             screen.once("destroy", () => {
                 resolve();
             });
@@ -146,6 +180,9 @@ export class SpecsfyTui {
      * terminais virtuais, sem manter um processo pendurado durante os testes.
      */
     async start(options = {}) {
+        if (this.#screen && !screenDestroyed(this.#screen)) {
+            throw new Error("a TUI já foi iniciada nesta instância");
+        }
         const screen = options.screen ??
             blessed.screen({
                 smartCSR: true,
@@ -163,13 +200,20 @@ export class SpecsfyTui {
             if (this.#poller)
                 clearInterval(this.#poller);
             this.#poller = undefined;
+            this.#refreshPromise = undefined;
+            this.#modal = undefined;
+            this.#modalFocus = undefined;
         });
         this.showStatus("Carregando projeto…");
         await this.refreshAll(!options.catalog);
         this.showTab("home");
         if (options.watch !== false) {
             const config = await loadConfig(this.project);
-            this.#poller = setInterval(() => void this.refreshIfChanged(), config.watch_interval * 1000);
+            if (screenDestroyed(screen))
+                return;
+            this.#poller = setInterval(() => void this.refreshIfChanged().catch((error) => {
+                this.showStatus(`Erro ao atualizar automaticamente: ${errorMessage(error)}`);
+            }), config.watch_interval * 1000);
         }
     }
     mountShell(screen) {
@@ -181,7 +225,11 @@ export class SpecsfyTui {
             height: 1,
             align: "center",
             content: "Specsfy — Dashboard de specs e skills",
-            style: { fg: "white", bg: "black", bold: true },
+            style: {
+                fg: TUI_THEME.text,
+                bg: TUI_THEME.selectedBackground,
+                bold: true,
+            },
         });
         this.#projectInput = blessed.textbox({
             parent: screen,
@@ -195,10 +243,10 @@ export class SpecsfyTui {
             keys: true,
             mouse: true,
             style: {
-                fg: "white",
-                bg: "black",
-                border: { fg: "gray" },
-                focus: { border: { fg: "cyan" } },
+                fg: TUI_THEME.text,
+                bg: TUI_THEME.surface,
+                border: { fg: TUI_THEME.border },
+                focus: { border: { fg: TUI_THEME.focusBackground } },
             },
         });
         this.#projectInput.on("submit", (value) => {
@@ -238,10 +286,14 @@ export class SpecsfyTui {
                 mouse: true,
                 keys: true,
                 style: {
-                    fg: "gray",
-                    bg: "black",
-                    focus: { fg: "white", bg: "blue", bold: true },
-                    hover: { fg: "white", bg: "blue" },
+                    fg: TUI_THEME.textMuted,
+                    bg: TUI_THEME.background,
+                    focus: {
+                        fg: TUI_THEME.focusText,
+                        bg: TUI_THEME.focusBackground,
+                        bold: true,
+                    },
+                    hover: { fg: TUI_THEME.focusText, bg: TUI_THEME.focusBackground },
                 },
             });
             button.on("press", () => this.showTab(id));
@@ -254,7 +306,7 @@ export class SpecsfyTui {
             left: 0,
             width: "100%",
             orientation: "horizontal",
-            style: { fg: "gray" },
+            style: { fg: TUI_THEME.border },
         });
         this.#body = blessed.box({
             parent: screen,
@@ -262,7 +314,7 @@ export class SpecsfyTui {
             left: 1,
             right: 1,
             bottom: 4,
-            style: { fg: "white", bg: "black" },
+            style: { fg: TUI_THEME.text, bg: TUI_THEME.background },
         });
         this.#status = blessed.box({
             parent: screen,
@@ -271,7 +323,7 @@ export class SpecsfyTui {
             width: "100%",
             height: 1,
             padding: { left: 1 },
-            style: { fg: "gray", bg: "black" },
+            style: { fg: TUI_THEME.textMuted, bg: TUI_THEME.surface },
         });
         blessed.box({
             parent: screen,
@@ -281,7 +333,7 @@ export class SpecsfyTui {
             height: 1,
             content: " ^ = Ctrl  ·  Tab/Shift+Tab: foco  ·  Setas: navegar  ·  " +
                 "Espaço: abrir spec/alternar skill  ·  Esc: voltar  ·  Mouse: disponível",
-            style: { fg: "cyan", bg: "black" },
+            style: { fg: TUI_THEME.accent, bg: TUI_THEME.background },
         });
         blessed.box({
             parent: screen,
@@ -290,7 +342,7 @@ export class SpecsfyTui {
             width: "100%",
             height: 1,
             content: " ^Q Sair    Esc Voltar",
-            style: { fg: "white", bg: "black", bold: true },
+            style: { fg: TUI_THEME.text, bg: TUI_THEME.surface, bold: true },
         });
     }
     bindKeys(screen) {
@@ -339,12 +391,15 @@ export class SpecsfyTui {
         if (!body || !this.#screen)
             return;
         for (const [id, button] of this.#tabButtons) {
-            button.style.bg = id === tab ? "cyan" : "black";
-            button.style.fg = id === tab ? "black" : "gray";
+            button.style.bg =
+                id === tab ? TUI_THEME.activeBackground : TUI_THEME.background;
+            button.style.fg = id === tab ? TUI_THEME.activeText : TUI_THEME.textMuted;
             button.style.bold = id === tab;
         }
         for (const child of [...body.children])
             child.destroy();
+        this.#testSummaryPanel = undefined;
+        this.#testOutputPanel = undefined;
         if (tab === "home")
             this.renderHome(body);
         else if (tab === "backlogs")
@@ -357,7 +412,24 @@ export class SpecsfyTui {
             this.renderSkills(body);
         else
             this.renderAbout(body);
-        this.#screen.render();
+        this.focusActiveTab();
+        if (!screenDestroyed(this.#screen))
+            this.#screen.render();
+    }
+    /** Recupera um alvo navegável quando um painel foi recriado ou fechado. */
+    focusActiveTab() {
+        const screen = this.#screen;
+        if (!screen || screenDestroyed(screen))
+            return;
+        const focused = screen.focused;
+        if (focused && !focused.detached && focused.visible)
+            return;
+        this.#tabButtons.get(this.#activeTab)?.focus();
+    }
+    /** Renderiza somente enquanto a tela ainda pertence ao ciclo atual. */
+    renderScreen() {
+        if (this.#screen && !screenDestroyed(this.#screen))
+            this.#screen.render();
     }
     /**
      * Retorna um nível por vez: fecha modal, limpa busca e volta ao Home.
@@ -373,7 +445,13 @@ export class SpecsfyTui {
         if (this.#modal) {
             this.#modal.destroy();
             this.#modal = undefined;
-            this.#screen?.render();
+            const focus = this.#modalFocus;
+            this.#modalFocus = undefined;
+            if (focus && !focus.detached && focus.visible)
+                focus.focus();
+            else
+                this.focusActiveTab();
+            this.renderScreen();
             return;
         }
         if (this.#activeTab === "skills" && this.#skillQuery) {
@@ -387,24 +465,24 @@ export class SpecsfyTui {
     renderHome(body) {
         const summary = summarizeSpecs(this.#specs);
         const cards = [
-            ["Specs", String(summary.total_specs), "#173e67", "#2f81f7"],
+            ["Specs", String(summary.total_specs), "#021C26", "#5EEDE1"],
             [
                 `Tarefas · ${summary.pending_tasks} pendentes`,
                 `${summary.completed_tasks}/${summary.total_tasks}`,
-                "#3f2d63",
-                "#a371f7",
+                "#2E1065",
+                "#C4B5FD",
             ],
             [
                 `Itens · ${summary.pending_items} pendentes`,
                 `${summary.completed_items}/${summary.total_items}`,
-                "#174b43",
-                "#2ea043",
+                "#03212A",
+                "#37E1D0",
             ],
             [
                 "",
                 `${summary.percent}%\n${progressBar(summary.percent, 16)}`,
-                "#4a381c",
-                "#d29922",
+                "#001117",
+                TUI_THEME.warning,
             ],
         ];
         cards.forEach(([label, value, background, border], index) => {
@@ -419,7 +497,7 @@ export class SpecsfyTui {
                 valign: "middle",
                 content: `{bold}${value}{/bold}${label ? `\n${label}` : ""}`,
                 tags: true,
-                style: { fg: "white", bg: background, border: { fg: border } },
+                style: { fg: TUI_THEME.text, bg: background, border: { fg: border } },
             });
         });
         blessed.box({
@@ -433,7 +511,11 @@ export class SpecsfyTui {
             valign: "middle",
             content: "Visão consolidada do andamento das especificações. " +
                 "Os números são recalculados quando os arquivos mudam.",
-            style: { fg: "white", border: { fg: "gray" } },
+            style: {
+                fg: TUI_THEME.text,
+                bg: TUI_THEME.surface,
+                border: { fg: TUI_THEME.border },
+            },
         });
     }
     renderBacklogs(body) {
@@ -451,8 +533,8 @@ export class SpecsfyTui {
             keys: true,
             vi: true,
             mouse: true,
-            scrollbar: { ch: " ", track: { bg: "gray" }, style: { bg: "cyan" } },
-            style: { border: { fg: "gray" }, focus: { border: { fg: "yellow" } } },
+            scrollbar: terminalScrollbar(),
+            style: focusablePanelStyle(),
         });
         const list = blessed.list({
             parent: body,
@@ -468,18 +550,22 @@ export class SpecsfyTui {
             mouse: true,
             tags: false,
             style: {
-                selected: { fg: "white", bg: "blue", bold: true },
-                item: { fg: "white" },
-                border: { fg: "gray" },
-                focus: { border: { fg: "yellow" } },
+                ...focusablePanelStyle(),
+                selected: {
+                    fg: TUI_THEME.selectedText,
+                    bg: TUI_THEME.selectedBackground,
+                    bold: true,
+                },
+                item: { fg: TUI_THEME.text, bg: TUI_THEME.background },
             },
         });
         const updatePreview = () => {
             const item = this.#backlogs[selectedIndex(list)];
             preview.setLabel(item ? ` ${item.identifier} · ${item.status} ` : " Nenhum backlog ");
-            preview.setContent(item ? renderMarkdown(formatBacklogPreview(item.content)) :
-                "Crie arquivos em specs/backlog/<NNNN>-<slug>.md para visualizá-los aqui.");
-            this.#screen?.render();
+            preview.setContent(item
+                ? renderMarkdown(formatBacklogPreview(item.content))
+                : "Crie arquivos em specs/backlog/<NNNN>-<slug>.md para visualizá-los aqui.");
+            this.renderScreen();
         };
         list.on("select item", updatePreview);
         list.on("keypress", updatePreview);
@@ -495,7 +581,7 @@ export class SpecsfyTui {
             width: "100%",
             height: "100%",
             border: "line",
-            style: { border: { fg: "gray" } },
+            style: { border: { fg: TUI_THEME.border } },
         });
         blessed.box({
             parent: panel,
@@ -504,7 +590,11 @@ export class SpecsfyTui {
             width: "100%-2",
             height: 1,
             content: heading,
-            style: { fg: "white", bg: "cyan", bold: true },
+            style: {
+                fg: TUI_THEME.activeText,
+                bg: TUI_THEME.activeBackground,
+                bold: true,
+            },
         });
         const list = blessed.list({
             parent: panel,
@@ -522,8 +612,12 @@ export class SpecsfyTui {
             vi: true,
             mouse: true,
             style: {
-                selected: { fg: "white", bg: "blue", bold: true },
-                item: { fg: "white" },
+                selected: {
+                    fg: TUI_THEME.selectedText,
+                    bg: TUI_THEME.selectedBackground,
+                    bold: true,
+                },
+                item: { fg: TUI_THEME.text, bg: TUI_THEME.background },
             },
         });
         const open = () => {
@@ -558,10 +652,16 @@ export class SpecsfyTui {
             vi: true,
             mouse: true,
             padding: { left: 1, right: 1 },
-            scrollbar: { ch: " ", track: { bg: "gray" }, style: { bg: "cyan" } },
-            style: { fg: "white", bg: "black", border: { fg: "cyan" } },
+            scrollbar: terminalScrollbar(),
+            style: {
+                fg: TUI_THEME.text,
+                bg: TUI_THEME.background,
+                border: { fg: TUI_THEME.focusBackground },
+            },
         });
+        this.#modalFocus = screen.focused;
         this.#modal = modal;
+        screen.focusPush(modal);
         modal.focus();
         screen.render();
     }
@@ -576,12 +676,7 @@ export class SpecsfyTui {
             align: "center",
             mouse: true,
             keys: true,
-            style: {
-                fg: "white",
-                bg: "blue",
-                focus: { bg: "cyan", fg: "black" },
-                hover: { bg: "cyan", fg: "black" },
-            },
+            style: buttonStyle(true),
         });
         button.on("press", () => void this.runTests());
         blessed.box({
@@ -629,7 +724,7 @@ export class SpecsfyTui {
             this.showTab("tests");
         });
         if (this.#testResultTab === "summary") {
-            blessed.box({
+            this.#testSummaryPanel = blessed.box({
                 parent: body,
                 top: 6,
                 left: 1,
@@ -643,14 +738,14 @@ export class SpecsfyTui {
                 vi: true,
                 mouse: true,
                 scrollable: true,
-                style: { border: { fg: "gray" }, focus: { border: { fg: "yellow" } } },
+                style: focusablePanelStyle(),
             });
         }
         else {
             // O blessed.log agenda a rolagem depois de setContent e acessa widgets
             // destruídos quando a saída ao vivo recria a aba. A caixa preserva a
             // rolagem sem deixar callbacks pendentes entre duas renderizações.
-            blessed.box({
+            this.#testOutputPanel = blessed.box({
                 parent: body,
                 top: 6,
                 left: 1,
@@ -666,15 +761,15 @@ export class SpecsfyTui {
                 alwaysScroll: true,
                 tags: false,
                 content: this.#testOutput.join("\n"),
-                style: { border: { fg: "gray" }, focus: { border: { fg: "yellow" } } },
+                style: focusablePanelStyle(),
             });
         }
         button.focus();
     }
     async runTests() {
-        this.showTab("tests");
-        if (this.#testRunning)
+        if (this.#modal || this.#testRunning)
             return;
+        this.showTab("tests");
         this.#testRunning = true;
         this.#testResultTab = "output";
         this.#testOutput = [];
@@ -684,27 +779,32 @@ export class SpecsfyTui {
         try {
             const result = await runProjectTests(this.project, (line) => {
                 this.#testOutput.push(line);
+                this.#testOutputPanel?.setContent(this.#testOutput.join("\n"));
                 if (this.#activeTab === "tests" && this.#testResultTab === "output") {
-                    this.showTab("tests");
+                    this.renderScreen();
                 }
             });
             this.#testSummary = formatTestRun(result);
+            this.#testSummaryPanel?.setContent(this.#testSummary);
             this.#testResultTab = "summary";
             this.showStatus(`${result.exit_code === 0 ? "Testes passaram" : "Testes falharam"} · ` +
                 `${result.duration_seconds.toFixed(2)}s · exit code ${result.exit_code}`);
-            this.showTab("tests");
+            if (this.#activeTab === "tests")
+                this.showTab("tests");
         }
         catch (error) {
             const message = `Erro ao executar testes: ${errorMessage(error)}`;
             this.#testSummary = message;
+            this.#testSummaryPanel?.setContent(message);
             this.#testOutput.push(message);
             this.#testResultTab = "summary";
             this.showStatus(message);
-            this.showTab("tests");
+            if (this.#activeTab === "tests")
+                this.showTab("tests");
         }
         finally {
             this.#testRunning = false;
-            this.#screen?.render();
+            this.renderScreen();
         }
     }
     renderSkills(body) {
@@ -716,8 +816,10 @@ export class SpecsfyTui {
             height: 1,
             content: `${this.project}/skills-lock.json · ` +
                 `${this.#installed.size} skill(s) Specsfy instalada(s)` +
-                (this.#catalogError ? ` · catálogo indisponível: ${this.#catalogError}` : ""),
-            style: { fg: "gray" },
+                (this.#catalogError
+                    ? ` · catálogo indisponível: ${this.#catalogError}`
+                    : ""),
+            style: { fg: TUI_THEME.textMuted },
         });
         const search = blessed.textbox({
             parent: body,
@@ -731,7 +833,7 @@ export class SpecsfyTui {
             inputOnFocus: false,
             keys: true,
             mouse: true,
-            style: { border: { fg: "gray" }, focus: { border: { fg: "yellow" } } },
+            style: focusablePanelStyle(),
         });
         search.on("submit", (value) => {
             this.#skillQuery = String(value ?? "");
@@ -787,7 +889,7 @@ export class SpecsfyTui {
             height: 1,
             content: `${this.#selected.size} selecionada(s) · ${visible.length} visível(is) · ` +
                 `${toInstall} para instalar · ${toRemove} para remover`,
-            style: { fg: "white", bold: true },
+            style: { fg: TUI_THEME.text, bold: true },
         });
         const catalog = blessed.box({
             parent: body,
@@ -811,10 +913,13 @@ export class SpecsfyTui {
             vi: true,
             mouse: true,
             style: {
-                selected: { fg: "white", bg: "blue", bold: true },
-                item: { fg: "white" },
-                border: { fg: "gray" },
-                focus: { border: { fg: "yellow" } },
+                ...focusablePanelStyle(),
+                selected: {
+                    fg: TUI_THEME.selectedText,
+                    bg: TUI_THEME.selectedBackground,
+                    bold: true,
+                },
+                item: { fg: TUI_THEME.text, bg: TUI_THEME.background },
             },
         });
         const detail = blessed.box({
@@ -830,7 +935,7 @@ export class SpecsfyTui {
             keys: true,
             vi: true,
             mouse: true,
-            style: { border: { fg: "gray" }, focus: { border: { fg: "yellow" } } },
+            style: focusablePanelStyle(),
         });
         blessed.box({
             parent: catalog,
@@ -839,7 +944,11 @@ export class SpecsfyTui {
             width: "64%",
             height: 1,
             content: " PLANO    SKILL                        CATEGORIA          ESTADO ",
-            style: { fg: "black", bg: "white", bold: true },
+            style: {
+                fg: TUI_THEME.activeText,
+                bg: TUI_THEME.activeBackground,
+                bold: true,
+            },
         });
         const updateDetail = () => {
             const option = visible[selectedIndex(list)];
@@ -847,7 +956,7 @@ export class SpecsfyTui {
             detail.setContent(option
                 ? formatSkillDetail(option, this.#installed, this.#selected, this.#detected)
                 : "Nenhuma skill visível.\n\nAjuste a busca ou os filtros para continuar.");
-            this.#screen?.render();
+            this.renderScreen();
         };
         list.on("select item", updateDetail);
         list.on("keypress", () => setImmediate(updateDetail));
@@ -899,7 +1008,18 @@ export class SpecsfyTui {
                 "Ctrl+Q encerra a interface.",
         });
     }
-    async refreshAll(reloadCatalog) {
+    refreshAll(reloadCatalog) {
+        if (this.#refreshPromise)
+            return this.#refreshPromise;
+        const promise = this.refreshAllInternal(reloadCatalog);
+        const tracked = promise.finally(() => {
+            if (this.#refreshPromise === tracked)
+                this.#refreshPromise = undefined;
+        });
+        this.#refreshPromise = tracked;
+        return tracked;
+    }
+    async refreshAllInternal(reloadCatalog) {
         try {
             const [specs, backlogs, lock] = await Promise.all([
                 scanSpecs(this.project),
@@ -908,8 +1028,8 @@ export class SpecsfyTui {
             ]);
             this.#specs = specs;
             this.#backlogs = backlogs;
-            this.#installed = new Set(Object.keys(lock.skills).filter(isSpecsfySkill));
-            this.#selected = new Set(this.#installed);
+            const installed = new Set(Object.keys(lock.skills).filter(isSpecsfySkill));
+            this.#installed = installed;
             if (reloadCatalog || !this.#catalog) {
                 try {
                     this.#catalog = await Catalog.fetch();
@@ -917,10 +1037,14 @@ export class SpecsfyTui {
                     this.#catalogError = "";
                 }
                 catch (error) {
-                    this.#catalogEntries = [];
                     this.#catalogError = errorMessage(error);
                 }
             }
+            const available = new Set(buildSkillOptions(this.#catalogEntries, installed).map((option) => option.name));
+            this.#selected = this.#loaded && this.#selectionDirty
+                ? new Set([...this.#selected].filter((name) => available.has(name)))
+                : new Set(installed);
+            this.#loaded = true;
             this.#fingerprints = {
                 specs: await specsFingerprint(this.project),
                 backlogs: await backlogsFingerprint(this.project),
@@ -929,7 +1053,9 @@ export class SpecsfyTui {
             const summary = summarizeSpecs(specs);
             this.showStatus(`${this.project} · ${summary.completed_specs}/${summary.total_specs} specs completas · ` +
                 "atualização automática ativa" +
-                (this.#catalogError ? ` · catálogo indisponível: ${this.#catalogError}` : ""));
+                (this.#catalogError
+                    ? ` · catálogo indisponível: ${this.#catalogError}`
+                    : ""));
             this.showTab(this.#activeTab);
         }
         catch (error) {
@@ -960,20 +1086,26 @@ export class SpecsfyTui {
     }
     selectFramework() {
         this.#selected = new Set([...this.#selected, ...FRAMEWORK_SKILLS]);
+        this.#selectionDirty = true;
         this.showStatus("As skills do framework foram selecionadas. Use ^A para aplicar.");
         this.showTab("skills");
     }
     async detectSkills() {
+        if (this.#modal)
+            return;
         this.showTab("skills");
+        const startedOnSkills = this.#activeTab === "skills";
         try {
             this.#catalog ??= await Catalog.fetch();
             this.#catalogEntries = this.#catalog.entries;
             const entries = await this.#catalog.detect(this.project);
             this.#detected = new Set(entries.map((entry) => entry.name));
             this.#selected = new Set([...this.#selected, ...this.#detected]);
+            this.#selectionDirty = true;
             this.#skillFilter = "detected";
             this.showStatus(`Skills detectadas e selecionadas: ${[...this.#detected].sort().join(", ") || "nenhuma skill"}`);
-            this.showTab("skills");
+            if (startedOnSkills && this.#activeTab === "skills")
+                this.showTab("skills");
         }
         catch (error) {
             this.showStatus(`Erro: ${errorMessage(error)}`);
@@ -990,21 +1122,26 @@ export class SpecsfyTui {
         else {
             this.#selected.add(this.#selectedSkill);
         }
+        this.#selectionDirty = true;
         this.showTab("skills");
     }
     selectVisible() {
         this.#suppressSkillToggleUntil = Date.now() + 100;
         for (const option of this.visibleSkills())
             this.#selected.add(option.name);
+        this.#selectionDirty = true;
         this.showTab("skills");
     }
     clearVisible() {
         this.#suppressSkillToggleUntil = Date.now() + 100;
         for (const option of this.visibleSkills())
             this.#selected.delete(option.name);
+        this.#selectionDirty = true;
         this.showTab("skills");
     }
     async applySkills() {
+        if (this.#modal)
+            return;
         this.showTab("skills");
         try {
             const selected = new Set([...this.#selected].filter(isSpecsfySkill));
@@ -1034,6 +1171,7 @@ export class SpecsfyTui {
             }
             if (toRemove.length)
                 changed.push(...(await installer.remove(toRemove.sort())));
+            this.#selectionDirty = false;
             await this.refreshAll(false);
             this.showStatus(changed.length
                 ? `Seleção aplicada: ${changed.length} alteração(ões).`
@@ -1044,6 +1182,8 @@ export class SpecsfyTui {
         }
     }
     async updateSkills() {
+        if (this.#modal)
+            return;
         this.showTab("skills");
         try {
             const changed = await (await SkillInstaller.create(this.project)).updateAll();
@@ -1058,7 +1198,7 @@ export class SpecsfyTui {
     }
     showStatus(message) {
         this.#status?.setContent(message);
-        this.#screen?.render();
+        this.renderScreen();
     }
 }
 /** Cria as opções base, especialistas e instalações fora do catálogo atual. */
@@ -1066,7 +1206,8 @@ export function buildSkillOptions(catalogEntries, installed) {
     const options = FRAMEWORK_SKILLS.map((name) => ({
         name,
         description: BASE_DESCRIPTIONS[name] ?? "Skill do framework Specsfy.",
-        kind: AUXILIARY_SKILLS.includes(name) || name === "specsfy-setup"
+        kind: AUXILIARY_SKILLS.includes(name) ||
+            name === "specsfy-setup"
             ? "auxiliary"
             : DOCUMENTATION_SKILLS.includes(name)
                 ? "documentation"
@@ -1152,9 +1293,7 @@ function friendlySkillName(name) {
     };
     if (baseNames[name])
         return baseNames[name];
-    return titleCase(name
-        .replace(/^specsfy-(?:aux|specialist)-/u, "")
-        .replaceAll("-", " "));
+    return titleCase(name.replace(/^specsfy-(?:aux|specialist)-/u, "").replaceAll("-", " "));
 }
 function isSpecsfySkill(name) {
     return (FRAMEWORK_SKILLS.includes(name) ||
@@ -1200,20 +1339,49 @@ function renderMarkdown(content) {
 }
 function buttonStyle(primary = false) {
     return {
-        fg: "white",
-        bg: primary ? "blue" : "black",
-        border: { fg: primary ? "cyan" : "gray" },
-        focus: { fg: "white", bg: "blue", border: { fg: "cyan" } },
-        hover: { fg: "white", bg: "blue", border: { fg: "cyan" } },
+        fg: primary ? TUI_THEME.primaryText : TUI_THEME.text,
+        bg: primary ? TUI_THEME.primaryBackground : TUI_THEME.surface,
+        border: { fg: primary ? TUI_THEME.focusBackground : TUI_THEME.border },
+        focus: {
+            fg: TUI_THEME.focusText,
+            bg: TUI_THEME.focusBackground,
+            border: { fg: TUI_THEME.focusBackground },
+        },
+        hover: {
+            fg: TUI_THEME.focusText,
+            bg: TUI_THEME.focusBackground,
+            border: { fg: TUI_THEME.focusBackground },
+        },
     };
 }
 function tabStyle(active) {
     return {
-        fg: active ? "black" : "gray",
-        bg: active ? "cyan" : "black",
+        fg: active ? TUI_THEME.activeText : TUI_THEME.textMuted,
+        bg: active ? TUI_THEME.activeBackground : TUI_THEME.background,
         bold: active,
-        focus: { fg: "white", bg: "blue" },
-        hover: { fg: "white", bg: "blue" },
+        focus: { fg: TUI_THEME.focusText, bg: TUI_THEME.focusBackground },
+        hover: { fg: TUI_THEME.focusText, bg: TUI_THEME.focusBackground },
     };
 }
+/** Mantém borda e foco legíveis em painéis, inputs e regiões roláveis. */
+function focusablePanelStyle() {
+    return {
+        fg: TUI_THEME.text,
+        bg: TUI_THEME.background,
+        border: { fg: TUI_THEME.border },
+        focus: { border: { fg: TUI_THEME.focusBackground } },
+    };
+}
+/** Usa trilho discreto e indicador turquesa na rolagem dos painéis. */
+function terminalScrollbar() {
+    return {
+        ch: " ",
+        track: { bg: TUI_THEME.surfaceRaised },
+        style: { bg: TUI_THEME.focusBackground },
+    };
+}
+/** Detecta o estado encerrado sem depender da tipagem incompleta do blessed. */
+function screenDestroyed(screen) {
+    return Boolean(screen.destroyed);
+}
 //# sourceMappingURL=tui.js.map