Merge branch 'main' into sidebar

Author: k11kirky

README.md

@@ -23,14 +23,13 @@ npm install -g pnpm
 pnpm install
 
 # Run in development mode
-pnpm run dev
+pnpm run start
 
 # Build for production
-pnpm run build
+pnpm run make
 
 # Other useful commands
-pnpm run typecheck  # Type checking
-pnpm run lint       # Linting
+pnpm run check:write       # Linting & typecheck
 ```
 
 ### Building Distributables

package.json

@@ -66,7 +66,7 @@
   "dependencies": {
     "@ai-sdk/openai": "^2.0.52",
     "@phosphor-icons/react": "^2.1.10",
-    "@posthog/agent": "1.13.0",
+    "@posthog/agent": "1.15.0",
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/themes": "^3.2.1",
     "@tanstack/react-query": "^5.90.2",

pnpm-lock.yaml

@@ -58,6 +58,7 @@ export function LogView({ logs, isRunning, onClearLogs }: LogViewProps) {
   const [viewMode, setViewMode] = useState<"pretty" | "raw">("pretty");
   const [highlightedIndex, setHighlightedIndex] = useState<number | null>(null);
   const [expandAll, setExpandAll] = useState<boolean>(false);
+  const [autoScroll, setAutoScroll] = useState<boolean>(true);
   const scrollPositions = useRef<{ pretty: number; raw: number }>({
     pretty: 0,
     raw: 0,
@@ -189,11 +190,16 @@ export function LogView({ logs, isRunning, onClearLogs }: LogViewProps) {
     return processed;
   }, [logs]);
 
-  // Track scroll position continuously
+  // Track scroll position and auto-scroll state
   useEffect(() => {
     const handleScroll = () => {
       if (scrollRef.current) {
         scrollPositions.current[viewMode] = scrollRef.current.scrollTop;
+
+        // Check if user is near the bottom (within 100px)
+        const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+        const isNearBottom = scrollHeight - scrollTop - clientHeight < 100;
+        setAutoScroll(isNearBottom);
       }
     };
 
@@ -216,12 +222,17 @@ export function LogView({ logs, isRunning, onClearLogs }: LogViewProps) {
     }
   }, [viewMode]);
 
-  // Auto-scroll to bottom when new logs arrive (only in pretty mode)
+  // Auto-scroll to bottom when new logs arrive
   useEffect(() => {
-    if (scrollRef.current && viewMode === "pretty") {
-      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    if (scrollRef.current && autoScroll) {
+      // Use requestAnimationFrame to ensure DOM is updated with new content
+      requestAnimationFrame(() => {
+        if (scrollRef.current) {
+          scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+        }
+      });
     }
-  }, [viewMode]);
+  }, [autoScroll]);
 
   if (logs.length === 0 && !isRunning) {
     return (