🤖 Add 'Compact Here' button to Plan Results (#122)

Adds a compact button to plan tool results that allows users to start
fresh from a proposed plan.

When clicked, replaces conversation history with a single compacted
message containing the plan title (as H1) and full plan content. The
plan's markdown formatting is preserved, making it readable and useful
as a conversation starting point.

## Changes

- Thread `workspaceId` through MessageRenderer → ToolMessage →
ProposePlanToolCall
- Add "Compact Here" button to plan header (conditionally rendered when
workspaceId available)
- Implement `handleCompactHere()` handler that creates compacted
CmuxMessage and calls `replaceChatHistory()`
- Button shows "Compacting..." during operation and is disabled to
prevent double-clicks

## Implementation

Reuses existing `/compact` infrastructure:
- `window.api.workspace.replaceChatHistory()` API
- `createCmuxMessage()` factory
- `compacted` metadata flag (shows 📦 badge)

4 files modified, 51 lines added. All type checks, lints, and builds
pass.

_Generated with `cmux`_

Author: ammar-agent

.gitignore

@@ -79,3 +79,7 @@ profile.txt
 src/version.ts
 OPENAI_FIX_SUMMARY.md
 docs/vercel/
+TESTING.md
+FEATURE_SUMMARY.md
+CODE_CHANGES.md
+README_COMPACT_HERE.md

src/components/AIView.tsx

@@ -371,7 +371,11 @@ const AIViewInner: React.FC<AIViewProps> = ({
 
                     return (
                       <React.Fragment key={msg.id}>
-                        <MessageRenderer message={msg} onEditUserMessage={handleEditUserMessage} />
+                        <MessageRenderer
+                          message={msg}
+                          onEditUserMessage={handleEditUserMessage}
+                          workspaceId={workspaceId}
+                        />
                         {isAtCutoff && (
                           <EditBarrier>
                             ⚠️ Messages below this line will be removed when you submit the edit

src/components/Messages/MessageRenderer.tsx

@@ -11,19 +11,20 @@ interface MessageRendererProps {
   message: DisplayedMessage;
   className?: string;
   onEditUserMessage?: (messageId: string, content: string) => void;
+  workspaceId?: string;
 }
 
 // Memoized to prevent unnecessary re-renders when parent (AIView) updates
 export const MessageRenderer = React.memo<MessageRendererProps>(
-  ({ message, className, onEditUserMessage }) => {
+  ({ message, className, onEditUserMessage, workspaceId }) => {
     // Route based on message type
     switch (message.type) {
       case "user":
         return <UserMessage message={message} className={className} onEdit={onEditUserMessage} />;
       case "assistant":
         return <AssistantMessage message={message} className={className} />;
       case "tool":
-        return <ToolMessage message={message} className={className} />;
+        return <ToolMessage message={message} className={className} workspaceId={workspaceId} />;
       case "reasoning":
         return <ReasoningMessage message={message} className={className} />;
       case "stream-error":

src/components/Messages/ToolMessage.tsx

@@ -21,6 +21,7 @@ import type {
 interface ToolMessageProps {
   message: DisplayedMessage & { type: "tool" };
   className?: string;
+  workspaceId?: string;
 }
 
 // Type guard for bash tool
@@ -71,7 +72,7 @@ function isProposePlanTool(toolName: string, args: unknown): args is ProposePlan
   return toolName === "propose_plan" && typeof args === "object" && args !== null && "plan" in args;
 }
 
-export const ToolMessage: React.FC<ToolMessageProps> = ({ message, className }) => {
+export const ToolMessage: React.FC<ToolMessageProps> = ({ message, className, workspaceId }) => {
   // Route to specialized components based on tool name
   if (isBashTool(message.toolName, message.args)) {
     return (
@@ -130,6 +131,7 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({ message, className })
           args={message.args}
           result={message.result as ProposePlanToolResult | undefined}
           status={message.status}
+          workspaceId={workspaceId}
         />
       </div>
     );

src/components/tools/ProposePlanToolCall.tsx

@@ -12,6 +12,7 @@ import {
 import { useToolExpansion, getStatusDisplay, type ToolStatus } from "./shared/toolUtils";
 import { MarkdownRenderer } from "../Messages/MarkdownRenderer";
 import { formatKeybind, KEYBINDS } from "@/utils/ui/keybinds";
+import { createCmuxMessage } from "@/types/message";
 
 const PlanContainer = styled.div`
   padding: 12px;
@@ -238,16 +239,19 @@ interface ProposePlanToolCallProps {
   args: ProposePlanToolArgs;
   result?: ProposePlanToolResult;
   status?: ToolStatus;
+  workspaceId?: string;
 }
 
 export const ProposePlanToolCall: React.FC<ProposePlanToolCallProps> = ({
   args,
   result: _result,
   status = "pending",
+  workspaceId,
 }) => {
   const { expanded, toggleExpanded } = useToolExpansion(true); // Expand by default
   const [showRaw, setShowRaw] = useState(false);
   const [copied, setCopied] = useState(false);
+  const [isCompacting, setIsCompacting] = useState(false);
 
   const statusDisplay = getStatusDisplay(status);
 
@@ -261,6 +265,37 @@ export const ProposePlanToolCall: React.FC<ProposePlanToolCallProps> = ({
     }
   };
 
+  const handleCompactHere = async () => {
+    if (!workspaceId || isCompacting) return;
+
+    setIsCompacting(true);
+    try {
+      // Create a compacted message with the plan content
+      // Format: Title as H1 + plan content
+      const compactedContent = `# ${args.title}\n\n${args.plan}`;
+      
+      const summaryMessage = createCmuxMessage(
+        `compact-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+        "assistant",
+        compactedContent,
+        {
+          timestamp: Date.now(),
+          compacted: true,
+        }
+      );
+
+      const result = await window.api.workspace.replaceChatHistory(workspaceId, summaryMessage);
+      
+      if (!result.success) {
+        console.error("Failed to compact:", result.error);
+      }
+    } catch (err) {
+      console.error("Compact error:", err);
+    } finally {
+      setIsCompacting(false);
+    }
+  };
+
   return (
     <ToolContainer expanded={expanded}>
       <ToolHeader onClick={toggleExpanded}>
@@ -278,6 +313,11 @@ export const ProposePlanToolCall: React.FC<ProposePlanToolCallProps> = ({
                 <PlanTitle>{args.title}</PlanTitle>
               </PlanHeaderLeft>
               <PlanHeaderRight>
+                {workspaceId && (
+                  <PlanButton onClick={() => void handleCompactHere()} disabled={isCompacting}>
+                    {isCompacting ? "Compacting..." : "📦 Compact Here"}
+                  </PlanButton>
+                )}
                 <PlanButton onClick={() => void handleCopy()}>
                   {copied ? "✓ Copied" : "Copy"}
                 </PlanButton>