@lamemind/loom-deck 0.9.0 → 0.9.1

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, 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
@@ -315,6 +339,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 +706,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: 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:
@@ -713,31 +768,58 @@ 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)] })] }));
 }
-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
+                // 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] }));
+            })), 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));
             }))] }));
 }
-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/viewport.js

@@ -0,0 +1,153 @@
+// 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.
+/** 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.1",
   "description": "Deck TUI Ink per-progetto della famiglia loom: legge tasks.md e spawna sessioni Claude Code bound via LOOM_TASK",
   "type": "module",
   "bin": {