@mndrk/agx 2.4.3 → 2.4.5

package/cloud-runtime/standalone/apps/local/components/TrackerBoard.tsx

@@ -2,7 +2,7 @@
 
 import React, { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
 import dynamic from "next/dynamic";
-import { ArrowDown, ArrowUp, ChevronDown, ChevronLeft, ChevronRight, Clock, FileText, Play, Plus, RefreshCw, Search, Settings, User, X } from "lucide-react";
+import { ArrowDown, ArrowUp, CheckSquare, ChevronDown, ChevronLeft, ChevronRight, Clock, FileText, Play, Plus, RefreshCw, Search, Settings, Square, User, X } from "lucide-react";
 import { useUrlSelection } from "@/hooks/useUrlSelection";
 import { useTrackerItems } from "@/hooks/useTrackerItems";
 import type { TrackerItem, TrackerStatusCategory } from "@/lib/tracker/types";
@@ -64,6 +64,7 @@ import { GroupPanel } from "@/components/tracker/GroupPanel";
 import { GroupNamePrompt, PENDING_GROUP_DROP_ID } from "@/components/tracker/GroupNamePrompt";
 import { StatusGroupRow, STATUS_GROUP_PREFIX } from "@/components/tracker/StatusGroupRow";
 import { SelectionBar } from "@/components/tracker/SelectionBar";
+import { JumpToLatestButton } from "@/components/chat-ui/JumpToLatestButton";
 import { useTrackerItemsMetadata } from "@/hooks/useTrackerItemsMetadata";
 import { useTrackerLabels } from "@/hooks/useTrackerLabels";
 import {
@@ -387,9 +388,11 @@ interface TrackerBoardProps {
   projectId?: string;
   projectSlug?: string;
   initialShowSettings?: boolean;
+  /** When set, seeds the group filter (e.g. a GitHub repo). Overrides stored filter. */
+  initialGroupId?: string;
 }
 
-export default function TrackerBoard({ trackerType, projectId, projectSlug, initialShowSettings }: TrackerBoardProps) {
+export default function TrackerBoard({ trackerType, projectId, projectSlug, initialShowSettings, initialGroupId }: TrackerBoardProps) {
   const { isTouchLayout } = useInputCapabilities();
   const {
     connected,
@@ -650,13 +653,13 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
     setDebouncedSearch(storedFilters.search);
     setSelectedAssigneeIds(storedFilters.assigneeIds);
     setSelectedStatusCategories(storedFilters.statusCategories);
-    setSelectedWorkspaceId(storedFilters.groupIds?.[0] ?? "");
-    setSelectedGroupId(storedFilters.groupIds?.[0] ?? "");
+    setSelectedWorkspaceId(initialGroupId ?? storedFilters.groupIds?.[0] ?? "");
+    setSelectedGroupId(initialGroupId ?? storedFilters.groupIds?.[0] ?? "");
     setSortBy(storedFilters.sortBy);
     setSortDir(storedFilters.sortDir);
     setSelectedLabelNames(storedFilters.labelNames ?? []);
     setPinnedItemIds(loadPinnedTrackerItemIds(trackerType, projectSlug));
-  }, [trackerType, projectSlug]);
+  }, [trackerType, projectSlug, initialGroupId]);
 
   useEffect(() => {
     if (skipNextFilterPersistRef.current) {
@@ -1008,6 +1011,39 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
   // Update the ref whenever the callback changes
   handleItemStatusChangeRef.current = handleItemStatusChange;
 
+  const startScriptedForItem = useCallback(
+    async (
+      item: TrackerItem,
+      scriptName: string,
+      scriptPrompt: string,
+      agentId?: string
+    ) => {
+      const agent = agentId ?? participants[0]?.id;
+      if (!agent) return;
+      try {
+        await fetch(`/api/trackers/${trackerType}/runs/scripted`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            projectId: projectId ?? undefined,
+            projectSlug: projectSlug ?? undefined,
+            issueId: item.id,
+            issueIdentifier: item.identifier,
+            issueTitle: item.title,
+            issueStatus: item.status,
+            issueAssignee: item.assignee?.name ?? null,
+            agentId: agent,
+            scriptName,
+            scriptPrompt,
+          }),
+        });
+      } catch (err) {
+        console.error(`Failed to start ${scriptName} for ${item.identifier}:`, err);
+      }
+    },
+    [participants, trackerType, projectId, projectSlug]
+  );
+
   const handleBulkRecap = useCallback(async () => {
     const ids = Array.from(multiSelectedItemIds);
     const selectedItems = ids
@@ -1072,24 +1108,40 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
     setMultiSelectedItemIds(new Set());
   }, [multiSelectedItemIds, items, trackerType, projectId, projectSlug]);
 
-  const handleBulkEstimate = useCallback(async (estimate: number | null) => {
+  const handleBulkEstimate = useCallback(async () => {
     const ids = Array.from(multiSelectedItemIds);
-    if (ids.length === 0 || !projectId) return;
-    try {
-      await fetch(`/api/trackers/${trackerType}/metadata/bulk`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          projectId,
-          issueIds: ids,
-          action: "set_estimate",
-          payload: { estimate },
-        }),
-      });
-      void refreshMetadata();
-    } catch {}
+    const selectedItems = ids
+      .map((id) => items.find((item) => item.id === id))
+      .filter(Boolean) as TrackerItem[];
+
+    if (selectedItems.length === 0 || participants.length === 0) return;
+    const agent = participants[0];
+
+    for (const item of selectedItems) {
+      try {
+        await fetch(`/api/trackers/${trackerType}/runs/scripted`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            projectId: projectId ?? undefined,
+            projectSlug: projectSlug ?? undefined,
+            issueId: item.id,
+            issueIdentifier: item.identifier,
+            issueTitle: item.title,
+            issueStatus: item.status,
+            issueAssignee: item.assignee?.name ?? null,
+            agentId: agent.id,
+            scriptName: "Estimate",
+            scriptPrompt:
+              "Assess the complexity and scope of this ticket and assign a Fibonacci story-point estimate (1, 2, 3, 5, 8, 13, or 21). Consider: required investigation, files likely to change, unknowns, and testing effort. Briefly justify the number, then set the estimate using the available tooling.",
+          }),
+        });
+      } catch (err) {
+        console.error(`Failed to start estimate for ${item.identifier}:`, err);
+      }
+    }
     setMultiSelectedItemIds(new Set());
-  }, [multiSelectedItemIds, projectId, trackerType, refreshMetadata]);
+  }, [multiSelectedItemIds, items, participants, trackerType, projectId, projectSlug]);
 
   const handleBulkAddLabel = useCallback(async (label: string) => {
     const ids = Array.from(multiSelectedItemIds);
@@ -1151,6 +1203,39 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
     await createLabelDefinition(name);
   }, [projectId, createLabelDefinition]);
 
+  const rowActionsFor = useCallback(
+    (item: TrackerItem) => ({
+      statusOptions: itemStatusOptions,
+      onRecap: () => {
+        const qs = projectId ? `?projectId=${encodeURIComponent(projectId)}` : "";
+        void fetch(
+          `/api/trackers/${encodeURIComponent(trackerType)}/items/${encodeURIComponent(item.id)}/recap${qs}`,
+          { method: "POST" }
+        ).then(() => {
+          window.dispatchEvent(
+            new CustomEvent("tracker:recap-triggered", {
+              detail: { trackerType, issueId: item.id },
+            })
+          );
+        });
+      },
+      onPrompt: (prompt: string, agentId: string) => {
+        void startScriptedForItem(item, "Prompt", prompt, agentId);
+      },
+      onEstimate: () => {
+        void startScriptedForItem(
+          item,
+          "Estimate",
+          "Assess the complexity and scope of this ticket and assign a Fibonacci story-point estimate (1, 2, 3, 5, 8, 13, or 21). Consider: required investigation, files likely to change, unknowns, and testing effort. Briefly justify the number, then set the estimate using the available tooling."
+        );
+      },
+      onStatus: (status: string) => {
+        void handleItemStatusChange(item, status);
+      },
+    }),
+    [itemStatusOptions, startScriptedForItem, handleItemStatusChange, trackerType, projectId]
+  );
+
   const selectedMetadata = useMemo(() => {
     const map = new Map<string, { labels: string[]; estimate: number | null }>();
     for (const id of multiSelectedItemIds) {
@@ -1184,7 +1269,9 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
         if (cancelled) return;
 
         if (response.status === 404) {
-          replaceSelection({ issue: null, run: null });
+          // Keep the URL params intact so the user can see what was requested;
+          // the detail panel will render a "not found" fallback instead.
+          setSelectedItemFallback(null);
           return;
         }
 
@@ -1194,7 +1281,7 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
 
         const payload = (await response.json().catch(() => ({}))) as { item?: TrackerItem };
         if (!payload.item?.id) {
-          replaceSelection({ issue: null, run: null });
+          setSelectedItemFallback(null);
           return;
         }
 
@@ -1359,6 +1446,26 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
   );
 
   const sentinelRef = useRef<HTMLDivElement | null>(null);
+  const desktopScrollRef = useRef<HTMLDivElement | null>(null);
+  const touchScrollRef = useRef<HTMLDivElement | null>(null);
+  const [showBackToTop, setShowBackToTop] = useState(false);
+
+  useEffect(() => {
+    const containers = [desktopScrollRef.current, touchScrollRef.current].filter(Boolean) as HTMLDivElement[];
+    if (containers.length === 0) return;
+    const handler = (e: Event) => {
+      const el = e.currentTarget as HTMLDivElement;
+      setShowBackToTop(el.scrollTop > 400);
+    };
+    containers.forEach((c) => c.addEventListener("scroll", handler, { passive: true }));
+    return () => containers.forEach((c) => c.removeEventListener("scroll", handler));
+  }, [isTouchLayout]);
+
+  const backToTop = useCallback(() => {
+    const el = desktopScrollRef.current ?? touchScrollRef.current;
+    el?.scrollTo({ top: 0, behavior: "smooth" });
+  }, []);
+
   useEffect(() => {
     const sentinel = sentinelRef.current;
     if (!sentinel || !hasMore) return;
@@ -1427,6 +1534,15 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
                 </button>
               </div>
               <div className="flex flex-wrap items-center gap-1.5 px-3 pb-2">
+                {showGroupFilter ? (
+                  <FilterSelect
+                    label={groupLabel}
+                    value={selectedGroupId}
+                    options={groupOptions}
+                    activeClasses="border-purple-500/30 bg-purple-500/10 text-purple-400"
+                    onChange={setSelectedGroupId}
+                  />
+                ) : null}
                 {showStatusFilter ? (
                   <MultiFilterPopdown
                     label="Status"
@@ -1464,15 +1580,6 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
                     onChange={setSelectedWorkspaceId}
                   />
                 ) : null}
-                {showGroupFilter ? (
-                  <FilterSelect
-                    label={groupLabel}
-                    value={selectedGroupId}
-                    options={groupOptions}
-                    activeClasses="border-purple-500/30 bg-purple-500/10 text-purple-400"
-                    onChange={setSelectedGroupId}
-                  />
-                ) : null}
                 <FilterSelect
                   label="Sort"
                   value={sortBy}
@@ -1496,7 +1603,8 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
               </div>
             </div>
 
-            <div className="flex-1 overflow-y-auto">
+            <div className="relative flex-1 min-h-0 flex flex-col">
+            <div ref={touchScrollRef} className="flex-1 overflow-y-auto">
               {itemsLoading && items.length === 0 ? (
                 <div className="px-3 py-4 text-xs text-[var(--muted-foreground)]">
                   Loading tickets...
@@ -1552,6 +1660,8 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
                                   });
                                 }}
                                 onTogglePin={() => togglePin(item.id)}
+                                rowActions={rowActionsFor(item)}
+                                showGroup={!selectedGroupId}
                               />
                             ))}
                         </React.Fragment>
@@ -1587,6 +1697,8 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
                             });
                           }}
                           onTogglePin={() => togglePin(item.id)}
+                          rowActions={rowActionsFor(item)}
+                          showGroup={!selectedGroupId}
                         />
                       </React.Fragment>
                     ))
@@ -1602,6 +1714,8 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
                 </>
               )}
             </div>
+            <JumpToLatestButton visible={showBackToTop && items.length > 20} direction="top" onClick={backToTop} />
+            </div>
           </div>
 
           {selectedItem ? (
@@ -1817,6 +1931,15 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
             </button>
           </div>
           <div className="flex items-center gap-1.5 px-3 pb-2">
+            {showGroupFilter ? (
+              <FilterSelect
+                label={groupLabel}
+                value={selectedGroupId}
+                options={groupOptions}
+                activeClasses="border-purple-500/30 bg-purple-500/10 text-purple-400"
+                onChange={setSelectedGroupId}
+              />
+            ) : null}
             {showStatusFilter ? (
               <MultiFilterPopdown
                 label="Status"
@@ -1854,15 +1977,6 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
                 onChange={setSelectedWorkspaceId}
               />
             ) : null}
-            {showGroupFilter ? (
-              <FilterSelect
-                label={groupLabel}
-                value={selectedGroupId}
-                options={groupOptions}
-                activeClasses="border-purple-500/30 bg-purple-500/10 text-purple-400"
-                onChange={setSelectedGroupId}
-              />
-            ) : null}
             <FilterSelect
               label="Sort"
               value={sortBy}
@@ -1883,6 +1997,32 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
             >
               {sortDir === "desc" ? <ArrowDown size={12} /> : <ArrowUp size={12} />}
             </button>
+            {labelFilteredItems.length > 0 && (() => {
+              const allSelected =
+                labelFilteredItems.length > 0 &&
+                labelFilteredItems.every((i) => multiSelectedItemIds.has(i.id));
+              return (
+                <button
+                  type="button"
+                  className={`flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] transition-colors ${
+                    allSelected
+                      ? "border-[var(--primary)]/40 bg-[var(--primary)]/10 text-[var(--primary)]"
+                      : "border-[var(--card-border)] text-[var(--muted-foreground)] hover:bg-[var(--card-bg)] hover:text-[var(--foreground)]"
+                  }`}
+                  title={allSelected ? "Clear selection" : "Select all filtered tickets"}
+                  onClick={() => {
+                    if (allSelected) {
+                      setMultiSelectedItemIds(new Set());
+                    } else {
+                      setMultiSelectedItemIds(new Set(labelFilteredItems.map((i) => i.id)));
+                    }
+                  }}
+                >
+                  {allSelected ? <CheckSquare size={12} /> : <Square size={12} />}
+                  {allSelected ? "Clear" : `Select all (${labelFilteredItems.length})`}
+                </button>
+              );
+            })()}
           </div>
         </div>
 
@@ -1892,7 +2032,8 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
           onDragStart={handleDragStart}
           onDragEnd={handleDragEnd}
         >
-        <div className="relative flex-1 overflow-y-auto">
+        <div className="relative flex-1 min-h-0 flex flex-col">
+        <div ref={desktopScrollRef} className="flex-1 overflow-y-auto">
           {itemsLoading && items.length === 0 ? (
             <div className="px-3 py-4 text-xs text-[var(--muted-foreground)]">
               Loading tickets...
@@ -2014,6 +2155,8 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
                                         }
                                       }}
                                       onTogglePin={() => togglePin(gi.id)}
+                                      rowActions={rowActionsFor(gi)}
+                                      showGroup={!selectedGroupId}
                                     />
                                   ))}
                               </React.Fragment>
@@ -2055,6 +2198,8 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
                                 }
                               }}
                               onTogglePin={() => togglePin(item.id)}
+                              rowActions={rowActionsFor(item)}
+                              showGroup={!selectedGroupId}
                             />
                           );
                         });
@@ -2162,6 +2307,8 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
                                 }
                               }}
                               onTogglePin={() => togglePin(gi.id)}
+                              rowActions={rowActionsFor(gi)}
+                              showGroup={!selectedGroupId}
                             />
                           ))}
                       </React.Fragment>
@@ -2209,6 +2356,8 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
                           }
                         }}
                         onTogglePin={() => togglePin(item.id)}
+                        rowActions={rowActionsFor(item)}
+                        showGroup={!selectedGroupId}
                       />
                     </React.Fragment>
                   );
@@ -2242,6 +2391,8 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
             statusUpdating={bulkStatusUpdating}
           />
         </div>
+        <JumpToLatestButton visible={showBackToTop && items.length > 20} direction="top" onClick={backToTop} />
+        </div>
         <DragOverlay dropAnimation={null}>
           {dragActiveId && (() => {
             const dragItem = sortedItemsRef.current.find((i) => i.id === dragActiveId);

package/cloud-runtime/standalone/apps/local/components/activity/ActivityStreamButton.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { Activity } from "lucide-react";
+import type { Participant } from "@/lib/types";
+import { useActivityStream } from "@/hooks/useActivityStream";
+import { useInputCapabilities } from "@/hooks/useInputCapabilities";
+import { ActivityStreamPopover } from "./ActivityStreamPopover";
+
+export function ActivityStreamButton({
+  projectId,
+  participants,
+}: {
+  projectId: string;
+  participants: Participant[];
+}) {
+  const { isTouchLayout } = useInputCapabilities();
+  const { items, activeCount } = useActivityStream(projectId, participants);
+  const [open, setOpen] = useState(false);
+
+  const handleClose = useCallback(() => setOpen(false), []);
+
+  return (
+    <div className="relative">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className={`inline-flex items-center justify-center rounded-lg text-[var(--muted-foreground)] transition-colors hover:text-[var(--foreground)] hover:bg-[var(--app-shell-subtle)] ${isTouchLayout ? "h-9 w-9" : "h-7 w-7"}`}
+        title="Activity stream"
+        aria-label="Activity stream"
+      >
+        <Activity className={isTouchLayout ? "h-4 w-4" : "h-3.5 w-3.5"} />
+        {activeCount > 0 && (
+          <span className="absolute top-0 right-0 h-2 w-2 rounded-full bg-emerald-400 animate-pulse" />
+        )}
+      </button>
+      {open && <ActivityStreamPopover items={items} onClose={handleClose} />}
+    </div>
+  );
+}

package/cloud-runtime/standalone/apps/local/components/activity/ActivityStreamPopover.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import type { ActivityItem } from "@/hooks/useActivityStream";
+import { agentAvatarUrl } from "@/components/chat-ui/ParticipantBar";
+
+const SOURCE_COLORS: Record<string, string> = {
+  Chat: "bg-blue-500/15 text-blue-400",
+  "Scheduled Task": "bg-amber-500/15 text-amber-400",
+  Automation: "bg-purple-500/15 text-purple-400",
+  Daemon: "bg-zinc-500/15 text-zinc-400",
+};
+
+function formatRelativeTime(ts: number): string {
+  const diff = Date.now() - ts;
+  if (diff < 60_000) return "just now";
+  const mins = Math.floor(diff / 60_000);
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  return `${hours}h ago`;
+}
+
+function StatusDot({ status }: { status: string }) {
+  if (status === "running")
+    return <span className="h-1.5 w-1.5 rounded-full bg-emerald-400 animate-pulse shrink-0" />;
+  if (status === "queued")
+    return <span className="h-1.5 w-1.5 rounded-full bg-amber-400 shrink-0" />;
+  if (status === "failed")
+    return <span className="h-1.5 w-1.5 rounded-full bg-red-400 shrink-0" />;
+  return <span className="h-1.5 w-1.5 rounded-full bg-zinc-500 shrink-0" />;
+}
+
+function ActivityRow({ item }: { item: ActivityItem }) {
+  return (
+    <div className="flex items-center gap-2.5 px-3 py-2 hover:bg-[var(--app-shell-subtle)] transition-colors rounded-md">
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        src={agentAvatarUrl(item.agentId ?? item.id, 20, item.agentColor)}
+        alt=""
+        className="h-5 w-5 rounded-full shrink-0"
+      />
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-1.5">
+          <StatusDot status={item.status} />
+          <span className="text-xs font-medium text-[var(--foreground)] truncate">
+            {item.agentName}
+          </span>
+        </div>
+        <p className="text-[10px] text-[var(--muted-foreground)] truncate mt-0.5">
+          {item.title}
+        </p>
+      </div>
+      <div className="flex flex-col items-end gap-0.5 shrink-0">
+        <span className={`text-[9px] px-1.5 py-0.5 rounded-full font-medium ${SOURCE_COLORS[item.source] ?? SOURCE_COLORS.Daemon}`}>
+          {item.source}
+        </span>
+        <span className="text-[10px] text-[var(--muted-foreground)]">
+          {formatRelativeTime(item.startedAt)}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+export function ActivityStreamPopover({
+  items,
+  onClose,
+}: {
+  items: ActivityItem[];
+  onClose: () => void;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handle = (e: PointerEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+    const id = setTimeout(
+      () => document.addEventListener("pointerdown", handle),
+      0
+    );
+    return () => {
+      clearTimeout(id);
+      document.removeEventListener("pointerdown", handle);
+    };
+  }, [onClose]);
+
+  const active = items.filter(
+    (i) => i.status === "running" || i.status === "queued"
+  );
+  const recent = items.filter(
+    (i) => i.status !== "running" && i.status !== "queued"
+  );
+
+  return (
+    <div
+      ref={ref}
+      className="absolute top-full right-0 z-50 mt-1.5 w-80 max-h-96 overflow-y-auto rounded-xl border border-[var(--app-shell-border)] bg-[var(--app-shell-elevated)] shadow-lg"
+    >
+      {items.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-8 px-4">
+          <span className="text-xs text-[var(--muted-foreground)]">
+            No recent activity
+          </span>
+        </div>
+      ) : (
+        <div className="py-1.5">
+          {active.length > 0 && (
+            <div>
+              <div className="px-3 py-1.5">
+                <span className="text-[10px] font-semibold uppercase tracking-wider text-[var(--muted-foreground)]">
+                  Active Now
+                </span>
+              </div>
+              {active.map((item) => (
+                <ActivityRow key={item.id} item={item} />
+              ))}
+            </div>
+          )}
+          {recent.length > 0 && (
+            <div>
+              {active.length > 0 && (
+                <div className="mx-3 my-1 border-t border-[var(--app-shell-border)]" />
+              )}
+              <div className="px-3 py-1.5">
+                <span className="text-[10px] font-semibold uppercase tracking-wider text-[var(--muted-foreground)]">
+                  Recent
+                </span>
+              </div>
+              {recent.map((item) => (
+                <ActivityRow key={item.id} item={item} />
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/cloud-runtime/standalone/apps/local/components/chat-ui/JumpToLatestButton.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { ChevronDown, ChevronUp } from "lucide-react";
+
+interface Props {
+    visible: boolean;
+    onClick: () => void;
+    direction?: "top" | "bottom";
+    label?: string;
+    offsetClassName?: string;
+}
+
+export function JumpToLatestButton({ visible, onClick, direction = "bottom", label, offsetClassName }: Props) {
+    if (!visible) return null;
+    const Icon = direction === "top" ? ChevronUp : ChevronDown;
+    const resolvedLabel = label ?? (direction === "top" ? "Back to top" : "Jump to latest");
+    const offset = offsetClassName ?? (direction === "top" ? "top-3" : "bottom-3");
+    return (
+        <div className={`pointer-events-none absolute inset-x-0 ${offset} z-10 flex justify-center`}>
+            <button
+                type="button"
+                onClick={onClick}
+                className={`pointer-events-auto inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full border border-[var(--app-shell-border)] bg-[var(--app-shell-surface)] text-[var(--foreground)] text-xs font-medium shadow-md hover:bg-[var(--app-shell-elevated)] transition-colors animate-in fade-in ${direction === "top" ? "slide-in-from-top-1" : "slide-in-from-bottom-1"} duration-200`}
+            >
+                <Icon className="w-3.5 h-3.5" />
+                {resolvedLabel}
+            </button>
+        </div>
+    );
+}