flavor-code 1.4.0-beta.10 → 1.4.0-beta.11

package/dist/{app-SMIB6P23.js → app-PXXQOEWP.js}

@@ -34,13 +34,15 @@ import {
   instances_default,
   osc,
   shiftAnchor,
+  stringWidth,
   stripAnsi,
   useStdout,
   use_app_default,
   use_input_default
-} from "./chunk-XMRKRPNC.js";
+} from "./chunk-26T23AKR.js";
 import {
-  execFileNoThrow
+  execFileNoThrow,
+  getGraphemeSegmenter
 } from "./chunk-ZJCAQXA7.js";
 import "./chunk-S32JRDZK.js";
 
@@ -969,7 +971,12 @@ function wrapPromptInput(input, codePointCursor, options) {
 // src/ui/task-progress.tsx
 import { useRef as useRef3 } from "react";
 import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function TaskStatusLine({ block, interactive }) {
+function TaskStatusLine({
+  block,
+  interactive,
+  textWidth,
+  maxTextLines
+}) {
   const running = block.state === "running";
   const { stdout } = useStdout();
   const foreground = interactive && (block.activity === "model" || block.task?.role === "main");
@@ -1007,8 +1014,20 @@ function TaskStatusLine({ block, interactive }) {
     thinkingScroll.current = { start: state.start, lastTime: time };
     return state.text;
   })() : void 0;
+  const textSegments = [
+    { text: `${presentation.glyph} `, color: presentation.color },
+    ...presentation.badge ? [{ text: `${presentation.badge} `, color: presentation.badgeColor }] : [],
+    { text: before, color: presentation.color },
+    ...statusLabel === void 0 ? [] : [
+      { text: " \xB7 ", color: presentation.color },
+      { text: statusLabel, color: statusColor ?? presentation.color }
+    ],
+    ...after ? [{ text: after, color: presentation.color }] : [],
+    ...metaLabel === void 0 ? [] : [{ text: `  ${metaLabel}`, color: metaColor ?? "ansi:blackBright" }]
+  ];
+  const boundedText = textWidth === void 0 || maxTextLines === void 0 ? void 0 : limitTaskTextSegments(textSegments, textWidth, maxTextLines).segments;
   return /* @__PURE__ */ jsxs2(Box_default, { flexDirection: "column", width: "100%", children: [
-    /* @__PURE__ */ jsxs2(Box_default, { ref, flexDirection: "row", children: [
+    /* @__PURE__ */ jsx3(Box_default, { ref, flexDirection: "row", width: "100%", children: boundedText === void 0 ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
       /* @__PURE__ */ jsxs2(Text, { ...presentation.color === void 0 ? {} : { color: presentation.color }, children: [
         presentation.glyph,
         " "
@@ -1027,10 +1046,69 @@ function TaskStatusLine({ block, interactive }) {
         "  ",
         metaLabel
       ] })
-    ] }),
+    ] }) : /* @__PURE__ */ jsx3(Text, { children: boundedText.map((segment, index) => /* @__PURE__ */ jsx3(Text, { ...segment.color === void 0 ? {} : { color: segment.color }, children: segment.text }, index)) }) }),
     thinkingLine === void 0 ? null : /* @__PURE__ */ jsx3(ThinkingLineView, { text: thinkingLine })
   ] });
 }
+function limitTaskTextSegments(segments, width, maxLines = 3) {
+  const lineWidth = Math.max(3, Math.floor(width));
+  const lineLimit = Math.max(1, Math.floor(maxLines));
+  const lines = [[]];
+  const widths = [0];
+  let truncated = false;
+  outer: for (let segmentIndex = 0; segmentIndex < segments.length; segmentIndex += 1) {
+    const segment = segments[segmentIndex];
+    for (const { segment: grapheme } of getGraphemeSegmenter().segment(segment.text)) {
+      if (grapheme === "\n" || grapheme === "\r" || grapheme === "\r\n") {
+        if (lines.length >= lineLimit) {
+          truncated = true;
+          break outer;
+        }
+        lines.push([]);
+        widths.push(0);
+        continue;
+      }
+      const glyphWidth = stringWidth(grapheme);
+      const lineIndex = lines.length - 1;
+      if (glyphWidth > 0 && widths[lineIndex] + glyphWidth > lineWidth && lines[lineIndex].length > 0) {
+        if (lines.length >= lineLimit) {
+          truncated = true;
+          break outer;
+        }
+        lines.push([]);
+        widths.push(0);
+      }
+      const target = lines.length - 1;
+      lines[target].push({ value: grapheme, width: glyphWidth, segmentIndex });
+      widths[target] = widths[target] + glyphWidth;
+    }
+  }
+  if (truncated) {
+    const lastIndex = lines.length - 1;
+    const last = lines[lastIndex];
+    while (last.length > 0 && widths[lastIndex] > lineWidth - 3) {
+      widths[lastIndex] = widths[lastIndex] - last.pop().width;
+    }
+    while (last.length > 0 && /^\s$/u.test(last.at(-1).value)) {
+      widths[lastIndex] = widths[lastIndex] - last.pop().width;
+    }
+    last.push({ value: "...", width: 3, segmentIndex: last.at(-1)?.segmentIndex ?? 0 });
+  }
+  const output = [];
+  const append = (value, segmentIndex) => {
+    const previous = output.at(-1);
+    if (previous?.segmentIndex === segmentIndex) previous.text += value;
+    else output.push({ text: value, color: segments[segmentIndex]?.color, segmentIndex });
+  };
+  lines.forEach((line, lineIndex) => {
+    if (lineIndex > 0) append("\n", line[0]?.segmentIndex ?? output.at(-1)?.segmentIndex ?? 0);
+    for (const token of line) append(token.value, token.segmentIndex);
+  });
+  return {
+    truncated,
+    segments: output.map(({ text, color }) => ({ text, ...color === void 0 ? {} : { color } }))
+  };
+}
 var THINKING_RAIL = "#416f84";
 var THINKING_TEXT = "#91a0a8";
 function ThinkingLineView({ text }) {
@@ -1045,7 +1123,8 @@ function TaskProgressPanel({
   interactive,
   maxHeight = 8,
   columns = 80,
-  scrollRef,
+  mainScrollRef,
+  subagentScrollRef,
   onHoverChange
 }) {
   if (blocks.length === 0 || maxHeight <= 0) return null;
@@ -1054,54 +1133,203 @@ function TaskProgressPanel({
   const hasTasks = taskBlocks.length > 0;
   const hasSubagents = subagentBlocks.length > 0;
   const split = hasTasks && hasSubagents && columns >= SPLIT_TRACK_MIN_COLUMNS;
-  return /* @__PURE__ */ jsxs2(
+  const hoverProps = (track) => ({
+    onMouseEnter: () => onHoverChange?.(track)
+  });
+  return /* @__PURE__ */ jsx3(
     Box_default,
     {
       flexDirection: "column",
       flexShrink: 0,
       width: "100%",
       maxHeight,
-      onMouseEnter: () => onHoverChange?.(true),
-      onMouseLeave: () => onHoverChange?.(false),
-      children: [
-        split ? /* @__PURE__ */ jsx3(SplitTrackHeaders, {}) : /* @__PURE__ */ jsx3(TrackHeader, { role: hasTasks ? "main" : "subagent" }),
-        maxHeight > 1 ? /* @__PURE__ */ jsx3(
-          ScrollBox_default,
-          {
-            ...scrollRef === void 0 ? {} : { ref: scrollRef },
-            flexDirection: "column",
-            flexShrink: 1,
-            width: "100%",
-            maxHeight: maxHeight - 1,
-            children: split ? pairedTrackRows(taskBlocks, subagentBlocks).map(([task, subagent], index) => /* @__PURE__ */ jsxs2(Box_default, { flexDirection: "row", width: "100%", columnGap: 2, children: [
-              /* @__PURE__ */ jsx3(Box_default, { flexBasis: 0, flexGrow: 1, minWidth: 0, flexDirection: "column", children: task === void 0 ? null : /* @__PURE__ */ jsx3(TaskStatusLine, { block: task, interactive }) }),
-              /* @__PURE__ */ jsx3(Box_default, { flexBasis: 0, flexGrow: 1, minWidth: 0, flexDirection: "column", children: subagent === void 0 ? null : /* @__PURE__ */ jsx3(TaskStatusLine, { block: subagent, interactive }) })
-            ] }, `${task?.id ?? "task"}:${subagent?.id ?? "subagent"}:${index}`)) : hasTasks && hasSubagents ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
-              taskBlocks.map((block) => /* @__PURE__ */ jsx3(TaskStatusLine, { block, interactive }, block.id)),
-              /* @__PURE__ */ jsx3(TrackHeader, { role: "subagent" }),
-              subagentBlocks.map((block) => /* @__PURE__ */ jsx3(TaskStatusLine, { block, interactive }, block.id))
-            ] }) : (hasTasks ? taskBlocks : subagentBlocks).map((block) => /* @__PURE__ */ jsx3(TaskStatusLine, { block, interactive }, block.id))
-          }
-        ) : null
-      ]
+      onMouseLeave: () => onHoverChange?.(null),
+      children: split ? /* @__PURE__ */ jsx3(
+        SplitTracks,
+        {
+          taskBlocks,
+          subagentBlocks,
+          interactive,
+          height: maxHeight,
+          columns,
+          mainScrollRef,
+          subagentScrollRef,
+          hoverProps
+        }
+      ) : hasTasks && hasSubagents ? /* @__PURE__ */ jsx3(
+        StackedTracks,
+        {
+          taskBlocks,
+          subagentBlocks,
+          interactive,
+          height: maxHeight,
+          columns,
+          mainScrollRef,
+          subagentScrollRef,
+          hoverProps
+        }
+      ) : /* @__PURE__ */ jsx3(
+        SingleTrack,
+        {
+          role: hasTasks ? "main" : "subagent",
+          blocks: hasTasks ? taskBlocks : subagentBlocks,
+          interactive,
+          height: maxHeight,
+          width: columns,
+          scrollRef: hasTasks ? mainScrollRef : subagentScrollRef,
+          hoverProps
+        }
+      )
     }
   );
 }
-function TrackHeader({ role }) {
-  return /* @__PURE__ */ jsxs2(Text, { dimColor: true, children: [
-    "\u2500\u2500 ",
-    role === "main" ? "task plan" : "subagent exploration",
-    " \u2500\u2500"
+function SplitTracks({
+  taskBlocks,
+  subagentBlocks,
+  interactive,
+  height,
+  columns,
+  mainScrollRef,
+  subagentScrollRef,
+  hoverProps
+}) {
+  const contentHeight = Math.max(0, height - 1);
+  const leftWidth = Math.max(1, Math.floor((columns - 1) / 2));
+  const rightWidth = Math.max(1, columns - leftWidth - 1);
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsxs2(Box_default, { flexDirection: "row", width: "100%", children: [
+      /* @__PURE__ */ jsx3(Box_default, { width: leftWidth, ...hoverProps("main"), children: /* @__PURE__ */ jsx3(TrackHeader, { role: "main", width: leftWidth }) }),
+      /* @__PURE__ */ jsx3(Text, { color: "ansi:white", children: "\u252C" }),
+      /* @__PURE__ */ jsx3(Box_default, { width: rightWidth, ...hoverProps("subagent"), children: /* @__PURE__ */ jsx3(TrackHeader, { role: "subagent", width: rightWidth }) })
+    ] }),
+    contentHeight <= 0 ? null : /* @__PURE__ */ jsxs2(Box_default, { flexDirection: "row", width: "100%", height: contentHeight, children: [
+      /* @__PURE__ */ jsx3(Box_default, { width: leftWidth, minWidth: 0, flexDirection: "column", ...hoverProps("main"), children: /* @__PURE__ */ jsx3(
+        TrackScrollBox,
+        {
+          ref: mainScrollRef,
+          blocks: taskBlocks,
+          interactive,
+          height: contentHeight,
+          width: leftWidth
+        }
+      ) }),
+      /* @__PURE__ */ jsx3(TrackDivider, { height: contentHeight }),
+      /* @__PURE__ */ jsx3(Box_default, { width: rightWidth, minWidth: 0, flexDirection: "column", ...hoverProps("subagent"), children: /* @__PURE__ */ jsx3(
+        TrackScrollBox,
+        {
+          ref: subagentScrollRef,
+          blocks: subagentBlocks,
+          interactive,
+          height: contentHeight,
+          width: rightWidth
+        }
+      ) })
+    ] })
+  ] });
+}
+function StackedTracks({
+  taskBlocks,
+  subagentBlocks,
+  interactive,
+  height,
+  columns,
+  mainScrollRef,
+  subagentScrollRef,
+  hoverProps
+}) {
+  if (height <= 1) {
+    return /* @__PURE__ */ jsx3(Box_default, { ...hoverProps("main"), children: /* @__PURE__ */ jsx3(TrackHeader, { role: "main", width: columns }) });
+  }
+  const mainHeight = Math.ceil(height / 2);
+  const subagentHeight = Math.floor(height / 2);
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx3(
+      SingleTrack,
+      {
+        role: "main",
+        blocks: taskBlocks,
+        interactive,
+        height: mainHeight,
+        width: columns,
+        scrollRef: mainScrollRef,
+        hoverProps
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      SingleTrack,
+      {
+        role: "subagent",
+        blocks: subagentBlocks,
+        interactive,
+        height: subagentHeight,
+        width: columns,
+        scrollRef: subagentScrollRef,
+        hoverProps
+      }
+    )
   ] });
 }
-function SplitTrackHeaders() {
-  return /* @__PURE__ */ jsxs2(Box_default, { flexDirection: "row", width: "100%", columnGap: 2, children: [
-    /* @__PURE__ */ jsx3(Box_default, { flexBasis: 0, flexGrow: 1, minWidth: 0, children: /* @__PURE__ */ jsx3(TrackHeader, { role: "main" }) }),
-    /* @__PURE__ */ jsx3(Box_default, { flexBasis: 0, flexGrow: 1, minWidth: 0, children: /* @__PURE__ */ jsx3(TrackHeader, { role: "subagent" }) })
+function SingleTrack({
+  role,
+  blocks,
+  interactive,
+  height,
+  width,
+  scrollRef,
+  hoverProps
+}) {
+  const contentHeight = Math.max(0, height - 1);
+  return /* @__PURE__ */ jsxs2(Box_default, { flexDirection: "column", width: "100%", height, ...hoverProps(role), children: [
+    /* @__PURE__ */ jsx3(TrackHeader, { role, width }),
+    contentHeight <= 0 ? null : /* @__PURE__ */ jsx3(
+      TrackScrollBox,
+      {
+        ref: scrollRef,
+        blocks,
+        interactive,
+        height: contentHeight,
+        width
+      }
+    )
   ] });
 }
-function pairedTrackRows(tasks, subagents) {
-  return Array.from({ length: Math.max(tasks.length, subagents.length) }, (_, index) => [tasks[index], subagents[index]]);
+function TrackScrollBox({
+  ref,
+  blocks,
+  interactive,
+  height,
+  width
+}) {
+  return /* @__PURE__ */ jsx3(
+    ScrollBox_default,
+    {
+      ...ref === void 0 ? {} : { ref },
+      flexDirection: "column",
+      flexShrink: 1,
+      width: "100%",
+      height,
+      maxHeight: height,
+      children: blocks.map((block) => /* @__PURE__ */ jsx3(
+        TaskStatusLine,
+        {
+          block,
+          interactive,
+          textWidth: width,
+          maxTextLines: 3
+        },
+        block.id
+      ))
+    }
+  );
+}
+function TrackHeader({ role, width }) {
+  const label = role === "main" ? "task plan" : "subagent exploration";
+  const prefix = `\u2500\u2500 ${label} `;
+  const line = prefix.length >= width ? prefix.slice(0, Math.max(0, width)) : `${prefix}${"\u2500".repeat(width - prefix.length)}`;
+  return /* @__PURE__ */ jsx3(Text, { color: "ansi:white", wrap: "truncate-end", children: line });
+}
+function TrackDivider({ height }) {
+  return /* @__PURE__ */ jsx3(Box_default, { flexDirection: "column", width: 1, flexShrink: 0, children: Array.from({ length: height }, (_, index) => /* @__PURE__ */ jsx3(Text, { color: "ansi:white", children: "\u2502" }, index)) });
 }
 
 // src/ui/file-diff-style.ts
@@ -1799,8 +2027,9 @@ function App({ workspace, home, resumeSession, instanceId, palAlias }) {
   const [updateTo, setUpdateTo] = useState2();
   const [transcript, dispatch] = useReducer(transcriptReducer, void 0, createTranscriptState);
   const scrollRef = useRef4(null);
-  const taskScrollRef = useRef4(null);
-  const taskPanelHovered = useRef4(false);
+  const mainTaskScrollRef = useRef4(null);
+  const subagentTaskScrollRef = useRef4(null);
+  const hoveredTaskTrack = useRef4(null);
   const runtimeRef = useRef4(void 0);
   const pendingPromptRef = useRef4(void 0);
   pendingPromptRef.current ??= new SinglePendingPrompt();
@@ -2097,7 +2326,12 @@ function App({ workspace, home, resumeSession, instanceId, palAlias }) {
   use_input_default((character, key, event) => {
     const terminalAction = classifyTerminalInput(key);
     if (terminalAction?.type === "scroll") {
-      const scroll = selectWheelScrollTarget(scrollRef.current, taskScrollRef.current, taskPanelHovered.current);
+      const scroll = selectWheelScrollTarget(
+        scrollRef.current,
+        mainTaskScrollRef.current,
+        subagentTaskScrollRef.current,
+        hoveredTaskTrack.current
+      );
       if (scroll !== null) {
         if (terminalAction.rows < 0) scrollUp(scroll, -terminalAction.rows);
         else scrollDown(scroll, terminalAction.rows);
@@ -2388,9 +2622,10 @@ function App({ workspace, home, resumeSession, instanceId, palAlias }) {
       ...ideContext === void 0 ? {} : { ideContext },
       completedSlashTokenLength: completedTokenLength,
       scrollRef,
-      taskScrollRef,
-      onTaskPanelHoverChange: (hovered) => {
-        taskPanelHovered.current = hovered;
+      mainTaskScrollRef,
+      subagentTaskScrollRef,
+      onTaskPanelHoverChange: (track) => {
+        hoveredTaskTrack.current = track;
       },
       ...slashCompletion === null ? {} : { completion: slashCompletion },
       ...mentionCompletion === null ? {} : { mentionCompletion, onMentionSelect: selectMention },
@@ -2524,7 +2759,8 @@ function TerminalLayout({
   onMentionSelect,
   completedSlashTokenLength: tokenLength = 0,
   scrollRef,
-  taskScrollRef,
+  mainTaskScrollRef,
+  subagentTaskScrollRef,
   onTaskPanelHoverChange,
   onPromptCursorChange,
   ideContext
@@ -2583,7 +2819,8 @@ function TerminalLayout({
         interactive: activeSession,
         maxHeight: taskPanelRows,
         columns,
-        ...taskScrollRef === void 0 ? {} : { scrollRef: taskScrollRef },
+        ...mainTaskScrollRef === void 0 ? {} : { mainScrollRef: mainTaskScrollRef },
+        ...subagentTaskScrollRef === void 0 ? {} : { subagentScrollRef: subagentTaskScrollRef },
         ...onTaskPanelHoverChange === void 0 ? {} : { onHoverChange: onTaskPanelHoverChange }
       }
     ),
@@ -2804,8 +3041,10 @@ function jumpScroll(scroll, delta) {
     scroll.scrollTo(Math.max(0, target));
   }
 }
-function selectWheelScrollTarget(transcript, tasks, taskPanelHovered) {
-  return taskPanelHovered && tasks !== null ? tasks : transcript;
+function selectWheelScrollTarget(transcript, mainTasks, subagentTasks, hoveredTrack) {
+  if (hoveredTrack === "main" && mainTasks !== null) return mainTasks;
+  if (hoveredTrack === "subagent" && subagentTasks !== null) return subagentTasks;
+  return transcript;
 }
 function taskPanelViewportRows(rows, reservedBottomRows, hasTasks) {
   if (!hasTasks) return 0;

package/dist/{chunk-XMRKRPNC.js → chunk-26T23AKR.js}

@@ -21447,6 +21447,7 @@ export {
   Box_default,
   Text,
   stripAnsi,
+  stringWidth,
   ScrollBox_default,
   instances_default,
   osc,

package/dist/{claude-ink-6EZHF64C.js → claude-ink-C24UQAL7.js}

@@ -10,7 +10,7 @@ import {
   useStdout,
   use_app_default,
   use_input_default
-} from "./chunk-XMRKRPNC.js";
+} from "./chunk-26T23AKR.js";
 import "./chunk-ZJCAQXA7.js";
 import "./chunk-S32JRDZK.js";
 export {

package/dist/cli-main.js

@@ -919,9 +919,9 @@ async function runInteractiveCli(props) {
   const disposeUserTimingSweeper = installUiUserTimingSweeper();
   try {
     const [{ render, AlternateScreen }, { createElement }, { App }] = await Promise.all([
-      import("./claude-ink-6EZHF64C.js"),
+      import("./claude-ink-C24UQAL7.js"),
       import("react"),
-      import("./app-SMIB6P23.js")
+      import("./app-PXXQOEWP.js")
     ]);
     const instance = await render(createElement(
       AlternateScreen,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flavor-code",
-  "version": "1.4.0-beta.10",
+  "version": "1.4.0-beta.11",
   "author": "YachuanWzh",
   "type": "module",
   "publishConfig": {