doc: Document Finch compose usage; improve delete confirms and long-message UX

Author: yxzwayne

README.md

@@ -35,18 +35,40 @@ curl -fsSL https://raw.githubusercontent.com/yxzwayne/treechat/refs/heads/main/d
   | HOST_PORT=8788 docker compose -f - up -d --pull always
 ```
 
+Finch equivalent (download first):
+
+```
+curl -fsSL https://raw.githubusercontent.com/yxzwayne/treechat/refs/heads/main/docker-compose.pull.yml -o /tmp/treechat.pull.yml
+HOST_PORT=8787 finch compose -f /tmp/treechat.pull.yml up -d
+```
+
+To shut it down:
+
+```
+curl -fsSL https://raw.githubusercontent.com/yxzwayne/treechat/refs/heads/main/docker-compose.pull.yml -o /tmp/treechat.pull.yml
+docker compose -f /tmp/treechat.pull.yml down
+finch compose -f /tmp/treechat.pull.yml down
+```
+
 To run with real model calls, pass `USE_MOCK=0` and an API key to `docker compose`:
 
 ```
 curl -fsSL https://raw.githubusercontent.com/yxzwayne/treechat/refs/heads/main/docker-compose.pull.yml \
   | USE_MOCK=0 OPENROUTER_API_KEY=... docker compose -f - up -d --pull always
 ```
 
+Finch equivalent:
+
+```
+USE_MOCK=0 OPENROUTER_API_KEY=... finch compose -f /tmp/treechat.pull.yml up -d
+```
+
 ### Option B: Local (build from source)
 
 From this repo:
 
 - `docker compose up --build`
+- `finch compose up --build` (Finch)
 - open http://localhost:8787
 
 See `docs/DOCKER.md`.

client/src/components/LeftSidebar.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
-import { Check, Cog, PanelLeftClose, PenLine, SlidersHorizontal, SquarePen, Trash2, X } from 'lucide-react'
+import { Check, Cog, PanelLeftClose, PenLine, Bot, SquarePen, Trash2, X } from 'lucide-react'
 import { ConversationListItem, listConversations, deleteConversation, getConversationSummary, updateConversationSummary } from '../lib/api'
 
 export default function LeftSidebar({ onClose, onOpenSettings }: { onClose: () => void, onOpenSettings: () => void }) {
@@ -18,6 +18,29 @@ export default function LeftSidebar({ onClose, onOpenSettings }: { onClose: () =
   const noticeTimer = useRef<number | null>(null)
   const editRef = useRef<HTMLTextAreaElement | null>(null)
 
+  const cancelConfirm = () => {
+    setConfirmId(null)
+  }
+
+  const confirmDelete = async () => {
+    if (!confirmId) return
+    if (deleting) return
+    const toDelete = confirmId as string
+    setDeleting(true)
+    try {
+      await deleteConversation(toDelete)
+      // Refresh list from server to ensure DB state is reflected
+      const list = await listConversations()
+      setItems(list)
+      if (id === toDelete) navigate('/')
+      setConfirmId(null)
+    } catch (e: any) {
+      setToast(`Delete failed: ${e?.message || 'server error'}`)
+    } finally {
+      setDeleting(false)
+    }
+  }
+
   const commitEdit = async (conversationId: string) => {
     if (saving) return
     const length = [...editingValue].length
@@ -58,6 +81,25 @@ export default function LeftSidebar({ onClose, onOpenSettings }: { onClose: () =
     return () => { alive = false }
   }, [id])
 
+  useEffect(() => {
+    if (!confirmId) return
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (!confirmId) return
+      if (e.metaKey || e.ctrlKey || e.altKey) return
+      if (e.key === 'Enter') {
+        e.preventDefault()
+        e.stopPropagation()
+        void confirmDelete()
+      } else if (e.key === 'Backspace' || e.key === 'Delete') {
+        e.preventDefault()
+        e.stopPropagation()
+        cancelConfirm()
+      }
+    }
+    window.addEventListener('keydown', onKeyDown, { capture: true })
+    return () => { window.removeEventListener('keydown', onKeyDown, { capture: true }) }
+  }, [confirmId, deleting, id, navigate])
+
   return (
     <div className="left-sidebar">
       <div style={{ marginBottom: 10, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
@@ -225,7 +267,7 @@ export default function LeftSidebar({ onClose, onOpenSettings }: { onClose: () =
           aria-label="Open models"
           title="Open models"
         >
-          <SlidersHorizontal size={16} />
+          <Bot size={16} />
         </button>
         <button
           className="icon-button"
@@ -237,7 +279,7 @@ export default function LeftSidebar({ onClose, onOpenSettings }: { onClose: () =
         </button>
       </div>
       {confirmId && (
-        <div className="modal-overlay" onClick={() => setConfirmId(null)}>
+        <div className="modal-overlay" onClick={cancelConfirm}>
           <div className="modal" onClick={e => e.stopPropagation()}>
             <div className="modal-body">
               Delete the entire conversation?
@@ -246,26 +288,11 @@ export default function LeftSidebar({ onClose, onOpenSettings }: { onClose: () =
               </div>
             </div>
             <div className="modal-actions">
-              <button className="button" onClick={() => setConfirmId(null)} disabled={deleting}>Cancel</button>
+              <button className="button" onClick={cancelConfirm}>Cancel</button>
               <button
                 className="button danger"
                 disabled={deleting}
-                onClick={async () => {
-                  const toDelete = confirmId as string
-                  setDeleting(true)
-                  try {
-                    await deleteConversation(toDelete)
-                    // Refresh list from server to ensure DB state is reflected
-                    const list = await listConversations()
-                    setItems(list)
-                    if (id === toDelete) navigate('/')
-                    setConfirmId(null)
-                  } catch (e: any) {
-                    setToast(`Delete failed: ${e?.message || 'server error'}`)
-                  } finally {
-                    setDeleting(false)
-                  }
-                }}
+                onClick={confirmDelete}
               >
                 {deleting ? 'Deleting…' : 'Delete'}
               </button>

client/src/components/MessageNode.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
-import { Pencil, RefreshCw, Trash2 } from 'lucide-react'
+import { Maximize2, Minimize2, Pencil, RefreshCw, Trash2 } from 'lucide-react'
 import ReactMarkdown from 'react-markdown'
 import { ConversationState, MessageNode as TMessageNode } from '../types'
 import Composer from './Composer'
@@ -29,6 +29,10 @@ export default function MessageNode({ node, state, onSelect, onRetry, onRetryAll
   const [confirming, setConfirming] = useState(false)
   const [editModelOpen, setEditModelOpen] = useState(false)
   const editMenuRef = useRef<HTMLDivElement | null>(null)
+  const [userExpanded, setUserExpanded] = useState(false)
+
+  const cancelDelete = () => setConfirming(false)
+  const confirmDelete = () => { setConfirming(false); onDelete(node.id) }
 
   const [retryMenuOpen, setRetryMenuOpen] = useState(false)
   const [retryMenuPane, setRetryMenuPane] = useState<'root' | 'models'>('root')
@@ -57,6 +61,25 @@ export default function MessageNode({ node, state, onSelect, onRetry, onRetryAll
     document.addEventListener('click', onDocClick)
     return () => { document.removeEventListener('click', onDocClick) }
   }, [retryMenuOpen])
+
+  useEffect(() => {
+    if (!confirming) return
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (!confirming) return
+      if (e.metaKey || e.ctrlKey || e.altKey) return
+      if (e.key === 'Enter') {
+        e.preventDefault()
+        e.stopPropagation()
+        confirmDelete()
+      } else if (e.key === 'Backspace' || e.key === 'Delete') {
+        e.preventDefault()
+        e.stopPropagation()
+        cancelDelete()
+      }
+    }
+    window.addEventListener('keydown', onKeyDown, { capture: true })
+    return () => { window.removeEventListener('keydown', onKeyDown, { capture: true }) }
+  }, [confirming, node.id])
   useLayoutEffect(() => {
     if (!retryMenuOpen) {
       retryMenuShiftXRef.current = 0
@@ -102,6 +125,23 @@ export default function MessageNode({ node, state, onSelect, onRetry, onRetryAll
   const roleClass = node.role === 'user' ? 'node-user' : node.role === 'assistant' ? 'node-assistant' : 'node-system'
   const isActive = state.selectedLeafId === node.id
   const roleLabel = node.role.charAt(0).toUpperCase() + node.role.slice(1).toLowerCase()
+  const isLongUserContent = useMemo(() => {
+    if (node.role !== 'user') return false
+    if (editing) return false
+    if (!node.content) return false
+    const content = node.content
+    const lines = content.split('\n')
+    const lineCount = lines.length
+    const longestLine = lines.reduce((m, l) => Math.max(m, l.length), 0)
+    return content.length >= 800 || lineCount >= 14 || longestLine >= 240
+  }, [editing, node.content, node.role])
+  useEffect(() => {
+    if (!isLongUserContent && userExpanded) setUserExpanded(false)
+  }, [isLongUserContent, userExpanded])
+  useEffect(() => {
+    if (node.role !== 'user') return
+    setUserExpanded(false)
+  }, [node.content, node.id, node.role])
 
   return (
     <div>
@@ -150,7 +190,7 @@ export default function MessageNode({ node, state, onSelect, onRetry, onRetryAll
                 )}
               </div>
             ) : (
-              <div className="node-content plain">{node.content || <span style={{ color: 'var(--muted-2)' }}>GENERATING...</span>}</div>
+              <div className={`node-content plain ${isLongUserContent ? (userExpanded ? 'long expanded' : 'long') : ''}`}>{node.content || <span style={{ color: 'var(--muted-2)' }}>GENERATING...</span>}</div>
             )}
           </>
         )}
@@ -219,6 +259,16 @@ export default function MessageNode({ node, state, onSelect, onRetry, onRetryAll
 	            )}
             {node.role === 'user' && (
               <>
+                {isLongUserContent && (
+                  <button
+                    className="icon-button"
+                    aria-label={userExpanded ? 'Collapse long message' : 'Expand long message'}
+                    title={userExpanded ? 'Collapse' : 'Expand'}
+                    onClick={() => setUserExpanded(e => !e)}
+                  >
+                    {userExpanded ? <Minimize2 size={16} strokeWidth={2} /> : <Maximize2 size={16} strokeWidth={2} />}
+                  </button>
+                )}
                 <button
                   className="icon-button"
                   aria-label="Edit message"
@@ -278,14 +328,14 @@ export default function MessageNode({ node, state, onSelect, onRetry, onRetryAll
       )}
 
       {confirming && (
-        <div className="modal-overlay" onClick={() => setConfirming(false)}>
+        <div className="modal-overlay" onClick={cancelDelete}>
           <div className="modal" onClick={e => e.stopPropagation()}>
             <div className="modal-body">
               Deleting a message deletes EVERY child messages in EVERY branch. Confirmation to delete?
             </div>
             <div className="modal-actions">
-              <button className="button pale" onClick={() => setConfirming(false)}>No</button>
-              <button className="button danger" onClick={() => { setConfirming(false); onDelete(node.id) }}>Yes</button>
+              <button className="button pale" onClick={cancelDelete}>No</button>
+              <button className="button danger" onClick={confirmDelete}>Yes</button>
             </div>
           </div>
         </div>

docs/DOCKER.md

@@ -12,6 +12,7 @@ Bundling Postgres into the same container is possible but not recommended (harde
 From the repo root:
 
 - `docker compose up --build`
+- `finch compose up --build` (Finch)
 
 Then open:
 
@@ -30,6 +31,7 @@ To run with real model calls, set `USE_MOCK=0` and pass an API key:
 If port 8787 is busy, pick another host port:
 
 - `HOST_PORT=8788 docker compose up --build`
+- `HOST_PORT=8788 finch compose up --build` (Finch)
 
 ## “One command” run (pull prebuilt image)
 
@@ -39,10 +41,22 @@ This repo includes `docker-compose.pull.yml` which is intended to be fetched and
 
 - `curl -fsSL https://raw.githubusercontent.com/yxzwayne/treechat/refs/heads/main/docker-compose.pull.yml | docker compose -f - up -d --pull always`
 
+Finch equivalent (download first):
+
+- `curl -fsSL https://raw.githubusercontent.com/yxzwayne/treechat/refs/heads/main/docker-compose.pull.yml -o /tmp/treechat.pull.yml`
+- `finch compose -f /tmp/treechat.pull.yml up -d`
+
 After it finishes, open:
 
 - http://localhost:8787
 
 To enable real model calls, set `USE_MOCK=0` and pass either `OPENROUTER_API_KEY` or `OPENAI_API_KEY` to the `docker compose` command:
 
 - `curl -fsSL https://raw.githubusercontent.com/yxzwayne/treechat/refs/heads/main/docker-compose.pull.yml | USE_MOCK=0 OPENROUTER_API_KEY=... docker compose -f - up -d --pull always`
+- `USE_MOCK=0 OPENROUTER_API_KEY=... finch compose -f /tmp/treechat.pull.yml up -d` (Finch)
+
+To shut down (Docker or Finch), run `down` with the same compose file:
+
+- `curl -fsSL https://raw.githubusercontent.com/yxzwayne/treechat/refs/heads/main/docker-compose.pull.yml -o /tmp/treechat.pull.yml`
+- `docker compose -f /tmp/treechat.pull.yml down`
+- `finch compose -f /tmp/treechat.pull.yml down`