@springbrand/message-panel 0.2.0-alpha.42 → 0.2.0-alpha.43

package/cloud-os/chat/cloud-os-chat-messages.tsx

@@ -62,6 +62,8 @@ import {
 } from "./transcript-model";
 
 export type CloudOsChatStatus = "ready" | "submitted" | "streaming" | "error";
+type BottomFollowMode = "following" | "detached" | "returning";
+const BOTTOM_FOLLOW_THRESHOLD_PX = 120;
 
 export interface CloudOsChatMessagesProps {
   messages: readonly UIMessage[];
@@ -394,8 +396,12 @@ export function CloudOsChatMessages({
   onCopy,
 }: CloudOsChatMessagesProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
-  const endRef = useRef<HTMLDivElement>(null);
-  const [showScrollButton, setShowScrollButton] = useState(false);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const followModeRef = useRef<BottomFollowMode>("following");
+  const pointerScrollingRef = useRef(false);
+  const userScrollIntentRef = useRef(false);
+  const userScrollIntentTimerRef = useRef<number | null>(null);
+  const [followMode, setFollowModeState] = useState<BottomFollowMode>("following");
   const reducedMotion = useReducedMotion();
   const [expandedToolCalls, setExpandedToolCalls] = useState<ReadonlySet<string>>(
     () => new Set(),
@@ -470,19 +476,71 @@ export function CloudOsChatMessages({
     });
   }, []);
 
-  const syncScrollButton = useCallback(() => {
+  const setFollowMode = useCallback((mode: BottomFollowMode) => {
+    followModeRef.current = mode;
+    setFollowModeState(mode);
+  }, []);
+
+  const syncScrollPosition = useCallback((userInitiated: boolean) => {
     const element = scrollRef.current;
     if (!element) return;
-    const distance =
-      element.scrollHeight - element.scrollTop - element.clientHeight;
-    setShowScrollButton(distance > 120);
+    const distance = element.scrollHeight - element.scrollTop - element.clientHeight;
+    if (distance <= BOTTOM_FOLLOW_THRESHOLD_PX) {
+      if (followModeRef.current !== "detached" || userInitiated) {
+        setFollowMode("following");
+      }
+    } else if (userInitiated && followModeRef.current !== "returning") {
+      setFollowMode("detached");
+    }
+  }, [setFollowMode]);
+
+  const markUserScrollIntent = useCallback(() => {
+    userScrollIntentRef.current = true;
+    if (userScrollIntentTimerRef.current !== null) {
+      window.clearTimeout(userScrollIntentTimerRef.current);
+    }
+    userScrollIntentTimerRef.current = window.setTimeout(() => {
+      userScrollIntentRef.current = false;
+      userScrollIntentTimerRef.current = null;
+    }, 100);
   }, []);
 
-  useEffect(() => {
+  const finishPointerScroll = useCallback(() => {
+    if (!pointerScrollingRef.current) return;
+    pointerScrollingRef.current = false;
+    syncScrollPosition(true);
+  }, [syncScrollPosition]);
+
+  const scrollToBottom = useCallback((behavior: ScrollBehavior = "auto") => {
     const element = scrollRef.current;
-    if (!element || showScrollButton) return;
-    element.scrollTo({ top: element.scrollHeight });
-  }, [isRecovering, messages, status, showScrollButton]);
+    if (!element) return;
+    setFollowMode("returning");
+    element.scrollTo({ top: element.scrollHeight, behavior });
+  }, [setFollowMode]);
+
+  useEffect(() => {
+    const content = contentRef.current;
+    const scroll = scrollRef.current;
+    if (!content || !scroll) return;
+    const follow = () => {
+      if (pointerScrollingRef.current) return;
+      if (followModeRef.current !== "detached") scroll.scrollTop = scroll.scrollHeight;
+    };
+    follow();
+    const observer = new ResizeObserver(follow);
+    observer.observe(content);
+    window.addEventListener("pointerup", finishPointerScroll);
+    window.addEventListener("pointercancel", finishPointerScroll);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("pointerup", finishPointerScroll);
+      window.removeEventListener("pointercancel", finishPointerScroll);
+      if (userScrollIntentTimerRef.current !== null) {
+        window.clearTimeout(userScrollIntentTimerRef.current);
+        userScrollIntentTimerRef.current = null;
+      }
+    };
+  }, [finishPointerScroll]);
 
   const activity = deriveTurnActivity(entries, {
     isActive,
@@ -508,13 +566,32 @@ export function CloudOsChatMessages({
       <div className="relative flex min-h-0 flex-1">
         <div
           ref={scrollRef}
-          onScroll={syncScrollButton}
+          onScroll={() => syncScrollPosition(
+            pointerScrollingRef.current || userScrollIntentRef.current,
+          )}
+          onWheel={(event) => {
+            markUserScrollIntent();
+            if (event.deltaY < 0) setFollowMode("detached");
+          }}
+          onPointerDown={() => {
+            pointerScrollingRef.current = true;
+          }}
+          onKeyDown={(event) => {
+            if (event.target !== event.currentTarget) return;
+            if (!["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " "]
+              .includes(event.key)) return;
+            markUserScrollIntent();
+            if (["ArrowUp", "PageUp", "Home"].includes(event.key)) {
+              setFollowMode("detached");
+            }
+          }}
           tabIndex={0}
           role="region"
           aria-label="Chat messages"
           className="cos-chat-panel flex-1 overflow-y-auto"
         >
         <div
+          ref={contentRef}
           className={`flex flex-col px-6 pb-8 pt-8 ${
             constrainWidth ? "mx-auto w-full max-w-[var(--cos-conversation-max-width)]" : ""
           }`}
@@ -640,7 +717,8 @@ export function CloudOsChatMessages({
               );
             const actionResultBlocks = entry.blocks.filter(
               (block): block is Extract<AssistantBlock, { kind: "actionPresentation" }> =>
-                block.kind === "actionPresentation",
+                block.kind === "actionPresentation" &&
+                !(block.presentation.state === "ready" && block.presentation.content.length === 0),
             );
             const finalMediaBlocks = entry.blocks.filter(
               (block): block is Extract<AssistantBlock, { kind: "image" | "file" }> =>
@@ -955,15 +1033,15 @@ export function CloudOsChatMessages({
             </div>
           )}
 
-          <div ref={endRef} />
+          <div />
         </div>
         </div>
 
         <WorkshopIconButton
           aria-label="Scroll to bottom"
-          onClick={() => endRef.current?.scrollIntoView({ behavior: "smooth" })}
+          onClick={() => scrollToBottom(reducedMotion ? "auto" : "smooth")}
           className={`themed-floating-shadow absolute bottom-3 left-1/2 z-20 -translate-x-1/2 !rounded-full border border-kumo-line bg-kumo-base transition-all duration-200 ${
-            showScrollButton
+            followMode === "detached"
               ? "translate-y-0 opacity-100"
               : "pointer-events-none translate-y-2 opacity-0"
           }`}

package/cloud-os/chat/transcript-model.ts

@@ -412,7 +412,10 @@ function assistantBlocks(
     const record = recordOf(part);
     const type = String(record.type ?? "");
 
-    if (type === "step-start") return;
+    if (type === "step-start") {
+      flush();
+      return;
+    }
 
     if (type === "text") {
       const text = String(record.text ?? "").trim();
@@ -549,7 +552,7 @@ function assistantBlocks(
     }
 
     if (call.kind === "ask-user") {
-      if (call.failed) return;
+      if (call.failed || call.state === "input-streaming") return;
       flush();
       blocks.push({
         kind: "askUser",

package/cloud-os/chat/web-search.tsx

@@ -58,24 +58,26 @@ export function WebSearch({
           </span>
         )}
       </div>
-      <div className="flex min-h-[5.75rem] max-h-48 flex-col overflow-y-auto overscroll-contain pr-1">
-        {revealedResults.map((result, index) => (
-          <div
-            key={`${cycle}-${result.domain}-${index}`}
-            className="fade-in slide-in-from-bottom-1 animate-in fill-mode-both hover:bg-foreground/[0.03] -mx-2.5 flex items-center gap-2.5 rounded-xl px-2.5 py-1.5 transition-colors duration-300"
-          >
-            <span className="bg-foreground/[0.06] text-foreground/45 flex size-4 shrink-0 items-center justify-center rounded text-[9px] font-medium">
-              {result.domain.charAt(0).toUpperCase()}
-            </span>
-            <span className="text-foreground/90 min-w-0 flex-1 truncate text-[13.5px]">
-              {result.title}
-            </span>
-            <span className={cn(mono, "text-foreground/35 shrink-0")}>
-              {result.domain}
-            </span>
-          </div>
-        ))}
-      </div>
+      {revealedResults.length > 0 && (
+        <div className="flex min-h-[5.75rem] max-h-48 flex-col overflow-y-auto overscroll-contain pr-1">
+          {revealedResults.map((result, index) => (
+            <div
+              key={`${cycle}-${result.domain}-${index}`}
+              className="fade-in slide-in-from-bottom-1 animate-in fill-mode-both hover:bg-foreground/[0.03] -mx-2.5 flex items-center gap-2.5 rounded-xl px-2.5 py-1.5 transition-colors duration-300"
+            >
+              <span className="bg-foreground/[0.06] text-foreground/45 flex size-4 shrink-0 items-center justify-center rounded text-[9px] font-medium">
+                {result.domain.charAt(0).toUpperCase()}
+              </span>
+              <span className="text-foreground/90 min-w-0 flex-1 truncate text-[13.5px]">
+                {result.title}
+              </span>
+              <span className={cn(mono, "text-foreground/35 shrink-0")}>
+                {result.domain}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@springbrand/message-panel",
-  "version": "0.2.0-alpha.42",
+  "version": "0.2.0-alpha.43",
   "type": "module",
   "files": [
     "src",
@@ -35,15 +35,15 @@
     "@streamdown/mermaid": "^1.0.2",
     "lucide-react": "^1.24.0",
     "motion": "^13.1.0",
-    "radix-ui": "^1.6.2",
+    "radix-ui": "^1.6.7",
     "streamdown": "^2.5.0",
     "thinking-orbs": "0.2.0",
     "use-stick-to-bottom": "^1.1.6"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.2",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.5",
     "@vitejs/plugin-react": "^6.0.3",
     "tailwindcss": "^4.3.2",
     "tw-animate-css": "^1.4.0",

package/springbrand-pet/animation.test.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from "vitest";
+import {
+  PET_FRAME_INTERVAL_MS,
+  petAnimationActive,
+  shouldRenderPetFrame,
+} from "./animation";
+
+describe("SpringBrand pet animation scheduling", () => {
+  it("animates only on a visible desktop without reduced motion", () => {
+    expect(petAnimationActive(true, false, "visible")).toBe(true);
+    expect(petAnimationActive(false, false, "visible")).toBe(false);
+    expect(petAnimationActive(true, true, "visible")).toBe(false);
+    expect(petAnimationActive(true, false, "hidden")).toBe(false);
+  });
+
+  it("caps React view updates at 24 frames per second", () => {
+    expect(PET_FRAME_INTERVAL_MS).toBeCloseTo(1000 / 24);
+    expect(shouldRenderPetFrame(100, 100 + PET_FRAME_INTERVAL_MS - 1)).toBe(false);
+    expect(shouldRenderPetFrame(100, 100 + PET_FRAME_INTERVAL_MS + 0.01)).toBe(true);
+  });
+});

package/springbrand-pet/animation.ts

@@ -0,0 +1,13 @@
+export const PET_FRAME_INTERVAL_MS = 1000 / 24;
+
+export function petAnimationActive(
+  desktop: boolean,
+  reducedMotion: boolean,
+  visibilityState: string,
+): boolean {
+  return desktop && !reducedMotion && visibilityState === "visible";
+}
+
+export function shouldRenderPetFrame(lastRenderedAt: number, now: number): boolean {
+  return now - lastRenderedAt >= PET_FRAME_INTERVAL_MS;
+}

package/springbrand-pet/index.tsx

@@ -6,6 +6,7 @@
  * isolated React adapter and SpringBrand desktop-pet behavior.
  */
 import {
+  startTransition,
   useCallback,
   useEffect,
   useId,
@@ -15,6 +16,10 @@ import {
   type CSSProperties,
   type PointerEvent as ReactPointerEvent,
 } from "react";
+import {
+  petAnimationActive,
+  shouldRenderPetFrame,
+} from "./animation";
 
 import { NOTIF_BLUE } from "./bot/decor";
 import { BotEngine, type BotFrame, type Look } from "./bot/engine";
@@ -204,7 +209,9 @@ export function SpringBrandPet({
       aiming.current = false;
     }
 
-    setView({ frame: currentEngine.sample(now), now });
+    startTransition(() => {
+      setView({ frame: currentEngine.sample(now), now });
+    });
   }, []);
 
   const changeInterest = useCallback(() => {
@@ -255,20 +262,28 @@ export function SpringBrandPet({
   }, [reducedMotion, renderAt]);
 
   useEffect(() => {
+    if (!desktop) return;
     const now = performance.now() / 1000;
     changedAt.current = now;
     engine.current!.reset("idle", now);
-    renderAt(now);
+    if (document.visibilityState === "visible") renderAt(now);
     if (reducedMotion) return;
 
     let animationFrame = 0;
+    let lastRenderedAt = performance.now();
     const tick = (milliseconds: number) => {
-      renderAt(milliseconds / 1000);
+      if (
+        petAnimationActive(desktop, reducedMotion, document.visibilityState) &&
+        shouldRenderPetFrame(lastRenderedAt, milliseconds)
+      ) {
+        lastRenderedAt = milliseconds;
+        renderAt(milliseconds / 1000);
+      }
       animationFrame = requestAnimationFrame(tick);
     };
     animationFrame = requestAnimationFrame(tick);
     return () => cancelAnimationFrame(animationFrame);
-  }, [reducedMotion, renderAt]);
+  }, [desktop, reducedMotion, renderAt]);
 
   useEffect(() => {
     if (reducedMotion) return;

package/springbrand-pet/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json

@@ -1 +1 @@
-{"version":"4.1.10","results":[[":bot/cycles.test.ts",{"duration":44.62495899999999,"failed":false}],[":bot/skins.test.ts",{"duration":3091.3955,"failed":false}],[":bot/engine.test.ts",{"duration":77.19429199999999,"failed":false}],[":bot/shape.test.ts",{"duration":8.478082999999998,"failed":false}],[":bot/expressions.test.ts",{"duration":6.141874999999999,"failed":false}],[":bot/face.test.ts",{"duration":2.4124999999999943,"failed":false}],[":drag.test.ts",{"duration":1.4348750000000052,"failed":false}]]}
+{"version":"4.1.10","results":[[":bot/cycles.test.ts",{"duration":55.58770800000002,"failed":false}],[":bot/skins.test.ts",{"duration":3032.4465840000003,"failed":false}],[":bot/engine.test.ts",{"duration":100.501834,"failed":false}],[":bot/shape.test.ts",{"duration":16.04204200000001,"failed":false}],[":bot/expressions.test.ts",{"duration":8.212458999999996,"failed":false}],[":bot/face.test.ts",{"duration":3.6211250000000064,"failed":false}],[":drag.test.ts",{"duration":1.7712499999999807,"failed":false}],[":animation.test.ts",{"duration":2.3806249999999807,"failed":false}]]}