@bubblebrain-ai/bubble 0.0.28 → 0.0.29

package/dist/tui-ink/compaction-progress.d.ts

@@ -0,0 +1,19 @@
+import type { CompactionProgress } from "../slash-commands/types.js";
+/**
+ * Map a compaction phase + streamed length onto a 0..1 bar fill. There is no
+ * true denominator for a single LLM call, so the curve is honest by design:
+ * it ramps but never reaches 1.0 (or even 0.9) until the work is actually done.
+ */
+export declare function compactionFraction(progress: CompactionProgress): number;
+export declare function renderBar(fraction: number, width?: number): {
+    filled: string;
+    empty: string;
+};
+/**
+ * Bottom-stack progress card for a manual `/compact` run. Mount it only while a
+ * compaction is in flight (i.e. render conditionally on a non-null progress) so
+ * its elapsed-time clock resets per run.
+ */
+export declare function CompactionProgressCard({ progress }: {
+    progress: CompactionProgress | null;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/tui-ink/compaction-progress.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Box, Text } from "ink";
+import { useTheme } from "./theme.js";
+const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+const BAR_WIDTH = 24;
+// Chars of streamed summary at which the summarizing phase nears its ceiling.
+// A 9-section handoff summary is typically ~1.5–4k chars; this makes the bar
+// feel alive without ever claiming completion before the model actually returns
+// (the curve is asymptotic and capped at 0.9 until the apply phase).
+const SUMMARY_CHAR_ESTIMATE = 2500;
+const PHASE_LABEL = {
+    collecting: "收集历史",
+    summarizing: "生成摘要中",
+    applying: "应用压缩",
+};
+/**
+ * Map a compaction phase + streamed length onto a 0..1 bar fill. There is no
+ * true denominator for a single LLM call, so the curve is honest by design:
+ * it ramps but never reaches 1.0 (or even 0.9) until the work is actually done.
+ */
+export function compactionFraction(progress) {
+    switch (progress.phase) {
+        case "collecting":
+            return 0.05;
+        case "summarizing": {
+            const ramp = 1 - Math.exp(-progress.streamedChars / SUMMARY_CHAR_ESTIMATE);
+            return Math.min(0.9, 0.1 + 0.8 * ramp);
+        }
+        case "applying":
+            return 0.95;
+    }
+}
+export function renderBar(fraction, width = BAR_WIDTH) {
+    const clamped = Math.max(0, Math.min(1, fraction));
+    const filledCount = Math.round(clamped * width);
+    return {
+        filled: "█".repeat(filledCount),
+        empty: "░".repeat(width - filledCount),
+    };
+}
+function formatChars(count) {
+    if (count < 1000)
+        return `${count}`;
+    return `${(count / 1000).toFixed(1)}k`;
+}
+/**
+ * Bottom-stack progress card for a manual `/compact` run. Mount it only while a
+ * compaction is in flight (i.e. render conditionally on a non-null progress) so
+ * its elapsed-time clock resets per run.
+ */
+export function CompactionProgressCard({ progress }) {
+    const theme = useTheme();
+    const [frameIndex, setFrameIndex] = useState(0);
+    const [startedAt] = useState(() => Date.now());
+    const [now, setNow] = useState(() => Date.now());
+    useEffect(() => {
+        const t = setInterval(() => {
+            setFrameIndex((i) => (i + 1) % SPINNER_FRAMES.length);
+            setNow(Date.now());
+        }, 100);
+        return () => clearInterval(t);
+    }, []);
+    if (!progress)
+        return null;
+    const fraction = compactionFraction(progress);
+    const { filled, empty } = renderBar(fraction);
+    const pct = Math.round(fraction * 100);
+    const elapsed = ((now - startedAt) / 1000).toFixed(1);
+    const phaseLine = progress.phase === "summarizing"
+        ? `· ${PHASE_LABEL.summarizing} (流式接收 ${formatChars(progress.streamedChars)} chars)`
+        : `· ${PHASE_LABEL[progress.phase]}`;
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, paddingBottom: 1, flexShrink: 0, children: [_jsx(Text, { color: theme.accent, children: `${SPINNER_FRAMES[frameIndex]} Compacting context…` }), _jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: "[" }), _jsx(Text, { color: theme.accent, children: filled }), _jsx(Text, { color: theme.dim, children: empty }), _jsx(Text, { color: theme.muted, children: `] ${pct}%` })] }), _jsx(Text, { color: theme.muted, children: phaseLine }), _jsx(Text, { color: theme.muted, children: `· 已耗时 ${elapsed}s` })] }));
+}

package/dist/tui-ink/input-box.d.ts

@@ -19,6 +19,12 @@ interface InputBoxProps {
     onQueue?: (payload: SubmitPayload) => void;
     onPasteNotice?: (notice: string) => void;
     disabled?: boolean;
+    /**
+     * Called when Down is pressed at the bottom edge with nothing newer in
+     * history — the parent uses this to move focus out of the composer (e.g. into
+     * the subagent entry), matching Claude Code's ↓-to-focus-the-task-panel.
+     */
+    onArrowDownAtBottom?: () => void;
     cursorResetEpoch?: number;
     draftText?: string;
     draftEpoch?: number;
@@ -142,4 +148,4 @@ export declare function resolveComposerEditAction(input: string, key: {
     home?: boolean;
     end?: boolean;
 }): ComposerEditAction | null;
-export declare function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, cursorResetEpoch, draftText, draftEpoch, onDraftApplied, skillRegistry, localSlashCommands, terminalColumns, cwd, sessionFile, nextImageLabelStart, }: InputBoxProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, onArrowDownAtBottom, cursorResetEpoch, draftText, draftEpoch, onDraftApplied, skillRegistry, localSlashCommands, terminalColumns, cwd, sessionFile, nextImageLabelStart, }: InputBoxProps): import("react/jsx-runtime").JSX.Element;

package/dist/tui-ink/input-box.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Box, Text, useCursor, useInput, usePaste, useStdout } from "ink";
-import stringWidth from "string-width";
+import { visualWidth, graphemeWidth } from "./width.js";
 import { appendFileSync } from "node:fs";
 import { registry as slashRegistry } from "../slash-commands/index.js";
 import { useTheme } from "./theme.js";
@@ -13,7 +13,7 @@ import { stripTerminalMouseSequences } from "./terminal-mouse.js";
 import { submitPayloadFingerprint } from "./submit-dedupe.js";
 export { createPastedContentMarker, expandPastedContentMarkers, shouldCollapsePastedContent, } from "../tui/paste-placeholder.js";
 import { createPastedContentMarker, expandPastedContentMarkers, shouldCollapsePastedContent, } from "../tui/paste-placeholder.js";
-import { imageDisplayLabel } from "../tui/image-display.js";
+import { imageDisplayLabel, stripInlineImageLabels } from "../tui/image-display.js";
 const MIN_VISIBLE_LINES = 3;
 const MAX_VISIBLE_LINES = 6;
 const PADDING_X = 1;
@@ -92,7 +92,8 @@ export function splitLineAtCursor(lineText, charOffset) {
     };
 }
 // Break a logical line into segments that each fit within `maxWidth` display
-// columns. Uses string-width so CJK and emoji wrap correctly; empty lines
+// columns. Uses the shared terminal-aware width (./width.js) so CJK, emoji and
+// ambiguous-width chars wrap exactly as the terminal renders them; empty lines
 // still produce one empty segment so cursors on blank lines render.
 function wrapLineByWidth(line, maxWidth) {
     if (line.length === 0)
@@ -101,7 +102,7 @@ function wrapLineByWidth(line, maxWidth) {
     let current = "";
     let currentWidth = 0;
     for (const ch of line) {
-        const w = stringWidth(ch);
+        const w = graphemeWidth(ch);
         if (currentWidth + w > maxWidth && current.length > 0) {
             out.push(current);
             current = "";
@@ -143,7 +144,7 @@ function cursorToVisual(visualLines, cursor) {
     }
     const vl = visualLines[row];
     const charOffset = Math.max(0, cursor - vl.absStart);
-    return { row, col: stringWidth(vl.text.slice(0, charOffset)) };
+    return { row, col: visualWidth(vl.text.slice(0, charOffset)) };
 }
 // Map a (visualRow, visualCol) target back to a source-text cursor index.
 // Used by up/down arrows to preserve the visual column when jumping rows.
@@ -155,7 +156,7 @@ function visualToCursor(visualLines, row, col) {
     let width = 0;
     let charOffset = 0;
     for (const ch of vl.text) {
-        const w = stringWidth(ch);
+        const w = graphemeWidth(ch);
         if (width + w > col)
             break;
         width += w;
@@ -325,7 +326,7 @@ export function resolveComposerEditAction(input, key) {
         return "delete-line-end";
     return null;
 }
-export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, cursorResetEpoch = 0, draftText, draftEpoch = 0, onDraftApplied, skillRegistry, localSlashCommands = [], terminalColumns, cwd, sessionFile, nextImageLabelStart = 1, }) {
+export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, onArrowDownAtBottom, cursorResetEpoch = 0, draftText, draftEpoch = 0, onDraftApplied, skillRegistry, localSlashCommands = [], terminalColumns, cwd, sessionFile, nextImageLabelStart = 1, }) {
     const theme = useTheme();
     const width = terminalColumns;
     const historyScope = useMemo(() => ({ sessionFile, cwd }), [sessionFile, cwd]);
@@ -345,6 +346,9 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, cursorRes
     const submittedPayloadFingerprintRef = useRef(null);
     const loadingFilesRef = useRef(false);
     const nextPastedContentIndexRef = useRef(1);
+    // Kept equal to attachments.length so a synchronous multi-image paste loop
+    // assigns each image its correct (distinct) inline label index.
+    const attachmentCountRef = useRef(0);
     // Paste and the keystrokes that follow can arrive inside the same stdin chunk
     // and dispatch within one discreteUpdates batch. If the Enter that a user
     // typed after a paste fires before React commits the paste-driven setState,
@@ -448,9 +452,16 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, cursorRes
         setCursor((c) => c + insertion.length);
     }, [cursor]);
     const addAttachment = React.useCallback((att) => {
+        const base = imageLabelStartOverride ?? nextImageLabelStart;
+        const index = attachmentCountRef.current;
+        attachmentCountRef.current += 1;
+        // Place the image label inline at the cursor so the reference appears where
+        // it was pasted (not forced to the start), and moves with later edits. It is
+        // stripped from the text on submit so the model still receives clean text.
+        insertTextAtCursor(`${imageDisplayLabel(base + index)} `);
         ensureImageLabelStart();
         setAttachments((prev) => [...prev, att]);
-    }, [ensureImageLabelStart]);
+    }, [ensureImageLabelStart, insertTextAtCursor, imageLabelStartOverride, nextImageLabelStart]);
     const notice = React.useCallback((msg) => {
         onPasteNotice?.(msg);
     }, [onPasteNotice]);
@@ -580,7 +591,12 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, cursorRes
         setSelectedIndex(0);
     };
     const submitInput = (submittedText, target = "submit") => {
-        const expandedText = expandPastedContentMarkers(submittedText, pastedContentRefs);
+        const labelStartForSubmit = imageLabelStartOverride ?? nextImageLabelStart;
+        const inlineLabels = attachments.map((_, index) => imageDisplayLabel(labelStartForSubmit + index));
+        // Text-paste markers expand to their content (not replayable); image labels
+        // are a composer-only affordance stripped here (replayable via attachments).
+        const pasteExpanded = expandPastedContentMarkers(submittedText, pastedContentRefs);
+        const expandedText = stripInlineImageLabels(pasteExpanded, inlineLabels);
         if (expandedText.trim().length === 0 && attachments.length === 0)
             return;
         const deliver = target === "queue" && onQueue ? onQueue : onSubmit;
@@ -588,7 +604,10 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, cursorRes
             // The pasted-content marker is a composer-only affordance. Submit the
             // fully-expanded text so the transcript shows what was actually sent —
             // the agent already receives the expanded text — rather than the marker.
+            // `text` (model input) has image labels stripped; `displayText` keeps them
+            // inline at their paste position so the transcript shows the image there.
             text: expandedText,
+            ...(inlineLabels.length > 0 && pasteExpanded !== expandedText ? { displayText: pasteExpanded } : {}),
             images: attachments,
             imageDisplayStart: attachments.length > 0 ? (imageLabelStartOverride ?? nextImageLabelStart) : undefined,
         };
@@ -597,9 +616,10 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, cursorRes
             return;
         submittedPayloadFingerprintRef.current = fingerprint;
         deliver(payload);
-        // A collapsed marker cannot be safely replayed from history once its
-        // in-memory paste reference is gone; skip those entries instead.
-        if (expandedText === submittedText && (expandedText.trim().length > 0 || attachments.length > 0)) {
+        // A collapsed text-paste marker cannot be safely replayed once its
+        // in-memory reference is gone; skip those. Image-label stripping is fine to
+        // replay (the attachments are stored on the history entry).
+        if (pasteExpanded === submittedText && (expandedText.trim().length > 0 || attachments.length > 0)) {
             const historyEntry = {
                 text: expandedText,
                 images: attachments,
@@ -617,6 +637,7 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, cursorRes
         setCursor(0);
         setSelectedIndex(0);
         setAttachments([]);
+        attachmentCountRef.current = 0;
         setImageLabelStartOverride(null);
         setPastedContentRefs([]);
         nextPastedContentIndexRef.current = 1;
@@ -788,6 +809,7 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, cursorRes
                         setImageLabelStartOverride(null);
                     return next;
                 });
+                attachmentCountRef.current = Math.max(0, attachmentCountRef.current - 1);
             }
             return;
         }
@@ -872,6 +894,7 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, cursorRes
         setCursor(draftText.length);
         setSelectedIndex(0);
         setAttachments([]);
+        attachmentCountRef.current = 0;
         setImageLabelStartOverride(null);
         setPastedContentRefs([]);
         nextPastedContentIndexRef.current = 1;
@@ -903,7 +926,11 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, cursorRes
     const lineWidth = Math.max(1, contentWidth - PROMPT.length);
     const imageLabelStart = imageLabelStartOverride ?? nextImageLabelStart;
     const attachmentLabels = useMemo(() => attachments.map((_, index) => imageDisplayLabel(imageLabelStart + index)), [attachments, imageLabelStart]);
-    const imageInlinePrefix = attachmentLabels.length > 0 ? `${attachmentLabels.join(" ")} ` : "";
+    // Labels are normally inline in `text` at their paste position. Only labels
+    // that are NOT present inline (e.g. attachments restored from history) fall
+    // back to a leading prefix so they stay visible.
+    const unmarkedLabels = useMemo(() => attachmentLabels.filter((label) => !text.includes(label)), [attachmentLabels, text]);
+    const imageInlinePrefix = unmarkedLabels.length > 0 ? `${unmarkedLabels.join(" ")} ` : "";
     const displayText = imageInlinePrefix + text;
     const displayCursor = cursor + imageInlinePrefix.length;
     const displayCursorToSourceCursor = (value) => Math.max(0, Math.min(text.length, value - imageInlinePrefix.length));
@@ -944,6 +971,7 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, cursorRes
             setText(result.text);
             setCursor(result.text.length);
             setAttachments(result.images ?? []);
+            attachmentCountRef.current = (result.images ?? []).length;
             setImageLabelStartOverride(result.imageDisplayStart ?? null);
             setHistoryIndex(result.index);
             historyDraftRef.current = result.draft;
@@ -951,6 +979,11 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, cursorRes
             setPastedContentRefs([]);
             nextPastedContentIndexRef.current = 1;
         }
+        else if (direction === "down") {
+            // At the bottom edge with nothing newer in history: hand Down to the
+            // parent so focus can move into the subagent entry (Claude Code parity).
+            onArrowDownAtBottom?.();
+        }
     };
     const classifyVerticalArrow = (direction) => {
         performVerticalArrowRef.current(direction);
@@ -1103,7 +1136,7 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, cursorRes
     });
     const moreBelow = totalLines - scrollOffset - visibleLines;
     const filledLine = (value) => {
-        const visibleWidth = stringWidth(value);
+        const visibleWidth = visualWidth(value);
         return value + " ".repeat(Math.max(0, contentWidth - visibleWidth));
     };
     return (_jsxs(Box, { flexDirection: "column", width: width, backgroundColor: theme.background, children: [lineFrame && (_jsx(Box, { paddingX: PADDING_X, children: _jsx(Text, { color: theme.border, children: "─".repeat(contentWidth) }) })), _jsxs(Box, { flexDirection: "column", paddingX: PADDING_X, width: width, backgroundColor: composerBg, children: [hasMoreAbove && (_jsx(Text, { backgroundColor: rowBg, color: theme.muted, dimColor: true, children: filledLine(` ↑ ${scrollOffset} more`) })), displayedLines.map((row) => {
@@ -1126,7 +1159,7 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, cursorRes
                                 : undefined,
                         });
                         const renderedLine = renderedSegments.map((segment) => segment.text).join("");
-                        const fill = " ".repeat(Math.max(0, lineWidth - stringWidth(renderedLine)));
+                        const fill = " ".repeat(Math.max(0, lineWidth - visualWidth(renderedLine)));
                         return (_jsxs(Box, { height: 1, overflow: "hidden", backgroundColor: composerBg, ref: isCursorLine
                                 ? (el) => {
                                     cursorLineRef.current = el;

package/dist/tui-ink/markdown.d.ts

@@ -44,6 +44,19 @@ export declare function parseMarkdownBlocks(text: string): MarkdownBlock[];
  */
 export declare function findLastBlockStart(text: string): number;
 export declare function parseMarkdownInlineSegments(text: string, style?: InlineStyle): MarkdownInlineSegment[];
+/**
+ * CJK-aware line wrap over styled inline segments.
+ *
+ * Ink wraps a <Text> via wrap-ansi with `hard: true`, which treats only ASCII
+ * spaces as break opportunities. Chinese joins items with ideographic
+ * punctuation like "、" and no ASCII space, so a long run such as
+ * `A、B、ProviderSendTurnInput` is seen as ONE unbreakable word and gets chopped
+ * mid-token at the column edge (e.g. `ProviderSendTurnInpu` + `t`), and the
+ * overflow spills past the box into the terminal's own hard wrap. We instead
+ * break at ASCII spaces AND after CJK punctuation (、,。!?;:)等 — keeping ASCII
+ * identifiers whole — and hard-split only a lone token wider than the line.
+ */
+export declare function wrapInlineSegments(segments: MarkdownInlineSegment[], maxWidth: number): MarkdownInlineSegment[][];
 /**
  * Streaming-aware wrapper around `MarkdownContent`.
  *
@@ -63,6 +76,11 @@ export declare function StreamingMarkdown({ content, maxWidth, }: {
     content: string;
     maxWidth?: number;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function splitListItem(line: string): {
+    prefix: string;
+    content: string;
+    indent: number;
+} | null;
 export declare function MarkdownContent({ content, maxWidth, }: {
     content: string;
     maxWidth?: number;

package/dist/tui-ink/markdown.js

@@ -1,11 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Lightweight Markdown renderer for Ink TUI.
  * Supports code blocks, inline formatting, and tables.
  */
 import React from "react";
 import { Box, Text } from "ink";
-import stringWidth from "string-width";
+import { visualWidth, graphemeWidth } from "./width.js";
 import { useTerminalSize } from "./use-terminal-size.js";
 import { useTheme } from "./theme.js";
 import { highlightCode, highlightCodeSync } from "./code-highlight.js";
@@ -219,16 +219,6 @@ function normalizeTableRow(row, colCount) {
         normalized.push("");
     return normalized;
 }
-function visualWidth(str) {
-    if (!str)
-        return 0;
-    return stringWidth(str);
-}
-function graphemeWidth(grapheme) {
-    if (!grapheme)
-        return 0;
-    return stringWidth(grapheme);
-}
 // Inline formatting: bold, italic, inline code
 export function parseMarkdownInlineSegments(text, style = {}) {
     const segments = [];
@@ -330,14 +320,28 @@ function appendInlineSegment(segments, text, style) {
         segments.push(next);
     }
 }
+function renderSegmentNodes(segments, keyPrefix) {
+    return segments.map((segment, index) => (_jsx(Text, { bold: segment.bold, italic: segment.italic, color: segment.code ? "#a78bfa" : undefined, children: segment.text }, `${keyPrefix}-${index}`)));
+}
 function renderInlineSegments(text, keyPrefix, style = {}) {
-    return parseMarkdownInlineSegments(text, style).map((segment, index) => (_jsx(Text, { bold: segment.bold, italic: segment.italic, color: segment.code ? "#a78bfa" : undefined, children: segment.text }, `${keyPrefix}-${index}`)));
+    return renderSegmentNodes(parseMarkdownInlineSegments(text, style), keyPrefix);
 }
 function inlinePlainText(text) {
     return parseMarkdownInlineSegments(text).map((segment) => segment.text).join("");
 }
-function InlineText({ text }) {
-    return _jsx(Text, { children: renderInlineSegments(text, "inline") });
+function InlineText({ text, maxWidth }) {
+    const { columns } = useTerminalSize();
+    // Pre-wrap CJK-aware so Ink's space-only wrap-ansi can't chop "、"-joined runs
+    // mid-token. A caller-supplied maxWidth is exact (it already nets out the
+    // gutter); otherwise fall back to the terminal width minus a generous margin
+    // for borders/padding so a nested card never over-estimates and overflows —
+    // wrapping a few cells early is invisible, a mid-token chop is not.
+    const effectiveWidth = maxWidth ?? (columns ? Math.max(20, columns - 10) : undefined);
+    if (effectiveWidth === undefined) {
+        return _jsx(Text, { children: renderInlineSegments(text, "inline") });
+    }
+    const wrapped = wrapInlineSegments(parseMarkdownInlineSegments(text), effectiveWidth);
+    return (_jsx(_Fragment, { children: wrapped.map((segments, li) => (_jsx(Text, { children: segments.length ? renderSegmentNodes(segments, `inline-${li}`) : " " }, li))) }));
 }
 function CodeBlock({ lang, lines }) {
     const theme = useTheme();
@@ -436,6 +440,137 @@ function truncateInlineSegments(segments, width) {
     appendInlineSegment(output, "…", {});
     return output;
 }
+/**
+ * CJK-aware line wrap over styled inline segments.
+ *
+ * Ink wraps a <Text> via wrap-ansi with `hard: true`, which treats only ASCII
+ * spaces as break opportunities. Chinese joins items with ideographic
+ * punctuation like "、" and no ASCII space, so a long run such as
+ * `A、B、ProviderSendTurnInput` is seen as ONE unbreakable word and gets chopped
+ * mid-token at the column edge (e.g. `ProviderSendTurnInpu` + `t`), and the
+ * overflow spills past the box into the terminal's own hard wrap. We instead
+ * break at ASCII spaces AND after CJK punctuation (、,。!?;:)等 — keeping ASCII
+ * identifiers whole — and hard-split only a lone token wider than the line.
+ */
+export function wrapInlineSegments(segments, maxWidth) {
+    if (maxWidth <= 0)
+        return [segments];
+    const cells = [];
+    for (const segment of segments) {
+        const style = { bold: segment.bold, italic: segment.italic, code: segment.code };
+        for (const grapheme of splitGraphemes(segment.text)) {
+            cells.push({ grapheme, width: graphemeWidth(grapheme), style });
+        }
+    }
+    // CJK punctuation that acts as break opportunity AFTER it (like English comma/period).
+    const isCJKPunctuation = (g) => /^[、,。!?;:,!?;:]$/.test(g);
+    const chunks = [];
+    const chunkWidth = (run) => run.reduce((sum, cell) => sum + cell.width, 0);
+    let i = 0;
+    while (i < cells.length) {
+        const cell = cells[i];
+        if (cell.grapheme === " ") {
+            const run = [];
+            while (i < cells.length && cells[i].grapheme === " ")
+                run.push(cells[i++]);
+            chunks.push({ cells: run, width: chunkWidth(run), breakAfter: true });
+        }
+        else if (cell.width >= 2) {
+            chunks.push({ cells: [cell], width: cell.width, breakAfter: isCJKPunctuation(cell.grapheme) });
+            i++;
+        }
+        else {
+            const run = [];
+            while (i < cells.length && cells[i].grapheme !== " " && cells[i].width < 2)
+                run.push(cells[i++]);
+            chunks.push({ cells: run, width: chunkWidth(run), breakAfter: false });
+        }
+    }
+    // CJK line-break rules (禁則処理 / kinsoku): a closing bracket or a trailing
+    // punctuation mark must never begin a wrapped line (避头), and an opening
+    // bracket must never end one (避尾). Otherwise a line that fills up right
+    // before "）。" pushes that lone punctuation onto the next row — the jarring
+    // orphaned "）。" at the left margin. Glue each such mark to the chunk it must
+    // stay with, so the pair wraps as one unit (and may move down together).
+    const noStartGlyph = (g) => /^[、，。．！？；：）)〕】｝」』》〉…―ー]$/.test(g);
+    const noEndGlyph = (g) => /^[（(〔【｛「『《〈]$/.test(g);
+    const soleGlyph = (c) => (c.cells.length === 1 ? c.cells[0].grapheme : "");
+    const isSpaceChunk = (c) => c.cells[0]?.grapheme === " ";
+    const glued = [];
+    for (const chunk of chunks) {
+        const g = soleGlyph(chunk);
+        const prev = glued[glued.length - 1];
+        if (g && noStartGlyph(g) && prev && !isSpaceChunk(prev)) {
+            prev.cells.push(...chunk.cells);
+            prev.width += chunk.width;
+            prev.breakAfter = chunk.breakAfter; // inherit the mark's own break behavior
+        }
+        else {
+            glued.push({ cells: [...chunk.cells], width: chunk.width, breakAfter: chunk.breakAfter });
+        }
+    }
+    for (let k = glued.length - 2; k >= 0; k--) {
+        const g = soleGlyph(glued[k]);
+        if (g && noEndGlyph(g) && !isSpaceChunk(glued[k + 1])) {
+            const next = glued[k + 1];
+            next.cells.unshift(...glued[k].cells);
+            next.width += glued[k].width;
+            glued.splice(k, 1);
+        }
+    }
+    const lines = [];
+    let line = [];
+    let lineWidth = 0;
+    const flush = () => { lines.push(line); line = []; lineWidth = 0; };
+    for (let j = 0; j < glued.length; j++) {
+        const chunk = glued[j];
+        const isSpace = chunk.cells[0]?.grapheme === " ";
+        if (isSpace) {
+            if (lineWidth === 0)
+                continue;
+            if (lineWidth + chunk.width <= maxWidth) {
+                line.push(...chunk.cells);
+                lineWidth += chunk.width;
+            }
+            else {
+                flush();
+            }
+            continue;
+        }
+        if (lineWidth + chunk.width <= maxWidth) {
+            line.push(...chunk.cells);
+            lineWidth += chunk.width;
+            if (chunk.breakAfter && j < glued.length - 1) {
+                const nextChunk = glued[j + 1];
+                const nextIsSpace = nextChunk.cells[0]?.grapheme === " ";
+                if (!nextIsSpace && lineWidth + nextChunk.width > maxWidth)
+                    flush();
+            }
+            continue;
+        }
+        if (lineWidth > 0)
+            flush();
+        if (chunk.width <= maxWidth) {
+            line.push(...chunk.cells);
+            lineWidth = chunk.width;
+            continue;
+        }
+        for (const cell of chunk.cells) {
+            if (lineWidth + cell.width > maxWidth && lineWidth > 0)
+                flush();
+            line.push(cell);
+            lineWidth += cell.width;
+        }
+    }
+    if (line.length > 0 || lines.length === 0)
+        lines.push(line);
+    return lines.map((lineCells) => {
+        const out = [];
+        for (const cell of lineCells)
+            appendInlineSegment(out, cell.grapheme, cell.style);
+        return out;
+    });
+}
 function inlineSegmentsWidth(segments) {
     return segments.reduce((sum, segment) => sum + visualWidth(segment.text), 0);
 }
@@ -484,6 +619,18 @@ export function StreamingMarkdown({ content, maxWidth, }) {
     const unstableSuffix = content.substring(stablePrefix.length);
     return (_jsxs(Box, { flexDirection: "column", children: [stablePrefix && _jsx(MarkdownContent, { content: stablePrefix, maxWidth: maxWidth }), unstableSuffix && _jsx(MarkdownContent, { content: unstableSuffix, maxWidth: maxWidth })] }));
 }
+// A markdown list item: optional indent, a bullet (-, *, +) or ordered marker
+// (1. / 2)), then whitespace, then the item text. The captured prefix is
+// rendered in its own fixed column so wrapped continuation lines hang-indent
+// under the item text instead of collapsing back to the left margin.
+const LIST_ITEM_RE = /^(\s*)([-*+]|\d{1,9}[.)])(\s+)(\S.*)$/;
+export function splitListItem(line) {
+    const m = LIST_ITEM_RE.exec(line);
+    if (!m)
+        return null;
+    const prefix = m[1] + m[2] + m[3];
+    return { prefix, content: m[4], indent: visualWidth(prefix) };
+}
 export function MarkdownContent({ content, maxWidth, }) {
     const blocks = React.useMemo(() => parseMarkdownBlocks(content), [content]);
     return (_jsx(Box, { flexDirection: "column", children: blocks.map((block, i) => {
@@ -496,6 +643,15 @@ export function MarkdownContent({ content, maxWidth, }) {
             if (block.type === "heading") {
                 return _jsx(HeadingBlock, { level: block.level, text: block.text }, i);
             }
-            return (_jsx(Box, { flexDirection: "column", marginBottom: 1, children: block.lines.map((line, li) => (_jsx(InlineText, { text: line }, li))) }, i));
+            return (_jsx(Box, { flexDirection: "column", marginBottom: 1, children: block.lines.map((line, li) => {
+                    const item = splitListItem(line);
+                    if (item) {
+                        // Marker in a non-shrinking column; the item text flows in a
+                        // flex column to its right so every wrapped row aligns under it.
+                        const contentWidth = maxWidth !== undefined ? Math.max(4, maxWidth - item.indent) : undefined;
+                        return (_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { flexShrink: 0, children: _jsx(Text, { children: item.prefix }) }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: _jsx(InlineText, { text: item.content, maxWidth: contentWidth }) })] }, li));
+                    }
+                    return _jsx(InlineText, { text: line, maxWidth: maxWidth }, li);
+                }) }, i));
         }) }));
 }