mixdog 1.2.1 → 1.2.3

package/src/tui/components/QuestionPanel.jsx

@@ -0,0 +1,275 @@
+/**
+ * components/QuestionPanel.jsx — ask_user multiple-choice panel.
+ *
+ * Same round-border chrome as Picker. Digits/↑↓ choose, Space toggles
+ * (multi-select), ←/→ switch questions, Enter confirms the current question
+ * (and sends on the last), Esc dismisses. The last row is an inline text
+ * input; while typing, every key belongs to the input (no slash commands).
+ */
+import { useRef, useState } from 'react';
+import { Box, Text, useInput, usePaste, useStdin } from 'ink';
+import stringWidth from 'string-width';
+import { theme } from '../theme.mjs';
+import { truncatePanelText, padPanelCells } from './panel-cell-text.mjs';
+import { isCsiPrivateReply } from './prompt-input/key-signals.mjs';
+import {
+  CUSTOM_LABEL,
+  appendCapped,
+  answerFor,
+  buildAnswers,
+  initialCursor,
+  optionLayout,
+  planQuestionView,
+  questionHelp,
+} from './question-panel-model.mjs';
+
+const MAX_TAB_CELLS = 10;
+
+function cleanTyped(value) {
+  return String(value ?? '')
+    .replace(/\x1b\[[\d;?<]*[A-Za-z~]/g, '')
+    .replace(/[\r\n\t]+/g, ' ')
+    .replace(/[\x00-\x1f\x7f]/g, '');
+}
+
+export function QuestionPanel({ questions, columns = 80, rows, onSubmit, onDismiss }) {
+  const { isRawModeSupported } = useStdin();
+  const [state, setState] = useState(() => ({
+    qi: 0,
+    cursors: questions.map(initialCursor),
+    drafts: questions.map(() => ({ selected: [], text: '' })),
+    typing: false,
+    buf: '',
+  }));
+  const ref = useRef(state);
+  ref.current = state;
+  const commit = (next) => {
+    ref.current = next;
+    setState(next);
+  };
+  const last = questions.length - 1;
+
+  const withDraft = (s, qi, patch) => ({
+    ...s,
+    drafts: s.drafts.map((d, i) => (i === qi ? { ...d, ...patch } : d)),
+  });
+
+  // Confirm the current question and advance (or send on the last one).
+  const advance = (s) => {
+    if (s.qi >= last) {
+      onSubmit(buildAnswers(questions, s.drafts));
+      return;
+    }
+    commit({ ...s, qi: s.qi + 1, typing: false, buf: '' });
+  };
+
+  const typeInto = (input) => {
+    const s = ref.current;
+    const text = cleanTyped(input);
+    if (text) commit({ ...s, buf: appendCapped(s.buf, text) });
+  };
+
+  usePaste((text) => {
+    if (ref.current.typing) typeInto(text);
+  }, { isActive: isRawModeSupported });
+
+  useInput(
+    (input, key) => {
+      const s = ref.current;
+      const raw = String(input ?? '');
+      if (/(?:\x1b)?\[<\d+;\d+;\d+[Mm]/.test(raw) || isCsiPrivateReply(raw)) return;
+      const question = questions[s.qi];
+      const n = question.options.length;
+      const multi = question.multi_select === true;
+
+      if (s.typing) {
+        if (key.escape) return commit({ ...s, typing: false, buf: '' });
+        if (key.return) {
+          const text = s.buf.trim();
+          const draft = s.drafts[s.qi];
+          const next = withDraft(s, s.qi, { text, selected: multi ? draft.selected : [] });
+          if (text) return advance({ ...next, typing: false, buf: '' });
+          return commit({ ...next, typing: false, buf: '' });
+        }
+        if (key.backspace || key.delete) return commit({ ...s, buf: Array.from(s.buf).slice(0, -1).join('') });
+        if (key.ctrl || key.meta || key.upArrow || key.downArrow || key.leftArrow || key.rightArrow || key.tab) return;
+        return typeInto(raw);
+      }
+
+      if (key.escape) return onDismiss();
+      const setCursor = (cursor) => commit({ ...s, cursors: s.cursors.map((c, i) => (i === s.qi ? cursor : c)) });
+      const choose = (idx, toggle) => {
+        const draft = s.drafts[s.qi];
+        let selected;
+        if (multi && toggle) {
+          selected = draft.selected.includes(idx) ? draft.selected.filter((i) => i !== idx) : [...draft.selected, idx];
+        } else {
+          selected = multi ? draft.selected : [idx];
+        }
+        const cursors = s.cursors.map((c, i) => (i === s.qi ? idx : c));
+        commit({ ...withDraft(s, s.qi, { selected, text: multi ? draft.text : '' }), cursors });
+      };
+      const cursor = s.cursors[s.qi];
+      if (key.upArrow) return setCursor((cursor - 1 + n + 1) % (n + 1));
+      if (key.downArrow) return setCursor((cursor + 1) % (n + 1));
+      if (key.leftArrow || key.rightArrow) {
+        const qi = Math.max(0, Math.min(last, s.qi + (key.leftArrow ? -1 : 1)));
+        return commit({ ...s, qi });
+      }
+      if (key.return) {
+        if (cursor === n) return commit({ ...s, typing: true, buf: s.drafts[s.qi].text });
+        const draft = s.drafts[s.qi];
+        let next = s;
+        if (!multi) next = withDraft(s, s.qi, { selected: [cursor], text: '' });
+        else if (draft.selected.length === 0 && !draft.text.trim()) next = withDraft(s, s.qi, { selected: [cursor] });
+        return advance(next);
+      }
+      if (raw === ' ' && !key.ctrl && !key.meta) {
+        if (cursor < n) choose(cursor, true);
+        return;
+      }
+      if (/^[1-9]$/.test(raw)) {
+        const idx = Number(raw) - 1;
+        if (idx < n) choose(idx, true);
+        else if (idx === n) setCursor(n);
+      }
+    },
+    { isActive: isRawModeSupported }
+  );
+
+  const question = questions[state.qi];
+  const multi = question.multi_select === true;
+  const layout = optionLayout(question, columns);
+  const n = question.options.length;
+  const cursor = state.cursors[state.qi];
+  const draft = state.drafts[state.qi];
+  const avail = layout.avail;
+
+  const title = questions.length > 1 ? `Question ${state.qi + 1}/${questions.length}` : 'Question';
+  const tabs =
+    questions.length > 1
+      ? questions.map((q, i) => ({
+          text: truncatePanelText(String(q.header || `Q${i + 1}`), MAX_TAB_CELLS),
+          answered: answerFor(q, state.drafts[i]) !== null,
+          current: i === state.qi,
+        }))
+      : [];
+
+  const indexText = (i) => padPanelCells(`${i + 1}.`, layout.indexCells - 1) + ' ';
+  const renderLine = (selected, children, key) => {
+    const text = selected ? { backgroundColor: theme.selectionBackground, color: theme.selectionText } : {};
+    return (
+      <Text key={key} {...text} wrap="truncate">
+        {children}
+      </Text>
+    );
+  };
+
+  const plan = planQuestionView(question, columns, rows ?? Infinity, cursor);
+  const out = [];
+  const optionRow = (i) => {
+    const row = layout.rows[i];
+    const selected = i === cursor;
+    const checked = draft.selected.includes(i);
+    const lead = `${selected ? '› ' : '  '}${indexText(i)}`;
+    const fill = ' '.repeat(Math.max(0, avail - layout.prefixCells - stringWidth(row.label + row.suffix + row.detail)));
+    out.push(
+      renderLine(
+        selected,
+        <>
+          {lead}
+          {multi ? (
+            <Text color={selected ? theme.selectionText : checked ? theme.success : undefined}>
+              {checked ? '[x] ' : '[ ] '}
+            </Text>
+          ) : null}
+          {row.label}
+          {row.suffix ? <Text color={selected ? theme.selectionText : theme.suggestion}>{row.suffix}</Text> : null}
+          {row.detail ? <Text color={selected ? theme.selectionText : theme.subtle}>{row.detail}</Text> : null}
+          {selected ? fill : ''}
+        </>,
+        `o${i}`
+      )
+    );
+  };
+
+  const customSelected = cursor === n;
+  const customLead = `${customSelected ? '› ' : '  '}${indexText(n)}`;
+  const markerPad = multi ? '    ' : '';
+  let customBody;
+  if (state.typing) {
+    const room = Math.max(1, avail - stringWidth(customLead) - stringWidth(markerPad) - 1);
+    let shown = Array.from(state.buf).slice(-room).join('');
+    while (stringWidth(shown) > room) shown = Array.from(shown).slice(1).join('');
+    customBody = `${shown}▌`;
+  } else if (draft.text) {
+    customBody = truncatePanelText(draft.text, Math.max(1, avail - stringWidth(customLead) - stringWidth(markerPad)));
+  } else {
+    customBody = CUSTOM_LABEL;
+  }
+  const customColor = customSelected ? theme.selectionText : draft.text && !state.typing ? theme.text : theme.inactive;
+  const customRow = () =>
+    renderLine(
+      customSelected,
+      <>
+        {customLead}
+        {markerPad}
+        <Text color={state.typing ? undefined : customColor}>{customBody}</Text>
+        {customSelected ? ' '.repeat(Math.max(0, avail - stringWidth(customLead + markerPad + customBody))) : ''}
+      </>,
+      'custom'
+    );
+
+  const moreRow = (key, text) => (
+    <Text key={key} color={theme.subtle} wrap="truncate">
+      {`    ${text}`}
+    </Text>
+  );
+  if (plan.above > 0) out.push(moreRow('above', `↑ ${plan.above} more`));
+  for (const item of plan.items) {
+    if (item.index === n) out.push(customRow());
+    else optionRow(item.index);
+  }
+  if (plan.below > 0) out.push(moreRow('below', `↓ ${plan.below} more`));
+
+  const help = questionHelp({ multi, typing: state.typing, last: state.qi >= last, count: n, questionCount: questions.length });
+
+  return (
+    <Box flexDirection="column" flexShrink={0} width="100%">
+      <Box flexDirection="column" borderStyle="round" borderColor={theme.promptBorder} paddingX={1} width="100%">
+        <Box flexDirection="row" justifyContent="space-between">
+          <Box flexShrink={1}>
+            <Text wrap="truncate">
+              <Text color={theme.panelTitle}>{title}</Text>
+              {tabs.map((tab, i) => (
+                <Text key={i}>
+                  {'  '}
+                  {tab.current ? (
+                    <Text backgroundColor={theme.selectionBackground} color={theme.selectionText}>
+                      {` ${tab.answered ? '✓ ' : ''}${tab.text} `}
+                    </Text>
+                  ) : tab.answered ? (
+                    <Text color={theme.success}>{`✓ ${tab.text}`}</Text>
+                  ) : (
+                    <Text color={theme.subtle}>{tab.text}</Text>
+                  )}
+                </Text>
+              ))}
+            </Text>
+          </Box>
+          <Box flexShrink={0} marginLeft={2}>
+            <Text color={theme.subtle}>{help}</Text>
+          </Box>
+        </Box>
+        <Text> </Text>
+        {plan.qLines.map((line, i) => (
+          <Text key={i} color={theme.text} wrap="truncate">
+            {line}
+          </Text>
+        ))}
+        <Text> </Text>
+        {out}
+      </Box>
+    </Box>
+  );
+}

package/src/tui/components/StatusLine.jsx

@@ -19,6 +19,7 @@ function StatusLineView({
   model,
   effort,
   fast,
+  ultra = false,
   cwd,
   stats,
   contextWindow,
@@ -42,6 +43,7 @@ function StatusLineView({
     model,
     effort,
     fast,
+    ultra,
     cwd,
     stats,
     contextWindow,

package/src/tui/components/question-panel-model.mjs

@@ -0,0 +1,156 @@
+/**
+ * components/question-panel-model.mjs — pure model for the ask_user
+ * QuestionPanel: answer building, row layout and reserved panel height.
+ */
+import stringWidth from 'string-width';
+import wrapAnsi from 'wrap-ansi';
+import { truncatePanelText } from './panel-cell-text.mjs';
+
+export const CUSTOM_LABEL = '직접 입력…';
+export const RECOMMENDED_SUFFIX = ' (추천)';
+export const MULTI_HINT = ' (여러 개 선택 가능)';
+// border(2) + title + blank + blank-after-question; question rows added separately.
+const FIXED_ROWS = 5;
+// Panel interior = frame − 2 border − 2 paddingX.
+const CHROME_COLUMNS = 4;
+
+export function questionsOf(toolApproval) {
+  const list = toolApproval?.args?.questions;
+  return Array.isArray(list) ? list : [];
+}
+
+// One question's answer from its draft ({ selected: optionIndex[], text? }).
+export function answerFor(question, draft) {
+  const options = Array.isArray(question?.options) ? question.options : [];
+  const selected = [...new Set(draft?.selected || [])]
+    .filter((i) => Number.isInteger(i) && i >= 0 && i < options.length)
+    .sort((a, b) => a - b)
+    .map((i) => options[i].label);
+  const text = String(draft?.text ?? '').trim();
+  if (selected.length === 0 && !text) return null;
+  return text ? { selected, text } : { selected };
+}
+
+export function buildAnswers(questions, drafts) {
+  return questions.map((question, i) => answerFor(question, drafts?.[i]));
+}
+
+const DETAIL_GAP = '  ';
+const MIN_DETAIL_CELLS = 6;
+
+// Geometry of one question's option rows at `columns` frame width: one line
+// per option (its label, the recommended mark, then its one-sentence
+// tradeoff in the cells left, cut with an ellipsis).
+export function optionLayout(question, columns) {
+  const options = Array.isArray(question?.options) ? question.options : [];
+  const total = options.length + 1;
+  const indexCells = stringWidth(`${total}. `);
+  const markerCells = question?.multi_select ? 4 : 0; // "[x] "
+  const prefixCells = 2 + indexCells + markerCells; // "› " + "1. " + marker
+  const avail = Math.max(10, columns - CHROME_COLUMNS);
+  const labelCap = Math.max(4, avail - prefixCells);
+  const rows = options.map((option, i) => {
+    const suffix = question?.recommended === i ? RECOMMENDED_SUFFIX : '';
+    const label = truncatePanelText(String(option.label ?? ''), Math.max(1, labelCap - stringWidth(suffix)));
+    const left = labelCap - stringWidth(label + suffix) - DETAIL_GAP.length;
+    const text = String(option.description ?? '').trim();
+    const detail = text && left >= MIN_DETAIL_CELLS ? `${DETAIL_GAP}${truncatePanelText(text, left)}` : '';
+    return { label, suffix, detail };
+  });
+  return { rows, prefixCells, avail, indexCells };
+}
+
+export const MAX_ANSWER_CHARS = 4000;
+const MIN_OPTION_ROWS = 3;
+
+// Append `text` to `base`, never exceeding MAX_ANSWER_CHARS UTF-16 units (the
+// unit the runtime checks), and never splitting a character.
+export function appendCapped(base, text) {
+  let out = base;
+  for (const char of text) {
+    if (out.length + char.length > MAX_ANSWER_CHARS) break;
+    out += char;
+  }
+  return out;
+}
+
+export function questionLines(question, columns) {
+  const shown = `${question?.question ?? ''}${question?.multi_select ? MULTI_HINT : ''}`;
+  return wrapAnsi(shown, Math.max(1, columns - CHROME_COLUMNS), { trim: false, hard: true }).split('\n');
+}
+
+function ellipsize(line, width) {
+  return `${truncatePanelText(line, Math.max(1, width - 1)).replace(/…$/, '')}…`;
+}
+
+// Fit the panel into `rows` (Infinity = unbudgeted). Always keeps the question
+// text (capped, leaving MIN_OPTION_ROWS for options) and the highlighted
+// option; the rest scroll with ↑/↓ more indicators.
+export function planQuestionView(question, columns, rows, cursor) {
+  const layout = optionLayout(question, columns);
+  const n = layout.rows.length;
+  let qLines = questionLines(question, columns);
+  const optionBudget = rows - FIXED_ROWS;
+  const qCap = Number.isFinite(rows) ? Math.max(1, optionBudget - MIN_OPTION_ROWS) : Infinity;
+  if (qLines.length > qCap) {
+    qLines = qLines.slice(0, qCap);
+    qLines[qCap - 1] = ellipsize(qLines[qCap - 1], Math.max(1, columns - CHROME_COLUMNS));
+  }
+  const avail = Number.isFinite(rows) ? Math.max(1, rows - FIXED_ROWS - qLines.length) : Infinity;
+  const full = Array(n + 1).fill(1);
+  const total = n + 1;
+  let heights = full;
+  if (full.reduce((a, b) => a + b, 0) > avail) {
+    heights = full.map((h, i) => (i === cursor ? Math.min(h, Math.max(1, avail - 2)) : 1));
+  }
+  let start = Math.min(cursor, total - 1);
+  let end = start + 1;
+  let used = heights[start];
+  const fits = (s, e, sum) => sum + (s > 0 ? 1 : 0) + (e < total ? 1 : 0) <= avail;
+  if (!fits(start, end, used) && avail < Infinity) {
+    // highlighted option alone exceeds budget with indicators: shrink it.
+    heights = heights.map((h, i) => (i === cursor ? 1 : h));
+    used = 1;
+  }
+  for (let grew = true; grew; ) {
+    grew = false;
+    if (end < total && fits(start, end + 1, used + heights[end])) {
+      used += heights[end++];
+      grew = true;
+    }
+    if (start > 0 && fits(start - 1, end, used + heights[start - 1])) {
+      used += heights[--start];
+      grew = true;
+    }
+  }
+  const items = [];
+  for (let i = start; i < end; i++) items.push({ index: i, lines: heights[i] });
+  return { qLines, items, above: start, below: total - end };
+}
+
+function questionRows(question, columns) {
+  const optionRows = Array.isArray(question?.options) ? question.options.length : 0;
+  return FIXED_ROWS + questionLines(question, columns).length + optionRows + 1; // +1 custom-input row
+}
+
+// Reserved floating-panel rows: the tallest question, so switching questions
+// never resizes the panel.
+export function questionPanelRows(questions, columns) {
+  return Math.max(FIXED_ROWS + 3, ...questions.map((q) => questionRows(q, columns)));
+}
+
+export function initialCursor(question) {
+  const n = Array.isArray(question?.options) ? question.options.length : 0;
+  const r = question?.recommended;
+  return Number.isInteger(r) && r >= 0 && r < n ? r : 0;
+}
+
+export function questionHelp({ multi, typing, last, count, questionCount = 1 }) {
+  if (typing) return 'Enter Send · Esc Back to list';
+  // Several questions: the title row also holds the tabs, so keep help short.
+  const parts = questionCount > 1 ? [] : [`1–${count} Choose`, '↑/↓ Move'];
+  if (multi) parts.push('Space Toggle');
+  if (questionCount > 1) parts.push('←/→ Question');
+  parts.push(last ? 'Enter Send' : 'Enter Next', 'Esc Dismiss');
+  return parts.join(' · ');
+}

package/src/tui/components/status-line/local-line.mjs

@@ -4,7 +4,7 @@
  */
 import { rgbSgr } from '../../../runtime/shared/statusline/ansi.mjs';
 import { measuredContextUsage, contextMeasurementLabel } from '../../../runtime/shared/context-measurement.mjs';
-import { displayModelName, shortenModelName } from '../../../runtime/shared/model-display.mjs';
+import { displayModelName, effortDisplayLabel, shortenModelName } from '../../../runtime/shared/model-display.mjs';
 import { theme } from '../../theme.mjs';
 import { normalizeStatuslineAnsi } from '../../statusline-ansi-bridge.mjs';
 // Cache-only synchronous read (never touches fs on the render path), so the
@@ -160,6 +160,7 @@ export function localBootStatusLine(args = {}) {
     model = '',
     effort = '',
     fast = false,
+    ultra = false,
     stats = null,
     contextWindow = 0,
     displayContextWindow = 0,
@@ -168,7 +169,9 @@ export function localBootStatusLine(args = {}) {
   const raw = String(model || '').trim();
   const { STATUS, SUBTLE } = statusColors();
   const display = shortenModelName(displayModelName(raw, provider, ''), terminalColumns());
-  const flags = [effort ? String(effort).toUpperCase() : '', fast === true ? 'FAST' : ''].filter(Boolean);
+  let speedLabel = '';
+  if (fast === true) speedLabel = ultra === true ? 'Ultrafast' : 'Fast';
+  const flags = [effort ? effortDisplayLabel(effort) : '', speedLabel].filter(Boolean);
   const modelBits = [display, ...flags].join(` ${SUBTLE}·${RESET} `);
   const ctxPct = measuredContextUsage({
     stats,

package/src/tui/components/status-line/use-statusline-text.mjs

@@ -29,6 +29,7 @@ export function useStatusLineText({
   model,
   effort,
   fast,
+  ultra,
   cwd,
   stats,
   contextWindow,
@@ -52,6 +53,7 @@ export function useStatusLineText({
           model,
           effort,
           fast,
+          ultra,
           stats,
           contextWindow,
           displayContextWindow,
@@ -83,6 +85,7 @@ export function useStatusLineText({
     model,
     effort,
     fast,
+    ultra,
     cwd,
     stats,
     contextWindow,
@@ -180,7 +183,8 @@ export function useStatusLineText({
       prevImmediate.provider !== args.provider ||
       prevImmediate.model !== args.model ||
       prevImmediate.effort !== args.effort ||
-      prevImmediate.fast !== args.fast;
+      prevImmediate.fast !== args.fast ||
+      prevImmediate.ultra !== args.ultra;
     // A theme switch must re-tone the footer immediately: the stored `line`
     // holds already-normalized ANSI with the OLD palette, so re-running
     // normalizeStatusLine on it is a no-op. Force a fresh local rebuild (new
@@ -218,6 +222,7 @@ export function useStatusLineText({
       model: args.model,
       effort: args.effort,
       fast: args.fast,
+      ultra: args.ultra,
       contextWindow: args.contextWindow,
       displayContextWindow: args.displayContextWindow,
       rawContextWindow: args.rawContextWindow,
@@ -299,6 +304,7 @@ export function useStatusLineText({
     model,
     effort,
     fast,
+    ultra,
     cwd,
     statsSignature,
     contextWindow,