Refine issue workflow surfaces and live updates

ui/src/components/Layout.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { BookOpen, Moon, Settings, Sun } from "lucide-react";
-import { Link, Outlet, useLocation, useNavigate, useParams } from "@/lib/router";
+import { Link, Outlet, useLocation, useNavigate, useNavigationType, useParams } from "@/lib/router";
 import { CompanyRail } from "./CompanyRail";
 import { Sidebar } from "./Sidebar";
 import { InstanceSidebar } from "./InstanceSidebar";
@@ -32,6 +32,11 @@ import {
   DEFAULT_INSTANCE_SETTINGS_PATH,
   normalizeRememberedInstanceSettingsPath,
 } from "../lib/instance-settings";
+import {
+  resetNavigationScroll,
+  SIDEBAR_SCROLL_RESET_STATE,
+  shouldResetScrollOnNavigation,
+} from "../lib/navigation-scroll";
 import { queryKeys } from "../lib/queryKeys";
 import { scheduleMainContentFocus } from "../lib/main-content-focus";
 import { cn } from "../lib/utils";
@@ -66,9 +71,12 @@ export function Layout() {
   const { companyPrefix } = useParams<{ companyPrefix: string }>();
   const navigate = useNavigate();
   const location = useLocation();
+  const navigationType = useNavigationType();
   const isInstanceSettingsRoute = location.pathname.startsWith("/instance/");
   const onboardingTriggered = useRef(false);
   const lastMainScrollTop = useRef(0);
+  const previousPathname = useRef<string | null>(null);
+  const mainContentRef = useRef<HTMLElement | null>(null);
   const [mobileNavVisible, setMobileNavVisible] = useState(true);
   const [instanceSettingsTarget, setInstanceSettingsTarget] = useState<string>(() => readRememberedInstanceSettingsPath());
   const [shortcutsOpen, setShortcutsOpen] = useState(false);
@@ -271,10 +279,24 @@ export function Layout() {
 
   useEffect(() => {
     if (typeof document === "undefined") return;
-    const mainContent = document.getElementById("main-content");
+    const mainContent = mainContentRef.current;
     return scheduleMainContentFocus(mainContent);
   }, [location.pathname]);
 
+  useEffect(() => {
+    const shouldResetScroll = shouldResetScrollOnNavigation({
+      previousPathname: previousPathname.current,
+      pathname: location.pathname,
+      navigationType,
+      state: location.state,
+    });
+
+    previousPathname.current = location.pathname;
+
+    if (!shouldResetScroll) return;
+    resetNavigationScroll(mainContentRef.current);
+  }, [location.pathname, navigationType]);
+
   return (
     <GeneralSettingsProvider value={{ keyboardShortcutsEnabled }}>
       <div
@@ -334,6 +356,7 @@ export function Layout() {
                 <Button variant="ghost" size="icon-sm" className="text-muted-foreground shrink-0" asChild>
                   <Link
                     to={instanceSettingsTarget}
+                    state={SIDEBAR_SCROLL_RESET_STATE}
                     aria-label="Instance settings"
                     title="Instance settings"
                     onClick={() => {
@@ -392,6 +415,7 @@ export function Layout() {
                 <Button variant="ghost" size="icon-sm" className="text-muted-foreground shrink-0" asChild>
                   <Link
                     to={instanceSettingsTarget}
+                    state={SIDEBAR_SCROLL_RESET_STATE}
                     aria-label="Instance settings"
                     title="Instance settings"
                     onClick={() => {
@@ -428,6 +452,7 @@ export function Layout() {
           <div className={cn(isMobile ? "block" : "flex flex-1 min-h-0")}>
             <main
               id="main-content"
+              ref={mainContentRef}
               tabIndex={-1}
               className={cn(
                 "flex-1 p-4 outline-none md:p-6",