@lamemind/loom-deck 0.9.0 → 0.9.2

package/dist/cli.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { render, Box, Text, useApp, useInput } from 'ink';
+import { render, Box, Text, useApp, useInput, useStdout } from 'ink';
 import { useState, useEffect, useMemo } from 'react';
 import { spawn } from 'node:child_process';
 import { statSync } from 'node:fs';
@@ -11,6 +11,7 @@ import { resolveTasksPath, resolveTasksDir, loadTasks, loadTaskDetail, } from '.
 import { discoverProjectSessions } from './sessions.js';
 import { appendTaskBinding, loadTaskBindings } from './task-index.js';
 import { launchLegend, loadIdentity, loadLaunch } from './config.js';
+import { layoutBudget, normalizeEmoji, windowRange, wrapLines, } from './viewport.js';
 import { applyView, cycleSort, describeSort, priName, progName, toggleHidden, PRI_ENTRIES, PROG_ENTRIES, } from './view.js';
 import { initialDetail, progressText, writeTaskEdit, PRI_GLYPH, PRI_LABEL, PROG_GLYPH, } from './task-edit.js';
 import { loadView, saveView, viewFilePath } from './view-store.js';
@@ -166,6 +167,29 @@ function commitTaskEdit(cwd, paths, message, onResult) {
     child.on('close', (code) => onResult(code === 0, err.trim().split('\n')[0] ?? ''));
     return child;
 }
+// Dimensioni del terminale, live sul resize.
+//
+// Non è una comodità di layout: senza `rows` il frame non ha tetto, e un frame
+// più alto del terminale fa cadere Ink nel ramo `clearTerminal` (ink.js:121)
+// che su VTE/Ptyxis riversa ogni redraw nello scrollback.
+//
+// Il valore iniziale conta quanto il resize: una tab Ptyxis appena aperta parte
+// spesso a 24 righe e riceve il SIGWINCH subito dopo. Nella finestra fra i due
+// il deck disegnava già a piena altezza — motivo per cui lo scrollback risultava
+// sporco fin dall'avvio, prima ancora di toccare un tasto.
+function useTerminalSize() {
+    const { stdout } = useStdout();
+    const [size, setSize] = useState({ rows: stdout.rows || 24, columns: stdout.columns || 80 });
+    useEffect(() => {
+        const onResize = () => setSize({ rows: stdout.rows || 24, columns: stdout.columns || 80 });
+        stdout.on('resize', onResize);
+        onResize(); // allinea se il resize è arrivato prima del mount
+        return () => {
+            stdout.off('resize', onResize);
+        };
+    }, [stdout]);
+    return size;
+}
 // Carica tasks.md e lo ri-legge quando cambia sotto (poll su mtime). Poll
 // (non fs.watch) perché i writer di tasks.md — checkpoint-task/create-task —
 // riscrivono il file (probabile replace atomico), che rompe il watch sull'inode
@@ -249,22 +273,23 @@ function truncate(s, n) {
     const flat = s.replace(/\s+/g, ' ').trim();
     return flat.length > n ? flat.slice(0, n - 1).trimEnd() + '…' : flat;
 }
-// Forza la presentazione emoji (larghezza 2 non-ambigua) su un glifo BMP
-// text-default come ⚡ (U+26A1, range simboli U+2190–U+2BFF). Senza il variation
-// selector VS16 questi glifi sono larghi-ambigui: Ink li misura 1, ma string-width
-// e il terminale li disegnano 2 → la riga esce 1 colonna troppo larga, sfonda il
-// pane e va a capo (righe vuote spurie). Gli emoji astrali (🔥🔵🟡…, U+1F000+) sono
-// già width-2 non-ambigui e le sequenze con VS16 (✔️) sono >1 code point → intatti.
-const VS16 = '️';
-function forceEmojiWidth(s) {
-    const cps = [...s];
-    if (cps.length !== 1)
-        return s;
-    const cp = cps[0].codePointAt(0);
-    if (cp >= 0x2190 && cp <= 0x2bff)
-        return s + VS16;
-    return s;
-}
+// Normalizzazione larghezza glifi → `normalizeEmoji` in viewport.ts.
+//
+// Sostituisce il precedente `forceEmojiWidth`, che aveva l'intuizione giusta
+// (timbrare il VS16) ma due limiti che lasciavano passare il difetto:
+//  - agiva solo su stringhe di UN codepoint, quindi non toccava mai un testo
+//    composto — la riga della legenda launch, una descrizione task con emoji
+//    dentro, il titolo di una sessione;
+//  - decideva per intervallo di codepoint invece che per larghezza misurata,
+//    quindi avrebbe timbrato anche `↓` `↑` `−` (larghi 1) se gli fossero
+//    arrivati da soli, accorciando la riga invece di allargarla.
+const forceEmojiWidth = normalizeEmoji;
+// Glifi LETTERALI del JSX che ricadono nella classe mal misurata (BMP largo 2
+// senza VS16). I dati passano dai loader, questi no: normalizzati una volta
+// qui, così nessun sito di render li scrive nudi. `↳ ○ ▸ ⏎ · − ↑ ↓` sono
+// larghi 1 e restano intatti.
+const CARET = normalizeEmoji('▶ ');
+const CARET_OFF = '  ';
 // Normalizza il marker Done per il display. `✔` (U+2714) è text-presentation-
 // default: string-width — quindi Ink, sia per il layout sia per il troncamento —
 // lo misura 2 (rispetta il VS16 di `✔️`), ma VTE/Ptyxis lo disegna largo 1
@@ -315,6 +340,8 @@ function Deck({ cwd, tasksPath, tasksDir }) {
     // T41 — bozza dell'edit (null fuori dal modale) e riga attiva della griglia.
     const [edit, setEdit] = useState(null);
     const [editRow, setEditRow] = useState(0);
+    // Dimensioni vive del terminale: sono l'input del budget d'altezza sotto.
+    const { rows, columns } = useTerminalSize();
     // Voci launch del progetto (T32): lette una volta, raggiunte per indice 1..9.
     const launch = useMemo(() => loadLaunch(cwd), [cwd]);
     // Identità (T37): titolo delle tab terminale spawnate col tasto `t`.
@@ -680,10 +707,39 @@ function Deck({ cwd, tasksPath, tasksDir }) {
     const selSessionId = visibleSessions[selSession]?.sessionId;
     const parentLabel = isSpot ? 'spot' : selectedTaskId ?? '—';
     const canSpawn = focus === 'tasks' && !isSpot;
-    // Larghezza letta a ogni render (non memoizzata): dopo un resize il primo
-    // re-render utile ricalcola la legenda senza bisogno di un listener dedicato.
-    const legend = launchLegend(launch, process.stdout.columns || 80);
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "loom-deck" }), mode === 'create' ? (_jsxs(Text, { dimColor: true, children: ["nuova task \u00B7 ", _jsx(Text, { color: "yellow", children: "\u23CE" }), " crea \u00B7 ", _jsx(Text, { color: "yellow", children: "esc" }), " annulla"] })) : mode === 'sort' ? (_jsxs(Text, { dimColor: true, children: ["sort \u00B7 ", _jsx(Text, { color: "yellow", children: "p" }), " pri ", _jsx(Text, { color: "yellow", children: "s" }), " stato", ' ', _jsx(Text, { color: "yellow", children: "i" }), " id (asc\u2192desc\u2192off) \u00B7 ", _jsx(Text, { color: "yellow", children: "\u23CE" }), " ok \u00B7", ' ', _jsx(Text, { color: "yellow", children: "esc" }), " annulla"] })) : mode === 'filter' ? (_jsxs(Text, { dimColor: true, children: ["filtri \u00B7 ", _jsx(Text, { color: "yellow", children: "\u2191\u2193\u2190\u2192" }), " naviga \u00B7 ", _jsx(Text, { color: "yellow", children: "spazio" }), ' ', "mostra/nascondi \u00B7 ", _jsx(Text, { color: "yellow", children: "\u23CE" }), " ok \u00B7 ", _jsx(Text, { color: "yellow", children: "esc" }), " annulla"] })) : mode === 'edit' ? (_jsxs(Text, { dimColor: true, children: ["edit \u00B7 ", _jsx(Text, { color: "yellow", children: "\u2191\u2193" }), " campo \u00B7 ", _jsx(Text, { color: "yellow", children: "\u2190\u2192" }), " valore \u00B7", ' ', _jsx(Text, { color: "yellow", children: "\u23CE" }), " salva+commit \u00B7 ", _jsx(Text, { color: "yellow", children: "esc" }), " annulla"] })) : (_jsxs(Text, { dimColor: true, children: ["\u2191\u2193 naviga \u00B7 \u2190\u2192 pane \u00B7 \u23CE ", canSpawn ? 'spawn' : '—', " \u00B7 C nuova \u00B7 E edit \u00B7 S sort \u00B7 F filtri \u00B7 w salva \u00B7 t term \u00B7 c claude \u00B7 q esci \u00B7 focus: ", _jsx(Text, { color: "cyan", children: focus })] })), mode === 'normal' && launch.length > 0 ? (_jsxs(Text, { dimColor: true, children: ["launch ", legend.shown, legend.overflow > 0 ? (_jsxs(Text, { color: "yellow", children: [" \u00B7 +", legend.overflow, " fuori riga"] })) : null, legend.unreachable > 0 ? (_jsxs(Text, { color: "yellow", children: [" \u00B7 ", legend.unreachable, " oltre la 9\u00AA (non raggiungibili)"] })) : null] })) : null, mode === 'create' ? (_jsxs(Box, { borderStyle: "round", borderColor: "yellow", paddingX: 1, marginTop: 1, children: [_jsx(Text, { color: "yellow", children: "C \u203A " }), _jsx(Text, { children: draft }), _jsx(Text, { inverse: true, children: " " })] })) : null, mode === 'sort' ? _jsx(SortModal, { sort: view.sort }) : null, mode === 'filter' ? _jsx(FilterModal, { view: view, cursor: filterCursor }) : null, mode === 'edit' && edit && selTask ? (_jsx(EditModal, { id: selTask.id, draft: edit, row: editRow })) : null, _jsxs(Box, { flexDirection: "row", marginTop: 1, children: [_jsx(TasksPane, { tasks: viewTasks, total: tasks.length, hidden: hiddenTasks, view: view, selected: selIndex, spotCount: spotCount, childCount: childCount, focused: focus === 'tasks', loadError: loadError, detail: detail }), _jsx(SessionsPane, { parentLabel: parentLabel, isSpot: isSpot, sessions: visibleSessions, total: childSessions.length, hidden: hiddenSessions, selectedId: selSessionId, focused: focus === 'sessions' })] }), note ? _jsx(Text, { color: "green", children: note }) : null] }));
+    // Larghezza dal medesimo hook che dà l'altezza: dopo un resize la legenda si
+    // ricalcola con lo stesso re-render che ridimensiona i pane.
+    const legend = launchLegend(launch, columns);
+    // ── Budget d'altezza ────────────────────────────────────────────────────
+    // Il frame deve restare sotto `rows`, sempre: oltre quella soglia Ink smette
+    // di aggiornare per differenza e pulisce lo schermo a ogni redraw, che su
+    // Ptyxis significa un frame intero versato nello scrollback per ogni tick del
+    // poll. Tutto ciò che varia in altezza (le due liste e la descrizione del
+    // dettaglio) riceve qui la propria capienza.
+    const launchLine = mode === 'normal' && launch.length > 0;
+    const detailParts = detail ? detailMetaOf(detail) : null;
+    const budget = layoutBudget({
+        rows,
+        mode,
+        launchLine,
+        noteLine: Boolean(note),
+        hasDetail: Boolean(detail),
+        detailMetaLines: detailParts?.metaLines ?? 0,
+    });
+    // Finestre di rendering. Le liste "logiche" (viewTasks, visibleSessions)
+    // restano intere: navigazione, selezione e spawn continuano a ragionare su
+    // quelle, la finestra è solo ciò che finisce a schermo.
+    const taskWin = windowRange(viewTasks.length, selIndex - 1, budget.taskRows);
+    const windowTasks = viewTasks.slice(taskWin.start, taskWin.end);
+    const sessionWin = windowRange(visibleSessions.length, selSession, budget.sessionRows);
+    const windowSessions = visibleSessions.slice(sessionWin.start, sessionWin.end);
+    // Sotto la soglia minima il layout a box non entra a nessun costo: si scende
+    // a una riga sola. Perdere il deck per un terminale basso è meglio che
+    // sporcare la cronologia del terminale a ogni poll.
+    if (budget.compact) {
+        return (_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { bold: true, color: "cyan", children: "loom-deck" }), _jsxs(Text, { dimColor: true, children: [' ', "\u00B7 ", viewTasks.length, " task \u00B7 sel ", selectedTaskId ?? 'spot', " \u00B7 terminale ", rows, "\u00D7", columns, ": troppo basso, allarga"] })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "loom-deck" }), mode === 'create' ? (_jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ["nuova task \u00B7 ", _jsx(Text, { color: "yellow", children: "\u23CE" }), " crea \u00B7 ", _jsx(Text, { color: "yellow", children: "esc" }), " annulla"] })) : mode === 'sort' ? (_jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ["sort \u00B7 ", _jsx(Text, { color: "yellow", children: "p" }), " pri ", _jsx(Text, { color: "yellow", children: "s" }), " stato", ' ', _jsx(Text, { color: "yellow", children: "i" }), " id (asc\u2192desc\u2192off) \u00B7 ", _jsx(Text, { color: "yellow", children: "\u23CE" }), " ok \u00B7", ' ', _jsx(Text, { color: "yellow", children: "esc" }), " annulla"] })) : mode === 'filter' ? (_jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ["filtri \u00B7 ", _jsx(Text, { color: "yellow", children: "\u2191\u2193\u2190\u2192" }), " naviga \u00B7 ", _jsx(Text, { color: "yellow", children: "spazio" }), ' ', "mostra/nascondi \u00B7 ", _jsx(Text, { color: "yellow", children: "\u23CE" }), " ok \u00B7 ", _jsx(Text, { color: "yellow", children: "esc" }), " annulla"] })) : mode === 'edit' ? (_jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ["edit \u00B7 ", _jsx(Text, { color: "yellow", children: "\u2191\u2193" }), " campo \u00B7 ", _jsx(Text, { color: "yellow", children: "\u2190\u2192" }), " valore \u00B7", ' ', _jsx(Text, { color: "yellow", children: "\u23CE" }), " salva+commit \u00B7 ", _jsx(Text, { color: "yellow", children: "esc" }), " annulla"] })) : (_jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ["\u2191\u2193 naviga \u00B7 \u2190\u2192 pane \u00B7 \u23CE ", canSpawn ? 'spawn' : '—', " \u00B7 C nuova \u00B7 E edit \u00B7 S sort \u00B7 F filtri \u00B7 w salva \u00B7 t term \u00B7 c claude \u00B7 q esci \u00B7 focus: ", _jsx(Text, { color: "cyan", children: focus })] })), mode === 'normal' && launch.length > 0 ? (_jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ["launch ", legend.shown, legend.overflow > 0 ? (_jsxs(Text, { color: "yellow", children: [" \u00B7 +", legend.overflow, " fuori riga"] })) : null, legend.unreachable > 0 ? (_jsxs(Text, { color: "yellow", children: [" \u00B7 ", legend.unreachable, " oltre la 9\u00AA (non raggiungibili)"] })) : null] })) : null, mode === 'create' ? (_jsxs(Box, { borderStyle: "round", borderColor: "yellow", paddingX: 1, marginTop: 1, children: [_jsx(Text, { color: "yellow", children: "C \u203A " }), _jsx(Text, { children: draft }), _jsx(Text, { inverse: true, children: " " })] })) : null, mode === 'sort' ? _jsx(SortModal, { sort: view.sort }) : null, mode === 'filter' ? _jsx(FilterModal, { view: view, cursor: filterCursor }) : null, mode === 'edit' && edit && selTask ? (_jsx(EditModal, { id: selTask.id, draft: edit, row: editRow })) : null, _jsxs(Box, { flexDirection: "row", marginTop: 1, children: [_jsx(TasksPane, { tasks: windowTasks, filtered: viewTasks.length, total: tasks.length, hidden: hiddenTasks, view: view, selected: selIndex, spotCount: spotCount, childCount: childCount, focused: focus === 'tasks', loadError: loadError, detail: detail, windowStart: taskWin.start, above: taskWin.start, below: viewTasks.length - taskWin.end, detailLines: budget.detailLines, columns: columns }), _jsx(SessionsPane, { parentLabel: parentLabel, isSpot: isSpot, sessions: windowSessions, total: childSessions.length, hidden: hiddenSessions, selectedId: selSessionId, focused: focus === 'sessions', above: sessionWin.start, below: visibleSessions.length - sessionWin.end })] }), note ? _jsx(Text, { color: "green", wrap: "truncate-end", children: normalizeEmoji(note) }) : null] }));
 }
 const SORT_UI = { pri: 'pri', prog: 'stato', id: 'id' };
 // Modali resi IN FLUSSO (come l'input box di create), non in overlay assoluto:
@@ -710,34 +766,61 @@ function FilterModal({ view, cursor }) {
 // La riga di anteprima mostra il testo ESATTO che finirà nel campo `Progress`
 // del task file — così il default (`✔️ Done at <oggi>`) non è una sorpresa.
 function EditModal({ id, draft, row }) {
-    const mark = (r) => (row === r ? '▶ ' : '  ');
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 1, marginTop: 1, children: [_jsxs(Text, { color: "yellow", children: ["E \u203A ", id, " \u00B7 priorit\u00E0 e stato"] }), _jsxs(Text, { children: [mark(0), _jsx(Text, { dimColor: true, children: "pri  " }), EDIT_PRI.map((p) => (_jsxs(Text, { inverse: draft.pri === p, color: draft.pri === p ? 'green' : 'gray', children: ['  ', forceEmojiWidth(PRI_GLYPH[p]), " ", PRI_LABEL[p]] }, p)))] }), _jsxs(Text, { children: [mark(1), _jsx(Text, { dimColor: true, children: "stato" }), EDIT_PROG.map((p) => (_jsxs(Text, { inverse: draft.prog === p, color: draft.prog === p ? 'green' : 'gray', children: ['  ', forceEmojiWidth(PROG_GLYPH[p]), " ", p] }, p)))] }), _jsxs(Text, { children: [mark(2), _jsx(Text, { dimColor: true, children: "prog " }), _jsxs(Text, { children: ['  ', draft.detail] }), row === 2 ? _jsx(Text, { inverse: true, children: " " }) : null, !draft.detail && row !== 2 ? _jsx(Text, { dimColor: true, children: "(default)" }) : null] }), _jsxs(Text, { dimColor: true, children: ["\u21B3 ", progressText(draft.prog, draft.detail)] })] }));
+    const mark = (r) => (row === r ? CARET : CARET_OFF);
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 1, marginTop: 1, children: [_jsxs(Text, { color: "yellow", children: ["E \u203A ", id, " \u00B7 priorit\u00E0 e stato"] }), _jsxs(Text, { children: [mark(0), _jsx(Text, { dimColor: true, children: "pri  " }), EDIT_PRI.map((p) => (_jsxs(Text, { inverse: draft.pri === p, color: draft.pri === p ? 'green' : 'gray', children: ['  ', forceEmojiWidth(PRI_GLYPH[p]), " ", PRI_LABEL[p]] }, p)))] }), _jsxs(Text, { children: [mark(1), _jsx(Text, { dimColor: true, children: "stato" }), EDIT_PROG.map((p) => (_jsxs(Text, { inverse: draft.prog === p, color: draft.prog === p ? 'green' : 'gray', children: ['  ', forceEmojiWidth(PROG_GLYPH[p]), " ", p] }, p)))] }), _jsxs(Text, { children: [mark(2), _jsx(Text, { dimColor: true, children: "prog " }), _jsxs(Text, { children: ['  ', draft.detail] }), row === 2 ? _jsx(Text, { inverse: true, children: " " }) : null, !draft.detail && row !== 2 ? _jsx(Text, { dimColor: true, children: "(default)" }) : null] }), _jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ["\u21B3 ", normalizeEmoji(progressText(draft.prog, draft.detail))] })] }));
 }
-function TasksPane({ tasks, total, hidden, view, selected, spotCount, childCount, focused, loadError, detail, }) {
+function TasksPane({ tasks, filtered, total, hidden, view, selected, spotCount, childCount, focused, loadError, detail, windowStart, above, below, detailLines, columns, }) {
     const spotSelected = selected === 0;
-    return (_jsxs(Box, { flexDirection: "column", width: "50%", marginRight: 1, borderStyle: "single", borderColor: focused ? 'cyan' : 'gray', paddingX: 1, children: [_jsxs(Text, { bold: true, color: focused ? 'cyan' : undefined, children: ["Tasks (", hidden > 0 ? `${tasks.length}/${total}` : tasks.length, ")", hidden > 0 ? _jsxs(Text, { color: "yellow", children: [" \u00B7 ", hidden, " nascoste"] }) : null] }), _jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ["sort: ", describeSort(view.sort), view.hiddenPri.length + view.hiddenProg.length > 0 ? (_jsxs(Text, { children: [' ', "\u00B7 filtri:", ' ', [
+    return (_jsxs(Box, { flexDirection: "column", width: "50%", marginRight: 1, borderStyle: "single", borderColor: focused ? 'cyan' : 'gray', paddingX: 1, children: [_jsxs(Text, { bold: true, color: focused ? 'cyan' : undefined, wrap: "truncate-end", children: ["Tasks (", hidden > 0 ? `${filtered}/${total}` : filtered, ")", hidden > 0 ? _jsxs(Text, { color: "yellow", children: [" \u00B7 ", hidden, " nascoste"] }) : null, above > 0 ? _jsxs(Text, { dimColor: true, children: [" \u00B7 \u2191", above] }) : null, below > 0 ? _jsxs(Text, { dimColor: true, children: [" \u00B7 \u2193", below] }) : null] }), _jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ["sort: ", describeSort(view.sort), view.hiddenPri.length + view.hiddenProg.length > 0 ? (_jsxs(Text, { children: [' ', "\u00B7 filtri:", ' ', [
                                 ...PRI_ENTRIES.filter((e) => view.hiddenPri.includes(e.name)),
                                 ...PROG_ENTRIES.filter((e) => view.hiddenProg.includes(e.name)),
                             ]
-                                .map((e) => `−${e.glyph}`)
-                                .join(' ')] })) : null] }), _jsxs(Text, { inverse: spotSelected && focused, bold: spotSelected && !focused, wrap: "truncate-end", children: [spotSelected ? '▶ ' : '  ', "\u25CB spot  sessioni libere", spotCount > 0 ? ` (${spotCount})` : ''] }), loadError ? (_jsx(Text, { color: "red", wrap: "truncate-end", children: loadError })) : (tasks.map((task, i) => {
-                const sel = i + 1 === selected; // +1: lo 0 è spot
+                                .map((e) => `−${normalizeEmoji(e.glyph)}`)
+                                .join(' ')] })) : null] }), _jsxs(Text, { inverse: spotSelected && focused, bold: spotSelected && !focused, wrap: "truncate-end", children: [spotSelected ? CARET : CARET_OFF, "\u25CB spot  sessioni libere", spotCount > 0 ? ` (${spotCount})` : ''] }), loadError ? (_jsx(Text, { color: "red", wrap: "truncate-end", children: loadError })) : (tasks.map((task, i) => {
+                // windowStart riporta l'indice di finestra a quello della lista
+                // completa, su cui è keyata la selezione. +1: lo 0 è spot.
+                const sel = windowStart + i + 1 === selected;
                 const n = childCount.get(task.id) ?? 0;
-                return (_jsxs(Text, { inverse: sel && focused, bold: sel && !focused, dimColor: !sel && isDone(task.prog), wrap: "truncate-end", children: [sel ? '▶ ' : '  ', task.id, "  ", forceEmojiWidth(task.pri), "  ", displayProg(task.prog), "  ", task.desc, n > 0 ? ` (${n})` : ''] }, task.id));
-            })), detail ? _jsx(DetailPane, { detail: detail }) : null] }));
+                return (_jsxs(Text, { inverse: sel && focused, bold: sel && !focused, dimColor: !sel && isDone(task.prog), wrap: "truncate-end", children: [sel ? CARET : CARET_OFF, task.id, "  ", forceEmojiWidth(task.pri), "  ", displayProg(task.prog), "  ", task.desc, n > 0 ? ` (${n})` : ''] }, task.id));
+            })), detail && detailLines > 0 ? (_jsx(DetailPane, { detail: detail, maxLines: detailLines, columns: columns })) : null] }));
 }
-function SessionsPane({ parentLabel, isSpot, sessions, total, hidden, selectedId, focused, }) {
-    return (_jsxs(Box, { flexDirection: "column", width: "50%", borderStyle: "single", borderColor: focused ? 'cyan' : 'gray', paddingX: 1, children: [_jsxs(Text, { bold: true, color: focused ? 'cyan' : undefined, children: ["Sessions \u00B7 ", parentLabel, " (", total, ")", hidden > 0 ? _jsxs(Text, { dimColor: true, children: [" \u00B7 +", hidden, " pi\u00F9 vecchie"] }) : null] }), total === 0 ? (_jsx(Text, { color: "yellow", wrap: "truncate-end", children: isSpot ? 'nessuna sessione libera' : 'nessuna sessione legata a questa task' })) : (sessions.map((s) => {
+function SessionsPane({ parentLabel, isSpot, sessions, total, hidden, selectedId, focused, above, below, }) {
+    return (_jsxs(Box, { flexDirection: "column", width: "50%", borderStyle: "single", borderColor: focused ? 'cyan' : 'gray', paddingX: 1, children: [_jsxs(Text, { bold: true, color: focused ? 'cyan' : undefined, wrap: "truncate-end", children: ["Sessions \u00B7 ", parentLabel, " (", total, ")", hidden > 0 ? _jsxs(Text, { dimColor: true, children: [" \u00B7 +", hidden, " pi\u00F9 vecchie"] }) : null, above > 0 ? _jsxs(Text, { dimColor: true, children: [" \u00B7 \u2191", above] }) : null, below > 0 ? _jsxs(Text, { dimColor: true, children: [" \u00B7 \u2193", below] }) : null] }), total === 0 ? (_jsx(Text, { color: "yellow", wrap: "truncate-end", children: isSpot ? 'nessuna sessione libera' : 'nessuna sessione legata a questa task' })) : (sessions.map((s) => {
                 const sel = s.sessionId === selectedId;
-                return (_jsxs(Text, { inverse: sel && focused, bold: sel && !focused, wrap: "truncate-end", children: [sel ? '▶ ' : '  ', isSpot ? _jsx(Text, { dimColor: true, children: "\u25CB" }) : _jsx(Text, { color: "green", children: "\uD83D\uDD17" }), ' ', truncate(s.title, 44), ' ', _jsxs(Text, { dimColor: true, children: ["\u00B7 ", s.gitBranch || '-', " \u00B7 ", relTime(s.ts)] })] }, s.sessionId));
+                return (_jsxs(Text, { inverse: sel && focused, bold: sel && !focused, wrap: "truncate-end", children: [sel ? CARET : CARET_OFF, isSpot ? _jsx(Text, { dimColor: true, children: "\u25CB" }) : _jsx(Text, { color: "green", children: "\uD83D\uDD17" }), ' ', truncate(s.title, 44), ' ', _jsxs(Text, { dimColor: true, children: ["\u00B7 ", s.gitBranch || '-', " \u00B7 ", relTime(s.ts)] })] }, s.sessionId));
             }))] }));
 }
-function DetailPane({ detail }) {
+/**
+ * Righe non-wrappabili del dettaglio (titolo + meta + commit) e loro conteggio.
+ * Estratto dal componente perché il budget deve saperlo PRIMA di renderizzare:
+ * sono righe fisse che tolgono spazio alla descrizione.
+ */
+function detailMetaOf(detail) {
     const meta = META_KEYS.map((k) => detail.fields[k])
         .filter(Boolean)
         .join('  ·  ');
-    const commit = detail.fields['Last tracked commit'];
-    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, borderStyle: "single", borderColor: "gray", paddingX: 1, children: [_jsx(Text, { bold: true, children: detail.title || detail.id }), meta ? _jsx(Text, { dimColor: true, children: meta }) : null, detail.description ? _jsx(Text, { wrap: "wrap", children: truncate(detail.description, 300) }) : null, commit ? _jsxs(Text, { dimColor: true, children: ["\u21B3 ", commit] }) : null] }));
+    const commit = detail.fields['Last tracked commit'] ?? '';
+    return { meta, commit, metaLines: 1 + (meta ? 1 : 0) + (commit ? 1 : 0) };
+}
+/**
+ * Larghezza utile del testo di descrizione, ricavata dalle colonne del
+ * terminale: box esterno (2 bordi + 2 padding) → pane al 50% → box dettaglio
+ * (2 bordi + 2 padding).
+ *
+ * Volutamente prudente: sottostimare tronca qualche carattere in più,
+ * sovrastimare farebbe andare a capo una riga e sforare il tetto d'altezza.
+ */
+function detailTextWidth(columns) {
+    return Math.max(10, Math.floor(((columns || 80) - 4) / 2) - 9);
+}
+function DetailPane({ detail, maxLines, columns, }) {
+    const { meta, commit } = detailMetaOf(detail);
+    // Wrap calcolato qui, non delegato a `<Text wrap="wrap">`: il budget ha
+    // riservato ESATTAMENTE `maxLines` righe, e un wrap deciso da Ink a runtime
+    // ne produrrebbe un numero che il budget non conosce — cioè il frame torna a
+    // sforare e il bug si riapre da questa singola casella di testo.
+    const lines = wrapLines(detail.description ?? '', detailTextWidth(columns), maxLines);
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, borderStyle: "single", borderColor: "gray", paddingX: 1, children: [_jsx(Text, { bold: true, wrap: "truncate-end", children: detail.title || detail.id }), meta ? _jsx(Text, { dimColor: true, wrap: "truncate-end", children: meta }) : null, lines.map((line, i) => (_jsx(Text, { wrap: "truncate-end", children: line }, i))), commit ? _jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ["\u21B3 ", commit] }) : null] }));
 }
 const cwd = process.cwd();
 render(_jsx(Deck, { cwd: cwd, tasksPath: resolveTasksPath(cwd), tasksDir: resolveTasksDir(cwd) }));

package/dist/config.js

@@ -5,6 +5,7 @@
 // indice 1..9. Il `command` gira con cwd = project root.
 import { readFileSync } from 'node:fs';
 import { join } from 'node:path';
+import { normalizeEmoji } from './viewport.js';
 export function configFilePath(projectRoot) {
     return join(projectRoot, '.claude', 'loom-works.json');
 }
@@ -22,9 +23,12 @@ export function parseLaunch(raw) {
         if (typeof command !== 'string' || !command.trim())
             continue;
         out.push({
-            emoji: typeof emoji === 'string' ? emoji : '▸',
+            // L'emoji arriva dal file config: testo arbitrario, quindi va normalizzato
+            // come ogni altro dato esterno — `☕` senza VS16 allargherebbe di una cella
+            // la riga della legenda, mandandola a capo (vedi normalizeEmoji).
+            emoji: normalizeEmoji(typeof emoji === 'string' ? emoji : '▸'),
             // `label` è opzionale per contratto → fallback sul comando stesso.
-            label: typeof label === 'string' && label ? label : command,
+            label: normalizeEmoji(typeof label === 'string' && label ? label : command),
             command,
         });
     }

package/dist/sessions.js

@@ -1,6 +1,7 @@
 import { readFileSync, readdirSync, statSync } from 'node:fs';
 import { homedir } from 'node:os';
 import { basename, join } from 'node:path';
+import { normalizeEmoji } from './viewport.js';
 // CC codifica la project dir sostituendo ogni char non-alfanumerico con '-'
 // (verificato: `/home/lamemind/cc-host` → `-home-lamemind-cc-host`). È LOSSY
 // (un '-' nel path e un '/' collassano nello stesso char) → il forward è
@@ -91,7 +92,7 @@ function parseSessionFile(path, mtime) {
         cwd,
         gitBranch,
         parentUuid,
-        title: customTitle || firstUserText || '(senza titolo)',
+        title: normalizeEmoji(customTitle || firstUserText || '(senza titolo)'),
         ts: mtime,
         path,
     };

package/dist/tasks.js

@@ -1,5 +1,6 @@
 import { readFileSync, readdirSync } from 'node:fs';
 import { dirname, join } from 'node:path';
+import { normalizeEmoji } from './viewport.js';
 // D1 (preflight T20): default docs/tasks.md, override della docs-root via env
 // LOOM_DECK_DOCS_ROOT (es. questo progetto usa `runtime`). No auto-detect.
 export function resolveTasksPath(cwd = process.cwd()) {
@@ -32,7 +33,16 @@ export function parseTasks(content) {
         const prog = cells[4] ?? '';
         // desc = colonna finale; join per resistere a eventuali `|` nella descrizione.
         const desc = cells.slice(5, -1).join('|').trim();
-        tasks.push({ id, pri, prog, desc });
+        // Normalizzazione larghezza glifi AL CONFINE: tutto ciò che entra da
+        // tasks.md è testo arbitrario e può contenere emoji BMP che Ink misura una
+        // cella in meno del terminale (vedi normalizeEmoji). Farlo qui invece che a
+        // ogni sito di render è ciò che impedisce di dimenticarne uno.
+        tasks.push({
+            id,
+            pri: normalizeEmoji(pri),
+            prog: normalizeEmoji(prog),
+            desc: normalizeEmoji(desc),
+        });
     }
     return tasks;
 }
@@ -85,7 +95,18 @@ export function parseTaskDetail(id, content) {
                 fields[key] = f[2].trim();
         }
     }
-    return { id, title, fields, description: descLines.join('\n').trim() };
+    // Stessa normalizzazione dell'overview: il task file è testo libero, e la
+    // descrizione finisce nel pannello dettaglio dove un glifo mal misurato
+    // allarga la riga oltre il bordo del pane.
+    const normFields = {};
+    for (const [k, v] of Object.entries(fields))
+        normFields[k] = normalizeEmoji(v);
+    return {
+        id,
+        title: normalizeEmoji(title),
+        fields: normFields,
+        description: normalizeEmoji(descLines.join('\n').trim()),
+    };
 }
 export function loadTaskDetail(dir, id) {
     const path = findTaskFile(dir, id);

package/dist/viewport.js

@@ -0,0 +1,190 @@
+// Budget d'altezza del frame — il deck non deve MAI renderizzare più righe di
+// quante ne ha il terminale.
+//
+// Perché: quando `outputHeight >= stdout.rows`, Ink (ink/build/ink.js:121)
+// abbandona il diff incrementale e passa a `clearTerminal + write` a ogni
+// frame. Su VTE/Ptyxis `clearTerminal` non distrugge il contenuto: lo spinge
+// nello scrollback. Col poll del deck che ridisegna ogni POLL_MS, ogni tick
+// deposita un frame intero nella cronologia — da lì le righe-fantasma di
+// bordi vuoti sopra l'header.
+//
+// Il fix non è cosmetico: è tenere il frame sotto `rows`, sempre. Tutto ciò
+// che è a lunghezza variabile (lista task, lista sessioni, descrizione del
+// dettaglio) passa da qui e riceve una capienza in righe.
+//
+// Logica pura, zero React/Ink: testabile senza pseudo-terminale.
+import stringWidth from 'string-width';
+/** Variation Selector-16: forza la presentazione emoji del carattere che precede. */
+const VS16 = '️';
+/**
+ * Riallinea la larghezza dei glifi fra Ink e il terminale.
+ *
+ * Secondo meccanismo di sporcamento dello scrollback, indipendente dal budget
+ * d'altezza. Ink assembla ogni riga su una griglia di CARATTERI: per un emoji
+ * BMP senza VS16 (`☕` U+2615, `✔` U+2714, `⚡` U+26A1, `✅` U+2705, `▶` U+25B6)
+ * riserva una sola posizione, mentre il terminale ne disegna due. La riga esce
+ * larga `columns + 1`, il terminale la manda a capo, e l'altezza reale supera
+ * quella che Ink crede — senza mai passare dal ramo `clearTerminal`. Con più
+ * glifi sulla stessa riga l'eccesso si somma.
+ *
+ * Il VS16 esplicito fa contare 2 anche a Ink, riallineando le due contabilità.
+ *
+ * Il predicato è la LARGHEZZA MISURATA, non l'intervallo di codepoint: nello
+ * stesso blocco U+2190–U+2BFF vivono anche `↓` `↑` `−`, larghi 1, e timbrarli
+ * col VS16 li porterebbe a 2 accorciando la riga — l'errore opposto, con lo
+ * stesso effetto di layout rotto. Gli astrali (U+1F000+) Ink li conta già bene.
+ *
+ * Idempotente: un glifo che ha già il VS16 non viene ri-timbrato.
+ */
+export function normalizeEmoji(s) {
+    if (!s)
+        return s;
+    const cps = [...s];
+    let out = '';
+    for (let i = 0; i < cps.length; i++) {
+        const ch = cps[i];
+        out += ch;
+        const cp = ch.codePointAt(0);
+        if (cp < 0x10000 && stringWidth(ch) === 2 && cps[i + 1] !== VS16)
+            out += VS16;
+    }
+    return out;
+}
+/** Righe lasciate libere sotto il frame. La condizione di Ink è `>=`, quindi
+ *  basterebbe 1; ne teniamo 1 come margine per l'a-capo del cursore. */
+export const SLACK = 1;
+/** Sotto questa soglia la lista task non è più utilizzabile: meglio sacrificare
+ *  il pannello di dettaglio che ridurre la lista a due righe. */
+const MIN_TASK_ROWS = 3;
+/** Il dettaglio è secondario: non si prende mai più di così, anche con spazio. */
+const MAX_DETAIL_LINES = 4;
+/** Righe di "cornice" fisse dei tre contenitori a lunghezza variabile. */
+const TASKS_PANE_CHROME = 5; // 2 bordi + header "Tasks (n)" + riga sort + riga spot
+const SESSIONS_PANE_CHROME = 3; // 2 bordi + header "Sessions · …"
+const DETAIL_CHROME = 3; // marginTop + 2 bordi
+/** Altezza di ciascuna modale, marginTop incluso. In flusso, non in overlay:
+ *  spingono giù i pane, quindi il loro costo va scalato dal budget. */
+export const MODAL_HEIGHT = {
+    normal: 0,
+    create: 4, // marginTop + 2 bordi + 1 riga input
+    sort: 5, // marginTop + 2 bordi + titolo + 1 riga catena
+    filter: 6, // marginTop + 2 bordi + titolo + 2 righe (pri, stato)
+    edit: 8, // marginTop + 2 bordi + titolo + 3 campi + riga anteprima
+};
+/**
+ * Distribuisce le righe disponibili fra lista task, lista sessioni e dettaglio.
+ *
+ * I due pane stanno affiancati (flexDirection row) → l'altezza del blocco è il
+ * MAX delle due colonne, non la somma: ognuna riceve lo stesso tetto.
+ *
+ * Ordine di sacrificio quando lo spazio stringe:
+ *   1. righe di descrizione del dettaglio (fino a sparire col pannello),
+ *   2. righe della lista task, mai sotto MIN_TASK_ROWS finché il dettaglio c'è.
+ */
+export function layoutBudget(input) {
+    const outerChrome = 2 + // bordi del box esterno
+        1 + // titolo "loom-deck"
+        1 + // riga navigazione
+        (input.launchLine ? 1 : 0) +
+        MODAL_HEIGHT[input.mode] +
+        1 + // marginTop del blocco pane
+        (input.noteLine ? 1 : 0);
+    // Tetto per colonna: righe che restano ai due pane affiancati.
+    const avail = (input.rows || 24) - SLACK - outerChrome;
+    // La cornice del pane task (bordi + 3 header) più ALMENO una riga di lista.
+    // Il `+1` non è cosmetico: senza, un terminale bassissimo produce un pane
+    // regolamentare con zero task dentro — occupa 5 righe per non mostrare nulla,
+    // mentre la riga compatta dice le stesse cose in una.
+    if (avail < TASKS_PANE_CHROME + 1) {
+        return { taskRows: 0, sessionRows: 0, detailLines: 0, compact: true };
+    }
+    const sessionRows = Math.max(0, avail - SESSIONS_PANE_CHROME);
+    let detailLines = 0;
+    let detailChrome = 0;
+    if (input.hasDetail) {
+        const fixed = DETAIL_CHROME + input.detailMetaLines;
+        // Righe che avanzano dopo aver garantito la lista minima e la cornice del
+        // dettaglio. Serve almeno 1 riga di descrizione per giustificare il box:
+        // un pannello con la sola cornice ruberebbe 3+ righe per mostrare nulla.
+        const spare = avail - TASKS_PANE_CHROME - MIN_TASK_ROWS - fixed;
+        if (spare >= 1) {
+            detailChrome = fixed;
+            detailLines = Math.min(MAX_DETAIL_LINES, spare);
+        }
+    }
+    const taskRows = Math.max(0, avail - TASKS_PANE_CHROME - detailChrome - detailLines);
+    return { taskRows, sessionRows, detailLines, compact: false };
+}
+/**
+ * Finestra scorrevole su una lista più lunga della capienza.
+ *
+ * Centra la selezione, poi clampa ai bordi — così in cima e in fondo alla lista
+ * la finestra non spreca righe fuori dai dati.
+ *
+ * `selected` è l'indice nella lista completa; -1 (o fuori range) = nessuna
+ * selezione, la finestra parte da capo.
+ */
+export function windowRange(total, selected, capacity) {
+    if (capacity <= 0 || total <= 0)
+        return { start: 0, end: 0 };
+    if (total <= capacity)
+        return { start: 0, end: total };
+    const sel = selected >= 0 && selected < total ? selected : 0;
+    const start = Math.max(0, Math.min(sel - Math.floor(capacity / 2), total - capacity));
+    return { start, end: start + capacity };
+}
+/**
+ * Hard-wrap a larghezza fissa, con tetto di righe.
+ *
+ * Serve un conteggio righe DETERMINISTICO: `<Text wrap="wrap">` di Ink wrappa a
+ * runtime su una larghezza che il budget non conosce, quindi il pannello
+ * dettaglio potrebbe sforare il tetto e riaprire il bug. Qui il testo viene
+ * spezzato prima, e ogni riga è renderizzata con `wrap="truncate-end"`.
+ *
+ * Sottostimare `width` è sicuro (tronca prima), sovrastimarlo no (la riga
+ * andrebbe a capo aggiungendo altezza non contabilizzata).
+ */
+export function wrapLines(text, width, maxLines) {
+    if (maxLines <= 0 || width <= 0)
+        return [];
+    const flat = text.replace(/\s+/g, ' ').trim();
+    if (!flat)
+        return [];
+    const lines = [];
+    let line = '';
+    for (const word of flat.split(' ')) {
+        if (!line) {
+            line = word;
+        }
+        else if (line.length + 1 + word.length <= width) {
+            line += ' ' + word;
+        }
+        else {
+            lines.push(line);
+            line = word;
+            if (lines.length === maxLines)
+                break;
+        }
+        // Parola più lunga della riga: spezzala a forza, altrimenti l'a-capo lo
+        // farebbe il terminale — fuori dal nostro conteggio.
+        while (line.length > width) {
+            lines.push(line.slice(0, width));
+            line = line.slice(width);
+            if (lines.length === maxLines)
+                break;
+        }
+        if (lines.length === maxLines)
+            break;
+    }
+    if (line && lines.length < maxLines)
+        lines.push(line);
+    const kept = lines.slice(0, maxLines);
+    // Troncamento MAI silenzioso, come le liste: l'ellissi segnala che il testo
+    // continua oltre il pannello.
+    const consumed = kept.join(' ').length;
+    if (consumed < flat.length && kept.length > 0) {
+        const last = kept[kept.length - 1];
+        kept[kept.length - 1] = last.length >= width ? last.slice(0, Math.max(0, width - 1)) + '…' : last + '…';
+    }
+    return kept;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lamemind/loom-deck",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "description": "Deck TUI Ink per-progetto della famiglia loom: legge tasks.md e spawna sessioni Claude Code bound via LOOM_TASK",
   "type": "module",
   "bin": {
@@ -42,7 +42,8 @@
   "license": "MIT",
   "dependencies": {
     "ink": "^5.1.0",
-    "react": "^18.3.1"
+    "react": "^18.3.1",
+    "string-width": "^7.2.0"
   },
   "devDependencies": {
     "@types/node": "^22.20.0",