Dont reload monaco edit thread slect, update ci to clean up containers after deploy

Author: ryaneggz

.claude/plans/parallel-squishing-dolphin.md

@@ -0,0 +1,94 @@
+# Plan: Minimize Monaco Reloads on Thread Switch
+
+## Context
+
+Every time a user selects a different thread from the sidebar, all Monaco editor instances in the conversation unmount and remount. A typical thread has 5-20+ tool calls, each rendering a full Monaco editor instance via `DefaultTool` for read-only JSON/markdown display. This causes:
+
+- Monaco CDN scripts to be re-validated (NetworkFirst caching strategy)
+- Hundreds of DOM nodes per editor instance to be destroyed and recreated
+- Visible UI jank during thread transitions
+
+The root cause: `DefaultTool` uses the full Monaco Editor (`@monaco-editor/react`) just to display read-only snippets -- the heaviest code editor available used as a glorified `<pre>` tag.
+
+## Approach: Replace Monaco with Lightweight Syntax Highlighter in Chat Messages
+
+`react-syntax-highlighter` with Prism is **already installed and bundled** (used by `MarkdownCard.tsx`). Reusing it adds zero additional bundle cost.
+
+### Step 1: Modify `DefaultTool` to use `react-syntax-highlighter`
+
+**File:** `frontend/src/components/tools/Default.tsx`
+
+Replace the Monaco `Editor` import with `SyntaxHighlighter` from `react-syntax-highlighter`, following the exact pattern from `MarkdownCard.tsx` (lines 4-8, 42-48):
+
+```tsx
+// Replace:
+import Editor from "@monaco-editor/react";
+
+// With:
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneDark, oneLight } from "react-syntax-highlighter/dist/esm/styles/prism";
+```
+
+Keep all existing content/language/height derivation logic (lines 17-62) unchanged. Only replace the render output:
+
+```tsx
+// Replace the <Editor .../> JSX with:
+<SyntaxHighlighter
+  style={theme === "light" ? oneLight : oneDark}
+  language={language}
+  wrapLongLines={true}
+  customStyle={{
+    margin: 0,
+    fontSize: "11px",
+    maxHeight: height,
+    overflow: "auto",
+    borderRadius: "0.375rem",
+  }}
+>
+  {content}
+</SyntaxHighlighter>
+```
+
+### Step 2: Verify no breaking changes
+
+- `DefaultTool` props interface (`selectedToolMessage`, `collapsed`) stays the same
+- Consumers (`ChatMessages.tsx` line 171, `ToolTimelineItem.tsx` line 88) need zero changes
+- Visual output: Prism's `oneDark`/`oneLight` closely match Monaco's `vs-dark`/`light` themes
+
+### Step 3: Verify build
+
+Run `npm run build` to confirm:
+- Monaco chunk is no longer pulled into the chat message rendering path
+- Bundle size for chat path decreases significantly
+- No build errors
+
+### Optional Future Enhancements (not in this PR)
+
+1. **Lazy-load Monaco for FileEditorPanel** - Use `React.lazy()` for `MonacoEditor` component
+2. **Configure Monaco loader for local bundles** - Eliminate CDN dependency for remaining Monaco usages
+3. **Change PWA caching** to `CacheFirst` for Monaco scripts (versions are pinned)
+
+## Files to Modify
+
+| File | Change |
+|------|--------|
+| `frontend/src/components/tools/Default.tsx` | Replace Monaco with SyntaxHighlighter |
+
+## Files for Reference (no changes needed)
+
+| File | Why |
+|------|-----|
+| `frontend/src/components/cards/MarkdownCard.tsx` | Pattern to follow for SyntaxHighlighter usage |
+| `frontend/src/components/lists/ChatMessages.tsx` | Consumer - verify no breaking changes |
+| `frontend/src/components/timeline/ToolTimelineItem.tsx` | Consumer - verify no breaking changes |
+| `frontend/src/components/inputs/MonacoEditor.tsx` | Unchanged - still used for interactive editing |
+| `frontend/src/components/panels/FileEditorPanel.tsx` | Unchanged - legitimate Monaco use case |
+
+## Verification
+
+1. `npm run build` -- no errors, Monaco chunk not loaded on chat path
+2. `npm run test` -- existing tests pass
+3. Manual: switch between 3+ threads rapidly -- no Monaco network requests in DevTools
+4. Manual: expand tool outputs in chat -- JSON is syntax-highlighted correctly
+5. Manual: verify FileEditorPanel still works with full Monaco (split view mode)
+6. Manual: verify light/dark theme switching works for tool output highlighting

.claude/plans/twinkly-puzzling-pnueli.md

@@ -0,0 +1,18 @@
+# Plan: Remove 24h filter from docker system prune in CI deploy
+
+## Context
+After CI deploys, `docker system prune -a --filter "until=24h" -f` runs to clean up images. The 24h window is too generous — replaced images linger and fill disk. Shortening to 1h still protects the just-deployed images while reclaiming space much sooner.
+
+## Changes
+
+### 1. `.github/workflows/build.yml` (line 254)
+**Before:** `docker system prune -a --filter \"until=24h\" -f`
+**After:** `docker system prune -a --filter \"until=1h\" -f`
+
+### 2. `.github/workflows/deploy-docker.yml` (line 134)
+**Before:** `docker system prune -a --filter "until=24h" -f`
+**After:** `docker system prune -a --filter "until=1h" -f`
+
+## Verification
+- Review the diff to confirm only the filter flag was removed
+- Next CI deploy should show `docker system prune -a -f` in logs and reclaim more disk space

.github/workflows/build.yml

@@ -251,7 +251,7 @@ jobs:
                     echo '--- Worker deployment complete ---'
 
                     echo '--- Cleaning up old images ---'
-                    docker system prune -a --filter \"until=24h\" -f
+                    docker system prune -a --filter \"until=1h\" -f
 
                     echo '--- Deployment successful! ---'
                   "

.github/workflows/deploy-docker.yml

@@ -131,7 +131,7 @@ jobs:
                     echo '--- Worker deployment complete ---'
 
                     echo '--- Cleaning up old images ---'
-                    docker system prune -a --filter "until=24h" -f
+                    docker system prune -a --filter "until=1h" -f
 
                     echo '--- Deployment successful! ---'
                   "

frontend/src/components/tools/Default.tsx

@@ -1,5 +1,9 @@
 import { useMemo } from "react";
-import Editor from "@monaco-editor/react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import {
+	oneDark,
+	oneLight,
+} from "react-syntax-highlighter/dist/esm/styles/prism";
 import { useTheme } from "@/hooks/useTheme";
 
 interface Props {
@@ -52,7 +56,7 @@ export default function DefaultTool({
 		}
 	}, [content]);
 
-	const height = useMemo(() => {
+	const maxHeight = useMemo(() => {
 		const lineCount = content.split("\n").length;
 		const raw = lineCount * 18 + 10;
 		if (collapsed) {
@@ -64,30 +68,19 @@ export default function DefaultTool({
 	if (!selectedToolMessage || !content) return null;
 
 	return (
-		<div style={{ height }}>
-			<Editor
-				value={content}
-				language={language}
-				height={height}
-				theme={theme === "light" ? "light" : "vs-dark"}
-				options={{
-					readOnly: true,
-					domReadOnly: true,
-					minimap: { enabled: false },
-					lineNumbers: "off",
-					wordWrap: "on",
-					fontSize: 11,
-					scrollBeyondLastLine: false,
-					renderLineHighlight: "none",
-					contextmenu: false,
-					folding: !collapsed,
-					scrollbar: {
-						vertical: "hidden",
-						horizontal: "hidden",
-						handleMouseWheel: true,
-					},
-				}}
-			/>
-		</div>
+		<SyntaxHighlighter
+			style={theme === "light" ? oneLight : oneDark}
+			language={language}
+			wrapLongLines={true}
+			customStyle={{
+				margin: 0,
+				fontSize: "11px",
+				maxHeight,
+				overflow: "auto",
+				borderRadius: "0.375rem",
+			}}
+		>
+			{content}
+		</SyntaxHighlighter>
 	);
 }