toolcraft 0.0.70 → 0.0.72

package/node_modules/toolcraft-design/dist/explorer/layout.js

@@ -40,13 +40,15 @@ export function computeExplorerLayout(opts) {
             footer
         };
     }
-    const listWidth = mode === "wide" ? Math.floor((cols * 5) / 12) : Math.floor((cols * 2) / 5);
-    const detailWidth = cols - listWidth;
+    const gutterWidth = 1;
+    const availableWidth = Math.max(0, cols - gutterWidth);
+    const listWidth = mode === "wide" ? Math.floor((availableWidth * 5) / 12) : Math.floor((availableWidth * 2) / 5);
+    const detailWidth = availableWidth - listWidth;
     return {
         mode,
         header,
         list: { x: 0, y: contentY, width: listWidth, height: contentHeight },
-        detail: { x: listWidth, y: contentY, width: detailWidth, height: contentHeight },
+        detail: { x: listWidth + gutterWidth, y: contentY, width: detailWidth, height: contentHeight },
         footer
     };
 }

package/node_modules/toolcraft-design/dist/explorer/reducer.js

@@ -238,7 +238,9 @@ function detailLoaded(state, rowId, token, items) {
     };
 }
 function detailItemRendered(state, rowId, token, itemIndex, content) {
-    if (state.detail.rowId !== rowId || state.detail.token !== token || state.detail.items?.[itemIndex] === undefined) {
+    if (state.detail.rowId !== rowId ||
+        state.detail.token !== token ||
+        state.detail.items?.[itemIndex] === undefined) {
         return mark(state, 0);
     }
     const items = state.detail.items.map((item, index) => index === itemIndex ? { ...item, renderedContent: content } : item);
@@ -354,7 +356,14 @@ function updateFilter(state, filter) {
         matchPositions,
         cursor,
         detail,
-        actionState: recomputeActionState({ ...state, filter, filtered, matchPositions, cursor, detail }),
+        actionState: recomputeActionState({
+            ...state,
+            filter,
+            filtered,
+            matchPositions,
+            cursor,
+            detail
+        }),
         dirty: REGION_HEADER | REGION_LIST | REGION_DETAIL | REGION_FOOTER
     };
     const effect = detailEffect(next);
@@ -385,7 +394,11 @@ function escape(state, runtimeHandles) {
     if (state.filterFocused || state.filter.length > 0) {
         const cleared = updateFilter({ ...state, filterFocused: false }, "");
         return {
-            state: { ...cleared.state, filterFocused: false, dirty: cleared.state.dirty | REGION_HEADER | REGION_FOOTER },
+            state: {
+                ...cleared.state,
+                filterFocused: false,
+                dirty: cleared.state.dirty | REGION_HEADER | REGION_FOOTER
+            },
             effects: cleared.effects
         };
     }
@@ -500,9 +513,9 @@ function detailBodyHeight(state) {
     if (state.layout === "narrow-vertical") {
         const listHeight = Math.ceil(contentHeight / 2);
         const detailHeight = contentHeight - listHeight;
-        return Math.max(0, detailHeight - 1);
+        return Math.max(0, detailHeight - 2);
     }
-    return contentHeight;
+    return Math.max(0, contentHeight - 2);
 }
 function extendSelection(state, delta) {
     if (!state.multiSelect) {
@@ -557,7 +570,10 @@ function reorder(state, delta) {
         actionState: recomputeActionState({ ...state, rows, filtered, matchPositions, cursor }),
         dirty: REGION_LIST | REGION_FOOTER
     };
-    return { state: next, effects: [{ type: "persistOrder", orderedIds: rows.map((row) => row.id) }] };
+    return {
+        state: next,
+        effects: [{ type: "persistOrder", orderedIds: rows.map((row) => row.id) }]
+    };
 }
 function paletteInput(state, key) {
     if (state.modal?.kind !== "palette") {

package/node_modules/toolcraft-design/dist/explorer/render/detail.js

@@ -1,4 +1,7 @@
+import { stripAnsi } from "../../internal/strip-ansi.js";
+import { renderMarkdown } from "../../terminal-markdown/index.js";
 import { getExplorerStyles } from "../theme.js";
+import { drawPaneFrame, paneBodyRect } from "./pane.js";
 import { fitToWidth } from "./text.js";
 export function renderDetail(state, screen, layout) {
     const rect = layout.detail;
@@ -9,16 +12,19 @@ export function renderDetail(state, screen, layout) {
     }
     const row = state.rows.find((r) => r.id === state.detail.rowId) ?? null;
     if (layout.mode === "narrow-vertical") {
-        screen.put(rect.x, rect.y, `├─ Detail ${"─".repeat(Math.max(0, rect.width - 11))}┤`, styles.border);
-        renderDetailBody(state, screen, { ...rect, y: rect.y + 1, height: rect.height - 1 }, row);
+        drawPaneFrame(screen, rect, "Preview", state.focused === "detail" ? styles.borderFocused : styles.border);
+        renderDetailBody(state, screen, paneBodyRect(rect), row);
         return;
     }
-    screen.put(rect.x, rect.y, "│", styles.border);
-    renderDetailBody(state, screen, { ...rect, x: rect.x + 1, width: rect.width - 1 }, row);
+    drawPaneFrame(screen, rect, "Preview", state.focused === "detail" ? styles.borderFocused : styles.border);
+    renderDetailBody(state, screen, paneBodyRect(rect), row);
 }
 function renderDetailBody(state, screen, rect, row) {
     const styles = getExplorerStyles();
     const items = state.detail.items;
+    if (rect.width <= 0 || rect.height <= 0) {
+        return;
+    }
     if (items === null) {
         writeLine(screen, rect, 0, state.detail.loading ? "Loading detail..." : state.emptyHint, styles.muted);
         return;
@@ -28,7 +34,7 @@ function renderDetailBody(state, screen, rect, row) {
         return;
     }
     if (items.length === 1 && items[0]?.title === undefined) {
-        renderBlob(screen, rect, renderItem(items[0], rect, row), state.detail.scroll);
+        renderBlob(screen, rect, renderItemMarkdown(items[0], rect, row), state.detail.scroll);
         return;
     }
     renderListMode(state, screen, rect, items, row);
@@ -49,7 +55,7 @@ function renderListMode(state, screen, rect, items, row) {
             writeLine(screen, rect, y, `  ${item.subtitle}`, styles.muted);
             y += 1;
         }
-        for (const line of renderItem(item, rect, row).split("\n")) {
+        for (const line of renderItemMarkdown(item, rect, row).split("\n")) {
             if (y >= rect.height) {
                 break;
             }
@@ -69,6 +75,13 @@ function renderBlob(screen, rect, text, scroll) {
         writeLine(screen, rect, row, lines[row] ?? "");
     }
 }
+function renderItemMarkdown(item, rect, row) {
+    const content = renderItem(item, rect, row);
+    if (content.trim().length === 0) {
+        return "";
+    }
+    return stripAnsi(renderMarkdown(content, { width: Math.max(1, rect.width) }).trimEnd());
+}
 function renderItem(item, rect, row) {
     if (item.renderedContent !== undefined) {
         return item.renderedContent;

package/node_modules/toolcraft-design/dist/explorer/render/list.js

@@ -1,4 +1,5 @@
 import { getExplorerStyles } from "../theme.js";
+import { drawPaneFrame, paneBodyRect } from "./pane.js";
 import { cellWidth, centerCells, fitToWidth, splitGraphemeCells, stripAnsi } from "./text.js";
 const listLineCache = new WeakMap();
 export function renderList(state, screen, layout) {
@@ -12,36 +13,41 @@ export function renderList(state, screen, layout) {
         writeLine(screen, rect, 0, "Terminal too narrow", styles.muted);
         return;
     }
-    const rectKey = `${rect.x}:${rect.y}:${rect.width}:${rect.height}`;
+    drawPaneFrame(screen, rect, "Plans", state.focused === "list" ? styles.borderFocused : styles.border);
+    const bodyRect = paneBodyRect(rect);
+    if (bodyRect.width <= 0 || bodyRect.height <= 0) {
+        return;
+    }
+    const rectKey = `${bodyRect.x}:${bodyRect.y}:${bodyRect.width}:${bodyRect.height}`;
     const cached = listLineCache.get(screen);
     const cache = cached?.rectKey === rectKey ? cached.lines : new Map();
     listLineCache.set(screen, { rectKey, lines: cache });
     if (state.filtered.length === 0) {
         const hint = state.emptyHint;
-        writeLine(screen, rect, Math.floor(rect.height / 2), centerCells(hint, rect.width, rect.x), styles.muted);
+        writeLine(screen, bodyRect, Math.floor(bodyRect.height / 2), centerCells(hint, bodyRect.width, bodyRect.x), styles.muted);
         cache.clear();
         return;
     }
     let lastGroup;
     let y = 0;
     for (const rowIndex of state.filtered) {
-        if (y >= rect.height) {
+        if (y >= bodyRect.height) {
             break;
         }
         const row = state.rows[rowIndex];
         if (!row) {
             continue;
         }
-        if (row.group && row.group !== lastGroup && y < rect.height) {
+        if (row.group && row.group !== lastGroup && y < bodyRect.height) {
             const hash = `group:${row.group}`;
             if (cache.get(y) !== hash) {
-                writeLine(screen, rect, y, row.group, styles.muted);
+                writeLine(screen, bodyRect, y, formatGroupHeader(row.group, bodyRect), styles.muted);
                 cache.set(y, hash);
             }
             y += 1;
             lastGroup = row.group;
         }
-        if (y >= rect.height) {
+        if (y >= bodyRect.height) {
             break;
         }
         const selected = state.multiSelect && state.selected.has(row.id);
@@ -49,20 +55,33 @@ export function renderList(state, screen, layout) {
         const positions = state.matchPositions.get(rowIndex) ?? [];
         const hash = lineHash(row, selected, cursor, positions);
         if (cache.get(y) !== hash) {
-            renderRow(screen, rect, y, row, { selected, cursor, focused: state.focused === "list", positions });
+            renderRow(screen, bodyRect, y, row, {
+                selected,
+                cursor,
+                focused: state.focused === "list",
+                positions
+            });
             cache.set(y, hash);
         }
         y += 1;
-        if (row.subtitle && y < rect.height) {
+        if (row.subtitle && y < bodyRect.height) {
             const subtitleHash = `${hash}:subtitle:${row.subtitle}`;
             if (cache.get(y) !== subtitleHash) {
-                writeLine(screen, rect, y, `  ${row.subtitle}`, styles.muted);
+                writeLine(screen, bodyRect, y, `  ${row.subtitle}`, styles.muted);
                 cache.set(y, subtitleHash);
             }
             y += 1;
         }
     }
 }
+function formatGroupHeader(label, rect) {
+    const text = ` ${label} `;
+    const labelWidth = cellWidth(text, rect.x);
+    if (labelWidth >= rect.width) {
+        return label;
+    }
+    return `${text}${"─".repeat(rect.width - labelWidth)}`;
+}
 function renderRow(screen, rect, rowY, row, opts) {
     const styles = getExplorerStyles();
     const marker = opts.selected ? "┃" : " ";

package/node_modules/toolcraft-design/dist/explorer/render/pane.d.ts

@@ -0,0 +1,5 @@
+import { ScreenBuffer } from "../../dashboard/buffer.js";
+import type { CellStyle } from "../../dashboard/types.js";
+import type { Rect } from "../layout.js";
+export declare function drawPaneFrame(screen: ScreenBuffer, rect: Rect, title: string, style?: CellStyle): void;
+export declare function paneBodyRect(rect: Rect): Rect;

package/node_modules/toolcraft-design/dist/explorer/render/pane.js

@@ -0,0 +1,30 @@
+import { fitToWidth, padEndCells } from "./text.js";
+export function drawPaneFrame(screen, rect, title, style = {}) {
+    if (rect.width <= 0 || rect.height <= 0) {
+        return;
+    }
+    if (rect.width === 1) {
+        for (let y = 0; y < rect.height; y += 1) {
+            screen.put(rect.x, rect.y + y, "│", style);
+        }
+        return;
+    }
+    const innerWidth = Math.max(0, rect.width - 2);
+    const titleSegment = padEndCells(fitToWidth(`─ ${title} `, innerWidth, rect.x + 1), innerWidth, "─", rect.x + 1);
+    screen.put(rect.x, rect.y, `┌${titleSegment}┐`, style);
+    for (let y = 1; y < rect.height - 1; y += 1) {
+        screen.put(rect.x, rect.y + y, "│", style);
+        screen.put(rect.x + rect.width - 1, rect.y + y, "│", style);
+    }
+    if (rect.height > 1) {
+        screen.put(rect.x, rect.y + rect.height - 1, `└${"─".repeat(innerWidth)}┘`, style);
+    }
+}
+export function paneBodyRect(rect) {
+    return {
+        x: rect.x + 2,
+        y: rect.y + 1,
+        width: Math.max(0, rect.width - 4),
+        height: Math.max(0, rect.height - 2)
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toolcraft",
-  "version": "0.0.70",
+  "version": "0.0.72",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -47,7 +47,7 @@
     "postpack": "node ../../scripts/manage-bundled-workspace-deps.mjs cleanup . toolcraft-design @poe-code/frontmatter @poe-code/agent-mcp-config @poe-code/agent-human-in-loop @poe-code/task-list @poe-code/agent-defs @poe-code/config-mutations @poe-code/process-runner tiny-mcp-client mcp-oauth auth-store"
   },
   "dependencies": {
-    "toolcraft-schema": "0.0.70",
+    "toolcraft-schema": "0.0.72",
     "commander": "^13.1.0",
     "fast-string-width": "^3.0.2",
     "fast-wrap-ansi": "^0.2.0",