fix(product-view): PR URLs, toolbar overflow, and mid-login view resets

- parseGithubRemote: trim the remote URL — `git remote get-url` output ends
  with a newline, which stopped the ".git" suffix from being stripped, so
  merged-PR links pointed at github.com/<owner>/<repo>.git/pull/N (404) and
  the gh open-PR lookup got a garbage --repo value. Also accept ssh:// remotes.
- toolbar: flex-wrap the row and truncate pill labels / the data badge so
  environments flow to a second line instead of crushing the URL bar.
- stop resetting the embedded page mid-session: create() no longer navigates
  an existing view back to the environment's debounce-persisted URL, and the
  slot effect no longer tears down/reopens when the environments query
  refetches — either could yank a multi-step login back to a stale page.

Generated-By: PostHog Code
Task-Id: 1120fcea-fc07-4c54-8dbb-50b7b712f9cb

Author: DanielVisca

apps/code/src/main/platform-adapters/electron-embedded-browser.ts

@@ -77,13 +77,14 @@ export class ElectronEmbeddedBrowser
   async create(options: EmbeddedBrowserCreateOptions): Promise<void> {
     const existing = this.views.get(options.viewId);
     if (existing) {
-      // Re-opening a kept-alive view (tab switch back): re-glue and re-show it;
-      // only navigate when the caller actually wants a different page.
+      // Re-opening a kept-alive view (tab switch back): re-glue and re-show
+      // it exactly where the user left it. Never navigate here — options.url
+      // is the environment's SAVED url, which lags the live page (it's
+      // debounce-persisted), so "restoring" it would yank an in-progress
+      // flow (a multi-step login, a checkout) back to a stale page.
+      // Explicit navigation goes through navigate().
       this.setBounds(options.viewId, options.bounds);
       existing.setVisible(true);
-      if (existing.webContents.getURL() !== options.url) {
-        await this.navigate(options.viewId, options.url);
-      }
       this.emitPageState(options.viewId, existing);
       return;
     }

packages/ui/src/features/product-view/ProductView.tsx

@@ -186,7 +186,9 @@ function ProductBrowser(props: {
 
   return (
     <div className="flex h-full flex-col">
-      <div className="flex items-center gap-1 border-gray-4 border-b px-2 py-1.5">
+      {/* flex-wrap: with several environments (or a narrow window) the row
+          flows onto a second line instead of crushing the URL bar. */}
+      <div className="flex flex-wrap items-center gap-1 border-gray-4 border-b px-2 py-1.5">
         <Button
           size="icon-sm"
           aria-label="Back"
@@ -211,7 +213,7 @@ function ProductBrowser(props: {
           <ArrowClockwiseIcon size={14} />
         </Button>
         <Input
-          className="h-7 flex-1 font-mono text-xs"
+          className="h-7 min-w-48 flex-1 font-mono text-xs"
           value={draftUrl ?? currentUrl}
           onChange={(e) => setDraftUrl(e.target.value)}
           onFocus={(e) => e.target.select()}
@@ -259,9 +261,9 @@ function ProductBrowser(props: {
         </Button>
         <Badge
           variant="default"
-          title="Analytics overlaid on this page come from this PostHog project"
+          title={`Analytics overlaid on this page come from the "${dataProjectName}" PostHog project`}
         >
-          Data: {dataProjectName}
+          <span className="max-w-40 truncate">Data: {dataProjectName}</span>
         </Badge>
       </div>
       <div className="flex min-h-0 flex-1 flex-row">
@@ -323,7 +325,7 @@ function EnvironmentPill(props: {
             ) : (
               <GlobeIcon size={14} />
             )}
-            {environment.label}
+            <span className="max-w-32 truncate">{environment.label}</span>
           </Button>
         }
       />

packages/ui/src/features/product-view/useProductView.ts

@@ -67,6 +67,13 @@ export function useProductViewSlot(input: {
   const setBoundsMutate = setBounds.mutate;
   const setVisibleMutate = setVisible.mutate;
 
+  // url/dataProjectId are only consumed when the view is first opened; they
+  // must NOT be effect deps. The url is the environment's persisted currentUrl,
+  // which updates (via query refetch) as the user browses — re-running the
+  // effect on that would hide/reopen the live view mid-session.
+  const openParamsRef = useRef({ url, dataProjectId });
+  openParamsRef.current = { url, dataProjectId };
+
   useEffect(() => {
     const slot = slotRef.current;
     if (!slot) return;
@@ -89,7 +96,14 @@ export function useProductViewSlot(input: {
       lastRect = key;
       if (!openedRef.current) {
         openedRef.current = true;
-        void openMutate({ viewId, url, bounds, dataProjectId }).catch(() => {
+        const { url: openUrl, dataProjectId: openProjectId } =
+          openParamsRef.current;
+        void openMutate({
+          viewId,
+          url: openUrl,
+          bounds,
+          dataProjectId: openProjectId,
+        }).catch(() => {
           openedRef.current = false;
         });
       } else {
@@ -117,14 +131,7 @@ export function useProductViewSlot(input: {
       setVisibleMutate({ viewId, visible: false });
       openedRef.current = false;
     };
-  }, [
-    viewId,
-    url,
-    dataProjectId,
-    openMutate,
-    setBoundsMutate,
-    setVisibleMutate,
-  ]);
+  }, [viewId, openMutate, setBoundsMutate, setVisibleMutate]);
 
   // Renderer overlays (command menu, toolbar menus) cannot paint over the
   // native view — hide the view while any of them is open.

packages/workspace-server/src/services/product-view/prImpact.test.ts

@@ -32,6 +32,16 @@ describe("parseGithubRemote", () => {
       "https://github.com/PostHog/posthog",
       { owner: "PostHog", repo: "posthog" },
     ],
+    // `git remote get-url` output has a trailing newline — must not leak
+    // ".git" into the repo name (broken /pull/ URLs).
+    [
+      "https://github.com/PostHog/posthog.git\n",
+      { owner: "PostHog", repo: "posthog" },
+    ],
+    [
+      "ssh://git@github.com/PostHog/posthog.git",
+      { owner: "PostHog", repo: "posthog" },
+    ],
     ["https://gitlab.com/x/y.git", null],
     ["nonsense", null],
   ])("%s", (remote, expected) => {

packages/workspace-server/src/services/product-view/prImpact.ts

@@ -31,9 +31,13 @@ export function extractPrNumber(subject: string): number | null {
 export function parseGithubRemote(
   remoteUrl: string,
 ): { owner: string; repo: string } | null {
-  const match = remoteUrl.match(
-    /^(?:https:\/\/github\.com\/|git@github\.com:)([^/]+)\/([^/]+?)(?:\.git)?\/?$/,
-  );
+  // `git remote get-url` output arrives with a trailing newline; without the
+  // trim the repo group swallows ".git" and every PR URL 404s.
+  const match = remoteUrl
+    .trim()
+    .match(
+      /^(?:https:\/\/github\.com\/|(?:ssh:\/\/)?git@github\.com[:/])([^/]+)\/([^/]+?)(?:\.git)?\/?$/,
+    );
   if (!match) return null;
   return { owner: match[1], repo: match[2] };
 }