opencode-top 3.1.0 → 3.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencode-top",
-  "version": "3.1.0",
+  "version": "3.1.2",
   "description": "Monitor OpenCode AI coding sessions - Token usage, costs, and agent analytics",
   "type": "module",
   "bin": {

package/src/ui/App.tsx

@@ -29,6 +29,19 @@ export function App({ refreshInterval = 2000 }: AppProps) {
   const terminalHeight = stdout?.rows ?? 24;
   const terminalWidth = stdout?.columns ?? 80;
 
+  // Enter alternate screen buffer on mount — prevents Ink's clearTerminal flash.
+  // Ink triggers \x1b[2J\x1b[3J\x1b[H whenever outputHeight >= stdout.rows.
+  // Alt screen (\x1b[?1049h) moves rendering to a separate buffer so the main
+  // screen is never touched, eliminating the black flash entirely.
+  useEffect(() => {
+    stdout?.write("\x1b[?1049h"); // enter alt screen
+    stdout?.write("\x1b[?25l");   // hide cursor
+    return () => {
+      stdout?.write("\x1b[?25h"); // restore cursor
+      stdout?.write("\x1b[?1049l"); // leave alt screen
+    };
+  }, [stdout]);
+
   const [workflows, setWorkflows] = useState<Workflow[]>([]);
   const [screen, setScreen] = useState<ScreenId>("sessions");
   const [error, setError] = useState<string | null>(null);
@@ -108,7 +121,7 @@ export function App({ refreshInterval = 2000 }: AppProps) {
   const contentHeight = terminalHeight - 3;
 
   return (
-    <Box flexDirection="column" width={terminalWidth} height={terminalHeight}>
+    <Box flexDirection="column" width={terminalWidth} height={terminalHeight - 1}>
       <TabBar activeScreen={screen} lastRefresh={lastRefresh} />
       <Box width={terminalWidth} height={contentHeight}>
         {screen === "sessions" && (

package/src/ui/components/MessagesPanel.tsx

@@ -10,11 +10,11 @@ interface MessagesPanelProps {
 }
 
 type MsgLine =
-  | { kind: "header"; modelId: string; agent: string | null; duration: string; time: string }
-  | { kind: "tool"; callId: string; icon: string; iconColor: string; name: string; title: string; right: string; expanded: boolean }
-  | { kind: "tool-detail"; label: string; value: string; isSection: boolean }
-  | { kind: "text"; text: string }
-  | { kind: "reasoning"; text: string };
+  | { id: string; kind: "header"; modelId: string; agent: string | null; duration: string; time: string }
+  | { id: string; kind: "tool"; callId: string; icon: string; iconColor: string; name: string; title: string; right: string; expanded: boolean }
+  | { id: string; kind: "tool-detail"; label: string; value: string; isSection: boolean }
+  | { id: string; kind: "text"; text: string }
+  | { id: string; kind: "reasoning"; text: string };
 
 function buildLines(session: Session, contentWidth: number, expandedIds: Set<string>): MsgLine[] {
   const lines: MsgLine[] = [];
@@ -27,6 +27,7 @@ function buildLines(session: Session, contentWidth: number, expandedIds: Set<str
         : "";
 
     lines.push({
+      id: `h-${interaction.id}`,
       kind: "header",
       modelId: interaction.modelId,
       agent: interaction.agent ?? null,
@@ -45,6 +46,7 @@ function buildLines(session: Session, contentWidth: number, expandedIds: Set<str
         const expanded = expandedIds.has(p.callId);
 
         lines.push({
+          id: `t-${p.callId}`,
           kind: "tool",
           callId: p.callId,
           icon,
@@ -58,29 +60,32 @@ function buildLines(session: Session, contentWidth: number, expandedIds: Set<str
         if (expanded) {
           const inputKeys = Object.keys(p.input);
           if (inputKeys.length > 0) {
-            lines.push({ kind: "tool-detail", label: "input", value: "", isSection: true });
+            lines.push({ id: `td-${p.callId}-in`, kind: "tool-detail", label: "input", value: "", isSection: true });
             for (const key of inputKeys) {
               const val = formatParamValue(p.input[key], contentWidth - key.length - 6);
-              lines.push({ kind: "tool-detail", label: key, value: val, isSection: false });
+              lines.push({ id: `td-${p.callId}-in-${key}`, kind: "tool-detail", label: key, value: val, isSection: false });
             }
           }
           if (p.output?.trim()) {
-            lines.push({ kind: "tool-detail", label: "output", value: "", isSection: true });
+            lines.push({ id: `td-${p.callId}-out`, kind: "tool-detail", label: "output", value: "", isSection: true });
             const outLines = p.output.trim().split("\n").slice(0, 40);
+            let outIdx = 0;
             for (const ol of outLines) {
               for (const wrapped of wrapText(ol === "" ? " " : ol, contentWidth - 5)) {
-                lines.push({ kind: "tool-detail", label: "", value: wrapped, isSection: false });
+                lines.push({ id: `td-${p.callId}-out-${outIdx++}`, kind: "tool-detail", label: "", value: wrapped, isSection: false });
               }
             }
           }
         }
       } else if (part.type === "text" && part.text.trim()) {
+        let txtIdx = 0;
         for (const row of wrapText(part.text.trim(), contentWidth - 3)) {
-          lines.push({ kind: "text", text: row });
+          lines.push({ id: `tx-${interaction.id}-${txtIdx++}`, kind: "text", text: row });
         }
       } else if (part.type === "reasoning" && part.text.trim()) {
+        let rIdx = 0;
         for (const row of wrapText(part.text.trim(), contentWidth - 5)) {
-          lines.push({ kind: "reasoning", text: row });
+          lines.push({ id: `r-${interaction.id}-${rIdx++}`, kind: "reasoning", text: row });
         }
       }
     }
@@ -251,7 +256,7 @@ function MessagesPanelInner({ session, maxHeight, isActive }: MessagesPanelProps
         switch (line.kind) {
           case "header":
             return (
-              <Box key={absIdx} flexDirection="row" height={1}>
+              <Box key={line.id} flexDirection="row" height={1}>
                 <Text color={isCursor ? colors.accent : colors.textDim}>{isCursor ? "›" : " "}</Text>
                 <Text color={isCursor ? colors.accent : colors.purple} bold>◆ </Text>
                 <Text color={isCursor ? colors.accent : colors.info}>{truncate(line.modelId, 26)}</Text>
@@ -264,7 +269,7 @@ function MessagesPanelInner({ session, maxHeight, isActive }: MessagesPanelProps
 
           case "tool":
             return (
-              <Box key={absIdx} flexDirection="row" height={1} paddingLeft={1}>
+              <Box key={line.id} flexDirection="row" height={1} paddingLeft={1}>
                 <Text color={isCursor ? colors.accent : colors.textDim}>{isCursor ? "›" : " "}</Text>
                 <Text color={line.iconColor}>{line.icon} </Text>
                 <Text color={isCursor ? colors.accent : colors.text} bold={isCursor}>{line.name}</Text>
@@ -278,14 +283,14 @@ function MessagesPanelInner({ session, maxHeight, isActive }: MessagesPanelProps
           case "tool-detail":
             if (line.isSection) {
               return (
-                <Box key={absIdx} height={1} paddingLeft={3}>
+                <Box key={line.id} height={1} paddingLeft={3}>
                   <Text color={isCursor ? colors.accent : colors.textDim}>{isCursor ? "›" : " "}</Text>
                   <Text color={colors.purple}>── {line.label} </Text>
                 </Box>
               );
             }
             return (
-              <Box key={absIdx} height={1} paddingLeft={4}>
+              <Box key={line.id} height={1} paddingLeft={4}>
                 <Text color={isCursor ? colors.accent : colors.textDim}>{isCursor ? "›" : " "}</Text>
                 {line.label
                   ? <><Text color={colors.cyan}>{line.label}</Text><Text color={colors.textDim}>: </Text><Text color={isCursor ? colors.accent : colors.text}>{line.value}</Text></>
@@ -296,7 +301,7 @@ function MessagesPanelInner({ session, maxHeight, isActive }: MessagesPanelProps
 
           case "text":
             return (
-              <Box key={absIdx} flexDirection="row" height={1} paddingLeft={1}>
+              <Box key={line.id} flexDirection="row" height={1} paddingLeft={1}>
                 <Text color={isCursor ? colors.accent : colors.textDim}>{isCursor ? "›" : " "}</Text>
                 <Text color={isCursor ? colors.accent : colors.text}> {line.text}</Text>
               </Box>
@@ -304,7 +309,7 @@ function MessagesPanelInner({ session, maxHeight, isActive }: MessagesPanelProps
 
           case "reasoning":
             return (
-              <Box key={absIdx} flexDirection="row" height={1} paddingLeft={1}>
+              <Box key={line.id} flexDirection="row" height={1} paddingLeft={1}>
                 <Text color={isCursor ? colors.accent : colors.textDim}>{isCursor ? "›" : " "}</Text>
                 <Text color={isCursor ? colors.accent : colors.accentDim}> ⚡ {line.text}</Text>
               </Box>