opencode-top 3.0.0 → 3.1.1

package/package.json

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

package/src/ui/App.tsx

@@ -108,7 +108,7 @@ export function App({ refreshInterval = 2000 }: AppProps) {
   const contentHeight = terminalHeight - 3;
 
   return (
-    <Box flexDirection="column" width={terminalWidth}>
+    <Box flexDirection="column" width={terminalWidth} height={terminalHeight}>
       <TabBar activeScreen={screen} lastRefresh={lastRefresh} />
       <Box width={terminalWidth} height={contentHeight}>
         {screen === "sessions" && (

package/src/ui/components/AgentTree.tsx

@@ -30,14 +30,17 @@ function AgentTreeInner({ workflows, selectedId, flatNodes, maxHeight = 20 }: Ag
   const visibleCount = Math.max(1, maxHeight - headerHeight);
   const selectedIndex = flatNodes.findIndex((n) => n.id === selectedId);
 
+  // Keep selected item visible with some context above
   let startIndex = 0;
-  if (selectedIndex >= visibleCount - 1) {
-    startIndex = Math.max(0, selectedIndex - visibleCount + 2);
+  if (selectedIndex >= 0) {
+    // Try to show 2 items above the selected one
+    const ideal = selectedIndex - 2;
+    startIndex = Math.max(0, Math.min(ideal, flatNodes.length - visibleCount));
   }
   const visibleNodes = flatNodes.slice(startIndex, startIndex + visibleCount);
 
   return (
-    <Box flexDirection="column" paddingX={1}>
+    <Box flexDirection="column" paddingX={1} height={maxHeight} overflow="hidden">
       <Box marginBottom={1} flexDirection="row">
         <Text color={colors.accent} bold>Sessions</Text>
         <Box flexGrow={1} />

package/src/ui/components/DetailsPanel.tsx

@@ -14,6 +14,7 @@ import { AgentChainGraph } from "./AgentChainGraph";
 
 interface DetailsPanelProps {
   workflow: Workflow | null;
+  height?: number;
 }
 
 function StatRow({
@@ -73,7 +74,7 @@ function formatTokens(n: number): string {
   return n.toString();
 }
 
-function DetailsPanelInner({ workflow }: DetailsPanelProps) {
+function DetailsPanelInner({ workflow, height }: DetailsPanelProps) {
   const data = useMemo(() => {
     if (!workflow) return null;
 
@@ -121,14 +122,14 @@ function DetailsPanelInner({ workflow }: DetailsPanelProps) {
 
   if (!data) {
     return (
-      <Box flexDirection="column" paddingX={1}>
+      <Box flexDirection="column" paddingX={1} height={height}>
         <Text color={colors.textDim}>Select a session</Text>
       </Box>
     );
   }
 
   return (
-    <Box flexDirection="column" paddingX={1}>
+    <Box flexDirection="column" paddingX={1} height={height} overflow="hidden">
       <Box marginBottom={1}>
         <Text color={colors.accent} bold>
           Details

package/src/ui/components/MessagesPanel.tsx

@@ -1,59 +1,111 @@
-import React, { useMemo, memo } from "react";
-import { Box, Text } from "ink";
+import React, { useMemo, memo, useEffect, useState } from "react";
+import { Box, Text, useInput } from "ink";
 import { colors } from "../theme";
 import type { Session, Interaction, MessagePart } from "../../core/types";
 
 interface MessagesPanelProps {
   session: Session | null;
-  scrollOffset: number;
-  onScrollOffsetChange: (offset: number) => void;
   maxHeight: number;
+  isActive: boolean;
 }
 
 type MsgLine =
-  | { kind: "interaction-header"; interaction: Interaction }
-  | { kind: "tool-call"; part: MessagePart & { type: "tool" } }
-  | { kind: "text"; text: string }
-  | { kind: "reasoning"; text: string }
-  | { kind: "spacer" };
+  | { 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): MsgLine[] {
+function buildLines(session: Session, contentWidth: number, expandedIds: Set<string>): MsgLine[] {
   const lines: MsgLine[] = [];
   for (const interaction of session.interactions) {
     if (interaction.role !== "assistant") continue;
-    lines.push({ kind: "interaction-header", interaction });
+
+    const dur =
+      interaction.time.completed && interaction.time.created
+        ? formatDuration(interaction.time.completed - interaction.time.created)
+        : "";
+
+    lines.push({
+      id: `h-${interaction.id}`,
+      kind: "header",
+      modelId: interaction.modelId,
+      agent: interaction.agent ?? null,
+      duration: dur,
+      time: formatTime(interaction.time.created),
+    });
+
     for (const part of interaction.parts) {
       if (part.type === "tool") {
-        lines.push({ kind: "tool-call", part: part as MessagePart & { type: "tool" } });
+        const p = part as MessagePart & { type: "tool" };
+        const icon = p.status === "completed" ? "✓" : p.status === "error" ? "✗" : "◌";
+        const iconColor =
+          p.status === "completed" ? colors.success : p.status === "error" ? colors.error : colors.warning;
+        const dur2 = p.timeEnd > 0 && p.timeStart > 0 ? formatDuration(p.timeEnd - p.timeStart) : "";
+        const exitStr = p.exitCode !== null && p.exitCode !== 0 ? `exit:${p.exitCode} ` : "";
+        const expanded = expandedIds.has(p.callId);
+
+        lines.push({
+          id: `t-${p.callId}`,
+          kind: "tool",
+          callId: p.callId,
+          icon,
+          iconColor,
+          name: truncate(p.toolName, 18),
+          title: p.title ? truncate(p.title, 28) : "",
+          right: exitStr + dur2,
+          expanded,
+        });
+
+        if (expanded) {
+          const inputKeys = Object.keys(p.input);
+          if (inputKeys.length > 0) {
+            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({ id: `td-${p.callId}-in-${key}`, kind: "tool-detail", label: key, value: val, isSection: false });
+            }
+          }
+          if (p.output?.trim()) {
+            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({ id: `td-${p.callId}-out-${outIdx++}`, kind: "tool-detail", label: "", value: wrapped, isSection: false });
+              }
+            }
+          }
+        }
       } else if (part.type === "text" && part.text.trim()) {
-        // Split long text into display lines of ~wrap length
-        const wrapped = wrapText(part.text.trim(), 200);
-        for (const line of wrapped) {
-          lines.push({ kind: "text", text: line });
+        let txtIdx = 0;
+        for (const row of wrapText(part.text.trim(), contentWidth - 3)) {
+          lines.push({ id: `tx-${interaction.id}-${txtIdx++}`, kind: "text", text: row });
         }
       } else if (part.type === "reasoning" && part.text.trim()) {
-        const wrapped = wrapText(part.text.trim(), 200);
-        for (const line of wrapped) {
-          lines.push({ kind: "reasoning", text: line });
+        let rIdx = 0;
+        for (const row of wrapText(part.text.trim(), contentWidth - 5)) {
+          lines.push({ id: `r-${interaction.id}-${rIdx++}`, kind: "reasoning", text: row });
         }
       }
     }
-    lines.push({ kind: "spacer" });
   }
   return lines;
 }
 
+function formatParamValue(val: unknown, maxLen: number): string {
+  if (val === null || val === undefined) return "null";
+  if (typeof val === "string") return truncate(val.split("\n")[0], Math.max(20, maxLen));
+  if (typeof val === "number" || typeof val === "boolean") return String(val);
+  try { return truncate(JSON.stringify(val), Math.max(20, maxLen)); }
+  catch { return String(val); }
+}
+
 function wrapText(text: string, maxLen: number): string[] {
-  const rawLines = text.split("\n");
   const out: string[] = [];
-  for (const raw of rawLines) {
-    if (raw.length <= maxLen) {
-      out.push(raw);
-    } else {
-      for (let i = 0; i < raw.length; i += maxLen) {
-        out.push(raw.slice(i, i + maxLen));
-      }
-    }
+  for (const raw of text.split("\n")) {
+    if (raw.length <= maxLen) { out.push(raw); }
+    else { for (let i = 0; i < raw.length; i += maxLen) out.push(raw.slice(i, i + maxLen)); }
   }
   return out;
 }
@@ -69,87 +121,104 @@ function formatDuration(ms: number): string {
   return `${(ms / 1000).toFixed(1)}s`;
 }
 
-function renderLine(line: MsgLine, idx: number): React.ReactElement {
-  switch (line.kind) {
-    case "interaction-header": {
-      const { interaction: i } = line;
-      const dur =
-        i.time.completed && i.time.created
-          ? i.time.completed - i.time.created
-          : 0;
-      return (
-        <Box key={idx} flexDirection="row" marginTop={1}>
-          <Text color={colors.purple} bold>◆ </Text>
-          <Text color={colors.info}>{truncate(i.modelId, 28)}</Text>
-          {i.agent && <Text color={colors.cyan}> [{i.agent}]</Text>}
-          <Box flexGrow={1} />
-          {dur > 0 && <Text color={colors.textDim}>{formatDuration(dur)} </Text>}
-          <Text color={colors.textDim}>{formatTime(i.time.created)}</Text>
-        </Box>
-      );
-    }
+function truncate(s: string, max: number): string {
+  if (!s || s.length <= max) return s;
+  return s.slice(0, max - 1) + "…";
+}
 
-    case "tool-call": {
-      const p = line.part;
-      const statusIcon = p.status === "completed" ? "✓" : p.status === "error" ? "✗" : "◌";
-      const statusColor =
-        p.status === "completed" ? colors.success : p.status === "error" ? colors.error : colors.warning;
-      const dur = p.timeEnd > 0 && p.timeStart > 0 ? p.timeEnd - p.timeStart : 0;
-      const exitStr = p.exitCode !== null && p.exitCode !== 0 ? ` exit:${p.exitCode}` : "";
-      return (
-        <Box key={idx} flexDirection="column" paddingLeft={2}>
-          <Box flexDirection="row">
-            <Text color={statusColor}>{statusIcon} </Text>
-            <Text color={colors.text} bold>{truncate(p.toolName, 20)}</Text>
-            {p.title && <Text color={colors.textDim}> {truncate(p.title, 30)}</Text>}
-            <Box flexGrow={1} />
-            {exitStr && <Text color={colors.error}>{exitStr} </Text>}
-            {dur > 0 && <Text color={colors.textDim}>{formatDuration(dur)}</Text>}
-          </Box>
-          {/* Show output preview for errors or short outputs */}
-          {(p.status === "error" || (p.output && p.output.length < 200 && p.output.trim())) && (
-            <Box paddingLeft={2}>
-              <Text color={p.status === "error" ? colors.error : colors.textDim}>
-                {truncate(p.output.trim(), 120)}
-              </Text>
-            </Box>
-          )}
-        </Box>
-      );
-    }
+function MessagesPanelInner({ session, maxHeight, isActive }: MessagesPanelProps) {
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
+  const [scrollOffset, setScrollOffset] = useState(0);
+  const [cursor, setCursor] = useState(0);
 
-    case "text":
-      return (
-        <Box key={idx} paddingLeft={2}>
-          <Text color={colors.text}>{line.text}</Text>
-        </Box>
-      );
-
-    case "reasoning":
-      return (
-        <Box key={idx} paddingLeft={2}>
-          <Text color={colors.accentDim}>⚡ {line.text}</Text>
-        </Box>
-      );
-
-    case "spacer":
-      return <Box key={idx} />;
-  }
-}
+  // Reset all state when session changes
+  useEffect(() => {
+    setExpandedIds(new Set());
+    setScrollOffset(0);
+    setCursor(0);
+  }, [session?.id]);
+
+  const contentWidth = 80;
+  const viewHeight = maxHeight - 1; // minus the counter row
+
+  const allLines = useMemo(
+    () => (session ? buildLines(session, contentWidth, expandedIds) : []),
+    [session, expandedIds]
+  );
+
+  const maxOffset = Math.max(0, allLines.length - viewHeight);
+
+  // Keep cursor in view: scroll to follow cursor
+  const clampedCursor = Math.min(cursor, Math.max(0, allLines.length - 1));
+  const clampedOffset = Math.max(
+    0,
+    Math.min(
+      scrollOffset,
+      Math.min(maxOffset, Math.max(scrollOffset, clampedCursor - viewHeight + 1))
+    )
+  );
 
-function MessagesPanelInner({
-  session,
-  scrollOffset,
-  maxHeight,
-}: MessagesPanelProps) {
-  const allLines = useMemo(() => {
-    if (!session) return [];
-    return buildLines(session);
-  }, [session]);
+  useInput((input, key) => {
+    if (key.downArrow || input === "j") {
+      setCursor((c) => Math.min(allLines.length - 1, c + 1));
+      setScrollOffset((o) => {
+        const newCursor = Math.min(allLines.length - 1, clampedCursor + 1);
+        // Scroll down if cursor goes below view
+        if (newCursor >= o + viewHeight) return Math.min(maxOffset, o + 1);
+        return o;
+      });
+      return;
+    }
+    if (key.upArrow || input === "k") {
+      setCursor((c) => Math.max(0, c - 1));
+      setScrollOffset((o) => {
+        const newCursor = Math.max(0, clampedCursor - 1);
+        // Scroll up if cursor goes above view
+        if (newCursor < o) return Math.max(0, o - 1);
+        return o;
+      });
+      return;
+    }
+    if (key.pageDown || input === "d") {
+      const half = Math.floor(viewHeight / 2);
+      setScrollOffset((o) => Math.min(maxOffset, o + half));
+      setCursor((c) => Math.min(allLines.length - 1, c + half));
+      return;
+    }
+    if (key.pageUp || input === "u") {
+      const half = Math.floor(viewHeight / 2);
+      setScrollOffset((o) => Math.max(0, o - half));
+      setCursor((c) => Math.max(0, c - half));
+      return;
+    }
+    if (input === "g") {
+      setScrollOffset(0);
+      setCursor(0);
+      return;
+    }
+    if (input === "G") {
+      setScrollOffset(maxOffset);
+      setCursor(allLines.length - 1);
+      return;
+    }
+    if (key.return) {
+      const line = allLines[clampedCursor];
+      if (line?.kind === "tool") {
+        const id = line.callId;
+        setExpandedIds((prev) => {
+          const next = new Set(prev);
+          if (next.has(id)) next.delete(id);
+          else next.add(id);
+          return next;
+        });
+      }
+      return;
+    }
+  }, { isActive });
 
   if (!session) {
     return (
-      <Box paddingX={1}>
+      <Box height={maxHeight} paddingX={1}>
         <Text color={colors.textDim}>Select a session</Text>
       </Box>
     );
@@ -157,32 +226,98 @@ function MessagesPanelInner({
 
   if (allLines.length === 0) {
     return (
-      <Box paddingX={1}>
+      <Box height={maxHeight} paddingX={1}>
         <Text color={colors.textDim}>No messages</Text>
       </Box>
     );
   }
 
-  const clampedOffset = Math.max(0, Math.min(scrollOffset, Math.max(0, allLines.length - maxHeight)));
-  const visibleLines = allLines.slice(clampedOffset, clampedOffset + maxHeight);
+  const visibleLines = allLines.slice(clampedOffset, clampedOffset + viewHeight);
 
   return (
-    <Box flexDirection="column" paddingX={1} overflow="hidden">
-      <Box flexDirection="row">
+    <Box flexDirection="column" height={maxHeight} paddingX={1}>
+      {/* Counter row */}
+      <Box flexDirection="row" height={1}>
         <Text color={colors.textDim}>
-          {clampedOffset + 1}–{Math.min(clampedOffset + maxHeight, allLines.length)}/{allLines.length}
+          {clampedOffset + 1}–{Math.min(clampedOffset + viewHeight, allLines.length)}/{allLines.length}
         </Text>
         <Box flexGrow={1} />
-        <Text color={colors.textDim}>{session.interactions.length} turns</Text>
+        <Text color={colors.textDim}>
+          {session.interactions.filter((i) => i.role === "assistant").length} turns
+        </Text>
+        {clampedOffset > 0 && <Text color={colors.textDim}> ↑</Text>}
+        {clampedOffset < maxOffset && <Text color={colors.textDim}> ↓</Text>}
       </Box>
-      {visibleLines.map((line, i) => renderLine(line, clampedOffset + i))}
+
+      {visibleLines.map((line, i) => {
+        const absIdx = clampedOffset + i;
+        const isCursor = absIdx === clampedCursor && isActive;
+
+        switch (line.kind) {
+          case "header":
+            return (
+              <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>
+                {line.agent && <Text color={colors.cyan}> [{line.agent}]</Text>}
+                <Box flexGrow={1} />
+                {line.duration && <Text color={colors.textDim}>{line.duration} </Text>}
+                <Text color={colors.textDim}>{line.time}</Text>
+              </Box>
+            );
+
+          case "tool":
+            return (
+              <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>
+                {line.title && <Text color={colors.textDim}> {line.title}</Text>}
+                <Box flexGrow={1} />
+                <Text color={colors.textDim}>{line.expanded ? "▼ " : "▶ "}</Text>
+                {line.right && <Text color={colors.textDim}>{line.right}</Text>}
+              </Box>
+            );
+
+          case "tool-detail":
+            if (line.isSection) {
+              return (
+                <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={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></>
+                  : <Text color={isCursor ? colors.accent : colors.textDim}>{line.value}</Text>
+                }
+              </Box>
+            );
+
+          case "text":
+            return (
+              <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>
+            );
+
+          case "reasoning":
+            return (
+              <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>
+            );
+        }
+      })}
     </Box>
   );
 }
 
 export const MessagesPanel = memo(MessagesPanelInner);
-
-function truncate(s: string, max: number): string {
-  if (s.length <= max) return s;
-  return s.slice(0, max - 1) + "…";
-}

package/src/ui/screens/SessionsScreen.tsx

@@ -5,7 +5,7 @@ import { StatusBar } from "../components/StatusBar";
 import { AgentTree } from "../components/AgentTree";
 import { DetailsPanel } from "../components/DetailsPanel";
 import { MessagesPanel } from "../components/MessagesPanel";
-import type { Workflow, Session, AgentNode, FlatNode } from "../../core/types";
+import type { Workflow, AgentNode, FlatNode } from "../../core/types";
 
 interface SessionsScreenProps {
   workflows: Workflow[];
@@ -18,7 +18,6 @@ type RightMode = "stats" | "messages";
 
 function flattenWorkflow(workflow: Workflow, workflowIndex: number): FlatNode[] {
   const nodes: FlatNode[] = [];
-
   function walk(node: AgentNode) {
     nodes.push({
       id: node.session.id,
@@ -28,11 +27,8 @@ function flattenWorkflow(workflow: Workflow, workflowIndex: number): FlatNode[]
       hasChildren: node.children.length > 0,
       agentNode: node,
     });
-    for (const child of node.children) {
-      walk(child);
-    }
+    for (const child of node.children) walk(child);
   }
-
   walk(workflow.agentTree);
   return nodes;
 }
@@ -45,9 +41,7 @@ function SessionsScreenInner({
 }: SessionsScreenProps) {
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [rightMode, setRightMode] = useState<RightMode>("stats");
-  const [msgScrollOffset, setMsgScrollOffset] = useState(0);
 
-  // Flat list of all nodes (root workflows + sub-agents in tree order)
   const flatNodes = useMemo(() => {
     return workflows.flatMap((w, i) => flattenWorkflow(w, i));
   }, [workflows]);
@@ -55,12 +49,10 @@ function SessionsScreenInner({
   const clampedIndex = Math.min(selectedIndex, Math.max(0, flatNodes.length - 1));
   const selectedNode = flatNodes[clampedIndex] ?? null;
 
-  // For DetailsPanel we need the full Workflow — use the root workflow of the selected node
   const selectedWorkflow = useMemo(() => {
     if (!selectedNode) return null;
     const w = workflows[selectedNode.workflowIndex];
     if (!w) return null;
-    // If we selected a sub-agent, wrap it as a single-session workflow for DetailsPanel
     if (selectedNode.session.id !== w.mainSession.id) {
       return {
         id: selectedNode.session.id,
@@ -73,56 +65,49 @@ function SessionsScreenInner({
   }, [selectedNode, workflows]);
 
   const leftWidth = Math.floor(terminalWidth * 0.35);
-  const rightWidth = terminalWidth - leftWidth - 2; // 2 for borders
+  const rightWidth = terminalWidth - leftWidth - 2;
+
+  const statusBarHeight = 1;
+  const borderRows = 2;
+  const innerHeight = contentHeight - statusBarHeight - borderRows;
+  const panelHeight = contentHeight - statusBarHeight;
+  const msgHeight = innerHeight - 1; // minus tab header row
 
-  // Message scroll: reset when selection changes
   const handleSelect = useCallback((index: number) => {
     setSelectedIndex(index);
-    setMsgScrollOffset(0);
   }, []);
 
+  // SessionsScreen only handles: tab switch, tree nav (stats mode), session switch (messages mode)
   useInput(
     (input, key) => {
-      if (key.upArrow || input === "k") {
-        handleSelect(Math.max(0, clampedIndex - 1));
-        return;
-      }
-      if (key.downArrow || input === "j") {
-        handleSelect(Math.min(flatNodes.length - 1, clampedIndex + 1));
-        return;
-      }
       if (key.tab) {
         setRightMode((m) => (m === "stats" ? "messages" : "stats"));
-        setMsgScrollOffset(0);
         return;
       }
-      // Message scroll (only when in messages mode)
-      if (rightMode === "messages") {
-        if (input === "u" || key.pageUp) {
-          setMsgScrollOffset((o) => Math.max(0, o - 10));
-          return;
-        }
-        if (input === "d" || key.pageDown) {
-          setMsgScrollOffset((o) => o + 10);
-          return;
-        }
+      if (rightMode === "stats") {
+        if (key.upArrow || input === "k") { handleSelect(Math.max(0, clampedIndex - 1)); return; }
+        if (key.downArrow || input === "j") { handleSelect(Math.min(flatNodes.length - 1, clampedIndex + 1)); return; }
+        if (input === "g") { handleSelect(0); return; }
+        if (input === "G") { handleSelect(flatNodes.length - 1); return; }
+      } else {
+        // In messages mode, [ and ] switch session
+        if (input === "[") { handleSelect(Math.max(0, clampedIndex - 1)); return; }
+        if (input === "]") { handleSelect(Math.min(flatNodes.length - 1, clampedIndex + 1)); return; }
       }
     },
     { isActive }
   );
 
-  const panelHeight = contentHeight - 2; // leave room for status bar
-
   return (
     <Box flexDirection="column" width={terminalWidth} height={contentHeight}>
-      <Box flexDirection="row" flexGrow={1}>
+      <Box flexDirection="row" height={panelHeight}>
         {/* Left: agent/session tree */}
         <Box
           width={leftWidth}
+          height={panelHeight}
           borderStyle="single"
           borderColor={colors.border}
           flexDirection="column"
-          overflow="hidden"
         >
           <AgentTree
             workflows={workflows}
@@ -132,32 +117,25 @@ function SessionsScreenInner({
               const idx = flatNodes.findIndex((n) => n.id === id);
               if (idx >= 0) handleSelect(idx);
             }}
-            maxHeight={panelHeight}
+            maxHeight={innerHeight}
           />
         </Box>
 
         {/* Right: details or messages */}
         <Box
-          flexGrow={1}
           width={rightWidth}
+          height={panelHeight}
           borderStyle="single"
           borderColor={colors.border}
           flexDirection="column"
-          overflow="hidden"
         >
-          {/* Mode tab header */}
-          <Box paddingX={1} flexDirection="row">
-            <Text
-              color={rightMode === "stats" ? colors.accent : colors.textDim}
-              bold={rightMode === "stats"}
-            >
+          {/* Tab header: 1 row */}
+          <Box paddingX={1} height={1} flexDirection="row">
+            <Text color={rightMode === "stats" ? colors.accent : colors.textDim} bold={rightMode === "stats"}>
               [Stats]
             </Text>
             <Text color={colors.textDim}> </Text>
-            <Text
-              color={rightMode === "messages" ? colors.accent : colors.textDim}
-              bold={rightMode === "messages"}
-            >
+            <Text color={rightMode === "messages" ? colors.accent : colors.textDim} bold={rightMode === "messages"}>
               [Messages]
             </Text>
             <Box flexGrow={1} />
@@ -165,13 +143,12 @@ function SessionsScreenInner({
           </Box>
 
           {rightMode === "stats" ? (
-            <DetailsPanel workflow={selectedWorkflow} />
+            <DetailsPanel workflow={selectedWorkflow} height={innerHeight - 1} />
           ) : (
             <MessagesPanel
               session={selectedNode?.session ?? null}
-              scrollOffset={msgScrollOffset}
-              onScrollOffsetChange={setMsgScrollOffset}
-              maxHeight={panelHeight - 2}
+              maxHeight={msgHeight}
+              isActive={isActive && rightMode === "messages"}
             />
           )}
         </Box>
@@ -180,8 +157,8 @@ function SessionsScreenInner({
       <StatusBar
         hints={
           rightMode === "messages"
-            ? "j/k:nav  Tab:stats  u/d:scroll  2:tools  3:overview  r:refresh  q:quit"
-            : "j/k:nav  Tab:messages  2:tools  3:overview  r:refresh  q:quit"
+            ? "j/k:scroll  d/u:½page  g/G:top/bot  Enter:expand  [:prev  ]:next  Tab:stats  q:quit"
+            : "j/k:nav  g/G:top/bot  Tab:messages  2:tools  3:overview  r:refresh  q:quit"
         }
       />
     </Box>