Session verbosity: compact/normal/full toggle

- Compact: text only, truncated to 300 chars, no tool calls
- Normal: full text + collapsed tool calls
- Full: everything expanded with tool results
- Eye icon dropdown in session header

components/MessageBubble.tsx

@@ -4,13 +4,16 @@ import { useState } from "react";
 import { Wrench, ChevronDown, ChevronRight } from "lucide-react";
 import type { Message, ToolCall } from "@/lib/types";
 
+type Verbosity = "compact" | "normal" | "full";
+
 interface Props {
   message: Message;
   toolResults: Map<string, { name: string; content: string }>;
+  verbosity?: Verbosity;
 }
 
-function ToolCallBlock({ tc, result }: { tc: ToolCall; result?: { name: string; content: string } }) {
-  const [open, setOpen] = useState(false);
+function ToolCallBlock({ tc, result, showResult }: { tc: ToolCall; result?: { name: string; content: string }; showResult: boolean }) {
+  const [open, setOpen] = useState(showResult);
   let args: Record<string, unknown> = {};
   try { args = JSON.parse(tc.function.arguments); } catch {}
 
@@ -30,9 +33,9 @@ function ToolCallBlock({ tc, result }: { tc: ToolCall; result?: { name: string;
           <pre className="text-[11px] overflow-x-auto whitespace-pre-wrap max-h-40 overflow-y-auto" style={{ color: "var(--text-3)" }}>
             {JSON.stringify(args, null, 2)}
           </pre>
-          {result && (
+          {showResult && result && (
             <pre className="text-[11px] overflow-x-auto whitespace-pre-wrap max-h-32 overflow-y-auto" style={{ color: "var(--text-3)", opacity: 0.6 }}>
-              {result.content.slice(0, 500)}{result.content.length > 500 ? "..." : ""}
+              {result.content.slice(0, 1000)}{result.content.length > 1000 ? "..." : ""}
             </pre>
           )}
         </div>
@@ -41,7 +44,7 @@ function ToolCallBlock({ tc, result }: { tc: ToolCall; result?: { name: string;
   );
 }
 
-export function MessageBubble({ message, toolResults }: Props) {
+export function MessageBubble({ message, toolResults, verbosity = "normal" }: Props) {
   const isUser = message.role === "user";
   const content = message.content || "";
 
@@ -52,6 +55,11 @@ export function MessageBubble({ message, toolResults }: Props) {
 
   if (!content && toolCalls.length === 0) return null;
 
+  // Compact: no tool calls at all
+  const showTools = verbosity !== "compact" && toolCalls.length > 0;
+  // Full: expand tool calls and show results
+  const expandTools = verbosity === "full";
+
   return (
     <div className={`flex ${isUser ? "justify-end" : "justify-start"}`}>
       <div
@@ -63,16 +71,25 @@ export function MessageBubble({ message, toolResults }: Props) {
       >
         {content && (
           <p className="text-[14px] whitespace-pre-wrap leading-relaxed break-words">
-            {content}
+            {verbosity === "compact" && content.length > 300
+              ? content.slice(0, 300) + "..."
+              : content}
           </p>
         )}
-        {toolCalls.length > 0 && (
+        {showTools && (
           <div>
-            {toolCalls.length <= 3 ? (
+            {expandTools ? (
+              // Full: show all tool calls expanded with results
               toolCalls.map((tc) => (
-                <ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} />
+                <ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} showResult={true} />
+              ))
+            ) : toolCalls.length <= 3 ? (
+              // Normal: collapsed tool calls, no results
+              toolCalls.map((tc) => (
+                <ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} showResult={false} />
               ))
             ) : (
+              // Normal with many tools: collapsed summary
               <CollapsedTools toolCalls={toolCalls} toolResults={toolResults} />
             )}
           </div>
@@ -96,7 +113,7 @@ function CollapsedTools({ toolCalls, toolResults }: { toolCalls: ToolCall[]; too
         {open ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
       </button>
       {open && toolCalls.map((tc) => (
-        <ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} />
+        <ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} showResult={false} />
       ))}
     </div>
   );