flowmind 1.5.3 → 1.5.6

package/tui/app.jsx

@@ -1,23 +1,78 @@
 const React = require('react');
-const { Box, useApp, useInput } = require('ink');
+const { Box, Text, useApp, useInput } = require('ink');
 const Sidebar = require('./components/Sidebar.jsx');
 const ChatPanel = require('./components/ChatPanel.jsx');
 const StatusBar = require('./components/StatusBar.jsx');
 const { formatResultText } = require('./format-result');
+const { getTuiLayout, MIN_COLUMNS, MIN_ROWS } = require('./layout');
+
+class TuiErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { error: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+
+  componentDidCatch(error) {
+    if (this.props.onError) {
+      this.props.onError(error);
+    }
+  }
+
+  render() {
+    if (this.state.error) {
+      return React.createElement(
+        Box,
+        { flexDirection: 'column', borderStyle: 'single', borderColor: 'red', paddingX: 1, paddingY: 1 },
+        React.createElement(Text, { color: 'red', bold: true }, 'TUI render error'),
+        React.createElement(Text, { color: 'gray' }, this.state.error.message || 'Unknown render failure'),
+        React.createElement(Text, { color: 'gray' }, 'Resize the terminal or restart FlowMind.')
+      );
+    }
+
+    return this.props.children;
+  }
+}
 
 function App({ flowmind, asciiMode = false }) {
   const MAX_MESSAGES = 60;
   const [messages, setMessages] = React.useState([]);
   const [isProcessing, setIsProcessing] = React.useState(false);
   const [focusPanel, setFocusPanel] = React.useState('chat'); // 'chat' | 'sidebar'
+  const [terminalSize, setTerminalSize] = React.useState(() => ({
+    columns: Number(process.stdout?.columns) || 0,
+    rows: Number(process.stdout?.rows) || 0
+  }));
   const mountedRef = React.useRef(true);
   const messageIdRef = React.useRef(0);
+  const commandIdRef = React.useRef(0);
+  const activeCommandRef = React.useRef(false);
   const { exit } = useApp();
 
   React.useEffect(() => {
     return () => { mountedRef.current = false; };
   }, []);
 
+  React.useEffect(() => {
+    const updateSize = () => {
+      if (!mountedRef.current) return;
+      setTerminalSize({
+        columns: Number(process.stdout?.columns) || 0,
+        rows: Number(process.stdout?.rows) || 0
+      });
+    };
+
+    updateSize();
+    process.stdout?.on?.('resize', updateSize);
+
+    return () => {
+      process.stdout?.removeListener?.('resize', updateSize);
+    };
+  }, []);
+
   const appendMessage = React.useCallback((role, text, metadata = {}) => {
     const id = ++messageIdRef.current;
     setMessages(prev => [...prev, { id, role, text, metadata }].slice(-MAX_MESSAGES));
@@ -32,13 +87,15 @@ function App({ flowmind, asciiMode = false }) {
   });
 
   const handleCommand = React.useCallback(async (input) => {
-    if (!mountedRef.current) return;
+    if (!mountedRef.current || activeCommandRef.current) return;
+    activeCommandRef.current = true;
+    const commandId = ++commandIdRef.current;
     appendMessage('user', input);
     setIsProcessing(true);
 
     try {
       const result = await flowmind.process(input);
-      if (!mountedRef.current) return;
+      if (!mountedRef.current || commandId !== commandIdRef.current) return;
 
       appendMessage('flowmind', formatResultText(result), {
         type: result.type,
@@ -47,9 +104,14 @@ function App({ flowmind, asciiMode = false }) {
         scene: result.metadata?.sceneMatch?.scene?.name
       });
     } catch (e) {
-      if (mountedRef.current) appendMessage('flowmind', 'Error: ' + e.message, { type: 'error' });
+      if (mountedRef.current && commandId === commandIdRef.current) {
+        appendMessage('flowmind', 'Error: ' + e.message, { type: 'error' });
+      }
     } finally {
-      if (mountedRef.current) setIsProcessing(false);
+      if (mountedRef.current && commandId === commandIdRef.current) {
+        setIsProcessing(false);
+      }
+      activeCommandRef.current = false;
     }
   }, [appendMessage, flowmind]);
 
@@ -72,20 +134,35 @@ function App({ flowmind, asciiMode = false }) {
     }
   }, [appendMessage]);
 
+  const layout = getTuiLayout(terminalSize.columns, terminalSize.rows);
+
+  if (layout.tooSmall) {
+    return (
+      React.createElement(Box, { flexDirection: 'column', borderStyle: 'single', borderColor: 'red', paddingX: 1, paddingY: 1 },
+        React.createElement(Text, { bold: true, color: 'red' }, 'Terminal too small'),
+        React.createElement(Text, { color: 'gray' }, `Need at least ${MIN_COLUMNS}x${MIN_ROWS}. Current size: ${layout.columns}x${layout.rows}.`),
+        React.createElement(Text, { color: 'gray' }, 'Resize the terminal to keep the TUI stable.')
+      )
+    );
+  }
+
   return (
-    React.createElement(Box, { flexDirection: 'column', width: '100%', height: '100%' },
+      React.createElement(TuiErrorBoundary, null,
+      React.createElement(Box, { flexDirection: 'column', width: '100%', height: '100%' },
       React.createElement(Box, { flexDirection: 'row', flexGrow: 1 },
-        React.createElement(Sidebar, { flowmind: flowmind, width: 32, onSkillSelect: handleSkillSelect, focused: focusPanel === 'sidebar', asciiMode: asciiMode }),
+        React.createElement(Sidebar, { flowmind: flowmind, width: layout.sidebarWidth, onSkillSelect: handleSkillSelect, focused: focusPanel === 'sidebar', asciiMode: asciiMode }),
         React.createElement(ChatPanel, {
           messages,
           onSubmit: handleCommand,
           isProcessing: isProcessing,
           onExit: exit,
           focused: focusPanel === 'chat',
-          asciiMode: asciiMode
+          asciiMode: asciiMode,
+          width: layout.chatWidth
         })
       ),
-      React.createElement(StatusBar, { flowmind: flowmind, focusPanel: focusPanel, asciiMode: asciiMode })
+      React.createElement(StatusBar, { flowmind: flowmind, focusPanel: focusPanel, asciiMode: asciiMode, width: layout.columns })
+      )
     )
   );
 }

package/tui/components/ChatPanel.jsx

@@ -4,11 +4,12 @@ const TextInput = require('ink-text-input').default || require('ink-text-input')
 const Spinner = require('ink-spinner').default || require('ink-spinner');
 const { getBorderStyle, isExitCommand } = require('../ui');
 
-function ChatPanel({ messages, onSubmit, isProcessing, onExit, focused, asciiMode = false }) {
+function ChatPanel({ messages, onSubmit, isProcessing, onExit, focused, asciiMode = false, width = 0 }) {
   const [input, setInput] = React.useState('');
   const [cmdHistory, setCmdHistory] = React.useState([]);
   const [historyIndex, setHistoryIndex] = React.useState(-1);
   const [savedInput, setSavedInput] = React.useState('');
+  const isCompact = width < 60;
 
   // Handle Up/Down arrow for command history (only when focused)
   useInput((ch, key) => {
@@ -36,7 +37,7 @@ function ChatPanel({ messages, onSubmit, isProcessing, onExit, focused, asciiMod
 
   const handleSubmit = (value) => {
     const normalized = value.trim();
-    if (!normalized) return;
+    if (!normalized || isProcessing) return;
     // Add to command history (deduplicate consecutive)
     if (cmdHistory.length === 0 || cmdHistory[cmdHistory.length - 1] !== normalized) {
       setCmdHistory(prev => [...prev, normalized]);
@@ -51,7 +52,7 @@ function ChatPanel({ messages, onSubmit, isProcessing, onExit, focused, asciiMod
     onSubmit(normalized);
   };
 
-  const displayMessages = messages.slice(-18);
+  const displayMessages = messages.slice(-(isCompact ? 8 : 18));
 
   const renderMeta = (message) => {
     const metaParts = [];
@@ -89,17 +90,17 @@ function ChatPanel({ messages, onSubmit, isProcessing, onExit, focused, asciiMod
   return (
     React.createElement(Box, { flexDirection: 'column', flexGrow: 1, borderStyle: getBorderStyle(asciiMode), borderColor: focused ? 'green' : 'gray', paddingX: 1 },
       React.createElement(Text, { bold: true, color: focused ? 'green' : 'gray' }, focused ? 'FlowMind Chat [Focused]' : 'FlowMind Chat'),
-      React.createElement(Text, { color: 'gray' }, 'Single-pane conversation. Output stays in the same view.'),
+      React.createElement(Text, { color: 'gray' }, isCompact ? 'Compact chat mode.' : 'Single-pane conversation. Output stays in the same view.'),
       React.createElement(Box, { flexDirection: 'column', flexGrow: 1, marginTop: 1, overflow: 'hidden' },
         displayMessages.length === 0 && React.createElement(Box, { flexDirection: 'column' },
           React.createElement(Text, { color: 'gray' }, 'Describe what you want FlowMind to do.'),
-          React.createElement(Text, { color: 'gray' }, 'The dialog history stays in this panel, with the input fixed at the bottom.'),
+          !isCompact && React.createElement(Text, { color: 'gray' }, 'The dialog history stays in this panel, with the input fixed at the bottom.'),
           React.createElement(Text, { color: 'gray' }, 'Type `exit` or `/exit` to quit, or press Ctrl+C.')
         ),
         displayMessages.map(renderMessage)
       ),
       React.createElement(Box, { flexDirection: 'column', borderStyle: getBorderStyle(asciiMode), borderColor: focused ? 'green' : 'gray', paddingX: 1, marginTop: 1 },
-        React.createElement(Text, { color: 'gray' }, 'Enter send  Up/Down history  Tab sidebar  exit /exit :q  Ctrl+C'),
+        React.createElement(Text, { color: 'gray' }, isCompact ? 'Enter send | Tab switch | Ctrl+C' : 'Enter send  Up/Down history  Tab sidebar  exit /exit :q  Ctrl+C'),
         isProcessing
           ? React.createElement(Text, { color: 'yellow' },
               React.createElement(Spinner, { type: 'dots' }),
@@ -113,7 +114,9 @@ function ChatPanel({ messages, onSubmit, isProcessing, onExit, focused, asciiMod
                 onSubmit: handleSubmit,
                 focus: focused,
                 showCursor: focused,
-                placeholder: focused ? 'Ask FlowMind to do something...' : 'Press Tab to focus input'
+                placeholder: focused
+                  ? (isCompact ? 'Ask FlowMind...' : 'Ask FlowMind to do something...')
+                  : 'Press Tab to focus input'
               })
             )
       )

package/tui/components/DragonTotem.jsx

@@ -2,7 +2,7 @@ const React = require('react');
 const { Box, Text } = require('ink');
 const { LEVEL_COLORS, LEVEL_NAMES, LEVEL_STATES, getDragonArt } = require('../ui');
 
-function DragonTotem({ honorData, compact, asciiMode = false }) {
+function DragonTotem({ honorData, compact, asciiMode = false, width = 0 }) {
   const points = honorData?.points || 0;
   const level = honorData?.level || 0;
   const art = getDragonArt(level, { asciiMode, compact });
@@ -12,6 +12,17 @@ function DragonTotem({ honorData, compact, asciiMode = false }) {
   const nextLevelPoints = [1, 10, 30, 60, 100];
   const nextPoints = nextLevelPoints[level] || null;
   const pointsToNext = nextPoints !== null ? nextPoints - points : 0;
+  const superCompact = width > 0 && width < 26;
+
+  if (superCompact) {
+    return (
+      React.createElement(Box, { flexDirection: 'column', paddingX: 1 },
+        React.createElement(Text, { bold: true, color: 'cyan' }, 'Dragon'),
+        React.createElement(Text, { color: color }, 'Lv' + level + ' ' + levelName),
+        React.createElement(Text, { color: 'gray' }, points + ' pts')
+      )
+    );
+  }
 
   return (
     React.createElement(Box, { flexDirection: 'column', paddingX: 1 },

package/tui/components/Sidebar.jsx

@@ -7,6 +7,7 @@ function Sidebar({ flowmind, width, onSkillSelect, focused, asciiMode = false })
   const [selectedIndex, setSelectedIndex] = React.useState(0);
   const [skills, setSkills] = React.useState([]);
   const [honorData, setHonorData] = React.useState({ points: 0, level: 0, stats: {} });
+  const isCompact = width < 30;
 
   React.useEffect(() => {
     if (flowmind) {
@@ -24,27 +25,38 @@ function Sidebar({ flowmind, width, onSkillSelect, focused, asciiMode = false })
     }
   }, [flowmind]);
 
+  React.useEffect(() => {
+    if (skills.length === 0) {
+      setSelectedIndex(0);
+      return;
+    }
+    if (selectedIndex >= skills.length) {
+      setSelectedIndex(skills.length - 1);
+    }
+  }, [selectedIndex, skills.length]);
+
   useInput((input, key) => {
     if (!focused) return; // Ignore input when sidebar is not focused
+    if (skills.length === 0) return;
     if (key.upArrow) setSelectedIndex(prev => Math.max(0, prev - 1));
     else if (key.downArrow) setSelectedIndex(prev => Math.min(skills.length - 1, prev + 1));
     else if (key.return && skills[selectedIndex] && onSkillSelect) onSkillSelect(skills[selectedIndex]);
   });
 
-  const barWidth = Math.max(10, width - 4);
+  const barWidth = Math.max(8, width - 4);
   const progress = honorData.points > 0 ? Math.min(1, honorData.points / 100) : 0;
   const progressBar = getProgressBar(barWidth, progress, asciiMode);
 
   return (
     React.createElement(Box, { flexDirection: 'column', width: width, borderStyle: getBorderStyle(asciiMode), borderColor: focused ? 'cyan' : 'gray', paddingX: 1 },
       React.createElement(Text, { color: focused ? 'cyan' : 'gray' }, focused ? 'Sidebar [Focused]' : 'Sidebar'),
-      React.createElement(DragonTotem, { honorData: honorData, compact: true, asciiMode: asciiMode }),
+      !isCompact && React.createElement(DragonTotem, { honorData: honorData, compact: true, asciiMode: asciiMode, width: width }),
       React.createElement(Box, { flexDirection: 'column', marginTop: 1 },
         React.createElement(Text, { bold: true, color: 'cyan' }, 'Progress'),
         React.createElement(Text, { color: 'green' }, progressBar),
         React.createElement(Text, { color: 'gray' }, honorData.points + '/100 pts')
       ),
-      React.createElement(Box, { flexDirection: 'column', marginTop: 1 },
+      !isCompact && React.createElement(Box, { flexDirection: 'column', marginTop: 1 },
         React.createElement(Text, { bold: true, color: 'cyan' }, 'Skills (' + skills.length + ')'),
         React.createElement(Box, { flexDirection: 'column', marginTop: 1 },
           skills.length === 0 && React.createElement(Text, { color: 'gray' }, 'No skills loaded'),
@@ -60,14 +72,14 @@ function Sidebar({ flowmind, width, onSkillSelect, focused, asciiMode = false })
         )
       ),
       React.createElement(Box, { flexDirection: 'column', marginTop: 1 },
-        React.createElement(Text, { color: 'gray' }, 'Tab: switch focus'),
-        React.createElement(Text, { color: 'gray' }, 'Enter: inspect in chat')
+        React.createElement(Text, { color: 'gray' }, isCompact ? 'Tab: switch focus' : 'Tab: switch focus'),
+        !isCompact && React.createElement(Text, { color: 'gray' }, 'Enter: inspect in chat')
       ),
       React.createElement(Box, { flexDirection: 'column', marginTop: 1 },
         React.createElement(Text, { bold: true, color: 'cyan' }, 'Stats'),
         React.createElement(Text, { color: 'gray' }, 'Skills used: ' + (honorData.stats?.skillUseCount || 0)),
-        React.createElement(Text, { color: 'gray' }, 'Learnings: ' + (honorData.stats?.learningCount || 0)),
-        React.createElement(Text, { color: 'gray' }, 'New skills: ' + (honorData.stats?.newSkillCount || 0))
+        !isCompact && React.createElement(Text, { color: 'gray' }, 'Learnings: ' + (honorData.stats?.learningCount || 0)),
+        !isCompact && React.createElement(Text, { color: 'gray' }, 'New skills: ' + (honorData.stats?.newSkillCount || 0))
       )
     )
   );

package/tui/components/StatusBar.jsx

@@ -2,10 +2,11 @@ const React = require('react');
 const { Box, Text } = require('ink');
 const { LEVEL_NAMES, getBorderStyle, getStatusDot } = require('../ui');
 
-function StatusBar({ flowmind, focusPanel, asciiMode = false }) {
+function StatusBar({ flowmind, focusPanel, asciiMode = false, width = 0 }) {
   const [aiStatus, setAiStatus] = React.useState(null);
   const [componentStatus, setComponentStatus] = React.useState(null);
   const [honorData, setHonorData] = React.useState(null);
+  const isCompact = width < 100;
 
   React.useEffect(() => {
     if (flowmind) {
@@ -24,6 +25,32 @@ function StatusBar({ flowmind, focusPanel, asciiMode = false }) {
   const level = honorData?.level || 0;
   const points = honorData?.points || 0;
 
+  if (isCompact) {
+    return (
+      React.createElement(Box, { flexDirection: 'column', borderStyle: getBorderStyle(asciiMode), borderColor: 'gray', paddingX: 1 },
+        React.createElement(Text, null,
+          React.createElement(Text, { color: 'gray' }, 'AI: '),
+          React.createElement(Text, { color: aiOk ? 'green' : 'red' }, aiName),
+          React.createElement(Text, { color: aiOk ? 'green' : 'red' }, getStatusDot(aiOk, asciiMode))
+        ),
+        React.createElement(Text, null,
+          React.createElement(Text, { color: 'gray' }, 'Components: '),
+          React.createElement(Text, { color: 'white' }, activeCount + '/' + componentCount),
+          React.createElement(Text, { color: 'green' }, ' active')
+        ),
+        React.createElement(Text, null,
+          React.createElement(Text, { color: 'gray' }, 'Honor: '),
+          React.createElement(Text, { color: 'yellow' }, LEVEL_NAMES[level]),
+          React.createElement(Text, { color: 'gray' }, ' (' + points + ' pts)')
+        ),
+        React.createElement(Text, null,
+          React.createElement(Text, { color: 'gray' }, 'Focus: '),
+          React.createElement(Text, { color: focusPanel === 'chat' ? 'green' : 'cyan' }, focusPanel || 'chat')
+        )
+      )
+    );
+  }
+
   return (
     React.createElement(Box, { borderStyle: getBorderStyle(asciiMode), borderColor: 'gray', paddingX: 1, justifyContent: 'space-between' },
       React.createElement(Text, null,

package/tui/format-result.js

@@ -176,6 +176,10 @@ function formatResultText(result) {
     return payload === undefined ? '' : formatScalar(payload);
   }
 
+  if (getSkillName(payload) === 'log-audit') {
+    return formatLogAuditResult(payload);
+  }
+
   const message = payload.message;
   const details = pruneDisplayValue(payload.data);
   const detailLines = renderValueLines(details);
@@ -195,6 +199,62 @@ function formatResultText(result) {
   return truncateRenderedText(JSON.stringify(payload, null, 2));
 }
 
+function getSkillName(payload) {
+  return payload?.skill || payload?.data?.skill || null;
+}
+
+function formatLogAuditResult(payload) {
+  const data = isPlainObject(payload.data) ? payload.data : {};
+  const execution = isPlainObject(data.execution) ? data.execution : {};
+  const rawSummary = isPlainObject(execution.rawSummary) ? execution.rawSummary : null;
+  const executionDisplay = rawSummary
+    ? Object.fromEntries(Object.entries(execution).filter(([key]) => key !== 'rawSummary'))
+    : execution;
+
+  const sections = [];
+  if (payload.message) {
+    sections.push(payload.message);
+  }
+
+  if (data.noRecords === true) {
+    sections.push('狀態：未命中日誌');
+  }
+
+  if (isPlainObject(data.queryParams)) {
+    const queryLines = renderValueLines(data.queryParams);
+    if (queryLines.length > 0) {
+      sections.push(['查詢條件', ...queryLines].join('\n'));
+    }
+  }
+
+  if (isPlainObject(executionDisplay) && Object.keys(executionDisplay).length > 0) {
+    const executionLines = renderValueLines(executionDisplay);
+    if (executionLines.length > 0) {
+      sections.push(['執行結果', ...executionLines].join('\n'));
+    }
+  }
+
+  if (rawSummary) {
+    const rawLines = renderValueLines(rawSummary);
+    if (rawLines.length > 0) {
+      sections.push(['原始返回', ...rawLines].join('\n'));
+    }
+  }
+
+  if (sections.length > 0) {
+    return sections.join('\n\n');
+  }
+
+  const details = pruneDisplayValue(payload.data);
+  const detailLines = renderValueLines(details);
+
+  if (detailLines.length > 0) {
+    return truncateRenderedText(detailLines.join('\n'));
+  }
+
+  return truncateRenderedText(JSON.stringify(payload, null, 2));
+}
+
 module.exports = {
   formatResultText,
   pruneDisplayValue,

package/tui/layout.js

@@ -0,0 +1,60 @@
+const MIN_COLUMNS = 88;
+const MIN_ROWS = 20;
+const DEFAULT_SIDEBAR_WIDTH = 32;
+const MIN_SIDEBAR_WIDTH = 24;
+const MAX_SIDEBAR_WIDTH = 40;
+const MIN_CHAT_WIDTH = 28;
+
+function normalizeDimension(value) {
+  const numeric = Number(value);
+  if (!Number.isFinite(numeric) || numeric < 0) {
+    return 0;
+  }
+  return Math.floor(numeric);
+}
+
+function getTuiLayout(columns, rows) {
+  const safeColumns = normalizeDimension(columns);
+  const safeRows = normalizeDimension(rows);
+  const tooSmall = safeColumns < MIN_COLUMNS || safeRows < MIN_ROWS;
+
+  if (tooSmall) {
+    return {
+      columns: safeColumns,
+      rows: safeRows,
+      tooSmall: true,
+      sidebarWidth: Math.min(DEFAULT_SIDEBAR_WIDTH, safeColumns),
+      chatWidth: Math.max(0, safeColumns - DEFAULT_SIDEBAR_WIDTH - 2)
+    };
+  }
+
+  const sidebarWidth = clamp(
+    Math.round(safeColumns * 0.28),
+    MIN_SIDEBAR_WIDTH,
+    Math.min(MAX_SIDEBAR_WIDTH, Math.max(MIN_SIDEBAR_WIDTH, safeColumns - MIN_CHAT_WIDTH - 2))
+  );
+  const chatWidth = Math.max(MIN_CHAT_WIDTH, safeColumns - sidebarWidth - 2);
+
+  return {
+    columns: safeColumns,
+    rows: safeRows,
+    tooSmall: false,
+    sidebarWidth,
+    chatWidth
+  };
+}
+
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+
+module.exports = {
+  DEFAULT_SIDEBAR_WIDTH,
+  MAX_SIDEBAR_WIDTH,
+  MIN_CHAT_WIDTH,
+  MIN_COLUMNS,
+  MIN_ROWS,
+  MIN_SIDEBAR_WIDTH,
+  getTuiLayout,
+  normalizeDimension
+};