From ce7762979094779b21fc15879d95e99f0e6b592e Mon Sep 17 00:00:00 2001
From: stopachka <stepan.p@gmail.com>
Date: Wed, 27 May 2026 15:23:28 -0700
Subject: [PATCH 1/3] Make the URL the source of truth for the dashboard
 workspace

The current workspace was tracked in four places that fought each other
(React state, the `org` query param, the selected app's owner, and
localStorage), which caused races: switching orgs snapped back to
personal, switching to personal snapped back to the org, and the org
settings gear flashed then redirected to /dash.

Derive currentWorkspaceId from the `org` query param instead, so there's
no lag between navigation and state. localStorage is now only a
cold-start default (restore the last workspace on a bare /dash), read
once and consumed on an explicit switch. Navigation flows through a
single goToApp helper that always carries `org` forward.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../www/components/dash/BackToAppsButton.tsx  |  5 +-
 client/www/components/dash/MainDashLayout.tsx | 91 ++++++++++---------
 client/www/components/dash/ProfilePanel.tsx   | 16 +---
 client/www/pages/dash/index.tsx               | 81 +++++++++--------
 4 files changed, 98 insertions(+), 95 deletions(-)

diff --git a/client/www/components/dash/BackToAppsButton.tsx b/client/www/components/dash/BackToAppsButton.tsx
index c026edd0c5..87a3f59f2a 100644
--- a/client/www/components/dash/BackToAppsButton.tsx
+++ b/client/www/components/dash/BackToAppsButton.tsx
@@ -1,8 +1,11 @@
 import { ArrowUturnLeftIcon } from '@heroicons/react/24/outline';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
 import { createPortal } from 'react-dom';
 
 export const BackToAppsButton = () => {
+  const router = useRouter();
+  const org = router.query.org as string | undefined;
   const element = document.getElementById('left-top-bar')!;
   if (!element) {
     return null;
@@ -10,7 +13,7 @@ export const BackToAppsButton = () => {
   return createPortal(
     <Link
       className="ml-4 flex items-center gap-2 rounded-xs p-1 px-2 text-sm opacity-70 transition-colors hover:bg-gray-200/50 dark:hover:bg-neutral-700/60"
-      href="/dash"
+      href={org ? `/dash?org=${org}` : '/dash'}
     >
       <ArrowUturnLeftIcon width={12} />
       Back to Apps
diff --git a/client/www/components/dash/MainDashLayout.tsx b/client/www/components/dash/MainDashLayout.tsx
index f993700ead..b38a359d15 100644
--- a/client/www/components/dash/MainDashLayout.tsx
+++ b/client/www/components/dash/MainDashLayout.tsx
@@ -19,17 +19,17 @@ import { useRouter } from 'next/router';
 
 export type FetchedDash = ReturnType<typeof useFetchedDash>;
 
-const getInitialWorkspace = () => {
-  // pull from the "org" query param
-  const org = new URLSearchParams(window.location.search).get('org');
+const WORKSPACE_STORAGE_KEY = 'workspace';
 
-  if (org) return org;
-  if (!window) return 'personal';
+const getSavedWorkspace = () =>
+  typeof window === 'undefined'
+    ? null
+    : window.localStorage.getItem(WORKSPACE_STORAGE_KEY);
 
-  const possibleSaved = window.localStorage.getItem('workspace');
-
-  if (possibleSaved) return possibleSaved;
-  return 'personal';
+const saveWorkspace = (workspaceId: string) => {
+  if (typeof window !== 'undefined') {
+    window.localStorage.setItem(WORKSPACE_STORAGE_KEY, workspaceId);
+  }
 };
 
 export const { use: useFetchedDash, provider: DashFetchProvider } =
@@ -37,9 +37,38 @@ export const { use: useFetchedDash, provider: DashFetchProvider } =
     'dashResponse',
     (args?: { workspaceId?: string | null | undefined }) => {
       const dashResult = useDashFetch();
-      const [currentWorkspaceId, setWorkspace] = useState<string | 'personal'>(
-        args?.workspaceId || getInitialWorkspace(),
-      );
+      const router = useReadyRouter();
+
+      // Read once: the workspace we were in last time, used to reopen a bare
+      // /dash where you left off. An explicit switch clears it so a restored
+      // default never overrides a deliberate choice.
+      const [restoredWorkspace, setRestoredWorkspace] =
+        useState(getSavedWorkspace);
+
+      // The URL is the source of truth. With no `org` in the URL we use the
+      // restored workspace on a bare entry, otherwise personal. An `app` in the
+      // URL resolves its own workspace (see pages/dash), so we don't restore
+      // then. The devtool seeds the workspace via `args`.
+      const urlOrg = router.query.org as string | undefined;
+      const isBareEntry = !urlOrg && !router.query.app;
+      const currentWorkspaceId =
+        urlOrg ??
+        args?.workspaceId ??
+        (isBareEntry ? restoredWorkspace : null) ??
+        'personal';
+
+      const setWorkspace = (
+        workspaceId: string | 'personal',
+        opts?: { replace?: boolean },
+      ) => {
+        setRestoredWorkspace(null);
+        const query = workspaceId === 'personal' ? {} : { org: workspaceId };
+        if (opts?.replace) {
+          router.replace({ query });
+        } else {
+          router.push({ query });
+        }
+      };
 
       const workspace = useWorkspace(dashResult, currentWorkspaceId);
 
@@ -48,43 +77,19 @@ export const { use: useFetchedDash, provider: DashFetchProvider } =
         await workspace.mutate();
       };
 
-      const router = useReadyRouter();
+      // Remember the current workspace so the next bare /dash can restore it.
+      useEffect(() => {
+        saveWorkspace(currentWorkspaceId);
+      }, [currentWorkspaceId]);
 
+      // If we can't load the org (e.g. we were removed from it) fall back to
+      // the personal account.
       useEffect(() => {
         if (workspace.error) {
-          setWorkspace('personal');
+          setWorkspace('personal', { replace: true });
         }
       }, [workspace.error]);
 
-      useEffect(() => {
-        if (typeof window === 'undefined') return;
-
-        window.localStorage.setItem('workspace', currentWorkspaceId);
-
-        // Use Next.js router for navigation instead of direct history manipulation
-        const currentUrl = new URL(window.location.href);
-
-        // set the query param
-        // if its personal remove the query param
-        if (currentWorkspaceId === 'personal') {
-          if (currentUrl.searchParams.has('org')) {
-            const newUrl = new URL(window.location.href);
-            newUrl.searchParams.delete('org');
-            router.replace(newUrl.pathname + newUrl.search, undefined, {
-              shallow: true,
-            });
-          }
-        } else {
-          if (currentUrl.searchParams.get('org') !== currentWorkspaceId) {
-            const newUrl = new URL(window.location.href);
-            newUrl.searchParams.set('org', currentWorkspaceId);
-            router.replace(newUrl.pathname + newUrl.search, undefined, {
-              shallow: true,
-            });
-          }
-        }
-      }, [currentWorkspaceId, router.pathname]);
-
       const addNewAppOptimistically = (
         promise: Promise<any>,
         app: InstantApp,
diff --git a/client/www/components/dash/ProfilePanel.tsx b/client/www/components/dash/ProfilePanel.tsx
index 6cd5eaf85c..6941ad40d5 100644
--- a/client/www/components/dash/ProfilePanel.tsx
+++ b/client/www/components/dash/ProfilePanel.tsx
@@ -8,7 +8,6 @@ import {
 } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import Link from 'next/link';
-import { useReadyRouter } from '../clientOnlyPage';
 import { UserSettingsIcon } from '../icons/UserSettingsIcon';
 import {
   Button,
@@ -24,7 +23,6 @@ import { useFlag } from '@/lib/hooks/useFlag';
 
 export const ProfilePanel = () => {
   const dashResponse = useFetchedDash();
-  const router = useReadyRouter();
 
   const email = dashResponse.data.user.email;
 
@@ -74,9 +72,8 @@ export const ProfilePanel = () => {
                 )}
               >
                 <button
-                  onClick={async () => {
+                  onClick={() => {
                     dashResponse.setWorkspace('personal');
-                    router.push('/dash');
                     close();
                   }}
                   className="grow px-2 py-2 text-left"
@@ -110,10 +107,6 @@ export const ProfilePanel = () => {
                   <button
                     onClick={() => {
                       dashResponse.setWorkspace(org.id);
-                      router.push({
-                        pathname: '/dash',
-                        query: { org: org.id },
-                      });
                       close();
                     }}
                     className="grow px-2 py-2 text-left"
@@ -132,11 +125,8 @@ export const ProfilePanel = () => {
                     <Tooltip>
                       <TooltipTrigger onClick={() => {}}>
                         <Link
-                          href="/dash/org"
-                          onClick={() => {
-                            dashResponse.setWorkspace(org.id);
-                            close();
-                          }}
+                          href={`/dash/org?org=${org.id}`}
+                          onClick={() => close()}
                         >
                           <div className="p-3 transition-colors hover:bg-gray-200 dark:hover:bg-neutral-600">
                             <Cog6ToothIcon height={16} width={16} />
diff --git a/client/www/pages/dash/index.tsx b/client/www/pages/dash/index.tsx
index 9b73e941f4..65e72adc8a 100644
--- a/client/www/pages/dash/index.tsx
+++ b/client/www/pages/dash/index.tsx
@@ -282,6 +282,29 @@ function Dashboard() {
     ...(cliOauthTicket ? { [cliOauthParamName]: cliOauthTicket } : {}),
   };
 
+  // The one way to open an app. `org` is how the workspace lives in the URL,
+  // so it has to ride along on every dashboard navigation; doing it here means
+  // no call site can forget. Pass `workspace` to move to a different one.
+  const goToApp = (
+    appId: string | undefined,
+    opts?: {
+      workspace?: string | 'personal';
+      tab?: string;
+      replace?: boolean;
+    },
+  ) => {
+    const workspace = opts?.workspace ?? fetchedDash.data.currentWorkspaceId;
+    const query = {
+      s: 'main',
+      ...(appId ? { app: appId } : {}),
+      t: opts?.tab ?? tab,
+      ...(workspace !== 'personal' ? { org: workspace } : {}),
+    };
+    return opts?.replace
+      ? router.replace({ query })
+      : router.push({ query });
+  };
+
   // Local states
   const [hideAppId, setHideAppId] = useLocalStorage('hide_app_id', false);
 
@@ -340,13 +363,7 @@ function Dashboard() {
   useEffect(() => {
     if (!app) return;
     if (!router.query.app || !router.query.t) {
-      router.replace({
-        query: {
-          s: 'main',
-          app: app.id,
-          t: tab,
-        },
-      });
+      goToApp(app.id, { replace: true });
     }
   }, [app, router.query.app]);
 
@@ -370,13 +387,7 @@ function Dashboard() {
     const replaceDefault = () => {
       if (!defaultAppId) return;
 
-      router.replace({
-        query: {
-          s: 'main',
-          app: defaultAppId,
-          t: tab,
-        },
-      });
+      goToApp(defaultAppId, { replace: true });
 
       setLocallySavedApp({
         id: defaultAppId,
@@ -399,20 +410,14 @@ function Dashboard() {
             dashResponse.data?.currentWorkspaceId &&
             dashResponse.data?.currentWorkspaceId !== 'personal'
           ) {
-            dashResponse.setWorkspace('personal');
+            // The app is personally owned; follow it to the personal account.
+            goToApp(appId, { workspace: 'personal', replace: true });
           } else if (
             res?.app?.org_id &&
             res?.app?.org_id !== router.query.org
           ) {
-            dashResponse.setWorkspace(res.app.org_id);
-            router.replace({
-              query: {
-                s: 'main',
-                app: appId,
-                org: res?.app?.org_id,
-                t: tab,
-              },
-            });
+            // The app lives in another org; follow it there.
+            goToApp(appId, { workspace: res.app.org_id, replace: true });
           } else {
             replaceDefault();
           }
@@ -469,15 +474,11 @@ function Dashboard() {
       });
     }
 
-    router
-      .push({
-        query: q,
-      })
-      .then(() => {
-        if (opts?.cb) {
-          opts.cb();
-        }
-      });
+    goToApp(q.app, { tab: q.t }).then(() => {
+      if (opts?.cb) {
+        opts.cb();
+      }
+    });
   }
 
   async function onDeleteApp(app: InstantApp) {
@@ -537,10 +538,14 @@ function Dashboard() {
   }
 
   if (apps.length === 0) {
+    const workspaceId = dashResponse.data.currentWorkspaceId;
     router.replace(
       {
         pathname: '/dash/new',
-        query: cliTicketQuery,
+        query: {
+          ...cliTicketQuery,
+          ...(workspaceId !== 'personal' ? { org: workspaceId } : {}),
+        },
       },
       undefined,
       { shallow: true },
@@ -1035,10 +1040,11 @@ function AppCombobox({
   appId: string;
   tab: MainTabId;
 }) {
+  const workspaceId = useFetchedDash().data.currentWorkspaceId;
   const currentApp = apps.find((a) => a.id === appId) || null;
   const [appQuery, setAppQuery] = useState('');
   const [pinnedIds, setPinnedIds] = useState(() =>
-    getPinnedAppIds(localStorage.getItem('workspace')),
+    getPinnedAppIds(workspaceId),
   );
   const comboboxInputRef = useRef<HTMLInputElement | null>(null);
 
@@ -1126,9 +1132,8 @@ function AppCombobox({
                     onPointerDown={(e) => {
                       e.preventDefault();
                       e.stopPropagation();
-                      const wsId = localStorage.getItem('workspace');
-                      togglePinnedApp(app.id, wsId);
-                      setPinnedIds(getPinnedAppIds(wsId));
+                      togglePinnedApp(app.id, workspaceId);
+                      setPinnedIds(getPinnedAppIds(workspaceId));
                     }}
                     title={isPinned ? 'Unpin app' : 'Pin app to top'}
                   >

From 1b199b61975e6b0255e1df8401a987c1fe63fd69 Mon Sep 17 00:00:00 2001
From: stopachka <stepan.p@gmail.com>
Date: Wed, 27 May 2026 15:34:34 -0700
Subject: [PATCH 2/3] roar

---
 client/www/components/dash/MainDashLayout.tsx | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/client/www/components/dash/MainDashLayout.tsx b/client/www/components/dash/MainDashLayout.tsx
index b38a359d15..d57069cf59 100644
--- a/client/www/components/dash/MainDashLayout.tsx
+++ b/client/www/components/dash/MainDashLayout.tsx
@@ -45,17 +45,17 @@ export const { use: useFetchedDash, provider: DashFetchProvider } =
       const [restoredWorkspace, setRestoredWorkspace] =
         useState(getSavedWorkspace);
 
-      // The URL is the source of truth. With no `org` in the URL we use the
-      // restored workspace on a bare entry, otherwise personal. An `app` in the
-      // URL resolves its own workspace (see pages/dash), so we don't restore
-      // then. The devtool seeds the workspace via `args`.
-      const urlOrg = router.query.org as string | undefined;
-      const isBareEntry = !urlOrg && !router.query.app;
-      const currentWorkspaceId =
-        urlOrg ??
-        args?.workspaceId ??
-        (isBareEntry ? restoredWorkspace : null) ??
-        'personal';
+      // The URL is the source of truth. With no `org` we reopen the workspace
+      // you were last in (a bare entry); an `app` in the URL resolves its own
+      // workspace (see pages/dash), so we skip the restore then. The devtool
+      // seeds the workspace via `args`.
+      const getWorkspaceId = (): string => {
+        if (router.query.org) return router.query.org as string;
+        if (args?.workspaceId) return args.workspaceId;
+        if (restoredWorkspace && !router.query.app) return restoredWorkspace;
+        return 'personal';
+      };
+      const currentWorkspaceId = getWorkspaceId();
 
       const setWorkspace = (
         workspaceId: string | 'personal',

From 88b1d9e0661ff6bed419d0ae53e31e539ae7be17 Mon Sep 17 00:00:00 2001
From: stopachka <stepan.p@gmail.com>
Date: Wed, 27 May 2026 15:38:41 -0700
Subject: [PATCH 3/3] Build dash query params with a helper instead of a
 navigate wrapper

Replace goToApp (which coupled query-building with the push/replace
decision) with a pure dashQueryParams() builder. Callers hand the result
to router.replace/push directly, keeping the navigation explicit while
still guaranteeing `org` rides along.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 client/www/pages/dash/index.tsx | 55 +++++++++++++++++----------------
 1 file changed, 28 insertions(+), 27 deletions(-)

diff --git a/client/www/pages/dash/index.tsx b/client/www/pages/dash/index.tsx
index 65e72adc8a..9d8afdf0c0 100644
--- a/client/www/pages/dash/index.tsx
+++ b/client/www/pages/dash/index.tsx
@@ -282,27 +282,22 @@ function Dashboard() {
     ...(cliOauthTicket ? { [cliOauthParamName]: cliOauthTicket } : {}),
   };
 
-  // The one way to open an app. `org` is how the workspace lives in the URL,
-  // so it has to ride along on every dashboard navigation; doing it here means
-  // no call site can forget. Pass `workspace` to move to a different one.
-  const goToApp = (
-    appId: string | undefined,
-    opts?: {
-      workspace?: string | 'personal';
-      tab?: string;
-      replace?: boolean;
-    },
-  ) => {
-    const workspace = opts?.workspace ?? fetchedDash.data.currentWorkspaceId;
-    const query = {
+  // Build the canonical /dash query. `org` is how the workspace lives in the
+  // URL, so it's always included for an org workspace and no call site has to
+  // remember it. Defaults to the current workspace; pass `workspace` to target
+  // another. Hand the result to router.replace/push.
+  const dashQueryParams = (input?: {
+    app?: string;
+    tab?: string;
+    workspace?: string | 'personal';
+  }) => {
+    const workspace = input?.workspace ?? fetchedDash.data.currentWorkspaceId;
+    return {
       s: 'main',
-      ...(appId ? { app: appId } : {}),
-      t: opts?.tab ?? tab,
+      ...(input?.app ? { app: input.app } : {}),
+      t: input?.tab ?? tab,
       ...(workspace !== 'personal' ? { org: workspace } : {}),
     };
-    return opts?.replace
-      ? router.replace({ query })
-      : router.push({ query });
   };
 
   // Local states
@@ -363,7 +358,7 @@ function Dashboard() {
   useEffect(() => {
     if (!app) return;
     if (!router.query.app || !router.query.t) {
-      goToApp(app.id, { replace: true });
+      router.replace({ query: dashQueryParams({ app: app.id }) });
     }
   }, [app, router.query.app]);
 
@@ -387,7 +382,7 @@ function Dashboard() {
     const replaceDefault = () => {
       if (!defaultAppId) return;
 
-      goToApp(defaultAppId, { replace: true });
+      router.replace({ query: dashQueryParams({ app: defaultAppId }) });
 
       setLocallySavedApp({
         id: defaultAppId,
@@ -411,13 +406,17 @@ function Dashboard() {
             dashResponse.data?.currentWorkspaceId !== 'personal'
           ) {
             // The app is personally owned; follow it to the personal account.
-            goToApp(appId, { workspace: 'personal', replace: true });
+            router.replace({
+              query: dashQueryParams({ app: appId, workspace: 'personal' }),
+            });
           } else if (
             res?.app?.org_id &&
             res?.app?.org_id !== router.query.org
           ) {
             // The app lives in another org; follow it there.
-            goToApp(appId, { workspace: res.app.org_id, replace: true });
+            router.replace({
+              query: dashQueryParams({ app: appId, workspace: res.app.org_id }),
+            });
           } else {
             replaceDefault();
           }
@@ -474,11 +473,13 @@ function Dashboard() {
       });
     }
 
-    goToApp(q.app, { tab: q.t }).then(() => {
-      if (opts?.cb) {
-        opts.cb();
-      }
-    });
+    router
+      .push({ query: dashQueryParams({ app: q.app, tab: q.t }) })
+      .then(() => {
+        if (opts?.cb) {
+          opts.cb();
+        }
+      });
   }
 
   async function onDeleteApp(app: InstantApp) {